/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * dashboard.css — the companion dashboard shell, restyled to the locked
 * "Slate & Blue" Dashboard DNA. The DNA is the rule; see
 *   .claude/skills/front-end-design/dnas/dashboard-dna.md
 * Tokens lifted 1:1 from that DNA's `tokens.css` source. Every colour and
 * font below references a named token — no mid-render improvisation. */

:root {
  /* === Surface (light) === */
  --color-paper:      oklch(0.975 0.004 250);  /* page / app background — cool light slate */
  --color-paper-2:    oklch(0.992 0.002 250);  /* cards, KPI tiles, panels, agent cards — near-white */
  --color-paper-3:    oklch(0.930 0.006 250);  /* sidebar, sunken wells, tracks, hover fills */

  /* === Ink (dark on light) === */
  --color-ink:        oklch(0.22 0.022 260);   /* primary text, headings, KPI numbers */
  --color-ink-2:      oklch(0.46 0.020 260);   /* body copy, nav items, descriptions */
  --color-ink-3:      oklch(0.62 0.015 260);   /* labels, captions, idle status, metadata */

  /* === Rules (hairlines) === */
  --color-rule:       oklch(0.89 0.008 255);   /* 1px divider, card borders — default */
  --color-rule-soft:  oklch(0.93 0.006 255);   /* inner dividers, card footers */

  /* === Accent (confident blue — restrained ≤10% footprint) === */
  --color-accent:       oklch(0.52 0.16 255);
  --color-accent-ink:   oklch(0.99 0.005 255);
  --color-accent-hi:    oklch(0.47 0.17 255);
  --color-accent-dim:   oklch(0.74 0.07 255);
  --color-accent-soft:  oklch(0.52 0.16 255 / 0.10);
  --color-accent-wash:  oklch(0.52 0.16 255 / 0.06);
  --color-accent-glow:  oklch(0.52 0.16 255 / 0.40);
  --color-focus:        oklch(0.52 0.16 255);

  /* === Status palette === */
  --color-status-active: var(--color-accent);
  --color-status-recent: oklch(0.75 0.14 80);   /* amber — recent + needs-review chip */
  --color-status-quiet:  var(--color-ink-3);

  /* === Danger (the single red) === */
  --color-danger:        oklch(0.55 0.18 25);
  --color-danger-soft:   oklch(0.55 0.18 25 / 0.10);

  /* === Fonts — three families, three registers === */
  --font-display: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Menlo", monospace;

  /* === Type scale (1.25 major-third) === */
  --text-xs:  12px;  --text-sm:  13px;  --text-base: 14px;  --text-md: 16px;
  --text-lg:  19px;  --text-xl:  24px;  --text-2xl: 32px;   --text-3xl: 44px;

  /* mono label specifics */
  --label-size: 11px;  --label-weight: 500;  --label-tracking: 0.22em;

  /* === 4-pt spacing scale === */
  --space-3xs: 2px;  --space-2xs: 4px;  --space-xs: 8px;   --space-sm: 12px;
  --space-md:  16px; --space-lg:  24px; --space-xl: 32px;  --space-2xl: 48px;
  --space-3xl: 64px;

  /* === Radii — precise, never consumer === */
  --radius-tile:   4px;   --radius-input:  6px;  --radius-card: 8px;
  --radius-figure: 14px;  --radius-pill: 999px;

  /* === Motion === */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;  --dur-base: 240ms;  --dur-slow: 320ms;

  --highlight-inset: inset 0 1px 0 oklch(1 0 0 / 0.14);
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  font: 400 var(--text-base)/1.55 var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

/* shared micro-label — the signature precision element */
.label, .nav-group-label, .eyebrow, .user-role, .conn-path, .feed-when {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--color-ink-3);
}

.muted { color: var(--color-ink-3); }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.error {
  background: var(--color-danger-soft); color: var(--color-danger);
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input);
  margin: var(--space-xs) 0; font-size: var(--text-sm);
}

/* ── brand ───────────────────────────────────────────────────────────── */
.brand {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: 2px 4px var(--space-md); text-decoration: none; color: var(--color-ink);
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-input);
  background: var(--color-accent); box-shadow: var(--highlight-inset); flex: none;
}
.brand-text {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
  line-height: 1.1; letter-spacing: -0.01em;
}
.brand-text span { color: inherit; }  /* wordmark stays ink — blue is for status, not décor */

