/* ── PAGE BASE ──────────────────────────────────────────────── */
/*
 * 100dvh accounts for mobile browser chrome (address bar, nav bar)
 * better than 100vh. overflow: hidden is the primary scroll-safety
 * guarantee — the viewport container must NEVER scroll; only the
 * insides of individual panes are allowed to overflow.
 */
body[data-v2-challenge] {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── TOP BAR ────────────────────────────────────────────────── */
#ch-topbar {
    height: var(--topbar-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--bg);
    border-bottom: 2px solid var(--border);
    z-index: 100;
}

#ch-back-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    transition: background 0.15s;
}

#ch-back-btn:hover  { background: var(--surface); }
#ch-back-btn:active { background: var(--border); }

#ch-topbar #pc-avatar-wrap { margin-left: auto; }

#ch-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

#ch-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    text-transform: capitalize;
}

/* ── MAIN VIEWPORT ──────────────────────────────────────────── */
/*
 * flex: 1 with min-height: 0 fills the remaining column height
 * (between topbar and bottomnav) without overflowing.
 * overflow: hidden prevents this container from ever scrolling —
 * scroll is exclusively permitted inside .ch-pane children.
 */
#ch-viewport {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* ── PANES (mobile: one visible at a time) ──────────────────── */
.ch-pane {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.ch-pane.is-active { display: flex; }

/* ── PANE: OBJECTIVE ────────────────────────────────────────── */
#pane-objective {
    background: var(--bg);
}

/* Only the inner scroll container scrolls — never #pane-objective itself */
#ch-objective-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
}

.ch-obj-content {
    margin-block: auto;
}

.ch-obj-lesson-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 6px;
}

.ch-obj-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 12px;
}

.ch-obj-objective {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    margin-bottom: 20px;
}

.ch-criteria-heading {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.ch-criteria-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.ch-criteria-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}

.ch-criteria-list li::before {
    content: '○';
    flex-shrink: 0;
    font-size: 14px;
    color: var(--border-dark);
    margin-top: 1px;
}

.ch-criteria-list li.ch-criterion-pass {
    color: var(--primary);
}

.ch-criteria-list li.ch-criterion-pass::before {
    content: '✓';
    color: var(--primary);
}

.ch-expected-output {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
}

.ch-expected-output-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.ch-expected-output pre {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ── PANE: EDITOR ───────────────────────────────────────────── */
#pane-editor {
    background: var(--hint-code-bg);
}

.ch-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--text-inverse);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.ch-editor-filename {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-inverse);
    font-family: var(--mono);
}

#ch-run-btn {
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 800;
    border-bottom: 3px solid var(--primary-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.15s, transform 0.1s, border-bottom-width 0.1s;
}

#ch-run-btn:hover  { filter: brightness(1.05); }
#ch-run-btn:active {
    transform: translateY(1px);
    border-bottom-width: 2px;
    filter: brightness(0.92);
}

/*
 * Textarea placeholder for Phase 3.2.
 * CodeMirror will replace this in Phase 3.3.
 * flex: 1 + min-height: 0 lets it fill the remaining pane height
 * without creating a double-scroll zone.
 */
#ch-code-area {
    flex: 1;
    min-height: 0;
    width: 100%;
    resize: none;
    border: none;
    outline: none;
    padding: 16px;
    background: var(--hint-code-bg);
    color: var(--hint-code-text);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
    tab-size: 4;
    -webkit-tab-size: 4;
    overflow-y: auto;
}

#ch-code-area::placeholder { color: rgba(255, 255, 255, 0.2); }

/* CodeMirror layout inside #pane-editor.
 * The .v2-cm-wrap wrapper brings .v2-cm-wrap .CodeMirror rules into effect,
 * fixing flex sizing and the overflow:auto scroll fix above.
 *
 * padding-bottom on the scroll sizer: prevents the active-line highlight
 * (the "blue band") from painting flush against the bottom edge of the pane.
 */
