/* App-level rules on top of the tokens in velumi.css. (story 003: auth screens) */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
.app-root { min-height: 100%; }
[hidden] { display: none !important; }
body { background: var(--g2); color: var(--g9); font-family: var(--font); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }   /* chrome tracking lives here, once (C2) */
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
/* the ONE input (story 019/D3): compact by default, .field (auth) lifts it to a row height */
:where(input:not([type=checkbox]):not([type=radio]), select) { height: var(--h-ctl); padding: 0 8px; border: 1px solid var(--g4); border-radius: var(--r-s); background: var(--paper); font: var(--nav-text); color: var(--g8); }
a { color: var(--g8); text-decoration: underline; text-decoration-color: var(--g4); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--g7); }
:where(:focus-visible) { outline: var(--ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.sheet { width: 100%; max-width: 360px; background: var(--g0); border-radius: var(--r-l); padding: 28px 28px 24px; }
.sheet .brand { display: flex; align-items: center; gap: 8px; font: var(--nav-type); color: var(--g8); margin-bottom: 20px; }
.sheet h1 { font: 600 20px/1.2 var(--font); letter-spacing: -.01em; margin: 0 0 16px; }
.field { display: grid; gap: 6px; margin: 0 0 12px; }
.field > span { font: var(--nav-type); color: var(--g7); }
.field input { height: var(--h-row); padding: 0 10px; }
.field input:focus { outline: var(--ring); outline-offset: 2px; }
.btn { height: var(--h-row); padding: 0 12px; border-radius: var(--r-s); font: var(--nav-type); color: var(--g8); display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 4px; }
.btn:hover { background: var(--g2); color: var(--g9); }   /* ghost button on paper: one step */
.btn.primary { background: var(--g9); color: var(--g0); }
.btn.primary:hover { background: var(--g8); color: var(--g0); }
.btn:disabled { opacity: .5; cursor: default; }
.note { font: var(--nav-text); color: var(--g7); min-height: 16px; margin: 0 0 8px; }
.note.err { color: var(--danger); }
.note.ok { color: var(--g8); }
.foot { font: var(--nav-text); color: var(--g7); margin-top: 16px; }

/* ===== App shell (story 004) — ported from mockup/index.html ===== */
/* The frame never scrolls (story 017/A1): .app clips, only .tree / .canvas / .assist-body scroll. */
.app { --assist: 380px; --nav: 224px; display: grid; grid-template-columns: var(--nav) minmax(0, 1fr) var(--assist); height: 100vh; height: 100dvh; overflow: hidden; transition: grid-template-columns 140ms ease-out; }
.app.assist-off, .app.no-page { --assist: 0px; }   /* .no-page: nothing selected → one column (A2) */
.nav { display: flex; flex-direction: column; min-width: 0; padding: 8px 6px 0; color: var(--g8); position: relative; }
.nav-top { height: var(--h-head); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.brand { flex: 1; font: var(--nav-type); text-align: left; color: var(--g8); }
.app.multi-ws .brand { cursor: pointer; }
.app.multi-ws .brand:hover { color: var(--g9); }
.nav-top { position: relative; }
#wsMenu { left: 8px; right: auto; top: 40px; min-width: 200px; }
#wsMenu button.on { color: var(--g9); background: var(--g2); }
/* story 048: a reviewer reads — no tree actions, no new page, a plain title */
.app.readonly .row .act, .app.readonly #addRoot { display: none !important; }
.app.readonly .page-title h1 { border-bottom-color: transparent; }
.members .members-body { overflow: auto; }
.members .form-row.member label.mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g8); }
.members .form-row { grid-template-columns: 140px 1fr; }
.members input[name="email"] { width: 200px; }
.nav-top .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 20px; height: 20px; flex: none; border-radius: var(--r-xs); background: var(--g8); color: var(--on-tile); font: 600 11px/20px var(--font); text-align: center; }   /* a tile like the page tiles; the capital is a glyph (C1) */
.section { display: flex; align-items: center; padding: 8px 8px 4px; font: var(--nav-type); color: var(--g7); }
.add-root { margin-left: auto; width: var(--h-icon); height: var(--h-icon); border-radius: var(--r-s); display: grid; place-items: center; color: var(--g6); }
.add-root:hover { background: var(--g3); color: var(--g8); }
.section .add-root + .add-root { margin-left: 2px; }
/* story 042: the search layer — a scrim and one dialog */
.search-layer { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--scrim); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.search-box { width: min(560px, 100%); background: var(--g0); border: 1px solid var(--g4); border-radius: var(--r-m); box-shadow: var(--float); overflow: hidden; display: flex; flex-direction: column; max-height: min(70vh, 560px); }
.search-in { display: flex; align-items: center; gap: 8px; height: var(--h-head); padding: 0 12px; border-bottom: 1px solid var(--g3); color: var(--g6); }
.search-in input { flex: 1; height: var(--h-row); border: 0; background: none; font: 400 15px/1.2 var(--font); color: var(--g9); padding: 0; }
.search-in input:focus { outline: none; }
.search-in input::-webkit-search-cancel-button { display: none; }
.search-list { overflow: auto; padding: 4px; display: grid; }
.search-list .empty { font: var(--nav-text); color: var(--g7); padding: 8px 10px; }
.search-list .hit { display: grid; gap: 2px; text-align: left; padding: 6px 10px; border-radius: var(--r-s); }
.search-list .hit .t { font: var(--nav-type); color: var(--g9); }
.search-list .hit .s { font: var(--nav-text); color: var(--g7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-list .hit .s b { color: var(--g9); font-weight: 600; }
.search-list .hit:hover { background: var(--g2); }
.search-list .hit.on { background: var(--g3); }
/* story 043: the History dialog rows */
.versions { overflow: auto; padding: 4px 0; }
.versions .empty { font: var(--nav-text); color: var(--g7); padding: 8px 12px; }
.version { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--h-row); padding: 2px 12px; font: var(--nav-type); color: var(--g8); }
.version .muted { color: var(--g7); font-variant-numeric: tabular-nums; }
.tree { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; outline: none; }
.tree, .canvas, .assist-body { scrollbar-width: thin; scrollbar-color: var(--g4) transparent; }
.tree:focus-visible .row.on { outline: var(--ring); outline-offset: -2px; }
.tree > p.empty { font: var(--nav-text); color: var(--g7); padding: 8px; }   /* the no-pages message only — NOT .ico.empty tiles */
.row { position: relative; display: flex; align-items: center; gap: 8px; height: var(--h-row); padding: 0 8px; border-radius: var(--r-s); font: var(--nav-type); color: var(--g8); width: 100%; text-align: left; cursor: pointer; user-select: none; }
.row:hover { background: var(--g3); }
.row.on { background: var(--paper); color: var(--g9); outline: 1px solid var(--g3); outline-offset: -1px; }   /* paper + hairline, no shadow (B4) */
.row.on:hover { background: var(--paper); }
.row.dragging { opacity: .4; }
.row.drop-before::before, .row.drop-after::after { content: ""; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--g8); border-radius: 1px; }
.row.drop-before::before { top: -2px; } .row.drop-after::after { bottom: -2px; }
.row.drop-inside { outline: 2px solid var(--g8); outline-offset: -2px; }
.row .pad { flex: none; width: 0; margin-right: -8px; } /* cancel the flex gap so depth 0 sits on the 14px column line */
.row.d1 .pad { width: 12px; } .row.d2 .pad { width: 24px; } .row.d3 .pad { width: 36px; } .row.d4 .pad { width: 48px; } .row.d5 .pad { width: 60px; } .row.d6 .pad { width: 72px; }
.ico { position: relative; width: 16px; height: 16px; flex: none; border-radius: var(--r-xs); background: var(--tile, var(--g4)); display: grid; place-items: center; color: var(--on-tile); }
.ico > .g { width: 12px; height: 12px; }
.ico.plain { background: var(--g3); color: var(--g7); }   /* no color: gray tile, --g7 glyph — 6.3:1 instead of white on gray (story 026) */
.ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--g3); opacity: 0; transition: opacity 120ms ease-out; }
.ico .i-chevron { position: absolute; inset: 0; color: var(--g8); opacity: 0; z-index: 1; transition: opacity 120ms ease-out, transform 120ms ease-out; }
.row.open .ico .i-chevron { transform: rotate(90deg); }
.row.kids:hover .ico .i-chevron, .row.kids:hover .ico::after { opacity: 1; }
.row.kids:hover .ico > .g { opacity: 0; }
.row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row input.rename { flex: 1; min-width: 0; height: var(--h-icon); padding: 0 6px; }
.row .name.armed { color: var(--danger); }   /* story 058: Delete pressed once */
.menu button:focus-visible, .outline button:focus-visible { background: var(--g2); outline: none; }
.row .act { display: none; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); gap: 2px; background: inherit; border-radius: var(--r-s); }
.row .act > span { width: var(--h-icon); height: var(--h-icon); border-radius: var(--r-s); display: grid; place-items: center; color: var(--g6); }
.row .act > span:hover { background: var(--g4); color: var(--g8); }
.row:hover .act { display: flex; }
.menu { position: absolute; right: 8px; top: 30px; z-index: var(--z-menu); min-width: 160px; background: var(--g0); border: 1px solid var(--g4); border-radius: var(--r-m); box-shadow: var(--float); padding: 4px; display: grid; }
.menu button { height: var(--h-ctl); padding: 0 10px; border-radius: var(--r-s); font: var(--nav-type); text-align: left; color: var(--g8); }
.menu button:hover { background: var(--g2); }
.menu button.danger { color: var(--danger); }
.nav-foot { padding: 6px 0; }
.foot { display: flex; align-items: center; gap: 8px; height: var(--h-row); padding: 0 8px; border-radius: var(--r-s); font: var(--nav-type); color: var(--g7); width: 100%; text-align: left; }
.nav-foot .foot > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot:hover { background: var(--g3); }

