/* Literate Programming results interface: the Observatory theme and its family.
   A bench instrument read in long sessions against a devbox. The house rule is
   that the sky (the data) is the light source and every control recedes into
   chrome, which is why orange and green, being DATA colours (the stripped twin
   and the control build), are never used for a button, link, focus ring or
   selected row.

   Where the colours are
   ---------------------
   Not here. Every colour value the interface uses lives in themes.css, in seven
   blocks, one per theme, chosen by the data-theme attribute that themes.js sets
   on the <html> element. This file declares the derived tokens in :root, each a
   var() reference into that palette, and then writes rules that mention only
   those tokens. If you are adding a rule, do not write a hex value into it: add
   a token to themes.css if the colour you want does not already have a name.

   Type: Fraunces sets titles and the wordmark, never below 17 px; IBM Plex Mono
   sets every readout, label, table cell, axis and kbd; IBM Plex Sans sets body
   copy and button labels.
   Motion rule: a thing moves because something changed. Transitions 150 to 250 ms
   ease-out; every animation has a reduced-motion form that is its final frame. */

:root {
  /* Every colour value lives in themes.css, one block per theme, selected by the
     data-theme attribute themes.js sets on the <html> element. The tokens below
     are the DERIVED names that the rest of this stylesheet and its companions
     actually mention; each one is a var() reference into the raw palette, so a
     rule never has to know which theme is on. */

  /* the ground the whole page sits on, and the panels raised off it */
  --panel-glass: rgba(var(--panel-rgb), var(--panel-glass-alpha));
  --well: rgba(var(--well-rgb), var(--well-alpha));
  /* hairlines: the dividing rules between panels, at two weights */
  --hairline: rgba(var(--hair-rgb), var(--hair-alpha));
  --hairline-2: rgba(var(--hair-rgb), var(--hair-2-alpha));
  /* the chrome accent, and the glow it throws around a focused control */
  --corona-glow: rgba(var(--corona-rgb), 0.25);
  --corona-glow-2: rgba(var(--corona-rgb), 0.6);
  /* verdict tints: the faint grounds behind a pass, a failure and a warning */
  --good-dim: rgba(var(--good-solid-rgb), 0.22);
  --bad-dim: rgba(var(--bad-solid-rgb), 0.2);
  --warn-dim: rgba(var(--warn-solid-rgb), 0.16);
  /* two names kept from the original stylesheet because rules elsewhere still
     spell the colour that way */
  --surface-2: var(--panel-2);
  --focus: var(--corona-2);
  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  /* shape and timing */
  --radius: 6px;
  --radius-lg: 10px;
  --ease: cubic-bezier(.22,1,.36,1);
  --t-fast: 160ms;
  --t: 200ms;
  /* semantic z scale */
  --z-sticky: 10; --z-toast: 40;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 80% at 20% 0%, var(--sky-1) 0%, var(--sky-0) 55%) fixed, var(--sky-0);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
code, kbd, pre { font-family: var(--mono); }
code { color: var(--corona-2); font-size: 0.93em; }
::selection { background: rgba(var(--corona-rgb), 0.35); color: var(--ink); }

.shell { display: flex; min-height: 100vh; }

/* ---------------- rail ---------------- */
.rail {
  width: 218px; flex: 0 0 auto;
  background: var(--panel);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  padding: 20px 12px 14px;
  position: sticky; top: 0; height: 100vh; z-index: var(--z-sticky);
}
.wordmark { display: flex; gap: 10px; align-items: flex-start; padding: 0 6px 12px; }
.wordmark-glyph {
  font: 500 17px/1 var(--serif); letter-spacing: -0.02em;
  color: var(--accent-ink); background: var(--btn);
  border-radius: var(--radius); padding: 6px 7px 5px;
  box-shadow: 0 0 14px rgba(var(--btn-rgb), 0.5);
  flex: 0 0 auto;
}
.wordmark-text {
  font: 500 17px/1.12 var(--serif); letter-spacing: -0.012em;
  color: var(--ink); text-wrap: balance; min-width: 0;
  font-variation-settings: "opsz" 24;
}
.wordmark-text em {
  display: block; font: 400 11px/1.35 var(--sans); font-style: normal;
  color: var(--ink-3); margin-top: 4px; letter-spacing: 0;
}
.evidence-home-link {
  display: block; margin: -4px 6px 10px; padding: 7px 9px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  color: var(--corona-2); font: 600 11.5px/1.4 var(--sans); text-decoration: none;
}
.evidence-home-link:hover, .evidence-home-link:focus-visible {
  border-color: var(--corona-2); color: var(--ink); background: rgba(var(--corona-rgb), 0.08);
}
/* decorative sky strip, inserted by theme.js beneath the wordmark: a few stars in the
   three data colours, static, so the rail names the palette the sky will use */
.sky-strip {
  height: 44px; margin: 0 6px 14px; border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(2.2px 2.2px at 18% 42%, var(--lap-1) 55%, transparent 60%),
    radial-gradient(9px 9px at 18% 42%, rgba(var(--lap-1-rgb), 0.35), transparent 70%),
    radial-gradient(1.6px 1.6px at 34% 70%, var(--corona) 55%, transparent 60%),
    radial-gradient(1.4px 1.4px at 46% 28%, var(--corona-2) 55%, transparent 60%),
    radial-gradient(2px 2px at 62% 58%, var(--str) 55%, transparent 60%),
    radial-gradient(8px 8px at 62% 58%, rgba(var(--str-rgb), 0.35), transparent 70%),
    radial-gradient(1.8px 1.8px at 80% 36%, var(--non) 55%, transparent 60%),
    radial-gradient(7px 7px at 80% 36%, rgba(var(--non-rgb), 0.35), transparent 70%),
    radial-gradient(1.2px 1.2px at 90% 72%, var(--ink-3) 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 8% 76%, var(--ink-3) 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 70% 18%, var(--ink-3) 55%, transparent 60%),
    radial-gradient(110% 130% at 30% 0%, var(--sky-2) 0%, var(--sky-0) 70%);
}