#pane-editor .CodeMirror-scroll {
    padding-bottom: 12px;
}

/* ── PANE: OUTPUT ───────────────────────────────────────────── */
/* NOTE: do NOT set display or flex-direction here.
   Visibility is controlled exclusively by the tab class system:
     .ch-pane            → display: none  (hidden by default)
     .ch-pane.is-active  → display: flex  (shown when tab is active)
   .ch-pane already carries flex-direction:column, so the output pane
   is a proper column layout the moment .is-active is toggled on.
   An ID-level display override would break the show/hide mechanism. */
#pane-output {
    background: var(--bg) !important;
    color: var(--text);
}

.ch-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--text-inverse);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.ch-output-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-inverse);
}

#ch-clear-btn {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-xs);
    padding: 4px 10px;
    transition: border-color 0.15s, color 0.15s;
}

#ch-clear-btn:hover {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Only #ch-output-content scrolls — never #pane-output itself */
#ch-output-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Spacing between injected output sections (stdout block, validation list,
   tip/feedback text, celebration banner).  The lobster-claw > * + * pattern
   targets every direct child after the first so the top of the pane never
   gets an orphan gap when only one section is present. */
#ch-output-content > * + * {
    margin-top: 20px;
}

/* Space the sub-sections inside the validation wrapper (checklist, feedback
   tip, success banner).  These are grandchildren of #ch-output-content so
   the rule above cannot reach them.  16px keeps them visually grouped as
   one unit while still breathing relative to the 20px outer rhythm. */
.ch-validation-result > * + * {
    margin-top: 16px;
}

/* Mirror the same spacing in the lesson-player terminal pane */
#v2-output > * + * {
    margin-top: 20px;
}

.ch-output-prompt {
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

/* ── CONTINUE-TO-HUB CTA (injected by challenge.js on success) ─
   .ch-hub-cta is a flex sibling of #ch-output-content inside the
   #pane-output column.  margin-top:auto consumes any leftover space
   above it, pinning the wrapper to the absolute bottom of the pane.
   flex-shrink:0 prevents it from being compressed when output is tall
   (the content area scrolls instead via #ch-output-content overflow-y).
   Safe-area padding keeps the button clear of device bezels/nav bars. */
.ch-hub-cta {
    flex-shrink: 0;
    margin-top: auto;
    /* env(safe-area-inset-bottom, 16px) resolves to 0px on non-notch devices
       because the browser supports env() but the inset itself is 0.  The 16px
       fallback only fires when env() is unsupported entirely.  max() guarantees
       at least 16px clearance on every device while still honouring the inset
       on notched phones (iPhone home indicator, Android gesture nav bar). */
    padding: 16px 16px max(16px, env(safe-area-inset-bottom, 0px));
}

.ch-hub-cta-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}

.ch-hub-cta-btn:hover { opacity: 0.88; }

/* ── INTERACTIVE INPUT FIELD ────────────────────────────────── */
/*
 * Rendered inside the <pre class="ch-output-interactive"> when Python
 * calls input().  Inline-flex keeps the prefix + field + button on one
 * line, inline with the surrounding terminal text.
 * No border-heavy styling — only a bottom border on the field to signal
 * editability while staying visually quiet.
 */
.ch-output-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.ch-input-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.ch-input-prefix {
    color: var(--primary);
    font-weight: 700;
    user-select: none;
    flex-shrink: 0;
}

.ch-input-field {
    background: none;
    border: none;
    border-bottom: 1px solid var(--primary);
    outline: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--text);
    padding: 0 2px;
    width: clamp(100px, 30vw, 220px);
    min-width: 0;
}

.ch-input-field:focus {
    border-bottom-color: var(--primary);
}

