/* ==========================================================================
   The mode rail, and the mode header beside it.

   Fixed 84px, full height, and it never scrolls — the sidebar to its right
   does. Every fixed-width element here carries flex-shrink: 0 and every label
   carries white-space: nowrap; the layout bugs the reference build hit at
   narrow widths all came from omitting one of the two.

   Accent is passed down as --rail-accent, set per item in JS from the mode's
   accentVar. That is what lets one attribute paint the icon box and the meter
   together without either learning the mode's name.
   ========================================================================== */

.rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84px;
    flex-shrink: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: 17px 0;
    background: var(--rail-bg);
    border-right: 1px solid var(--ds-border);
}

.rail-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 34px;
}

.rail-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Two study modes, then this, then three drill modes. It says the three below
   are places to be tested rather than places to read, and removing it makes
   five equal siblings out of two groups that are not alike. */
.rail-divider {
    width: 46px;
    height: 1px;
    flex-shrink: 0;
    background: var(--ds-border);
    margin: 6px 0;
}

.rail-item {
    width: 68px;
    min-height: 40px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 9px 0 7px;
    border: 0;
    background: transparent;
    border-radius: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition-hover);
}

.rail-item:hover { background: var(--ds-surface); }
.rail-item.active { background: var(--rail-item-active); }

.rail-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.rail-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1.5px solid var(--rail-icon-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1;
    color: var(--ds-muted);
    transition: color var(--transition-hover), border-color var(--transition-hover);
}

.rail-item.active .rail-icon {
    color: var(--rail-accent);
    background: color-mix(in srgb, var(--rail-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--rail-accent) 30%, transparent);
}

.rail-label {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    color: var(--ds-muted);
}

.rail-item.active .rail-label {
    color: var(--ds-text);
    font-weight: 600;
}

.rail-spacer { flex: 1; }

.rail-meter {
    width: 46px;
    height: 4px;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--ds-raised);
    overflow: hidden;
}

.rail-meter-fill {
    height: 100%;
    background: var(--rail-accent);
    transition: width var(--transition-panel);
}

.rail-meter-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ds-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The theme switch stacks in the rail rather than sitting in a row. */
.rail .theme-switch {
    flex-shrink: 0;
    flex-direction: column;
    gap: 2px;
}
.rail .theme-switch-option span { display: none; }
.rail .theme-switch-option { padding: 6px; }

/* --------------------------------------------------------------------------
   Mode header — one row, 64px, right of the rail
   -------------------------------------------------------------------------- */

.mode-header {
    position: fixed;
    top: 0;
    left: 84px;
    right: 0;
    height: 64px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-5);
    background: var(--ds-veil);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--ds-border);
}

.mode-header-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--ds-text);
    white-space: nowrap;
    flex-shrink: 0;
}

.mode-header-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-faint);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.mode-header-rule {
    width: 1px;
    height: 20px;
    flex-shrink: 0;
    background: var(--ds-border);
}

.mode-header-spacer { flex: 1; }

.mode-header-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.mode-header-progress-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ds-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mode-header-meter {
    width: 88px;
    height: 4px;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--ds-raised);
    overflow: hidden;
}

.mode-header-meter-fill {
    height: 100%;
    background: var(--rail-accent);
    transition: width var(--transition-panel);
}

/* Flexible, never fixed. A hard 340px clips the field below about 990px, which
   is what the reference build hit; only the placeholder area may compress, so
   the icon and the shortcut chip keep flex-shrink: 0. */
.mode-header .search-container {
    flex: 1;
    max-width: 340px;
    min-width: 170px;
}
.mode-header .search-icon,
.mode-header .search-shortcut { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Narrow
   -------------------------------------------------------------------------- */

/* Below 1100 the sidebar becomes a drawer. The rail stays: it is the thing
   that tells you which of five places you are in, and losing that first would
   be losing the most. */
@media (max-width: 1100px) {
    .mode-header-meta,
    .mode-header-progress + .mode-header-rule { display: none; }
}

/* Below 720 the rail becomes a bottom bar — same five items, same order, same
   divider in the same position. */
@media (max-width: 720px) {
    .rail {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: 62px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        gap: 0;
        padding: 6px 8px;
        border-right: 0;
        border-top: 1px solid var(--ds-border);
    }

    .rail-brand,
    .rail-spacer,
    .rail-meter,
    .rail-meter-label,
    .rail .theme-switch { display: none; }

    .rail-items {
        flex-direction: row;
        flex: 1;
        justify-content: space-around;
        gap: 2px;
    }

    .rail-divider {
        width: 1px;
        height: 28px;
        margin: 0 4px;
        align-self: center;
    }

    .rail-item {
        width: auto;
        min-width: 56px;
        padding: 6px 4px;
    }

    .mode-header { left: 0; }
    .mode-header-title { font-size: 17px; }
    .mode-header-progress { display: none; }
}

/* ==========================================================================
   The contextual sidebar

   Four shapes share one column. What follows is only what the two original
   shapes did not already have — the eyebrow, the round ordinal, the set
   readout, the verdict strip and the alphabet grid.
   ========================================================================== */

.nav-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3) var(--space-2);
}

