/* sv3v2.css — SV3 · NOTES FOCUS DRAWER v3, task #7154 / walk 48 repair. #7207 follow-up (2026-09-04): THE THREE-COLUMN BAND IS DELETED. READ THIS FIRST. ══ WHAT THE DRAWER IS NOW · ONE VERTICAL STACK, ON EVERY SURFACE ══════════ Founder, verbatim: "that drawer in the app is so ugly. i hate how its like main drawer | comments/designs/suggestions buttons | teleport stuff... IT SHOULD NOT HAVE COLUMNS, we have the main drawer then below we have little buttons to show comments, show designs (and teleport options here), and suggestions on the bottom of the main drawer." So the drawer is, top to bottom, at every width and every height: 1. THE NOTE — the identity head and the note field. 2. THE BUTTON ROW — three LITTLE BUTTONS (COMMENTS · DESIGNS · SUGGESTIONS) in one horizontal row under the note, each carrying its live count. 3. THE OPENED SECTION — reveals directly under the button row; one open at a time. TELEPORT LIVES INSIDE THE DESIGNS SECTION: the Teleport up / Update lays / Teleport down verbs and their reasons sit above the designs list, painted there by sv3-notes-drawer-teleport.js. There is no teleport cell of its own any more. 4. THE DELETE ROW — pinned to the bottom; the drawer's slack sits above it. ── WHY THE GRID DIED, AND WHY IT IS NOT COMING BACK ────────────────────── Until #7207 the band form factor (`ff-h` without `tight`: any drawer under 420px tall and 560px or wider — i.e. the app's resting dock at EVERY desktop width) was a 3-column CSS grid: IDENT+NOTE at a fixed `--idw` 300px · the accordion in a 1fr middle · TELEPORT at a fixed `--tpw` 240px. The other two form factors (`ff-side`, the browser's side column; `ff-h tight`, the narrow band) were already this vertical stack. So this change DELETES one form factor rather than inventing one — and that grid was the cause of most of walk 48's defects, because it created WIDTH CONTENTION that a stack cannot have: · two fixed-width outer cells starved the middle to 60px at a 600px band, and the summary rows rendered COMME / DESIG / SUGGE, clipped mid-word (walk 48 defect 3) — it survived every self-truncation check because `.nsd-sum .nm` is flex-shrink:0 and overflows its PARENT; · the teleport cell competed with the comment thread for the drawer's HEIGHT, which is what forced the four compaction levels (211/103/77/25px at the founder's cell), the WHY affordance, the RULING 1-C lift, the height cap that #7207 tried and reverted (642-800 DOM mutations/sec: a bistable layout across a level boundary), and the "4 comments vs 3" trade ORCH had to rule on; · three 22px summary rows plus a pinned cell cost ~90px of a 407px dock before one comment was shown — ONE whole comment was the arithmetic ceiling at the founder's own window. A vertical stack has no width contention to arbitrate: every region gets the full width, the three rows become one 34px row, and the teleport cell's 25-211px go back to the section the founder opened. Nothing here reads a form factor class for LAYOUT any more: `ff-h`, `ff-side` and `tight` are still stamped by notes- (write-once) and are simply inert. The width rules that used to hang off `ff-h tight` hang off `nsd-narrow`, which NSD-FIT writes from the box's own clientWidth. ══ THE LAW THIS FILE ENFORCES ═════════════════════════════════════════════ The founder's rule, 2026-09-02, has TWO clauses and they are read together: (1) "ALL INFO IN THAT NOTE FOCUS DRAWER MUST BE VISIBLE AT A GLANCE" (2) "NO SCROLL BAR ON NOTES FOCUS DRAWER ON EITHER APP OR BROWSER FOR ANY SV LEVEL" Clause (2) constrains HOW (1) is satisfied. It is NOT permission to delete content, and it is NOT permission to paint a scrollbar out. A region may render SMALLER than its content ONLY IF a visible, labelled pager lives in that region and can reach every hidden part. · Silent clipping is a BUILD FAILURE. · `overflow:hidden` with scrollHeight > clientHeight and no pager IS THE BUG. Not a styling detail — the bug itself. · `::-webkit-scrollbar{width:0;height:0}` is BANNED in this subtree: it hides evidence. The one copy in the notes-.jsx injected sheet (an immutable asset) is DELETED FROM THE CSSOM AT RUN TIME by NSD-FIT. · A REFUSED LAY IS NEVER HIDDEN (walk 48 defect 10). With teleport inside the DESIGNS section, the refusal is ANNOUNCED on the DESIGNS button itself (`.nsd-sum-flag`, written by the teleport module) while the section is closed, and the sentence is whole inside it when open. ── ALLOCATION PRIORITY when space is short ─────────────────────────────── Implemented in sv3-notes-drawer-teleport.js (§ NSD-FIT), which measures and writes the custom properties this file consumes. Nothing here guesses a number. Earlier items keep their pixels first: 1. NOTE TEXT — minimum 3 WHOLE lines; its client box is ALWAYS an integer multiple of its line-height (the air is BORDER, not padding — see § the note). Overflow goes to the shipped "Show rest" pager, whole lines. 2. THE BUTTON ROW — always fully visible and hit-testable. Navigation. 3. THE OPEN SECTION BODY — the rest, minimum ONE WHOLE item, then a counted pager ("1–2 of 4") for whatever it cannot show. The teleport verbs are part of the DESIGNS body and are sized with it. 4. DELETE ROW — above any fixed chrome, never underneath it. Slack, when there is any, goes back UP the ladder to the note in whole lines; what the note cannot spend sits above the pinned delete row. ── WHY NO REGION'S HEIGHT IS WRITTEN AS A CONSTANT ─────────────────────── v2.1 carried fifteen hand-measured pixel constants, each correct for exactly one viewport and one state. The matrix is 8 viewports × 4 accordion states × 2 content shapes × 2 surfaces × 2 rail states. Heights come from measurement at run time, and the engine converges in at most seven passes and then STOPS (a pass that decides the same allocation twice is the last one). SCOPE: everything is under .nsd-drawer.sv3-hero. SV1/SV2 keep the rail they shipped with (version-consistency rule: one implementation adopted per rung, never a fork). Un-gating is deleting `.sv3-hero` from these selectors. */ .nsd-drawer.rail.sv3-hero { --ms: var(--ndt-ms, 170ms); --bg-row-h: var(--bg-row-hover, #3A3B43); /* the fit engine's outputs. The fallbacks are only what renders in the one frame before the first measurement lands; nothing steady-state uses them. */ --nsd-note-h: auto; --nsd-secs-h: auto; --nsd-body-h: auto; --nsd-thread-h: auto; /* the note field's vertical AIR (border, not padding — § the note): its base per compaction tier, plus the sub-line residual the engine could not spend anywhere else (§ write / roomToType in the engine). */ --nsd-air-base: 9px; --nsd-air-t: 0px; --nsd-air-b: 0px; min-height: 0; } @media (prefers-reduced-motion: reduce) { .nsd-drawer.rail.sv3-hero { --ms: 0ms } } /* ══ EVIDENCE IS NEVER PAINTED OUT ═════════════════════════════════════════ notes-.jsx (WRITE-ONCE, cannot be edited in place) injects `.nsd-drawer.rail.sv3-hero::-webkit-scrollbar{width:0;height:0}` into #nsd-styles, which is appended to after every and therefore beats an equal-specificity rule here. Out-specifying it was NOT ENOUGH and the gate proved it: 128 of 128 cells red on assertion F, because the banned rule was still IN the sheet — one added class away from winning again, and readable by anyone auditing the CSSOM as proof that this subtree still paints its evidence out. NSD-FIT (§ unbanScrollbars) now DELETES that rule from the live sheet instead; the immutable file is never touched. These three are what remains, and they are the positive statement: if a scrollbar ever appears in this drawer it is a defect, and it must be SEEN. */ .nsd-drawer.rail.sv3-hero.nsd-v2::-webkit-scrollbar, .nsd-drawer.sv3-hero.nsd-v2 .nsd-txt::-webkit-scrollbar, .nsd-drawer.sv3-hero.nsd-v2 .nsd-thread::-webkit-scrollbar { width: 9px; height: 9px; } .nsd-drawer.rail.sv3-hero.nsd-v2::-webkit-scrollbar-thumb, .nsd-drawer.sv3-hero.nsd-v2 .nsd-txt::-webkit-scrollbar-thumb, .nsd-drawer.sv3-hero.nsd-v2 .nsd-thread::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; } /* and the drawer itself: it must never be the thing that scrolls. If the fit engine has done its job this is unreachable; if it has not, `nsd-overflow` below makes the failure loud instead of silent. */ .nsd-drawer.sv3-hero.nsd-v2 { overflow: hidden; min-height: 0 } /* ══ RULING 1-C ON THE BROWSER SURFACE · THE DRAWER CLAIMS ITS COLUMN ══════ ORCH, walk 48 round 4: "It applies to BOTH surfaces. The browser currently expands in 0 of 8 cells; that is the bug." MEASURED, 2026-09-03, closed vs COMMENTS-open, IDENTICAL RECTS in all eight: 1280x800 [888,240,392,560] · 1440x900 [1048,240,392,660] 1500x900 [1108,240,392,660] · 1920x1200 [1528,240,392,960] RULING 1 shipped as a `layout-v` rule in drawer-bottom.css — the bottom dock — and the browser surface is `layout-h`, a side rail, so not one line of it was ever reachable there. NSD-FIT was publishing `--nsd-open-h: 1082px` at 1280x800 into a stylesheet that had nothing to read it. WHAT THE 240px ABOVE THE DRAWER ACTUALLY IS, measured at 1280x800: header.ss-topbar [0, 0,1280, 78] the app's own chrome div.ss-master-timeline [0, 78,1280,162] the waveform / cue strip div.ns-wrap [0,240,1280,560] ← the drawer's flex line starts here 162 of those 240 are content the founder is not looking at while he reads one note's comments; the other 78 are the app's fixed chrome. This rule claims the 162 and leaves the 78, which is the SAME trade the app surface makes: the founder's own arithmetic for his 780x848 window counts the 89px header and the 67px footer as immovable and puts the target at 848 − 89 − 67 = 692. The chrome is chrome on both surfaces; the content column is what the drawer takes. At 1280x800 that is 78 → 800, i.e. 722px against today's 560. THE MECHANISM IS A NEGATIVE CROSS-AXIS MARGIN, AND IT IS CHOSEN PRECISELY BECAUSE IT CANNOT FEED BACK. `.ns-mainwrap.layout-h` is a ROW: the drawer's height comes from `align-items: stretch`, which is the flex line's cross size MINUS the item's cross-axis margins. A margin-top of −162px therefore makes the drawer 722px tall and starts it 162px higher, and its OUTER cross size — 722 + (−162) = 560 — is bit-for-bit what it was before. So the flex line cannot notice, `.ns-mainwrap` does not move, `.ns-main` does not change width or height, and the number this rule reads is not a function of anything this rule changes. An absolutely-positioned drawer would have been the obvious alternative and is the wrong one: it leaves `.nsd-slot` with no in-flow child, the slot collapses to 0px wide, and the cue list re-flows across the full 1280 every time a section opens. ⛔ ROUND 5 CORRECTS THE PARAGRAPH ABOVE. "162 of those 240 are content the founder is not looking at" WAS NEVER MEASURED, AND IT IS FALSE. Those 162px are div.ss-master-timeline and they carry live controls. Measured on the rich fixture with COMMENTS open: overlap 392x162 at 1280x800, 1440x900 and 1500x900 and 392x122 at 1920x1200; mtCoveredPx 0 -> 63504; and at 1280x800 the Ingest button's rect [1103,209,62,24] is bit-for-bit unchanged in both states while elementFromPoint at its centre returns BUTTON.nt-btn closed and TEXTAREA.nsd-txt open. Export and the '?' the same. Three live controls dead, because a premise was asserted instead of measured. ORCH's round 5 ruling: "NOTHING YOU NEED MAY BE COVERED, EVEN AT THE COST OF THE FOURTH COMMENT." `--nsd-lift` IS WRITTEN BY NSD-FIT (§ publishLift / § spaceCeiling), not by CSS, and it is now capped at the MEASURED BOTTOM EDGE OF WHATEVER ALREADY OWNS THE SPACE above the drawer's flex line — found by walking `.ss-stage` for the visible boxes that overlap this rail's own column and end at or above that line, and taking the lowest of them. On today's layout that box is the master timeline and its bottom is the flex line itself, so the free space is 0, the rail does not climb, and the strip and its three controls are never covered in any state at any width. No constant encodes 162 or 240: remove the strip and the rail climbs to the stage's own top; add another and it stops under that one. It is additionally capped at what the open section actually asks for, so a drawer that needs 80px does not claim more and sit on air (assertion S). Nothing is published while no section is open, so `var(--nsd-lift, 0px)` is 0 and this rule is inert — which is what "closing the section restores everything" means here. z-index 2 is the ONLY thing that says "over", and it is stated rather than inherited from tree order so that a future z-index on the master timeline cannot silently put the founder's comments underneath a waveform. */ .ns-mainwrap.layout-h > .nsd-slot > .nsd-drawer.rail.sv3-hero.sec-open { margin-top: calc(-1 * var(--nsd-lift, 0px)); z-index: 2; transition: margin-top var(--ms, 170ms) ease; } @media (prefers-reduced-motion: reduce) { .ns-mainwrap.layout-h > .nsd-slot > .nsd-drawer.rail.sv3-hero.sec-open { transition: none } } /* ── the note ────────────────────────────────────────────────────────────── THE AIR IS BORDER, NOT PADDING, and that is the whole fix for the sliced glyphs. A textarea's clientHeight includes its vertical padding, so `height = 4 lines + 22px of padding` gave a 4.06-line client box: the pager moves the view by clientHeight, so every page after the first started 0.06 of a line low and the founder saw letters cut through their middle. Border is OUTSIDE clientHeight. With vertical padding at zero the client box is exactly `lines × line-height`, the pager lands on line boundaries, and the 9px of visual air is drawn by a border painted in the field's own background. The 1px frame is an outline (no layout cost) so the two cannot fight. line-height is an INTEGER px for the same reason: 1.55 × 13.5 = 20.925 could never be multiplied into a whole number of pixels. */ .nsd-drawer.sv3-hero .nsd-note { flex: 0 0 auto; min-height: 0; min-width: 0 } .nsd-drawer.sv3-hero.nsd-v2 .nsd-txt, .nsd-drawer.sv3-hero .nsd-txt { line-height: var(--nsd-lh, 20px); padding: 0 12px; border: 9px solid var(--bg-deep); border-left-width: 1px; border-right-width: 1px; /* THE RESIDUAL LIVES IN THE FIELD'S AIR, NOT ABOVE THE DELETE ROW. When the ladder is paging something and has a few pixels left that no region can spend whole (under one 20px line; under one comment), those pixels used to sit as a band of nothing above the pinned delete row — 25-45px once the paddings either side were added, in 17 cells of the old layout, while a pager in the same drawer said there was no room (assertion S). The engine now splits that residual into the field's top and bottom border, which is the field looking a little taller and its text no less whole: border is OUTSIDE clientHeight, so the whole-line guarantee is untouched. Nothing is written while nothing pages. */ border-top-width: calc(var(--nsd-air-base, 9px) + var(--nsd-air-t, 0px)); border-bottom-width: calc(var(--nsd-air-base, 9px) + var(--nsd-air-b, 0px)); outline: 1px solid var(--line); outline-offset: -1px; border-radius: var(--r-3, 4px); height: var(--nsd-note-h, auto); /* `flex: 0 0 auto` IS THE WHOLE-LINE GUARANTEE. `.nsd-note` is a flex column, so the default `flex-shrink: 1` let the engine's measured height be treated as a maximum and shrunk to a fractional one: measured at the founder's own 780x848 config, a written 267px box used 208.5px and gave a 9.55-line client box — the sliced glyphs again, arrived at by a different road. The box is the height it is told, and the ladder above it is what decides whether that height fits. */ flex: 0 0 auto; /* …and `min-height: 0` with it. A flex item's AUTOMATIC minimum size is its content-based minimum, and a