.ch-input-submit {
    background: none;
    border: 1px solid var(--primary);
    border-radius: var(--radius-xs);
    color: var(--primary);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    cursor: pointer;
    line-height: 1.5;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

.ch-input-submit:hover {
    background: var(--primary);
    color: var(--text-inverse);
}

/* ── BOTTOM NAV (mobile only) ───────────────────────────────── */
/* Desktop right-column tab bar — hidden on mobile, shown at ≥1024px */
#ch-desktop-tabs { display: none; }

#ch-bottomnav {
    height: var(--bottomnav-h);
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    background: var(--bg);
    border-top: 2px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.ch-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 8px 4px 10px;
    min-height: 48px;         /* WCAG 2.5.5 minimum tap target */
    position: relative;
    transition: color 0.15s;
    cursor: pointer;
}

.ch-tab-btn .tab-icon  { font-size: 22px; line-height: 1; }
.ch-tab-btn .tab-label { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }

/* Active pip under icon */
.ch-tab-btn::after {
    content: '';
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.2s;
}

.ch-tab-btn.is-active        { color: var(--primary); }
.ch-tab-btn.is-active::after { opacity: 1; }
.ch-tab-btn:active           { opacity: 0.7; }

/* ── RESPONSIVE: narrow phones ──────────────────────────────── */
@media (max-width: 374px) {
    .ch-tab-btn .tab-label { display: none; }
    #ch-badge              { display: none; }
}

/* Code block — dark background, monospace; tokens shared with hint system */
.chl-code-block {
    background: var(--hint-code-bg);
    border-radius: var(--radius-sm);
    max-height: 180px;
    overflow-y: auto;
}

.chl-code-block pre {
    padding: 0.933em 1.067em;
    font-family: var(--mono);
    font-size: 0.867em;
    color: var(--hint-code-text);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow-x: auto;
}

