/* Dolphin Tank showcase. Tokens live in tokens.css. No shadows, no blur, no motion. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text-primary);font:400 var(--fs-body)/var(--lh-body) var(--font-ui);font-kerning:normal;overflow-wrap:break-word}
img,svg,video{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:var(--lh-heading);margin:0;letter-spacing:-.005em;text-wrap:balance}
p{margin:0 0 var(--space-4)}
p,li,dd{text-wrap:pretty}
ul,ol{margin:0;padding:0}
strong,th{font-weight:600}
code,kbd,samp,pre,.mono{font-family:var(--font-mono);font-size:var(--fs-code)}
code{background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-control);padding:.05em .35em;overflow-wrap:anywhere}
a{color:var(--accent-strong);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--text-primary);text-decoration-thickness:2px}
a:active{color:var(--accent)}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:var(--radius-control)}
::selection{background:var(--accent);color:var(--text-on-accent)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:fixed;left:var(--space-3);top:-6rem;z-index:100;background:var(--text-primary);color:var(--canvas);padding:var(--space-3) var(--space-4);font-weight:600;border-radius:var(--radius-control)}
.skip:focus{top:var(--space-3)}

/* ---------------------------------------------------------------- shell */
.shell{display:block}
.content{min-width:0}
.sheet{width:100%;max-width:var(--sheet);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}

/* rail (wide) and top bar (narrow) share one DOM */
.rail{background:var(--surface-1);border-bottom:1px solid var(--border)}
.rail-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:3.5rem;padding:var(--space-2) var(--gutter)}
.brand{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--text-primary);font:600 1.15rem/1 var(--font-display);text-decoration:none;min-height:var(--target)}
.brand:hover{color:var(--accent-strong);text-decoration:none}
.brand svg{flex:none;width:28px;height:28px}
.rail-tools{display:flex;align-items:center;gap:var(--space-2)}
.exhibits{padding:0 var(--gutter) var(--space-4)}
.rail-label,.rail-foot{font:400 var(--fs-label)/var(--lh-tight) var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin:0}
.exhibits ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:0 var(--space-4)}
.exhibits a{display:flex;align-items:center;gap:var(--space-3);min-height:var(--target);padding:var(--space-1) var(--space-2);color:var(--text-secondary);text-decoration:none;font-size:var(--fs-body-small);border-bottom:1px solid var(--border-subtle)}
.exhibits a:hover{color:var(--text-primary);background:var(--surface-2)}
.exhibits a:active{background:var(--border-subtle)}
.exhibits a[aria-current="true"]{color:var(--text-primary);font-weight:600;background:var(--surface-2);box-shadow:inset 0 -2px 0 var(--accent)}
.exhibits .k{font:600 .8125rem/1 var(--font-mono);color:var(--accent-strong);min-width:1.1rem}
.rail-foot{padding:0 var(--gutter) var(--space-4)}

/* narrow: sticky bar, index opens as a panel */
@media (max-width:1099px){
  .js .rail{position:sticky;top:0;z-index:40}
  .js .exhibits{display:none;position:absolute;left:0;right:0;top:100%;background:var(--overlay);border-bottom:1px solid var(--border-strong);padding-top:var(--space-3);max-height:calc(100vh - 3.6rem);overflow-y:auto}
  .js .exhibits.open{display:block}
  .js .rail-foot{display:none}
  .rail-label{padding-top:var(--space-2);padding-bottom:var(--space-2)}
}
/* phone: the wordmark used to wrap onto two lines under 414px, and the
   "Light theme" label wrapped too, because the two controls plus a 1.15rem
   wordmark leave no slack. Neither label wraps now; the wordmark steps down a
   size and the gaps and control padding tighten so it fits with room to spare.
   Below 375px mark + wordmark + both controls cannot coexist at a legible
   size, so the mark carries the bar on its own (aria-label still names it),
   matching what .tour .brand span already does on narrow screens. */
@media (max-width:479px){
  .rail-bar{gap:var(--space-2);padding-inline:var(--space-3)}
  .brand{gap:var(--space-2);font-size:1rem;white-space:nowrap}
  .theme-btn,.menu-btn{padding:.5rem .6rem}
}
@media (max-width:349px){
  .rail .brand>span{display:none}
}
/* wide: sticky left rail */
@media (min-width:1100px){
  .shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .rail{position:sticky;top:0;height:100vh;overflow-y:auto;border-bottom:0;border-right:1px solid var(--border);display:flex;flex-direction:column;padding-block:var(--space-4)}
  /* flex:none is load-bearing. .rail is a height:100vh flex column, so when the
     rail content is taller than the viewport the bar used to be flex-shrunk
     below its own content and its controls painted over the index below
     (26px of overlap at 1280x800, 48px at 1366x768). The rail already has
     overflow-y:auto, so let it scroll instead of crushing the bar. */
  .rail-bar{flex:none;flex-direction:column;align-items:flex-start;padding:0 var(--space-5) var(--space-4);gap:var(--space-4)}
  .exhibits{padding:0 var(--space-5);flex:1}
  .exhibits ol{display:block}
  .rail-label{margin-bottom:var(--space-2)}
  .rail-foot{padding:var(--space-4) var(--space-5) 0}
  .menu-btn{display:none!important}
}

/* ------------------------------------------------------------- controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--target);padding:.6rem 1.1rem;font:600 var(--fs-body-small)/1.2 var(--font-ui);color:var(--text-primary);background:transparent;border:1px solid var(--border-strong);border-radius:var(--radius-control);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--surface-2);color:var(--text-primary);text-decoration:none}
.btn:active{background:var(--border-subtle)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;background:transparent}
.btn[aria-busy="true"]{border-style:dashed;cursor:progress;color:var(--text-secondary)}
.btn-primary{background:var(--accent);border-color:var(--accent-strong);color:var(--text-on-accent)}
.btn-primary:hover{background:var(--accent-strong);color:var(--text-on-accent)}
.btn-primary:active{background:var(--text-primary);border-color:var(--text-primary);color:var(--canvas)}
.btn-small{padding:.4rem .8rem}
.btn .t{font:400 var(--fs-caption)/1 var(--font-mono);opacity:.9}
.theme-btn,.menu-btn{font:600 var(--fs-caption)/1.1 var(--font-ui);min-width:var(--target);padding:.5rem .8rem;white-space:nowrap}
.cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-5) 0 0}

.badge{display:inline-flex;align-items:center;gap:.4em;padding:.15rem .65rem;border-radius:var(--radius-pill);font:600 .6875rem/1.5 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--border);color:var(--text-secondary);background:var(--surface-1);white-space:nowrap}
.badge::before{content:"";width:.55em;height:.55em;flex:none}
.badge.accept{color:var(--success);border-color:var(--success);background:var(--success-soft)}
.badge.accept::before{border-radius:50%;background:currentColor}
.badge.reject{color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}
.badge.reject::before{transform:rotate(45deg);border:1.5px solid currentColor}
.badge.plain::before{display:none}

/* --------------------------------------------------------- exhibit frame */
.exhibit{padding-block:var(--space-8) var(--space-6);scroll-margin-top:4.5rem}
.ex-head{border-top:2px solid var(--border-strong);padding-top:var(--space-3);margin-bottom:var(--space-6)}
.ex-tag{display:flex;gap:var(--space-3);align-items:baseline;font:400 var(--fs-label)/1 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-3)}
.ex-tag b{color:var(--accent-strong);font-weight:600}
.exhibit h2{font-size:var(--fs-h2);max-width:24ch}
.exhibit h3{font-size:var(--fs-h3)}
.lede{font-size:1.125rem;color:var(--text-secondary);max-width:var(--measure)}
.note{font-size:var(--fs-body-small);color:var(--text-secondary);max-width:var(--measure)}
.small{font-size:var(--fs-caption);color:var(--text-muted);max-width:46rem}
.label{font:400 var(--fs-label)/var(--lh-tight) var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}

