/*
  DecisionOne console styles.

  1. Fonts            self-hosted, SIL OFL (licences in /static/fonts)
  2. Tokens           the Sqwish Labs values from research note 02, light and dark
  3. Base             type, links, focus
  4. Shell            sidebar, top bar, page header
  5. Components       buttons, fields, panels, badges, tabs, code, tables, meters,
                      notices, toasts, empty states, the loader
  6. Pages            playground, models, datasets, fine-tunes, account, admin,
                      welcome, 404
  7. Small screens and reduced motion

  Rules worth keeping: colours only through tokens; no text under 13 px; accents
  (pink, mint, amber) are for dots, bars and fills, never body text on light (use the
  -ink versions for text); each accent has one job: yes/no decisions are pink, single
  choice is mint, scored (ordinal) decisions are amber. States follow the same idea:
  ready and running are mint, waiting (loading, training, tuning) is amber, faults are
  danger, and normal rest (asleep, offline) stays grey. Primary buttons and the page
  you're on are mint. Text on an accent fill is always --on-accent, in both themes.
  Colour comes in a few confident places per page (the result, the recipe cards, the
  page header, status); everything else stays paper and ink. Each component takes one
  accent. Hover changes colour; selection changes shape. Research note 20 and
  docs/design/colour.md explain why.
*/

/* 1. Fonts ------------------------------------------------------------------ */

/* The Source Sans 3 and Crimson Pro files are variable fonts despite the "-300" names. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/source-sans-3-300.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/crimson-pro-300.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Pro";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/crimson-pro-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* 2. Tokens ----------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Neutrals: warm paper, blue-black ink (sqwishai/website globals.css) */
  --bg:          #FCFAF8;  /* hsl(40 33% 98%) page */
  --bg-sunk:     #F7F6F2;  /* hsl(40 25% 96%) sidebar, code, sunk panels */
  --bg-sunk-2:   #F3F1ED;  /* hsl(40 20% 94%) hover on sunk areas */
  --surface:     #FFFFFF;  /* panels and cards */
  --ink:         #14181F;  /* hsl(220 20% 10%) headings, primary text, primary button */
  --ink-2:       #363D49;  /* hsl(220 15% 25%) body text, 10.5:1 */
  --ink-3:       #5C6370;  /* hsl(220 10% 40%) secondary text, eyebrows, 5.8:1 */
  --ink-4:       #676F7E;  /* hsl(220 10% 45%) captions, placeholders, 4.9:1 */
  --ink-faint:   #9196A1;  /* decorative only, never text, 2.9:1 */
  --line:        #DDDFE3;  /* panel borders, rules */
  --line-subtle: #E9EAED;  /* row dividers */
  --line-strong: #8A909B;  /* input borders, 3.2:1 */

  /* Brand accents: dots, bars, fills, highlights. Never text on light. */
  --pink:  #E58ACD;  /* hsl(316 64% 72%) yes/no, first item */
  --mint:  #4ADE80;  /* hsl(142 69% 58%) choose an option, success, interactive */
  --amber: #F5A124;  /* hsl(36 91% 55%) ordered scoring, warning */

  /* Accent inks: text and icons on light surfaces, all AA */
  --pink-ink:  #A8367F;
  --mint-ink:  #297651;
  --amber-ink: #8A5A00;
  --warm-ink:  #7050A3; /* residency, separate from success and warnings */
  --danger:    #B42318;  /* the one non-brand hue; never pink for errors */
  --on-accent: #14181F;  /* text on a pink, mint or amber fill, in both themes: 6.6:1 or better */

  /* Soft fills for badges, notices and recipe cards (matching ink on soft is 4.9:1 or better) */
  --pink-soft:   #FBEAF5;
  --mint-soft:   #E4F7EA;
  --amber-soft:  #FDF1DD;
  --danger-soft: #FDECEA;

  /* Washes: the palest tint, for whole surfaces such as a result card's head (ink-3 on a wash is 5.6:1) */
  --pink-wash:  #FDF4FB;
  --mint-wash:  #EFFCF4;
  --amber-wash: #FEF7EB;

  /* Tints: each accent at 42% on white, for the bars of the less likely outcomes */
  --pink-tint:  #F4CEEA;
  --mint-tint:  #B3F1CA;
  --amber-tint: #FBD8A3;

  /* Primary buttons: mint with ink text (10.2:1; 8.8:1 on hover) */
  --primary:       var(--mint);
  --primary-hover: #45CE79;

  /* The website's strands, drawn faintly behind page headers */
  --strand: rgb(20 24 31 / .16);

  /* The overlay behind the phone menu, the same in both themes */
  --scrim: rgb(11 14 19 / .35);

  /* The octopus sprite's palette for dark pages (the website's hero code) */
  --octo-pink-dark:  #DC78C6;
  --octo-mint-dark:  #52C67A;
  --octo-amber-dark: #E1A844;

  /* Charts: one colour per series, the same on every chart. The focal series (decisions,
     p95, a round that beat your wording) is mint: bright fills with an edge in the mint
     ink, so every bar has a 3:1 outline. Comparators are grey, waiting is amber, and
     only server faults are danger. */
  --chart-fill:    var(--mint);
  --chart-focal:   var(--mint-ink);       /* lines, dots and bar edges */
  --chart-wait:    var(--amber);          /* a wake-up in the timing bar */
  --chart-neutral: rgb(20 24 31 / .55);   /* comparators, other outcomes */
  --chart-track:   rgb(20 24 31 / .065);

  /* Exact Usage brand fills, yellow first (blue-violet first in dark), with a muted grey for Other. */
  --usage-color-0: #FFC436; --usage-color-1: #3DDD8E; --usage-color-2: #E898D9;
  --usage-color-3: #7575F0; --usage-color-4: #3A2434; --usage-color-5: #858585;

  /* Type. Note 02 proposes 12 px labels; the console keeps 13 px as its floor. */
  --font-display: "Crimson Pro", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --text-label: 13px;   /* mono uppercase labels and badges; the minimum size */
  --text-sm:    13px;   /* hints, captions */
  --text-md:    15px;   /* body, inputs */
  --text-lg:    17px;   /* lead text */
  --text-title: 24px;   /* serif panel and empty-state titles */
  --text-page:  36px;   /* serif page titles */
  --text-stat:  44px;   /* serif headline numbers */
  --leading-body: 1.6;
  --tracking-display: -0.02em;
  --tracking-label: 0.12em;

  /* Space (4 px grid) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-22: 88px;
  --container: 1200px;

  /* Radius */
  --radius-xs:   4px;    /* tracks and bars */
  --radius-sm:   6px;    /* inputs, chips (website --radius) */
  --radius-md:   12px;   /* panels, cards */
  --radius-lg:   24px;   /* feature surfaces, segmented controls, code panels */
  --radius-pill: 999px;  /* buttons, badges, nav */

  /* Elevation: borders first, shadows only for floating layers */
  --shadow-raised: 0 1px 3px rgb(20 24 31 / .07);  /* selected tab */
  --shadow-float:  0 20px 60px rgb(0 0 0 / .08);   /* menus, popovers, toasts */
  --halo:          0 0 0 3px rgb(20 24 31 / .06);  /* pulse ring */
  --focus-ring:    2px solid var(--ink);           /* outline-offset: 3px */

  /* Motion */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);  /* entrances, mark hover */
  --ease-std:   cubic-bezier(.22, 1, .36, 1); /* expanders, bars */
  --dur-1: 160ms;       /* colour, underline */
  --dur-2: 200ms;       /* buttons, tabs */
  --dur-bar: 220ms;     /* probability bars growing in */
  --dur-3: 360ms;       /* expand, meters */
  --dur-4: 450ms;       /* header mark */
  --dur-reveal: 700ms;  /* first render fade-up */

  /* Console layout */
  --sidebar-width: 256px;
  --topbar-height: 56px;
  --gutter: 40px;
}

:root[data-theme="dark"] {
  --warm-ink: #BEA2ED;
  --usage-color-0: #7575F0; --usage-color-1: #FFC436; --usage-color-2: #3DDD8E; --usage-color-3: #E898D9;
  color-scheme: dark;
  --bg:          #0B0E13;  /* hsl(220 25% 6%) */
  --bg-sunk:     #12151C;  /* hsl(220 22% 9%) */
  --bg-sunk-2:   #1B1F27;  /* hsl(220 18% 13%) */
  --surface:     #12151C;
  --ink:         #F5F3F0;  /* hsl(40 20% 95%) */
  --ink-2:       #C9C2B6;  /* hsl(40 15% 75%) */
  --ink-3:       #ABB0BA;  /* hsl(220 10% 70%), 8.9:1 */
  --ink-4:       #818898;  /* hsl(220 10% 55%), 5.4:1 */
  --ink-faint:   #5E636E;  /* decorative only */
  --line:        #212630;
  --line-subtle: #171A21;
  --line-strong: #636A77;  /* 3.6:1 */

  --pink:  #E279C6;  --mint: #3DDB77;  --amber: #F5A732;
  --pink-ink: #E279C6; --mint-ink: #3DDB77; --amber-ink: #F5A732;
  --danger: #F2777E;
  --pink-soft: #2F2334; --mint-soft: #183129; --amber-soft: #32291F; --danger-soft: #31232A;
  /* Dark washes are the accent at 11% on the surface, dark tints at 50%: deep, not grey */
  --pink-wash: #29202F; --mint-wash: #172B26; --amber-wash: #2B251E;
  --pink-tint: #7A4771; --mint-tint: #28784A; --amber-tint: #845E27;

  --primary-hover: #64E292;
  --strand: rgb(245 243 240 / .2);

  --chart-neutral: rgb(245 243 240 / .55);
  --chart-track:   rgb(245 243 240 / .08);

  --shadow-raised: 0 1px 3px rgb(0 0 0 / .4);
  --shadow-float:  0 20px 60px rgb(0 0 0 / .45);
  --halo:          0 0 0 3px rgb(255 255 255 / .08);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-bar: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-reveal: 0ms; }
}

/* One accent per decision kind. Components read --kind (fills), --kind-ink (text),
   --kind-soft, --kind-wash (surfaces) and --kind-tint (secondary bars). A recipe card
   takes the kind of its first decision (section 6, Playground). */
.kind-binary  { --kind: var(--pink);  --kind-ink: var(--pink-ink);  --kind-soft: var(--pink-soft);  --kind-wash: var(--pink-wash);  --kind-tint: var(--pink-tint); }
.kind-single  { --kind: var(--mint);  --kind-ink: var(--mint-ink);  --kind-soft: var(--mint-soft);  --kind-wash: var(--mint-wash);  --kind-tint: var(--mint-tint); }
.kind-ordinal { --kind: var(--amber); --kind-ink: var(--amber-ink); --kind-soft: var(--amber-soft); --kind-wash: var(--amber-wash); --kind-tint: var(--amber-tint); }

/* 3. Base ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Keep the scrollbar's space whether or not the page overflows, so the centred content never
   shifts sideways when a panel opens or closes. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink-2);
  font: 400 var(--text-md)/var(--leading-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.25; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2em; }
img, svg { display: block; max-width: 100%; }
.icon { width: 18px; height: 18px; flex: none; }
.text-link .icon, .button .icon { width: 16px; height: 16px; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre, kbd, .mono { font-family: var(--font-mono); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--mint);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-1) var(--ease-std);
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
/* Inside a scrolling track an outside ring is clipped, so there it sits just inside. */
.segmented button:focus-visible, .tablist [role="tab"]:focus-visible { outline-offset: -2px; }

::selection { background: var(--mint-soft); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 50;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--ink); color: var(--bg); text-decoration: none;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: var(--space-3); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--ink-3);
  font: 500 var(--text-label)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--dot, var(--mint));
}
.eyebrow.plain::before { display: none; }

.hint { color: var(--ink-3); font-size: var(--text-sm); line-height: 1.5; }
.muted { color: var(--ink-3); }
.lede { color: var(--ink-2); font-size: var(--text-lg); line-height: 1.55; max-width: 64ch; }

/* 4. Shell ------------------------------------------------------------------ */

/* The sidebar column is painted on the shell, so it runs the full height of long pages. */
.shell {
  display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(90deg, var(--bg-sunk) 0 calc(var(--sidebar-width) - 1px), var(--line) calc(var(--sidebar-width) - 1px) var(--sidebar-width), transparent 0);
}

