/* Command Centre — design system.
   Dark slate/charcoal identity, Inter typography, restrained sage + burgundy
   accents. One reusable token layer feeds every screen; components are composed
   from it rather than re-styled per view. Light appearance is an override, not
   a separate design. */

/* Self-hosted Inter (variable, SIL OFL) so typography is deterministic with no
   external font request and no network dependency. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/inter-var.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;

  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  /* radii scale */
  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 22px;
  --ribbon-h: 56px;
  --rail-w: 264px;
  --scrim: rgba(0, 0, 0, .62);

  /* type scale */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-18: 18px; --fs-22: 22px; --fs-28: 28px; --fs-34: 34px;

  /* dark slate/charcoal surfaces (default identity) */
  --bg: #0e1013;
  --surface: #16191e;
  --surface-2: #1c2027;
  --sunken: #0a0c0f;
  --ink: #e8ebef;
  --ink-2: #9aa3af;
  --ink-3: #6c7581;
  --line: #242932;
  --line-strong: #363d48;

  /* accents — sage (primary) + burgundy (destructive) */
  --accent: #9db98b;
  --accent-strong: #86a773;
  --accent-ink: #10160d;
  --accent-bg: #1a241a;
  --danger: #b87482;
  --danger-strong: #a45f6f;
  --danger-ink: #1a0e11;
  --danger-bg: #2a181c;

  --ok: #8fc79a;
  --warn: #d9b26a;
  --bad: #d98a97;
  --info: #86b6d6;
  --ok-bg: #16251b;
  --warn-bg: #2a2416;
  --bad-bg: #2a181c;
  --info-bg: #14222b;

  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .30);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --focus: #9db98b;
}

/* Light appearance. The shell resolves the user's preference (explicit light,
   explicit dark, or "system" following the OS) to a concrete value and writes
   it to <html data-theme> before first paint (see core.js initTheme and the
   bootstrap in index.html). Defining the palette once per mode -- rather than
   behind an OS media query -- means an explicit choice always wins. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f3;
  --surface: #ffffff;
  --surface-2: #f0f2ee;
  --sunken: #e8eae4;
  --ink: #1a1e21;
  --ink-2: #565f5a;
  --ink-3: #78827b;
  --line: #dfe2dc;
  --line-strong: #c4cabf;
  --accent: #5d7a4c;
  --accent-strong: #4c663d;
  --accent-ink: #ffffff;
  --accent-bg: #e6eee0;
  --danger: #8c3d4c;
  --danger-strong: #74303e;
  --danger-ink: #ffffff;
  --danger-bg: #f3e2e5;
  --ok: #2f7d45;
  --warn: #8a6222;
  --bad: #a33747;
  --info: #2b6a8f;
  --ok-bg: #e2f0e6;
  --warn-bg: #f5ecd8;
  --bad-bg: #f6e3e6;
  --info-bg: #e0eef6;
  --shadow: 0 1px 2px rgba(20, 28, 20, .07), 0 8px 24px rgba(20, 28, 20, .06);
  --shadow-sm: 0 1px 2px rgba(20, 28, 20, .06);
  --focus: #5d7a4c;
  --scrim: rgba(20, 24, 20, .45);
}

/* -------------------------------------------------------------------- base */
* { box-sizing: border-box; }

/* Author display values (.gate grid, .shell flex) would otherwise beat the UA
   [hidden]{display:none}, leaving the gate visible after unlock. Make [hidden]
   authoritative so toggling works as written in app.js. */
[hidden] { display: none !important; }

html, body { height: 100%; }

/* Clip root overflow rather than hidden, so an over-wide child (e.g. the
   7-column six-fact matrix) scrolls inside its own container instead of
   creating a page-level horizontal scrollbar. `clip` does not create a scroll
   container, so sticky descendants keep working. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  font: var(--fs-14) / 1.55 var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.015em; }
p { margin: 0 0 var(--s3); }
a { color: var(--accent); text-underline-offset: 2px; }
table { border-collapse: collapse; width: 100%; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

.mono { font-family: var(--font-mono); font-size: 0.9em; }
.muted { color: var(--ink-2); }
.muted.stale { background-color: rgba(217, 178, 106, 0.12); transition: background-color 120ms ease-out; }
.error { color: var(--bad); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skiplink {
  position: absolute; left: var(--s3); top: -60px; z-index: 80;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  padding: var(--s2) var(--s3); border-radius: var(--r1); box-shadow: var(--shadow);
}
.skiplink:focus { top: var(--s3); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r1); }

/* ----------------------------------------------------------------- buttons */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 7px 15px; white-space: nowrap;
  border-radius: var(--r1); border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink);
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn:active { transform: translateY(1px); }
.btn.small { min-height: 30px; padding: 5px 11px; font-size: var(--fs-12); }
.btn.ghost, .btn.secondary {
  background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.btn.ghost:hover, .btn.secondary:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn.danger, .btn.destructive {
  background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--line-strong));
}
.btn.danger:hover, .btn.destructive:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* -------------------------------------------------------------------- gate */
.gate {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: var(--s5);
  /* No opaque base here: the ambient layer sits directly behind the gate and
     must show through it. The page colour still comes from <body>. */
  background:
    radial-gradient(900px 420px at 50% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  position: relative;
  z-index: 2;
}
.gate-card {
  width: min(420px, 92vw); display: flex; flex-direction: column; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r4);
  padding: var(--s6); box-shadow: var(--shadow);
}
.gate-card h1 { font-size: var(--fs-28); }
.gate-card .muted { font-size: var(--fs-13); }
.gate-card label { font-size: var(--fs-12); color: var(--ink-2); font-weight: 550; }
.gate-card input {
  font: inherit; padding: 11px 13px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.gate-card input:focus-visible { border-color: var(--accent); }

/* ------------------------------------------------------------------ ribbon */
.ribbon {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s5);
  padding-top: calc(var(--s2) + env(safe-area-inset-top, 0px));
  min-height: var(--ribbon-h);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.ribbon-brand { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.brand-mark {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-12);
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  background: linear-gradient(160deg, var(--accent), var(--accent-strong));
  color: var(--accent-ink); border-radius: 9px; letter-spacing: 0;
}
.brand-name { font-weight: 650; letter-spacing: -0.01em; }
.ribbon-status { display: flex; align-items: center; gap: var(--s4); }
.ribbon-theme {
  display: flex; align-items: center; gap: 2px; margin-left: auto;
  padding: 2px; border: 1px solid var(--line); border-radius: calc(var(--r1) + 2px);
  background: var(--surface-2);
}
.ribbon-theme .theme-btn { border-color: transparent; min-height: 28px; padding: 3px 8px; line-height: 1; }
.ribbon-theme .theme-btn:hover { border-color: var(--line-strong); }
.ribbon-theme .theme-btn.active {
  background: var(--surface); border-color: var(--line-strong); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.ribbon-actions { display: flex; gap: var(--s2); }
.conn { font-size: var(--fs-12); color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.conn::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-3) 22%, transparent);
}
.conn.ok { color: var(--ok); }
.conn.ok::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.conn.bad { color: var(--bad); }
.conn.bad::before { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.conn.mock { color: var(--info); }
.conn.mock::before { background: var(--info); box-shadow: 0 0 0 3px var(--info-bg); }
.asof { font-size: var(--fs-12); color: var(--ink-3); font-family: var(--font-mono); }
.build { font-size: var(--fs-12); color: var(--ink-3); font-family: var(--font-mono); }

/* ------------------------------------------------------------------- shell */
.shell { display: flex; align-items: stretch; min-height: calc(100vh - var(--ribbon-h)); }

.rail {
  flex: 0 0 var(--rail-w); width: var(--rail-w); padding: var(--s4) var(--s3);
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s5);
  position: sticky; top: var(--ribbon-h); align-self: flex-start;
  height: calc(100vh - var(--ribbon-h));
  overflow-y: auto;
}
.rail-group { display: flex; flex-direction: column; gap: 3px; }
.rail-label {
  font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .1em; font-weight: 650;
  color: var(--ink-3); padding: 0 var(--s2) var(--s2);
}
.rail-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left; cursor: pointer; font: inherit;
  padding: 8px 11px; border: 1px solid transparent; border-radius: var(--r1);
  background: transparent; color: var(--ink-2);
  transition: background .12s ease, color .12s ease;
}
.rail-item:hover { background: var(--surface-2); color: var(--ink); }
.rail-item.active {
  background: var(--accent-bg); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.rail-title { font-weight: 600; }
.rail-sub { font-size: var(--fs-11); color: var(--ink-3); }
.rail-item.active .rail-sub { color: var(--ink-2); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { padding: var(--s6) var(--s6) var(--s3); }
.topbar h1 { font-size: var(--fs-28); letter-spacing: -0.02em; }
.topbar .sub { margin: 3px 0 0; color: var(--ink-2); font-size: var(--fs-14); }

.content { padding: var(--s3) var(--s6) var(--s7); display: grid; gap: var(--s5); align-content: start; }

/* ------------------------------------------------------------ banner/badge */
.banner {
  margin: var(--s3) var(--s6) 0; padding: 11px 16px; border-radius: var(--r2);
  font-size: var(--fs-13); border: 1px solid var(--warn); background: var(--warn-bg); color: var(--ink);
}
.banner.bad { border-color: var(--bad); background: var(--bad-bg); }
.banner.ok { border-color: var(--ok); background: var(--ok-bg); }

/* ------------------------------------------------------------------ panels */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.panel.sub { background: var(--surface-2); border-color: var(--line); }
.panel-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
}
.panel-h h2 { font-size: var(--fs-15); font-weight: 650; color: var(--ink); }
.panel-h h3 { font-size: var(--fs-13); font-weight: 650; color: var(--ink); }
.panel-meta { font-size: var(--fs-12); color: var(--ink-3); font-family: var(--font-mono); }
.panel-b { padding: var(--s5); }
.panel.sub > .panel-b { padding: var(--s4); }
.panel.sub { box-shadow: none; }
.panel.sub .panel-h { padding: var(--s3) var(--s4); background: transparent; }

/* ------------------------------------------------------------------- stats */
.stats { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2);
  padding: var(--s4); box-shadow: var(--shadow-sm);
}
.stat-v { font-size: var(--fs-28); font-weight: 700; font-family: var(--font-mono); line-height: 1.1; letter-spacing: -0.02em; }
.stat-k { font-size: var(--fs-12); color: var(--ink-2); margin-top: 4px; }
.stat-h { font-size: var(--fs-11); color: var(--ink-3); margin-top: 2px; }
.stat.warn .stat-v { color: var(--warn); }
.stat.bad .stat-v { color: var(--bad); }
.stat.ok .stat-v { color: var(--ok); }