.nav-item {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; text-align: left;
  background: none; border: 0; color: var(--ink-2);
  font: 500 13px/1.4 var(--sans);
  padding: 8px 10px; border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.nav-group-label {
  display: block; margin: 12px 10px 4px; color: var(--ink-3);
  font: 600 9.5px/1.35 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.wordmark + .nav-group-label { margin-top: 2px; }
.nav-item:hover { background: rgba(var(--corona-rgb), 0.08); color: var(--ink); }
.nav-item.is-active { background: rgba(var(--corona-rgb), 0.14); color: var(--ink); box-shadow: inset 2px 0 0 var(--corona-2); }
.nav-item kbd {
  font: 10.5px/1.5 var(--mono); color: var(--ink-3);
  border: 1px solid var(--hairline); border-radius: 4px; padding: 0 5px;
}
.proposal-guide-entry {
  display: flex; align-items: center; justify-content: space-between;
  width: calc(100% - 12px); margin: 10px 6px 0; padding: 9px 10px;
  border: 1px solid rgba(var(--corona-rgb), 0.38); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(var(--corona-rgb), 0.16), rgba(var(--btn-rgb), 0.08));
  color: var(--ink); font: 600 13px/1.4 var(--sans); cursor: pointer;
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out, background var(--t-fast) ease-out;
}
.proposal-guide-entry:hover, .proposal-guide-entry[aria-pressed="true"] {
  border-color: var(--corona-2); background: rgba(var(--corona-rgb), 0.18);
  box-shadow: 0 0 20px var(--corona-glow);
}
.proposal-guide-entry kbd { color: var(--ink-3); font: 10.5px/1.5 var(--mono); }
.rail-scope {
  margin-top: auto; padding: 12px 6px; border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 6px;
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.rail-scope select, .rail-scope input[type="number"] { width: 100%; min-width: 0; }
.rail-scope .check {
  display: flex; gap: 8px; align-items: center; color: var(--ink-2); margin-top: 4px;
  font: 12px/1.4 var(--sans); text-transform: none; letter-spacing: 0;
}
#scope-custom { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
#scope-custom[hidden] { display: none; }
.scope-field { display: flex; flex-direction: column; gap: 4px; }
.scope-field[hidden] { display: none; }
.scope-note { font: 11.5px/1.4 var(--sans); color: var(--ink-3); text-transform: none; letter-spacing: 0; }

/* The appearance menu. It is the last thing in the rail's navigation group and
   takes the group's spare vertical space, which pushes it down until it rests on
   the hairline rule that opens the Push to PhD block. Everything below that rule
   is about the data (which cells are in scope, where they came from, when they
   were last read); everything above it is about the interface itself, and the
   theme belongs on the interface side of that line. */
.rail-theme {
  margin-top: auto; padding: 12px 6px 14px;
  display: flex; flex-direction: column; gap: 6px;
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
}
.rail-theme select { width: 100%; min-width: 0; }
.rail-theme .theme-note {
  font: 11.5px/1.4 var(--sans); color: var(--ink-3);
  text-transform: none; letter-spacing: 0; text-wrap: pretty;
}

.rail-foot { padding: 10px 6px 0; border-top: 1px solid var(--hairline); }
.provenance { font: 11px/1.45 var(--mono); color: var(--ink-3); margin-bottom: 8px; overflow-wrap: anywhere; }

/* ---------------- stage ---------------- */
.stage { flex: 1; min-width: 0; padding: 26px 30px 60px; }
.proposal-guide {
  position: sticky; top: 14px; z-index: calc(var(--z-sticky) + 1);
  max-width: 1280px; margin: 0 auto 18px; padding: 12px 14px;
  display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: 8px 22px;
  border: 1px solid rgba(var(--corona-rgb), 0.42); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 16px 42px rgba(var(--shadow-rgb), 0.28), 0 0 26px var(--corona-glow);
  backdrop-filter: blur(16px);
}
.proposal-guide[hidden] { display: none; }
.proposal-guide-progress { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 999px; background: var(--well); }
.proposal-guide-progress span { display: block; height: 100%; background: var(--corona-2); transition: width 180ms ease-out; }
.proposal-guide-copy { display: flex; flex-direction: column; min-width: 0; }
.proposal-guide-copy strong { color: var(--ink); font: 500 22px/1.2 var(--serif); text-wrap: balance; }
.proposal-guide-source { color: var(--ink-3); font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; margin: 2px 0 3px; }
.proposal-guide-source:hover, .proposal-guide-source:focus-visible {
  color: var(--ink); cursor: pointer; border-bottom: 1px dashed var(--corona-2);
}
.proposal-guide-source[aria-label] { cursor: pointer; }
.proposal-guide-copy p { max-width: 78ch; margin: 0 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.proposal-guide-kicker { color: var(--corona-2); font: 600 10px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.proposal-guide-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

body.proposal-guide-mode { font-size: 17px; }
body.proposal-guide-mode .rail { width: 178px; padding-inline: 10px; }
body.proposal-guide-mode .wordmark-text { font-size: 15px; }
body.proposal-guide-mode .sky-strip,
body.proposal-guide-mode .rail-theme,
body.proposal-guide-mode .rail-publish,
body.proposal-guide-mode .rail-foot { display: none !important; }
body.proposal-guide-mode .rail-scope { margin-top: auto; }
body.proposal-guide-mode .nav-item { min-height: 38px; font-size: 14px; }
body.proposal-guide-mode .nav-group-label { font-size: 10px; }
body.proposal-guide-mode .stage { padding: 14px 22px 48px; }
body.proposal-guide-mode .view { max-width: 1560px; }
body.proposal-guide-mode .view-head h1 { font-size: clamp(34px, 4vw, 54px); }
body.proposal-guide-mode .view-sub { max-width: 88ch; color: var(--ink-2); font-size: 18px; line-height: 1.55; }
body.proposal-guide-mode .panel { padding: 20px 22px; }
body.proposal-guide-mode .panel-note,
body.proposal-guide-mode .panel-foot { font-size: 15px; }
body.proposal-guide-mode .stat b { font-size: 31px; }
body.proposal-guide-mode .chart.tall { height: min(64vh, 720px); min-height: 480px; }
body.proposal-guide-mode .data-table { font-size: 15px; }
body.proposal-guide-mode .data-table th,
body.proposal-guide-mode .data-table td { padding-block: 10px; }

@media (max-width: 1020px) {
  .proposal-guide { top: 8px; }
  body.proposal-guide-mode .rail { width: 154px; }
  body.proposal-guide-mode .nav-item { font-size: 12.5px; padding-inline: 8px; }
}
@media (max-width: 720px) {
  .proposal-guide { grid-template-columns: 1fr; }
  .proposal-guide-actions { flex-wrap: wrap; }
  body.proposal-guide-mode .rail { display: none; }
  body.proposal-guide-mode .stage { padding: 10px 12px 40px; }
  body.proposal-guide-mode .view-head h1 { font-size: 34px; }
  body.proposal-guide-mode .view-sub { font-size: 16px; }
}
.view { display: none; max-width: 1280px; margin: 0 auto; }
.view.is-active { display: block; animation: settle 220ms ease-out; }
@keyframes settle { from { opacity: 0; transform: translateY(4px); } }

.view-head { margin-bottom: 18px; }
.view-head h1 {
  font: 400 28px/1.1 var(--serif); letter-spacing: -0.018em;
  font-variation-settings: "opsz" 48;
  margin: 0 0 6px; text-wrap: balance; color: var(--ink);
}
.view-sub { margin: 0; color: var(--ink-2); max-width: 72ch; text-wrap: pretty; }
.view-sub code { font-size: 12.5px; color: var(--corona-2); }

/* ---------------- stat strip ---------------- */
.stat-strip {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--panel); margin-bottom: 18px;
}
.stat {
  flex: 1 1 130px; padding: 14px 18px;
  border-right: 1px solid var(--hairline);
}
.stat:last-child { border-right: 0; }
.stat b {
  display: block; font: 500 24px/1.1 var(--mono); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--ink);
  text-shadow: 0 0 14px rgba(var(--hair-rgb), 0.35);
}
.stat span {
  display: block; margin-top: 4px;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------------- panels ---------------- */
.panel {
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 18px;
}
.panel-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.panel-head h2 {
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--corona-2); margin: 0;
}
.panel-note { font: 12px/1.45 var(--sans); color: var(--ink-3); }
.panel-foot { font: 12px/1.45 var(--sans); color: var(--ink-3); margin: 8px 0 0; }
.research-state {
  margin: 0 0 24px; padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(var(--corona-rgb), 0.38); border-radius: 16px;
  background: linear-gradient(145deg, rgba(var(--corona-rgb), 0.1), transparent 48%), var(--panel);
  box-shadow: 0 18px 46px rgba(var(--shadow-rgb), 0.24);
}
.research-state-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.research-state-head h2 { margin: 3px 0 0; color: var(--ink); font: 500 clamp(25px, 3vw, 38px)/1.1 var(--serif); }
.research-state-kicker { color: var(--corona-2); font: 600 10px/1.4 var(--mono); letter-spacing: 0.11em; text-transform: uppercase; }
.research-state-time { color: var(--ink-3); font: 11px/1.4 var(--mono); text-align: right; }
.research-state-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0; border-block: 1px solid var(--hairline); }
.research-state-facts div { padding: 14px 14px 14px 0; }
.research-state-facts strong { display: block; color: var(--ink); font: 500 20px/1.15 var(--mono); overflow-wrap: anywhere; }
.research-state-facts span { display: block; margin-top: 4px; color: var(--ink-3); font: 11px/1.4 var(--sans); }
.research-claims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.research-claim { padding: 14px 15px; border: 1px solid var(--hairline); border-left: 3px solid var(--corona-2); border-radius: 8px; background: var(--panel-glass); }
.research-claim.is-blocked { border-left-color: var(--bad); }
.research-claim.is-not_tested { border-left-color: var(--skip); }
.research-claim-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.research-claim-line span { color: var(--ink-2); font: 600 10px/1.35 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; text-align: right; }
.research-claim p { margin: 9px 0 5px; color: var(--ink); font: 14px/1.5 var(--sans); }
.research-claim small { color: var(--ink-3); font: 12px/1.45 var(--sans); }
.research-state-warning { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(var(--warn-rgb), 0.35); border-radius: 8px; color: var(--ink-2); font-size: 13px; }
.research-state-warning strong { color: var(--ink); }
.research-state-warning ul { margin: 7px 0 0; padding-left: 20px; }
@media (max-width: 760px) {
  .research-state-head { display: block; }
  .research-state-time { display: block; margin-top: 9px; text-align: left; }
  .research-state-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-claims { grid-template-columns: 1fr; }
}
.split { display: flex; gap: 18px; align-items: flex-start; }
.split .grow { flex: 1 1 auto; min-width: 0; }
.split .side { flex: 0 0 340px; }
@media (max-width: 1020px) { .split { flex-wrap: wrap; } .split .side { flex: 1 1 100%; } }

.chart { width: 100%; }
.chart.tall { height: 480px; }
.chart.short { height: 180px; }
/* Charts whose height is decided by how many rows they have: the activity
   ranking, one cell's waterfall, the per-run-set trend. Pinning these to a
   fixed 480px did not shrink the drawing, it let the drawing spill past the
   bottom of its own box and paint over the table and the notes beneath it,
   by 50px on the ranking and 138px on the waterfall. The box now follows the
   plot Plotly actually drew. */
.chart.grows { height: auto; min-height: 320px; }

/* ---------------- controls ---------------- */
.control-row {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end;
  margin-bottom: 14px;
}
.control-row label {
  display: flex; flex-direction: column; gap: 5px;
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.control-row label.check {
  flex-direction: row; align-items: center; gap: 8px; color: var(--ink-2); padding-bottom: 8px;
  font: 13px/1.4 var(--sans); text-transform: none; letter-spacing: 0;
}
.control-row > .panel-note { padding-bottom: 8px; }

/* selects and inputs: mono text on a darker well, drawn chevron, blue focus ring */
select, input[type="number"], input[type="text"], input:not([type]) {
  background: var(--well); color: var(--ink);
  border: 1px solid var(--hairline-2); border-radius: var(--radius);
  font: 13px/1.4 var(--mono); padding: 7px 10px; min-width: 110px;
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--corona-2) 50%),
    linear-gradient(135deg, var(--corona-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select option { background: var(--panel); color: var(--ink); }
input[type="number"] { min-width: 72px; width: 84px; font-variant-numeric: tabular-nums; }
input::placeholder { color: var(--ink-3); opacity: 1; }
select:hover, input[type="number"]:hover, input[type="text"]:hover, input:not([type]):hover { border-color: var(--corona-2); }
select:focus-visible, input[type="number"]:focus-visible, input[type="text"]:focus-visible, input:not([type]):focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--corona-2);
  box-shadow: 0 0 0 3px var(--corona-glow), 0 0 18px var(--corona-glow);
}
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* checkboxes: a 36 by 20 switch whose bead lights when checked; still a real, focusable input */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 36px; height: 20px; margin: 0; flex: 0 0 auto;
  border-radius: 999px; border: 1px solid var(--hairline-2); background: rgba(var(--well-rgb), 0.6);
  position: relative; vertical-align: middle; cursor: pointer;
  transition: background var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}
