/* =========================================================================
   Product layer — Declaration Envelope Management walkthrough.
   Deck, BPMN, anatomy frames, annotation, alerts, staged reveal.
   Not a Core recipe. Do not add these selectors to the kernel.

   Colour comes from public roles (and the fork's --brand-* via those roles).
   This file must not style .ds-* with private ramps (--brand-*, --neutral-*,
   status steps, --focus-500, --white).
   ========================================================================= */

:root {
  
  --radius: var(--radius-sm);
  --wrap: 62rem;

  
  --color-background: var(--bg-canvas);
  --color-surface: var(--bg-canvas);
  --color-foreground: var(--fg-default);
  --color-card: var(--border-subtle);
  --color-card-foreground: var(--fg-strong);
  --color-muted: var(--border-strong);
  --color-muted-foreground: var(--fg-muted);

  
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-foreground: var(--fg-on-primary);
  --color-secondary: var(--primary-bg);
  --color-secondary-foreground: var(--fg-strong);

  
  --color-accent: var(--border-focus);
  --color-accent-foreground: var(--bg-base);

  
  --color-border: var(--border-strong);
  --color-border-soft: var(--border-default);
  --color-input: var(--border-strong);

  
  --color-cost: var(--bg-error-strong-hover);
  --color-cost-bg: var(--bg-error);
  --color-cost-fg: var(--fg-error);
  --color-ghost: var(--fg-subtle);
  --color-lane: var(--bg-muted);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 112.5%;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  line-height: 1.5;
}

h1,
h2 {
  font-family: var(--font-heading);
  color: var(--color-card-foreground);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.1rem;
}

p,
ul,
ol {
  margin: 0 0 1rem;
}

a {
  color: var(--color-primary);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  padding: 0.5rem 0.75rem;
  z-index: 2;
}

.skip-link:focus {
  top: 0.75rem;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
}

