/* origami CAD. One design system: neutral surfaces, one violet accent, 4 px spacing steps, soft shadows over heavy borders.
   Badges and statuses carry text and a border style, never colour alone: red and blue already mean mountain and valley,
   so the accent is violet, never blue. SIM-VERIFIED is solid, predicted dashed, pending dotted. */

:root {
  --bg: #f7f7f8; --side: #fbfbfc; --panel: #ffffff; --sunk: #f3f3f5; --hover: #f1f1f4;
  --text: #17171c; --muted: #61616b; --faint: #9c9ca6; --border: #e7e7eb; --border-strong: #d6d6dc; --grid: #e4e4ea;
  --accent: #6e56cf; --accent-hover: #5f47c0; --accent-ink: #ffffff; --accent-text: #6347c7;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --sim: #18794e; --sim-bg: #ebf7f0; --pred: #a35200; --pred-bg: #fff5e6; --pend: #61616b; --pend-bg: #f1f1f4;
  --paper: #c2185b; --paper-bg: #fdedf3; --warn: #a35200; --warn-bg: #fff7eb;
  --mountain: #e5484d; --valley: #0b74de; --cut: #17171c;
  --held: #18794e; --failed: #c4271e; --face: #c9c2ee; --band0: #6e56cf; --band1: #e8890c; --clamp: #a1a1aa;
  --shadow-sm: 0 1px 2px rgb(16 16 28 / 0.05);
  --shadow: 0 1px 2px rgb(16 16 28 / 0.04), 0 2px 8px rgb(16 16 28 / 0.04);
  --shadow-lg: 0 4px 24px rgb(16 16 28 / 0.08), 0 1px 3px rgb(16 16 28 / 0.06);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --r-sm: 6px; --r: 8px; --r-lg: 12px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0c0f; --side: #0f0f13; --panel: #141418; --sunk: #1b1b21; --hover: #202027;
    --text: #ececf1; --muted: #a0a0ad; --faint: #6c6c78; --border: #25252d; --border-strong: #33333d; --grid: #212128;
    --accent: #7c66f0; --accent-hover: #8d79f5; --accent-ink: #ffffff; --accent-text: #b3a6ff;
    --sim: #5fd497; --sim-bg: #11291d; --pred: #ffb35c; --pred-bg: #2d2010; --pend: #b4b4bf; --pend-bg: #24242b;
    --paper: #ff7aa8; --paper-bg: #33141f; --warn: #ffb35c; --warn-bg: #2a1f0f;
    --mountain: #ff6369; --valley: #52a9ff; --cut: #ececf1; --held: #5fd497; --failed: #ff7b72;
    --face: #8b80c9; --band0: #9d8cff; --band1: #ffad42; --clamp: #6c6c78;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 8px rgb(0 0 0 / 0.25);
    --shadow-lg: 0 8px 32px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 13.5px/1.5 var(--sans); letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
code { font-family: var(--mono); font-size: 0.88em; color: var(--muted); }
q { quotes: "“" "”"; font-style: italic; }
small { color: var(--muted); }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
h2, h3, h4 { letter-spacing: -0.01em; }
summary { cursor: pointer; color: var(--muted); font-weight: 500; border-radius: var(--r-sm); transition: color 0.12s; }
summary:hover { color: var(--text); }
summary::marker { color: var(--faint); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px;
  background: color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); }
.top .sp { flex: 1; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; }
.brand .mark { width: 24px; height: 24px; flex: 0 0 auto; }
.brand .mark .m1 { fill: var(--accent); }
.brand .mark .m2 { fill: color-mix(in srgb, var(--accent) 55%, var(--panel)); }
.brand span { color: var(--faint); font-weight: 500; }
.title { color: var(--muted); max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 12px;
  margin-left: 4px; border-left: 1px solid var(--border); }
.title:empty { display: none; }
.status { font-size: 12px; color: var(--muted); }
.replay { font-weight: 650; font-size: 11px; padding: 3px 9px; border: 1px dashed var(--warn); color: var(--warn); background: var(--warn-bg); border-radius: 999px; }
.message { margin: 12px 16px 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg);
  color: var(--text); border-radius: var(--r); box-shadow: var(--shadow-sm); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--panel); color: var(--text);
  font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s, transform 0.06s; }
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:active { transform: translateY(0.5px); }
.btn.pri { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600;
  box-shadow: 0 1px 2px rgb(16 16 28 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.14); }
