@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: normal;
    src:
/* url(OpenSansRegularWoffTwo) format('woff2'),
url(OpenSansRegularWoff) format('woff'); */
        url("./fonts/files/open-sans-v18-latin-regular.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-regular.woff") format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: normal;
    src:
        url("./fonts/files/open-sans-v18-latin-italic.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-italic.woff") format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src:
        url("./fonts/files/open-sans-v18-latin-700.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-700.woff") format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src:
        url("./fonts/files/open-sans-v18-latin-light.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-light.woff") format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300;
    src:
        url("./fonts/files/open-sans-v18-latin-light-italic.woff2")
            format("woff2"),
        url("./fonts/files/open-sans-v18-latin-light-italic.woff")
            format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 700;
    src:
        url("./fonts/files/open-sans-v18-latin-700italic.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-700italic.woff") format("woff");
}
html {
    font-family: "Open Sans" !important;
    --menuWidth: 220px;
    --mainBlue: #1a5a99;
    --lightBlue: hsl(209, 54%, 82%);
    --solidLightBlue: #8fb8de;
    --mainGray: #e3e3e3;
    --donutBody: #eea177;
    --donutTopping: #6d4445;
    --mainBorder: 2px solid black;
    --mainBorderRadius: 5px;
    --mainRed: #c1292e;
    --lightRed: hsl(0, 54%, 82%);
    --mainGreen: #3e844a;
    --canvas: white;
    --canvasText: black;
    --revealButtonSurface: #e3e3e3;
    --graphHandle: #404040;
    --lightGreen: #a6f19f;
    --lightYellow: #f5ed85;
    --whiteBlankLink: #6d4445;
    --mainYellow: #94610a;
    --lightOrange: #efab34;
    --mainOrange: #a36600;
    --mainPurple: #4a03d9;
    --errorText: var(--mainRed);
    --indicatorHoverBlue: var(--lightBlue);
    --buttonHoverBlue: var(--lightBlue);
    --doenetTagColor: #3e844a;
}

[data-theme="dark"] {
    font-family: "Open Sans" !important;
    --menuWidth: 220px;
    --mainBlue: #1a5a99;
    --lightBlue: #1e3a5f;
    --solidLightBlue: #1a5a99;
    --mainGray: #a9a9a9;
    --donutBody: #eea177;
    --donutTopping: #6d4445;
    --mainBorder: 2px solid white;
    --mainBorderRadius: 5px;
    --mainRed: #c1292e;
    --lightRed: #7f1d1d;
    --mainGreen: #3e844a;
    --canvas: #121212;
    --canvasText: white;
    --revealButtonSurface: #3a3a3a;
    --graphHandle: #b0b0b0;
    --lightGreen: #1a5e20;
    --lightYellow: #f5ed85;
    --whiteBlankLink: #a9abe5;
    --mainYellow: #efab34;
    --lightOrange: #7a3e00;
    --mainOrange: #a36600;
    --mainPurple: #7c3aed;
    --errorText: #ff6b6b;
    --indicatorHoverBlue: #5b8cb5;
    --buttonHoverBlue: hsl(209, 54%, 82%);
    --doenetTagColor: #5cb870;
}
.doenet-viewer {
    font-family: "Open Sans" !important;
    color: var(--canvasText);
    overflow-x: auto;
}
.doenet-viewer h1 {
    font-size: 2em;
    font-weight: bold;
}
.doenet-viewer h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}
.doenet-viewer h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin-block-start: 1em;
    margin-block-end: 1em;
}
.doenet-viewer h4 {
    font-weight: bold;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
}
.doenet-viewer h5 {
    font-size: 0.83em;
    font-weight: bold;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
}
.doenet-viewer p {
    margin-block-start: 1em;
    margin-block-end: 1em;
}
.doenet-viewer input {
    box-sizing: content-box;
    padding: 2px 1px;
}
div.jxgbox input {
    border-width: 2px;
}
div.jxgbox button {
    margin: 0;
    border-radius: 20px;
    border-width: 0px;
    border-style: hidden;
    padding: 0px 10px;
    color: white;
    height: 24px;
}
div.jxgbox input[type="checkbox"] {
    margin: 3px 3px 3px 4px;
    height: 18px;
    width: 18px;
}

/*
    Copyright 2008-2025
        Matthias Ehmann,
        Michael Gerhaeuser,
        Carsten Miller,
        Bianca Valentin,
        Andreas Walter,
        Alfred Wassermann,
        Peter Wilfahrt

    This file is part of JSXGraph.

    JSXGraph is free software dual licensed under the GNU LGPL or MIT License.

    You can redistribute it and/or modify it under the terms of the

      * GNU Lesser General Public License as published by
        the Free Software Foundation, either version 3 of the License, or
        (at your option) any later version
      OR
      * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT

    JSXGraph is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public License and
    the MIT License along with JSXGraph. If not, see <https://www.gnu.org/licenses/>
    and <https://opensource.org/licenses/MIT/>.
 */

.jxgbox {
    /* for IE 7 */
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    border-color: #356aa0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 0;
    -ms-touch-action: none;
    /* "touch-action: none;" is set with JavaScript. */
}