.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--bg-sunk);
  box-shadow: inset -1px 0 0 var(--line);
  overflow-y: auto;
}

.brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  color: var(--ink); text-decoration: none;
}
.brand-name { display: grid; line-height: 1.1; }
.brand-name strong {
  font: 500 22px/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--ink);
}
.brand-name span { margin-top: 3px; color: var(--ink-3); font: 400 var(--text-sm)/1.2 var(--font-mono); }

/* The header octopus: ink at rest; on hover it blinks and turns mint. */
.mark { width: 26px; height: 26px; flex: none; color: var(--ink); transition: color var(--dur-4) var(--ease-out); }
.mark .eye { transform-box: fill-box; transform-origin: center; }
.brand:hover .mark, .brand:focus-visible .mark { color: var(--mint); }
.brand:hover .mark .eye, .brand:focus-visible .mark .eye { animation: blink var(--dur-4) var(--ease-out); }
@keyframes blink { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }

.nav { display: grid; gap: 2px; }
.nav-label { margin: 0 var(--space-3) var(--space-2); }
.nav a {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 40px; padding: 0 var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  color: var(--ink-3); font-weight: 500; text-decoration: none;
  transition: background var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std);
}
/* Selection is a shape (the raised pill); hover is only a colour. A pointer resting on
   an item after you move on, or a touch screen's sticky hover, can then never look like
   a second selection. */
@media (hover: hover) { .nav a:hover { color: var(--ink); } }
/* The page you're on: a mint pill with its icon in mint ink, the console's one mint in the sidebar. */
.nav a[aria-current="page"] {
  background: var(--mint-soft); border-color: color-mix(in srgb, var(--mint-ink) 22%, transparent);
  color: var(--ink); font-weight: 600;
}
.nav a[aria-current="page"] .icon { color: var(--mint-ink); }
.nav .icon { width: 18px; height: 18px; flex: none; }
.nav .external { margin-left: auto; width: 14px; height: 14px; opacity: .7; }

.sidebar-foot { margin-top: auto; display: grid; gap: var(--space-3); }

.who {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); align-items: center;
  padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface);
}
.avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-sunk-2); color: var(--ink); font: 500 15px/1 var(--font-mono);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.who-name { display: block; color: var(--ink); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-mail { display: block; color: var(--ink-3); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-credits {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--space-2); border-top: 1px solid var(--line-subtle);
  color: var(--ink-3); font-size: var(--text-sm);
}
.who-credits strong { color: var(--ink); font: 500 var(--text-md)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.who-actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); }

.workspace { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--topbar-height); padding: var(--space-2) var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-subtle);
}
.topbar .crumb { flex: 1; min-width: 0; color: var(--ink-3); font: 400 var(--text-md)/1.5 var(--font-body); }
.crumb ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); list-style: none; margin: 0; padding: 0; }
.crumb li { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; }
.crumb li + li::before { content: "/"; color: var(--ink-3); }
.crumb a { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.crumb a:hover, .crumb a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumb [aria-current] { color: var(--ink); font-weight: 500; }
.crumb .crumb-object { min-width: 0; max-width: 100%; flex: 0 1 auto; }
.crumb-object span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .menu-button { display: none; }

main { flex: 1; width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-16); }
main:focus { outline: none; }

.page { animation: arrive var(--dur-reveal) var(--ease-out); }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.page-head {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6);
  margin-bottom: var(--space-8);
}
/* The website's strands and beads, small and still, in the top right of every page
   header: three faint strands (brand/strands.svg as a mask, in --strand) and one bead
   each in pink, mint and amber, the brand's order. The bead positions are the join
   points noted in the SVG, measured from the right edge. Decoration only. */
.page-head::before, .page-head::after {
  content: ""; position: absolute; z-index: -1; top: -12px; right: 0;
  width: min(440px, 100%); height: 64px; pointer-events: none;
}
.page-head::before {
  background: var(--strand);
  -webkit-mask: url("/static/brand/strands.svg") right top / 440px 64px no-repeat;
  mask: url("/static/brand/strands.svg") right top / 440px 64px no-repeat;
}
.page-head::after {
  opacity: .85;
  background:
    radial-gradient(circle at calc(100% - 170px) 18px, var(--pink) 4px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 100px) 34px, var(--mint) 4px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 40px) 50px, var(--amber) 4px, transparent 4.6px);
}
.page-head h1 {
  margin-top: var(--space-3);
  font: 400 var(--text-page)/1.1 var(--font-display); letter-spacing: var(--tracking-display);
}
.page-head h1 em { font-style: italic; }
.page-head .lede { margin-top: var(--space-3); }
.page-head .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Workflow identity: a quiet icon and a readable purpose, aligned with the content. */
.page-identity { display: flex; align-items: center; gap: var(--space-2); }
.page-identity .page-symbol { width: 20px; height: 20px; color: var(--ink-3); }
.page-identity .eyebrow { color: var(--ink-3); font: 500 var(--text-sm)/1.4 var(--font-body); letter-spacing: 0; text-transform: none; }
.page-head:has(.page-identity)::before, .page-head:has(.page-identity)::after { content: none; }
.read-notice:not([hidden]) { margin-bottom: var(--space-5); }
.panel > .read-notice:not([hidden]) { margin: var(--space-4) var(--space-5); }

.section { margin-top: var(--space-12); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.section-head h2 { font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.section-head p { margin-top: var(--space-1); }

/* 5. Components ------------------------------------------------------------- */

/* Buttons: pills with sentence-case labels (a verb and an object, per the voice guide).
   Primary is mint with ink text; secondary is outlined; danger is for irreversible steps. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: var(--radius-pill);
  background: transparent; color: var(--ink);
  font: 600 14px/1 var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-2) var(--ease-std), opacity var(--dur-2) var(--ease-std),
    border-color var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std);
}
.button:hover { background: var(--bg-sunk-2); }
.button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }
.button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.button.danger:hover { background: var(--danger-soft); }
.button.danger.solid { background: var(--danger); border-color: var(--danger); color: var(--bg); }
.button.small { min-height: 32px; padding: 0 14px; }
.button.quiet { border-color: transparent; }
.button.icon-only { width: 40px; padding: 0; }
.button.icon-only.small { width: 32px; }
.button .icon { width: 16px; height: 16px; flex: none; }
.button:disabled, .button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.button .arrow { transition: transform var(--dur-2) var(--ease-out); }
.button:hover .arrow { transform: translateX(3px); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.text-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border: 0; padding: 0; background: none; color: var(--ink-3); cursor: pointer;
  font-size: var(--text-sm); text-decoration: none;
}
.text-link:hover { color: var(--ink); }
.text-link .arrow { transition: transform var(--dur-2) var(--ease-out); }
.text-link:hover .arrow { transform: translateX(4px); }

/* Fields */
.field { display: grid; gap: var(--space-2); min-width: 0; }
.field-label { color: var(--ink); font-weight: 600; font-size: var(--text-sm); }
.field-label .hint { font-weight: 400; }
input[type="text"], input[type="email"], input[type="number"], input[type="search"], input:not([type]),
select, textarea {
  width: 100%; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-size: var(--text-md); line-height: 1.45;
  transition: border-color var(--dur-1) var(--ease-std);
}
textarea { resize: vertical; min-height: 72px; }
.code-input { font: 400 var(--text-sm)/1.65 var(--font-mono) !important; }
input::placeholder, textarea::placeholder { color: var(--ink-4); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
select {
  appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
input[readonly] { background: var(--bg-sunk); }
/* The file picker's own button, drawn as our small pill instead of the browser's grey box. */
input[type="file"] { color: var(--ink-3); font-size: var(--text-sm); }
input[type="file"]::file-selector-button {
  min-height: 32px; margin-right: var(--space-3); padding: 0 14px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font-body);
  transition: background var(--dur-2) var(--ease-std);
}
input[type="file"]::file-selector-button:hover { background: var(--bg-sunk-2); }

.check { display: inline-flex; gap: var(--space-2); align-items: flex-start; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }

/* A switch for on/off settings such as keep-warm. */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; color: var(--ink-2); font-size: var(--text-sm); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track {
  position: relative; width: 40px; height: 24px; flex: none; border-radius: var(--radius-pill);
  background: var(--bg-sunk-2); border: 1px solid var(--line-strong);
  transition: background var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-3); transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-std);
}
.switch input:checked + .track { background: var(--mint-soft); border-color: var(--mint-ink); }
.switch input:checked + .track::after { transform: translateX(16px); background: var(--mint-ink); }
.switch input:focus-visible + .track { outline: var(--focus-ring); outline-offset: 3px; }
.switch input:disabled + .track { opacity: .5; }

/* Panels: borders, not shadows. */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); min-width: 0; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-subtle);
}
.panel-title { margin: 0; color: var(--ink); font: 600 15px/1.35 var(--font-body); }
.panel-title .hint { font-weight: 400; }
.panel-body { padding: var(--space-5); }
.panel-body > * + * { margin-top: var(--space-4); }
.panel.sunk { background: var(--bg-sunk); }
.page > .panel + .panel { margin-top: var(--space-5); } /* panels stacked straight on a page */
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }

/* Badges and status */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--bg-sunk-2); color: var(--ink-2);
  font: 500 var(--text-label)/1.3 var(--font-mono); white-space: nowrap;
}
.badge.success { background: var(--mint-soft); color: var(--mint-ink); }
.badge.warning { background: var(--amber-soft); color: var(--amber-ink); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.outline { background: transparent; border: 1px solid var(--line); }
/* The decision kind, in its accent at full strength: the brightest thing on a result. */
.badge.kind { background: var(--kind); color: var(--on-accent); }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--kind, var(--ink-faint)); flex: none; }

/* Status pills. Each state has one colour: live and loaded are mint with a slow pulse
   ring; waiting (loading, training) is amber and breathes; a fault is danger; resting
   states (asleep, offline, not served here) are a calm grey. The soft fill carries the
   colour, so a state reads at a glance; the text is the matching AA ink. */
.status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 26px; padding: 2px 11px 2px 9px; border-radius: var(--radius-pill);
  background: var(--bg-sunk-2); color: var(--ink-3);
  font: 500 var(--text-label)/1.3 var(--font-mono); white-space: nowrap;
}
.status .pip { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.status.live { background: var(--mint-soft); color: var(--mint-ink); }
.status.live .pip { background: var(--mint); }
.status.live .pip::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--mint);
  animation: pulse 3.2s var(--ease-out) infinite;
}
.status.training, .status.loading { background: var(--amber-soft); color: var(--amber-ink); }
.status.training .pip, .status.loading .pip { background: transparent; border: 1.5px solid var(--amber-ink); }
.status.training .pip::after, .status.loading .pip::after {
  content: ""; position: absolute; inset: 1px; border-radius: 50%; background: var(--amber);
  animation: breathe 1.6s ease-in-out infinite;
}
.status.offline .pip { background: var(--ink-faint); }
.status.bad { background: var(--danger-soft); color: var(--danger); }
.status.bad .pip { background: var(--danger); }
@keyframes pulse { 0% { transform: scale(.65); opacity: .9; } 80%, 100% { transform: scale(3.2); opacity: 0; } }

/* A version's state (version-state.mjs). Loaded pulses like live, loading breathes in
   amber, asleep rests: a calm hollow ring, because asleep is normal, not a fault. The
   sentence after the pill says what the next call will do. */
.status.asleep { color: var(--ink-2); }
.status.asleep .pip { background: transparent; border: 1.5px solid var(--ink-3); }
.state-next { color: var(--ink-3); font-size: var(--text-sm); }
@keyframes breathe { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* Segmented control and tabs: a pill track with the selected item raised. */
.segmented, .tablist {
  display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto;
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 4.5%, transparent);
}
.segmented button, .tablist [role="tab"] {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-3); cursor: pointer;
  font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap;
  transition: background var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std);
}
.segmented button:hover, .tablist [role="tab"]:hover { color: var(--ink); }
.segmented button[aria-pressed="true"], .tablist [role="tab"][aria-selected="true"] {
  background: var(--bg); color: var(--ink); box-shadow: var(--shadow-raised);
}
:root[data-theme="dark"] .segmented button[aria-pressed="true"],
:root[data-theme="dark"] .tablist [role="tab"][aria-selected="true"] { background: var(--bg-sunk-2); }
.segmented .dot { background: var(--kind); }