/* ---------------------------------------------------------------- hero */
.hero{padding-block:var(--space-7) var(--space-5)}
.kicker{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);font:400 var(--fs-label)/var(--lh-tight) var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-5)}
.kicker b{color:var(--accent-strong);font-weight:600}
.hero h1{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:560;letter-spacing:-.018em;max-width:16ch}
.hero-grid{display:grid;gap:var(--space-6)}
@media (min-width:1300px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-7);align-items:start}}
.brief{margin:var(--space-5) 0 0;max-width:36rem}
.brief div{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--border-subtle)}
.brief dt{font:400 var(--fs-label)/1.7 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.brief dd{margin:0;font-size:var(--fs-body-small);color:var(--text-secondary)}
.brief dd strong{color:var(--text-primary)}

/* excerpts (verbatim room messages) */
.excerpt{margin:0 0 var(--space-3);border:1px solid var(--border);border-radius:var(--radius-panel);background:var(--surface-2)}
.x-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-1) var(--space-4);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--border);font:400 var(--fs-label)/var(--lh-tight) var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.x-from{color:var(--text-primary);font-weight:600}
.x-body{margin:0;padding:var(--space-3) var(--space-4);white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8125rem;line-height:1.65;color:var(--text-primary);tab-size:2}
.cut{display:block;padding:0 var(--space-4);font:400 .8125rem/1 var(--font-mono);color:var(--text-muted);letter-spacing:.2em}
.x-foot{margin:0;padding:var(--space-2) var(--space-4) var(--space-3);font:400 var(--fs-caption)/var(--lh-tight) var(--font-mono);color:var(--text-muted);border-top:1px solid var(--border-subtle)}
.exhibit-a{background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--radius-panel);padding:var(--space-4)}
.exhibit-a .label{display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}
.exhibit-a .label b{color:var(--text-primary)}
.exhibit-a .excerpt{margin-bottom:var(--space-3)}
.exhibit-a p:last-child{margin-bottom:0}

/* measured facts */
.facts{margin:var(--space-6) 0 0;border-bottom:1px solid var(--border-strong)}
.fact{display:grid;gap:var(--space-1) var(--space-5);padding:var(--space-4) 0;border-top:1px solid var(--border-subtle)}
.fact:first-child{border-top:2px solid var(--border-strong)}
.fact dt{font:400 var(--fs-label)/1.6 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.fact dd{margin:0}
.fact .v{font:600 1.5rem/1.2 var(--font-display);font-variant-numeric:lining-nums tabular-nums}
.fact .v small{font:400 var(--fs-body-small)/1.3 var(--font-ui);color:var(--text-secondary)}
.fact .src{font-size:var(--fs-caption);color:var(--text-muted)}
@media (min-width:760px){.fact{grid-template-columns:11rem minmax(0,1fr) minmax(0,1fr);align-items:baseline}}

/* --------------------------------------------------------------- film */
.video{position:relative;aspect-ratio:16/9;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-media);overflow:hidden}
.video video{display:block;width:100%;height:100%;object-fit:contain;background:var(--surface-2)}
.video-status{margin:var(--space-2) 0 0;font:400 var(--fs-caption)/var(--lh-tight) var(--font-mono);color:var(--text-muted);min-height:1.2em}
.video[data-state="loading"]{border-style:dashed}
.video[data-state="error"]{border-color:var(--border-error)}
.video-status[data-state="error"]{color:var(--danger)}
.files{list-style:none;margin:var(--space-5) 0 0;border-top:2px solid var(--border-strong)}
.files li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-4);align-items:baseline;padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle);min-height:var(--target)}
.files .meta{font:400 var(--fs-caption)/1.3 var(--font-mono);color:var(--text-muted);text-align:right}
.files a{font-weight:600}
details.captions{margin-top:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-panel);background:var(--surface-1)}
details.captions summary{cursor:pointer;min-height:var(--target);display:flex;align-items:center;padding:var(--space-2) var(--space-4);font-weight:600}
details.captions summary:hover{background:var(--surface-2)}
details.captions ol{list-style:none;padding:var(--space-2) var(--space-4) var(--space-4);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);border-top:1px solid var(--border-subtle)}
details.captions li{display:grid;grid-template-columns:3.4rem minmax(0,1fr);overflow-wrap:anywhere;gap:var(--space-3);font-size:var(--fs-body-small)}
details.captions time{font:400 var(--fs-caption)/1.7 var(--font-mono);color:var(--text-muted)}

