/* ============================================================
   PYTHON COACH BOOLEAN ALGEBRA TUTOR — overrides on top of
   v2-challenge-layout.css
   /boolean-algebra.html  |  body[data-v2-boolean-algebra]

   v2-challenge-layout.css provides: body flex column, #ch-topbar,
   #ch-viewport grid, .ch-pane show/hide, #ch-bottomnav, .ch-tab-btn,
   dark/light tokens.

   PAGE SHELL: same fixed-viewport app-shell as Trace Table/Binary &
   Hex (#ch-topbar / #ch-viewport / .ch-pane / #ch-bottomnav), but with
   its own tab structure: left column holds #ch-desktop-tabs (repositioned
   from v2-challenge-layout.css's default bottom-of-right-column spot to
   the top of the LEFT column instead) plus three tab-switchable panes
   -- #pane-solve, #pane-table, #pane-circuit -- of which only the
   .is-active one is shown at a time. Right column is #pane-info
   (About/how-to-use), permanently visible on desktop and never itself
   tab-switchable -- mirrors Binary & Hex's single static right pane
   exactly. On mobile all four panes collapse into the standard
   #ch-bottomnav four-item tab bar. The desktop tab bar and mobile
   bottom nav share one click-handling convention (.ch-tab-btn +
   data-pane, see initTabs() in boolean-algebra.js) -- the same
   convention challenge.html/challenge.js already establish, confirmed
   as the right precedent to reuse rather than inventing a new one.

   Shared chrome classes below (.pg-topbar-logo*, .pg-avatar-*,
   .pg-info-cta) are duplicated verbatim from binary-hex.css/
   trace-table.css, per this codebase's established convention, rather
   than shared via an import. Everything else uses the "ba-" prefix.

   Colour note: no red/green anywhere on this page. The prototype's
   --match-row (green) / --mismatch-row (red) truth-table highlight
   becomes blue/amber here, reusing the EXACT hex values already
   audited and shipped in v2-challenge-layout.css's CodeMirror syntax
   overrides (not new colours): #0055CC on white = 6.62:1 / #7DD3FC on
   #0F172A = 10.71:1 for the "blue" role; #B35C00 on white = 4.72:1 /
   #FCD34D on #0F172A = 12.38:1 for the "amber" role (WCAG relative-
   luminance formula, verified directly, not estimated). All four clear
   the 4.5:1 WCAG AA threshold for normal text. Both roles also carry a
   text label (not colour alone) in the truth table — see
   .ba-tt-match/.ba-tt-mismatch below. Part 4's #ba-simplify-btn (the
   primary CTA) reuses the same "blue" role rather than var(--primary)
   -- see its own comment below for why. Part 5's info-icon triggers
   (.ba-tt-info-btn, .ba-proof-info-btn) reuse it for the same reason:
   var(--primary) as a foreground glyph colour against --bg only
   clears 2.98:1 in light mode (well under WCAG AA's 4.5:1), being the
   same colour pair as the --primary/white gap already flagged for
   #ba-simplify-btn, just with the two roles swapped.
   ============================================================ */

/* ── PAGE SHELL ─────────────────────────────────────────────── */
body[data-v2-boolean-algebra] {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── VISUALLY-HIDDEN LABEL ───────────────────────────────────────
   Same latent gap as trace-table.css/turtle.css: .sr-only is used on
   the notation <select>'s <label> but isn't defined in v2-base.css.
   Duplicated here per the same established convention. ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── TOPBAR: LOGO (verbatim duplicate of binary-hex.css/trace-table.css) ── */
.pg-topbar-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
}

.pg-topbar-logo-icon { font-size: 1.25rem; line-height: 1; }

.pg-topbar-logo-text {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.2px;
    white-space: nowrap;
}

body[data-v2-boolean-algebra] #ch-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    border-left: 2px solid var(--border);
    padding-left: 12px;
}

@media (max-width: 600px) {
    body[data-v2-boolean-algebra] #ch-title { display: none; }
}

/* ── SETTINGS MENU (verbatim duplicate) ─────────────────────────── */
.pg-avatar-wrap {
    margin-left: auto;
    position: relative;
    flex-shrink: 0;
}

.pg-avatar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--border);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s, border-color 0.15s;
}

.pg-avatar-btn:hover  { background: var(--border); border-color: var(--border-dark); }
.pg-avatar-btn:active { background: var(--border-dark); }

.pg-avatar-btn[aria-expanded="true"] {
    background: var(--border);
    border-color: var(--primary);
}

.pg-avatar-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    padding: 8px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pg-avatar-menu[hidden] { display: none; }

