/* MicroModeller — the 5D product design language applied to the application.
   Colour and type tokens are the marketing design system's; the layout is the
   product's own: a rail, the models down the left, the model in the middle. */

@font-face { font-family: "Groteska"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/Groteska-400.ttf") format("truetype"); }
@font-face { font-family: "Groteska"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/Groteska-500.ttf") format("truetype"); }
@font-face { font-family: "Groteska"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/Groteska-600.ttf") format("truetype"); }
@font-face { font-family: "Kumbh Sans"; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/KumbhSans-var.ttf") format("truetype-variations"); }

:root {
  --fd-orange: #F35202;
  --fd-orange-hover: #DB4A02;
  --fd-orange-press: #C94301;
  --fd-orange-tint: #FCE3D4;
  --fd-ink: #231F20;
  --fd-white: #FFFFFF;
  --fd-off-white: #F7F5F1;
  --fd-grey-50: #F4F4F3;
  --fd-grey-100: #ECEBEA;
  --fd-grey-200: #E2E2E2;
  --fd-grey-300: #CBCAC8;
  --fd-grey-400: #A9A7A4;
  --fd-grey-500: #837F7C;
  --fd-grey-600: #5C5856;
  --fd-grey-700: #3D3938;
  --fd-success: #2E7D53;
  --fd-warning: #E8A400;
  --fd-danger: #C4361B;

  --font-display: "Groteska", "Kumbh Sans", sans-serif;
  --font-mono: "Kumbh Sans", system-ui, sans-serif;
  --code: ui-monospace, SFMono-Regular, Menlo, monospace;

  --rail: 224px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--fd-white); color: var(--fd-ink);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.55;
  overflow: hidden;
}
body { display: flex; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--fd-orange-tint); }
::placeholder { color: var(--fd-grey-400); }
.hidden { display: none !important; }

/* scrollbars, quietly */
.scroll::-webkit-scrollbar, .workbook::-webkit-scrollbar,
.models::-webkit-scrollbar, .stage::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb, .workbook::-webkit-scrollbar-thumb,
.models::-webkit-scrollbar-thumb, .stage::-webkit-scrollbar-thumb {
  background: var(--fd-grey-200); border-radius: 8px; }

/* ── the rail: navigation and every model, in one dark column ────────── */
.rail {
  width: var(--rail); flex: none; background: var(--fd-ink);
  display: flex; flex-direction: column; padding: 14px 10px 12px;
  color: var(--fd-off-white);
}
.rail-head { display: flex; align-items: center; gap: 9px; padding: 0 4px 14px; }
.rail-logo { width: 20px; height: 20px; object-fit: contain; flex: none; }
.wordmark { font-weight: 600; font-size: 13.5px; color: var(--fd-white); }

.rail-views { display: flex; gap: 4px; }
.rail-item {
  flex: 1; padding: 7px 0 6px; border: none; border-radius: 5px;
  background: rgba(255,255,255,.06); color: var(--fd-grey-400);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.rail-item svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-item span { font-size: 7.5px; font-weight: 600; letter-spacing: .07em; }
.rail-item:hover { color: var(--fd-white); background: rgba(255,255,255,.12); }
.rail-item.is-on { background: rgba(243,82,2,.22); color: var(--fd-white); }
.rail-item.is-on svg { stroke: var(--fd-orange); }

.rail-new { width: 100%; justify-content: center; margin-top: 12px; }

/* ── the models, in the rail ──────────────────────────────────────────── */
.models-label, .strip-label, .tested-label, .panel-label {
  font-size: 9px; font-weight: 600; letter-spacing: .14em;
  color: var(--fd-grey-500); margin: 0; padding: 16px 4px 6px;
}
/* The models scroll; the account menu below them stays put. */
.model-list {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-height: 0; overflow-y: auto;
}
.model-item {
  position: relative; padding: 7px 22px 7px 9px; border-radius: 5px;
  cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  color: var(--fd-grey-300);
}
.model-item:hover { background: rgba(255,255,255,.07); color: var(--fd-off-white); }
.model-item.is-on {
  background: rgba(255,255,255,.12); color: var(--fd-white);
  box-shadow: inset 2px 0 0 var(--fd-orange);
}
.model-item .name { font-size: 12px; font-weight: 500; line-height: 1.3; }
.model-item .meta { font-size: 10px; color: var(--fd-grey-500); }
.model-item .tag {
  font-size: 8px; letter-spacing: .1em; font-weight: 600;
  color: var(--fd-grey-400); border: 1px solid var(--fd-grey-700);
  border-radius: 3px; padding: 0 4px; align-self: flex-start;
}
.model-remove {
  position: absolute; top: 5px; right: 4px; width: 18px; height: 18px;
  border: none; border-radius: 4px; background: none; line-height: 1;
  color: var(--fd-grey-500); font-size: 15px; padding: 0; opacity: 0;
}
.model-item:hover .model-remove { opacity: 1; }
.model-remove:hover { background: rgba(255,255,255,.14); color: #FF8A63; }
.model-confirm {
  margin-top: 6px; padding: 7px 8px; border-radius: 4px;
  background: rgba(0,0,0,.35); border: 1px solid var(--fd-grey-700);
  font-size: 10.5px; color: var(--fd-grey-300);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.model-confirm button {
  border: 1px solid var(--fd-grey-600); border-radius: 3px;
  background: transparent; color: var(--fd-grey-300);
  font-size: 10px; font-weight: 600; padding: 2px 8px;
}
.model-confirm-yes { color: #FF8A63; border-color: #FF8A63 !important; }
.model-confirm-no:hover { border-color: var(--fd-white) !important; color: #fff; }

/* ── the stage ────────────────────────────────────────────────────────── */
.stage { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--fd-orange); color: #fff; border: none; border-radius: 4px;
  padding: 7px 12px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.btn-primary:hover { background: var(--fd-orange-hover); }
.btn-primary:disabled { background: var(--fd-grey-300); cursor: default; }
.btn-primary svg { width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-ghost {
  background: transparent; border: 1px solid var(--fd-grey-300); border-radius: 4px;
  padding: 6px 11px; font-size: 11px; font-weight: 500; color: var(--fd-ink);
}
.btn-ghost:hover { border-color: var(--fd-ink); }

/* ── start screen ─────────────────────────────────────────────────────── */
.start { flex: 1; overflow-y: auto; }
.start-inner { max-width: 860px; padding: 30px 32px 90px; }
h1 { font-family: var(--font-display); font-weight: 600; font-size: 28px;
  line-height: 1.1; margin: 0; }

.prompt-card {
  margin-top: 14px; background: #fff; border: 2px solid var(--fd-ink);
  border-radius: 6px; box-shadow: 4px 4px 0 var(--fd-grey-200); padding: 14px 16px;
}
.prompt-card textarea {
  width: 100%; border: none; outline: none; resize: vertical;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--fd-ink);
}
.prompt-row { display: flex; align-items: center; gap: 12px; margin-top: 10px;
  border-top: 1px solid var(--fd-grey-100); padding-top: 10px; }
.hint { flex: 1; font-size: 10.5px; color: var(--fd-grey-500); }

.tested { margin-top: 30px; }
.tested-label { border-top: 1px solid var(--fd-grey-200); margin: 0; padding: 12px 0 8px; }
.tested-list { display: flex; flex-direction: column; }
.tested-item {
  display: flex; align-items: baseline; gap: 14px; padding: 11px 8px;
  border-bottom: 1px solid var(--fd-grey-100); cursor: pointer;
}
.tested-item:hover { background: var(--fd-grey-50); }
.tested-item .n { font-family: var(--font-display); font-weight: 600; font-size: 18px;
  color: var(--fd-orange); width: 26px; flex: none; }
.tested-item .t { font-weight: 500; width: 200px; flex: none; }
.tested-item .d { flex: 1; font-size: 12px; color: var(--fd-grey-600); }
.tested-item .flag { font-size: 8.5px; letter-spacing: .1em; font-weight: 600;
  padding: 1px 5px; border-radius: 3px; }
.flag.ok { background: #E4F0E9; color: var(--fd-success); }
.flag.closer { background: var(--fd-orange-tint); color: var(--fd-orange-press); }

/* ── a model ──────────────────────────────────────────────────────────── */
/* The model scrolls as one column, so the workbook is always reachable
   however tall the panel above it has grown. */
.model { flex: 1; display: flex; flex-direction: column; min-height: 0;
  overflow-y: auto; }
/* A flex column squashes its children to fit by default, which in a column
   that scrolls is exactly wrong: everything gets shorter than it should be
   instead of the column getting longer. Each band keeps its own height. */
.model > * { flex: none; }
/* Which model is open stays on screen while the rest of it scrolls past. */
.model-head {
  position: sticky; top: 0; z-index: 30; background: var(--fd-white);
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 24px 12px; border-bottom: 1px solid var(--fd-grey-200);
}
.model-title { flex: 1; min-width: 0; }
.model-title h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px;
  line-height: 1.1; margin: 0; }
.model-sub { font-size: 11px; color: var(--fd-grey-500); margin-top: 3px; }
.model-actions { display: flex; gap: 8px; align-items: center; }

/* version strip */
.strip {
  display: flex; align-items: stretch; gap: 0; overflow-x: auto;
  padding: 12px 24px 10px; border-bottom: 1px solid var(--fd-grey-200);
  background: var(--fd-off-white);
}
.version { display: flex; align-items: flex-start; flex: none; }
.version-dot {
  width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--fd-grey-400);
  background: var(--fd-white); margin-top: 3px; flex: none;
}
.version.is-on .version-dot { border-color: var(--fd-orange); background: var(--fd-orange); }
.version-line { height: 2px; background: var(--fd-grey-300); flex: 1;
  min-width: 26px; margin-top: 8px; }
/* a version that carried on from an older one, not from the one beside it */
.version-line.is-fork { background: none; min-width: 34px;
  border-top: 2px dashed var(--fd-grey-300); height: 0; }
.version-body { padding: 0 10px 0 7px; max-width: 200px; cursor: pointer; }
.version-label { font-size: 11px; font-weight: 500; line-height: 1.35; }
.version.is-on .version-label { color: var(--fd-orange-press); }
.version-time { font-size: 9.5px; color: var(--fd-grey-400); margin-top: 1px; }
.version-branch { font-size: 9px; color: var(--fd-grey-400); }

/* what this version was asked for */
.asked {
  padding: 9px 24px; border-bottom: 1px solid var(--fd-grey-200);
  background: var(--fd-white); font-size: 12px;
}
.asked-typed { display: flex; align-items: baseline; gap: 10px; }
.asked-label {
  font-size: 8.5px; font-weight: 600; letter-spacing: .14em;
  color: var(--fd-grey-400); flex: none;
}
/* Two lines at most: a long brief must not push the workbook off screen.
   The rest is behind "the whole brief". */
#asked-text {
  flex: 1; min-width: 0; color: var(--fd-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.asked-toggle {
  border: none; background: none; padding: 0; flex: none;
  font-size: 10.5px; color: var(--fd-orange); text-decoration: underline;
}
.asked-toggle:hover { color: var(--fd-orange-press); }
.asked-brief {
  margin-top: 8px; padding: 9px 11px; border-radius: 4px;
  background: var(--fd-grey-50); border: 1px solid var(--fd-grey-200);
  font-size: 11.5px; line-height: 1.6; color: var(--fd-grey-700);
  max-height: 150px; overflow-y: auto; white-space: pre-wrap;
}

/* a model that came from a file: the file, attached to it */
.from-file { padding: 12px 24px 14px; border-bottom: 1px solid var(--fd-grey-200); }
.from-file.is-busy { opacity: .6; pointer-events: none; }
.attach {
  display: flex; align-items: center; gap: 12px; max-width: 640px;
  padding: 10px 12px; border: 1.5px solid var(--fd-ink); border-radius: 5px;
  background: #fff; box-shadow: 3px 3px 0 var(--fd-grey-200);
}
.attach-icon svg {
  width: 20px; height: 20px; flex: none; fill: none; stroke: var(--fd-orange);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.attach-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.attach-name {
  font-family: var(--code); font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-meta { font-size: 10.5px; color: var(--fd-grey-500); }

/* Reading the model back into a brief. The progress bar this borrows is
   drawn for the dark panel, so the track and the label take light-background
   colours here or there is nothing to see. */
.converting { max-width: 640px; margin-top: 12px; }
.convert-progress { max-width: none; }
.convert-progress .progress-label { color: var(--fd-grey-500); }
.convert-progress .progress-count { color: var(--fd-grey-500); }
.convert-progress .progress-track { background: var(--fd-grey-200); }
.brief-said {
  margin-top: 7px; font-size: 11.5px; color: var(--fd-grey-600);
  font-variant-numeric: tabular-nums; white-space: pre;
}
.brief-missed { max-width: 640px; margin-top: 12px; }
.brief-missed-head {
  font-size: 12.5px; font-weight: 600; color: var(--fd-danger);
}
.brief-missed-body {
  font-size: 11.5px; color: var(--fd-grey-600); margin-top: 5px;
}
.brief-missed-diff {
  font-family: var(--code); font-size: 11px; line-height: 1.5;
  margin: 7px 0 0; padding: 10px 12px; max-height: 220px; overflow: auto;
  background: var(--fd-grey-50); border: 1px solid var(--fd-grey-200);
  border-radius: 5px; white-space: pre-wrap;
}
.attach .btn-primary { flex: none; }


/* the brief: what the model is built from, held here and edited here */
.prompt-bar { padding: 11px 24px 13px; border-bottom: 1px solid var(--fd-grey-200); }
.prompt-bar-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
}
.prompt-bar-label {
  font-size: 8.5px; font-weight: 600; letter-spacing: .14em;
  color: var(--fd-grey-400); flex: none;
}
.prompt-bar-hint { font-size: 10.5px; color: var(--fd-grey-500); flex: 1; }
.prompt-bar-row { display: flex; gap: 10px; align-items: flex-end; }
.prompt-bar textarea {
  flex: 1; border: 2px solid var(--fd-ink); border-radius: 5px; padding: 9px 11px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; resize: none;
  outline: none; box-shadow: 3px 3px 0 var(--fd-grey-200);
  overflow-y: auto;
  /* The box grows to whatever brief is in it, between these. The minimum is
     what it stands at while a version is being fetched and its workbook
     built, which takes seconds: an empty box at its three-row default looks
     collapsed, and the alternative of taking it off the screen until the text
     arrives is worse to watch than one that grows once. */
  min-height: 96px; max-height: 190px;
}
.prompt-bar textarea:focus { border-color: var(--fd-orange); }
.prompt-bar textarea:disabled { background: var(--fd-grey-50); color: var(--fd-grey-500); }

/* ── the engine's side of the model, above the workbook it wrote ─────────
   One panel, three tabs: the program it composed as a schematic, the
   figures it returned, and what those figures do when one of the model's
   own numbers moves. The workbook below stays where it is throughout. */
.panel {
  border-bottom: 1px solid var(--fd-grey-200); background: var(--fd-ink);
  color: var(--fd-off-white); flex: none;
  display: flex; flex-direction: column; min-height: 0;
}
.panel-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 24px 0;
}
.panel-toggle {
  width: 20px; height: 20px; flex: none; border-radius: 3px; padding: 0;
  border: 1px solid var(--fd-grey-600); background: transparent; line-height: 1;
  color: var(--fd-grey-400); font-size: 13px;
}
.panel-toggle:hover { border-color: var(--fd-off-white); color: #fff; }

/* The bordered card with an offset shadow, at button size — the same shape
   as every card in the product. The tab you are on sits on an orange one. */
.panel-tabs { display: flex; gap: 10px; padding: 12px 24px 13px; }
.panel-tab {
  background: var(--fd-white); border: 1.5px solid var(--fd-ink);
  border-radius: 4px; padding: 6px 14px; font-size: 11.5px; font-weight: 600;
  color: var(--fd-ink); box-shadow: 2px 2px 0 var(--fd-grey-200);
}
.panel-tab:hover {
  background: var(--fd-orange-tint); border-color: var(--fd-orange-press);
  color: var(--fd-orange-press);
}
.panel-tab.is-on {
  background: var(--fd-ink); color: #fff; border-color: var(--fd-ink);
  box-shadow: 2px 2px 0 var(--fd-orange);
}
.panel.is-collapsed .panel-tabs, .panel.is-collapsed .pane { display: none; }
.panel.is-collapsed .panel-head { padding-bottom: 10px; }

/* A pane is as tall as what is in it. The cap is only so that a forty-brick
   model cannot push the workbook off the bottom of the screen; past it the
   pane scrolls and the workbook keeps its share. */
/* No cap and no scroller of its own: a pane is as tall as what is in it —
   a deep schematic, twenty assumptions, ten built scenarios — and the page
   scrolls to reach the workbook below. A pane that scrolled inside a fixed
   height hid the bottom of the very thing it exists to show. */
.pane {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 12px 24px 14px;
}
.pane-note {
  font-size: 11.5px; color: var(--fd-grey-400); max-width: 78ch;
  margin-bottom: 12px;
}
/* The panel is dark and everything above it is not, so the shared styles for
   a secondary button, a hint and an error all carry the page's foreground and
   go unreadable in here. They take the panel's instead. */
.pane .btn-ghost {
  border-color: rgba(255,255,255,.28); color: var(--fd-off-white);
}
.pane .btn-ghost:hover { border-color: var(--fd-orange); color: var(--fd-orange); }
.pane .hint { color: var(--fd-grey-400); }
.pane .err { color: #FF8A63; }

/* how it is put together, and beside it what it answered */
/* The schematic has the pane to itself. The figures it produced are one tab
   away, which is where somebody who wants to read them goes; beside the
   picture they competed with it for the width the picture needed. */
.structure-pane { display: block; padding: 0; }
.structure-side { position: relative; min-width: 0; padding: 12px 20px 14px; }
.build-caption {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--fd-white);
}
.build-note { font-size: 11px; color: var(--fd-grey-400); margin-top: 9px; }

.build-note.is-error { color: #FF8A63; }

/* the three steps of a run; only the first carries a number */
.build-steps { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 7px; }
.step-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  border: 1px solid var(--fd-grey-600); background: transparent;
}
.step-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--fd-grey-500);
}
.step-what {
  font-size: 11px; color: var(--fd-grey-500);
  font-variant-numeric: tabular-nums;
}
.step.is-running .step-dot { background: var(--fd-orange); border-color: var(--fd-orange);
  animation: pulse 1s ease-in-out infinite; }
.step.is-running .step-label, .step.is-running .step-what { color: var(--fd-white); }
.step.is-done .step-dot { background: var(--fd-success); border-color: var(--fd-success); }
.step.is-done .step-label { color: var(--fd-grey-400); }
.step.is-done .step-what { color: var(--fd-off-white); }
.step.is-failed .step-dot { background: #FF8A63; border-color: #FF8A63; }
.step.is-failed .step-what { color: #FF8A63; }
/* composing is the claim, so its figure is the one that reads as a figure —
   whether or not it is the first step, which it is not on an import */
.step.is-done.is-compose .step-what {
  color: var(--fd-orange); font-weight: 700; font-size: 13px;
}
@keyframes pulse { 50% { opacity: .35; } }

/* the schematic scrolls sideways: a model grows to the right */
.build-body {
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; padding-bottom: 4px;
}
.build-map { position: relative; min-height: 46px; }
.map-waiting {
  display: flex; align-items: center; gap: 14px; padding: 10px 2px;
  font-size: 12px; color: var(--fd-grey-400);
}
.build-wires { position: absolute; inset: 0; overflow: visible; }
.wire {
  fill: none; stroke: #8F8B88; stroke-width: 1.25;
  stroke-linecap: butt; stroke-linejoin: round;
}
.build-nodes { position: absolute; inset: 0; }

/* ── a progress bar, in the brand's trail ────────────────────────────────
   The Brand Overview's stacked emblem is a mark with three echoes behind it
   in orange, amber and gold, the gold furthest out and each layer a beat
   behind the one in front. Here that is the fill: the head is orange and the
   trail runs back through amber to gold, and on every step the head moves
   first with amber and then gold catching up. */
.progress { max-width: 520px; margin: 2px 0 6px; }
/* Laid over the graph rather than replacing it: the pass that is being
   refined stays visible through the glass, so the panel goes on showing the
   thing being worked on instead of emptying while it is worked on. */
.progress.is-over {
  position: absolute; inset: 0; z-index: 3; max-width: none;
  margin: 0; padding: 0 20px;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(24, 21, 22, .52);
  backdrop-filter: blur(7px) saturate(130%);
  -webkit-backdrop-filter: blur(7px) saturate(130%);
}
.progress.is-over .progress-head, .progress.is-over .progress-track {
  max-width: 520px; width: 100%;
}
.progress-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 7px;
}
.progress-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--fd-grey-400); text-transform: uppercase;
}
.progress-count {
  margin-left: auto; font-size: 11px; color: var(--fd-grey-400);
  font-variant-numeric: tabular-nums;
}
.progress-track {
  position: relative; height: 12px; border-radius: 999px;
  background: rgba(255,255,255,.09); overflow: hidden;
}
/* Three solid colours stacked the way the emblem stacks them: the top copy
   in orange and the echoes stepping down behind it through amber to gold.
   They divide the bar's height, so the whole length of the fill carries the
   stack and it reads as one object however far along it is. */
.progress-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 999px; overflow: hidden; background: #F35202;
  transition: width .42s cubic-bezier(.22, .8, .3, 1);
}
.progress-fill::before, .progress-fill::after {
  content: ""; position: absolute; left: 0; right: 0; height: 33.34%;
}
.progress-fill::before { bottom: 33.33%; background: #FE9A00; }
.progress-fill::after { bottom: 0; background: #FFBC00; }

/* one brick */
.node {
  position: absolute; width: 124px; height: 44px; cursor: pointer;
  background: #2E2A2B; border: 1px solid #4A4544; border-radius: 3px;
  padding: 5px 7px; overflow: hidden;
  transition: border-color .12s, background .12s;
  animation: node-in .2s ease-out both;
}
@keyframes node-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}
/* the ports a line arrives at and leaves from */
.node::before, .node::after {
  content: ""; position: absolute; top: 50%; margin-top: -3px;
  width: 3px; height: 6px; background: #6E6866;
}
.node::before { left: 0; }
.node::after { right: 0; }
.node:hover { border-color: var(--fd-grey-400); background: #383333; }
.node.is-picked { border-color: var(--fd-orange); background: #3A2A22; }
.node-title {
  font-size: 10px; font-weight: 600; line-height: 1.15; color: var(--fd-white);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.node-brick {
  font-family: var(--code); font-size: 8px; color: var(--fd-grey-500);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* a brick whose figure the brief asked for */
.node.is-output { border-color: var(--fd-orange); }
.node.is-output::after { background: var(--fd-orange); }
.node.is-output .node-brick { color: var(--fd-orange); }

/* the brick you clicked: what it was given, reads and writes */
.build-detail { margin-top: 12px; font-size: 11.5px; }
.build-detail:empty { display: none; }
.detail-title {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--fd-white);
}
.detail-code {
  display: block; font-family: var(--code); font-size: 11px; margin-top: 5px;
  color: var(--fd-grey-300); background: #191617; border-radius: 3px;
  padding: 6px 9px; overflow-x: auto; white-space: pre;
}
.detail-cols { display: flex; gap: 34px; margin-top: 9px; flex-wrap: wrap; }
.detail-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: .13em;
  color: var(--fd-grey-500); margin-bottom: 4px;
}
.detail-row {
  display: flex; gap: 12px; padding: 1px 0; color: var(--fd-grey-300);
  font-size: 11px;
}
.detail-row .k { font-family: var(--code); font-size: 10px; color: var(--fd-grey-500); }
.detail-row .v {
  margin-left: auto; color: var(--fd-white); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── the workbook the engine wrote ────────────────────────────────────── */
.workbook-head {
  display: flex; align-items: flex-end; gap: 16px; flex: none;
  padding: 11px 26px 0; background: var(--fd-grey-50);
  border-bottom: 1px solid var(--fd-grey-200);
}
.workbook-label {
  font-size: 9px; font-weight: 700; letter-spacing: .16em;
  color: var(--fd-grey-500); padding-bottom: 8px; flex: none;
}
.workbook-file {
  margin-left: auto; padding-bottom: 8px; flex: none;
  font-family: var(--code); font-size: 10.5px; color: var(--fd-grey-500);
}

/* sheet tabs */
.sheet-tabs { display: flex; gap: 3px; }
.sheet-tab {
  border: 1px solid var(--fd-grey-200); border-bottom: none;
  border-radius: 5px 5px 0 0; background: transparent;
  padding: 6px 14px; font-size: 11px; font-weight: 500; color: var(--fd-grey-600);
  position: relative; top: 1px;
}
.sheet-tab:hover { background: rgba(255,255,255,.7); color: var(--fd-ink); }
.sheet-tab.is-on {
  background: #fff; color: var(--fd-ink); border-color: var(--fd-grey-200);
  box-shadow: inset 0 2px 0 var(--fd-orange);
}

/* ── the workbook, on a sheet ─────────────────────────────────────────── */
/* A definite area of its own, so the sheet keeps its scroller and its
   sticky header row while the page scrolls down to reach it. */
.workbook-wrap { flex: none; display: flex; height: 72vh; min-height: 380px; }
.workbook {
  flex: 1; overflow: auto; background: var(--fd-grey-50);
  /* Nothing above the sheet: what stays put pins to the scroll area's own
     edge, and anything padding puts in front of that edge is a strip the rows
     travel through. The space above the sheet is its own margin instead, so it
     scrolls away. */
  padding: 0 26px 60px 26px;
}
/* the grid sits on a page, with room around it, rather than against the edge */
.sheet {
  display: inline-block; min-width: min(100%, max-content); margin-top: 22px;
  background: #fff; border: 1px solid var(--fd-grey-200); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(35,31,32,.05), 0 8px 24px rgba(35,31,32,.05);
  padding: 18px 20px 22px 20px;
}
/* Wider than the room for it, so it is scrolled sideways. Everything to the
   left of the row labels goes, and they come to rest on the scroll area's own
   edge instead of short of it — a margin there is a strip the rows travel
   through, and the labels stop before reaching the side. A sheet that fits is
   not scrolled and keeps its margin: `.is-wide` is set by the screen, after
   measuring, because whether a sheet fits is not something CSS can ask. */
.workbook.is-wide { padding-left: 0; }
.workbook.is-wide .sheet {
  border-radius: 0 6px 6px 0; border-left: none; padding-left: 0;
}
table.grid {
  border-collapse: separate; border-spacing: 0;
  font-family: Calibri, Carlito, var(--font-mono);
  font-size: 12px; table-layout: fixed;
}
table.grid td {
  border: 1px solid transparent; padding: 2px 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; height: 21px;
  background-clip: padding-box;
}
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.mid { text-align: center; }
/* The row labels stay put when a monthly model is scrolled sideways, and
   the period band stays put when it is scrolled down. Anything that stays
   put has to be opaque: a cell the engine left unfilled would otherwise let
   the rows travelling underneath show through it. A cell that does carry a
   fill sets it inline, which wins over this. */
table.grid td:first-child {
  position: sticky; left: 0; z-index: 2; background-color: #fff;
}
table.grid tr.is-band td {
  position: sticky; top: 0; z-index: 3; background-color: #fff;
}
table.grid tr.is-band td:first-child { z-index: 4; }
table.grid td.clickable { cursor: pointer; }
table.grid td.clickable:hover {
  outline: 2px solid var(--fd-orange); outline-offset: -2px;
}
table.grid td.is-picked {
  outline: 2px solid var(--fd-orange); outline-offset: -2px;
  background-color: var(--fd-orange-tint) !important;
}
table.grid td.is-precedent { background-color: #FFF3E9 !important; }
table.grid td.brick-name { cursor: pointer; }
table.grid td.brick-name:hover {
  text-decoration: underline; text-decoration-color: var(--fd-orange);
  text-underline-offset: 2px;
}
.chart-frame {
  border: 1px solid var(--fd-grey-200); border-radius: 6px; padding: 14px 16px;
  margin: 18px 0 0; background: #fff;
  box-shadow: 0 1px 2px rgba(35,31,32,.05), 0 8px 24px rgba(35,31,32,.05);
  max-width: 620px; font-size: 11px; color: var(--fd-grey-600);
}
.chart-title { font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--fd-ink); margin-bottom: 6px; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-rule { stroke: var(--fd-grey-200); stroke-width: 1; }
.chart-tick { font-family: var(--font-mono); font-size: 9px; fill: var(--fd-grey-500); }
.chart-legend { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.chart-key { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; }
.chart-swatch { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }

/* ── the figures the build returned ───────────────────────────────────────
   The engine's own keys and the engine's own values, a row each. */
.raw { display: flex; flex-direction: column; }
.raw-none { font-size: 11.5px; color: var(--fd-grey-500); }
.raw-row {
  display: flex; align-items: baseline; gap: 14px; padding: 6px 6px 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 3px;
}
.raw-row.is-linked { cursor: pointer; }
.raw-row.is-linked:hover { background: rgba(255,255,255,.07); }
.raw-key { flex: none; width: 132px; min-width: 0; }
.raw-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--fd-white);
  line-height: 1.25;
}
.raw-name {
  display: block; font-family: var(--code); font-size: 9.5px;
  color: var(--fd-grey-500); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.raw-values { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 14px;
  justify-content: flex-end; }
/* Given the whole width, the rows stop short of it rather than throwing a
   key to one edge and its figure to the other. The tab is also taller than
   the strip beside the DAG, because it is the thing being looked at. */
#tab-answers .raw { max-width: 880px; }
.raw-cell { display: flex; flex-direction: column; align-items: flex-end; }
.raw-period {
  font-size: 8px; font-weight: 700; letter-spacing: .08em;
  color: var(--fd-grey-500);
}
.raw-value {
  font-size: 13px; font-weight: 600; color: var(--fd-white);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* a single figure is the answer to the brief, not one period of one */
.raw-cell.is-one .raw-value { font-size: 19px; color: var(--fd-orange); }

/* ── the scenario picker, on the dark panel ───────────────────────────── */
.btn-quiet {
  background: transparent; border: 1px solid var(--fd-grey-600);
  border-radius: 4px; padding: 6px 11px; font-size: 11px; font-weight: 600;
  color: var(--fd-grey-300);
}
.btn-quiet:hover { border-color: var(--fd-off-white); color: #fff; }
#tab-scenarios .card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  box-shadow: none; color: var(--fd-off-white); margin-bottom: 14px;
}
#tab-scenarios .panel-label, #tab-scenarios .pick-field {
  color: var(--fd-grey-500); border: none;
}
#tab-scenarios .sub { color: var(--fd-grey-400); margin: 10px 0; }
#tab-scenarios .pick-select, #tab-scenarios .pick-number,
#tab-scenarios .pick-values {
  background: #191617; color: var(--fd-off-white);
  border-color: rgba(255,255,255,.22);
}
#tab-scenarios table.data th {
  color: var(--fd-grey-500); border-bottom-color: rgba(255,255,255,.2);
}
#tab-scenarios table.data td {
  color: var(--fd-off-white); border-bottom-color: rgba(255,255,255,.08);
}
#tab-scenarios table.data tr.is-base td { background: rgba(243,82,2,.2); }


.pick-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pick-row .panel-label { border: none; margin: 0; padding: 0; width: 132px; flex: none; }
.pick-select {
  font: inherit; font-size: 12.5px; padding: 6px 9px; flex: 1; min-width: 240px;
  border: 1.5px solid var(--fd-ink); border-radius: 4px; background: #fff;
}
.pick-field { display: flex; align-items: center; gap: 7px; font-size: 11.5px;
  color: var(--fd-grey-600); }
.pick-number {
  font: inherit; font-size: 12.5px; width: 78px; padding: 5px 8px;
  border: 1.5px solid var(--fd-grey-300); border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.pick-number:focus { outline: none; border-color: var(--fd-orange); }
.pick-unit { font-size: 12px; font-weight: 600; color: var(--fd-orange-press); }
.pick-values {
  width: 100%; margin-top: 10px; padding: 9px 11px; resize: vertical;
  font-family: var(--code); font-size: 12px; line-height: 1.6;
  border: 1.5px solid var(--fd-ink); border-radius: 4px; outline: none;
}
.pick-values:focus { border-color: var(--fd-orange); }
.pick-buttons { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.pick-row + .pick-row { margin-top: 10px; }

/* ── the audit panel ──────────────────────────────────────────────────── */
.audit {
  width: 360px; flex: none; border-left: 1px solid var(--fd-grey-200);
  background: var(--fd-off-white); overflow-y: auto; padding: 16px 18px 40px;
}
.audit h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px;
  margin: 0 0 2px; line-height: 1.15; }
.audit .value { font-family: var(--font-display); font-size: 26px; font-weight: 600;
  line-height: 1.1; margin: 6px 0 2px; }
.audit .period { font-size: 11px; color: var(--fd-grey-500); }
.audit-close { float: right; border: none; background: none; color: var(--fd-grey-400);
  font-size: 16px; line-height: 1; padding: 0 0 0 8px; }
.panel-label { border-top: 1px solid var(--fd-grey-200); margin: 16px 0 0; padding: 10px 0 6px; }
.formula {
  font-family: var(--code); font-size: 11.5px; background: var(--fd-white);
  border: 1px solid var(--fd-grey-200); border-radius: 4px; padding: 7px 9px;
  word-break: break-all; line-height: 1.5;
}
.row-line { display: flex; gap: 8px; align-items: baseline; padding: 4px 0;
  border-bottom: 1px solid var(--fd-grey-100); font-size: 11.5px; }
.row-line .k { flex: 1; min-width: 0; }
.row-line .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.row-line.link { cursor: pointer; }
.row-line.link:hover .k { color: var(--fd-orange-press); }
.pill {
  display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
  border: 1px solid var(--fd-grey-300); border-radius: 999px; padding: 1px 7px;
  color: var(--fd-grey-600); background: #fff;
}
.pill.brick { border-color: var(--fd-orange); color: var(--fd-orange-press); cursor: pointer; }
.pill.driver { border-color: #2B4A9B; color: #2B4A9B; }

/* ── a brick, full screen ─────────────────────────────────────────────── */
.brick-page { flex: 1; overflow-y: auto; padding: 0 0 60px; }
.brick-head { padding: 20px 28px 14px; border-bottom: 1px solid var(--fd-grey-200);
  display: flex; align-items: flex-start; gap: 16px; }
.brick-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px;
  margin: 0; line-height: 1.1; }
.brick-head .sub { font-size: 12px; color: var(--fd-grey-600); margin-top: 4px; max-width: 60ch; }
.brick-cols {
  display: grid; grid-template-columns: minmax(280px, 2fr) 3fr; gap: 0;
  border: 1px solid var(--fd-grey-200); border-radius: 6px; margin-top: 16px;
  background: #fff; overflow: hidden;
}
.brick-col { padding: 16px 28px; min-width: 0; }
.brick-col + .brick-col { border-left: 1px solid var(--fd-grey-200); }
.toggle { display: flex; gap: 0; margin-bottom: 12px; }
.toggle button { border: 1px solid var(--fd-grey-300); background: #fff;
  padding: 5px 14px; font-size: 11px; font-weight: 600; color: var(--fd-grey-600); }
.toggle button:first-child { border-radius: 4px 0 0 4px; }
.toggle button:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.toggle button.is-on { background: var(--fd-ink); color: #fff; border-color: var(--fd-ink); }
pre.code {
  font-family: var(--code); font-size: 11.5px; line-height: 1.55; margin: 0;
  background: var(--fd-grey-50); border: 1px solid var(--fd-grey-200);
  border-radius: 5px; padding: 12px 14px; overflow-x: auto; max-height: 62vh;
}
/* The compile-time contract, inside the pane the code otherwise fills. Prose,
   so it takes the page's own font back off the monospace around it. */
.contract {
  font-family: var(--font-mono); white-space: normal; font-size: 12px;
  line-height: 1.6; color: var(--fd-grey-700);
}
.contract-heading {
  font-size: 9px; font-weight: 600; letter-spacing: .11em;
  color: var(--fd-grey-500); margin: 14px 0 4px;
}
.contract-heading:first-child { margin-top: 0; }
.contract-rules { margin: 0; padding-left: 16px; }
.contract-rules li { margin: 3px 0; }
.contract-none { font-family: var(--font-mono); color: var(--fd-grey-500); }

.hop { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.hop-card {
  border: 1px solid var(--fd-grey-300); border-radius: 5px; padding: 7px 10px;
  cursor: pointer; background: #fff; font-size: 11.5px;
}
.hop-card:hover { border-color: var(--fd-orange); }
.hop-card .b { font-family: var(--code); font-size: 10px; color: var(--fd-grey-500); }

/* ── the other way in: somebody else's spreadsheet ───────────────────── */
.or {
  display: flex; align-items: center; gap: 14px; margin: 26px 0 16px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--fd-grey-500);
}
.or::before, .or::after {
  content: ""; height: 1px; background: var(--fd-grey-200); flex: 1;
}

.drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 34px 24px; cursor: pointer; text-align: center;
  border: 2px dashed var(--fd-grey-300); border-radius: 6px;
  background: var(--fd-grey-50);
  transition: border-color .12s, background .12s;
}
.drop:hover, .drop.is-over {
  border-color: var(--fd-orange); background: var(--fd-orange-tint);
}
.drop.is-busy { pointer-events: none; opacity: .55; }
.drop-icon svg {
  width: 26px; height: 26px; fill: none; stroke: var(--fd-orange);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.drop-main { font-size: 14px; font-weight: 600; }
.drop-sub { font-size: 11.5px; color: var(--fd-grey-500); max-width: 60ch;
  line-height: 1.5; }


/* ── the brick library ────────────────────────────────────────────────── */
.brick-search {
  width: 100%; max-width: 420px; display: block; margin: 4px 0 12px;
  font-family: inherit; font-size: 13px; padding: 9px 12px;
  border: 2px solid var(--fd-ink); border-radius: 5px; outline: none;
  box-shadow: 3px 3px 0 var(--fd-grey-200);
}
.brick-search:focus { border-color: var(--fd-orange); }
.brick-group { margin-top: 26px; }
.brick-group-head {
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--fd-grey-200); padding-bottom: 6px;
}
.brick-group-head h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  margin: 0; text-transform: capitalize;
}
.brick-group-count { font-size: 10px; color: var(--fd-grey-400);
  letter-spacing: .08em; }
.brick-cards {
  display: grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.brick-card {
  cursor: pointer; transition: transform .12s ease-out, box-shadow .12s ease-out;
  border: 2px solid var(--fd-ink); border-radius: 6px; background: #fff;
  box-shadow: 4px 4px 0 var(--fd-grey-200); padding: 13px 15px 15px;
}
.brick-card-name {
  font-family: var(--code); font-size: 10.5px; color: var(--fd-orange-press);
}
.brick-card-title {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  line-height: 1.15; margin-top: 2px;
}
.brick-card-doc {
  font-size: 11.5px; line-height: 1.5; color: var(--fd-grey-600);
  margin: 7px 0 0;
}
.brick-card-label {
  font-size: 8.5px; font-weight: 600; letter-spacing: .12em;
  color: var(--fd-grey-400); margin-top: 11px;
}
.brick-card-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.chip {
  font-size: 10.5px; border: 1px solid var(--fd-grey-300); border-radius: 3px;
  padding: 1px 6px; background: var(--fd-grey-50); color: var(--fd-grey-700);
}
.brick-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--fd-orange-tint);
}
.chip.driver { border-color: #C5CFE8; background: #EEF2FA; color: #2B4A9B; }

/* ── tables (scenarios, import, library) ──────────────────────────────── */
.wide { flex: 1; overflow-y: auto; padding: 24px 28px 60px; }
.wide h2 { font-family: var(--font-display); font-weight: 600; font-size: 28px; margin: 0 0 4px; }
.wide .sub { color: var(--fd-grey-600); font-size: 12.5px; margin-bottom: 18px; max-width: 70ch; }
table.data { border-collapse: collapse; width: 100%; font-size: 12px; }
table.data th {
  text-align: left; font-size: 9px; letter-spacing: .12em; font-weight: 600;
  color: var(--fd-grey-500); border-bottom: 1px solid var(--fd-grey-300);
  padding: 6px 10px 6px 0;
}
table.data td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--fd-grey-100);
  font-variant-numeric: tabular-nums; }
table.data tr.is-base td { background: var(--fd-orange-tint); }
table.data td.name { font-variant-numeric: normal; }
.card {
  border: 2px solid var(--fd-ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--fd-grey-200);
  padding: 16px 18px; background: #fff; margin-bottom: 16px;
}
.card h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 0 0 4px; }
.card .who { font-size: 11px; color: var(--fd-grey-500); }
.card .prompt-quote { font-size: 11.5px; color: var(--fd-grey-600); margin: 10px 0;
  border-left: 2px solid var(--fd-grey-200); padding-left: 10px; }
.verdict { border-radius: 5px; padding: 10px 12px; font-size: 12px; margin-top: 10px; }
.verdict.good { background: #E4F0E9; color: #1E5637; }
.verdict.bad { background: var(--fd-orange-tint); color: var(--fd-orange-press); }
@keyframes spin { to { transform: rotate(360deg); } }

/* waiting for the workbook to be written and read back */
.preview-wait {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 84px 20px; color: var(--fd-grey-500); font-size: 12.5px;
}
/* Three arcs turning together, round-ended like the bar. */
.preview-spinner {
  width: 34px; height: 34px; display: block;
  animation: spin .9s linear infinite;
}
.preview-spinner circle {
  fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 72 28;
}


.err { color: var(--fd-danger); font-size: 12px; }

/* waiting while the models are built, one real build at a time */
.scenario-waiting {
  display: flex; align-items: center; gap: 12px; padding: 12px 2px 4px;
  font-size: 12.5px; color: var(--fd-grey-300);
}
.scenario-waiting .preview-spinner { width: 22px; height: 22px; flex: none; }

/* ── the ways to ask the model a question, and the sets already asked ─── */
.scenario-views { display: flex; gap: 6px; margin-bottom: 12px; }
.scenario-view {
  border: 1px solid rgba(255,255,255,.22); border-radius: 4px;
  background: transparent; color: var(--fd-grey-400);
  font-family: inherit; font-size: 11px; font-weight: 600; padding: 5px 12px;
}
.scenario-view:hover { color: var(--fd-off-white); border-color: rgba(255,255,255,.4); }
.scenario-view.is-on {
  background: var(--fd-orange); border-color: var(--fd-orange); color: #fff;
}

/* the model's assumptions down the side, a case per column */
.cases-scroll { overflow-x: auto; }
table.cases { border-collapse: collapse; width: 100%; }
table.cases th {
  text-align: left; padding: 6px 10px; font-size: 9px; font-weight: 600;
  letter-spacing: .1em; color: var(--fd-grey-400); white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
table.cases td {
  padding: 3px 10px; font-size: 12px; color: var(--fd-grey-300);
  white-space: nowrap;
}
table.cases td.name { color: var(--fd-off-white); }
table.cases td.is-base-cell {
  color: var(--fd-grey-400); font-variant-numeric: tabular-nums;
}
.case-name {
  width: 108px; background: transparent; border: 1px solid rgba(255,255,255,.22);
  border-radius: 3px; padding: 2px 6px; color: var(--fd-white);
  font-family: inherit; font-size: 11px; font-weight: 600;
}
.case-drop {
  border: none; background: none; color: var(--fd-grey-500);
  font-size: 14px; line-height: 1; padding: 0 4px; margin-left: 4px;
}
.case-drop:hover { color: #FF8A63; }
.case-value {
  width: 104px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16); border-radius: 3px;
  padding: 2px 7px; color: var(--fd-off-white); font-family: inherit;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.case-value:focus { outline: none; border-color: var(--fd-orange); }
/* A number that has been changed is the whole point of the column. */
.case-value.is-changed {
  border-color: var(--fd-orange); color: var(--fd-white); font-weight: 600;
  background: rgba(243,82,2,.14);
}

/* ── the sets of scenarios this model has kept ────────────────────────── */
.kept-list { display: flex; flex-direction: column; gap: 0; }
.kept-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.kept-row:last-child { border-bottom: none; }
.kept-body { flex: 1; min-width: 0; }
.kept-title { font-size: 12.5px; font-weight: 600; color: var(--fd-off-white); }
.kept-sub { font-size: 11px; color: var(--fd-grey-400); margin-top: 2px; }

/* keeping the run just built, under the table it drew */
.keep-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 0 2px;
}
.keep-row .case-name { width: 210px; }
.keep-row .hint, .keep-row .err { flex: 1; min-width: 160px; }

/* ── reading a scenario rather than the model ─────────────────────────── */
.scenario-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px; background: var(--fd-orange-tint);
  border-top: 1px solid var(--fd-orange); border-bottom: 1px solid var(--fd-orange);
}
.scenario-mark {
  font-size: 8.5px; font-weight: 600; letter-spacing: .12em;
  color: var(--fd-orange-press);
}
.scenario-what {
  font-size: 12.5px; font-weight: 600; color: var(--fd-ink); white-space: nowrap;
}
/* The rest of the run, so moving between them costs one click. */
.scenario-others {
  display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0;
  padding-left: 6px; margin-left: 4px;
  border-left: 1px solid rgba(243,82,2,.35);
}
.scenario-chip {
  border: 1px solid rgba(243,82,2,.45); border-radius: 3px;
  background: var(--fd-white); color: var(--fd-orange-press);
  font-family: inherit; font-size: 11px; font-weight: 600;
  padding: 2px 9px; font-variant-numeric: tabular-nums;
}
.scenario-chip:hover { border-color: var(--fd-orange-press); background: #fff6f0; }
.scenario-chip.is-on {
  background: var(--fd-orange); border-color: var(--fd-orange);
  color: var(--fd-white);
}
.scenario-bar .btn-ghost {
  flex: none; border-color: var(--fd-orange); color: var(--fd-orange-press);
  background: var(--fd-white);
}
.scenario-bar .btn-ghost:hover { border-color: var(--fd-orange-press); }

/* how far a scenario moved the figure the model was asked for first */
.data td.delta { font-variant-numeric: tabular-nums; color: var(--fd-grey-500); }
.data td.delta.is-up { color: var(--fd-success); }
.data td.delta.is-down { color: var(--fd-danger); }
/* These sit in the dark panel, so they take its foreground, not the page's. */
.row-open {
  border: 1px solid rgba(255,255,255,.28); border-radius: 3px;
  background: transparent; font-family: inherit; font-size: 10.5px;
  font-weight: 600; padding: 2px 9px; color: var(--fd-off-white);
  margin-right: 10px;
}
.row-open:hover { border-color: var(--fd-orange); color: var(--fd-orange); }
.row-download { font-size: 10.5px; color: var(--fd-grey-400); }
.row-download:hover { color: var(--fd-orange); }

/* ── the account, at the foot of the rail ─────────────────────────────── */
.account { position: relative; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.09); }
.account-button {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 8px; padding: 6px; border: none; border-radius: 5px;
  background: transparent; color: inherit; text-align: left;
}
.account-button:hover, .account.is-open .account-button {
  background: rgba(255,255,255,.09);
}
/* A square with the corner the product gives its controls, not a circle. */
.account-tile {
  width: 30px; height: 30px; flex: none; border-radius: 2px;
  background: var(--fd-white); color: var(--fd-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.account-who { display: grid; min-width: 0; }
.account-name {
  font-size: 12px; font-weight: 600; color: var(--fd-white);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-email {
  font-size: 10px; color: var(--fd-grey-400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-chevron {
  width: 13px; height: 13px; fill: none; stroke: var(--fd-grey-400);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.account-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px);
  background: var(--fd-white); color: var(--fd-ink); border-radius: 6px;
  border: 1px solid var(--fd-grey-200); padding: 5px;
  box-shadow: 0 6px 20px rgba(35,31,32,.28); z-index: 40;
}
.account-menu-head {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 8px; padding: 5px 5px 7px;
}
.account-menu-head .account-tile {
  background: var(--fd-grey-100); color: var(--fd-ink);
  border: 1px solid var(--fd-grey-200);
}
.account-menu-head .account-name { color: var(--fd-ink); }
.account-menu-head .account-email { color: var(--fd-grey-500); }
.account-menu-rule { height: 1px; background: var(--fd-grey-200); margin: 5px -5px; }
.account-menu-item {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 7px 6px; border: none; border-radius: 2px; background: transparent;
  color: var(--fd-ink); font-size: 12px; font-weight: 500; text-align: left;
  text-decoration: none; cursor: pointer;
}
.account-menu-item:hover { background: var(--fd-grey-100); }
.menu-state {
  margin-left: auto; font-size: 9px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 2px;
  background: var(--fd-orange-tint); color: var(--fd-orange-press);
}
.menu-state.is-off { background: var(--fd-grey-100); color: var(--fd-grey-500); }
.account-menu-item svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── the front door ───────────────────────────────────────────────────── */
/* Two surfaces: the painted orange texture carrying the brand, and a neutral
   panel carrying the card. Below 900px the rail becomes a banner across the
   top and the card sits under it, so the orange never fills the screen. */
body.signin {
  display: grid; grid-template-columns: 5fr 7fr; overflow: auto;
}
.signin-brand {
  position: relative; overflow: hidden; padding: 40px;
  background: var(--fd-orange) url("/static/orange-texture.webp") center / cover;
  display: flex; flex-direction: column;
}
.signin-lockup { width: 224px; height: 32px; }
/* The mark as artwork: oversized, and cropped by the panel's own edge. */
.signin-mark {
  position: absolute; right: -64px; bottom: -64px; height: 416px; width: auto;
  pointer-events: none;
}
.signin-tagline { display: none; }

.signin-panel {
  position: relative; overflow: hidden; background: var(--fd-off-white);
  display: grid; place-items: center; padding: 40px;
}
.signin-watermark { display: none; }

.signin-card {
  position: relative; z-index: 1; width: 100%; max-width: 384px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--fd-white); border: 1px solid var(--fd-grey-200);
  border-radius: 10px; padding: 28px 28px 26px;
  box-shadow: 0 1px 2px rgba(16,24,32,.05), 0 18px 40px -28px rgba(16,24,32,.45);
}
.signin-title {
  font-family: var(--font-mono); font-size: 20px; font-weight: 600;
  letter-spacing: -.01em; text-align: center; margin: 0 0 18px;
}
.signin-label {
  font-size: 11px; font-weight: 500; color: var(--fd-grey-500); margin-top: 8px;
}
.signin-card input {
  font-family: inherit; font-size: 13.5px; height: 44px; padding: 0 14px;
  border: 1px solid var(--fd-grey-300); border-radius: 4px;
  background: var(--fd-white); color: var(--fd-ink);
}
/* The application's focus ring is a solid orange border, which on a page whose
   only controls are these two reads as an error. A tinted halo instead. */
.signin-card input:focus {
  outline: none; border-color: #F9A26C;
  box-shadow: 0 0 0 3px rgba(243,82,2,.20);
}
.signin-go {
  height: 44px; margin-top: 22px; border: none; border-radius: 4px;
  background: var(--fd-orange); color: var(--fd-white);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
}
.signin-go:hover { background: var(--fd-orange-hover); }
.signin-go:disabled { background: var(--fd-grey-300); cursor: default; }
.signin-no {
  margin: 12px 0 0; font-size: 12.5px; text-align: center;
  color: var(--fd-danger);
}

@media (max-width: 900px) {
  body.signin { grid-template-columns: none; grid-template-rows: auto 1fr; }
  .signin-brand {
    min-height: 20vh; align-items: center; justify-content: center; gap: 20px;
    padding: 32px;
  }
  .signin-lockup { width: 288px; height: 40px; }
  .signin-tagline {
    display: block; margin: 0; max-width: 20rem; text-align: center;
    font-size: 17px; font-weight: 500; color: rgba(255,255,255,.9);
  }
  .signin-mark { display: none; }
  .signin-watermark {
    display: block; position: absolute; right: -64px; bottom: -64px;
    height: 480px; width: auto; opacity: .08; pointer-events: none;
  }
}