/* ------------------------------------------------- pills, tags, stamps, leds */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: var(--fs-12); font-weight: 550;
  border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface-2);
  white-space: nowrap;
}
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: var(--ok-bg); }
.pill.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: var(--bad-bg); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: var(--warn-bg); }
.pill.neutral { color: var(--ink-2); }

.tag {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-11);
  padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line-strong);
  color: var(--ink-2); background: var(--surface-2); text-transform: none;
}
.tag.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: var(--ok-bg); }
.tag.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); background: var(--bad-bg); }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-bg); }

.fact {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: 7px; font-weight: 700; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink-3);
}
.fact.yes { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: var(--ok-bg); }
.fact.no { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); background: var(--bad-bg); }
.fact.unknown { color: var(--ink-3); }
.fact.neutral { width: auto; padding: 0 7px; font-weight: 550; }

.led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.led.ok { background: var(--ok); }
.led.warn { background: var(--warn); }
.led.bad { background: var(--bad); }
.srclist { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.srcline { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: var(--fs-12); }

/* chips: compact metadata groups */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.chips:last-child { margin-bottom: 0; }

/* provenance + confidence */
.prov {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
  font-size: var(--fs-11); color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; margin-bottom: var(--s3);
}
.prov.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-bg); }
.conf {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-11);
  padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line-strong);
  color: var(--ink-2); background: var(--surface-2); white-space: nowrap;
}
.conf.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: var(--ok-bg); }
.conf.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-bg); }
.conf.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); background: var(--bad-bg); }

.stamp {
  display: inline-block; margin-top: var(--s3); padding: 0; padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-11); font-weight: 650; text-transform: uppercase; letter-spacing: .07em;
  color: var(--bad);
}
.stamp { border-top-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }

/* ---------------------------------------------------------------- tables */
.tablewrap { overflow-x: auto; border-radius: var(--r2); }
.tablewrap.matrixwrap { overflow-x: auto; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 650; white-space: nowrap;
}
tbody th { font-weight: 600; }
td.note { color: var(--ink-2); max-width: 46ch; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
tbody tr:hover td, tbody tr:hover th { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }

.matrix caption { text-align: left; padding: 0 0 var(--s3); color: var(--ink-2); font-size: var(--fs-12); }
.matrix td, .matrix th { text-align: center; }
.matrix tbody th {
  text-align: left; position: sticky; left: 0; z-index: 1;
  background: var(--surface); box-shadow: 1px 0 0 var(--line);
}
.matrix thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); }

