/* ──────────────────────────────────────────────────────────────
   BioSenseAI shared shell: design tokens, the ground, glass, the header
   bar, pills and buttons. Loaded by every page in webapp/ so the console
   and the simulator cannot drift apart visually.

   Page-specific layout stays in the page.
   ────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────
   BioSenseAI console.

   Brand colours are sampled from the logo and the brand film:
   logo green #169857, bright accent #3ddc84, sage #76be9d, ground #0a0e12.

   The brand green is the INTERFACE accent — logo, buttons, focus, active
   state. It is deliberately not a data-series colour: green beside the
   warm hues a second series needs collides under deuteranopia, and the
   charts already spend green on "kept / passed". Series colours are a
   separate, validated set (blue / amber / violet) that clears colour-vision
   separation and contrast against each mode's own glass surface.
   ────────────────────────────────────────────────────────────── */
:root{
  color-scheme: light dark;

  /* brand */
  --brand:#169857; --brand-deep:#0f7a45; --brand-bright:#2bb96c; --sage:#76be9d;

  /* surfaces — light */
  --bg:#eef3f0; --bg-2:#e2ebe6;
  --glass:rgba(255,255,255,.64); --glass-2:rgba(255,255,255,.46);
  --glass-brd:rgba(255,255,255,.78); --glass-hi:rgba(255,255,255,.9);
  --shadow:0 1px 2px rgba(10,30,20,.05), 0 5px 14px rgba(10,40,25,.055),
           0 14px 34px rgba(10,40,25,.05);
  --shadow-lift:0 2px 4px rgba(10,30,20,.06), 0 10px 24px rgba(10,40,25,.09),
           0 22px 52px rgba(10,40,25,.07);
  --surface-solid:#f4f8f6;

  /* ink */
  --ink:#0d1a14; --ink-2:#44574e; --ink-3:#71847b; --line:rgba(13,26,20,.12);

  /* data series — validated against #f4f8f6 */
  --s1:#1f6fa8; --s2:#b4621f; --s3:#6b4ba8;
  /* state */
  --ok:#15723f; --bad:#a3291f; --warn:#8a5a00; --neutral:#6d7d76;

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r:16px; --r-s:11px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#070b0e; --bg-2:#0c1216;
  --glass:rgba(23,31,36,.58); --glass-2:rgba(30,40,46,.42);
  --glass-brd:rgba(255,255,255,.1); --glass-hi:rgba(255,255,255,.16);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4),
           0 18px 42px rgba(0,0,0,.36);
  --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.5),
           0 26px 60px rgba(0,0,0,.42);
  --surface-solid:#151a1e;
  --brand:#2bb96c; --brand-bright:#3ddc84; --brand-deep:#1d9a57;
  --ink:#e9f1ed; --ink-2:#a7b8b0; --ink-3:#7c8d86; --line:rgba(255,255,255,.1);
  --s1:#4292c9; --s2:#bd7a3c; --s3:#9478cf;
  --ok:#5fc98a; --bad:#ef8178; --warn:#e0b25c; --neutral:#8b9b94;
}}
:root[data-theme="dark"]{
  --bg:#070b0e; --bg-2:#0c1216;
  --glass:rgba(23,31,36,.58); --glass-2:rgba(30,40,46,.42);
  --glass-brd:rgba(255,255,255,.1); --glass-hi:rgba(255,255,255,.16);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4),
           0 18px 42px rgba(0,0,0,.36);
  --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.5),
           0 26px 60px rgba(0,0,0,.42);
  --surface-solid:#151a1e;
  --brand:#2bb96c; --brand-bright:#3ddc84; --brand-deep:#1d9a57;
  --ink:#e9f1ed; --ink-2:#a7b8b0; --ink-3:#7c8d86; --line:rgba(255,255,255,.1);
  --s1:#4292c9; --s2:#bd7a3c; --s3:#9478cf;
  --ok:#5fc98a; --bad:#ef8178; --warn:#e0b25c; --neutral:#8b9b94;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); font-size:17px; line-height:1.6;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
  min-height:100vh; position:relative; overflow-x:hidden;
}
/* The ground: brand gradient wash plus the node field from the brand film.
   The wash carries the brand; the dot field is a whisper of texture, kept
   well under the content so cards, not the backdrop, lead the eye. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(900px 560px at 94% 4%, color-mix(in srgb, var(--sage) 16%, transparent), transparent 56%),
    radial-gradient(760px 520px at 60% 100%, color-mix(in srgb, var(--brand-deep) 11%, transparent), transparent 58%),
    linear-gradient(170deg, var(--bg) 0%, var(--bg-2) 100%);
}
/* A single soft dot field. The two overlaid grid lines it used to carry read
   as graph paper under every card; the dots alone give depth without the
   noise, and the mask fades them before they reach the footer. */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.4;
  background-image:radial-gradient(currentColor .9px, transparent 1.3px);
  background-size:40px 40px;
  color:color-mix(in srgb, var(--ink) 7%, transparent);
  mask-image:radial-gradient(ellipse 120% 70% at 50% -5%, #000 20%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 120% 70% at 50% -5%, #000 20%, transparent 70%);
}

.wrap{max-width:1360px;margin:0 auto;padding:0 20px 72px}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.2}
a{color:var(--brand);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono)} .tnum{font-variant-numeric:tabular-nums}
.mut{color:var(--ink-2)} .dim{color:var(--ink-3)}
.ok{color:var(--ok);font-weight:600} .bad{color:var(--bad);font-weight:600}
.warnc{color:var(--warn);font-weight:600}

/* eyebrow label, straight from the brand film */
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}

/* ── glass ───────────────────────────────────────────────── */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  backdrop-filter:blur(22px) saturate(165%);
  border:1px solid var(--glass-brd);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  position:relative;
  /* Only the properties that change on interaction. */
  transition:box-shadow .2s ease, border-color .18s ease;
}
/* Sections arrive, rather than snapping in: a short rise as the page loads, and
   again when a panel the run fills later (a detail, a result) is unhidden. */
@keyframes bs-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .wrap > section.card,
  .cols > .stack > section.card{
    animation:bs-rise .34s cubic-bezier(.22,.61,.36,1) both;
  }
}
/* On the pages whose cards are plain siblings under .wrap (runs, data,
   simulator, the loop tracker) they carry no column gap, so give them the same
   vertical rhythm the two-column pages get — otherwise a card sits flush under
   the one above and the two shadows collide. No effect on the console and quick
   loop, whose .wrap child is the .cols grid, not a section. */
.wrap > section.card ~ section.card{margin-top:20px}
/* A foldable panel's title is a control: it should answer the cursor. The caret
   itself already rotates (page-local); this gives the whole header a quiet tint
   on hover so it reads as clickable before you click it. */
.fold > .head{border-radius:9px;transition:color .15s ease}
.fold > .head:hover h3,.fold > .head:hover h3::before{color:var(--brand)}
/* top highlight: the thing that makes glass read as glass */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, var(--glass-hi), transparent 42%);
  opacity:.5;mix-blend-mode:overlay;
}
@supports not (backdrop-filter:blur(2px)){
  .glass{background:var(--surface-solid)}
}