.site-header {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

.site-header a {
  color: inherit;
  text-decoration: none;
}

.progress .is-current {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.progress .is-done {
  color: var(--color-card-foreground);
  border-bottom-color: var(--color-primary);
}

.choice.is-selected {
  border-color: var(--color-primary);
  background: var(--color-secondary);
}

@media (min-width: 40rem) {
  .clipboards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

:root {
  --color-cost: var(--fg-error);
  --color-cost-bg: var(--bg-error);
  --color-cost-fg: var(--fg-error);
  --color-ghost: var(--fg-subtle);
  --color-lane: var(--bg-muted);
}

.rail a,
.rail .is-current {
  display: block;
  padding: 0.35rem 0.25rem;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}

.rail .is-done {
  color: var(--color-card-foreground);
}

.rail .is-current {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

.stage-btn.is-quiet {
  background: var(--bg-base);
  color: var(--color-primary);
}

.stage-caption {
  min-height: 3rem;
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--color-card-foreground);
  border-left: 4px solid var(--color-primary);
  padding-left: 0.85rem;
}

.reveal[data-stage="1"] .cap-2,
.reveal[data-stage="1"] .cap-3,
.reveal[data-stage="2"] .cap-1,
.reveal[data-stage="2"] .cap-3,
.reveal[data-stage="3"] .cap-1,
.reveal[data-stage="3"] .cap-2,
.reveal[data-stage="3"] .cap-4,
.reveal[data-stage="3"] .cap-5,
.reveal[data-stage="1"] .cap-4,
.reveal[data-stage="1"] .cap-5,
.reveal[data-stage="2"] .cap-4,
.reveal[data-stage="2"] .cap-5,
.reveal[data-stage="4"] .cap-1,
.reveal[data-stage="4"] .cap-2,
.reveal[data-stage="4"] .cap-3,
.reveal[data-stage="4"] .cap-5,
.reveal[data-stage="5"] .cap-1,
.reveal[data-stage="5"] .cap-2,
.reveal[data-stage="5"] .cap-3,
.reveal[data-stage="5"] .cap-4,
.reveal[data-stage="all"] .cap-1,
.reveal[data-stage="all"] .cap-2 {
  display: none;
}

.diagram {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--bg-base);
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.bpmn {
  display: block;
  width: 100%;
  min-width: 46rem;
  height: auto;
}

.bpmn .pool {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1.5;
}

.bpmn .lane-strip {
  fill: var(--color-lane);
  stroke: var(--color-border);
  stroke-width: 1.5;
}

.bpmn .lane-line {
  stroke: var(--color-border);
  stroke-width: 1.5;
}

.bpmn .lane-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  fill: var(--color-card-foreground);
}

.bpmn .lane-sub {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 400;
  fill: var(--color-muted-foreground);
}

.bpmn text {
  font-family: var(--font-body);
  font-size: 10.5px;
  fill: var(--color-card-foreground);
}

.bpmn .task rect {
  fill: var(--bg-base);
  stroke: var(--color-primary);
  stroke-width: 1.6;
}

.bpmn .gate polygon {
  fill: var(--bg-base);
  stroke: var(--color-primary);
  stroke-width: 1.6;
}

.bpmn .gate text,
.bpmn .task text {
  text-anchor: middle;
}

.bpmn .event {
  fill: var(--bg-base);
  stroke: var(--color-primary);
  stroke-width: 2;
}

.bpmn .event-end {
  stroke-width: 3.5;
}

.bpmn .flow {
  fill: none;
  stroke: var(--color-card-foreground);
  stroke-width: 1.6;
  marker-end: url(#arrow);
}

.bpmn .flow-label {
  font-size: 9.5px;
  font-weight: 600;
  fill: var(--color-muted-foreground);
  text-anchor: middle;
}

.bpmn .flow-cost {
  fill: none;
  stroke: var(--color-cost);
  stroke-width: 1.8;
  stroke-dasharray: 6 4;
  marker-end: url(#arrow-cost);
}

.bpmn .flow-cost-label {
  font-size: 9.5px;
  font-weight: 700;
  fill: var(--color-cost-fg);
  text-anchor: middle;
}

.reveal[data-stage="5"] .bpmn .cost rect,
.reveal[data-stage="all"] .bpmn .cost rect {
  fill: var(--color-cost-bg);
  stroke: var(--color-cost);
}

.reveal[data-stage="5"] .bpmn .cost text,
.reveal[data-stage="all"] .bpmn .cost text {
  fill: var(--color-cost-fg);
  font-weight: 600;
}

.bpmn .ghost rect,
.bpmn .ghost polygon {
  fill: var(--bg-base);
  stroke: var(--color-ghost);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}

.bpmn .ghost text {
  fill: var(--color-ghost);
}

.bpmn .ghost {
  opacity: 0.62;
}

.bpmn .flow-ghost {
  fill: none;
  stroke: var(--color-ghost);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
  opacity: 0.62;
  marker-end: url(#arrow-ghost);
}

.bpmn .strike {
  stroke: var(--color-ghost);
  stroke-width: 1.4;
}

.bpmn .stage-2,
.bpmn .stage-3,
.tally,
.legend-cost {
  transition: opacity 0.35s ease;
}

.reveal[data-stage="1"] .stage-2,
.reveal[data-stage="1"] .stage-3,
.reveal[data-stage="2"] .stage-3 {
  opacity: 0;
  pointer-events: none;
}

.reveal[data-stage="1"] .from-2,
.reveal[data-stage="1"] .from-3,
.reveal[data-stage="1"] .from-4,
.reveal[data-stage="1"] .from-5,
.reveal[data-stage="2"] .from-3,
.reveal[data-stage="2"] .from-4,
.reveal[data-stage="2"] .from-5,
.reveal[data-stage="3"] .from-4,
.reveal[data-stage="3"] .from-5,
.reveal[data-stage="4"] .from-5 {
  opacity: 0;
  pointer-events: none;
}

.from-2, .from-3, .from-4, .from-5 {
  transition: opacity 0.35s ease;
}

.reveal[data-stage="1"] .tally,
.reveal[data-stage="2"] .tally-late {
  opacity: 0;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
  margin: 0 0 1.25rem;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.swatch {
  width: 1.1rem;
  height: 0.7rem;
  border-radius: 2px;
  border: 1.5px solid var(--color-primary);
  background: var(--bg-base);
}

.swatch.is-cost {
  border-color: var(--color-cost);
  background: var(--color-cost-bg);
}

.swatch.is-ghost {
  border-color: var(--color-ghost);
  border-style: dashed;
}

.tally {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

@media (min-width: 40rem) {
  .tally {
    grid-template-columns: repeat(3, 1fr);
  }
  .tally.is-four {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tally .item {
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  background: var(--bg-base);
}

.tally .item.is-cost {
  border-top-color: var(--color-cost);
  background: var(--color-cost-bg);
}

.tally .figure {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-card-foreground);
  margin: 0 0 0.2rem;
}

.tally .item.is-cost .figure {
  color: var(--color-cost-fg);
}

.tally p {
  margin: 0;
  font-size: 0.85rem;
}

@media (min-width: 44rem) {
  .options {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
}

.option.is-rejected {
  background: var(--color-lane);
  color: var(--color-muted-foreground);
}

.option.is-chosen {
  border: 2px solid var(--color-primary);
}

.option.is-rejected h3 {
  color: var(--color-muted-foreground);
}

.option.is-chosen .verdict {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

.reveal[data-stage="5"] .bpmn .flow.is-cost,
.reveal[data-stage="all"] .bpmn .flow.is-cost {
  stroke: var(--color-cost);
  stroke-dasharray: 6 4;
  marker-end: url(#arrow-cost);
}

.reveal[data-stage="all"] .stage-caption {
  display: none;
}

.reveal[data-stage="all"] .stage-caption.cap-last {
  display: block;
}

.btn-paper.is-quiet {
  background: transparent;
  color: var(--fg-muted);
  border-color: var(--border-default);
}

.ex-result.is-wrong {
  border-left-color: var(--color-cost);
}

.ex-result.is-wrong h3 {
  color: var(--color-cost-fg);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.presenter-scrim[hidden] {
  display: none;
}

.pn-go[hidden] {
  display: none;
}

:root {
  
}

body {
  background: var(--color-surface);
}

h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}

h2 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

h1 + p {
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--color-muted-foreground);
  max-width: 38rem;
  margin-bottom: 1.5rem;
}

main > h2 {
  margin-top: 2.25rem;
}

.site-header {
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-md);
}

.card,
.diagram,
.tally .item,
.option {
  border-color: var(--color-border-soft);
  box-shadow: var(--shadow-sm);
}

.stage-btn.is-quiet:hover:not([disabled]) {
  background: var(--color-secondary);
}

main.wrap {
  padding-bottom: 3rem;
}

.diagram {
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.tally {
  gap: 1rem;
}

.option.is-rejected {
  background: var(--bg-base);
  box-shadow: none;
  border-color: var(--color-border-soft);
}

.option.is-chosen {
  box-shadow: var(--shadow-md);
}

.verdict,
.rail a,
.rail .is-current {
  border-radius: var(--radius-pill);
}

.card,
.diagram,
.tally .item,
.option,
.reframe,
.rule,
.presenter {
  border-radius: var(--radius-sm);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

main > p,
.stage-caption,
.evidence,
.alt-text {
  max-width: 38rem;
}

.rail a,
.rail .is-current {
  display: inline-block;
  padding: 0.35rem 0.8rem;
}

@media (max-width: 24rem) {
  .device-screen {
    min-height: 30rem;
  }
}

@media (max-width: 40rem) {
  .filmstrip {
    grid-template-columns: 1fr;
  }
}

.mini {
  margin: 0;
}

.mini h3 {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}

.bpmn text {
  font-size: 12px;
  font-weight: 500;
}

.bpmn .lane-label {
  font-size: 13.5px;
}

.bpmn .lane-sub {
  font-size: 10.5px;
}

.bpmn .flow-label,
.bpmn .flow-cost-label {
  font-size: 10.5px;
  font-weight: 700;
}

.bpmn .task rect,
.bpmn .gate polygon {
  stroke-width: 2.2;
}

.bpmn .flow {
  stroke-width: 2.2;
}

.bpmn .event {
  stroke-width: 2.6;
}

.bpmn .event-end {
  stroke-width: 4.5;
}

.bpmn .pool,
.bpmn .lane-strip,
.bpmn .lane-line {
  stroke-width: 2;
}

.bpmn .ghost {
  opacity: 1;
}

.bpmn .ghost rect,
.bpmn .ghost polygon {
  fill: var(--bg-muted);
  stroke: var(--fg-subtle);
  stroke-width: 2;
  stroke-dasharray: 7 5;
}

.bpmn .ghost text {
  fill: var(--fg-muted);
}

.bpmn .flow-ghost {
  stroke: var(--fg-subtle);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  opacity: 1;
}

.reveal[data-stage="5"] .bpmn .cost rect,
.reveal[data-stage="all"] .bpmn .cost rect {
  stroke-width: 2.6;
}

.stage-caption {
  font-size: 1.05rem;
  line-height: 1.45;
}

.legend {
  font-size: 0.85rem;
}

.tally .figure {
  font-size: 1.3rem;
}

@media (max-width: 56rem) {
  .states { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 30rem) {
  .states { grid-template-columns: 1fr; }
}

.state-pill.is-ok { background: var(--bg-success); color: var(--fg-success); }

.state-pill.is-warn { background: var(--bg-warning); color: var(--fg-warning); }

.state-pill.is-err { background: var(--bg-error); color: var(--fg-error); }

@media (max-width: 46rem) { .projects { grid-template-columns: 1fr; } }

@media (max-width: 52rem) { .roles { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 30rem) { .roles { grid-template-columns: 1fr; } }

.comp-box.is-hover { border-color: var(--primary); background: var(--primary-bg); }

.comp-box.is-sel { border-color: var(--primary); background: var(--primary); color: var(--fg-on-primary); }

.comp-box.is-err { border-color: var(--bg-error-strong-hover); background: var(--bg-error); color: var(--fg-error); }

.comp-box.is-dis { border-color: var(--border-default); color: var(--border-strong); background: var(--bg-muted); }

@media (max-width: 44rem) { .anno { grid-template-columns: 1fr; } }

.anno-bar.is-short { max-width: 45%; }

.anno-bar.is-mid { max-width: 70%; }

:root {
  --bar-h: 2.6rem;
  --slide-pad: 1.15rem;

  
  --slide-pad-top: clamp(0.9rem, 2.2svh, 1.9rem);
  --slide-pad-bot: clamp(0.7rem, 1.8svh, 1.55rem);

  
  --gutter: clamp(1.25rem, 4.4vw, 4.25rem);

  
  --head-size: clamp(1.35rem, 2.4vw, 1.95rem);
  --head-lh: 1.18;
  --cap-size: clamp(1rem, 1.3vw, 1.14rem);
  --cap-lh: 1.42;

  
  --cap-pad: 1.05rem;             
  --cap-pad-title: 1.5rem;        
  --gap-masthead: 1.75rem;        

  --band-meta: 1.5rem;
  --band-head: calc(var(--head-size) * var(--head-lh) + 0.65rem);
  --band-cap: calc(var(--cap-size) * var(--cap-lh));

  
  --measure-caption: 49ch;        
  --measure-lead: 44ch;
  --measure-head: 32ch;
  --measure-body: 40ch;
}

.deck-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0 1rem;
  background: var(--color-primary);
  color: var(--fg-on-primary);
}

.deck-bar .wrap {
  display: contents;              
}

.deck-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.deck-title .sample {
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg-on-primary) 18%, transparent);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.deck-dots {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}

.deck-dot {
  width: 0.62rem;
  height: 0.62rem;
  padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--fg-on-primary) 55%, transparent);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.deck-dot.is-done {
  background: color-mix(in srgb, var(--fg-on-primary) 50%, transparent);
  border-color: color-mix(in srgb, var(--fg-on-primary) 50%, transparent);
}

.deck-dot.is-here {
  background: var(--bg-base);
  border-color: var(--fg-on-primary);
  transform: scale(1.35);
}

.deck-dot:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.deck-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.8;
  white-space: nowrap;
}

.deck-bar .presenter-toggle {
  margin-left: 0.35rem;
}

.deck-stage {
  display: block;
}

[data-deck] .slide {
  height: calc(100svh - var(--bar-h));
  display: flex;
  flex-direction: column;
  padding: var(--slide-pad-top) var(--gutter) var(--slide-pad-bot);
  overflow: hidden;
}

[data-deck] .slide[hidden] {
  display: none;
}

[data-deck] .slide {
  justify-content: center;
}

[data-deck] .slide-in {
  max-height: 40.5rem;
}

.slide-in {
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
}

[data-deck] .slide-in {
  flex: 1 1 auto;
  min-height: 0;                  
  display: flex;
  flex-direction: column;
}

[data-deck] .slide-kicker,
[data-deck] .slide h1,
[data-deck] .slide h2.slide-h,
[data-deck] .slide .title-h,
[data-deck] .caption-slot {
  flex: 0 0 auto;
}

[data-deck] .slide:not(:has(.diagram, .anatomy)) .caption-slot + * {
  margin-top: clamp(2rem, 7svh, 4.5rem);
}

[data-deck] .slide:not(:has(.diagram, .anatomy)) .slide-in > *:last-child {
  margin-bottom: 0;
}

[data-deck] .slide.is-title .brief + .brief-note {
  margin-top: clamp(1rem, 3svh, 2.25rem);
}

[data-deck] .slide.is-title:has(.brief) .slide-in {
  max-width: 82rem;
}

.slide.is-wide .slide-in {
  max-width: 82rem;
}

.slide.is-narrow .slide-in {
  max-width: 52rem;
}

.slide-kicker {
  margin: 0;
  height: var(--band-meta);       
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.slide h1,
.slide h2.slide-h,
.slide .title-h {
  margin: 0;
  min-height: var(--band-head);   
  padding-top: 0.45rem;           
  display: flex;
  align-items: flex-start;        
  font-family: var(--font-heading);
  font-size: var(--head-size);
  line-height: var(--head-lh);
  letter-spacing: -0.015em;
  color: var(--color-card-foreground);
  max-width: var(--measure-head);
}

.slide .lead {
  margin: 0;
  font-size: clamp(0.98rem, 1.25vw, 1.15rem);
  color: var(--color-muted-foreground);
  max-width: var(--measure-lead);
}

[data-deck] .slide .stage-caption {
  display: block;
  visibility: hidden;
}

[data-deck] .slide[data-stage="1"] .cap-1,
[data-deck] .slide[data-stage="2"] .cap-2,
[data-deck] .slide[data-stage="3"] .cap-3,
[data-deck] .slide[data-stage="4"] .cap-4,
[data-deck] .slide[data-stage="5"] .cap-5,
[data-deck] .slide[data-stage="all"] .cap-last {
  visibility: visible;
}

.caption-slot {
  min-height: var(--band-cap);
  margin: 0;
  padding-top: var(--cap-pad);
  padding-bottom: var(--gap-masthead);
  display: flex;
  align-items: flex-start;
}

[data-deck] .caption-slot:has(.stage-caption) {
  display: grid;
  align-items: start;
}

[data-deck] .caption-slot:has(.stage-caption) > .stage-caption {
  grid-area: 1 / 1;
}

[data-deck] .slide .stage-caption {
  min-height: 0;
  margin: 0;
  font-size: var(--cap-size);
  line-height: var(--cap-lh);
  border-left-width: 5px;
  padding-left: 0.95rem;
  color: var(--color-card-foreground);
  max-width: var(--measure-caption);
}

[data-deck] .slide[data-stages="1"] .tally {
  opacity: 1;
}

[data-deck] .slide .diagram {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  margin: 0 0 0.7rem;
  padding: 0.5rem;
  display: block;
  overflow: visible;              
}

[data-deck] .slide .bpmn {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;                   
  max-height: none;
}

[data-deck] .slide .legend {
  flex: 0 0 auto;
  margin-bottom: 0.25rem;
}

@media (min-width: 60rem) {
  .opener-grid {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
  }
}

@media (min-width: 48rem) {
  .evidence-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

[data-deck] .slide .reframe {
  margin-bottom: 0.9rem;
  padding: 1.15rem 1.2rem;
}

[data-deck] .slide .reframe .big {
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
}

@media (min-width: 48rem) {
  .cadence {
    grid-template-columns: repeat(3, 1fr);
  }
}

.anatomy {
  display: grid;
  align-items: start;
}

.anat-two {
  display: grid;
  gap: 1.1rem;
  align-items: start;
}

@media (min-width: 62rem) {
  .anat-two {
    grid-template-columns: 1.25fr 1fr;
  }
}

.tpl {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--bg-base);
  padding: 0.7rem;
  box-shadow: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.tpl-chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.6rem;
}

.tpl-chrome i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--border-default);
}

.tpl-chrome b {
  margin-left: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--color-muted-foreground);
}

.tpl-h {
  margin: 0 0 0.55rem;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  color: var(--color-card-foreground);
}

.tpl-sec {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-card-foreground);
  margin: 0 0 0.35rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--color-border);
}

.pin {
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--fg-on-primary);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  flex: none;
}

.anno-list {
  list-style: none;
  counter-reset: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.anno-list li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.6rem;
  align-items: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--bg-base);
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
}

.anno-list strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  color: var(--color-card-foreground);
}

.anno-list span {
  color: var(--color-muted-foreground);
}

.anno-list .pin {
  color: var(--fg-on-primary);
}

.states-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.45rem;
  margin: 0.15rem 0 0;
}

.st {
  text-align: center;
}

.st div {
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  background: var(--bg-base);
  font-size: 0.68rem;
  color: var(--color-card-foreground);
}

.st p {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.st.is-hover div { border-color: var(--color-primary); background: var(--bg-info); }

.st.is-sel div { border-color: var(--color-primary); background: var(--color-primary); color: var(--fg-on-primary); }

.st.is-err div { border-color: var(--color-cost, var(--fg-error)); background: var(--bg-error); color: var(--color-cost-fg, var(--fg-error)); }

.st.is-dis div { border-style: dashed; color: var(--color-muted-foreground); background: var(--color-lane, var(--bg-muted)); }

@media (min-width: 52rem) {
  .pipeline {
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
  }
}

.pipe.is-last {
  border-color: var(--color-primary);
  background: var(--bg-info);
}

[data-deck] .slide .options {
  margin-bottom: 1rem;
}

[data-deck] .slide .tally {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .from-2, .from-3, .from-4, .from-5,
  .deck-dot {
    transition: none;
  }
}

html:not([data-deck]) .deck-dots,
html:not([data-deck]) .deck-count,
html:not([data-deck]) .stage-meter {
  display: none;
}

html:not([data-deck]) .slide {
  padding: 2rem 1.4rem;
  border-bottom: 1px solid var(--color-border);
}

.stair .lv rect {
  fill: var(--bg-base);
  stroke: var(--color-primary);
  stroke-width: 2;
}

.stair .lv .ado {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  fill: var(--color-muted-foreground);
}

.stair .lv .art {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  fill: var(--color-card-foreground);
}

.stair .lv .eg {
  font-family: var(--font-body);
  font-size: 13.5px;
  fill: var(--color-muted-foreground);
}

.stair .link {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
}

.stair .side {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  fill: var(--color-primary);
}

.anatomy,
.anat-two {
  align-items: stretch;
}

[data-deck] .anatomy {
  flex: 1 1 0;
  min-height: 0;
}

.tpl-frame {
  display: flex;
  justify-content: center;
}

[data-deck] .tpl-frame {
  min-height: 0;
  overflow: hidden;
}

.tpl {
  width: 100%;
  flex: none;
  max-width: none;
  align-self: flex-start;
  transform-origin: top center;
  display: flex;
  flex-direction: column;
  gap: 0.26rem;
}

.tpl-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tpl-row .tpl-h,
.tpl-row .tpl-sec {
  margin: 0;
  flex: 1;
}

.tpl-row .pin {
  margin-left: auto;
}

.tpl-cta {
  margin-top: 0.15rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.6rem;
}

.tpl-cta .pin { margin-left: 0; }

.anno-col {
  width: 100%;
  flex: none;
  max-width: none;
  align-self: flex-start;
  transform-origin: top center;
  display: flex;
  flex-direction: column;
}

.notes-frame {
  align-items: flex-start;
}

.slide.is-title .slide-in {
  max-width: 56rem;
}

.title-h {
  font-size: clamp(1.8rem, 3.3vw, 2.6rem) !important;
  line-height: 1.08 !important;
  max-width: 30ch !important;     
}

.slide.is-title .caption-slot {
  padding-top: var(--cap-pad-title);
}

.title-sub {
  margin: 0 0 0.3rem;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--color-card-foreground);
}

.title-by {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-muted-foreground);
}

