@font-face {
  font-family: 'Nunito';
  src: url('/assets/nunito.ttf') format('truetype');
  font-weight: 200 900;
  font-display: swap;
}
:root {
  /* THEME TOKENS — every color, font size, radius, space, and shadow lives
     here and in the theme overrides below. Do not hardcode values elsewhere;
     the only sanctioned exceptions are the per-name avatar hue (--h) and the
     static Pingu/favicon artwork. See docs/design-guide.md. */

  /* chrome (light theme, the default) */
  --bg: #ECEBE3;            /* tahini */
  --surface: #FFFFFF;       /* cards, panels, nav */
  --surface-2: #F6F5EF;     /* inset surfaces: quotes, editors, collapsibles */
  --fg: #232E2C;            /* darkgreen — primary text */
  --fg-secondary: #525C3E;  /* evergreen — secondary text */
  --fg-tertiary: #5F5740;   /* dust — tertiary text */
  --muted: #6D7D8B;         /* de-emphasized text, both themes */
  --border: color-mix(in srgb, var(--fg) 18%, transparent);
  --shadow: 0 2px 3.84px rgba(0, 0, 0, 0.12); /* the one shadow; never stacked */

  /* action greens (constant across themes) */
  --action: #4F5D3A;        /* mint — CTA, primary buttons, selected */
  --action-hover: color-mix(in srgb, var(--action) 85%, #000000);
  --on-action: #FFFFFF;
  --positive: #7B9A5C;      /* primarygreen — badges, active filters, success, positive deltas */

  /* identity + data (constant — the Pingu colors) */
  --indigo: #2C4A78;        /* bell glass — chart/data primary */
  --indigo-soft: #4A6FA5;   /* lighter bell stop — secondary data series */
  --gold: #C9A24B;          /* rim gold — chart highlights, pending badge; sparing */
  --on-gold: #232E2C;
  --chart: var(--indigo);
  --chart-0: #F3EAD6;       /* washi tint — zero end of intensity scales */
  --link: var(--indigo);    /* link accents, where mint would be wrong */

  /* semantic */
  --error: #EF4444;         /* validation / error chips */
  --destructive: #9A4B38;   /* meat — destructive/cancelled text, negative deltas */
  --disabled: #9CA3AF;

  /* avatars: the per-name hue (--h, set inline) is the sanctioned exception */
  --avatar-sat: 35%;
  --avatar-lit: 45%;
  --avatar-fg: #FFFFFF;

  /* typography */
  --font-sans: 'Nunito', ui-rounded, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;

  /* 4px spacing grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* radius scale */
  --radius-sm: 8px;      /* inputs */
  --radius-md: 12px;     /* buttons */
  --radius-lg: 16px;     /* cards */
  --radius-xl: 24px;     /* prominent surfaces */
  --radius-full: 9999px; /* pills, avatars */

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1B1F1D;
    --surface: #232826;
    --surface-2: #2A302C;
    --fg: #ECEBE3;
    --fg-secondary: #B7C2A2;
    --fg-tertiary: #C7BEA4;
    --shadow: 0 2px 3.84px rgba(0, 0, 0, 0.25);
    --chart-0: #2A302C;
    --link: var(--indigo-soft);
    color-scheme: dark;
  }
}
html[data-theme="light"] {
  --bg: #ECEBE3;
  --surface: #FFFFFF;
  --surface-2: #F6F5EF;
  --fg: #232E2C;
  --fg-secondary: #525C3E;
  --fg-tertiary: #5F5740;
  --shadow: 0 2px 3.84px rgba(0, 0, 0, 0.12);
  --chart-0: #F3EAD6;
  --link: var(--indigo);
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #1B1F1D;
  --surface: #232826;
  --surface-2: #2A302C;
  --fg: #ECEBE3;
  --fg-secondary: #B7C2A2;
  --fg-tertiary: #C7BEA4;
  --shadow: 0 2px 3.84px rgba(0, 0, 0, 0.25);
  --chart-0: #2A302C;
  --link: var(--indigo-soft);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--text-sm)/1.5 var(--font-sans); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: calc(var(--radius-sm) / 2); }