input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ink-3);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
input[type="checkbox"]:checked { background: rgba(var(--btn-rgb), 0.35); border-color: var(--corona); }
input[type="checkbox"]:checked::before { transform: translateX(16px); background: var(--corona-2); box-shadow: 0 0 10px var(--corona-glow-2); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--corona-2); outline-offset: 2px; box-shadow: none; }
input[type="checkbox"]:disabled { opacity: 0.4; cursor: default; }

/* buttons: pills with a blue corona on hover; the primary sits on the top-rung blue */
.accent-btn, .ghost-btn {
  font: 600 13px/1 var(--sans); cursor: pointer;
  border-radius: 999px; padding: 9px 16px;
  position: relative;
  transition: box-shadow 180ms var(--ease), border-color 180ms ease-out, background 180ms ease-out, color 180ms ease-out, transform 120ms ease-out;
}
.accent-btn:active:not(:disabled), .ghost-btn:active:not(:disabled) { transform: translateY(1px); }
.accent-btn { background: var(--btn); color: var(--accent-ink); border: 1px solid var(--btn); box-shadow: 0 0 22px rgba(var(--btn-rgb), 0.45); }
.accent-btn:hover:not(:disabled) { background: var(--corona); border-color: var(--corona); box-shadow: 0 0 30px var(--corona-glow-2); }
.accent-btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.ghost-btn { background: var(--panel-glass); color: var(--corona-2); border: 1px solid var(--hairline-2); }
.ghost-btn:hover:not(:disabled) { border-color: var(--corona-2); color: var(--ink); box-shadow: 0 0 18px var(--corona-glow); }
.ghost-btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.btn-row { display: flex; gap: 8px; margin-top: 10px; }

.metric-help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 24px; padding: 0;
  border: 1px solid var(--hairline-2); border-radius: 50%;
  background: var(--panel-glass); color: var(--corona-2);
  font: 600 13px/1 var(--sans); cursor: pointer;
  transition: border-color var(--t-fast) ease-out, color var(--t-fast) ease-out,
    box-shadow var(--t-fast) ease-out;
}
.metric-help-btn:hover {
  border-color: var(--corona-2); color: var(--ink);
  box-shadow: 0 0 18px var(--corona-glow);
}
.control-row > .metric-help-btn { margin-bottom: 4px; }

