` for * exactly this reason. `tools/check-prism.py` asserts it. * * *This rule cannot be applied backwards without a look: prism-brand owns its * internals and could not be a molecule. It stays an atom -- one indivisible * mark -- and that is named rather than quietly excepted.* * ======================================================================== */ @layer prism.molecules { /* --- M1 · prism-card, M2 · prism-image-card -------------------------- * TWO COMPONENTS, RULED BY THE OWNER, against one with an optional image. * **They share this block on purpose.** The risk of two names is that they * drift; sharing the rules for tag, title, body and meta means they cannot * drift VISUALLY, and the only real difference stays the one the owner * named: whether there is a picture. * * Transcribed from DESIGN.md 3.5 and the reference's `.article`: * ground --surface-default, 48px, the title going --interactive on hover, * and the whole card a pointer. */ prism-card, prism-image-card { display: flex; flex-direction: column; position: relative; /* **A CARD'S GROUND SITS BETWEEN THE PAGE'S AND A FIELD'S.** *Ruled by * the owner 2026-09-20: a colour between the background and the text * field's.* The field is 6% of the text colour into the surface * (--surface-control); the card is the halfway point, 3%. Mixed on the * card, so it follows whatever ground the card sits on — the same * argument as the control ground and the slider's track tones. */ background: color-mix(in srgb, var(--text-default) 3%, var(--surface-default)); color: var(--text-default); /* **THE HAIRLINE IS THE CARD'S.** A grid whose ground showed through a 1px * gap drew rules between cards and a grey BLOCK wherever the last row was * short. A border belongs to the thing it outlines. */ border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--text-default) 3%, var(--surface-default)), var(--text-default) var(--edge-mix)); transition: background-color .2s ease; /* **A grid item's default minimum is its CONTENT.** Without this a long * unbroken word makes the card wider than its track and pushes the whole * row out of the grid. */ min-inline-size: 0; /* The card measures ITSELF, so the rules below answer to the card's own * width and not to the screen's. A card in a narrow sidebar on a wide * monitor is narrow. */ container-type: inline-size; } /* **A CARD IS NEVER A TILE.** *A thumb is `prism-thumb` — the owner ruled it * its own molecule, so a card that hid its own text to imitate one had no * reason to exist.* What stays is the padding, which comes down before a * card gets cramped: 32px each side of a 200px card is two thirds of it. */ @container (max-width: 320px) { :is(prism-card, prism-image-card) > prism-stack { padding: var(--space-4) } } :is(prism-card, prism-image-card):has(a[href]) { cursor: pointer } /* **THE STRUCTURE IS THE SAME WHETHER OR NOT THE CARD IS A LINK, AND THAT * IS THE FIX.** It used to wrap everything in an ``, so * a linked card was `prism-card > a > prism-stack` — and every rule here is * a DIRECT-CHILD selector, so a linked card silently lost its padding and * its text ran to the edge. *`display: contents` removes the box, never the * DOM position.* * * The link now lives inside the title and stretches over the card with a * pseudo-element. One structure, every selector matches, the whole card is * the target, and the accessible name is the title rather than the entire * contents read aloud. */ :is(prism-card, prism-image-card) > prism-stack { padding: var(--space-7); min-inline-size: 0; } prism-image-card > prism-stack:empty { display: none } :is(prism-card, prism-image-card) > prism-image { inline-size: 100%; } .prism-card-title { transition: color .2s ease } .prism-card-title a { color: inherit; text-decoration: none; } /* The stretched link: the anchor is in the title, the hit area is the card. */ .prism-card-title a::after { content: ""; position: absolute; inset: 0; } :is(prism-card, prism-image-card):hover .prism-card-title { color: var(--interactive) } .prism-card-title a:focus-visible::after { outline: 2px solid var(--interactive); outline-offset: -2px; } /* --- M9 · prism-nav · THE HEADER BAR ------------------------------------ * **BRAND LEFT, MENU RIGHT, NOTHING ELSE.** *Ruled by the owner.* * * **ONE COMPONENT FOR BOTH SHAPES.** Above 900px the items are inline text * links; below it they are a hamburger and a dropdown. Same element, same * children, same markup — a tenant writes neither shape and never sees the * width. Same boundary the wall takes its fourth column at. * * **IT SITS IN THE PAGE'S OWN MEASURE.** The owner's rule was left and right * spacing "like the gutter", and on a 2560px screen a gutter-only bar leaves * the brand at x=64 while the content below it is centred in 1280 — brand * and page visibly out of line. So the bar takes the measure AND the gutter, * the way `prism-container` does, and lines up with what it heads. * * ~~**8px WHERE THERE IS NO GUTTER.**~~ **8px INSIDE THE GUTTER, AT EVERY * WIDTH.** *Ruled by the owner 2026-09-24: the brand and the floats sat * exactly on the page edge and should not.* `--space-2` added to the gutter, * so on a phone, where the gutter is 0, it is the 8px it already was. * * It assembles prism-brand, prism-cluster, prism-stack, prism-button, * prism-icon and prism-link, and owns nothing. */ prism-nav { display: block; position: relative; margin-inline: auto; padding-inline: calc(var(--gutter) + var(--space-2)); max-inline-size: calc(var(--measure-app) + (var(--gutter) + var(--space-2)) * 2); } /* **AS THIN AS IT GOES — AND ONE HEIGHT IN BOTH SHAPES.** *Ruled by the * owner 2026-09-19: the top must not move at 900.* ~~Above 900px there is no * button and the brand sets it~~ — that made the bar ~5px shorter the moment * the hamburger left, and every page under the sticky bar jumped up at * exactly the width the nav changes shape. The floor is the hamburger's in * BOTH shapes: 20px icon + 8px button padding + 1px border each side = 38px, * plus 8px bar padding above and 4px below = 50px, border-box. The brand * (~33px) rides inside it at every width. *The top went from 4 to 8, ruled by * the owner 2026-09-24: too tight under the glass edge.* */ prism-nav > prism-cluster { padding-block: var(--space-2) var(--space-1); min-block-size: 50px; } /* **THE FLOAT STATE SEATS A 44px CIRCLE, SO ITS FLOOR IS 56.** The menu * bar's cap is 50 — the hamburger's row — and variant="float" is a 44px * circle: 44 + 8 + 4 = 56. The collision the ask named, settled by the bar * growing in THIS state rather than the circle shrinking under its hit * size. A tenant's header is one state or the other, so nothing jumps. */ prism-nav[float] > prism-cluster { min-block-size: 56px } .prism-nav-floats { flex-wrap: nowrap } /* **THE TWO SHAPES ARE ONE LIST, POSITIONED DIFFERENTLY.** Mobile first, so * the dropdown is what a browser matching no query gets. * * **THE PANEL IS SOLID.** The bar's fade is for content passing underneath * it; a dropdown that faded would put its last row on top of that content. * *Named by the owner as the bar's background, not the menu's.* */ .prism-nav-items { display: none; position: absolute; inset-inline: 0; top: 100%; z-index: 1; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface-default); border-block-end: 1px solid var(--border-default); padding: var(--space-2) 0 var(--space-4); } prism-nav[open] .prism-nav-items { display: flex } .prism-nav-items prism-link > a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: none; /* **THE MENU SPEAKS NEWSREADER, AND SAYS SO.** *Ruled by the owner * 2026-09-20.* The items stated no face and inherited the page's, so the * suite's one bar wore monospace on one proof page and plain sans on * another — and a tenant setting a body font would skew every menu the * same way. The system's body voice, stated where no ground can dress * the bar. */ font: 400 var(--type-body) / 1.65 var(--font-body); } /* **"YOU ARE HERE", TWO WAYS.** *Ruled by the owner.* Inline it is the item * with no underline, where every other item has one — the same distinction * the page menu already made. In the dropdown it is a chevron, because a * row has no underline to remove. * * **THE CHEVRON LEADS, IT DOES NOT TRAIL.** A trailing chevron on a menu row * means "there is more this way", and the owner has said levels come later. * Leading, it points at the row and cannot be read as a promise. It is * present on every row and VISIBLE on one, so the labels line up. */ prism-nav prism-link > a > prism-icon { visibility: hidden } prism-nav prism-link[current] > a > prism-icon { visibility: visible } prism-nav prism-link[current] > a { border-bottom: none; color: var(--interactive); } /* **THE HAMBURGER CARRIES A BACKGROUND — THE PAGE'S OWN.** *Ruled by the * owner 2026-09-20, the day the header lost its background:* the bar is * transparent now, so the one control in it stands on an opaque square of * the mode's surface — the same move `prism-thumb`'s marker makes. Hover is * restated or the atoms-layer secondary hover would punch the square * transparent under the pointer; colour and border still react from there. * This layer (molecules) outranks the atom's rules, which is what lets a * class do it without fighting the variant's specificity. */ .prism-nav-burger > button, .prism-nav-burger > button:hover { background: var(--surface-default) } @media (min-width: 900px) { .prism-nav-burger { display: none } /* The same element, back in the bar. */ .prism-nav-items { display: flex; position: static; flex-direction: row; align-items: center; gap: var(--space-5); background: none; border-block-end: none; padding: 0; } /* **THE UNDERLINE COMES BACK HERE, AND ONLY HERE.** The panel rows drop it * — a row has no underline to remove, which is why the chevron exists. But * dropping it for BOTH shapes left nothing for the current item to be * distinguished from, so "no underline" marked every item equally. The * `[current]` rule above is more specific and still wins. */ .prism-nav-items prism-link > a { display: inline; padding: 0; border-bottom: 1px solid currentColor; } /* No chevrons inline: the underline is what says where the reader is. */ prism-nav prism-link > a > prism-icon { display: none } } /* --- M8 · prism-player ------------------------------------------------- * **THE CONTROLS SIT OVER THE VIDEO AND COME AND GO.** *Ruled by the owner.* * * They sat under it, and the reason was the scrim: text on an arbitrary * video has no contrast guarantee, which is what kept text off the face of a * card. **Auto-hide is what changes that argument.** A scrim that is only * there while the pointer is answers the objection — the picture is * uncovered whenever nobody is reaching for a control — and it is the whole * reason to hide chrome at all. Chrome below the frame is already out of the * picture's way; hiding it buys nothing and costs either a permanent empty * strip or a jump on every pointer crossing. * * **THE BAR CARRIES ITS OWN GROUND, so it names the internal tokens.** Same * exception `prism-thumb`'s marker makes, and for the same reason: a bar on * an arbitrary frame has no surface to inherit meaning from. The scrim is * ink in both modes, so `--interactive` is the reaction that answers to ink * — pink — rather than the mode's. *`prism-surface[tone="chromatic"]` set * that precedent: the ground decides the reaction, not the mode.* * * It assembles prism-video, prism-cluster, prism-button, prism-icon, * prism-slider and prism-text, and owns nothing. */ prism-player { display: block; position: relative; /* The bar answers to the PLAYER's width, not the screen's. A player in a * narrow column on a wide monitor is narrow. */ container-type: inline-size; } /* **THE SURFACE IS A PLAY BUTTON.** *Ruled by the owner: play/stop on click * on the video surface, controls showing or not.* The button in the bar is * still the one a keyboard reaches and a reader hears announced; this is the * gesture, and it is why hiding the bar leaves nothing unreachable. */ prism-player > prism-video { cursor: pointer } prism-player > prism-cluster { position: absolute; inset-inline: 0; inset-block-end: 0; align-items: center; padding: var(--space-3); --surface-default: var(--_ink); --text-default: var(--_ink-text); --text-dimmed: var(--_ink-text-75); --border-default: color-mix(in srgb, var(--_ink-text) 40%, transparent); --interactive: var(--pink); color: var(--text-default); /* Top stop is fully transparent INK, not the keyword: mixing to * `transparent` keeps the same colour, so the gradient fades out rather * than fading through grey. */ background: linear-gradient(to top, color-mix(in srgb, var(--_ink) 88%, transparent), color-mix(in srgb, var(--_ink) 0%, transparent)); transition: opacity .2s ease, visibility .2s ease; } /* **`visibility`, NOT ONLY `opacity`.** A bar at zero opacity still takes * every click over the bottom of the frame, so the surface would be a play * button everywhere except the strip where the picture matters most. */ prism-player[idle] > prism-cluster { opacity: 0; visibility: hidden; } /* **NO HOVER MEANS NO HIDING.** On a touch screen a tap that both reveals * the controls and toggles playback is one gesture with two meanings, and * whichever the reader wanted, they get the other one half the time. */ @media (hover: none) { prism-player[idle] > prism-cluster { opacity: 1; visibility: visible } } @media (prefers-reduced-motion: reduce) { prism-player > prism-cluster { transition: none } } /* **THE VOLUME SLIDER IS THE FIRST THING TO GO.** Under 480px the bar is * play, scrubber, time, mute and full screen, and the scrubber is what the * room is for. Mute stays: it is the control that matters when sound is the * problem. */ .prism-player-volume { display: none; flex: 0 0 80px; } @container (min-width: 480px) { .prism-player-volume { display: block } } prism-player prism-slider { flex: 1 1 auto; min-inline-size: 0 } /* **A FIXED WIDTH FOR THE TIME, BECAUSE IT CHANGES EVERY SECOND.** Left to * its content, the readout resizes at 0:09 -> 0:10 and drags the scrubber * with it once a second for the length of the video. */ prism-player > prism-cluster > prism-text { min-inline-size: 10ch; text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } /* --- prism-selection-bar ------------------------------------------------ * *Ruled by the owner 2026-09-23.* Fixed to the bottom of the screen, over * the content, on a fade of the page's own colour so the words hold over * any photograph. The controls line up with the WALL's edges — the measure * and a constant 24 — not with the viewport's, or on a wide monitor they * float far off the thing they act on. * * **THE PAGE MAKES ROOM FOR IT.** While a bar is showing, the content gets * the bar's height at its end, so the last row of a listing is never under * it. A tenant writes no padding. */ prism-selection-bar { position: fixed; z-index: 10; inset-inline: 0; inset-block-end: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); padding-block: var(--space-7) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); padding-inline: max(var(--space-5), calc((100% - var(--measure-app)) / 2)); background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--surface-default) 85%, transparent) 60%); color: var(--text-default); pointer-events: none; } prism-selection-bar > * { pointer-events: auto } prism-selection-bar > prism-text { text-align: center; white-space: nowrap } prism-selection-bar[hidden] { display: none } prism-page:has(prism-selection-bar:not([hidden])) prism-content { padding-block-end: 112px } /* --- prism-menu ---------------------------------------------------------- * *Ruled by the owner 2026-09-23: anchored to its opener, and the panel's * plate* — the page's colour at 75% transparency over a 12px blur, the * card's border, the 8px corner. A popover: the platform puts it in the * top layer; prism.js sets where. Hidden until it is open, including * before the script has run, so its actions never spill into the page. */ prism-menu:not(:popover-open) { display: none } prism-menu[popover] { background: color-mix(in srgb, var(--surface-default) 25%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text-default); border: 1px solid color-mix(in srgb, var(--surface-default), var(--text-default) var(--edge-mix)); border-radius: 8px; padding: var(--space-2) 0; min-inline-size: 240px; max-inline-size: min(320px, calc(100% - var(--space-5) * 2)); max-block-size: calc(100% - var(--space-5) * 2); overflow: auto; } prism-menu .prism-menu-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } prism-menu prism-divider { margin-block: var(--space-2) } }