/* greenroom.html only: the layout spec's deferred items for this page (docs/superpowers/specs/2026-10-01-layout-system.md,
   items 17 to 34) and the page's place for the figure kit (case-figs.css). Loaded after case.css and case-figs.css, so
   these win without touching the shared files. Tokens come from styles.css. */

/* The lead, status, crumbs, tracks, figures, number row, detail, ruled lists and fit come from the shared .cs-v2 rules
   in case.css and case-figs.css. What is left here is this page only. */

/* The run inside the detail: a short ordered route, step numbers in mono, the sentence in Geist */
.cs-v2 .cs-detail-body .cs-run { counter-reset: run; display: grid; gap: var(--gap-list); margin: var(--gap-label) 0 0; padding: var(--gap-sf) 0 0; border-top: 1px solid var(--line); max-width: 46em; }
.cs-v2 .cs-detail-body .cs-run > li { counter-increment: run; display: grid; grid-template-columns: 28px minmax(0, 1fr); font-size: 15px; line-height: 1.55; color: var(--text-2); }
.cs-v2 .cs-detail-body .cs-run > li::before { content: counter(run); font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* A plain sentence inside the detail (the Momentum note in Data engineering) */
.cs-v2 .cs-detail-body .cs-dsec > p { margin: var(--gap-label) 0 0; max-width: 46em; font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* The Solutions map (case-map.js) in the V7 strokes: hairline at rest, bone for the lit path */
.cs-v2 .pm-ready .pm-rail { stroke: var(--text-3); opacity: 0.55; }
.cs-v2 .pm-ready .pm-ln:not(.is-lit) { stroke: var(--text-3); opacity: 0.7; }

/* Phones: the header scrolls away, so the sentence that answers a tap rides at the top of the screen while its map is
   in view, instead of changing somewhere out of sight above or below the drawing */
@media (max-width: 760px) {
  .cs-v2 .pm-ready .pm-cap { position: sticky; top: 0; z-index: 2; padding: 12px 0; margin-top: 8px; background: var(--bg); }
}

/* Without the script the layers are a plain list: show each floor's sentence after its name (the drawing itself is gr-layers.js) */
.cs-v2 .cf[data-fig="layers"]:not(.gl-ready) > .cf-src > li[data-note]::after { content: ": " attr(data-note); color: var(--text-3); }

/* Stack rows (owner, 2026-10-01): a wordmark logo (Cal.com, Zoom) is a wide strip, not a square mark, and already
   spells its name, so its text name stays visually hidden. */
.cs-tool-mark--word { width: 60px; height: auto; }
.cs-stack--named .cs-tool:has(.cs-tool-mark--word) .cs-tool-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }