/* ============================================================================
   GENREG design tokens — the single source of truth for the lab's surface.
   Pages consume these; pages never invent values. A raw hex, a stray 12.5px,
   or a one-off radius in a page's <style> block is a bug, not a style choice.
   See AGENTS.md §5 and the component layer at the bottom of this file.
   ========================================================================== */
:root {
  /* --- colour: the DEFAULT theme (slate) ---------------------------------
     These are what an anonymous page is drawn with. A signed-in user's own
     tokens are injected after this sheet and win. Every colour here is a
     token on purpose: nothing downstream may hardcode one.
     Preferences -> Appearance changes all of it. */
  --bg: #14171a;
  --panel: #1b1f23;
  --panel-2: #22272d;
  --border: #30373e;
  --border-soft: #23282e;      /* interior rules (table rows), quieter than --border */
  --text: #e6edf3;             /* primary body text */
  --text-2: #c2ccd6;           /* secondary / emphasised numbers */
  --muted: #8b959f;            /* labels, captions, hints */
  --accent: #4a9eff;           /* PRIMARY - one accent, used sparingly */
  --accent-2: #7c8cf8;         /* SECONDARY - second-order emphasis only */
  --accent-soft: rgba(74, 158, 255, 0.10);   /* accent as a surface tint */
  --green: #3fb950;
  --red: #f85149;
  --amber: #d29922;
  --layer-semantic: #7d9771;
  --layer-abstraction: #9b7999;

  /* --- type scale: 8 steps, no half-pixels ------------------------------ */
  --fs-micro: 10px;            /* uppercase micro-labels only */
  --fs-xs: 11px;               /* labels, table headers, tags */
  --fs-sm: 12px;               /* captions, hints, dense UI */
  --fs-md: 13px;               /* body — the default */
  --fs-lg: 15px;               /* card titles, lead paragraphs */
  --fs-xl: 19px;               /* section headings */
  --fs-2xl: 25px;              /* page title */
  --fs-3xl: 32px;              /* the one headline metric */

  /* Three weights, not eight. The sheet used 400/500/600/620/640/650/660/700
     - which is six ways of saying "a bit bolder" and is most of why the
     surface read as noisy. Preferences maps these. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  --lh-tight: 1.3;
  --lh-body: 1.55;
  --ls-label: 0.08em;          /* uppercase labels only; body text never tracks */

  /* --- spacing: 6 steps -------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 32px;

  /* --- radius: 3 steps + pill ------------------------------------------- */
  /* Every radius in this sheet now resolves through these four. The values
     themselves are set by the user's Preferences (corners: sharp / slight /
     round), which is why nothing below hardcodes a px radius any more. */
  --r-sm: 2px;                 /* tags, inline chips */
  --r-md: 3px;                 /* controls, buttons, inputs */
  --r-lg: 4px;                 /* cards, panels, menus */
  --r-pill: 999px;             /* genuinely pill-shaped things only */

  /* --- elevation: 3 levels, structural only ------------------------------
     Level 0 is the default. A shadow means "this floats above the page",
     never "this is pretty". No coloured glows. */
  --elev-0: none;
  --elev-1: none;              /* flat by default; Preferences can lift them */
  --elev-2: none;
  --shadow: var(--elev-2);     /* legacy aliases — do not use in new code */
  --shadow-sm: var(--elev-1);

  --mono: "Cascadia Code", "Consolas", "SFMono-Regular", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--mono); font-size: 13px;
}
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* top bar */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--border);
  flex: 0 0 auto; box-shadow: var(--elev-1); z-index: 100;
}
.brand { font-weight: var(--fw-bold); letter-spacing: 1px; color: var(--accent); }
/* Fafo control panel - floats on every page, scoped to that page's project. */
.fafo-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.fafo-fab { order: 2; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--panel); color: var(--text-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; box-shadow: var(--elev-1); }
.fafo-fab:hover { color: var(--accent); border-color: var(--accent); }
.fafo-panel { order: 1; width: 320px; max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--elev-2); padding: var(--sp-3); }
.fafo-head { display: flex; align-items: baseline; gap: var(--sp-2);
  margin-bottom: var(--sp-3); }
.fafo-title { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text); }
.fafo-scope { font-family: var(--mono); font-size: var(--fs-micro);
  color: var(--accent); letter-spacing: var(--ls-label); }
.fafo-x { margin-left: auto; background: none; border: 0; color: var(--muted);
  font-size: var(--fs-lg); line-height: 1; cursor: pointer; }
.fafo-x:hover { color: var(--text); }
.fafo-row { display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3); }
.fafo-row label { font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--muted); }
.fafo-row select { flex: 1; min-width: 0; background: var(--bg); color: var(--text);
  border: 1px solid var(--panel-2); border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }
.fafo-cmds { display: flex; flex-direction: column; gap: var(--sp-1); }
.fafo-cmd { text-align: left; background: var(--bg); color: var(--text-2);
  border: 1px solid var(--panel-2); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); cursor: pointer; }
.fafo-cmd:hover { border-color: var(--accent); color: var(--text); }
.fafo-cmd .l { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.fafo-cmd .h { display: block; font-size: var(--fs-micro); color: var(--muted);
  line-height: var(--lh-body); margin-top: 2px; }
.fafo-note { font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-body);
  margin-top: var(--sp-2); min-height: 1em; overflow-wrap: anywhere; }

.fafo-react { display: flex; gap: var(--sp-2); align-items: flex-start;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft); cursor: pointer;
  font-size: var(--fs-xs); color: var(--text-2); }
.fafo-react input { margin: 2px 0 0; flex: 0 0 auto; }
.fafo-react em { display: block; font-style: normal; color: var(--muted);
  font-size: var(--fs-micro); line-height: var(--lh-body); margin-top: 2px; }

/* Toasts: confirmation that a command actually went out, visible whether or
   not the panel is open. Above the launcher so it never covers it. */
.fafo-toasts { position: fixed; right: 18px; bottom: 76px; z-index: 61;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--sp-2); pointer-events: none; max-width: min(380px, 90vw); }
.fafo-toast { pointer-events: auto; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--elev-2);
  padding: var(--sp-2) var(--sp-3); max-width: 100%;
  opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
.fafo-toast.in { opacity: 1; transform: none; }
.fafo-toast .t { font-size: var(--fs-sm); color: var(--text); font-weight: var(--fw-medium); }
.fafo-toast .d { font-size: var(--fs-xs); color: var(--muted);
  line-height: var(--lh-body); margin-top: 2px; overflow-wrap: anywhere; }
.fafo-toast.is-ok { border-color: var(--green); }
.fafo-toast.is-ok .t { color: var(--green); }
.fafo-toast.is-bad { border-color: var(--red); }
.fafo-toast.is-bad .t { color: var(--red); }

/* AUTO: PIA driving a terminal. Green only while it is actually driving -
   an indicator that means nothing is worse than no indicator. */
.btn-auto.on { color: var(--green); border-color: var(--green); font-weight: var(--fw-medium); }
.btn-auto.paused { color: var(--amber); border-color: var(--amber); }

/* Stop the server from the UI - the console is usually too busy to Ctrl-C. */
.brand-quit { flex: 0 0 auto; padding: 3px 6px; line-height: 1;   /* .topbar gap spaces it */
  font-size: var(--fs-micro); font-family: var(--mono); vertical-align: middle;
  color: var(--muted); background: transparent; cursor: pointer;
  border: 1px solid var(--border-soft); border-radius: var(--r-sm); }
.brand-quit:hover { color: var(--red); border-color: var(--red); }
.brand-quit:disabled { opacity: .5; cursor: default; }
.quit-screen { display: flex; align-items: center; justify-content: center;
  height: 100vh; margin: 0; text-align: center; line-height: var(--lh-body);
  background: var(--bg); color: var(--muted); font-size: var(--fs-md); }
.quit-screen .quit-head { font-size: var(--fs-lg); color: var(--text);
  margin-bottom: var(--sp-2); }
.brand-sub { color: var(--muted); font-weight: var(--fw-normal); margin-left: 8px; letter-spacing: 0; }
.status { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.runs-link { margin-left: 6px; color: var(--accent); text-decoration: none; font-size: 12px; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--r-md); }
.runs-link:hover { border-color: var(--accent); }
.runs-link.active { background: var(--accent); color: var(--bg); border-color: var(--accent); cursor: default; font-weight: var(--fw-medium); }
.runs-link.active:hover { border-color: var(--accent); }