/* --edge = the column's chrome edge: header padding and canvas padding share it (A4). */
.work { --edge: 48px; grid-column: 2; background: var(--paper); min-width: 0; display: flex; flex-direction: column; border-radius: var(--r-l) 0 0 var(--r-l); margin: 8px 0 8px 2px; position: relative; overflow: hidden; }
.app.assist-off .work, .app.no-page .work { border-radius: var(--r-l); margin-right: 8px; }
.head { height: var(--h-head); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 var(--edge); border-bottom: 1px solid var(--g3); position: relative; }
.head-path { flex: 1; min-width: 0; font: var(--nav-type); color: var(--g7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-path .cur { color: var(--g8); }
.head-status { font: var(--nav-type); color: var(--g7); font-variant-numeric: tabular-nums; white-space: nowrap; }   /* word count · saved — a row, never a layer (A3) */
.canvas *::selection { background: var(--selection); }
.canvas, .lp-serif { letter-spacing: 0; }   /* the page world resets the chrome tracking */
.head-btn { height: var(--h-row); padding: 0 6px; border-radius: var(--r-s); color: var(--g7); display: flex; align-items: center; gap: 6px; }
.head-btn:hover { background: var(--g2); color: var(--g9); }
.canvas { flex: 1; overflow: auto; padding: 40px var(--edge) 96px; }   /* symmetric — the 2-button gutter fits in 48px */
/* The column is measured in the PAGE's type (story 025): ch means characters of the chosen face at the chosen size,
   so Normal ≈ 80 characters in serif, Narrow ≈ 65, Wide ≈ 95 — and Small/Large keep the count, not the pixels. */
.measure { max-width: var(--measure); margin: 0 auto; font-family: var(--page-font); font-size: var(--page-size); }
.measure.w-narrow { --measure: 60ch; } .measure.w-normal { --measure: 72ch; } .measure.w-wide { --measure: 88ch; }
/* the preset modifiers are shared by the column and the dialog's sample line */
:is(.measure, .style-sample).f-serif { --page-font: var(--serif); } :is(.measure, .style-sample).f-sans { --page-font: var(--font); } :is(.measure, .style-sample).f-mono { --page-font: var(--mono); }
:is(.measure, .style-sample).s-s { --page-size: 14px; } :is(.measure, .style-sample).s-m { --page-size: 16px; } :is(.measure, .style-sample).s-l { --page-size: 18px; }
:is(.measure, .style-sample).a-left { --page-align: left; } :is(.measure, .style-sample).a-justify { --page-align: justify; hyphens: auto; }   /* justified text hyphenates or it rivers (C3) */
.page-title { display: flex; align-items: center; gap: 12px; margin: 8px 0 28px; position: relative; }
@media (min-width: 720px) {   /* hang the icon in the margin so title and body share one left line */
  .page-title .ico { position: absolute; left: -36px; top: 10px; }
  .pop.icon-pop { left: -36px; }
}
.page-title .ico { width: 24px; height: 24px; border-radius: var(--r-s); }
.page-title .ico > .g { width: 16px; height: 16px; }
.page-title .ico:hover { outline: 2px solid var(--g3); outline-offset: 2px; }
.page-title h1 { font: 600 clamp(26px, min(5.5vw, calc(var(--page-size) * 2.375)), 44px)/1.15 var(--page-font); letter-spacing: -.02em; text-wrap: balance; outline: none; border-bottom: 1px dotted transparent; min-width: 2ch; }
.page-title h1:focus { border-bottom-color: var(--g4); }
.page-title h1:empty::before { content: "Untitled"; color: var(--g5); }
.empty-canvas { font: var(--nav-text); color: var(--g7); }   /* empty states speak chrome, one sentence (F1) */
/* story 041: "Linked from" at the foot of the page */
.backlinks { margin-top: 48px; padding-top: 12px; border-top: 1px solid var(--g3); font: var(--nav-text); color: var(--g7); letter-spacing: -.005em; }
.backlinks:empty { display: none; }
.backlinks button { font: inherit; color: var(--g8); text-decoration: underline; text-decoration-color: var(--g4); text-underline-offset: 2px; padding: 0; margin-right: 10px; }
.backlinks button:hover { text-decoration-color: var(--g7); color: var(--g9); }
.btn.small.empty-new { margin-top: 16px; }

.pop { display: none; position: absolute; left: 14px; bottom: 52px; width: min(380px, calc(100vw - 28px)); background: var(--g0); border: 1px solid var(--g4); border-radius: var(--r-m); box-shadow: var(--float); z-index: var(--z-pop); overflow: hidden; }
.pop.on { display: flex; flex-direction: column; max-height: min(70vh, calc(100dvh - 16px)); }   /* dialog anatomy (E3): header · scrolling form · footer */
.pop .form { overflow: auto; }
.pop-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--g3); }   /* exit + destructive actions live here (E4) */
.pop-f .muted { margin-right: auto; font: var(--nav-text); color: var(--g7); font-variant-numeric: tabular-nums; }   /* the build number (issue 67) */
.pop-h { height: var(--h-row); display: flex; align-items: center; padding: 0 10px 0 12px; font: var(--nav-type); color: var(--g9); border-bottom: 1px solid var(--g3); }
.pop-h .x { margin-left: auto; width: var(--h-icon); height: var(--h-icon); border-radius: var(--r-s); display: grid; place-items: center; color: var(--g6); }
.pop-h .x:hover { background: var(--g2); color: var(--g8); }
.form { padding: 8px 0 12px; }
.form-block { display: contents; }
.form-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; min-height: var(--h-row); padding: 2px 12px; }
.form-row label { font: var(--nav-type); color: var(--g7); }
.form-row .muted { font: var(--nav-text); color: var(--g7); font-variant-numeric: tabular-nums; }
.form-row > .btn.small { justify-self: start; }
.form-sep { height: 1px; background: var(--g3); margin: 6px 12px; }
.swatches { display: flex; gap: 6px; }
.sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--g4); position: relative; }
.sw.on { border: 2px solid var(--g9); }\n.sw.on::after, .pick-colors button.on::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--paper); }   /* selected = ink ring + paper gap, never the focus ring (D5) */
.row-actions { display: flex; align-items: center; gap: 10px; }
.btn.small { width: auto; height: var(--h-ctl); margin: 0; padding: 0 10px; background: var(--g3); color: var(--g8); }
.btn.small:hover { background: var(--g4); color: var(--g9); }
.pop.style-pop { width: min(340px, calc(100vw - 24px)); }   /* placed by placeFloating; no static offsets */
/* story 040: the outline — a Menu of headings */
.pop.outline-pop { width: min(300px, calc(100vw - 24px)); }
.outline { padding: 4px; display: grid; max-height: min(60vh, 480px); overflow: auto; }
.outline button { height: var(--h-ctl); padding: 0 10px; border-radius: var(--r-s); font: var(--nav-type); text-align: left; color: var(--g8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline button:hover { background: var(--g2); color: var(--g9); }
.outline button.l3 { padding-left: 22px; color: var(--g7); } .outline button.l4 { padding-left: 34px; color: var(--g7); }
.outline .empty { font: var(--nav-text); color: var(--g7); padding: 8px 10px; }
.style-sample-box { padding: 12px 12px 10px; border-bottom: 1px solid var(--g3); }   /* padding lives on the box so the clamp below cuts clean */
.style-sample { margin: 0; font: 400 var(--page-size)/1.5 var(--page-font); color: var(--g9); text-align: var(--page-align); letter-spacing: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.seg button.f-serif { font-family: var(--serif); } .seg button.f-sans { font-family: var(--font); } .seg button.f-mono { font-family: var(--mono); }   /* the Typeface buttons wear their face */
.seg { display: flex; gap: 2px; flex-wrap: wrap; }   /* the Kind row (story 045) wraps to a second line */
.seg button { height: var(--h-ctl); padding: 0 10px; border-radius: var(--r-s); font: var(--nav-type); color: var(--g7); }
.seg button:hover { background: var(--g2); color: var(--g8); }
.seg button.on { background: var(--g3); color: var(--g9); }
.pop.icon-pop { left: 0; top: 34px; bottom: auto; width: min(292px, calc(100vw - 24px)); }
.pop.icon-pop .pick { padding: 10px; }
.pick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pick-grid button { height: var(--h-row); border-radius: var(--r-s); display: grid; place-items: center; color: var(--g8); }
.pick-grid button:hover { background: var(--g2); }
.pick-grid button.on { background: var(--g3); color: var(--g9); }
.pick-colors { display: flex; gap: 8px; padding: 12px 6px 4px; border-top: 1px solid var(--g3); margin-top: 10px; }
.pick-colors button { width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 1px solid var(--g4); position: relative; }
.pick-colors button.on { border: 2px solid var(--g9); }

/* ===== assist panel (story 007) — part of the page sheet ===== */
.assist { display: flex; flex-direction: column; min-width: 0; background: var(--paper); border-left: 1px solid var(--g3); border-radius: 0 var(--r-l) var(--r-l) 0; margin: 8px 8px 8px 0; overflow: hidden; font: var(--nav-type); }
.app.assist-off .assist, .app.no-page .assist { display: none; }   /* a closed column leaves layout entirely (A1) */
.assist-tabs { height: var(--h-head); flex: none; display: flex; align-items: center; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--g3); }
.assist .tab { height: var(--h-ctl); padding: 0 8px; border-radius: var(--r-s); font: var(--nav-type); color: var(--g7); }
.assist .assist-close { display: none; margin-left: auto; width: var(--h-ctl); padding: 0; place-items: center; }
.assist .tab:hover { background: var(--g2); color: var(--g8); }
.assist .tab.on { color: var(--g9); background: var(--g3); }
.assist-body { flex: 1; overflow: auto; padding: 12px 16px 16px; }
.page-line { font: var(--nav-text); color: var(--g7); padding: 0 0 8px; }
.assist .seg.lang { display: grid; grid-template-columns: repeat(3, 1fr); margin: -2px 0 10px -8px; }   /* equal cells, not a wrapping segment (F2) */
.assist .panel .seg.lang { margin: 0 0 6px 0; }
.assist .panel .seg.five { grid-template-columns: repeat(5, 1fr); }
.assist .panel .seg.three { grid-template-columns: repeat(3, 1fr); }   /* story 055: nine directions in three rows */
.assist .seg.lang.two { grid-template-columns: repeat(2, 1fr); }   /* story 044: the Check focus */
.assist .panel .seg.five button { padding: 0 4px; }
/* story 037: the Suggest tab as the ghost's home */
.assist .cap.row-set { display: flex; align-items: center; justify-content: space-between; }
.assist #ghostStatus { min-height: 2.6em; }   /* two lines: the state changes must not shift the settings below */
.assist .tick.busy { animation: assist-pulse 1.2s ease-in-out infinite; }
@keyframes assist-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .assist .tick.busy { animation: none; } }
.assist .keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; margin: 0 0 8px; font: var(--nav-text); color: var(--g7); }
.assist .keys kbd { font: var(--nav-text); color: var(--g8); white-space: nowrap; }
.assist .anchor { position: relative; padding: 2px 0 2px 12px; margin-bottom: 14px; }
.assist .anchor .tick { position: absolute; left: -17px; top: 10px; width: 25px; height: 1px; background: var(--g5); }
.assist .anchor .tick.dot { border-top: 1px dotted var(--g5); background: none; height: 0; }
.assist .cap { font: var(--nav-type); color: var(--g8); margin: 0 0 6px; }
.assist .cap span { color: var(--g7); }
.assist .note { font: var(--nav-text); color: var(--g7); padding: 0 0 6px; margin: 0; }
/* story 036: sticky Read notes — done stays in place, dimmed with a check; dismiss shows on hover; "Read again" is a link in the hint */
.assist .anchor.done { opacity: .55; }
.assist .anchor.done .mirror { text-decoration: line-through; text-decoration-color: var(--g5); }
.assist .cap .i-check { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; color: var(--g7); }
.assist .dismiss { float: right; width: 18px; height: 16px; display: inline-grid; place-items: center; color: var(--g6); border-radius: var(--r-xs); opacity: 0; transition: opacity 120ms ease-out; }
.assist .dismiss .i { width: 12px; height: 12px; }
.assist .anchor:hover .dismiss, .assist .dismiss:focus-visible { opacity: 1; }   /* story 060 */
.assist .dismiss:hover { background: var(--g3); color: var(--g8); }
.assist .hint.reread { color: var(--g8); }
.assist .hint .link { font: inherit; color: var(--g8); text-decoration: underline; text-decoration-color: var(--g5); text-underline-offset: 2px; }
.assist .hint .link:hover { text-decoration-color: var(--g8); }
.assist .note.err { color: var(--danger); }
.row-m { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 6px 8px; margin: 0 0 2px -8px; border-radius: var(--r-s); text-align: left; color: var(--g8); }
.row-m:hover { background: var(--g2); }
.row-m.on { background: var(--g3); color: var(--g9); }
.row-m .m { flex: 1; font: 400 12.5px/1.5 var(--mono); }
.row-m .m s { display: block; color: var(--g7); }   /* check rows: old struck through above the fix — a layout, not an arrow (C5) */
.row-m .m .fix { display: block; font-weight: 400; }
.row-m .ret { font: var(--nav-type); color: var(--g7); visibility: hidden; }
.row-m.on .ret, .row-m:hover .ret { visibility: visible; }
.assist .mirror { font: 400 12.5px/1.6 var(--mono); color: var(--g8); margin: 0 0 10px; white-space: pre-wrap; }
.assist .hint { font: var(--nav-text); color: var(--g7); margin-top: 6px; }
.assist .btn.small { width: auto; }
.head-mode { display: none; font: var(--nav-type); color: var(--g7); }
.app.assist-off .head-mode { display: inline; }
/* --- touch: reveal hover-only controls, grow targets, stop iOS input zoom --- */
@media (hover: none) {
  .row .act { display: flex; }
  .row .name { padding-right: 52px; }
  .row-m .ret { visibility: visible; }
}
@media (pointer: coarse) {   /* touch = 40px for everything interactive (D1/G4): the tokens move, components don't */
  :root { --h-icon: 40px; --h-ctl: 40px; --h-row: 40px; }
  .head-btn { padding: 0 10px; }
  input, select { font-size: 16px; }   /* no iOS zoom */
}

