/* =========================================================================== HIRAVEEN WEBAPP -- DESIGN LANGUAGE document/product/design/design-webapp/language/hrv-webapp.css v0.2.0 -- 2026-09-08 (IST) -- webAppDesign chair (v0.1.0 2026-09-03. v0.2.0 adds SECTION 9B, THE SHELL, and the five tokens the shell forced: --hrv-shell-h, --hrv-sticky-top, --hrv-z-shell, --hrv-z-menu, --hrv-elev-menu. Nothing else changed except two retraction repairs in section 14. No existing value moved.) STATUS: BUILD DEFAULT. Adopted under D-WAD-004 (the WebApp sets its own values) and D-WAD-005 (two tiers, both WebApp-authored). Written to be REFACTORED -- every judgment call carries its reason and a REFACTOR TRIGGER so the next pass changes values, not archaeology. PRODUCT: social trade analytics platform, browser-class application. HOOK AND BAIT, as the owner ruled them on 2026-09-27 (backlog I-069): a visitor arrives searching for a stock to buy, so a call is the bait, and social is the hook that keeps them. That reverses the framing D-WAD-005 s0 records; D-WAD-005's density partition rests on reading mode, not on which surface is the bait, and stands. The tools (watchlist, screener, charting, strategies) are built from this language's common modules. AUDIENCE: Indian retail, majority arrival organic and mobile, many first-time investors. Not a Terminal on the web. PROVENANCE: colour, radius, motion, layout floors and the numeric pin are the shipped kit (designer/kit/hrv-tokens.json v1.4.0, 18,332 B, verified at source). Type, space, rows and the mono face are WebApp-authored. Every departure is logged in ../divergence/LEDGER.md. D012: color.neutral is PRIVATE. The ramp is resolved ONLY into the semantic properties in section 2. NO RULE BELOW SECTION 2 MAY REFERENCE A NEUTRAL VALUE OR A RAW HEX. If you need a colour that is not here, that is a token gap -- raise it, do not inline it. =========================================================================== */ /* =========================================================================== 1. FONTS =========================================================================== RULING -- SELF-HOST THE UPSTREAM BUILD. DO NOT USE THE GOOGLE FONTS CDN. Obs-WAD-16 (measured 2026-09-03): the Google Fonts build of Public Sans reports the SAME name-table version string as the upstream build -- "Version 2.001" -- and LACKS U+20B9, the rupee. A version-string check passes a binary that cannot render a price. This is a shipping product for the Indian market. The rupee is not optional. VERIFY PER BINARY, BY CMAP, NOT BY VERSION STRING. Measured metrics, upstream Public Sans (UPM 2000): x-height 1034 = 0.517 em cap-height 1446 = 0.723 em figure ht 1488 = 0.744 em zero adv 1224 = 0.612 em (prose ch) Place woff2 files at /fonts/ and keep the cmap assertion in the build. */ @font-face{ font-family:"Public Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/public-sans-400.woff2") format("woff2"); } @font-face{ font-family:"Public Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/public-sans-600.woff2") format("woff2"); } /* NOTE: 500 is deliberately absent. See --hrv-weight-* in section 3. */ /* =========================================================================== 2. COLOUR -- semantic tokens only, both themes =========================================================================== */ :root{ color-scheme:light dark; --hrv-surface-base:#FAFAFB; --hrv-surface-raised:#FFFFFF; --hrv-surface-overlay:#F2F3F5; --hrv-ink-primary:#14171C; --hrv-ink-secondary:#33373D; --hrv-ink-muted:#6A7078; --hrv-ink-stale:#57595E; /* was #6F7277 -- FAILED AA on overlay (4.35). Now 4.61. */ /* ^ that 4.61 was #6B6E73 (ledger D-8). Walked 2026-09-24 (D-WAD-018, ledger D-9): Lc 77.12, 6.31:1 on overlay, its tightest. */ --hrv-border-subtle:#E4E6EA; --hrv-border-default:#C9CDD3; --hrv-border-control:#878B91; /* WCAG 1.4.11: a control boundary needs 3:1. */ --hrv-border-strong:#898C92; /* equal-loudness matched by the desk (5.63 / 5.55 against white). P2: gain and loss take the SAME size and the SAME weight, always. */ --hrv-gain-ink:#0B7841; --hrv-gain-surface:#DAEFDF; --hrv-loss-ink:#A94B43; --hrv-loss-surface:#FEE4E0; --hrv-alert-text:#7A4A02; --hrv-alert-surface:#F8E7D5; --hrv-action-text:#4636A8; --hrv-action-primary:#6B5BD2; --hrv-on-action:#FFFFFF; --hrv-focus-ring:#6B5BD2; /* ELEVATION -- minted 2026-09-08 (IST). ONE level, forced by the shell's three menus: symbol-search suggestions, the account menu, the mobile overflow panel. ONE AND NOT TWO, and the reason is a product law rather than restraint: NOTHING IN THE SHELL IS MODAL. Guest gating sits at the SAVE boundary and never the READ boundary, so no shell surface may block, disable or interrupt the page behind it. That is also WHY NO SCRIM TOKEN IS MINTED -- a scrim's whole meaning is "what is behind this is disabled", which is the exact posture this surface forbids. CONSUMED BY NO RULE SINCE 2026-09-16, and the measurement is why. Its consumers went one by one: v1's overflow panel with the panel (2026-09-13), the skip link's focus box (2026-09-15, D-WAD-010 c2) and the suggestion list (2026-09-16, D-WAD-012 c2). In LIGHT the shadow darkens the ground just outside the element's own border, which pulled that border under D-WAD-009's 3:1 overlay floor (the suggestion list's to 2.31 at its bottom edge); in DARK, measured, it HELPS. So an overlay's edge is border-control alone, with no shadow, and measurements/shell_gate.py's G7 reds a shadow on the shell, the tab bar, the suggestion list or the account menu, which takes none either (2026-10-02, M07-2, D-WAD-022). MEASURED. The token stays declared: M06 moves no token (D-WAD-021 c8), and the surface the trigger below names may yet want a depth. REFACTOR TRIGGER: a genuinely modal surface -- an order ticket, a destructive confirm -- is the first thing that legitimately needs a second depth AND a scrim. Mint them at that surface, not before, and price its edge against D-WAD-009 in LIGHT before it takes a shadow. */ --hrv-elev-menu:0 6px 16px rgba(20,23,28,.14), 0 1px 3px rgba(20,23,28,.10); /* P1: a price series is NOT a gain. Never plot price in gain-ink. */ --hrv-series-primary:#3969A6; --hrv-grid-line:#E4E6EA; --hrv-axis-text:#4A505A; } [data-theme="dark"]{ --hrv-surface-base:#101318; --hrv-surface-raised:#14171C; --hrv-surface-overlay:#1A1D22; --hrv-ink-primary:#F2F3F5; /* SECONDARY RAISED 2026-09-16, D-WAD-015. Was #C9CDD3. That pair measured Lc 75.04 on surface-raised against the target's requirement of 75 -- four hundredths of margin, which is not a margin: any rounding, antialiasing change or later tweak flips it, and the flip is SILENT because nothing breaks when it happens. #D2D6DB gives Lc 80.42. ONE VALUE, THREE ROWS: T-03 (tab label at rest), S-05 (.hrv-nav__link) and S-15 (.hrv-btn label) all sit on this pair. The latter two are EITHER-class -- fixable by size OR ink -- and both are DESKTOP elements, so taking the ink here left the desktop bar at its then-current sizes where taking the size would have pushed nav and buttons to 15px. OVERTAKEN 2026-09-22: D-WAD-016's ladder moved `.hrv-nav__link` and `.hrv-btn` to 16px/600 regardless, because both ride the `data` rung. The ink ruling stands; the "leaves the bar alone" consequence does not. THE CONSTRAINT GOING UP IS HIERARCHY, NOT CONTRAST. ink-primary sits at Lc 98.95 on this ground. The primary/secondary gap was 23.9 and is now 18.5; by #DBDEE2 it would be 13.5 and the two ranks start to blur. MUST STAY IDENTICAL to the prefers-color-scheme block below -- the two dark definitions hold the same 22 declarations (decl_audit.py gates it), and an edit to one alone would split them silently. */ --hrv-ink-secondary:#D2D6DB; --hrv-ink-muted:#8A9099; --hrv-ink-stale:#CDD2D6; /* was #7B7F83 -- FAILED AA on raised (4.45) and overlay (4.19). Now 4.61. */ /* ^ that 4.61 was #82868A (ledger D-8). Walked 2026-09-24 (D-WAD-018, ledger D-9): Lc 77.14, 11.09:1 on overlay, its tightest. */ --hrv-border-subtle:#24282D; --hrv-border-default:#2B2E34; --hrv-border-control:#66696F; /* 3:1 control boundary */ --hrv-border-strong:#65686E; --hrv-gain-ink:#41A477; --hrv-gain-surface:#1C2E25; --hrv-loss-ink:#D47970; --hrv-loss-surface:#392523; --hrv-alert-text:#D99F4E; --hrv-alert-surface:#34281A; --hrv-action-text:#A99BF0; /* Dark elevation carries more opacity than the light one. Measured, the dark shadow HELPS an overlay's border where the light one breaks it (D-WAD-010 c2), and no rule consumes either -- see the elevation note in :root. */ --hrv-elev-menu:0 6px 16px rgba(0,0,0,.48), 0 1px 3px rgba(0,0,0,.36); --hrv-series-primary:#5889C9; --hrv-grid-line:#24272C; --hrv-axis-text:#B0B7C1; /* kit chart.dark.axis-text #A8AEB8. Walked 2026-09-24 (D-WAD-018, ledger D-10): Lc 62.07 at 15/600 on raised */ } /* RF-3, fixed 2026-09-15 (IST). :root says `color-scheme:light dark`, which tells agent to follow the OS. That is right when the OS is the theme source and WRONG the moment [data-theme] overrides it: an app-level dark theme on a light-OS machine got WHITE UA form internals -- scrollbars, date pickers, select popups -- on a #101318 page, measured at 18.61:1. The explicit theme must narrow color-scheme to match, or the agent paints the other one. The [data-theme="light"] line is the same bug mirrored. NOT MEASURED -- inferred by symmetry from the same mechanism, and labelled so. */ [data-theme="dark"]{color-scheme:dark} [data-theme="light"]{color-scheme:light} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --hrv-surface-base:#101318; --hrv-surface-raised:#14171C; --hrv-surface-overlay:#1A1D22; --hrv-ink-primary:#F2F3F5; --hrv-ink-secondary:#D2D6DB; /* D-WAD-015 -- keep identical to [data-theme="dark"] above */ --hrv-ink-muted:#8A9099; --hrv-ink-stale:#CDD2D6; --hrv-border-subtle:#24282D; --hrv-border-default:#2B2E34; --hrv-border-control:#66696F; --hrv-border-strong:#65686E; --hrv-gain-ink:#41A477; --hrv-gain-surface:#1C2E25; --hrv-loss-ink:#D47970; --hrv-loss-surface:#392523; --hrv-alert-text:#D99F4E; --hrv-alert-surface:#34281A; --hrv-action-text:#A99BF0; --hrv-elev-menu:0 6px 16px rgba(0,0,0,.48), 0 1px 3px rgba(0,0,0,.36); --hrv-series-primary:#5889C9; --hrv-grid-line:#24272C; --hrv-axis-text:#B0B7C1; } } /* =========================================================================== 3. TYPE =========================================================================== TWO TIERS (D-WAD-005). comfortable = social/guest. compact = tools. `label` and `data` are PINNED ACROSS BOTH and the density axis operates on prose rungs and spacing only. What PUTS them where they are is the APCA readability floor of D-WAD-013, bound as a ladder by D-WAD-016 c1 and landed 2026-09-22 -- not the touch and phone floors below, which no longer select either rung. WHY data IS 16 -- D-WAD-016 c1, forced by the readability floor, landed 2026-09-22 (M01-2). The two constraints recorded below were what selected 14 before that, and BOTH ARE STILL SATISFIED at 16: the row floor is met EXACTLY as before -- the LINE did not move, only the size, so a 16/20 line sits in the 44 px row on the same 24 px of padding 14/20 used, with no spare created and none lost -- and the phone angular floor rises with the glyph. They are kept because they are the reason the rung may never go BACK DOWN, not because they still choose it. SUPERSEDED AS A SELECTOR, 2026-09-22, retained as a floor: (a) TOUCH FLOOR, binding. Rows must clear 44 px. One line at 14/20 with 12 px vertical padding measures EXACTLY 44. 13/18 gives 42, 12/16 gives 40 -- both need invented padding and buy NO density, because the ROW costs the vertical space, not the glyph. (b) PHONE FLOOR, permissive. Measured on the right glyph -- lining figures at 0.744 em, not x-height (nobody reads an x-height in a price cell) -- 14 px yielded 0.282-0.300 deg on the phone band. CPS 0.20 deg governs FLUENT PROSE, not scanning, so this floor alone would allow 11 or 12. WHY body IS 18 comfortable / 16 compact -- D-WAD-016 c1, landed 2026-09-22. The angular measurement below is why it is NOT LOWER; what set it at 18 is the readability floor plus the desktop reading distance this very trigger named. SUPERSEDED AS A SELECTOR, 2026-09-22, retained as the floor it establishes: angular x-height against Legge & Bigelow CPS 0.20 deg -- 14 px holds to 32-34 cm, 16 px to 37-39 cm. Phone reading distance clusters 30-40 cm and its centre falls BETWEEN them. REFACTOR TRIGGER -- **FIRED AND DISCHARGED 2026-09-19 by D-WAD-016, landed 2026-09-22.** It read: "this discriminates 14 from 16 and NOT 16 from 18. On a laptop at ~58 cm, 16 px lands at 0.163 deg -- BELOW CPS. If sustained prose reads poorly on desktop, 17 or 18 is the move, not a line-height change." It was answered at 18, which is what comfortable `body` now declares. The re-measurement is in TYPE_ANGLE s3c and in LEDGER D-1 note (b), whose REVISIT closed at 18 on its own evidence. */ :root{ --hrv-font-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* MONO -- system stack, deliberately not a webfont. Needed by the strategy expression editor and any code surface. RULING: the system stack resolves to SF Mono on Apple, Cascadia/Consolas on Windows, Roboto Mono on Android -- all designed for code, all with disambiguated 0/O and 1/l, all costing ZERO bytes. On a mobile-majority audience a webfont here would be paid for by every visitor to subsidise one surface most never open. REFACTOR TRIGGER: if cross-platform glyph-width consistency becomes load-bearing (a column-aligned expression editor, or diffing two expressions side by side), self-host one face -- JetBrains Mono or IBM Plex Mono -- and drop the stack. Until then this is the honest default. */ --hrv-font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace; /* WEIGHTS -- TWO, not three. RULING: 400 and 600 only. 500 is dropped. REASON, AS WRITTEN AND NOW PARTLY SUPERSEDED: "14 px is the dominant size in this product (every table, every watchlist column). At 14 px the discrimination between 500 and 600 is unreliable, so 500 costs a font file and a decision point while adding no legible hierarchy." **14 px is no longer the dominant size of anything.** Since 2026-09-22 the table body rides `data` 16 and every header and watchlist label rides `label` 15. The RULING stands -- two weights, 400 and 600 -- but its stated reason is about a rung that moved, and **500-vs-600 discrimination has NOT been re-checked at 15/16 px.** The argument that does survive untouched is that two weights make the "is this emphasised" question binary, which is what a scanning surface wants. REFACTOR TRIGGER: if controls read too heavy at 600, reintroduce 500 for interactive chrome ONLY -- never for data. */ --hrv-weight-regular:400; --hrv-weight-strong:600; /* comfortable tier -- social, guest, indexed surfaces */ --hrv-label-size:15px; --hrv-label-line:20px; --hrv-data-size:16px; --hrv-data-line:20px; --hrv-body-size:18px; --hrv-body-line:28px; --hrv-title-size:22px; --hrv-title-line:28px; --hrv-section-size:28px; --hrv-section-line:36px; --hrv-display-size:36px; --hrv-display-line:44px; } [data-tier="compact"]{ /* tools tier -- label and data unchanged; prose rungs step down */ --hrv-body-size:16px; --hrv-body-line:24px; --hrv-title-size:18px; --hrv-title-line:24px; --hrv-section-size:22px; --hrv-section-line:28px; --hrv-display-size:28px; --hrv-display-line:36px; } /* =========================================================================== 4. SPACE, ROWS, GEOMETRY =========================================================================== SPACE -- the 2 px step is DROPPED from the compact tier. The kit's compact scale opens [2, 4, 6, ...]. A 2 px gap is sub-perceptual beside a 44 px row and cannot express separation; keeping it invites its use and produces collapses that read as bugs. ROWS -- 44 in BOTH tiers. The kit ships tableRow 24 (compact) and 32 (comfortable); NEITHER reaches the touch floor. This is the single most visible difference between the WebApp and the Terminal, and it is an accessibility floor rather than a taste choice. REFACTOR TRIGGER: the entire compact tier hangs off this 44. If the touch floor ever moves, section 3's derivation is VOID and both tiers must be rebuilt from scratch. */ :root{ --hrv-space-1:4px; --hrv-space-2:6px; --hrv-space-3:8px; --hrv-space-4:12px; --hrv-space-5:16px; --hrv-space-6:20px; --hrv-space-7:28px; --hrv-space-8:32px; --hrv-space-9:44px; --hrv-space-10:56px; --hrv-row:44px; --hrv-cell-pad-x:12px; --hrv-tap-min:44px; --hrv-radius-sm:4px; --hrv-radius-md:6px; --hrv-radius-lg:10px; /* ICON -- kit family (Lucide, curated subset; DES-D026/D032), verified at source. Omitted from v0.1.0 by oversight; every tool surface needs it (sort arrows, dismiss, chart toolbar, nav). Kit values kept unchanged -- no divergence, so no ledger row. --hrv-icon-stroke IS ALSO WRITTEN INTO THE MEANING MARKS' MASKS in sections 7 and 9 (2 here, 1.75 compact), because a custom property cannot reach inside a mask image (D-WAD-019). The masks do NOT follow a change here: set the new strokes in ../M09-meaning-hues-as-marks/design-evidence/make_rules.py (it hard-codes them) and in ../measurements/ink_census.py's STROKE, run a scratch copy of make_rules.py (it writes to its working directory and would overwrite the dated evidence), and copy its masks into sections 7 and 9. */ --hrv-icon-sm:16px; --hrv-icon-md:20px; --hrv-icon-lg:24px; --hrv-icon-stroke:2; /* RETAINED ARGUED since 2026-09-25 (M09-3), pending the owner's ruling on I-025, the cap against the bar. M09-2's marks widened the widest table, W-4 was re-measured, and the floor is now 1642.70. 1680 still clears it, but it is no longer the derivation's output: the headroom rule below gives 1700, and the floor alone gives 1660. Moving to either would decide part of I-025 first, and 1700 would widen the bar's void, which I-025 is about. So 1680 is HELD. That is a stated exception to W-4's "a derived output, never a chosen number", owned by I-025; it is not a derivation. See ../WIDTH_RULE.md W-4, ../divergence/LEDGER.md D-6a's M09-3 addendum and D-WAD-019 c8. HOW 1680 WAS SET, 2026-09-22 (M01-3): the 2026-09-08 derivation gave 1520 on a table measured at label 12 / data 14. D-WAD-016's ladder moved both of those rungs, which fired W-4's own RE-TEST TRIGGER, and the re-measurement REFUTED 1520 exactly as the first one refuted 1360. On that floor, 1626.70, the headroom rule below gave 1672.97 (computed then from the unrounded widths, 0.01 under the rounded 2.80 x 16.53 form used below), and 1680 was that rounded up to the next 20px step (ledger D-6a). THE DERIVATION, re-measured 2026-09-25 at the landed marks: social = 720 col + 32 gap + 300 aside + 32 gutters = 1084 tool = 240 rail + 1370.70 sorted table + 32 gutters = 1642.70 max = 1642.70 The table measures 1354.17 unsorted and 1370.70 with the widest-growing column sorted (1338.17 / 1354.70 before M09-2's marks, 1197.02 / 1210.44 before the ladder). The marks widened Chg % by 16.00; Chg's width did not move. FIVE headers grow when the sort arrow is appended, where six did before the marks: Chg %'s cells now outgrow its sorted header. So the SORTED figure is the honest one -- sizing to the unsorted width means the table reflows the first time a user sorts it. The same three columns still tie for widest-growing, at +16.53 (52w High, Mkt Cap (Cr), Sector), where 2026-09-08 had Mkt Cap (Cr) alone at +13.42: the arrow's cost is set by the label RUNG, not by one header's text. WHICH TIER: the rig's table carries no tier, so its mark is 16px. The product's watchlist renders compact, where the mark is 14px and the table measures 2.00px narrower in place (a scratch run, 2026-09-25, record measurements/W4_COMPACT_SCRATCH_2026-09-25.json), so its floor is about 1640.70. 1642.70 is the conservative bound. WORST SINGLE SORTED COLUMN governs, not all thirteen at once. That was the 2026-09-08 premise (it used 1210.44, not the 1240.56 it also measured) but it was never written down, so it is written here: the language's own affordance is th[aria-sort="ascending"|"descending"], a single-column sort, and no surface produces thirteen simultaneously. IF MULTI-COLUMN SORT IS EVER SHIPPED this derivation re-opens at 240 + 1422.97 + 32 = 1694.97, and 1680 fails. RAIL-INCLUSIVE, and that is a ruling: this token governs the OUTERMOST content box, rail included. The token exists so the shell bar ALIGNS with the page beneath it; if the rail sat outside the governed box the bar would cap at one width while the content region spanned another, and the alignment the token exists for would be gone. THE 240 RAIL IS AN UNDECLARED INPUT. There is no --hrv-rail-w in this file; the only 240 is the one in this comment. The floor is sensitive to it 1:1, so if a rail is ever built at another width this number is wrong and NOTHING HERE WOULD NOTICE. 1642.70 is the MEASURED FLOOR [C]. The 37.30px up to 1680 is 2.26 sort-arrow widths. The headroom RULE is [I], ARGUED, not measured: it reproduces the 2026-09-08 headroom in the currency that headroom was stated in -- "the sort arrow alone moved six headers, so a single label change should not immediately breach". That was 37.56px against a 13.42px arrow, 2.80 arrow-widths. At today's 16.53px arrow the rule gives 1642.70 + 2.80 x 16.53 = 1688.98, which the 20px step rounds to 1700; the floor alone rounds to 1660. So 1680's buffer is now weaker than the one it inherits, which is why it is RETAINED and not derived (the head of this comment). The 20px step is the chair's rounding and NOT a declared grid -- no document in this area sets one. WHAT DOES NOT SURVIVE: the old headroom's SECOND limb, "1520 also sits in the band the references occupy (Facebook ~1350, Amazon ~1500)". 1680 does not. Those reference points are [C], measured from live sites, and this cap is now 180px above Amazon's. Whether a content box that wide READS well is a visual judgment and is the owner's, by looking -- it is not decided by this arithmetic and must not be presented as though it were. THE TOKEN HAD TO MOVE on 2026-09-22. Measured, not assumed: the only density lever that could have saved 1520 is the cell padding the language already drops below 480 (12 -> 8), worth exactly 13 x 8 = 104px. That landed the floor at 1522.70 -- still above 1520. RE-TEST TRIGGERS, four. Each re-opens this: 1. any column added, removed or relabelled in the widest table; 2. any change to a type rung the table reads (--hrv-data-size, --hrv-label-size) or to --hrv-row / --hrv-cell-pad-x; 3. any change to what a cell of the widest table renders: a glyph, a mark, a prefix (added 2026-09-25 at M09-3: M09-2's marks widened the table, and none of the triggers then written named it); 4. multi-column sort shipping. Re-measure with measurements/w4_rederive.py, do not re-estimate. */ --hrv-shell-max:1680px; /* SHELL GEOMETRY -- minted 2026-09-08 (IST), forced by step 2. RULING: ONE bar, ONE height, EVERY breakpoint, ALWAYS sticky. WHY 56 -- DERIVED, not chosen: the tallest thing in the bar is a 44 px control (--hrv-tap-min) and it needs one space-2 of air above and below. 44 + 12 = 56, which is exactly space-10. The touch floor sets the row in section 4 and it sets the bar here too; same floor, same arithmetic. WHY CONSTANT ACROSS BREAKPOINTS: --hrv-sticky-top must equal it. A height that varies by breakpoint turns the sticky contract into a per-breakpoint calculation, and that WILL drift -- the same failure class as the fixed 646px measure already corrected in this file. REFACTOR TRIGGER: if a second sticky row is ever added ABOVE THE CONTENT -- a contextual symbol bar, a module chrome row -- --hrv-sticky-top stops being one constant and must become a sum. THAT CONTRACT NOW EXISTS (2026-09-27, D-WAD-020) for a module's own row stuck to the page inside
: the sticky contract's clause (4), below. The sum is declared on the module's own content, so --hrv-shell-h and :root's --hrv-sticky-top stay one constant. A row inside a .hrv-scroll is outside clause (4), and its rule is written before the row is; the shell itself takes no second row (SHELL_SPEC s6 c1). CORRECTED 2026-09-13 (IST): this trigger used to name "mobile bottom tabs" as a case. IT IS NOT ONE. SHELL_SPEC v2 s4 rules that the bottom tab bar is a BOTTOM INSET, not a top offset -- --hrv-sticky-top is a distance from the viewport's top edge and nothing stacks BENEATH the shell. The stale wording was the single line most likely to make whoever builds the tab bar rewrite a contract that does not need rewriting. Same correction carried to ../divergence/LEDGER.md D-4. [2026-09-27: "nothing" is nothing of the shell's own, the tab bar included. A module's own row may stack beneath the shell, under clause (4).] */ --hrv-shell-h:56px; /* BOTTOM TAB BAR HEIGHT -- minted 2026-09-13 (IST) under D-WAD-004 c5, mint on NEED and not before. The need is now real: SHELL_SPEC v2 s4 puts the destinations into a bottom bar below 768, and the content region cannot reserve space for a bar that has no height token. WHY 56 -- THE SAME DERIVATION AS --hrv-shell-h, deliberately reused: the 44 px touch floor plus one space-2 of air each side. One floor, two bars; if --hrv-tap-min ever moves, both move together and neither drifts apart from the other. It also fits the LABELLED tab that SHELL_SPEC s4 now requires (icons alone are forbidden): 20 icon + 2 + 20 label line = 42, which sits inside 56 with 7 of air above and below. (It was 38 with 9 of air until the ladder took `label` to 15/20 on 2026-09-22; measured at a true 320, 360 and 767, no label clipped or wrapped.) THE PAGE'S END, below 768 (2026-09-27, D-WAD-020): the ROOT reserves the bar's footprint -- this token PLUS the bar's 1px top edge PLUS env(safe-area-inset-bottom), 57px and 91 at a 34px inset. This token is the tabs' height; the bar renders 1px taller (backlog I-009). The rule and its evidence are in section 9B's 767 block. */ --hrv-tabbar-h:56px; /* STICKY CONTRACT -- SETTLED 2026-09-08. Clauses (3) and (4) and the page's band were added 2026-09-27 (D-WAD-020, milestone M03). Section 10's `.hrv-table th` reads this token and shipped with a fallback of 0 and NO DEFINITION ANYWHERE. That dangling reference is closed here. THE CONTRACT, four clauses, all load-bearing: (1) :root carries the shell height, because the shell is ALWAYS sticky. There is no non-sticky shell variant, which is what makes this unconditional and therefore safe. (2) ANY element establishing its own scroll container MUST reset it to 0 -- inside a scrolling panel the header sticks to the PANEL's top edge, not the viewport's. `.hrv-scroll` does both and is the only sanctioned way to make a scroll container. (3) THE LANDING. What the reader is taken to -- a fragment target, the skip link's
, a control reached with Tab or Shift+Tab, a scrollIntoView() -- lands clear of what is stuck above it: its scroll-margin-top is the band above it in its own scroller, floored at the page's band, plus the bar's 1px edge. A stuck element's own controls take none where it is stuck to the page, because a margin there scrolls the page when they take focus. Nor do the account menu's rows, which land flush in the menu's own scroll (2026-10-02, D-WAD-022). The rules are in section 9B, after .hrv-scroll, and in section 10, after the header's top. (4) A MODULE'S OWN ROW, stuck to the page inside
, declares these and nothing more: (a) the row: position:sticky and top:var(--hrv-sticky-top), on an opaque ground, with a 1px lower edge in --hrv-border-control (D-WAD-009's overlay-boundary floor, the shell's own edge), at a z-index above the table's sticky key cells (3) and below --hrv-z-shell; (b) scroll-margin-top:0 on the row's own controls, as the shell's controls take none; (c) on the content after the row, BOTH bands re-declared as the sum, --hrv-sticky-top and --hrv-sticky-page each calc(var(--hrv-shell-h) + ROW), where ROW is the row's height without its edge, so a header parks tucked under the edge as it does under the shell's. A row inside a .hrv-scroll is outside this clause: nothing measures one, and a module that needs one writes its rule then. specimens/FRAME_RIG.html's module is the worked example. THE PAGE'S BAND, --hrv-sticky-page, minted 2026-09-27 under D-WAD-004 c5 (ledger D-4): the height stuck at the top of the PAGE -- the shell, plus a module's row where clause (4) re-declares it. --hrv-sticky-top is the band in an element's OWN scroller, and .hrv-scroll resets it to 0. .hrv-scroll does NOT reset --hrv-sticky-page, and that is its whole job: the page may still have to scroll a panel's target clear of the page's bars. FORCED: with the landing floored at the shell's band instead, a row link in a panel under a module's row showed 0 of 19px (the M03 design probe's state Cmax, 2026-09-26). REFACTOR TRIGGER: anything else that sticks to the page re-declares this band too, or a panel's targets land under it. Clause (2) is the one that gets forgotten, and forgetting it is exactly the overlap bug this token exists to prevent. measurements/frame_gate.py gates clauses (3) and (4) by render, and clause (1)'s tuck. */ --hrv-sticky-top:var(--hrv-shell-h); --hrv-sticky-page:var(--hrv-shell-h); /* LAYERING -- minted because the collision is ALREADY LATENT in this file. `.hrv-table th` is position:sticky with z-index:1. A sticky shell earlier in the DOM carrying an auto z-index paints UNDERNEATH it -- of two positioned elements the later one wins -- so the table header would slide over the shell on every scroll. The shell must outrank the table header; menus must outrank the shell. TWO RUNGS, deliberately no more. */ --hrv-z-shell:100; --hrv-z-menu:200; /* MEASURE. RULED 2026-09-08 on CC measurement. See ../WIDTH_RULE.md W-1. ================= READ THIS BEFORE TOUCHING THESE ================= `ch` IS NOT CHARACTERS. 1ch is the advance of the "0" glyph = 0.612em. The MEAN PROSE ADVANCE in this face is 0.458em. RATIO 1.33. So characters-per-line is roughly ch x 1.33, NOT ch. THE OLD VALUES WERE A WCAG BREACH, MEASURED, NOT THEORISED: 66ch rendered a worst line of **89 CHARACTERS** against SC 1.4.8's ceiling of 80. The comment that used to sit here claimed 66ch was the 66-character measure. It was not. Same 89 at the compact tier, because `ch` scales with body size, so no tier setting rescued it. WHY 46 AND NOT 48 OR 58: 58ch holds 80 on the five sampled corpora with ZERO margin, and same-register prose built from narrow glyphs needs 46-53ch to stay under 80. 46ch is the value that holds on the WORST observed corpus. Typical prose lands ~61-63 characters -- inside the 50-75 band the literature reports, and near its ~66 optimum. WCAG 80 is a CEILING, not a target, and our readers skew L2-English, whose perceptual span is smaller. Both point to the conservative end. RE-TEST TRIGGER, and it is real: these numbers are CORPUS-DEPENDENT. When actual product copy exists, RE-COUNT against it. Do not assume these survive a change of register. NEVER set a NUMERIC column width in `ch`: tabular figures measure ~14% WIDER than 1ch in this face, so `ch` under-estimates there. Second trap, opposite direction, same root cause. */ --hrv-measure-prose:46ch; /* ABSOLUTE CEILING -- 80 characters on the NARROWEST observed corpus. DO NOT EXCEED. Currently unused; if you reach for it, re-count first. */ --hrv-measure-wide:53ch; --hrv-dur-0:0ms; --hrv-dur-1:120ms; --hrv-dur-2:200ms; --hrv-ease:cubic-bezier(0.2,0,0,1); } [data-tier="compact"]{ --hrv-space-7:24px; --hrv-space-8:32px; --hrv-space-9:40px; --hrv-space-10:48px; --hrv-icon-sm:14px; --hrv-icon-md:16px; --hrv-icon-lg:20px; --hrv-icon-stroke:1.75; } /* HONEST CORRECTION, self-review 2026-09-03. Elsewhere this seat wrote that "with label and data pinned, spacing carries half the density axis." The values above do not bear that out: compact and comfortable differ at only THREE of ten steps (s7, s9, s10) and are identical at s1-s6 and s8. So in practice the two tiers differ almost entirely in the PROSE TYPE RUNGS, and the spacing axis is close to inert. This is left as-is rather than invented into a wider spread, because a real spacing derivation needs a rendered tool surface to judge against and none exists yet. The claim was wrong; the values are merely unargued. Do not quote the "half the density axis" line until this row has been derived. */ /* =========================================================================== 5. BASE =========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--hrv-surface-base); color:var(--hrv-ink-primary); font-family:var(--hrv-font-sans); font-size:var(--hrv-body-size); line-height:var(--hrv-body-line); font-weight:var(--hrv-weight-regular); -webkit-font-smoothing:antialiased; } :focus-visible{outline:2px solid var(--hrv-focus-ring);outline-offset:2px;border-radius:var(--hrv-radius-sm)} :focus:not(:focus-visible){outline:none} /* LINKS read in the primary ink and carry the action hue on their UNDERLINE (D-WAD-019). The action ink cannot read as text in dark (Lc 60.08 at most against 90) and one rule serves both themes. The underline is the link's non-text mark: 6.95:1 at least, against 3:1. A link that sets its own ink and text-decoration:none (nav, tab bar, brand, suggestion rows; since 2026-10-02 the account menu's rows and a link styled as a plain, primary or icon button, D-WAD-022) is unchanged; the skip link keeps its own ink and gains this underline. */ a{color:var(--hrv-ink-primary);text-decoration-line:underline; text-decoration-color:var(--hrv-action-text);text-decoration-thickness:.125em;text-underline-offset:.2em} img,svg{display:block;max-width:100%} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* =========================================================================== 6. TYPE PRIMITIVES =========================================================================== */ .hrv-label{font-size:var(--hrv-label-size);line-height:var(--hrv-label-line); font-weight:var(--hrv-weight-strong);letter-spacing:.04em;text-transform:uppercase; color:var(--hrv-ink-secondary)} .hrv-data{font-size:var(--hrv-data-size);line-height:var(--hrv-data-line)} .hrv-body{font-size:var(--hrv-body-size);line-height:var(--hrv-body-line)} .hrv-title{font-size:var(--hrv-title-size);line-height:var(--hrv-title-line); font-weight:var(--hrv-weight-strong)} .hrv-section{font-size:var(--hrv-section-size);line-height:var(--hrv-section-line); font-weight:var(--hrv-weight-strong)} .hrv-display{font-size:var(--hrv-display-size);line-height:var(--hrv-display-line); font-weight:var(--hrv-weight-strong)} .hrv-prose{max-width:var(--hrv-measure-prose)} .hrv-mono{font-family:var(--hrv-font-mono);font-size:var(--hrv-data-size); line-height:var(--hrv-data-line)} /* =========================================================================== 7. NUMERALS -- load-bearing, not cosmetic =========================================================================== Public Sans defaults to PROPORTIONAL digits (advances 814-1295). Without the pin, every numeric column misaligns. Apply .hrv-num to ANY element holding a figure a user may compare against another figure. */ .hrv-num{font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1} /* Direction. Same size, same weight, no motion -- P2. P2 is a PM-RATIFIED HARD LAW (designer/PRINCIPLES.md, collision order c3: P1, P2 and P5 do not bend). This seat may scope it UP, never down, and does not. Read D-WAD-004 c2 before thinking otherwise -- the same reasoning that kept P7 out of this seat's reach keeps P2 out of it. ADJUDICATED 2026-09-13 (IST) against Johnson, Designing with the Mind in Mind, 3rd ed. 2021 -- full ruling at ../../decisions/D-WAD-008... c4. THE RULE STANDS. What the book exposed is a HOLE BESIDE IT: CHANGE SALIENCE. A figure that changes BECAUSE THE USER CHANGED AN INPUT must be recognisable AT REST as having changed. Johnson ch 8, printed pp. 127-130: older adults changed a trip option on a travel site and did not notice that the price moved with it (Finn and Johnson, 2013). This seat has been reading "no motion on gain/loss" as though it covered all value change. It does not, and the gap was unaddressed anywhere in the language. THE DISCRIMINATOR IS WHY THE VALUE CHANGED, NEVER WHAT THE VALUE IS: user-caused, discrete, consequential -> salience is OWED ambient re-render (the market ticked) -> no salience. P2 forbids it on gain/loss, and frequent motion habituates anyway (ch 1, printed pp. 4-5; ch 5, printed p. 71) -- it spends the channel that exists for change which actually matters. P2 forbids a MEANS (animation) on a CLASS OF VALUE (gain/loss). It does not forbid salience. So the means here are NON-MOTION and NON-WEIGHT: a persistent changed-state marker, the causing input shown beside the figure, or the prior value rendered alongside the new one. NOTHING IS MINTED FOR THIS YET, deliberately. The means is a component decision and there is no component to hang it on -- mint on need (D-WAD-004 c5). The rule is recorded here so the component inherits it rather than rediscovering it. */ /* THE DIRECTION MARK (D-WAD-019; M09 spec R6, R13, R14). A gain or loss figure reads in the PRIMARY ink, and its hue rides on a glyph before it. WHY THE WORDS LEAVE THE HUE. In each theme one half of the calibrated pair cannot reach the fluent requirement as text at any lightness (light gain peaks at Lc 71.66, dark loss at 63.23, against 92 with the margin), and P2 keeps the pair calibrated, so neither half moves alone. The calibrated pair is also ONE GREY (#686868 and #686868 in light), so for a colour-blind reader a coloured figure carried direction by its sign alone. The shape carries it now, for every reader (Johnson, ch 4, printed 54, guideline 5). THE GLYPH follows the kit's map (design-system ICON_STRATEGY.md, "LAW where the underlying color carries meaning"): a figure is a DELTA, so arrow-up-right / arrow-down-right; the compact tier takes PriceDelta's compact arrows, arrow-up / arrow-down. That reading of the map is ARGUED, recorded in D-WAD-019 and put to the desk. SIZE AND STROKE are the kit's inline icon token, unchanged: --hrv-icon-sm (16 comfortable, 14 compact) and stroke 2 / 1.75. The masks carry the stroke as a NUMBER because a custom property cannot reach inside a mask image; section 4 says so beside the token, with the procedure for a stroke change. The masks are copied from the output of ../M09-meaning-hues-as-marks/design-evidence/make_rules.py; do not hand-edit. THE MECHANISM. A ::before masked by the Lucide path and filled by background-color in the meaning ink. The mask's stroke is currentColor: a mask reads alpha only, so no colour value is written below section 2. The mark is decorative to assistive technology: a screen reader hears direction from the figure's SIGN, which the component must print (Flagged concern 4). P2 HOLDS: up and down mirror (same box, offset and stroke per tier), the calibrated pair is untouched, and nothing animates. .hrv-flat takes no mark: it has no direction. The forced-colours rule for every mark sits in section 9, after the chip marks it must also override. LICENCES, verbatim from lucide-react 1.21.0's LICENSE. They cover every glyph mask in this section and in section 9: arrow-down, arrow-down-right, arrow-up, arrow-up-right, trending-down, trending-up, triangle-alert. ISC License Copyright (c) 2026 Lucide Icons and Contributors Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. Feather-derived, per the package LICENSE: arrow-down, arrow-down-right, arrow-up, arrow-up-right, triangle-alert (which the LICENSE lists as alert-triangle). The MIT License (MIT) (for the icons listed above) Copyright (c) 2013-present Cole Bemis Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .hrv-up,.hrv-down{color:var(--hrv-ink-primary)} .hrv-up::before,.hrv-down::before{ content:"";display:inline-block;flex:none;width:var(--hrv-icon-sm);height:var(--hrv-icon-sm); vertical-align:-.125em;-webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .hrv-up::before{background-color:var(--hrv-gain-ink); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E")} .hrv-down::before{background-color:var(--hrv-loss-ink); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 7 10 10'/%3E%3Cpath d='M17 7v10H7'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 7 10 10'/%3E%3Cpath d='M17 7v10H7'/%3E%3C/svg%3E")} [data-tier="compact"] .hrv-up::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E")} [data-tier="compact"] .hrv-down::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E")} .hrv-flat{color:var(--hrv-ink-primary)} /* VALUE ABSENCE -- two different facts, and they must not be conflated. .hrv-stale a value that EXISTS and is OLD. Renders in ink-stale and MUST be accompanied by its reason (P6): "halted 14:52", "last filed 30 Jun". Staleness without a reason is a defect. .hrv-na a value that DOES NOT EXIST and never will (debt/equity for a bank). Renders as an em dash. RULING: the two are separated by GLYPH, not by ink. Since 2026-09-24 .hrv-na renders in ink-primary (D-WAD-018 c3), so their inks now differ, but colour must still not be asked to carry this. A dash is not a number; a greyed number still is one. The form does the work. */ .hrv-stale{color:var(--hrv-ink-stale)} .hrv-na{color:var(--hrv-ink-primary)} .hrv-na::before{content:"\2014"} /* =========================================================================== 8. SURFACE PRIMITIVES =========================================================================== Separation is SPACE plus a faint surface shift -- NOT rules. The Terminal draws borders because every pixel is spoken for; a browser tool does not have to, and this single choice does most of the work of not looking like a terminal on the web. Vertical rules inside tables are forbidden. */ .hrv-card{background:var(--hrv-surface-raised);border:1px solid var(--hrv-border-subtle); border-radius:var(--hrv-radius-lg);padding:var(--hrv-space-5)} .hrv-card--flush{padding:0;overflow:hidden} .hrv-shell{background:var(--hrv-surface-raised); border-bottom:1px solid var(--hrv-border-control)} /* border-control, NOT border-subtle, and this is D-WAD-009's overlay-boundary floor. surface-raised and surface-base are 1.04:1 apart, so the bar has NO fill separation from the page scrolling under it and this 1px line carries the whole boundary. border-subtle measured 1.20/1.26; border-control gives 3.28/3.38. No shadow here, so composited equals declared -- render-confirmed 2026-09-13. The name is a known stretch: it says control, this is an edge. */ .hrv-container{max-width:var(--hrv-shell-max);margin:0 auto;padding:0 var(--hrv-space-5)} /* =========================================================================== 9. CONTROLS -- every interactive target clears the touch floor =========================================================================== */ /* A LINK STYLED AS A BUTTON RENDERS AS THE BUTTON (2026-10-02, M07-2, D-WAD-022; backlog I-056). A control that goes to another page is a link, and section 5's bare `a` rule underlines every link, so an -- the guest's Sign in and Create account among them -- took a .125em underline its