/* grouped project nav — a row of group buttons, each opening a dropdown */
.navbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nav-group { position: relative; }
.nav-grp-btn { font: inherit; font-size: 12px; line-height: 1; color: var(--accent);
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 4px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.nav-grp-btn:hover { border-color: var(--accent); }
.nav-caret { font-size: 9px; opacity: .7; }
.nav-group.has-active .nav-grp-btn { background: var(--accent); color: var(--bg);
  border-color: var(--accent); font-weight: var(--fw-medium); }
.nav-group.open .nav-grp-btn { border-color: var(--accent); }
.nav-grp-menu { display: none; position: absolute; top: calc(100% + 5px); right: 0;
  z-index: 60; min-width: 156px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 5px; box-shadow: var(--elev-2); }
.nav-group.open .nav-grp-menu { display: block; }
.nav-grp-menu .nav-item { display: block; color: var(--muted); text-decoration: none;
  font-size: 12px; padding: 6px 10px; border-radius: var(--r-sm); white-space: nowrap; }
.nav-grp-menu .nav-item:hover { background: var(--panel-2); color: var(--accent); }
.nav-grp-menu .nav-item.active { color: var(--accent); font-weight: var(--fw-medium); }
.nav-grp-menu .nav-item.active::before { content: "› "; color: var(--accent); }
.dot { display: inline-block; vertical-align: middle;
  width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
.dot.ok { background: var(--green); }
.dot.bad { background: var(--red); }

/* workspace = upper region + terminal dock, stacked */
.workspace { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* upper region: sidebar | canvas | sidebar */
.upper { flex: 1 1 auto; min-height: 0; display: flex; }

.sidebar {
  flex: 0 0 auto; width: 240px; min-width: 0;
  background: var(--panel); display: flex; flex-direction: column; overflow: hidden;
}
.sidebar.left { border-right: 1px solid var(--border); }
.sidebar.right { border-left: 1px solid var(--border); }
.side-head {
  padding: 10px 12px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--border);
}
.side-body { padding: 12px; overflow-y: auto; }
.side-body[hidden] { display: none; }   /* override flex display on the inactive tab */

/* inspector tab strip (right sidebar) */
.side-tabs { display: flex; gap: 0; padding: 0; align-items: stretch; }
.side-tab {
  flex: 1 1 0; padding: 9px 8px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
}
.side-tab:hover { color: var(--text); }
.side-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.hint { color: var(--muted); line-height: 1.5; margin: 0; }

/* control panel (left sidebar) */
.control-panel { display: flex; flex-direction: column; gap: 16px; }
.control-panel .field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.control-panel label { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.control-panel select,
.control-panel input[type="number"] {
  width: 100%; box-sizing: border-box; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text);
  font-family: var(--mono); font-size: 13px;
}
.control-panel select:focus,
.control-panel input[type="number"]:focus { outline: none; border-color: var(--accent); }
.control-panel .field-hint { font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; }

.control-panel .constraints { gap: 2px; }
.control-panel .constraints legend {
  font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted);
  padding: 0; margin-bottom: 2px;
}
.control-panel .check {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer;
}
.control-panel .check input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; margin: 0; }
/* a lone constraint in a group gets the full width so long labels don't wrap */
.control-panel .constraint-group .check:only-of-type { grid-column: 1 / -1; }

/* two-column, tightly spaced; group header spans both columns */
.control-panel .constraint-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px;
  padding: 5px 0; border-top: 1px solid var(--border);
}
.control-panel .constraint-group:first-of-type { border-top: 0; padding-top: 0; }
.control-panel .group-head {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted);
}
.control-panel .group-head .swap {
  font-size: 9px; letter-spacing: 0.5px; color: var(--accent);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 4px; line-height: 1.4;
}

.control-panel .game-controls { gap: 12px; }
.control-panel .game-controls legend {
  font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted);
  padding: 0; margin-bottom: 2px;
}
.control-panel .gc-panel { display: flex; flex-direction: column; gap: 12px; }
.control-panel .gc-panel[hidden] { display: none; }

/* constraint parameters + evolution + training controls */
.control-panel .constraint-params,
.control-panel .evolution,
.control-panel .training { gap: 10px; }
.control-panel .constraint-params legend,
.control-panel .evolution legend,
.control-panel .training legend {
  font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted);
  padding: 0; margin-bottom: 2px;
}
.control-panel .param-row { display: flex; align-items: center; gap: 8px; }
.control-panel .param-row[hidden] { display: none; }
.control-panel .param-row label { flex: 1 1 auto; }
.control-panel .param-row input[type="number"] { width: 5.4rem; flex: 0 0 auto; }
.control-panel input:disabled { opacity: 0.4; cursor: default; }
.control-panel .param-note { font-size: 11px; color: var(--accent); flex: 0 0 auto; letter-spacing: 0.5px; }

.train-actions { display: flex; gap: 6px; }
.train-btn {
  flex: 1 1 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); cursor: pointer;
  font-family: var(--mono); font-size: 12px;
}
.train-btn.start:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.train-btn.stop:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.train-btn:disabled { opacity: 0.45; cursor: default; }
.train-status {
  font-size: 11px; color: var(--muted); font-family: var(--mono);
  line-height: 1.4; min-height: 14px; word-break: break-word;
}

/* microscope (right sidebar) */
.scope-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.scope-toolbar { display: flex; align-items: center; gap: 6px; }
.scope-btn {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); cursor: pointer;
  font-family: var(--mono); font-size: 12px;
}
.scope-btn:hover { border-color: var(--accent); }
.scope-badge { margin-left: auto; font-size: 11px; color: var(--muted); }
.scope-stage { flex: 1 1 auto; min-height: 0; position: relative; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--panel-2); }
.scope-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.scope-readout {
  flex: 0 0 auto; font-size: 11px; color: var(--muted);
  font-family: var(--mono); line-height: 1.4; min-height: 16px; word-break: break-word;
}

.scope-watch { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 8px; }
.scope-watch-head { font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.scope-watch-head span { color: var(--accent); }
.scope-watch-list { list-style: none; margin: 0; padding: 0; max-height: 148px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.scope-watch-item {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-2);
  font-size: 11px;
}
.scope-watch-item .w-label { color: var(--text); flex: 0 0 auto; }
.scope-watch-item .w-val { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.scope-watch-item .w-remove {
  flex: 0 0 auto; border: none; background: none; color: var(--muted);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px;
}
.scope-watch-item .w-remove:hover { color: var(--red); }
.scope-watch-empty { font-size: 11px; color: var(--muted); opacity: 0.8; }
.scope-watch-empty[hidden] { display: none; }

/* PO Metrics tab */
.po-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.po-stage { flex: 1 1 auto; min-height: 0; position: relative; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--panel-2); }
.po-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.po-readout {
  flex: 0 0 auto; font-size: 11px; color: var(--muted);
  font-family: var(--mono); line-height: 1.4; min-height: 16px; word-break: break-word;
}

/* main canvas */
.canvas-wrap { flex: 1 1 auto; min-width: 0; position: relative; background: var(--bg); }
#canvas { position: absolute; inset: 0; display: block; }

/* =============================== runs dashboard ======================= */
.runs-body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.runs-top-actions { margin-left: auto; display: flex; gap: 8px; }
.runs-btn {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); cursor: pointer;
  font-family: var(--mono); font-size: 12px; text-decoration: none; display: inline-block;
}
.runs-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.runs-btn:disabled { opacity: 0.45; cursor: default; }

.runs-layout { flex: 1 1 auto; min-height: 0; display: flex; }
.runs-tree { flex: 0 0 320px; border-right: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; overflow: hidden; }
.env-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; border-bottom: 1px solid var(--border); }
.env-tab { padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: transparent; color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 11px; text-transform: capitalize; }
.env-tab:hover { color: var(--text); }
.env-tab.active { color: var(--text); border-color: var(--accent); background: var(--panel-2); }

.tree { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 12px 14px; }
.tree-empty, .detail-empty { color: var(--muted); font-size: 12px; line-height: 1.6; padding: 10px; }
.tree-root { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 8px; }
.tree-branches { border-left: 1px solid var(--border); margin-left: 6px; padding-left: 0; }
.tree-node { position: relative; margin: 0 0 8px 16px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); cursor: pointer; display: flex; gap: 8px; align-items: flex-start; }
.tree-node::before { content: ""; position: absolute; left: -16px; top: 17px; width: 16px; border-top: 1px solid var(--border); }
.tree-node:hover { border-color: var(--accent); }
.tree-node.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tn-main { min-width: 0; }
.tn-title { font-size: 12px; color: var(--text); }
.tn-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; word-break: break-word; }
.tn-sub .ckpt, .dh-badges .ckpt { color: var(--green); }

/* runs organization: filter toolbar, groups, favorites, labels, tags */
.runs-filter { padding: 8px 10px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.runs-filter input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); font-family: var(--mono); font-size: 12px;
}
.runs-filter input[type="text"]:focus { outline: none; border-color: var(--accent); }
.rf-row { display: flex; gap: 6px; }
.rf-row select {
  flex: 1 1 auto; min-width: 0; padding: 5px 6px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); font-family: var(--mono); font-size: 11px;
}
.rf-toggle {
  flex: 0 0 auto; padding: 4px 9px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 13px;
}
.rf-toggle:hover, .rf-toggle.on { color: #e3b341; border-color: #e3b341; }

.group-head {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin: 4px 0 8px;
  cursor: pointer; user-select: none; color: var(--text); font-size: 12px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2);
}
.group-head:hover { border-color: var(--accent); }
.gh-arrow { color: var(--muted); font-size: 10px; }
.gh-count { margin-left: auto; color: var(--muted); font-size: 11px; }

.tn-star {
  margin-left: auto; align-self: center; flex: 0 0 auto;
  border: none; background: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 2px;
}
.tn-star:hover, .tn-star.on { color: #e3b341; }
.tn-date { color: var(--muted); font-weight: var(--fw-normal); font-size: 10.5px; }
.tag-chip {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: var(--r-md); font-size: 10px; color: var(--accent);
}

.dh-star {
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2);
  color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 9px;
}
.dh-star:hover, .dh-star.on { color: #e3b341; border-color: #e3b341; }
.meta-edit { display: flex; gap: 6px; align-items: center; margin: -4px 0 14px; flex-wrap: wrap; }
.meta-edit .me-in {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); font-family: var(--mono); font-size: 12px;
}
.meta-edit .me-in:focus { outline: none; border-color: var(--accent); }
#me-label { flex: 2 1 170px; } #me-group { flex: 1 1 110px; } #me-tags { flex: 2 1 170px; }
.me-status { font-size: 11px; color: var(--muted); }
.st-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; background: var(--muted); }
.st-dot.ok { background: var(--green); } .st-dot.warn { background: var(--amber); } .st-dot.run { background: var(--accent); } .st-dot.bad { background: var(--red); }