/* --------------------------------------------------------------- evidence */
.evidence {
  border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: var(--r2); padding: var(--s4); margin: 0 0 var(--s3);
  background: var(--surface-2);
}
.evidence-h { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.evidence-d { margin: var(--s3) 0; }
.evidence-cols { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
.evidence-col {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r1);
  padding: var(--s3);
}
.evidence-col h4 {
  font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin-bottom: var(--s2);
}
.kv { margin: 0; display: grid; gap: 4px; }
.kv > div { display: flex; gap: var(--s2); align-items: baseline; }
.kv dt { color: var(--ink-2); min-width: 8ch; font-size: var(--fs-12); }
.kv dd { margin: 0; }

.recon-evidence { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; }
.recon-evidence li { font-size: var(--fs-12); color: var(--ink-2); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

.notice {
  padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-12);
}
.notice strong { color: var(--ink); }

.unavailable {
  padding: var(--s3) var(--s4); border: 1px dashed var(--line-strong); border-radius: var(--r2);
  color: var(--ink-2); background: var(--sunken);
}

.empty { color: var(--ink-2); font-style: italic; padding: var(--s2) 0; }
.hint { color: var(--ink-2); font-size: var(--fs-12); }

/* -------------------------------------------------------------- skeleton */
.skel .skel-line {
  height: 12px; border-radius: 5px; margin: 8px 0;
  background: linear-gradient(90deg, var(--sunken), var(--surface-2), var(--sunken));
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}
.skel .skel-line.w40 { width: 40%; }
.skel .skel-line.w70 { width: 70%; }
.skel .skel-line:first-child { margin-top: 0; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --------------------------------------------------------- chat experience */
.agent-switch { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); }
.agent-tab {
  display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface); color: var(--ink-2); font: inherit; font-weight: 600;
}
.agent-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.agent-tab.active { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); }
.agent-name { font-size: var(--fs-14); }
.agent-state { font-size: var(--fs-11); font-family: var(--font-mono); color: var(--ink-3); text-transform: lowercase; }
.agent-tab.active .agent-state { color: var(--ink-2); }
.agent-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: none; }
.agent-dot.live { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.agent-dot.bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.agent-dot.mock { background: var(--info); box-shadow: 0 0 0 3px var(--info-bg); }
.agent-dot.off { background: var(--ink-3); }
.agent-switch-hint { margin: 0 0 var(--s3); }
.chat-log { display: grid; gap: var(--s4); margin-bottom: var(--s4); align-content: start; }
.msg { border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s3) var(--s4); max-width: 74ch; }
.msg-header { display: flex; align-items: center; gap: var(--s2); margin-bottom: 6px; }
.msg.user {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  justify-self: end;
}
.msg.assistant { background: var(--surface-2); }
.msg-role { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 650; }
.msg-avatar {
  width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center;
  font-size: var(--fs-11); font-weight: 700; font-family: var(--font-mono);
}
.msg.user .msg-avatar { background: var(--accent); color: var(--accent-ink); }
.msg.assistant .msg-avatar { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2); }
.msg-time { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-text h1, .msg-text h2, .msg-text h3 { margin: var(--s3) 0 var(--s2); font-size: var(--fs-15); }
.msg-text p:last-child { margin-bottom: 0; }
.msg-text ul, .msg-text ol { margin: var(--s2) 0; padding-left: 1.4em; }
.msg-text code {
  font-family: var(--font-mono); font-size: 0.88em; background: var(--sunken);
  padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line);
}
.msg-text pre {
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r1);
  padding: var(--s3); overflow-x: auto; margin: var(--s3) 0;
}
.msg-text pre code { background: none; border: 0; padding: 0; }
.msg-text a { color: var(--accent); }
.msg-text blockquote {
  margin: var(--s3) 0; padding-left: var(--s3);
  border-left: 3px solid var(--line-strong); color: var(--ink-2);
}
.msg-images { display: grid; gap: var(--s3); margin-top: var(--s3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.msg-image {
  border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--sunken);
  cursor: zoom-in; padding: 0; display: block; width: 100%;
}
.msg-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.msg-image-wrap { position: relative; }
.msg-image-fallback {
  display: grid; place-items: center; gap: 6px; aspect-ratio: 3 / 4; padding: var(--s4);
  color: var(--ink-3); font-size: var(--fs-12); text-align: center;
}
.msg-attachment-name { font-family: var(--font-mono); font-size: var(--fs-11); }

.composer { display: grid; gap: var(--s2); }
.composer textarea {
  font: inherit; resize: vertical; padding: 12px 14px; border-radius: var(--r2);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
  min-height: 54px;
}
.composer textarea:focus-visible { border-color: var(--accent); }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.transport-banner {
  margin-top: var(--s4); padding: var(--s2) var(--s3); text-align: center;
  font-size: var(--fs-12); color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r2);
}

/* chat layout: thread list + conversation */
.chat { display: grid; grid-template-columns: 216px 1fr; gap: var(--s4); align-items: start; }
.threads { display: grid; gap: 3px; align-content: start; }
.thread {
  display: flex; flex-direction: column; gap: 1px; text-align: left; font: inherit;
  cursor: pointer; padding: 9px 11px; border-radius: var(--r1); border: 1px solid transparent;
  background: transparent; color: var(--ink-2);
}
.thread:hover { background: var(--surface-2); }
.thread.active { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.thread-title { font-weight: 600; }
.thread-sub { font-size: var(--fs-11); color: var(--ink-3); }
.meta-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.model-badge {
  font-family: var(--font-mono); font-size: var(--fs-11); padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface-2);
}
.model-badge.pending { border-style: dashed; color: var(--warn); }
.caret {
  display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
  background: var(--ink-3); margin-left: 2px; animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.msg.streaming { border-style: dashed; }
.msg.error { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)); }
.msg.cancelled { border-style: dashed; color: var(--ink-2); }
.msg-model {
  font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px;
}
.chat-working { display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; }
.chat-working i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: chatpulse 1.1s ease-in-out infinite; }
.chat-working i:nth-child(2) { animation-delay: .15s; }
.chat-working i:nth-child(3) { animation-delay: .3s; }
@keyframes chatpulse { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* Live execution activity: what the agent is doing right now, with Stop.
   Purely a read-out of real backend state — never a fabricated animation. */
.conv-activity {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: 8px 10px; margin-top: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r2);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
  font-size: var(--fs-13); color: var(--ink-2);
}
.conv-activity-dot {
  width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%;
  background: var(--accent); animation: chatpulse 1.4s ease-in-out infinite;
}
.conv-activity-text { color: var(--ink); }
.conv-activity-agent {
  font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3);
}
.conv-activity-note { color: var(--warn); font-size: var(--fs-11); }
.conv-activity [data-conv-stop] { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .conv-activity-dot { animation: none; } }
.msg-text ul.md-tasks { list-style: none; padding-left: 0; }
.msg-text li.md-task { display: flex; align-items: baseline; gap: 8px; }
.msg-text li.md-task.done { color: var(--ink-3); text-decoration: line-through; }
.md-check {
  display: inline-grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto;
  border: 1px solid var(--line-strong); border-radius: 4px; font-size: 11px;
  background: var(--surface); color: var(--accent-ink);
}
.msg-text li.md-task.done .md-check { background: var(--accent); border-color: var(--accent-strong); }
.lightbox {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  gap: var(--s3); padding: var(--s4); background: var(--scrim);
}
.lightbox img {
  max-width: min(92vw, 720px); max-height: 82vh; width: auto; height: auto;
  border-radius: var(--r3); border: 1px solid var(--line-strong); background: var(--sunken);
}
.lightbox-close { position: absolute; top: var(--s4); right: var(--s4); }
@media (prefers-reduced-motion: reduce) { .chat-working i { animation: none; } }
@media (max-width: 760px) { .chat { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ forms + fields */
.logform { display: grid; gap: var(--s3); }
.field { display: grid; gap: 5px; }
.field > span { font-size: var(--fs-12); color: var(--ink-2); font-weight: 550; }
.field input, .field select, .field textarea {
  font: inherit; padding: 9px 11px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent); }
.field.inline { grid-auto-flow: column; align-items: center; gap: var(--s2); }
.field.compact { gap: 0; }
.field.compact input, .field.compact select { padding: 7px 10px; }
.field.grow { flex: 1 1 180px; }
/* .form-field is the prototype-lab equivalent of .field: a stacked label +
   control. Kept in sync with .field so both read identically. */
.form-field { display: grid; gap: 5px; margin-bottom: var(--s3); }
.form-field > label { font-size: var(--fs-12); color: var(--ink-2); font-weight: 600; }
.form-field input, .form-field select, .form-field textarea {
  font: inherit; padding: 9px 11px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { border-color: var(--accent); }
.ferr { color: var(--bad); font-size: var(--fs-12); }
.check { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-13); color: var(--ink-2); }
.form-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.form-actions.gap-top { margin-top: var(--s3); }
.fieldset { margin-top: var(--s3); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r1); }
.fieldset legend { padding: 0 6px; color: var(--ink-2); font-size: var(--fs-12); }
.preview-media { max-width: 100%; max-height: 400px; }
.preview-text { white-space: pre-wrap; word-break: break-word; max-height: 400px; overflow-y: auto; }
/* spacing utilities (replace previous inline styles) */
.u-mb-8 { margin-bottom: 8px; }
.u-mt-8 { margin-top: 8px; }
.u-ml-8 { margin-left: 8px; }
.form-result { min-height: 1.4em; font-size: var(--fs-13); }
.form-result.ok { color: var(--ok); }
.form-result.bad { color: var(--bad); }
.form-result.warn { color: var(--warn); }