.metric-glossary-dialog {
  width: min(760px, calc(100vw - 32px)); height: min(820px, calc(100vh - 48px));
  max-width: none; max-height: none; padding: 0;
  border: 1px solid var(--hairline-2); border-radius: var(--radius-lg);
  background: var(--panel); color: var(--ink);
  box-shadow: 0 24px 80px rgba(var(--shadow-rgb), 0.72), 0 0 42px var(--corona-glow);
}
.metric-glossary-dialog[open] { display: flex; flex-direction: column; }
.metric-glossary-dialog::backdrop { background: rgba(var(--well-rgb), 0.76); backdrop-filter: blur(3px); }
.metric-glossary-head {
  display: flex; align-items: flex-start; gap: 20px; padding: 20px 22px 14px;
  border-bottom: 1px solid var(--hairline); background: var(--panel);
}
.metric-glossary-head > div { flex: 1 1 auto; min-width: 0; }
.metric-glossary-head h2 { margin: 0; font: 500 24px/1.2 var(--serif); }
.metric-glossary-head p { margin: 5px 0 0; color: var(--ink-3); font: 13px/1.5 var(--sans); }
.metric-glossary-close {
  border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  font: 300 27px/1 var(--sans); padding: 0 2px;
}
.metric-glossary-close:hover { color: var(--ink); }
.metric-glossary-search {
  display: grid; grid-template-columns: 1fr auto; gap: 5px 14px;
  padding: 14px 22px; border-bottom: 1px solid var(--hairline);
}
.metric-glossary-search label {
  grid-column: 1; color: var(--ink-3); font: 500 10.5px/1.4 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.metric-glossary-search input {
  grid-column: 1; width: 100%; min-width: 0; padding: 7px 10px;
  border: 1px solid var(--hairline-2); border-radius: var(--radius);
  background: var(--well); color: var(--ink); font: 13px/1.4 var(--mono);
}
.metric-glossary-search input:hover { border-color: var(--corona-2); }
.metric-glossary-search input:focus-visible {
  outline: none; border-color: var(--corona-2);
  box-shadow: 0 0 0 3px var(--corona-glow), 0 0 18px var(--corona-glow);
}
.metric-glossary-search span {
  grid-column: 2; grid-row: 2; align-self: center;
  color: var(--ink-3); font: 12px/1.4 var(--mono);
}
.metric-glossary-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 22px 18px; scrollbar-gutter: stable;
}
.metric-glossary-entry { padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.metric-glossary-entry:last-child { border-bottom: 0; }
.metric-glossary-name { display: flex; align-items: center; gap: 9px; }
.metric-glossary-name h3 { margin: 0; font: 600 15px/1.3 var(--sans); }
.metric-glossary-name span {
  border: 1px solid var(--hairline-2); border-radius: 999px; padding: 2px 7px;
  color: var(--corona-2); font: 10.5px/1.3 var(--mono); text-transform: uppercase;
  letter-spacing: 0.05em;
}
.metric-glossary-entry code { display: block; margin-top: 4px; color: var(--ink-3); font-size: 11px; }
.metric-glossary-entry p { margin: 8px 0 0; max-width: 76ch; font: 13px/1.55 var(--sans); color: var(--ink-2); }
.metric-glossary-entry .metric-glossary-detail { margin-top: 4px; color: var(--ink-3); }
.metric-glossary-entry small { display: block; margin-top: 7px; color: var(--ink-3); font: 10.5px/1.4 var(--mono); }
.metric-glossary-empty { color: var(--ink-3); font: 13px/1.5 var(--sans); }
.metric-glossary-foot {
  display: flex; justify-content: flex-end; padding: 12px 22px;
  border-top: 1px solid var(--hairline); background: var(--panel);
}
@media (max-width: 600px) {
  .metric-glossary-dialog { width: calc(100vw - 16px); height: calc(100vh - 16px); }
  .metric-glossary-head, .metric-glossary-search,
  .metric-glossary-list, .metric-glossary-foot { padding-left: 14px; padding-right: 14px; }
}

/* two-step confirmation: first press arms, second within 4 s fires.
   Armed is amber (never orange, which is a data colour) with an underline that
   decays over the same 4 s the app.js timer runs. */
.danger-armable.is-armed, .danger-armable.is-armed:hover:not(:disabled) {
  background: rgba(var(--warn-solid-rgb), 0.12); border-color: var(--warn); color: var(--warn);
  box-shadow: 0 0 18px rgba(var(--warn-solid-rgb), 0.35);
}
.danger-armable.is-armed::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  border-radius: 1px; background: var(--warn); transform-origin: left;
  animation: decay 4s linear forwards;
}
@keyframes decay { to { transform: scaleX(0); } }

/* filter chips: hairline pills; on is blue; the two non-ladder builds take their
   data colour so the chip row doubles as the legend */
.filter-group {
  display: flex; flex-direction: column; gap: 5px;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; max-width: 720px; }
.chip {
  font: 12px/1.4 var(--mono); letter-spacing: 0; text-transform: none; cursor: pointer;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--hairline-2); border-radius: 999px; padding: 3px 11px;
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out, border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
.chip:hover { border-color: var(--corona-2); color: var(--ink); }
.chip.is-on { background: var(--btn); border-color: var(--btn); color: var(--accent-ink); box-shadow: 0 0 14px rgba(var(--btn-rgb), 0.45); }
.chip.is-on[data-v="H-STR"] { background: var(--str); border-color: var(--str); box-shadow: 0 0 14px rgba(var(--str-rgb), 0.45); }
.chip.is-on[data-v="H-NON"] { background: var(--non); border-color: var(--non); box-shadow: 0 0 14px rgba(var(--non-rgb), 0.45); }