/* Code */
.code {
  margin: 0; padding: var(--space-4) var(--space-5);
  overflow: auto; max-height: 460px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg-sunk); color: var(--ink-2);
  font: 400 var(--text-sm)/1.75 var(--font-mono); tab-size: 2; white-space: pre;
}
.code-panel { display: grid; gap: var(--space-3); }
.code-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.code-caption { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--ink-3); font-size: var(--text-sm); }
.code-caption .dot { background: var(--mint); }
.code-caption.stale .dot { background: var(--ink-faint); }
.code-note { display: grid; gap: var(--space-2); }
.connect-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.connect-head .hint { flex: 1 1 240px; margin: 0; }
.connect-code { padding: var(--space-3) var(--space-4); }
.id-chip {
  display: inline-block; max-width: 100%;
  padding: 1px 8px; border-radius: var(--radius-sm); background: var(--bg-sunk-2);
  color: var(--ink); font: 400 var(--text-sm)/1.6 var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}

/* Tables: hairline rows, no boxes. Wide tables scroll inside their panel. */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th {
  padding: var(--space-2) var(--space-3); text-align: left; white-space: nowrap;
  color: var(--ink-3); font: 500 var(--text-label)/1.4 var(--font-mono); letter-spacing: .04em;
  border-bottom: 1px solid var(--line);
}
td, tbody th { padding: var(--space-3); border-bottom: 1px solid var(--line-subtle); color: var(--ink-2); vertical-align: middle; }
tbody th { font: 400 var(--text-sm)/1.5 var(--font-body); letter-spacing: 0; white-space: normal; }
tr:last-child th { border-bottom: 0; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
caption { caption-side: top; text-align: left; padding-bottom: var(--space-2); color: var(--ink-3); font-size: var(--text-sm); }

/* Definition lists for ids and provenance */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--text-sm); }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); font-family: var(--font-mono); overflow-wrap: anywhere; }

/* Meters, for the model's memory */
.meter { display: grid; gap: var(--space-2); }
.meter-top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.meter-top strong { color: var(--ink); font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.meter-track { height: 6px; border-radius: var(--radius-xs); background: var(--chart-track); overflow: hidden; }
.meter-fill { height: 100%; min-width: 2px; border-radius: var(--radius-xs); background: var(--chart-fill); transform-origin: left; animation: grow var(--dur-3) var(--ease-std) both; }

/* Notices: plain words, no octopus. */
.notice {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--bg-sunk); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--text-sm);
}
.notice strong { color: var(--ink); }
.notice.error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--ink); }
.notice.warning { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber-ink) 25%, transparent); color: var(--ink); }
.notice.success { background: var(--mint-soft); border-color: color-mix(in srgb, var(--mint-ink) 25%, transparent); color: var(--ink); }
.notice .notice-body { flex: 1; min-width: 0; }
.notice .notice-body > * + * { margin-top: var(--space-1); }
.notice ul { margin-top: var(--space-2); }
.notice code { overflow-wrap: anywhere; }
.notice-region { margin-bottom: var(--space-6); }

/* Toasts: bottom right, gone after four seconds. The octopus only for real successes. */
.toasts {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 60;
  display: grid; gap: var(--space-3); width: min(400px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-float);
  color: var(--ink); font-size: var(--text-md); line-height: 1.45;
  animation: toast-in var(--dur-3) var(--ease-out);
}
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-2), transform var(--dur-2); }
.toast img { width: 48px; height: auto; flex: none; }
.toast small { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--text-sm); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Empty states: the strands scene, whose octopuses watch the pointer. */
.empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); text-align: center; }
.empty .octo-scene { width: min(300px, 100%); height: auto; margin-bottom: var(--space-2); }
.empty h3 { font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.empty p { max-width: 46ch; color: var(--ink-3); }
.empty .button-row { margin-top: var(--space-3); justify-content: center; }
.empty.compact { padding: var(--space-6) var(--space-4); }
:root[data-theme="dark"] .octo-scene [fill="#D273BE"] { fill: var(--octo-pink-dark); }
:root[data-theme="dark"] .octo-scene [fill="#44C870"] { fill: var(--octo-mint-dark); }
:root[data-theme="dark"] .octo-scene [fill="#DAA037"] { fill: var(--octo-amber-dark); }
.octo-scene .gaze { transition: transform 240ms var(--ease-out); }

/* The loader: a strand with three beads (pink, mint, amber). After a second the
   octopus joins, because only long waits earn it. */
.loader { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); color: var(--ink-3); font-size: var(--text-sm); text-align: center; }
.strand { position: relative; width: 200px; height: 24px; }
.strand svg { position: absolute; inset: 0; overflow: visible; }
.strand path { fill: none; stroke: var(--ink-faint); stroke-opacity: .6; stroke-width: 1.2; }
.bead {
  position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%;
  opacity: .72; offset-path: path("M 0 12 C 34 0, 66 24, 100 12 S 166 0, 200 12"); offset-rotate: 0deg;
  animation: bead 2.4s linear infinite;
}
.bead.pink { background: var(--pink); }
.bead.mint { background: var(--mint); animation-delay: -.8s; }
.bead.amber { background: var(--amber); animation-delay: -1.6s; }
@keyframes bead {
  0% { offset-distance: 0%; opacity: 0; }
  12% { opacity: .72; }
  88% { opacity: .72; }
  100% { offset-distance: 100%; opacity: 0; }
}
.loader-octopus { width: 64px; height: 64px; opacity: 0; transition: opacity 500ms var(--ease-out); }
.loader-octopus.shown { opacity: 1; }
.loader-octopus img { width: 64px; height: 64px; }
.loader.inline { padding: 0; grid-auto-flow: column; justify-content: start; align-items: center; text-align: left; }
.loader.inline .strand { width: 120px; }
.loader.inline .bead { offset-path: path("M 0 12 C 20 4, 40 20, 60 12 S 100 4, 120 12"); }

/* Inline confirmation for irreversible steps */
.confirm {
  display: grid; gap: var(--space-3); padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--radius-md);
  background: var(--danger-soft); color: var(--ink); font-size: var(--text-sm);
}

/* A small dialog, for the early-access request. */
dialog.dialog {
  width: min(480px, calc(100vw - 32px)); padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-float);
}
/* ::backdrop may not inherit custom properties in older browsers, so its colour stays literal. */
dialog.dialog::backdrop { background: rgb(11 14 19 / .45); }
.dialog-body { display: grid; gap: var(--space-4); padding: var(--space-6); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.dialog-head h2 { font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.dialog-head p { padding-top: 6px; color: var(--ink); font-size: var(--text-lg); }
.dialog-head .icon-button { margin-top: 0; }

/* Linter advice under a question: checks in amber ink, tips in grey. */
.lint { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.lint li {
  display: flex; gap: var(--space-2); align-items: baseline;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--bg-sunk); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5;
  border-left: 2px solid var(--ink-faint);
}
.lint li.warning { border-left-color: var(--amber-ink); }
.lint .lint-kind { flex: none; color: var(--ink-3); font: 500 var(--text-label)/1.5 var(--font-mono); }
.lint li.warning .lint-kind { color: var(--amber-ink); }

details > summary { cursor: pointer; color: var(--ink-3); font-size: var(--text-sm); }
details > summary:hover { color: var(--ink); }
details[open] > summary { margin-bottom: var(--space-3); }

/* 6. Pages ------------------------------------------------------------------ */

/* Playground */
.playground { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.playground .result-column { position: sticky; top: calc(var(--topbar-height) + var(--space-6)); display: grid; gap: var(--space-5); }

.starters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-6); }
/* Recipe cards. Each takes the accent of its first decision, so the grid reads by kind
   at a glance: a soft surface with the kind's edge on the left, as on the editor and the
   result. The selected card is the solid accent with ink text, the deck's colour block
   in miniature. The kind comes from the card's first kind dot (or from a kind-* class
   on the card itself), so the markup in playground.mjs needs no change. */
:where(.starter) { --kind: var(--line-strong); --kind-ink: var(--ink-3); --kind-soft: var(--surface); }
.starter {
  display: grid; align-content: start; gap: 6px; min-width: 0; padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 2px); text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--kind-soft); color: var(--ink-2); cursor: pointer;
  box-shadow: inset 3px 0 0 var(--kind);
  transition: border-color var(--dur-2) var(--ease-std), background var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}
.starter:has(.kinds > .dot:first-child.kind-binary)  { --kind: var(--pink);  --kind-ink: var(--pink-ink);  --kind-soft: var(--pink-soft); }
.starter:has(.kinds > .dot:first-child.kind-single)  { --kind: var(--mint);  --kind-ink: var(--mint-ink);  --kind-soft: var(--mint-soft); }
.starter:has(.kinds > .dot:first-child.kind-ordinal) { --kind: var(--amber); --kind-ink: var(--amber-ink); --kind-soft: var(--amber-soft); }
.starter:not(:has(.dot)) { border-style: dashed; box-shadow: none; padding-left: var(--space-4); }
.starter:hover { border-color: var(--kind-ink); }
.starter[aria-pressed="true"] {
  background: var(--kind); border-color: var(--kind); color: var(--on-accent);
  box-shadow: var(--shadow-raised);
}
.starter:not(:has(.dot))[aria-pressed="true"] { background: var(--surface); border-color: var(--ink); color: var(--ink-2); }
.starter strong { color: var(--ink); font-weight: 600; font-size: var(--text-md); line-height: 1.3; }
.starter .kinds { display: flex; gap: 6px; align-items: center; color: var(--ink-3); font-size: var(--text-sm); }
.starter .tag { color: var(--ink-3); font: 400 var(--text-sm)/1.2 var(--font-mono); }
.starter[aria-pressed="true"] strong, .starter[aria-pressed="true"] .tag { color: var(--on-accent); }
.starter:not(:has(.dot))[aria-pressed="true"] strong { color: var(--ink); }
.starter:not(:has(.dot))[aria-pressed="true"] .tag { color: var(--ink-3); }
/* On the solid card each dot keeps its colour inside a thin ink ring, so a mixed recipe
   still shows all its kinds. */
.starter[aria-pressed="true"] .dot { box-shadow: 0 0 0 1.5px var(--on-accent); }
/* On phones the cards scroll in a row that would clip an outside ring, so it sits inside. */
.starter:focus-visible { outline-offset: -4px; }
.starter[aria-pressed="true"]:focus-visible { outline-color: var(--on-accent); }

.editor-section + .editor-section { margin-top: var(--space-6); }
.editor-section > .section-label { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.model-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; }

.decision-editor { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.decision-editor + .decision-editor { margin-top: var(--space-3); }
.decision-editor .editor-head {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-subtle);
  border-top-left-radius: inherit; border-top-right-radius: inherit;
  background: var(--kind-wash); box-shadow: inset 3px 0 0 var(--kind);
}
.decision-editor .editor-head input[data-field="id"] { width: 170px; min-height: 32px; padding: 4px 10px; font: 400 var(--text-sm)/1.4 var(--font-mono); }
/* The chosen kind wears its accent, the same pill its result card will carry. */
.decision-editor .editor-head .segmented button[aria-pressed="true"] { background: var(--kind); color: var(--on-accent); box-shadow: none; }
.decision-editor .editor-head .segmented button[aria-pressed="true"] .dot { background: var(--on-accent); opacity: .55; }
.decision-editor .editor-head .spacer { flex: 1; }
.decision-editor .editor-body { padding: var(--space-4); display: grid; gap: var(--space-4); }
.rubric { display: grid; gap: var(--space-2); }
.rubric-row { display: grid; grid-template-columns: 124px minmax(0, 1fr) 32px; gap: var(--space-2); align-items: start; }
.rubric-row.binary-row { grid-template-columns: 56px minmax(0, 1fr); }
.rubric-row .outcome-name { padding-top: 9px; color: var(--kind-ink); font: 500 var(--text-sm)/1.4 var(--font-mono); }
.rubric-row input { font: 400 var(--text-sm)/1.4 var(--font-mono); }
.rubric-row textarea { min-height: 40px; font-size: var(--text-sm); }
.icon-button {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; margin-top: 4px;
  border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer;
}
.icon-button:hover { background: var(--bg-sunk-2); color: var(--ink); }
.icon-button:disabled { opacity: .35; cursor: not-allowed; }
.icon-button .icon { width: 16px; height: 16px; }
.icon-button.tiny { width: 24px; height: 24px; margin: 0; }