@media (max-width: 420px) {
    .pg-avatar-menu {
        width: calc(100vw - 32px);
        right: -8px;
    }
}

.pg-avatar-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    line-height: 1.3;
}

.pg-avatar-item:hover  { background: var(--border); border-color: var(--border-dark); }
.pg-avatar-item:active { background: var(--border-dark); }

.pg-avatar-item.is-active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg);
}

/* ── PANE: SOLVE (input + proof, left column) ──────────────────── */
#pane-solve {
    background: var(--bg);
}

/* Input strip -- toolbar-like, fixed height above the proof list. */
.ba-input-bar {
    flex-shrink: 0;
    padding: 10px 16px 8px;
    border-bottom: 1.5px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ba-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.ba-input-field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ba-input-label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Plain <textarea>, not contenteditable -- see the JS file header for the
   rationale (the prototype's contenteditable/DOM-range editor was flagged
   as a real fragility risk in the Part 1 investigation). Single-line-ish
   but allows wrap for long expressions; resize disabled so it can't be
   dragged to break the input-bar's fixed layout. */
#ba-expr-input {
    width: 100%;
    min-height: 64px;
    max-height: 110px;
    overflow-y: auto;
    resize: none;
    font-family: var(--mono);
    font-size: 1.0625rem;
    font-weight: 600;
    padding: 8px 12px;
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    letter-spacing: 0.01em;
    line-height: 1.4;
}

#ba-expr-input:focus {
    outline: none;
    border-color: var(--primary);
}

.ba-notation-select {
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 8px 10px;
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    height: 44px;
    flex-shrink: 0;
}

.ba-notation-select:focus { outline: none; border-color: var(--primary); }

/* Primary CTA -- the one action that produces the full step-by-step
   proof, the Q(Simplified) truth-table column, and the simplified
   circuit (see boolean-algebra.js's SOLVE section). Deliberately NOT
   var(--primary)/white -- that pre-existing site-wide combo (used by
   .pg-info-cta) only clears 2.98:1 (light) / 2.14:1 (dark) against
   white text, well under WCAG AA's 4.5:1 normal-text threshold, a
   pre-existing gap out of scope to fix here. Reuses the same "blue"
   role already audited and shipped on this page for the truth table's
   match highlight instead: #0055CC light / #7DD3FC dark, with text
   colour flipped per theme so it stays readable against each --
   white on #0055CC = 6.62:1, #0F172A on #7DD3FC = 10.71:1. Both clear
   WCAG AA by a wide margin (computed via the actual relative-luminance
   formula, not estimated). */
.ba-simplify-btn {
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 800;
    color: #FFFFFF;
    background: #0055CC;
    border: 1.5px solid #0055CC;
    border-radius: var(--radius-sm);
    padding: 0 20px;
    height: 44px;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.15s;
}
[data-theme="dark"] .ba-simplify-btn {
    color: #0F172A;
    background: #7DD3FC;
    border-color: #7DD3FC;
}
.ba-simplify-btn:hover { opacity: 0.88; }
.ba-simplify-btn:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 2px;
}

.ba-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ba-tool-btn {
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ba-tool-btn:hover { background: var(--border); border-color: var(--border-dark); }

.ba-tool-btn:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 1px;
}

.ba-solve-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
    align-self: center;
}

/* Reuses the site's existing error-amber convention verbatim (same
   colours/ratios as .bh-error/.pg-runtime-error: #B35C00 on white =
   4.6:1 WCAG AA; #EEC252 on #0F172A = 9.0:1 WCAG AA). No new colour. */
.ba-error {
    color: #B35C00;
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0;
}
[data-theme="dark"] .ba-error { color: #EEC252; }

/* ── PROOF LIST ───────────────────────────────────────────────── */
.ba-proof-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 16px;
}