/* ---------------- tables ---------------- */
.table-wrap { max-width: 100%; overflow-x: auto; overflow-y: visible; }
.data-table { border-collapse: collapse; width: 100%; font: 12.5px/1.45 var(--mono); }
.data-table th {
  text-align: left; font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 14px 8px 0; border-bottom: 1px solid var(--hairline-2);
  white-space: nowrap;
}
.data-table td {
  padding: 8px 14px 8px 0; border-bottom: 1px solid var(--hairline); white-space: nowrap;
  color: var(--ink-2);
  transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.data-table td:first-child { color: var(--ink); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: linear-gradient(90deg, rgba(var(--corona-rgb), 0.14), transparent); color: var(--ink); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td select, .data-table td input[type="number"], .data-table td input:not([type]) { padding: 4px 8px; font-size: 12px; }
.data-table td select { padding-right: 26px; }
.data-table .del-btn {
  background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 15px; padding: 0 6px;
  transition: color var(--t-fast) ease-out;
}
.data-table .del-btn:hover { color: var(--bad); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 6px currentColor; }
.tag { font: 500 11px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.tag.pass { color: var(--good); background: var(--good-dim); }
.tag.fail { color: var(--bad); background: var(--bad-dim); }
.tag.na { color: var(--ink-3); background: rgba(var(--hair-rgb), 0.08); }
.tag.warn { color: var(--warn); background: var(--warn-dim); }
.tag.done { color: var(--ink-2); background: rgba(var(--hair-rgb), 0.10); }
.tag.live { color: var(--corona-2); background: rgba(var(--corona-rgb), 0.22); }
.tag.skipped { color: var(--skip); background: rgba(var(--skip-solid-rgb), 0.16); }
/* The live tag carries the same pulse as the star for the same cell in the
   strip above it, so the eye reads one event in two places, not two events. */
.tag.live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--corona-2); box-shadow: 0 0 6px var(--corona-glow-2);
  margin-right: 7px; vertical-align: 0;
  animation: live-pip 1.6s ease-in-out infinite;
}
@keyframes live-pip { 50% { opacity: 0.35; transform: scale(0.7); } }
/* A flat tint, not the hover gradient: a gradient set on each cell restarts
   in every column and the row reads as three stripes rather than one row. */
.data-table tbody tr.is-active td { background: rgba(var(--corona-rgb), 0.15); color: var(--ink); }
/* The estimated total beside a running cell's elapsed time. Dimmer than the
   measured half of the pair, because one of the two numbers is a fact and the
   other is a guess and they must not read alike. */
.data-table .est { color: var(--ink-3); }
.data-table .quiet { color: var(--ink-3); }

/* The Live progress table stays readable at the smallest useful width. The
   table head supplies the saved proportions, and the wrapper supplies the
   horizontal scroll on a narrow screen. */
#live-cell-table { table-layout: fixed; width: 100%; min-width: 1260px; }
#live-cell-table th, #live-cell-table td { overflow: hidden; text-overflow: ellipsis; }
#live-cell-table th { position: relative; }
#live-cell-table th.has-column-resizer { padding-right: 21px; }
#live-cell-table .live-column-resizer {
  appearance: none; position: absolute; z-index: 1; top: 0; right: -1px;
  width: 11px; height: 100%; padding: 0; border: 0; border-left: 1px solid var(--hairline-2);
  background: transparent; cursor: col-resize; touch-action: none;
}
#live-cell-table .live-column-resizer::after {
  content: ""; position: absolute; top: 7px; bottom: 7px; left: 5px;
  border-left: 2px dotted var(--ink-3); opacity: 0.55;
}
#live-cell-table .live-column-resizer:hover,
#live-cell-table .live-column-resizer:focus-visible { background: rgba(var(--corona-rgb), 0.18); }
#live-cell-table .live-column-resizer:hover::after,
#live-cell-table .live-column-resizer:focus-visible::after { border-left-color: var(--corona-2); opacity: 1; }
body.is-resizing-live-columns, body.is-resizing-live-columns * {
  cursor: col-resize !important; user-select: none !important;
}
#live-cell-table .tag { white-space: nowrap; }
#live-cell-table td.task-cell, #live-cell-table td.state-cell { white-space: normal; }
#live-cell-table td.model-cell { white-space: normal; overflow-wrap: anywhere; }
#live-cell-table td.outcome-cell { overflow: visible; }
#live-progress-panel > .table-wrap { padding-bottom: 4px; scrollbar-gutter: stable; }
#live-cell-table .chain-step,
#live-cell-table .state-reason { display: block; }
#live-cell-table .chain-step {
  color: var(--corona-2); font: 500 10px/1.3 var(--mono);
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 3px;
}
#live-cell-table .state-reason {
  color: var(--ink-2); font: 11px/1.45 var(--sans); margin-top: 7px;
}
/* Each ordered sequence, and each cell that stands on its own, is drawn as a
   closed rectangle rather than as rows under a heading. A heading alone only
   says where a group begins; it never says where one ends, so a lone cell that
   happened to follow a sequence sat flush against that sequence's last step
   and read as one more step of it. The sequence box carries the accent edge
   and a tinted ground, because it is a container holding several things in a
   fixed order. The single-cell box is drawn in the plain hairline, so it reads
   as one item rather than as a sequence of one. */
#live-cell-table.has-sequences tbody.group > tr > td:first-child {
  border-left: 1px solid var(--group-edge); padding-left: 12px;
}
#live-cell-table.has-sequences tbody.group > tr > td:last-child {
  border-right: 1px solid var(--group-edge); padding-right: 12px;
}
#live-cell-table.has-sequences tbody.group > tr:first-child > td {
  border-top: 1px solid var(--group-edge);
}
#live-cell-table.has-sequences tbody.group > tr:last-child > td {
  border-bottom: 1px solid var(--group-edge);
}
/* The two kinds of box are told apart by their ground, not by the weight of
   their edge, so that both read equally as closed rectangles. A sequence is a
   container holding several steps in a fixed order, so it is filled. A cell
   that stands on its own is one row and nothing more, so it is left on the
   page's own ground. */
#live-cell-table.has-sequences tbody.chain-body {
  --group-edge: rgba(var(--hair-rgb), 0.34);
}
#live-cell-table.has-sequences tbody.chain-body > tr > td { background: rgba(var(--corona-rgb), 0.05); }
/* The steps are indented under the heading that governs them. The box and the
   gap say where a group ends; the indent says which rows are inside it, which
   is the part a reader takes in without having to trace an edge. A cell that
   stands on its own keeps the outer margin, so it sits plainly outside every
   sequence rather than looking like the last step of the one above it. */
#live-cell-table.has-sequences tbody.chain-body > tr:not(.chain-heading) > td:first-child {
  padding-left: 28px;
}
#live-cell-table.has-sequences tbody.solo {
  --group-edge: var(--hairline-2);
}
/* The spacer holds the two boxes apart. It carries no border of its own, so
   neither box can borrow an edge from its neighbour. */
#live-cell-table.has-sequences tbody.group-gap td {
  height: 9px; padding: 0; border: 0; background: none;
}
#live-cell-table tr.chain-heading td {
  width: auto; overflow: visible; white-space: normal; padding: 12px 14px;
  background: rgba(var(--corona-rgb), 0.10);
  border-bottom-color: rgba(var(--hair-rgb), 0.22);
}
#live-cell-table .chain-title {
  color: var(--ink-2); font: 500 12px/1.4 var(--mono); letter-spacing: 0.02em;
}
#live-cell-table .chain-title b { color: var(--ink); font-weight: 600; }
#live-cell-table .chain-explanation {
  color: var(--ink-2); font: 12px/1.5 var(--sans); margin-top: 3px;
}
#live-cell-table .chain-stop {
  color: var(--attn); font: 12px/1.5 var(--sans); margin: 7px 0 0;
}
#live-cell-table .chain-stop b { color: var(--bad); font-weight: 600; }
/* the activity is prose, not a reading, so it is set in the body face */
#live-cell-table td.doing {
  font: 12px/1.45 var(--sans); color: var(--ink-2); white-space: nowrap;
}
#live-cell-table tr.is-active td.doing { color: var(--ink); }
.live-table-help {
  margin: 8px 0 0; color: var(--ink-3); font: 11px/1.45 var(--sans);
}
.data-table .est.is-over { color: var(--warn); }
.data-table tbody tr.is-active:hover td { background: rgba(var(--corona-rgb), 0.24); }

.code-block {
  background: rgba(var(--well-rgb), 0.7); color: var(--ink-2);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  font: 12px/1.5 var(--mono); padding: 12px; margin: 0;
  max-height: 420px; overflow: auto; white-space: pre;
}