.nav-heading-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-faint);
    white-space: nowrap;
}

.nav-heading-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ds-faint);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* A block that is about the active thing rather than a way to reach another
   one. The rule above it is what says so. */
.nav-aside {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--ds-border);
}

/* --- rounds --- */

.nav-round { gap: var(--space-3); }

.nav-ordinal {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ds-faint);
    font-variant-numeric: tabular-nums;
}

.nav-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 var(--space-3) var(--space-3);
}

.nav-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    /* Tinted by track, the same way a category tile is — one attribute, the
       per-hue rules below, and no colour written at the call site. */
    color: var(--hue-slate-ink);
    background: var(--hue-slate-bg);
}

.nav-chip[data-hue="violet"]  { background: var(--hue-violet-bg);  color: var(--hue-violet-ink); }
.nav-chip[data-hue="sky"]     { background: var(--hue-sky-bg);     color: var(--hue-sky-ink); }
.nav-chip[data-hue="teal"]    { background: var(--hue-teal-bg);    color: var(--hue-teal-ink); }
.nav-chip[data-hue="lime"]    { background: var(--hue-lime-bg);    color: var(--hue-lime-ink); }
.nav-chip[data-hue="pink"]    { background: var(--hue-pink-bg);    color: var(--hue-pink-ink); }
.nav-chip[data-hue="amber"]   { background: var(--hue-amber-bg);   color: var(--hue-amber-ink); }
.nav-chip[data-hue="indigo"]  { background: var(--hue-indigo-bg);  color: var(--hue-indigo-ink); }
.nav-chip[data-hue="rose"]    { background: var(--hue-rose-bg);    color: var(--hue-rose-ink); }
.nav-chip[data-hue="fuchsia"] { background: var(--hue-fuchsia-bg); color: var(--hue-fuchsia-ink); }

/* --- sets --- */

.nav-set { align-items: flex-start; }

.nav-set-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.nav-set-readout {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ds-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* One cell per snippet, in reading order. Three states, which is exactly why
   the verdict store is a map and not a set. */
.nav-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 var(--space-3);
}

.nav-strip-cell {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--ds-raised);
    border: 1px solid var(--ds-border);
}
.nav-strip-cell.is-right { background: var(--hue-teal-bg); border-color: var(--hue-teal-ink); }
.nav-strip-cell.is-wrong { background: var(--tier-must-bg); border-color: var(--tier-must-dot); }

.nav-strip-caption {
    padding: var(--space-3) var(--space-3) 0;
    font-size: 12px;
    color: var(--ds-muted);
    font-variant-numeric: tabular-nums;
}

/* --- alphabet --- */

.nav-alphabet {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 0 var(--space-3);
}

.nav-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: var(--radius-input);
    font-family: var(--font-mono);
    font-size: 13px;
    text-decoration: none;
    color: var(--ds-muted);
    background: var(--ds-surface);
    transition: background var(--transition-hover), color var(--transition-hover);
}
.nav-letter:hover { background: var(--accent-wash); color: var(--ds-text); }
.nav-letter.active { background: var(--accent-wash); color: var(--ds-text); font-weight: 600; }

/* Dimmed rather than removed. A grid that changes shape as the corpus grows is
   harder to aim at than one whose twenty-six cells stay put. */
.nav-letter.is-empty {
    color: var(--ds-faint);
    background: transparent;
    opacity: 0.45;
}

/* ==========================================================================
   Interview Synthesis — one prompt per screen
   ========================================================================== */

.panel-heading {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-faint);
    margin-bottom: var(--space-3);
}

.synthesis-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hue-fuchsia-ink);
    margin-bottom: var(--space-3);
}

/* The question, at the size of a question rather than of body copy. Capped at
   the same reading measure as an answer, because it is prose to be read once
   and understood, not scanned. */
.synthesis-question {
    font-size: 17px;
    line-height: 1.65;
    color: var(--ds-muted);
    max-width: 72ch;
    margin: var(--space-4) 0 var(--space-6);
}

.synthesis-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.synthesis-panel {
    padding: var(--space-5);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-card);
}

.synthesis-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* --- the spine --- */

.synthesis-spine-list {
    list-style: none;
    counter-reset: spine;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
}

.synthesis-spine-list li {
    counter-increment: spine;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--space-3);
}

.synthesis-spine-list li::before {
    content: counter(spine);
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--hue-fuchsia-ink);
    background: var(--hue-fuchsia-bg);
}