/* ── layout ──────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

.rail {
  background: var(--color-paper-3);
  border-right: 1px solid var(--color-rule-soft);
  padding: var(--space-md) var(--space-sm);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.rail-nav { flex: 1 1 auto; overflow-y: auto; }
.nav-group { margin-bottom: var(--space-md); }
.nav-group-label { margin: 0 var(--space-xs) var(--space-xs); }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-input);
  color: var(--color-ink-2); text-decoration: none; font-size: var(--text-base);
  border-left: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.nav-mark {  /* 5px bullet dot, per DNA */
  flex: none; width: 5px; height: 5px; border-radius: var(--radius-pill);
  background: var(--color-ink-3);
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-item:hover { background: var(--color-paper-2); color: var(--color-ink); }
.nav-item.active {
  background: var(--color-paper-2); color: var(--color-ink); font-weight: 500;
  border-left-color: var(--color-accent); padding-left: 8px;
}
.nav-item.active .nav-mark { background: var(--color-accent); }

/* rail footer (user + logout) */
.rail-footer { border-top: 1px solid var(--color-rule); padding-top: var(--space-sm); margin-top: var(--space-xs); }
.user { display: flex; align-items: center; gap: 10px; padding: 2px 6px var(--space-sm); }
.avatar {  /* neutral monogram — restraint over colour-coding */
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  color: var(--color-ink-2); font-family: var(--font-display);
  font-size: var(--text-xs); font-weight: 600; flex: none;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.user-name {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-role { margin-top: 1px; }
.btn-logout {
  display: block; text-align: center; padding: 8px 10px; border-radius: var(--radius-input);
  border: 1px solid var(--color-rule); color: var(--color-ink); text-decoration: none;
  font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-logout:hover { background: var(--color-paper-3); border-color: var(--color-ink-2); }

/* ── main / topbar ───────────────────────────────────────────────────── */
.main { padding: var(--space-xl) var(--space-xl); }
.section-head { margin-bottom: var(--space-lg); }
.section-head .eyebrow { display: block; }
.section-head h1 {
  margin: var(--space-xs) 0 var(--space-3xs);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl);
  letter-spacing: -0.025em;
}
.section-head .subtitle { margin: 0; color: var(--color-ink-2); font-size: var(--text-base); }

.subtab-bar { display: flex; gap: var(--space-2xs); border-bottom: 1px solid var(--color-rule); margin-bottom: var(--space-lg); }
.subtab {
  padding: var(--space-xs) var(--space-sm); border-bottom: 2px solid transparent;
  color: var(--color-ink-3); text-decoration: none; cursor: pointer; font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.subtab:hover { color: var(--color-ink); }
.subtab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 500; }
.subtab.disabled { opacity: .55; pointer-events: none; }

/* ── content / placeholder ───────────────────────────────────────────── */
.content {
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: var(--radius-card); padding: var(--space-2xl); min-height: 240px;
}
.placeholder { text-align: center; color: var(--color-ink-3); padding: var(--space-lg); }
.placeholder .label { display: inline-block; margin-bottom: var(--space-sm); color: var(--color-ink-3); }
.placeholder h2 { color: var(--color-ink); font-family: var(--font-display); font-weight: 600; margin: var(--space-xs) 0; }
.placeholder .hint { font-size: var(--text-sm); }

/* furnished agent overview — the scoreboard iframe (isolated full-page render) */
.agent-scoreboard { margin: -8px 0 0; }
.scoreboard-frame {
  width: 100%; border: 0; display: block; border-radius: var(--radius-card);
  background: var(--color-paper); min-height: calc(100vh - 230px);
}

/* full-bleed content: drop the panel chrome so the iframe fills the area */
.content.content--bleed { background: transparent; border: 0; border-radius: 0; padding: 0; min-height: 0; }
.content--bleed .agent-scoreboard { margin: 0; }
.content--bleed .scoreboard-frame { border-radius: 0; min-height: 0; height: calc(100vh - 190px); }

/* ── today (home) — cross-agent activity feed ────────────────────────── */
.today-head { padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.today-head .eyebrow { display: block; }
.today-head h1 {
  margin: var(--space-xs) 0 var(--space-2xs);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl);
  letter-spacing: -0.025em;
}
.today-head .subtitle { margin: 0; color: var(--color-ink-2); font-size: var(--text-md); }

.today-card { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.card-head {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-md);
  padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule);
}
.feed { display: flex; flex-direction: column; }
.feed-row {
  display: grid; grid-template-columns: 64px 30px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--color-rule-soft);
  color: var(--color-ink); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.feed-row:first-child { border-top: 0; }
.feed-row:hover { background: var(--color-paper-3); }
.feed-when { padding-top: 4px; font-variant-numeric: tabular-nums; text-transform: none; }
.feed-avatar {  /* neutral monogram — no per-agent colour */
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-pill);
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  color: var(--color-ink-2); font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xs); margin-top: 1px;
}
.feed-line { line-height: 1.5; }
.feed-agent { font-family: var(--font-display); font-weight: 600; }
.feed-activity { font-weight: 500; color: var(--color-ink); }  /* ink, not accent — blue is reserved */
.feed-detail { color: var(--color-ink-3); font-size: var(--text-sm); margin-top: 3px; line-height: 1.45; }
.feed-empty { padding: var(--space-2xl) 0; text-align: center; }