/* -------------------------------------------------------- dashboard cards */
.dash-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dash-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
  padding: var(--s4); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--s2);
}
.dash-card h3 { font-size: var(--fs-13); }
.dash-list { display: grid; gap: 2px; }
.dash-row {
  display: flex; align-items: center; gap: var(--s2); padding: 7px 8px; border-radius: var(--r1);
  font-size: var(--fs-13); color: var(--ink-2);
}
.dash-row:hover { background: var(--surface-2); }
.dash-row .dash-when { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); white-space: nowrap; }
.dash-empty { color: var(--ink-2); font-style: italic; font-size: var(--fs-13); padding: var(--s2) 8px; }

/* ----------------------------------------------------------- todo checklist */
.todo-toolbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s4); }
.todo-search {
  flex: 1; min-width: 160px; font: inherit; padding: 9px 12px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.todo-filters { display: flex; gap: var(--s2); flex-wrap: wrap; }
.todo-filters select {
  font: inherit; padding: 8px 10px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.todo-group { margin-bottom: var(--s4); }
.todo-group-h {
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2);
  font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 650;
}
.todo-group-h .todo-count { color: var(--ink-3); font-family: var(--font-mono); }
.todo-items { display: grid; gap: 2px; }
.todo-item {
  display: flex; align-items: flex-start; gap: var(--s3); padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface);
}
.todo-item:hover { border-color: var(--line-strong); }
.todo-item.done { opacity: .68; }
.todo-item.done .todo-title { text-decoration: line-through; color: var(--ink-2); }
.todo-check {
  appearance: none; -webkit-appearance: none; margin: 2px 0 0; flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong);
  background: var(--sunken); cursor: pointer; display: grid; place-items: center;
}
.todo-check:checked { background: var(--accent); border-color: var(--accent); }
.todo-check:checked::after { content: "✓"; color: var(--accent-ink); font-size: 13px; font-weight: 800; }
.todo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.todo-title { font-weight: 550; color: var(--ink); overflow-wrap: anywhere; }
.todo-meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.todo-notes { font-size: var(--fs-12); color: var(--ink-2); overflow-wrap: anywhere; }
.todo-actions { display: flex; gap: var(--s2); flex: 0 0 auto; }

/* ---------------------------------------------------------- calendar grid */
.cal-toolbar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.cal-title { font-weight: 650; font-size: var(--fs-18); min-width: 168px; }
.cal-viewswitch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r1); overflow: hidden; }
.cal-viewswitch button {
  font: inherit; font-size: var(--fs-12); font-weight: 600; cursor: pointer; border: 0;
  background: transparent; color: var(--ink-2); padding: 7px 13px;
}
.cal-viewswitch button.active { background: var(--accent-bg); color: var(--ink); }
.cal-viewswitch button + button { border-left: 1px solid var(--line-strong); }
.cal-nav { display: inline-flex; gap: 6px; margin-left: auto; }
.cal-actions { display: inline-flex; gap: var(--s2); }

/* month */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
.cal-dow {
  padding: 8px 10px; font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 650; text-align: left; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.cal-cell {
  min-height: 104px; padding: 6px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  background: var(--surface); display: flex; flex-direction: column; gap: 4px; cursor: pointer; text-align: left;
}
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.other { background: var(--sunken); }
.cal-cell.other .cal-daynum { color: var(--ink-3); }
.cal-cell.today { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.cal-daynum { font-size: var(--fs-12); font-weight: 650; color: var(--ink-2); align-self: flex-start; }
.cal-cell.today .cal-daynum, .cal-day-col.today .cal-daynum {
  background: var(--accent); color: var(--accent-ink); border-radius: 999px;
  min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 5px;
}
.cal-event {
  font-size: var(--fs-11); padding: 3px 6px; border-radius: 6px; text-align: left; border: 1px solid transparent;
  border-left: 3px solid var(--accent); background: var(--accent-bg); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; cursor: pointer;
}
.cal-event .cal-event-time { font-family: var(--font-mono); color: var(--ink-3); margin-right: 5px; }

/* week */
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); }
.cal-day-col {
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface);
  padding: var(--s2); min-height: 190px; display: flex; flex-direction: column; gap: var(--s2); cursor: pointer;
}
.cal-day-col.today { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.cal-day-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.cal-day-h .cal-dow { padding: 0; border: 0; background: transparent; }
.cal-day-h h3 { font-size: var(--fs-15); font-weight: 650; display: flex; align-items: center; gap: var(--s2); margin: 0; }
.cal-day-events { display: grid; gap: 5px; align-content: start; }

/* day */
.cal-day { display: flex; flex-direction: column; gap: var(--s3); }
.cal-slot-list { display: grid; gap: var(--s2); }
.cal-slot { display: grid; grid-template-columns: 84px 1fr; gap: var(--s3); align-items: start; }
.cal-slot-time { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3); padding-top: 6px; }
.cal-slot-event {
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r1);
  background: var(--surface); padding: var(--s2) var(--s3); display: grid; gap: 3px;
}
.cal-slot-title { font-weight: 600; color: var(--ink); }
.cal-slot-loc { font-size: var(--fs-12); color: var(--ink-3); }
.cal-slot-desc { font-size: var(--fs-12); color: var(--ink-2); }
.cal-empty { color: var(--ink-3); font-size: var(--fs-13); padding: var(--s3); text-align: center; }