[data-deck] .slide .pipeline {
  margin-top: 0.6rem;
  margin-bottom: 2.4rem;
}

.tpl .pin {
  width: 1.45rem;
  height: 1.45rem;
  font-size: 0.85rem;
}

.deck-act-gap {
  width: 0.75rem;
  height: 1px;
  background: color-mix(in srgb, var(--fg-on-primary) 35%, transparent);
}

.deck-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.slide.is-airy .fact-list li {
  grid-template-columns: 10rem 1fr;
  gap: 1.1rem;
  font-size: 1.12rem;
  padding-bottom: 1.15rem;
  margin-bottom: 0.4rem;
}

.slide.is-airy .fact-list .k {
  font-size: 0.78rem;
}

.slide.is-airy .ev {
  padding: 1.5rem 1.6rem;
}

.slide.is-airy .ev h3 {
  font-size: 1.28rem;
  margin-bottom: 0.55rem;
}

.slide.is-airy .ev p {
  font-size: 1.02rem;
  line-height: 1.5;
}

.slide.is-airy .evidence-grid {
  gap: 1.1rem;
  margin-bottom: 1.6rem;
}

.slide.is-airy .reframe {
  padding: 2rem 1.9rem;
}

.slide.is-airy .reframe .big {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}

.slide.is-airy .options {
  gap: 1.2rem;
}

