/* Mnemosyne app.css — single layered stylesheet (Task 38A step 4 + 38B step 6). */
@layer tokens, base, components, pages;
@import url('/static/tokens.css');

/* ===== base (global, vars only) ===== */

    /* Task 15 — global overflow protection: no horizontal scroll on mobile,
       long URLs/code wrap instead of forcing the page wide. */
    html, body { overflow-x: clip; }
    * { overflow-wrap: break-word; word-break: break-word; }
    body { margin: 0; font-family: var(--font-ui); color: var(--ink); background: var(--bg); }
    .nav { display: flex; align-items: center; gap: 1.25rem; padding: .9rem 1.5rem;
           border-bottom: 1px solid var(--muted-disabled); background: var(--bg-tint); }
    .brand { font-family: var(--font-reading); font-weight: 600; font-size: var(--text-lg);
             color: var(--ink-strong); margin-right: auto; text-decoration: none; }
    .nav a { color: var(--brand-link); text-decoration: none; font-size: var(--text-sm); }
    .nav a:hover { color: var(--brand-emphasis); text-decoration: underline; }
    .nav form { display: inline; margin: 0; }
    .nav button { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--brand-link);
                  background: none; border: none; padding: 0; cursor: pointer; }
    .nav button:hover { color: var(--brand-emphasis); text-decoration: underline; }
    main { max-width: 720px; margin: 2.5rem auto; padding: 0 1.5rem; font-family: var(--font-reading); }
    label { display: block; margin: .75rem 0 .25rem; font-family: var(--font-ui); font-size: var(--text-sm); }
    input { width: 100%; max-width: 22rem; padding: .5rem .6rem; font-family: var(--font-ui);
            border: 1px solid var(--muted-disabled); border-radius: 4px; }
    button[type=submit] { margin-top: 1rem; padding: .55rem 1.1rem; font-family: var(--font-ui);
                          font-weight: 500; color: var(--bg); background: var(--brand-deep);
                          border: none; border-radius: 4px; cursor: pointer; }
    .error { color: var(--brand-accent); font-family: var(--font-ui); font-size: var(--text-sm); }
  