header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 10; }
header .brand { font-weight: 700; font-size: var(--text-md); letter-spacing: .02em; display: flex; align-items: center; gap: var(--space-2); color: var(--fg); }
header .brand:hover { text-decoration: none; }
header .brand svg { width: 38px; height: 38px; flex: none; }
header .brand span { color: var(--indigo); }
header nav { display: flex; gap: var(--space-1); }
header nav a { color: var(--muted); font-weight: 700; font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: var(--space-2); }
header nav a:hover { color: var(--fg); text-decoration: none; background: var(--surface-2); }
header nav a.active { color: var(--on-action); background: var(--action); border-color: var(--action); }
.pill { background: var(--gold); color: var(--on-gold); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; padding: 0 var(--space-2); line-height: 1.5; }
header .meta { margin-left: auto; color: var(--muted); font-weight: 300; font-size: var(--text-xs); }
.theme-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--muted); cursor: pointer; }
.theme-toggle:hover { color: var(--fg); }
.theme-toggle svg { display: none; width: 16px; height: 16px; }
html:not([data-theme]) .theme-toggle .i-auto { display: block; }
html[data-theme="light"] .theme-toggle .i-light { display: block; }
html[data-theme="dark"] .theme-toggle .i-dark { display: block; }

.badge { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; line-height: 1.6; vertical-align: middle; }
.badge.dry { background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold); border: 1px solid var(--gold); }
.badge.engine { background: color-mix(in srgb, var(--indigo) 12%, transparent); color: var(--indigo); border: 1px solid var(--indigo); }
.badge.degraded { background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold); border: 1px solid var(--gold); }

/* triage buckets: impact-grouped inbox */
h2.bucket { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-6) 0 var(--space-3); }
.bucket-count { color: var(--muted); font-weight: 300; font-size: var(--text-sm); }
.card-urgent { border-left: 3px solid var(--destructive); }
.card-fyi { opacity: .75; }
.prio { cursor: help; display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; line-height: 1.6; border: 1px solid var(--border); color: var(--muted); }
.prio-urgent { color: var(--destructive); border-color: var(--destructive); background: color-mix(in srgb, var(--destructive) 10%, transparent); }
.prio-soon { color: var(--indigo); border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 8%, transparent); }
.prio-fyi { color: var(--muted); border-color: var(--border); }
/* instant tooltip: native title needs a ~1s dwell and renders as OS
   chrome; data-tip appears immediately, styled by the system */
.prio { position: relative; }
.prio:hover::after, .prio:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 280px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font: 400 var(--text-xs)/1.5 var(--font-sans);
  white-space: normal;
  text-align: left;
  text-transform: none;
  pointer-events: none;
}