.slide.is-airy .option {
  padding: 1.9rem 1.8rem;
}

.slide.is-airy .option h3 {
  font-size: 1.45rem;
  margin-bottom: 0.7rem;
}

.slide.is-airy .option p {
  font-size: 1.08rem;
  line-height: 1.55;
}

.slide.is-airy .pipe {
  padding: 1.1rem 1.2rem;
}

.slide.is-airy .pipe b {
  font-size: 1.06rem;
  margin-bottom: 0.3rem;
}

.slide.is-airy .pipe span {
  font-size: 0.92rem;
}

.slide.is-airy .tally .item {
  padding: 1.2rem 1.3rem;
}

.slide.is-airy .tally .figure {
  font-size: 1.4rem;
  margin-bottom: 0.35rem;
}

.slide.is-airy .tally p {
  font-size: 0.98rem;
  line-height: 1.45;
}

.tpl-cols {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 0.9rem;
  align-items: start;
}

.tpl-col {
  display: flex;
  flex-direction: column;
  gap: 0.26rem;
  min-width: 0;
}

.slide.is-airy .fact-list {
  min-height: calc(100svh - 21rem);
  align-content: space-evenly;
}

.slide.is-airy .evidence-grid {
  min-height: calc(100svh - 38rem);
  align-items: stretch;
}