/* ===== components (vars only) ===== */

  /* Task 8: three-zone desktop layout (DESIGN §6e) — reading column ~640px,
     right rail ~300px, generous margins. Only layout/type/color tokens here
     (DESIGN §4) — no hex values. */
  /* Task 36C: full-bleed on desktop so the right rail can hug the window
     wall instead of stopping at the capped main column. The reading column
     is capped internally (line-length stays readable); the rail (300px)
     sits sticky against the right edge. Below 900px it collapses to stacked. */
  main { max-width: none; margin: 2.5rem 0 0; padding: 0 2.5rem 0 2rem; }
  .reading-layout { display: grid; grid-template-columns:
      minmax(0, 1fr) 300px; gap: 3rem;
      justify-content: start; align-items: start; }
  .reading-layout > :first-child { max-width: 760px; margin-right: auto; }
  @media (max-width: 900px) {
    main { max-width: 720px; margin: 2.5rem auto; padding: 0 1.5rem; }
    .reading-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .reading-layout > * { max-width: 100%; min-width: 0; }
    .rail { position: static; }
  }
  .reading { font-family: var(--font-reading); }
  .reading h1 { font-family: var(--font-reading); font-weight: 600;
                font-size: var(--text-2xl); line-height: 1.25; color: var(--ink-strong);
                margin: .25rem 0 1.5rem; }
  .chapter { margin: 2rem 0; }
  .chapter h1, .chapter h2, .chapter h3 { font-family: var(--font-reading);
                font-weight: 600; color: var(--ink-strong); line-height: 1.3; }
  .chapter h1 { font-size: var(--text-xl); }
  .chapter h2 { font-size: var(--text-lg); }
  .chapter h3 { font-size: var(--text-lg); }
  .chapter p, .chapter li { font-family: var(--font-reading); font-size: var(--text-base);
                line-height: 1.75; color: var(--ink); }
  .chapter ul, .chapter ol { padding-left: 1.4rem; }

  /* --- Inline prompt card (DESIGN §6a) --- */
  .prompt-card { background: var(--bg-tint); border-radius: 12px;
                 padding: 1.1rem 1.2rem 1.15rem; margin: 1.6rem 0; }
  .prompt-q { background: var(--bg); border-radius: 8px;
              padding: .85rem 1rem; }
  .prompt-meta { display: block; font-family: var(--font-ui);
                 font-size: var(--text-xs); letter-spacing: .07em;
                 text-transform: uppercase; color: var(--gray-caption);
                 margin-bottom: .35rem; }
  .prompt-q-text { font-family: var(--font-reading); font-size: var(--text-base);
                   line-height: 1.65; color: var(--ink); margin: 0; }

  .prompt-answer { margin-top: .75rem; }
  .answer-body { position: relative; background: var(--bg);
                 border: 1px solid var(--muted-disabled); border-radius: 8px; }
  .answer-input { display: block; width: 100%; max-width: 100%;
                  padding: .6rem .75rem; font-family: var(--font-reading);
                  font-size: var(--text-base); color: var(--ink); background: var(--bg);
                  border: none; border-radius: 8px; }
  .answer-input:focus { outline: 2px solid var(--brand-accent);
                        outline-offset: -1px; }
  .reveal-watermark { position: absolute; inset: 0; z-index: 2; cursor: pointer;
                      display: flex; align-items: center; justify-content: center;
                      text-align: center; padding: .4rem;
                      background-color: var(--bg);
                      background-image: repeating-linear-gradient(
                        -45deg, var(--brand-accent-soft) 0 14px,
                        var(--bg) 14px 28px);
                      border-radius: 8px;
                      transition: opacity .25s ease; }
  .watermark-label { font-family: var(--font-ui); font-size: var(--text-sm);
                     letter-spacing: .04em; color: var(--gray-caption);
                     background: var(--bg); padding: .3rem .7rem;
                     border-radius: 999px;
                     border: 1px solid var(--muted-disabled); }
  .prompt-answer.is-active .reveal-watermark,
  .prompt-answer.is-graded .reveal-watermark { opacity: 0; pointer-events: none; }

  /* Whole lower region starts suppressed in muted tones, inert (DESIGN §6a) */
  .prompt-answer:not(.is-active) .tracker,
  .prompt-answer:not(.is-active) .actions { opacity: .45;
                                            filter: grayscale(1);
                                            pointer-events: none; }
  .prompt-answer.is-active .tracker,
  .prompt-answer.is-active .actions { opacity: 1; filter: none; }

  /* --- Per-prompt progress tracker (DESIGN §6b) --- */
  .tracker { display: flex; align-items: center; gap: .3rem;
             margin: .85rem 0 .9rem; }
  .tracker .step { display: flex; flex-direction: column; align-items: center;
                   gap: .22rem; font-family: var(--font-ui);
                   font-size: var(--text-xs); color: var(--gray-caption);
                   white-space: nowrap; }
  .tracker .step.active { color: var(--brand-emphasis); font-weight: 600; }
  .tracker .dot { width: 24px; height: 24px; border-radius: 50%;
                  background: var(--brand-accent-soft);
                  border: 1.5px solid var(--brand-accent);
                  color: var(--brand-accent); font-size: var(--text-xs);
                  font-weight: 600; display: flex; align-items: center;
                  justify-content: center; }
  /* Steps at or before the current stage are filled (Task 9) */
  .tracker .step.reached .dot { background: var(--brand-accent);
                                color: var(--bg); }
  .tracker .step.active .dot { background: var(--brand-accent);
                               color: var(--bg);
                               box-shadow: 0 0 0 2px var(--brand-accent-soft); }
  .tracker .step:last-child .dot { background: var(--bg); /* bullseye target */
                                   border: 2.5px solid var(--brand-accent); }
  .tracker .step:last-child.reached .dot,
  .tracker .step:last-child.active .dot { background: var(--brand-accent);
                                   border: 2.5px solid var(--brand-emphasis); }
  .tracker-line { flex: 1; height: 2px; min-width: .75rem;
                  background: var(--brand-accent-soft); }

  /* --- Two equal-weight buttons (DESIGN §6a/§6b), both filled --brand-deep --- */
  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

  /* --- Task 17 multiple-choice options --- */
  .mcq-options { display: flex; flex-direction: column; gap: .5rem;
                 padding: .4rem 0; }
  .mcq-btn { text-align: left; font-family: var(--font-ui); font-size: var(--text-sm);
             line-height: 1.4; padding: .6rem .8rem; color: var(--ink);
             background: var(--bg); border: 1.5px solid var(--muted-disabled);
             border-radius: 8px; cursor: pointer; }
  .mcq-btn:hover { border-color: var(--brand-accent);
                   background: var(--brand-accent-soft); }
  .mcq-btn:disabled { opacity: .55; cursor: wait; }

  /* --- Task 32 bug 4: end-of-block "Go deeper" button --- */
  .go-deeper-btn { display: block; margin: 1.5rem auto 0; padding: .5rem 1rem;
                   font-family: var(--font-ui); font-size: var(--text-sm);
                   color: var(--brand-deep); background: var(--bg);
                   border: 1px dashed var(--brand-accent); border-radius: 999px;
                   cursor: pointer; }
  .go-deeper-btn:hover { background: var(--brand-accent-soft);
                         border-style: solid; }
  .go-deeper-btn:disabled { opacity: .6; cursor: wait; }

  /* Task 30 follow-up: defined words — persistent dotted underline + click
     to re-open the definition popup (popup-only definitions). */
  .defined-term { border-bottom: 2px dotted var(--brand-accent);
    text-decoration: none; cursor: pointer; color: inherit; }
  .defined-term:hover { background: var(--brand-accent-soft); }

  .btn { font-family: var(--font-ui); font-weight: 500; font-size: var(--text-sm);
         padding: .55rem .6rem; color: var(--bg); background: var(--brand-deep);
         border: none; border-radius: 6px; cursor: pointer; }
  .btn:hover { background: var(--brand-emphasis); }
  .btn:disabled { opacity: .55; cursor: wait; }

  /* --- Graded feedback --- */
  .feedback.ok { font-family: var(--font-reading); font-weight: 600;
                 font-size: var(--text-base); color: var(--brand-emphasis);
                 margin: .15rem 0 .5rem; }
  .reference { font-family: var(--font-reading); font-size: var(--text-base);
               color: var(--ink); background: var(--brand-accent-soft);
               padding: .6rem .8rem; border-radius: 6px; line-height: 1.5; }

  /* Right rail: sticky against the right window wall (DESIGN §6e). Task 36C
     made the page full-bleed so this anchors to the viewport edge, not the
     reading column. */
  .rail { position: sticky; top: 1.5rem; align-self: start; }
  /* Task 30 §5: Page/Chapter soft relabeling — small caption at rail top. */
  .subject-label-line { font-family: var(--font-ui); font-size: var(--text-xs);
    color: var(--gray-caption); margin: 0 0 .7rem; }
  .subject-label { font-weight: 600; color: var(--brand-deep);
    text-transform: uppercase; letter-spacing: .06em; }
  .subject-words { color: var(--gray-caption); }
  .rail h2 { font-family: var(--font-ui); font-size: var(--text-xs);
             letter-spacing: .08em; text-transform: uppercase;
             color: var(--gray-label); margin: 0 0 .8rem; }
  .toc { list-style: none; margin: 0; padding: 0; display: flex;
         flex-direction: column; gap: .25rem; }
  .toc a { font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.35;
           color: var(--brand-link); text-decoration: none;
           padding: .12rem 0; }
  .toc a:hover { color: var(--brand-emphasis); text-decoration: underline; }
  /* Indentation handled by the tree's nested <ul>s (Task 29); keep only the
     lighter color/size for deeper levels. */
  .toc .lvl-2 a { color: var(--gray-caption); }
  .toc .lvl-3 a { color: var(--gray-caption); font-size: var(--text-sm); }

  /* --- Rail roadmap components (DESIGN §6b, aggregates in Task 9) --- */
  .rail .rail-sub { margin-top: 1.6rem; }
  .rail .rail-link { margin-top: .9rem; }
  /* Task 30 glossary: definitions rail list. */
  .rail .rail-defs { list-style: none; margin: .5rem 0 .9rem; padding: 0; }
  .rail .rail-defs li { margin: .15rem 0; }
  .rail .rail-defs a { color: var(--brand-link); font-family: var(--font-ui);
                       font-size: var(--text-sm); text-decoration: none; }
  .rail .rail-defs a:hover { text-decoration: underline; }
  .rail .rail-link a, .rail .rail-link { font-family: var(--font-ui);
                  font-size: var(--text-sm); color: var(--brand-link);
                  text-decoration: none; }
  .rail .rail-link a:hover { color: var(--brand-emphasis);
                             text-decoration: underline; }

  /* Task 36C: Sources panel in the rail (ports onboarding .source-* styles). */
  .rail-panel { margin-top: 1.6rem; padding: .75rem .9rem;
    background: var(--bg-tint); border: 1px solid var(--muted-disabled);
    border-radius: 8px; }
  .rail-panel h2 { margin-top: 0; }
  .source-add-row { display: flex; gap: .5rem; margin-top: .5rem; }
  .source-add-row textarea { width: 100%; min-height: 3.2rem; resize: vertical; }
  .source-add-row input { flex: 1; min-width: 0; }
  .source-add-row button { margin-top: 0; white-space: nowrap; }
  .source-list { margin-top: .75rem; display: flex; flex-direction: column; gap: .4rem; }
  .source-item { display: flex; align-items: flex-start; gap: .5rem;
    background: var(--bg-tint); border: 1px solid var(--muted-disabled);
    border-radius: 6px; padding: .45rem .6rem; }
  .source-item .src-meta { flex: 1; min-width: 0; }
  .source-item .src-name { display: block; font-weight: 500; word-break: break-word;
    color: var(--ink-strong); }
  .source-item .src-sub { display: block; color: var(--gray-caption);
    font-size: var(--text-xs); margin-top: .15rem; }
  .source-item .del-btn { background: none; border: none; color: var(--brand-accent);
    cursor: pointer; font-size: var(--text-sm); line-height: 1; }
  .source-item .del-btn:hover { color: var(--brand-emphasis); }

  /* Task 36D: References list + inline citation superscripts. */
  .rail-refs { list-style: none; margin: .5rem 0 .9rem; padding: 0;
    display: flex; flex-direction: column; gap: .6rem; }
  .rail-refs li { border-left: 2px solid var(--brand-accent-soft);
    padding-left: .6rem; transition: background .2s ease, border-color .2s ease; }
  .rail-refs li.is-reference-highlight { background: var(--brand-accent-soft);
    border-left-color: var(--brand-accent); border-radius: 4px;
    padding: .35rem .6rem; }
  .rail-refs .ref-title { display: block; font-weight: 600; color: var(--ink-strong);
    word-break: break-word; }
  .rail-refs .ref-meta { display: block; color: var(--gray-caption);
    font-size: var(--text-xs); margin-top: .1rem; }
  .rail-refs .ref-excerpt { display: block; color: var(--ink);
    font-size: var(--text-sm); line-height: 1.4; margin-top: .2rem;
    font-family: var(--font-reading, Georgia, serif); }
  .cite-ref { font-family: var(--font-ui); font-size: var(--text-xs);
    margin: 0 .1em; vertical-align: super; line-height: 0; }
  .cite-ref a { color: var(--brand-link); text-decoration: none; }
  .cite-ref a:hover { color: var(--brand-emphasis); text-decoration: underline; }
  .cite-ref:focus-within a { outline: 2px solid var(--brand-accent); }
  .roadmap-track { display: flex; align-items: flex-start; gap: .2rem;
                   margin: .4rem 0; }
  .roadmap-track .tracker-line { margin-top: .75rem; }
  .rstep { display: flex; flex-direction: column; align-items: center;
           gap: .22rem; width: 2.5rem; }
  .rdot { width: 22px; height: 22px; border-radius: 50%;
          background: var(--brand-accent-soft);
          border: 1.5px solid var(--brand-accent);
          color: var(--brand-accent); font-size: var(--text-xs); font-weight: 600;
          display: flex; align-items: center; justify-content: center; }
  .rstep.has .rdot { background: var(--brand-accent); color: var(--bg); }
  .rstep.has:last-child .rdot { background: var(--brand-accent);
                                border: 2.5px solid var(--brand-emphasis); }
  .rlabel { font-family: var(--font-ui); font-size: var(--text-xs);
            color: var(--gray-caption); white-space: nowrap; }
  .roadmap-summary { font-family: var(--font-ui); font-size: var(--text-sm);
                     color: var(--ink); margin: .5rem 0 0; }
  .roadmap-summary .due { color: var(--gray-caption); }
  .roadmap-summary .due.has-due { color: var(--brand-emphasis); }

  /* --- Empty state (subject with no sections yet, Task 7) --- */
  .empty { text-align: center; padding: 3rem 1rem; background: var(--bg-tint);
           border: 1px dashed var(--muted-disabled); border-radius: 8px; }
  .empty button[type=button] { margin-top: .5rem; padding: .6rem 1.4rem;
           font-family: var(--font-ui); font-weight: 500; font-size: var(--text-base);
           color: var(--bg); background: var(--brand-deep); border: none;
           border-radius: 4px; cursor: pointer; }
  .empty button[type=button]:disabled { opacity: .6; cursor: wait; }
  .empty #generate-status { font-family: var(--font-reading); font-size: var(--text-lg); color: var(--ink-strong); margin-bottom: 1rem; }
  .empty .spinner { width: 2rem; height: 2rem; border: 3px solid var(--muted-disabled); border-top-color: var(--brand-accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .empty .hint { font-family: var(--font-ui); font-size: var(--text-sm);
           color: var(--gray-caption); margin-top: .75rem; }

  /* ─── Task 27: text selection interaction ─── */
  /* Purple highlight: brand-accent-soft on the live selection (DESIGN §2),
     applied via ::selection so it appears the instant text is selected and
     never fights the browser's own selection machinery. */
  .reading ::selection { background: var(--brand-accent-soft); color: var(--ink); }
  .reading { -webkit-touch-callout: none; }  /* suppress iOS callout, keep text selectable */

  /* Wrapped span left after a definition is dismissed (dotted underline,
     Task 27 §6.6) — clicking it re-opens the popup. */
  .annotated-word { border-bottom: 2px dotted var(--brand-accent); cursor: pointer;
    background: transparent; transition: background .15s ease; }
  .annotated-word:hover { background: var(--brand-accent-soft); }

  /* Floating toolbar (desktop) — absolute so it can be positioned against
     the document coordinates of the selection. */
  .selection-toolbar { position: absolute; background: var(--bg);
    border: 1px solid var(--muted-disabled); border-radius: 8px; padding: 4px 6px;
    box-shadow: 0 2px 8px var(--shadow-1); display: flex; gap: 2px; align-items: center;
    z-index: 1000; font-family: var(--font-ui); font-size: var(--text-sm); }
  .selection-toolbar button { background: none; border: none; padding: 5px 9px;
    border-radius: 5px; cursor: pointer; color: var(--brand-link);
    font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
  .selection-toolbar button:hover { background: var(--brand-accent-soft); }
  .selection-toolbar .split-btn { position: relative; display: flex; align-items: center; }
  .selection-toolbar .dropdown-arrow { padding: 5px 4px; font-size: var(--text-xs); line-height: 1; }
  .selection-toolbar .dropdown { position: absolute; top: calc(100% + 4px); right: 0;
    background: var(--bg); border: 1px solid var(--muted-disabled); border-radius: 6px;
    box-shadow: 0 2px 8px var(--shadow-1); padding: 4px 0; min-width: 150px; display: none; }
  .selection-toolbar .dropdown.show { display: block; }
  .selection-toolbar .dropdown button { display: block; width: 100%; text-align: left;
    padding: 7px 12px; border-radius: 0; font-weight: 500; }

  /* Define popup — small reading-font card near the selection (Task 27 §6). */
  .define-popup { position: absolute; max-width: 300px; background: var(--bg);
    border: 1px solid var(--muted-disabled); border-radius: 8px; padding: 12px 14px;
    box-shadow: 0 4px 12px var(--elev-overlay); z-index: 1001;
    font-family: var(--font-reading); font-size: var(--text-sm); line-height: 1.5; color: var(--ink); }
  .define-popup .close-btn { position: absolute; top: 4px; right: 6px; background: none;
    border: none; cursor: pointer; font-size: var(--text-base); color: var(--gray-label);
    padding: 2px 6px; }
  .define-popup .close-btn:hover { color: var(--ink); }
  .define-popup .popup-title { font-family: var(--font-ui); font-weight: 600;
    font-size: var(--text-sm); letter-spacing: .05em; text-transform: uppercase;
    color: var(--gray-caption); margin: 0 1.2rem .35rem 0; }
  .define-popup .popup-body { margin: 0; }
  .define-popup .popup-body p { margin: 0 0 .4rem; }
  .define-popup .popup-body p:last-child { margin-bottom: 0; }
  .define-popup .popup-error { color: var(--ink); }
  /* Task 30: live-streamed definition text (SSE delta events). */
  .define-popup .popup-live { margin: 0; white-space: pre-wrap; color: var(--ink); }
  .define-popup .popup-live[hidden] { display: none; }
  .define-popup .popup-retry { font-family: var(--font-ui); font-weight: 500;
    font-size: var(--text-sm); color: var(--brand-deep); background: none; border: none;
    cursor: pointer; padding: 2px 0; margin-top: .35rem; }
  .define-popup .popup-loading { display: flex; align-items: center; gap: .55rem;
    font-family: var(--font-ui); font-size: var(--text-sm); color: var(--gray-caption); }
  .define-popup .popup-spinner { width: 1rem; height: 1rem;
    border: 2px solid var(--muted-disabled); border-top-color: var(--brand-accent);
    border-radius: 50%; animation: spin 1s linear infinite; }

  /* Inline comment box (Task 27 §9) — appears directly below the block. */
  .comment-input { margin: .9rem 0 1.4rem; padding: 10px 12px; background: var(--bg-tint);
    border: 1px solid var(--muted-disabled); border-radius: 8px; }
  .comment-input textarea { width: 100%; min-height: 60px; border: 1px solid var(--muted-disabled);
    border-radius: 6px; padding: 8px 10px; font-family: var(--font-ui); font-size: var(--text-sm);
    color: var(--ink); resize: vertical; box-sizing: border-box; background: var(--bg); }
  .comment-input .comment-actions { display: flex; gap: .6rem; margin-top: .55rem;
    align-items: center; }
  .comment-input .comment-save { font-family: var(--font-ui); font-weight: 500; font-size: var(--text-sm);
    color: var(--bg); background: var(--brand-deep); border: none; border-radius: 6px;
    padding: .45rem .9rem; cursor: pointer; }
  .comment-input .comment-save:hover { background: var(--brand-emphasis); }
  .comment-input .comment-cancel { font-family: var(--font-ui); font-size: var(--text-sm);
    color: var(--gray-caption); background: none; border: none; cursor: pointer;
    padding: .45rem .4rem; }
  .comment-input .comment-save:disabled { opacity: .55; cursor: wait; }

  /* Go-deeper skeleton placeholder (Task 27 §7) — pulsing dashed box below
     the anchor block while the orchestrator generates. */
  .selection-skeleton { border: 1px dashed var(--muted-disabled);
    border-left: 3px solid var(--brand-accent); border-radius: 8px; padding: 1rem 1.2rem;
    margin: 1.2rem 0; background: var(--bg-tint); }
  .selection-skeleton .sk-line { height: .8rem; border-radius: 4px;
    background: var(--muted-disabled); margin-bottom: .6rem; }
  .selection-skeleton .sk-line:last-child { margin-bottom: 0; }
  .selection-skeleton p { font-family: var(--font-ui); font-size: var(--text-sm);
    color: var(--gray-caption); margin: 0 0 .7rem; }
  .sk-pulse { animation: skpulse 1.4s ease-in-out infinite; }
  @keyframes skpulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

  /* Blocks inserted by "Go deeper → expand here" nest with indent + left
     border (Task 27 §7.7; generalized by Task 29's tree rendering into a
     .block-children wrapper that indents ANY depth). */
  .content-block.expansion { margin: 1.4rem 0 1.4rem 1.25rem; padding-left: 1rem;
    border-left: 3px solid var(--brand-accent); }
  .content-block.expansion h1, .content-block.expansion h2, .content-block.expansion h3,
  .content-block.expansion h4 { font-size: var(--text-base); }
  .content-block.expansion p, .content-block.expansion li { font-size: var(--text-base); }

  /* ─── Task 29: block tree rendering ─── */
  /* Nested children — indented under their parent with a soft left rule.
     The wrapper is what collapse hides (not the parent's own content). */
  .block-children { margin: 1rem 0 .25rem 1.35rem; padding-left: 1.15rem;
    border-left: 2px solid var(--brand-accent-soft); }
  .block-children > .content-block { margin: 1.6rem 0; }
  .block-children > .content-block:first-child { margin-top: .4rem; }
  /* Inside a tree wrapper the expansion no longer needs its own indent/rule
     (the wrapper provides both) — avoids double indentation. */
  .block-children > .content-block.expansion { margin-left: 0; border-left: none; }
  /* Expandable blocks are positioned so the toggle can sit top-right. */
  .content-block { position: relative; }
  .collapse-toggle { position: absolute; top: .15rem; right: 0;
    background: none; border: none; cursor: pointer;
    color: var(--gray-caption); font-size: var(--text-base); line-height: 1;
    padding: .25rem .35rem; border-radius: 6px; }
  .collapse-toggle:hover { color: var(--brand-deep); background: var(--brand-accent-soft); }
  /* Collapsed: hide exactly the children; the block's own body stays. */
  .content-block.is-collapsed > .block-children { display: none; }
  .content-block.is-collapsed > .collapse-toggle { color: var(--brand-accent); }

  /* Rail TOC as a block tree (Task 29). */
  .toc ul { list-style: none; padding-left: .95rem; margin: .3rem 0 .4rem;
    border-left: 2px solid var(--brand-accent-soft); }
  .toc a { text-decoration: none; color: var(--brand-link); }
  .toc a:hover { color: var(--brand-deep); text-decoration: underline; }
  .toc .toc-block { margin: .28rem 0; }
  .toc .lvl-1 { font-weight: 500; }
  .toc .lvl-2 { font-size: var(--text-sm); }
  .toc .lvl-3 { font-size: var(--text-sm); }

  /* Micro-toast (Task 27 §8.3, §9.5) — transient, non-blocking. */
  .sel-toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
    background: var(--ink); color: var(--bg); font-family: var(--font-ui); font-size: var(--text-sm);
    padding: .55rem .95rem; border-radius: 999px; box-shadow: 0 2px 10px var(--shadow-2);
    z-index: 1100; opacity: 0; transition: opacity .2s ease, transform .2s ease;
    pointer-events: none; max-width: 86vw; }
  .sel-toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }

  /* Mobile: bottom action sheet replaces the floating toolbar (Task 27 §4). */
  .selection-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg);
    border-top: 1px solid var(--muted-disabled); border-radius: 12px 12px 0 0;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px var(--shadow-1); z-index: 1000; transform: translateY(100%);
    transition: transform .2s ease; font-family: var(--font-ui); touch-action: none;
    /* swipe-down-to-dismiss handled in JS */ }
  .selection-sheet.show { transform: translateY(0); }
  .selection-sheet .sheet-grabber { width: 36px; height: 4px; border-radius: 2px;
    background: var(--muted-disabled); margin: 0 auto 10px; }
  .selection-sheet .sheet-text { font-weight: 600; margin-bottom: 12px; color: var(--ink);
    font-size: var(--text-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
  .selection-sheet button { display: flex; align-items: center; width: 100%; padding: 12px; margin: 3px 0;
    gap: 8px; background: none; border: none; border-radius: 8px; font-size: var(--text-base); text-align: left;
    color: var(--ink); font-family: var(--font-ui); cursor: pointer; }
  .selection-sheet button:hover { background: var(--bg-tint); }
  .selection-sheet .action-primary { color: var(--brand-deep); font-weight: 600; }
  .tbl-icon { width: 1.1em; height: 1.1em; flex: none; }
  .selection-sheet .sheet-cancel { margin-top: 8px; color: var(--gray-label); }


/* ============ READ PAGE — DESIGN-V2 §1–§8 (components, vars only) ========== */
/* §1 ink/measure scoped to the reading surface */
  /* (container-type removed — it zeroed the intrinsic width of the prose
     column and, with auto margins, collapsed the essay to ~0px: hotfix) */

.reading p, .reading li, .reading .chapter, .reading .content-block {
  font-size: var(--text-prose);
  line-height: var(--text-prose-lh);
  color: var(--ink);
}
.reading h1 { font-size: var(--text-2xl); line-height: var(--text-2xl-lh); color: var(--ink-strong); font-family: var(--font-reading); font-weight: 600; text-wrap: balance; }
.reading h2, .reading h3 { color: var(--ink-strong); font-family: var(--font-reading); text-wrap: balance; }
.reading p strong, .reading .content-block p strong { font-weight: 400; }
/* numbers → tabular */
.subject-words, .roadmap-summary b, .rail-refs .ref-meta, .chip, .rdot, .curve-svg .rlabel, .tracker-lbl, .rlabel { font-variant-numeric: tabular-nums; }
/* §4 flat prose/rail; overlay on toolbar/popup/drawer */
.reading, .rail { box-shadow: none; }
.define-popup, .selection-toolbar, #source-drawer { box-shadow: var(--elev-overlay); }
/* §7 sources: read-only list + one text link (no filled button in rail) */
.rail .rail-panel { margin-top: var(--space-6); padding: var(--space-3) var(--space-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.manage-btn { margin-top: var(--space-3); padding: var(--space-2) var(--space-4); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--link); background: none; border: none; text-decoration: underline; cursor: pointer; }

/* 39B-6 shared inputs incl. textarea + empty states */
textarea, select { width: 100%; padding: .5rem .6rem; font-family: var(--font-ui); font-size: var(--text-sm);
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); }
textarea:focus, select:focus, #source-url:focus, #source-text:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.source-empty { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--gray-caption); margin: var(--space-3) 0; font-style: italic; }
/* 39B-5 rail type scale: eyebrow < TOC < body, all from --text-* */
body[data-page="read"] .rail h2,
body[data-page="read"] .rail-sub,
body[data-page="read"] .subject-words { font-size: var(--text-tiny); }
body[data-page="read"] .toc a,
body[data-page="read"] .rail-link a,
body[data-page="read"] .rail-defs a,
body[data-page="read"] .ref-title,
body[data-page="read"] .ref-excerpt,
body[data-page="read"] .rail-hint,
body[data-page="read"] .roadmap-summary { font-size: var(--text-xs); }
body[data-page="read"] .ref-meta { font-size: var(--text-tiny); }
body[data-page="read"] .curve-svg .rlabel { font-size: var(--text-tiny); }
\n.rail-hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--gray-caption); margin: var(--space-1) 0 var(--space-3); }
#source-drawer { position: fixed; top: 1.5rem; right: 1.5rem; bottom: 1.5rem; margin: 0 0 0 auto; width: min(92vw, 26rem); max-height: calc(100vh - 3rem); overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 0; }
#source-drawer::backdrop { background: var(--scrim); }
.drawer-title { margin: 0; font-family: var(--font-ui); font-size: var(--text-lg); color: var(--ink-strong); }
/* §2 inputs/buttons shared class */
input, textarea, select { font-family: var(--font-ui); border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); }
button { font-family: var(--font-ui); }
/* §8 focus + reduced motion */
:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
/* progress curve + tracker (vars only) */
.roadmap-curve { margin: var(--space-3) 0 var(--space-4); }
.curve-svg, .tracker-curve { width: 100%; max-width: 260px; height: auto; display: block; }
.curve-svg .rlabel, .tracker-lbl { fill: var(--gray-caption); font-family: var(--font-ui); }
.curve-svg .rdot-txt, .tracker-dot-txt { fill: var(--surface); font-family: var(--font-ui); font-weight: 600; }
.tracker-caption { text-align: center; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--gray-caption); }
.sr-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }


@media (max-width:900px){ body[data-page="read"] #source-drawer { position: fixed; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-height: 80vh; border-radius: 12px 12px 0 0; } }


/* ---- page: landing ---- */
body[data-page="landing"] .landing {  background: var(--bg-tint); min-height: calc(100vh - 4.5rem);
               display: flex; flex-direction: column; align-items: center;
               justify-content: center; text-align: center; padding: 3rem 1.5rem;  } body[data-page="landing"] .landing h1 {  font-family: var(--font-reading); font-weight: 600;
                  font-size: var(--text-2xl); margin: 0 0 1rem; color: var(--ink-strong);  } body[data-page="landing"] .landing .tagline {  font-family: var(--font-reading); font-size: var(--text-lg);
                        color: var(--ink); max-width: 34rem; margin: 0 auto 2rem;  } body[data-page="landing"] .cta {  display: inline-block; font-family: var(--font-ui); font-weight: 500;
           font-size: var(--text-base); padding: .8rem 1.8rem; border-radius: 6px;
           text-decoration: none; background: var(--brand-deep); color: var(--bg);  } body[data-page="landing"] .cta:hover {  opacity: .92;  } /* Process/pill diagram — DESIGN §6d. Primary steps --brand-accent,
       secondary steps --brand-accent-soft, along a labeled time axis. */ body[data-page="landing"] .process {  margin-top: 3rem; max-width: 56rem; width: 100%;  } body[data-page="landing"] .process .caption {  font-family: var(--font-ui); font-size: var(--text-sm);
                        letter-spacing: .08em; text-transform: uppercase;
                        color: var(--gray-label); margin-bottom: .75rem;  } body[data-page="landing"] .pill-row {  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
                justify-content: center;  } body[data-page="landing"] .pill {  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500;
            padding: .5rem .9rem; border-radius: 999px; color: var(--bg);
            background: var(--brand-accent);  } body[data-page="landing"] .pill.secondary {  color: var(--brand-emphasis);
                      background: var(--brand-accent-soft);  } body[data-page="landing"] .pill.arrow {  background: none; color: var(--brand-accent); padding: 0 .1rem;  } body[data-page="landing"] .axis {  margin-top: 1rem; font-family: var(--font-ui); font-size: var(--text-xs);
            color: var(--gray-caption); letter-spacing: .05em;  }

/* ---- page: roadmap ---- */
/* Roadmap page — aggregate progress rail (right) + subject breakdown (main).
     Only tokens.css vars, no hex (DESIGN §4). */ body[data-page="roadmap"] main {  max-width: 1120px;  } body[data-page="roadmap"] .reading-layout {  display: grid; grid-template-columns:
      minmax(0, 700px) minmax(0, 300px); gap: 84px;
      justify-content: center; align-items: start;  } @media  (max-width: 900px)  { ('body[data-page="roadmap"] .reading-layout {  grid-template-columns: 1fr;  } body[data-page="roadmap"] .rail {  position: static;  }', {}) } body[data-page="roadmap"] .reading h1 {  font-family: var(--font-reading); font-weight: 600;
                font-size: var(--text-2xl); line-height: 1.25; color: var(--ink-strong);
                margin: .25rem 0 1.5rem;  } body[data-page="roadmap"] .reading h2 {  font-family: var(--font-ui); font-size: var(--text-xs);
                letter-spacing: .08em; text-transform: uppercase;
                color: var(--gray-label); margin: 1.8rem 0 .7rem;  } body[data-page="roadmap"] .subject-row {  display: flex; align-items: center; gap: .75rem;
                 padding: .7rem .9rem; background: var(--bg-tint);
                 border: 1px solid var(--muted-disabled); border-radius: 8px;
                 margin-bottom: .6rem;  } body[data-page="roadmap"] .subject-row a {  font-family: var(--font-reading); font-size: var(--text-base);
                   color: var(--brand-link); text-decoration: none;  } body[data-page="roadmap"] .subject-row a:hover {  color: var(--brand-emphasis); text-decoration: underline;  } body[data-page="roadmap"] .chip {  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500;
          padding: .15rem .55rem; border-radius: 999px;
          background: var(--brand-accent-soft); color: var(--brand-link);  } body[data-page="roadmap"] .chip.due {  background: var(--brand-deep); color: var(--bg);  } body[data-page="roadmap"] .subject-row .grow {  flex: 1;  } /* Aggregate roadmap component */ body[data-page="roadmap"] .rail {  position: sticky; top: 1.5rem;  } body[data-page="roadmap"] .rail h2 {  font-family: var(--font-ui); font-size: var(--text-xs);
             letter-spacing: .08em; text-transform: uppercase;
             color: var(--gray-label); margin: 0 0 .8rem;  } body[data-page="roadmap"] .roadmap-track {  display: flex; align-items: flex-start; gap: .2rem;
                   margin: .4rem 0;  } body[data-page="roadmap"] .roadmap-track .tracker-line {  margin-top: .75rem;  } body[data-page="roadmap"] .rstep {  display: flex; flex-direction: column; align-items: center;
           gap: .22rem; width: 2.5rem;  } body[data-page="roadmap"] .rdot {  width: 22px; height: 22px; border-radius: 50%;
          background: var(--brand-accent-soft);
          border: 1.5px solid var(--brand-accent);
          color: var(--brand-accent); font-size: var(--text-xs); font-weight: 600;
          display: flex; align-items: center; justify-content: center;  } body[data-page="roadmap"] .rstep.has .rdot {  background: var(--brand-accent); color: var(--bg);  } body[data-page="roadmap"] .rstep.has:last-child .rdot {  background: var(--brand-accent);
                                border: 2.5px solid var(--brand-emphasis);  } body[data-page="roadmap"] .rlabel {  font-family: var(--font-ui); font-size: var(--text-xs);
            color: var(--gray-caption); white-space: nowrap;  } body[data-page="roadmap"] .roadmap-summary {  font-family: var(--font-ui); font-size: var(--text-sm);
                     color: var(--ink); margin: .5rem 0 0;  } body[data-page="roadmap"] .roadmap-summary .due {  color: var(--gray-caption);  } body[data-page="roadmap"] .roadmap-summary .due.has-due {  color: var(--brand-emphasis);  } body[data-page="roadmap"] .rail .rail-link {  margin-top: .9rem;  } body[data-page="roadmap"] .rail .rail-link a {  font-family: var(--font-ui); font-size: var(--text-sm);
                       color: var(--brand-link); text-decoration: none;  } body[data-page="roadmap"] .rail .rail-link a:hover {  color: var(--brand-emphasis);
                             text-decoration: underline;  }

/* ---- page: onboarding ---- */
/* All colors reference tokens.css vars (DESIGN §4) — no hex here. */ body[data-page="onboarding"] .process {  max-width: 56rem; margin: 0 auto 2rem; text-align: center;  } body[data-page="onboarding"] .process .caption {  font-family: var(--font-ui); font-size: var(--text-sm);
                      letter-spacing: .08em; text-transform: uppercase;
                      color: var(--gray-label); margin-bottom: .6rem;  } body[data-page="onboarding"] .pill-row {  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
              justify-content: center;  } body[data-page="onboarding"] .pill {  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500;
          padding: .45rem .85rem; border-radius: 999px; color: var(--bg);
          background: var(--brand-accent);  } body[data-page="onboarding"] .pill.arrow {  background: none; color: var(--brand-accent); padding: 0 .1rem;  } body[data-page="onboarding"] .chat {  max-width: 42rem; margin: 0 auto; display: flex; flex-direction: column;  } body[data-page="onboarding"] .msgs {  flex: 1; overflow-y: auto; max-height: 52vh; padding: .5rem .25rem;
          display: flex; flex-direction: column; gap: .75rem;  } body[data-page="onboarding"] .msg {  max-width: 80%; padding: .6rem .9rem; border-radius: 10px;
         font-family: var(--font-reading); line-height: 1.45;  } body[data-page="onboarding"] .msg.user {  align-self: flex-end; background: var(--brand-deep); color: var(--bg);  } body[data-page="onboarding"] .msg.assistant {  align-self: flex-start; background: var(--card-bg);
                   color: var(--ink);  } body[data-page="onboarding"] .chat-form {  display: flex; gap: .5rem; margin-top: 1rem; align-items: center;  } body[data-page="onboarding"] .chat-form input {  flex: 1;  } body[data-page="onboarding"] .chat-form button[type=submit] {  margin-top: 0;  } body[data-page="onboarding"] .mic-btn {  margin-top: 0; width: 2.6rem; height: 2.6rem; padding: 0;
             display: inline-flex; align-items: center; justify-content: center;
             font-size: var(--text-lg); border-radius: 50%; border: 1.5px solid
             var(--muted-disabled); background: var(--bg); color: var(--ink-strong);
             cursor: pointer;  } body[data-page="onboarding"] .mic-btn.recording {  background: var(--brand-accent); color: var(--bg);
                       border-color: var(--brand-accent);
                       animation: mic-pulse 1s infinite;  } body[data-page="onboarding"] .mic-btn .mic-icon {  display: block;  } body[data-page="onboarding"] .mic-btn .mic-rec-icon {  display: none;  } body[data-page="onboarding"] .mic-btn.recording .mic-icon {  display: none;  } body[data-page="onboarding"] .mic-btn.recording .mic-rec-icon {  display: block;  } body[data-page="onboarding"] .mic-btn svg {  width: 20px; height: 20px;  } body[data-page="onboarding"] .mic-btn:disabled {  opacity: .6; cursor: wait;  } body[data-page="onboarding"] .mic-hint {  font-family: var(--font-ui); font-size: var(--text-xs);
              color: var(--gray-caption); margin: .35rem 0 0; text-align: center;  } body[data-page="onboarding"] .ready {  margin: 1.25rem auto 0; text-align: center;  } body[data-page="onboarding"] .ready[hidden] {  display: none;  } /* Manual escape hatch (onboarding UX fix): secondary button, visible after
     the 3rd exchange regardless of what the model says. */ body[data-page="onboarding"] .ready button[type=button] {  font-family: var(--font-ui); font-weight: 500;
          font-size: var(--text-sm); padding: .55rem 1.1rem; color: var(--brand-deep);
          background: var(--bg); border: 1.5px solid var(--brand-accent);
          border-radius: 6px; cursor: pointer;  } body[data-page="onboarding"] .ready button[type=button]:hover {  background: var(--brand-accent-soft);  } body[data-page="onboarding"] .ready button[type=button]:disabled {  opacity: .6; cursor: wait;  } body[data-page="onboarding"] .hint {  color: var(--gray-caption); font-family: var(--font-ui);
          font-size: var(--text-sm); text-align: center; margin-top: .5rem;  } /* Task 16 source panel — collapsible, above the chat form. */ body[data-page="onboarding"] .source-panel {  max-width: 42rem; margin: 0 auto 1rem; border: 1px solid
                  var(--muted-disabled); border-radius: 8px; background: var(--bg-tint);  } body[data-page="onboarding"] .source-panel summary {  cursor: pointer; font-family: var(--font-ui);
                  font-size: var(--text-sm); font-weight: 500; color: var(--ink-strong);
                  padding: .65rem .9rem;  } body[data-page="onboarding"] .source-panel[open] summary {  border-bottom: 1px solid var(--muted-disabled);  } body[data-page="onboarding"] .source-body {  padding: .7rem .9rem 1rem;  } body[data-page="onboarding"] .source-body textarea {  width: 100%; box-sizing: border-box; min-height: 4.5rem;
                  font-family: var(--font-reading); font-size: var(--text-sm); padding: .5rem .6rem;
                  border: 1px solid var(--muted-disabled); border-radius: 4px;
                  resize: vertical;  } body[data-page="onboarding"] .source-body input[type=url] {  width: 100%; max-width: none; box-sizing: border-box;
                  margin-top: .5rem;  } body[data-page="onboarding"] .source-add-row {  display: flex; gap: .5rem; margin-top: .5rem;  } body[data-page="onboarding"] .source-add-row button {  margin-top: 0;  } body[data-page="onboarding"] .source-list {  margin-top: .75rem; display: flex; flex-direction: column; gap: .4rem;  } body[data-page="onboarding"] .source-item {  display: flex; align-items: flex-start; gap: .5rem;
                  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--ink);
                  background: var(--bg); border: 1px solid var(--muted-disabled);
                  border-radius: 6px; padding: .45rem .6rem;  } body[data-page="onboarding"] .source-item .src-meta {  flex: 1; min-width: 0;  } body[data-page="onboarding"] .source-item .src-name {  display: block; font-weight: 500; word-break: break-word;  } body[data-page="onboarding"] .source-item .src-sub {  display: block; color: var(--gray-caption); font-size: var(--text-xs);
                  margin-top: .15rem; word-break: break-word;  } body[data-page="onboarding"] .source-item del-btn {  background: none; border: none; color: var(--brand-accent);
                  cursor: pointer; font-family: var(--font-ui); font-size: var(--text-sm);
                  padding: .15rem .3rem;  } body[data-page="onboarding"] .source-note {  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--gray-caption);
                  margin-top: .55rem;  } body[data-page="onboarding"] .source-note.error {  color: var(--brand-accent);  } /* Thinking indicator (Task 14): bouncing dots, shown while the reply is
     in flight, replaced by the real response (or friendly fallback). */ body[data-page="onboarding"] .thinking-indicator {  display: flex; gap: .35rem; padding: .6rem .9rem;
                        align-self: flex-start;  } body[data-page="onboarding"] .thinking-dot {  width: 6px; height: 6px; background: var(--brand-accent);
                  border-radius: 50%; animation: thinking-bounce 1.4s infinite
                  ease-in-out both;  } body[data-page="onboarding"] .thinking-dot:nth-child(1) {  animation-delay: -0.32s;  } body[data-page="onboarding"] .thinking-dot:nth-child(2) {  animation-delay: -0.16s;  } body[data-page="onboarding"] .thinking-dot:nth-child(3) {  animation-delay: 0s;  }

/* ---- page: subjects ---- */
body[data-page="subjects"] .subject-list {  display: grid; gap: 1rem;  } body[data-page="subjects"] .subject-card { 
  display: block;
  padding: 1.25rem;
  background: var(--card-bg);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--muted-disabled);
  transition: transform .1s ease, box-shadow .1s ease;
 } body[data-page="subjects"] .subject-card:hover { 
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-s);
  border-color: var(--brand-accent-soft);
 } body[data-page="subjects"] .subject-card h3 { 
  margin: 0 0 .35rem;
  font-family: var(--font-reading, Source Serif 4, Georgia, serif);
  font-size: var(--text-lg);
  color: var(--ink-strong);
 } body[data-page="subjects"] .subject-actions { 
  display: flex;
  gap: .6rem;
  margin-top: .5rem;
 } body[data-page="subjects"] .subject-actions a { 
  font-size: var(--text-sm);
  color: var(--brand-accent);
  text-decoration: none;
 } body[data-page="subjects"] .subject-actions a:hover {  text-decoration: underline;  } body[data-page="subjects"] .subject-meta { 
  margin: 0;
  font-size: var(--text-sm);
  color: var(--gray-caption);
 }

/* ---- page: glossary ---- */
body[data-page="glossary"] .glossary-head {  display: flex; justify-content: space-between; align-items: center;
                    margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap;  } body[data-page="glossary"] .glossary-head h1 {  margin: 0;  } body[data-page="glossary"] .glossary-filter {  display: inline-flex; align-items: center; gap: .5rem;
                     font-family: var(--font-ui); font-size: var(--text-sm);  } body[data-page="glossary"] .glossary-filter select {  font-family: var(--font-ui); padding: .35rem .5rem;
                             border: 1px solid var(--muted-disabled);
                             border-radius: 8px; background: var(--bg);  } body[data-page="glossary"] .glossary-empty {  color: var(--gray-caption); font-family: var(--font-ui);
                    padding: 2rem 0; text-align: center;  } body[data-page="glossary"] .glossary-list {  display: grid; gap: 1rem;  } body[data-page="glossary"] .term-card {  padding: 1.05rem 1.2rem; background: var(--card-bg);
               border-radius: 10px; border: 1px solid var(--muted-disabled);  } body[data-page="glossary"] .term-card h2 {  margin: 0 0 .45rem; font-family: var(--font-reading);
                  font-size: var(--text-lg); color: var(--ink-strong);  } body[data-page="glossary"] .term-body {  margin: 0 0 .6rem; font-family: var(--font-reading);
               font-size: var(--text-base); line-height: 1.6; color: var(--ink);  } body[data-page="glossary"] .term-cc {  margin: 0; font-family: var(--font-ui); font-size: var(--text-sm);
             color: var(--gray-caption);  } body[data-page="glossary"] .term-cc a {  color: var(--brand-link);  } body[data-page="glossary"] .term-subject {  font-weight: 600; color: var(--brand-deep);  }