/* ---------------------------------------------------- follow one defect */
.walk-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.25rem,1fr));gap:0;border:1px solid var(--border-strong);border-bottom:0;border-radius:var(--radius-panel) var(--radius-panel) 0 0;background:var(--surface-2);overflow:hidden}
.walk-tabs [role="tab"]{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;min-height:var(--target);padding:var(--space-3) var(--space-4);background:transparent;color:var(--text-secondary);border:0;border-right:1px solid var(--border);font:400 var(--fs-caption)/1.3 var(--font-ui);cursor:pointer}
.walk-tabs [role="tab"]:last-child{border-right:0}
.walk-tabs [role="tab"] b{font:600 .6875rem/1.2 var(--font-mono);letter-spacing:.08em;color:var(--accent-strong)}
.walk-tabs [role="tab"]:hover{background:var(--surface-1);color:var(--text-primary)}
.walk-tabs [role="tab"]:active{background:var(--elevated)}
.walk-tabs [role="tab"][aria-selected="true"]{background:var(--surface-1);color:var(--text-primary);font-weight:600;box-shadow:inset 0 -3px 0 var(--accent)}
.walk-tabs [role="tab"]:focus-visible{outline-offset:-4px}
.walk{margin:0;padding:0;list-style:none;counter-reset:step}
.walk-step{counter-increment:step;display:grid;gap:var(--space-3);padding:var(--space-5) 0;border-top:1px solid var(--border-subtle)}
.walk-step:first-child{border-top:2px solid var(--border-strong)}
.walk-step h3{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:baseline}
.walk-step h3 .tag{font:600 .75rem/1 var(--font-mono);letter-spacing:.08em;color:var(--accent-strong);border:1px solid var(--accent);border-radius:var(--radius-control);padding:.25rem .5rem}
.walk-step h3 .tag::before{content:counter(step) " / "}
.walk-step>p{max-width:var(--measure);color:var(--text-secondary);margin:0}
.walk-step>p.small{color:var(--text-muted)}
.walk-wrap.is-tabs .walk{border:1px solid var(--border-strong);border-top:0;border-radius:0 0 var(--radius-panel) var(--radius-panel);background:var(--surface-1)}
.walk-wrap.is-tabs .walk-step{border-top:0;padding:var(--space-5) var(--space-5) var(--space-5)}
.walk-wrap.is-tabs .walk-step:first-child{border-top:0}
.walk-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.walk-nav .count{font:400 var(--fs-caption)/1 var(--font-mono);color:var(--text-muted)}
.commits{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font:400 var(--fs-caption)/1.4 var(--font-mono);color:var(--text-secondary)}
.commits a{font-weight:400}

/* ------------------------------------------------------------ timeline */
.timeline{list-style:none;position:relative;margin:var(--space-5) 0 0}
.tl{position:relative;display:grid;gap:var(--space-1);padding:0 0 var(--space-5) 2.4rem;margin:0}
.tl::before{content:"";position:absolute;left:.7rem;top:.5rem;bottom:-.3rem;border-left:1px solid var(--border-strong)}
.tl:last-child::before{display:none}
.tl .node{position:absolute;left:.7rem;top:.35rem;width:.9rem;height:.9rem;transform:translateX(-50%);background:var(--canvas);border:2px solid var(--text-primary)}
.tl.dispatch .node{border-radius:0}
.tl.resume .node{width:.55rem;height:.55rem;border-width:1.5px;border-color:var(--text-muted);border-radius:50%;top:.5rem}
.tl.repair .node,.tl.attack .node,.tl.decline .node{border-radius:50%;border-color:var(--accent)}
.tl.accept .node{border-radius:50%;background:var(--accent);border-color:var(--accent);width:1rem;height:1rem;top:.3rem}
.tl.reject .node{width:1.25rem;height:1.25rem;top:.25rem;transform:translateX(-50%) rotate(45deg);border-radius:0;border:2.5px solid var(--text-primary);background:var(--canvas)}
.tl.reject .node::after{content:"";position:absolute;inset:50% -1px auto;border-top:2.5px solid var(--text-primary)}
.tl time{font:400 var(--fs-caption)/1.5 var(--font-mono);color:var(--text-muted)}
.tl h3{font-size:1.1rem;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:center}
.tl p{margin:0;color:var(--text-secondary);font-size:var(--fs-body-small);max-width:var(--measure)}
.tl .hash{font:400 .85rem/1 var(--font-mono);color:var(--text-secondary)}
.tl.reject{margin:var(--space-2) 0 var(--space-5) 0;padding:var(--space-4) var(--space-4) var(--space-4) 2.4rem;border:1px solid var(--border-strong);border-radius:var(--radius-panel);background:var(--surface-1)}
.tl.reject::before{left:.7rem;top:-1rem;bottom:-1.2rem}
.tl.reject .node{left:.7rem;top:1.1rem}
.tl.reject h3{font-size:1.35rem}
.tl.reject p{color:var(--text-primary)}
.tl-actions{margin-top:var(--space-2)}
@media (min-width:900px){
  .timeline{margin-left:10.5rem}
  .tl time{position:absolute;right:calc(100% + 1.25rem);top:.2rem;width:9rem;text-align:right}
  .tl.reject{margin-left:0}
  .tl.reject time{right:calc(100% + 1.25rem)}
}