.slide.is-airy .ev {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide.is-airy .options {
  min-height: calc(100svh - 24rem);
  align-items: stretch;
}

.slide.is-airy .option {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide.is-airy .pipeline {
  min-height: 8.5rem;
  align-items: stretch;
}

.slide.is-airy .pipe {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide.is-airy .tally {
  align-items: stretch;
}

.slide.is-airy .tally .item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: clamp(6.5rem, 21svh, 15rem);
}

[data-deck] .slide.is-title:has(.brief) .title-sub {
  font-size: clamp(0.98rem, 1.35vw, 1.15rem);
  color: var(--color-card-foreground);
}

[data-deck] .slide.is-title:has(.brief) .title-by {
  font-size: 0.9rem;
  color: var(--color-muted-foreground);
}

.brief {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.7rem, 1.3vw, 1.1rem);
}

@media (min-width: 52rem) {
  .brief {
    grid-template-columns: repeat(3, 1fr);
  }
}

.brief-item {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-height: clamp(6rem, 15svh, 10.5rem);
  padding: clamp(0.85rem, 1.7svh, 1.45rem) clamp(1rem, 1.2vw, 1.35rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--bg-base);
  box-shadow: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, 0.08));
}

[data-deck] .slide:has(.agenda) .brief-item {
  min-height: clamp(5rem, 9svh, 8rem);
}