.btn.pri:hover { background: var(--accent-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.big { height: 40px; padding: 0 18px; font-size: 14px; font-weight: 600; border-radius: 10px; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--hover); }
.run-bar { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.btn.link { height: auto; border: 0; background: none; box-shadow: none; color: var(--accent-text); padding: 0 4px; font-weight: 500; }
.btn.link:hover { background: none; text-decoration: underline; text-underline-offset: 2px; }
.btn.rec { border-color: color-mix(in srgb, var(--failed) 50%, transparent); color: var(--failed); }
.top .btn { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); }
.top .btn:hover { background: var(--hover); color: var(--text); }
.top .btn[data-action="new"] { background: var(--text); color: var(--panel); }
.top .btn[data-action="new"]:hover { background: color-mix(in srgb, var(--text) 85%, var(--panel)); }

/* ---------- layout ---------- */
.shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 0; margin: 0; align-items: start; min-height: calc(100vh - 56px); }
.shell.closed { grid-template-columns: minmax(0, 1fr); }
.shell.closed .side { display: none; }
.body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.15fr); gap: 16px; margin: 0; padding: 16px; align-items: start; }
.p { padding: 18px; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 20px 0 8px; }
.lbl:first-child { margin-top: 0; }
.lbl small { color: var(--faint); font-weight: 500; }
.note { color: var(--muted); font-size: 12.5px; }
.foot { margin: 8px auto 32px; padding: 0 16px; color: var(--faint); font-size: 12px; max-width: 110ch; text-align: center; }
.foot p { margin: 0; }
@media (max-width: 1180px) {
  .body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .body > .props-col { grid-column: 1 / -1; }
  .shell { grid-template-columns: 236px minmax(0, 1fr); }
  .title { max-width: 28ch; }
}
@media (max-width: 760px) {
  .body > .props-col { grid-column: auto; }
  .shell { grid-template-columns: 1fr; }
  .body { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .p { padding: 14px; }
  .top { flex-wrap: wrap; height: auto; padding: 8px 10px; row-gap: 6px; }
  .title { display: none; }
}

/* ---------- sidebar ---------- */
.side { position: sticky; top: 56px; max-height: calc(100vh - 56px); overflow: auto; padding: 18px 12px; background: var(--side);
  border-right: 1px solid var(--border); align-self: stretch; }
.side .lbl { padding: 0 8px; color: var(--faint); }
.side .note { margin: -4px 8px 10px; font-size: 11.5px; color: var(--faint); }
.side-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 1px; }
.side-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--muted); border-radius: var(--r);
  padding: 7px 10px; cursor: pointer; font-size: 13px; line-height: 1.4; transition: background 0.12s, color 0.12s; }
.side-item:hover { background: var(--hover); color: var(--text); }
.side-item.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 550; }
.side-text { display: block; }
.side-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; color: var(--faint); }
.side-item.on .side-meta { color: inherit; opacity: 0.75; }
/* hiding a row (gallery.js): × hides it in this browser; the owner's Delete removes a recorded design for everyone */
.side-row { position: relative; }
.side-row .side-item { padding-right: 30px; }
.side-row.owner .side-item { padding-right: 86px; }  /* room for Delete and × */
.side-row.mine .side-item { padding-right: 60px; }  /* room for the visitor's own Delete */
.row-acts.always { opacity: 1; }
.row-act { border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: var(--r-sm);
  font: inherit; font-size: 11px; line-height: 18px; padding: 0 6px; cursor: pointer; }
.row-acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.12s; }
.side-row:hover .row-acts, .side-row:focus-within .row-acts, .side-row.is-hidden .row-acts { opacity: 1; }
@media (hover: none) { .row-acts { opacity: 1; } }
.row-act:hover { color: var(--text); border-color: var(--border-strong); }
.row-act.x { width: 22px; padding: 0; font-size: 14px; }
.row-act.del:hover { color: var(--failed); border-color: var(--failed); }
.side-row.is-hidden .side-item { opacity: 0.55; }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.side-undo, .side-foot { margin: 0 8px 10px; font-size: 11.5px; color: var(--muted); }
.side-undo { padding: 6px 10px; border-radius: var(--r); background: var(--sunk); }
.owner-box { margin: 4px 8px 12px; font-size: 12px; color: var(--muted); }
.owner-box summary { cursor: pointer; color: var(--faint); font-size: 11.5px; }
.owner-box p { margin: 6px 0; }
.owner-form { display: flex; gap: 6px; }
.owner-form input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); color: var(--text); font: inherit; }
.source { margin: -4px 0 14px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.source a { font-weight: 550; }
/* the paper's design beside this one: the paper's side reported (dashed, neutral), ours simulator-verified */
.compare { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 16px; }
.cmp { border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
.cmp p { margin: 0; }
.cmp p + p { margin-top: 4px; }
.cmp.theirs { border: 1px dashed var(--border-strong); background: var(--sunk); color: var(--muted); }
.cmp.ours { border: 1px solid color-mix(in srgb, var(--sim) 45%, transparent); background: var(--sim-bg); }
.cmp-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px !important; }
.cmp-result { color: var(--text); font-weight: 500; }
.cmp-ev { font-size: 11px; color: var(--faint); }
.tag-rep { font-size: 9.5px; font-weight: 650; letter-spacing: 0.04em; padding: 0 6px; line-height: 16px; border: 1px dashed var(--muted);
  border-radius: 5px; color: var(--muted); white-space: nowrap; text-transform: uppercase; cursor: help; }
.side-filters { display: flex; gap: 2px; margin: 0 8px 10px; padding: 3px; background: var(--sunk); border-radius: var(--r); }
.chip-f { flex: 1; border: 0; background: transparent; color: var(--muted); border-radius: var(--r-sm); padding: 4px 8px; font-size: 12px;
  font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s; }
.chip-f:hover { color: var(--text); }
.chip-f.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
.paper-tag { display: inline-block; font-size: 9.5px; font-weight: 650; letter-spacing: 0.05em; padding: 0 6px; line-height: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent-text);
  border-radius: 4px; vertical-align: 1px; cursor: help; }