.ba-proof-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ba-proof-title-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ba-proof-title {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Click-to-open, not hover. Same colour/state treatment as
   .ba-tt-info-btn below -- see that rule's own comment for the full
   affordance-fix reasoning; both triggers share it verbatim rather
   than one referencing the other, matching this codebase's per-
   instance CSS convention (confirmed via investigation: no shared
   .pg-info-btn exists anywhere). */
.ba-proof-info-btn {
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.875rem;
    color: #0055CC;
    line-height: 1;
    transition: opacity 0.15s;
}
[data-theme="dark"] .ba-proof-info-btn { color: #7DD3FC; }
.ba-proof-info-btn:hover { opacity: 0.7; }
.ba-proof-info-btn:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.ba-copy-btn {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ba-copy-btn:hover { color: var(--primary-dark); }
.ba-copy-btn:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 1px; }

/* Disabled while unsolved -- there are no steps yet to copy (see
   updateActionButtonsState() in boolean-algebra.js). */
.ba-copy-btn:disabled {
    color: var(--text-muted);
    text-decoration: none;
    cursor: not-allowed;
}

/* Shown under the single original-expression row in unsolved state,
   pointing at the Simplify button above. */
.ba-simplify-prompt {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-style: italic;
    padding: 14px 8px 4px;
    margin: 0;
}

.ba-empty-state {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 32px 16px;
    font-size: 0.875rem;
}

.ba-proof-list {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ba-proof-row {
    border-bottom: 1.5px solid var(--border);
}
.ba-proof-row:last-child { border-bottom: none; background: var(--surface); }

.ba-proof-row-main {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.ba-step-num {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    font-family: var(--font);
}

.ba-step-expr {
    font-family: var(--mono);
    font-size: 1rem;
    color: var(--text);
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    line-height: 1.4;
}

.ba-step-expr mark {
    background: var(--hint-border);
    color: #1C1C1C;
    border-radius: 3px;
    padding: 0 2px;
}
[data-theme="dark"] .ba-step-expr mark {
    background: #FCD34D;
    color: #1C1C1C;
}

.ba-rule-btn {
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    background: none;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}

.ba-rule-btn:hover { background: var(--surface); border-color: var(--border-dark); }
.ba-rule-btn:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 1px; }

.ba-rule-btn::after {
    content: ' \24D8';
    font-size: 0.7em;
    opacity: 0.7;
}

.ba-rule-explain {
    padding: 10px 14px 14px 46px;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--surface);
    border-top: 1px dashed var(--border);
}

.ba-rule-explain[hidden] { display: none; }

.ba-rule-formal {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--bg);
    border-left: 2px solid var(--primary);
    padding: 4px 10px;
    margin: 4px 0 6px;
}

.ba-rule-example {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 4px;
    font-family: var(--mono);
}

/* Step-name-only row (Original Expression) -- no rule button. */
.ba-step-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Truncated / cycle-detected status banners -- neutral surface + primary
   accent, not amber/red, since these are informational, not errors. */
.ba-status-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-top: 10px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text);
}

.ba-status-note-icon { flex-shrink: 0; font-size: 1rem; line-height: 1.4; }

/* ── PANE: TABLE (truth table, right column top) ───────────────── */
#pane-table {
    background: var(--bg);
}

.ba-table-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 48px;
    border-bottom: 1.5px solid var(--border);
}