.brief-n {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.brief-h {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-card-foreground);
}

.brief-p {
  margin: 0.1rem 0 0;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.42;
  color: var(--color-muted-foreground);
}

.agenda {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 clamp(1.1rem, 2.6svh, 1.9rem);
  font-size: clamp(0.8rem, 0.92vw, 0.93rem);
  text-align: left;
}

[data-deck] .slide .caption-slot + .agenda {
  margin-top: clamp(0.2rem, 0.6svh, 0.5rem);
}

.agenda caption {
  caption-side: top;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  text-align: left;
}

.agenda tr {
  border-top: 1px solid var(--color-border);
}

.agenda tbody tr:last-child {
  border-bottom: 1px solid var(--color-border);
}

.agenda th,
.agenda td {
  padding: clamp(0.24rem, 0.45svh, 0.36rem) 0;
  vertical-align: baseline;
  line-height: 1.4;
}

.agenda th {
  width: 1%;
  padding-right: clamp(1rem, 2.2vw, 2.25rem);
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-card-foreground);
}

.agenda td {
  color: var(--color-muted-foreground);
}

@media (max-width: 52rem) {
  .agenda th {
    white-space: normal;
    padding-right: 0;
  }
}

.brief-note {
  margin: 0;
  padding-top: clamp(0.7rem, 1.5svh, 1.1rem);
  border-top: 1px solid var(--color-border);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-muted-foreground);
  max-width: 72ch;
}

.brief-note b {
  font-weight: 600;
  color: var(--color-primary);
}

.slide-steps {
  position: fixed;
  top: calc(var(--bar-h) + 1.9rem);
  right: var(--gutter);
  height: var(--band-meta);
  display: flex;
  align-items: center;
  gap: 0.32rem;
  z-index: 20;
  pointer-events: none;
}

.slide-steps[hidden] {
  display: none;
}

.slide-steps i {
  width: 1.35rem;
  height: 0.2rem;
  border-radius: 999px;
  background: var(--color-border);
  transition: background 0.25s ease;
}

.slide-steps i.is-done {
  background: var(--color-muted-foreground);
}

.slide-steps i.is-here {
  background: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .slide-steps i {
    transition: none;
  }
}

.slide.is-airy .ev p,
.slide.is-airy .option p,
.slide.is-airy .pipe span,
.slide.is-airy .tally p {
  max-width: var(--measure-body);
}

.anno-list li {
  max-width: 46ch;
}

.anat-layer {
  grid-area: 1 / 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: opacity 0.35s ease;
}

[data-deck] .anat-layer > .anat-two,
[data-deck] .anat-layer > .hmap {
  flex: 1 1 0;
  min-height: 0;
}

[data-deck] .anat-layer > .hmap {
  align-content: start;
}