.hard { display: inline-block; font-size: 9.5px; font-weight: 650; letter-spacing: 0.04em; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  color: var(--warn); border-radius: 4px; vertical-align: 1px; }
.rec { font-weight: 650; font-size: 11px; padding: 3px 10px; border: 1px dashed var(--warn); color: var(--warn); background: var(--warn-bg); border-radius: 999px; display: inline-block; margin: 0 0 10px; }
details.caps { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; background: var(--panel); }
details.caps > summary { font-weight: 600; color: var(--text); }
details.caps[open] > summary { margin-bottom: 8px; }
.caps .cap-list { padding-left: 16px; margin: 4px 0 8px; }
.caps .cap-list li { margin-bottom: 4px; }
@media (max-width: 760px) { .side { position: static; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--border); } }

/* ---------- intent column ---------- */
textarea.request { display: block; width: 100%; min-height: 120px; resize: vertical; padding: 12px 14px; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--panel); color: var(--text); font-size: 14px; line-height: 1.55; box-shadow: var(--shadow-sm);
  transition: border-color 0.12s, box-shadow 0.12s; }
textarea.request::placeholder { color: var(--faint); }
textarea.request:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.ask { background: var(--sunk); border: 0; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 13.5px; line-height: 1.55; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.actions.alt { margin-top: 4px; padding-top: 0; border-top: 0; }
.actions.alt .note { margin-right: 2px; }
.chips { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.chip { text-align: left; border: 1px dashed var(--border-strong); background: transparent; color: var(--muted); border-radius: var(--r); padding: 5px 10px; cursor: pointer; }
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip.on { border-style: solid; border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.rows { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
/* a check on the confirm screen: a card with its title, the words it came from, its values inline, then one quiet line */
.row { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--panel); box-shadow: var(--shadow-sm);
  transition: border-color 0.12s; }
.row:has(.keep input:not(:checked)) { opacity: 0.55; }
.row:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.row .keep { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.row .keep input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; }
.row .keep b { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.row q { display: block; margin: 6px 0 0 26px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.row .protocol { display: block; margin-left: 26px; }
.slots { margin: 10px 0 0 26px; display: flex; flex-direction: column; gap: 6px; }
.row-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 10px 0 0 26px; padding-top: 8px;
  border-top: 1px solid var(--border); font-size: 12px; }
.row-foot:empty { display: none; }
.row-foot .odds { margin: 0; font-size: 12px; color: var(--muted); }
.row-foot details { margin: 0; font-size: 12px; }
.row-foot details[open] { flex-basis: 100%; }
.row-foot details .slot, .row-foot details .flag { margin-left: 0; }
.slot { display: grid; grid-template-columns: max-content 10ch minmax(0, 1fr); gap: 4px 10px; align-items: center; margin: 4px 0; }
.slot > span { font-weight: 500; font-size: 12.5px; }
.slot input {
  font-family: var(--mono); font-size: 12px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--panel); color: var(--text); transition: border-color 0.12s, box-shadow 0.12s; }
.slot input { width: 100%; }
.slot input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.slot small { font-size: 11.5px; color: var(--faint); overflow-wrap: anywhere; }
.question { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--warn); background: var(--warn-bg); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.flag { margin: 2px 0 2px 24px; color: var(--warn); font-size: 12px; }
.picker { border: 1px solid var(--border); border-radius: var(--r); margin: 6px 0; padding: 6px 10px; max-height: 260px; overflow: auto; }
.picker label { display: block; padding: 3px 0; }
.unmapped { margin: 10px 0; padding: 8px 12px; border: 1px dashed var(--warn); border-radius: var(--r); }
.unmapped ul { margin: 4px 0; padding-left: 18px; }
.req { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.req small { display: block; font-size: 11.5px; }
/* requirement status: shape + text, not colour alone */
.st { flex: 0 0 auto; display: inline-block; min-width: 1.2em; font-size: 14px; line-height: 1.3; text-align: center; }
.st-pending { color: var(--pend); } .st-predicted { color: var(--pred); } .st-verified { color: var(--sim); }
.st-met_not_robust { color: var(--warn); } .st-missed { color: var(--failed); } .st-not_run { color: var(--faint); }
.working { display: flex; align-items: center; gap: 10px; color: var(--accent-text); margin: 12px 0; font-weight: 500; }
.placeholder { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 20px; color: var(--muted); text-align: center; background: var(--sunk); }
.placeholder p { margin: 4px 0; }
details.flags { margin: 2px 0; font-size: 12px; }
details.flags summary { color: var(--warn); }
details.flags .flag { margin: 2px 0 2px 12px; }
details.defaults { margin: 2px 0; font-size: 12px; }
details.add { margin: 0 0 4px; }
details.add summary { color: var(--accent-text); margin: 4px 0 10px; font-size: 12.5px; }

/* the new design page: the request and how it works */
.body.fresh { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); max-width: 1180px; width: 100%; margin: 0 auto; align-items: start; padding-top: 28px; }
.body.fresh .props-col { display: none; }
.body.fresh > .p { padding: 28px; }
.request-h { font-size: 22px; margin: 0 0 6px; font-weight: 650; letter-spacing: -0.025em; }
.request-h + p, .request-h + .note { margin-top: 0; }
.body.fresh textarea.request { min-height: 168px; font-size: 14.5px; margin-top: 12px; }
.how { max-width: 520px; margin: 12px auto; }
.how h2 { font-size: 18px; font-weight: 650; margin: 0 0 20px; letter-spacing: -0.02em; }
.how ol { list-style: none; counter-reset: how; padding: 0; margin: 0 0 20px; }
.how li { counter-increment: how; position: relative; padding: 2px 0 18px 44px; color: var(--muted); }
.how li::before { content: counter(how); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: var(--r);
  background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-weight: 650; font-size: 12.5px; }
.how li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 32px; bottom: 4px; width: 1px; background: var(--border); }
.how li b { color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .body.fresh { grid-template-columns: 1fr; } .body.fresh > .p { padding: 16px; } }

/* ---------- badges and tags ---------- */
.badge { display: inline-block; border-radius: 5px; padding: 0 6px; font-size: 9.5px; line-height: 16px; font-weight: 650; letter-spacing: 0.04em;
  vertical-align: 1px; white-space: nowrap; }
.b-sim { background: var(--sim-bg); color: var(--sim); border: 1px solid color-mix(in srgb, var(--sim) 55%, transparent); }
.b-predicted { background: var(--pred-bg); color: var(--pred); border: 1px dashed var(--pred); }
.b-pending { background: var(--pend-bg); color: var(--pend); border: 1px dotted var(--pend); }
.src { font-size: 10px; color: var(--faint); white-space: nowrap; }
/* validation tags (validation.js): class validation and material, beside a SIM-VERIFIED badge */
.vtag { display: inline-block; border-radius: 4px; padding: 0 5px; font-size: 10px; white-space: nowrap; vertical-align: 1px; border: 1px solid var(--border); color: var(--muted); }
.vt-validated, .vm-robust { color: var(--sim); border-color: var(--sim); }
.vt-kinematic { color: var(--muted); border-style: dashed; }
.vt-not, .vm-sensitive { color: var(--warn); border-color: var(--warn); }
.vm-unchecked { color: var(--faint); border-style: dotted; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; font-size: 12px; font-weight: 550; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); background: var(--panel); white-space: nowrap; }
.pill.live { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.pill.tone-pass { color: var(--sim); border-color: color-mix(in srgb, var(--sim) 45%, transparent); background: var(--sim-bg); }
.pill.tone-open { color: var(--warn); border: 1px dashed var(--warn); background: var(--warn-bg); }
.pill.stopped { color: var(--failed); border: 1px dashed var(--failed); }
.failed-call { font-size: 9.5px; font-weight: 650; padding: 0 5px; border: 1px dashed var(--failed); color: var(--failed); border-radius: 4px; text-transform: uppercase; }

/* ---------- datasheet ---------- */
.datasheet .label { font-size: 11px; padding: 0; border: 0; color: var(--faint); }
.verdict { margin: 0 0 12px; border-radius: 10px; padding: 12px 14px; border: 1px solid var(--border); }
.verdict p { margin: 4px 0 0; }
.verdict.tone-pass { background: var(--sim-bg); border: 1px solid color-mix(in srgb, var(--sim) 50%, transparent); }
.verdict.tone-open { background: var(--warn-bg); border: 1px dashed var(--warn); }
.verdict .reason { font-size: 12.5px; color: var(--muted); }
.warnings { list-style: none; padding: 8px 12px; margin: 0 0 8px; background: var(--warn-bg); border-radius: var(--r); font-size: 12px; }
.warnings li + li { margin-top: 4px; }
.mark { color: var(--warn); }
table.ds { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 8px; table-layout: fixed; }
table.ds caption { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 18px 0 6px; }
table.ds th { text-align: left; font-weight: 400; color: var(--muted); padding: 6px 8px 6px 0; vertical-align: top; width: 38%; border-bottom: 1px solid var(--border); }
table.ds td { padding: 6px 0; vertical-align: top; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
table.ds tr:last-child th, table.ds tr:last-child td { border-bottom: 0; }
table.ds tr.req-head th { color: var(--text); font-weight: 600; width: auto; padding-top: 10px; cursor: help; }
table.ds tr.req-head small { display: block; font-weight: 400; font-size: 10.5px; color: var(--faint); }
table.ds code, .ask, .req q { overflow-wrap: anywhere; }
table.ds th code { display: block; font-size: 10px; }
table.params { font-size: 11.5px; }
table.params th { width: auto; }
td.v .badge { font-size: 8.5px; line-height: 14px; padding: 0 4px; }
td.v .vtag { border: 0; padding: 0; font-size: 10.5px; color: var(--faint); display: inline; white-space: normal; }
table.ds td, table.ds th { overflow-wrap: anywhere; }
td.v .vtag + .vtag::before { content: "· "; }
td.v .vtag.vt-not, td.v .vtag.vm-sensitive { color: var(--warn); }
td.v .vtag.vt-validated, td.v .vtag.vm-robust { color: var(--sim); }
.tags-all { margin: -2px 0 8px; font-size: 11.5px; color: var(--muted); }
.tags-all .vtag { margin-left: 2px; }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.held { background: var(--held); }
.dot.failed { background: transparent; border: 2px solid var(--failed); }
.dot.unrun { background: transparent; border: 1px dashed var(--faint); }
.dot-key { display: inline-block; width: 30px; height: 8px; background: linear-gradient(90deg, var(--held) 0 33%, transparent 33% 66%, var(--faint) 66%); border-radius: 4px; }
.downloads { margin: 4px 0 10px; }
.downloads h4 { margin: 0 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.downloads p { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.downloads .btn { margin: 0; }
dl.legend { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 11.5px; color: var(--muted); margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
dl.legend dd { margin: 0; }
.pending { color: var(--muted); }
details.legend-box, details.more, details.warn-box, details.followup, details.about { margin: 12px 0; font-size: 12.5px; }
details.warn-box > summary { color: var(--warn); }
details.warn-box .warnings { margin-top: 8px; }
details.about { margin: 2px 0 8px; }
details[open] > summary { margin-bottom: 6px; }

/* ---------- canvas ---------- */
.canvas-wrap { min-height: 260px; }
.tabs { display: inline-flex; gap: 2px; margin-bottom: 10px; flex-wrap: wrap; padding: 3px; background: var(--sunk); border-radius: var(--r); }
.tab { font-size: 12.5px; font-weight: 500; padding: 4px 12px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--muted); cursor: pointer;
  transition: background 0.12s, color 0.12s; }
.tab:hover { color: var(--text); }
.tab.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
.canvas { position: relative; border: 1px solid var(--border); border-radius: 10px; min-height: 240px; display: flex; align-items: center;
  justify-content: center; padding: 12px; background-color: var(--bg);
  background-image: radial-gradient(var(--grid) 1px, transparent 1px); background-size: 16px 16px; background-position: -8px -8px; }
.canvas[data-drag="rotate"] { cursor: grab; touch-action: none; }
.canvas svg { max-height: 280px; }
.canvas .ov { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: var(--muted); background: var(--panel); padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.empty { color: var(--muted); padding: 24px 12px; text-align: center; }
svg.cp line { stroke-width: 1.4; fill: none; stroke-linecap: round; }
svg.cp line.B { stroke: var(--cut); }
svg.cp line.C { stroke: var(--cut); stroke-width: 2.6; }
svg.cp line.M { stroke: var(--mountain); }
svg.cp line.V { stroke: var(--valley); }
svg.made polygon { fill: var(--face); stroke: var(--text); stroke-opacity: 0.3; stroke-width: 0.6; stroke-linejoin: round; }
svg.made line { stroke-width: 1.6; stroke-linecap: round; fill: none; }
svg.made line.M { stroke: var(--mountain); }
svg.made line.V { stroke: var(--valley); }
.mv { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; white-space: nowrap; }
.mv svg { margin-left: 4px; }
.mv line { stroke-width: 2; stroke-linecap: round; }
.mv line.M { stroke: var(--mountain); } .mv line.V { stroke: var(--valley); }
/* behaviour tabs: held shapes and the push (bands: violet and amber, never the mountain / valley reds and blues: the key names them) */
.canvas.behaviour { display: block; padding-bottom: 36px; }  /* clear of the .ov label */
svg.made polygon.clamp { fill: var(--clamp); }
svg.made polygon.band0 { fill: var(--band0); }
svg.made polygon.band1 { fill: var(--band1); }
svg.made .tip { fill: none; stroke: var(--text); stroke-width: 1.5; }
svg.made .arrow { stroke: var(--text); stroke-width: 1.5; }
svg.made marker path { fill: var(--text); }
.bh { font-size: 12.5px; padding-bottom: 6px; }
.bh-head { margin: 0 0 8px; }
.bh-foot { margin: 4px 0 0; }
.bh-foot details.about { margin: 6px 0 0; }
.bh-foot details.about small { display: block; margin-top: 4px; }
.bh-key { margin: 4px 0; font-size: 11.5px; color: var(--muted); }
.bh-key .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 8px; vertical-align: -1px; }
.sw.band0 { background: var(--band0); } .sw.band1 { background: var(--band1); } .sw.clamp { background: var(--clamp); }
.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.state { margin: 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--panel); padding: 6px; }
.state figcaption { font-size: 11.5px; color: var(--muted); }
.state svg { max-height: 170px; }
.push-frame svg { max-height: 250px; }
.ctx-frame { border: 1px dashed var(--border-strong); border-radius: var(--r); background: var(--sunk) center / cover no-repeat; }
.ctx-frame.has-backdrop { border-style: solid; }
.ctx-clamp rect { fill: var(--clamp); fill-opacity: 0.55; stroke: var(--muted); }
.ctx-pusher rect { fill: var(--accent); fill-opacity: 0.8; stroke: none; }
.ctx-pusher line { stroke: var(--accent); stroke-width: 1.5; }
.ctx-clamp text, .ctx-pusher text { font-size: 10px; fill: var(--muted); }
.ctx-tags { margin: 8px 0 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.ctx-tags .tag { font-size: 11px; border: 1px solid var(--sim); color: var(--sim); border-radius: 999px; padding: 1px 8px; }
.ctx-tags .tag.ill { border-color: var(--warn); color: var(--warn); }
.ctx-why { margin: 4px 0; }
svg.chart { max-height: 80px; margin-top: 4px; }
svg.chart polyline { fill: none; stroke-width: 1.75; stroke-linejoin: round; }
svg.chart polyline.band0 { stroke: var(--band0); } svg.chart polyline.band1 { stroke: var(--band1); }
svg.chart polyline.force { stroke: var(--accent); }
svg.chart circle.band0 { fill: var(--band0); } svg.chart circle.band1 { fill: var(--band1); }
svg.chart .ax { stroke: var(--border-strong); } svg.chart .cur { stroke: var(--text); stroke-width: 1; }
svg.chart .thr { stroke: var(--muted); stroke-dasharray: 4 3; }
svg.chart text { font-size: 9px; fill: var(--muted); }
.cost { display: block; }
.player { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.player input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--accent); }
.cp-wrap { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding-bottom: 42px; }  /* clear of the .ov label, which wraps to two lines in a narrow column */
.canvas-empty { border: 1px dashed var(--border-strong); border-radius: var(--r-lg); min-height: 320px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 28px; color: var(--muted);
  background-image: radial-gradient(var(--grid) 1px, transparent 1px); background-size: 16px 16px; }
.canvas-empty svg { width: 120px; margin-bottom: 12px; fill: none; stroke: var(--mountain); stroke-width: 2; stroke-linejoin: round; opacity: 0.75; }
.canvas-empty svg .v { stroke: var(--valley); stroke-dasharray: 4 3; }
.canvas-empty p { margin: 2px 0; max-width: 42ch; }

/* ---------- the run card (pipeline.js renderProgress) ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--accent) inset; } 50% { box-shadow: 0 0 0 1px var(--accent) inset, 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.spinner { display: inline-block; width: 20px; height: 20px; border: 2.5px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; flex: 0 0 auto; vertical-align: -5px; }
.spinner.sm { width: 12px; height: 12px; border-width: 2px; vertical-align: -1px; }
.pcard { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 16px; background: var(--panel); box-shadow: var(--shadow-sm); }
.pcard.live { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--panel); }
.pcard.tone-pass { border: 1px solid color-mix(in srgb, var(--sim) 50%, transparent); background: var(--sim-bg); }
.pcard.tone-open { border: 1px dashed var(--warn); background: var(--warn-bg); }
.pcard.stopped { border: 1px dashed var(--failed); }
.pc-head { display: flex; align-items: center; gap: 12px; }
.pc-title { flex: 1; min-width: 0; }
.pc-title b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.015em; }
.pc-title small { display: block; }
.pc-time { font: 600 18px var(--mono); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.pc-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.pc-icon.ok { background: var(--sim); color: var(--panel); }
.pc-icon.open { background: var(--warn); color: var(--panel); }
.pc-icon.bad { background: var(--failed); color: var(--panel); }
.pc-bar { margin-top: 12px; }
.pc-bar progress { width: 100%; height: 6px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: var(--sunk); overflow: hidden; display: block; }
.pc-bar progress::-webkit-progress-bar { background: var(--sunk); border-radius: 999px; }
.pc-bar progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width 0.4s; }
.pc-bar progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.pc-bar small { display: block; margin-top: 6px; font-size: 11.5px; }
.cdots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.cdot { width: 12px; height: 12px; padding: 0; border-radius: 3px; border: 1px solid var(--border-strong); background: var(--sunk); cursor: pointer; }
.cdot.met { border: 2px solid var(--sim); background: transparent; }
.cdot.robust { border-color: var(--sim); background: var(--sim); }
.cdot.failed { border: 1px dashed var(--failed); background: transparent; }
.cdot.new { outline: 2px solid var(--accent); outline-offset: 1px; animation: pop 0.3s ease-out; }
.cdot:hover { outline: 2px solid var(--text); outline-offset: 1px; }

/* strip and funnel board */
.strip { margin-top: 12px; }
.pcard .strip { margin-top: 12px; }
.partial { font-size: 11.5px; color: var(--warn); margin: 0 0 4px; }
.pipe { display: flex; gap: 6px; align-items: stretch; }
.stage { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--r); padding: 6px 8px; background: var(--panel); font-size: 11.5px; transition: border-color 0.2s; }
.stage span { color: var(--muted); }
.stage b { display: block; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stage small { display: block; overflow-wrap: anywhere; }
.stage.run { border-color: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.stage.run span::before { content: "● "; color: var(--accent); }
.stage.done span::before { content: "✓ "; color: var(--sim); }
.stage.skipped { opacity: 0.55; border-style: dashed; }
.stage.good { border-color: color-mix(in srgb, var(--sim) 60%, transparent); }
.arrow { align-self: center; color: var(--faint); }
.funnel { margin-top: 10px; }
.board { margin-top: 12px; }
.board summary { font-size: 12.5px; margin-top: 8px; }
.lane { border-top: 1px solid var(--border); padding: 6px 0; }
.lane-head { font-size: 12.5px; }
.cards { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.card { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px 8px; background: var(--panel); color: var(--text); font-size: 11.5px; cursor: pointer; text-align: left; }
.card:hover { border-color: var(--border-strong); background: var(--hover); }
.card small { display: block; color: var(--muted); }
.card .m { font-family: var(--mono); }
.card.met { border-color: var(--sim); }
.card.robust { border: 2px solid var(--sim); background: var(--sim-bg); }
.card.failed { border-style: dashed; border-color: var(--failed); }
.card.miss { opacity: 0.8; }
.none { color: var(--faint); }
.rounds { font-size: 12px; color: var(--muted); padding-left: 18px; margin: 6px 0; }
@media (max-width: 760px) { .pipe { flex-wrap: wrap; } .arrow { display: none; } .stage { flex: 1 1 45%; } }

/* ---------- Spark's summary, follow-up ---------- */
.rail { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
#rail .rail { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel);
  box-shadow: var(--shadow-sm); border-left: 3px dashed var(--pred); }
#rail .rail .lbl { margin-top: 0; }
#rail .rail:has(.narration) .headline { display: none; }  /* the run card states the verdict; Spark explains it */
.rail .headline { margin: 4px 0; }
.narration { line-height: 1.6; font-size: 13.5px; }
a.fact { color: var(--text); text-decoration: underline dotted var(--accent); text-underline-offset: 3px; font-family: var(--mono); font-size: 0.9em; }
a.fact:hover { background: var(--accent-soft); border-radius: 3px; }
.rounds-rail { padding-left: 18px; margin: 6px 0; font-size: 12.5px; }
.round { margin-bottom: 6px; }
.round .why { margin: 2px 0; }
.round small { display: block; color: var(--muted); }
.reply { font-size: 12.5px; background: var(--sunk); border-radius: var(--r); padding: 8px 12px; }
.after { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.after textarea { min-height: 52px; margin-bottom: 8px; }

/* ---------- the request diagram panel ---------- */
.diagram { margin-top: 14px; }
.diagram-img { display: block; width: 100%; max-width: 640px; height: auto; border: 1px solid var(--border); border-radius: var(--r); background: #fff; }
.diagram .targets { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; }
.diagram .tag { display: inline-block; font-size: 11px; padding: 0 6px; border: 1px solid var(--muted); border-radius: 4px; }
.diagram .tag.soft { border-style: dashed; color: var(--muted); }
.diagram .input { flex: 1; min-width: 0; }

/* ---------- the batch odds (odds.js) and the request generator (generate.js) ---------- */
.odds { display: block; margin: 2px 0; color: var(--muted); }
.odds-all { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--border-strong); background: var(--sunk); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 12px; color: var(--muted); }
.gen { margin: 12px 0; }
.gen-label { display: inline-block; font-weight: 600; font-size: 11px; padding: 2px 10px; margin: 0 0 8px; border: 1px dashed var(--pred);
  color: var(--pred); background: var(--pred-bg); border-radius: 999px; cursor: help; }
.gen-how { margin: 0 0 10px; font-size: 12.5px; }
.gen-prompt { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 11px; padding: 8px 12px; background: var(--sunk); border-radius: var(--r-sm); max-height: 16em; overflow: auto; }
.gen-mismatch { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--warn); background: var(--warn-bg); border-radius: var(--r); font-size: 12px; }
.gen-mismatch p { margin: 2px 0; }
.gen-match { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sim); margin: 0 0 16px; }
.gen-match::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--sim-bg); font-size: 10px; font-weight: 700; }
.tally { margin: 10px 0; font-size: 12px; }
.tally p { margin: 0 0 2px; }

/* ---------- app frame (owner, 2026-11-04): on a wide screen the page never scrolls; each panel scrolls on its own ---------- */
@media (min-width: 1181px) {
  body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  .top { position: relative; flex: 0 0 auto; }
  .message { flex: 0 0 auto; }
  .shell { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .side { position: static; top: auto; height: 100%; max-height: none; }
  .body { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .body > .p { overflow: auto; overscroll-behavior: contain; }
  /* scroll cues (scrollcue.js): an edge that hides content fades out, so a long list never looks complete */
  .side, .body > .p { --fade: 56px; }
  .more-below { -webkit-mask: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
    mask: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent); }
  .more-above { -webkit-mask: linear-gradient(to top, #000 calc(100% - 24px), transparent);
    mask: linear-gradient(to top, #000 calc(100% - 24px), transparent); }
  .more-above.more-below { -webkit-mask: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - var(--fade)), transparent);
    mask: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - var(--fade)), transparent); }
  .body.fresh { align-items: start; }
  .body.fresh > .p { max-height: 100%; }
  .foot { flex: 0 0 auto; margin: 0; max-width: none; padding: 7px 16px; border-top: 1px solid var(--border); background: var(--side);
    font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .foot p { overflow: hidden; text-overflow: ellipsis; }
}
/* a scrollbar that stays drawn: WebKit draws a styled one always; Firefox has only the standard properties */
@supports (-moz-appearance: none) { .side, .body > .p { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } }
.body > .p::-webkit-scrollbar, .side::-webkit-scrollbar { width: 10px; }
.body > .p::-webkit-scrollbar-thumb, .side::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--panel); }
.side::-webkit-scrollbar-thumb { border-color: var(--side); }
.body > .p::-webkit-scrollbar-track, .side::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) { .spinner, .stage.run, .cdot { animation: none; } * { transition: none !important; } }

@media print {
  body { height: auto !important; overflow: visible !important; display: block !important; }
  .top, #intent, .canvas-col, #rail, .foot, .btn, .side { display: none !important; }
  .body > .p { overflow: visible !important; }
  .shell, .body { display: block; padding: 0; }
  .p { border: 0 !important; box-shadow: none; }
}

/* the narrower sidebar (1180px and down): the three filters fit without spilling out of their control */
@media (max-width: 1180px) and (min-width: 761px) {
  .side-filters { margin: 0 0 10px; }
  .chip-f { padding: 4px 4px; font-size: 11.5px; }
}