/* detail */
.cal-detail {
  border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s4); background: var(--surface-2);
  margin-top: var(--s4);
}
.cal-detail-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.cal-detail-h h3 { font-size: var(--fs-15); margin: 0; }
.cal-detail-body { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--s3); }
.cal-detail-body dt { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.cal-detail-body dd { margin: 0; }
.cal-detail-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.cal-event-form { display: grid; gap: var(--s3); }
.cal-event-form h3 { margin: 0; }

/* ------------------------------------------------------ gmail workspace */
.gmail-toolbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
.gmail-toolbar input[type="search"] {
  flex: 1; min-width: 180px; font: inherit; padding: 9px 12px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.gmail-toolbar select {
  font: inherit; padding: 9px 10px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.gmail-table { width: 100%; border-collapse: collapse; }
.gmail-row.unread .gmail-subject { font-weight: 650; }
.gmail-row.unread td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.gmail-subject a { color: var(--ink); text-decoration: none; }
.gmail-subject a:hover { color: var(--accent); text-decoration: underline; }
.gmail-from, .gmail-date, .gmail-labels { white-space: nowrap; }
.gmail-date { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3); }
.gmail-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gmail-compose-form, .gmail-detail {
  margin-top: var(--s4); padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-2);
}
.gmail-compose-form h3 { margin: 0 0 var(--s3); font-size: var(--fs-15); }
/* form-row: a labelled control used by the Gmail compose + Calendar event forms */
.form-row { display: grid; gap: 4px; margin-bottom: var(--s3); }
.form-row > label { display: grid; gap: 5px; font-size: var(--fs-12); color: var(--ink-2); font-weight: 550; }
.form-row input, .form-row select, .form-row textarea {
  font: inherit; padding: 9px 11px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible { border-color: var(--accent); }

/* ------------------------------------------------------------ task workspace */
.tasks-toolbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
.tasks-toolbar .field.inline { min-width: 0; }
.tasks-toolbar input[type="search"] {
  flex: 1; min-width: 180px; font: inherit; padding: 9px 12px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.tasks-toolbar select {
  font: inherit; padding: 9px 10px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.tasks-toolbar .form-actions { margin-left: auto; }
.task-list { display: grid; gap: var(--s3); }
.task-card {
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface);
  padding: var(--s3) var(--s4); display: grid; gap: var(--s2);
}
.task-card:hover { border-color: var(--line-strong); }
.task-card.overdue { border-left: 3px solid var(--danger); }
.task-card-content { display: grid; gap: var(--s2); }
.task-card-header { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; justify-content: space-between; }
.task-title {
  font: inherit; font-size: var(--fs-15); font-weight: 650; color: var(--ink);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.task-title:hover { color: var(--accent); }
.task-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.task-description { margin: 0; font-size: var(--fs-13); color: var(--ink-2); }
.task-card-meta { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.task-card-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
/* meta-item / meta-label: compact inline key→value pairs (task + detail views) */
.meta-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-12); color: var(--ink-2); }
.meta-label { color: var(--ink-3); font-weight: 600; }
.panel-actions { display: flex; justify-content: flex-end; margin-bottom: var(--s2); }

/* --------------------------------------------------------- schedule workspace */
.sched-cards { display: grid; gap: var(--s3); }
.sched-card {
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface);
  padding: var(--s3) var(--s4); display: grid; gap: var(--s2);
}
.sched-card:hover { border-color: var(--line-strong); }
.sched-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.sched-card-title { font-weight: 600; color: var(--ink); }
.sched-card-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sched-card-meta { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.sched-card-times { display: flex; gap: var(--s5); margin: 0; flex-wrap: wrap; }
.sched-card-times dt { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.sched-card-times dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-2); }
.sched-card-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
#sched-inline-detail, #sched-form-container { margin-top: var(--s3); }
#schedules-toolbar, #executions-toolbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
#executions-toolbar select {
  font: inherit; padding: 9px 10px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}

/* --------------------------------------------------------- drive workspace */
.drive-toolbar {
  display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3);
}
.drive-toolbar input[type="search"] {
  flex: 1; min-width: 180px; font: inherit; padding: 9px 12px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.drive-toolbar select {
  font: inherit; padding: 9px 10px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.drive-list { display: grid; gap: var(--s3); align-content: start; }
.drive-table-wrap { overflow-x: auto; border-radius: var(--r2); }
.drive-table { width: 100%; border-collapse: collapse; }
.drive-crumbs {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: var(--s3);
  font-size: var(--fs-13); color: var(--ink-2);
}
.drive-crumbs .drive-crumb-sep { color: var(--ink-3); }
.drive-crumbs .drive-crumb-current { color: var(--ink); font-weight: 550; }
.drive-pagination { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s3); }
.drive-upload-status {
  margin-top: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r1);
  background: var(--surface-2); font-size: var(--fs-13); color: var(--ink-2);
}
.drive-upload-label { display: inline-flex; align-items: center; cursor: pointer; }
.drive-folder { font-weight: 550; }
.drive-ic-cell { width: 1%; white-space: nowrap; }
.drive-ic { display: inline-block; width: 16px; height: 16px; border-radius: 4px; }
.drive-ic-folder { background: color-mix(in srgb, var(--accent) 65%, transparent); border: 1px solid var(--accent-strong); }
.drive-ic-file { background: var(--surface-2); border: 1px solid var(--line-strong); }
.drive-name {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); text-align: left;
}
.drive-name:hover { color: var(--accent); text-decoration: underline; }
.drive-name-folder { font-weight: 550; }

/* ------------------------------------------------------------ logs (briefs) */
.logs-section { margin-bottom: var(--s5); }
.logs-section:last-child { margin-bottom: 0; }
.logs-section > h3 {
  font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin: 0 0 var(--s3);
}
.logs-list { display: grid; gap: var(--s3); }
.logs-item {
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface);
  padding: var(--s3) var(--s4); display: grid; gap: var(--s1);
}
.logs-item:hover { border-color: var(--line-strong); }
.logs-item-header { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; justify-content: space-between; }
.logs-item-type { display: inline-flex; gap: 6px; align-items: center; }
.logs-item-date { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); }
.logs-item-title { font-size: var(--fs-14); font-weight: 600; color: var(--ink); }
.logs-item-meta { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.logs-empty { color: var(--ink-3); font-size: var(--fs-13); }

/* ------------------------------------------------------- memory explorer */
.memory-toolbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
.memory-actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; flex: 1 1 320px; }
.memory-actions input[type="search"] {
  flex: 1 1 200px; min-width: 120px; font: inherit; padding: 9px 11px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.memory-actions select {
  font: inherit; padding: 9px 10px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.memory-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.memory-card {
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface);
  padding: var(--s3) var(--s4); display: grid; gap: var(--s2); cursor: pointer;
}
.memory-card:hover { border-color: var(--line-strong); }
.memory-card.selected { border-color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent-strong) inset; }
.memory-header { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.memory-collection { font-weight: 650; font-size: var(--fs-14); color: var(--ink); }
.memory-source-type {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-11);
  padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line-strong);
  color: var(--ink-2); background: var(--surface-2);
}
.memory-confidence {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3);
}
/* Source-type badge tints (base shape from .memory-source-type) */
.badge-fact { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-bg); }
.badge-code { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-bg); }
.badge-design { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg); }
.badge-note, .badge-observation, .badge-event, .badge-preference, .badge-decision {
  color: var(--ink-2); border-color: var(--line-strong); background: var(--surface-2);
}
.memory-snippet { font-size: var(--fs-13); color: var(--ink-2); margin: 0; overflow-wrap: anywhere; }
.memory-meta { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; font-size: var(--fs-11); color: var(--ink-3); }
.memory-created { font-family: var(--font-mono); }
.memory-platform { }
.memory-task { font-family: var(--font-mono); }
.memory-detail {
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-2);
  padding: var(--s4); margin-top: var(--s4);
}
.memory-detail .detail-h h3 { font-size: var(--fs-15); }

