`, but the class was never defined anywhere in _shared, so a card meant to recede rendered pixel-identical to a live one — the contract the markup relied on was silently unmet. Fade it and dash the border so the step-down reads. */ .card.dim { opacity: 0.5; border-style: dashed; } .cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 25.6px; max-width: 880px; margin-inline: auto; /* B-116: not `margin: 0 auto` — see the .data-table note */ width: 100%; } /* ─── Pill flow (compact inline sequence) ────────────────────────────────── A lighter alternative to .flow-diagram for inline term sequences. */ .pill-flow { display: flex; align-items: center; gap: 9.6px; flex-wrap: wrap; } .pill { background: var(--surface-bg); border: var(--diagram-border-width) solid var(--card-border); border-radius: var(--diagram-radius-pill); box-shadow: var(--surface-shadow); transition: var(--surface-transition); padding: 8.8px 16px; font-size: var(--small-size); font-weight: 600; color: var(--fg); white-space: nowrap; } /* B-088: both of these are accent labels on the pill/card ground, not on the page — same correction as `.card .tag` above. `.pill.hot` additionally paints --diagram-accent-tint (accent at 0.1) OVER that ground, which shifts it a little further; the derivation targets 4.6:1 rather than 4.5 precisely so a small extra layer does not push it back under. */ .pill.hot { border-color: var(--accent); color: var(--accent-on-surface); background: var(--diagram-accent-tint); } .pill-arrow { color: var(--accent-on-surface); font-size: var(--small-size); } /* ─── Legacy patterns retained from the pre-B-004 set ────────────────────── timeline / inline-svg / data-cards stay so existing skeleton decks that use them keep rendering. They share the diagram radius/border vocabulary. */ /* timeline */ .timeline { position: relative; padding-left: 48px; max-width: 600px; } .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--card-border); } .timeline-item { position: relative; margin-bottom: 24px; } .timeline-marker { position: absolute; left: calc(-1 * 48px + 2px); top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-secondary); border: 2px solid var(--muted); } .timeline-marker.active { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } .timeline-date { font-size: var(--small-size); color: var(--accent-text); font-weight: 600; margin-bottom: 0.2rem; } .timeline-content h4 { font-size: var(--body-size); font-weight: 600; color: var(--fg); } .timeline-content p { font-size: var(--small-size); color: var(--muted); } /* inline SVG */ .arch-diagram, .cycle-diagram { width: 100%; max-width: 800px; max-height: min(540px, 350px); margin-inline: auto; /* B-116: not `margin: 0 auto` — see the .data-table note */ display: block; } /* data cards (KPI tiles) */ .data-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 16px; max-width: 800px; margin-inline: auto; /* B-116: not `margin: 0 auto` — see the .data-table note */ } .data-card { background: var(--surface-bg); border: var(--diagram-border-width) solid var(--card-border); border-radius: var(--diagram-radius); box-shadow: var(--surface-shadow); transition: var(--surface-transition); padding: 24px; text-align: center; } .data-value { font-size: 40px; font-weight: 800; color: var(--fg); letter-spacing: -0.02em; } .data-label { font-size: var(--small-size); color: var(--muted); margin-top: 0.2rem; } .data-change { font-size: var(--small-size); font-weight: 600; margin-top: 0.3rem; } .data-change.positive { color: var(--positive); } .data-change.negative { color: var(--negative); } /* ─── B-040: glass surface hover lift ────────────────────────────────────── Only the opt-in glass surfaces lift on hover, and only on true hover devices for users who haven't asked for reduced motion. Flat decks (the default) and touch/reduced-motion users get no transform — the tokens resolve to `0px` / `none` so even without this guard nothing would move, but scoping the selector to [data-surface="glass"] keeps the flat cascade untouched. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { [data-surface="glass"] .card:hover, [data-surface="glass"] .layer:hover, [data-surface="glass"] .flow-step:hover, [data-surface="glass"] .cov-card:hover, [data-surface="glass"] .pill:hover, [data-surface="glass"] .data-card:hover { transform: translateY(var(--surface-hover-lift)); box-shadow: var(--surface-hover-shadow); } } /* B-112: a viewport `@media` block used to live here — the narrow/short-stage folds. They are gone because they cannot be right on a fixed canvas: the canvas is always 1920x1080, so a rule keyed on the WINDOW would apply a small-screen fold to a full-size slide the moment someone shrank the browser. The problem they solved (content not fitting a small stage) is solved upstream now — the whole canvas scales, so the stage is never small in canvas pixels. Recovered from git history if a responsive canvas ever comes back. */