/* ---- page: chat ---- */
/* Chat UI (Task 12a) + multi-chat per subject (Task 23).
     Two-pane: thread sidebar left, conversation right. Colors/types via
     tokens.css vars (DESIGN §4) — no hex. */ body[data-page="chat"] .chat-shell {  max-width: 64rem; margin: 0 auto; display: flex; gap: 1rem;
                height: calc(100vh - 9rem);  } body[data-page="chat"] .threads {  width: 14rem; flex-shrink: 0; display: flex; flex-direction: column;
             gap: .5rem; padding: .9rem; background: var(--bg-tint);
             border: 1px solid var(--muted-disabled); border-radius: 10px;
             overflow-y: auto;  } body[data-page="chat"] .threads .head {  font-family: var(--font-ui); font-size: var(--text-xs);
                   letter-spacing: .08em; text-transform: uppercase;
                   color: var(--gray-label); margin: 0;  } body[data-page="chat"] .threads .new {  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500;
                  color: var(--bg); background: var(--brand-deep); border: none;
                  border-radius: 6px; padding: .5rem .7rem; cursor: pointer;  } body[data-page="chat"] .threads .new:hover {  background: var(--brand-emphasis);  } body[data-page="chat"] .thread-item {  display: flex; align-items: center; gap: .35rem; padding: .45rem .5rem;
                 border-radius: 6px; cursor: pointer; font-family: var(--font-ui);
                 font-size: var(--text-sm); color: var(--ink); text-decoration: none;
                 transition: background .15s ease;  } body[data-page="chat"] .thread-item:hover {  background: var(--brand-accent-soft);  } body[data-page="chat"] .thread-item.active {  background: var(--brand-accent-soft);
                        color: var(--brand-emphasis); font-weight: 500;  } body[data-page="chat"] .thread-item .tname {  flex: 1; min-width: 0; overflow: hidden;
                        text-overflow: ellipsis; white-space: nowrap;  } body[data-page="chat"] .thread-item .tdel {  background: none; border: none; color: var(--gray-caption);
                       cursor: pointer; font-size: var(--text-sm); padding: 0 .2rem; opacity: 0;  } body[data-page="chat"] .thread-item:hover .tdel {  opacity: 1;  } body[data-page="chat"] .chat {  flex: 1; min-width: 0; display: flex; flex-direction: column;  } body[data-page="chat"] .chat-head {  font-family: var(--font-ui); font-size: var(--text-xs);
               letter-spacing: .07em; text-transform: uppercase;
               color: var(--gray-label); margin: 0 0 .4rem;
               display: flex; align-items: center; gap: .5rem;  } body[data-page="chat"] .chat-head .subj-link {  color: var(--brand-link); text-decoration: none;
                          text-transform: none; letter-spacing: 0;  } body[data-page="chat"] .msgs {  flex: 1; overflow-y: auto; padding: .5rem .25rem 1rem;
          display: flex; flex-direction: column; gap: .75rem;  } body[data-page="chat"] .msg {  max-width: 82%; padding: .6rem .9rem; border-radius: 10px;
         line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;  } body[data-page="chat"] .msg.user {  align-self: flex-end; background: var(--brand-deep); color: var(--bg);
              font-family: var(--font-ui); font-size: var(--text-sm);  } body[data-page="chat"] .msg.assistant {  align-self: flex-start; background: var(--card-bg);
                   color: var(--ink); font-family: var(--font-reading);
                   font-size: var(--text-base);  } body[data-page="chat"] .chat-form {  display: flex; gap: .5rem; border-top: 1px solid var(--muted-disabled);
               padding-top: .8rem; align-items: center;  } body[data-page="chat"] .chat-form input {  flex: 1; max-width: none;  } body[data-page="chat"] .chat-form button[type=submit] {  margin-top: 0;  } body[data-page="chat"] .mic-btn {  margin-top: 0; width: 2.6rem; height: 2.6rem; padding: 0;
             display: inline-flex; align-items: center; justify-content: center;
             font-size: var(--text-lg); border-radius: 50%; border: 1.5px solid
             var(--muted-disabled); background: var(--bg); color: var(--ink-strong);
             cursor: pointer;  } body[data-page="chat"] .mic-btn.recording {  background: var(--brand-accent); color: var(--bg);
                       border-color: var(--brand-accent);
                       animation: mic-pulse 1s infinite;  } body[data-page="chat"] .mic-btn .mic-icon {  display: block;  } body[data-page="chat"] .mic-btn .mic-rec-icon {  display: none;  } body[data-page="chat"] .mic-btn.recording .mic-icon {  display: none;  } body[data-page="chat"] .mic-btn.recording .mic-rec-icon {  display: block;  } body[data-page="chat"] .mic-btn svg {  width: 20px; height: 20px;  } body[data-page="chat"] .mic-btn:disabled {  opacity: .6; cursor: wait;  } body[data-page="chat"] .mic-hint {  font-family: var(--font-ui); font-size: var(--text-xs);
              color: var(--gray-caption); margin: .35rem 0 0; text-align: center;  } body[data-page="chat"] .nudge {  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--gray-caption);
           background: var(--bg-tint); border: 1px dashed var(--muted-disabled);
           padding: 1.2rem; border-radius: 8px; text-align: center;  } body[data-page="chat"] .nudge a {  color: var(--brand-link);  } /* Thinking indicator (Task 14): bouncing dots while the reply is in flight. */ body[data-page="chat"] .thinking-indicator {  display: flex; gap: .35rem; padding: .6rem .9rem;
                        align-self: flex-start;  } body[data-page="chat"] .thinking-dot {  width: 6px; height: 6px; background: var(--brand-accent);
                  border-radius: 50%; animation: thinking-bounce 1.4s infinite
                  ease-in-out both;  } body[data-page="chat"] .thinking-dot:nth-child(1) {  animation-delay: -0.32s;  } body[data-page="chat"] .thinking-dot:nth-child(2) {  animation-delay: -0.16s;  } body[data-page="chat"] .thinking-dot:nth-child(3) {  animation-delay: 0s;  } @media  (max-width: 760px)  { ('body[data-page="chat"] .chat-shell {  flex-direction: column; height: auto;  } body[data-page="chat"] .threads {  width: auto; max-height: 10rem; flex-direction: row;\n               flex-wrap: wrap; align-items: center;  } body[data-page="chat"] .threads .head, .threads .new {  flex: none;  } body[data-page="chat"] .chat {  height: calc(100vh - 16rem);  }', {}) }