/* ── RESPONSIVE: desktop (≥ 1024px) — three-pane grid ──────────
 *
 * THE MANDATE: Left column — Editor (top, flexible) stacked above
 * Output (bottom, 220 px fixed). Right column — Objective (full
 * height). This exactly replicates the V1 split-screen layout.
 *
 * Bottom nav is hidden; all three panes are permanently visible.
 * .ch-pane display:flex !important overrides the mobile is-active
 * show/hide toggle so desktop always shows all three simultaneously.
 *
 * overflow: hidden on #ch-viewport is preserved — only the scrollable
 * inner containers (#ch-objective-scroll, #ch-code-area, and
 * #ch-output-content) scroll.
 * ─────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    /* Desktop tab bar height token */
    :root { --desktop-tabs-h: 56px; }

    /* Mobile nav hidden on desktop */
    #ch-bottomnav { display: none; }

    /* Desktop right-column tab bar — grid-column:2 places it in the right
       column; grid-row:1/-1 spans the full column height; align-self:end
       pins it to the bottom. Mirrors the mobile pattern exactly. */
    #ch-desktop-tabs {
        display: flex;
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: end;
        height: var(--desktop-tabs-h);
        align-items: stretch;
        background: var(--bg);
        border-top: 1px solid var(--border);
        position: relative;
        z-index: 1;
    }

    #ch-viewport {
        display: grid;
        grid-template-columns: 3fr 2fr;
        grid-template-rows: 3fr 12px 2fr;
        overflow: hidden;
    }

    /* Left-column panes permanently visible; right-column panes respect is-active */
    .ch-pane {
        position: relative;
        display: flex !important;
        inset: auto;
    }

    #ch-lesson-panel,
    #pane-objective,
    #ch-help-panel { display: none !important; }

    #ch-lesson-panel.is-active,
    #pane-objective.is-active,
    #ch-help-panel.is-active { display: flex !important; }

    #tab-editor, #tab-output { display: none; }

    /* Editor: left column, top row (fills remaining height) */
    #pane-editor {
        grid-column: 1;
        grid-row: 1;
        border-right: 2px solid var(--border);
    }

    /* Output: left column, bottom row */
    #pane-output {
        grid-column: 1;
        grid-row: 3;
        border-top: 2px solid var(--border-dark);
        border-right: 2px solid var(--border);
    }

    /* ── RESIZE HANDLE ──────────────────────────────────────────── */
    .ch-resize-handle {
        grid-column: 1;
        grid-row: 2;
        height: 12px;
        cursor: ns-resize;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
        border-right: 2px solid var(--border);
        z-index: 10;
    }

    .ch-resize-handle::after {
        content: '⋯';
        font-size: 20px;
        color: rgba(139, 92, 246, 0.5);
    }

    .ch-resize-handle:hover::after  { color: rgba(139, 92, 246, 0.8); }
    .ch-resize-handle.dragging::after { color: rgba(139, 92, 246, 1); }

    /* Right column panes — all span the full right column (both left rows).
       padding-bottom reserves space so flex content ends above the tab bar.
       Inactive panes are display:none so only one occupies the area at a time. */
    #ch-lesson-panel,
    #pane-objective,
    #ch-help-panel {
        grid-column: 2;
        grid-row: 1 / -1;
        padding-bottom: var(--desktop-tabs-h);
        overflow: hidden;
    }

    body[data-v2-challenge] #ch-lesson-panel {
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    body[data-v2-challenge]:not(.ch-fullscreen) #ch-lesson-panel {
        overflow: visible;
    }

    #pane-objective .chl-nav { display: none; }

    /* ── Desktop fluid typography (1024px → 1920px) ─────────────────
       clamp(min, slope·vw + intercept, max)
       slope = (max−min)/896×100; intercept = min − slope×10.24        ── */
    .ch-obj-lesson-tag   { font-size: clamp(13px, 0.22vw + 10.7px, 15px); }
    .ch-obj-title        { font-size: clamp(26px, 1.12vw + 14.5px, 36px); }
    .ch-obj-objective    { font-size: clamp(18px, 0.45vw + 13.4px, 22px); }
    .ch-criteria-heading { font-size: clamp(13px, 0.22vw + 10.7px, 15px); }
    .ch-criteria-list li { font-size: clamp(16px, 0.45vw + 11.4px, 20px); }

    /* ── Desktop fluid spacing + readable line length ────────────────
       max-width caps prose at ~640px; margin-inline centres the scroll
       container within the panel as the viewport grows past ~1600px.    ── */
    #ch-objective-scroll {
        max-width: 640px;
        width: 100%;
        margin-inline: auto;
        padding: clamp(20px, 0.89vw + 10.9px, 28px)
                 clamp(24px, 1.79vw + 5.7px,  40px)
                 clamp(24px, 1.79vw + 5.7px,  40px);
    }

    /* Lesson slide content — nav bar intentionally full-width */
    .chl-slide-wrap {
        width: 100%;
        margin-inline: auto;
    }

    .ch-help-card { padding: clamp(32px, 1.34vw + 18.3px, 44px)
                             clamp(28px, 1.34vw + 14.3px, 40px); }
    .ch-help-scroll { padding: clamp(20px, 1.34vw + 6.3px,  32px)
                               clamp(20px, 0.89vw + 10.9px, 28px)
                               0; }
    body[data-v2-challenge] .ch-hint-item {
        padding: clamp(16px, 0.89vw + 6.9px,  24px)
                 clamp(20px, 0.89vw + 10.9px, 28px);
    }

    /* Remove 180px code-block cap — panel has room to show full content */
    .chl-code-block,
    .v2-code-block,
    .v2-mistake-correct pre,
    .v2-mistake-incorrect pre { max-height: none; }

    /* ── Fullscreen presentation mode ──────────────────────────────────── */
    body.ch-fullscreen #ch-topbar       { display: none; }
    body.ch-fullscreen #ch-desktop-tabs { display: none; }
    body.ch-fullscreen #pane-editor     { display: none; }
    body.ch-fullscreen #pane-output     { display: none; }
    body.ch-fullscreen #pane-objective  { display: none; }
    body.ch-fullscreen #ch-help-panel   { display: none; }

    body.ch-fullscreen #ch-lesson-panel {
        position: fixed;
        inset: 0;
        z-index: 1000;
        width: 100dvw;
        height: 100dvh;
        padding-bottom: 0;
        --chl-font-size: clamp(1.25rem, 2.5vw, 2rem);
    }

    body.ch-fullscreen .chl-slide-wrap {
        max-width: 56rem;
        width: 100%;
        margin-inline: auto;
    }
}