/* ── header ──────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:40;margin:0 -20px 26px;padding:12px 20px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand img{height:38px;width:38px;display:block;
  filter:drop-shadow(0 2px 7px color-mix(in srgb, var(--brand) 42%, transparent))}
.brand .nm{font-size:19px;font-weight:800;letter-spacing:-.025em;line-height:1}
.brand .nm span{color:var(--brand)}
.brand .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.spacer{flex:1 1 auto}

.pill{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:7px 13px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  border:1px solid currentColor;background:color-mix(in srgb, currentColor 11%, transparent)}
.pill .led{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
  box-shadow:0 0 0 0 currentColor}
.pill.idle{color:var(--ink-3)} .pill.run{color:var(--brand)}
.pill.ok{color:var(--ok)} .pill.warn{color:var(--warn)} .pill.bad{color:var(--bad)}
.live .led{animation:pulse 1.7s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 70%,transparent)}
  70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

button{font-family:inherit}
.btn{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:9px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--glass-2);color:var(--ink);cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .16s, color .16s, transform .16s}
.btn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.stop{margin-left:10px;border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad);
  background:color-mix(in srgb,var(--bad) 7%,transparent)}
.btn.stop:hover:not(:disabled){background:color-mix(in srgb,var(--bad) 14%,transparent)}
/* A project's runs under the picker. A grid row whose text column may shrink
   to nothing: a long objective is cut with an ellipsis (the full text is the
   tooltip) instead of widening the card under the live panel beside it. */
.prunlist{margin-top:12px;min-width:0;max-width:100%;overflow:hidden}
.prunlist .prun{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto auto;
  align-items:center;gap:10px;padding:6px 0;min-width:0;
  border-top:1px solid color-mix(in srgb,var(--ink-3) 18%,transparent)}
.prunlist .prun > *{min-width:0}
.prunlist .pobj{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prunlist .prun .mono{font-size:12px;white-space:nowrap}
/* The comparison inside the list wraps: only a run row's date stays on one line. */
.cmpout{min-width:0;overflow-wrap:anywhere}
.prunlist .rv-status{white-space:nowrap}
.prunlist a{display:inline-block;margin-top:6px}
@media (max-width:40rem){.prunlist .prun{grid-template-columns:minmax(0,1fr) auto auto auto}
  .prunlist .prun .mono,.prunlist .prun .rv-status{display:none}}
.rv-pause{margin:10px 0;padding:12px 14px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent)}
.rv-pause p{margin:6px 0 10px}
.rv-pause .btn.stop{margin-left:10px}
.rv-follow{margin-top:14px}
.rv-follow > .btn.more{margin-left:0}
.rv-follow-box{margin-top:10px;padding:12px 14px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--brand) 40%,transparent);
  background:color-mix(in srgb,var(--brand) 6%,transparent)}
.rv-follow-box textarea,.rv-follow-box input{width:100%;box-sizing:border-box;margin:6px 0;
  font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel, transparent);color:inherit}
.rp-arms{width:100%;border-collapse:collapse;margin:8px 0}
.rp-arms input{width:6.5em;font:inherit;padding:4px 6px;border-radius:6px;
  border:1px solid var(--line);background:transparent;color:inherit}
.round-run{margin-top:14px}
.rp-arms th,.rp-arms td{text-align:left;padding:4px 8px;border-bottom:1px solid var(--line);
  vertical-align:top}
.btn.more{margin-left:10px;border-color:color-mix(in srgb,var(--brand) 55%,transparent);color:var(--brand)}
.btn.more:hover:not(:disabled){background:color-mix(in srgb,var(--brand) 12%,transparent)}
.btn.go{background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  border-color:transparent;color:#fff;font-size:14px;padding:13px 26px;
  letter-spacing:.02em;
  box-shadow:0 2px 10px color-mix(in srgb,var(--brand) 38%,transparent),
             0 10px 28px color-mix(in srgb,var(--brand) 22%,transparent)}
.btn.go:hover:not(:disabled){filter:brightness(1.08);color:#fff;
  box-shadow:0 4px 16px color-mix(in srgb,var(--brand) 48%,transparent),
             0 14px 36px color-mix(in srgb,var(--brand) 28%,transparent)}

/* ── mode switch ─────────────────────────────────────────── */
/* Two modes, one shell: the console runs the loop, the simulator lets a person
   turn the same reactor's knobs by hand. */
.modes{display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  border:1px solid var(--line);background:var(--glass-2)}
.modes a{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:7px 14px;border-radius:999px;color:var(--ink-2)}
.modes a:hover{text-decoration:none;color:var(--brand)}
.modes a[aria-current]{background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  color:#fff}

/* ── evidence badges ─────────────────────────────────────── */
/* Six classes, and the point of the set is that they stay apart. A derived
   analysis over somebody's own FACS table is a DERIVED ANALYSIS whose source is
   PRIVATE — two badges, never one that silently merges them. */
.ev{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid color-mix(in srgb,currentColor 45%,transparent);
  background:color-mix(in srgb,currentColor 11%,transparent)}
.ev::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ev.published_literature{color:var(--s3)}
.ev.public_dataset{color:var(--s1)}
.ev.private_user_dataset{color:var(--warn)}
.ev.derived_analysis{color:var(--brand)}
.ev.simulation{color:var(--ink-3)}
.ev.synthetic_fixture{color:var(--ink-3)}
.ev.mixed{color:var(--warn)}
.ev.real_measurement{color:var(--ok)}
/* Visibility is its own badge, because it is its own fact. */
.ev.vis-private{color:var(--bad)}
.ev.vis-public{color:var(--ink-3)}
.ev-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ── dataset rows ────────────────────────────────────────── */
.ds{padding:11px 0;border-bottom:1px solid var(--line)}
.ds:last-child{border-bottom:0}
.ds .t{font-size:14.5px;font-weight:600;line-height:1.35}
.ds .m{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:4px}
.ds .ev-row{margin-top:7px}
.ds .gap{font-size:12.5px;color:var(--warn);margin-top:5px}

/* ── discovery: the primary workflow ─────────────────────────────────────
   Added for the structured discovery form, the runtime badge, the stage
   ticks, the protocol panel and the glossary popover. Everything below uses
   the tokens above, so light and dark both work without a second palette. */

/* The runtime badge. A synthetic run and a real one must never look alike at a
   glance, so the two carry different colour and different weight, and the
   synthetic one says what it is rather than being the quiet default. */
.rt-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;white-space:nowrap;border:1px solid}
.rt-badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.rt-badge.synthetic_demo{color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 11%,transparent)}
.rt-badge.local_real_ai,.rt-badge.remote_real_ai{color:var(--brand);
  border-color:color-mix(in srgb,var(--brand) 55%,transparent);
  background:color-mix(in srgb,var(--brand) 12%,transparent)}
/* The caps a hosted deployment runs under. Neutral, not alarming: a limit the
   reader can see before they hit it is information, not a warning. */
.rt-badge.demo-limits{color:var(--ink-dim);border-color:var(--line);
  background:var(--glass-2)}
/* The operator badge. Distinct from a runtime badge on purpose: it says who is
   running something, never what kind of answer came back. */
.rt-badge.admin{color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 55%,transparent);
  background:color-mix(in srgb,var(--warn) 12%,transparent)}
.rt-badge .role{font-weight:800;opacity:.85}
.limits{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;
  font-size:12.5px}
.limits .note{flex:0 0 100%;font-size:12px;color:var(--ink-dim);margin:0}

/* Runtime chooser: radio cards, because the choice costs money in one case and
   nothing in another, and a dropdown hides that. */