/* ---- page: settings_profile ---- */
/* Settings page — two independent editable zones (Task 12b). Clean, uses
     only tokens.css vars (DESIGN §4) — no hex. htmx submits each form and
     swaps a flash note. */ body[data-page="settings_profile"] .settings {  max-width: 46rem; margin: 0 auto;  } body[data-page="settings_profile"] .settings h1 {  font-family: var(--font-reading); font-weight: 600;
                 font-size: var(--text-2xl); color: var(--ink-strong); margin: .25rem 0 1.5rem;  } body[data-page="settings_profile"] .zone {  background: var(--bg-tint); border: 1px solid var(--muted-disabled);
          border-radius: 10px; padding: 1.4rem 1.6rem; margin-bottom: 1.6rem;  } body[data-page="settings_profile"] .zone h2 {  font-family: var(--font-ui); font-size: var(--text-sm);
             letter-spacing: .07em; text-transform: uppercase;
             color: var(--gray-label); margin: 0 0 .3rem;  } body[data-page="settings_profile"] .zone .desc {  font-family: var(--font-ui); font-size: var(--text-sm);
                color: var(--gray-caption); margin: 0 0 .9rem;  } body[data-page="settings_profile"] .btn {  display: inline-block; margin-top: .5rem; padding: .5rem .9rem;
         font-family: var(--font-ui); font-size: var(--text-sm); border: 1px solid
         var(--muted-disabled); border-radius: 4px; background: var(--bg);
         color: var(--input-ink, var(--ink)); text-decoration: none; cursor: pointer;  } body[data-page="settings_profile"] .btn-danger {  border-color: var(--brand-accent); color: var(--brand-accent);  } body[data-page="settings_profile"] [hidden] {  display: none !important;  } body[data-page="settings_profile"] .zone textarea {  width: 100%; box-sizing: border-box; min-height: 9rem;
                   font-family: var(--font-reading); font-size: var(--text-base);
                   color: var(--ink); padding: .6rem .75rem;
                   border: 1px solid var(--muted-disabled); border-radius: 6px;
                   background: var(--bg); resize: vertical;  } body[data-page="settings_profile"] .zone textarea.schema {  font-family: var(--font-ui); font-size: var(--text-sm);
                          min-height: 12rem; white-space: pre;  } body[data-page="settings_profile"] .zone select {  font-family: var(--font-ui); font-size: var(--text-sm);
                 color: var(--ink); padding: .5rem .6rem;
                 border: 1px solid var(--muted-disabled); border-radius: 6px;
                 background: var(--bg); max-width: 100%;  } body[data-page="settings_profile"] .zone button[type=submit] {  margin-top: .75rem;  } body[data-page="settings_profile"] .flash {  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--brand-emphasis);
           padding: .3rem 0 0;  } body[data-page="settings_profile"] .flash.error {  color: var(--brand-accent);  } body[data-page="settings_profile"] .zone .keynote {  font-family: var(--font-ui); font-size: var(--text-xs);
                   color: var(--gray-caption); margin-top: .7rem; line-height: 1.45;  } body[data-page="settings_profile"] .zone code {  font-family: var(--font-ui); background: var(--card-bg);
               padding: .1rem .35rem; border-radius: 4px; font-size: var(--text-sm);  }