.runs-detail { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 16px; }
.detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dh-title { font-size: 14px; color: var(--text); }
.dh-sub { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.dh-badges { display: flex; align-items: center; gap: 8px; }
.dh-badges .ckpt, .dh-badges .nockpt { font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.dh-badges .nockpt { color: var(--muted); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.d-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel); padding: 12px 14px; box-shadow: var(--shadow-sm); }
.d-card.wide { grid-column: 1 / -1; }
.d-card h3 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: var(--fw-medium); }
/* run audio (musicgen chunks: summary.audio) */
.run-audio { display: flex; flex-direction: column; gap: 9px; }
.run-audio audio { width: 100%; filter: saturate(.6); }
.run-audio .ra-prompt { font-size: 12px; color: var(--text); line-height: 1.55; }
.run-audio .ra-rows { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
.run-audio .ra-rows i { color: var(--muted); font-style: normal; margin-right: 5px; }
table.cfg { width: 100%; border-collapse: collapse; font-size: 12px; }
table.cfg td { padding: 3px 6px; border-bottom: 1px solid rgba(43,52,68,0.5); }
table.cfg td:first-child { color: var(--muted); width: 44%; }
table.cfg td:last-child { color: var(--text); word-break: break-word; }
.result { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12px; margin-bottom: 10px; }
.result > div { display: flex; justify-content: space-between; gap: 8px; }
.result span { color: var(--muted); } .result b { color: var(--text); font-variant-numeric: tabular-nums; }
.d-spark { width: 100%; height: 70px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); display: block; }
.spark-legend { font-size: 10px; color: var(--muted); margin-top: 4px; }
.spark-legend .dot { display: inline-block; width: 8px; height: 3px; border-radius: var(--r-sm); }
.spark-legend .dot.best { background: var(--accent); } .spark-legend .dot.mean { background: #7d8794; margin-left: 6px; }
.infer-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.infer-status { font-size: 11px; color: var(--muted); }
.infer-stage { position: relative; height: 340px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--bg); }
.infer-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* floating training metrics HUD */
.game-hud {
  position: absolute; top: 12px; right: 12px; z-index: 20;
  width: 232px; padding: 8px 10px 10px;
  background: rgba(13, 17, 23, 0.86); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--elev-1); backdrop-filter: blur(3px);
  font-family: var(--mono); color: var(--text); user-select: none;
}
.game-hud[hidden] { display: none; }
.hud-head { display: flex; align-items: center; gap: 6px; cursor: move; margin-bottom: 6px; }
.hud-title { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.hud-gen { margin-left: auto; font-size: 12px; color: var(--accent); }
.hud-close { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.hud-close:hover { color: var(--red); }
.hud-spark { display: block; width: 100%; height: 52px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.hud-legend { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); margin: 4px 0 6px; }
.hud-legend .dot { width: 8px; height: 3px; border-radius: var(--r-sm); display: inline-block; }
.hud-legend .dot.best { background: var(--accent); }
.hud-legend .dot.mean { background: #7d8794; margin-left: 6px; }
.hud-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: 11px; }
.hud-rows > div { display: flex; justify-content: space-between; gap: 6px; }
.hud-rows span { color: var(--muted); }
.hud-rows b { color: var(--text); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }

/* resizers */
.resizer { flex: 0 0 auto; background: transparent; z-index: 5; }
.resizer.v { width: 6px; cursor: col-resize; }
.resizer.h { height: 6px; cursor: row-resize; }
.resizer:hover, .resizer.dragging { background: var(--accent); }

/* terminal dock */
.terminal-panel {
  flex: 0 0 auto; height: 42vh; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg); border-top: 1px solid var(--border);
}
.term-header {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 0; background: var(--panel); border-bottom: 1px solid var(--border);
}
.tabs { display: flex; gap: 4px; overflow-x: auto; }
.tab {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--r-md) 7px 0 0; background: var(--panel-2); color: var(--muted);
  cursor: pointer; white-space: nowrap; user-select: none;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--bg); color: var(--text); border-color: var(--accent); }
.tab.dead .title { text-decoration: line-through; opacity: .6; }
.tab .close { border: none; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.tab .close:hover { color: var(--red); }
/* held: a closed-but-reopenable session waiting out its grace window */
.tab.held { border-style: dashed; opacity: .72; color: var(--muted); }
.tab.held:hover { opacity: 1; color: var(--text); border-color: var(--accent); }
.tab.held .reopen-ico { color: var(--accent); font-size: 13px; }
.tab.held .title { font-style: italic; }
.tab.held .held-timer { font-family: var(--mono); font-size: 10px; color: var(--muted);
  background: rgba(255,255,255,.06); border-radius: var(--r-sm); padding: 1px 5px; }

/* project tag: colored dot on every tab; a labelled tab is tinted with --pc */
.tab .pdot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--border); background: transparent; cursor: pointer;
}
.tab .pdot:hover { transform: scale(1.25); }
.tab.tagged { border-color: var(--pc); }
.tab.tagged .title { color: var(--pc); }
.tab.active.tagged { border-color: var(--pc); box-shadow: inset 0 -2px 0 var(--pc); }

/* active-terminal project banner: the loud "you are typing into X" strip */
.term-projbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 4px 12px; font-size: 12px; cursor: pointer;
  background: var(--panel); border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.term-projbar.tagged {
  background: color-mix(in srgb, var(--pc) 16%, var(--panel));
  border-bottom: 2px solid var(--pc); color: var(--text);
}
.term-projbar .pb-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.term-projbar .pb-name { letter-spacing: .4px; color: var(--pc); }
.term-projbar .pb-hint { font-size: 11px; color: var(--muted); }
.term-projbar.tagged .pb-hint { opacity: .8; }

/* active pane keeps a thin colored frame while its project is tagged */
.pane.tagged { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 55%, transparent); }

/* the project picker menu */
.term-projmenu {
  position: fixed; z-index: 1000; min-width: 168px; max-height: 60vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--elev-1); padding: 4px;
}
.term-projmenu .pm-head {
  font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); padding: 5px 8px 3px;
}
.term-projmenu .pm-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--r-md); cursor: pointer; font-size: 12px; color: var(--text);
}
.term-projmenu .pm-row:hover { background: var(--panel-2); }
.term-projmenu .pm-row.on { background: var(--panel-2); font-weight: var(--fw-medium); }
.term-projmenu .pm-sw { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.term-projmenu .pm-clear { color: var(--muted); margin-top: 2px; border-top: 1px solid var(--border); }

.tab-new {
  align-self: center; margin-left: 4px; padding: 5px 10px;
  border: 1px dashed var(--border); border-radius: var(--r-md);
  background: transparent; color: var(--muted); cursor: pointer;
}
.tab-new:hover { color: var(--accent); border-color: var(--accent); }

.term-actions { margin-left: auto; display: flex; gap: 6px; padding-bottom: 6px; }
.term-actions button {
  padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); cursor: pointer; font-family: var(--mono); font-size: 12px;
}
.term-actions button:hover { border-color: var(--accent); }
#btn-stop:hover { border-color: var(--red); color: var(--red); }
/* connection indicator inside the injected dock header (pages without a topbar slot) */
.term-actions .dot { align-self: center; }
.term-conn { align-self: center; font-size: 11px; color: var(--muted); margin-right: 6px; white-space: nowrap; }

/* changelog modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.modal-overlay[hidden] { display: none; }
.modal {
  width: min(720px, 90vw); max-height: 80vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--elev-2);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 13px; color: var(--text);
}
.modal-close {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 4px;
}
.modal-close:hover { color: var(--red); }
.clg-scope {
  margin-left: auto; margin-right: 10px; padding: 3px 9px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: 11px;
}
.clg-scope:hover { color: var(--accent); border-color: var(--accent); }
.modal-body {
  margin: 0; padding: 14px 16px; overflow: auto;
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
}

/* agent panel — floating notice feed, present on every page (above content,
   below modals). Draggable by its header; minimizes to a pill with a badge. */
.agent-panel {
  position: fixed; top: 48px; right: 16px; width: 370px; max-height: 55vh;
  display: flex; flex-direction: column; z-index: 45;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--elev-2); overflow: hidden;
}
.agent-panel[hidden] { display: none; }
.ap-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--panel-2); border-bottom: 1px solid var(--border);
  cursor: move; user-select: none;
  font-family: var(--mono); font-size: 12px; color: var(--text);
}
.ap-title { font-weight: var(--fw-bold); letter-spacing: 1px; }
.ap-head .ap-btn:first-of-type { margin-left: auto; }
.ap-btn {
  border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent;
  color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 11px; padding: 2px 8px;
}
.ap-btn:hover { color: var(--text); border-color: var(--accent); }
.ap-badge {
  background: var(--red); color: #fff; border-radius: var(--r-lg);
  font-size: 10px; font-weight: var(--fw-bold); padding: 1px 6px; line-height: 1.5;
}
.ap-badge[hidden] { display: none; }
.ap-body { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.ap-empty { color: var(--muted); font-size: 12px; padding: 12px; text-align: center; line-height: 1.5; }
.ap-row { border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 9px; background: var(--panel-2); }
.ap-row.unread { border-color: var(--accent); }
.ap-row.linked { cursor: pointer; }
.ap-row.linked:hover { border-color: var(--accent); background: var(--panel); }
.ap-row-head { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.ap-kind {
  flex: 0 0 auto; font-size: 9px; text-transform: uppercase; letter-spacing: 1px;
  padding: 1px 6px; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--muted);
}
.ap-row.k-test .ap-kind { color: var(--green); border-color: var(--green); }
.ap-row.k-run .ap-kind { color: var(--accent); border-color: var(--accent); }
.ap-row.k-alert .ap-kind { color: var(--red); border-color: var(--red); }
.ap-row-title { color: var(--text); flex: 1 1 auto; min-width: 0; word-break: break-word; }
.ap-time { flex: 0 0 auto; color: var(--muted); font-size: 10px; white-space: nowrap; }
.ap-row-body {
  margin: 6px 0 0; font-family: var(--mono); font-size: 11px; color: var(--muted);
  white-space: pre-wrap; word-break: break-word; max-height: 150px; overflow-y: auto;
}
.agent-pill {
  position: fixed; top: 52px; right: 16px; z-index: 45;
  display: flex; align-items: center; gap: 5px; padding: 6px 11px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--panel); color: var(--text); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: var(--elev-1);
}
.agent-pill[hidden] { display: none; }
.agent-pill.pulse { border-color: var(--accent); animation: ap-pulse 1.6s ease-in-out infinite; }
@keyframes ap-pulse {
  0%, 100% { box-shadow: var(--elev-1); }
  50% { box-shadow: 0 0 0 7px rgba(78, 161, 255, 0.22); }
}