.rt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.rt-opt{position:relative;display:block;padding:13px 15px;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--glass-2);cursor:pointer;
  transition:border-color .15s,background .15s}
.rt-opt:hover{border-color:var(--brand)}
.rt-opt input{position:absolute;opacity:0;pointer-events:none}
.rt-opt .t{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase}
.rt-opt .b{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:5px}
.rt-opt .why{font-size:12px;color:var(--warn);margin-top:7px;line-height:1.5}
.rt-opt:has(input:checked){border-color:var(--brand);
  background:color-mix(in srgb,var(--brand) 9%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.rt-opt:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.rt-opt.off{opacity:.55;cursor:not-allowed}
.rt-opt.off:hover{border-color:var(--line)}

/* Stage ticks: the default user's view of what is happening. */
.stages{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.stg{display:grid;grid-template-columns:1.4rem 1fr;gap:10px;align-items:start;
  padding:7px 0;font-size:14.5px;line-height:1.45}
.stg .m{font-family:var(--mono);font-size:13px;text-align:center;padding-top:1px}
.stg .lbl{font-weight:500}
.stg .bl{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:2px}
.stg[data-status="done"] .m{color:var(--ok)}
.stg[data-status="done"] .lbl{color:var(--ink-2)}
.stg[data-status="current"] .m{color:var(--brand)}
.stg[data-status="current"] .lbl{color:var(--ink);font-weight:650}
.stg[data-status="current"] .m{animation:pulse 1.6s ease-in-out infinite}
.stg[data-status="pending"]{opacity:.5}
.stg[data-status="skipped"]{opacity:.38}
.stg[data-status="pending"] .bl,.stg[data-status="skipped"] .bl{display:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.stg[data-status="current"] .m{animation:none}}

/* The glossary popover. Every badge that has a definition becomes a button that
   shows it: hover, focus and tap all work, because a scientist on a phone
   should not be the one person who cannot find out what DERIVED means. */
/* A term button must look exactly like the badge it replaces, so it resets the
   button chrome and inherits everything typographic from whatever class it was
   given. `font: inherit` would instead override the badge's own font, because
   this rule is later in the cascade than the badge classes — which is how
   MEASURED ended up rendering at body size. */
.term{border:0;background:none;padding:0;margin:0;color:inherit;cursor:help;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
/* Deliberately no font properties above. A term button carries the badge class
   it replaces (.ev, .et, .tag, .cls), and that class owns the typography; any
   font rule here would beat it, because this block is later in the cascade. A
   class rule is still enough to beat the browser's own button font. */
.term-plain{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase}
.term:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.gloss{position:fixed;z-index:70;max-width:22rem;padding:13px 15px;border-radius:12px;
  background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);border:1px solid var(--glass-brd);
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .12s}
.gloss.on{opacity:1;visibility:visible}
.gloss h5{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand);margin:0 0 6px}
.gloss .s{font-size:14px;font-weight:600;line-height:1.45;margin:0 0 6px}
.gloss .l{font-size:13px;color:var(--ink-2);line-height:1.6;margin:0}

/* Protocol panel: the recommended process, stage by stage. */
.proto-stage{border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;
  margin-bottom:12px}
.proto-stage > h4{font-size:14.5px;margin:0 0 3px}
.proto-stage > .goal{font-size:12.5px;color:var(--ink-3);margin:0 0 11px}
.prow{display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr);gap:12px;
  align-items:baseline;padding:8px 0;border-top:1px dotted var(--line);font-size:14px}
.prow:first-of-type{border-top:0}
.prow .nm{font-weight:500}
.prow .vals{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.prow .vals .to{color:var(--brand);font-weight:700}
.prow.changed{background:color-mix(in srgb,var(--brand) 6%,transparent);
  margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:7px}
.prow .tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.tag{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 6px;border-radius:4px;border:1px solid var(--line);
  color:var(--ink-3);white-space:nowrap}
.tag.reported{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.tag.adapted{color:var(--s1);border-color:color-mix(in srgb,var(--s1) 45%,transparent)}
.tag.design_choice{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.tag.gap{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 55%,transparent);
  background:color-mix(in srgb,var(--bad) 10%,transparent)}
.tag.de_novo_ai,.tag.expert_declared{border-style:dashed;color:var(--warn)}
.tag.not_modelled,.tag.no_simulator{opacity:.75}

/* The hypothesis ledger: what survived, and what did not. */
.ledger{width:100%;border-collapse:collapse;font-size:13.5px}
.ledger th{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
.ledger td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top;
  line-height:1.5}
.ledger tr.dropped{color:var(--ink-3)}
.ledger tr.dropped .st{color:var(--bad)}
.ledger .st{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap}
.ledger tr.kept .st{color:var(--ok)}

/* Form furniture for the discovery request. */
.fields{display:grid;gap:14px}
.fld > label,.fld > .lab{display:block;font-family:var(--mono);font-size:10.5px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:6px}
.fld input[type=text],.fld select,.fld textarea{width:100%;font-family:var(--sans);
  font-size:15px;padding:10px 13px;border-radius:10px;border:1px solid var(--line);
  background:var(--glass-2);color:var(--ink)}
.fld input[type=text]:focus,.fld select:focus,.fld textarea:focus{outline:none;
  border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.fld .hint{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:40rem){.two{grid-template-columns:1fr}}
.picks{display:flex;gap:7px;flex-wrap:wrap}
.pick{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:6px 11px;
  border-radius:999px;border:1px solid var(--line);background:var(--glass-2);cursor:pointer}
.pick:has(input:checked){border-color:var(--brand);color:var(--brand);
  background:color-mix(in srgb,var(--brand) 10%,transparent)}
.pick input{margin:0}
.pick .vis{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--warn)}

/* An error the person can act on, rather than a stack trace. */
.state{padding:15px 17px;border-radius:var(--r-s);font-size:14.5px;line-height:1.6;
  border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);
  background:color-mix(in srgb,var(--bad) 8%,transparent)}
.state h4{font-size:14px;margin:0 0 6px;font-family:var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--bad)}
.state code{font-family:var(--mono);font-size:12.5px;background:var(--glass-2);
  padding:2px 6px;border-radius:5px;display:inline-block;margin-top:6px}
/* Information, not an error: where a run came from, what a page is showing.
   It used the error box once, and a restored run looked like a failed one. */
.state.info{border-color:var(--line);background:var(--glass-2)}

/* ── live run viewer ───────────────────────────────────────────────────
   Shared by the Discovery page and the Runs page, because two renderings of
   one run are two chances to disagree about whether it is still working. */
.rv-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rv-engine{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3)}
.rv-status{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink-2);white-space:nowrap}
.rv-status.go{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 50%,transparent);
  background:color-mix(in srgb,var(--brand) 10%,transparent)}
.rv-status.ok{color:var(--brand)}
.rv-status.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.rv-status.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}

/* Indeterminate on purpose. It means "the system is active" and nothing else:
   a percentage here would be invented, and invented progress is worse than
   none. */
.rv-bar{position:relative;height:3px;margin:14px 0 2px;border-radius:999px;
  background:color-mix(in srgb,var(--brand) 14%,transparent);overflow:hidden}
.rv-bar-run{position:absolute;inset:0 auto 0 0;width:38%;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  animation:rv-sweep 1.7s cubic-bezier(.45,0,.55,1) infinite}
@keyframes rv-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){
  .rv-bar-run{animation:rv-pulse 2s ease-in-out infinite;width:100%}
  @keyframes rv-pulse{0%,100%{opacity:.35}50%{opacity:1}}
}