/* --------------------------------------------------------------- chart */
.activity-sum{display:grid;gap:var(--space-4);margin:0 0 var(--space-5)}
.splitbar{display:block;width:100%;height:14px}
.splitbar .a{fill:var(--chart-bar)}
.splitbar .i{fill:var(--chart-gap);stroke:var(--border);stroke-width:.3}
.sum-row{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.sum-row div{min-width:9rem}
.sum-row dt{font:400 var(--fs-label)/1.4 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.sum-row dd{margin:0;font:600 1.6rem/1.2 var(--font-display);font-variant-numeric:lining-nums tabular-nums}
.sum-row dd small{font:400 var(--fs-caption)/1.3 var(--font-ui);color:var(--text-secondary);display:block}
.chart{border:1px solid var(--border);border-radius:var(--radius-panel);background:var(--surface-1);overflow-x:auto;padding:var(--space-3)}
.chart:focus-visible{outline-offset:2px}
.chart-svg{display:block;min-width:880px;width:100%;height:auto}
.chart-svg text{fill:var(--text-muted);font-family:var(--font-mono)}
.chart-svg .axis-t{font-size:11px}
.chart-svg .axis-t.dim{fill:var(--text-muted);opacity:.85}
.chart-svg .lane-t{font:600 11px var(--font-ui);fill:var(--text-secondary);letter-spacing:.02em}
.chart-svg .gap-t{font-size:11px;fill:var(--text-secondary)}
.chart-svg .hum-t{font-size:10px;fill:var(--text-primary);font-weight:600}
.chart-svg .ver-t{font-size:10.5px;fill:var(--text-primary);font-weight:600}
.chart-svg .grid{stroke:var(--chart-grid);stroke-width:1}
.chart-svg .base{stroke:var(--border-strong);stroke-width:1.2}
.chart-svg .day{stroke:var(--border);stroke-width:1}
.chart-svg .tick{stroke:var(--border-strong);stroke-width:1}
.chart-svg .bar{fill:var(--chart-bar)}
.chart-svg .gap{fill:var(--chart-gap)}
.chart-svg .lead{stroke:var(--border);stroke-width:1;stroke-dasharray:2 3}
.chart-svg .lead.rej{stroke:var(--text-primary);stroke-dasharray:none}
.chart-svg .hum{fill:var(--surface-1);stroke:var(--text-primary);stroke-width:1.2}
.chart-svg .acc-mark{fill:var(--accent);stroke:var(--surface-1);stroke-width:2}
.chart-svg .rej-mark{fill:var(--surface-1);stroke:var(--text-primary);stroke-width:2.4}
.chart-svg .commit{stroke:var(--text-muted);stroke-width:1}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:var(--space-3) 0 0;font-size:var(--fs-caption);color:var(--text-secondary)}
.legend li{display:flex;align-items:center;gap:var(--space-2)}
.legend svg{flex:none;width:16px;height:16px}
.legend .l-bar{fill:var(--chart-bar)}
.legend .l-gap{fill:var(--chart-gap);stroke:var(--border)}
.legend .l-hum{fill:var(--surface-1);stroke:var(--text-primary);stroke-width:1.4}
.legend .l-acc{fill:var(--accent)}
.legend .l-rej{fill:var(--surface-1);stroke:var(--text-primary);stroke-width:2}
.legend .l-com{stroke:var(--text-muted);stroke-width:1.4}

/* ---------------------------------------------------------- evidence loop */
.loop{list-style:none;counter-reset:loop;border-top:2px solid var(--border-strong);max-width:52rem}
.loop li{counter-increment:loop;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:var(--space-1) var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--border-subtle)}
.loop li::before{content:counter(loop);grid-row:1 / span 3;font:600 2rem/1 var(--font-display);color:var(--accent-strong);font-variant-numeric:lining-nums}
.loop h3{font-size:1.15rem}
.loop p{margin:0;color:var(--text-secondary);font-size:var(--fs-body-small)}
.loop .artifact{font:400 var(--fs-caption)/1.5 var(--font-mono);color:var(--text-muted);overflow-wrap:anywhere}
.loop .fork{display:grid;gap:var(--space-2);margin-top:var(--space-2)}
.loop .fork p{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--space-3)}
.loop .fork b{font:600 .6875rem/1.8 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary)}
blockquote.question{margin:var(--space-6) 0 0;padding:var(--space-4) 0;border-block:1px solid var(--border-strong);max-width:46rem}
blockquote.question p:first-child{margin:0;font:560 1.4rem/1.3 var(--font-display);color:var(--text-primary)}
blockquote.question .small{margin:var(--space-2) 0 0}
blockquote.question footer{margin-top:var(--space-2);font-size:var(--fs-caption);color:var(--text-muted);background:none;padding:0;border:0}

