:root{
  --ground:#0A1D22;
  --panel:#0E2830;
  --panel-2:#10323C;
  --rule:#1C4E5A;
  --rule-soft:#163E48;
  --ink:#DEEAE7;
  --ink-dim:#8CADAF;
  --ink-faint:#5D8288;

  /* metric-coded hues: fixed meaning everywhere in the interface */
  --rn:#5BD6A8;  /* relevant + new      */
  --ro:#7FA8FF;  /* relevant + old      */
  --in:#FFA24A;  /* irrelevant + new    */
  --io:#E5556E;  /* irrelevant + old    */
  --m-part:#FFC94A;
  --m-resp:#64C8FF;
  --m-coh:#A98CFF;
  --m-imp:#FF7BA6;
  --m-new:#5BD6A8;
  --m-dens:#FFAE6B;

  --human:#FFC94A;
  --assistant:#64C8FF;
  --tutor:#A98CFF;

  --warn:#FFA24A;
  --err:#E5556E;
  --ok:#5BD6A8;

  --mono:ui-monospace,"SF Mono","JetBrains Mono","IBM Plex Mono",Menlo,Consolas,monospace;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Source Serif 4",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, #10353E 0%, transparent 60%),
    var(--ground);
  color:var(--ink);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
p.prose,.prose{font-family:var(--serif);font-size:15px;line-height:1.62;color:#C6DAD8}
.prose em{color:var(--ink)}
a{color:var(--m-resp)}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
}
.code{color:var(--ink-dim)}
.num{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:40;
  background:rgba(10,29,34,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.hdr-row{
  display:flex;align-items:center;gap:18px;
  padding:10px 18px;flex-wrap:wrap;
}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto}
.brand h1{
  font-size:14px;font-weight:600;margin:0;letter-spacing:.02em;
}
.brand .sub{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.badge{
  border:1px solid var(--warn);color:var(--warn);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 7px;border-radius:2px;white-space:nowrap;
}
/* ---------- transport ---------- */
.transport{display:flex;align-items:center;gap:8px}
button{
  font-family:var(--mono);font-size:11px;
  background:var(--panel-2);color:var(--ink);
  border:1px solid var(--rule);border-radius:3px;
  padding:5px 10px;cursor:pointer;letter-spacing:.04em;
}
button:hover{background:#164450;border-color:#2A6B7A}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{
  outline:2px solid var(--m-part);outline-offset:2px}
button.primary{background:var(--rn);color:#052018;border-color:var(--rn);font-weight:600}
button.primary:hover{background:#7FE6C0}
button.danger{border-color:var(--err);color:var(--err)}
button[aria-pressed="true"]{background:#1B5665;border-color:#3B8FA1}
.clock{
  font-size:11px;color:var(--ink-dim);white-space:nowrap;
  border:1px solid var(--rule-soft);border-radius:3px;padding:4px 8px;
}
.clock b{color:var(--ink);font-weight:600}
/* scrubber */
.scrub{
  width:100%;padding:0 18px 10px;
}
input[type=range]{width:100%;accent-color:var(--m-part);height:18px}

/* ---------- layout ---------- */
.wrap{display:grid;grid-template-columns:184px minmax(0,1fr);gap:0}
nav.rail{
  position:sticky;top:96px;align-self:start;
  padding:16px 10px 40px;border-right:1px solid var(--rule-soft);
  height:calc(100vh - 96px);overflow:auto;
}
nav.rail a{
  display:grid;grid-template-columns:52px 1fr;gap:6px;align-items:baseline;
  padding:6px 6px;color:var(--ink-dim);text-decoration:none;border-radius:3px;
  font-size:11.5px;
}
nav.rail a:hover{background:#0F2E37;color:var(--ink)}
nav.rail a.on{background:#123A45;color:var(--ink);box-shadow:inset 2px 0 0 var(--m-part)}
nav.rail .stage{font-size:9px;letter-spacing:.1em;color:var(--ink-faint)}
nav.rail a.on .stage{color:var(--m-part)}
nav.rail .grp{margin:14px 0 4px 6px}

main{padding:18px 20px 90px;min-width:0}
section{margin-bottom:34px;scroll-margin-top:110px}
.sec-head{border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:14px}
.sec-head h2{font-size:15px;margin:0 0 4px;letter-spacing:.01em;font-weight:600}
.sec-head .spec{font-size:10px;color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
@media(max-width:1080px){.g2,.g3,.g-2-1,.g-1-2{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  nav.rail{position:static;height:auto;display:flex;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--rule-soft)}
  nav.rail a{grid-template-columns:auto;padding:5px 8px}
  nav.rail .grp{display:none}
}

.panel{
  background:linear-gradient(180deg,#0E2A33 0%,#0C242C 100%);
  border:1px solid var(--rule-soft);border-radius:5px;padding:12px 14px;min-width:0;
}
.panel > h3{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);
  margin:0 0 10px;display:flex;align-items:center;gap:8px;font-weight:500;
}
.panel > h3 .tag{margin-left:auto}
.tag{
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:2px;padding:2px 5px;color:var(--ink-faint);
}
.tag.obs{border-color:#2A6B7A;color:#8FD0DE}
.tag.der{border-color:#4B6BA8;color:#9FB6E8}
.tag.llm{border-color:#8A6AB8;color:#C6ABEE}

/* provenance legend chips */
.legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:10.5px;color:var(--ink-dim)}
.sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%;font-size:11.5px}
th,td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
th{color:var(--ink-faint);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:#10313B}
.null{color:var(--ink-faint);font-style:italic}

/* ---------- flags ---------- */
.flag{
  display:inline-block;font-size:9.5px;letter-spacing:.06em;
  border-radius:2px;padding:2px 5px;margin:2px 4px 2px 0;border:1px solid;
}
.flag.info{border-color:#2A6B7A;color:#8FD0DE}
.flag.warning{border-color:var(--warn);color:var(--warn)}
.flag.error{border-color:var(--err);color:var(--err)}

/* ---------- transcript ---------- */
.turns{max-height:520px;overflow:auto;padding-right:4px}
.turn{
  border-left:2px solid var(--rule);padding:7px 10px;margin-bottom:6px;
  background:#0C242C;border-radius:0 3px 3px 0;
  transition:background .4s, border-color .4s;
}
.turn.pending{opacity:.28;filter:saturate(.4)}
.turn.head{background:#143C47;border-left-color:var(--m-part)}
.turn .meta{display:flex;gap:8px;align-items:baseline;font-size:10px;color:var(--ink-faint);flex-wrap:wrap}
.turn .who{font-weight:600;letter-spacing:.04em}
.turn .txt{font-family:var(--serif);font-size:14px;color:#CFE2E0;margin-top:3px}
.who.human{color:var(--human)}
.who.assistant{color:var(--assistant)}
.who.tutor{color:var(--tutor)}
.gapmark{
  display:flex;align-items:center;gap:8px;margin:8px 0;color:var(--warn);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;
}
.gapmark:before,.gapmark:after{content:"";flex:1;border-top:1px dashed var(--warn);opacity:.5}

/* ---------- stat blocks ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;background:var(--rule-soft)}
.stat{background:#0C242C;padding:8px 10px}
.stat .k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.stat .v{font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:2px}
.stat .u{font-size:10px;color:var(--ink-dim);margin-left:3px}

/* ---------- curve stack (signature) ---------- */
.stack{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule-soft)}
.row{display:grid;grid-template-columns:150px minmax(0,1fr) 82px;align-items:center;
  border-bottom:1px solid var(--rule-soft);gap:6px}
.row .lab{padding:6px 0 6px 2px}
.row .lab .n1{font-size:11.5px}
.row .lab .n2{font-size:9.5px;color:var(--ink-faint);letter-spacing:.06em}
.row .val{text-align:right;font-variant-numeric:tabular-nums;font-size:15px;padding-right:2px}
.row .val small{display:block;font-size:9px;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase}
.row svg{display:block;width:100%;height:58px}
@media(max-width:760px){.row{grid-template-columns:104px minmax(0,1fr) 64px}}

/* ---------- json / log ---------- */
pre{
  margin:0;background:#08181D;border:1px solid var(--rule-soft);border-radius:3px;
  padding:10px;overflow:auto;font-size:11px;line-height:1.45;max-height:340px;
}
.jk{color:#8FD0DE}.jn{color:var(--m-part)}.js{color:#B7E6CF}.jb{color:#C6ABEE}.jnull{color:var(--ink-faint)}
.redact{color:var(--err)}
.log{max-height:300px;overflow:auto;font-size:11px}
.ev{display:grid;grid-template-columns:58px 1fr;gap:8px;padding:3px 0;border-bottom:1px solid #10303A}
.ev .t{color:var(--ink-faint);font-variant-numeric:tabular-nums}
.ev .n{color:var(--m-resp)}
.ev.rev .n{color:var(--m-imp)}
.ev.fail .n{color:var(--err)}
.ev.ok .n{color:var(--rn)}

/* ---------- controls ---------- */
.ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
label.field{display:flex;flex-direction:column;gap:3px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
select,input[type=text],input[type=number]{
  font-family:var(--mono);font-size:11.5px;background:#08181D;color:var(--ink);
  border:1px solid var(--rule);border-radius:3px;padding:4px 6px;
}
.scopes{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:2px 12px}
.scopes label{display:flex;gap:7px;align-items:center;font-size:11px;cursor:pointer;padding:2px 0}
.scopes input{accent-color:var(--rn)}
.scopes label.off{color:var(--ink-faint)}

/* ---------- architecture ---------- */
.topo{width:100%;height:auto;display:block}
.topo .node{fill:#0E2E38;stroke:var(--rule);stroke-width:1}
.topo .node.hot{stroke:var(--m-part);fill:#16404C}
.topo text{font-family:var(--mono);fill:var(--ink);font-size:9.5px}
.topo .sub{fill:var(--ink-faint);font-size:8px;letter-spacing:.08em}
.topo .edge{fill:none;stroke:var(--rule);stroke-width:1}
.topo .edge.async{stroke-dasharray:3 3}

/* ---------- gcs tree ---------- */
.tree{font-size:11px;line-height:1.75}
.tree div{padding:1px 4px;border-radius:2px;transition:background .6s,color .6s}
.tree div.wrote{background:#1C5A4A;color:#CFF3E4}
.tree .dim{color:var(--ink-faint)}
.tree .cnt{float:right;color:var(--ink-faint);font-variant-numeric:tabular-nums}

/* ---------- misc ---------- */
.note{font-size:11px;color:var(--ink-dim);border-left:2px solid var(--rule);padding-left:9px;margin:10px 0 0}
.integrity{
  border:1px solid var(--rule);border-left:3px solid var(--warn);
  background:#0C242C;padding:12px 14px;border-radius:3px;
}
.integrity p{margin:0;font-family:var(--serif);font-size:14px;color:#C6DAD8}
.kbd{border:1px solid var(--rule);border-radius:3px;padding:0 4px;font-size:10px;color:var(--ink-dim)}
.hr{height:1px;background:var(--rule-soft);margin:12px 0}
.pill{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:2px 8px;border:1px solid var(--rule);color:var(--ink-dim)}
.pill.on{border-color:var(--rn);color:var(--rn)}
.pill.prov{border-color:var(--warn);color:var(--warn)}
.method{display:inline-block;font-size:9px;padding:1px 5px;border-radius:2px;margin-right:6px;font-weight:600}
.m-get{background:#12414E;color:#8FD0DE}
.m-post{background:#1C4A3C;color:#8FE0BC}
.m-put{background:#4A3E1C;color:#E8CF8F}
.m-del{background:#4A1C28;color:#F0A0B0}
.ep{display:grid;grid-template-columns:44px 1fr;gap:6px;padding:3px 0;border-bottom:1px solid #10303A;font-size:11px}
.ep .u{color:var(--ink-dim);word-break:break-all}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ── Lab dashboard ─────────────────────────────────────────────────────────
   The entry surface. Cards and route panels only; every value they show came
   from the API, so nothing here needs a chart. */
.dash-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:10px}
.dash-card{border:1px solid var(--rule-soft);border-radius:8px;padding:12px 13px;background:var(--panel-2);
  display:flex;flex-direction:column;gap:8px}
.dash-card.is-active{border-color:var(--m-part);box-shadow:inset 0 0 0 1px var(--m-part)}
.dash-card h3{margin:0;font-size:14px;line-height:1.35;color:var(--ink)}
.dash-badges{display:flex;flex-wrap:wrap;gap:4px}
.dash-scenario{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.dash-dim{font-size:12px;line-height:1.5;color:var(--ink-dim)}
.dash-cast{font-size:12px;color:var(--ink-dim)}
.dash-cast summary{cursor:pointer;color:var(--ink-dim);padding:2px 0}
.dash-cast ul{margin:6px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:6px}
.dash-open{display:inline-block;margin-top:auto;align-self:flex-start;font-size:12px;
  border:1px solid var(--rule);border-radius:6px;padding:5px 10px;color:var(--ink);
  text-decoration:none;background:var(--panel)}
.dash-open:hover{background:#123A45;border-color:var(--m-part)}
.dash-routes{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.dash-route{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;
  border-top:1px solid var(--rule-soft);padding-top:12px}
.dash-routes .dash-route:first-child{border-top:0;padding-top:0}
.dash-route h3{margin:0 0 4px;font-size:13.5px;color:var(--ink)}
.dash-step{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--rule);color:var(--m-part);font-size:12px}
.dash-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
@media (max-width:720px){.dash-cards{grid-template-columns:1fr}}

/* ── Section deck ──────────────────────────────────────────────────────────
   One card per section, in pipeline order. A card opens the section in the
   sheet below; it carries no measured value of its own. */
.deck{display:flex;flex-direction:column;gap:16px;margin-top:10px}
.deck-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;margin-top:8px}
button.deck-card{
  display:flex;flex-direction:column;gap:5px;text-align:start;
  font-family:var(--mono);padding:11px 12px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--rule-soft);cursor:pointer;
}
button.deck-card:hover{background:#123A45;border-color:var(--m-part)}
.deck-card .stage{font-size:9px;letter-spacing:.1em;color:var(--ink-faint)}
button.deck-card:hover .stage{color:var(--m-part)}
.deck-card .name{font-size:13px;color:var(--ink);line-height:1.35}
.deck-card .what{font-size:11.5px;color:var(--ink-dim);line-height:1.45;white-space:normal}
/* The full description of the section, on the card rather than behind a
   disclosure: the card is a <button>, so a control to expand it would have to
   be nested inside another control. The help sheet quotes this node. */
.deck-card .detail{font-size:11px;color:var(--ink-faint);line-height:1.55;white-space:normal;
  border-top:1px solid var(--rule-soft);padding-top:6px;margin-top:1px}
button.deck-card:hover .detail{color:var(--ink-dim)}
@media (max-width:720px){.deck-cards{grid-template-columns:1fr}}

/* ── Section sheet ─────────────────────────────────────────────────────────
   Holds exactly one section at a time. The section is moved in, not copied, so
   it keeps rendering from the API while it is open. */
.is-stowed{display:none}
/* Pinned, not centred, and a fixed height. A modal dialog centres itself, so a
   short section drew a short sheet and the transport moved to meet it — the one
   control that must never move was the one that jumped on every section change.
   Inline margins stay auto, so it is still centred left-to-right. */
dialog.sheet{
  height:88vh;margin-block:6vh auto;
  width:min(1180px,94vw);max-height:88vh;padding:0;overflow:hidden;
  background:var(--ground);color:var(--ink);
  border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 24px 60px rgba(2,10,13,.6);
}
/* The head, the scrubber and the foot size to their content and the body takes
   what is left, so the transport keeps its place no matter how the head wraps.
   Measuring the chrome in the body's max-height instead only held while nobody
   added a control to it. */
dialog.sheet[open]{display:flex;flex-direction:column}
/* Enlarged. Kept as a modifier on the same element rather than a second layout,
   so the head, the tabs and the foot stay exactly where the narrow sheet put
   them relative to each other and only the frame grows. */
dialog.sheet.is-wide{width:98vw;height:96vh;max-height:96vh;margin-block:2vh auto}
dialog.sheet::backdrop{background:rgba(4,14,17,.74)}
/* The help stacks over the section sheet, so it is inset from it and darkens
   what it covers — it reads as an answer about this section, not a new place. */
/* `bottom:auto` is what makes `height:auto` mean content height: a modal dialog
   is inset:0, so a stretched-between-edges box fills the viewport instead. */
dialog.helpsheet{width:min(880px,88vw);height:auto;bottom:auto;max-height:72vh;margin-block:12vh auto}
/* Unlike a section, help is as tall as its answer: growing to fill would leave
   a short answer sitting above a panel of nothing. */
.helpsheet .sheet-body{flex:0 1 auto}
dialog.helpsheet::backdrop{background:rgba(4,14,17,.55)}
.sheet-help,.sheet-wide{border-color:var(--rule-soft);color:var(--ink-dim)}
.sheet-help:hover,.sheet-wide:hover{color:var(--ink)}
.help-what{color:var(--ink-dim);line-height:1.55;font-size:12.5px;margin:0 0 14px}
.help-detail{color:var(--ink-faint);line-height:1.6;font-size:12px;margin:0 0 14px}
.help-none{color:var(--ink-faint);font-size:12px;font-style:italic}

/* ── Per-display help ─────────────────────────────────────────────────────
   The "?" beside a figure's heading answers "what am I looking at?" — the
   question the metric dictionary does not ask. It sits last in the heading,
   after the provenance tags, so every panel carries its help in the same
   place whether or not it has a tag to carry as well. */
.panel > h3 > .mx-q{margin-left:auto;flex:0 0 auto}
/* A tag already claims the free space; the button then follows it on the gap
   rather than splitting the space with it. */
.panel > h3 > .tag ~ .mx-q{margin-left:0}
/* Labelled parts, in the order someone reading a figure needs them. The label
   is a signpost, not a heading in the page's own hierarchy, so it is sized
   like the eyebrow it behaves as. */
.help-part{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-part);
  margin:16px 0 5px;font-weight:600;
}
.help-part:first-child{margin-top:0}
/* Vocabulary the screen uses and the dictionary does not: act labels, states,
   statuses. Terms stay left and narrow so the glosses form one column to read
   down rather than a ragged pair. */
.help-gloss{margin:4px 0 4px}
.help-gloss th{
  text-align:start;vertical-align:baseline;white-space:normal;width:22%;
  color:var(--ink);font-weight:600;padding-inline-end:12px;
}
.help-gloss th.code{color:var(--m-new)}
.help-gloss td{vertical-align:baseline;color:var(--ink-dim);line-height:1.55}
/* The figures of the open section, offered from the section's own answer. */
.help-figures{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.help-figure{
  font-size:11px;padding:4px 9px;border-radius:3px;cursor:pointer;
  border:1px solid var(--rule-soft);background:var(--panel-2);color:var(--ink-dim);
}
.help-figure:hover{color:var(--ink);border-color:var(--m-part)}
.help-figure:focus-visible{outline:2px solid var(--m-part);outline-offset:2px}

/* ── Per-measure help ──────────────────────────────────────────────────────
   The "?" in the dictionary's last column opens the app-wide contextual-help
   card on the row it sits in. `.mx-entry` is the long entry for that measure:
   it is in the row so the card is grounded in it, and hidden because the table
   is a summary — the whole point of the column is that the detail is on ask. */
th.mx-ask,td.mx-ask{width:1%;white-space:nowrap;text-align:end}
.mx-hd{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mx-q{
  width:20px;height:20px;padding:0;border-radius:50%;line-height:1;
  border:1px solid var(--rule-soft);background:var(--panel-2);color:var(--ink-dim);
  font-family:var(--mono);font-size:11px;cursor:pointer;
}
.mx-q:hover{color:var(--ink);border-color:var(--m-part)}
.mx-q:focus-visible{outline:2px solid var(--m-part);outline-offset:2px}
.sheet-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 14px;border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,#0E2A33 0%,#0C242C 100%);
}
/* The title yields first. It is prose and re-readable — the rail still marks the
   open section, and the spec line under it says which one this is — whereas
   wrapping the row drops the close button onto a line of its own. */
.sheet-title{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
  /* A short flex-basis, not `auto`: wrapping is decided on the base size, so a
     title measured at its full length pushes the close button onto its own row
     before anything gets the chance to shrink. It grows back into the space. */
  flex:1 1 140px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sheet-close{border-color:var(--rule)}
.sheet-scrub{
  padding:7px 14px 9px;border-bottom:1px solid var(--rule-soft);background:#0C242C;
}
.sheet-tabs{
  display:flex;gap:6px;overflow-x:auto;flex:0 0 auto;
  padding:8px 14px;border-bottom:1px solid var(--rule-soft);background:#0C242C;
}
button.sheet-tab{
  display:flex;align-items:baseline;gap:6px;white-space:nowrap;flex:0 0 auto;
  border-color:var(--rule-soft);color:var(--ink-dim);
}
button.sheet-tab .stage{font-size:9px;letter-spacing:.1em;color:var(--ink-faint)}
button.sheet-tab.on{background:#123A45;border-color:var(--m-part);color:var(--ink)}
button.sheet-tab.on .stage{color:var(--m-part)}
.sheet-body{padding:14px 16px 24px;overflow:auto;flex:1 1 auto;min-height:0}
.sheet-foot{
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:8px 14px;border-top:1px solid var(--rule-soft);background:#0C242C;
}
button.sheet-step{max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.sheet-step:last-child{margin-inline-start:auto}
button.sheet-step:disabled{opacity:.35;cursor:default}
button.sheet-step:disabled:hover{background:var(--panel-2);border-color:var(--rule)}
/* The sticky head already names the section; its own heading would repeat it. */
.sheet-body section{margin-bottom:0}
.sheet-body .sec-head h2{display:none}
.sheet-body .sec-head{border-bottom:0;padding-bottom:0;margin-bottom:12px}
@media (max-width:760px){
  dialog.sheet{width:100vw;height:100vh;max-height:100vh;max-width:100vw;margin:0;border-radius:0;border:0}
}