.rv-stats{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:14px}
.rv-stat .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.rv-stat .v{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.rv-note{font-size:13px;color:var(--ink-3);margin:12px 0 0;max-width:68ch}
.rv-actions{margin-top:14px}

.agents{display:flex;flex-direction:column;gap:2px}
.agent{display:grid;grid-template-columns:1.5rem 1fr;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.agent:last-child{border-bottom:0}
.agent .tick{font-size:13px;color:var(--ink-3);line-height:1.5}
.agent.running .tick{color:var(--brand)}
.agent.complete .tick{color:var(--brand);opacity:.75}
.agent.failed .tick{color:var(--bad)}
.agent .t{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.agent .s{font-size:13px;color:var(--ink-2)}
.agent.running .s{color:var(--brand)}
.agent .b{font-size:12.5px;color:var(--ink-3);margin-top:2px;word-break:break-word}

.tlbox{max-height:18rem;overflow:auto;scrollbar-width:thin;font-size:13.5px}
.tl{display:grid;grid-template-columns:3.4rem 1fr;gap:10px;padding:5px 0}
.tl .at{font-family:var(--mono);font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tl.limitation .tx{color:var(--warn)}
.tl.agent .tx{color:var(--ink)}
.tl.artifact .tx{color:var(--brand)}
.tl.error .tx{color:var(--bad)}

.lims{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.lim{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);
  background:color-mix(in srgb,var(--warn) 7%,transparent)}
.lim .tx{font-size:13.5px;line-height:1.5}

/* The global indicator: AI is working somewhere else in the application. */
.beacon{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  padding:6px 12px;border-radius:999px;color:var(--brand);
  border:1px solid color-mix(in srgb,var(--brand) 50%,transparent);
  background:color-mix(in srgb,var(--brand) 10%,transparent)}
.beacon .pulse{width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:rv-blink 1.6s ease-in-out infinite}
@keyframes rv-blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.beacon .pulse{animation:none}}

/* ── project detail: a workspace, not a management screen ─────────────── */
.pdetail{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:13px;
  background:var(--glass-2)}
.pfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:10px 18px}
.pf .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.pf .v{font-size:14px}
.prun{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0;
  border-bottom:1px solid var(--line)}
.prun:last-child{border-bottom:0}
.phyp{font-size:13.5px;margin:6px 0;color:var(--ink-2)}

/* A claim level is what tells a reader how much weight a hypothesis carries.
   CANDIDATE is a real scientific output, not a failed QUANTIFIED one, so it is
   styled as a statement of kind rather than as a warning. */
.claim{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink-2)}
.claim.candidate{color:var(--s1);border-color:color-mix(in srgb,var(--s1) 45%,transparent);
  background:color-mix(in srgb,var(--s1) 10%,transparent)}
.claim.quantified{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 50%,transparent);
  background:color-mix(in srgb,var(--brand) 10%,transparent)}
.claim.simulated{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent)}
/* Insights: one foldable section per source; each note folds on its own. */
.ins-sec{border-top:1px solid color-mix(in srgb,var(--ink-3) 20%,transparent);padding:8px 0}
.ins-sec > summary{cursor:pointer;list-style:revert;padding:4px 0}
.ins-sec > summary .ins-t{font-weight:600;color:var(--ink)}
.ins-sub{margin-top:8px}
.ins-sub > summary{cursor:pointer;font-size:12.5px;color:var(--ink-2)}
.ins-pre{margin:6px 0 10px;font-size:13px;color:var(--ink-2)}
.ins-note{margin:0 0 6px;padding:6px 10px;border-radius:6px;
  border-left:2px solid color-mix(in srgb,var(--brand) 45%,transparent);
  background:color-mix(in srgb,var(--brand) 4%,transparent)}
.ins-note > summary{cursor:pointer;font-size:13.5px;line-height:1.4}
.ins-body{margin-top:6px;font-size:13px}
.md-h{font-weight:600;margin:8px 0 4px}
.md-p{margin:0 0 6px}
.insights code{font-family:var(--mono);font-size:.92em}
#papersFound .m{margin:0 0 8px}
#papersFound a{font-family:var(--mono);font-size:12px}
.notest{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  color:var(--ink-3)}
/* How far to trust a recommendation: three segments, the reasons under them. */
.confbox{margin:8px 0 10px;padding:10px 12px;border:1px solid var(--line,rgba(0,0,0,.08));border-radius:8px}
.confhead{display:flex;align-items:center;gap:10px}
.confbar{display:inline-flex;gap:3px}
.confbar span{width:26px;height:8px;border-radius:2px;background:color-mix(in srgb,var(--ink-3) 25%,transparent)}
.confbar.high span.on{background:var(--brand)}
.confbar.moderate span.on{background:var(--warn)}
.confbar.low span.on{background:var(--ink-3)}
.confbox li.contra{color:var(--bad)}
/* A best guess's confidence, worded and toned so it never reads as a measurement. */
.conf{margin-left:8px;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.04em;padding:1px 6px;border-radius:4px;border:1px dashed currentColor}
.conf.high{color:var(--brand)}
.conf.moderate{color:var(--warn)}
.conf.low{color:var(--ink-3)}

/* A run that produced nothing says what happened. An empty panel reads as a
   scientific conclusion when it is usually a mechanical one. */
.diag{border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);border-radius:12px;
  padding:14px 16px;background:color-mix(in srgb,var(--warn) 6%,transparent)}
.diag h4{margin:0 0 6px;font-size:14.5px;line-height:1.4}
.diag p{margin:6px 0;font-size:13.5px;line-height:1.5}
.diag .said{margin:6px 0 10px;padding:8px 12px;border-left:3px solid var(--line);
  font-size:13.5px;line-height:1.5;white-space:pre-wrap;color:var(--ink-2)}

/* the operator's system check */
.syscheck-row{display:grid;grid-template-columns:1.4em 15em 1fr;gap:8px;padding:6px 0;
  border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.45}
.syscheck-mark{font-family:var(--mono);font-weight:700}
.syscheck-mark.ok{color:var(--ok)}.syscheck-mark.warn{color:var(--warn)}
.syscheck-mark.bad{color:var(--bad)}
@media (max-width:640px){.syscheck-row{grid-template-columns:1.4em 1fr}
  .syscheck-row .dim{grid-column:2}}

/* The Data page's upload form: a compact grid of labelled fields. */
.upform{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 14px;margin:10px 0}
.upform label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2)}
.upform input,.upform select{font:inherit;padding:6px 8px;border-radius:6px;
  border:1px solid color-mix(in srgb,var(--ink-3) 35%,transparent);background:transparent;color:var(--ink)}
.upform .btn{align-self:end;justify-self:start}
#bioInsights p.m.insight{white-space:pre-wrap;margin:0 0 10px;padding:8px 10px;border-radius:4px;
  border-left:2px solid color-mix(in srgb,var(--warn) 45%,transparent)}
#bioInsights .m{margin:0 0 8px}

/* Wild type against an engineered line: small multiples, both series per panel. */
.genoform{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 16px;
  align-items:end;margin:10px 0}
.genoform label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2)}
.genoform .val{font-family:var(--mono);color:var(--ink)}
.genoform input[type=text]{font:inherit;padding:6px 8px;border-radius:6px;background:transparent;
  color:var(--ink);border:1px solid color-mix(in srgb,var(--ink-3) 35%,transparent)}