.reveal[data-stage="2"] .lay-1,
.reveal[data-stage="3"] .lay-1,
.reveal[data-stage="4"] .lay-1,
.reveal[data-stage="5"] .lay-1,
.reveal[data-stage="1"] .lay-2,
.reveal[data-stage="4"] .lay-2,
.reveal[data-stage="5"] .lay-2,
.reveal[data-stage="1"] .lay-3,
.reveal[data-stage="2"] .lay-3,
.reveal[data-stage="3"] .lay-3 {
  opacity: 0;
  pointer-events: none;
}

.reveal[data-stage="all"] .anat-stack {
  display: block;
}

.reveal[data-stage="all"] .anat-layer + .anat-layer {
  margin-top: 1.6rem;
}

.hmap {
  display: grid;
  gap: 1.1rem;
  align-items: stretch;
}

@media (min-width: 62rem) {
  .hmap {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hz {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--bg-base);
  padding: 0.9rem 1rem 1rem;
  box-shadow: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.hz-h {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-card-foreground);
}

.hz-j {
  margin: 0.1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.hz-art {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 1rem 0 0.9rem;
}

.hz-n {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-muted-foreground);
}

.mini {
  width: 100%;
}

.mini-bar {
  flex: 1;
  height: 0.62rem;
  border-radius: 3px;
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
}

.mini-bar.is-title { height: 0.95rem; }

.mini-bar.w-85 { max-width: 85%; }

.mini-bar.w-75 { max-width: 75%; }

.mini-bar.w-60 { max-width: 60%; }

.mini-page {
  display: grid;
  gap: 0.5rem;
}

.mini-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mini-pin {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--fg-on-primary);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
}

.mini-flow {
  display: grid;
  gap: 0.45rem;
}

.mini-frow {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.mini-frow .scr {
  flex: 1;
  height: 1.75rem;
  border-radius: 3px;
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
}

.arw {
  flex: none;
  position: relative;
  width: 0.55rem;
  height: 1px;
  background: var(--color-border);
}

.arw::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  border-left: 4px solid var(--color-border);
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
}

.mini-assets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
}

.mini-assets i {
  height: 1.3rem;
  border-radius: 3px;
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
}

.mini-assets i.is-new,
.chipgrid i.is-new {
  background: var(--bg-info);
  border-color: var(--color-primary);
}

.sk-bar {
  display: block;
  height: 0.5rem;
  border-radius: 3px;
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
}

.sk-crumb {
  width: 38%;
  height: 0.4rem;
  margin-bottom: 0.1rem;
}

.sk-steps {
  display: flex;
  gap: 0.9rem;
  padding: 0.3rem 0 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.sk-steps i {
  position: relative;
  width: 2.6rem;
  height: 0.4rem;
  margin-left: 0.65rem;
  border-radius: 3px;
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
}

.sk-steps i::before {
  content: "";
  position: absolute;
  left: -0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--bg-base);
}

.sk-steps .is-done::before { background: var(--color-primary); border-color: var(--color-primary); }

.sk-steps .is-here::before { border-color: var(--color-primary); border-width: 2.5px; }

.sk-alerts {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.55rem;
}

.sk-al {
  display: block;
  height: 1.35rem;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: 4px;
}

.sk-al.w-90 { width: 90%; }

.sk-al.w-80 { width: 80%; }

.sk-al.w-70 { width: 70%; }

.sk-al.is-err { border-color: var(--border-error); background: var(--bg-error); border-left-color: var(--color-cost, var(--fg-error)); }

.sk-al.is-warn { border-color: var(--fg-warning); background: var(--bg-warning); border-left-color: var(--fg-warning); }

.sk-al.is-ok { border-color: var(--fg-success); background: var(--bg-success); border-left-color: var(--fg-success); }

.sk-al.is-info { border-color: var(--fg-info); background: var(--bg-info); border-left-color: var(--fg-info); }

.sk-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 0.5rem;
  margin-bottom: 0.5rem;
}

.sk-fld i {
  display: block;
  width: 45%;
  height: 0.32rem;
  margin-bottom: 0.22rem;
  border-radius: 2px;
  background: var(--border-default);
}

.sk-fld span {
  display: block;
  height: 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--bg-base);
}

.sk-fld.is-err span {
  border-color: var(--color-cost, var(--fg-error));
  box-shadow: 0 0 0 2px var(--bg-error);
}

.sk-table {
  display: grid;
  gap: 0.22rem;
}

.sk-th {
  display: block;
  height: 0.85rem;
  border-radius: 3px;
  background: var(--color-lane, var(--bg-muted));
  border: 1px solid var(--color-border);
}

.sk-tr {
  display: block;
  height: 0.8rem;
  border-bottom: 1px solid var(--color-border);
}

.sk-pager {
  display: flex;
  gap: 0.22rem;
  padding-top: 0.4rem;
}

.sk-pager span {
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--bg-base);
}

.sk-pager span:first-child {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.sk-btn {
  width: 3.2rem;
  height: 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-primary);
  background: var(--bg-base);
}

.sk-btn.is-p { background: var(--color-primary); }

.sk-btn.is-ghost {
  margin-right: auto;
  border-color: transparent;
  background: var(--border-subtle);
}

.sup-frame {
  align-items: flex-start;
}