main { max-width: 1080px; margin: 0 auto; padding: var(--space-6); }
h1 { font-size: var(--text-xl); font-weight: 700; margin: 0 0 var(--space-4); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
h2 { font-size: var(--text-lg); font-weight: 700; margin: var(--space-8) 0 var(--space-3); }
.muted { color: var(--muted); font-weight: 300; }
time[title] { cursor: help; }

.pingu-lg svg { width: 180px; height: 180px; display: block; margin: 0 auto var(--space-4); }
.pingu-sm svg { width: 72px; height: 72px; display: block; margin: 0 auto var(--space-2); opacity: .9; }

/* Avatars: the per-name hue (--h, set inline) is the one sanctioned
   exception to the tokens-only color rule. Saturation/lightness stay
   muted so avatars sit in the earthy palette. */
.avatar { flex: none; width: 36px; height: 36px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-sm); color: var(--avatar-fg); background: hsl(var(--h, 210) var(--avatar-sat) var(--avatar-lit)); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.card .num { font-size: var(--text-xl); font-weight: 700; }
.card .lbl { color: var(--muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.card.good .num { color: var(--positive); }
.card.warn .num { color: var(--gold); }
.delta { font-size: var(--text-xs); font-weight: 700; }
.delta.up { color: var(--positive); }
.delta.down { color: var(--destructive); }
.delta.flat, .delta.none { color: var(--muted); }

/* inbox queue */
.queue { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.card-row { display: flex; align-items: center; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); color: var(--fg); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.card-row:hover { text-decoration: none; border-color: var(--action); transform: translateY(-1px); box-shadow: var(--shadow); }
.card-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.card-top { font-size: var(--text-xs); font-weight: 300; color: var(--muted); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: baseline; }
.card-top b { color: var(--fg); font-weight: 700; }
.card-title { font-size: var(--text-sm); font-weight: 700; margin: var(--space-1) 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-preview { font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { color: var(--muted); font-size: var(--text-xl); flex: none; }

.empty { color: var(--muted); padding: var(--space-6); text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.hero-empty { text-align: center; padding: var(--space-8) var(--space-4) var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.hero-line { font-size: var(--text-lg); font-weight: 700; margin: var(--space-1) 0; }

.glance { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: baseline; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: 300; color: var(--fg-secondary); margin-top: var(--space-4); }
.glance .num { font-weight: 700; font-size: var(--text-md); color: var(--fg); }

/* review */
.crumb { margin-bottom: var(--space-3); font-size: var(--text-sm); }
.panes { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-4); align-items: start; }
@media (max-width: 860px) { .panes { grid-template-columns: 1fr; } }
.pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.pane h2 { margin-top: 0; }
.who { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
blockquote.ping-body { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-2); border-left: 3px solid var(--indigo); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; white-space: pre-wrap; word-break: break-word; }
.kv { color: var(--muted); font-weight: 300; font-size: var(--text-xs); margin-bottom: var(--space-2); }
.kv b { color: var(--fg); font-weight: 700; }
.btn-link { display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; line-height: 1.7; }
.btn-link:hover { border-color: var(--link); text-decoration: none; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; line-height: 1.7; border: 1px solid var(--border); color: var(--muted); }
.chip a { color: inherit; }
.chip.ack-posted, .chip.st-ok { color: var(--positive); border-color: var(--positive); background: color-mix(in srgb, var(--positive) 10%, transparent); }
.chip.ack-dry, .chip.st-dry { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.chip.ack-error, .chip.st-error { color: var(--error); border-color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent); }
.chip.ack-muted, .chip.ack-none, .chip.st-muted, .chip.st-info { color: var(--muted); }

/* conversation state chips: awaiting you = gold (action needed),
   awaiting them = indigo-soft (data, out of your hands), resolved =
   positive — the funnel segment colors, all theme-constant tokens */
.chip.st-await-you { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.chip.st-await-them { color: var(--indigo-soft); border-color: var(--indigo-soft); background: color-mix(in srgb, var(--indigo-soft) 10%, transparent); }
.chip.st-resolved { color: var(--positive); border-color: var(--positive); background: color-mix(in srgb, var(--positive) 10%, transparent); }

/* request-class chips: decision = indigo (analysis is data work),
   understand = indigo-soft (explanation), review = gold (feedback
   pending) — theme-constant tokens, the funnel-segment precedent.
   .cls-suggest is the muted display-only suggestion ("decision?");
   .cls-age is the stale-output hint on a class chip ("decision · 3d") */
.chip.cls-decision { color: var(--indigo); border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 10%, transparent); }
.chip.cls-understand { color: var(--indigo-soft); border-color: var(--indigo-soft); background: color-mix(in srgb, var(--indigo-soft) 10%, transparent); }
.chip.cls-review { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.chip.cls-suggest { color: var(--muted); border-style: dashed; }
.cls-age { font-weight: 300; }
/* .cls-running pulses a class chip while its run is in flight —
   opacity only, so the chip stays token-colored; the animation plays
   only under the reduced-motion gate below */
@keyframes cls-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: no-preference) {
  .chip.cls-running { animation: cls-pulse 1.6s ease-in-out infinite; }
}

/* review tree: rounds of feedback branches. Branch state badges follow
   the .cls chip precedent — theme-constant tokens, one semantic color
   per state: draft = gold (awaiting you), accepted = indigo (committed,
   not yet spoken), posted = positive, rejected = meat (a decision, not
   an error), superseded = muted */
.chip.br-draft { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.chip.br-accepted { color: var(--indigo); border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 10%, transparent); }
.chip.br-posted { color: var(--positive); border-color: var(--positive); background: color-mix(in srgb, var(--positive) 10%, transparent); }
.chip.br-rejected { color: var(--destructive); border-color: var(--destructive); background: color-mix(in srgb, var(--destructive) 10%, transparent); }
.chip.br-superseded { color: var(--muted); }
.rounds { display: flex; flex-direction: column; gap: var(--space-3); }
.round-head { margin-bottom: var(--space-2); }
.trunc { font-size: var(--text-xs); margin-bottom: var(--space-2); }
details.round { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
details.round summary { cursor: pointer; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
details.round[open] summary { margin-bottom: var(--space-2); }
.branches { display: grid; gap: var(--space-3); }
.branch { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.branch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: var(--text-xs); font-weight: 300; color: var(--muted); margin-bottom: var(--space-2); }
.branch-loc { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); color: var(--fg); }
.branch-excerpt pre { margin: 0 0 var(--space-2); }
.branch-note { margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface-2); border-left: 3px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; white-space: pre-wrap; word-break: break-word; }
.branch-note p { margin: 0 0 var(--space-2); }
.branch-note p:last-child { margin-bottom: 0; }
textarea.branch-editor { margin-top: var(--space-3); }
.branch-replies { margin-top: var(--space-3); padding-left: var(--space-6); border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: var(--space-3); }

/* avatar stack: up to three inbound authors overlap on inbox cards */
.avatar-stack { display: inline-flex; flex: none; }
.avatar-stack .avatar { border: 2px solid var(--surface); }
.avatar-stack .avatar + .avatar { margin-left: calc(-1 * var(--space-3)); }
.card-replied { font-size: var(--text-xs); }

/* transcript: inbound turns left with avatars, your sent replies right
   (.turn-you), pingsitter artifacts as muted centered system lines */
.conv { display: grid; grid-template-columns: 8fr 4fr; gap: var(--space-4); align-items: start; }
@media (max-width: 860px) { .conv { grid-template-columns: 1fr; } }
.transcript { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.turn { display: flex; align-items: flex-start; gap: var(--space-2); }
.turn-bubble { max-width: 85%; min-width: 0; }
.turn-you { flex-direction: row-reverse; }
.turn-you .turn-bubble { text-align: right; }
.turn-head { display: block; font-size: var(--text-xs); font-weight: 300; color: var(--muted); margin-bottom: var(--space-1); }
.turn-head b { color: var(--fg); font-weight: 700; }
.turn-body { margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface-2); border-left: 3px solid var(--indigo); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; white-space: pre-wrap; word-break: break-word; text-align: left; }
.turn-you .turn-body { background: var(--surface); border: 1px solid var(--border); border-right: 3px solid var(--action); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.turn-sys { text-align: center; font-size: var(--text-xs); }
.turn-sys .turn-sys-label { font-weight: 700; }
.turn-sys .turn-sys-body { margin: var(--space-2) auto 0; padding: var(--space-2) var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); text-align: left; max-width: 85%; }
/* mdLite bodies: safe-subset markdown (p/br/hr/strong/em/code/a/pre),
   shared by transcript turns and the composer's briefing sections */
.turn-body p, .turn-sys-body p, .sec-body p { margin: 0 0 var(--space-2); }
.turn-body p:last-child, .turn-sys-body p:last-child, .sec-body p:last-child { margin-bottom: 0; }
.turn-body hr, .turn-sys-body hr, .sec-body hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-2) 0; }
.turn-body code, .turn-sys-body code, .sec-body code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--space-1); }
.turn-body pre code, .turn-sys-body pre code, .sec-body pre code { display: block; background: none; border: none; padding: 0; }
.turn-body pre, .turn-sys-body pre, .sec-body pre { margin: 0 0 var(--space-2); padding: var(--space-3); }

/* raw ⇄ rendered markdown view: the header toggle flips .md-view-raw on
   <html> (pre-paint pinned from localStorage, like the theme). Raw is
   the verbatim stored source in a whitespace-preserving block. */
.md-raw { display: none; margin: 0; padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-word; text-align: left; }
.md-view-raw .md-raw { display: block; }
.md-view-raw .md-rendered { display: none; }
.turn-sys .md-raw { max-width: 85%; margin: var(--space-2) auto 0; }
details.sec .md-raw { margin: 0 var(--space-3) var(--space-3); }
details.earlier { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
details.earlier summary { cursor: pointer; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
details.earlier[open] { display: flex; flex-direction: column; gap: var(--space-3); }
.composer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); margin-top: var(--space-2); }
.composer h2 { margin-top: 0; }
.h1-actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); }
.h1-actions button { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

/* right rail: context deltas and related conversations */
.rail { display: flex; flex-direction: column; gap: var(--space-3); }
.rail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.rail-card h2 { margin: 0 0 var(--space-2); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ctx, .rel { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ctx li { font-size: var(--text-xs); font-weight: 300; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; }
.ctx-ref { font-weight: 700; }
.ctx-state { color: var(--fg-secondary); }
.rel li a { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; color: var(--fg); }
.rel li a:hover { text-decoration: none; }
.rel li a:hover .rel-title { text-decoration: underline; }
.rel-title { font-size: var(--text-sm); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* timeline orphan strip: suppression events with no conversation row */
.tl-strip { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: 300; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }

/* briefing sections */
details.sec { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--space-2); background: var(--surface-2); }
details.sec summary { cursor: pointer; padding: var(--space-2) var(--space-3); font-weight: 700; font-size: var(--text-sm); list-style: none; display: flex; align-items: center; gap: var(--space-2); }
details.sec summary::before { content: "▸"; color: var(--muted); transition: transform .15s ease; }
details.sec[open] summary::before { transform: rotate(90deg); }
details.sec summary::-webkit-details-marker { display: none; }
.sec-body { padding: 0 var(--space-3) var(--space-3); white-space: pre-wrap; word-break: break-word; font-size: var(--text-sm); }

/* editor */
textarea { width: 100%; min-height: 9rem; background: var(--surface-2); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); font: var(--text-sm)/1.5 var(--font-mono); resize: vertical; overflow: hidden; }
textarea:focus { outline: none; border-color: var(--action); }
.editor-meta { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-xs); margin-top: var(--space-1); }
.actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
/* buttons: exactly two variants — CTA (.primary, mint) and quiet (default);
   .danger is the destructive quiet variant (meat text) */
button { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border); background: transparent; color: var(--fg); font: 700 var(--text-sm)/1.2 var(--font-sans); cursor: pointer; }
button.primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
button.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
button.danger { color: var(--destructive); }
button.danger:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); }
button:disabled { cursor: default; opacity: .8; }
button.primary:disabled { background: var(--disabled); border-color: var(--disabled); }
button:not(.primary):disabled { color: var(--disabled); }
button.busy::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .5em; border: 2px solid var(--on-action); border-right-color: transparent; border-radius: var(--radius-full); vertical-align: -.1em; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4); overflow-x: auto; white-space: pre-wrap; word-break: break-word; font: var(--text-sm)/1.5 var(--font-mono); }