/* run-config panel — sibling of the agent panel: tracks the active page's
   run configuration + results. Same drag/minimize interaction. */
.run-panel {
  position: fixed; top: 48px; right: 400px; width: 340px; max-height: 60vh;
  display: flex; flex-direction: column; z-index: 44;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--elev-2); overflow: hidden;
}
.run-panel[hidden] { display: none; }
.rp-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--panel-2); border-bottom: 1px solid var(--border);
  cursor: move; user-select: none;
  font-family: var(--mono); font-size: 12px; color: var(--text);
}
.rp-title { font-weight: var(--fw-bold); letter-spacing: 1px; }
.rp-push { margin-left: auto; }
.rp-chip {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  padding: 1px 7px; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--muted);
}
.rp-chip.ok { color: var(--green); border-color: var(--green); }
.rp-chip.run { color: var(--amber); border-color: var(--amber); }
.rp-chip.warn { color: var(--amber); border-color: var(--amber); }
.rp-chip.bad { color: var(--red); border-color: var(--red); }
.rp-body { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.rp-empty { color: var(--muted); font-size: 12px; line-height: 1.55; padding: 6px 2px; }
.rp-runid { font-family: var(--mono); font-size: 11px; color: var(--accent); word-break: break-all; }
.rp-sec-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
  border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 6px;
}
.rp-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.rp-table td { padding: 2px 6px 2px 0; vertical-align: top; word-break: break-word; }
.rp-table td:first-child { color: var(--muted); white-space: nowrap; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; }
.rp-table td:last-child { color: var(--text); }
.run-pill { top: 92px; }   /* stacks under the Agent pill when both minimized */

/* config history (bottom of the run-config panel) */
.rp-histsec { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.rp-hist-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rp-hist-sel {
  padding: 2px 4px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--panel-2); color: var(--muted); font-family: var(--mono); font-size: 10px;
}
.rp-hitem { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2); }
.rp-hitem-head {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px; cursor: pointer;
  font-family: var(--mono); font-size: 11px;
}
.rp-hitem-head:hover { background: var(--panel); }
.rp-hdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.rp-hdot.ok { background: var(--green); }
.rp-hdot.run { background: var(--amber); }
.rp-hdot.warn { background: var(--amber); }
.rp-hdot.bad { background: var(--red); }
.rp-henv { color: var(--accent); flex: 0 0 auto; }
.rp-htime { color: var(--muted); flex: 0 0 auto; }
.rp-hres { color: var(--text); flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.rp-hcopy { flex: 0 0 auto; }
.rp-hdetail { padding: 4px 8px 8px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px; }

/* terminal panes */
.panes { flex: 1 1 auto; min-height: 0; position: relative; background: var(--bg); overflow: hidden; }
.pane { position: absolute; inset: 0; padding: 8px 10px; display: none; }
.pane.active { display: block; }
.pane .xterm { height: 100%; }
.pane .xterm-viewport::-webkit-scrollbar { width: 10px; }
.pane .xterm-viewport::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-sm); }

/* ══════════════════════════════════════════════════════════
   Tree-of-Models page (/tree)
   Chart palette validated on the dark surface (#161b22):
   series-1 blue #3987e5, series-2 aqua #199e70, active #c98500.
   ══════════════════════════════════════════════════════════ */
.tlm-body {
  --tlm-s1: #3987e5;          /* series 1 — best fitness / routers */
  --tlm-s2: #199e70;          /* series 2 — mean fitness / leaves  */
  --tlm-active: #c98500;      /* node currently evolving           */
  --tlm-idle: #232b38;        /* untrained node                    */
  --tlm-grid: #222a36;        /* hairline gridline                 */
  --tlm-baseline: #3a4456;    /* axis baseline                     */
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}
.tlm-layout { flex: 1 1 auto; min-height: 0; display: flex; }
.tlm-side { overflow-y: auto; }

/* PURE — node-graph model assembler */
.pg-main { padding: 0 !important; display: flex; flex-direction: column; }
.pg-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--panel); border-bottom: 1px solid var(--border); }
.pg-tb-label { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin: 0 2px 0 6px; }
.pg-tb-label.pg-tb-con { color: #e0a02a; }
.pg-add { --pg-accent: var(--accent); font-size: 11px; color: var(--text); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--pg-accent);
  border-radius: var(--r-sm); padding: 3px 8px; }
.pg-add:hover { border-color: var(--pg-accent); }

.pg-genome-panel { flex: 0 0 auto; height: 220px; border-top: 1px solid var(--border);
  background: var(--panel); padding: 8px 14px 10px; overflow: hidden;
  display: flex; flex-direction: column; }
.pg-recon-panel { flex: 0 0 auto; height: 150px; border-top: 1px solid var(--border);
  background: var(--panel); padding: 8px 14px 10px; overflow: hidden; display: flex; flex-direction: column; }
.pg-recon-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
#pu-recon { display: block; image-rendering: pixelated; }
.pg-genome-head { flex: 0 0 auto; font-size: 12px; font-weight: var(--fw-medium); color: var(--text); margin-bottom: 4px; }
.pg-genome-head .tlm-card-sub { font-weight: var(--fw-normal); }
#pure-genome-viz { flex: 1 1 auto; min-height: 0; }
#pure-genome-viz svg { width: 100%; height: 100%; }

/* drag-resizers: col = between side panels and centre; row = graph/genome split */
.pg-resizer-col { flex: 0 0 auto; width: 6px; cursor: col-resize; background: var(--border); opacity: 0.45; }
.pg-resizer-row { flex: 0 0 auto; height: 6px; cursor: row-resize; background: var(--border); opacity: 0.45; }
.pg-resizer-col:hover, .pg-resizer-row:hover, .pg-resizing { opacity: 1; background: var(--accent); }

.pg-canvas { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  background-color: var(--bg); cursor: grab;
  background-image: radial-gradient(var(--tlm-grid) 1px, transparent 1px);
  background-size: 22px 22px; }
.pg-canvas:active { cursor: grabbing; }
.pg-world { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.pg-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.pg-wire { fill: none; stroke: var(--muted); stroke-width: 2; }
.pg-wire-temp { stroke: var(--accent); stroke-dasharray: 5 4; }
.pg-wire-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }

.pg-node { position: absolute; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--elev-1); user-select: none; }
.pg-node.selected { border-color: var(--pg-accent); box-shadow: 0 0 0 2px var(--pg-accent); }
.pg-node-head { display: flex; justify-content: space-between; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px; border-radius: var(--r-md) 7px 0 0; cursor: grab;
  font-size: 12px; font-weight: var(--fw-medium); color: #0d1117; }
.pg-node-head:active { cursor: grabbing; }
.pg-node-badge { font-size: 10px; font-weight: var(--fw-normal); opacity: 0.85; white-space: nowrap; }
.pg-port { position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--panel-2); border: 2px solid var(--pg-accent); cursor: crosshair; }
.pg-port.pg-in { left: -6px; }
.pg-port.pg-out { right: -6px; }
.pg-port:hover { background: var(--pg-accent); }
.pg-port-label { position: absolute; font-size: 10px; color: var(--muted); pointer-events: none; }
.pg-in-label { left: 12px; }
.pg-out-label { right: 12px; }

.pg-props-side { width: 232px; }
.pg-props-side .side-head { display: flex; justify-content: space-between; align-items: center; }
.pu-con-count { font-size: 10px; letter-spacing: 0.5px; color: var(--accent);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 5px; line-height: 1.5; text-transform: none; }
.pg-prop-id { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.pg-preview { padding: 6px 0 2px; }
.pg-preview-svg { display: block; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); }
.pg-preview-canvas { display: block; width: 128px; height: 128px; image-rendering: pixelated;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.pg-preview-cap { font-size: 10px; color: var(--muted); margin-top: 4px; }
.pu-metric { font-size: 11px; color: var(--accent); font-family: var(--mono, monospace); margin-bottom: 4px; }
.pu-chart { width: 100%; height: auto; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-md); display: block; margin-top: 4px; }
.pu-chart-cap { font-size: 10px; color: var(--muted); margin: 2px 0 6px; }
.pg-del { color: var(--red); border-color: var(--border); margin-top: 6px; }
.pg-del:hover { border-color: var(--red); }
.tlm-side .side-body { overflow-y: visible; }
.tlm-actions { display: flex; gap: 8px; }
.tlm-primary { border-color: var(--accent); color: var(--accent); }
.tlm-status { font-size: 12px; color: var(--amber); min-height: 16px; }
.tlm-corpus { font-size: 11px; color: var(--muted); line-height: 1.5; }

.tlm-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }

/* stat tiles */
.tlm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.tlm-tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 12px; box-shadow: var(--shadow-sm); }
.tlm-tile-label { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tlm-tile-value { font-size: 20px; color: var(--text); }
.tlm-tile-value.tlm-up { color: var(--green); }
.tlm-tile-value.tlm-down { color: var(--red); }

/* cards + legends */
.tlm-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; box-shadow: var(--shadow-sm); }
.tlm-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tlm-card-head h2 { margin: 0; font-size: 13px; color: var(--text); font-weight: var(--fw-medium); }
.tlm-card-sub { font-size: 11px; color: var(--muted); font-weight: var(--fw-normal); }
.tlm-legend { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tlm-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.tlm-chip i { width: 10px; height: 10px; border-radius: var(--r-sm); display: inline-block; }
.tlm-chip .tlm-ramp { width: 46px; background: linear-gradient(90deg, #184f95, #2a78d6, #5598e7, #b7d3f6); }
.tlm-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 980px) { .tlm-two-col { grid-template-columns: 1fr; } }

/* images page */
.im-canvas-wrap { display: flex; align-items: center; justify-content: center; min-height: 400px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); }
.im-output { max-width: 100%; max-height: 70vh; border-radius: var(--r-sm); }
.im-placeholder { color: var(--muted); font-size: 13px; padding: 20px; }
.im-rev-grid { display: flex; flex-direction: column; gap: 10px; }
.im-rev-jobhead { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.im-rev-jobhead:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.im-rev-card { display: flex; flex-direction: row; align-items: stretch; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; }
.im-rev-card img { width: 160px; height: 160px; object-fit: contain; border-radius: var(--r-sm); display: block; flex: 0 0 auto; background: var(--panel-2); }
.im-rev-idx { font-size: 11px; color: var(--muted); flex: 0 0 auto; writing-mode: horizontal-tb; align-self: flex-start; }
.im-rev-prompt { flex: 1 1 auto; box-sizing: border-box; resize: vertical; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--mono); font-size: 11px; padding: 6px; }
.tlm-chart-wrap svg { display: block; width: 100%; }

/* video page */
.vd-library { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.vd-libcard { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.vd-thumb { width: 100%; max-height: 140px; object-fit: contain; background: var(--panel-2); border-radius: var(--r-sm); display: block; }
.vd-libname { font-size: 12px; color: var(--text); word-break: break-all; }
.vd-libmeta { font-size: 10px; color: var(--muted); font-family: var(--mono, monospace); }
.vd-librow { display: flex; gap: 6px; flex-wrap: wrap; }
.vd-mini { font-size: 10px; padding: 3px 8px; text-decoration: none; display: inline-flex; align-items: center; }
.vd-player-wrap { display: flex; align-items: center; justify-content: center; min-height: 260px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); }
.vd-player { max-width: 100%; max-height: 56vh; border-radius: var(--r-sm); }
.vd-head-actions { margin-left: auto; }
.vd-timeline { display: flex; flex-direction: column; gap: 8px; }
.vd-clip { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.vd-clip-head { font-size: 12px; color: var(--text); cursor: pointer; }
.vd-clip-head:hover { color: var(--accent); }
.vd-clip-points { display: flex; gap: 14px; flex-wrap: wrap; }
.vd-clip-point { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.vd-clip-point input { width: 80px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px 6px; font-family: var(--mono, monospace); font-size: 11px; }
.vd-jobs { display: flex; flex-direction: column; gap: 8px; }
.vd-job { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.vd-job-top { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text); flex-wrap: wrap; }
.vd-job-state { color: var(--muted); font-family: var(--mono, monospace); margin-left: auto; }
.vd-job-done .vd-job-state { color: var(--green); }
.vd-job-error .vd-job-state { color: var(--red); }
.vd-job-bar { height: 4px; background: var(--panel-2); border-radius: var(--r-sm); overflow: hidden; }
.vd-job-fill { height: 100%; background: var(--accent); transition: width 0.4s; }
.vd-job-error .vd-job-fill { background: var(--red); }
.vd-job-msg { font-size: 10px; color: var(--red); font-family: var(--mono, monospace); white-space: pre-wrap; margin: 0; max-height: 90px; overflow-y: auto; }

/* video page — animation studio (rigs + scenes) */
.vd-viewwrap { display: flex; flex-direction: column; gap: 14px; }
.vd-stage-wrap { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.vd-stage { display: block; width: 100%; max-height: 62vh; }
.vd-scrub { width: 100%; margin-top: 8px; }
.vd-doclist { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; max-height: 300px; overflow-y: auto; }
.vd-docrow { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px 8px; cursor: pointer; }
.vd-docrow:hover { border-color: var(--accent); }
.vd-docrow.sel { border-color: var(--accent); background: var(--panel-2); }
.vd-docname { font-size: 11px; color: var(--text); word-break: break-all; }
.vd-docsub { font-size: 10px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.vd-partlist { max-height: 420px; }
.vd-parts-grid { display: grid; grid-template-columns: 220px 1fr; gap: 12px; }
@media (max-width: 900px) { .vd-parts-grid { grid-template-columns: 1fr; } }
.vd-partform { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.vd-f { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--muted); }
.vd-f input[type="number"], .vd-f input[type="text"] { width: 78px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px 6px; font-family: var(--mono, monospace); font-size: 11px; }
.vd-f input[type="text"] { width: 110px; }
.vd-f select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px 4px; font-size: 11px; }
.vd-f input[type="color"] { width: 44px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-2); }
.vd-f input[type="checkbox"] { width: 16px; height: 16px; margin-top: 3px; }
.vd-f-wide { flex: 1 1 100%; }
.vd-f-wide textarea { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--mono, monospace); font-size: 11px; padding: 4px 6px; }
.vd-rows { display: flex; flex-direction: column; gap: 8px; }
.vd-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; }
.vd-row .runs-btn { margin-left: auto; }
.vd-inline { flex-direction: row !important; align-items: center; gap: 6px; }
.vd-inline span { font-size: 10px; color: var(--muted); }
.vd-inline input[type="number"] { width: 62px; }
.vd-inline input[type="text"] { flex: 1; min-width: 80px; }
.vd-mini-select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px 6px; font-size: 11px; max-width: 150px; }
.vd-part-sel { outline: 1.5px dashed #e4b13c; outline-offset: 2px; }
.vd-stage-wrap { position: relative; }
.vd-stage-tall .vd-stage { min-height: 420px; max-height: 68vh; }
.vd-float { position: absolute; top: 10px; width: 218px; max-height: calc(100% - 20px); display: flex; flex-direction: column; background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--border); border-radius: var(--r-md); backdrop-filter: blur(3px); overflow: hidden; }
.vd-float-left { left: 10px; }
.vd-float-right { right: 10px; }
.vd-float-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; font-size: 11px; color: var(--text); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.vd-float-toggle { background: none; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--muted); font-size: 11px; width: 20px; height: 18px; line-height: 1; cursor: pointer; padding: 0; }
.vd-float-toggle:hover { color: var(--text); border-color: var(--accent); }
.vd-float.collapsed .vd-float-body { display: none; }
.vd-float.collapsed { max-height: none; }
.vd-float-body { padding: 8px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.vd-float .vd-partlist { max-height: none; }
.vd-handle { cursor: grab; }
.vd-handle:active { cursor: grabbing; }
.vd-ord { display: flex; align-items: center; gap: 3px; }
.vd-ordnum { font-size: 11px; color: var(--muted); font-family: var(--mono, monospace); min-width: 16px; text-align: right; }
.vd-timespan { font-size: 10px; color: var(--amber); font-family: var(--mono, monospace); white-space: nowrap; align-self: center; }

/* icicle */
.tlm-node { cursor: pointer; }
.tlm-node:hover { stroke: var(--text); stroke-width: 1; }
.tlm-node-label { font-family: var(--mono); font-size: 10px; pointer-events: none; }
.tlm-pulse { animation: tlm-pulse 1.1s ease-in-out infinite; }
@keyframes tlm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* chart chrome */
.tlm-grid { stroke: var(--tlm-grid); stroke-width: 1; }
.tlm-baseline { stroke: var(--tlm-baseline); stroke-width: 1; }
.tlm-axis-label { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
.tlm-crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }

/* tooltip */
.tlm-tooltip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 7px 9px; font-size: 11px; line-height: 1.55; color: var(--text);
  box-shadow: var(--elev-1); max-width: 260px;
}
.tlm-dotchip { width: 8px; height: 8px; border-radius: var(--r-sm); display: inline-block; margin-right: 5px; }

/* depth table view */
.tlm-table-view { margin-top: 8px; font-size: 11px; color: var(--muted); }
.tlm-table-view summary { cursor: pointer; }
.tlm-table-view table { border-collapse: collapse; margin-top: 6px; }
.tlm-table-view th, .tlm-table-view td { border: 1px solid var(--border); padding: 3px 10px; color: var(--text); font-variant-numeric: tabular-nums; }
.tlm-table-view th { color: var(--muted); font-weight: var(--fw-normal); }

/* generation panel */
.tlm-genrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tlm-genrow input[type="text"] {
  flex: 1 1 240px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); font-family: var(--mono); font-size: 13px;
}
.tlm-genrow input[type="text"]:focus { outline: none; border-color: var(--accent); }
.tlm-genrow label { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.tlm-genrow input[type="number"] {
  width: 70px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); font-family: var(--mono); font-size: 12px;
}
.tlm-gen-out {
  margin: 0; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
  white-space: pre-wrap; word-break: break-word; color: var(--text);
  font-size: 13px; line-height: 1.6; min-height: 60px; max-height: 320px; overflow-y: auto;
}
.tlm-gen-out b { color: var(--accent); font-weight: var(--fw-medium); }