/* --------------------------------------------------------------- tables */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-panel);background:var(--surface-1)}
table{border-collapse:collapse;width:100%;font-size:var(--fs-body-small)}
caption{text-align:left;padding:var(--space-3) var(--space-4);font:400 var(--fs-label)/var(--lh-tight) var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border)}
th,td{text-align:left;vertical-align:top;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle)}
thead th{font:400 var(--fs-label)/1.4 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
table.seats td:nth-child(2){min-width:15rem}
table.seats td:nth-child(5){min-width:17rem}
tfoot th,tfoot td{border-top:1px solid var(--border-strong);border-bottom:0;background:var(--surface-2)}
th[scope="row"]{font-weight:600;white-space:nowrap}
thead th.num{font-family:var(--font-mono);font-size:var(--fs-label)}
td.num,th.num{text-align:right;font-family:var(--font-mono);font-size:var(--fs-code);font-variant-numeric:tabular-nums;white-space:nowrap}
td.mono,.hash{font-family:var(--font-mono);font-size:var(--fs-code)}
.share{display:block;width:5.5rem;height:6px;margin-top:6px}
.share .bg{fill:var(--surface-2);stroke:var(--border-subtle);stroke-width:.3}
.share .fg{fill:var(--chart-bar)}
.who{display:block;font:400 var(--fs-caption)/1.3 var(--font-mono);color:var(--text-muted);font-weight:400}
.pass{color:var(--success);font-weight:600}
.dim{color:var(--text-muted)}
@media (max-width:759px){
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stack,table.stack tbody,table.stack tr,table.stack td,table.stack th{display:block;width:100%}
  /* the table is no longer a table here, so the caption must stop being a
     table-caption: a table-caption inside a block parent gets wrapped in an
     anonymous table box and collapses to the width of the narrowest column */
  table.stack>caption{display:block;width:100%}
  table.stack tr{padding:var(--space-3) 0;border-bottom:1px solid var(--border)}
  table.stack tbody tr:last-child{border-bottom:0}
  /* one column per row: the label sits on its own line above its value.
     A fixed 6.2rem label track ate 30% of a 375px screen and left the prose
     cramped, so the label is stacked instead. data-label is untouched, so the
     ::before label and the hidden thead still carry the header association. */
  table.stack td,table.stack th[scope="row"]{display:block;border:0;padding:0 var(--space-4) var(--space-2);text-align:left;white-space:normal;overflow-wrap:anywhere}
  table.stack td::before{content:attr(data-label);display:block;margin-bottom:2px;font:400 var(--fs-label)/1.6 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
  table.stack tr>*:last-child{padding-bottom:0}
  table.stack td.num{text-align:left}
  table.stack th[scope="row"]{font-size:1.05rem}
  /* evidence cell: the bare commas between links are too weak to separate
     anything once the links no longer share a line, so the cell becomes an
     even chip row in the same mono/label voice as .commits and .files. */
  table.stack td[data-label="Evidence"]{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-3);row-gap:var(--space-2)}
  table.stack td[data-label="Evidence"]::before{flex:0 0 100%}
  table.stack td[data-label="Evidence"] a{display:inline-block;padding:.2rem .5rem;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--elevated);color:var(--accent-strong);font:600 var(--fs-caption)/1.4 var(--font-mono);text-decoration:none;overflow-wrap:anywhere}
  table.stack td[data-label="Evidence"] a:hover,table.stack td[data-label="Evidence"] a:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
}

