/* SHARED·HONESTEMPTY (1013) — the honest empty: the block shown where a list has nothing in it. * ══════════════════════════════════════════════════════════════════════════════════════════════ * 🔴 THE DOCTRINE TRAVELS WITH THE COMPONENT. Kept verbatim from the source this was extracted * from (cards/collection/reader.css:145-146, D-541): * * "the honest empty — deliberately plain. It must NOT look like a designed page of content, * because the failure it replaced was a page that looked exactly like one." * * That sentence is this component's reason to exist. It must not acquire decoration it did not * have: no card chrome, no border, no illustration, no "coming soon", no nudge. The three * companion rulings the kept sources already carry, and which any adopter inherits: * · D-517 / D-541 — say it in one line; never draw placeholder rows, never a zero-height box * that reads as a crash (cards/shared/tools-panel.css:144-145). * · D-452 — it is NOT a nudge. "Start saving!" is the shape this app refuses; a parent who has * pinned nothing has not failed at anything (cards/collections/surface.css:74-77). * · "there are none" and "none of yours match THAT" are DIFFERENT SENTENCES. Conflating them is * how a parent concludes her collections have been deleted (cards/collections/mine.css:43-45). * This component renders whichever one the caller passes; it never picks. * * 🔴 THE WEIGHT AND THE PADDING ARE THE CALLER'S, NOT THIS COMPONENT'S. * Same job — a heading over an empty list — and the shipped answers do not agree. Measured by * hand on master, 2026-08-31: * * heading weight 600 .ssf-miss-h (cards/search/surface.css:106) · .tl-empty-h (library.css:138) * 500 .crd-empty-h (cards/collection/reader.css:148) * 400 .wkv-none (app.css:3362 — declares no weight at all; a

in Fraunces * at ambient 400, which is a third answer arrived at by omission) * block padding 20 / 8 / 8 .ssf-miss (search/surface.css:104) * 40 / 24 / 40 .crd-empty (collection/reader.css:147) * 32 / 16 / 32 .tl-empty (technique/library.css:137) * 16 / 16 / 16 .twp-empty (shared/tools-panel.css:146) * 40 / 16 / 40 .wkv-empty (app.css:3354) * 22 / 10 / 22 .wn-empty (weaning.css:89 — raw px, not tokens) * 6 / 0 / 2 .wn-tray-empty (weaning.css:154 — raw px, 13px type) * * Picking a winner here would silently restyle up to seven shipped surfaces, which is a DESIGN * decision and Andrew's alone. So every disagreeing axis is a custom property the CONSUMER sets, * and each default is stated below with where it came from: * * --hem-pad-top --space-32 .tl-empty (the middle of six shipped answers) * --hem-pad-x --space-16 .tl-empty / .wkv-empty / .twp-empty (3 of 6) * --hem-pad-bottom --space-32 .tl-empty * --hem-gap --space-8 .crd-empty-h / .ssf-miss-h (2 of 3) + SIGNED-FORM axis 3 * --hem-door-gap --space-8 EXTRA above the flex gap; 8+8=16 = .wkv-return's * own margin-top (app.css:3364) * --hem-heading-size --text-subtitle = --size-18, .crd-empty-h / .ssf-miss-h (2 of 4) * --hem-heading-weight --weight-600 .ssf-miss-h / .tl-empty-h (2 of 3) + SIGNED-FORM axis 1 * ("if it names something, it is 600") * --hem-heading-ink --text-primary 3 of 4 (.wkv-none is --text-secondary) * --hem-subtext-size --text-subtitle = --size-18 — SEE D-777 BELOW * * 🔴 THE TYPE-ROLE GAP NAMED HERE HAS BEEN RULED — D-777 (claimed 2026-08-31, 13:41:24). This * file's own question was: three kept subtexts ship at --size-17 (.crd-empty-s, .ssf-miss-s, * .twp-empty), and .tl-empty-h ships its HEADING at 17, with no --text-* role resolving to 17 — * type is set by ROLE, never by number, so at build time this component used --text-standfirst * (--size-16, the nearest existing role) and reported the 1px delta as open rather than smuggle * in a raw --size-17. D-777 answers it directly: ONE role for the paragraph under a heading — * --text-subtitle, 18px, --leading-155. --text-standfirst is retired. `.hem-s` now takes that * role; the three kept sites move to 18/155 on adoption, not 17, per the ruling, not a redesign. * * ⚠️ THE DOOR IS A SLOT, NOT A BUTTON THIS COMPONENT DRAWS. Two shipped sites offer an action out * of an empty and they do not agree on its look either — .wkv-return (app.css:3363) is a small * tonal teal pill, .ssf-ask (search/surface.css:107) is a full-width filled teal button. Both * are the door family 1010 SHARED·PRIMARYCTA / 434 SHARED·SECONDARYCTA already own. Hand-writing * a third pill here would be the exact defect the registry exists to prevent, so `.hem-door` * owns its GAP and nothing else; the caller passes a rendered door in. * * ⚠️ WHAT THIS COMPONENT DELIBERATELY DOES NOT COVER — the ITALIC SYSTEM NOTE. .c2-empty * (collections/all.css:52), .mc-nomatch (collections/mine.css:45), .pv2-caia-empty * (progress.css:552) and .tk-placeholder-text (app.css:3221) are inline, left-aligned, italic * lines, not centred blocks. The italic is deliberate — it is the "this is a system note, not * content" signal, and spec 2 (six-extraction-specs-2026-08-30.md) names losing it as the way an * empty state starts reading as real, MISSING content. A different shape, correctly. * * ⚠️ NOT WIRED. No consumer is migrated in this commit and this file is NOT linked from * web/index.html. A commit that both introduces a component and restyles a dozen surfaces is a * commit nobody can review honestly; migration is a separate, reviewable step. * * Non-interactive by construction: the block itself has no button, no link and no cursor — * whatever fills .hem-door brings its own :active / :focus-visible (check 18's own interactivity * test reads THIS file, and there is nothing here for it to describe). * ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* A COLUMN, not a row — so SIGNED-FORM axis 2 (`align-items: center` on a row) and check 70 both read as not-applicable rather than as a silent exception. Children stay full-width and centre their own text, exactly as all six kept sources do (`text-align: center` on the block), so a wrapped sentence breaks at the container edge and not at its own max-content width. */ .hem { display: flex; flex-direction: column; gap: var(--hem-gap, var(--space-8)); text-align: center; padding: var(--hem-pad-top, var(--space-32)) var(--hem-pad-x, var(--space-16)) var(--hem-pad-bottom, var(--space-32)); } /* --leading-115 is .ssf-miss-h's own value and the only line-height any kept heading declares; the other three inherit whatever the page gives them, which is precisely the kind of ambient dependency the self-containment rule (2026-07-23 corollary) exists to end. */ .hem-h { font-family: var(--font-display); font-size: var(--hem-heading-size, var(--text-subtitle)); font-weight: var(--hem-heading-weight, var(--weight-600)); line-height: var(--leading-115); color: var(--hem-heading-ink, var(--text-primary)); margin: 0; } /* D-777: --text-subtitle / --leading-155, the ONE role for a paragraph under a heading — see the header. The ink agrees across every kept site — --text-secondary and --ink-600 are the same value (tokens.css:426) — so it is stated, not exposed as a prop nobody would set. */ .hem-s { font-family: var(--font-body); font-size: var(--hem-subtext-size, var(--text-subtitle)); line-height: var(--leading-155); color: var(--text-secondary); margin: 0; } /* the slot. It owns its spacing and nothing else — see the door note in the header. --hem-door-gap is the EXTRA space above the door, ON TOP of the flex gap, not the total: at the defaults that is 8 + 8 = 16, which is .wkv-return's own margin-top (app.css:3364) above a heading whose own gap is 8. Stated as an addend rather than a total so it can never resolve negative and pull the door up over the line above it. */ .hem-door { margin-top: var(--hem-door-gap, var(--space-8)); } /* ⚠️ THE SLOT OWNS THE SPACING, SO WHATEVER IS SLOTTED IN BRINGS NONE. 434 SHARED·SECONDARYCTA and 1010 SHARED·PRIMARYCTA both carry `margin-top: var(--space-24)` on `.lg-cta` (cards/shared/secondarycta.css:12) — correct where they sit at the foot of a logger, and additive here, which would make the exhibited gap 40px while this file documents 16. The universal child selector is deliberate: naming `.lg-cta` from this file would put a second owner on another component's selector (check 51's territory), and the slot's job is not to know what it holds. Vertical margins only — a door that centres itself horizontally, or pads itself, is still free to. */ .hem-door > * { margin-top: 0; margin-bottom: 0; }