(MarkdownRenderer wraps them). Give each a scroll anchor margin so goToDoc()'s scrollIntoView doesn't tuck the heading under the sticky tab bar, and make it a positioning context for margin flags. Both the rendered sections and the mockup's .sec class are covered. .margin-flag-host wraps a heading-less body so orphan flags still pin at top. */ .sec, .paper .md-prose > section, .paper .md-prose .margin-flag-host { position: relative; scroll-margin-top: 1.5rem; } /* Preview margin flags (Tom Prototype 6) — hard-coded brass/green on always-white paper (same posture as .hl). Multi-flag stack uses inline top: 1 + i*36 px. */ .paper .flag { position: absolute; left: -52px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; border: 1px solid; transition: 0.15s; cursor: pointer; padding: 0; margin: 0; line-height: 0; z-index: 2; } .paper .flag svg { width: 15px; height: 15px; } .paper .flag.open { color: #9a6f24; background: rgba(205, 159, 94, 0.18); border-color: rgba(205, 159, 94, 0.5); } .paper .flag.open:hover { background: rgba(205, 159, 94, 0.3); } .paper .flag.closed { color: #4f7a58; background: rgba(127, 168, 134, 0.16); border-color: rgba(127, 168, 134, 0.45); } .paper .flag.closed:hover { background: rgba(127, 168, 134, 0.26); } /* WS2b — the jump-and-flash pulse. goToDoc() adds .flash to the target section after a forced reflow (void el.offsetWidth) so a repeat jump to the SAME section re-triggers the animation (Tom's mockup mechanic). */ @keyframes flash { 0%, 100% { background: transparent; } 22% { background: rgba(205, 159, 94, 0.16); } } .sec.flash, .paper .md-prose > section.flash { animation: flash 1.4s ease; } /* WS5 — the same jump-and-flash pulse for a question card, when goToQuestion() lands on it from a chat reference / persistent URL. Its own class (the .flash selectors above are preview-section-scoped); rounded to match the card. */ .q-flash { animation: flash 1.4s ease; border-radius: var(--radius-lg); } /* WS2b — persistent passage highlights WS4 (Charles citations) and WS5 (question anchors) wrap around a quoted span in the preview. Fixed amber (default) / green so they read on the always-white paper. */ .hl { background: rgba(205, 159, 94, 0.26); border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 1px rgba(205, 159, 94, 0.4); } .hl.green { background: rgba(127, 168, 134, 0.22); box-shadow: 0 0 0 1px rgba(127, 168, 134, 0.4); } /* ── Document Library table (ticket #230, Tom 2026-07-18 items #1/#2) ────────── Reference: docs/2026-07-14 Brenmere - Prototype 5 (client side) - Documents update.html (.dms-th / .dms-row). "each line is uniform height and if fields don't fit they are hidden with ellipses rather than wrapping onto a second line." Tailwind's `truncate` handles one element; a TABLE needs the rule on the cell itself, because a

is the wrapping box. Paired with table-layout:fixed and a width on every column (a
ONLY. A filterable	holds shared/_filterable_th, whose root is an `inline-flex` wrapper around a `w-full justify-between` button with an opacity-0 hover chevron pinned to its right edge. That wrapper is an atomic inline box that overflows the header's line box (measured on Version: scrollWidth 108 vs clientWidth 78), so text-overflow painted a stray "…" over content that is invisible anyway — a floating dot sitting between VERSION and LAST MODIFIED in every header row. Header labels are short and already clip cleanly under overflow:hidden, so dropping the ellipsis there costs nothing. / .doc-table th, .doc-table td { overflow: hidden; white-space: nowrap; } .doc-table td { text-overflow: ellipsis; } .doc-table th.doc-cell-open, .doc-table td.doc-cell-open { overflow: visible; } / Uniform row height. Every row is one band tall whatever it holds — a status pill, the notes input, the kebab — so the eye tracks straight across. */ .doc-table tbody tr { height: 3.25rem; }

is the wrapping box. Paired with table-layout:fixed and a width on every column (a

ONLY. A filterable

holds shared/_filterable_th, whose root is an `inline-flex` wrapper around a `w-full justify-between` button with an opacity-0 hover chevron pinned to its right edge. That wrapper is an atomic inline box that overflows the header's line box (measured on Version: scrollWidth 108 vs clientWidth 78), so text-overflow painted a stray "…" over content that is invisible anyway — a floating dot sitting between VERSION and LAST MODIFIED in every header row. Header labels are short and already clip cleanly under overflow:hidden, so dropping the ellipsis there costs nothing. */ .doc-table th, .doc-table td { overflow: hidden; white-space: nowrap; } .doc-table td { text-overflow: ellipsis; } .doc-table th.doc-cell-open, .doc-table td.doc-cell-open { overflow: visible; } /* Uniform row height. Every row is one band tall whatever it holds — a status pill, the notes input, the kebab — so the eye tracks straight across. */ .doc-table tbody tr { height: 3.25rem; }