.bc-legend{display:flex;gap:16px;margin:8px 0;font-size:12.5px;color:var(--ink-2)}
.bc-sw{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.bc-sw.bc-a{background:var(--s1)} .bc-sw.bc-b{background:var(--s2)}
.bc-grid-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.bc-panel{width:100%;height:auto;overflow:visible}
.bc-title{font-size:11px;fill:var(--ink-2);font-family:var(--mono)}
.bc-tick{font-size:9.5px;fill:var(--ink-3);font-family:var(--mono)}
.bc-grid{stroke:color-mix(in srgb,var(--ink-3) 20%,transparent);stroke-width:1}
.bc-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.bc-line.bc-a{stroke:var(--s1)} .bc-line.bc-b{stroke:var(--s2)}
.btn.del{padding:4px 9px;min-width:0;color:var(--ink-3)}
.btn.del:hover{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.refname{font:inherit;padding:6px 8px;border-radius:6px;background:transparent;color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ink-3) 35%,transparent);min-width:220px}

/* ── Protocol as a production chain ─────────────────────────── */
.ptl{margin:14px 0 10px}
.ptl-scroll{overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.ptl-grid{display:grid;gap:6px 8px;align-items:start}
.ptl-head{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:var(--r-s);
  background:color-mix(in srgb,var(--brand) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);min-width:0}
.ptl-head strong{font-size:13px;line-height:1.3}
.ptl-head .days{font-family:var(--mono);font-size:11px;color:var(--brand-deep)}
.ptl-head .goal{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.ptl-lane{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-top:8px;padding-top:6px;
  border-top:1px dashed var(--line)}
.ptl-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
.ptl-val{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;text-align:left;
  font:inherit;color:inherit;cursor:pointer;padding:6px 9px;border-radius:9px;min-width:0;
  background:var(--glass-2);border:1px solid var(--line)}
.ptl-val:hover,.ptl-val.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--glass-2))}
.ptl-val:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ptl-val .nm{font-size:12.5px;font-weight:600}
.ptl-val .v{font-family:var(--mono);font-size:12px}
.ptl-val .was{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.ptl-val .meta{display:inline-flex;align-items:center;gap:5px;margin-left:auto}
.ptl-val .ct{font-size:11px;color:var(--ink-3)}
.ptl-val.fbar{border-left:4px solid var(--s1)}
.ptl-val.fbar.whole{border-left-color:var(--neutral)}
.ptl-val.prov-gap{border-color:color-mix(in srgb,var(--bad) 55%,transparent);
  background:color-mix(in srgb,var(--bad) 7%,transparent)}
.ptl-val.cand{border-style:dashed;cursor:default;opacity:.92;border-left-width:1px}
.pl{font-family:var(--mono);font-size:10px;font-weight:700;padding:1px 5px;border-radius:5px;
  border:1px solid currentColor}
.pl.reported{color:var(--ok)} .pl.adapted{color:var(--s1)}
.pl.design_choice{color:var(--warn)} .pl.gap{color:var(--bad)} .pl.cand{color:var(--s3)}
.confbar.mini span{width:12px;height:6px}
.confbar.none span{background:color-mix(in srgb,var(--ink-3) 18%,transparent)}
.ptl-basis{margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--glass)}
.ptl-basis h4{margin:0 0 6px;font-size:14px}
.ptl-basis .tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.ptl-basis .confline{font-size:12px;color:var(--ink-2);display:inline-flex;gap:5px;align-items:center}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:0;font-size:12.5px}
.kv dt{color:var(--ink-3)} .kv dd{margin:0;overflow-wrap:anywhere}
@media (max-width:560px){.kv{grid-template-columns:1fr}.kv dd{margin-bottom:4px}}
.proto-rows > summary{cursor:pointer;font-size:13px;color:var(--ink-2);margin:12px 0 8px}
.btn.sm{font-size:12px;padding:4px 10px}
.ptl-val.cand .btn.sm{margin-left:auto}
.regform{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px 12px;margin-top:6px;padding-top:8px;border-top:1px dashed var(--line)}
.regform label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--ink-2)}
.regform input,.regform select{font:inherit;font-size:12.5px;padding:5px 7px;border-radius:7px;
  border:1px solid var(--line);background:var(--surface-solid);color:var(--ink);min-width:0}
.regform .btn{align-self:end}
.regform p{grid-column:1/-1;margin:0;font-size:12px}
/* The section switch scrolls sideways on a phone rather than widening the page. */
.modes{max-width:100%;overflow-x:auto;scrollbar-width:none}
.modes::-webkit-scrollbar{display:none}
.modes a{flex:0 0 auto}
.ptl > .caveat{margin:4px 0 12px}
/* ── cell production library (Data page) ─────────────────── */
.libsearch input{width:100%;font:inherit;padding:8px 11px;border-radius:9px;margin:10px 0;
  border:1px solid var(--line);background:var(--surface-solid);color:var(--ink)}
.libpaper{border-top:1px solid var(--line);padding:8px 0}
.libpaper > summary{cursor:pointer;line-height:1.45}
.libvals{margin:6px 0 4px;padding-left:18px;font-size:13px}
.libvals li{margin:6px 0;overflow-wrap:anywhere}
.libvals .quote{font-size:12px;color:var(--ink-2);font-style:italic;margin-top:2px}
.effbox{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px 12px;border:1px dashed var(--line);border-radius:9px;padding:8px 10px 10px;margin:0}
.effbox legend{font-size:11.5px;color:var(--ink-2);padding:0 4px}
.effbox label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--ink-2)}
.effbox input,.effbox select{font:inherit;font-size:12.5px;padding:5px 7px;border-radius:7px;
  border:1px solid var(--line);background:var(--surface-solid);color:var(--ink);min-width:0}
.ptl-basis .regform{margin-top:8px}
#protoEffects{border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin:10px 0;
  font-size:13px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
#protoEffects .ttl{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}
.howsum{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.5;margin:10px 0 14px}
.howtab td{font-size:12.5px;line-height:1.45;vertical-align:top}
.howtab td:last-child{min-width:280px}
@media (max-width:640px){.howtab,.howtab tbody,.howtab tr,.howtab td{display:block}
  .howtab tr:first-child{display:none}.howtab td{border:0;padding:2px 0}
  .howtab tr{border-top:1px solid var(--line);padding:8px 0}.howtab td:last-child{min-width:0}}
.howtab th,.howtab td{text-align:left !important}

/* Fold tables: one scannable line per row; a row opens to its full text. */
.ft{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:13px;table-layout:fixed}
.ft th{text-align:left;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);padding:4px 8px;border-bottom:1px solid var(--line)}
.ft td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top;overflow:hidden}
.ft .ft-car{width:18px;padding-right:0;color:var(--ink-3)}
.ft tr.ft-row{cursor:pointer}
.ft tr.ft-row:hover td,.ft tr.ft-row.open td{background:color-mix(in srgb,var(--brand) 6%,transparent)}
.ft tr.ft-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.ft tr.ft-detail td{background:color-mix(in srgb,var(--brand) 3%,transparent);padding:10px 14px 12px 26px}
.ft .clip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* An open row shows the whole of what its closed line cut short: a round's
   unknown was cut at two lines, and opening it showed the rules but never the
   rest of the question. */