/* window selector */
.windows { display: flex; gap: var(--space-1); margin: 0 0 var(--space-4); }
.windows a { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.windows a.active { border-color: var(--positive); color: var(--positive); background: color-mix(in srgb, var(--positive) 10%, transparent); }
.windows a:hover { text-decoration: none; color: var(--fg); }

/* timeline */
.tl { display: grid; gap: var(--space-2); }
details.tl-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color .15s ease; }
details.tl-row summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
details.tl-row summary::-webkit-details-marker { display: none; }
details.tl-row[open], details.tl-row summary:hover { border-color: var(--action); }
.tl-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.tl-title { font-size: var(--text-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-sub { font-size: var(--text-xs); font-weight: 300; color: var(--muted); }
.journey { list-style: none; margin: 0; padding: var(--space-1) var(--space-4) var(--space-4) 3.6rem; }
.journey li { position: relative; padding: var(--space-1) 0 var(--space-1) var(--space-4); font-size: var(--text-sm); }
.journey li::before { content: ""; position: absolute; left: .28rem; top: 0; bottom: 0; width: 2px; background: var(--border); }
.journey li:first-child::before { top: 50%; }
.journey li:last-child::before { bottom: 50%; }
.journey li:only-child::before { display: none; }
.journey .dot { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: .65rem; height: .65rem; border-radius: var(--radius-full); background: var(--muted); border: 2px solid var(--surface); }
.journey .j-ok .dot { background: var(--positive); }
.journey .j-dry .dot { background: var(--gold); }
.journey .j-error .dot { background: var(--error); }
.journey .j-info .dot { background: var(--indigo); }
.tl-actions { padding: 0 var(--space-4) var(--space-3) 3.6rem; font-size: var(--text-xs); }

/* charts: data lives in the indigo family; gold marks the highlight */
.chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-4); }
.chart svg { display: block; width: 100%; height: auto; }
.chart rect.bar { fill: var(--chart); opacity: .85; }
.chart rect.bar:hover { fill: var(--gold); opacity: 1; }
.chart text { fill: var(--muted); font-size: var(--text-xs); font-weight: 300; }
.chart line.grid { stroke: var(--border); stroke-dasharray: 3 4; }