/* --- the panel is NEVER on top of the text: a narrower column while the measure
       floor holds (MIN_MEASURE in src/ui/bp.ts), the bottom sheet below that.
       Widths: <1440 · <1200 · <720 — the five named breakpoints only (G1). --- */
@media (max-width: 1439px) { .app { --assist: 320px; } }
@media (max-width: 1199px) { .app { --assist: 300px; } }
@media (max-width: 719px) { .app { --assist: 260px; } }

/* --- .app.panel-sheet (set by JS from the measure floor, not from the viewport): the
       panel docks as a low bottom-right sheet; the writing stays visible above it --- */
.app.panel-sheet { grid-template-columns: var(--nav) minmax(0, 1fr); }
.app.panel-sheet .work { border-radius: var(--r-l); margin-right: 8px; }
.app.panel-sheet .assist { position: absolute; left: auto; right: 8px; bottom: 0; width: min(380px, calc(100vw - 16px));
          height: min(38dvh, 360px); margin: 0; border: 1px solid var(--g4); border-bottom: 0;
          border-radius: var(--r-l) var(--r-l) 0 0; box-shadow: var(--float); z-index: var(--z-sheet); }
.app.panel-sheet:not(.assist-off) .assist { animation: sheet-up 260ms ease-out; }
.app.panel-sheet:not(.assist-off) .canvas { padding-bottom: calc(38dvh + 40px); }  /* the caret can always scroll above the sheet */
.app.panel-sheet .assist .assist-close { display: grid; }   /* the ✕ belongs to the sheet only — the column uses the head toggle */
@keyframes sheet-up { from { transform: translateY(100%); } }