.sup {
  width: 100%;
  flex: none;
  max-width: none;
  align-self: flex-start;
  transform-origin: top center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--bg-base);
  padding: 0.85rem 0.9rem 0.9rem;
  box-shadow: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.sup-n {
  margin: 0.7rem 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--color-muted-foreground);
}

.sup-h2 {
  margin-top: 1rem;
}

.flowstrip {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.15rem;
}

.frow {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
}

.frow .arw {
  align-self: center;
}

.fscr {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--bg-base);
  padding: 0.3rem 0.32rem 0.35rem;
}

.fs-hd {
  height: 0.42rem;
  border-radius: 2px;
  background: var(--border-default);
}

.fs-b {
  height: 0.34rem;
  border-radius: 2px;
  background: var(--border-subtle);
}

.fs-b.w-85 { width: 85%; }

.fs-b.w-75 { width: 75%; }

.fs-b.w-70 { width: 70%; }

.fs-b.w-60 { width: 60%; }

.fs-tag {
  align-self: flex-start;
  margin-top: 0.12rem;
  padding: 0.04rem 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--fg-info);
  background: var(--bg-info);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.fs-tag.is-err { color: var(--color-cost-fg, var(--fg-error)); background: var(--bg-error); border-color: var(--border-error); }

.fs-tag.is-warn { color: var(--fg-warning); background: var(--bg-warning); border-color: var(--fg-warning); }

.fs-tag.is-ok { color: var(--fg-success); background: var(--bg-success); border-color: var(--fg-success); }

.chipgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
  padding-top: 0.15rem;
}

.chipgrid i {
  height: 1.2rem;
  border-radius: 3px;
  background: var(--border-subtle);
  border: 1px solid var(--border-default);
}

.sup-legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-size: 0.74rem;
  color: var(--color-muted-foreground);
}

.sup-legend i {
  flex: none;
  width: 1rem;
  height: 0.75rem;
  border-radius: 3px;
  border: 1px solid var(--color-primary);
  background: var(--bg-info);
}

/* Deck-bar focus sits on --primary. Core's --focus-ring (magenta) is about
   1.3:1 there, so these controls use the inverse foreground instead.
   Recorded in EXPERIMENT.md — the contrast script only pairs focus with --bg-base. */
.deck-dot:focus-visible,
.deck-bar :focus-visible {
  outline: 2px solid var(--fg-on-inverse);
  outline-offset: 2px;
}

/* Alerts have no .ds-* recipe. Skeleton states use public status roles only. */
.sk-al.is-err  { border-color: var(--border-error); background: var(--bg-error); border-left-color: var(--fg-error); }
.sk-al.is-warn { border-color: var(--fg-warning); background: var(--bg-warning); border-left-color: var(--fg-warning); }
.sk-al.is-ok   { border-color: var(--fg-success); background: var(--bg-success); border-left-color: var(--fg-success); }
.sk-al.is-info { border-color: var(--fg-info); background: var(--bg-info); border-left-color: var(--fg-info); }

/* Flow tags and component-state specimens that are not recipes stay product.
   Where a .ds-badge / .ds-chip is used, do not restyle it here. */
.fs-tag.is-err  { color: var(--fg-error); background: var(--bg-error); border-color: var(--border-error); }
.fs-tag.is-warn { color: var(--fg-warning); background: var(--bg-warning); border-color: var(--fg-warning); }
.fs-tag.is-ok   { color: var(--fg-success); background: var(--bg-success); border-color: var(--fg-success); }

/* Reconstructed fields sit in a scaled anatomy frame. Compact density uses
   the public control tokens; it does not recolour the recipe. */
.tpl .ds-field { gap: 2px; min-width: 0; }
.tpl .ds-field__label,
.tpl .ds-field__error,
.tpl .ds-field__hint { font-size: var(--text-body-xs); line-height: var(--lh-body-xs); }
.tpl .ds-input {
  min-height: var(--control-height-sm);
  padding: var(--control-pad-y-sm) var(--control-pad-x-sm);
  font-size: var(--text-body-s);
}
.tpl .ds-btn { min-height: var(--control-height-sm); }
.tpl .ds-breadcrumb { font-size: var(--text-body-xs); }
.tpl-cta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.tpl-cta .pin { margin-right: auto; }

/* Chip specimens: rest / selected / disabled are the recipe.
   Hover and invalid are not static modifiers — see EXPERIMENT.md.
   Layout only. */
.states-row .ds-chip { pointer-events: auto; }

/* Flow thumbnails use the badge recipe. Layout only — colours stay on .ds-badge. */
.fscr .ds-badge {
  align-self: flex-start;
  margin-top: 0.12rem;
  max-width: 100%;
}

/* State row. Rest and selected are the chip recipe.
   Hover is the recipe's :hover, frozen so a slide can show it.
   Disabled is missing from .ds-chip — painted here with public roles.
   Invalid is not a chip variant; .specimen-invalid is product-only. */
.states-row .ds-chip,
.states-row .specimen-invalid {
  width: 100%;
  justify-content: center;
  font-size: var(--text-body-xs);
}
.ds-chip[data-demo="hover"] {
  border-color: var(--primary);
}
.ds-chip:disabled {
  background: var(--bg-disabled);
  color: var(--fg-disabled);
  border-color: var(--border-disabled);
  cursor: not-allowed;
}
.specimen-invalid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  min-height: var(--control-height-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-error);
  background: var(--bg-error);
  color: var(--fg-error);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
}