.jxgbox svg text {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*
 * Keyboard-focus outline for graph objects. JSXGraph's own stylesheet sets a
 * thin dotted outline with no explicit color (so it inherits a non-theme-aware
 * default that is invisible on the dark canvas). Force a theme-aware outline so
 * the focused object is visible in both light and dark mode.
 */
.jxgbox :focus,
.jxgbox :focus-visible {
    outline: 2px solid var(--canvasText);
    outline-offset: 1px;
}

.JXGtext {
    font-family: Courier, monospace;
    /*
     * The default font family is now set in
     * JXG.Options.text.cssdefaultstyle = 'font-family: Arial, Helvetica, Geneva, sans-serif;'
     */

    /* "background-color: transparent;" may produce artefacts in IE. Solution: setting a color explicitly. */
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.JXGinfobox {
    border-style: none;
    border-width: 0;
    border-color: black;
}

/* CSS attributes will (permantely) overwrite attributes set in JSXGraph */
.JXGimage {
    /* opacity: 1.0; */
}

.JXGimageHighlight {
    /* opacity: 0.6; */
}

.jxgbox :focus {
    outline-width: 0.5px;
    outline-style: dotted;
}

/* CSS rules for the navigation bar */

.JXG_navigation {
    position: absolute;
    right: 5px;
    bottom: 5px;

    z-index: 100;

    background-color: transparent;
    padding: 2px;
    font-size: 14px;
    cursor: pointer;
}

.JXG_navigation_button {
    color: #666;
}

.JXG_navigation_button_left {
}

.JXG_navigation_button_right {
}

.JXG_navigation_button_up {
}

.JXG_navigation_button_down {
}

.JXG_navigation_button_out {
}

.JXG_navigation_button_100 {
}

.JXG_navigation_button_in {
}

.JXG_navigation_button_fullscreen {
}

.JXG_navigation_button_reload {
}

.JXG_navigation_button_cleartraces {
}

.JXG_navigation_button_screenshot {
}

.JXG_navigation_button:hover {
    border-radius: 2px;
    background: rgba(184, 184, 184, 0.5);
}

.JXG_navigation_button svg {
    top: 0.2em;
    position: relative;
    padding: 0;
}

/* CSS rules for the wrapping div in fullscreen mode */

.JXG_wrap_private:-moz-full-screen {
    background-color: var(--canvas);
    padding: 0;
    width: 100%;
    height: 100%;
}

.JXG_wrap_private:-webkit-full-screen {
    background-color: var(--canvas);
    padding: 0;
    width: 100%;
    height: 100%;
}

.JXG_wrap_private:fullscreen {
    background-color: var(--canvas);
    padding: 0;
    width: 100%;
    height: 100%;
}

.JXG_wrap_private:-ms-fullscreen {
    background-color: var(--canvas);
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Classes forn smartlabels */

.smart-label-solid {
    padding: 1px 7px 1px 7px;
    margin: 0;
    color: white;
    border-radius: 150px;
    text-align: center;
    vertical-align: middle;
}

.smart-label-outline {
    padding: 1px 7px 1px 7px;
    margin: 0;
    border: solid 2px black;
    background-color: white;
    color: black;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
}

.smart-label-pure {
    padding: 20px 7px 1px 7px;
    margin: 0;
    border: none;
    background-color: transparent;
    color: black;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
}

.smart-label-line,
.smart-label-point {
    background-color: #0072b2;
    border-color: #0072b2;
}

.smart-label-point {
    margin-top: 12px;
}

.smart-label-angle {
    background-color: #e69f00;
    border-color: #e69f00;
    padding: 1px 7px 1px 7px;
}

.smart-label-polygon,
.smart-label-circle {
    background-color: #f0e442;
    color: black;
    border-color: #f0e442;
    padding: 1px 7px 1px 7px;
}

/*
 * Smart-label dark-mode overrides.
 *
 * `.smart-label-pure`: transparent background with hardcoded black text.
 *   On a dark JSXGraph canvas this produces invisible text — switch to
 *   canvas-text color so it adapts to the theme.
 *
 * `.smart-label-outline`: white bubble on the dark canvas is jarring.
 *   Use an elevated-surface background consistent with other dark-mode
 *   popover surfaces, with a theme-aware border and text.
 */
[data-theme="dark"] .smart-label-pure {
    color: var(--canvasText);
}

[data-theme="dark"] .smart-label-outline {
    background-color: #2d2d2d;
    border-color: var(--canvasText);
    color: var(--canvasText);
}

/* Fix: Ensure div-based paragraphs maintain standard paragraph spacing */
.doenet-viewer .para {
    margin-block-start: 1em;
    margin-block-end: 1em;
}

/*
 * DoenetML <tag> element: render as green inline code. `--doenetTagColor`
 * stays separate from `--mainGreen` because button backgrounds need the darker
 * `--mainGreen` shade for white foreground text, while inline tags need a
 * brighter dark-mode green to stay readable on the canvas.
 */
.doenet-viewer .doenet-tag {
    color: var(--doenetTagColor);
}

/**************************************************
 End JSXGraph styles 
 **************************************************/
.overline {
        text-decoration-line: overline;
}

.blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.keyboard-button {
        display: inline-flex;
        height: 2.5rem;
        max-width: 4em;
        flex-grow: 1;
        flex-basis: 1rem;
        justify-content: center;
        align-items: center;
        border-radius: 0.375rem;
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.keyboard-button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.keyboard-button:active {
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.special-button {
        --tw-border-opacity: 1;
        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.special-button:hover {
        --tw-border-opacity: 1;
        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.special-button:active {
        --tw-border-opacity: 1;
        border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}

.virtual-keyboard {
        display: flex;
        max-width: 42rem;
        justify-content: center;
        row-gap: 0.25rem;
        -moz-column-gap: 0.75rem;
             column-gap: 0.75rem;
}

@media (min-width: 640px) {

        .virtual-keyboard {
                row-gap: 0.5rem;
        }
}

.virtual-keyboard {
        flex-wrap: wrap;
}

@media (min-width: 640px) {

        .virtual-keyboard {
                flex-wrap: nowrap;
        }
}

.virtual-keyboard .row {
        display: flex;
        flex-basis: 100%;
        justify-content: center;
        -moz-column-gap: 0.25rem;
             column-gap: 0.25rem;
}

@media (min-width: 640px) {

        .virtual-keyboard .row {
                -moz-column-gap: 0.5rem;
                     column-gap: 0.5rem;
        }
}

.virtual-keyboard .keyboard-region {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        -moz-column-gap: 0.25rem;
             column-gap: 0.25rem;
        row-gap: 0.25rem;
}

@media (min-width: 640px) {

        .virtual-keyboard .keyboard-region {
                -moz-column-gap: 0.5rem;
                     column-gap: 0.5rem;
                row-gap: 0.5rem;
        }
}

.virtual-keyboard .keyboard-region .key {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
}

@media (min-width: 640px) {

        .virtual-keyboard .keyboard-region .key {
                padding-left: 1rem;
                padding-right: 1rem;
        }
}

.virtual-keyboard .sub-keyboard {
        display: flex;
        max-width: 42rem;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.25rem;
}

@media (min-width: 640px) {

        .virtual-keyboard .sub-keyboard {
                row-gap: 0.5rem;
        }
}

.virtual-keyboard .sub-keyboard {
        height: 100%;
}

.virtual-keyboard button {
        background-color: var(--kb-key-bg, #fff);
        display: inline-flex;
        height: 2.5rem;
        max-width: 4em;
        flex-grow: 1;
        flex-basis: 1rem;
        justify-content: center;
        align-items: center;
        border-radius: 0.375rem;
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
    }

.virtual-keyboard button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.virtual-keyboard button:active {
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.virtual-keyboard .break {
        height: 0px;
        flex-basis: 100%;
}

.virtual-keyboard .key {
        font-weight: 700;
}

.virtual-keyboard .key.math {
        font-weight: 400;
}

.virtual-keyboard .key-space,
    .virtual-keyboard .key-backspace,
    .virtual-keyboard .key-left,
    .virtual-keyboard .key-right,
    .virtual-keyboard .key-shift,
    .virtual-keyboard .key-enter {
        --tw-border-opacity: 1;
        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.virtual-keyboard .key-space:hover,
    .virtual-keyboard .key-backspace:hover,
    .virtual-keyboard .key-left:hover,
    .virtual-keyboard .key-right:hover,
    .virtual-keyboard .key-shift:hover,
    .virtual-keyboard .key-enter:hover {
        --tw-border-opacity: 1;
        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.virtual-keyboard .key-space:active,
    .virtual-keyboard .key-backspace:active,
    .virtual-keyboard .key-left:active,
    .virtual-keyboard .key-right:active,
    .virtual-keyboard .key-shift:active,
    .virtual-keyboard .key-enter:active {
        --tw-border-opacity: 1;
        border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}

.virtual-keyboard .key-shift,
    .virtual-keyboard .key-backspace {
        max-width: none;
        flex-grow: 1;
}

.virtual-keyboard .key-space {
        max-width: none;
        flex-grow: 1;
}

.virtual-keyboard .svg-inline--fa {
        display: inline-block;
        height: 1em;
    }

.virtual-keyboard.numeric .key-backspace {
        max-width: 4em;
}
.virtual-keyboard.alpha,
.virtual-keyboard.greek {
        flex-wrap: wrap;
}
.virtual-keyboard.symbol .keyboard-region {
        grid-template-columns: repeat(5, minmax(0, 1fr));
}

.virtual-keyboard-tab-list {
        display: flex;
        flex-wrap: nowrap;
}

.virtual-keyboard-tab-list button {
        margin-bottom: 0.75rem;
        border-bottom-width: 2px;
        padding: 0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        padding-bottom: 0.25rem;
}

@media (min-width: 640px) {

        .virtual-keyboard-tab-list button {
                padding: 0.5rem;
                padding-left: 0.75rem;
                padding-right: 0.75rem;
        }
}

.virtual-keyboard-tab-list button {
        /* Non-selected tabs: slate-200 underline so only the selected tab's
           blue indicator stands out. Without an explicit color this falls
           back to currentColor (black), drawing a harsh line under every tab. */
        --tw-border-opacity: 1;
        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    }

.virtual-keyboard-tab-list button[aria-selected="true"] {
        --tw-border-opacity: 1;
        border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
/*
Tailwind base is purposely not included because we want all styles to be prefixed. We manually copy in whatever is needed from tailwind preflight.
@tailwind base;
*/
.overline {
        text-decoration-line: overline;
}
.blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/*
 * Some styles from tailwind preflight need to be included here
 */
:where(#virtual-keyboard-tray, .virtual-keyboard) button {
        -webkit-appearance: button;
        border-width: 0;
        border-style: solid;
        background: transparent;
        cursor: pointer;
    }

#virtual-keyboard-tray {
    /*
     * Some styles from tailwind preflight need to be included here
     */
    box-sizing: border-box;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scroll-snap-strictness: proximity;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: var(--kb-ring-offset, #fff);
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-border-opacity: 1;

    /* Theme tokens — light-mode defaults */
    --kb-tray-bg: white;
    --kb-tray-border-top: black;
    --kb-ring-offset: #fff;
    --kb-key-bg: #fff;

    --keyboard-tray-height: 280px;

    border-top: 1px solid var(--kb-tray-border-top);

    position: fixed;

    bottom: 0px;

    width: 100%;

    overflow: visible;

    padding-left: 0.5rem;

    padding-right: 0.5rem;

    padding-bottom: 0.5rem;

    --tw-translate-y: 100%;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

    transition-property: transform;

    transition-duration: 300ms;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    min-height: var(--keyboard-tray-height);
    max-height: calc(100vh - 1.5rem);
    z-index: 10000;
    background-color: var(--kb-tray-bg);
}

#virtual-keyboard-tray .close-keyboard-button {
        position: absolute;
        top: 0px;
        right: 0px;
        margin: 0.5rem;
        border-radius: 0.25rem;
}

#virtual-keyboard-tray .close-keyboard-button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .close-keyboard-button:active {
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .close-keyboard-button {
        display: flex;
        height: 1.5rem;
        width: 1.5rem;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        line-height: 2rem;
}

/*
     * Right-edge footprint of this button (w-12 + me-4 = 4rem) is mirrored
     * by `--keyboard-tab-reserve-width` in
     * `packages/doenetml/src/EditorViewer/editor-viewer.css` so the editor
     * footer can shift its rightmost element inward to clear it. Keep the
     * two values in sync.
     */

#virtual-keyboard-tray .open-keyboard-button {
        position: absolute;
        top: -1.5rem;
        right: 0px;
        margin-inline-end: 1rem;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        border-bottom-width: 1px;
        --tw-border-opacity: 1;
        border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

#virtual-keyboard-tray .open-keyboard-button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .open-keyboard-button:active {
        --tw-bg-opacity: 1;
        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .open-keyboard-button {
        display: flex;
        height: 1.5rem;
        width: 3rem;
        align-items: center;
        justify-content: center;
        border-width: 1px;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

#virtual-keyboard-tray .virtual-keyboard-tab-list {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
}

@media (min-width: 640px) {
        #virtual-keyboard-tray .virtual-keyboard-tab-list {
                margin-left: 5rem;
                margin-right: 5rem;
        }
}

#virtual-keyboard-tray .virtual-keyboard {
        margin-left: auto;
        margin-right: auto;
}

/* Dark-mode overrides — applied when data-theme="dark" is written to #virtual-keyboard-tray */
#virtual-keyboard-tray[data-theme="dark"] {
    --kb-tray-bg: #1e1e1e;
    --kb-tray-border-top: #555;
    --kb-ring-offset: #1e1e1e;
    --kb-key-bg: #2d2d2d;

    color: white;
}
/*
     * Browsers have a UA stylesheet rule `button { color: ButtonText }` which
     * is an explicit UA-level declaration and beats an *inherited* `color:
     * white` from a parent. We must set color explicitly on button elements
     * so the author rule overrides UA. This also makes MathJax SVG paths
     * (which use fill:currentColor) render white rather than the UA button
     * color.
     */
#virtual-keyboard-tray[data-theme="dark"] button {
        color: white;
    }
/* Close (×) button */
#virtual-keyboard-tray[data-theme="dark"] .close-keyboard-button:hover {
        background-color: #3a3a3a;
    }
#virtual-keyboard-tray[data-theme="dark"] .close-keyboard-button:active {
        background-color: #4a4a4a;
    }
/* Open-keyboard tab that peeks above the tray */
#virtual-keyboard-tray[data-theme="dark"] .open-keyboard-button {
        background-color: #2d2d2d;
        border-color: #555;
        border-bottom-color: transparent;
    }
#virtual-keyboard-tray[data-theme="dark"] .open-keyboard-button:hover {
        background-color: #3a3a3a;
    }
#virtual-keyboard-tray[data-theme="dark"] .open-keyboard-button:active {
        background-color: #4a4a4a;
    }
/*
     * Key faces — target via .virtual-keyboard button because @apply in
     * keyboard.css inlines styles without adding the class to the HTML element.
     * These override the light-mode .virtual-keyboard button:hover / :active
     * rules (light grey slate-100/slate-300) that become invisible with white text.
     */
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard button {
        background-color: #2d2d2d;
        border-color: #4a4a4a;
    }
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard button:hover {
        background-color: #3a3a3a;
    }
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard button:active {
        background-color: #4a4a4a;
    }
/*
     * Special keys (backspace, shift, space, arrows, enter).
     * These use @apply special-button in keyboard.css which compiles to
     * .virtual-keyboard .key-space, .virtual-keyboard .key-backspace etc.
     * — the HTML elements have .key-space/.key-backspace class, not .special-button.
     * Specificity must beat .virtual-keyboard .key-* at (0, 2, 0).
     */
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-space,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-backspace,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-left,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-right,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-shift,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-enter {
        background-color: #383838;
        border-color: #383838;
    }
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-space:hover,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-backspace:hover,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-left:hover,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-right:hover,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-shift:hover,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-enter:hover {
        background-color: #454545;
        border-color: #454545;
    }
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-space:active,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-backspace:active,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-left:active,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-right:active,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-shift:active,
    #virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard .key-enter:active {
        background-color: #555555;
        border-color: #555555;
        color: white;
    }
/*
     * Selected tab indicator.
     * blue-400 (#60a5fa) on #1e1e1e ≈ 6.9:1 — WCAG AA ✓
     * blue-300 (#93c5fd) on #1e1e1e ≈ 8.6:1 — WCAG AA ✓
     */
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard-tab-list button[aria-selected="true"] {
        border-color: #60a5fa;
        color: #93c5fd;
    }
/* Non-selected tab borders: use a dim separator instead of transparent
       so the tab strip has a subtle anchor line in dark mode. */
#virtual-keyboard-tray[data-theme="dark"] .virtual-keyboard-tab-list button:not([aria-selected="true"]) {
        border-color: #444;
    }

#virtual-keyboard-tray.open {
        --tw-translate-y: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.doenet-button {
    box-sizing: border-box;
    --button-color: var(--mainBlue);
    /*
     * `--button-canvas-color` is the brand color used when the button sits
     * *on the canvas* (unchecked toggle text/border) rather than as a filled
     * background. On the dark canvas the plain brand color is too low-contrast,
     * so lighten it there; light mode keeps the brand color unchanged.
     */
    --button-canvas-color: var(--button-color);
    --button-hover-color: oklch(
        from var(--button-color) calc(max(l * 1.6, 0.7)) calc(c * 0.75) h
    );
    --button-active-color: oklch(
        from var(--button-color) calc(max(l * 1.7, 0.8)) calc(c * 0.75) h
    );
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;

    padding: 0.25rem 0.75rem;
    min-height: 1.4rem;
    margin: 0 2px;

    font-size: 12px;
    background-color: var(--button-color);
    color: white;
    border-radius: 10rem;
    cursor: pointer;
    user-select: none;

    &:hover {
        background-color: var(--button-hover-color);
        color: black;
    }
    &:active {
        background-color: var(--button-active-color);
        color: black;
    }
    &:disabled {
        background-color: var(--mainGray);
        cursor: not-allowed;
    }
    &:focus {
        outline: 2px solid white;
        outline-offset: -4px;
    }
}
.doenet-button.alert {
    --button-color: var(--mainRed);
}
.doenet-button.action-button {
    border-radius: var(--mainBorderRadius);
}
.doenet-button .button-icon {
    padding: 0.25rem 0;
    transform: translateY(0.12rem);
}
.doenet-labelled-button {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}
.doenet-labelled-button.vertical {
    flex-direction: column;
    vertical-align: bottom;
}