/* ---- page: admin_audit ---- */
body[data-page="admin_audit"] .audit-wrap {  overflow-x: auto;  } body[data-page="admin_audit"] .audit-table {  border-collapse: collapse; width: 100%; font-size: var(--text-sm);  } body[data-page="admin_audit"] .audit-table th, .audit-table td { 
    border: 1px solid var(--muted-disabled);
    padding: .5rem .6rem; text-align: left; vertical-align: top;
   } body[data-page="admin_audit"] .audit-table th {  background: var(--bg-tint);  } body[data-page="admin_audit"] .ok {  color: var(--ok-soft); font-weight: 600;  } body[data-page="admin_audit"] .fail {  color: var(--err-soft); font-weight: 600;  } body[data-page="admin_audit"] .filters {  margin: .75rem 0; display: flex; gap: .75rem; flex-wrap: wrap; align-items: center;  } body[data-page="admin_audit"] .filters input, .filters select {  padding: .4rem .5rem; font-family: var(--font-ui); font-size: var(--text-sm);
                                    border: 1px solid var(--muted-disabled); border-radius: 4px;  } body[data-page="admin_audit"] .mono {  font-family: var(--font-reading); font-size: var(--text-xs); color: var(--muted-disabled);  }

/* ===== post-silo: centred read+roadmap measure (wins over silos) ===== */
/* Task 40 Build 1: quantum.country margin sidenotes. The prose column
   CONTAINS its own right margin (padding-right) so floated sidenotes land in
   it; the sticky rail is a separate grid column to the right. Below 1200px
   the margin notes are hidden and the pooled References <details> fallback
   in the rail takes over. */