/* ---------------------------------------------------------- app atlas */
.atlas-toolbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
.atlas-actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; flex: 1 1 320px; }
.atlas-actions input[type="search"] {
  flex: 1 1 200px; min-width: 120px; font: inherit; padding: 9px 11px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.atlas-actions select {
  font: inherit; padding: 9px 10px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.atlas-grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.atlas-modules { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.atlas-module-card {
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface);
  padding: var(--s3) var(--s4); display: grid; gap: var(--s2); cursor: pointer;
}
.atlas-module-card:hover { border-color: var(--line-strong); }
.atlas-module-card.selected { border-color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent-strong) inset; }
.atlas-module-card h4 { margin: 0; font-size: var(--fs-14); display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.module-category {
  font-family: var(--font-mono); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); font-weight: 600;
}
.module-desc { margin: 0; font-size: var(--fs-13); color: var(--ink-2); }
.module-caps { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); overflow-wrap: anywhere; }
.module-skills { font-size: var(--fs-12); color: var(--ink-2); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.skill-badge {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-11);
  padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink-2);
}
.atlas-modules-pane, .atlas-skills-pane { min-width: 0; }
.atlas-skills-pane > h4 {
  font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin: 0 0 var(--s3);
}
.atlas-skills { display: grid; gap: var(--s3); }
.atlas-skill-card {
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface);
  padding: var(--s3) var(--s4); display: grid; gap: var(--s2);
}
.atlas-skill-card.verified { border-left: 3px solid var(--ok); }
.atlas-skill-card h4 { margin: 0; font-size: var(--fs-14); display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.skill-desc { margin: 0; font-size: var(--fs-13); color: var(--ink-2); }
.skill-module { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); }
.verified-badge, .unverified-badge {
  font-size: var(--fs-11); font-weight: 650; padding: 1px 7px; border-radius: 999px;
}
.verified-badge { color: var(--ok); background: var(--ok-bg); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.unverified-badge { color: var(--warn); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
@media (max-width: 900px) {
  .atlas-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------- lab (prototypes) */
.chat-form, .log-form { display: grid; gap: var(--s3); }
.chat-messages {
  display: grid; gap: var(--s3); align-content: start;
  min-height: 100px; margin-bottom: var(--s4);
}
.md-code {
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r1);
  padding: var(--s3); margin: var(--s2) 0; overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--fs-12);
}
.md-code code { font-family: inherit; }
.cron-import-check { width: 16px; height: 16px; }

/* ------------------------------------------------- inline image artifacts */
.artifact { margin: 0; display: grid; gap: var(--s2); justify-items: start; }
.artifact img {
  display: block; width: auto; max-width: min(100%, 360px); height: auto;
  max-height: 480px; border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--sunken);
}
.artifact-cap {
  font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.artifact-fallback {
  margin: 0; padding: var(--s3); border: 1px dashed var(--line-strong);
  border-radius: var(--r2); color: var(--ink-2); font-size: var(--fs-12);
  background: var(--surface-2);
}

/* ------------------------------------------------------------ tab bar/sheet */
.tabbar { display: none; }

.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet-scrim { position: absolute; inset: 0; background: var(--scrim); }
.sheet-card {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; overflow-y: auto;
  background: var(--surface); border-top: 1px solid var(--line);
  border-radius: var(--r4) var(--r4) 0 0; padding: var(--s4);
  padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
}
.sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); }
.sheet-list { display: grid; gap: var(--s3); }
.sheet-group { display: grid; gap: 2px; }
.sheet-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  font: inherit; text-align: left; cursor: pointer; min-height: 44px;
  padding: 10px 12px; border-radius: var(--r1); border: 1px solid transparent;
  background: var(--surface-2); color: var(--ink);
}
.sheet-item:hover { border-color: var(--line-strong); }
.sheet-item .muted { font-size: var(--fs-12); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .rail { display: none; }
  .shell { min-height: auto; }
  .ribbon { flex-wrap: wrap; }
  .ribbon-status { margin-left: 0; }
  .topbar { padding: var(--s5) var(--s4) var(--s2); }
  .topbar h1 { font-size: var(--fs-22); }
  .content { padding: var(--s2) var(--s4) 96px; }
  .banner { margin-left: var(--s4); margin-right: var(--s4); }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tab {
    flex: 1; min-height: 54px; display: flex; align-items: center; justify-content: center;
    font: inherit; font-size: var(--fs-11); cursor: pointer; border: 0; background: transparent;
    color: var(--ink-2); padding: 6px 2px;
  }
  .tab.active { color: var(--accent); font-weight: 650; }
  .tab-label { text-align: center; line-height: 1.15; }

  .evidence-cols { grid-template-columns: 1fr; }
  .cal-cell { min-height: 78px; }
  .cal-week { grid-template-columns: 1fr; }
  .cal-detail-body { grid-template-columns: 1fr; }
}

@media (min-width: 901px) {
  .sheet, .tabbar { display: none !important; }
}

@media (max-width: 560px) {
  .cal-daynum { font-size: var(--fs-11); }
  .cal-event .cal-event-time { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
  .skel .skel-line { animation: none; }
}

/* Increase Contrast / forced colours: strengthen borders and dim text. */
@media (prefers-contrast: more) {
  :root {
    --line: #6c7681;
    --line-strong: #8b95a1;
    --ink-2: #d5dbe2;
    --ink-3: #c2cad3;
  }
}

@media (forced-colors: active) {
  .led, .fact { forced-color-adjust: none; }
  .btn { forced-color-adjust: auto; }
}

/* Sidebar collapsed state */
.rail.collapsed {
  width: 60px;
}
.rail.collapsed .rail-label,
.rail.collapsed .rail-title,
.rail.collapsed .rail-sub {
  display: none;
}
.rail.collapsed .rail-item {
  justify-content: center;
}

/* Sidebar toggle button */
#sidebar-toggle {
  margin-right: 8px;
  flex-shrink: 0;
}

/* ------------------------------------------------------------- overview */
/* The Overview is a composed dashboard: a status strip, a grid of cards and a
   lower band of detail panels. Cards carry the surface (base .dash-card /
   .panel rules); the wrappers here are plain layout cells, so no card is ever
   nested inside another card. */
.dashboard-view {
  display: grid;
  gap: var(--s4);
  align-content: start;
  width: 100%;
  box-sizing: border-box;
}

/* Status strip ---------------------------------------------------------- */
.overview-status {
  display: grid;
  gap: var(--s3) var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  box-shadow: var(--shadow-sm);
  padding: var(--s4) var(--s5);
}
.status-item { display: grid; gap: 3px; align-content: start; }
.status-label {
  font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 650;
}
.status-value { font-size: var(--fs-20); font-weight: 650; font-family: var(--font-mono); color: var(--ink); animation: value-in 120ms ease-out; }
.status-indicator { font-size: var(--fs-11); color: var(--ink-3); min-height: 1em; }
.status-indicator.needs-review { color: var(--warn); font-weight: 650; }