/* hour-of-day heatmap: washi tint → indigo intensity, gold on hover */
.heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.heat .cell { aspect-ratio: 1 / 1.4; border-radius: calc(var(--radius-sm) / 2); border: 1px solid var(--border); background: color-mix(in srgb, var(--chart) calc(var(--i, 0) * 100%), var(--chart-0)); }
.heat .cell:hover { border-color: var(--gold); }
.heat-labels { display: flex; justify-content: space-between; color: var(--muted); font-weight: 300; font-size: var(--text-xs); margin-top: var(--space-1); }

/* source split */
.split { display: flex; height: 16px; border-radius: var(--radius-full); overflow: hidden; border: 1px solid var(--border); }
.seg-webhook { background: var(--indigo); }
.seg-poll { background: var(--indigo-soft); }
.seg-other { background: var(--gold); }
.split-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 300; color: var(--muted); }
.split-legend .swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: calc(var(--radius-sm) / 2); vertical-align: -1px; margin-right: var(--space-1); }

/* conversations analytics: stacked blocks under one heading, the
   new→resolved funnel segments, and the send-rate-by-turn table */
.stack { margin-top: var(--space-3); }
.seg-await-you { background: var(--gold); }
.seg-await-them { background: var(--indigo-soft); }
.seg-resolved { background: var(--positive); }
.turns { border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.turns th, .turns td { padding: var(--space-2) var(--space-4); text-align: right; font-size: var(--text-sm); }
.turns th { color: var(--muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.turns td { border-top: 1px solid var(--border); }
.turns th:first-child, .turns td:first-child { text-align: left; }
/* longest-open table: compact and title-led, so left-aligned throughout */
.turns.longest th, .turns.longest td { text-align: left; }

/* rank lists */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 720px) { .cols { grid-template-columns: 1fr; } }
.rank { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rank li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); position: relative; }
.rank li:last-child { border-bottom: none; }
.rank .bar-bg { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--chart) 8%, transparent); }
.rank .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; }
.rank .count { color: var(--muted); font-size: var(--text-xs); position: relative; }
.rank .avatar { width: 26px; height: 26px; font-size: var(--text-xs); position: relative; }