body[data-page="read"] main { width: min(1392px, 100% - 2rem); max-width: 1392px; margin: 2.5rem auto; padding-inline: 1rem; }
body[data-page="read"] .reading-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 2rem; justify-content: center; align-items: start; }
/* Task 40b Item 4: the prose column is FLUID — the grid track governs, the
   article caps itself at 1060px. A fixed 1060px width overflowed its track
   in the 1200-1424px band and collided with the rail. The article contains
   its own right margin (padding-right 340) so floated sidenotes land in it. */
body[data-page="read"] .reading-layout > :first-child { width: 100%; max-width: 1060px; margin-inline: 0; padding-right: 340px; box-sizing: border-box; }
/* Task 40 Build 1: margin sidenotes (quantum.country pattern). Each note is
   a floated inline span INSIDE its citing paragraph — `float: right` plus a
   negative right margin pulls it out of the prose into the article's right
   padding (the margin track), vertically aligned with the paragraph that
   cites it and scrolling with the essay (not sticky). `clear: right` makes
   stacked notes nudge downward instead of overlapping when citations
   cluster. Hidden on narrow screens where the pooled <details> fallback
   takes over (mobile polish later). */
.sidenote { font-family: var(--font-reading); font-size: var(--text-sm);
  line-height: 1.45; color: var(--ink); background: var(--bg-tint);
  border-left: 2px solid var(--brand-accent-soft);
  border-radius: 0 6px 6px 0; padding: .45rem .65rem; }
.sidenote .sn-num { font-family: var(--font-ui); font-size: var(--text-xs);
  color: var(--gray-caption); margin-right: .3rem; }
.sidenote .sn-title { display: block; font-weight: 600; color: var(--ink-strong);
  word-break: break-word; }
.sidenote .sn-meta { display: block; color: var(--gray-caption);
  font-size: var(--text-xs); margin-top: .1rem; }
.sidenote .sn-excerpt { display: block; margin-top: .25rem; }
.sidenote.is-reference-highlight { background: var(--brand-accent-soft);
  border-left-color: var(--brand-accent); }
.refs-fallback summary { font-family: var(--font-ui); font-size: var(--text-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--gray-label);
  margin: 0 0 .4rem; cursor: pointer; }
@media (min-width: 1200px) {
  .sidenote { display: block; float: right; clear: right; width: 300px;
    margin-right: -320px; }
  .refs-fallback { display: none; }
}
@media (max-width: 1199px) {
  body[data-page="read"] .reading-layout { grid-template-columns: minmax(0, 700px) minmax(0, 300px); gap: 4rem; justify-content: center; align-items: start; }
  body[data-page="read"] .reading-layout > :first-child { width: 700px; max-width: 700px; padding-right: 0; }
  .sidenote { display: none; }
}
@media (max-width: 900px) {
  body[data-page="read"] .reading-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  body[data-page="read"] .reading-layout > :first-child { width: auto; max-width: 100%; }
  body[data-page="read"] .rail { position: static; }
}
body[data-page="roadmap"] main { width: min(1084px, 100% - 2rem); max-width: 1084px; margin: 2.5rem auto; padding-inline: 1rem; }
body[data-page="roadmap"] .reading-layout { grid-template-columns: minmax(0, 700px) minmax(0, 300px); gap: 84px; justify-content: center; align-items: start; }

/* ---- Task 40 demo essay (Build 4): slim CTA band + end-of-essay panel ---- */
body[data-page="read"] .demo-band { display: flex; gap: .75rem; align-items: center;
  flex-wrap: wrap; background: var(--bg-tint);
  border: 1px solid var(--muted-disabled); border-radius: 8px;
  padding: .6rem .8rem; margin: 0 0 1.5rem; }
.demo-band-tag { font-family: var(--font-reading); font-size: var(--text-sm);
  color: var(--ink); margin: 0; }
.demo-band-cta { font-family: var(--font-ui); font-size: var(--text-sm);
  font-weight: 600; color: var(--brand-deep); text-decoration: none;
  white-space: nowrap; }
.demo-band-cta:hover { color: var(--brand-emphasis); text-decoration: underline; }
.demo-cta-end { max-width: 720px; margin: 3rem auto 2rem; text-align: center;
  background: var(--bg-tint); border: 1px solid var(--muted-disabled);
  border-radius: 10px; padding: 1.5rem 1rem; }
.demo-cta-end h2 { font-family: var(--font-reading); font-weight: 600;
  color: var(--ink-strong); margin: 0 0 .5rem; }
.demo-cta-end p { font-family: var(--font-reading); color: var(--ink);
  margin: 0 0 1rem; max-width: 34rem; margin-inline: auto; }
.demo-tryagain { color: var(--brand-accent); }

/* ===== keyframes (global) ===== */
@keyframes mic-pulse {  0%,100% { box-shadow: 0 0 0 0 var(--brand-accent-soft); }
                         50% { box-shadow: 0 0 0 8px var(--brand-accent-soft); }  }
@keyframes thinking-bounce {  0%,80%,100% { transform: scale(0); opacity: .4; }
                               40% { transform: scale(1); opacity: 1; }  }