/* ---------------- live view ---------------- */
.live-banner {
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 14px;
}
.live-state { display: flex; align-items: center; gap: 10px; font: 500 13px/1.4 var(--mono); letter-spacing: 0.02em; }
.live-state b { font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.live-banner.is-running .pulse { background: var(--good); box-shadow: 0 0 10px var(--good); animation: pulse 1.6s ease-out infinite; }
.live-banner.is-running .live-state b { color: var(--good); text-shadow: 0 0 10px rgba(var(--good-rgb), 0.6); }
.live-banner.is-stopped .pulse { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.live-banner.is-stopped .live-state b { color: var(--warn); }
@keyframes pulse { 0% { box-shadow: 0 0 10px var(--good), 0 0 0 0 rgba(var(--good-rgb), 0.5); } 100% { box-shadow: 0 0 10px var(--good), 0 0 0 9px rgba(var(--good-rgb), 0); } }
.live-meta { color: var(--ink-2); font: 12.5px/1.5 var(--mono); }
.live-controller { margin-left: auto; font: 12px/1.5 var(--mono); color: var(--ink-3); text-align: right; }
.live-controller b { color: var(--ink-2); font-weight: 500; }
.live-launch-alert {
  border: 1px solid rgba(var(--attn-edge-rgb), 0.38); border-radius: var(--radius);
  background: rgba(var(--attn-edge-rgb), 0.07); margin: -4px 0 14px;
  color: var(--ink-2); font: 12.5px/1.5 var(--sans);
}
.live-launch-alert summary {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  cursor: pointer; color: var(--ink-2); list-style-position: inside;
}
.live-launch-alert summary::marker { color: var(--bad); }
.live-launch-alert-body {
  border-top: 1px solid rgba(var(--attn-edge-rgb), 0.24); padding: 10px 12px 11px 38px;
}
.live-launch-alert-body p { margin: 0; }
.live-launch-alert-body p + p { margin-top: 5px; }
.live-launch-refusal, .live-launch-unit {
  color: var(--ink-3); font: 11px/1.5 var(--mono); overflow-wrap: anywhere;
}

.live-closeout {
  border: 1px solid rgba(var(--corona-rgb), 0.22); border-radius: var(--radius);
  background: rgba(var(--corona-rgb), 0.06); margin: 2px 0 14px; padding: 11px 14px;
  color: var(--ink-2); font: 12.5px/1.5 var(--sans);
}
.live-closeout p { margin: 0; }
.live-closeout p + p { margin-top: 4px; }
.live-closeout .closeout-verdict {
  color: var(--ink); font: 600 13px/1.45 var(--sans);
}
.live-closeout .closeout-when {
  color: var(--ink-3); font: 11px/1.4 var(--mono); letter-spacing: 0.02em;
}

/* The ordered cards show the work that begins after the programming attempts.
   Their shared line makes the execution order visible, while each numbered
   marker changes colour as the five-second page refresh reads a new state. */
.closeout-tracker {
  border-top: 1px solid var(--hairline); margin-top: 18px; padding-top: 16px;
}
.closeout-tracker-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.closeout-tracker-head h3 {
  margin: 0; color: var(--ink); font: 600 14px/1.35 var(--sans);
}
.closeout-stage-list { display: grid; gap: 8px; }
.closeout-record-absent {
  margin: 0; padding: 12px 14px; border: 1px solid var(--hairline);
  border-radius: var(--radius); color: var(--ink-2); font: 12.5px/1.55 var(--sans);
  background: rgba(var(--hair-rgb), 0.04);
}
.closeout-stage {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px; padding: 11px 13px; border: 1px solid var(--hairline);
  border-radius: var(--radius); background: rgba(var(--hair-rgb), 0.035);
}
.closeout-stage-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1px solid var(--hairline-2);
  border-radius: 50%; color: var(--ink-3); background: var(--panel);
  font: 600 10px/1 var(--mono);
}
.closeout-stage.is-running { border-color: rgba(var(--corona-rgb), 0.42); background: rgba(var(--corona-rgb), 0.08); }
.closeout-stage.is-running .closeout-stage-number { color: var(--corona-2); border-color: var(--corona-2); box-shadow: 0 0 10px var(--corona-glow-2); }
.closeout-stage.is-done .closeout-stage-number { color: var(--good); border-color: rgba(var(--good-rgb), 0.5); }
.closeout-stage.is-failed { border-color: rgba(var(--bad-rgb), 0.5); background: rgba(var(--bad-rgb), 0.08); }
.closeout-stage.is-failed .closeout-stage-number { color: var(--bad); border-color: var(--bad); }
.closeout-stage.is-skipped .closeout-stage-number { color: var(--skip); border-color: rgba(var(--skip-rgb), 0.5); }
.closeout-stage-head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.closeout-stage-head h4 {
  flex: 1 1 360px; margin: 0; color: var(--ink); font: 600 12.5px/1.45 var(--sans);
}
.closeout-stage-body > p {
  margin: 5px 0 0; color: var(--ink-2); font: 12px/1.5 var(--sans);
}
.closeout-stage-duration {
  color: var(--ink-3); font: 11px/1.4 var(--mono); white-space: nowrap;
}
.closeout-stage-message span { color: var(--ink); font-weight: 600; }
.closeout-stage-body .closeout-stage-failure { color: var(--bad); }
.closeout-stage-failure span { color: var(--bad); font-weight: 600; }
.closeout-stage-body .closeout-stage-risk { color: var(--ink-2); }

.live-current-panel {
  margin: 18px 0 0; padding: 16px;
  background: rgba(var(--hair-rgb), 0.035); border-radius: var(--radius);
}
.current-cell-list, .tl-lane-grid { display: grid; gap: 12px; }
.current-cell-card, .tl-lane-card {
  min-width: 0; padding: 12px; border: 1px solid rgba(var(--corona-rgb), 0.3);
  border-radius: var(--radius); background: rgba(var(--well-rgb), 0.18);
}
.current-cell-identity, .tl-lane-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px;
}
.current-cell-identity b, .tl-lane-head b { color: var(--ink); font: 600 14px/1.4 var(--sans); }
.current-cell-identity span, .tl-lane-head span { color: var(--corona-2); font: 11px/1.4 var(--mono); }
.tl-lane-card .tl-readouts { margin-top: 10px; }
.tl-lane-trends { display: grid; gap: 6px; margin-top: 10px; }
.tl-mini-trend {
  display: grid; grid-template-columns: minmax(100px, 1fr) auto;
  align-items: center; gap: 1px 10px; min-height: 48px;
}
.tl-mini-trend canvas { grid-row: 1 / 3; width: 100%; height: 44px; }
.tl-mini-trend span { color: var(--ink-3); font: 9.5px/1.3 var(--mono); text-transform: uppercase; }
.tl-mini-trend b { color: var(--ink); font: 600 12px/1.3 var(--mono); text-align: right; }
.tl-rate-note { margin: 8px 0 0; color: var(--ink-3); font: 10.5px/1.45 var(--sans); }

/* the cell strip: each planned cell is a small star. pass lit green, fail dim red,
   running twinkles, pending faint, resumable amber. The number inside is hidden;
   the title attribute still names the cell on hover. */
.cell-strip { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 14px; align-items: center; }
.chain-strip-group {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 9px;
  border: 1px solid rgba(var(--corona-rgb), 0.24); border-radius: var(--radius);
  background: rgba(var(--corona-rgb), 0.06);
}
.chain-strip-label {
  color: var(--ink-2); font: 10px/1.25 var(--mono); letter-spacing: 0.02em;
}
.chain-strip-cells { display: inline-flex; align-items: center; gap: 4px; }
.chain-arrow { color: var(--corona-2); font: 15px/1 var(--sans); opacity: 0.75; }
.cell-chip {
  position: relative; width: 16px; height: 16px; display: inline-block;
  font-size: 0; color: transparent; background: none; border: 0; border-radius: 0;
}
.cell-chip::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: rgba(var(--hair-rgb), 0.18);
}
.cell-chip.pass::before { background: var(--good); }
.cell-chip.pass { filter: drop-shadow(0 0 4px var(--good)); }
.cell-chip.fail::before { background: var(--bad); opacity: 0.8; }
.cell-chip.running::before { background: var(--corona-2); }
.cell-chip.running { filter: drop-shadow(0 0 6px var(--corona-glow-2)); animation: twinkle 1.6s ease-in-out infinite; }
.cell-chip.resumable::before { background: var(--warn); }
.cell-chip.resumable { filter: drop-shadow(0 0 4px rgba(var(--warn-rgb), 0.7)); }
.cell-chip.skipped::before { background: var(--skip-solid); opacity: 0.42; }
.cell-chip.skipped::after {
  content: ""; position: absolute; width: 15px; height: 1px; left: 1px; top: 7px;
  background: var(--skip-2); transform: rotate(-45deg); transform-origin: center;
}
@keyframes twinkle { 50% { opacity: 0.55; transform: scale(0.85); } }

