:root {
    --canvas: #FBFBFA;
    --surface: #FFFFFF;
    --ink: #111111;
    --muted: #6B6B67;
    --rule: #EAEAEA;
    --hover: #F7F6F3;
    --accent: #2D5C4F;
    --green: #2D7A4F;
    --red: #B23B3B;
    --warn: #B5894C;
    --easing: cubic-bezier(0.16, 1, 0.3, 1);

    /* Mastery palette — also set in JS for the canvas renderer */
    --m-unattempted: #D6D6D2;
    --m-weak:        #B5634C;
    --m-developing:  #B5894C;
    --m-competent:   #7A8C5C;
    --m-mastered:    #2D5C4F;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
  body {
    font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
    font-weight: 400;
    background: var(--canvas);
    color: var(--ink);
    line-height: 1.5;
  }

  /* Ambient drift blob */
  .ambient-blob {
    position: fixed;
    top: 50%; left: 50%;
    width: 900px; height: 900px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180, 160, 120, 0.035) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    animation: drift 28s ease-in-out infinite;
  }
  @keyframes drift {
    0%, 100% { transform: translate(-50%, -50%); }
    25%      { transform: translate(calc(-50% + 340px), calc(-50% - 200px)); }
    50%      { transform: translate(calc(-50% - 280px), calc(-50% + 180px)); }
    75%      { transform: translate(calc(-50% + 120px), calc(-50% + 240px)); }
  }

  /* App shell — full-viewport (standalone). In the PWA host the Brain Trace tab sets
     --bt-left-inset to the mirrored sidebar's width, shifting the whole app (graph,
     header/footer overlays) right of the sidebar. Standalone leaves the var unset
     (0) => inset:0 behavior, unchanged. Fixed popovers/modals stay viewport-anchored
     (they read window/clientX), so no coordinate re-basing. */
  .app-shell {
    position: fixed; top: 0; right: 0; bottom: 0; left: var(--bt-left-inset, 0);
    z-index: 1;
    display: flex; flex-direction: column;
  }
  .graph-canvas {
    position: absolute; inset: 0; z-index: 1;
    /* Atmospheric "breathing" — OPACITY ONLY. A CSS transform (rotate/translate) on
       this container corrupts react-force-graph's pointer→world mapping: d3-drag and
       d3-zoom read getBoundingClientRect() with no inverse-transform, so a rotated
       ancestor makes every pointer coordinate wrong → click-drag panning breaks and
       hit-testing drifts on the cycle. Opacity is GPU-composited and rect-safe.
       Disabled when prefers-reduced-motion is set. */
    animation: ambientGraphBreath 26s ease-in-out infinite;
  }
  @keyframes ambientGraphBreath {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.985; }
  }
  @media (prefers-reduced-motion: reduce) {
    .graph-canvas { animation: none; }
  }

  /* Route study surface (Brain Trace) — live-mastery rail + mini-map cues.
     railRowPulse: a soft teal ring on the answered node's rail row (every answer).
     railTierFlash: a stronger green wash when that node LEVELS UP (tier crossing).
     miniPulse: an expanding ring on the mini-map circle (transform-scale, fill-box
     origin — reliable across browsers, no SVG-attr animation, no force-graph). */
  @keyframes railRowPulse {
    0%   { box-shadow: 0 0 0 0   rgba(45, 92, 79, 0.0); }
    35%  { box-shadow: 0 0 0 3px rgba(45, 92, 79, 0.30); }
    100% { box-shadow: 0 0 0 0   rgba(45, 92, 79, 0.0); }
  }
  .rail-row-pulse { animation: railRowPulse 0.85s var(--easing); }
  @keyframes railTierFlash {
    0%   { border-color: var(--accent); background: rgba(45, 92, 79, 0.12); }
    100% { border-color: var(--rule);   background: var(--surface); }
  }
  .rail-row-flash { animation: railTierFlash 1.2s var(--easing); }
  @keyframes miniPulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(2.8); opacity: 0; }
  }
  .mini-pulse-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: miniPulse 0.85s var(--easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .rail-row-pulse, .rail-row-flash, .mini-pulse-ring { animation: none; }
  }

  /* Top bar — one grid floating over the graph: brand | filter | legend.
     All top chrome (brand row, title, metrics, section filter, mastery legend)
     are SIBLINGS in a single formatting context, so overlap between them is
     impossible by construction: the filter's track is minmax(0,1fr) — exactly
     the free space between the brand column and the legend's real max-content
     width — replacing the old hand-tuned viewport formula
     (calc(100vw − inset − 440px)) that went stale whenever a neighbor changed.
     The metrics card spans cols 1-2, so it can never reach the legend column
     either. The grid track itself is pointer-events:none (empty space passes
     graph drags through, same pattern as .footer-bar); children re-enable. */
  .top-bar {
    position: absolute; top: 24px; left: 32px; right: 24px;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    /* v110: outer grid = [content | legend]. The tall mastery legend gets its
       own column so it can NEVER inflate the title/metrics row heights (the old
       bug: the legend spanned both rows, so its ~180px height floated a
       center-aligned title down and pushed the metrics card far below with a
       big empty gap). All title/filter/metrics layout now happens inside
       .top-bar-content. */
    grid-template-areas: "content legend";
    column-gap: 20px;
    align-items: start;
    pointer-events: none;
  }
  .top-bar > * { pointer-events: auto; }
  /* Inner content grid: row 1 = [title | filter] (title top-left, level with the
     search bar; the filter keeps the full remaining width — never squeezed by
     the metrics card, which lives in its own row); row 2 = metrics tucked
     immediately beneath. Decoupled from the legend, so the title stays at the
     top and the title→metrics gap stays tight. */
  .top-bar-content {
    grid-area: content;
    min-width: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "title   filter"
      "metrics metrics";
    column-gap: 20px;
    row-gap: 8px;
    align-items: center;
  }
  .top-bar h1 {
    grid-area: title;
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .header-metrics {
    grid-area: metrics;
    justify-self: start;
    max-width: 100%;
    display: flex; gap: 24px;
    flex-wrap: wrap;  /* sub-spec-width safety: wrap tiles rather than overflow the grid */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  }
  .header-metric .label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .header-metric .value {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 22px;
    line-height: 1.1;
    margin-top: 2px;
  }

  /* Mastery legend — floats top-right */
  .legend {
    /* Positioning is hoisted to the HoverTooltip wrapper so the tooltip's
       relative-positioning context can anchor to the legend. The legend itself
       is in normal flow inside its wrapper, which is what's positioned. */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  }
  .legend .title {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
  .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

  /* Footer overlay — floats bottom-right */
  /* Footer action bar — 3-column grid: minmax(0,1fr) | auto | minmax(0,1fr).
     The center CTA cluster is IN FLOW as the middle track, so it reserves real
     width (grid tracks cannot overlap by construction) AND stays mathematically
     centered because the flanking tracks are equal 1fr — independent of what the
     left/right clusters contain. Dynamic content (session meta pill mounting
     after a session, flashcards label lengthening) wraps WITHIN its own column
     via the clusters' internal flex-wrap, growing upward (align-items:end),
     and can never cross a track boundary into the CTA. This replaces two prior
     generations of fixes that each traded one bug for another: space-between
     flex (right-cluster wrap slammed the CTA to the far right) and an
     absolutely-centered CTA (reserved zero width → right cluster slid under it). */
  .footer-bar {
    position: absolute; left: 0; right: 0; bottom: 20px;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: end;
    padding: 0 24px 0 32px;
    pointer-events: none;  /* gaps let graph drags pass through */
  }
  .footer-overlay {
    z-index: 5;
    justify-self: end; min-width: 0;
    display: flex; gap: 10px; align-items: center;
    flex-wrap: wrap; justify-content: flex-end;
    row-gap: 8px;
    pointer-events: auto;
  }
  .footer-overlay-left {
    z-index: 5;
    justify-self: start; min-width: 0;
    display: flex; gap: 10px; align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
    pointer-events: auto;
  }
  .footer-overlay .meta {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid var(--rule);
    border-radius: 9999px;
    padding: 6px 12px;
  }

  /* Footer overlay center — primary "Start your study adventure" CTA + alpha
     disclaimer. Stack: muted disclaimer on top, ink-filled CTA below.
     IN-FLOW middle grid track (the `auto` column of .footer-bar): centered by
     the equal 1fr flanks, so it cannot be slammed sideways by sibling wrap
     (the old space-between bug) and cannot be overlapped by a grown right
     cluster (the old zero-width absolute-centering bug) — the track reserves
     its intrinsic width in flow. */
  .footer-overlay-center {
    justify-self: center;
    z-index: 6;   /* belt-and-suspenders; grid tracks should never meet */
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
    pointer-events: none;
  }
  .footer-overlay-center > * { pointer-events: auto; }
  .footer-overlay-center .alpha-note {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
    opacity: 0.78;
    text-align: center;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(8px);
    border-radius: 9999px;
    padding: 4px 14px;
    letter-spacing: 0.01em;
  }
  .footer-overlay-center .start-cta {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    background: var(--ink); color: var(--surface);
    border: none;
    border-radius: 9999px;
    padding: 13px 28px;
    font-size: 14px;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: all 220ms var(--easing);
  }
  .footer-overlay-center .start-cta:hover { background: #2A2A2A; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,0.22); }
  .footer-overlay-center .start-cta:disabled { background: #C9C9C7; cursor: not-allowed; box-shadow: none; transform: none; }

  /* Session-length picker — small frosted pill group shown above the Start CTA. */
  .session-len {
    display: flex; align-items: center; gap: 4px;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--rule);
    border-radius: 9999px;
    padding: 4px 6px 4px 12px;
  }
  .session-len-label {
    font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted); margin-right: 2px;
  }
  .session-len-pill {
    font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
    border: none; background: transparent; color: var(--muted);
    border-radius: 9999px; padding: 3px 9px; cursor: pointer;
    transition: all 160ms var(--easing);
  }
  .session-len-pill:hover { background: var(--hover); color: var(--ink); }
  .session-len-pill.active { background: var(--ink); color: var(--surface); }

  /* Linking-mode banner — top-center frosted pill that confirms the user is in
     "draw a personal connection" mode and lets them cancel. */
  .linking-banner {
    position: fixed; top: 132px; left: 50%; transform: translateX(-50%);
    z-index: 30;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--rule);
    border-radius: 9999px;
    padding: 10px 18px;
    display: flex; align-items: center; gap: 14px;
    font-size: 13px; color: var(--ink);
    box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  }
  .linking-banner em { font-family: 'DM Mono', monospace; font-style: normal; color: var(--accent); }

  /* Construction panel — sits above the question/walkthrough body in StudyOverlay.
     Three actions in a single row + an inline expandable note editor. */
  .construction-panel {
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: rgba(255,255,255,0.6);
    padding: 12px 14px;
    margin-bottom: 18px;
  }
  .construction-actions {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  }
  .construction-actions .btn-secondary,
  .construction-actions .btn-ghost { padding: 8px 14px; font-size: 13px; }
  .construction-actions .btn-secondary.is-active {
    background: #FFF6E5; border-color: var(--warn); color: var(--warn);
  }
  .construction-note { margin-top: 12px; }
  .construction-note textarea {
    width: 100%;
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px; line-height: 1.5;
    background: #FFF;
    resize: vertical; min-height: 96px;
  }
  .construction-note textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
  .construction-note-actions { display: flex; gap: 10px; margin-top: 10px; }

  /* Right-click context menu — frosted floating bar at cursor. */
  .node-context-menu {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.16);
    padding: 8px 6px 6px;
    display: flex; flex-direction: column;
  }
  .node-context-title {
    font-family: 'Instrument Serif', serif;
    font-size: 14px; line-height: 1.2;
    padding: 2px 10px 8px; margin-bottom: 4px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .node-context-action {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; text-align: left;
    padding: 9px 12px; margin: 1px 2px;
    border: none; background: transparent; color: var(--ink);
    border-radius: 6px;
    cursor: pointer;
  }
  .node-context-action:hover { background: var(--hover); }
  .node-context-action.is-active { color: var(--warn); font-weight: 500; }

  /* Rapid Review CTA in the bottom-right footer cluster. */
  .rapid-review-cta {
    background: rgba(255,255,255,0.92);
    border-color: var(--rule);
    padding: 10px 16px; font-size: 13px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  }
  .rapid-review-cta:hover { background: #FFF; }

  /* Rapid Review modal — wider than the study overlay; preview is a real reading
     surface so it benefits from the extra width. */
  .rapid-review-panel {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    width: min(880px, 92vw);
    max-height: 88vh; display: flex; flex-direction: column;
    overflow: hidden;
  }
  .rapid-review-panel .overlay-body { padding: 18px 24px; overflow-y: auto; }
  .rapid-review-stat-row {
    display: flex; gap: 32px; align-items: flex-start;
  }
  .rapid-review-stat-label {
    font-family: 'DM Mono', monospace;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 4px;
  }
  .rapid-review-stat-value {
    font-family: 'Instrument Serif', serif;
    font-size: 22px; color: var(--ink);
  }
  .rapid-review-preview {
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 18px 22px;
    max-height: 50vh; overflow-y: auto;
    background: #FDFCFB;
  }

  /* Flashcards modal retired (Flash Cards is now a PWA sidebar tab; the footer
     CTA below navigates there via the incise-navigate event). */

  /* Buttons */
  button {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 200ms var(--easing);
    border: 1px solid transparent;
  }
  .btn-primary {
    background: var(--ink); color: var(--surface);
    padding: 14px 24px; font-size: 14px; border: none;
  }
  .btn-primary:hover:not(:disabled) { background: #2A2A2A; }
  .btn-primary:disabled { background: #C9C9C7; cursor: not-allowed; }
  .btn-secondary {
    background: rgba(255, 255, 255, 0.85); color: var(--ink);
    border: 1px solid var(--rule);
    padding: 8px 16px; font-size: 13px;
    backdrop-filter: blur(8px);
  }
  .btn-secondary:hover { background: var(--hover); }
  .btn-ghost {
    background: transparent; color: var(--muted);
    border: none; padding: 6px 10px; font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--rule);
  }
  .btn-ghost:hover { color: var(--ink); }
  .btn-warn {
    background: rgba(255, 255, 255, 0.85); color: var(--warn);
    border: 1px solid #E8DDC4;
    padding: 8px 16px; font-size: 13px;
    backdrop-filter: blur(8px);
  }
  .btn-warn:hover { background: #FAF3E5; }

  /* Form controls */
  select, input[type="text"] {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--rule); border-radius: 6px;
    background: var(--surface);
    font-family: inherit; font-size: 14px; color: var(--ink);
  }
  select:focus, input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
  label.field { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }

  /* Cards */
  .card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 16px;
  }
  .card.dense { padding: 16px 20px; }

  /* Choices — mirrors incise_app tutor mode (left-accent, faded distractors) */
  .choice {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--rule);
    border-left: 3px solid transparent;
    border-radius: 8px;
    margin-bottom: 8px; cursor: pointer;
    transition: all 220ms var(--easing);
    background: var(--surface);
  }
  .choice:hover:not(.disabled) {
    background: var(--hover);
    border-color: #D4D4D2;
    border-left-color: var(--rule);
  }
  .choice.selected {
    border-color: var(--ink);
    border-left-color: var(--ink);
    background: var(--hover);
  }
  .choice.disabled { cursor: default; }
  .choice.disabled:not(.correct):not(.wrong) {
    opacity: 0.50;                            /* faded distractors */
  }
  .choice.correct {
    border-color: #C9E2CD;
    border-left-color: var(--green);
    background: #E6F5E4;
  }
  .choice.wrong {
    border-color: #F0CDCD;
    border-left-color: var(--red);
    background: #FDE4E4;
  }
  .choice .label {
    font-family: 'DM Mono', monospace; font-weight: 500; font-size: 14px;
    width: 28px; height: 28px;
    border: 1px solid var(--rule); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: var(--canvas);
  }
  .choice.selected .label { border-color: var(--ink); background: var(--ink); color: var(--surface); }
  .choice.correct  .label { border-color: var(--green); background: var(--green); color: white; }
  .choice.wrong    .label { border-color: var(--red); background: var(--red); color: white; }
  .choice .text { flex: 1; padding-top: 3px; line-height: 1.5; }
  .feedback-pill {
    display: inline-block;
    margin-left: 12px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
  }
  .feedback-pill.correct { background: var(--green); color: white; }
  .feedback-pill.wrong   { background: var(--red); color: white; }

  /* Confidence selector — color-coded (Guess red / Partial amber / Certain green)
     pill-shaped, mirrors incise_app tutor mode's ConfidencePills */
  .confidence-row {
    display: flex; align-items: center; gap: 8px;
  }
  .confidence-pip {
    padding: 9px 20px;
    border: 1px solid var(--rule); border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 600; line-height: 1;
    cursor: pointer; background: transparent;
    color: var(--muted);
    text-align: center;
    transition: all 180ms var(--easing); user-select: none;
  }
  .confidence-pip:hover { background: var(--hover); }
  .confidence-pip.guess.selected {
    border: 1.5px solid var(--red);
    background: rgba(178, 59, 59, 0.08);
    color: var(--red);
  }
  .confidence-pip.partial.selected {
    border: 1.5px solid var(--warn);
    background: rgba(181, 137, 76, 0.10);
    color: var(--warn);
  }
  .confidence-pip.certain.selected {
    border: 1.5px solid var(--green);
    background: rgba(45, 122, 79, 0.08);
    color: var(--green);
  }

  /* Study-surface tools (Phase C) — toolbar + Lab Values / Notes / Zoom / Help.
     Cheap standalone stand-ins for the Tutor tools; real components arrive in Phase A. */
  .bt-tools-row {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 2px; margin-bottom: 10px;
  }
  .bt-tool-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 12px; min-width: 52px;
    background: transparent; border: none; border-radius: 6px;
    color: var(--muted); cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all 180ms var(--easing);
  }
  .bt-tool-btn:hover, .bt-tool-btn.active { background: var(--hover); color: var(--ink); }
  .bt-tool-btn .bt-tool-icon { font-size: 18px; line-height: 1; }
  .bt-tool-btn .bt-tool-label {
    font-size: 10px; font-weight: 500; letter-spacing: 0.05em;
    text-transform: uppercase; white-space: nowrap;
  }
  .bt-tool-modal {
    /* Portaled to document.body; default lands left of the Live Mastery rail
       (rail max 340px + margin) and above the study overlay (z 1200). Dragging
       overrides top/left inline. */
    position: fixed; top: 72px; right: 380px; z-index: 1400;
    width: 340px; max-height: 72vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: 12px; padding: 18px 20px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  }
  .bt-tool-modal.notes { width: 400px; display: flex; flex-direction: column; }
  .bt-tool-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule);
    cursor: move; user-select: none; touch-action: none;
  }
  .bt-tool-modal-title {
    font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
  }
  .bt-tool-modal-close {
    background: transparent; border: none; color: var(--muted);
    font-size: 16px; cursor: pointer; padding: 2px 6px; line-height: 1;
  }
  .bt-tool-modal-close:hover { color: var(--ink); }
  .bt-lab-table { font-size: 13px; line-height: 1.8; color: var(--ink); }
  .bt-lab-table .bt-lab-group { font-weight: 600; margin: 10px 0 4px; }
  .bt-lab-table .bt-lab-group:first-child { margin-top: 0; }
  .bt-notes-textarea {
    flex: 1; min-height: 200px; width: 100%;
    border: 1px solid var(--rule); border-radius: 6px;
    padding: 10px 12px; font-size: 13px;
    font-family: 'DM Sans', sans-serif; color: var(--ink);
    resize: vertical; background: var(--surface);
  }
  .bt-notes-textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
  .bt-help-list { font-size: 13px; line-height: 1.7; color: var(--ink); margin: 0; padding-left: 18px; }
  .bt-help-list li { margin-bottom: 6px; }

  /* Strikeout (pre-submit distractor elimination — mirrors Tutor) */
  .bt-strike-btn {
    flex-shrink: 0; align-self: flex-start; margin-top: 2px;
    padding: 2px 8px; font-size: 13px; line-height: 1.4;
    background: transparent; border: 1px solid var(--rule); border-radius: 6px;
    color: var(--muted); cursor: pointer;
    transition: all 180ms var(--easing);
  }
  .bt-strike-btn:hover { color: var(--red); border-color: var(--red); }
  .bt-strike-btn.struck { color: var(--red); border-color: var(--red); }
  .bt-whynot-btn {
    flex-shrink: 0; align-self: flex-start; margin-top: 3px;
    padding: 4px 10px; font-size: 10px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
    background: transparent; border: 1px solid var(--rule); border-radius: 6px;
    color: var(--muted); cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all 180ms var(--easing);
  }
  .bt-whynot-btn:hover { background: var(--hover); color: var(--ink); }
  .choice.struck { opacity: 0.35; }
  .choice.struck .text { text-decoration: line-through; }

  /* Inline reveal cards fused under a choice (green = correct, red = wrong pick) */
  .choice.has-expl {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    margin-bottom: 0;
  }
  .bt-inline-expl {
    border-radius: 0 0 8px 8px; margin: 0 0 8px 0; padding: 14px 18px;
    font-size: 14px; line-height: 1.7; color: var(--ink);
    white-space: pre-wrap;
  }
  .bt-inline-expl.correct { background: #F3FAF1; border: 1px solid #C9E2CD; border-top: none; border-left: 3px solid var(--green); }
  .bt-inline-expl.wrong   { background: #FDF3F3; border: 1px solid #F0CDCD; border-top: none; border-left: 3px solid var(--red); }
  .bt-expl-tag {
    font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; margin-bottom: 6px;
  }
  .bt-inline-expl.correct .bt-expl-tag { color: var(--green); }
  .bt-inline-expl.wrong .bt-expl-tag { color: var(--red); }

  /* Live Mastery rail collapse controls */
  .bt-rail-toggle {
    background: transparent; border: 1px solid var(--rule); border-radius: 6px;
    color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1;
    padding: 4px 8px; flex-shrink: 0;
    transition: all 180ms var(--easing);
  }
  .bt-rail-toggle:hover { background: var(--hover); color: var(--ink); }
  /* Loading skeleton — pulsing placeholder bars for the question card */
  .bt-skel {
    background: var(--rule);
    border-radius: 6px;
    animation: btSkelPulse 1.2s ease-in-out infinite;
  }
  @keyframes btSkelPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
  }

  .bt-rail-ring {
    /* Conic mastery ring around the collapsed dot — 3px annulus; the inner
       button's surface bg masks the center so only the ring band shows. */
    width: 32px; height: 32px; border-radius: 50%; padding: 3px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .bt-rail-dot {
    width: 26px; height: 26px; border-radius: 50%; padding: 0;
    border: none; background: var(--surface);
    color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 180ms var(--easing);
  }
  .bt-rail-dot:hover { border-color: var(--ink); color: var(--ink); }
  .bt-rail-dot.done { background: rgba(45, 92, 79, 0.10); border-color: var(--accent); color: var(--accent); }
  .bt-rail-dot.current { background: var(--ink); border-color: var(--ink); color: var(--surface); }

  /* Pills + badges */
  .pill {
    display: inline-block; padding: 4px 10px; border-radius: 9999px;
    font-size: 12px; font-family: 'DM Mono', monospace;
    background: var(--canvas); border: 1px solid var(--rule);
    color: var(--muted); margin-right: 6px; margin-bottom: 6px;
  }
  .badge {
    display: inline-block; padding: 4px 10px; border-radius: 4px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .badge.green { background: #E5F0E9; color: var(--green); }
  .badge.red   { background: #F5E2E2; color: var(--red); }
  .badge.warn  { background: #F4ECDB; color: var(--warn); }
  .badge.muted { background: var(--canvas); color: var(--muted); border: 1px solid var(--rule); }

  /* Concept-update mini panel */
  .concept-panel { margin-top: 20px; padding: 16px; background: var(--canvas); border-radius: 8px; border: 1px solid var(--rule); }
  .concept-panel h4 { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; font-weight: 500; }
  .concept-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
  .concept-row:last-child { border-bottom: none; }
  .concept-row .name { font-weight: 500; }
  .concept-row .stats { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--muted); }

  /* ── Study overlay (frosted glass, slides in from the right) ────────────── */
  .overlay-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 20, 18, 0.18);
    backdrop-filter: blur(2px);
    z-index: 20;
    display: flex; justify-content: flex-end;
    animation: fadeIn 220ms var(--easing);
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .overlay-panel {
    width: min(640px, 100%);
    height: 100%;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(14px);
    border-left: 1px solid var(--rule);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.08);
    display: flex; flex-direction: column;
    animation: slideIn 320ms var(--easing);
  }
  @keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  .overlay-header {
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--rule);
    flex-shrink: 0;
  }
  .overlay-header .eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 6px;
  }
  .overlay-header h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400; font-size: 28px;
    line-height: 1.15; margin: 0 0 10px;
    letter-spacing: -0.01em;
  }
  .overlay-header .pills-row { margin-top: 8px; }
  .overlay-header .close-btn {
    position: absolute; top: 18px; right: 18px;
    background: transparent; border: 1px solid var(--rule);
    width: 32px; height: 32px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); cursor: pointer;
    transition: all 160ms var(--easing);
  }
  .overlay-header .close-btn:hover { color: var(--ink); border-color: var(--ink); background: var(--hover); }
  .overlay-body { padding: 24px 28px; overflow-y: auto; flex: 1; }

  /* Toast — used for "no questions yet" + reset confirmation */
  .toast {
    position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
    z-index: 30; padding: 12px 18px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--rule); border-left: 3px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    font-size: 13px;
    animation: toastIn 200ms var(--easing);
  }
  .toast.warn { border-left-color: var(--warn); }
  @keyframes toastIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

  /* Debug panel */
  .debug-panel {
    position: fixed; bottom: 60px; right: 24px;
    z-index: 25;
    width: min(520px, 90vw); max-height: 60vh;
    padding: 16px;
    background: #2A2A2A; color: #E0E0DE;
    border-radius: 8px;
    font-family: 'DM Mono', monospace; font-size: 11px;
    overflow: auto; white-space: pre-wrap; word-break: break-word;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  }
  .debug-panel-actions {
    display: flex; gap: 8px; margin-bottom: 12px;
    padding-bottom: 12px; border-bottom: 1px solid #444;
  }

  /* ── Hover tooltip — frosted-glass card with Instrument Serif title + DM Sans body.
     Replaces native browser title= tooltips on primary CTAs where the rationale /
     philosophy needs to read as part of the product, not a bare OS chrome bubble.
     350ms hover delay; skipped on touch devices (no hover capability). Edge-aware:
     flips above→below when the wrapped element is too close to the viewport top
     (e.g., the Mastery legend in the upper-right corner). */
  .hover-tooltip-wrapper {
    position: relative;
    display: inline-flex;
  }
  .hover-tooltip-wrapper.block { display: block; }
  .hover-tooltip {
    position: absolute;
    z-index: 40;
    width: max-content;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.10);
    pointer-events: none;
  }
  .hover-tooltip.wide { max-width: 480px; }
  .hover-tooltip.above {
    bottom: calc(100% + 10px);
    left: 50%;
    animation: tooltipInAbove 200ms var(--easing);
    transform: translateX(-50%);
  }
  .hover-tooltip.below {
    top: calc(100% + 10px);
    left: 50%;
    animation: tooltipInBelow 200ms var(--easing);
    transform: translateX(-50%);
  }
  /* Side-left variant — positions the tooltip horizontally adjacent to the
     wrapper's left edge instead of stacking above/below. Used for tall
     popups (Mastery legend) where vertical room is constrained but
     horizontal room is plentiful. The popup's top aligns with the
     wrapper's top so the visual relationship to the trigger is preserved. */
  .hover-tooltip.side-left {
    right: calc(100% + 10px);
    left: auto;
    /* 80px down from the wrapper's top so the popup clears the section
       pill row at the top of the viewport (pills sit ~24-90px). */
    top: 80px;
    bottom: auto;
    transform: none;
    animation: tooltipInSideLeft 200ms var(--easing);
  }
  @keyframes tooltipInSideLeft {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  /* Right-anchored variant — used when wrapping elements positioned at the right
     edge (e.g., Mastery legend at top-right corner; Generate Rapid Review Notes
     button) so the tooltip doesn't overflow past the viewport. */
  .hover-tooltip.right-anchor {
    left: auto;
    right: 0;
    transform: none;
    animation-name: tooltipInRightAnchor;
  }
  /* Left-anchored variant — symmetric counterpart for elements near the left
     edge (e.g., Take diagnostic exam button in the bottom-left rail). */
  .hover-tooltip.left-anchor {
    left: 0;
    right: auto;
    transform: none;
    animation-name: tooltipInLeftAnchor;
  }
  .hover-tooltip-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
  }
  .hover-tooltip-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: -0.005em;
  }
  .hover-tooltip-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink);
    opacity: 0.78;
  }
  /* Tooltip-arrow — tiny chevron pointing back at the wrapped element so the
     attachment is unambiguous. Positioned by class to match above/below. */
  .hover-tooltip::after {
    content: "";
    position: absolute;
    width: 10px; height: 10px;
    background: rgba(255, 255, 255, 0.94);
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .hover-tooltip.above::after {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
  .hover-tooltip.below::after {
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(-135deg);
  }
  .hover-tooltip.right-anchor.above::after,
  .hover-tooltip.right-anchor.below::after {
    left: auto;
    right: 24px;
    transform: rotate(45deg);
  }
  .hover-tooltip.right-anchor.below::after { transform: rotate(-135deg); }
  /* Symmetric arrow positioning for left-anchored tooltips. */
  .hover-tooltip.left-anchor.above::after,
  .hover-tooltip.left-anchor.below::after {
    left: 24px;
    right: auto;
    transform: rotate(45deg);
  }
  .hover-tooltip.left-anchor.below::after { transform: rotate(-135deg); }
  /* Side-left variant draws its arrow on the right edge of the popup,
     pointing into the wrapper. Overrides the default ::after positioning
     that targets above/below tail placements. */
  .hover-tooltip.side-left::after {
    top: 18px;
    bottom: auto;
    left: auto;
    right: -6px;
    transform: rotate(-45deg);
  }
  @keyframes tooltipInAbove {
    from { opacity: 0; transform: translate(-50%, 4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
  @keyframes tooltipInBelow {
    from { opacity: 0; transform: translate(-50%, -4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
  @keyframes tooltipInRightAnchor {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes tooltipInLeftAnchor {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Error banner */
  .error-banner {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
    z-index: 30; padding: 12px 18px;
    background: #FAF1F1; color: var(--red);
    border: 1px solid #F0DBDB; border-radius: 8px;
    font-size: 13px; max-width: 540px;
  }

  /* ── Reset Brain Trace — destructive action, ghost-style red button ──
     Sits stacked below the diagnostic + replay-tour CTAs in the bottom-left.
     Visually distinct (red) but not dominant — destructive shouldn't compete
     with primary route CTAs. Mirrors the "Reset Question Bank" affordance
     in incise_app's design language. */
  /* footer-overlay-left keeps its original row layout — Reset Brain Trace sits
     inline with the diagnostic and replay-tour buttons. */
  .btn-danger-ghost {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    background: transparent;
    color: var(--red);
    border: 1px solid rgba(178, 59, 59, 0.35);
    border-radius: 9999px;
    padding: 7px 14px;
    font-size: 12px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 180ms var(--easing);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .btn-danger-ghost:hover {
    background: rgba(178, 59, 59, 0.06);
    border-color: var(--red);
    transform: translateY(-1px);
  }
  .btn-danger-ghost .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 0 rgba(178, 59, 59, 0.45);
    animation: dangerDotPulse 2.4s var(--easing) infinite;
  }
  @keyframes dangerDotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(178, 59, 59, 0.40); }
    70%  { box-shadow: 0 0 0 6px rgba(178, 59, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(178, 59, 59, 0); }
  }

  /* Reset confirmation modal — same overlay layer as coldstart, but with
     a red-accented warning card. The "type RESET to confirm" friction is
     the deliberate gate — destructive actions deserve mechanical effort. */
  .reset-modal {
    position: fixed; inset: 0; z-index: 32;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 20, 18, 0.32);
    backdrop-filter: blur(4px);
    animation: fadeIn 220ms var(--easing);
  }

  /* ── Stage 3d: Per-session tier-promotion recap card ───────────────────
     Frosted-glass overlay on study close. Mirrors the tutorial card's
     visual vocabulary (Instrument Serif headline, DM Sans body) so it
     reads as part of the same family without competing for attention.
     z-index sits below reset-modal (32) but above tutorial scrim (21). */
  .recap-scrim {
    position: fixed; inset: 0; z-index: 28;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 20, 18, 0.32);
    backdrop-filter: blur(6px);
    animation: fadeIn 220ms var(--easing);
  }
  .recap-card {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 32px 36px 28px;
    max-width: 540px; width: 92%;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
    animation: slideIn 320ms var(--easing);
  }
  .recap-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 12px;
  }
  .recap-headline {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400; font-size: 28px;
    line-height: 1.18; margin: 0 0 22px;
    letter-spacing: -0.005em;
    color: var(--ink);
  }
  .recap-groups { display: flex; flex-direction: column; gap: 18px; }
  .recap-group { display: flex; flex-direction: column; gap: 6px; }
  .recap-group-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px; font-weight: 500;
    color: var(--muted);
    display: flex; align-items: center; gap: 8px;
  }
  .recap-dot {
    width: 9px; height: 9px; border-radius: 50%;
    flex-shrink: 0;
  }
  .recap-list {
    margin: 0; padding: 0 0 0 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px; line-height: 1.55;
    color: var(--ink);
  }
  .recap-list li { margin-bottom: 2px; }
  .recap-marker {
    color: var(--accent);
    font-size: 13px;
    margin-left: 2px;
  }
  .recap-footnote {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
  }
  .recap-actions {
    margin-top: 22px;
    display: flex; justify-content: flex-end;
  }
  .recap-actions .btn-primary {
    padding: 10px 20px;
    font-size: 14px;
  }
  .reset-card {
    background: var(--surface);
    border: 1px solid rgba(178, 59, 59, 0.30);
    border-top: 3px solid var(--red);
    border-radius: 14px;
    padding: 32px 36px 28px;
    max-width: 520px; width: 92%;
    box-shadow: 0 24px 80px rgba(80, 20, 20, 0.18);
    animation: slideIn 320ms var(--easing);
  }
  .reset-card .eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--red);
    margin-bottom: 8px;
  }
  .reset-card h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400; font-size: 28px;
    margin: 0 0 16px; line-height: 1.18;
    letter-spacing: -0.01em; color: var(--ink);
  }
  .reset-card p {
    font-size: 14px; line-height: 1.6; color: var(--ink);
    margin: 0 0 14px;
  }
  .reset-card p.muted { color: var(--muted); font-size: 13px; }
  .reset-card strong { color: var(--red); font-weight: 600; }
  .reset-card .confirm-label {
    display: block;
    font-family: 'DM Mono', monospace;
    font-size: 11px; letter-spacing: 0.10em;
    text-transform: uppercase; color: var(--muted);
    margin: 18px 0 6px;
  }
  .reset-card input[type="text"] {
    width: 100%;
    font-family: 'DM Mono', monospace;
    font-size: 16px; letter-spacing: 0.18em;
    padding: 11px 14px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--canvas); color: var(--ink);
    transition: border-color 160ms var(--easing), background 160ms var(--easing);
    outline: none;
  }
  .reset-card input[type="text"]:focus {
    border-color: var(--red);
    background: #FFFAFA;
  }
  .reset-card input[type="text"].matched {
    border-color: var(--red);
    background: rgba(178, 59, 59, 0.04);
  }
  .reset-card .actions {
    display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px;
  }
  .reset-card .btn-cancel {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--rule);
    border-radius: 9999px;
    padding: 9px 18px;
    font-size: 13px; cursor: pointer;
    transition: all 160ms var(--easing);
  }
  .reset-card .btn-cancel:hover { color: var(--ink); border-color: var(--ink); }
  .reset-card .btn-confirm-reset {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    background: var(--red);
    color: #FFFFFF;
    border: none;
    border-radius: 9999px;
    padding: 9px 20px;
    font-size: 13px; cursor: pointer;
    transition: all 180ms var(--easing);
    box-shadow: 0 4px 14px rgba(178, 59, 59, 0.30);
  }
  .reset-card .btn-confirm-reset:hover:not(:disabled) {
    background: #9D2F2F;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(178, 59, 59, 0.42);
  }
  .reset-card .btn-confirm-reset:disabled {
    background: #DCC5C5; color: #FFFFFF;
    cursor: not-allowed; box-shadow: none;
  }
  .reset-card .deletion-summary {
    margin-top: 18px;
    font-family: 'DM Mono', monospace;
    font-size: 11px; color: var(--muted);
    background: var(--canvas);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 10px 14px;
    max-height: 140px; overflow-y: auto;
  }

  /* ── Day 4 Slice C: cold-start CTA + diagnostic exam UI ─────────────────── */

  /* Cold-start CTA modal (centered card over the graph) */
  .coldstart-modal {
    position: fixed; inset: 0; z-index: 22;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 20, 18, 0.20);
    backdrop-filter: blur(2px);
    animation: fadeIn 220ms var(--easing);
  }
  .coldstart-card {
    background: var(--surface);
    border: 1px solid var(--rule); border-radius: 14px;
    padding: 44px 48px;
    max-width: 540px; width: 90%;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
    text-align: left;
    animation: slideIn 320ms var(--easing);
  }
  /* Welcome headline — the dominant visual element. Sets the brand moment
     before any thesis or body copy lands. Sized large enough to read as
     the unmistakable focal point of the card. */
  .coldstart-card h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400; font-size: 56px;
    margin: 0 0 8px; line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  /* Thesis subtitle — steps down from the welcome. Italic Instrument Serif
     in muted ink so it reads as a secondary beat after the welcome lands.
     The two halves of the thesis are visually unified on one line because
     the welcome above already commands the rhythm. */
  .coldstart-card .thesis {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.3;
    color: var(--muted);
    margin: 0 0 24px;
    letter-spacing: -0.005em;
  }
  .coldstart-card .lead {
    color: var(--ink); font-size: 15px;
    line-height: 1.6; margin: 0 0 24px;
  }
  .coldstart-card .lead em {
    font-style: italic;
    color: var(--accent);
    font-weight: 500;
  }
  /* Recommendation line — visually distinguished from the body paragraph
     by typography (italic Instrument Serif vs sans body), a left-accent
     bar, and slight breathing space. Reads as the system's *advice*,
     not the system's *description* — a different rhetorical voice. */
  .coldstart-card .recommendation {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.45;
    color: var(--ink);
    margin: 0 0 28px;
    padding: 4px 0 4px 16px;
    border-left: 2px solid var(--accent);
  }
  .coldstart-card .buttons {
    display: flex; gap: 12px; flex-wrap: wrap;
  }

  /* ── Catch-up banner (Day 5 spaced-rep) ─────────────────────────────────
     Frosted-glass strip that slides in at the top of the home screen when the
     server reports catchup_active. Amber accent matches the decayed-node pulse
     in the graph canvas. */
  .catchup-banner {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px;
    margin: 0 24px 16px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(181, 137, 76, 0.35);  /* warm amber edge */
    border-left: 3px solid var(--warn);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    animation: slideIn 380ms var(--easing);
  }
  .catchup-content { flex: 1; }
  .catchup-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--warn);
    margin-bottom: 4px;
  }
  .catchup-headline {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400; font-size: 18px;
    color: var(--ink); line-height: 1.3;
  }
  .catchup-detail {
    color: var(--muted); font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 400;
  }
  .catchup-dismiss {
    background: transparent; border: none;
    width: 28px; height: 28px;
    border-radius: 50%; cursor: pointer;
    color: var(--muted); font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 140ms var(--easing), color 140ms var(--easing);
  }
  .catchup-dismiss:hover { background: var(--hover); color: var(--ink); }

  /* ── Teach-back invite (inside FeedbackPanel) ──────────────────────────── */
  .teachback-invite {
    margin-top: 18px; padding: 16px 18px;
    background: rgba(45, 92, 79, 0.05);
    border: 1px solid rgba(45, 92, 79, 0.18);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
  }
  .teachback-invite-eyebrow {
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 6px;
  }
  .teachback-invite-headline {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 18px; line-height: 1.3; color: var(--ink);
  }
  .teachback-invite-detail {
    margin-top: 6px; font-size: 13px; color: var(--muted);
  }

  /* ── Teach-back modal ──────────────────────────────────────────────────── */
  .teachback-modal {
    position: fixed; inset: 0; z-index: 28;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 20, 18, 0.28);
    backdrop-filter: blur(4px);
    animation: fadeIn 220ms var(--easing);
  }
  .teachback-card {
    background: var(--surface);
    border: 1px solid var(--rule); border-radius: 14px;
    padding: 28px 32px;
    max-width: 620px; width: 92%;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
    animation: slideIn 320ms var(--easing);
  }
  .teachback-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 16px;
  }
  .teachback-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400; font-size: 26px; line-height: 1.15;
    margin: 4px 0 0; letter-spacing: -0.01em;
  }
  .teachback-close {
    background: transparent; border: none;
    width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; color: var(--muted);
    font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 140ms var(--easing), color 140ms var(--easing);
  }
  .teachback-close:hover { background: var(--hover); color: var(--ink); }
  .teachback-prompt {
    color: var(--muted); font-size: 14px; line-height: 1.55;
    margin: 0 0 14px;
  }
  .teachback-textarea {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px;
    background: var(--canvas);
    border: 1px solid var(--rule); border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px; line-height: 1.55; color: var(--ink);
    resize: vertical; min-height: 140px;
    transition: border-color 140ms var(--easing);
  }
  .teachback-textarea:focus {
    outline: none; border-color: var(--accent);
  }
  .teachback-meta {
    display: flex; justify-content: space-between;
    margin-top: 8px; font-size: 11px;
    font-family: 'DM Mono', monospace; color: var(--muted);
  }
  .teachback-actions {
    display: flex; gap: 12px; margin-top: 18px;
  }
  .teachback-suppressed-headline {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 22px; color: var(--warn);
  }
  .teachback-error { padding: 8px 0; }

  /* Result panel */
  .teachback-verdict {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 24px; margin-bottom: 12px;
    text-transform: capitalize;
  }
  .teachback-feedback {
    font-size: 14px; line-height: 1.6; color: var(--ink);
    margin-bottom: 18px; padding: 12px 14px;
    background: var(--canvas); border-radius: 8px;
  }
  .teachback-rubric {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 18px;
  }
  .teachback-rubric-row {
    display: grid;
    grid-template-columns: 100px 60px 1fr;
    gap: 10px; align-items: start;
    padding: 8px 0;
    border-top: 1px solid var(--rule);
  }
  .teachback-rubric-row:first-child { border-top: none; }
  .teachback-rubric-dim {
    font-family: 'DM Mono', monospace;
    font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
    padding-top: 2px;
  }
  .rubric-pip {
    display: inline-block;
    padding: 2px 8px; border-radius: 9999px;
    font-family: 'DM Mono', monospace; font-size: 11px;
    background: var(--canvas); color: var(--ink);
  }
  .rubric-pip.s0 { background: rgba(181, 99, 76, 0.15); color: var(--red); }
  .rubric-pip.s1 { background: rgba(181, 137, 76, 0.15); color: var(--warn); }
  .rubric-pip.s2 { background: rgba(122, 140, 92, 0.18); color: #5a6b40; }
  .rubric-pip.s3 { background: rgba(45, 92, 79, 0.15); color: var(--accent); }
  .teachback-rubric-note {
    font-size: 13px; line-height: 1.5; color: var(--ink);
  }
  .teachback-concept-evidence {
    padding: 12px 14px; background: var(--canvas);
    border-radius: 8px; margin-bottom: 12px;
  }
  .teachback-concept-row {
    display: flex; justify-content: space-between;
    padding: 4px 0; font-size: 13px;
  }

  /* Full-screen frosted overlay (used for diagnostic exam + results) */
  .fullscreen-overlay {
    position: fixed; inset: 0; z-index: 25;
    background: rgba(252, 252, 250, 0.94);
    backdrop-filter: blur(14px);
    display: flex; flex-direction: column;
    animation: fadeIn 280ms var(--easing);
  }
  .fullscreen-overlay-header {
    padding: 28px 48px 20px;
    border-bottom: 1px solid var(--rule);
    flex-shrink: 0;
    max-width: 760px; margin: 0 auto; width: 100%;
  }
  .fullscreen-overlay-header h2 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400; font-size: 28px; line-height: 1.15;
    margin: 4px 0 8px; letter-spacing: -0.01em;
  }
  .fullscreen-overlay-body {
    padding: 28px 48px 56px;
    overflow-y: auto;
    flex: 1;
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
  }

  /* Dot stepper (diagnostic exam progress) */
  .dot-stepper {
    display: flex; gap: 4px;
    margin-top: 14px;
    flex-wrap: wrap;
  }
  .dot-stepper .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--rule);
    transition: background 240ms var(--easing), transform 240ms var(--easing);
  }
  .dot-stepper .dot.done { background: var(--accent); }
  .dot-stepper .dot.wrong { background: var(--red); }
  .dot-stepper .dot.current {
    background: var(--ink);
    transform: scale(1.3);
  }

  /* Section breakdown bars (results screen) */
  .section-bar-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
    font-size: 13px;
  }
  .section-bar-row .label { width: 220px; flex-shrink: 0; font-weight: 500; }
  .section-bar-row .bar-track {
    flex: 1; height: 14px;
    background: var(--canvas);
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid var(--rule);
  }
  .section-bar-row .bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 800ms var(--easing);
  }
  .section-bar-row .pct {
    width: 90px; text-align: right;
    font-family: 'DM Mono', monospace; font-size: 12px;
    color: var(--muted);
  }
  .section-bar-row.recommended .label::before {
    content: "★ "; color: var(--warn);
  }

  /* ─── Section filter pills (Slice D-polish: View by Section) ─── */
  /* Lives in the .top-bar grid's middle track (grid-area: filter), a sibling of
     the brand column and the legend — so it structurally CANNOT overlap either:
     its track is exactly the free space between them, computed by the grid from
     the legend's real width (no estimated gutter, no 100vw-vs-shell mismatch;
     --bt-left-inset is handled implicitly by the grid spanning the shell).
     SINGLE ROW always (v102 rule): pills never wrap; overflow scrolls
     horizontally inside the capsule with the scrollbar hidden.
     position:relative kept as the containing block for .search-results. */
  .section-filter {
    grid-area: filter;
    justify-self: center;
    min-width: 0; max-width: 100%;
    position: relative;
    display: flex; gap: 3px; align-items: center;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    border: 1px solid var(--rule);
    border-radius: 9999px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;        /* Firefox */
  }
  .section-filter::-webkit-scrollbar { display: none; }  /* WebKit */
  .section-filter .pill {
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px; font-weight: 500;
    padding: 5px 11px;
    border: none; background: transparent;
    border-radius: 9999px;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 200ms var(--easing);
  }
  .section-filter .pill:hover { background: var(--hover); color: var(--ink); }
  .section-filter .pill.active {
    background: var(--accent); color: #fff;
  }
  .section-filter .pill.all-pill {
    color: var(--muted);
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 6px 12px;
  }
  .section-filter .pill.all-pill.active { background: var(--ink); color: #fff; }
  /* Tour-driven highlight — cluster cycle pulses the current pill while the
     camera zooms into that section. Distinct from .active (user-clicked). */
  .section-filter .pill.tour-highlight {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(45, 92, 79, 0.15);
    transition: all 280ms var(--easing);
  }

  /* ─── Brain search (sweep-open from the section filter bar) ─── */
  /* The magnifying-glass trigger lives on the right of the section pills.
     Clicking it morphs the bar from "pills" to "search input" — pills are
     unmounted and a single rounded input slides in. ESC or × returns to
     pill mode. Results render in a frosted dropdown beneath the bar. */
  .section-filter .pill.search-trigger {
    width: 28px; height: 28px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted);
    margin-right: 2px;
  }
  .section-filter .pill.search-trigger:hover {
    background: var(--hover);
    color: var(--ink);
  }
  .section-filter .pill.search-trigger svg {
    width: 14px; height: 14px;
  }
  .section-filter.search-active {
    width: 460px;
    max-width: 100%;   /* bounded by the grid track — no viewport math needed */
    padding: 4px 6px;
    /* Pills are unmounted in search mode, so horizontal scrolling is never
       needed — overflow:visible lets the .search-results dropdown (absolutely
       anchored inside the capsule) escape instead of being clipped/scrolled
       by the pill-mode overflow-x:auto (latent v102 clipping bug). */
    overflow: visible;
    transition: width 360ms var(--easing), padding 200ms var(--easing);
  }
  .section-search {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 4px 10px;
    animation: searchFadeIn 240ms var(--easing);
  }
  .section-search .search-icon {
    width: 14px; height: 14px;
    color: var(--muted);
    flex-shrink: 0;
  }
  .section-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--ink);
    padding: 4px 0;
    min-width: 0;
  }
  .section-search input::placeholder {
    color: var(--muted);
    font-style: italic;
  }
  .section-search .close-btn {
    width: 22px; height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 150ms var(--easing);
  }
  .section-search .close-btn:hover {
    background: var(--hover);
    color: var(--ink);
  }
  @keyframes searchFadeIn {
    from { opacity: 0; transform: scaleX(0.94); }
    to   { opacity: 1; transform: scaleX(1); }
  }

  .search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.10);
    max-height: 64vh;
    overflow-y: auto;
    padding: 6px 0;
    animation: searchFadeIn 220ms var(--easing);
  }
  .search-results .group-header {
    padding: 10px 16px 4px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .search-results .result-row {
    display: flex; align-items: flex-start;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 150ms var(--easing);
    text-align: left;
    border: none;
    background: transparent;
    width: 100%;
  }
  .search-results .result-row:hover { background: var(--hover); }
  .search-results .result-row .kind-badge {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--canvas);
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    flex-shrink: 0;
    margin-top: 1px;
  }
  .search-results .result-row .body {
    flex: 1; min-width: 0;
  }
  .search-results .result-row .title {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-results .result-row .subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .search-results .empty-state {
    padding: 16px;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
  }

  /* ─── Onboarding tutorial bubbles (Slice D-polish) ─── */
  /* Scrim is invisible but still catches outside clicks (skip the tour by clicking
     anywhere outside the bubble). Pointer events on; no dim or blur — the user
     should see the live graph behind every card. */
  .tutorial-scrim {
    position: fixed; inset: 0; z-index: 21;
    background: transparent;
    pointer-events: auto;
    animation: fadeIn 220ms var(--easing);
  }
  .tutorial-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 22px 24px;
    max-width: 360px;
    /* Cap bubble height so the bottom (with Skip/Next actions) never falls
       below the Reset Brain Trace button row; content scrolls inside if it
       exceeds the cap. 180px reserves clearance for the bottom footer. */
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    animation: slideIn 320ms var(--easing);
  }
  /* Wider bubble for substantive learning-science cards (1, 2, 3, 6) */
  .tutorial-bubble.wide { max-width: 560px; }
  /* Visually-separated tagline on Card 1 — thin rule + italic */
  .tutorial-divider {
    height: 1px;
    background: var(--rule);
    margin: 18px -4px 14px;
  }
  .tutorial-tagline {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.35;
    color: var(--ink);
    text-align: center;
    margin-bottom: 14px;
    letter-spacing: 0.005em;
  }
  /* Inline demo (Cards 2b/2c/2d — edges, color, size) — small canvas above
     the body copy that animates the concept the card is teaching. */
  .tutorial-demo {
    margin: 4px auto 14px;
    text-align: center;
  }
  .tutorial-demo svg { display: inline-block; }
  .tutorial-demo-row {
    display: flex; justify-content: center; gap: 10px; margin-top: 6px;
  }
  .tutorial-demo-dot {
    width: 12px; height: 12px; border-radius: 9999px;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px var(--rule);
    transition: transform 220ms var(--easing), box-shadow 220ms var(--easing);
  }
  .tutorial-demo-dot.active {
    transform: scale(1.5);
    box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px rgba(45, 92, 79, 0.18);
  }

  /* Two-column bulleted list (Cards 1 + 6). Splits the principle list into
     two readable columns inside the wide bubble. */
  .tutorial-twocol-lead {
    margin: 0 0 6px;
    font-family: 'DM Mono', monospace;
    font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--muted);
  }
  .tutorial-twocol {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px 24px; margin: 0 0 14px;
  }
  .tutorial-twocol-list {
    list-style: none; margin: 0; padding: 0;
  }
  .tutorial-twocol-list li {
    font-size: 12.5px; line-height: 1.5;
    color: var(--ink);
    padding: 5px 0;
    border-bottom: 1px solid var(--rule);
  }
  .tutorial-twocol-list li:last-child { border-bottom: none; }
  .tutorial-twocol-list li strong {
    color: var(--accent); font-weight: 600;
  }
  .tutorial-body-after {
    margin: 8px 0 14px;
    font-size: 13px; color: var(--ink); line-height: 1.55;
    font-style: italic;
  }

  /* Single-column emoji bullet list (Cards 7 + 8). */
  .tutorial-icon-bullets {
    list-style: none; margin: 0 0 14px; padding: 0;
  }
  .tutorial-icon-bullets li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 8px 0;
    font-size: 13px; line-height: 1.5; color: var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .tutorial-icon-bullets li:last-child { border-bottom: none; }
  .tutorial-icon-bullets li .tutorial-icon {
    flex: 0 0 24px; font-size: 16px; line-height: 1.2;
    text-align: center;
  }
  .tutorial-icon-bullets li strong { color: var(--ink); font-weight: 600; }

  /* Subtle callout for the Rapid Review highlight (Card 7). */
  .tutorial-callout {
    background: rgba(45, 92, 79, 0.06);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0 0 14px;
    font-size: 12.5px; line-height: 1.5; color: var(--ink);
  }

  /* Mastery-tier table (Card 4 — compressed Card 10 content). */
  .tutorial-tier-table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 16px;
    font-size: 12px; line-height: 1.45;
  }
  .tutorial-tier-table thead th {
    text-align: left; font-weight: 600; color: var(--muted);
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
    border-bottom: 1px solid var(--rule);
    padding: 6px 8px;
  }
  .tutorial-tier-table tbody td {
    padding: 8px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    vertical-align: top;
  }
  /* First column (Tier) must keep dot + label on one row — the longest
     label ("Unattempted") would otherwise wrap below the dot. */
  .tutorial-tier-table tbody td:first-child {
    white-space: nowrap;
  }
  .tutorial-tier-table tbody tr:last-child td { border-bottom: none; }
  .tutorial-tier-table .tier-dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 9999px; margin-right: 8px; vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  }
  .tutorial-tier-table td.mono {
    font-family: 'DM Mono', monospace;
    font-size: 11px; color: var(--muted); white-space: nowrap;
  }

  /* Tier list (legacy — kept for any future card that wants the long form) */
  .tutorial-bubble .tier-list {
    margin: 6px 0 16px; padding: 0;
    list-style: none;
  }
  .tutorial-bubble .tier-list li {
    padding: 7px 0;
    font-size: 13px; line-height: 1.5;
    color: var(--muted);
    border-bottom: 1px solid var(--rule);
  }
  .tutorial-bubble .tier-list li:last-child { border-bottom: none; }
  .tutorial-bubble .tier-list li strong {
    color: var(--ink); font-weight: 600;
    font-family: 'DM Sans', sans-serif;
  }
  .tutorial-bubble .step {
    font-family: 'DM Mono', monospace;
    font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 6px;
  }
  .tutorial-bubble h3 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400; font-size: 22px; line-height: 1.2;
    margin: 0 0 10px; letter-spacing: -0.01em;
  }
  .tutorial-bubble p {
    margin: 0 0 16px;
    font-size: 13px; color: var(--muted); line-height: 1.55;
  }
  .tutorial-bubble .actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
  }

  /* "Default Map View" re-fit pill — position lives here (not inline) so the
     mobile block below can relocate it without touching the JSX. These values
     are byte-identical to the inline style they replaced. */
  .back-to-map-pill {
    position: absolute;
    top: 290px; right: 24px; z-index: 6;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     MOBILE (≤768px) — phone reflow of the floating chrome. Desktop rendering
     is untouched: every rule below is scoped to the media query, and the JSX
     mobile branches (footer chips row, legend sheet) only mount ≤768px via
     useViewportIsMobile. Matches the PWA host's useIsMobile(768) breakpoint.
     ═══════════════════════════════════════════════════════════════════════ */
  @media (max-width: 768px) {
    /* Top bar: single column — title row, compact metrics strip, filter.
       Safe-area padded for the iPhone notch/Dynamic Island in standalone. */
    .top-bar {
      top: calc(10px + env(safe-area-inset-top));
      left: 12px; right: 12px;
      display: flex; flex-direction: column;
      align-items: stretch; gap: 8px;
    }
    .top-bar-content {
      display: flex; flex-direction: column;
      align-items: stretch; gap: 8px;
    }
    .top-bar h1 {
      font-size: 20px;
      /* clear the host PWA's fixed "← Exit" chip at top-right */
      padding-right: 88px;
    }
    /* Metrics card → single-row horizontally scrollable strip. */
    .header-metrics {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 18px;
      padding: 8px 14px;
      border-radius: 10px;
    }
    .header-metrics::-webkit-scrollbar { display: none; }
    .header-metric { flex: 0 0 auto; }
    .header-metric .label { white-space: nowrap; }
    .header-metric .value { font-size: 17px; white-space: nowrap; }
    .section-filter { justify-self: stretch; max-width: none; }
    .section-filter .pill { padding: 7px 12px; }

    /* Re-fit pill: bottom-right, floated above the stacked mobile footer
       (route rail + chips + primary row ≈ 218px tall when the route is live). */
    .back-to-map-pill {
      top: auto; right: 12px;
      bottom: calc(228px + env(safe-area-inset-bottom));
    }

    /* Catch-up banner: tighter margins on a narrow viewport. */
    .catchup-banner { margin: 0 12px 12px; padding: 12px 14px; }

    /* Footer — stacked bottom bar. The desktop .footer-bar grid rules don't
       apply (that branch doesn't mount ≤768px); these style the mobile DOM. */
    .footer-bar-mobile {
      position: absolute; left: 0; right: 0; bottom: 0;
      display: flex; flex-direction: column;
      align-items: stretch; gap: 10px;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      pointer-events: none;   /* gaps pass graph drags through; rows re-enable */
    }
    .footer-chips-row {
      display: flex; gap: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 2px;
      pointer-events: auto;
    }
    .footer-chips-row::-webkit-scrollbar { display: none; }
    .footer-chip {
      flex: 0 0 auto;
      white-space: nowrap;
      font-size: 12px;
      padding: 10px 14px;
      border-radius: 9999px;
    }
    /* Route card rail — swipeable, snap-aligned, one card per route position. */
    .route-rail-mobile {
      display: flex; gap: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
      padding-bottom: 2px;
      pointer-events: auto;
    }
    .route-rail-mobile::-webkit-scrollbar { display: none; }
    .route-card {
      flex: 0 0 auto; scroll-snap-align: start;
      display: flex; align-items: center; gap: 10px;
      min-width: 172px; max-width: 236px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      border: 1px solid var(--rule); border-radius: 12px;
      padding: 9px 12px;
      cursor: pointer; text-align: left;
      font-family: 'DM Sans', sans-serif;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    .route-card-num {
      flex: 0 0 auto;
      width: 24px; height: 24px; border-radius: 9999px;
      background: var(--accent); color: #FFFFFF;
      font: 700 11px 'DM Mono', monospace;
      display: flex; align-items: center; justify-content: center;
    }
    .route-card-body {
      min-width: 0;
      display: flex; flex-direction: column; gap: 2px;
    }
    .route-card-title {
      font-size: 12.5px; font-weight: 500; color: var(--ink);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .route-card-meta {
      display: flex; align-items: center; gap: 5px;
      font: 500 9.5px 'DM Mono', monospace;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--muted);
    }
    .route-card-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

    .footer-primary-row {
      display: flex; flex-direction: column;
      align-items: center; gap: 8px;
      pointer-events: auto;
    }
    .footer-primary-meta {
      display: flex; align-items: center; justify-content: center;
      gap: 10px; flex-wrap: wrap;
    }
    .footer-primary-row .alpha-note {
      font-family: 'DM Sans', sans-serif;
      font-size: 10px; color: var(--muted); opacity: 0.7;
      background: rgba(255, 255, 255, 0.62);
      backdrop-filter: blur(8px);
      border-radius: 9999px; padding: 2px 10px;
    }
    .footer-primary-row .start-cta {
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      background: var(--ink); color: var(--surface);
      border: none; border-radius: 9999px;
      width: 100%; max-width: 420px;
      padding: 15px 24px; font-size: 15px;
      letter-spacing: 0.01em; cursor: pointer;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    }
    .footer-primary-row .start-cta:disabled { background: #C9C9C7; box-shadow: none; }

    /* Legend bottom sheet (opened from the ◉ Legend chip). */
    .legend-sheet-scrim {
      position: fixed; inset: 0; z-index: 40;
      background: rgba(20, 20, 18, 0.32);
      backdrop-filter: blur(3px);
      display: flex; align-items: flex-end;
      animation: fadeIn 180ms var(--easing);
    }
    .legend-sheet {
      width: 100%;
      background: rgba(255, 255, 255, 0.97);
      border-top-left-radius: 16px; border-top-right-radius: 16px;
      border-top: 1px solid var(--rule);
      padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
      box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.14);
    }
    .legend-sheet .legend {
      background: transparent; border: none;
      box-shadow: none; padding: 0;
      font-size: 13px;
    }
    .legend-sheet-close {
      width: 100%; margin-top: 14px;
      padding: 11px 16px; font-size: 13px;
      border-radius: 9999px;
    }

    /* Overlays & modals: full-bleed panels, tighter padding, safe areas. */
    .overlay-header { padding: 18px 18px 14px; }
    .overlay-header h2 { font-size: 22px; }
    .overlay-body { padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); }
    .recap-card { padding: 24px 20px 20px; }
    .toast { max-width: calc(100vw - 24px); }
  }