/* ── status dots & chips (DNA status language) ───────────────────────── */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: var(--radius-pill); vertical-align: middle; }
.dot.active { background: var(--color-status-active); }
.dot.recent { background: var(--color-status-recent); }
.dot.quiet  { background: var(--color-status-quiet); }
.dot.active.pulse { box-shadow: 0 0 0 0 var(--color-accent-glow); animation: dot-pulse 2.4s var(--ease-in-out) infinite; }
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 var(--color-accent-glow); }
  70%  { box-shadow: 0 0 0 6px oklch(0.52 0.16 255 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.52 0.16 255 / 0); }
}

/* ── connections (settings) ──────────────────────────────────────────── */
.settings h2 { margin: 0 0 var(--space-md); font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; }
.conn-row { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule-soft); }
.conn-label { font-family: var(--font-display); font-weight: 600; margin-right: 10px; }
.conn-detail { color: var(--color-ink-2); font-size: var(--text-sm); }
.conn-path { display: block; text-transform: none; margin-top: var(--space-2xs); }
.settings .hint { color: var(--color-ink-3); font-size: var(--text-sm); margin-top: var(--space-md); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--label-size); font-weight: var(--label-weight);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px var(--space-xs); border-radius: var(--radius-tile);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.badge.ok   { background: var(--color-accent-wash); color: var(--color-accent); }   /* online = active blue */
.badge.down { background: var(--color-danger-soft); color: var(--color-danger); }   /* offline = the one red */

/* ── login ───────────────────────────────────────────────────────────── */
.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--color-paper); }
.login-card {
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: var(--radius-card); padding: var(--space-xl); width: 340px;
  display: flex; flex-direction: column;
}
.login-card .brand { padding: 0 0 var(--space-xs); }
.login-card .muted { margin: 0 0 var(--space-md); font-size: var(--text-sm); }
.login-card label { font-size: var(--text-xs); color: var(--color-ink-2); margin-bottom: var(--space-2xs); }
.login-card input {
  padding: 10px; border: 1px solid var(--color-rule); border-radius: var(--radius-input);
  margin-bottom: var(--space-md); font: inherit; background: var(--color-paper);
}
.login-card input:focus-visible { border-color: var(--color-accent); outline: none; }
.login-card button {
  padding: 10px 18px; border: 0; border-radius: var(--radius-input);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
  cursor: pointer; box-shadow: var(--highlight-inset);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.login-card button:hover { background: var(--color-accent-hi); }
.login-card button:active { transform: translateY(1px); }

/* ── chat (Chat tab · C2) ────────────────────────────────────────────── */
/* Hallmark · component: chat room · genre: modern-minimal · theme: Slate & Blue (locked DNA)
 * states: default · hover · focus · active · disabled · loading ("Working…" + the view's
 *         one pulse) · error (danger activity line / .error) · success (silent — the reply)
 * motion: dot-pulse (existing keyframe, one instance) · button press translateY · 150ms hovers
 */
.chat { display: flex; flex-direction: column; height: calc(100vh - 64px); }
.chat-head { padding-bottom: var(--space-md); }
.chat-head-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-2xs); }
.chat-head .eyebrow { display: block; margin-bottom: var(--space-2xs); }
.chat-head-row .eyebrow { margin-bottom: 0; }
.chat-head h1 {
  margin: 0 0 var(--space-2xs); font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xl); letter-spacing: -0.025em;
}
.chat-head .subtitle { margin: 0; color: var(--color-ink-2); font-size: var(--text-md); }

.chat-card {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  background: var(--color-paper-2); border: 1px solid var(--color-rule);
  border-radius: var(--radius-card); overflow: hidden;
}

.chat-offline {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule-soft); background: var(--color-danger-soft);
}
.chat-offline .label { color: var(--color-danger); }
.chat-offline p { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); font-size: var(--text-sm); }