/* A copy button confirms where you clicked: the icon becomes a tick for 1.6 s (ui.mjs). */
[data-copied="yes"] .icon { color: var(--mint-ink); animation: tick var(--dur-2) var(--ease-out); }
[data-copied="no"] { color: var(--danger); }
@keyframes tick { from { transform: scale(.4); opacity: 0; } }
.policy-editor { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--bg-sunk); }
.policy-editor .threshold { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font-size: var(--text-sm); color: var(--ink-2); }
.policy-editor .threshold input { width: 84px; min-height: 32px; padding: 4px 10px; font-family: var(--font-mono); }
.run-bar { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: var(--space-6); }
.run-bar .button.primary { min-width: 200px; }
kbd { padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--surface); color: var(--ink-2); font-size: var(--text-sm); }

/* Results */
.result { display: grid; gap: var(--space-4); }
.result-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.result-meta .meta-item { display: grid; gap: 2px; min-width: 0; }
.result-meta .meta-item > span:first-child { color: var(--ink-3); }
.result-meta .meta-value { display: flex; gap: var(--space-1); align-items: center; min-width: 0; color: var(--ink); font-family: var(--font-mono); }
.result-meta .meta-value span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timing { display: grid; gap: var(--space-2); }
.timing-bar { display: flex; height: 6px; border-radius: var(--radius-xs); overflow: hidden; background: var(--chart-track); }
.timing-bar span { height: 100%; }
/* Render is grey context, a wake-up is waiting (amber), scoring is the work itself (mint). */
.timing-bar .t-render { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.timing-bar .t-load { background: var(--chart-wait); }
.timing-bar .t-score { background: var(--chart-fill); }
.timing-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); color: var(--ink-3); }
.timing-legend b { color: var(--ink); font: 500 var(--text-sm)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.timing-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }

.decision-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
/* A result card is the console's moment of colour, all in its kind's one accent: a
   washed head with the solid kind chip, the headline number in the kind's ink, the most
   likely outcome's bar at full strength and the rest as tints, and the action as a
   solid pill on a washed footer. */
.decision-card .card-head { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line-subtle); background: var(--kind-wash); box-shadow: inset 3px 0 0 var(--kind); }
.decision-card .card-head code { color: var(--ink); font-size: var(--text-sm); }
.decision-card .card-body { display: grid; gap: var(--space-4); padding: var(--space-5); }
.decision-card .question { color: var(--ink-2); }
.headline { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.headline .stat { color: var(--kind-ink, var(--ink)); font: 400 var(--text-stat)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: lining-nums tabular-nums; }
.headline .stat small { font-size: 24px; color: var(--ink-3); }
.headline .stat-label { color: var(--ink-3); font-size: var(--text-sm); }
.headline .stat-label strong { color: var(--kind-ink); font: 500 var(--text-md)/1 var(--font-mono); }

.outcomes { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.outcome { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-3); align-items: baseline; }
.outcome .name { color: var(--ink-2); font: 400 var(--text-sm)/1.4 var(--font-mono); overflow-wrap: anywhere; }
.outcome .name .legend { display: block; margin-top: 2px; color: var(--ink-3); font-family: var(--font-body); }
.outcome .value { color: var(--ink-2); font: 400 var(--text-sm)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.outcome.top .name, .outcome.top .value { color: var(--ink); font-weight: 500; }
.outcome .bar { grid-column: 1 / -1; height: 8px; border-radius: var(--radius-xs); background: var(--chart-track); overflow: hidden; }
/* Bars grow in over 220 ms. The most likely outcome's bar is the kind's accent at full
   strength and the others are its tint, so the distribution reads as one colour with a
   clear winner. Every bar has its value printed beside it. */
.outcome .bar i {
  display: block; height: 100%; width: var(--p); border-radius: var(--radius-xs);
  background: var(--kind-tint, var(--kind));
  transform-origin: left; animation: grow var(--dur-bar) var(--ease-std) both; animation-delay: var(--delay, 0ms);
}
.outcome.top .bar i { background: var(--kind); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.policy-result { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--kind-wash, var(--bg-sunk)); font-size: var(--text-sm); }
.policy-result .line { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; color: var(--ink-3); }
/* The action the policy takes: a solid pill in the kind's accent. Abstaining is a dashed
   outline, because the policy chose not to act. */
.policy-result .action { padding: 3px 14px; border-radius: var(--radius-pill); background: var(--kind, var(--ink)); color: var(--on-accent); font: 500 var(--text-md)/1.5 var(--font-mono); }
.policy-result .action.abstain { background: transparent; color: var(--ink); border: 1px dashed var(--ink-3); }
.policy-result p { color: var(--ink-2); }
.card-foot { display: flex; gap: var(--space-4); flex-wrap: wrap; color: var(--ink-3); font: 400 var(--text-sm)/1.4 var(--font-mono); }

/* Models: family capabilities once, then compact rows with proportional metric bars. */
#page-models .section-head h2 { font-size: 28px; }
#page-models .page-head:not(.is-detail) { margin-bottom: var(--space-4); } /* Only the purpose label sits above the catalogue. */
.general-models > .section-head, .custom-models > .section-head { margin-bottom: var(--space-8); }
.catalogue-head { align-items: center; }
.catalogue-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-6); min-width: 0; }
.catalogue-head > .button { min-height: 36px; border-color: var(--ink); background: var(--ink); color: var(--bg); }
.catalogue-head > .button:hover { border-color: var(--ink-2); background: var(--ink-2); }
.catalogue-key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--ink-3); font-size: var(--text-sm); }
.catalogue-key li { display: inline-flex; align-items: center; gap: var(--space-2); }
.catalogue-key li::before, .catalogue-row.live :is(h3, h4)::before, .general-family-availability li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--mint-ink); }
.catalogue-key li.warm::before { background: var(--warm-ink); }
.general-family + .general-family { margin-top: var(--space-10); }
.general-family-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5); }
.general-family-head h3 { min-width: 0; max-width: 100%; font: 600 var(--text-lg)/1.4 var(--font-body); }
.general-family-head p { color: var(--ink-3); font-size: var(--text-sm); }
.general-family-toggle { display: inline-flex; align-items: center; gap: var(--space-3); max-width: 100%; min-height: 32px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.general-family-toggle span { min-width: 0; overflow-wrap: anywhere; }
.general-family-toggle::after { content: ""; flex: none; width: 6px; height: 6px; margin: 0 3px 3px 0; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); }
.general-family-toggle[aria-expanded="false"]::after { margin-bottom: 0; transform: rotate(-45deg); }
.general-family-toggle:hover::after { border-color: var(--ink); }
.general-family-availability { min-width: 0; max-width: 100%; }
.general-family-availability ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
.general-family-availability li { position: relative; min-width: 0; padding-left: 14px; overflow-wrap: anywhere; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.4; }
.general-family-availability li::before { position: absolute; left: 0; top: calc(.7em - 3px); }
/* Both tables share six tracks, so every metric column lines up. Tracks grow from zero, so
   their widths never depend on content; a general model's name spans the Data track. */
.catalogue-columns, .catalogue-row { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) repeat(3, minmax(0, .8fr)) minmax(0, .8fr); gap: var(--space-4); align-items: center; }
:where(.general-family) .catalogue-identity, :where(.general-family) .catalogue-columns > :first-child { grid-column: span 2; }
.catalogue-columns { padding-bottom: var(--space-3); color: var(--ink-2); font-size: 16px; font-weight: 500; }
.catalogue-columns > :first-child { padding-left: 14px; }
.catalogue-columns small { display: block; margin-top: 2px; font-weight: 400; font-size: var(--text-sm); color: var(--ink-3); }
.catalogue-row { position: relative; margin-inline: calc(-1 * var(--space-4)); padding: var(--space-4); border-radius: 8px; color: var(--ink-3); }
.catalogue-row::before { content: ""; position: absolute; inset: 0 var(--space-4) auto; height: 1px; background: var(--line-subtle); }
.catalogue-row.live { color: var(--ink); }
.catalogue-identity { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); min-width: 0; }
.catalogue-identity :is(h3, h4) { position: relative; min-width: 0; max-width: 100%; padding-left: 14px; overflow-wrap: anywhere; color: inherit; font: 500 var(--text-md)/1.4 var(--font-body); }
.catalogue-row.live :is(h3, h4) { font-weight: 600; }
.catalogue-row.live :is(h3, h4)::before { position: absolute; left: 0; top: calc(.7em - 3px); }
.catalogue-version { color: var(--ink-3); font-weight: 400; }
/* Actual residency, never the Keep warm setting: filled when loaded, a ring while loading or asleep. */
.catalogue-warmth { display: inline-block; width: 7px; height: 7px; margin: 0 0 1px var(--space-2); border: 1.5px solid var(--ink-faint); border-radius: 50%; vertical-align: middle; }
.catalogue-warmth.loaded { border-color: var(--warm-ink); background: var(--warm-ink); }
.catalogue-warmth.loading { border-color: var(--warm-ink); }
.catalogue-identity .text-link { min-height: 24px; font-size: var(--text-sm); white-space: nowrap; }
.catalogue-identity .catalogue-try { margin-left: var(--space-1); color: var(--ink-2); }
.catalogue-identity .catalogue-try:hover, .catalogue-identity .catalogue-try:focus-visible { color: var(--ink); }
/* A row's one action: Request access, or what a custom model needs next. */
.catalogue-action { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 26px; padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: none; color: var(--ink-2); font: 500 var(--text-sm)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std); }
.catalogue-action .icon { width: 14px; height: 14px; flex: none; transition: transform var(--dur-2) var(--ease-out); }
.catalogue-action:hover { border-color: var(--ink-2); background: var(--bg-sunk-2); color: var(--ink); }
.catalogue-action:hover .icon { transform: translateX(2px); }
.catalogue-action.danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); color: var(--danger); }
.catalogue-action.danger:hover { border-color: currentColor; }
.catalogue-action:disabled { padding-inline-start: 0; border-color: transparent; background: none; color: var(--ink-3); cursor: default; }
.catalogue-metric, .catalogue-data { margin: 0; min-width: 0; }
.catalogue-metric dd { margin: 0; font: 400 var(--text-sm)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.catalogue-metric dd > small { margin-left: 4px; font: 400 var(--text-sm)/1.4 var(--font-body); color: var(--ink-3); }
.catalogue-metric.intelligence { --metric-colour: var(--mint-ink); }
.catalogue-metric.latency { --metric-colour: var(--amber-ink); }
.catalogue-metric.calibration { --metric-colour: var(--pink-ink); }
.catalogue-scale { display: block; width: 96px; max-width: 100%; height: 3px; margin-top: var(--space-2); background: var(--chart-track); }
.catalogue-scale > span { display: block; height: 100%; background: var(--metric-colour); }
.catalogue-row:not(.live) .catalogue-scale > span { background: var(--chart-neutral); }
.catalogue-unmeasured { font: 400 var(--text-sm)/1.4 var(--font-body); color: var(--ink-3); }
.catalogue-data dd { display: grid; margin: 0; font-size: var(--text-sm); line-height: 1.3; }
.catalogue-dataset { overflow: hidden; color: var(--ink-2); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.catalogue-dataset:hover, .catalogue-dataset:focus-visible { color: var(--ink); }
.catalogue-split { color: var(--ink-3); }
.general-public { padding: var(--space-4) 0; border-top: 1px solid var(--line-subtle); }
.status.unavailable .pip { background: transparent; border: 1.5px dashed var(--ink-faint); }

/* A row you can act on (a general model that can be called, any custom row) highlights on
   hover. Every row extends 16px into the gutter, keeping the content box, and so the columns,
   aligned, and draws its divider inside so the rounded surface never bends it. A custom row
   opens its model: an empty native link spans the row beneath its other links, so the name
   can shift without moving the click area. */
.catalogue-row a { position: relative; z-index: 2; }
.custom-catalogue-row { isolation: isolate; }
.general-models .catalogue-row.live:is(:hover, :focus-within),
.custom-catalogue-row:is(:hover, :has(> .catalogue-row-link:focus-visible)) { background: var(--bg-sunk); }
.catalogue-row > .catalogue-row-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.catalogue-row-link:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* A brief dwell avoids revealing links while scanning; keyboard and touch stay immediate. */
@media (hover: hover) and (pointer: fine) {
  .catalogue-try { opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease-out); }
  .catalogue-row:hover .catalogue-try { opacity: 1; pointer-events: auto; transition: opacity 700ms ease-in-out 500ms; }
  .catalogue-row:focus-within .catalogue-try { opacity: 1; pointer-events: auto; transition: none; }
}
/* Only the name moves: a transform would lift the row's actions beneath its link. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.general-models .catalogue-row.live, .custom-catalogue-row) :is(h3, h4) { transition: transform var(--dur-1) var(--ease-out); }
  :is(.general-models .catalogue-row.live, .custom-catalogue-row):is(:hover, :focus-within) :is(h3, h4) { transform: translateX(var(--space-1)); }
}

.evaluation-context { display: grid; gap: var(--space-3); }
.evaluation-context h3 { font: 600 var(--text-lg)/1.4 var(--font-body); }
.evaluation-context .resource-meta { gap: var(--space-4) var(--space-8); }
.evaluation-context dd { margin: var(--space-1) 0 0; color: var(--ink); font-family: var(--font-mono); }

/* Models: a named model */
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.lane { display: grid; align-content: start; gap: var(--space-3); padding-block: var(--space-5); border-top: 1px solid var(--line-subtle); min-width: 0; }
.lane .ref { color: var(--ink); font: 500 var(--text-md)/1.4 var(--font-body); overflow-wrap: anywhere; }
.gate { display: grid; gap: var(--space-3); padding-block: var(--space-6); border-top: 1px solid var(--line-subtle); font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }
.gate .gate-title { display: flex; gap: var(--space-2); align-items: center; font-weight: 600; }
.gate .gate-group strong { display: block; font-weight: 600; }
.gate ul { margin: 2px 0 0; padding-left: 1.1em; }
.gate details > summary { color: var(--ink-2); }
.gate details[open] > summary { margin-bottom: var(--space-1); }
.gate.passed .gate-title { color: var(--ink); }
.gate.passed .gate-title .icon { color: var(--mint-ink); }
.gate.failed .gate-title { color: var(--danger); }
.memory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }

/* Datasets and fine-tunes */
.resource-list { display: grid; }
.resource { display: grid; gap: var(--space-3); padding: var(--space-5) 0; border-top: 1px solid var(--line-subtle); }
.resource-head { display: flex; gap: var(--space-3); align-items: flex-start; justify-content: space-between; }
.resource-head h3 { font-size: var(--text-md); font-weight: 600; }
.resource-id { color: var(--ink-3); font: 400 var(--text-sm)/1.4 var(--font-mono); overflow-wrap: anywhere; }
.resource-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--ink-3); font-size: var(--text-sm); }
.resource-meta b { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.lineage { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.lineage .chip { display: inline-flex; gap: 6px; align-items: baseline; font-size: var(--text-sm); color: var(--ink-3); }
.lineage .chip + .chip::before { content: "·"; margin-right: var(--space-2); }
.lineage .chip b { color: var(--ink-2); font-weight: 500; }
.upload-zone { display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--bg-sunk); }
.upload-zone:focus-within { outline: var(--focus-ring); outline-offset: 3px; }
.upload-zone input[type="file"] { font-size: var(--text-sm); max-width: 100%; }
.label-result { display: grid; gap: var(--space-3); padding-block: var(--space-5); border-top: 1px solid var(--line-subtle); }
.label-result pre { max-height: 180px; }
.label-judgements { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }

/* Account */
.key-once { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--mint-soft); border: 1px solid color-mix(in srgb, var(--mint-ink) 30%, transparent); color: var(--ink); }
.copy-row, .inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.copy-row input { font: 400 var(--text-sm)/1.4 var(--font-mono); }
#pg-recipe-note { margin-bottom: var(--space-5); }
.big-number { color: var(--ink); font: 400 var(--text-stat)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: lining-nums tabular-nums; }

/* Welcome, the public face */
body.welcome { display: flex; flex-direction: column; }
.welcome-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--gutter); }
.welcome-main {
  flex: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); align-items: start;
  width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-10) var(--gutter) var(--space-16);
}
.welcome-main > :first-child { padding-top: var(--space-12); }
.welcome-main h1 { margin-top: var(--space-4); font: 400 clamp(40px, 5vw, 58px)/1.02 var(--font-display); letter-spacing: -0.025em; }
.specimen .code { white-space: pre-wrap; overflow-wrap: anywhere; }
.welcome-main h1 em { font-style: italic; }
.welcome-main .lede { margin-top: var(--space-5); }
.welcome-card { margin-top: var(--space-8); display: grid; gap: var(--space-4); max-width: 460px; }
.welcome-card form, .welcome-card section { display: grid; gap: var(--space-3); }
.position { color: var(--ink-2); font-size: var(--text-lg); }
.position strong { color: var(--ink); font: 400 44px/1 var(--font-display); vertical-align: -5px; font-variant-numeric: lining-nums; }
.fine { color: var(--ink-3); font-size: var(--text-sm); }
/* The live decision sits on a pink slab, the Slush deck's full-colour slide at the scale
   of one column: the welcome page's one big block of colour. */
.specimen {
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--pink-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pink-ink) 14%, transparent);
}
.specimen > .panel { box-shadow: var(--shadow-float); border-color: transparent; }
.specimen .decision-card { box-shadow: var(--shadow-float); }
.specimen .try-context { max-height: 170px; }
#try-result:not(:empty) { margin-top: var(--space-4); }
.specimen-note { margin-top: var(--space-4); color: var(--ink-2); font-size: var(--text-sm); text-align: right; }
/* The welcome eyebrow carries all three accents, in the brand's order. */
.eyebrow.loop::before { background: var(--pink); box-shadow: 10px 0 0 var(--mint), 20px 0 0 var(--amber); margin-right: 20px; }
.welcome-foot { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-5) var(--gutter); border-top: 1px solid var(--line-subtle); color: var(--ink-3); font-size: var(--text-sm); }

/* The band of octopuses on strands (octopus-band.mjs): edge to edge, faded at both ends,
   fading in over a second as the website's hero does. */
.hero-band { height: 120px; margin-top: calc(-1 * var(--space-10)); overflow: hidden; pointer-events: none; }
.hero-band .band { display: block; width: 100%; opacity: 0; transition: opacity 1s var(--ease-out); }
.hero-band.ready .band { opacity: 1; }
.hero-band .strand { fill: none; stroke: var(--ink); stroke-opacity: .18; stroke-width: 1.1; stroke-linecap: round; }
:root[data-theme="dark"] .hero-band .strand { stroke-opacity: .22; }

/* Data upload and measured training progress */
.dataset-upload:not([open]) { display: none; }
.dataset-upload { margin-bottom: var(--space-12); }
.dataset-upload-form { max-width: 56rem; }
.training-progress { display: grid; gap: var(--space-2); }
.training-progress progress {
  display: block; appearance: none; width: 100%; height: 4px; overflow: hidden;
  border: 0; border-radius: var(--radius-xs); background: var(--bg-sunk-2); color: var(--amber-ink);
}
.training-progress progress::-webkit-progress-bar { background: var(--bg-sunk-2); }
.training-progress progress::-webkit-progress-value { background: var(--amber-ink); }
.training-progress progress::-moz-progress-bar { background: var(--amber-ink); }

/* Prompt tuning */
.wording-document { display: grid; gap: var(--space-6); min-width: 0; }
.wording-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.wording-meta > code { overflow-wrap: anywhere; min-width: 0; }
.wording-question > .wording-text { font: 400 var(--text-md)/1.6 var(--font-body); color: var(--ink); }
.wording-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.wording-structured { white-space: pre-wrap; overflow-wrap: anywhere; }
.wording-question > :last-child { margin-top: var(--space-2); }
.wording-outcomes { margin: var(--space-3) 0 0; }
.wording-outcomes > div { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(0, 3fr); gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--line-subtle); }
.wording-outcomes > div:last-child { border-bottom: 0; padding-bottom: 0; }
.wording-outcomes dt { overflow-wrap: anywhere; }
.wording-outcomes dd { margin: 0; min-width: 0; }
.wording-note { padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--text-sm); }
.wording-note > p + p { margin-top: var(--space-2); }
.wording-empty { display: grid; align-content: start; justify-items: start; gap: var(--space-3); color: var(--ink-3); }
.wording-empty > .icon { width: 40px; height: 40px; color: var(--ink-2); }
.wording-empty h3 { font: 600 var(--text-lg)/1.4 var(--font-body); color: var(--ink); }
.wording-empty p { max-width: 38ch; }

