/*§RUN§[70,"\n",3505,"\n",53345,"\n",1095]§*/html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}/**
* faces.css — the two type families `tokens.css` names, actually delivered.
* `CONTRACT-Webfont-16AUG.md`. Self-hosted, `public/fonts/PROVENANCE.md` records the source.
*
* ⛔ §0's defect, measured three ways before this file existed: zero `@font-face` anywhere in
* `src/`, zero font integration in `astro.config`/`package.json`, zero `.woff2` hits in `dist/`
* — the built output, which is the check that would have caught it. `tokens.css` has named
* `"Geist"` and `"Geist Mono"` since it was written; every page has rendered in the `system-ui` /
* `ui-monospace` fallback the whole time.
*
* ⛔⛔ SCOPE, deliberately narrow — §1. Three Geist weights, two Geist Mono weights: exactly
* what `--type-*-weight` publishes today. NOT Geist 700 (loaded by the drawing, used by no rule
* this project has). Shipping a weight nothing uses is the font-file version of the 51 inert
* `60ch` declarations design struck the same day this contract was written.
*
* ⛔ `font-display: swap`, never `optional` — `optional` can drop the face entirely on a slow
* connection, which reintroduces the exact fallback this file exists to remove.
*
* ⭐ `CONTRACT-Serif-16AUG.md` adds "Newsreader" below, ROMAN and ITALIC, both the `opsz` variable
* file (NOT the smaller `wght`-only file — the optical axis is the entire reason this face is
* variable at all) clamped to `font-weight: 400`, the one weight design's corpus draws.
*
* ⭐⭐ `CONTRACT-Optimize-14SEP.md` addendum 2 criterion 3, 17 Sep 2026: the two files at
* `/fonts/Newsreader-{Roman,Italic}.woff2` are now `fontTools.varLib.instancer wght=400` output
* — the `wght` axis (200-800, never set by any rule) is pinned OUT of the font itself rather than
* only clamped by this `@font-face` block, and `opsz` (6-72, the axis this face exists for) is
* kept, at the same served address (no manifest tracks `public/fonts`, so no new address is
* owed) and the same 224-character set. Roman 132,000 → 57,608 B, Italic 146,872 → 63,544 B. A
* computed-style scan of the built site (FINDING-Speed-16SEP.md, confirmed again by this round)
* found 0 elements setting Newsreader to a weight or `font-variation-settings` other than what
* this file already declares, so pinning the axis in the file changes no rendered page.
*/
@font-face {
font-family: "Geist";
src: url("/fonts/Geist-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist";
src: url("/fonts/Geist-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist";
src: url("/fonts/Geist-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist Mono";
src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist Mono";
src: url("/fonts/GeistMono-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Newsreader";
src: url("/fonts/Newsreader-Roman.woff2") format("woff2-variations");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Newsreader";
src: url("/fonts/Newsreader-Italic.woff2") format("woff2-variations");
font-weight: 400;
font-style: italic;
font-display: swap;
}
.sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
border:1px solid color-mix(in srgb,currentColor 50%,transparent);
border-radius:2px;box-sizing:border-box;overflow:hidden}
@keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
html.sc-dc-streaming .sc-placeholder,
html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
background:color-mix(in srgb,currentColor 5%,transparent);
border-color:transparent}
html.sc-dc-streaming .sc-placeholder::before,
html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
background:color-mix(in srgb,currentColor 8%,transparent)}
.sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
.sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
border-radius:2px;box-sizing:border-box;color:transparent;
user-select:none}
.sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
color:color-mix(in srgb,currentColor 50%,transparent);
background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
padding:0 3px}
.sc-host.sc-has-error{position:relative}
.sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
border-radius:4px;white-space:pre-wrap;pointer-events:none}
/* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
in sync until dc-runtime regains a build step. */
@media print {
@page { margin: 0.5cm; }
figure, table { break-inside: avoid; }
#dc-root, #dc-root > .sc-host { height: auto; }
*, *::before, *::after {
print-color-adjust: exact; -webkit-print-color-adjust: exact;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
animation-delay: -99s !important; animation-duration: .001s !important;
animation-iteration-count: 1 !important; animation-fill-mode: both !important;
animation-play-state: running !important; transition-duration: 0s !important;
}
}
x-dc{display:none!important}
/**
* cc-tokens.css — the shared token layer, one copy for every drawing (brief 119, drafted by Claude Code, 15 Sep 2026).
*
* Step 1 of Ryan's trial (D1 A, then his "A" on 15 Sep): these are CC Shell Header's own token lines, moved here
* verbatim, byte for byte, and the header now links this file instead of declaring them. Nothing else links it yet.
* Once Ryan has reviewed the header in the editor, the other drawings link it too and their own copies go.
* ⚠️ 16 names carry two or three values across the drawings today (--ground, --surface, --rule, --edge, --stroke,
* --caption, --quiet, --meta, --lede, --ink, --loud, --gutter and four --accent-* steps); those are settled with
* design before a second drawing links this file, never picked silently here.
*/
:root { --gutter-window:clamp(16px, 3.5443cqw + 2.18px, 44px); --gutter:var(--gutter-window); --space-apart:24px; --space-inset:16px; --space-bound:8px; --space-block:44px; --space-tight:4px; } /* ⭐ DECLARED brief 84 §2 — this drawing's own line, no longer an injection (was brief 48 A1). Transcribed from FOUNDATION: spacing and measure. ⭐ brief 86 §1 — --gutter's published value now lives in --gutter-window and --gutter reads it; same computed value, no second copy of the clamp, and the measure override on the chrome root has a name to reference. */
:root { --type-close-esc:10.5px; } /* ⭐ brief 62 §2 — published: off both --type-label (9.504px/400/.14em) and --type-micro (9.5px/400/.06em), a real third mono-caps size, not a rounding of either. */
:root { --ground:#0C0F12; --surface:#14171B; --panel:#1C2028; --rule:#272A2F; --caption:#7B8187; --quiet:#8E949C; --ink:#D6D9DE; --loud:#F5F7F9; } /* ⭐ DECLARED brief 84 §1 — this drawing's own line, no longer an injection (was brief 47 A1). Transcribed from FOUNDATION's neutral ramp. */
:root { --edge:#3F4348; } /* ⭐ brief 120 Part 3 (row 1977; Claude Code, 15 Sep, Ryan's A): CC Shell Header's search-overlay close button paints var(--edge) and nothing declared it. #3F4348 is the value the site has shipped since 11 Sep, and CC: Loadout's own ramp carries it. One of the 16 two-valued names brief 119 settles before a second drawing links this file. */
:root { --meta:#A4AAB1; } /* Declared once here (Ryan's yes, 17 Sep 2026). Every other drawing that paints var(--meta) declares this same #A4AAB1, so none of them changes. CC: Gathering declared none after linking this file, so its meta text lost its colour; this restores the value the site ships. */
/* ⛔ REALM IS INHERITED, NEVER A PROP — tokens.css §48.11, ruled 15 Aug. What follows is a
TRANSCRIPT of the token layer so this component draws standalone, keyed to `data-realm` on
an ANCESTOR, which is the only thing that may set a realm. ⭐ SiteHeader declares no accent
value of its own and takes no realm: the second ladder, and REALMS[].hue with it, is gone. */
:root, [data-realm] {
--accent-hue-oklch: 90;
--accent-wash: oklch(0.222 0.028 var(--accent-hue-oklch));
--accent-ring: oklch(0.300 0.060 var(--accent-hue-oklch));
--accent-rule: oklch(0.450 0.090 var(--accent-hue-oklch));
--accent-base: oklch(0.750 0.125 var(--accent-hue-oklch));
--accent-press: oklch(0.660 0.125 var(--accent-hue-oklch));
--accent-lift: oklch(0.860 0.055 var(--accent-hue-oklch));
--chrome-gold: oklch(0.750 0.125 90);
/* Facts ABOUT a realm, never the page's cast — the class matrix and the result chip.
⭐ brief 88 §1 — and, from today, the realm SELECTOR's matched set: it names the realm the
reader chose, which need not be the realm the page is cast in. */
--realm-arthurian: oklch(0.750 0.125 25);
--realm-tuatha: oklch(0.750 0.125 160);
--realm-viking: oklch(0.750 0.125 250);
/* ⚠️ brief 88 §1, MY ONE DEVIATION FROM THE WORDING, declared. The amendment says the divider
hairline takes --realm-*, but that is the ladder's BASE step (L 0.750 / C 0.125) and the
seam was drawn at its RING step (--accent-ring, L 0.300 / C 0.060) — a 1px full-chroma line
across the whole window is not a hairline, it is a rule. These three are the ring step at
each realm's hue, transcribed off the same ladder --accent-ring comes from, so the seam
takes the CHOSEN realm as ruled and keeps the weight it was drawn at. ⏳ To take the
wording literally instead, point the seam at --realm-* and delete these three. */
--realm-ring-arthurian: oklch(0.300 0.060 25);
--realm-ring-tuatha: oklch(0.300 0.060 160);
--realm-ring-viking: oklch(0.300 0.060 250);
}
[data-realm="arthurian"] { --accent-hue-oklch: 25; }
[data-realm="tuatha-de-danann"] { --accent-hue-oklch: 160; }
[data-realm="viking"] { --accent-hue-oklch: 250; }
/* Failure: the failed-link underline and the notice edge. Every drawing already paints
var(--danger, oklch(0.660 0.170 22)); declared once here (Ryan, 15 Sep 2026). */
:root { --danger: oklch(0.660 0.170 22); }
/* ══ brief 100 §2 · THIS PAGE'S TWO CONTROLS, IN CSS ══════════════════════════════════════
The view toggle is a radio pair and the recipe tree is nested . Everything below
is a pseudo-state or a state read off another element with :has() — the only two things
that cannot be an inline style. ⛔ And neither pane may carry an inline display: an inline
value outranks these rules, which is the whole reason they are here. */
[data-cc-joint] input[data-cc-native] { position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none; }
[data-cc-joint] [data-cc-view] { background:#12161a; color:var(--quiet); }
/* brief 95 §2 · hover goes to the SELECTED ground, so the hover shows the press's outcome. */
[data-cc-joint] [data-cc-view]:hover { background:#2b3138; color:var(--loud); }
/* The selected half takes no pointer: it is already the view you are looking at, and hover is
a promise that a press changes something. */
[data-cc-joint] [data-cc-view]:has(input:checked) { background:#2b3138; color:var(--loud); pointer-events:none; }
[data-cc-joint] [data-cc-view]:has(input:focus-visible) { outline:2px solid var(--stroke, #696E74); outline-offset:2px; }
[data-cc-joint] [data-cc-pane] { display:none; }
[data-cc-joint]:has([data-cc-view="recipe"] input:checked) [data-cc-pane="recipe"] { display:block; }
[data-cc-joint]:has([data-cc-view="places"] input:checked) [data-cc-pane="places"] { display:block; }
/* The tree. The marker goes; the caret the page already drew is the disclosure, and it turns. */
[data-cc-joint] details[data-cc-branch] > summary { list-style:none; }
[data-cc-joint] details[data-cc-branch] > summary::-webkit-details-marker { display:none; }
[data-cc-joint] details[data-cc-branch][open] > summary [data-cc-twist] { transform:rotate(180deg); }
:root { --gutter:clamp(16px, 3.5443cqw + 2.18px, 44px); --section:clamp(44px, 5.5696cqw + 22.28px, 88px); } /* ⭐ DECLARED brief 84 §2 — this drawing's own line, no longer an injection (was brief 48 A1). Transcribed from FOUNDATION: spacing and measure. */
/* The published accent ladder, declared ONCE so the file references the TOKEN rather than
re-typing its expression. L and C live here and nowhere else; --accent-hue-oklch is the
only number a realm sets. ⛔ No literal fallback anywhere — an undeclared hue must fail
loudly, because silently drawing 160 renders an Arthurian page Tuatha green and nothing
objects. Declared on :root AND [data-realm] together: a ladder declared only upstream
resolves against the upstream hue and inherits the RESULT, so a descendant realm flip
would not move it. */
body { margin:0; background:var(--ground); color:var(--ink); font-family:'Geist', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
a { color:var(--accent-base); text-decoration:none; }
a:hover { color:var(--accent-lift); }
/* ⭐ 22 Sep · MOBILE PAIR 18 — PHONE ONLY, below 640 of container, the width at which this
band's Source, Where and Used in tracks already clamp to nought. This is the band the whole
item page exists for, and on a phone every rung of it was a 19–23px target stacked a few
pixels from the next — on 1,063 pages.
⛔ The OVERFLOW claimed here on the first pass is withdrawn (22 Sep): it was our probe
reading past a clipped parent, not the page. What the band does lose at 390 is its second
column — the rung becomes Qty plus Item, so where an input comes from is carried by indent
alone. So below 640 the rung stops being a grid: Qty, plate and name on line 1, Source and
Where on line 2 under the name, which buys that back. The row's own inset goes to 0 so the
nesting indent has the width to say what it means; the caret stays the platform's
disclosure, and at 60px the ingredient link and the twist are separate targets. */
@container (max-width: 640px) {
[data-cc-chainhead] { display:none !important; }
[data-cc-joint] summary {
grid-template-columns:44px auto minmax(0,1fr) !important;
row-gap:var(--space-tight);
min-height:60px;
padding-left:0 !important; padding-right:0 !important;
}
[data-cc-joint] summary > span:nth-child(1) { grid-column:1; grid-row:1; }
[data-cc-joint] summary > span:nth-child(2) { grid-column:2 / -1; grid-row:1; }
[data-cc-joint] summary > span:nth-child(3) { grid-column:2; grid-row:2; }
[data-cc-joint] summary > span:nth-child(4) { grid-column:3; grid-row:2; padding-left:var(--space-bound) !important; }
/* Used in is the one cell that does not come back: it is a count about somewhere else, and
the rung's own two facts are what the reader lost. */
[data-cc-joint] summary > span:nth-child(5) { display:none; }
[data-cc-joint] summary a { display:flex; align-items:center; min-height:44px; white-space:normal !important; }
/* ⛔ 23 Sep · criterion 24 — "Coal" (31.2) and "Salt", CLASSIFIED rather than assumed: measured
on the built page, each is the name link of a recipe-tree row whose parent is a flex span and
whose only siblings are the 44px plate and the node-info block. No running text surrounds it,
so it is a standalone row link, and a standalone link is 44 × 44. */
[data-cc-joint] summary a { min-width:44px; }
}
/* ⛔ 23 Sep · CONTRACT-MobileApply-22SEP.md criterion 14 — THE TWO GROUPS PAIR 18 DID NOT REACH.
Pair 18 is scoped to `[data-cc-joint] summary a`, and its own comment says "Used in is the one
cell that does not come back" — so "What it goes into" and the view tabs kept the sizes the
first pass measured. Both were re-measured on the built page at 390, not read off the drawing:
· the reverse index's 10 name links at 166 × 19. Severity was tested rather than assumed: the
row is 358 × 57, but a tap 31px below the link's top, inside the row and outside the link,
does nothing, while a tap on the 19px link navigates. The 19px link really was the only
target. It becomes a 44-tall flex line, which carries its wrapper — and therefore the
ItemCard overlay mounted at `inset:0` on that wrapper, the round's other named 10 (214 × 40)
— up with it. One rule, both groups.
· the two view tabs. The radios themselves are the 1 × 1 `opacity:0` inputs Pair 18 leaves
alone; what a thumb actually lands on is the label that styles them, and that was 38 tall.
Class Index's realm radios already reach 44 this way. */
@container (max-width: 640px) {
[data-screen-label="Used in"] [data-cc-cell="usedname"] {
display:flex; align-items:center; min-height:44px; white-space:normal !important;
}
[data-cc-joint] [data-cc-view] { min-height:44px; }
}
/* ⭐ brief 119, 15 Sep 2026 — the token lines that stood here (spacing, --type-close-esc, the neutral ramp, and the realm-keyed accent ladder with its three realm selectors) moved verbatim to ./cc-tokens.css, linked above. Values unchanged. */
/* ⛔ NOT a bare `a` selector. A helmet stylesheet is global and this component is
IMPORTED, so a bare rule here outranks the host page's own by mount order and decides
link colour for every link on the page. Scoped to this component's own root instead. */
[data-cc-chrome="header"] a { color:var(--ink); text-decoration:none; }
[data-cc-chrome="header"] a:hover { color:var(--loud); }
/* ⛔ caret-color was --chrome, which is the focus ring and only the focus ring. Removed:
the field's caret is currentColor, which is --loud, the ink already in the box. */
input.cc-q { all:unset; flex:1 1 auto; min-width:0; font-family:'Geist', system-ui, sans-serif; color:var(--loud); }
input.cc-q::placeholder { color:#A4AAB1; }
/* ⛔ The search field carries NO ring and NO border in any state — ground and ink only.
⭐ AND THE SEARCH BAR IS THE WHOLE ROW: everything above the divider is one object, so
the ground change belongs to the row, not to a box inside it. A 564-wide well sitting in
a wider row drew exactly the edge the no-border rule exists to avoid — it just drew it
in ground instead of in stroke. The measure governs the RESULTS below the divider; the
bar itself is full-bleed, and its close affordance is part of it.
`all:unset` does not remove the UA focus outline, so focus was also drawing a bright box
around the flex area. Now: focus deepens the row and lifts the placeholder to --lede. */
input.cc-q:focus, input.cc-q:focus-visible { outline:none; box-shadow:none; }
/* ⭐ brief 61 §5 — was raw #080A0D. Now the published --state-recess relation: a flat
30% black veil over whatever ground sits beneath, same shape as the hover lift. */
[data-searchrow]:focus-within { background:color-mix(in srgb, black 30%, var(--ground)) !important; }
[data-searchrow]:focus-within input.cc-q::placeholder { color:#C7CCD1; }
/* ── the chrome's own four rules · sweep, 16 Aug ─────────────────────────────────
⭐ ONE rule each for the button reset, the tint, the ring and the guard. Written
here rather than inline because the alternative is 16 decisions in this file and 161
across the corpus, and because a per-element hover is 16 places for the next one to
drift. ⛔ This is the only thing in the file that could not be an inline style. */
[data-cc-chrome="header"] {
--chrome:#CFD6DE; --focus-ring-width:2px; --focus-ring-offset:2px;
--motion-tint:160ms; --motion-settle:260ms; --motion-drift:420ms;
}
/* ⛔⛔ The two layout groups are collapsed to 0 by a clamp and clipped, which hides them
from the EYE and not from the TAB ORDER — harmless while they were spans, a defect the
moment they became real controls. A phone reader would tab seven invisible desktop
controls, Sign in and the search trigger among them, before reaching anything drawn.
⭐ visibility:hidden takes them out of the tab order and the a11y tree; the clamp still
owns the layout, so no dimension moves. Two queries, not fourteen attributes. */
@container (max-width: 899.98px) { [data-cc-chrome="header"] [data-cc-group="desktop"] { visibility:hidden; } }
@container (min-width: 900px) { [data-cc-chrome="header"] [data-cc-group="mobile"] { visibility:hidden; } }
/* ⛔ 23 Sep · CONTRACT-MobileApply-22SEP.md criterion 21 — ONE SHAPE, SWEPT, NOT ONE INSTANCE.
Pair 01 made the mark's anchor a 44-tall flex box below 900 with every size term clamped to 0
above it — and left `display:flex; align-items:center` unconditional. Above 900 the box stays
39.08 × 24 either way, which is why pass 2 could only declare it an exception rather than call it
a defect; but it is the same shape as criterion 16's back link and criterion 20's name links,
and the sweep scopes every instance of the shape rather than excusing the ones that happen to
paint nothing. The anchor keeps main's `display:block`, and flex moves in here — both
declared in this sheet and neither inline, because an inline `display` would outrank the query. */
[data-cc-chrome="header"] [data-cc-logolink] { display:block; }
@container (max-width: 899.98px) { [data-cc-chrome="header"] [data-cc-logolink] { display:flex; align-items:center; } }
[data-cc-chrome="header"] button {
appearance:none; -webkit-appearance:none; background:none; border:0; margin:0;
padding:0; font:inherit; color:inherit; text-align:left;
}
/* tint · 160ms ease. ⛔ Colour only — the chrome draws no settle, drift or ambient. */
[data-cc-chrome="header"] a,
[data-cc-chrome="header"] button {
transition: color var(--motion-tint) ease, background-color var(--motion-tint) ease;
}
/* ⭐ Focus DRAWN as a state rather than left to the standard.
⛔ `input:focus-visible` WAS in this list, on the reasoning that `all:unset` had removed
the field's ring and the ring had to come back. Removed 15 Aug: the search bar's states
are ground and ink only, so the ring is not missing from it — it is refused by it. Links
and buttons keep the ring; they have no ground of their own to deepen. */
[data-cc-chrome="header"] a:focus-visible,
[data-cc-chrome="header"] button:focus-visible {
outline: var(--focus-ring-width) solid var(--chrome);
outline-offset: var(--focus-ring-offset);
}
/* ⛔ The guard, keyed to the same three names. tint KEEPS — a colour change is not
motion, and dropping it takes feedback away and gives nothing back. settle and drift
lose their geometry, ambient stops. Declared although the chrome draws none of those
three, so the next thing added here inherits the contract instead of inventing one. */
@media (prefers-reduced-motion: reduce) {
[data-cc-chrome="header"] [data-motion="settle"],
[data-cc-chrome="header"] [data-motion="drift"] { transform:none; transition-property:color, background-color; }
[data-cc-chrome="header"] [data-motion="ambient"] { animation:none; }
}
/* ══ brief 100 §2 · THE BROWSER RUNS THIS CHROME NOW ═══════════════════════════════════
Five controls used to be five pieces of component state (menu, drawer, search, scope) and
a document keydown listener. They are now the platform's: `popover` for the four menus,
the drawer and the search overlay; `` for the drawer's two expanding sections;
a radio group for the search scope; `:placeholder-shown` for typed-vs-resting. Escape,
outside-click dismiss, one-open-at-a-time and the invoker's aria-expanded all arrive from
the standard. ⛔ This block is the only thing in the file that could not be inline: every
rule here is either a pseudo-state or a state read off a DIFFERENT element with :has().
⚠️ ONE DECLARED DIFFERENCE. A popover is painted in the TOP LAYER, so its containing block
is the window and not this component's query container. Its edge is therefore drawn off
--cc-edge (the same clamp in vw) rather than --gutter (cqw). In the build the bar spans the
window and the two are the same number; in a narrow preview harness the panels take the
window's edge while the bar takes the harness's. Named rather than hidden. */
[data-cc-chrome="header"] {
--cc-edge: max(clamp(16px, 3.5443vw + 2.18px, 44px), (100vw - 1180px) / 2);
--cc-bar-bottom: 60px; /* ribbon 3 + bar 56 + seam 1 */
}
/* The ribbon is a prop, so the drop is read off the ribbon's PRESENCE, not off a hole. */
[data-cc-chrome="header"]:not(:has([data-cc-ribbon])) { --cc-bar-bottom: 57px; }
[data-cc-chrome="header"] [popover] { margin:0; border:0; padding:0; color:var(--ink); }
/* ⛔ No scrim. The chrome never drew one, and a popover brings a default backdrop. */
[data-cc-chrome="header"] [popover]::backdrop { background:transparent; }
[data-cc-chrome="header"] [data-cc-pop] {
/* inset:auto first — the UA sheet sets inset:0 on every popover, and an over-constrained
left+right+width resolves to the left edge whatever `right` says. */
position:fixed; inset:auto; top:var(--cc-bar-bottom); z-index:50;
background:var(--surface); max-height:calc(100dvh - var(--cc-bar-bottom)); overflow-y:auto;
}
/* ⚠️ Each side names BOTH horizontal offsets. A popover with left AND right set is
over-constrained and the browser keeps the start edge, which is how a right-hung menu
first drew itself against the left gutter — the UA sheet's inset:0 is on the element too
and one `inset:auto` earlier in the block was not enough to clear it. */
[data-cc-chrome="header"] [data-cc-pop="left"] { left:calc(var(--cc-edge) - 16px); right:auto; }
[data-cc-chrome="header"] [data-cc-pop="right"] { right:calc(var(--cc-edge) - 16px); left:auto; }
[data-cc-chrome="header"] [data-cc-pop="wide"] { left:0; right:auto; width:100vw; }
/* One declaration rather than fifty edits: inside a top-layer panel --gutter IS --cc-edge, so
every edge the panels already drew off --gutter keeps its name and changes its measure. */
[data-cc-chrome="header"] [popover] { --gutter: var(--cc-edge); }
/* ══ 11 Sep, Ryan · THE TWO BAR MENUS OPEN ON HOVER, AND CLASSES IS A LINK ════════════════
Classes and the realm chooser are not press-to-open menus: the pointer arrives and they
come down. That rules out `popover`, which only opens on invocation — so these two panels
are plain fixed panels shown by :hover and :focus-within, read off the chrome root with
:has(). The panel stays open while the pointer is inside it because it is a DESCENDANT of
nothing it needs to be: the rule tests the panel's own hover as a second condition.
⭐ A press on Classes now GOES TO /classes — it is an , and the menu is what hover adds.
⚠️ position:fixed, not absolute: the desktop nav group clips (overflow:hidden), and the
chrome root's container-type makes it the containing block for fixed children, so the panel
hangs off the root and the group cannot cut it. Its top edge is the bar's bottom edge with
no gap, which is what lets the pointer travel from the opener into the panel.
⛔ The search overlay, the account menu and the mobile drawer stay popovers: those are
press-to-open, and Escape plus light dismiss is exactly what they want. */
/* ⚠️ 11 Sep, Ryan · THE BRIDGE, and it is the whole reason the panel is two elements. The
opener is a 44px box centred in a 56px bar, so its bottom edge sits ~7px above the bar's —
and the panel began at the bar's bottom. Between the two was a dead band where neither was
hovered, so the menu closed on the way down to it. The PANEL is now a transparent box that
starts 10px higher and pads that 10px back; its inner box is the surface the reader sees.
The hover regions therefore overlap and the drawn edge does not move. ⛔ The bridge cannot
be a ::before or a negative-top child: the scrolling box would clip it, which is why the
scroll and the ground moved to the inner element. */
[data-cc-chrome="header"] [data-cc-panel] {
display:none; position:fixed; inset:auto; z-index:50;
top:calc(var(--cc-bar-bottom) - 10px); padding-top:10px;
background:transparent; --gutter: var(--cc-edge);
}
[data-cc-chrome="header"] [data-cc-panel-inner] {
background:var(--surface); max-height:calc(100dvh - var(--cc-bar-bottom)); overflow-y:auto;
}
[data-cc-chrome="header"] [data-cc-panel="classes"] { left:calc(var(--cc-edge) - 16px); right:auto; }
[data-cc-chrome="header"] [data-cc-panel="realm"] { right:calc(var(--cc-edge) - 16px); left:auto; }
/* ⭐ brief 101 §1.8 · the account menu joins them, right-aligned to the same edge. */
[data-cc-chrome="header"] [data-cc-panel="account"] { right:calc(var(--cc-edge) - 16px); left:auto; }
[data-cc-chrome="header"]:has([data-cc-opener="account"]:hover) [data-cc-panel="account"],
[data-cc-chrome="header"]:has([data-cc-opener="account"]:focus-visible) [data-cc-panel="account"],
[data-cc-chrome="header"]:has([data-cc-panel="account"]:hover) [data-cc-panel="account"],
[data-cc-chrome="header"]:has([data-cc-panel="account"]:focus-within) [data-cc-panel="account"],
[data-cc-chrome="header"]:has([data-cc-opener="classes"]:hover) [data-cc-panel="classes"],
[data-cc-chrome="header"]:has([data-cc-opener="classes"]:focus-visible) [data-cc-panel="classes"],
[data-cc-chrome="header"]:has([data-cc-panel="classes"]:hover) [data-cc-panel="classes"],
[data-cc-chrome="header"]:has([data-cc-panel="classes"]:focus-within) [data-cc-panel="classes"],
[data-cc-chrome="header"]:has([data-cc-opener="realm"]:hover) [data-cc-panel="realm"],
[data-cc-chrome="header"]:has([data-cc-opener="realm"]:focus-visible) [data-cc-panel="realm"],
[data-cc-chrome="header"]:has([data-cc-panel="realm"]:hover) [data-cc-panel="realm"],
[data-cc-chrome="header"]:has([data-cc-panel="realm"]:focus-within) [data-cc-panel="realm"] { display:block; }
/* The two caret states of the Classes opener, and the drawer opener's two words. Both used to
be a pair of sc-ifs on component state; both are drawn once now and chosen by CSS.
⛔ AND NEITHER CARET MAY CARRY AN INLINE `display`. One did, and an inline display outranks
the rule that hides it — which is why the open menu drew both arrows at once. */
[data-cc-chrome="header"] [data-cc-caret="down"] { display:block; }
[data-cc-chrome="header"] [data-cc-caret="up"] { display:none; }
[data-cc-chrome="header"]:has([data-cc-opener="classes"]:hover) [data-cc-opener="classes"] [data-cc-caret="down"],
[data-cc-chrome="header"]:has([data-cc-panel="classes"]:hover) [data-cc-opener="classes"] [data-cc-caret="down"],
[data-cc-chrome="header"]:has([data-cc-panel="classes"]:focus-within) [data-cc-opener="classes"] [data-cc-caret="down"] { display:none; }
[data-cc-chrome="header"]:has([data-cc-opener="classes"]:hover) [data-cc-opener="classes"] [data-cc-caret="up"],
[data-cc-chrome="header"]:has([data-cc-panel="classes"]:hover) [data-cc-opener="classes"] [data-cc-caret="up"],
[data-cc-chrome="header"]:has([data-cc-panel="classes"]:focus-within) [data-cc-opener="classes"] [data-cc-caret="up"] { display:block; }
[data-cc-chrome="header"] [data-cc-drawer-word="close"] { display:none; }
[data-cc-chrome="header"]:has(#cc-drawer:popover-open) [data-cc-drawer-word="menu"] { display:none; }
[data-cc-chrome="header"]:has(#cc-drawer:popover-open) [data-cc-drawer-word="close"] { display:inline; color:var(--loud); }
/* THE SEARCH OVERLAY'S TWO HALVES. Resting is an empty field, which the browser already
knows: :placeholder-shown. So both halves are in the drawn page and CSS picks, with no
render pass and no state — and a reader who types with no engine running still crosses
from one to the other. ⛔ The RESULTS inside the typed half are a fetch, so they stay the
build's (§7); this rule only decides which half is on screen.
⛔ AND NOT ONE OF THESE DISPLAY VALUES MAY BE INLINE. An inline `display` outranks the UA
stylesheet's `[popover]:not(:popover-open) { display:none }`, so a popover carrying its own
inline display is a panel that is permanently open — which is exactly how the first cut of
this pass drew the search overlay. Every display that participates in an open/closed or
either/or state therefore lives in this block, and the inline styles keep the rest. */
#cc-search:popover-open { display:flex; flex-direction:column; }
#cc-search [data-cc-when="typed"] { display:contents; }
#cc-search [data-cc-when="resting"] { display:block; }
#cc-search:has(input.cc-q:placeholder-shown) [data-cc-when="typed"] { display:none; }
#cc-search:not(:has(input.cc-q:placeholder-shown)) [data-cc-when="resting"] { display:none; }
/* THE SCOPE CHIPS ARE A RADIO GROUP. The pressed chip is :checked, so the ground and the ink
are a rule rather than two holes, and the "Search All Realms Instead" escape is a