/* ── SKIP TEST BANNER ───────────────────────────────────────── */
.ch-skip-banner {
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--primary);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
@supports (color: color-mix(in srgb, red 1%, transparent)) {
    .ch-skip-banner {
        background: color-mix(in srgb, var(--primary) 8%, var(--bg));
        border-bottom-color: color-mix(in srgb, var(--primary) 25%, transparent);
    }
}

/* ── SKIP TEST FAIL MESSAGE ─────────────────────────────────── */
.ch-skip-fail-msg {
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
    margin: 8px 0 0;
}
.ch-skip-fail-back {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: 6px;
}
.ch-skip-fail-back:hover { color: var(--text); }

.v2-cm-wrap {
    flex: 1;
    min-height: 0;          /* lets flex child shrink below content height */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.v2-cm-wrap .CodeMirror {
    flex: 1;
    min-height: 0;
    height: 100%;
    background: var(--bg) !important;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
}

.v2-cm-wrap .CodeMirror-gutters {
    background: var(--bg) !important;
    border-right: none;
}

/* Overlap fix: CM5 measures gutter width at init-time. When the editor is
   initialised inside a display:none panel the gutter measures as 0 px and
   CM sets padding-left:0 on .CodeMirror-lines, causing text to collide with
   the line-number gutter.  A small explicit padding clears the gutter edge
   so the code is never hidden behind the numbers. */
.v2-cm-wrap .CodeMirror-lines {
    padding-left: 4px;
}

/* Double-scroll fix:
   codemirror.css ships ".CodeMirror-scroll { overflow:scroll !important }"
   — the !important is in CM5's own stylesheet, so no specificity trick can
   beat it.  Our counter-!important is the only architecturally valid override
   short of forking codemirror.css.  It switches the scroll container from
   "always show bars" to "show bars only when content overflows", eliminating
   the phantom scrollbar in our constrained flex layout.

   Note: the ".CodeMirror { height:300px }" constraint — the actual source of
   the fixed-height floor — is already neutralised by the higher-specificity
   rule above (.v2-cm-wrap .CodeMirror { flex:1; min-height:0; height:100% }).
   CM5 does NOT set min-height on .CodeMirror-scroll in its CSS or JS (it
   sets minHeight only on .CodeMirror-sizer), so no min-height override is
   needed here. */
.v2-cm-wrap .CodeMirror-scroll {
    overflow: auto !important;
}

/* ── CODEMIRROR SYNTAX COLOURS — light background, deuteranopia-safe ───────
   material-darker ships colours designed for a near-black canvas.  Because
   we force background:white the default text and all token colours become
   unreadable.  These overrides replace every token colour with a palette
   that (a) has ≥4.5:1 contrast on #fff and (b) uses blue/amber/purple
   rather than red/green so distinctions are preserved for deuteranopes.

   Scope: .v2-cm-wrap keeps these rules isolated to the challenge editor
   and away from any dark-background editors elsewhere on the site.      */

/* Default editor text — near-black, overrides material-darker #EEFFFF */
.v2-cm-wrap .CodeMirror { color: #1C1C1C; }

/* Line numbers */
.v2-cm-wrap .CodeMirror-linenumber { color: #999999; }

/* Keywords: if / for / while / def / class / return / import / print …
   Bold blue — high contrast (8.6:1 on white), clearly distinct from text. */
.v2-cm-wrap .cm-keyword { color: #0055CC; font-weight: bold; }

/* Built-ins: print, len, range, True, False, None */
.v2-cm-wrap .cm-builtin { color: #0055CC; }

/* Strings — amber; 4.6:1 on white; unambiguous for deuteranopes          */
.v2-cm-wrap .cm-string,
.v2-cm-wrap .cm-string-2 { color: #B35C00; }

/* Numbers — purple; 7.1:1 on white                                        */
.v2-cm-wrap .cm-number { color: #6A1FB5; }

/* Comments — mid-grey; 4.6:1 on white; clearly de-emphasised             */
.v2-cm-wrap .cm-comment { color: #767676; font-style: italic; }

/* Function/class definition names                                         */
.v2-cm-wrap .cm-def { color: #0055CC; }

/* Operators  +  -  *  /  =  ==  !=  …                                    */
.v2-cm-wrap .cm-operator { color: #1C1C1C; }

/* Brackets, punctuation, and any unstyled atoms — same near-black as text */
.v2-cm-wrap .cm-bracket,
.v2-cm-wrap .cm-punctuation,
.v2-cm-wrap .cm-atom { color: #1C1C1C; }

/* Matching-bracket highlight — material-darker sets this to near-white,
   invisible on a white canvas.  Blue tint + bold makes the pair obvious.  */
.v2-cm-wrap .CodeMirror-matchingbracket {
    color: #0055CC !important;
    background: #D6E4FF !important;
    font-weight: bold;
}

/* Non-matching bracket (shown when brackets are mismatched)               */
.v2-cm-wrap .CodeMirror-nonmatchingbracket {
    color: #B35C00 !important;
    background: #FFF3CD !important;
}

/* ── DARK MODE SYNTAX THEME ─────────────────────────────────────
   In dark mode --bg is #0F172A, so the light palette above (dark
   tokens on a white canvas) is invisible.  These overrides mirror
   every hue role — blue=keywords, amber=strings, purple=numbers,
   muted=comments — with colours calibrated for ≥4.5:1 on #0F172A.
   Deuteranopia-safe: same hue axes as the light theme.          */

[data-theme="dark"] .v2-cm-wrap .CodeMirror            { color: #E2E8F0; }

[data-theme="dark"] .v2-cm-wrap .CodeMirror-linenumber { color: #475569; }

[data-theme="dark"] .v2-cm-wrap .cm-keyword            { color: #7DD3FC; font-weight: bold; }
[data-theme="dark"] .v2-cm-wrap .cm-builtin            { color: #93C5FD; }
[data-theme="dark"] .v2-cm-wrap .cm-string,
[data-theme="dark"] .v2-cm-wrap .cm-string-2           { color: #FCD34D; }
[data-theme="dark"] .v2-cm-wrap .cm-number             { color: #C084FC; }
[data-theme="dark"] .v2-cm-wrap .cm-comment            { color: #94A3B8; font-style: italic; }
[data-theme="dark"] .v2-cm-wrap .cm-def                { color: #7DD3FC; }
[data-theme="dark"] .v2-cm-wrap .cm-operator           { color: #E2E8F0; }
[data-theme="dark"] .v2-cm-wrap .cm-bracket,
[data-theme="dark"] .v2-cm-wrap .cm-punctuation,
[data-theme="dark"] .v2-cm-wrap .cm-atom               { color: #E2E8F0; }

[data-theme="dark"] .v2-cm-wrap .CodeMirror-matchingbracket {
    color: #7DD3FC !important;
    background: #1E3A5F !important;
    font-weight: bold;
}

/* Amber on dark-amber bg — deuteranopia-safe (blue vs amber, not red vs green) */
[data-theme="dark"] .v2-cm-wrap .CodeMirror-nonmatchingbracket {
    color: #FCD34D !important;
    background: #3B2A00 !important;
}