/* --- icon rail: class-driven so it serves both worlds. JS adds .rail when the
       viewport is <1024 (forced) or the user collapses the nav on desktop
       (avatar click / ⌘\, persisted). .nav-open expands it back to a temporary
       224px slide-over on small screens. <640 there is no rail at all: the
       avatar moves into the header row and opens the same slide-over (G2). --- */
.head-menu { display: none; margin-right: 2px; }
.nav-top .avatar { cursor: pointer; position: relative; }
.nav-top .avatar::after { content: ""; position: absolute; inset: -14px; }
.app.rail { --nav: 56px; }
.app.rail:not(.nav-open) .nav-top .brand, .app.rail:not(.nav-open) .section .label, .app.rail:not(.nav-open) .row .name,
.app.rail:not(.nav-open) .row .pad, .app.rail:not(.nav-open) .nav-foot .foot > span:last-child { display: none; }
.app.rail:not(.nav-open) .row .act { display: none !important; }
.app.rail:not(.nav-open) .section { justify-content: center; padding: 8px 0 4px; }
.app.rail:not(.nav-open) .nav-top { justify-content: center; padding: 0; }
.app.rail:not(.nav-open) .add-root { margin-left: 0; }
.app.rail:not(.nav-open) .row { justify-content: center; padding: 0; gap: 0; }
.app.rail:not(.nav-open) .menu { right: auto; left: 6px; }
.app.rail:not(.nav-open) .nav-foot .foot { justify-content: center; padding: 0; gap: 0; }
.app.rail.nav-open::before { content: ""; position: absolute; inset: 0; background: var(--scrim); z-index: var(--z-scrim); }   /* the slide-over dims the page (E5) */
.app { position: relative; }
.app.rail.nav-open .nav { width: 224px; z-index: var(--z-overlay); background: var(--g2); box-shadow: var(--float); }