/* routing inspector */
.tlm-strip {
  margin-bottom: 10px; padding: 8px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-md);
  line-height: 1.9; word-break: break-all;
}
.tlm-strip-prompt { color: var(--muted); margin-right: 6px; letter-spacing: 1px; }
.tlm-step {
  display: inline-block; min-width: 14px; text-align: center; padding: 0 2px;
  border-radius: var(--r-sm); cursor: pointer; border: 1px solid transparent;
}
.tlm-step:hover { border-color: var(--accent); }
.tlm-step.sel { background: var(--accent); color: #0b0f16; font-weight: var(--fw-bold); }
.tlm-step.ctl { color: var(--amber); font-size: 10px; }
.tlm-tr-detail { display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--muted); }
.tlm-tr-head { color: var(--text); }
.tlm-tr-head code { color: var(--accent); word-break: break-all; }
.tlm-tr-byte { color: var(--green); }
.tlm-hop { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; background: var(--panel-2); }
.tlm-hop-head { color: var(--text); margin-bottom: 6px; font-size: 12px; }
.tlm-hop-head b { color: var(--accent); }
.tlm-warn { color: var(--amber); }
.tlm-bar-row { display: grid; grid-template-columns: 110px 1fr 120px; gap: 10px; align-items: center; padding: 1px 0; color: var(--muted); }
.tlm-bar-row.chosen { color: var(--text); }
.tlm-bar { height: 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.04); overflow: hidden; }
.tlm-bar-fill { height: 100%; border-radius: var(--r-sm); background: #3a4456; }
.tlm-bar-row.chosen .tlm-bar-fill { background: var(--tlm-s1); }
.tlm-bar-label { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlm-bar-value { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* saved traces list (runs page) + trace export */
.trace-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.trace-row {
  display: grid; grid-template-columns: 150px 130px 1fr 2fr; gap: 10px;
  padding: 5px 8px; border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.trace-row:hover { border-color: var(--border); background: var(--panel-2); }
.trace-row.sel { border-color: var(--accent); background: var(--panel-2); }
.trace-row .tr-prompt { color: var(--accent); overflow: hidden; text-overflow: ellipsis; }
.trace-row .tr-text { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.tlm-export {
  margin-left: 10px; padding: 1px 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--panel-2); color: var(--muted); cursor: pointer;
  font-family: var(--mono); font-size: 10px; vertical-align: middle;
}
.tlm-export:hover { border-color: var(--accent); color: var(--accent); }

/* config sweep */
.tlm-sweep-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px 18px; margin-bottom: 10px; }
.tlm-sweep-row { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; }
.tlm-sweep-row .check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
.tlm-sweep-row .check input { accent-color: var(--accent); margin: 0; }
.tlm-sweep-vals {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); font-family: var(--mono); font-size: 12px;
}
.tlm-sweep-vals:disabled { opacity: 0.35; }
.tlm-sweep-vals:focus { outline: none; border-color: var(--accent); }
.tlm-sweep-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.tlm-sweep-table th { color: var(--muted); font-weight: var(--fw-normal); text-align: left; }
.tlm-sweep-table th, .tlm-sweep-table td { border: 1px solid var(--border); padding: 4px 10px; font-variant-numeric: tabular-nums; }
.tlm-sweep-table tr.best td { background: rgba(78, 161, 255, 0.10); }
.tlm-sweep-table a { color: var(--accent); text-decoration: none; }
.tlm-sweep-table td.tlm-up { color: var(--green); }
.tlm-sweep-table td.tlm-down { color: var(--red); }

/* =============================== embedding cloud ====================== */
.emb-info { font-size: 11.5px; color: var(--muted); font-family: var(--mono); margin-bottom: 8px; line-height: 1.5; }
.emb-stage { position: relative; height: 380px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--panel-2); }
.emb-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.emb-legend { margin-top: 6px; font-size: 11px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.emb-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

/* =============================== encoder modal ======================== */
.enc-modal-body { white-space: normal; }
.enc-modal-body .control-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.enc-modal-body .tlm-actions { margin-top: 10px; }
.enc-saved-head { margin: 14px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: var(--fw-medium); }
.enc-list { font-size: 12px; color: var(--muted); }
.enc-list .runs-btn { padding: 2px 8px; font-size: 11px; }

/* =============================== docs browser ========================= */
.docs-search { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.docs-search input {
  width: 100%; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); font-family: var(--mono); font-size: 12px;
}
.docs-search input:focus { outline: none; border-color: var(--accent); }
.doc-ext {
  flex: 0 0 auto; font-size: 9.5px; font-family: var(--mono); text-transform: uppercase;
  padding: 2px 5px; border-radius: var(--r-sm); border: 1px solid var(--border);
  color: var(--muted); margin-top: 2px; min-width: 28px; text-align: center;
}
.doc-ext.md { color: var(--accent); border-color: var(--accent); }
.doc-ext.pdf { color: var(--red); border-color: var(--red); }
.doc-ext.json { color: var(--amber); border-color: var(--amber); }

.docs-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); align-items: center; }
.docs-toolbar select {
  padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); font-family: var(--mono); font-size: 11px;
}
.docs-toolbar select:focus { outline: none; border-color: var(--accent); }
.tn-actions { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; gap: 3px; }
.tn-act {
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 10px; padding: 2px 6px;
  white-space: nowrap;
}
.tn-act:hover { color: var(--text); border-color: var(--accent); }
.tn-act.active { color: var(--amber); border-color: var(--amber); }
.doc-new { color: var(--green); font-weight: var(--fw-medium); letter-spacing: 0.5px; }

.doc-body { min-height: 0; }
.doc-pdf { width: 100%; height: calc(100vh - 150px); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.doc-note { font-size: 11px; color: var(--muted); margin-top: 6px; }
.doc-pre {
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel-2);
  padding: 12px 14px; overflow-x: auto; font-family: var(--mono); font-size: 12px;
  line-height: 1.55; color: var(--text); white-space: pre;
}