.ft tr.open .clip{display:inline;-webkit-line-clamp:unset;overflow:visible}

.ft-an th:nth-child(2){width:44%}.ft-an th:nth-child(3){width:70px}.ft-an th:nth-child(5){width:74px}
.ft-sub{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-note{font-size:12px;color:var(--ink-3);margin:2px 0 4px}
/* The round plan and analysis panels read at the table's size, not larger. */
#roundInsights,#bioInsights{font-size:13px;line-height:1.5}
#roundInsights p,#bioInsights p{font-size:13px}
.ft-rp th:nth-child(2){width:46%}.ft-rp th:nth-child(4){width:16%}
.ft .tag{white-space:nowrap}
.ft .conf{margin-left:0}
.ft-body{display:grid;gap:6px;line-height:1.5}
.ft-kv{display:grid;grid-template-columns:9.5em 1fr;gap:10px}
.ft-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3);padding-top:2px}
.ft-rules{width:100%;border-collapse:collapse;margin-top:4px}
.ft-rules th{text-align:left;font-family:var(--mono);font-size:10px;color:var(--ink-3);
  padding:3px 8px;border-bottom:1px solid var(--line)}
.ft-rules td{padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top;width:50%}
.ft-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-2, inherit)}
.chip.on{border-color:color-mix(in srgb,var(--brand) 60%,transparent);color:var(--brand)}
/* A value nobody has settled, in the plain plan: shown as a gap rather than
   left out, because an absent line reads as "nothing needed here". */
.chip.gap{border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad);
  border-style:dashed}
/* A recipe line, closed: one line each. An agent writes a lever's whole
   rationale into its label, and a paragraph set as a pill is unreadable — so
   a chip is cut to one line here and the full text is in the open row. */
.chip.ln{max-width:min(26em,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The recipe: the stage and its days are short, and what goes into the vessel
   is the column that needs the room — a dose cut to "0.5 1e…" is no use. */
.ft-recipe th:nth-child(2){width:12em}
.ft-recipe th:nth-child(3){width:9.5em}
.ft-recipe td:nth-child(3){white-space:nowrap}
.ft-recipe td:nth-child(4){width:auto}
.ft-recipe .chip.ln{max-width:100%}
.ft-recipe .ft-chips{gap:5px}
.ln-desc{font-size:12.5px;line-height:1.5;margin-top:3px;max-width:62ch}
@media (max-width:640px){
  .ft-kv{grid-template-columns:1fr;gap:2px}
  .ft-an th:nth-child(5),.ft-an td:nth-child(5){display:none}
}

/* ── The answer: one recommendation, the plan by stage, then the rest ── */
.rec{border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r-s);
  padding:14px 16px;background:var(--glass-2)}
.rec-act{font-size:19px;font-weight:650;line-height:1.35;color:var(--ink)}
.rec-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px 0 2px;font-size:12.5px}
.rec-meta .chip.warn{border-color:var(--warn);color:var(--warn)}
.rec-lab,.plan-lab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:12px 0 4px}
.rec-list{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5}
.rec-test{margin:0;font-size:13.5px;color:var(--ink-2)}
.rec-why{margin-top:10px}
.rec-why > summary,.proto-rows > summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
.plan{margin:6px 0 14px}
.plan-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.plan-stage{border:1px solid var(--line);border-top:3px solid var(--s1);border-radius:var(--r-s);
  padding:10px 12px;background:var(--glass-2);min-width:0}
.plan-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.plan-head .days{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.plan-stage .plan-lab{margin-top:8px}
.plan-none{font-size:12.5px;margin:2px 0}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px}
.plan-item{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:6px 8px;margin:4px 0;
  border:1px solid var(--line);border-radius:9px;font-size:13px;min-width:0}
.plan-grid .plan-item{margin:0}
.plan-item .plan-body{min-width:0;overflow-wrap:anywhere}
.plan-item .v{font-family:var(--mono);font-size:12.5px}
.plan-item .was{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:6px}
.plan-item .meta{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:11px}
.plan-verb{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  padding:1px 6px;border-radius:6px;border:1px solid currentColor;color:var(--brand)}
.plan-item.act-keep{color:var(--ink-2)}
.plan-item.act-lower .plan-verb{color:var(--s2)}
.plan-item.act-gap .plan-verb{color:var(--bad)}
.plan-item.new{border-style:dashed}
.plan-note{margin-top:10px}
.pl.candidate{color:var(--s3)}
/* A factor from the published route, not from this protocol: the left rule
   says at a glance which rows the run set and which the literature did. */
.plan-item.pub{border-left:3px solid var(--s1);border-style:solid}
.plan-item.pub .plan-verb{color:var(--s1)}
/* A citation chip, wherever one appears: the plan, an alternate, a baseline. */
.ref{font-family:var(--mono);font-size:10px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:5px;padding:0 4px;white-space:nowrap}
.plan-item .plan-body{flex:1 1 auto}
.ft.other td:nth-child(2),.ft.other th:nth-child(2){width:58%}
#protocol details ul.tight{font-size:13px;line-height:1.5}

/* ── Two runs compared ── */
.cmpbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0;font-size:12.5px}
.cmpsel{max-width:240px;flex:1 1 160px}
.cmpout:not(:empty){margin-top:10px;border:1px solid var(--line);border-radius:var(--r-s);
  padding:10px 12px}
.cmphead{font-size:13px}
.cmphead.same_inputs_same_answer{border-left:3px solid var(--ok);padding-left:8px}
.cmphead.same_inputs_different_answer{border-left:3px solid var(--warn);padding-left:8px}
.cmphead.different_inputs,.cmphead.not_comparable{border-left:3px solid var(--ink-3);
  padding-left:8px}
.cmpin,.cmpval{font-size:12.5px;padding:4px 0;border-bottom:1px solid var(--line)}
.cmpin:last-of-type,.cmpval:last-of-type{border-bottom:0}

/* ── The same protocol in another vessel ── */
.fmtbox{margin-top:6px}
.fmtfacts{margin-top:6px}
.fmtrow{border:1px solid var(--line);border-radius:9px;padding:6px 8px;margin:4px 0;
  font-size:13px}
.fmtrow .v{font-family:var(--mono);font-size:12.5px}
/* An amount keeps the case it was written in. Uppercasing 'µmol' renders a
   capital Mu that reads as 'MMOL', which is the same number a thousand times
   over — the one typographic accident this page must not have. */
.tag.amount{text-transform:none;letter-spacing:.02em}

.bench{margin-top:10px}
.fmtrow.dont{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.fmtrow.do{border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}

.alt-item{border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;margin:0 0 12px}
.alt-item h4{margin:6px 0 4px}
.alt-item .rp-arms{margin-top:8px}

/* ── Questions to the orchestrator after a run ── */
.ask-item{border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;margin:0 0 10px}
.ask-item.answering{border-style:dashed}
.ask-q{font-weight:600;font-size:14px;white-space:pre-wrap}
.ask-who{font-size:11.5px;margin:2px 0 6px}
.ask-a{font-size:13.5px;line-height:1.55;border-left:3px solid var(--brand);padding-left:10px}
.ask-form textarea{width:100%;min-height:76px;font-size:14px;box-sizing:border-box}
.ask-form .row{display:flex;align-items:center;gap:10px;margin-top:8px}
.pe-box{margin-top:10px}
.pe-box .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.pe-form{margin-top:10px}
.pe-form summary{cursor:pointer;color:var(--ink-2)}
.pe-form textarea{width:100%;min-height:120px;font-family:var(--mono,monospace);font-size:12.5px;box-sizing:border-box}

/* ── State-of-the-art comparison ── */
.sota-standing{border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r-s);
  padding:10px 12px;margin:0 0 10px;font-size:14px}
