/* ============================================================
     THE RECEIPT ON THE DESK

     One idea carries the whole interface. The student writes on a sheet
     that looks like the sheet they always write on. Beside it, the record
     prints itself as a receipt: monospaced, perforated, itemised, a tally
     at the bottom. The teacher's view is the same receipt and a reading
     desk with the sheet and a tape transport.

     Colour is spent in exactly two places: a red dot while recording, and
     one amber for input disclosures (clipboard, origin not observed).
     Everything else is ink on warm paper, in both themes.
     ============================================================ */
  :root {
    --bg: #ECE9E1;
    --desk: #E3DFD4; --sheet-edge: #D5D0C3;
    --surface: #FBFAF6;
    --paper: #FFFFFE;
    --receipt: #FFFDF6;
    --ink: #16150F;
    --ink-2: #4A4840;
    --ink-3: #5E5A52;
    --line: #D6D2C7;
    --line-2: #C4BFB2;
    --line-soft: #EAE6DD;
    --brass: #16150F;
    --brass-soft: #F1EEE5;
    --good: #16150F;
    --good-soft: #EFEDE5;
    --warn: #9A958A;
    --warn-soft: #F2F0EA;
    --flag: #9A4A15;
    --flag-soft: #F7E8D9;
    --tl-doc: #1F5FAD;
    --rec: #AE2E1B;
    --panel: var(--surface);
    --near: var(--brass-soft);
    --shadow: rgba(40, 35, 20, .16);
    --shadow-deep: rgba(40, 35, 20, .28);

    --font-display: ui-serif, "New York", "Iowan Old Style", "Palatino", Georgia, "Times New Roman", serif;
    --font-ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
    --font-head: var(--font-display);
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --r: 10px;
    --r-sm: 6px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #121210;
      --desk: #191815; --sheet-edge: #2B2925;
      --surface: #1C1B18;
      --paper: #232220;
      --receipt: #211F1A;
      --ink: #F1EEE6;
      --ink-2: #BDB8AD;
      --ink-3: #9C9890;
      --line: #33312C;
      --line-2: #44413A;
      --line-soft: #2A2925;
      --brass: #F1EEE6;
      --brass-soft: #2A2925;
      --good: #F1EEE6;
      --good-soft: #26251F;
      --warn: #8C877C;
      --warn-soft: #26251F;
      --flag: #E0894A;
      --flag-soft: #3B2A1B;
      --tl-doc: #7FAEF0;
      --rec: #E8543C;
      --shadow: rgba(0, 0, 0, .45);
      --shadow-deep: rgba(0, 0, 0, .65);
    }
  }
  :root[data-theme="dark"] {
    --bg: #121210; --desk: #191815; --sheet-edge: #2B2925;
    --surface: #1C1B18; --paper: #232220; --receipt: #211F1A;
    --ink: #F1EEE6; --ink-2: #BDB8AD; --ink-3: #9C9890;
    --line: #33312C; --line-2: #44413A; --line-soft: #2A2925;
    --brass: #F1EEE6; --brass-soft: #2A2925;
    --good: #F1EEE6; --good-soft: #26251F;
    --warn: #8C877C; --warn-soft: #26251F;
    --flag: #E0894A; --flag-soft: #3B2A1B; --tl-doc: #7FAEF0;
    --rec: #E8543C;
    --shadow: rgba(0, 0, 0, .45); --shadow-deep: rgba(0, 0, 0, .65);
  }
  :root[data-theme="light"] {
    --bg: #ECE9E1; --desk: #E3DFD4; --sheet-edge: #D5D0C3;
    --surface: #FBFAF6; --paper: #FFFFFE; --receipt: #FFFDF6;
    --ink: #16150F; --ink-2: #4A4840; --ink-3: #67635B;
    --line: #D6D2C7; --line-2: #C4BFB2; --line-soft: #EAE6DD;
    --brass: #16150F; --brass-soft: #F1EEE5;
    --good: #16150F; --good-soft: #EFEDE5;
    --warn: #9A958A; --warn-soft: #F2F0EA;
    --flag: #9A4A15; --flag-soft: #F7E8D9; --tl-doc: #1F5FAD;
    --rec: #AE2E1B;
    --shadow: rgba(40, 35, 20, .16); --shadow-deep: rgba(40, 35, 20, .28);
  }

  * { box-sizing: border-box; }
  html { background: var(--bg); }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  :focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
  ::selection { background: var(--flag-soft); }

  /* ---------- chrome ---------- */
  .topbar {
    display: flex; align-items: center; gap: 18px;
    padding: 10px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    position: sticky; top: 0; z-index: 20;
    flex-wrap: nowrap;
  }
  .brand {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 600;
    letter-spacing: -0.01em;
    display: flex; align-items: baseline; gap: 10px;
  }
  .brand .seal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ink); position: relative; flex: none;
    transform: translateY(5px);
  }
  .brand .seal::before {
    content: 'R'; color: var(--surface);
    font-family: var(--font-display); font-weight: 700; font-size: 16px;
    transform: translateY(0.5px);
  }
  .brand .seal::after {
    content: ''; position: absolute; top: 1px; right: 0;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--rec); box-shadow: 0 0 0 2px var(--surface);
  }
  .brand small {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3); font-weight: 400;
  }
  .rec {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-3);
    padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--brass-soft);
  }
  .rec .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
  .rec.live { color: var(--ink); border-color: var(--rec); background: var(--surface); }
  .rec.live .dot { background: var(--rec); animation: pulse 1.4s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(174, 46, 27, .18); }
  /* Reserved for a genuine refusal or pause, never for the ordinary
     before-your-first-keystroke state, which reads as the neutral "ready". */
  .rec.blocked { color: var(--rec); border-color: var(--rec); }
  .rec.blocked .dot { background: var(--rec); }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
  @media (prefers-reduced-motion: reduce) { .rec.live .dot { animation: none; } }

  .signin {
    margin-left: auto; background: var(--ink); color: var(--surface);
    border-color: var(--ink); font-weight: 600;
  }
  .signin:hover { opacity: .85; }
  .signin.hidden { display: none; }
  .topbar > #signOut { flex: 0 0 auto; white-space: nowrap; }
  .tabs { display: flex; gap: 0; margin-left: auto; }
  .tabs.pushed { margin-left: auto; }
  .tab {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 12px 13px 10px; border: 0; border-bottom: 2px solid transparent;
    background: none; color: var(--ink-3); cursor: pointer;
    margin-bottom: -11px;
  }
  .tab:hover { color: var(--ink); }
  /* aria-selected marks the active tab in the shared tablist;
     aria-current="page" marks it in the writer's own page-navigation
     view (showView, app.js). Both need the same underline. */
  .tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
  /* Only .shared-presentation .tab resets this negative margin, so
     .tabs' own overflow-x:auto clips the 2px underline here, outside
     the writer's own tab strip. */
  body:not(.shared-presentation) .tab { margin-bottom: 0; }
  .author-actionbar {
    max-width: 1280px; margin: 14px auto -12px; padding: 0 24px;
    display: none; justify-content: flex-end; align-items: center; gap: 7px; flex-wrap: wrap;
  }
  .author-actionbar.open { display: flex; }
  .author-actionbar::before {
    content: 'More tools'; margin-right: 4px; color: var(--ink-3);
    font: 500 13px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  }
  .author-actionbar .btn { background: transparent; color: var(--ink-2); }

  /* ---------- layout ---------- */
  main { max-width: 1280px; margin: 0 auto; padding: 28px 24px 80px; }
  .panelgrid { display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 26px; align-items: start; }
  @media (max-width: 960px) { .panelgrid { grid-template-columns: minmax(0,1fr); } }

  .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: 0 1px 0 var(--line-soft), 0 14px 32px -24px var(--shadow-deep);
  }
  .panel-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-bottom: 1px solid var(--line-soft);
  }
  .panel-head h2 {
    margin: 0; font-family: var(--font-mono); font-size: 13px;
    letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: var(--ink-3);
  }
  #view-docs .panel-head { padding: 22px 24px 16px; }
  #view-docs .panel-head h2 {
    font-family: var(--font-display); font-size: 26px; font-weight: 600;
    letter-spacing: -0.01em; text-transform: none; color: var(--ink);
  }
  .docrow .t b, .plremind strong { font-weight: 700; }
  .docrow .t em b { color: var(--ink); font-weight: 650; font-style: normal; }
  .panel-head .spacer { margin-left: auto; }

  /* ---------- editor ---------- */
  /* The sheet reads as the Docs page every student knows, because the
     pitch is "write like you always do", set on a warm desk with a real
     shadow rather than a flat grey. */
  .dochead {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px 10px;
    background: var(--surface);
  }
  .docicon { color: var(--ink-3); flex: 0 0 auto; }
  .doctitle {
    font-family: var(--font-ui); font-size: 15.5px; color: var(--ink);
    padding: 2px 6px; border-radius: 4px;
    cursor: text;
  }
  .doctitle:hover { background: var(--surface-2, rgba(0,0,0,.04)); }
  .doctitle:focus { background: var(--surface-2, rgba(0,0,0,.04)); outline: 2px solid var(--accent, #4285F4); outline-offset: 0; }
  .docsaved {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); margin-left: 2px;
  }
  .doclink { font-family: var(--font-ui); font-size: 13px; color: var(--ink-3);
    text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
  .doclink:hover { color: var(--ink); }

  body.focusmode .topbar, body.focusmode .panel-head, body.focusmode .wherebar,
  body.focusmode .trybar, body.focusmode .editbar,
  body.focusmode #view-write > aside, body.focusmode .verdict,
  body.focusmode aside.panel { display: none !important; }
  body.focusmode #view-write { display: block !important; }
  body.focusmode #view-write .panel { border: none; border-radius: 0; box-shadow: none; }
  body.focusmode .paperwrap { min-height: calc(100vh - 60px); padding-top: 34px; }
  body.focusmode .dochead { position: sticky; top: 0; z-index: 5;
    border-bottom: 1px solid var(--sheet-edge); }

  .ruler {
    position: relative; height: 18px;
    background:
      repeating-linear-gradient(to right,
        transparent 0, transparent 11px,
        var(--sheet-edge) 11px, var(--sheet-edge) 12px) center bottom / 100% 7px no-repeat,
      var(--desk);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--sheet-edge);
  }
  .ruler i {
    position: absolute; top: 3px; width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 7px solid var(--ink-3);
  }
  .ruler .mL { left: calc(50% - 408px + 76px); }
  .ruler .mR { right: calc(50% - 408px + 76px); }
  @media (max-width: 900px) { .ruler .mL { left: 8%; } .ruler .mR { right: 8%; } }

  .paperwrap {
    /* 14px below the editor keeps a visible seam and Copy proof link on a
       cold 1440x900 screen; more air pushes it off the bottom. */
    padding: 26px 16px 14px;
    background: var(--desk);
    background-image: radial-gradient(circle at 50% 0, rgba(255,255,255,.35), transparent 60%);
    display: flex; justify-content: center;
  }
  #editor {
    display: block; width: 100%; max-width: 816px; min-height: 640px;
    background: var(--paper); color: var(--ink);
    border: 1px solid var(--sheet-edge); resize: vertical;
    padding: 76px 76px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14.7px; line-height: 1.5;
    border-radius: 2px;
    box-shadow: 0 1px 2px var(--shadow), 0 12px 28px -12px var(--shadow-deep);
  }
  @media (max-width: 720px) { #editor { padding: 36px 26px; min-height: 460px; } }
  #editor::placeholder { color: var(--ink-3); }
  .editbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 18px; border-top: 1px solid var(--line-soft);
    font-family: var(--font-mono); font-size: 13px; color: var(--ink-3);
    letter-spacing: 0.04em;
  }
  .editbar .spacer { margin-left: auto; }

  /* ---------- the receipt ----------
     The evidence rail is printed, not designed: a strip of receipt paper with
     perforated ends, itemised lines with a right-aligned quantity, and a
     ruled total. It is the object the product is named after. */
  aside.panel, #sharedRail {
    background: var(--receipt);
    border: 1px solid var(--line);
    border-radius: 3px;
    position: relative;
    font-family: var(--font-mono);
    box-shadow: 0 1px 0 var(--line-soft), 0 18px 34px -22px var(--shadow-deep);
  }
  aside.panel::before, aside.panel::after, #sharedRail::before, #sharedRail::after {
    content: ''; position: absolute; left: 0; right: 0; height: 8px;
    background:
      linear-gradient(135deg, var(--bg) 50%, transparent 50%) 0 0 / 12px 8px repeat-x,
      linear-gradient(225deg, var(--bg) 50%, transparent 50%) 0 0 / 12px 8px repeat-x;
    pointer-events: none;
  }
  aside.panel::before, #sharedRail::before { top: -1px; }
  aside.panel::after, #sharedRail::after { bottom: -1px; transform: scaleY(-1); }
  #view-replay #sharedRail::before, #view-replay #sharedRail::after {
    background:
      linear-gradient(135deg, var(--bg) 50%, transparent 50%) 0 0 / 12px 8px repeat-x,
      linear-gradient(225deg, var(--bg) 50%, transparent 50%) 0 0 / 12px 8px repeat-x;
  }
  .verdict { padding: 26px 18px 16px; border-bottom: 1px dashed var(--line-2); }
  .verdict .label {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--ink-3); text-align: center;
  }
  .verdict .headline {
    font-family: var(--font-display); font-size: 22px; line-height: 1.15;
    font-weight: 600; letter-spacing: -0.012em;
    margin: 10px 0 0; text-wrap: balance; text-align: center;
  }
  .caveat { font-family: var(--font-ui); font-size: 13px; color: var(--ink-3); margin-top: 10px; line-height: 1.45; text-align: center; }
  .exsubhead { font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
                margin: 26px 0 10px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
  #exSignals .tally { margin: 0 0 12px; }
  .tally {
    font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; line-height: 1.45; margin: 12px 0 0;
    padding: 0 0 0 12px; border: 0; border-left: 3px solid var(--line-2); background: none; letter-spacing: 0; text-align: left;
  }
  .tally:empty { display: none; }
  .tally.clean    { border-left-color: var(--good); color: var(--ink); }
  .tally.has-disclosure { border-left-color: var(--flag); color: var(--ink); }

  .signals { list-style: none; margin: 0; padding: 6px 0 14px; }
  .signals li {
    display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: baseline;
    padding: 11px 18px; border-bottom: 1px solid var(--line-soft);
  }
  .signals li.row-disclosure, .signals li.row-flag { background: var(--flag-soft); }
  .signals li.row- .name, .signals li.row- .val { color: var(--ink-3); font-weight: 400; }
  .rowhelp { display: block; width: calc(100% - 36px); margin: 4px 18px 10px; padding: 8px 10px; font: 500 13px/1.3 var(--font-ui); color: var(--ink-2); background: none; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; text-align: left; }
  .rowhelp:hover { border-color: var(--ink); color: var(--ink); }
  .signals.explain .name em { display: block; }
  .signals .wal { display: inline-block; margin-left: 8px; font: 600 13px/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--flag); vertical-align: middle; }
  .signals li:last-child { border-bottom: none; }
  .signals li.grp { display: block; padding: 18px 18px 6px; font: 600 13px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 0; background: none; }
  .signals li.grp:first-child { padding-top: 8px; }
  .signals li.seek { cursor: pointer; }
  .signals li.seek:hover { background: var(--raise); }
  .signals li.seek .val::after { content: ' \203A'; color: var(--ink-3); font-weight: 400; }
  .signals li.seek { position: relative; }
  .signals .row-seek-btn { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; color: transparent; }
  .signals .row-seek-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
  .signals .chip { width: 7px; height: 7px; border-radius: 1px; background: none;
    border: 1px solid var(--ink-3); transform: translateY(2px); }
  .signals .chip.observed { background: var(--ink); border-color: var(--ink); }
  .signals .chip.disclosure { background: var(--flag); border-color: var(--flag); border-radius: 50%;
    box-shadow: 0 0 0 2px var(--receipt), 0 0 0 3px var(--flag); }
  .signals .chip.good { background: var(--good); border-color: var(--good); }
  .signals .chip.flag { background: var(--flag); border-color: var(--flag);
    box-shadow: 0 0 0 2px var(--receipt), 0 0 0 3px var(--flag); border-radius: 50%; }
  .signals .chip.warn { background: linear-gradient(135deg, var(--warn) 50%, transparent 50%); border-color: var(--warn); }
  .signals .name { font-family: var(--font-ui); font-size: 14px; letter-spacing: -0.005em; font-weight: 500; }
  .signals .name em { display: none; font-family: var(--font-ui); font-style: normal; font-weight: 400; font-size: 13px; color: var(--ink-3); line-height: 1.35; margin-top: 3px; }
  .signals .val {
    font-family: var(--font-ui); font-size: 16px; font-variant-numeric: tabular-nums;
    color: var(--ink); white-space: nowrap; font-weight: 600;
  }
  .sparkwrap { padding: 10px 18px 12px; border-bottom: 1px solid var(--line-soft); }
  .sparkwrap.folded .spark, .sparkwrap.folded .caveat { display: none; }
  .sparkwrap .cap { cursor: pointer; }
  .sparkwrap .cap {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between;
  }
  .sparkwrap .caveat { text-align: left; }
  svg.spark { display: block; width: 100%; height: 46px; margin-top: 7px; }

  /* ---------- buttons ---------- */
  .btn {
    font-family: var(--font-ui); font-size: 13px; font-weight: 500;
    padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink); cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
  }
  .btn:hover { border-color: var(--ink); }
  .btn:disabled { opacity: .6; cursor: not-allowed; }
  #playBtn { background: var(--ink); color: var(--surface); border-color: var(--ink); min-width: 78px; font-weight: 600; }
  #playBtn:hover { opacity: .88; }

  /* ---------- replay: the reading desk ---------- */
  #view-replay > .panel { background: var(--desk); }
  #view-replay .panel-head { background: var(--surface); border-radius: var(--r) var(--r) 0 0; flex-wrap: wrap; }
  /* The clock and the moment name belong to the shared reading layout only,
     and the controls stay loose children of the head bar for the author, so
     the writer's own replay keeps its plain header. */
  .replay-clock, .replay-nowline { display: none; }
  .replay-controls { display: contents; }
  /* Keeps "Speed" and its select on one line: as two separate flex items
     they could wrap apart at narrow widths, leaving the label stranded. */
  .speed-group { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  .replaydoc {
    background: var(--paper); margin: 26px auto 8px; padding: 48px 56px; min-height: 420px;
    max-width: 780px; width: calc(100% - 32px);
    font-family: var(--font-display); font-size: 17.5px; line-height: 1.72;
    white-space: pre-wrap; word-wrap: break-word; border-radius: 2px;
    border: 1px solid var(--sheet-edge);
    box-shadow: 0 1px 2px var(--shadow), 0 16px 34px -14px var(--shadow-deep);
  }
  @media (max-width: 720px) { .replaydoc { padding: 28px 22px; width: calc(100% - 20px); margin-top: 16px; } }
  .replaydoc .caret { border-left: 2px solid var(--ink); margin-left: -1px; animation: blink 1s step-end infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .replaydoc .caret { animation: none; } }
  /* Neutral, not --flag: a paste is a fact about where text came from,
     not a "look here" signal, regardless of its size. --flag stays for
     the amber level, "Needs a closer look" and the flagged-row tint. */
  .replaydoc mark { background: var(--brass-soft); color: inherit; border-bottom: 2px solid var(--ink-2); }
  .replay-paste-key { display: flex; align-items: center; gap: 8px; margin: 8px auto 0; max-width: 780px; width: calc(100% - 32px); font-size: 13px; color: var(--ink-3); }
  .replay-paste-key-swatch { width: 22px; height: 14px; flex: none; background: var(--brass-soft); border-bottom: 2px solid var(--ink-2); }
  #replayObservation {
    margin: 14px 16px 0; background: var(--receipt); border-left-color: var(--ink);
  }
  .scrub {
    display: flex; align-items: center; gap: 12px; padding: 16px 24px 2px;
    margin: 14px 0 0; background: var(--surface); border-top: 1px solid var(--line);
  }
  .scrub input[type=range] { flex: 1; accent-color: var(--ink); min-width: 0; }
  .scrub input[type=range] {
    height: 44px; padding: 14px 0; background: transparent; box-sizing: border-box;
    touch-action: none;
  }
  .scrub input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; }
  .scrub input[type=range]::-moz-range-thumb { width: 22px; height: 22px; }
  .scrub .t { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; min-width: 44px; }
  .scrub .t:last-child { text-align: right; }

  .timeline { padding: 0 24px 18px; background: var(--surface); border-radius: 0 0 var(--r) var(--r); }
  .timeline .cap {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
  }
  /* The event track sits directly under the scrubber at the same width, so a
     mark on the track is at the same x as the moment on the slider. */
  /* Marks read by shape and position first, colour last (usability review,
     26 Sep 2026): typing is a thin line in the middle band, deletions hang
     in the bottom band, spellcheck ticks sit in the top band, a pause is a
     bar along the top edge, and the whole-height marks differ by fill: a
     hatched thick bar (pasted), a hollow box (arrived some other way), a
     solid blue bar (from a Google Doc), a dashed rule (new sitting). Every
     mark is ink-2, ink-3, ink or --tl-doc on --brass-soft: 3:1 or more in
     both themes. Never --flag (reserved for "look here") and never red. The
     legend draws each swatch with these same rules (.tlmarks). */
  .track { position: relative; height: 34px; margin: 0 44px 0 44px; background: var(--brass-soft); border-radius: 2px; overflow: hidden; }
  @media (max-width: 560px) { .track { margin: 0; } }
  .tlmarks .ev { position: absolute; top: 26%; bottom: 26%; width: 1px; background: var(--ink-2); }
  .tlmarks .ev.del { top: 78%; bottom: 0; width: 2px; background: var(--ink-3); }
  .tlmarks .ev.paste { top: 0; bottom: 0; width: 7px; z-index: 2; border: 1px solid var(--ink);
    background: repeating-linear-gradient(135deg, var(--ink-2) 0 1.5px, var(--brass-soft) 1.5px 4px); }
  .tlmarks .ev.unattributed { top: 0; bottom: 0; width: 6px; z-index: 2; background: var(--brass-soft); border: 2px solid var(--ink-2); }
  .tlmarks .ev.snapshot { top: 0; bottom: 0; width: 4px; z-index: 2; background: var(--tl-doc); }
  .tlmarks .ev.history { background: var(--ink-3); opacity: .35; }
  .tlmarks .ev.pause { top: 0; bottom: auto; height: 3px; background: var(--ink-3); }
  .tlmarks .ev.touch { width: 0; background: transparent; border-left: 2px dotted var(--ink-2); }
  .tlmarks .ev.replacement { top: 0; bottom: auto; height: 20%; width: 2px; background: var(--ink-2); }
  /* A new sitting is a neutral fact, not a brand moment: never --rec (the
     brand red, reserved for the REC pill and the logo). */
  .tlmarks .ev.seam { top: 0; bottom: 0; width: 0; z-index: 3; background: transparent; border-left: 2px dashed var(--ink); }
  /* Time ticks under the track, on the same x scale and with the scrubber's
     own mm:ss labels. */
  .ticks { position: relative; height: 22px; margin: 0 44px 0 44px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
  @media (max-width: 560px) { .ticks { margin: 0; } }
  .ticks .tick { position: absolute; top: 0; width: 0; height: 5px; border-left: 1px solid var(--ink-3); }
  .ticks .tick b { position: absolute; top: 5px; left: 0; transform: translateX(-50%); font-weight: 400; line-height: 1.3; white-space: nowrap; }
  .ticks .tick.first b { transform: none; }
  .ticks .tick.minor { height: 3px; }
  @media (max-width: 560px) { .ticks .tick.odd b { display: none; } }
  .legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 44px 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
  @media (max-width: 560px) { .legend { margin: 10px 0 0; } }
  .legend span { display: flex; align-items: center; gap: 5px; }
  .legend i { width: 8px; height: 8px; border-radius: 1px; display: inline-block; }
  .legend i.sw { position: relative; flex: none; width: 16px; height: 22px; border-radius: 2px; background: var(--brass-soft); overflow: hidden; }
  .legend i.sw .ev { left: 7px; }
  .legend i.sw .ev.paste, .legend i.sw .ev.unattributed { left: 4px; }
  .legend i.sw .ev.pause { left: 0; width: 100%; }
  .observation-nav {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 16px 0; color: var(--ink-3); font-family: var(--font-mono); font-size: 13px;
  }
  .observation-nav span { min-width: 132px; text-align: center; }
  .observation-nav .nav-arrow { display: none; }
  @media (max-width: 520px) {
    .observation-nav { align-items: stretch; flex-direction: column; }
    .observation-nav span { order: -1; min-width: 0; }
  }
  /* Below 420px the three step labels wrap to three lines even stacked,
     so arrows only; the words stay the button's aria-label. */
  @media (max-width: 420px) {
    .observation-nav { flex-direction: row; align-items: center; }
    .observation-nav span { order: 0; }
    .observation-nav .nav-words { display: none; }
    .observation-nav .nav-arrow { display: inline; }
    /* With only the arrow glyph left, the .btn padding gives a 12px-wide
       hit area; a finger needs 32x32. */
    #prevObservation, #nextObservation { min-width: 32px; min-height: 32px; }
  }

  /* ---------- exhibit ---------- */
  #view-exhibit .panel.exhibit {
    background: var(--paper); max-width: 900px; margin: 0 auto;
    box-shadow: 0 1px 2px var(--shadow), 0 24px 48px -20px var(--shadow-deep);
  }
  .exhibit { padding: 44px 52px 48px; }
  @media (max-width: 620px) { .exhibit { padding: 28px 20px 32px; } }
  .exhibit .stamp {
    display: inline-block; border: 2px solid var(--rec); color: var(--rec);
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 6px 11px; border-radius: 2px; transform: rotate(-1.6deg);
  }
  /* --rec on --paper is 4.36:1 in dark (#E8543C on #232220), under the
     4.5:1 text floor. Two points lighter (HSL lightness 57.3% -> 59.3%)
     reaches 4.61:1 and reads as the same red. Dark theme only; the shared
     --rec token (REC pill, logo, error state) is untouched. */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .exhibit .stamp { border-color: #E95C45; color: #E95C45; } }
  :root[data-theme="dark"] .exhibit .stamp { border-color: #E95C45; color: #E95C45; }
  .exhibit h1 {
    font-family: var(--font-display); font-size: clamp(30px, 4.6vw, 46px); font-weight: 600;
    margin: 20px 0 6px; letter-spacing: -0.015em; line-height: 1.06; text-wrap: balance;
  }
  .exhibit .sub { color: var(--ink-2); font-size: 14px; margin: 0 0 26px; max-width: 62ch; }
  .kv { display: grid; grid-template-columns: 200px 1fr; gap: 0; border-top: 1px solid var(--ink); }
  @media (max-width: 620px) { .kv { grid-template-columns: 1fr; } }
  .kv dt {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-3); padding: 11px 0; border-bottom: 1px dotted var(--line-2);
  }
  .kv dd {
    margin: 0; padding: 11px 0; border-bottom: 1px dotted var(--line-2);
    font-family: var(--font-mono); font-size: 13px; word-break: break-word; color: var(--ink);
  }
  @media (max-width: 620px) {
    .kv dt { padding-bottom: 2px; border-bottom: none; }
    .kv dd { padding-top: 0; }
  }
  .exhibit .foot { margin-top: 26px; font-size: 13px; color: var(--ink-3); line-height: 1.6; max-width: 70ch; }

  .honesty {
    margin-top: 20px; padding: 18px 20px;
    border: 1px solid var(--line); border-left: 3px solid var(--ink);
    border-radius: var(--r-sm); background: var(--surface);
  }
  .honesty h3 {
    margin: 0 0 8px; font-family: var(--font-mono); font-size: 13px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); font-weight: 600;
  }
  .honesty p { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); line-height: 1.55; max-width: 78ch; }
  .honesty p:last-child { margin-bottom: 0; }

  #shareNote.ok { color: var(--ink); font-weight: 600; }

  .tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }
  /* Secondary actions use the same disclosure on desktop and mobile. */
  .moretools-toggle { display: inline-block; flex: 0 0 auto; white-space: nowrap; }
  .moretools-samplerow { display: none; }
  .topbar-row2 { display: contents; }
  @media (max-width: 620px) {
    .tab { padding: 8px 10px; min-height: 36px; margin-bottom: 0; }
    /* Row 1 stays wordmark + status pill + sign-in/account, capped well
       under 56px so a keyboard leaves usable space below. Row 2 is the
       tab strip plus the More tools toggle at its trailing edge; the
       strip scrolls sideways instead of wrapping (see the .tabs rule
       below), so row 2 never grows past one line either. */
    .topbar {
      flex-wrap: wrap; row-gap: 0; align-items: center;
      padding: 6px 10px; gap: 8px; min-height: 0;
    }
    .topbar .brand {
      font-size: 14.5px; gap: 5px; flex: 0 1 auto; min-width: 0; overflow: hidden;
      white-space: nowrap; text-overflow: ellipsis;
    }
    .topbar .brand small { display: none; }
    .topbar .brand .seal { width: 20px; height: 20px; transform: translateY(3px); flex: none; }
    /* The status pill never truncates: it keeps its content width (flex:
       0 0 auto) so "SHARED RECORD" and every other state print in full;
       the topbar's own flex-wrap carries it to a second line on the
       narrowest phones instead of clipping it. */
    .topbar .rec {
      font-size: 13px; padding: 4px 6px; gap: 3px; flex: 0 0 auto; min-width: 0;
    }
    .topbar .rec span:not(.dot) {
      white-space: nowrap; display: inline-block;
    }
    .topbar .signin {
      font-size: 13px; padding: 6px 8px; white-space: nowrap; flex: 0 1 auto;
      min-width: 0; overflow: hidden; text-overflow: ellipsis;
    }
    /* The theme toggle leaves the narrow header for More tools (usability
       review, 26 Sep 2026); this still sizes it if it is ever back here. */
    .topbar #themeBtn { padding: 6px 8px; flex: 0 0 auto; }
    .topbar .acct-chip { gap: 5px; flex: 0 1 auto; min-width: 0; }
    .topbar #signOut {
      font-size: 13px; padding: 6px 8px; white-space: nowrap; flex: 0 0 auto;
    }
    .topbar-row2 {
      display: flex; align-items: center; gap: 6px;
      order: 5; flex: 1 0 100%; width: 100%; margin: 4px 0 0;
    }
    .topbar-row2 .tabs {
      flex: 1 1 auto; width: auto; min-width: 0; margin: 0;
      flex-wrap: nowrap; overflow-x: auto;
    }
    /* Each tab keeps its label on one line, and the three writer tabs share
       one row beside More tools (usability review, 26 Sep 2026: wrapped onto
       two rows they cost the editor a line of height). A screen too narrow
       for all three scrolls the strip sideways rather than wrapping it. */
    body:not(.shared-presentation) .topbar-row2 .tabs[aria-label="Receipts workspace"] {
      display: flex; flex-wrap: nowrap; row-gap: 0; overflow-x: auto;
    }
    body:not(.shared-presentation) .topbar-row2 .tabs[aria-label="Receipts workspace"] .tab {
      flex: 0 0 auto; min-width: 0; padding: 6px 5px; white-space: nowrap; letter-spacing: 0;
      font-size: 13px; line-height: 1.2; text-align: center;
    }
    /* The theme switch moves into More tools on a phone (write-view.js's
       placeForPhone); there it needs words beside its glyph. */
    .author-actionbar #themeBtn::after { content: " Light or dark theme"; }
    .topbar-row2 .moretools-toggle { flex: 0 0 auto; margin: 0; }
    /* "Load sample" lives behind the More tools panel below; the panel-head
       copy stays, without these two buttons. */
    .demorow { display: none !important; }
    /* The four-button "More tools" row becomes a single toggle button at
       the end of the tab strip; .moretools-toggle and #moreToolsPanel
       implement the open/close disclosure it controls. */
    .author-actionbar { display: none; margin: 0; padding: 0; }
    .author-actionbar.open {
      display: flex; flex-direction: column; align-items: stretch;
      max-width: 100%; margin: 0; padding: 6px 12px 10px;
    }
    .author-actionbar::before { display: none; }
    .author-actionbar .btn { width: 100%; text-align: left; }
    .moretools-toggle {
      display: inline-block; padding: 6px 10px; font-size: 13px; white-space: nowrap;
      background: transparent; color: var(--ink-2);
    }
    .moretools-samplerow {
      display: none; gap: 8px; align-items: center; flex-wrap: wrap;
      margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-soft);
    }
    .author-actionbar.open .moretools-samplerow { display: flex; }
    .moretools-samplerow .btn { width: auto; flex: 1 1 auto; }
  }

  .acct-chip { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .acct-chip ~ #signOut { margin-left: 0; }
  .acct-chip .avatar {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    background: var(--ink); color: var(--surface);
    font-size: 13px; font-weight: 600; line-height: 26px; text-align: center;
    text-transform: uppercase; font-family: var(--font-ui);
  }
  .acct-chip .avatar-img {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    object-fit: cover; display: block; background: var(--line);
  }
  .acct-chip .who {
    font-size: 13px; color: var(--ink-2); max-width: 168px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  @media (max-width: 1280px) {
    .topbar { gap: 10px; padding-left: 14px; padding-right: 14px; }
    .topbar .brand small { display: none; }
  }
  @media (min-width: 621px) and (max-width: 1000px) {
    .topbar { flex-wrap: wrap; }
    .topbar .rec, .topbar .signin { white-space: nowrap; }
    .topbar-row2 { display: flex; align-items: center; gap: 10px; order: 5; flex: 1 0 100%; min-width: 0; }
    .topbar-row2 .tabs { flex: 1 1 auto; min-width: 0; margin: 0; }
    .topbar-row2 .tab { margin-bottom: 0; }
  }
  @media (max-width: 860px) { .acct-chip .who { display: none; } }

  a.brand { text-decoration: none; color: inherit; transition: opacity .2s ease; }
  a.brand:hover { opacity: .62; }

  .hidden { display: none !important; }

  .verifybar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--receipt); border: 1px solid var(--line); border-left: 4px solid var(--ink);
    border-radius: var(--r-sm); padding: 14px 18px; margin-bottom: 22px;
    font-size: 13.5px; line-height: 1.45;
    box-shadow: 0 10px 24px -20px var(--shadow-deep);
  }
  .verifybar > div { flex: 1; min-width: 240px; }
  .verifybar strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 16px; }
  .verifybar span { color: var(--ink-2); }
  .verifybar .btn { background: var(--surface); }
  #writeAlarm { border-left-color: var(--rec); margin: 0 18px 12px; }

  /* One quiet line under a shared record (usability review, 26 Sep 2026). */
  .educator-cta { margin: 24px 0 0; font-size: 13px; color: var(--ink-3); }
  .educator-cta a { color: inherit; text-decoration: underline; }
  .vh {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  body.google-import #sharedRail { display: none; }

  .wherebar {
    padding: 12px 18px; border-bottom: 1px solid var(--line-soft);
    font-size: 13px; color: var(--ink-2); line-height: 1.5;
  }
  .wherebar strong { color: var(--ink); font-weight: 600; }
  .trybar {
    padding: 12px 18px; border-top: 1px solid var(--line-soft);
    font-size: 13px; color: var(--ink-2); background: var(--brass-soft);
  }
  .trybar strong { color: var(--ink); }
  #scriptGuardNotice, #sampleBar, #undoBar { border-top: 0; border-bottom: 1px solid var(--line-soft); }
  .planbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px;
    border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
  .planbar .spacer { margin-left: auto; }
  .lic { font-family: var(--font-mono); font-size: 13px; padding: 8px 11px; min-width: 240px;
    background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
  .exacts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 22px 0 0; }
  .letter {
    margin: 18px 0 0; padding: 22px 24px; border: 1px solid var(--line);
    border-radius: var(--r-sm); background: var(--surface); white-space: pre-wrap;
    font-family: var(--font-display); font-size: 14.5px; line-height: 1.65; color: var(--ink); max-width: 74ch;
  }

  @media (max-width: 560px) {
    /* One scrolling row, not a wrapped grid: a wrapped tab strip costs a row
       of height the editor needs below. */
    .tabs { flex-wrap: nowrap; row-gap: 0; margin-left: 0; width: 100%; overflow-x: auto; }
    .tabs.pushed { margin-left: 0; width: 100%; }
    .tab { flex: 0 0 auto; }
    #view-docs .panel-head { flex-wrap: wrap; padding: 16px 14px 12px; }
    #view-docs .panel-head h2 { flex: 1 1 100%; }
    #view-docs .panel-head .spacer { display: none; }
    #view-docs .panel-head #docsAcct { flex: 1 1 100%; min-width: 0; white-space: normal; }
    #view-docs .panel-head .docs-search { flex: 1 1 160px; min-width: 0; }
    #view-docs .panel-head #newDoc { flex: 0 0 auto; width: auto; min-width: 0; }
    #view-replay .panel-head { flex-wrap: wrap; }
    #view-replay .panel-head #replayShareNote { flex: 1 1 100%; min-width: 0; }
    /* "Working document" is an empty mono label once Load sample moves out
       (previous rule); the doc icon and title in .dochead say the same, and
       the tab strip names the panel for assistive tech via aria-labelledby. */
    #view-write .panel-head { display: none; }
    .paperwrap { padding: 8px 12px 22px; }
    /* Two rows, not one sideways scroller. The "Compare with Google Docs"
       link repeats the More tools action (it clicks #tab-sources), so it is
       dropped here. The rest of the toolbar wraps under the title: a control
       a thumb has to scroll into view is one most people never find. */
    .dochead { flex-wrap: wrap; gap: 8px; padding: 8px 10px; overflow-x: visible; }
    .dochead .doctools {
      flex: 1 1 100%; width: 100%; margin: 2px 0 0; flex-wrap: wrap; row-gap: 6px;
    }
    .dochead .doclink { display: none; }
    .doctitle { flex: 1 1 auto; min-width: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .docsaved { flex: 0 0 auto; }
    .editbar { gap: 8px 10px; padding: 10px 12px; }
    .editbar .spacer { display: none; }
    #editor { padding: 24px 18px; min-height: 380px; font-size: 16px; }
    .panel { border-radius: 8px; }
    .ruler { display: none; }
    .trybar { flex-wrap: wrap; gap: 8px; }
    .btn { min-height: 38px; }
    input, textarea, select { font-size: 16px; }
    .brand .name { font-size: 20px; }
    .signals li { padding: 9px 12px; }
    main { padding: 4px 12px 60px; }
  }

  html, body { max-width: 100%; overflow-x: hidden; }
  #manualLinkField {
    flex: 1 1 240px; min-width: 0; font-family: var(--font-mono); font-size: 13px;
    padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
  }

  @media print {
    body { background: #fff !important; color: #000 !important; }
    .topbar, .tabs, .exacts, .panel-head, #view-write, #view-replay,
    #view-docs, #view-sources, #view-plans, .honesty,
    .author-actionbar, .moretools-toggle,
    .verifybar button { display: none !important; }
    #view-exhibit, .panel, .exhibit { display: block !important; border: none !important;
      background: #fff !important; color: #000 !important; box-shadow: none !important; }
    .kv dt, .kv dd, .exhibit h1, .exhibit .sub, .foot, .exsummary, .exsummary * { color: #000 !important; }
    .exsummary { border-color: #000 !important; background: #fff !important; break-inside: avoid; }
    .exsummary .grid { grid-template-columns: 1fr 1fr 1fr; }
    .exhibit { padding: 0 !important; }
    .exhibit .stamp { border-color: #000 !important; color: #000 !important; transform: none; }
    .kv { break-inside: auto; }
    .kv dt, .kv dd { border-bottom-color: #999 !important; padding: 6px 0 !important; font-size: 13px !important; }
    .kv { grid-template-columns: 190px 1fr !important; }
    .kv dt { border-bottom: 1px dotted #999 !important; padding-bottom: 6px !important; }
    .kv dd { padding-top: 6px !important; }
    .exsubhead { break-after: avoid; }
    .discards li { break-inside: avoid; }
    #driftNote { border-left-color: #000 !important; background: #fff !important; }
    @page { margin: 14mm; }
    body:not(.is-exhibit-owner) #view-exhibit,
    body:not(.is-exhibit-owner) .exhibit { display: none !important; }
    body:not(.is-exhibit-owner) #printLock { display: block !important; }
    body.is-exhibit-owner #printLock { display: none !important; }
    /* Printing the class list: everything else steps aside. */
    body.print-class #view-docs { display: block !important; }
    body.print-class #view-exhibit, body.print-class .exhibit, body.print-class #printLock { display: none !important; }
    body.print-class #view-docs .panel > *:not(.educator-tools) { display: none !important; }
    body.print-class .educator-tools > summary, body.print-class #teacherTool { display: none !important; }
    body.print-class .educator-tools { display: block !important; margin: 0; }
    body.print-class #classTool { display: block !important; }
    body.print-class #classTool { border: 0; margin: 0; background: #fff !important; }
    body.print-class #classTool > summary, body.print-class #classTool .ttnote, body.print-class #classTool label, body.print-class #classTool .ttrow { display: none !important; }
    body.print-class #classWrap { border: 0; overflow: visible; }
    body.print-class .classtable { min-width: 0; font-size: 13px; }
    body.print-class .classtable th, body.print-class .classtable td { color: #000 !important; border-color: #999 !important; padding: 5px 6px; }
    body.print-class .classtable .btn { display: none; }
    body.print-class #classWrap, body.print-class .classtable { background: #fff !important; width: 100%; }
    body.print-class .classtable th:nth-child(2), body.print-class .classtable td:nth-child(2) { width: 18%; }
    body.print-class .classtable th:nth-child(3), body.print-class .classtable td:nth-child(3) { width: 26%; }
    body.print-class .classtable th:nth-child(4), body.print-class .classtable td:nth-child(4) { width: 16%; }
    body.print-class .classtable th:nth-child(5), body.print-class .classtable td:nth-child(5) { width: 22%; }
    body.print-class .classtable td.num { white-space: nowrap; }
    body.print-class .classtable th:last-child, body.print-class .classtable td:last-child { display: none; }
    body.print-class::before { content: 'Receipts class review. Facts per record, in the order read. No score, no ranking; a missing or unusual number never counts against a student.'; display: block; font: 13px/1.5 sans-serif; color: #000; margin: 0 0 8px; }
    html { background: #fff !important; }
    /* The deleted passages are the strongest sign of composition; they
       belong on paper even though the other honesty boxes are screen-only. */
    #driftNote { display: block !important; border: 1px solid #000 !important; border-left-width: 3px !important; background: #fff !important; color: #000 !important; break-inside: avoid; }
    #driftNote * { color: #000 !important; }
    /* Screen affordances: the banner, the sample bars and the account strip
       mean nothing on paper. */
    .verifybar, #verifyBanner, .trybar, .educator-cta, #threeMinute, .observation-nav, .obsindex { display: none !important; }
  }
  #printLock { display: none; }
  /* A document started from a school's class or assignment link shows no
     purchase anywhere on the writer's screens (usability review, 26 Sep 2026;
     body.class-doc is set by assignment.js's paintClassMode): no Plans in More
     tools, no plan card or licence box in My records, no Premium links on the
     older-records list, no checkout buttons, and no licence line in the
     first-run guide. They return on a document without a class code. */
  body.class-doc #planTab, body.class-doc #planBar, body.class-doc #planNote,
  body.class-doc #view-plans, body.class-doc [data-appcheckout],
  body.class-doc #remindPlans, body.class-doc #hiddenPlans,
  body.class-doc #guideCard > span:nth-of-type(4),
  body.class-doc .paid-copy { display: none !important; }
  .class-copy { display: none; }
  body.class-doc .class-copy { display: inline; }

  /* ---------- documents ---------- */
  .doclist { display: grid; }
  .docrow {
    display: grid; grid-template-columns: 1fr auto auto auto; gap: 18px; align-items: center;
    padding: 18px 24px; border-bottom: 1px solid var(--line-soft); cursor: pointer;
    background: none; border-left: none; border-right: none; border-top: none;
    width: 100%; text-align: left; font-family: inherit; color: inherit;
    transition: background .12s ease;
  }
  .docrow:hover { background: var(--brass-soft); }
  .docrow:last-child { border-bottom: none; }
  .docrow .t { font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: 0; }
  .docrow .t em { display: block; font-family: var(--font-ui); font-style: normal; font-size: 13px; color: var(--ink-3); margin-top: 4px; font-weight: 400; letter-spacing: 0; }
  .docrow .meta { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .docrow .dep {
    font-family: var(--font-mono); font-size: 14px; white-space: nowrap;
    display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
    min-width: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm);
    font-variant-numeric: tabular-nums; background: var(--receipt);
  }
  .docrow .dep::after { content: 'record'; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
  .contbtn {
    font-family: var(--font-ui); font-size: 13px; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--ink); border-radius: var(--r-sm); padding: 7px 14px; color: var(--ink);
  }
  .docrow:hover .contbtn { background: var(--ink); color: var(--surface); }
  .keepchip {
    font-family: var(--font-mono); font-size: 13px; white-space: nowrap;
    padding: 5px 9px; border-radius: 3px; border: 1px solid var(--line); color: var(--ink-3); background: var(--surface);
  }
  .keepchip.expiring { border-color: var(--flag); color: var(--flag) !important; font-weight: 600; }
  .plancard {
    margin: 22px 24px 20px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--receipt); padding: 16px 18px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  }
  .plancard .plmeta { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
  .plancard .plmeta .acct { letter-spacing: .16em; }
  .plancard .plmeta strong { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
  .plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .plan-actions > summary { cursor: pointer; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); font: 600 13px/1.2 var(--font-ui); list-style: none; }
  .plan-actions > summary::-webkit-details-marker { display: none; }
  .plan-actions[open] > summary { color: var(--ink); background: var(--surface); }
  .plremind { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
  .licnote { flex-basis: 100%; margin: 6px 0 0; font-size: 13px; line-height: 1.5; max-width: 66ch; }
  .licnote.ok  { color: var(--good); }
  .licnote.err { color: var(--flag); }
  .plremind a { color: var(--ink); font-weight: 600; }
  .docempty { padding: 48px 20px; text-align: center; color: var(--ink-3); font-size: 14px; }
  .docempty strong { font-family: var(--font-display); font-weight: 600; }
  .docnote { padding: 16px 24px; margin: 0; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line-soft); }
  .docnote.err { color: var(--flag); }
  .acct { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .expiring { color: var(--flag) !important; }

  /* ---------- plans ---------- */
  #view-plans .panel > div[style*="grid"] > div { background: var(--surface); }
  #view-plans .panel > div[style*="grid"] > div[style*="2px solid"] { background: var(--receipt); }
  #view-plans .btn[data-appcheckout], #view-plans a.btn { text-decoration: none; display: inline-block; }

  /* ---------- corroborate ---------- */
  .srcintro { padding: 20px 24px 4px; }
  .srcintro p { margin: 0 0 10px; max-width: 62ch; font-family: var(--font-display); font-size: 22px; line-height: 1.3; font-weight: 600; }
  .srcintro p.muted { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
  .gstatus { padding: 4px 24px 20px; font-size: 13.5px; color: var(--ink-2); max-width: 74ch; }
  .gstatus code {
    font-family: var(--font-mono); font-size: 13px; background: var(--brass-soft);
    padding: 1px 5px; border-radius: 2px; color: var(--ink);
  }
  .gstatus ol { padding-left: 20px; margin: 9px 0 0; }
  .gstatus li { margin-bottom: 6px; }
  .comparisonbar {
    margin: 0 24px 16px; padding: 14px 18px; border-radius: var(--r-sm);
    border: 1px solid var(--line); border-left-width: 3px; background: var(--surface);
    font-family: var(--font-display); font-size: 19px; font-weight: 600;
  }
  .comparisonbar small {
    display: block; font-family: var(--font-ui); font-size: 13px;
    color: var(--ink-2); margin-top: 5px; line-height: 1.5; font-weight: 400;
  }
  #view-sources .kv { margin: 0 24px 22px; }

  #saveState { color: var(--ink-3); }
  #saveState.err { color: var(--rec); font-weight: 700; }
  #shareNote { color: var(--ink-3); }
  #shareNote.err { color: var(--flag); }
  .demorow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .demorow .lbl, .lbl {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-3);
  }

  /* ---------- provenance, sittings, older records ---------- */
  .provwrap { padding: 0 16px 8px; }
  .provcap { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; }
  .provcap span { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); line-height: 1.5; }
  .provenance {
    background: var(--paper); margin: 10px auto 0; padding: 30px 40px; border-radius: 2px;
    max-width: 780px; border: 1px solid var(--sheet-edge);
    font-family: var(--font-display); font-size: 15.5px; line-height: 1.8;
    white-space: pre-wrap; word-wrap: break-word; max-height: 480px; overflow: auto;
    box-shadow: 0 1px 2px var(--shadow), 0 12px 28px -16px var(--shadow-deep);
  }
  @media (max-width: 720px) { .provenance { padding: 20px 18px; } }
  .provenance .muted, .discards .muted { color: var(--ink-3); font-family: var(--font-ui); font-size: 13px; }
  .pv { cursor: pointer; border-radius: 2px; }
  .pv:hover, .pv:focus-visible { outline: 1px solid var(--ink-3); outline-offset: 1px; }
  /* The same vocabulary as the timeline marks: pasted shaded with a solid
     underline, arrived some other way boxed, touch keyboard dotted, from a
     Google Doc underlined in --tl-doc. No --flag here: this view is open by
     default on the writer's own replay too. */
  .pv-clipboard { background: var(--brass-soft); border-bottom: 2px solid var(--ink-2); }
  .pv-unattributed { box-shadow: inset 0 0 0 1px var(--ink-2); }
  .pv-touch { border-bottom: 2px dotted var(--ink-2); }
  .pv-replacement { border-bottom: 1px dashed var(--ink-2); }
  .pv-history { opacity: .7; border-bottom: 1px dotted var(--ink-3); }
  .pv-snapshot { border-bottom: 2px solid var(--tl-doc); }
  .provlegend { margin: 10px auto 0; max-width: 780px; }
  .provlegend i.pv { width: auto; height: auto; font-family: var(--font-display); font-style: normal; font-size: 13px; padding: 0 2px; }
  .sittings { display: grid; gap: 4px; margin: 14px 44px 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }
  @media (max-width: 560px) { .sittings { margin: 14px 0 0; } }
  .sittings .cap { margin-bottom: 2px; }
  .sittings .sit { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px dotted var(--line-2); }
  .sittings .sit[data-t] { cursor: pointer; }
  .sittings .sit[data-t]:hover .sitwhen { text-decoration: underline; }
  .sittings .sitn { color: var(--ink-3); }
  .sittings .sitlen { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sittings .sitgap { color: var(--ink-3); white-space: nowrap; }
  @media (max-width: 620px) { .sittings .sit { grid-template-columns: 22px minmax(0, 1fr); } .sittings .sitgap { grid-column: 2; } }
  .lbl.skiplbl { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); text-transform: none; letter-spacing: 0; cursor: pointer; }
  .discards { list-style: none; margin: 8px 0 0; padding: 0; }
  .discards li { padding: 7px 0; border-top: 1px dotted var(--line-2); font-family: var(--font-display); font-size: 14.5px; line-height: 1.5; }
  .discards li .t { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); margin-right: 10px; }
  .docgroup { margin-top: 12px; border-top: 1px solid var(--line); }
  .docgroup summary { cursor: pointer; padding: 14px 24px; font-size: 13px; color: var(--ink-2); }
  .docgroup summary strong { color: var(--ink); font-family: var(--font-display); font-size: 15px; }
  .docrowwrap { display: flex; align-items: stretch; }
  .docrowwrap .docrow { flex: 1; min-width: 0; }
  .doc-overflow { position: relative; flex: none; border-bottom: 1px solid var(--line-soft); }
  .doc-overflow > summary { list-style: none; cursor: pointer; height: 100%; min-width: 48px; display: grid; place-items: center; padding: 0 12px; color: var(--ink-3); font: 600 18px/1 var(--font-ui); }
  .doc-overflow > summary::-webkit-details-marker { display: none; }
  .doc-overflow > summary:hover, .doc-overflow[open] > summary { color: var(--ink); background: var(--brass-soft); }
  .doc-overflow-menu { position: absolute; z-index: 4; right: 8px; top: calc(100% - 1px); min-width: 170px; display: grid; padding: 5px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); box-shadow: 0 10px 24px -16px var(--shadow-deep); }
  .docrowwrap .dlrow { border: 0; background: none; color: var(--ink-2); font-family: var(--font-ui); font-size: 13px; text-align: left; padding: 9px 10px; cursor: pointer; }
  .docrowwrap .dlrow:hover { color: var(--ink); background: var(--brass-soft); }
  .docs-tools { margin: 0 24px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--receipt); }
  .docs-tools > summary { cursor: pointer; padding: 10px 13px; color: var(--ink-2); font: 600 13px/1.2 var(--font-ui); }
  .docs-tools[open] > summary { border-bottom: 1px solid var(--line); color: var(--ink); }
  .docs-tools-body { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; align-items: center; }
  .docs-tools-body .btn { margin: 0; }
  .docs-search { flex: 0 1 260px; min-width: 130px; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: 14px var(--font-ui); }
  .docs-search:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
  .docrowwrap.is-search-hidden { display: none; }
  .docgroup.search-empty { display: none; }
  .docrow.older { opacity: .85; }
  .educator-tools { margin: 12px 24px 4px; }
  .educator-tools > summary { cursor: pointer; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--receipt); color: var(--ink-2); font: 600 13.5px/1.2 var(--font-ui); }
  .educator-tools[open] > summary { color: var(--ink); border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .educator-tools .teachertool { margin: 0; border-radius: 0; border-top: 0; }
  .educator-tools .teachertool:last-child { border-radius: 0 0 var(--r-sm) var(--r-sm); }
  .docs-search-status { padding: 12px 24px; margin: 0; color: var(--ink-3); font-size: 13px; }
  /* ---------- three-minute read, event index, assignments ---------- */
  .threeminute {
    background: var(--receipt); border: 1px solid var(--line); border-left: 4px solid var(--ink);
    border-radius: var(--r-sm); padding: 20px 24px 18px; margin-bottom: 22px;
    box-shadow: 0 10px 24px -20px var(--shadow-deep);
  }
  .threeminute .kick { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
  .threeminute h3 { font-family: var(--font-display); font-size: 23px; font-weight: 600; margin: 6px 0 14px; line-height: 1.2; }
  .threeminute .asg, .exsummary .exasg, .threeminute .step p, .exsummary .step p { overflow-wrap: anywhere; }
  .threeminute .asg { font-size: 13px; color: var(--ink-2); margin: -6px 0 14px; padding: 8px 12px; border: 1px dashed var(--line-2); border-radius: 4px; background: var(--surface); }
  .threeminute .grid { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .threeminute .step .n { font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
  .threeminute .step p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
  .threeminute .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
  .threeminute .limit { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; line-height: 1.5; }
  .handin { margin: 0 18px 14px; padding: 12px 16px 10px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--receipt); }
  .handin .cap { font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
  .handin ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
  .handin li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--ink-2); }
  .handin li .box { flex: none; width: 12px; height: 12px; border: 1px solid var(--ink-3); border-radius: 2px; transform: translateY(1px); }
  .handin li.done { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
  .handin li.done .box { background: var(--ink); border-color: var(--ink); }
  .handin .hinote { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
  .receipttoggle { display: inline-block; margin: 10px auto 0; font-size: 13px; padding: 6px 12px; }
  aside.panel.collapsed .sparkwrap, aside.panel.collapsed .signals, #sharedRail.collapsed .sparkwrap, #sharedRail.collapsed .signals { display: none; }
  .exsummary { margin: 0 0 8px; padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: var(--r-sm); background: var(--receipt); }
  .exsummary:empty { display: none; }
  .exsummary .kick { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
  .exsummary .exasg { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
  .exsummary .grid { display: grid; gap: 12px 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .exsummary .step .n { font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
  .exsummary .step p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
  .exsummary .limit { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; line-height: 1.5; }
  .obsindex { margin: 6px 16px 10px; }
  .obsindex summary { cursor: pointer; font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 6px 0; }
  .obsindex summary:hover { color: var(--ink); }
  .obsindex ol { list-style: none; margin: 6px 0 0; padding: 0; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--receipt); }
  .obsindex li button { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px dotted var(--line-2); padding: 8px 12px; font: 13px/1.4 var(--font-ui); color: var(--ink-2); cursor: pointer; display: flex; gap: 12px; align-items: baseline; }
  .obsindex li:last-child button { border-bottom: 0; }
  .obsindex li button .t { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); min-width: 44px; font-variant-numeric: tabular-nums; }
  .obsindex li button:hover, .obsindex li button[aria-current="true"] { background: var(--brass-soft); color: var(--ink); }
  .obsindex .more { padding: 8px 12px; font-size: 13px; color: var(--ink-3); }
  .asgrow { padding: 0 18px 10px; background: var(--surface); }
  .asgchip { display: inline-block; font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; color: var(--ink-2); background: var(--receipt); max-width: 100%; overflow-wrap: anywhere; }
  .teachertool { margin: 12px 24px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--receipt); }
  .teachertool summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 13.5px; color: var(--ink); }
  .teachertool .tt { padding: 0 16px 16px; display: grid; gap: 10px; }
  .teachertool .ttnote { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
  .teachertool label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
  .teachertool input { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); min-width: 0; }
  #asgOut { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  #asgLink { flex: 1 1 260px; min-width: 0; }
  .pv:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
  .teachertool textarea { font: 13px/1.5 var(--font-mono); padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); resize: vertical; min-width: 0; }
  .ttrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .classwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
  .classtable { border-collapse: collapse; width: 100%; min-width: 880px; font-size: 13px; }
  .classtable th { text-align: left; font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 9px 10px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
  .classtable td { padding: 9px 10px; border-bottom: 1px dotted var(--line-2); vertical-align: top; color: var(--ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .classtable tr:last-child td { border-bottom: 0; }
  .classtable td.num { font-family: var(--font-mono); white-space: nowrap; color: var(--ink); }
  .classtable td.recd { color: var(--ink); max-width: 260px; }
  .classtable td.err { color: var(--flag); }
  /* The order note prints once, under the whole list, where it applies. */
  .classorder { margin: 0; padding: 9px 10px; font-size: 13px; color: var(--ink-3); border-top: 1px dotted var(--line-2); }
  /* The level word is in the text of the cell, so the colour is a second
     signal and never the only one. */
  .classtable td.fu { color: var(--ink); font-weight: 600; max-width: 220px; }
  .classtable td.fu-red { color: #7A1F2B; }
  .classtable td.fu-amber { color: var(--flag); }
  .classtable td.fu-yellow { color: #8C6C14; }
  /* #8C6C14 holds 4.5:1 or better on the light paper/surface; the dark
     theme needs its own lighter gold to clear the same 4.5:1 floor there. */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .classtable td.fu-yellow { color: #C2951B; } }
  :root[data-theme="dark"] .classtable td.fu-yellow { color: #C2951B; }
  .classtable td.fu-green { color: #2F6B3A; }
  .classtable td.fu-none { color: var(--ink-3); font-weight: 500; }
  .classtable .btn { padding: 5px 10px; font-size: 13px; }
  .keepchip.statechip { border-style: dashed; cursor: help; }
  .docrowwrap .unlinkrow { border-left: 1px solid var(--line-soft); }

  /* Teacher presentation model: calm facts first, then optional record detail. */
  .teacher-summary, .teacher-details { max-width: 1060px; margin: 0 auto; }
  .handin-page { max-width: 960px; margin: 0 auto; }
  .summary-card, .handin-page { padding: clamp(24px, 4vw, 44px); }
  .summary-kicker { font: 600 13px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
  .summary-card h2, .handin-page h2 { margin: 7px 0 5px; font: 600 clamp(28px,4vw,40px)/1.08 var(--font-display); letter-spacing: -.02em; }
  .summary-card h3 { margin: 30px 0 12px; font: 600 20px/1.25 var(--font-ui); letter-spacing: -.015em; }
  .summary-scope, .summary-next, .section-note, .summary-assignment { max-width: 72ch; color: var(--ink-2); }
  .summary-assignment { margin: 10px 0 0; font-weight: 600; }
  .fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
  .fact-card { min-width: 0; padding: 22px 20px; border-right: 1px solid var(--line); background: var(--receipt); overflow-wrap: anywhere; }
  .fact-card:first-child { padding-left: 0; }
  .fact-card:last-child { border-right: 0; }
  .fact-card strong { display: block; margin-bottom: 18px; font: 600 15px/1.25 var(--font-ui); }
  .fact-card span { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
  .fact-value { display: block; margin: 2px 0 6px; font: 550 clamp(24px, 3vw, 34px)/1.1 var(--font-ui); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .fact-context, .fact-empty { margin: 14px 0 0; color: var(--ink-2); font: 14px/1.55 var(--font-ui); }
  .fact-routes { margin: 0 0 12px; }
  .fact-routes > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; }
  .fact-routes dt { font: 14px/1.4 var(--font-ui); color: var(--ink-2); }
  .fact-routes dd { margin: 0; font: 500 24px/1.1 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .fact-more { margin-top: 14px; color: var(--ink-2); font-size: 13px; }
  .fact-more summary, .moment-question summary { cursor: pointer; width: fit-content; text-underline-offset: 3px; }
  .fact-more summary:hover, .moment-question summary:hover { text-decoration: underline; }
  .fact-more p { line-height: 1.5; }
  .moment-list, .replay-moments { display: grid; border-top: 1px solid var(--line); }
  .moment-card { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); background: var(--surface); }
  .moment-time { font: 500 14px/1.2 var(--font-mono); color: var(--ink-2); padding: 6px 0; white-space: nowrap; }
  .moment-copy strong, .moment-copy span { display: block; }
  .moment-copy strong { font: 600 16px/1.3 var(--font-ui); }
  .moment-copy span { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
  .moment-copy .moment-limit { font-size: 13px; color: var(--ink-3); }
  .moment-copy .moment-kind { display: inline-block; margin: 0 0 8px; padding: 3px 7px; border-radius: 3px; font: 600 13px/1.3 var(--font-ui); }
  .moment-kind.input { color: #244b70; background: #eaf1f8; }
  .moment-kind.revision { color: #5e4375; background: #f0eaf5; }
  .moment-kind.coverage { color: #4b4f55; background: #eceef0; }
  .moment-question { margin-top: 9px; font-size: 13px; color: var(--ink-2); }
  .moment-question p { margin: 8px 0 0; line-height: 1.5; }
  .summary-document { margin-top: 28px; padding: 22px 24px; border-left: 2px solid var(--line-2); background: var(--paper); }
  .summary-document h3, .summary-document h4 { margin: 0 0 12px; font: 600 14px/1.2 var(--font-ui); }
  .document-excerpt { margin: 0; font: 17px/1.65 var(--font-display); white-space: pre-wrap; overflow-wrap: anywhere; }
  #summaryReview, #summaryFinal.summary-primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  #summaryReview[hidden], #summaryFinal[hidden], #summaryReplay[hidden],
  #summaryLevel[hidden], #summaryPath[hidden] { display: none !important; }
  #summaryMomentsHeading { scroll-margin-top: 100px; }
  .summary-secondary { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
  .summary-details { margin-top: 16px; padding: 0; overflow: hidden; }
  .summary-details > summary, .recorddetails > summary, .handin-help > summary { cursor: pointer; padding: 15px 18px; font: 600 14px/1.2 var(--font-ui); }
  .summary-details[open] > summary, .recorddetails[open] > summary { border-bottom: 1px solid var(--line); }
  .limitations { padding: 16px 18px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
  .summary-details #sharedRail { margin: 0 !important; border: 0; border-radius: 0; box-shadow: none; }
  .teacher-details .panel { overflow: hidden; }
  .teacher-details-head { padding: 28px 28px 18px; border-bottom: 1px solid var(--line); }
  .teacher-details-head h2 { margin: 7px 0 6px; font: 600 clamp(26px,4vw,38px)/1.08 var(--font-display); }
  .teacher-details #sharedRail { margin: 0 !important; border: 0; border-radius: 0; box-shadow: none; }
  .summary-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
  .handin-note { display: grid; gap: 7px; margin-top: 20px; font-size: 13px; color: var(--ink-2); }
  .handin-note textarea { width: 100%; min-height: 88px; box-sizing: border-box; resize: vertical; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: 14px/1.5 var(--font-ui); }
  .handin-note-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
  .shared-presentation #topSignIn, .shared-presentation #themeBtn, .shared-presentation #acctChip, .shared-presentation #signOut, .shared-presentation .author-primary, .shared-presentation .author-secondary { display: none !important; }
  .shared-presentation .moretools-toggle { display: none !important; }
  .shared-presentation #tab-docs { display: none !important; }
  .shared-presentation .shared-only:not(.hidden) { display: block !important; }
  .shared-presentation #tab-exhibit:not(.hidden) { display: block !important; }
  .shared-presentation #tab-replay:not(.hidden) { display: block !important; }
  .shared-presentation #letterBtn { display: none !important; }
  .shared-presentation #view-replay > #threeMinute { display: none !important; }
  .shared-presentation #view-replay > .panel > .sparkwrap { display: none; }
  .shared-presentation #sharedRail .sparkwrap { display: none; }
  .replay-moments { margin: 14px 18px 0; }
  .replay-workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 24px; padding: 28px; align-items: start; }
  .replay-context { grid-column: 1 / -1; scroll-margin-top: 88px; }
  .replay-main { min-width: 0; }
  .replay-context .final-document-label { max-width: none; margin: 0 0 8px; font: 600 16px/1.2 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink); }
  .replay-main .replaydoc { width: 100%; max-width: none; margin: 0; min-height: 360px; max-height: 540px; padding: 30px; overflow: auto; }
  .replay-main .scrub { margin: 16px 0 0; padding: 0; background: transparent; border-top: 0; }
  .replay-context #replayObservation { max-width: 88ch; margin: 0; padding: 0; border: 0; font: 14px/1.5 var(--font-ui); color: var(--ink-2); background: transparent; }
  .replay-main .observation-nav { margin: 2px 0 0; padding: 0; gap: 10px; }
  .replay-main .obsindex { margin: 18px 0 0; }
  /* The provenance view sits under the scrubber, open by default. */
  .replay-main .provwrap { margin: 20px 0 0; padding: 0; }
  .replay-main .provenance { max-width: none; }
  .replay-main .provlegend { max-width: none; margin: 10px 0 0; }
  .replay-review { min-width: 0; padding: 20px; background: var(--receipt); border: 1px solid var(--sheet-edge); border-radius: 2px; }
  .replay-review h3 { margin: 0 0 16px; font: 600 18px/1.25 var(--font-ui); }
  .replay-review .replay-moments { margin: 0; }
  .replay-review .moment-card { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; background: transparent; }
  .replay-review .moment-card:last-child { padding-bottom: 0; border-bottom: 0; }
  .replay-review .moment-card > .btn { grid-column: 2; justify-self: start; }
  .replay-review .moment-copy strong { font-size: 15px; }
  @media (max-width: 960px) { .replay-workspace { grid-template-columns: 1fr; gap: 24px; padding: 20px 16px; } .replay-main .replaydoc { min-height: 280px; max-height: 420px; padding: 22px; } }
  .final-document-label { max-width: 760px; margin: 22px auto -17px; font: 600 13px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .recorddetails { margin: 22px 24px 24px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
  .recorddetails-body { padding: 0 0 18px; }
  .handin-steps { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 10px; counter-reset: handin; }
  .handin-steps li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 16px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--receipt); }
  .handin-steps strong { font: 600 17px/1.2 var(--font-display); }
  .handin-steps span { grid-column: 1; font-size: 13px; color: var(--ink-2); }
  .handin-steps .btn { grid-column: 2; grid-row: 1 / span 2; }
  .handin-step-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
  .handin-step-actions .btn { grid-column: auto; grid-row: auto; }
  .teacher-preview { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--brass-soft); }
  .teacher-preview h3 { margin: 0 0 12px; font: 600 20px/1.2 var(--font-ui); }
  .teacher-preview .moment-card { grid-template-columns: 62px minmax(0, 1fr); }
  .exAppendix { margin-top: 24px; border-top: 1px solid var(--line); }
  .exAppendix > summary { cursor: pointer; padding: 16px 0; font: 600 15px/1.2 var(--font-ui); }
  .exAppendix .exsubhead, .exAppendix .kv, .exAppendix .honesty, .exAppendix .exacts, .exAppendix .foot { margin-left: 0; margin-right: 0; }
  /* ============================================================
     THE TEACHER SUMMARY AS A READING PAGE

     A proof link opens here, so this page has to read in one look and in
     the same voice as the home page: one column at the same measure, wide
     margins, big quiet type, thin rules, and no boxes inside boxes. The
     follow-up band is the only loud thing on the page; everything else is
     ink on the desk.

     Every rule below is scoped to #view-summary (or to .shared-presentation
     for the header) so the printed record, the hand-in preview and the home
     page's sample card keep the presentation the shared renderer gives them.
     ============================================================ */

  /* The tab strip becomes a quiet text row under the top bar rather than a
     cluster hanging off the right of the wordmark. */
  .shared-presentation .topbar { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
  .shared-presentation .topbar-row2 {
    display: flex; align-items: center; order: 5;
    flex: 1 0 100%; width: 100%; min-width: 0; margin: 2px 0 0;
  }
  .shared-presentation .topbar-row2 .tabs { flex: 1 1 auto; min-width: 0; margin-left: 0; }
  .shared-presentation .tab { margin-bottom: 0; padding: 10px 18px 9px; }
  .shared-presentation #tab-summary { padding-left: 0; }
  /* On a phone the four shared tabs are wider than the screen, so the row
     wraps: off the right edge, with no scrollbar, "Print record" could not
     be reached at all. */
  @media (max-width: 620px) {
    .shared-presentation .topbar-row2 .tabs {
      flex-wrap: wrap; row-gap: 0; overflow-x: visible; width: 100%;
    }
    .shared-presentation .tab { padding: 8px 14px 7px; }
    .shared-presentation #tab-summary { padding-left: 0; }
  }

  /* One reading column, one background, 96px of air over the first line. */
  #view-summary.teacher-summary { max-width: none; margin: 0; }
  #view-summary .summary-card {
    max-width: 760px; margin: 0 auto; padding: 16px 0 96px;
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
  }
  .shared-presentation .verifybar {
    max-width: 760px; margin: 24px auto 0; padding: 0;
    border: 0; border-radius: 0;
    background: transparent; box-shadow: none; align-items: flex-start;
  }
  .shared-presentation .verifybar strong { font-size: 15px; margin-bottom: 3px; }
  .shared-presentation .verifybar span { font-size: 13px; }
  .shared-presentation .verifybar .btn { background: transparent; }

  /* On a record that opened, the banner is one 13px line: its opening notice
     and, at the right, the one button it still owns. Every other sentence
     reads in "About this record" at the foot of the Summary. A failure
     banner never gets this class, so it keeps its full text. */
  .shared-presentation .verifybar-compact {
    align-items: baseline; gap: 4px 18px; margin-top: 24px;
  }
  .shared-presentation .verifybar-compact .verifybar-line {
    flex: 1 1 auto; min-width: 0;
  }
  .shared-presentation .verifybar-compact strong {
    display: inline; margin: 0;
    font: 500 13px/1.5 var(--font-ui); letter-spacing: 0; color: var(--ink-2);
  }
  .shared-presentation .verifybar-compact .btn {
    flex: 0 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent;
    font: 500 13px/1.5 var(--font-ui); color: var(--ink-2);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .shared-presentation .verifybar-compact .btn:hover { color: var(--ink); }
  /* Nothing left to say above the kicker, so the line does not take space. */
  .shared-presentation .verifybar.verifybar-empty { display: none !important; }
  #verifyBanner.hidden ~ #view-summary .summary-card,
  #verifyBanner.verifybar-empty ~ #view-summary .summary-card { padding-top: 60px; }

  /* 1 and 2: the kicker line carries the record's own status at its right,
     then the title in the home page's display face. */
  #view-summary .summary-kickline {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
  }
  #view-summary .summary-assignment {
    margin: 0; flex: 0 1 auto; text-align: right;
    font: 500 13px/1.3 var(--font-mono); letter-spacing: .06em; color: var(--ink-3);
  }
  /* The document's own title is the title of "The receipt" section, and
     its sentence reads inside "About this record" with the banner's other
     sentences. */

  /* The receipt loses its own card and becomes the page: full-width band,
     full-width follow-up list, then the two groups as two columns. Its own
     RECEIPT kicker would repeat the title one line above it, so it is hidden. */
  #view-summary .summary-receipt { margin-top: 34px; }
  #view-summary .prc-head { display: none; }
  #view-summary .prc {
    margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px;
  }
  #view-summary .prc > * { grid-column: 1 / -1; }
  #view-summary .prc-head {
    padding: 0 0 12px; border-bottom: 0; gap: 16px; align-items: baseline;
  }
  #view-summary .prc-mark {
    font: 600 13px/1.2 var(--font-mono); letter-spacing: .18em; color: var(--ink-3);
  }
  #view-summary .prc-doc {
    flex: 1 1 auto; min-width: 0; text-align: right; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* 4: the band is the hero. Same four colours, more air. */
  #view-summary .prc-band {
    min-height: 72px; display: flex; flex-direction: column; justify-content: center;
    padding: 14px 22px; border-bottom: 0; border-radius: 3px;
  }
  #view-summary .prc-bword { font-size: 22px; letter-spacing: .03em; }
  #view-summary .prc-blabel { font-size: 16px; }
  #view-summary .prc-bnote { font-size: 14px; margin-top: 6px; }
  #view-summary .prc-band .prc-i { align-self: center; }
  #view-summary .prc-band .prc-why { font-size: 13px; }

  /* 5: the follow-up list, one line per item, no border of its own. */
  #view-summary .prc-follow { margin-top: 24px; padding: 0; border-bottom: 0; }
  #view-summary .prc-fhead {
    margin: 0 0 6px; font: 600 13px/1.2 var(--font-mono);
    letter-spacing: .14em; color: var(--ink-3);
  }
  #view-summary .prc-fitem {
    align-items: center; gap: 14px; padding: 12px 0;
    border-top: 1px solid var(--line); flex-wrap: nowrap;
  }
  #view-summary .prc-ftext { font-size: 16px; }
  #view-summary .prc-fopen, .quiet-moments .moment-card > .btn {
    padding: 6px 15px; border-radius: 999px; border-color: var(--line);
    background: transparent; font-size: 13px; font-weight: 500; color: var(--ink-2);
  }
  #view-summary .prc-fopen:hover, .quiet-moments .moment-card > .btn:hover {
    border-color: var(--ink); color: var(--ink);
  }

  /* 6: the two groups side by side. Each opens on one header line, the group
     name at the left and its chip at the right, with the single "i" that
     explains the count after it. The hint sentence reads inside that
     sentence (dressSummaryReceipt), so both columns start their rows on the
     same line. */
  #view-summary .prc-group {
    grid-column: auto; align-self: start;
    margin-top: 0; padding: 0; border-bottom: 0;
  }
  #view-summary .prc-ghead { position: relative; padding: 0 22px 0 0; }
  #view-summary .prc-ghead > .prc-gline > .prc-i { position: absolute; top: 1px; right: 0; }
  #view-summary .prc-gline {
    display: flex; align-items: center; flex-wrap: wrap;
    row-gap: 10px; column-gap: 12px;
  }
  /* The name holds its line whatever the chip beside it says: a chip too wide
     for the column drops to a second line at the right rather than breaking
     the name in half. The two heads share their height through the subgrid
     below, so both lists still start on the same line. */
  #view-summary .prc-kicker {
    flex: 0 0 auto; white-space: nowrap;
    font: 600 13px/1.3 var(--font-mono); letter-spacing: .1em;
  }
  #view-summary .prc-level { flex: 0 0 auto; margin-left: auto; padding: 2px 9px; }
  #view-summary .prc-ghead .prc-why { margin: 10px 0 0; padding-right: 0; }
  #view-summary .prc-hint { display: none; }
  #view-summary .prc-group .prc-rows { margin-top: 18px; border-top: 1px solid var(--ink); }
  /* A row is a two-column line: the label at the left, the value at the
     right, a hairline between rows and nothing around the group. The whole
     row is the control that opens its sentence, so the "i" at the far right
     is a mark rather than a button people have to aim at. */
  #view-summary .prc-group .prc-row {
    position: relative; padding: 12px 22px 12px 0;
    border-top: 1px solid var(--line); cursor: help;
  }
  #view-summary .prc-group .prc-row:first-child { border-top: 0; }
  #view-summary .prc-group .prc-row:not(.prc-flag):hover { background: var(--surface); }
  #view-summary .prc-group .prc-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  #view-summary .prc-group .prc-row > .prc-line > .prc-i { position: absolute; top: 12px; right: 0; }
  #view-summary .prc-group .prc-line { flex-wrap: wrap; row-gap: 4px; }
  #view-summary .prc-group .prc-label { color: var(--ink-2); }
  #view-summary .prc-group .prc-value {
    margin-left: auto; text-align: right; color: var(--ink);
    font-weight: 600; font-variant-numeric: tabular-nums;
  }
  /* A row in the closer-look column that carries nothing steps back, so the
     rows that carry something are what the eye finds first. */
  #view-summary .prc-group .prc-row.prc-nil .prc-label,
  #view-summary .prc-group .prc-row.prc-nil .prc-value { color: var(--ink-3); }
  #view-summary .prc-line { gap: 12px; }
  #view-summary .prc-label, #view-summary .prc-value { font-size: 15px; }
  /* A value that carries a moment prints as itself, with a small "Open"
     beside it rather than the whole value inside a pill. */
  #view-summary .prc-seekval { font-weight: 600; font-variant-numeric: tabular-nums; }
  #view-summary .prc-seek.prc-seeklink {
    margin-left: 9px; padding: 0; border: 0; border-radius: 0; background: transparent;
    font: 500 13px/1.4 var(--font-ui); color: var(--ink-3);
    text-decoration: underline; text-underline-offset: 3px;
  }
  #view-summary .prc-seek.prc-seeklink:hover { color: var(--ink); }
  /* "Open" is 33x18 at 390px: wide enough, 14px short. No border or
     background is painted here, so vertical padding alone grows the click
     box without changing how the underlined word itself looks. */
  @media (max-width: 420px) { #view-summary .prc-seek.prc-seeklink { padding: 7px 0; } }
  /* Inside the receipt the (i) becomes a mark, not a target: one small letter
     in the quiet ink that comes forward when the row it belongs to is under
     the pointer. The headline above keeps the circle it was given. */
  #view-summary .prc-group .prc-i, #view-summary .prc-close .prc-i {
    width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%;
    background: transparent; color: var(--ink-3);
    font: 600 11px/16px var(--font-mono); text-align: center; padding: 0;
  }
  #view-summary .prc-group .prc-row:hover .prc-i,
  #view-summary .prc-group .prc-i:hover, #view-summary .prc-group .prc-i:focus-visible,
  #view-summary .prc-close .prc-i:hover, #view-summary .prc-close .prc-i:focus-visible {
    color: var(--ink); border-color: var(--ink);
  }
  /* That 18px circle with an 11px glyph fits a dense desktop list read by a
     hovering pointer. On a phone, read by a finger, the glyph is below the
     site's 13px floor. Below 620px it returns to 13px, and the button
     returns to the 22px it has everywhere else in the receipt, rather than
     growing a font inside an 18px circle. */
  @media (max-width: 620px) {
    #view-summary .prc-group .prc-i, #view-summary .prc-close .prc-i {
      width: 22px; height: 22px; font-size: 13px; line-height: 20px;
    }
  }
  #view-summary .prc-why { padding-right: 22px; }
  /* 22px is still short of the 32x32 a finger needs. Below 420px every
     (i) in the receipt -- dense-row, group-head and band-level alike --
     grows to 32; .prc-why's own reserved edge grows to match so the
     bigger circle never sits over the disclosure text under it. */
  @media (max-width: 420px) {
    .prc-i { width: 32px; height: 32px; font-size: 13px; line-height: 30px; }
    #view-summary .prc-group .prc-i, #view-summary .prc-close .prc-i {
      width: 32px; height: 32px; font-size: 13px; line-height: 30px;
    }
    #view-summary .prc-why { padding-right: 32px; }
  }

  /* 7: the two closing rows read as one line, with the last sentence under
     it. Both "none" carry the weight, because that is the finding. */
  #view-summary .prc-close {
    margin-top: 56px; padding: 18px 0 0; border-top: 1px solid var(--line);
    display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 6px 16px;
  }
  #view-summary .prc-close .prc-row { padding: 0; border: 0; }
  #view-summary .prc-close .prc-line { gap: 7px; }
  #view-summary .prc-close .prc-label { font-size: 14px; color: var(--ink-3); }
  #view-summary .prc-close .prc-value { font-size: 14px; font-weight: 700; color: var(--ink-2); }
  #view-summary .prc-close .prc-row:first-child .prc-line::after {
    content: '·'; margin-left: 9px; color: var(--ink-3); font-size: 14px;
  }
  #view-summary .prc-close .prc-why { padding-right: 0; max-width: 62ch; }
  #view-summary .prc-final {
    margin: 10px 0 0; padding: 0; border-top: 0;
    text-align: center; font-size: 14px; color: var(--ink-3);
  }

  /* Section rhythm below the four panels. Every section opens on a small
     tracked kicker and one title, with air rather than a box around it: the
     calm product-page layout. */
  #view-summary .summary-block, #view-summary .summary-sec {
    margin-top: 64px; padding-top: 0; border-top: 0;
  }
  #view-summary .summary-seckick {
    margin: 0 0 8px; font: 500 13px/1.3 var(--font-mono);
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  }
  #view-summary .summary-sechead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px 20px; flex-wrap: wrap; margin: 0 0 20px;
  }
  #view-summary .summary-sechead h3 { margin: 0; }
  #view-summary .summary-card h3 {
    margin: 0 0 20px; font: 600 22px/1.25 var(--font-ui); letter-spacing: -.018em;
  }
  #view-summary .summary-sectitle {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Every action on this page is a quiet text link, at the right of the title
     of the section it belongs to. */
  #view-summary .summary-textlink {
    flex: 0 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent;
    font: 500 14px/1.4 var(--font-ui); color: var(--ink-3);
    text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
  }
  #view-summary .summary-textlink:hover { color: var(--ink); background: transparent; border: 0; }
  #view-summary .section-note, #view-summary .summary-next {
    margin: 0 0 14px; max-width: 62ch; font-size: 14px; line-height: 1.55;
  }
  /* The one sentence a check requires in the DOM says what the list under it
     already shows, so the Summary keeps it without printing it. */
  #view-summary .section-note { display: none; }
  #view-summary .summary-next { margin: 24px 0 0; }
  #view-summary .fact-card { background: transparent; padding: 22px 18px; }
  #view-summary .fact-card:first-child { padding-left: 0; }
  #view-summary .fact-card:last-child { padding-right: 0; }

  /* 4 and the banner's tail: two quiet disclosures. Recorded facts sit under
     the closing line rather than in the reading flow, and the banner's
     other sentences sit at the foot of the page. */
  #view-summary .summary-more { margin-top: 26px; text-align: center; }
  #view-summary .summary-about { margin: 0; padding: 0; border-top: 0; }
  #view-summary .summary-more > summary,
  #view-summary .summary-about > summary,
  #view-summary .summary-document > summary {
    display: inline-flex; align-items: center; gap: 8px; width: fit-content;
    cursor: pointer; list-style: none;
    font: 500 14px/1.4 var(--font-ui); color: var(--ink-3);
  }
  #view-summary .summary-more > summary::-webkit-details-marker,
  #view-summary .summary-about > summary::-webkit-details-marker,
  #view-summary .summary-document > summary::-webkit-details-marker { display: none; }
  #view-summary .summary-more > summary::after,
  #view-summary .summary-about > summary::after,
  #view-summary .summary-document > summary::after {
    content: '+'; font: 400 14px/1 var(--font-mono); color: var(--ink-3);
  }
  #view-summary .summary-more[open] > summary::after,
  #view-summary .summary-about[open] > summary::after,
  #view-summary .summary-document[open] > summary::after { content: '-'; }
  #view-summary .summary-more > summary:hover,
  #view-summary .summary-about > summary:hover,
  #view-summary .summary-document > summary:hover { color: var(--ink); }
  #view-summary .summary-more[open] > summary,
  #view-summary .summary-about[open] > summary,
  #view-summary .summary-document[open] > summary { margin-bottom: 16px; }
  /* The section already carries "About this record" as its title, so the
     disclosure that opens it is that title rather than a second line of the
     same words. */
  #view-summary .summary-aboutblock > .summary-seckick { margin-bottom: 0; }
  #view-summary .summary-about > summary {
    margin-top: 8px; font: 600 22px/1.25 var(--font-ui);
    letter-spacing: -.018em; color: var(--ink);
  }
  #view-summary .summary-about > summary::after { font-size: 18px; }
  #view-summary .summary-more .fact-grid { text-align: left; }
  #view-summary .summary-about .summary-scope,
  #view-summary .summary-about .summary-lede,
  #view-summary #summaryAboutBody > span {
    display: block; margin: 0 0 10px; max-width: 68ch;
    font-size: 14px; line-height: 1.6; color: var(--ink-2);
  }
  #view-summary .summary-about .summary-lede.hidden { display: none; }
  #view-summary #summaryAboutBody > span:last-child,
  #view-summary .summary-about .summary-scope:last-child { margin-bottom: 0; }

  /* 8: moments as plain rows. The kind keeps its colour as a dot. */
  .quiet-moments { border-top: 1px solid var(--ink); }
  .quiet-moments .moment-card {
    background: transparent; padding: 18px 0; align-items: start;
    grid-template-columns: 62px minmax(0, 1fr) auto;
  }
  .quiet-moments .moment-card:last-child { border-bottom: 0; }
  .quiet-moments .moment-copy .moment-kind {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 7px; padding: 0; border-radius: 0;
    background: transparent; color: var(--ink-3);
    font: 600 13px/1.3 var(--font-ui); letter-spacing: .02em;
  }
  .quiet-moments .moment-kind::before {
    content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  }
  .quiet-moments .moment-kind.input::before { background: #244b70; }
  .quiet-moments .moment-kind.revision::before { background: #5e4375; }
  .quiet-moments .moment-kind.coverage::before { background: #4b4f55; }
  /* The light-mode dot is the same dark, saturated colour as its chip's
     text. The chip's pale background in dark mode would put three
     near-white dots side by side that no longer read as different colours;
     a lighter tint of each hue keeps "input", "revision" and "coverage"
     distinguishable and the same kind on either theme. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .quiet-moments .moment-kind.input::before { background: #7FB0E0; }
    :root:not([data-theme="light"]) .quiet-moments .moment-kind.revision::before { background: #C29EDD; }
    :root:not([data-theme="light"]) .quiet-moments .moment-kind.coverage::before { background: #A6ABB2; }
  }
  :root[data-theme="dark"] .quiet-moments .moment-kind.input::before { background: #7FB0E0; }
  :root[data-theme="dark"] .quiet-moments .moment-kind.revision::before { background: #C29EDD; }
  :root[data-theme="dark"] .quiet-moments .moment-kind.coverage::before { background: #A6ABB2; }
  .quiet-moments .moment-time { padding: 2px 0 0; }
  .quiet-moments .moment-question { margin-top: 10px; }

  /* 5: one line per moment. The kind dot and word, the title, then the detail
     sentence on the same line. The limit and the question open behind the
     title, which carries the disclosure. */
  .quiet-moments .moment-copy {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
  }
  .quiet-moments .moment-copy > .moment-kind { flex: 0 0 auto; margin: 0; }
  .quiet-moments .moment-copy > strong {
    flex: 0 0 auto; display: inline; margin: 0;
    font: 600 16px/1.45 var(--font-ui); cursor: pointer;
  }
  .quiet-moments .moment-copy > strong:hover { text-decoration: underline; text-underline-offset: 3px; }
  .quiet-moments .moment-copy > strong:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .quiet-moments .moment-copy > span:not(.moment-kind):not(.moment-limit) {
    flex: 1 1 220px; display: inline; margin: 0;
    font-size: 14px; line-height: 1.45; color: var(--ink-2);
  }
  .quiet-moments .moment-copy > .moment-limit,
  .quiet-moments .moment-card .moment-question { flex: 1 1 100%; display: none; }
  .quiet-moments .moment-card.moment-open > .moment-copy > .moment-limit { display: block; margin-top: 6px; }
  .quiet-moments .moment-card.moment-open .moment-question { display: block; }

  /* 9: the document itself, under the section that names it. */
  #view-summary .summary-actions { margin: 0 0 20px; }
  #view-summary .summary-document {
    margin: 0; padding: 0; border-left: 0; background: transparent;
  }
  #view-summary .summary-document > summary h3 {
    display: inline; margin: 0; font: 500 14px/1.4 var(--font-ui);
    letter-spacing: 0; color: inherit;
  }
  #view-summary .summary-document .document-excerpt { margin-top: 14px; font-size: 17px; }
  #view-summary .summary-secondary {
    margin-top: 40px; padding-top: 0; border-top: 0;
    display: flex; flex-wrap: wrap; gap: 8px 26px;
  }

  /* ============================================================
     THE SUMMARY OPENS ON THE LEVEL, THEN ON FOUR PANELS

     The home page's "A draft becomes a record." treatment: a display
     headline, one quiet line under it, then four cells divided by thin
     rules, each with a line drawing, a mono kicker, a short title and one
     sentence. Every value below is copied from index.html's .workflow-path,
     with the home page's token names mapped onto this page's (--ink2 to
     --ink-2, --mono to --font-mono).

     Every number the cells print is read from window.plainReceiptParts(), the
     same builder the rows below print from, so the top of the page can never
     disagree with the receipt under it.
     ============================================================ */

  /* The top block takes the wider measure the four cells need. Everything
     from the record line down keeps the reading measure. */
  #view-summary .summary-card { max-width: 1000px; }
  #view-summary .summary-body { max-width: 760px; margin: 0 auto; }
  .shared-presentation .verifybar { max-width: 1000px; }

  /* The receipt's own band is said by the headline above instead. It stays in
     the DOM, and the printed record, the hand-in preview, the class list and
     the home page's sample card all keep the band itself. */
  #view-summary .prc > .prc-band { display: none; }

  /* The level, in the home page's headline treatment. The four colours are
     the receipt's own; they are redeclared here because they live on .prc and
     this block sits outside the receipt. */
  /* Two ids: the band rules written for the receipt's own band still match
     this element, because it wears .prc-band so the receipt's one delegated
     (i) handler drives it. */
  #view-summary #summaryLevel {
    --prc-green: #2F6B3A; --prc-yellow: #8C6C14; --prc-amber: var(--flag, #9A4A15); --prc-red: #7A1F2B;
    display: block; min-height: 0; margin: 12px 0 0; padding: 0;
    border: 0; border-radius: 0; background: transparent;
  }
  /* Same light/dark split as .prc's own --prc-yellow: #8C6C14 clears 4.5:1
     on the light paper this 54px headline and its 13px "how" line sit on;
     dark mode needs the lighter #C2951B to clear the same floor there. */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #view-summary #summaryLevel { --prc-yellow: #C2951B; --prc-green: #7FBF8A; --prc-red: #E8543C; } }
  :root[data-theme="dark"] #view-summary #summaryLevel { --prc-yellow: #C2951B; --prc-green: #7FBF8A; --prc-red: #E8543C; }
  #view-summary #summaryLevel .summary-level-head {
    display: flex; align-items: baseline; gap: 18px; margin: 0; max-width: 20ch;
    font: 600 clamp(34px, 4.4vw, 54px)/1.04 var(--font-ui); letter-spacing: -.028em;
    text-wrap: balance;
  }
  #view-summary #summaryLevel .summary-level-dot {
    flex: 0 0 auto; align-self: center; width: 12px; height: 12px;
    border-radius: 50%; background: currentColor;
  }
  #view-summary #summaryLevel .summary-level-word {
    margin: 14px 0 0; font: 500 13px/1.3 var(--font-mono);
    letter-spacing: .12em; text-transform: uppercase;
  }
  #view-summary #summaryLevel .summary-level-how {
    display: flex; align-items: baseline; gap: 14px; margin: 14px 0 0; max-width: 58ch;
  }
  #view-summary #summaryLevel .prc-how {
    margin: 0; flex: 0 1 auto; min-width: 0;
    font: 20px/1.45 var(--font-ui); color: var(--ink-2);
  }
  #view-summary #summaryLevel .prc-i { width: 22px; height: 22px; align-self: center; }
  /* #summaryLevelWhy: same 32px floor as the receipt's own (i) buttons. */
  @media (max-width: 420px) {
    #view-summary #summaryLevel .prc-i { width: 32px; height: 32px; }
  }
  #view-summary #summaryLevel .prc-why {
    margin: 14px 0 0; padding: 0; max-width: 70ch; font-size: 14px; line-height: 1.6;
  }

  /* The four panels, exactly index.html's .workflow-path values. */
  #view-summary .summary-path {
    list-style: none; margin: 36px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
  }
  #view-summary .summary-path li {
    min-width: 0; position: relative; padding: 26px 20px; border-right: 1px solid var(--line);
  }
  #view-summary .summary-path li:first-child { padding-left: 0; }
  #view-summary .summary-path li:last-child { border-right: 0; }
  #view-summary .summary-path li:not(:last-child)::after {
    content: '\2192'; position: absolute; right: -13px; top: 86px; width: 26px;
    text-align: center; z-index: 1; color: var(--ink); background: var(--bg); font-size: 22px;
  }
  #view-summary .summary-visual { height: 128px; display: grid; place-items: center; margin-bottom: 24px; }
  #view-summary .summary-visual svg { width: 100%; max-width: 180px; height: 128px; color: var(--ink); overflow: visible; }
  #view-summary .summary-path svg .diagram-paper { fill: var(--receipt); stroke: var(--line-2); stroke-width: 1.5; }
  #view-summary .summary-path svg .diagram-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  #view-summary .summary-owner {
    display: block; margin-bottom: 7px; font: 500 13px/1.3 var(--font-mono);
    text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3);
  }
  #view-summary .summary-path h3 {
    margin: 0 0 10px; font: 600 21px/1.15 var(--font-ui); letter-spacing: -.02em;
  }
  #view-summary .summary-path p { margin: 0; font: 15px/1.55 var(--font-ui); color: var(--ink-2); }
  #view-summary .summary-path .prc-fopen {
    padding: 6px 15px; border-radius: 999px; border: 1px solid var(--line);
    background: transparent; font: 500 13px/1.4 var(--font-ui); color: var(--ink-2); cursor: pointer;
  }
  #view-summary .summary-path .prc-fopen:hover { border-color: var(--ink); color: var(--ink); }

  /* The document's own title is not read on its own line above the rows:
     it is the title of the section it names, "The receipt". The follow-up
     list is the first thing under the panels, so the receipt itself carries
     no top margin and the list sets the distance. */
  #view-summary .summary-receipt { margin-top: 0; }
  #view-summary .prc-follow { margin-top: 48px; }

  /* ============================================================
     THE SHARED REPLAY AS ONE LOOK

     This is the screen a teacher watches. It reads as a product page and
     not as a control panel: one mono kicker, the clock, the name of the
     moment being played, and the controls as a single row of pills. Under
     that header the document is the hero at 640px, the scrubber sits
     directly beneath it, and the review moments are a quiet list in a
     320px rail. Every rule is scoped to .shared-presentation, so the
     writer's own replay keeps its own layout.
     ============================================================ */
  .shared-presentation #view-replay #replayDocumentLabel { display: none; }
  .shared-presentation #view-replay #replayObservation.obs-landing { display: none; }
  .shared-presentation #view-replay .replay-context:has(.obs-landing) { display: none; }
  /* The reading column is the Summary's: 1000px, no card around it. */
  .shared-presentation #view-replay > .panel {
    max-width: 1000px; margin: 0 auto; background: transparent;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .shared-presentation .replay-backline { max-width: 1000px; margin: 0 auto 18px !important; }
  .shared-presentation #view-replay .replay-backline .btn { padding: 6px 15px; border-radius: 999px; }

  /* The header: kicker, clock, the moment now on screen, the controls. */
  .shared-presentation #view-replay .panel-head {
    background: transparent; border-bottom: 1px solid var(--line); border-radius: 0;
    gap: 16px; padding: 0 0 16px; align-items: baseline; flex-wrap: nowrap;
  }
  .shared-presentation #view-replay .panel-head h2 { flex: 0 0 auto; }
  .shared-presentation #view-replay .panel-head .spacer { display: none; }
  .shared-presentation #view-replay #replayShareNote,
  .shared-presentation #view-replay #replayShareBtn,
  .shared-presentation #view-replay #replayFileBtn { display: none !important; }
  .shared-presentation #view-replay .replay-clock {
    display: block; flex: 0 0 auto;
    font: 500 28px/1 var(--font-mono); font-variant-numeric: tabular-nums;
    letter-spacing: -.01em; color: var(--ink);
  }
  .shared-presentation #view-replay .replay-nowline {
    display: block; flex: 1 1 auto; min-width: 0;
    font: 500 16px/1.3 var(--font-ui); color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .shared-presentation #view-replay .replay-nowline.at-moment { color: var(--ink-2); }
  .shared-presentation #view-replay .replay-controls {
    display: flex; flex: 0 0 auto; align-items: center; gap: 10px;
  }
  .shared-presentation #view-replay .replay-controls #playBtn { order: 1; }
  .shared-presentation #view-replay .replay-controls #replayStart { order: 2; }
  .shared-presentation #view-replay .replay-controls .speed-group { order: 3; }
  .shared-presentation #view-replay .replay-controls .skiplbl { order: 5; }
  .shared-presentation #view-replay .panel-head .btn,
  .shared-presentation #view-replay .panel-head select {
    padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line);
    background: transparent; font: 500 13px/1.4 var(--font-ui); color: var(--ink-2);
  }
  .shared-presentation #view-replay .panel-head .btn:hover { border-color: var(--ink); color: var(--ink); }
  .shared-presentation #view-replay .panel-head #playBtn {
    background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600;
  }
  .shared-presentation #view-replay .panel-head #playBtn:hover { color: var(--paper); opacity: .88; }
  .shared-presentation #view-replay .panel-head #replaySpeed { padding: 6px 8px 6px 10px !important; border-color: transparent; }
  .shared-presentation #view-replay .panel-head #replaySpeed:hover { border-color: var(--line); }
  .shared-presentation #view-replay .panel-head .lbl { font-size: 13px; color: var(--ink-3); letter-spacing: .08em; }
  .shared-presentation #view-replay .panel-head .skiplbl { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
  .shared-presentation #view-replay .panel-head .skiplbl:hover { color: var(--ink-2); }

  /* The document is the hero: 640px of paper, a 320px rail, a 40px gutter. */
  .shared-presentation #view-replay .replay-workspace { padding: 28px 0 0; gap: 40px; }
  @media (min-width: 1041px) {
    .shared-presentation #view-replay .replay-workspace { grid-template-columns: 640px 320px; }
  }
  .shared-presentation #view-replay .replay-context { margin-bottom: 4px; }
  .shared-presentation #view-replay .replay-context #replayObservation { font-size: 14px; color: var(--ink-3); }
  .shared-presentation #view-replay .replay-main .replaydoc {
    padding: 40px; font-size: 18px; line-height: 1.6; min-height: 420px; max-height: 560px;
  }
  .shared-presentation #view-replay .replay-main .scrub { margin: 22px 0 0; gap: 14px; }
  .shared-presentation #view-replay .scrub .t,
  .shared-presentation #view-replay .scrub .t:last-child {
    font-size: 13px; min-width: 44px; color: var(--ink-3);
  }
  /* A 2px rule with a small ink handle, not the browser's default bar. */
  .shared-presentation #view-replay .scrub input[type=range] {
    -webkit-appearance: none; appearance: none; height: 30px; padding: 0; background: transparent;
  }
  .shared-presentation #view-replay .scrub input[type=range]::-webkit-slider-runnable-track {
    height: 2px; background: var(--line-2); border-radius: 2px;
  }
  .shared-presentation #view-replay .scrub input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -6px;
    border: 0; border-radius: 50%; background: var(--ink);
  }
  .shared-presentation #view-replay .scrub input[type=range]::-moz-range-track {
    height: 2px; background: var(--line-2); border-radius: 2px;
  }
  .shared-presentation #view-replay .scrub input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink);
  }
  .shared-presentation #view-replay .scrub input[type=range]:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  /* Stepping between moments reads as three quiet links, not three buttons. */
  .shared-presentation #view-replay .replay-main .observation-nav {
    justify-content: flex-start; gap: 18px; margin: 14px 0 0; font-family: var(--font-ui);
  }
  .shared-presentation #view-replay .observation-nav .btn {
    padding: 0; border: 0; background: transparent; border-radius: 0;
    font: 500 13px/1.4 var(--font-ui); color: var(--ink-2);
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2);
  }
  .shared-presentation #view-replay .observation-nav .btn:hover { color: var(--ink); text-decoration-color: var(--ink); }
  .shared-presentation #view-replay .observation-nav .btn:disabled { color: var(--ink-3); text-decoration: none; }
  .shared-presentation #view-replay .observation-nav span { min-width: 0; text-align: left; font-size: 13px; order: 0; }
  @media (max-width: 520px) {
    .shared-presentation #view-replay .replay-main .observation-nav {
      flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
    }
  }

  /* The rail: a kicker, one line per moment, the playing one marked. */
  .shared-presentation #view-replay .replay-review {
    padding: 0; background: transparent; border: 0; border-radius: 0;
  }
  .shared-presentation #view-replay .replay-review h3 {
    margin: 0 0 14px; font: 500 13px/1.2 var(--font-mono);
    letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
  }
  /* The rail is 320px, so the row reads down rather than across: the clock,
     then the kind and the title, then the detail, then the seek pill. */
  .shared-presentation #view-replay .replay-review .moment-card {
    grid-template-columns: 48px minmax(0, 1fr); gap: 10px;
    border-left: 2px solid transparent; padding-left: 14px;
  }
  .shared-presentation #view-replay .replay-review .moment-card.moment-now { border-left-color: var(--ink); }
  .shared-presentation #view-replay .replay-review .moment-card > .btn {
    grid-column: 2; justify-self: start; margin: 10px 0 0;
  }
  .shared-presentation #view-replay .replay-review .moment-copy { gap: 3px 8px; }
  .shared-presentation #view-replay .replay-review .moment-copy > strong {
    flex: 0 1 auto; min-width: 0; font-size: 15px; overflow-wrap: anywhere;
  }
  .shared-presentation #view-replay .replay-review .moment-copy > span:not(.moment-kind):not(.moment-limit) { flex: 1 1 100%; }
  .shared-presentation #view-replay .replay-review .obsindex { margin: 22px 0 0; }
  .shared-presentation #view-replay .replay-review .obsindex summary { letter-spacing: .2em; }
  /* Everything under the workspace keeps the same 1000px measure. */
  .shared-presentation #view-replay .recorddetails { margin-left: 0; margin-right: 0; }
  .shared-presentation #view-replay .educator-cta { max-width: 1000px; margin-left: auto; margin-right: auto; }

  /* Mobile: the clock and the moment name first, the controls under them. */
  @media (max-width: 720px) {
    .shared-presentation #view-replay .panel-head { flex-wrap: wrap; gap: 10px 14px; padding-bottom: 14px; }
    .shared-presentation #view-replay .replay-clock { font-size: 24px; }
    .shared-presentation #view-replay .replay-nowline { flex: 1 1 120px; }
    .shared-presentation #view-replay .replay-controls { flex: 1 1 100%; flex-wrap: wrap; margin-top: 2px; }
    .shared-presentation #view-replay .replay-workspace { padding: 22px 0 0; gap: 32px; }
    .shared-presentation #view-replay .replay-main .replaydoc { padding: 26px 22px; font-size: 17px; min-height: 300px; max-height: 420px; }
  }

  /* The yellow headline at display size uses a warmer shade than the 13px
     yellow token (which is darkened to pass small-text contrast); large text
     needs 3:1 and #B07A12 gives 3.7:1 on the paper. Dark keeps the token. */
  #view-summary #summaryLevel.prc-band-yellow .summary-level-head { color: #B07A12; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #view-summary #summaryLevel.prc-band-yellow .summary-level-head { color: #C2951B; }
  }
  :root[data-theme="dark"] #view-summary #summaryLevel.prc-band-yellow .summary-level-head { color: #C2951B; }

  /* Under 900px the two groups stack; the reading order is unchanged. */
  /* Above 900px the two groups share the parent's rows, so the group name,
     the chip, the hint and the first row of each list sit on the same lines
     whether or not a group carries a hint. Below that they stack. */
  @media (min-width: 901px) {
    #view-summary .prc-group {
      display: grid; grid-template-rows: subgrid; grid-row: span 2;
      align-self: stretch; align-content: start;
    }
    #view-summary .prc-ghead { grid-row: 1; }
    #view-summary .prc-group .prc-rows { grid-row: 2; align-self: start; }
  }
  @media (max-width: 900px) {
    #view-summary .prc { grid-template-columns: minmax(0, 1fr); }
    #view-summary .prc-group + .prc-group { margin-top: 48px; }
  }
  /* The four panels fold the way the home page's four do: two by two, then
     one under another with the drawing moved to the left of the words. */
  @media (max-width: 850px) {
    #view-summary .summary-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #view-summary .summary-path li,
    #view-summary .summary-path li:first-child { padding: 24px; }
    #view-summary .summary-path li:nth-child(2) { border-right: 0; }
    #view-summary .summary-path li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    #view-summary .summary-path li:nth-child(2)::after { display: none; }
  }
  @media (max-width: 520px) {
    #view-summary .summary-path { display: block; }
    #view-summary .summary-path li,
    #view-summary .summary-path li:first-child {
      padding: 24px 0 24px 92px; border-right: 0; border-bottom: 1px solid var(--line); min-height: 140px;
    }
    #view-summary .summary-path li:last-child { border-bottom: 0; }
    #view-summary .summary-path li::after { display: none; }
    #view-summary .summary-visual { position: absolute; left: 0; top: 30px; width: 72px; height: 72px; margin: 0; }
    #view-summary .summary-visual svg { height: 72px; }
    #view-summary .summary-path h3 { font-size: 20px; }
    #view-summary .summary-path p { font-size: 14px; }
  }
  @media (max-width: 720px) {
    .shared-presentation main { padding-left: 20px; padding-right: 20px; }
    .shared-presentation .verifybar { margin-top: 36px; }
    #view-summary .summary-card { padding: 32px 0 64px; }
    #view-summary #summaryLevel .summary-level-head { font-size: 30px; gap: 12px; max-width: none; }
    #view-summary #summaryLevel .summary-level-dot { width: 10px; height: 10px; }
    #view-summary #summaryLevel .prc-how { font-size: 16px; }
    #view-summary .summary-path { margin-top: 28px; }
    #view-summary .summary-block, #view-summary .summary-sec { margin-top: 48px; }
    #view-summary .prc-follow { margin-top: 36px; }
    #view-summary .summary-kickline { gap: 6px; }
    #view-summary .summary-assignment { text-align: left; }
    #view-summary .prc-band { min-height: 64px; padding: 12px 16px; }
    #view-summary .prc-bword { font-size: 19px; }
    #view-summary .prc-fitem { flex-wrap: wrap; }
    #view-summary .prc-fopen { margin-left: auto; }
    #view-summary .prc-value { text-align: right; }
    #view-summary .prc-tag { text-align: right; }
    #view-summary .prc-close { justify-content: flex-start; gap: 10px 22px; }
    /* The two closing rows sit one under the other on a phone, so the mark
       that joined them on one line has nothing left to join. */
    #view-summary .prc-close .prc-row:first-child .prc-line::after { display: none; }
    #view-summary .prc-final { text-align: left; }
    #view-summary .fact-card, #view-summary .fact-card:first-child,
    #view-summary .fact-card:last-child { padding: 20px 0; }
    .quiet-moments .moment-card { padding: 16px 0; align-items: start; }
    .quiet-moments .moment-card > .btn { margin-top: 10px; }
  }

  @media (max-width: 720px) { .summary-card, .handin-page { padding: 24px 18px; } .fact-grid { grid-template-columns: 1fr; } .fact-card, .fact-card:first-child { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); } .fact-card:last-child { border-bottom: 0; } .fact-card strong { margin-bottom: 10px; } .moment-card { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; } .moment-card .btn { grid-column: 2; justify-self: start; } .handin-steps li { grid-template-columns: 1fr; } .handin-steps .btn, .handin-step-actions { grid-column: 1; grid-row: auto; justify-self: start; } .handin-step-actions { justify-content: flex-start; } .recorddetails { margin: 18px 12px; } .teacher-preview { padding: 18px 14px; } .summary-document { padding: 18px; } }
  /* ============================================================
     THE WRITING SCREEN

     The officials watching a demo see this page for five minutes before
     they see anything else, so it carries the same design language as the
     shared record: a quiet header row, one page, one receipt, one primary
     action. Everything here is scoped to #view-write so the shared
     Summary, the printed record and the home page's sample card cannot
     pick any of it up.
     ============================================================ */

  /* "WORKING DOCUMENT" repeats the document header under it, which holds
     the sample buttons, so it is hidden but kept in the DOM. */
  #view-write .panel-head { display: none; }

  #view-write .dochead {
    flex-wrap: nowrap; gap: 10px; padding: 14px 18px 12px;
    border-bottom: 1px solid var(--line-soft);
  }
  /* The same truncation the narrow screen uses, so a long first sentence
     cannot push the controls off the end of the row. */
  #view-write .doctitle {
    font-size: 17px; letter-spacing: -0.01em;
    flex: 1 1 auto; min-width: 40px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #view-write .docsaved { flex: 0 0 auto; }
  #view-write .docsaved { font-size: 13px; color: var(--ink-3); }
  #view-write .dochead .doctools {
    margin-left: auto; display: flex; gap: 8px; align-items: center; flex: 0 0 auto;
  }
  /* Only the title gives way when the row runs out of room. */
  #view-write .dochead .doctools > * { flex: 0 0 auto; white-space: nowrap; }
  #view-write .dochead .doctools .btn,
  #view-write .dochead .doctools select {
    padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
    background: transparent; color: var(--ink-2);
    font: 500 13px/1.4 var(--font-ui); box-shadow: none;
  }
  #view-write .dochead .doctools select { padding: 4px 6px; }
  #view-write .dochead .doctools #boldBtn { font-weight: 800; min-width: 34px; }
  #view-write .dochead .doctools .btn:hover { border-color: var(--ink); color: var(--ink); }
  /* Already in the More tools panel; kept here with its id and handler. */
  #view-write .dochead #docConnect { display: none; }
  #view-write .docsample { position: relative; flex: 0 0 auto; }
  #view-write .docsample-toggle {
    padding: 5px 2px; border: 0; background: none; cursor: pointer;
    font: 500 13px/1.4 var(--font-mono); letter-spacing: .06em;
    color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px;
    white-space: nowrap;
  }
  #view-write .docsample-toggle:hover { color: var(--ink); }
  #view-write .docsample-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
    display: flex; flex-direction: column; gap: 6px; padding: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
    box-shadow: 0 12px 30px -18px var(--shadow-deep);
  }
  #view-write .docsample-menu.hidden { display: none; }
  #view-write .docsample-menu .btn { white-space: nowrap; text-align: left; }

  /* ---------- one row of actions, then one quiet line ---------- */
  #view-write .editbar { gap: 10px; padding: 14px 18px 8px; letter-spacing: 0; }
  #view-write .editbar .btn {
    padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line);
    background: transparent; color: var(--ink-2); font: 500 13px/1.4 var(--font-ui);
  }
  #view-write .editbar .btn:hover { border-color: var(--ink); color: var(--ink); }
  /* The dictation declaration switch inherits .editbar's mono 13px and
     color: var(--ink-3): a plain, off-by-default control, not a warning. */
  #view-write .editbar .edittoggle {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  }
  #view-write .editbar .edittoggle input { cursor: pointer; }
  /* For six seconds after a keyless refusal (capture.js's
     cueDictationSwitch) the switch is outlined in ink, so a writer who is
     dictating finds the control that keeps their text without a second
     sentence in the notice. */
  #view-write .editbar .edittoggle.strict-attention {
    outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; color: var(--ink);
    transition: outline-color .2s ease;
  }
  #view-write .editbar #shareBtn {
    background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600;
  }
  #view-write .editbar #shareBtn:hover { opacity: .88; color: var(--paper); border-color: var(--ink); }
  #view-write .editbar .btn.quiet { border-color: transparent; color: var(--ink-3); padding: 7px 8px; }
  #view-write .editbar .btn.quiet:hover { border-color: var(--line); color: var(--ink); }
  #view-write .editnote {
    display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap;
    margin: 0; padding: 0 18px 14px;
    font: 13px/1.5 var(--font-ui); color: var(--ink-3);
  }
  #view-write .editnote .spacer { margin-left: auto; }
  #view-write .editnote #wordCount, #view-write .editnote #charCount,
  #view-write .editnote #saveState, #view-write .editnote #shareNote {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
  }
  body.focusmode #view-write .editnote { display: none !important; }

  /* ---------- the rail: the reader's receipt, live ---------- */
  #view-write > aside.panel .wrail { padding: 22px 18px 6px; }
  .wrail-head { display: flex; align-items: center; gap: 10px; }
  .wrail-kicker {
    font: 500 13px/1.3 var(--font-mono); letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .wrail-live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font: 500 13px/1.3 var(--font-mono); letter-spacing: .16em; color: var(--flag);
  }
  .wrail-live.hidden { display: none; }
  .wrail-live i {
    width: 7px; height: 7px; border-radius: 50%; background: currentColor;
    animation: wrailpulse 1.7s ease-in-out infinite;
  }
  @keyframes wrailpulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
  @media (prefers-reduced-motion: reduce) { .wrail-live i { animation: none; } }
  .wrail-empty {
    margin: 16px 0 18px; font: 14px/1.5 var(--font-ui); color: var(--ink-2);
  }

  /* The receipt renderer's own markup, printed compactly on receipt paper:
     no card of its own, no repeated head, no hint sentences, and the level
     as one line rather than a band. Nothing here reaches .prc anywhere else
     on the page. */
  .wrail-body .prc {
    border: 0; border-radius: 0; background: transparent;
    margin: 0; overflow: visible; font-family: var(--font-ui);
  }
  /* The writer sees the facts, never the sorting. A live level, a chip or a
     "counts as 1 item" tag while typing is a training signal for gaming the
     rule, so the band, the chips and the tags are the teacher's alone; the
     hand-in preview still shows the whole receipt the student is about to
     send. */
  .wrail-body .prc-head, .wrail-body .prc-follow, .wrail-body .prc-hint,
  .wrail-body .prc-how, .wrail-body .prc-bnote, .wrail-body .prc-final,
  .wrail-body .prc-band, .wrail-body .prc-level, .wrail-body .prc-tag,
  .wrail-body .prc-i, .wrail-body .prc-why { display: none !important; }
  /* No rule here hides teacherOnly rows: the writer's rail passes
     writerView true, so plainReceiptHtml leaves them out of the HTML. */
  .wrail-body .prc-band {
    padding: 14px 0 12px; background: transparent; border-bottom: 1px solid var(--line);
  }
  .wrail-body .prc-bline { align-items: center; gap: 7px; }
  .wrail-body .prc-bword { font: 600 15px/1.35 var(--font-ui); letter-spacing: 0; white-space: nowrap; }
  .wrail-body .prc-blabel { font: 500 15px/1.35 var(--font-ui); }
  /* The mark belongs to the line it explains, not to the far edge of it. */
  .wrail-body .prc-band .prc-i { margin-left: 2px; }
  .wrail-body .prc-band .prc-why { font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
  /* One plain list for the writer: the two group names sort the rows for a
     teacher, and a student typing should see facts, not a sorting. */
  .wrail-body .prc-group { padding: 0; border-bottom: 0; }
  .wrail-body .prc-group + .prc-group .prc-rows { margin-top: 0; border-top: 0; }
  .wrail-body .prc-ghead { display: none !important; }
  .wrail-body .prc-gline { gap: 6px; }
  .wrail-body .prc-kicker { font: 600 13px/1.2 var(--font-ui); letter-spacing: .06em; }
  .wrail-body .prc-level { font-size: 13px; padding: 1px 6px; }
  /* Every mark in the rail sits in one column at the right edge, the group's
     included, so the eye finds them in the same place on every line. */
  .wrail-body .prc-ghead .prc-i { margin-left: auto; }
  .wrail-body .prc-rows { margin-top: 6px; }
  .wrail-body .prc-row { padding: 8px 0; border-top: 1px solid var(--line-soft); }
  .wrail-body .prc-label { font-size: 14px; color: var(--ink-2); }
  .wrail-body .prc-value { font-size: 14px; font-variant-numeric: tabular-nums; }
  .wrail-body .prc-flag { background: transparent; }
  .wrail-body .prc-tag { font-size: 13px; line-height: 1.45; }
  .wrail-body .prc-why { font-size: 13px; line-height: 1.5; padding-right: 0; }
  .wrail-body .prc-i { width: 20px; height: 20px; font-size: 13px; }
  .wrail-body .prc-seek { font-size: 14px; padding: 1px 7px; }
  /* AI SCORE and DEFINITIVE VERDICT read as one closing line. */
  /* One sentence of running text, so the two rows read as a single line at
     any rail width instead of two flex columns fighting for it. */
  .wrail-body .prc-close {
    display: block; text-align: center; line-height: 2;
    padding: 12px 0 16px; border-top: 1px solid var(--line);
  }
  .wrail-body .prc-close .prc-row, .wrail-body .prc-close .prc-line { display: inline; }
  .wrail-body .prc-close .prc-row { padding: 0; border-top: 0; }
  .wrail-body .prc-close .prc-label, .wrail-body .prc-close .prc-value {
    display: inline; font-size: 13px; text-align: inherit;
  }
  .wrail-body .prc-close .prc-value { padding-left: 5px; }
  .wrail-body .prc-close .prc-i { vertical-align: middle; margin-left: 5px; }
  .wrail-body .prc-close .prc-why { display: none; }
  .wrail-body .prc-close .prc-open .prc-why { display: block; text-align: left; }
  .wrail-body .prc-close .prc-row:first-child .prc-line::after {
    content: '\00A0\00B7\00A0'; color: var(--ink-3);
  }

  /* The rail's full list of rows, one disclosure down, closed. */
  .wrail-more { border-top: 1px dashed var(--line-2); }
  .wrail-more > summary {
    padding: 14px 18px; cursor: pointer; list-style: none;
    font: 500 13px/1.3 var(--font-mono); letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .wrail-more > summary::-webkit-details-marker { display: none; }
  .wrail-more > summary::after { content: ' +'; }
  .wrail-more[open] > summary::after { content: ' \2013'; }
  .wrail-more > summary:hover { color: var(--ink); }
  .wrail-more .verdict { padding-top: 4px; border-bottom: 0; }
  /* A shared record moves this whole rail into Record details, where the
     writer's own live copy of the receipt has nothing to say. */
  .shared-presentation #sharedRail .wrail,
  .shared-presentation #sharedRail .wrail-more > summary { display: none; }
  .shared-presentation #sharedRail .wrail-more { border-top: 0; }

  @media (max-width: 620px) {
    /* The row keeps the title readable: the decorative page icon goes, the
       padding tightens, and the row scrolls inside itself rather than
       pushing the page sideways. */
    #view-write .dochead { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
    #view-write .dochead .docicon { display: none; }
    #view-write .doctitle { min-width: 96px; }
    /* #view-write .dochead .doctools is flex:0 0 auto; white-space:nowrap at
       every width and, by ID specificity, outranks the generic .dochead
       .doctools mobile wrap, so a 523px toolbar would scroll the whole page
       sideways. Same specificity, later in the cascade: the toolbar becomes
       its own full-width row (dochead must allow wrapping too) and wraps
       within itself; the title already shrinks with an ellipsis. */
    #view-write .dochead .doctools { gap: 6px; flex: 1 1 100%; width: 100%; flex-wrap: wrap; }
    /* Load a sample rides on the toolbar's second row, so it does not depend
       on finding the More tools panel. */
    #view-write .docsample { display: block; position: relative; flex: 0 0 auto; }
    #view-write .editbar { padding: 12px 12px 6px; gap: 8px; }
    #view-write .editbar .spacer { display: none; }
    #view-write .editnote { padding: 0 12px 12px; }
    #view-write .editnote .spacer { display: none; }
    #view-write > aside.panel .wrail { padding: 18px 14px 4px; }
    .wrail-more > summary { padding: 14px; }
  }

  @media print {
    /* Print has its own layout: A4 also matches the narrow-screen query. */
    main { padding: 0 !important; }
    .exsummary { break-inside: auto; padding: 12px; }
    .exsummary .fact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .exsummary .fact-card { padding: 10px; border-bottom: 0; border-right: 1px solid #999; }
    .exsummary .fact-card:last-child { border-right: 0; }
    .fact-value { font-size: 20px; letter-spacing: -.02em; }
    .fact-context { font-size: 12px; line-height: 1.4; }
    .exsummary .fact-card strong { margin-bottom: 10px; }
    .exsummary .fact-more { margin-top: 8px; font-size: 11px; }
    .exsummary .fact-more p { margin: 5px 0; }
    .print-moments .moment-card { break-inside: avoid; padding: 10px 0; }
    .print-moments .moment-copy span { font-size: 12px; }
    .print-moments .moment-question { font-size: 12px; }
    .fact-more > *, .moment-question > * { display: block !important; }
    .fact-more summary, .moment-question summary { font-weight: 600; }
    .exAppendix { display: block !important; break-before: page; }
    .exAppendix > summary { display: block !important; font-size: 18px; }
    /* beforeprint expands disclosures. Do not flatten .kv's grid here. */
    .exAppendix .kv { display: grid !important; column-gap: 12px; }
    .exAppendix .kv dt, .exAppendix .kv dd { overflow-wrap: anywhere; min-width: 0; }
    #exEvidenceScope { display: block !important; color: #000 !important; background: #fff !important; }
  }

/* The copyright line at the foot of the app page (site.css is not loaded here). */
.copyright { display: block; margin: 24px auto 16px; max-width: 980px; padding: 0 20px; font-size: 12px; color: var(--ink-3); }