.chat-log { flex: 1 1 auto; overflow-y: auto; padding: var(--space-lg) var(--space-lg) var(--space-md); }
.chat-empty { padding: var(--space-2xl) 0; text-align: center; }
.chat-empty p { margin: var(--space-xs) 0 0; font-size: var(--text-sm); }

.msg { margin-bottom: var(--space-md); }
.msg-owner { display: flex; justify-content: flex-end; }
.msg-owner .msg-body {
  max-width: 72%; background: var(--color-paper-3); border: 1px solid var(--color-rule-soft);
  border-radius: var(--radius-card); padding: var(--space-xs) var(--space-sm);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.msg-agent { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-sm); }
.msg-avatar {  /* the anchor avatar — the ONE accent-tinted monogram (DNA org-chart root) */
  width: 26px; height: 26px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--color-accent-soft); border: 1px solid var(--color-accent-dim);
  color: var(--color-accent); font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xs);
}
.msg-name { font-family: var(--font-display); font-weight: 600; margin-bottom: var(--space-3xs); }
.msg-agent .msg-body { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 640px; }
.msg-agent .msg-body:empty { display: none; }

/* final replies re-render as minimal markdown (chat.js mdRender) */
.msg-body.md { white-space: normal; }
.msg-body.md p { margin: 0 0 var(--space-xs); }
.msg-body.md p:last-child, .msg-body.md ul:last-child, .msg-body.md ol:last-child { margin-bottom: 0; }
.msg-body.md ul, .msg-body.md ol { margin: 0 0 var(--space-xs); padding-left: 20px; }
.msg-body.md li { margin-bottom: var(--space-3xs); }
.msg-body.md code {
  font-family: var(--font-mono); font-size: var(--text-xs);
  background: var(--color-paper-3); padding: 1px 4px; border-radius: var(--radius-tile);
}
.msg-body.md pre {
  margin: 0 0 var(--space-xs); padding: var(--space-sm);
  background: var(--color-paper-3); border: 1px solid var(--color-rule-soft);
  border-radius: var(--radius-input); overflow-x: auto;
}
.msg-body.md pre code { background: transparent; padding: 0; }
.msg-body.md a { color: var(--color-accent); }

.msg-meta {  /* per-turn usage — mono micro-label, tabular digits */
  margin-top: var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--label-size); font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--color-ink-3); font-variant-numeric: tabular-nums;
}
.msg-stopped { margin: var(--space-2xs) 0 0; color: var(--color-ink-3); font-size: var(--text-sm); }

.chat-activity { display: flex; gap: var(--space-xs); align-items: baseline; margin: var(--space-3xs) 0; }
.chat-activity .activity-text { color: var(--color-ink-3); font-size: var(--text-sm); overflow-wrap: anywhere; }
.chat-activity.failed .label { color: var(--color-danger); }

.chat-working { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-2xs); }

.chat-composer {
  display: flex; gap: var(--space-sm); align-items: flex-end;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-rule); background: var(--color-paper-2);
}
.chat-composer textarea {
  flex: 1 1 auto; resize: none; max-height: 132px;
  padding: 10px var(--space-sm); border: 1px solid var(--color-rule);
  border-radius: var(--radius-input); background: var(--color-paper);
  font: inherit; color: var(--color-ink); line-height: 1.45;
}
.chat-composer textarea:focus-visible { border-color: var(--color-accent); outline: none; }
.chat-composer textarea:disabled { background: var(--color-paper-3); color: var(--color-ink-3); }
.btn-send {
  padding: 10px 18px; border: 0; border-radius: var(--radius-input); cursor: pointer;
  background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
  box-shadow: var(--highlight-inset); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-send:hover { background: var(--color-accent-hi); }
.btn-send:active { transform: translateY(1px); }
.btn-send:disabled { background: var(--color-accent-dim); cursor: default; transform: none; }
.btn-send.btn-stop {  /* streaming: the armed interrupt — ghost voice, not danger */
  background: transparent; color: var(--color-ink);
  border: 1px solid var(--color-rule); box-shadow: none;
}
.btn-send.btn-stop:hover { border-color: var(--color-ink-2); background: var(--color-paper-3); }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
  .rail-nav { flex-basis: 100%; order: 3; }
  .rail-footer { flex-basis: 100%; order: 4; border-top: 0; }
  .main { padding: var(--space-md); }
  .chat { height: auto; min-height: 70vh; }
  .msg-owner .msg-body { max-width: 90%; }
}

/* ── reduced motion — stillness, no perf theatre ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
  .dot.active.pulse { box-shadow: 0 0 0 0 var(--color-accent-glow); }
}