.sota-standing.departs_from_sota{border-left-color:var(--s3)}
.sota-standing.matches_sota{border-left-color:var(--neutral)}
.sota-standing > div{font-size:13px;color:var(--ink-2);margin-top:4px}

/* ── The plan as a picture, and on its own ── */
.flow-wrap{overflow-x:auto;margin:6px 0 4px;padding-bottom:4px}
.flow{width:100%;height:auto;display:block;font-family:var(--sans)}
.fl-title{font-size:14px;font-weight:650;fill:var(--ink)}
.fl-days{font-family:var(--mono);font-size:11px;fill:var(--ink-3);letter-spacing:.06em}
.fl-none{font-size:12px;fill:var(--ink-3);font-style:italic}
.fl-tank{fill:var(--glass-2);stroke:var(--line);stroke-width:1.5}
.fl-liquid{fill:color-mix(in srgb,var(--s1) 22%,transparent)}
.fl-vessel.changed .fl-tank{stroke:var(--brand);stroke-width:2}
.fl-vessel.changed .fl-liquid{fill:color-mix(in srgb,var(--brand) 28%,transparent)}
.fl-shaft{stroke:var(--ink-3);stroke-width:2}
.fl-impeller{fill:var(--ink-3)}
.fl-motor{fill:var(--ink-3)}
.fl-arrow{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fl-rail{stroke:var(--line);stroke-width:1.5}
.fl-pill{fill:var(--glass-2);stroke:var(--line)}
.fl-pill-t{font-size:12px;fill:var(--ink)}
.fl-pill-v{font-family:var(--mono);font-size:11.5px;fill:var(--ink-2)}
.fl-item.act-keep .fl-pill-t{fill:var(--ink-2)}
.fl-item.act-add .fl-pill,.fl-item.act-raise .fl-pill{stroke:var(--brand);stroke-width:1.5}
.fl-item.act-add .fl-pill-t,.fl-item.act-raise .fl-pill-t{fill:var(--brand);font-weight:600}
.fl-item.act-lower .fl-pill{stroke:var(--s2)} .fl-item.act-lower .fl-pill-t{fill:var(--s2);font-weight:600}
.fl-item.act-gap .fl-pill{stroke:var(--bad)}
.fl-item.new .fl-pill{stroke-dasharray:4 3;stroke:var(--s3)} .fl-item.new .fl-pill-t{fill:var(--s3)}
.rail-extra{display:flex;flex-direction:column;gap:2px;margin-top:18px}
.rail-extra:empty{display:none}
.rail-lab{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:0 12px;margin:16px 0 6px}
.rail-item{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
  padding:7px 12px;border-radius:9px;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;color:var(--ink-2);line-height:1.4}
.rail-item:hover{background:var(--glass-3,rgba(127,127,127,.09));color:var(--ink)}
.rail-item[aria-selected="true"]{background:var(--glass-3,rgba(127,127,127,.12));
  color:var(--ink);font-weight:600}
.rail-item .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  flex:none}
.rail-item.sub{font-size:12.5px;color:var(--ink-3)}
.rail-item .ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rail-item .dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--ink-3)}
.rail-item .dot.go{background:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.rail-item .dot.ok{background:var(--ok)}
.rail-item .dot.bad{background:var(--bad)}
.rail-item .dot.warn{background:var(--warn)}

/* The run in hand: what was asked, and what it is doing. Two columns so the
   question reads as a sentence on the left and the facts line up on the
   right, rather than both competing for the top of the page. */
.runtop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:start}
.runtop-q{font-size:19px;line-height:1.45;font-weight:600;letter-spacing:-.01em;max-width:62ch}
.runtop-sub{font-size:13px;margin-top:7px}
.runtop-r{display:grid;gap:7px;justify-items:end;text-align:right;min-width:0}
.runtop-kv{display:flex;gap:9px;align-items:baseline;font-size:13px}
.runtop-kv .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);border:0;padding:0;margin:0}
.runtop-kv .v{font-variant-numeric:tabular-nums}
.runtop-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:4px}
@media (max-width:46rem){
  .runtop{grid-template-columns:1fr}
  .runtop-r{justify-items:start;text-align:left}
  .runtop-act{justify-content:flex-start}
}

/* The live view, docked in the corner. A run in flight is something to glance
   at, not a column to scroll past: while one is live the panel sits in the
   bottom-left, and clicking its title opens it. */
.cols > .stack > section.card#progressPanel.docked{position:fixed;
  left:288px;bottom:18px;width:330px;max-height:min(62vh,560px);overflow:auto;z-index:35;
  box-shadow:0 18px 50px rgba(0,0,0,.22);padding:14px 16px}
.cols > .stack > section.card#progressPanel.docked.shut{max-height:none;
  overflow:hidden}
.cols > .stack > section.card#progressPanel.docked.shut > :not(.head){display:none}
#progressPanel.docked > .head{margin-bottom:10px;cursor:pointer}
#progressPanel.docked .lab{margin-top:10px}
@media (max-width:64rem){
  .cols > .stack > section.card#progressPanel.docked{left:12px;right:12px;
    width:auto}
}

/* ── The run as a piece of software: the finding, then tabs ──
   The finding is always on screen. Below it one section at a time, chosen
   from a tab bar: the highlighted tabs are what a person acts on, the small
   ones the supplementary record. A section's own renderer decides whether
   it exists (`hidden`); the tabs decide which existing one is shown
   (`tab-off`). */
.tabs{display:flex;flex-direction:column;gap:6px;padding:2px 2px 0}
.tabs-main,.tabs-more{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tab{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;
  padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--glass-2);
  color:var(--ink-2);cursor:pointer;display:inline-flex;gap:7px;align-items:center;
  transition:border-color .15s ease,color .15s ease}
.tab:hover{border-color:color-mix(in srgb,var(--brand) 55%,transparent);color:var(--ink)}
.tab[aria-selected="true"]{border-color:var(--brand);color:var(--brand);
  background:color-mix(in srgb,var(--brand) 10%,var(--glass-2))}
.tab .tab-n{font-weight:500;color:var(--ink-3);letter-spacing:0;font-size:11px;max-width:16em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab[aria-selected="true"] .tab-n{color:inherit;opacity:.8}
.tabs-more .tab{font-size:10.5px;font-weight:600;padding:3px 9px;border-color:transparent;
  background:transparent;color:var(--ink-3)}
.tabs-more .tab:hover{color:var(--ink)}
.tabs-more .tab[aria-selected="true"]{border-color:var(--line);color:var(--ink);background:var(--glass-2)}
.tabs-more::before{content:'more';font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.tabs-more:empty{display:none}
.cols > .stack > section.card.tab-off{display:none}
/* Fold: any section can be put away to its title and opened again. */
.head .fold-btn{margin-left:auto;font-size:11px;padding:3px 9px;flex:none}
.cols > .stack > section.card > .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cols > .stack > section.card.folded > .head{margin-bottom:0}
.cols > .stack > section.card.folded > .head ~ *{display:none}
#protocolPanel.wide .flow-wrap{margin:14px 0 18px}
#protocolPanel.wide .plan-stages{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* The comparison: the field in one table, this recommendation as its last row. */
.cmp{width:100%;border-collapse:collapse;font-size:13px}
.cmp th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);padding:6px 8px;border-bottom:1px solid var(--line)}
.cmp td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp tr.ours td{background:color-mix(in srgb,var(--brand) 8%,transparent);font-weight:600}
.cmp tr.bench td:first-child::after{content:' benchmark';font-family:var(--mono);font-size:9.5px;
  color:var(--brand);letter-spacing:.06em;text-transform:uppercase}