/* ---------------- explanation panels ---------------- */
/* Prose written for a reader who has never seen the campaign, placed beside
   the thing it explains rather than in a document they would have to find. */
.explainer { margin-bottom: 18px; }
.axis-readings { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px 26px; }
.axis-reading h3 {
  margin: 0 0 6px; font: 500 12px/1.4 var(--mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--corona-2);
}
.axis-reading p { margin: 0; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.axis-reading .axis-weights {
  margin-top: 8px; font: 11.5px/1.5 var(--mono); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.axis-readings:empty::before {
  content: "No projection computed yet.";
  color: var(--ink-3); font: 12.5px/1.5 var(--sans);
}
.explainer-more { margin-top: 18px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.explainer-more summary {
  cursor: pointer; color: var(--ink-3); font: 12.5px/1.4 var(--sans);
  transition: color var(--t-fast) ease-out;
}
.explainer-more summary:hover { color: var(--ink-2); }
.explainer-more p { color: var(--ink-2); max-width: 74ch; text-wrap: pretty; }

.current-grid {
  display: grid; grid-template-columns: minmax(290px, 0.85fr) minmax(440px, 1.4fr);
  gap: 12px;
}
.current-status, .current-section {
  min-width: 0; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: rgba(var(--well-rgb), 0.24);
}
.current-status { padding: 14px; display: flex; flex-direction: column; }
.current-summary { min-width: 0; display: grid; gap: 8px; }
.current-section { padding: 9px 11px; }
.current-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 9px;
}
.current-section-head h3 {
  margin: 0; color: var(--ink-3); font: 600 10px/1.3 var(--mono);
  letter-spacing: 0.09em; text-transform: uppercase;
}
.current-status-badge {
  display: inline-flex; align-items: center; gap: 7px; color: var(--corona-2);
  font: 600 10px/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase;
}
.current-status-badge i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--corona);
  box-shadow: 0 0 8px var(--corona-glow-2); animation: live-pip 1.6s ease-in-out infinite;
}
.current-status-badge.is-waiting { color: var(--warn); }
.current-status-badge.is-waiting i { background: var(--warn); box-shadow: 0 0 8px rgba(var(--warn-rgb), 0.55); }
.current-status-copy b {
  display: block; color: var(--ink); font: 600 15px/1.35 var(--sans);
}
.current-status-copy > span {
  display: block; margin-top: 3px; color: var(--corona-2); font: 11px/1.4 var(--mono);
}
.current-status-copy p {
  margin: 7px 0 0; color: var(--ink-2); font: 12.5px/1.5 var(--sans);
  text-wrap: pretty;
}
.budget-meter {
  margin-top: auto; padding-top: 15px;
}
.budget-meter-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-bottom: 6px;
}
.budget-meter-head > span {
  color: var(--ink-3); font: 600 10px/1.3 var(--mono);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.budget-meter-head b { color: var(--ink); font: 600 11px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.budget-meter-head em { color: var(--ink-3); font-style: normal; font-weight: 400; }
.budget-meter p { margin: 6px 0 0; color: var(--ink-3); font: 10.5px/1.4 var(--sans); }
.current-facts {
  display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: 5px 8px;
}
.current-facts .kv {
  min-width: 0; padding-right: 8px; border-right: 1px solid var(--hairline);
}
.current-facts .kv:last-child { border-right: 0; }
.current-runtime-row { display: grid; grid-template-columns: minmax(100px, 0.55fr) minmax(260px, 1.8fr); gap: 8px; }
.current-runtime-row .kv:first-child { padding-right: 8px; border-right: 1px solid var(--hairline); }
.current-grid .kv b {
  display: block; margin-top: 2px; font: 500 13px/1.3 var(--mono); letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere;
}
.current-grid .kv b em { color: var(--ink-3); font-style: normal; font-weight: 400; }
.current-grid .kv span { font: 500 9.5px/1.4 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.current-setting-row { display: grid; grid-template-columns: minmax(120px, 0.7fr) minmax(260px, 1.8fr); gap: 8px; }
.current-setting {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 3px 9px;
  min-width: 0; padding: 7px 9px; border-radius: 4px; background: rgba(var(--hair-rgb), 0.045);
}
.current-setting > span {
  color: var(--ink-3); font: 500 9.5px/1.4 var(--mono);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.current-setting > b { color: var(--corona-2); font: 600 12px/1.35 var(--mono); text-transform: uppercase; }
.current-setting p { grid-column: 1 / -1; margin: 1px 0 0; color: var(--ink-2); font: 11px/1.4 var(--sans); }
.budget-bar { height: 6px; border-radius: 3px; background: rgba(var(--well-rgb), 0.6); border: 1px solid var(--hairline); overflow: hidden; }
.budget-bar i { display: block; height: 100%; background: var(--corona); border-radius: 3px; box-shadow: 0 0 8px var(--corona); transition: width var(--t) ease-out; }

@media (max-width: 1020px) {
  .current-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .live-current-panel { padding: 12px; }
  .current-facts { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
  .current-facts .kv:nth-child(2) { border-right: 0; }
  .current-facts .kv:last-child { grid-column: span 2; padding-top: 6px; border-top: 1px solid var(--hairline); }
  .current-runtime-row { grid-template-columns: 1fr; }
  .current-runtime-row .kv:first-child { padding: 0 0 6px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .current-setting-row { grid-template-columns: 1fr; }
  .budget-meter-head { align-items: flex-start; flex-direction: column; gap: 3px; }
}

.editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; margin-bottom: 8px; }
.editor-grid label {
  display: flex; flex-direction: column; gap: 5px;
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.editor-grid input, .editor-grid select { min-width: 0; }
.editor-grid input[type="number"] { width: 100%; }
.raw-json { margin: 10px 0; }
.raw-json summary { cursor: pointer; color: var(--ink-3); font: 12.5px/1.4 var(--sans); }
.raw-json textarea, textarea {
  width: 100%; margin-top: 8px; background: rgba(var(--well-rgb), 0.7); color: var(--ink);
  border: 1px solid var(--hairline-2); border-radius: var(--radius);
  font: 12px/1.5 var(--mono); padding: 10px; resize: vertical;
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
textarea:hover { border-color: var(--corona-2); }

/* ---------------- live grid: sky, telemetry box, control deck ---------------- */
/* Each region is filled by its own module; this only positions them so the
   sky never has anything drawn over or under it. */
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto auto; gap: 14px; margin-bottom: 18px; }
.live-grid .panel { margin-bottom: 0; }
.live-grid .skybox { grid-column: 1; grid-row: 1; min-height: 440px; padding: 0; overflow: hidden; position: relative; }
#live-telemetry { grid-column: 2; grid-row: 1 / 3; }
#live-deck { grid-column: 1; grid-row: 2; }
@media (max-width: 1020px) { .live-grid { grid-template-columns: 1fr; } #live-telemetry { grid-column: 1; grid-row: auto; } #live-deck { grid-row: auto; } }
.live-grid .panel:empty::before, .skybox:empty::before {
  content: attr(data-empty); display: block; padding: 16px 18px; color: var(--ink-3);
  font: 500 11px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.skybox {
  position: relative; overflow: hidden;
  border-color: var(--hairline-2);
  background: radial-gradient(110% 90% at 30% 10%, var(--sky-1) 0%, var(--sky-0) 60%);
}

/* ---------------- new experiment view ---------------- */
.plan-row { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; }
.plan-name {
  display: flex; flex-direction: column; gap: 5px; flex: 1 1 340px; max-width: 460px;
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.plan-name input { font: 500 15px/1.4 var(--mono); color: var(--ink); letter-spacing: 0; text-transform: none; }
.plan-actions { padding-top: 21px; }
.field-help { font: 11.5px/1.45 var(--sans); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.field-help code { font-size: 11px; }

.plan-library { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 8px; }
.plan-library summary { cursor: pointer; color: var(--ink-3); font: 12.5px/1.4 var(--sans); padding: 4px 0; transition: color var(--t-fast) ease-out; }
.plan-library summary:hover { color: var(--ink-2); }
.plan-library .table-wrap { max-height: 300px; overflow-y: auto; margin-top: 6px; }
.plan-library .ghost-btn { padding: 4px 11px; font-size: 12px; }

.empty-note {
  border: 1px dashed var(--hairline-2); border-radius: var(--radius-lg);
  color: var(--ink-2); font: 13px/1.55 var(--sans);
  padding: 18px 20px; max-width: 72ch; text-wrap: pretty;
}
.empty-note b { color: var(--ink); }
.empty-note i { font-style: normal; font-weight: 600; color: var(--ink); }

.raw-json.panel-like {
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: 12px 18px; margin: 0 0 18px;
}
.raw-json.panel-like summary { font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--corona-2); }
.raw-json.panel-like .ghost-btn { margin-top: 10px; }

/* the console: the sticky bar that saves and launches a plan */
.action-bar {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  background: var(--panel); border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg); padding: 12px 16px;
  box-shadow: 0 -10px 40px rgba(var(--shadow-rgb), 0.45), 0 0 30px rgba(var(--corona-rgb), 0.12);
}
.bar-summary { margin-right: auto; font: 12.5px/1.5 var(--mono); color: var(--ink-2); }
.action-bar label.check { display: flex; align-items: center; gap: 8px; font: 13px/1.4 var(--sans); color: var(--ink-2); }

/* the toast: a pill with a small comet dot, settling in from the right */
.toast {
  position: fixed; bottom: 22px; right: 22px; z-index: var(--z-toast);
  display: flex; gap: 10px; align-items: center;
  background: var(--panel); border: 1px solid var(--hairline-2);
  border-radius: 999px; color: var(--ink); padding: 9px 16px 9px 12px;
  font: 13px/1.4 var(--sans); max-width: min(480px, calc(100vw - 44px));
  box-shadow: 0 8px 30px rgba(var(--shadow-rgb), 0.5), 0 0 24px rgba(var(--corona-rgb), 0.2);
  animation: comet-in 220ms var(--ease);
}
.toast::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--corona-2);
  box-shadow: 0 0 10px var(--corona-glow-2), -14px 0 10px -4px rgba(var(--corona-rgb), 0.5);
}
@keyframes comet-in { from { opacity: 0; transform: translateX(14px); } }

/* ---------------- reduced motion: every animation is its final frame ---------------- */
@media (prefers-reduced-motion: reduce) {
  .view.is-active { animation: none; }
  .live-banner.is-running .pulse { animation: none; }
  .cell-chip.running { animation: none; }
  .tag.live::before { animation: none; }
  .current-status-badge i { animation: none; }
  .danger-armable.is-armed::after { animation: none; transform: scaleX(0); }
  .toast { animation: none; }
  .nav-item, .chip, .accent-btn, .ghost-btn, select, input, textarea, .data-table td, .budget-bar i,
  input[type="checkbox"], input[type="checkbox"]::before, .plan-library summary, .data-table .del-btn { transition: none; }
}

/* Citation block (LP-10) — sits inside the rail below the provenance line */
.citation-block {
  background: var(--well);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius);
  padding: 8px 10px;
  font: 12px/1.5 var(--mono);
  color: var(--ink-2);
  margin-top: 4px;
}
.citation-block pre {
  margin: 0 0 6px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.citation-actions {
  display: flex; gap: 6px;
}
.rail-scope {
  border-top: 1px solid var(--hairline-2);
  padding-top: 8px;
  margin-top: 6px;
}
.rail-scope label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--ink-3); margin-bottom: 3px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.rail-scope select, .rail-scope input {
  width: 100%; font-size: 12px; font-family: var(--mono);
  background: var(--well); color: var(--ink);
  border: 1px solid var(--hairline-2); border-radius: 4px;
  padding: 3px 6px;
}
.rail-scope .scope-field { margin-top: 4px; }
.rail-scope .scope-field label.check {
  font-size: 12px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--ink);
}
.rail-scope .scope-note {
  margin-top: 6px; font-size: 11px; color: var(--ink-3);
  line-height: 1.35;
}
.rail-publish {
  margin-top: 8px; border-top: 1px solid var(--hairline-2);
  padding-top: 6px;
}
.rail-publish .rail-publish-status {
  font: 11px var(--sans); color: var(--ink-3);
  margin-bottom: 4px;
}

/* ================= Cell Inspector (LP-11) ================= */
.ci-cell-link {
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 10px/1.3 var(--mono); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--corona);
  background: none; border: 1px solid var(--hairline-2);
  border-radius: 999px; padding: 2px 9px; margin-left: 6px;
  cursor: pointer; transition: color var(--t-fast) ease-out,
    border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
  vertical-align: middle;
}
.ci-cell-link:hover { border-color: var(--corona-2); color: var(--ink);
  box-shadow: 0 0 10px var(--corona-glow); }

.ci-chart-link-wrap { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* ================= Plan intent (LP-11) ================= */
.plan-intent { margin-bottom: 18px; }
.plan-intent summary { list-style: none; }
.plan-intent summary::-webkit-details-marker { display: none; }
.plan-intent .panel { margin-bottom: 0; }
#exp-intent-content { color: var(--ink-2); font: 13px/1.6 var(--sans); }
#exp-intent-content h3 { color: var(--ink); font: 500 14px/1.4 var(--sans); margin: 0 0 6px; }
#exp-intent-content p { margin: 0 0 8px; }
#exp-intent-content .intent-claim { padding: 8px 10px; background: var(--well);
  border-left: 3px solid var(--corona-2); border-radius: 0 4px 4px 0;
  color: var(--ink); }
#exp-intent-content .intent-linked { font: 11px/1.4 var(--mono); color: var(--ink-3); }
#exp-intent-content .intent-linked a { color: var(--corona); text-decoration: underline;
  cursor: pointer; }

/* Project chooser in the data-scope rail (2026-09-20). */
.scope-projects { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.scope-projects label.check { white-space: nowrap; }