@keyframes value-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Card grid ------------------------------------------------------------- */
.overview-middle {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}
.overview-card { display: grid; min-width: 0; }
.overview-card > .dash-card,
.overview-card > .panel { height: 100%; }

/* Detail band ----------------------------------------------------------- */
.overview-bottom {
  display: grid;
  gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1100px) {
  .overview-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.overview-section { display: grid; min-width: 0; }

/* Card header (shared by .dash-card) ------------------------------------ */
.dash-card-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); flex-wrap: wrap;
}

/* -------------------------------------------------------- Memory Graph */
.memory-graph-view {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}
.memory-graph-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  align-items: center;
  justify-content: space-between;
}
.memory-graph-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  flex: 1 1 320px;
}
.memory-graph-actions input[type="search"] {
  flex: 1 1 200px;
  min-width: 120px;
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r1);
  background: var(--sunken);
  color: var(--ink);
}
.memory-graph-actions input[type="search"]:focus-visible { border-color: var(--accent); }
.memory-graph-actions select {
  font: inherit;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r1);
  background: var(--sunken);
  color: var(--ink);
}
.memory-graph-actions button { flex-shrink: 0; }
.memory-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  font-size: var(--fs-12);
  color: var(--ink-2);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; flex: none; display: block; }
.memory-graph-split {
  display: flex;
  gap: var(--s3);
  align-items: stretch;
  min-height: clamp(360px, 60vh, 720px);
}
.memory-graph-canvas {
  flex: 2 1 0;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
}
.memory-graph-detail {
  flex: 1 1 0;
  min-width: 0;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
  padding: var(--s3) var(--s4);
  box-sizing: border-box;
}
.memory-graph-detail[hidden] { display: none; }
.memory-graph-detail h3 { margin-top: 0; font-size: var(--fs-14); color: var(--ink); }
.memory-graph-detail h4 { margin: var(--s3) 0 var(--s1); font-size: var(--fs-13); color: var(--ink); }
.memory-graph-detail pre {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  padding: var(--s2);
  overflow-x: auto;
  margin: var(--s1) 0;
}
.memory-graph-detail dl { display: grid; gap: var(--s1); margin: 0; }
.memory-graph-detail dt { font-weight: 600; color: var(--ink-2); font-size: var(--fs-12); }
.memory-graph-detail dd { margin: 0; }

/* Shared node/memory detail panel (graph + explorer) -------------------- */
.memory-detail { display: grid; gap: var(--s2); }
.detail-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
}
.detail-h h3 { margin: 0; font-size: var(--fs-14); }
.detail-body { display: grid; gap: var(--s1); }
.detail-body h4 { margin: var(--s3) 0 var(--s1); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.detail-meta { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 4px var(--s3); margin: 0; }
.detail-meta dt { color: var(--ink-3); font-size: var(--fs-12); font-weight: 600; }
.detail-meta dd { margin: 0; font-size: var(--fs-13); overflow-wrap: anywhere; }
.detail-meta dd .mono { display: block; white-space: pre-wrap; overflow-x: auto; margin: 0; }
/* Generic record detail: a stack of "label: value" rows, then an action bar. */
.detail-grid { display: grid; gap: var(--s2); }
.detail-grid > div { font-size: var(--fs-13); }
.detail-grid > div > strong { color: var(--ink-2); margin-right: 4px; }
.detail-grid pre { margin: var(--s1) 0 0; }
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.memory-document {
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r1);
  padding: var(--s3); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: var(--fs-12); max-height: 320px; overflow-y: auto;
}
@media (max-width: 800px) {
  .memory-graph-split { flex-direction: column; min-height: 0; }
  .memory-graph-canvas { min-height: 320px; }
  .memory-graph-detail { max-width: none; min-height: 200px; }
}

/* Prototype Card Styles */
.prototype-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r4);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.prototype-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: var(--s4) var(--s5);
}

.prototype-title {
  font-size: var(--fs-15);
  font-weight: 650;
  color: var(--ink);
  margin: 0 0 var(--s2) 0;
}

.prototype-description {
  font-size: var(--fs-13);
  color: var(--ink-2);
  margin: 0;
}

.prototype-body {
  padding: var(--s4) var(--s5);
}

.prototype-form {
  margin-bottom: var(--s4);
}

.prototype-messages {
  display: grid;
  gap: var(--s3);
  align-content: start;
  min-height: 100px;
  margin-bottom: var(--s4);
}

.prototype-result {
  padding: var(--s3);
  border-radius: var(--r2);
  font-weight: 500;
  text-align: center;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prototype-result:empty { display: none; }

.prototype-result.ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.prototype-result.bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.prototype-result.warn {
  background: var(--warn-bg);
  color: var(--warn);
}

/* ----------------------------------------------------------- agents home --- */
.agent-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.agent-status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-12); color: var(--ink-2); }
.agent-status-text { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-2); }
.agent-model-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }

.inbox-toolbar, .cap-toolbar {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3);
}
.cap-toolbar input[type="search"] {
  font: inherit; padding: 8px 10px; border-radius: var(--r1); min-width: 200px; flex: 1 1 200px;
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.inbox-toolbar select, .cap-toolbar select,
.invoke-controls select, .invoke-params textarea, .invoke-params select {
  font: inherit; padding: 8px 10px; border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--ink);
}
.inbox-row {
  display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: left;
  background: none; border: 0; font: inherit; cursor: pointer; color: inherit;
}
.inbox-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cap-row { cursor: pointer; }
.cap-id { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink); }
.cap-detail { padding: var(--s2) 8px var(--s3); border-left: 2px solid var(--line); margin: 2px 0 var(--s2) 6px; }
.cap-detail details { margin: var(--s2) 0; }
.cap-detail summary { cursor: pointer; font-size: var(--fs-12); color: var(--ink-2); }
.cap-detail pre.code {
  margin: var(--s2) 0 0; padding: var(--s3); overflow: auto; max-height: 240px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r1);
  font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink);
}
.cap-invoke { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-2); }
.invoke-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.invoke-controls label { font-size: var(--fs-12); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.invoke-params { display: block; font-size: var(--fs-12); color: var(--ink-2); margin-bottom: var(--s2); }
.invoke-params textarea { width: 100%; margin-top: 4px; resize: vertical; font-family: var(--font-mono); }
.confirm-line { color: var(--warn); }

/* ----------------------------------------------------------------- ambient */
/* A single continuous background system whose three states are driven by real
   activity (see ambient.js) — so the movement carries information rather than
   decorating the page. Rules this layer keeps:

     - transform/opacity only, so it never leaves the compositor
     - the bright centre of every blob sits OFF-SCREEN; what reaches the page
       is only the soft outer falloff, which keeps the luminance delta small
       enough not to compete with text on a near-black canvas
     - the reading column is masked out, so nothing drifts behind body copy
     - reduced motion freezes it to a static gradient rather than deleting it

/* Ambient background plane.
 *
 * One continuous background system, not a set of decorative effects. Its motion
 * only ever carries information:
 *
 *   idle      static — the screen is at rest, nothing is happening
 *   working   a slow, gentle drift of the three ambient blobs, plus a swelling
 *             activity blob; the page "breathes" slightly
 *   attention a single sweep on the activity blob, then back to calm
 *
 * Every animation is transform + opacity only (compositor-only), and the whole
 * plane freezes under prefers-reduced-motion. There is never any standing
 * idle motion: a looping background that runs while you stare is a permanent
 * interrupt. The three blobs drift only while an agent or job is actively
 * working, and the activity blob carries no infinite drift of its own.
 */
.ambient-blob {
  position: absolute;
  display: block;
  width: 120vmax;
  height: 120vmax;
  border-radius: 50%;
  opacity: var(--ambient-strength);
  transition: opacity 1400ms ease-out;
  will-change: transform;
}

/* The three ambient blobs drift continuously, even when the system is idle.
   Each blob has a different cycle length (24s / 28s / 32s) so they never
   resynchronise into an obvious pulse. Movement is smooth, organic, and calm —
   enough positional displacement to make the drift perceptible at a glance,
   without turning the background into an animated screensaver. */
.ambient-blob-a {
  left: -80vmax; top: -76vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%);
  animation: ambient-drift-a-idle 24s ease-in-out infinite;
}
.ambient-blob-b {
  right: -86vmax; bottom: -80vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--info) 24%, transparent), transparent 70%);
  animation: ambient-drift-b-idle 28s ease-in-out infinite;
}
.ambient-blob-c {
  left: -82vmax; bottom: -84vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-strong) 22%, transparent), transparent 72%);
  animation: ambient-drift-c-idle 32s ease-in-out infinite;
}