.runinfo .ft-kv{margin:4px 0}
.runinfo blockquote{margin:6px 0 10px;padding:8px 12px;border-left:3px solid var(--brand);
  background:var(--glass-2);border-radius:6px;font-size:14px;line-height:1.5}
.runinfo pre{font-family:var(--mono);font-size:11.5px;white-space:pre-wrap;overflow:auto;
  max-height:22rem;background:var(--glass-2);padding:10px;border-radius:8px}

/* The answer panels stay one per row. Side by side was tried and the columns
   came out too narrow to read: a hypothesis paragraph at 350px is a column of
   two words, which is worse than scrolling.
   The page keeps the two columns it always had. */

/* ── Which route the run researched ── */
.route-chosen{border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--r-s);padding:10px 12px;margin:0 0 10px;font-size:14px}
.route-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:3px}
.route-chosen > div:not(.route-lab){font-size:13px;color:var(--ink-2);margin-top:5px}
.route-chosen .chip{margin-left:8px}
.fit{font-family:var(--mono);font-size:13px;font-weight:700}
.fit.ok{color:var(--ok)} .fit.warn{color:var(--warn)} .fit.bad{color:var(--bad)}
.fit.mut{color:var(--ink-3)}
.ft.routes td:first-child + td,.ft.routes th:first-child + th{width:34%}
.ft.routes td:nth-child(3),.ft.routes th:nth-child(3){width:20%}
.ft.routes td:nth-child(n+4),.ft.routes th:nth-child(n+4){width:42px;text-align:center}
.ft.routes .chip{margin-left:7px;font-size:10px;padding:1px 6px}
.chip.established{border-color:color-mix(in srgb,var(--ok) 50%,transparent);color:var(--ok)}
.chip.emerging{border-color:color-mix(in srgb,var(--warn) 50%,transparent);color:var(--warn)}
.chip.exploratory{border-color:color-mix(in srgb,var(--s3) 50%,transparent);color:var(--s3)}
.need-note{border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:var(--r-s);
  padding:10px 12px;margin:0 0 12px;font-size:13.5px}
.need-note.suboptimal{border-left-color:var(--bad)}
.need-note .trade{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:13px}
.need-note .trade div{margin-top:2px}
.need-note .caveat{margin-top:9px}

/* ── How close to the real cell ── */
.fid-head{border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:var(--r-s);
  padding:10px 12px;margin:0 0 10px;font-size:13.5px}
.fid-head.close{border-left-color:var(--ok)} .fid-head.distant{border-left-color:var(--bad)}
.fid-head.unknown{border-left-color:var(--neutral)}
.fid-head > div:not(.route-lab){margin-top:5px}
.fid-ref{font-size:12.5px;margin-top:8px;padding-top:7px;border-top:1px dashed var(--line)}
.fid-ref > div{margin-top:3px}
.ft.fid td:first-child + td,.ft.fid th:first-child + th{width:34%}
.ft.fid td:nth-child(3),.ft.fid th:nth-child(3){width:16%}

/* ── Naming a run, and folding the list ── */
.prun-list > summary{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);padding:3px 0}
.prun-list[open] > summary{margin-bottom:5px}
.prun .pobj.named{font-weight:600;color:var(--ink)}
.prunlist .prun .btn.del{padding:3px 9px}
.run .run-obj{font-size:12.5px;line-height:1.45;margin-top:3px}
.plan-add{margin-top:8px;width:100%;justify-content:center}
.plan-stage .regform{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:9px}
.plan-item .btn.sm{margin-left:auto;flex:0 0 auto}

/* ── Conditions this run surfaced, as a menu to design a round from ── */
.cond{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cond-row{display:flex;gap:8px;align-items:center}
.cond-sel{flex:1 1 auto;min-width:0}
.cond-detail{margin-top:10px;padding:10px 12px;border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:var(--r-s);font-size:13px}
.cond-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:6px}
.tag.necessary{border-color:var(--ok);color:var(--ok)}
.tag.potential{border-color:var(--s1);color:var(--s1)}
.tag.experimental{border-color:var(--s3);color:var(--s3)}

/* ── What the run could not get, asked of the person who can ── */
.dreq{border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:var(--r-s);
  padding:11px 13px;margin:0 0 12px}
.dreq.answered{border-left-color:var(--ok)} .dreq.declined{border-left-color:var(--neutral)}
.dreq-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;margin-bottom:7px;
  font-size:14px}
.dreq-answer{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);font-size:13px}
.dreq-why{font-size:13px;margin:0 0 4px}
.sec-export{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.sec-export .dim{font-size:12.5px}
.dreq-more summary{cursor:pointer;font-size:12.5px;color:var(--ink-2);margin-top:4px}
.dreq-more[open] summary{margin-bottom:6px}
.dreq-form{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.dreq-form label{display:block;font-size:12.5px;color:var(--ink-2);margin-top:8px}
.dreq-form input,.dreq-form textarea{width:100%;box-sizing:border-box;margin-top:4px}
.dreq-form .hint{font-size:11.5px;margin:3px 0 0}

/* Beyond the apparatus: what a design lifts, its stages to scale, its arms. */
.bt-lift{display:flex;flex-direction:column;gap:4px;margin:6px 0 8px}
.bt-lift-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
.bt-now,.bt-to{border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px}
.bt-now{background:var(--glass-2)}
.bt-to{background:color-mix(in srgb,var(--s1) 10%,transparent);
  border-color:color-mix(in srgb,var(--s1) 35%,transparent)}
.bt-k{font-weight:600;margin-bottom:2px}
.bt-arrow{align-self:center;color:var(--ink-3);font-size:1.2em}
.bt-why{margin:0 0 6px;font-size:.92em}
.bt-band{display:flex;gap:2px;margin:6px 0 2px;border-radius:var(--r-s);overflow:hidden}
.bt-seg{flex:1 1 0;min-width:0;padding:6px 8px;font-size:.86em;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#13221b}
.bt-seg.s0{background:#DCEFE6}.bt-seg.s1{background:#E1E7F7}.bt-seg.s2{background:#F7EBDD}
.bt-seg.s3{background:#ECE3F4}.bt-seg.s4{background:#DDF1F3}.bt-seg.s5{background:#F3EFD9}
.bt-seg.s6{background:#F4E1E6}
.bt-axis{font-size:.85em;margin-bottom:6px}
.bt-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.bt-stage{border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px}
.bt-cond{margin-top:4px;font-size:.92em;overflow-wrap:anywhere}
.bt-cond.gap{padding:3px 6px;border-radius:6px;color:#5c1a10;
  background:repeating-linear-gradient(45deg,#f6d4cf 0 6px,#fbeeea 6px 12px)}
@media (max-width:640px){.bt-lift-row{grid-template-columns:1fr}.bt-arrow{transform:rotate(90deg);justify-self:center}}