/* rendered markdown */
.md-body {
  max-width: 860px; font-size: 13.5px; line-height: 1.65; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--panel);
  padding: 20px 26px;
}
.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 {
  color: var(--text); line-height: 1.3; margin: 1.3em 0 0.5em; font-weight: var(--fw-medium);
}
.md-body h1:first-child, .md-body h2:first-child { margin-top: 0; }
.md-body h1 { font-size: 21px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.md-body h2 { font-size: 17px; border-bottom: 1px solid rgba(43,52,68,0.6); padding-bottom: 6px; }
.md-body h3 { font-size: 15px; }
.md-body h4, .md-body h5, .md-body h6 { font-size: 13.5px; color: var(--muted); }
.md-body p { margin: 0.6em 0; }
.md-body a { color: var(--accent); text-decoration: none; }
.md-body a:hover { text-decoration: underline; }
.md-body code {
  font-family: var(--mono); font-size: 0.92em; background: rgba(78, 161, 255, 0.09);
  border: 1px solid rgba(43,52,68,0.8); border-radius: var(--r-sm); padding: 1px 5px;
}
.md-body pre.doc-pre code { background: none; border: none; padding: 0; }
.md-body pre.doc-pre { margin: 0.8em 0; }
.md-body ul, .md-body ol { margin: 0.6em 0; padding-left: 1.6em; }
.md-body li { margin: 0.25em 0; }
.md-body li.li-nest { margin-left: 1.4em; list-style-type: circle; }
.md-body blockquote {
  margin: 0.8em 0; padding: 6px 14px; border-left: 3px solid var(--accent);
  background: rgba(78, 161, 255, 0.06); color: var(--muted); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.md-body hr { border: none; border-top: 1px solid var(--border); margin: 1.4em 0; }
.doc-table-wrap { overflow-x: auto; margin: 0.8em 0; }
.doc-table { border-collapse: collapse; font-size: 12.5px; min-width: 50%; }
.doc-table th, .doc-table td { border: 1px solid var(--border); padding: 5px 10px; text-align: left; }
.doc-table th { background: var(--panel-2); color: var(--muted); font-weight: var(--fw-medium); }
.doc-table td { font-variant-numeric: tabular-nums; }

/* ── DiffEvo (/diff) ─────────────────────────────────────── */
.dv-recon { display: flex; gap: 16px; flex-wrap: wrap; }
.dv-fig { margin: 0; text-align: center; }
.dv-fig canvas {
  image-rendering: pixelated; border: 1px solid var(--border);
  border-radius: var(--r-md); background: #000;
}
.dv-fig figcaption { font-size: 10px; color: var(--muted); margin-top: 4px; }
.dv-strip-label { font-size: 11px; color: var(--muted); margin: 12px 0 6px; }
.dv-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.dv-fig.sm figcaption { font-size: 9px; }

/* ── Animation (/animation) ──────────────────────────────── */
.anim-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.anim-cell { margin: 0; text-align: center; }
.anim-cell canvas {
  width: 128px; height: 128px; image-rendering: pixelated;
  border: 1px solid var(--border); border-radius: var(--r-md); background: #000;
}
.anim-cell figcaption { font-size: 10px; color: var(--muted); margin-top: 4px; }
.anim-pred { font-size: 10px; color: var(--muted); }
.anim-pred.ok { color: var(--green); }
.anim-pred.bad { color: var(--red); }
.av-report-grid { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
#av-pca { border: 1px solid var(--border); border-radius: var(--r-md); background: #05070a; }
.anim-cell .anim-shape { color: var(--text); font-weight: var(--fw-medium); }
.anim-cell { border: 2px solid transparent; border-radius: var(--r-md); padding: 4px; transition: border-color 0.1s; }
.anim-cell.current { border-color: var(--accent); }

/* EvoLang — live sample / corpus / generated text blocks */
.ev-sample {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: #05070a;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin: 0;
  max-height: 260px;
  overflow: auto;
}

/* EvoLang — novelty constraint sub-panel */
.side-subhead {
  margin: 16px 0 8px; padding-top: 12px; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted);
  border-top: 1px solid var(--border);
}
.ev-nov-fields {
  border-left: 2px solid var(--accent); padding-left: 10px; margin-left: 2px;
}

/* EvoLang — WordPipe pipeline page: genome-stack toggles + architecture rows */
.ev-layer {
  border: 1px solid var(--border); border-left: 3px solid var(--tlm-idle);
  border-radius: var(--r-sm); padding: 5px 9px; margin-bottom: 5px; cursor: pointer;
  background: #12161c; transition: border-color 0.12s, background 0.12s;
}
.ev-layer:hover { background: #161b22; }
.ev-layer.on { border-left-color: var(--accent); background: #141b24; }
.ev-layer-top { display: flex; align-items: center; gap: 8px; }
.ev-layer-name { font-weight: var(--fw-medium); color: var(--text); font-size: 13px; }
.ev-chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; color: var(--muted);
  border: 1px solid var(--muted); border-radius: var(--r-lg); padding: 2px 8px; white-space: nowrap;
}
.ev-chip.on { color: var(--green); border-color: var(--green); }
.ev-arch { display: flex; flex-direction: column; gap: 8px; }
.ev-arch-row { display: flex; gap: 14px; align-items: baseline; }
.ev-arch-name {
  flex: 0 0 110px; color: var(--accent); font-weight: var(--fw-medium); font-size: 13px; font-family: var(--mono);
}
.ev-arch-desc { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* EvoLang — repetition stats under the output panel */
.ev-repstats { margin-top: 10px; font-size: 13px; color: var(--muted); font-family: var(--mono); }
.ev-repnum { color: var(--text); font-weight: var(--fw-medium); }

/* EvoLang layer/flow map (/evolang/layers) */
.lyr-wrap { overflow-x: auto; }
.lyr-node { cursor: default; }
.lyr-node:hover rect { filter: brightness(1.35); }
.lyr-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.lyr-legend-item { display: flex; align-items: center; gap: 6px; }
.lyr-swatch { width: 12px; height: 12px; border-radius: var(--r-sm); display: inline-block; }
.lyr-swatch.dashed { border: 1.5px dashed var(--muted); background: transparent; }
.lyr-swatch.dotted { border: 1.5px dotted var(--muted); background: transparent; }
.lyr-tooltip {
  position: fixed; z-index: 60; max-width: 300px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 8px 10px; font-size: 11.5px; line-height: 1.5; color: var(--text);
  font-family: var(--mono); pointer-events: none;
  box-shadow: var(--elev-1);
}
.lyr-tooltip b { color: var(--text); font-size: 12.5px; }
.lyr-tip-status { color: var(--muted); font-size: 10.5px; }
.lyr-tip-desc { margin-top: 4px; color: var(--muted); }
.ev-repnum.good { color: var(--green); }
.ev-repnum.warn { color: #e0b040; }
.ev-repnum.bad { color: #e06a6a; }
.ev-toprep { margin-top: 5px; color: var(--muted); }
.ev-toprep b { color: #5aaaff; font-weight: var(--fw-bold); }

/* MNIST — specialist pipeline on images: digit grid + confusion matrix */
.mn-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-cell {
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px;
  background: #12161c; text-align: center;
}
.mn-cell.ok { border-color: #2c5a3a; }
.mn-cell.bad { border-color: #7a3535; background: #1c1416; }
.mn-digit { width: 56px; height: 56px; image-rendering: pixelated; display: block; }
.mn-lab { font-family: var(--mono); font-size: 11px; margin-top: 3px; color: var(--muted); }
.mn-cell.ok .mn-lab { color: var(--green); }
.mn-cell.bad .mn-lab { color: #e06a6a; }
.mn-conf { overflow-x: auto; }
.mn-conf-table { border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.mn-conf-table th {
  color: var(--muted); font-weight: var(--fw-medium); padding: 3px 7px; text-align: center;
}
.mn-conf-table td {
  border: 1px solid var(--border); padding: 3px 7px; text-align: center;
  color: var(--text); min-width: 34px;
}
.mn-conf-table td.diag { color: var(--green); background: #12181c; }
.mn-conf-side { font-size: 10px; letter-spacing: 0.5px; }

/* --- QoL Enhancements Styles --- */

/* Sidebar Collapse */
.sidebar {
  transition: width 0.2s ease, min-width 0.2s ease, border-color 0.2s ease;
  position: relative;
}
.sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding: 0 !important;
}
.sidebar.collapsed > * {
  display: none !important;
}
.resizer.v.collapsed {
  display: none !important;
}
.sb-toggle-tab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 48px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  z-index: 15;
  padding: 0;
}
.sb-toggle-tab:hover {
  background: var(--panel-2);
  color: var(--accent);
  border-color: var(--accent);
}
.sb-toggle-tab.left-tab {
  right: -15px;
  border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  display: flex !important;
}
.sb-toggle-tab.right-tab {
  left: -15px;
  border-right: 0;
  border-radius: var(--r-sm) 0 0 4px;
  display: flex !important;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast-notice {
  pointer-events: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: 10px 14px;
  min-width: 280px;
  max-width: 360px;
  box-shadow: var(--elev-1);
  font-family: var(--mono);
  animation: toast-slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast-notice.k-test { border-left-color: var(--green); }
.toast-notice.k-run { border-left-color: var(--accent); }
.toast-notice.k-alert { border-left-color: var(--red); }
.toast-notice.k-info { border-left-color: var(--muted); }
.toast-notice.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}
.toast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.toast-kind {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.toast-close {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}
.toast-close:hover { color: var(--text); }
.toast-title { font-weight: var(--fw-medium); color: var(--text); font-size: 12px; }
.toast-body { font-size: 11px; color: var(--muted); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }

@keyframes toast-slide-in {
  from { transform: translateX(50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Agent Dropdown menu */
.nav-group.nav-agent .nav-grp-menu {
  width: 380px;
  max-height: 480px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.nav-group.nav-agent.open .nav-grp-menu {
  display: flex;
}
.ap-dropdown-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: var(--fw-medium);
  font-size: 12px;
  color: var(--accent);
}
.nav-agent .ap-body {
  overflow-y: auto;
  flex: 1 1 auto;
  max-height: 400px;
  padding: 5px;
}
.ap-badge {
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: var(--r-md);
  margin-left: 4px;
}
#agent-flag-btn {
  font-size: 14px;
  padding: 2px 8px;
}

/* Run Config Panel Filter Input */
.rp-filter-box {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.rp-filter-box input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  box-sizing: border-box;
}
.rp-filter-box input:focus {
  border-color: var(--accent);
  outline: none;
}
.rp-table tr.hidden {
  display: none !important;
}

/* Double navigation buttons scroll snap */
.snap-controls {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 50;
  display: flex;
  gap: 6px;
}
.snap-btn {
  border-radius: var(--r-pill);
  padding: 8px 12px;
  font-size: 11px;
  background: #1c2733;
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--mono);
}
.snap-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Quick Commands Popover */
.term-cmd-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--mono);
  margin-left: 6px;
}
.term-cmd-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.term-cmd-menu {
  position: absolute;
  z-index: 90;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  width: 260px;
  padding: 4px 0;
  font-family: var(--mono);
}
.term-cmd-item {
  padding: 6px 12px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.term-cmd-item:hover {
  background: var(--panel-2);
  color: var(--accent);
}

/* Config Diff View modal */
.diff-modal-body {
  display: flex;
  gap: 16px;
  overflow: auto;
  max-height: 500px;
  font-family: var(--mono);
  font-size: 11px;
  padding: 14px;
}
.diff-col {
  flex: 1;
  min-width: 0;
}
.diff-col h4 {
  margin: 0 0 8px 0;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.diff-table {
  width: 100%;
  border-collapse: collapse;
}
.diff-table tr.diff-match { opacity: 0.5; }
.diff-table tr.diff-mismatch { background: rgba(210, 153, 34, 0.15); }
.diff-table td {
  padding: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.diff-table td.key {
  font-weight: bold;
  width: 40%;
}

/* Developer Notes Pad Modal */
.note-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  font-family: var(--mono);
}
.note-card-text {
  font-size: 12px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}
.note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
  border-top: 1px solid rgba(255,255,255,0.03);
  padding-top: 6px;
}
.note-project-badge {
  padding: 1px 6px;
  border-radius: var(--r-lg);
  font-size: 9px;
  font-weight: bold;
  color: var(--bg);
}
.note-delete {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}
.note-delete:hover {
  color: var(--red);
}
.note-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.note-tabs button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  border-bottom: 2px solid transparent;
  padding: 4px 8px;
}
.note-tabs button.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: bold;
}
.note-tabs button:hover {
  color: var(--text);
}



/* ============================================================================
   SHARED COMPONENT LAYER  (g- prefix)
   ----------------------------------------------------------------------------
   Every project page builds from these. If a page needs a component that is
   not here, ADD IT HERE — do not re-declare a card/table/tag in a page's own
   <style> block. A page's <style> should hold layout unique to that page and
   nothing else, and it must reference tokens only.

   Deliberately absent, and banned on GENREG pages:
     - coloured left-border accent strips on cards
     - decorative glows / coloured shadows
     - gradients used as decoration
     - status dots that do not map to a real state
     - emoji as icons, bullets, or nav
   ========================================================================== */

/* --- page shell ---------------------------------------------------------- */
.g-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-5) var(--sp-6) 60px; }
.g-wrap { max-width: none; margin: 0; }          /* full width — house rule */
.g-prose { max-width: 78ch; }                    /* the ONLY place we cap width */

/* --- page head ----------------------------------------------------------- */
.g-hero {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--sp-5); flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-5);
}
.g-hero h1 { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-medium); line-height: var(--lh-tight); }
.g-hero .g-sub { color: var(--muted); font-size: var(--fs-md); line-height: var(--lh-body); margin-top: var(--sp-2); }

/* the single headline metric — one per page, never a row of five */
.g-headline { text-align: right; }
.g-headline .g-n {
  font-size: var(--fs-3xl); font-weight: var(--fw-medium); color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: var(--lh-tight);
}
.g-headline .g-l {
  color: var(--muted); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--ls-label);
}

/* --- grid: auto-fit, so it is never "exactly three cards in a row" -------- */
.g-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.g-grid > .g-span { grid-column: 1 / -1; }

/* --- card: a flat surface. No strip, no shadow, no nesting. --------------- */
.g-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-4);
  box-shadow: var(--elev-0); min-width: 0;
}
.g-card > h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: var(--lh-tight); }
.g-card > h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-2); }
/* a card inside a card is the cardocalypse — group with space instead */
.g-card .g-card { background: none; border: 0; border-radius: 0; padding: 0; }