/* Working: noticeably more energetic. Faster cycles (9s / 11s / 14s) and larger
   displacement + scale range. The movement is clearly more animated than idle,
   without becoming frantic. The three blobs keep different rates so they never
   re-synchronise. */
html[data-ambient="working"] .ambient-blob-a {
  animation: ambient-drift-a-work 9s ease-in-out infinite;
}
html[data-ambient="working"] .ambient-blob-b {
  animation: ambient-drift-b-work 11s ease-in-out infinite;
}
html[data-ambient="working"] .ambient-blob-c {
  animation: ambient-drift-c-work 14s ease-in-out infinite;
}

/* The activity blob is the "working" signal. It has no infinite drift of its
   own — it appears and swells only via the opacity/transform transitions
   wired to the data-ambient attribute, so it only moves when a real agent or
   job does work. Static and almost invisible while idle. */
.ambient-blob-d {
  right: -72vmax; top: -68vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 32%, transparent), transparent 68%);
  transform: scale(0.92);
  transition: transform 1400ms ease-out, opacity 1400ms ease-out;
}
html[data-ambient="working"] .ambient-blob-d,
html[data-ambient="attention"] .ambient-blob-d {
  transform: scale(1);
  opacity: .72;
}
html[data-ambient="attention"] .ambient-blob-d { opacity: .5; }

/* Idle keyframes: smooth, organic drift with enough positional displacement to
   be seen at a glance. Each blob has a different duration and movement pattern
   so they never move in synchrony. */
@keyframes ambient-drift-a-idle {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(20vmax, 16vmax, 0) scale(1.16); }
}
@keyframes ambient-drift-b-idle {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-18vmax, -20vmax, 0) scale(1.20); }
}
@keyframes ambient-drift-c-idle {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to   { transform: translate3d(16vmax, -14vmax, 0) scale(1.18); }
}

/* Working keyframes: faster, with larger displacement and scale range. The
   movement is noticeably more energetic than idle, without becoming frantic. */
@keyframes ambient-drift-a-work {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12vmax, 9vmax, 0) scale(1.22); }
}
@keyframes ambient-drift-b-work {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-11vmax, -12vmax, 0) scale(1.26); }
}
@keyframes ambient-drift-c-work {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(9vmax, -8vmax, 0) scale(1.24); }
}

/* --- state ---------------------------------------------------------------- */

html[data-ambient="working"] .ambient { --ambient-strength: .72; }
html[data-ambient="attention"] .ambient { --ambient-strength: .82; }

/* The one-shot sweep for "attention": a wide soft band crossing left to right
   and leaving. It is a single pass, not a loop — the difference between a
   notification and an alarm. */
.ambient-wave {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -70vmax;
  width: 70vmax;
  opacity: 0;
  transform: rotate(12deg);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 22%, transparent) 45%,
    transparent
  );
  will-change: transform, opacity;
}
.ambient.is-pulsing .ambient-wave {
  animation: ambient-sweep 5200ms cubic-bezier(.3, 0, .2, 1) 1;
}
@keyframes ambient-sweep {
  0%   { opacity: 0;  transform: translate3d(0, 0, 0) rotate(12deg); }
  16%  { opacity: .8; }
  62%  { opacity: .45; }
  100% { opacity: 0;  transform: translate3d(160vmax, 0, 0) rotate(12deg); }
}

/* --- guards --------------------------------------------------------------- */

/* A hidden tab paints nothing. */
html[data-ambient-paused="1"] .ambient * { animation-play-state: paused; }

/* An explicit off switch (see Ambient.disable). */
html[data-ambient-off="1"] .ambient { display: none; }

/* Reduced motion keeps the colour and drops the movement — the gradient stays,
   so the design is intact rather than stripped. */
@media (prefers-reduced-motion: reduce) {
  .ambient-blob { animation: none !important; }
  .ambient-wave { display: none; }
}

/* Light mode: additive glow does nothing against a pale canvas, so the layer
   is pulled back to a faint tint rather than allowed to read as haze.
   NOTE: these must be single compound :root selectors — `:root[data-theme] html[…]`
   can never match, because html IS the root element. */
:root[data-theme="light"] .ambient { --ambient-strength: .5; }
:root[data-theme="light"][data-ambient="working"] .ambient { --ambient-strength: .3; }
:root[data-theme="light"][data-ambient="attention"] .ambient { --ambient-strength: .34; }
/* The activity blob is not scaled by --ambient-strength (it is a cross-fade
   switch), so it needs its own light-mode values — otherwise it stays at the
   dark value and becomes the loudest thing on a pale canvas. */
:root[data-theme="light"][data-ambient="working"] .ambient-blob-d { opacity: .34; }
:root[data-theme="light"][data-ambient="attention"] .ambient-blob-d { opacity: .28; }

/* Small screens: less surface to drift across, and the blobs are already
   mostly off-screen — keep it quieter. */
@media (max-width: 720px) {
  .ambient { --ambient-strength: .4; }
}

/* ---------------------------------------------------------------- layers */
/* Deliberate stack, low to high:
     0  the page itself (<body> background)
     1  #ambient   — fixed, full-viewport, painted above the body background
     2  .gate / #app — the interface, painted above the ambient
   The ambient is a child of <body> and a sibling of #gate/#app, so its
   visibility never depends on the gate's [hidden] attribute. A non-negative
   z-index is used on purpose: at -1 the canvas would be painted underneath the
   opaque body background and vanish. */
#ambient {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
#ambient canvas { display: block; width: 100%; height: 100%; }

/* The authenticated shell paints no background of its own, so it is lifted
   above the ambient layer without covering it. */
#app {
  position: relative;
  z-index: 2;
}