.ba-table-title-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ba-table-title {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Click-to-open, not hover -- matches Binary & Hex's #bh-nibble-info-btn
   convention (see the panel's own comment below for why). Colour was
   originally var(--text-secondary) (6.9:1/6.96:1, comfortably clears
   WCAG AA) -- changed to this blue role instead because AA compliance
   wasn't the actual problem: --text-secondary is legible but reads as
   static muted text, not as an interactive control, so students weren't
   noticing it was clickable. #0055CC/#7DD3FC is the same already-
   audited "blue" role used site-wide on this page (truth table match
   highlight, #ba-simplify-btn) for exactly this "this is interactive"
   signal -- not var(--primary), the site's more general link/primary
   token, because var(--primary) as a foreground glyph colour against
   --bg only clears 2.98:1 in light mode, under WCAG AA's 4.5:1 (the
   same --primary/white pair already flagged for #ba-simplify-btn, just
   with foreground/background swapped -- contrast is symmetric either
   way). New ratios: #0055CC on white = 6.62:1 / #7DD3FC on #0F172A =
   10.71:1, both comfortably clear AA (relative-luminance formula,
   verified directly). Binary & Hex's #bh-nibble-info-btn gets the
   identical colour and the hover/focus-visible states it was
   previously missing, for consistency across both pages. */
.ba-tt-info-btn {
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.875rem;
    color: #0055CC;
    line-height: 1;
    transition: opacity 0.15s;
}
[data-theme="dark"] .ba-tt-info-btn { color: #7DD3FC; }
.ba-tt-info-btn:hover { opacity: 0.7; }
.ba-tt-info-btn:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ── INFO PANELS (shared shell) ───────────────────────────────────
   Click-to-open panels, not hover tooltips -- same reasoning and same
   position:fixed/JS-computed-placement mechanism as Binary & Hex's
   #bh-nibble-info-panel (see makeInfoPanel() in boolean-algebra.js):
   both triggers live inside panes that can scroll, under an ancestor
   with overflow:hidden (#ch-viewport), so position:fixed against the
   viewport itself is what makes clipping structurally impossible at
   any scroll position or width, not position:absolute anchoring.
   Shared by #ba-tt-info-panel and #ba-proof-info-panel -- both are a
   single short paragraph of prose, no tables, so this shell is
   correspondingly small/simple: a plain max-width capped by the
   viewport, no container-width measurement needed. */
.ba-info-panel {
    position: fixed;
    z-index: 400;
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm, 10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    padding: 18px 20px;
}
[data-theme="dark"] .ba-info-panel {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.ba-info-panel[hidden] { display: none; }

.ba-info-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ba-info-title {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}

/* Default state uses --text-secondary, not --text-muted -- the nibble
   panel's own close button (.bh-nibble-info-close-btn) uses --text-muted
   by default, which only clears 2.19:1 (light) / 3.75:1 (dark) against
   --bg, well under WCAG AA's 4.5:1 threshold. That's a pre-existing gap
   in the reused pattern, out of scope to fix there -- but not one to
   reproduce in new CSS. --text-secondary clears 6.9:1 / 6.96:1 instead.
   (This close button isn't part of the trigger-icon affordance fix
   above -- it's an X glyph inside an already-open panel, not something
   a student needs to first notice is clickable.) */
.ba-info-close-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.ba-info-close-btn:hover {
    color: var(--text);
    background: var(--border);
}
.ba-info-close-btn:focus-visible {
    color: var(--text);
    background: var(--border);
    outline: 2px solid var(--primary-dark);
    outline-offset: 1px;
}

.ba-info-panel p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 12px;
}
.ba-info-panel p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
    .ba-info-panel {
        padding: 14px 16px;
    }

    /* Input bar: wrap to two rows so #ba-expr-input always gets its own
       full-width row, never squeezed by the two flex-shrink:0 siblings.
       Row 1: .ba-input-field (textarea + label) at full width.
       Row 2: .ba-notation-select at natural width + .ba-simplify-btn
       expanding to fill the rest, keeping it a large tap target. */
    .ba-input-row {
        flex-wrap: wrap;
    }
    .ba-input-field {
        flex: 0 0 100%;
    }
    .ba-simplify-btn {
        flex: 1;
    }
}

.ba-table-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 16px 16px;
}

.ba-too-many-vars {
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 24px 8px;
    text-align: center;
}

.ba-truth-table {
    border-collapse: collapse;
    width: 100%;
    font-family: var(--mono);
}

.ba-truth-table th,
.ba-truth-table td {
    border: 1.5px solid var(--border);
    padding: 6px 10px;
    text-align: center;
    font-size: 0.875rem;
}

.ba-truth-table thead th {
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    position: sticky;
    top: 0;
    z-index: 1;
}

.ba-tt-result {
    font-weight: 700;
}

/* Blue/amber match/mismatch highlight -- exact hex values already audited
   elsewhere in this codebase (v2-challenge-layout.css CodeMirror syntax
   overrides), reused verbatim, not new colours. Text label
   (.ba-tt-tag) always accompanies the colour -- never colour alone. */
.ba-tt-match {
    background: rgba(0, 85, 204, 0.08);
}
.ba-tt-match .ba-tt-tag { color: #0055CC; }
[data-theme="dark"] .ba-tt-match { background: rgba(125, 211, 252, 0.12); }
[data-theme="dark"] .ba-tt-match .ba-tt-tag { color: #7DD3FC; }

.ba-tt-mismatch {
    background: rgba(179, 92, 0, 0.08);
}
.ba-tt-mismatch .ba-tt-tag { color: #B35C00; }
[data-theme="dark"] .ba-tt-mismatch { background: rgba(252, 211, 77, 0.12); }
[data-theme="dark"] .ba-tt-mismatch .ba-tt-tag { color: #FCD34D; }

.ba-tt-tag {
    display: block;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 2px;
}

.ba-csv-btn {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.ba-csv-btn:hover { background: var(--border); border-color: var(--border-dark); }
.ba-csv-btn:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 1px; }

/* ── PANE: CIRCUIT (logic gate diagram) ──────────────────────────── */
#pane-circuit { background: var(--bg); }

.ba-circuit-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ba-circuit-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
}

.ba-circuit-wrap {
    position: relative;
    flex: 1;
    min-height: 360px;
    display: flex;
}

/* Canvas is purely visual (aria-hidden) -- see #ba-circuit-toggle-layer
   below for the real accessible/interactive layer. width/height CSS
   properties are 100%; the canvas.width/height *attributes* (the actual
   pixel buffer) are set from this element's clientWidth/Height in
   boolean-algebra.js's resizeCanvas(), matching the prototype's 1:1
   canvas-pixel-to-CSS-pixel approach (no devicePixelRatio scaling). */
#ba-circuit-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Real, focusable, keyboard-operable buttons positioned over each
   variable leaf box drawn on the canvas -- one per variable, re-rendered
   on every drawCircuit() call (see wireCircuitToggleButtons() in
   boolean-algebra.js). pointer-events:none on the layer itself so empty
   space doesn't intercept clicks meant for nothing; each button sets its
   own pointer-events:auto. Visually near-transparent (the canvas already
   draws the variable letter and box) but with a real, visible keyboard
   focus ring -- this is the ONLY way to toggle a variable; there is no
   separate canvas click handler, so mouse and keyboard use the exact
   same code path. */
#ba-circuit-toggle-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ba-circuit-toggle-btn {
    position: absolute;
    pointer-events: auto;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: transparent;
    font-size: 1px;
}

.ba-circuit-toggle-btn:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ── PANE: INFO (About/how-to-use, right column bottom) ─────────── */
#pane-info { background: var(--bg); }

#ch-objective-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 16px;
}

.ba-howto-heading {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 8px;
    margin-bottom: 10px;
}

.ba-howto {
    margin: 0 0 20px;
    padding-left: 20px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}
.ba-howto li { margin-bottom: 6px; }
.ba-howto strong { color: var(--text); }

.pg-info-cta {
    display: block;
    padding: 13px 18px;
    background: var(--primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-sm, 6px);
    transition: opacity 0.15s;
    margin-top: 4px;
}
.pg-info-cta:hover { opacity: 0.88; }

/* ── DESKTOP LAYOUT (>=1024px) ─────────────────────────────────────
   Left column: #ch-desktop-tabs (top, fixed height) + whichever of
   #pane-solve/#pane-table/#pane-circuit is .is-active (below it, fills
   the rest of the column). Right column: #pane-info, permanently
   visible, spanning both grid rows -- mirrors Binary & Hex's single
   static right pane exactly, never itself tab-switchable on desktop.

   #ch-desktop-tabs is repositioned here from v2-challenge-layout.css's
   own default placement (bottom of the RIGHT column, as challenge.html
   uses it) to the TOP of the LEFT column instead -- a different visual
   position, but the exact same .ch-tab-btn/data-pane markup and
   click-handling convention (see initTabs() in boolean-algebra.js),
   per the investigation confirming that convention (not anything from
   Binary & Hex/Trace Table) is the right thing to reuse. ─────────── */
@media (min-width: 1024px) {
    body[data-v2-boolean-algebra] #ch-bottomnav { display: none; }

    body[data-v2-boolean-algebra] #ch-desktop-tabs {
        display: flex;
        grid-column: 1;
        grid-row: 1;
        align-items: stretch;
        background: var(--bg);
        border-bottom: 2px solid var(--border);
        border-right: 2px solid var(--border);
        border-top: none;
        height: auto;
        position: relative;
        z-index: 1;
    }

    body[data-v2-boolean-algebra] #ch-viewport {
        display: grid;
        grid-template-columns: 3fr 2fr;
        grid-template-rows: 52px 1fr;
        overflow: hidden;
    }

    /* Only the active one of the three left-column tab panes is shown.
       #pane-info is handled separately below -- always visible on
       desktop, its .is-active state (meaningful only on mobile) is
       irrelevant here. */
    body[data-v2-boolean-algebra] #pane-solve,
    body[data-v2-boolean-algebra] #pane-table,
    body[data-v2-boolean-algebra] #pane-circuit {
        position: relative;
        inset: auto;
        display: none !important;
        grid-column: 1;
        grid-row: 2;
        border-right: 2px solid var(--border);
    }
    body[data-v2-boolean-algebra] #pane-solve.is-active,
    body[data-v2-boolean-algebra] #pane-table.is-active,
    body[data-v2-boolean-algebra] #pane-circuit.is-active {
        display: flex !important;
    }

    body[data-v2-boolean-algebra] #pane-info {
        position: relative;
        inset: auto;
        display: flex !important;
        grid-column: 2;
        grid-row: 1 / -1;
        overflow: hidden;
    }

    body[data-v2-boolean-algebra] #ch-objective-scroll {
        max-width: 560px;
        width: 100%;
        margin-inline: auto;
        padding: clamp(16px, 0.89vw + 6.9px, 24px) clamp(20px, 1.79vw + 1.7px, 32px);
    }
}