/* --- text ---------------------------------------------------------------- */
.g-note { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); margin: 0 0 var(--sp-3); }
.g-body { font-size: var(--fs-md); line-height: var(--lh-body); margin: 0 0 var(--sp-3); }
.g-body b, .g-list b { color: var(--text-2); font-weight: var(--fw-medium); }
.g-list { margin: var(--sp-1) 0 0; padding-left: 18px; font-size: var(--fs-md); line-height: var(--lh-body); }
.g-list li { margin-bottom: var(--sp-1); }
.g-label {
  font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--muted);
}
.g-foot {
  color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-5);
  border-top: 1px solid var(--border); padding-top: var(--sp-3);
}
.g-foot a { color: var(--accent); text-decoration: none; }

/* --- data table ---------------------------------------------------------- */
.g-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-md); font-variant-numeric: tabular-nums;
}
.g-table th {
  text-align: left; color: var(--muted); font-weight: var(--fw-medium);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-label);
  padding: 0 var(--sp-2) 7px; border-bottom: 1px solid var(--border);
}
.g-table td { padding: 6px var(--sp-2); border-bottom: 1px solid var(--border-soft); }
.g-table tr:last-child td { border-bottom: none; }
.g-table td.g-num { text-align: right; color: var(--text-2); }
.g-table tr.g-best td { background: var(--accent-soft); }
.g-table tr.g-best td.g-num { color: var(--accent); font-weight: var(--fw-medium); }
.g-tscroll { overflow-x: auto; }

/* --- tag: SEMANTIC states only. Adding a decorative colour here is a bug. - */
.g-tag {
  display: inline-block; font-size: var(--fs-micro); line-height: 1.6;
  padding: 1px 7px; border-radius: var(--r-sm);
  border: 1px solid var(--border); color: var(--muted);
  vertical-align: middle;
}
.g-tag.is-single { color: var(--green); border-color: var(--green); }   /* honest single model */
.g-tag.is-ensemble { color: var(--amber); border-color: var(--amber); } /* N x param cost */
.g-tag.is-null { color: var(--red); border-color: var(--red); }         /* the lever earned 0 */
.g-tag.is-record { color: var(--accent); border-color: var(--accent); }

/* --- metric row: label over number, no boxes ----------------------------- */
.g-metrics { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: var(--sp-3) 0; }
.g-metric .g-k {
  display: block; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--muted); margin-bottom: 2px;
}
.g-metric .g-v { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; color: var(--text); }

/* --- form controls: the shared input layer (tokens only) ------------------ */
.g-field { display: block; margin-bottom: var(--sp-3); }
.g-field > .g-label { display: block; margin-bottom: var(--sp-1); }
.g-input, .g-select, .g-area {
  width: 100%; box-sizing: border-box; padding: 5px var(--sp-2);
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-md); font-size: var(--fs-sm);
  font-family: inherit; line-height: var(--lh-body);
}
.g-input:focus, .g-select:focus, .g-area:focus { outline: none; border-color: var(--accent); }
.g-input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.g-area { resize: vertical; }
.g-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-2); cursor: pointer;
}
.g-hint { display: block; font-size: var(--fs-micro); color: var(--muted); margin-top: 3px; }
.g-btnrow { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* --- pipeline flow ------------------------------------------------------- */
.g-flow {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--text-2); margin: var(--sp-2) 0;
}
.g-flow .g-box {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 5px 9px;
}
.g-flow .g-arrow { color: var(--muted); }

/* --- module header (append-only iteration pages) -------------------------- */
.g-modhead { margin: var(--sp-6) 0 var(--sp-3); }
.g-modhead h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); font-weight: var(--fw-medium); }

/* --- back-to-newest button (iteration pages) ----------------------------- */
.g-snap {
  position: fixed; right: 26px; bottom: 26px; z-index: 50;
  border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-sm);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); cursor: pointer; box-shadow: var(--elev-1);
}
.g-snap:hover { border-color: var(--accent); color: var(--accent); }

/* --- small utilities (so pages stop writing style="margin-top:12px") ------ */
.g-mono { font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); }
.g-mt { margin-top: var(--sp-3); }
.g-dim { opacity: 0.7; }

/* --- key/value chips: a compact fact row (label + value) ------------------ */
.g-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.g-chip {
  font-size: var(--fs-micro); line-height: 1.7; padding: 2px 9px;
  border-radius: var(--r-sm); background: var(--panel-2);
  border: 1px solid var(--border); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.g-chip b { color: var(--text); font-weight: var(--fw-medium); }
/* one chip per row may lead - reserve the accent for the number that matters */
.g-chip.is-lead { border-color: var(--accent); }
.g-chip.is-lead b { color: var(--accent); }

/* --- labelled bar: the accuracy ladder every iteration page draws --------- */
.g-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: 5px; font-size: var(--fs-xs);
}
.g-bar .g-bar-l {
  flex: 0 0 200px; color: var(--muted); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-bar .g-bar-t {
  flex: 1 1 auto; height: 12px; background: var(--panel-2);
  border-radius: var(--r-sm); overflow: hidden; min-width: 60px;
}
.g-bar .g-bar-f { height: 100%; background: var(--accent); }
.g-bar.is-anchor .g-bar-f { background: var(--border); }   /* the baseline */
.g-bar.is-best .g-bar-f { background: var(--green); }
.g-bar .g-bar-v {
  flex: 0 0 58px; color: var(--text); font-variant-numeric: tabular-nums;
}

/* --- raw output: model samples, verbatim (house rule) -------------------- */
.g-pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); margin: 0;
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-2);
  line-height: 1.55; overflow-x: auto; white-space: pre-wrap;
}
.g-pre .g-miss { color: var(--red); }

/* --- card footer: provenance line at the bottom of a module -------------- */
.g-cardfoot {
  margin-top: var(--sp-3); padding-top: 7px;
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-micro); color: var(--muted);
}
/* the newest module in an append-only log */
.g-card.is-newest { border-color: var(--accent); }

/* --- g-btn --------------------------------------------------------------
   Added for the hosted lab. The desktop lab styled buttons per page
   (.term-actions button, .note-tabs button) and never had a shared one, so
   the auth pages had nowhere to inherit from. Tokens only; three weights:
   default (bordered), .is-primary (the one action), .is-quiet (a link that
   happens to be a button). House rule: one accent, used sparingly - so a
   form gets exactly one .is-primary.
   --------------------------------------------------------------------- */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 9px var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.g-btn:hover { border-color: var(--accent); color: var(--accent); }
.g-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-btn[disabled] { opacity: 0.5; cursor: default; }
.g-btn[disabled]:hover { border-color: var(--border); color: var(--text); }

.g-btn.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.g-btn.is-primary:hover { color: var(--bg); filter: brightness(1.08); }

.g-btn.is-quiet {
  background: none;
  border-color: transparent;
  color: var(--muted);
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}
.g-btn.is-quiet:hover { color: var(--accent); }

/* --- agentbar ------------------------------------------------------------
   The Claude / Gemini / Codex row. Shared by the project page and the
   terminal page, so it lives here rather than in either one's <style>.
   ---------------------------------------------------------------------- */
.agentbar {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

/* --- chat dock -----------------------------------------------------------
   The members bar and chat windows, pinned bottom-right on every page. Tokens
   only, so it follows whatever theme the member picked in Preferences.
   ---------------------------------------------------------------------- */
#chatdock {
  position: fixed;
  right: var(--sp-4);
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.cd-col { display: flex; flex-direction: column; width: 210px; }
.cd-stack { display: flex; align-items: flex-end; gap: var(--sp-2); }

.cd-bar, .cd-person {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; font: inherit; font-size: var(--fs-sm);
  padding: 7px var(--sp-3);
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer; text-align: left;
}
.cd-bar {
  border-radius: var(--r-md) var(--r-md) 0 0;
  font-weight: var(--fw-medium);
  border-bottom: none;
}
.cd-bar:hover, .cd-person:hover { border-color: var(--accent); }

.cd-roster {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--panel);
  max-height: 260px; overflow: auto;
}
.cd-person { border: none; border-bottom: 1px solid var(--border-soft); background: none; }
.cd-empty { padding: var(--sp-3); color: var(--muted); font-size: var(--fs-xs); }

.cd-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex: 0 0 auto;
}
.cd-dot.is-on { background: var(--green); }
.cd-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-grow { flex: 1 1 auto; }

.cd-badge {
  background: var(--accent); color: var(--bg);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  padding: 1px 6px; min-width: 16px; text-align: center;
}

.cd-win {
  width: 250px;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--panel);
  height: 300px;
}
.cd-win.is-min { height: auto; }
.cd-win.is-min .cd-log, .cd-win.is-min .cd-form { display: none; }

.cd-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-3);
  background: var(--panel-2);
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--r-md) var(--r-md) 0 0;
  cursor: pointer;
}
.cd-x {
  background: none; border: none; color: var(--muted);
  font: inherit; cursor: pointer; padding: 0 3px; line-height: 1;
}
.cd-x:hover { color: var(--accent); }

.cd-log { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-2); }
.cd-msg { margin-bottom: var(--sp-2); max-width: 88%; }
.cd-msg.is-mine { margin-left: auto; text-align: right; }
.cd-body {
  display: inline-block;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 5px var(--sp-2);
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: var(--fs-sm);
}
.cd-msg.is-mine .cd-body { background: var(--accent-soft); border-color: var(--accent); }
.cd-time { font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; }
.cd-note { font-size: var(--fs-micro); color: var(--red); padding: var(--sp-1); }

.cd-form { border-top: 1px solid var(--border-soft); padding: var(--sp-2); }
.cd-input {
  width: 100%; font: inherit; font-size: var(--fs-sm);
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 5px var(--sp-2);
}
.cd-input:focus { outline: none; border-color: var(--accent); }

@media (max-width: 700px) {
  .cd-stack { display: none; }     /* the roster alone on a small screen */
}