.plain-fieldset { border: 0; padding: 0; margin-inline: 0; margin-bottom: 0; min-width: 0; display: grid; gap: var(--space-2); }
.back-link { display: inline-flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); color: var(--ink-3); font-size: var(--text-sm); text-decoration: none; }
.back-link:hover { color: var(--ink); }
.back-link .icon { width: 16px; height: 16px; }
.verdict { display: grid; gap: var(--space-3); padding: var(--space-6); margin-bottom: var(--space-12); border-radius: var(--radius-sm); border-left: 3px solid var(--line-strong); background: var(--bg-sunk); }
.verdict.tone-success { background: var(--mint-wash); border-left-color: var(--mint-ink); }
.verdict.tone-working { background: var(--amber-wash); border-left-color: var(--amber-ink); }
.verdict.tone-danger { background: var(--danger-soft); border-left-color: var(--danger); }
.verdict h2 { color: var(--ink); font: 400 28px/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.verdict p { max-width: 70ch; }
.verdict h2::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--space-3) 5px 0; border-radius: 50%; background: var(--ink-3); }
.verdict.tone-success h2::before { background: var(--mint-ink); }
.verdict.tone-working h2::before { background: var(--amber-ink); }
.verdict.tone-danger h2::before { background: var(--danger); }
.steps { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: var(--text-sm); }
.steps li { color: var(--ink-3); }
.steps li.done::before { content: "\2713\00a0"; color: var(--mint-ink); }
.steps li.current { color: var(--ink); font-weight: 600; }
.steps li.current::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber-ink); margin-right: var(--space-2); }
.change { display: grid; gap: var(--space-2); }
.change + .change { padding-top: var(--space-4); border-top: 1px solid var(--line-subtle); }
.change-part { color: var(--ink); font: 600 var(--text-md)/1.4 var(--font-body); }
.change-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.change-sides > div { padding: var(--space-4); background: var(--bg-sunk); border-radius: var(--radius-sm); min-width: 0; }
.side-label { display: block; margin-bottom: var(--space-2); color: var(--ink-3); font: 500 var(--text-sm)/1.4 var(--font-body); }
.diff-text { margin: 0; padding-block: var(--space-3); color: var(--ink); line-height: 1.6; }
.cell-detail { display: block; color: var(--ink-3); font: 400 var(--text-sm)/1.4 var(--font-body); white-space: normal; }
.diff-text del { background: var(--danger-soft); color: var(--danger); text-decoration: line-through; text-decoration-thickness: 1px; }
.diff-text ins { background: var(--mint-soft); color: var(--mint-ink); text-decoration: none; box-shadow: inset 0 -1px 0 var(--mint-ink); }
.diff-text.empty-text { color: var(--ink-3); font-style: italic; }
.disclosure-panel > summary { list-style: none; cursor: pointer; }
.disclosure-panel > summary::-webkit-details-marker { display: none; }
.disclosure-panel > summary .work-title::before { content: "\25B8\00a0"; color: var(--ink-3); }
.disclosure-panel[open] > summary .work-title::before { content: "\25BE\00a0"; }
.rules { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.rules li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.rules .icon { width: 18px; height: 18px; }
.rules .pass .icon { color: var(--mint-ink); }
.rules .fail .icon { color: var(--danger); }
.loss-bars { display: grid; gap: var(--space-2); }
.loss-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 56px; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.loss-label { color: var(--ink-2); }
.loss-track { height: 10px; border-radius: var(--radius-xs); background: var(--chart-track); overflow: hidden; }
.loss-fill { display: block; height: 100%; border-radius: var(--radius-xs); background: var(--chart-neutral); }
.loss-fill.better { background: var(--chart-fill); box-shadow: inset 0 0 0 1px var(--chart-focal); }
.loss-value { color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.loss-note { grid-column: 2 / -1; margin-top: calc(-1 * var(--space-1)); }
.loss-note:empty { display: none; }
.tried { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.tried li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.tried .badge { justify-content: center; }
.tried .idea { color: var(--ink); }
.issues { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.issues li { display: grid; gap: var(--space-2); justify-items: start; }
.issues li pre { justify-self: stretch; }
.pt-sections, .pt-side { display: grid; gap: var(--space-12); align-content: start; }
.pt-sections > .work-section, .pt-pair > .work-section, .pt-side > .work-section { border-top: 1px solid var(--line); padding-top: var(--space-6); }
.submit-row { display: grid; gap: var(--space-2); justify-items: start; }
.submit-row .hint.rerun { color: var(--amber-ink); }
.small-code { max-height: 140px; white-space: pre-wrap; }

/* Usage: an open chart canvas, a compact grouped legend and a scannable request ledger. */
main:has(> :is(#page-usage, #page-request-history):not([hidden])) { max-width: none; }
main:has(> #page-usage:not([hidden])) { padding-block: var(--space-5) var(--space-6); }
:is(#page-usage, #page-request-history) .page-head { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
:is(#page-usage, #page-request-history) .page-head::before, :is(#page-usage, #page-request-history) .page-head::after { display: none; }
:is(#page-usage, #page-request-history) .page-head h1 { margin-top: 0; }
#page-usage .usage-chart-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-top: var(--space-6); }
#page-usage .usage-chart-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
#page-usage .usage-chart-actions .button { background: var(--bg-sunk); }
#page-usage .usage-chart-actions .button:hover:not(:disabled) { background: var(--bg-sunk-2); }
#page-usage .usage-freshness { display: grid; min-height: 20px; color: var(--ink-3); font-size: 12px; }
#page-usage .usage-freshness > * { grid-area: 1 / 1; }
#usage-error, #usage-empty { margin-bottom: var(--space-4); }
#page-usage .usage-analytics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
#page-usage .usage-chart-column { min-width: 0; }
#page-usage .usage-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-5); min-width: 0; }
#page-usage .usage-spend { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); }
#page-usage .usage-section-title { font: 600 var(--text-md)/1.4 var(--font-body); color: var(--ink); }
#page-usage .usage-spend { --usage-chart-height: clamp(300px, 36dvh, 480px); }
#page-usage .usage-volume, #page-usage .usage-latency { --usage-chart-height: clamp(240px, 30dvh, 400px); }
#page-usage .usage-plot { display: flex; flex-direction: column; min-width: 0; }
#page-usage .usage-plot .usage-section-title { font-size: 20px; }
#page-usage .usage-plot-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); min-height: 40px; }
#page-usage .usage-plot-head > * { min-width: 0; }
#page-usage .usage-metric-toggle { display: flex; flex: none; gap: var(--space-4); }
/* The unselected tab is large text, so 3:1 suffices; --line-strong fades it further than any text token. */
#page-usage .usage-metric-toggle button { padding: 0; border: 0; background: none; color: var(--line-strong); font: inherit; cursor: pointer; transition: color var(--dur-1) var(--ease-std); }
#page-usage .usage-metric-toggle button:hover { color: var(--ink-3); }
#page-usage .usage-metric-toggle button[aria-pressed="true"] { color: var(--ink); }
#page-usage .usage-value { min-height: 36px; line-height: 1.1; white-space: nowrap; text-align: right; }
#page-usage .usage-figure { color: var(--ink); font: 500 34px/1.05 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
#page-usage .usage-unavailable { color: var(--ink-3); font-size: var(--text-lg); }
#page-usage .usage-skeleton { background: var(--bg-sunk); border-radius: var(--radius-sm); }
#page-usage .usage-value-skeleton { display: block; width: 7rem; height: 36px; }
#page-usage .chart-wrap { position: relative; margin-top: auto; border-radius: var(--radius-sm); }
#page-usage .chart-svg { height: var(--usage-chart-height); display: grid; place-items: center; color: var(--ink-3); font-size: var(--text-sm); }
#page-usage .chart { display: block; overflow: visible; font: 400 var(--text-sm)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
#page-usage .chart text { fill: var(--ink-3); }
#page-usage .chart-grid line { stroke: var(--line-subtle); stroke-width: 1; }
#page-usage .chart-grid line.baseline, #page-usage .chart .baseline { stroke: var(--line-strong); stroke-width: 1; }
#page-usage .usage-color-0 { --category-color: var(--usage-color-0); }
#page-usage .usage-color-1 { --category-color: var(--usage-color-1); }
#page-usage .usage-color-2 { --category-color: var(--usage-color-2); }
#page-usage .usage-color-3 { --category-color: var(--usage-color-3); }
#page-usage .usage-color-4 { --category-color: var(--usage-color-4); }
#page-usage .usage-color-5 { --category-color: var(--usage-color-5); }
#page-usage .chart .bar { fill: var(--category-color); }
#page-usage .chart .partial-line { stroke: var(--surface); stroke-width: 2.5; opacity: .75; }
#page-usage .latency-line { fill: none; stroke: var(--category-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#page-usage .latency-point { fill: var(--category-color); }
#page-usage .latency-point.partial { fill: var(--surface); stroke: var(--category-color); stroke-width: 2; }
#page-usage .latency-target { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 5; }
#page-usage .latency-target-label { font: 12px var(--font-body); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
#page-usage .latency-empty { font: 12px var(--font-body); }
#page-usage .chart .chart-focus { fill: var(--chart-track); }
#page-usage .chart-wrap:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
#page-usage .chart-tip {
  position: absolute; top: 0; z-index: 2; display: grid; gap: 2px; max-width: 100%; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-raised);
  color: var(--ink-2); font: 400 var(--text-sm)/1.45 var(--font-body); font-variant-numeric: tabular-nums; pointer-events: none;
}
#page-usage .chart-tip strong { color: var(--ink); font-weight: 600; }
#page-usage .usage-tip-total { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); }
#page-usage .usage-tip-total:last-child { border: 0; margin-bottom: 0; padding-bottom: 0; }
#page-usage .usage-tip-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
#page-usage .usage-tip-name { overflow-wrap: anywhere; }
#page-usage .chart-tip { width: max-content; max-width: min(360px, 100%); }
#page-usage .usage-breakdown { min-width: 0; }
#page-usage .page-head { align-items: flex-start; }
#page-usage .usage-view { display: grid; justify-items: end; gap: var(--space-3); margin-left: auto; }
#page-usage .usage-grouping { display: flex; gap: var(--space-3); align-items: center; color: var(--ink-3); font-size: var(--text-sm); }
#page-usage .usage-grouping .segmented button { padding: 5px 12px; }
#usage-breakdown-toggle { display: none; padding: 0; border: 0; background: none; color: var(--ink-3); font: 500 var(--text-sm)/1.25 var(--font-body); cursor: pointer; transition: color var(--dur-1) var(--ease-std); }
#usage-breakdown-toggle:hover { color: var(--ink); }
#page-usage .usage-legend { margin: 0; padding: 0; list-style: none; }
#page-usage .usage-legend-entry { padding: var(--space-3) 0; border-bottom: 1px solid var(--line-subtle); }
#page-usage .usage-legend-identity { display: flex; align-items: baseline; gap: var(--space-2); }
#page-usage .usage-swatch { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--category-color); }
#page-usage .usage-legend-name { min-width: 0; color: var(--ink); font-size: var(--text-sm); font-weight: 500; overflow-wrap: anywhere; }
#page-usage .usage-legend-name code { margin-left: var(--space-1); font-size: 12px; font-weight: 400; color: var(--ink-3); white-space: normal; }
#page-usage .usage-legend-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(max-content, 1fr); gap: var(--space-2); margin: var(--space-1) 0 0 16px; font-size: 12px; font-variant-numeric: tabular-nums; }
#page-usage .usage-legend-totals > div { min-width: 0; }
#page-usage .usage-legend-totals dt { color: var(--ink-3); font-weight: 400; margin-bottom: 2px; white-space: nowrap; }
#page-usage .usage-legend-totals dd { margin: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-usage .usage-other-toggle { border: 0; background: none; appearance: none; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 0; color: var(--ink-2); text-align: left; font-size: var(--text-sm); }
#page-usage .usage-disclosure { margin-left: auto; font-size: 20px; line-height: 16px; }
#page-usage .usage-other-toggle[aria-expanded="true"] .usage-disclosure { transform: rotate(90deg); }
#page-usage .usage-other-members { padding-left: var(--space-4); border-left: 1px solid var(--line); }
#page-usage .usage-legend-placeholder { height: 80px; margin-top: var(--space-3); }
:is(#page-usage, #page-request-history) .usage-revoked { color: var(--ink-3); font-size: 11px; font-weight: 400; margin-left: var(--space-2); }
#usage-breakdown-empty { margin-top: var(--space-4); }
#page-request-history .page-head .segmented { margin-left: auto; }
#usage-requests { container-type: inline-size; }
#usage-requests-period { min-height: 20px; }
#page-request-history .usage-history-context { position: relative; min-height: 24px; margin: var(--space-2) 0 var(--space-4); padding-right: 16rem; }
#usage-requests-status:not(.sr-only) { position: absolute; right: 0; top: 0; text-align: right; }
#usage-requests-error { margin-bottom: var(--space-4); }
#usage-requests-empty { padding: var(--space-8) 0; }
#page-request-history .usage-history-scroll-hint { display: none; color: var(--ink-3); font-size: 12px; margin-bottom: var(--space-2); }
#page-request-history .usage-history-scroll { position: relative; overflow-x: auto; border-bottom: 1px solid var(--line); }
#page-request-history .usage-history-scroll:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
#page-request-history .usage-request-table { width: 100%; min-width: 800px; table-layout: fixed; }
#page-request-history .usage-time-column { width: 145px; }
#page-request-history .usage-key-column { width: 20%; }
#page-request-history .usage-status-column { width: 60px; }
#page-request-history .usage-spend-column { width: 92px; }
#page-request-history .usage-tokens-column { width: 92px; }
#page-request-history .usage-actions-column { width: 32px; }
#page-request-history .usage-request-table th { padding: 0 14px 12px 0; color: var(--ink-2); font: 500 var(--text-sm)/1.5 var(--font-body); letter-spacing: 0; border-bottom: 1px solid var(--line); }
#page-request-history .usage-request-table td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line-subtle); font-size: var(--text-sm); line-height: 1.4; }
#page-request-history .usage-request-table .num { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
#page-request-history .usage-request-table tr > :last-child { padding-right: 0; }
#page-request-history .usage-request { cursor: pointer; transition: background var(--dur-1); }
#page-request-history .usage-request:hover, #page-request-history .usage-request:focus-within, #page-request-history .usage-request:has([aria-expanded="true"]) { background: var(--bg-sunk); }
#page-request-history .usage-request-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
#page-request-history .usage-request-time time > span { margin-left: var(--space-1); color: var(--ink-3); }
#page-request-history .usage-request-route { display: flex; align-items: center; min-width: 0; gap: var(--space-2); }
#page-request-history .usage-request-route code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--text-sm)/1.4 var(--font-body); }
#page-request-history .usage-request-model { color: var(--ink); }
#page-request-history .usage-request-requested { color: var(--ink-3); }
#page-request-history .usage-fallback-marker { flex: none; color: var(--ink-3); font-size: 16px; }
#page-request-history .usage-request-key > span { display: inline-block; max-width: 100%; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-request-history .usage-request-key .usage-revoked { display: block; margin-left: 0; }
#page-request-history .usage-request-spend { overflow-wrap: anywhere; }
#page-request-history .usage-http-status { color: var(--ink-3); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
#page-request-history .usage-muted { color: var(--ink-3); font-weight: 400; }
#page-request-history .usage-request-actions { white-space: nowrap; text-align: right; }
#page-request-history .usage-request-action { width: 28px; min-height: 28px; padding: 0; border-radius: var(--radius-sm); color: var(--ink-3); }
#page-request-history .usage-request-action .icon { width: 14px; height: 14px; }
#page-request-history .usage-request-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
#page-request-history .usage-request-detail-row > td { padding: 0; }
#page-request-history .usage-request-details { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); margin: 0; padding: var(--space-4) var(--space-4) var(--space-5); border-left: 2px solid var(--line-strong); }
#page-request-history .usage-request-details dt { color: var(--ink-3); margin-bottom: var(--space-1); font-size: 12px; }
#page-request-history .usage-request-details dd { margin: 0; overflow-wrap: anywhere; }
#page-request-history .usage-request-details code { font-size: 12px; white-space: normal; }
#page-request-history .usage-request-reason { grid-column: 1 / -1; }
#page-request-history .usage-request-reason dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
#page-request-history .usage-request-pagination { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding-top: var(--space-3); }
#page-request-history .usage-page-buttons { display: flex; flex: none; gap: var(--space-1); }
#page-request-history .usage-page-buttons .icon { width: 14px; height: 14px; }
@media (min-width: 1280px) {
  /* The toggle's line replaces most of the header's margin; it sits midway between Group by and the Spend figure. */
  #page-usage .page-head { margin-bottom: var(--space-1); }
  #usage-breakdown-toggle { display: block; }
  /* Closing folds the column away: both track lists have the same shape, so they interpolate,
     and the charts redraw at each width. Entries keep their width and fade rather than squash;
     the clip margin keeps focus rings whole. */
  #page-usage .usage-analytics { grid-template-columns: minmax(0, 3fr) minmax(18rem, 1fr);
    transition: grid-template-columns var(--dur-3) var(--ease-std), column-gap var(--dur-3) var(--ease-std); }
  #page-usage .usage-breakdown { border-left: 1px solid var(--line); padding-left: var(--space-5); align-self: stretch; overflow: clip; overflow-clip-margin: var(--space-2);
    transition: opacity var(--dur-3) var(--ease-std), padding-left var(--dur-3) var(--ease-std), visibility 0s; }
  #page-usage .usage-breakdown > * { min-width: 16rem; }
  #page-usage .usage-analytics.breakdown-closed { grid-template-columns: minmax(0, 3fr) minmax(0, 0fr); column-gap: 0; }
  #page-usage .breakdown-closed .usage-breakdown { padding-left: 0; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, var(--dur-3); }
}
@media (min-width: 641px) and (max-width: 1279px) {
  #page-usage .usage-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); column-gap: var(--space-5); }
  #page-usage #usage-legend { display: contents; }
  #page-usage .usage-legend-entry { border-bottom: 0; }
}
@container (max-width: 799px) {
  #page-request-history .usage-history-scroll-hint { display: block; }
}
@media (max-width: 1279px) {
  #page-usage .usage-breakdown { border-top: 1px solid var(--line); padding-top: var(--space-4); }
}
@media (max-width: 640px) {
  #page-usage .usage-charts { grid-template-columns: minmax(0, 1fr); }
  #page-usage .usage-spend { --usage-chart-height: 260px; }
  #page-usage .usage-volume, #page-usage .usage-latency { --usage-chart-height: 240px; }
  :is(#page-usage, #page-request-history) .segmented button { padding-inline: var(--space-2); }
  #page-usage .usage-figure { font-size: 28px; }
  #page-request-history .usage-history-context { padding: 0; margin-top: var(--space-1); }
  #page-request-history .usage-history-context:has(#usage-requests-status:not(.sr-only)) > span { visibility: hidden; }
  #usage-requests-status:not(.sr-only) { left: 0; text-align: left; }
  #page-request-history .usage-request-pagination { flex-wrap: wrap; gap: var(--space-2); }
  #page-request-history .usage-page-buttons { margin-left: auto; }
}

/* 404 */
.lost { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-16) var(--space-4); text-align: center; }
.lost img { width: 180px; height: 180px; }
.lost h1 { font: 400 var(--text-page)/1.1 var(--font-display); letter-spacing: var(--tracking-display); }
.lost p { color: var(--ink-3); max-width: 42ch; }

/* 7. Small screens and reduced motion --------------------------------------- */

@media (max-width: 1180px) {
  /* One column: the result comes first, then the editor, then the code. */
  .playground { grid-template-columns: minmax(0, 1fr); }
  .playground .result-column { display: contents; }
  .playground .result-column > :first-child { order: -1; }
  .playground .result-column > :last-child { order: 1; }
}

@media (max-width: 960px) {
  :root { --gutter: 24px; }
  .split, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .lanes { grid-template-columns: minmax(0, 1fr); }
  .welcome-main { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .welcome-main > :first-child { padding-top: 0; }
  .catalogue-columns { display: none; }
  .catalogue-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .catalogue-identity, .catalogue-data, .catalogue-metric.price { grid-column: 1 / -1; }
  .catalogue-metric { align-self: stretch; display: flex; flex-direction: column; }
  .catalogue-metric-label.sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0 0 var(--space-2); overflow: visible; clip: auto; white-space: normal; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink-2); }
  .catalogue-metric dd { margin-top: auto; }
  .catalogue-metric-label small { display: block; font: 400 var(--text-sm)/1.4 var(--font-body); color: var(--ink-3); }
  .catalogue-metric.price { flex-flow: row wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
  .catalogue-metric.price .catalogue-metric-label { margin: 0; }
  .catalogue-metric.price .catalogue-metric-label small { display: inline; margin-left: var(--space-1); }
}

@media (max-width: 820px) {
  :root { --gutter: 16px; }
  #page-models .section-head h2 { font-size: var(--text-title); }
  .general-models > .section-head, .custom-models > .section-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-6); }
  .shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(300px, 86vw);
    transform: translateX(-102%); visibility: hidden;
    transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
    box-shadow: var(--shadow-float);
  }
  .sidebar.open { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out); }
  .scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); }
  .topbar .menu-button { display: inline-flex; }
  .topbar .crumb { font-size: var(--text-sm); }
  .topbar .status-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar .status { min-height: 24px; padding: 0 8px; }
  .specimen { padding: var(--space-3); border-radius: var(--radius-md); margin-inline: calc(-1 * var(--space-2)); }
  main { padding-top: var(--space-6); }
  .page-head { flex-direction: column; align-items: flex-start; margin-bottom: var(--space-6); }
  .page-head h1 { font-size: 32px; }
  /* The strands at 60%, so the beads clear the eyebrow on a phone. */
  .page-head::before, .page-head::after { top: -14px; width: 264px; height: 38px; }
  .page-head::before { -webkit-mask-size: 264px 38px; mask-size: 264px 38px; }
  .page-head::after {
    background:
      radial-gradient(circle at calc(100% - 102px) 11px, var(--pink) 3px, transparent 3.6px),
      radial-gradient(circle at calc(100% - 60px) 20px, var(--mint) 3px, transparent 3.6px),
      radial-gradient(circle at calc(100% - 24px) 30px, var(--amber) 3px, transparent 3.6px);
  }
  .memory { grid-template-columns: minmax(0, 1fr); }
  .rubric-row { grid-template-columns: 96px minmax(0, 1fr) 32px; }
  .headline .stat { font-size: 38px; }
  .toasts { right: var(--space-4); bottom: var(--space-4); }
  .welcome-main { padding-top: var(--space-4); }
  .decision-editor .editor-head input[data-field="id"] { width: 100%; }
  .starters {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 66%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2);
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding: 0 var(--gutter);
  }
  .starter { scroll-snap-align: start; }
  .change-sides { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .loss-row { grid-template-columns: 96px minmax(0, 1fr) 48px; }
}

/* Privacy and terms: one readable column, nothing else on the page. */
.legal { background: var(--bg); color: var(--ink-2); }
.legal-page { max-width: 42rem; margin: 0 auto; padding: 56px var(--gutter, 20px) 96px; font-size: var(--text-lg); line-height: 1.6; }
.legal-page h1 { font: 400 var(--text-page)/1.1 var(--font-display); color: var(--ink); margin: 12px 0 4px; }
.legal-page h2 { font: 400 var(--text-title)/1.25 var(--font-display); color: var(--ink); margin: 36px 0 8px; }
.legal-page p, .legal-page ul { margin: 0 0 12px; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--ink); }
.legal-date { color: var(--ink-3); font-size: var(--text-sm); margin-bottom: 28px !important; }
.legal-foot { margin-top: 48px !important; color: var(--ink-3); font-size: var(--text-sm); }