/* One line of instruction, one of nuance. The weight difference is what makes
   the list readable as a spine rather than as eight sentences. */
.synthesis-spine-do {
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-text);
}

.synthesis-spine-nuance {
    grid-column: 2;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ds-muted);
}

/* --- pulls from --- */

.synthesis-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.synthesis-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 4px 12px 4px 6px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--ds-border);
    background: var(--ds-raised);
    font-size: 13px;
    color: var(--ds-text);
    text-decoration: none;
    transition: border-color var(--transition-hover);
}
.synthesis-chip:hover { border-color: var(--ds-faint); }
.synthesis-chip .cat-tile { width: 24px; height: 24px; }

/* --- where candidates lose it --- */

.synthesis-loses ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
}

.synthesis-loses li {
    position: relative;
    padding-left: var(--space-4);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ds-muted);
}

.synthesis-loses li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--tier-must-dot);
}

/* --- follow-ups --- */

.synthesis-followups { margin-top: var(--space-6); }

.synthesis-followup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.synthesis-followup {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-card);
    background: var(--ds-surface);
    text-decoration: none;
    transition: border-color var(--transition-hover);
}
.synthesis-followup:hover { border-color: var(--ds-faint); }

.synthesis-followup-question {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ds-text);
}

.synthesis-followup-where {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ds-faint);
}

/* --- actions --- */

.synthesis-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--ds-border);
}

.synthesis-round-card { display: flex; flex-direction: column; gap: var(--space-2); }

@media (max-width: 900px) {
    .synthesis-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Predict the Output — one snippet per screen
   ========================================================================== */

.predict-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hue-teal-ink);
    margin-bottom: var(--space-3);
}

.predict-prompt {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ds-muted);
    max-width: 72ch;
    margin: var(--space-4) 0 var(--space-5);
}

.predict-answer { margin-top: var(--space-5); }

/* The output pane, wearing the mode's accent. It is the Why the specification
   asks for — the explanation is already the last thing inside it, and adding a
   second panel from the same field printed every explanation twice. */
.code-output.predict-why {
    margin-top: var(--space-5);
    border-left: 3px solid var(--hue-teal-ink);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    max-width: 72ch;
}

.predict-distractor {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--tier-must-dot);
    background: var(--ds-surface);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ds-muted);
    max-width: 72ch;
}

/* --- the verdict rows --- */

.predict-verdicts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: var(--space-5);
    max-width: 520px;
}

.predict-verdict {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    /* 44px, not the 40px a hit target needs elsewhere — an answer row is the
       one control on this page and it is pressed under time pressure. */
    min-height: 44px;
    padding: 10px var(--space-4);
    text-align: left;
    font-family: inherit;
    font-size: 15px;
    color: var(--ds-text);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-input);
    cursor: pointer;
    transition: border-color var(--transition-hover), background var(--transition-hover);
}
.predict-verdict:hover { background: var(--ds-raised); border-color: var(--ds-faint); }
.predict-verdict:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }

.predict-verdict[data-verdict="right"].is-chosen { border-color: var(--hue-teal-ink); }
.predict-verdict[data-verdict="wrong"].is-chosen { border-color: var(--tier-must-dot); }

.predict-verdict-caption {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ds-muted);
    white-space: nowrap;
}

.predict-verdict-label { min-width: 0; }

.predict-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--ds-border);
}

.predict-set-card { display: flex; flex-direction: column; gap: var(--space-3); }
.predict-mini-strip { padding: 0; }

/* ==========================================================================
   Glossary
   ========================================================================== */

/* auto-fill rather than auto-fit: a letter with one term keeps a card the size
   of every other card, instead of stretching it across the row. */
.theory-track .theory-glossary-entry { margin: 0; }

.glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* A link, not a label. The chip means a question in the bank names this term,
   so the useful thing to do with it is go and read that question. */
.glossary-asked {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-3);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--tier-must-ink);
    background: var(--tier-must-bg);
    text-decoration: none;
    vertical-align: middle;
    transition: filter var(--transition-hover);
}
.glossary-asked:hover { filter: brightness(1.15); }
.glossary-asked:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }

.theory-glossary-source {
    display: inline-flex;
    align-items: center;
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--ds-faint);
    transition: color var(--transition-hover);
}
.theory-glossary-source:hover { color: var(--ds-text); }

/* --------------------------------------------------------------------------
   Search results, grouped by mode
   -------------------------------------------------------------------------- */

.search-group {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--ds-raised);
    border-bottom: 1px solid var(--ds-border);
    /* The accent is the group's only colour. One rule per mode is enough to
       tell five groups apart while scrolling, and more would compete with the
       tier badges inside them. */
    border-left: 2px solid var(--rail-accent);
}

.search-group-name {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-muted);
    white-space: nowrap;
}

.search-group-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ds-faint);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}