/* ============================================================================ pulse-robo.css -- the robo pillar's visual system ---------------------------------------------------------------------------- Targets p-* ONLY. Never bl-*. Per ROBO_SURFACE_DECISIONS.md section 5: bl-* is behaviour, JS binds it, and styling it turns a behaviour rename into a visual regression. Elements carry both classes; this sheet sees only the presentation half. Enumerated data-* values ARE styled (closed sets, specified in the contract). data-code, data-setting, data-step-id are addressing only and never styled. Load AFTER pulse-design-tokens.css. Every colour here dereferences a token; no hex, no rgb, per the bridge rule. ========================================================================= */ /* --- the two values this sheet adds, and why they are not in the token file -- --pulse-hatch is a wash used only by the "not a result" treatment. It is a composition (a colour at an alpha inside a repeating gradient) rather than a palette value, so it belongs to the component. --pulse-focus is the focus ring. Named here because the token file has no interaction layer; move it there if one is added, and delete this block rather than keeping both. Everything else in this sheet dereferences pulse-design-tokens.css. If you find a hex or an oklch() below this comment, it is a bug. */ :root { /* Hover. Dereferenced, not a new literal: the raised-surface value already exists, and a second hex here would drift from it the first time either changes. Lives in this sheet rather than the token file for the same reason as --pulse-hatch and --pulse-focus -- it is an interaction state this pillar introduced, and the token file should gain it deliberately rather than by accident. */ --pulse-hover: var(--pulse-well); /* NOTE, because it has now happened three times in this sheet: an undefined custom property is dropped at parse time, so the intent vanishes with no error and no visual clue beyond the thing simply not happening. --pulse-hover was missing, then --pulse-line-strong, then the value I dereferenced it to. The token file has exactly two line values -- --pulse-line and --pulse-line-soft -- and nothing "strong". Before writing a rule that uses a --pulse-* name, confirm it exists here or in pulse-design-tokens.css. */ --pulse-hatch: oklch(0.32 0.055 75 / 0.20); --pulse-focus: var(--pulse-teal-edge); } /* --- surface ------------------------------------------------------------- */ /* --- NO CONTAINER IN THIS SHEET SETS font-family ----------------------------- A class that declares only size and colour inherits its family from whatever it lands in -- so it renders one way in one panel and another way in the next, which is the per-context drift a shared visual system exists to remove. .p-basis hit exactly that: mono inside .p-split, sans inside .p-panel, for the same semantic element. An earlier draft patched .p-split-note's family instead of the container, which is the tell -- patching one child of a family-setting container means the next child will need patching too. So: every class that needs a family declares it. Containers never do. -------------------------------------------------------------------------- */ /* --- NOTHING IN THIS SHEET REDEFINES A TOKEN-FILE CLASS --------------------- pulse-design-tokens.css owns a full component layer. These are ITS classes; use them, do not restate them here: p-kicker p-panel p-note p-chip p-stat__* p-row p-table__head p-table__row p-num p-well p-btn p-h1 p-h2 p-h3 p-lead p-body p-dense p-wordmark An earlier draft of this sheet redefined eight of them. Because a partial redefinition sets only type and colour, the token file's BOX cascaded through -- so p-note's note-card border and padding turned two inline captions into floating panels. That is this sheet's own contract broken inside the sheet that declares it. For inline metadata beside a value, use the token file's .p-dense. It is already 12.5px / --pulse-ink-2 / text-wrap:pretty, which is exactly what a caption needs -- so there is nothing to add. Collision check before adding any p-* rule below: for (const ss of document.styleSheets) for (const r of ss.cssRules) r.selectorText -------------------------------------------------------------------------- */ .p-page { background: var(--pulse-bg); color: var(--pulse-ink); font-family: var(--pulse-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* --- the spine ----------------------------------------------------------- */ /* Five steps, always five, equal columns. A grid rather than flex-basis: five-across is structural, so it cannot break when a label lengthens. */ /* CD139: six columns, not five. The spine carries the six V126 operator steps (Audience / Script / Calling / Schedule / Rehearse / Ready); at five it wrapped the sixth onto its own row. */ .p-spine { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--pulse-s2); } .p-spine-step { /* display is declared here rather than inherited from the element: the rule previously worked only because robo's steps are