/* --- <720: phone spacing --- */
@media (max-width: 719px) {
  .work { --edge: 20px; }
  .canvas { padding: 28px var(--edge) 80px; }
  .head { padding-right: 10px; }
  .work { margin: 6px 6px 6px 2px; }
  .app.assist-off .work, .work { margin-right: 6px; }
}
/* --- <640: no rail; the header carries the menu button --- */
@media (max-width: 639px) {
  .app.rail { --nav: 0px; }
  .app.rail:not(.nav-open) .nav { display: none; }
  .head-menu { display: grid; place-items: center; }
  .app.rail .work { margin-left: 6px; }
}

.pwr { width: 28px; height: 18px; border-radius: 9px; background: var(--g9); position: relative; flex: none; }
.pwr::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--g0); }
.pwr.off { background: var(--g4); }
.pwr.off::after { right: auto; left: 2px; }
.row-actions select { max-width: 150px; }

/* ===== print: the page, nothing but the page ===== */
@media print {
  body { background: var(--g0); }
  .nav, .assist, .head, .gut, .pop, .menu { display: none !important; }
  .app { display: block; height: auto; }
  .work { margin: 0; border-radius: 0; overflow: visible; }
  .canvas { overflow: visible; padding: 0; }
}

/* ===== landing (story 010) ===== */
.lp { min-height: 100vh; background: var(--g1); display: flex; flex-direction: column; }
.lp-top { height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 var(--gutter); }
.lp-mark { display: flex; align-items: center; gap: 8px; font: 600 15px var(--font); letter-spacing: -.01em; }
.lp-nav { margin-left: auto; display: flex; align-items: center; gap: 16px; font: var(--nav-type); }
.lp-nav a { text-decoration: none; color: var(--g7); }
.lp-nav a:hover { color: var(--g9); }
.lp .btn { width: auto; margin: 0; }
.lp-cta { text-decoration: none; padding: 0 14px; }
.lp-hero { padding: 72px var(--gutter) 40px; max-width: none; }
.lp-beta { font: var(--nav-type); color: var(--g7); margin-bottom: 12px; }
.lp-hero h1 { font: 600 44px/1.15 var(--serif); letter-spacing: -.02em; text-wrap: balance; max-width: 21ch; margin: 0 0 20px; }
.lp-lead { font: 400 17px/1.65 var(--font); color: var(--g7); text-wrap: pretty; max-width: 58ch; margin: 0 0 24px; }
.lp-actions { display: flex; align-items: center; gap: 14px; }
.lp-quiet { font: var(--nav-text); color: var(--g7); }
.lp-feel { padding: 24px var(--gutter) 8px; }
.lp-page { background: var(--g0); border-radius: var(--r-l); padding: 36px 40px 28px; }
.lp-serif { font: 400 18px/1.7 var(--serif); max-width: 62ch; }
.lp-ghost { font-family: var(--mono); font-size: .85em; color: var(--g5); border-bottom: 1px dotted var(--g4); }
.lp-tab { font: var(--nav-type); color: var(--g4); margin-left: 6px; }
.lp-cap { font: var(--nav-text); color: var(--g7); margin-top: 16px; }
.lp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 32px var(--gutter) 48px; }
.lp-plan { background: var(--g0); border-radius: var(--r-l); padding: 28px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.lp-plan h2 { font: 600 18px var(--font); letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.lp-badge { font: var(--nav-type); color: var(--g0); background: var(--g8); border-radius: var(--r-s); padding: 3px 7px; }
.lp-price { font: 600 30px/1 var(--serif); font-variant-numeric: tabular-nums; }
.lp-price span { font: var(--nav-type); color: var(--g7); }
.lp-tag { font: var(--nav-type); color: var(--g7); }
.lp-plan ul { list-style: none; display: grid; gap: 6px; margin: 4px 0 10px; }
.lp-plan li { font: 400 13px/1.5 var(--font); color: var(--g7); padding-left: 18px; position: relative; }
.lp-plan li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 1px; background: var(--g6); }
.lp-plan .btn { text-decoration: none; padding: 0 14px; }
.lp-foot { margin-top: auto; display: flex; gap: 12px; align-items: baseline; padding: 20px var(--gutter); font: var(--nav-type); color: var(--g7); border-top: 1px solid var(--g3); }
@media (max-width: 719px) { .lp-plans { grid-template-columns: 1fr; } .lp-hero h1 { font-size: 32px; } }

/* ===== admin (story 011) ===== */
.adm { min-height: 100vh; min-height: 100dvh; background: var(--g1); }
.adm-main { padding: 24px var(--gutter) 64px; display: grid; gap: 28px; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.adm-stat { background: var(--g0); border-radius: var(--r-m); padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.adm-stat .k { font: var(--nav-type); color: var(--g7); }
.adm-stat .v { font: 600 22px/1 var(--serif); font-variant-numeric: tabular-nums; }
.adm-h { font: 600 15px var(--font); margin: 0 0 10px; }
.adm-scroll { overflow-x: auto; border-radius: var(--r-m); }
.adm-tbl { width: 100%; border-collapse: collapse; background: var(--g0); border-radius: var(--r-m); overflow: hidden; }
.adm-tbl th, .adm-tbl td { text-align: left; font: var(--nav-type); font-variant-numeric: tabular-nums; padding: 8px 12px; border-bottom: 1px solid var(--g2); }
.adm-tbl th { color: var(--g7); background: var(--g2); }
.adm-tbl .routeId { width: 240px; }
.adm-tbl .muted { color: var(--g7); }
.adm-tbl .muted.err { color: var(--danger); }

/* ===== print (story 038): the writing column only ===== */
@media print {
  body { background: #fff; }
  .app { display: block; height: auto; overflow: visible; }
  .nav, .assist, .head, .gut, .selbox, .fmt, .slash, .linkpop, .bmenu, .pop, .tadd, .rowh, .colh, .cadd { display: none !important; }
  .work { margin: 0; border-radius: 0; overflow: visible; }
  .canvas { overflow: visible; padding: 0; }
  .measure { max-width: none; }
  .page-title .ico { display: none; }
  .ed .ghost, .ed .chk { display: none; }
  .code { overflow: visible; white-space: pre-wrap; }
  .code code { white-space: pre-wrap; }
}

/* ===== story 049: the public share page + comments ===== */
.pub { min-height: 100dvh; background: var(--paper); padding: 48px 24px 96px; }
.pub .measure { position: relative; }
.pub-title { font: 600 clamp(26px, 5.5vw, 40px)/1.15 var(--page-font); letter-spacing: -.02em; text-wrap: balance; margin: 0 0 28px; color: var(--g9); }
.pub-foot { font: var(--nav-text); color: var(--g7); margin-top: 48px; padding-top: 12px; border-top: 1px solid var(--g3); }
.pub .blk { position: relative; }
.cmt-btn { position: absolute; left: -36px; top: 2px; min-width: var(--h-icon); height: var(--h-icon); padding: 0 6px; border-radius: var(--r-s); font: var(--nav-type); color: var(--g6); opacity: 0; transition: opacity 120ms ease-out; }
.pub .blk:hover .cmt-btn, .cmt-btn:focus-visible { opacity: 1; }
.cmt-btn:hover { background: var(--g3); color: var(--g8); }
.cmts { margin: 4px 0 12px; padding-left: 12px; border-left: 2px solid var(--g3); display: grid; gap: 8px; }
.cmt .who { font: var(--nav-type); color: var(--g8); }
.cmt .muted { color: var(--g7); font-weight: 400; }
.cmt p { font: var(--nav-text); color: var(--g8); margin: 2px 0 0; white-space: pre-wrap; }
.cmt-form { margin: 4px 0 12px; display: grid; gap: 6px; max-width: 420px; }
.cmt-form textarea { padding: 6px 8px; border: 1px solid var(--g4); border-radius: var(--r-s); background: var(--paper); font: var(--nav-text); color: var(--g8); resize: vertical; }
.cmt-form input { width: 200px; }
/* the writer's side: a block with an open comment carries a dot in the gutter; comment rows in Read */
.blk.cmt > .gut::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--g7); align-self: center; margin-right: 2px; }
.blk.cmt > .gut { opacity: 1; }
.assist .anchor.comment .mirror { font-family: var(--font); font-size: 13px; }

/* ===== story 051: translated pages ===== */
.trans-line { font: var(--nav-text); color: var(--g7); margin: -16px 0 20px; letter-spacing: -.005em; }
.trans-line .link { font: inherit; color: var(--g8); text-decoration: underline; text-decoration-color: var(--g4); text-underline-offset: 2px; padding: 0; }
.trans-line .link:hover { color: var(--g9); text-decoration-color: var(--g7); }
.blk.stale > .gut::before { content: ""; width: 5px; height: 5px; border-radius: 50%; border: 1.5px solid var(--g7); box-sizing: border-box; align-self: center; margin-right: 2px; }
.blk.stale > .gut { opacity: 1; }

/* ===== story 052: the Ask tab ===== */
.askform { display: grid; gap: 6px; margin: 0 0 14px; }
.askform textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--g4); border-radius: var(--r-s); background: var(--paper); font: var(--nav-text); color: var(--g9); resize: vertical; }
.askform .note { margin: 0; }
.assist .ask-answer { font-family: var(--font); font-size: 13px; }
.assist .cite { font: inherit; color: var(--g8); text-decoration: underline; text-decoration-color: var(--g5); text-underline-offset: 2px; padding: 0 1px; }
.assist .cite:hover { color: var(--g9); background: var(--g2); border-radius: var(--r-xs); }
.assist .cite-row .m { font: var(--nav-text); }
.assist .cite-row .snip { display: block; color: var(--g7); }

/* ===== story 053: sources and drift ===== */
.row.drift .name::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; border: 1.5px solid var(--g7); box-sizing: border-box; margin-left: 6px; vertical-align: 1px; }
.src-row label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g8); }
.src-row .muted.changed { color: var(--g9); }
.members .form-row, .search-box .form-row.src-row { grid-template-columns: 160px 1fr; }