/* -------------------------------------------------------------- autonomy */
.two{display:grid;gap:var(--space-6);margin-top:var(--space-6)}
@media (min-width:900px){.two{grid-template-columns:1fr 1fr;gap:var(--space-7)}}
.two h3{padding-top:var(--space-3);border-top:2px solid var(--border-strong);margin-bottom:var(--space-3)}
.two p{color:var(--text-secondary);font-size:var(--fs-body-small)}
.kind{display:inline-flex;align-items:center;gap:.45em;font:600 .6875rem/1.4 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.kind::before{content:"";width:.6em;height:.6em;border:1.5px solid var(--text-primary)}
.kind.dispatch::before{background:var(--text-primary)}
.kind.resume::before{border-radius:50%;border-color:var(--text-muted)}

/* --------------------------------------------------------------- product */
.shots{display:grid;gap:var(--space-7)}
.shot{margin:0;display:grid;gap:var(--space-4)}
.shot .frame{position:relative;border:1px solid var(--border-strong);border-radius:var(--radius-media);overflow:hidden;background:var(--surface-2);line-height:0}
.shot img{display:block;width:100%;height:auto;background:var(--surface-2)}
.shot .pins{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pins .pin{fill:var(--text-primary);stroke:var(--canvas);stroke-width:2}
.pins .pin-t{fill:var(--canvas);font:600 17px var(--font-mono)}
.shot figcaption{line-height:var(--lh-body)}
.shot .fig{font:400 var(--fs-label)/1.4 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-1)}
.shot h3{font-size:1.2rem;margin-bottom:var(--space-2)}
.shot p{font-size:var(--fs-body-small);color:var(--text-secondary);margin:0 0 var(--space-3)}
.shot ol.callouts{list-style:none;display:grid;gap:var(--space-2);margin:0 0 var(--space-3);font-size:var(--fs-body-small);color:var(--text-secondary)}
.shot ol.callouts li{display:grid;grid-template-columns:1.75rem 1fr;gap:var(--space-2)}
.shot ol.callouts li b{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;background:var(--text-primary);color:var(--canvas);font:600 .75rem/1 var(--font-mono);border-radius:50%}
.shot .file{font:400 var(--fs-caption)/1.4 var(--font-mono);color:var(--text-muted);overflow-wrap:anywhere}
.shot-wide .frame{max-width:100%}
.shot-side{grid-template-columns:1fr}
@media (min-width:860px){
  .shot-side{grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:var(--space-6);align-items:start}
  .shot-pair{grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:start}
}
.shot-pair{display:grid;gap:var(--space-6)}
.shot-pair .shot{gap:var(--space-3)}
.shot-pair .frame{max-width:22rem}

/* ----------------------------------------------------------------- code */
.code{border:1px solid var(--border-strong);border-radius:var(--radius-panel);background:var(--surface-2);max-width:46rem}
.code .x-head{background:var(--surface-1);border-radius:var(--radius-panel) var(--radius-panel) 0 0}
.code pre{margin:0;padding:var(--space-4);overflow-x:auto;line-height:1.7;font-size:var(--fs-code)}
.code pre .c{color:var(--text-muted)}
.steps{list-style:none;counter-reset:s;display:grid;gap:var(--space-3);max-width:46rem;margin:var(--space-5) 0 0}
.steps li{counter-increment:s;display:grid;grid-template-columns:2rem 1fr;gap:var(--space-2);font-size:var(--fs-body-small);color:var(--text-secondary)}
.steps li::before{content:counter(s);font:600 .8125rem/1.8 var(--font-mono);color:var(--accent-strong)}

/* ------------------------------------------------------------------ gaps */
.gaps{margin:0;border-top:2px solid var(--border-strong)}
.gaps div{display:grid;gap:var(--space-1) var(--space-6);padding:var(--space-4) 0;border-bottom:1px solid var(--border-subtle)}
.gaps dt{font:600 1.05rem/1.3 var(--font-display)}
.gaps dd{margin:0;color:var(--text-secondary);font-size:var(--fs-body-small);max-width:42rem}
@media (min-width:900px){.gaps div{grid-template-columns:16rem minmax(0,1fr)}}
.notfor{margin-top:var(--space-7)}
.notfor h3{padding-top:var(--space-3);border-top:2px solid var(--border-strong);margin-bottom:var(--space-3)}

/* ---------------------------------------------------------------- footer */
.site-foot{margin-top:var(--space-8);background:var(--surface-1);border-top:2px solid var(--border-strong);padding-block:var(--space-7) var(--space-7)}
.foot-grid{display:grid;gap:var(--space-6)}
@media (min-width:860px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.site-foot h2{font-size:1.5rem;max-width:14ch}
.site-foot h3{font:400 var(--fs-label)/1.4 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2)}
.site-foot ul{list-style:none}
.site-foot li a{display:inline-flex;align-items:center;min-height:var(--target);font-size:var(--fs-body-small)}
.foot-note{margin-top:var(--space-6);max-width:56rem;font-size:var(--fs-caption);color:var(--text-muted)}

/* ------------------------------------------------- legal and 404 pages */
.bar{background:var(--surface-1);border-bottom:1px solid var(--border)}
.bar .sheet{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:3.5rem;padding-block:var(--space-2)}
.bar nav{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.doc{padding-block:var(--space-7) var(--space-5)}
.doc h1{font-size:var(--fs-h1);font-weight:560;margin-bottom:var(--space-4);max-width:20ch}
.doc h2{font-size:1.4rem;margin:var(--space-6) 0 var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-strong)}
.doc p,.doc li{color:var(--text-secondary);max-width:var(--measure)}
.doc ul{padding-left:1.2rem;display:grid;gap:var(--space-2);margin-bottom:var(--space-4)}
.banner{border:1px solid var(--warning);background:var(--warning-soft);color:var(--text-primary);border-radius:var(--radius-panel);padding:var(--space-3) var(--space-4);max-width:var(--measure);font-size:var(--fs-body-small)}
.banner strong{color:var(--text-primary)}
.page-end{padding-bottom:var(--space-7)}

/* ---------------------------------------------------------- utilities */
.chart-fig{margin:0}
.mt-4{margin-top:var(--space-4)}
.mt-6{margin-top:var(--space-6)}
.gaps.bare{border-top:0}

/* ---------------------------------------------------------- misc states */
noscript .ns{border:1px solid var(--border-strong);background:var(--surface-1);padding:var(--space-3) var(--space-4);border-radius:var(--radius-panel);font-size:var(--fs-body-small);margin:0 0 var(--space-3)}
img[loading="lazy"]{background:var(--surface-2)}

@media (max-width:480px){
  .exhibit{padding-block:var(--space-7) var(--space-5)}
  .brief div{grid-template-columns:1fr;gap:0}
  .files li{grid-template-columns:1fr}
  .files .meta{text-align:left}
  .walk-tabs{grid-template-columns:1fr 1fr}
  .walk-tabs [role="tab"]{border-bottom:1px solid var(--border)}
  .timeline{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .rail,.menu-btn,.theme-btn,.skip{display:none}
  body{background:#fff;color:#000}
}

.foot-links{list-style:none;display:flex;flex-wrap:wrap;gap:0 var(--space-5)}
.foot-links a{display:inline-flex;align-items:center;min-height:var(--target);font-size:var(--fs-body-small)}
.bar nav a{display:inline-flex;align-items:center;min-height:var(--target);font-size:var(--fs-body-small)}

.files a{display:inline-flex;align-items:center;min-height:var(--target)}
.site-foot li a,.foot-links a{min-width:var(--target)}

.shot-trio{display:grid;gap:var(--space-6)}
@media (min-width:900px){.shot-trio{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}
.shot-trio .frame{max-width:none}