.quiet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-3) var(--space-4); }
.quiet .big { font-size: var(--text-xl); font-weight: 700; color: var(--positive); margin-right: var(--space-1); }

footer { text-align: center; color: var(--muted); font-weight: 300; font-size: var(--text-xs); padding: var(--space-8) 0; }

/* gentle entrances */
@media (prefers-reduced-motion: no-preference) {
  main > * { animation: rise .3s cubic-bezier(.2, .7, .3, 1) both; }
  main > *:nth-child(2) { animation-delay: .04s; }
  main > *:nth-child(3) { animation-delay: .08s; }
  main > *:nth-child(4) { animation-delay: .12s; }
  main > *:nth-child(5) { animation-delay: .16s; }
  main > *:nth-child(n+6) { animation-delay: .2s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* sign-out control: the theme toggle's neighbor in the header */
header .signout { margin: 0; }
.signout-btn { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--border); background: transparent; color: var(--muted); font: 700 var(--text-xs)/1.6 var(--font-sans); }
.signout-btn:hover { color: var(--fg); background: var(--surface-2); }

/* login page: one centered card, the same vocabulary as the dashboard */
main.login { max-width: 22rem; margin: 0 auto; padding: var(--space-8) var(--space-6); }
.login-card { display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: var(--space-6); }
.login-brand { margin: 0 0 var(--space-4); text-align: center; font-weight: 700; font-size: var(--text-lg); letter-spacing: .02em; }
.login-brand span { color: var(--indigo); }
.login-card label { color: var(--fg-secondary); font-weight: 700; font-size: var(--text-xs); }
.login-card input { width: 100%; padding: var(--space-3); background: var(--surface-2); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-sm); font: 400 var(--text-sm)/1.5 var(--font-sans); }
.login-card input:focus { outline: none; border-color: var(--action); }
.login-card button { margin-top: var(--space-4); }
.login-error { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--error); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error); font-weight: 700; font-size: var(--text-xs); }