@media (pointer: coarse) {
  .button { min-height: 44px; }
  .button.small { min-height: 36px; }
  .nav a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
  /* Bars and meters appear at full length at once, with no stagger. */
  .outcome .bar i, .meter-fill, [data-copied] .icon { animation: none !important; }
  .status.live .pip::after, .status.loading .pip::after, .status.training .pip::after { display: none; }
  .status.loading .pip, .status.training .pip { background: var(--amber); }
  .bead { animation: none !important; opacity: .72; }
  .bead.pink { offset-distance: 25%; }
  .bead.mint { offset-distance: 50%; }
  .bead.amber { offset-distance: 75%; }
}

/* Workflow views. The catalogue and shell retain their own presentation. */
.workflow h3 { font: 600 var(--text-lg)/1.4 var(--font-body); }
.workflow .page-head, .page-head.workflow { margin-bottom: var(--space-12); align-items: center; }
.workflow .page-head > div:first-child, .page-head.workflow > div:first-child { min-width: 0; }
.workflow .page-head h1, .page-head.workflow h1 { overflow-wrap: anywhere; }
.workflow .page-head .hint, .workflow .page-head .resource-id { margin-top: var(--space-2); }
.workflow.is-detail .page-head, .workflow .page-head.is-detail, .page-head.workflow.is-detail { margin-bottom: var(--space-6); }
.workflow .back-link { display: flex; align-items: center; width: fit-content; min-height: 40px; margin-bottom: var(--space-3); color: var(--ink-2); font: 500 var(--text-lg)/1.4 var(--font-body); }
.workflow .back-link:hover, .workflow .back-link:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.workflow .page-head .lede, .page-head.workflow .lede { font-size: var(--text-md); max-width: 65ch; }
.work-section { min-width: 0; }
.work-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-8); }
.work-title, .workflow .section-head h2 { font: 400 28px/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.work-head .hint { max-width: 58ch; }
.work-body > * + * { margin-top: var(--space-4); }
.work-body.resource-list > * + * { margin-top: 0; }
.work-body > .section { margin-top: var(--space-12); }
.work-body > .work-title { margin-bottom: var(--space-8); }
.work-foot { padding-top: var(--space-4); }
.work-foot:has(> [hidden]) { padding: 0; }
.work-section:not([open]) > summary { margin-bottom: 0; }
.disclosure-panel[open] > .work-head { margin-bottom: var(--space-8); }
.workflow .section-head { margin-bottom: var(--space-8); }
.workflow .section:first-child { margin-top: 0; }
#datasets-overview > .dataset-upload:not([open]) + #label-queue-section { margin-top: 0; }
#datasets-overview:has(> .dataset-upload:not([open])) > #label-queue-section[hidden] ~ .dataset-library { margin-top: 0; }
.workflow .split, .workflow .grid-2 { gap: var(--space-8); }
.workflow form.work-body > * + * { margin-top: var(--space-6); }
.workflow .field { gap: var(--space-2); }
.workflow .field-label { font-size: var(--text-md); font-weight: 500; }
.workflow .decision-editor { border: 0; border-top: 1px solid var(--line-subtle); border-radius: 0; background: none; padding-top: var(--space-6); }
.workflow .decision-editor .editor-head { padding: 0; margin-bottom: var(--space-4); border: 0; background: none; box-shadow: none; }
.workflow .decision-editor .editor-body { padding: 0; gap: var(--space-6); }
.workflow .decision-editor .segmented button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.workflow .decision-editor .segmented button[aria-pressed="true"] .dot { background: var(--bg); }
.review-context { margin: 0; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--text-md)/1.6 var(--font-body); }
.workflow .facts { font-size: var(--text-md); gap: var(--space-3) var(--space-8); }
.workflow .facts dd { font-family: var(--font-body); }
.dataset-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin: 0; }
.dataset-facts dt { color: var(--ink-3); font-size: var(--text-sm); margin-bottom: var(--space-1); }
.dataset-facts dd { margin: 0; overflow-wrap: anywhere; }
.dataset-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--space-12); align-items: start; }
.dataset-information { min-width: 0; border-left: 1px solid var(--line-subtle); padding-left: var(--space-8); }
.dataset-information .dataset-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.dataset-information .dataset-actions { margin-top: var(--space-2); }
.dataset-information .code { max-height: 420px; overflow: auto; }
.dataset-training { min-width: 0; }
.related-queue { background: var(--bg-sunk); border-radius: var(--radius-md); padding: var(--space-4); margin-inline: calc(-1 * var(--space-4)); }
.related-queue h3, .related-history h3 { font: 600 var(--text-lg)/1.4 var(--font-body); }
.related-queue > h3, .related-history-head { margin-bottom: var(--space-4); }
.related-history-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.related-queue + .related-history { margin-top: var(--space-8); }
.dataset-training .related-run { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--space-6); }
.dataset-training .related-run .row-navigation { grid-column: 2; grid-row: auto; }
.dataset-training .related-run .row-date { grid-column: 1; }
.dataset-training .related-run .run-output { display: flex; flex-wrap: wrap; align-items: center; grid-column: 1 / -1; }
.dataset-training .related-run .mobile-label { display: none; }
.dataset-training [data-training-more] { margin-top: var(--space-4); }
@media (max-width: 960px) {
  .dataset-workspace { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .dataset-information { grid-row: 1; border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .dataset-training .related-run .resource-head, .dataset-training .active-run .run-state { grid-column: 1 / -1; }
}
.dataset-actions { padding-block: var(--space-4); }
.dataset-technical { border-top: 1px solid var(--line-subtle); padding-top: var(--space-4); }
.dataset-technical > summary { width: fit-content; min-height: 40px; font-size: var(--text-lg); }
.dataset-technical > .facts { margin-block: var(--space-4) var(--space-6); }
.dataset-technical > .section-label { margin-bottom: var(--space-3); }
#dataset-delete-dialog > p { margin-block: var(--space-4); overflow-wrap: anywhere; }
.workflow .section-label { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.workflow thead th { font: 500 16px/1.4 var(--font-body); letter-spacing: 0; color: var(--ink-2); border-bottom: 1px solid var(--line-subtle); padding-block: var(--space-3); }
.workflow tbody th { font-size: var(--text-md); }
.workflow th:first-child, .workflow td:first-child { padding-left: 0; }
.workflow th:last-child, .workflow td:last-child { padding-right: 0; }
.workflow a { text-decoration-color: currentColor; }
.workflow .button { min-height: 32px; padding: 4px 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--ink-2); font: 500 var(--text-sm)/1.4 var(--font-body); white-space: normal; text-align: left; }
.workflow .button:hover, .workflow .button:focus-visible, .workflow .text-link:hover, .workflow .text-link:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
.workflow .button.primary { min-height: 40px; padding: 8px 20px; border-radius: var(--radius-pill); background: var(--ink); color: var(--bg); }
.workflow .button.primary:hover { background: var(--ink-2); color: var(--bg); text-decoration: none; }
.workflow .button.danger { color: var(--danger); }
.workflow .button.danger:hover { background: none; }
.workflow .button-row { gap: var(--space-2) var(--space-5); }
.workflow .button-row .badge { align-self: center; }
.workflow .badge, .workflow .status { padding: 0; min-height: 0; border: 0; border-radius: 0; background: none; color: var(--ink-3); font: 400 var(--text-sm)/1.5 var(--font-body); white-space: normal; }
.workflow .badge.success, .workflow .badge.warning, .workflow .badge.danger { padding: 2px 8px; border-radius: var(--radius-xs); width: fit-content; max-width: 100%; }
.workflow .badge.success { background: var(--mint-soft); color: var(--mint-ink); }
.workflow .badge.warning { background: var(--amber-soft); color: var(--amber-ink); }
.workflow .badge.danger { background: var(--danger-soft); color: var(--danger); }
.workflow .status .pip { width: 6px; height: 6px; }
.workflow .status .pip::after { display: none; }
.workflow .notice { padding: var(--space-3) 0; border: 0; border-radius: 0; background: none; }
.workflow .notice.error, .workflow .notice.warning { border-left: 2px solid var(--danger); padding-left: var(--space-4); }
.workflow .notice.warning { border-left-color: var(--amber-ink); }
.workflow .empty { padding: var(--space-6) 0; text-align: left; align-items: start; }
.workflow .empty h3 { font: 600 var(--text-lg)/1.4 var(--font-body); }
.workflow .confirm { background: none; border: 0; border-left: 2px solid var(--line-strong); border-radius: 0; padding: var(--space-3) var(--space-4); }
.workflow .resource-head h3 { font: 600 var(--text-md)/1.4 var(--font-body); }
.workflow .resource-head h3 a { color: inherit; text-decoration: none; }
.workflow .resource-head h3 a:hover { text-decoration: underline; }
.workflow .resource-head h3, .workflow .resource-head p, .model-state { min-width: 0; overflow-wrap: anywhere; }
/* A native primary link spans a row; secondary links and buttons sit above it.
   This keeps modifier-clicks and keyboard navigation without click handlers or nested links. */
.workflow .interactive-row { position: relative; isolation: isolate; border: 0; border-radius: 8px; padding: var(--space-4); margin-inline: calc(-1 * var(--space-4)); }
.workflow .interactive-row::before { content: ""; position: absolute; inset: 0 var(--space-4) auto; height: 1px; background: var(--line-subtle); }
.workflow .interactive-row:hover { background: var(--bg-sunk); }
.workflow .interactive-row a, .workflow .interactive-row button { position: relative; z-index: 2; }
.workflow .interactive-row .row-link { position: static; text-decoration: none; }
.workflow .row-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 8px; }
.workflow .row-link:focus-visible { outline: none; }
.workflow .row-link:focus-visible::after { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.workflow .interactive-row:has(.row-link:focus-visible) { background: var(--bg-sunk); }
.workflow .interactive-row:hover .row-open { color: var(--ink); }
.workflow .interactive-row a:not(.row-link) { text-decoration: none; }
.workflow .interactive-row a:hover, .workflow .interactive-row a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.active-work { background: var(--bg-sunk); border-radius: var(--radius-md); padding: var(--space-6); margin-inline: calc(-1 * var(--space-6)); }
.active-work .interactive-row:hover { background: var(--bg-sunk-2); }
.row-navigation { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; }
.row-open { display: inline-flex; align-items: center; justify-content: flex-end; justify-self: end; margin-inline-start: auto; min-height: 32px; flex: none; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; }
.row-open .icon { width: 16px; height: 16px; flex: none; }
.association { display: flex; gap: var(--space-1) var(--space-2); flex-wrap: wrap; align-items: baseline; font-size: var(--text-sm); min-width: 0; overflow-wrap: anywhere; }
.state-pair > .hint::before { content: "·"; margin-right: var(--space-2); }
.association-label { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-3); font: 400 var(--text-sm)/1.5 var(--font-body); }
.association-label .icon { width: 14px; height: 14px; flex: none; align-self: center; }
.association a, a.association { color: var(--ink-2); }
.state-pair { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.list-columns, .library-columns { padding-bottom: var(--space-3); font: 500 16px/1.4 var(--font-body); color: var(--ink-2); }
.library-columns, .dataset-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(110px, .8fr) minmax(90px, .65fr) minmax(140px, 1fr); column-gap: var(--space-8); align-items: center; }
.dataset-row .resource-head, .run-row .resource-head, .prompt-row .resource-head { display: grid; gap: var(--space-1); }
.dataset-row .resource-meta, .prompt-row .resource-meta { display: grid; gap: var(--space-1); }
.dataset-row .button-row { margin: 0; justify-content: flex-start; gap: var(--space-1) var(--space-4); }
.mobile-label { display: none; }
.history-columns, .history-run { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(130px, 1fr) minmax(0, .85fr) minmax(95px, .65fr) 64px; align-items: center; column-gap: var(--space-6); }
.active-run { grid-template-columns: minmax(0, 1.5fr) minmax(190px, 1.1fr) minmax(95px, .6fr) minmax(145px, .7fr); align-items: center; column-gap: var(--space-8); }
.run-state, .run-output { display: grid; justify-items: start; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); }
.run-state b { font-family: var(--font-mono); font-weight: 400; }
.run-state .training-progress { width: 100%; }
.run-row .button-row { justify-content: flex-start; gap: var(--space-1) var(--space-4); }
.model-state { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.prompt-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(120px, .8fr) 16px; column-gap: var(--space-8); align-items: center; }
.labeling-row .button.primary { min-height: 32px; padding: 4px 0; background: none; color: var(--ink); }
.pt-workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.pt-configuration, .pt-preview { min-width: 0; padding: var(--space-8); }
.pt-configuration { display: grid; align-content: start; gap: var(--space-8); }
.pt-config-group { display: grid; align-content: start; gap: var(--space-6); min-width: 0; }
.pt-config-group + .pt-config-group { border-top: 1px solid var(--line-subtle); padding-top: var(--space-8); }
.pt-config-group .field { margin: 0; }
.pt-config-group .hint:empty { display: none; }
.pt-preview { background: var(--bg-sunk); border-left: 1px solid var(--line); }
.pt-preview-source { margin: var(--space-2) 0 var(--space-6); }
.pt-submit { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: var(--space-6) var(--space-8); }
.pt-submit .hint { max-width: 85ch; }
.setup-view { max-width: 780px; }
.detail-toolbar, .detail-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.view-tabs { display: flex; gap: var(--space-8); border-bottom: 1px solid var(--line-subtle); margin-bottom: var(--space-8); }
.view-tabs a { padding: var(--space-3) 0; color: var(--ink-3); text-decoration: none; border-bottom: 2px solid transparent; }
.view-tabs a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
.view-tabs a:hover { color: var(--ink); }
.compact-version { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.result-actions { border-top: 1px solid var(--line-subtle); padding-top: var(--space-6); display: grid; gap: var(--space-4); }
.log-tools { display: flex; align-items: end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.log-tools .field { flex: 1 1 220px; margin: 0; }
.log-tools .check { align-self: center; }
.log-viewer { height: clamp(300px, 60vh, 850px); overflow: auto; background: var(--bg-sunk); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-4); overscroll-behavior: contain; }
.log-event { font: 13px/1.7 var(--font-mono); padding-block: var(--space-2); border-bottom: 1px solid var(--line-subtle); }
.log-event pre { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.log-time { color: var(--ink-3); }
.log-type { color: var(--ink); font-weight: 500; }
.log-viewer.no-wrap .log-event pre { white-space: pre; overflow-wrap: normal; }
.error-text { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
#ft-run-overview .facts dd, #dataset-detail .facts dd { overflow-wrap: anywhere; min-width: 0; }
#ft-run-overview, #ft-run-results, #models-content, #label-detail, #dataset-detail { min-width: 0; }
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  .workflow .row-secondary { opacity: 0; pointer-events: none; }
  .workflow .resource:hover .row-secondary, .workflow .resource:focus-within .row-secondary { opacity: 1; pointer-events: auto; }
}
@media (max-width: 1100px) {
  .history-columns { display: none; }
  .run-row { grid-template-columns: minmax(0, 1.4fr) minmax(180px, 1fr); }
  .run-row .row-navigation { grid-column: 2; grid-row: 2 / span 2; }
  .history-run .row-date { grid-column: 1; }
}
@media (max-width: 960px) {
  .library-columns { display: none; }
  .dataset-row, .prompt-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dataset-row .resource-head { grid-column: 1 / -1; }
  .dataset-row .row-date { grid-column: 2; grid-row: 2; }
  .dataset-row .row-navigation { grid-column: 1 / -1; }
  .mobile-label { display: inline; }
  .model-state .mobile-label { flex-basis: 100%; }
}
@media (max-width: 820px) {
  .work-title, .workflow .section-head h2, .verdict h2 { font-size: var(--text-title); }
  .work-head, .workflow .section-head { margin-bottom: var(--space-6); }
  .disclosure-panel[open] > .work-head { margin-bottom: var(--space-6); }
  .work-body > .work-title { margin-bottom: var(--space-6); }
  .workflow .page-head, .page-head.workflow { align-items: flex-start; }
  .active-work { padding: var(--space-4); margin-inline: calc(-1 * var(--space-4)); }
  .pt-workspace { grid-template-columns: minmax(0, 1fr); }
  .pt-configuration, .pt-preview, .pt-submit { padding: var(--space-6); }
  .pt-preview { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .dataset-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow .button { min-height: 40px; }
  .run-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
  .run-row .resource-head, .active-run .run-state { grid-column: 1 / -1; }
  .run-row .row-date { grid-column: 1; grid-row: auto; }
  .run-row .row-navigation { grid-column: 2; grid-row: auto; }
  .prompt-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .wording-outcomes > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .view-tabs { gap: var(--space-6); }
  .log-viewer { padding: var(--space-3); }
  .workflow .facts { gap: var(--space-3) var(--space-4); }
}