.doenet-button-group {
    display: inline-flex;
    align-items: stretch;
    .doenet-button {
        --separator-color: oklch(
            from var(--button-color) calc(l * 1.8) calc(c * 0.5) h
        );
        border: 1px solid var(--separator-color);
    }
    &:not(.vertical) {
        flex-direction: row;
        .doenet-button {
            margin-left: 0;
            margin-right: 0;
            /* Remove border radius on all but the first and last buttons */
            &:not(:first-child):not(:last-child) {
                border-radius: 0;
            }
            &:first-child {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
            &:last-child {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
    }
}
.doenet-button-group.vertical {
    flex-direction: column;
    .doenet-button {
        margin-top: 0;
        margin-bottom: 0;
        /* Remove border radius on all but the first and last buttons */
        &:not(:first-child):not(:last-child) {
            border-radius: 0;
        }
        &:first-child {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        &:last-child {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }
}
.doenet-button {
    /* Hide the underlying checkbox */
    input[type="checkbox"],
    input[type="radio"] {
        appearance: none;
        width: 0;
        margin: 0;
        padding: 0;
        position: absolute;
        outline: none;
    }
    &:has(input) {
        border: 2px solid var(--button-canvas-color);
    }
    &:has(input:not(:checked, :focus)):hover {
        background-color: var(--button-active-color);
    }
    &:has(input:not(:checked)):hover {
        color: black;
    }
    &:has(input:checked):hover {
        color: black;
    }
    &:has(input:checked) {
        background-color: var(--button-color);
    }
    &:has(input:not(:checked)) {
        background-color: var(--canvas);
        color: var(--button-canvas-color);
    }
    &:has(input:focus) {
        outline: 2px solid white;
        outline-offset: -4px;
    }
    &:has(input:not(:checked):focus) {
        outline: 2px solid var(--button-canvas-color);
        outline-offset: -4px;
    }
}

/*
 * On the dark canvas, lighten the brand color used for on-canvas (unchecked)
 * toggle text/border so it clears WCAG AA against the dark canvas. Filled
 * (checked) buttons keep the darker `--button-color` with white text.
 */
[data-theme="dark"] .doenet-button {
    --button-canvas-color: oklch(from var(--button-color) max(l, 0.78) c h);
}

/*
 * `.doenet-ui-button` dark mode: override the light-mode defaults under
 * `[data-theme="dark"]`, the single dark-mode mechanism used throughout
 * the DoenetEditor context.
 */
[data-theme="dark"] .doenet-ui-button {
    --background: rgb(255 255 255 / 5%);
    --border: rgb(255 255 255 / 10%);
    --light: rgb(255 255 255 / 5%);
    --shadow: rgb(0 0 0 / 25%);
    --text: white;
    box-shadow:
        inset 0 0 0 1px var(--border),
        inset 0 -1px 0 1px var(--shadow),
        inset 0 1px 0 var(--light);
}

[data-theme="dark"] .doenet-ui-button:not(:active):hover {
    --border: rgb(255 255 255 / 25%);
}

[data-theme="dark"] .doenet-ui-button:active,
[data-theme="dark"] .doenet-ui-button[data-active] {
    box-shadow:
        inset 0 0 0 1px var(--border),
        inset 0 1px 1px 1px var(--shadow);
}

/* Resizable Panel */
.doenet-resizable-panel-handle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    background-color: var(--mainGray);
    border: 1px solid oklch(from var(--mainGray) calc(l * 0.8) calc(c * 0.5) h);

    svg {
        flex-shrink: 0;
        margin-left: 1px;
    }

    &.vertical {
        width: 100%;
        height: 10px;
        svg {
            margin-left: 0;
            margin-top: 0.5px;
        }
    }
    &.collapsible:not(.isOpen) {
        height: 5px;
    }
}

/*
 * In dark mode `--mainGray` = #a9a9a9 — too light against the near-black
 * canvas. Use a dark elevated surface (#2a2a2a) with a subtle border.
 */
[data-theme="dark"] .doenet-resizable-panel-handle {
    background-color: #2a2a2a;
    border-color: #444;

    svg {
        color: #8b949e;
    }
}

/* UI Components */

.doenet-ui-button {
    --outline-offset: -1px;
    --background: white;
    --border: rgb(0 0 0 / 13%);
    --light: rgb(255 255 255 / 20%);
    --shadow: rgb(0 0 0 / 10%);
    --text: black;

    &:not(:active):hover {
        --border: rgb(0 0 0 / 33%);
    }
    @layer theme {
        &[aria-disabled="true"] {
            opacity: 0.5;
        }
    }
    &:active,
    &[data-active] {
        box-shadow:
            inset 0 0 0 1px var(--border),
            inset 0 2px 0 var(--border);
    }

    cursor: pointer;
    --size: 2rem;
    display: flex;
    max-width: 100%;
    height: var(--size);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-inline: 1rem;
    text-decoration-line: none;
    background-color: var(--background);
    color: var(--text, currentColor);
    border-style: none;
    scroll-margin: var(--padding, 0px);
    border-radius: calc(var(--rounded, 0.5rem) - var(--padding, 0px));
    font-size: 1rem;
    line-height: 1.5rem;
    box-shadow:
        inset 0 0 0 1px var(--border),
        inset 0 2px 0 var(--light),
        inset 0 -1px 0 var(--shadow),
        0 1px 1px var(--shadow);
    --outline-offset: 0;
    --outline: var(--color-primary);
    --depth: 1px;
    --padding-block: var(--depth);
    outline-width: 2px;
    outline-color: var(--outline);
    outline-offset: var(--outline-offset);
    user-select: none;
    white-space: nowrap;
    padding-block: var(--padding-block-start, var(--padding-block))
        var(--padding-block-end, var(--padding-block));
}
.cm-lint-tooltip .heading {
    margin-top: 0;
    margin-bottom: 0.25em;
    font-size: smaller;
}
.cm-lint-tooltip .heading.warning {
    color: #a26100;
}
.cm-lint-tooltip .heading.error {
    color: #900;
}
.cm-lint-tooltip .heading.accessibility-level-1 {
    color: #5b21b6;
}
.cm-lint-tooltip .heading.accessibility-level-2 {
    color: #9061d1;
}
.cm-lintRange.cm-doenet-accessibility-diagnostic {
    background-image: none !important;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.6px;
    text-underline-offset: 0.18em;
    text-decoration-skip-ink: none;
}

.cm-lintRange.cm-doenet-accessibility-diagnostic-level-1 {
    text-decoration-color: #5b21b6;
}

.cm-lintRange.cm-doenet-accessibility-diagnostic-level-2 {
    text-decoration-color: #9061d1;
}

.cm-tooltip-lint
    .cm-diagnostic.cm-diagnostic-warning:has(
        .cm-lint-tooltip .heading.accessibility-level-1
    ) {
    border-left-color: #5b21b6;
}

.cm-tooltip-lint
    .cm-diagnostic.cm-diagnostic-warning:has(
        .cm-lint-tooltip .heading.accessibility-level-2
    ) {
    border-left-color: #9061d1;
}

.cm-diagnostic {
    white-space: unset !important;
}
.cm-lint-body code {
    font-size: larger;
    white-space: pre-wrap;
    color: #d80085;
    padding: 0px 2px;
}
.cm-lint-body p {
    margin: 0.25em 0;
}
.cm-lint-body p:last-child {
    margin-bottom: 0;
}
.cm-lint-body p:first-child {
    margin-top: 0;
}

/*
 * Dark mode. CodeMirror's base theme gives tooltips a light background, while
 * the editor text color (which the tooltip inherits) becomes white in dark
 * mode — so an unstyled tooltip renders white-on-white. The editor root carries
 * `[data-theme="dark"]` and the tooltips render in-tree (no `parent:` override
 * on the lint/hover tooltips), so these descendant selectors reach them. Give
 * the tooltip an elevated dark surface and recolor the heading/code accents to
 * brighter, WCAG-AA-legible variants against that surface.
 */
[data-theme="dark"] .cm-tooltip {
    background-color: #2a2a2a;
    border-color: #555;
    color: var(--canvasText);
}
[data-theme="dark"] .cm-tooltip.cm-tooltip-above .cm-tooltip-arrow:before {
    border-top-color: #555;
}
[data-theme="dark"] .cm-tooltip.cm-tooltip-above .cm-tooltip-arrow:after {
    border-top-color: #2a2a2a;
}
[data-theme="dark"] .cm-tooltip.cm-tooltip-below .cm-tooltip-arrow:before {
    border-bottom-color: #555;
}
[data-theme="dark"] .cm-tooltip.cm-tooltip-below .cm-tooltip-arrow:after {
    border-bottom-color: #2a2a2a;
}
[data-theme="dark"] .cm-lint-tooltip .heading.warning {
    color: #ffb454;
}
[data-theme="dark"] .cm-lint-tooltip .heading.error {
    color: #ff6b6b;
}
[data-theme="dark"] .cm-lint-tooltip .heading.accessibility-level-1 {
    color: #c4b5fd;
}
[data-theme="dark"] .cm-lint-tooltip .heading.accessibility-level-2 {
    color: #ddd6fe;
}
[data-theme="dark"]
    .cm-tooltip-lint
    .cm-diagnostic.cm-diagnostic-warning:has(
        .cm-lint-tooltip .heading.accessibility-level-1
    ) {
    border-left-color: #c4b5fd;
}
[data-theme="dark"]
    .cm-tooltip-lint
    .cm-diagnostic.cm-diagnostic-warning:has(
        .cm-lint-tooltip .heading.accessibility-level-2
    ) {
    border-left-color: #ddd6fe;
}
[data-theme="dark"] .cm-lint-body code {
    color: #ff7ac6;
}

/*
 * Accessibility-diagnostic underlines under code text. The light-mode colors
 * (#5b21b6, #9061d1) are too dark against the dark canvas (#121212), making
 * the underlines invisible. Override to the same bright violets used for the
 * diagnostic heading/icon accents elsewhere in dark mode.
 */
[data-theme="dark"] .cm-lintRange.cm-doenet-accessibility-diagnostic-level-1 {
    text-decoration-color: #c4b5fd;
}

[data-theme="dark"] .cm-lintRange.cm-doenet-accessibility-diagnostic-level-2 {
    text-decoration-color: #ddd6fe;
}
.editor-panel .help-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.editor-panel .help-panel-empty {
    color: #667085;
}

.editor-panel .help-placeholder {
    margin: 0;
    font-style: italic;
}

.editor-panel .help-placeholder code {
    background: var(--mainGray);
    /*
     * Help placeholder text inherits a muted color from `.help-panel-empty`
     * (#667085). On `var(--mainGray)` that yields ~3.5:1 — below WCAG 2 AA's
     * 4.5:1 minimum for normal text — and axe surfaces it when the panel
     * mounts open on help by default. Restore the canvas text color on the
     * code element so it sits on top of the gray chip with sufficient
     * contrast.
     */
    color: var(--canvasText);
    padding: 0 0.25rem;
    border-radius: 0.2rem;
    font-family: monospace;
    font-style: normal;
}

.editor-panel .help-title {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.editor-panel .help-element-name {
    font-family: monospace;
    font-weight: 600;
}

/*
 * Element `<tag>` name rendered as a link to its reference page (in the
 * title row of every help kind). Keeps the monospace/bold of a plain name
 * but adopts the link color so authors recognize it as clickable. Sits
 * alongside the footer "Reference page →" link, not in place of it.
 */
.editor-panel a.help-element-name-link {
    color: var(--mainBlue);
    text-decoration: none;
}

.editor-panel a.help-element-name-link:hover,
.editor-panel a.help-element-name-link:focus {
    text-decoration: underline;
}

/*
 * Element help title: the linked `<tag>` name followed by an em-dash and
 * the one-sentence summary, flowing as a single wrapping line. Bottom
 * margin removed so it sits flush in the panel's flex column gap.
 */
.editor-panel .help-element-title {
    margin: 0;
}

.editor-panel .help-attribute-name,
.editor-panel .help-property-name,
.editor-panel .help-snippet-name {
    font-family: monospace;
    color: var(--mainBlue);
}

.editor-panel .help-snippet-preview {
    margin: 0;
    padding: 0.5rem;
    background: var(--mainGray);
    border-radius: 0.25rem;
    font-family: monospace;
    font-size: 0.8rem;
    line-height: 1.4;
    overflow-x: auto;
    white-space: pre;
}

.editor-panel .help-kind-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #667085;
    letter-spacing: 0.5px;
}

.editor-panel .help-description {
    margin: 0;
}

.editor-panel .help-ref-sentence {
    margin: 0;
}

/*
 * Secondary annotation under the primary ref sentence — used when the bare
 * `$name` is a repeat-introduced binding (valueName/indexName) rather than a
 * `name=` attribute. Lighter weight than the main sentence so the eye lands
 * on the primary referent first.
 */
.editor-panel .help-ref-derived {
    margin: 0;
    color: #475467;
    font-size: 0.85rem;
    font-style: italic;
}

.editor-panel .help-description code,
.editor-panel .help-ref-sentence code,
.editor-panel .help-ref-derived code {
    background: var(--mainGray);
    padding: 0 0.25rem;
    border-radius: 0.2rem;
    font-family: monospace;
    font-size: 0.85em;
    font-style: normal;
}

.editor-panel .help-detail {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.editor-panel .help-detail-label {
    font-weight: 500;
    color: #667085;
    flex-shrink: 0;
}

.editor-panel .help-detail-value {
    font-family: monospace;
    color: var(--mainBlue);
    word-break: break-word;
}

.editor-panel .help-values-list {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.editor-panel .help-value-item {
    background: var(--mainGray);
    border-radius: 0.2rem;
    padding: 0 0.3rem;
    font-family: monospace;
    font-size: 0.85rem;
}

/*
 * Subtle annotation next to a value item (e.g. the `(styleNumber N)` tag on
 * the "Active default:" row, #1198). Muted color and slightly smaller text so
 * it reads as metadata rather than competing with the value itself.
 */
.editor-panel .help-detail-annotation {
    color: #667085;
    font-size: 0.8rem;
}

/* Allowed-values row stacks label above the definition list. */
.editor-panel .help-allowed-values {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/*
 * Two-column definition list: monospace value pill in column 1, description in
 * column 2. `margin: 0` overrides the browser default `<dl>` margin.
 */
.editor-panel .help-allowed-values-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.6rem;
    row-gap: 0.2rem;
    margin: 0;
    width: 100%;
}

.editor-panel .help-allowed-values-list dt {
    /* Inherits .help-value-item styling for the pill background. */
    align-self: start;
    justify-self: start;
}

.editor-panel .help-allowed-values-list dd {
    margin: 0;
    color: #344054;
    align-self: center;
}

.editor-panel .help-value-description code {
    background: var(--mainGray);
    padding: 0 0.25rem;
    border-radius: 0.2rem;
    font-family: monospace;
    font-size: 0.85em;
}

/*
 * Per-styleNumber breakdown row (#1204). Stacks a header line above a
 * two-column key/value listing so authors can scan the resolved style
 * attributes without horizontal scrolling.
 */
.editor-panel .help-style-breakdown {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.editor-panel .help-style-breakdown-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
    margin: 0;
    width: 100%;
}

.editor-panel .help-style-breakdown-list dt {
    font-family: monospace;
    font-size: 0.8rem;
    color: #344054;
    align-self: center;
    justify-self: start;
}

.editor-panel .help-style-breakdown-list dd {
    margin: 0;
    align-self: center;
    /* Same pill styling as help-value-item so the key/value rendering
     * matches the rest of the panel. */
    background: var(--mainGray);
    border-radius: 0.2rem;
    padding: 0 0.3rem;
    font-family: monospace;
    font-size: 0.8rem;
    width: fit-content;
}

/*
 * Resolved function-names breakdown (#1205). Stacks a label/values pair —
 * optionally repeated for `Added on this input:` and `Removed on this
 * input:` rows — vertically so the chip list wraps without competing
 * with the labels.
 */
.editor-panel .help-function-names-breakdown {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/*
 * "What can go here?" suggestions surfaced when the cursor sits in an
 * element body or at the top level. The header names the location, the list
 * shows curated starter components as links, and a muted footer points at
 * Ctrl+Space for the full set.
 */
.editor-panel .help-suggestions-header {
    margin: 0;
}

.editor-panel .help-suggestions-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.editor-panel .help-suggestion-summary {
    color: #344054;
}

.editor-panel .help-suggestions-footer {
    margin: 0;
    color: #667085;
    font-size: 0.85rem;
}

.editor-panel .help-suggestions-header code,
.editor-panel .help-suggestions-footer code {
    background: var(--mainGray);
    padding: 0 0.25rem;
    border-radius: 0.2rem;
    font-family: monospace;
    font-size: 0.85em;
}

.editor-panel .help-docs-link {
    color: var(--mainBlue);
    text-decoration: none;
    width: fit-content;
}

.editor-panel .help-docs-link:hover,
.editor-panel .help-docs-link:focus {
    text-decoration: underline;
}

/* ============================================================
 * Dark mode overrides for the context-help panel
 *
 * Light-mode muted grays (#667085, #475467, #344054) have
 * insufficient contrast on the dark canvas (#121212):
 *   #667085 → ~3.9:1 (fails 4.5:1), #344054 → worse.
 *
 * Blue accents: var(--mainBlue) = #1a5a99 is only ~1.9:1 on
 * #121212 in dark mode. Override locally to #79c0ff (~10:1).
 *
 * Chip/code backgrounds: var(--mainGray) = #a9a9a9 in dark mode,
 * which gives only 2.3:1 contrast with white (var(--canvasText)).
 * Override to an elevated dark surface (#2a2a2a, same as tooltips).
 * ============================================================ */

/* Muted secondary text — #94a3b8 ≈ 7.7:1 on #121212 */
[data-theme="dark"] .editor-panel .help-panel-empty,
[data-theme="dark"] .editor-panel .help-placeholder,
[data-theme="dark"] .editor-panel .help-kind-label,
[data-theme="dark"] .editor-panel .help-detail-label,
[data-theme="dark"] .editor-panel .help-detail-annotation,
[data-theme="dark"] .editor-panel .help-suggestions-footer,
[data-theme="dark"] .editor-panel .help-ref-derived {
    color: #94a3b8;
}

/* Slightly stronger muted text — #cbd5e1 ≈ 11.7:1 on #121212 */
[data-theme="dark"] .editor-panel .help-allowed-values-list dd,
[data-theme="dark"] .editor-panel .help-style-breakdown-list dt,
[data-theme="dark"] .editor-panel .help-suggestion-summary {
    color: #cbd5e1;
}

/* Blue accent text — #79c0ff ≈ 10:1 on #121212 */
[data-theme="dark"] .editor-panel a.help-element-name-link,
[data-theme="dark"] .editor-panel .help-attribute-name,
[data-theme="dark"] .editor-panel .help-property-name,
[data-theme="dark"] .editor-panel .help-snippet-name,
[data-theme="dark"] .editor-panel .help-detail-value,
[data-theme="dark"] .editor-panel .help-docs-link {
    color: #79c0ff;
}

/* Chip and inline-code backgrounds — elevated dark surface so white text passes */
[data-theme="dark"] .editor-panel .help-snippet-preview,
[data-theme="dark"] .editor-panel .help-value-item,
[data-theme="dark"] .editor-panel .help-style-breakdown-list dd,
[data-theme="dark"] .editor-panel .help-description code,
[data-theme="dark"] .editor-panel .help-ref-sentence code,
[data-theme="dark"] .editor-panel .help-ref-derived code,
[data-theme="dark"] .editor-panel .help-value-description code,
[data-theme="dark"] .editor-panel .help-suggestions-header code,
[data-theme="dark"] .editor-panel .help-suggestions-footer code,
[data-theme="dark"] .editor-panel .help-placeholder code {
    background: #2a2a2a;
    color: var(--canvasText);
}
.variant-select {
    display: flex;
    margin-left: 0.5rem;

    * {
        box-sizing: border-box;
    }
    .button {
        --size: 2.5rem;
        --outline-offset: 2px;
        --outline: hsl(204 100% 40%);
    }

    .button[data-focus-visible] {
        outline-style: solid;
    }

    .select-button {
        width: 12em;
        justify-content: space-between;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        margin-right: 0;
    }
    .prev-next-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        margin-left: 0;
    }
    /* Make all .prev-next-button buttons except for the last one have zero border radius */
    .prev-next-button:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .popover {
        z-index: 50;
        display: flex;
        max-height: min(var(--popover-available-height, 300px), 300px);
        flex-direction: column;
        overflow: auto;
        overscroll-behavior: contain;
        border-radius: 0.5rem;
        border-width: 1px;
        border-style: solid;
        border-color: hsl(204 20% 88%);
        background-color: white;
        padding: 0.5rem;
        color: black;
        box-shadow:
            0 10px 15px -3px rgb(0 0 0 / 0.1),
            0 4px 6px -4px rgb(0 0 0 / 0.1);
        padding-top: 0px;
    }

    .popover:where([data-theme="dark"], [data-theme="dark"] *) {
        border-color: hsl(204 4% 24%);
        background-color: hsl(204 4% 16%);
        color: white;
        box-shadow:
            0 10px 15px -3px rgb(0 0 0 / 0.25),
            0 4px 6px -4px rgb(0 0 0 / 0.1);
        scrollbar-color: #555 hsl(204 4% 16%);
    }

    .popover:where(
            [data-theme="dark"],
            [data-theme="dark"] *
        )::-webkit-scrollbar {
        width: 8px;
    }

    .popover:where(
            [data-theme="dark"],
            [data-theme="dark"] *
        )::-webkit-scrollbar-track {
        background: hsl(204 4% 16%);
    }

    .popover:where(
            [data-theme="dark"],
            [data-theme="dark"] *
        )::-webkit-scrollbar-thumb {
        background-color: #555;
        border-radius: 4px;
        border: 2px solid hsl(204 4% 16%);
    }

    .popover:where(
            [data-theme="dark"],
            [data-theme="dark"] *
        )::-webkit-scrollbar-thumb:hover {
        background-color: #777;
    }

    .select-item {
        display: flex;
        cursor: default;
        scroll-margin: 0.5rem;
        align-items: center;
        gap: 0.5rem;
        border-radius: 0.25rem;
        padding: 0.5rem;
        outline: none !important;
        width: 100%;
        scroll-margin-top: 3.5rem;
    }

    .select-item[aria-disabled="true"] {
        opacity: 0.5;
    }

    .select-item[data-active-item] {
        background-color: hsl(204 100% 40%);
        color: white;
    }

    .combobox-wrapper {
        position: sticky;
        top: 0px;
        margin-bottom: 0.5rem;
        width: 100%;
        background-color: inherit;
        padding-top: 0.5rem;
        display: flex;
    }

    .combobox {
        height: 2.5rem;
        width: 100%;
        border-radius: 0.25rem;
        border-style: none;
        background-color: hsl(204 20% 94%);
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 1rem;
        line-height: 1.5rem;
        color: black;
    }

    .combobox:hover {
        background-color: hsl(204 20% 91%);
    }

    .popover:focus-visible,
    .popover[data-focus-visible],
    .combobox:focus-visible,
    .combobox[data-focus-visible] {
        outline: 2px solid hsl(204 100% 40%);
        outline-offset: -1px;
    }

    .combobox:where([data-theme="dark"], [data-theme="dark"] *) {
        background-color: hsl(204 4% 10%);
        color: white;
    }

    .combobox:hover:where([data-theme="dark"], [data-theme="dark"] *) {
        background-color: hsl(204 4% 8%);
    }
}
.editor-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.editor-panel .editor-and-collapsible-panel {
    flex-grow: 1;
    overflow: hidden;
}

.editor-panel .editor-footer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: var(--mainGray);
}

.editor-panel .footer-menu-button {
    all: unset;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 0.5rem;
    font-size: 1rem;

    &:hover {
        background-color: var(--lightBlue);
    }
    &:focus-visible {
        outline: 2px solid var(--mainBlue);
        outline-offset: -2px;
    }
}

/*
 * When the footer's right edge meets the virtual keyboard's open-keyboard
 * tab (showViewer={false} or viewerLocation in {"left","top"} with the
 * keyboard enabled), push the rightmost footer element inward so the icons
 * stay clickable. The reservation must match the keyboard tab's right-edge
 * footprint (`w-12` + `me-4` = 3rem + 1rem) defined in
 * `packages/virtual-keyboard/src/virtual-keyboard/keyboard-tray.css`. Keep
 * this value in sync if that footprint changes. Very narrow viewports may
 * still let the tab and the icons collide; that's accepted.
 */
.editor-panel .editor-footer.reserve-keyboard-button-space {
    --keyboard-tab-reserve-width: 4rem;
}
.editor-panel .editor-footer.reserve-keyboard-button-space .footer-menu-button {
    margin-right: var(--keyboard-tab-reserve-width);
}
.editor-panel
    .editor-footer.reserve-keyboard-button-space:not(:has(.footer-menu-button))
    .footer-icons {
    margin-right: var(--keyboard-tab-reserve-width);
}

.editor-panel .footer-menu {
    z-index: 50;
    background-color: white;
    border: 1px solid hsl(204 20% 88%);
    border-radius: 0.5rem;
    padding: 0.25rem;
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.editor-panel .footer-menu-item {
    display: block;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    border-radius: 0.25rem;
    font-size: 0.9rem;

    &[data-active-item] {
        background-color: var(--mainBlue);
        color: white;
    }
}

.editor-panel .doenetml-version {
    align-self: center;
    font-size: 0.8rem;
    padding: 0 0.75rem 0 0.5rem;
    min-width: 3.5rem;
    max-width: 5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor-panel .footer-icons {
    display: flex;
    flex-direction: row;
    align-items: stretch;

    button {
        all: unset;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        cursor: pointer;
        padding: 0.25rem 0.6rem;
        font-size: 0.9rem;

        &:hover {
            background-color: var(--lightBlue);
        }
        &:focus-visible {
            outline: 2px solid var(--mainBlue);
            outline-offset: -2px;
        }
    }
    /*
     * lightBlue on mainGray is ~1.2:1 contrast (well below WCAG 1.4.11's
     * 3:1 minimum for UI component state), so the background tint alone is
     * not a sufficient selected-state indicator. The inset box-shadow paints
     * a 3px mainBlue bottom edge that meets the contrast threshold and acts
     * as a non-color cue, while leaving the tab's flex height unchanged.
     */
    &.is-open button[aria-selected="true"] {
        background-color: var(--lightBlue);
        box-shadow: inset 0 -3px 0 var(--mainBlue);
    }
}

.editor-panel .footer-icons-group-gap {
    width: 1.25rem;
}

.editor-panel .diagnostic-tab-trigger {
    min-width: 3.2rem;
}

.editor-panel .diagnostic-tab-icon {
    display: inline-flex;
    font-size: 1rem;
}

.editor-panel .diagnostic-tab-icon.is-responses {
    color: #667085;
}

.editor-panel .diagnostic-tab-count {
    min-width: 1.5ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.editor-panel .diagnostic-tab-label {
    font-size: 0.9rem;
}

.editor-panel .diagnostic-tab-icon.is-help {
    font-size: 1.15rem;
}

.editor-panel .diagnostics-response-tabs-panels {
    flex-grow: 1;
    flex-basis: 0;
    overflow: auto;
}

.editor-panel .diagnostics-response-tabs-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0rem 0.4rem;
}

.editor-panel .diagnostic-panel {
    padding: 0.75rem 0.25rem 1rem;
}

.editor-panel .diagnostic-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.editor-panel .diagnostic-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.4;
}

.editor-panel .diagnostic-entry-icon {
    display: inline-flex;
    margin-top: 0.1rem;
    font-size: 1rem;
}

.editor-panel .diagnostic-tab-icon.is-error,
.editor-panel .diagnostic-entry-icon.is-error {
    color: #b42318;
}

.editor-panel .diagnostic-tab-icon.is-warning,
.editor-panel .diagnostic-entry-icon.is-warning {
    color: #c25a1a;
}

.editor-panel .diagnostic-tab-icon.is-info,
.editor-panel .diagnostic-entry-icon.is-info {
    color: #175cd3;
}

.editor-panel .diagnostic-tab-icon.is-accessibility-critical,
.editor-panel .diagnostic-entry-icon.is-accessibility-critical {
    color: #5b21b6;
}

.editor-panel .diagnostic-tab-icon.is-accessibility-advisory,
.editor-panel .diagnostic-entry-icon.is-accessibility-advisory {
    color: #9061d1;
}

.editor-panel .diagnostic-entry-location {
    font-weight: 600;
    margin-right: 0.35rem;
}

/* Dark mode overrides for .diagnostic-entry-message code — see [data-theme="dark"] block below. */
.editor-panel .diagnostic-entry-message code {
    font-family: monospace;
    background-color: #f5f5f5;
    color: #d80085;
    padding: 2px 4px;
    border-radius: 2px;
    white-space: pre-wrap;
}

.editor-panel .diagnostic-entry-message {
    display: inline;
}

.editor-panel .diagnostic-entry-message p {
    display: inline;
    margin: 0;
}

.editor-panel .diagnostic-editor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    font-size: 0.9rem;
}

.editor-panel .diagnostic-editor-toggle input {
    margin: 0;
}

.editor-panel .accessibility-report {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.editor-panel .accessibility-report-intro {
    margin: 0;
    font-size: 0.9rem;
}

.editor-panel .accessibility-report-section {
    border: 1px solid #d0d5dd;
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: #fff;
}

.editor-panel .accessibility-report-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.editor-panel .accessibility-report-heading h3 {
    margin: 0;
}

.editor-panel .accessibility-report-heading h3 a {
    color: inherit;
}

.editor-panel .accessibility-report-heading.critical {
    color: #5b21b6;
}

.editor-panel .accessibility-report-heading.advisory {
    color: #9061d1;
}

.viewer-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.viewer-panel .viewer-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.1rem 0.5rem;
    background-color: var(--mainGray);
    border-bottom: 1px solid #949494;
}

.viewer-panel .accessibility-status-button {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-weight: 600;

    &:focus-visible {
        outline: 2px solid var(--mainBlue);
        outline-offset: 2px;
    }
}

.viewer-panel .accessibility-status-button.has-level-1-issues {
    background: #f5f3ff;
    color: #5b21b6;
    box-shadow: inset 0 0 0 1px #8b5cf6;
}

.viewer-panel .accessibility-status-button.no-level-1-issues {
    background: #ecfdf3;
    color: #027a48;
    box-shadow: inset 0 0 0 1px #6ce9a6;
    font-weight: 500;
}

.viewer-panel .accessibility-status-button svg {
    font-size: 1rem;
}

.viewer-panel .viewer {
    flex-grow: 1;
    overflow: auto;
    background-color: var(--canvas);
}

.update-syntax-menu {
    z-index: 100;
}

/* ============================================================
 * Dark mode overrides
 * All colors below have been verified for WCAG AA contrast on
 * the dark canvas (#121212) or on their respective surfaces.
 * The accent palette (error/warning/accessibility) is kept in
 * sync with the tooltip dark overrides in tooltip.css so that
 * hover tooltips and panel entries use the same colors.
 * ============================================================ */

/*
 * Scrollbars. Light-mode OS scrollbars are glaring on a dark canvas.
 * `scrollbar-color` is the standard property (Firefox + Chromium ≥121).
 * `::-webkit-scrollbar` rules cover Chromium for full cross-browser support.
 *
 * Note: `scrollbar-color` is NOT inherited, so each scroll container must be
 * targeted directly. The known scroll containers are:
 *   - `.diagnostics-response-tabs-panels` — the diagnostics/help/responses panel
 *   - `.viewer-panel .viewer`              — the viewer content area
 *   - `.cm-scroller`                       — CodeMirror's own scroll container
 */
[data-theme="dark"] .editor-panel .diagnostics-response-tabs-panels,
[data-theme="dark"] .viewer-panel .viewer,
[data-theme="dark"] .editor-panel .cm-scroller {
    scrollbar-color: #555 #1e1e1e;
}

[data-theme="dark"]
    .editor-panel
    .diagnostics-response-tabs-panels::-webkit-scrollbar,
[data-theme="dark"] .viewer-panel .viewer::-webkit-scrollbar,
[data-theme="dark"] .editor-panel .cm-scroller::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"]
    .editor-panel
    .diagnostics-response-tabs-panels::-webkit-scrollbar-track,
[data-theme="dark"] .viewer-panel .viewer::-webkit-scrollbar-track,
[data-theme="dark"] .editor-panel .cm-scroller::-webkit-scrollbar-track {
    background: #1e1e1e;
}

[data-theme="dark"]
    .editor-panel
    .diagnostics-response-tabs-panels::-webkit-scrollbar-thumb,
[data-theme="dark"] .viewer-panel .viewer::-webkit-scrollbar-thumb,
[data-theme="dark"] .editor-panel .cm-scroller::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
    border: 2px solid #1e1e1e;
}

[data-theme="dark"]
    .editor-panel
    .diagnostics-response-tabs-panels::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .viewer-panel .viewer::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .editor-panel .cm-scroller::-webkit-scrollbar-thumb:hover {
    background-color: #777;
}

/*
 * Base panel surfaces. `.editor-panel` and its sub-panels have no explicit
 * background-color in light mode (they rely on the white page default).
 * In dark mode we must set them explicitly; otherwise the transparent panels
 * show through to the white document body.
 */
[data-theme="dark"] .editor-panel {
    background-color: var(--canvas);
    color: var(--canvasText);
}

/*
 * Footer and viewer-controls toolbars use `--mainGray` (#a9a9a9 in dark),
 * producing a stark light band against the near-black canvas. Switch them to
 * the same dark elevated surface used by the drag handles.
 */
[data-theme="dark"] .editor-panel .editor-footer {
    background-color: #1e1e1e;
    color: #cbd5e1;
}

[data-theme="dark"] .viewer-panel .viewer-controls {
    background-color: #1e1e1e;
    border-bottom-color: #555;
}

/*
 * Footer tab highlight: var(--lightBlue) is a pastel sky-blue that pops
 * too loudly against the dark #1e1e1e toolbar. Use a subtle white-alpha
 * wash and keep just the inset blue underline as the selected indicator.
 */
[data-theme="dark"]
    .editor-panel
    .footer-icons.is-open
    button[aria-selected="true"] {
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 -3px 0 var(--mainBlue);
}

/*
 * Hover state on footer buttons: lightBlue also too bright on dark toolbar.
 */
[data-theme="dark"] .editor-panel .footer-menu-button:hover,
[data-theme="dark"] .editor-panel .footer-icons button:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

/*
 * Footer copy. Light-mode defaults rely on inherited black text, which falls
 * below contrast on the dark toolbar. Use the same bright-muted text across
 * the version stamp, help label, and zero-count badges so the whole footer
 * reads consistently.
 */
[data-theme="dark"] .editor-panel .doenetml-version,
[data-theme="dark"] .editor-panel .diagnostic-tab-label,
[data-theme="dark"] .editor-panel .diagnostic-tab-count {
    color: #cbd5e1;
}

/*
 * CodeMirror editor area. `@uiw/react-codemirror` injects
 * `backgroundColor: '#fff'` via its default light theme extension. Our
 * `colorTheme()` factory already sets `backgroundColor: "var(--canvas)"` on
 * the same `&` selector, and because our extensions are appended after the
 * @uiw defaults in the CodeMirror state they should win. The CSS rule below
 * acts as a belt-and-suspenders override with higher specificity
 * (attribute(0,1,0) + class(0,0,1) = 0,1,1 beats the generated single-class
 * theme rules at 0,0,1) so the editor background is guaranteed dark.
 */
[data-theme="dark"] .editor-panel .cm-editor {
    background-color: var(--canvas);
}

/*
 * Gutters: in dark mode `--mainGray` = #a9a9a9, which is a stark medium-gray
 * bar against the near-black canvas. Most dark editors (VS Code, GitHub dark)
 * use a gutter background barely distinguishable from the code area. Use
 * #1e1e1e (VS Code-style) so the gutter is subtle, with muted line-number
 * text at #8b949e (5.2:1 on #1e1e1e — WCAG AA).
 * Active-line gutter: CodeMirror base theme uses #e2f2ff (light blue), which
 * is garish on a dark gutter. Use a barely-lighter #363636 instead.
 */
[data-theme="dark"] .editor-panel .cm-gutters {
    background-color: #1e1e1e;
    color: #8b949e;
    border-right: 1px solid #333;
}

[data-theme="dark"] .editor-panel .cm-activeLineGutter {
    background-color: #363636;
}

/* Footer popup menu */
[data-theme="dark"] .editor-panel .footer-menu {
    background-color: var(--canvas);
    border-color: #555;
    color: var(--canvasText);
}

/* Responses icon — muted slate instead of medium gray (#667085 fails on #121212) */
[data-theme="dark"] .editor-panel .diagnostic-tab-icon.is-responses {
    color: #9ca3af;
}

/* Diagnostic icon colors — brightened for dark canvas (#121212) */
[data-theme="dark"] .editor-panel .diagnostic-tab-icon.is-error,
[data-theme="dark"] .editor-panel .diagnostic-entry-icon.is-error {
    color: #ff6b6b;
}

[data-theme="dark"] .editor-panel .diagnostic-tab-icon.is-warning,
[data-theme="dark"] .editor-panel .diagnostic-entry-icon.is-warning {
    color: #ffb454;
}

[data-theme="dark"] .editor-panel .diagnostic-tab-icon.is-info,
[data-theme="dark"] .editor-panel .diagnostic-entry-icon.is-info {
    color: #60a5fa;
}

[data-theme="dark"]
    .editor-panel
    .diagnostic-tab-icon.is-accessibility-critical,
[data-theme="dark"]
    .editor-panel
    .diagnostic-entry-icon.is-accessibility-critical {
    color: #c4b5fd;
}

[data-theme="dark"]
    .editor-panel
    .diagnostic-tab-icon.is-accessibility-advisory,
[data-theme="dark"]
    .editor-panel
    .diagnostic-entry-icon.is-accessibility-advisory {
    color: #ddd6fe;
}

/* Inline code in diagnostic messages */
[data-theme="dark"] .editor-panel .diagnostic-entry-message code {
    background-color: #2a2a2a;
    color: #ff7ac6;
}

/* Accessibility report card */
[data-theme="dark"] .editor-panel .accessibility-report-section {
    background: #1e1e1e;
    border-color: #444;
}

[data-theme="dark"] .editor-panel .accessibility-report-intro {
    color: #cbd5e1;
}

[data-theme="dark"] .editor-panel .accessibility-report a {
    color: #79c0ff;
}

[data-theme="dark"] .editor-panel .accessibility-report a:visited {
    color: #79c0ff;
}

[data-theme="dark"] .editor-panel .accessibility-report-heading.critical {
    color: #c4b5fd;
}

[data-theme="dark"] .editor-panel .accessibility-report-heading.advisory {
    color: #ddd6fe;
}

/* Accessibility status button chips */
[data-theme="dark"]
    .viewer-panel
    .accessibility-status-button.has-level-1-issues {
    background: #2d1f4e;
    color: #c4b5fd;
    box-shadow: inset 0 0 0 1px #7c3aed;
}

[data-theme="dark"]
    .viewer-panel
    .accessibility-status-button.no-level-1-issues {
    background: #1a3a2a;
    color: #6ce9a6;
    box-shadow: inset 0 0 0 1px #34d399;
}
.dev-app {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dev-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid #ccc;
    background: #f5f5f5;
}

.dev-toolbar-status {
    margin-left: auto;
    color: #666;
}

.dev-theme-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    color: #333;
}

.dev-reset-button {
    padding: 2px 10px;
    font-size: 0.85em;
    cursor: pointer;
}

.dev-viewer {
    flex: 1 1 auto;
    overflow: hidden;
}