/* ==========================================================================
   turnstone — shared design system ("Instrument Panel" aesthetic)
   Deep charcoal surfaces, warm amber indicators, precision typography
   ========================================================================== */

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

:root {
  /* Surface palette — neutral charcoal aligned with the --panel /
     --panel-2 family below (was blue-tinted #0b0f19 / #111827 / #1c2333 /
     #1f2a3d before the unification). */
  --bg: #0e1013;
  --bg-surface: #15181c;
  --bg-highlight: #1a1e23;
  --bg-elevated: #1f2429;

  /* Text hierarchy */
  --fg: #d1d5e4;
  --fg-dim: #8a93ad;
  --fg-bright: #e8ecf4;

  /* Accent — warm amber (the signature color) */
  --accent: #e5a042;
  --accent-dim: rgba(229, 160, 66, 0.15);
  --accent-glow: rgba(229, 160, 66, 0.08);
  /* Far stop of the rail's brand-mark gradient: a step below the accent
     here, a step above it in the light theme, so the mark keeps the same
     shading depth on both. */
  --brand-mark-end: #b9762a;

  /* Semantic indicators */
  --green: #34d399;
  --red: #f87171;
  --yellow: #fbbf24;
  --cyan: #67e8f9;
  --magenta: #c084fc;
  --blue: #38bdf8;
  --on-color: var(--bg);

  /* Channel-platform accents — kept distinct from --magenta (generic
     channel) and from each other so per-platform badges read at a glance.
     Light-theme variants live in [data-theme="light"] below. */
  --discord: #818cf8;
  --slack: #f472b6;

  /* Glow variants for LED effects */
  --green-glow: rgba(52, 211, 153, 0.25);
  --red-glow: rgba(248, 113, 113, 0.25);
  --yellow-glow: rgba(251, 191, 36, 0.25);
  --accent-glow-strong: rgba(229, 160, 66, 0.3);
  --cyan-glow: rgba(103, 232, 249, 0.2);
  --magenta-glow: rgba(192, 132, 252, 0.25);
  --blue-glow: rgba(56, 189, 248, 0.25);
  --discord-glow: rgba(129, 140, 248, 0.3);
  --slack-glow: rgba(244, 114, 182, 0.3);

  /* Structure */
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);
  --code-bg: #0a0c0f;
  --radius: 6px;
  --radius-sm: 3px;
  --dash-grid: 72px 120px 90px 100px 1fr 60px 48px;
  --row-alt: rgba(255, 255, 255, 0.01);

  /* Typography — Inter for UI, JetBrains Mono for code. */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:
    "JetBrains Mono", "SF Mono", "IBM Plex Mono", Consolas, monospace;

  /* ========================================================================
     Design-system tokens — semantic palette + shape + rhythm.  These
     coexist with the legacy --bg / --fg / --accent / --green / --red
     family above; new code uses these names, the admin dashboard still
     uses the legacy names.  Dark values are the :root default to match
     the legacy "dark is default, light is conditional" convention.

     Hue map:
       --accent   75   (amber/gold, brand)
       --ok       150  (green; approve / success / liveness)
       --warn     80   (gold; attention / k-tools / risk-med)
       --err      25   (red; deny / errors / risk-high / risk-crit)
       --think    260  (indigo; thinking / judge)

     Hard rules (do not drift):
       - color-mix always uses `in srgb`, never `oklch`/`oklab`
       - --warn stays ≤88; 90-130 is the yellow-green "puke" band
       - --ok hue stays ≥145; below tips toward teal in dark
       - approve UI uses the --ok family (green), NOT --warn
     ======================================================================== */
  --accent-h: 75;

  /* Neutrals — dark default. */
  --panel: #15181c;
  --panel-2: #1a1e23;
  --ink: #f2f3f5;
  --ink-2: #d4d7db;
  --ink-3: #a6abb3;
  --ink-4: #808690;
  --hair: #2a2e35;
  --hair-2: #333842;

  /* Semantic palette — dark default.  Unified L+C so ok/warn/err/think
     feel like siblings; hue is the only discriminator. */
  --accent-soft: oklch(0.29 0.07 var(--accent-h));
  --ok: oklch(0.68 0.15 150);
  --ok-live: oklch(0.78 0.2 150); /* brighter — running / liveness */
  --ok-soft: oklch(0.29 0.07 150);
  --ok-text: oklch(0.86 0.18 150); /* bright mint on dark ok-soft */
  --warn: oklch(0.7 0.13 80);
  --warn-soft: oklch(0.29 0.07 80);
  --warn-tint: oklch(0.22 0.05 80);
  --warn-tint-border: oklch(0.58 0.15 80);
  /* Ink for text ON --warn-tint (the rail badge, the status-bar approval
     chip).  Equals --warn here (6.4:1 on the dark tint) but is a separate
     token, written out, so a retune of --warn can't drag chip ink with it;
     in light, --warn itself is only 3.3:1 on the pale tint. */
  --warn-text: oklch(0.7 0.13 80);
  --err: oklch(0.68 0.17 25);
  --err-soft: oklch(0.29 0.07 25);
  --err-fill: oklch(0.56 0.17 25); /* darker filled red for .risk.crit */
  --think: oklch(0.68 0.15 260);
  --think-soft: oklch(0.29 0.07 260);

  /* Shape */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --shadow-sm: 0 1px 0 rgba(21, 24, 27, 0.03), 0 1px 2px rgba(21, 24, 27, 0.04);
}

[data-theme="light"] {
  --bg: #f7f7f4;
  --bg-surface: #ffffff;
  --bg-highlight: #f0efe9;
  --bg-elevated: #fbfbf8;
  --fg: #1e293b;
  --fg-dim: #576275;
  --fg-bright: #0f172a;
  /* The indicator hues run one step darker than the first light cut: text
     in a hue over a 15% tint of the same hue — the launcher's active kind
     at 12px, the skill shelf's origin badge at 9px — has to clear the
     4.5:1 text ratio on --bg and --panel, and the first cut landed
     between 3.8 and 4.7 with seven of the nine under 4.5.  Amber, cyan
     and blue moved first; the rest followed so the family stays one tier.  The amber keeps the brand's saturation at the
     lower lightness but sits at hue 40 rather than 35 so it still reads
     gold at that depth instead of brown.  Each hue carries its triplet
     into its rgba glow sibling below. */
  --accent: #745415;
  --accent-dim: rgba(116, 84, 21, 0.1);
  --accent-glow: rgba(116, 84, 21, 0.05);
  --brand-mark-end: #9f731d;
  --green: #065f46;
  --red: #991b1b;
  --yellow: #92400e;
  --cyan: #155e75;
  --magenta: #6d28d9;
  --blue: #075985;
  --discord: #4338ca; /* darker indigo on white surface — passes WCAG AA */
  --slack: #9d174d; /* darker rose */
  --on-color: #ffffff;
  --green-glow: rgba(6, 95, 70, 0.25);
  --red-glow: rgba(153, 27, 27, 0.25);
  /* 0.2, not the 0.25 of its siblings: --yellow text sits on this glow
     (.dash-persistence-badge, .policy-ask) and clears 4.5:1 only below
     0.25. */
  --yellow-glow: rgba(146, 64, 14, 0.2);
  --accent-glow-strong: rgba(116, 84, 21, 0.15);
  --cyan-glow: rgba(21, 94, 117, 0.2);
  --magenta-glow: rgba(109, 40, 217, 0.2);
  --blue-glow: rgba(7, 89, 133, 0.2);
  --discord-glow: rgba(67, 56, 202, 0.2);
  --slack-glow: rgba(157, 23, 77, 0.2);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.12);
  --code-bg: #f0f1f5;
  --row-alt: rgba(0, 0, 0, 0.015);

  /* Design-system tokens — light overrides */
  --panel: #ffffff;
  --panel-2: #fbfbf8;
  --ink: #101316;
  --ink-2: #2d3238;
  --ink-3: #565b63;
  --ink-4: #7a7f87;
  --hair: #dcdbd4;
  --hair-2: #e7e5dc;
  --accent-soft: oklch(0.94 0.05 var(--accent-h));
  --ok: oklch(0.5 0.15 150);
  --ok-live: oklch(0.58 0.19 150);
  --ok-soft: oklch(0.94 0.05 150);
  --ok-text: oklch(0.36 0.15 150); /* dark forest on pale ok-soft */
  --warn: oklch(0.58 0.13 80);
  --warn-soft: oklch(0.94 0.05 80);
  --warn-tint: oklch(0.92 0.1 80);
  --warn-tint-border: oklch(0.64 0.15 80);
  --warn-text: oklch(0.44 0.13 80); /* dark amber on pale warn-tint: 6.0:1 */
  --err: oklch(0.5 0.17 25);
  --err-soft: oklch(0.94 0.05 25);
  --err-fill: oklch(0.45 0.17 25);
  --think: oklch(0.5 0.15 260);
  --think-soft: oklch(0.94 0.05 260);
}

html,
body {
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code,
pre,
kbd {
  font-family: var(--font-mono);
  font-feature-settings: "zero", "ss01";
}
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Subtle warm vignette — amber on top-left, faded amber on
     bottom-right.  Original second gradient used cyan (#67e8f9) which
     read as a blue tint over the formerly-blue bg; on the unified
     neutral charcoal palette, amber on both ends keeps the brand
     family without reintroducing blue. */
  background-image:
    radial-gradient(
      ellipse at 20% 0%,
      rgba(229, 160, 66, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 100%,
      rgba(229, 160, 66, 0.015) 0%,
      transparent 50%
    );
}

/* ==========================================================================
   Header — base styles (page-specific CSS may override padding/gap)
   ========================================================================== */
#header {
  padding: 10px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}
#header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-dim),
    transparent
  );
}
#header h1 {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.header-btn {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--fg-dim);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  letter-spacing: 0.02em;
}
.header-btn:hover {
  background: var(--bg-highlight);
  color: var(--fg-bright);
  border-color: var(--accent-dim);
}

/* ==========================================================================
   Dashboard table — shared between server and console
   ========================================================================== */
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--code-bg);
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
}
.dash-header-title {
  font-family: var(--font-ui);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.dash-header-summary {
  color: var(--fg-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Footer bar — the bottom counterpart to .dash-header.  Shared so the
   server's Workstreams card and the console's active-Coordinators card read
   the same; per-surface spacing (e.g. the server's bottom margin) is layered
   on in each app's stylesheet. */
.dash-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: var(--code-bg);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 11px;
  color: var(--fg-dim);
}
.dash-footer-count {
  font-variant-numeric: tabular-nums;
}

.dash-colheaders {
  display: grid;
  grid-template-columns: var(--dash-grid);
  padding: 6px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-strong);
  font-size: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: sticky;
  top: 0;
  z-index: 10;
}
.dash-col-tokens,
.dash-col-ctx {
  text-align: right;
}

.dash-table {
  min-height: 40px;
}
.dash-row {
  position: relative;
  border-left: 3px solid transparent;
  cursor: default;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.dash-row:nth-child(odd) {
  background: var(--bg);
}
.dash-row:nth-child(even) {
  background: var(--row-alt);
}
.dash-row:hover {
  background: var(--bg-highlight);
  box-shadow: inset 0 0 0 1px var(--border);
}
.dash-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.dash-row[data-state="running"] {
  border-left-color: var(--green);
}
.dash-row[data-state="thinking"] {
  border-left-color: var(--cyan);
}
.dash-row[data-state="attention"] {
  border-left-color: var(--yellow);
}
.dash-row[data-state="idle"] {
  border-left-color: var(--fg-dim);
  opacity: 0.6;
}
.dash-row[data-state="error"] {
  border-left-color: var(--red);
}
.dash-row-main {
  display: grid;
  grid-template-columns: var(--dash-grid);
  padding: 9px 16px 3px;
  align-items: center;
  font-size: 12px;
}
.dash-row-sub {
  padding: 0 16px 8px 88px;
  font-size: 11px;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-row-sub.sub-attention {
  color: var(--yellow);
}

/* State dots with LED glow */
.dash-cell-state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.dash-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-state-dot[data-state="running"] {
  background: var(--green);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--green-glow);
  animation: pulse 2s infinite;
  will-change: opacity;
}
.dash-state-dot[data-state="thinking"] {
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan-glow);
  animation: pulse 2.2s infinite;
  will-change: opacity;
}
.dash-state-dot[data-state="attention"] {
  background: var(--yellow);
  border-radius: 1px;
  transform: rotate(45deg);
  box-shadow: 0 0 6px var(--yellow-glow);
  animation: pulse 1.8s infinite;
  will-change: opacity;
}
.dash-state-dot[data-state="idle"] {
  background: var(--fg-dim);
  opacity: 0.4;
}
.dash-state-dot[data-state="error"] {
  background: var(--red);
  border-radius: 0;
  box-shadow: 0 0 6px var(--red-glow);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.dash-state-label {
  white-space: nowrap;
  font-weight: 500;
}
.dash-state-label[data-state="running"] {
  color: var(--green);
}
.dash-state-label[data-state="thinking"] {
  color: var(--cyan);
}
.dash-state-label[data-state="attention"] {
  color: var(--yellow);
}
.dash-state-label[data-state="idle"] {
  color: var(--fg-dim);
}
.dash-state-label[data-state="error"] {
  color: var(--red);
}

.dash-cell-name {
  font-weight: 500;
  color: var(--fg-bright);
  /* Flex so the name truncates in its own element while trailing markers
     (child-count, orphan, project) stay visible — a fixed-width cell with the
     markers appended to a nowrap name would clip them off the right edge. */
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.dash-cell-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-cell-name > :not(.dash-cell-name-text) {
  flex: none; /* markers never shrink; the name yields */
}
.dash-row[data-state="idle"] .dash-cell-name {
  color: var(--fg-dim);
}
/* Project marker inside the name cell (the dash grid is fixed-width, so the
   project rides with the name rather than taking a 7th column).  A glyph-only
   amber ▣ — compact for a dense row, name in title/aria-label; the rail group +
   composer chip carry the full name.  Colour + glyph (chip-contrast rule). */
.dash-project-pill {
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
}

.dash-persistence-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border: 1px solid var(--yellow);
  border-radius: 2px;
  background: var(--yellow-glow);
  color: var(--yellow);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.dash-persistence-badge[data-state="conflict"] {
  border-color: var(--red);
  background: var(--red-glow);
  color: var(--red);
}

/* Inline "create a project" widget (project_creator.js) — a name input + Save +
   Cancel that replaces the native prompt across every "+ New project…" picker.
   grid-column lets it span both columns when mounted inside the composer's
   2-col options grid; ignored on the standalone (non-grid) surfaces. */
.project-creator {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  grid-column: 1 / -1;
}
.project-creator[hidden] {
  /* the class display:flex would otherwise outweigh the UA [hidden] rule */
  display: none;
}
.project-creator-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
}
.project-creator-input:focus {
  outline: none;
  border-color: var(--accent);
}
.project-creator-save,
.project-creator-cancel {
  flex: none;
  border-radius: var(--r-sm, 4px);
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.project-creator-save {
  background: var(--accent);
  /* var(--bg) flips per theme like .sh-btn--primary: dark text on the bright
     dark-theme amber, light text on the darker light-theme amber. */
  color: var(--bg);
  border: 1px solid var(--accent);
  font-weight: 600;
}
.project-creator-save:disabled {
  opacity: 0.6;
  cursor: default;
}
.project-creator-cancel {
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--border);
}
.project-creator-error {
  flex-basis: 100%;
  color: var(--red);
  font-size: 11px;
}
.project-creator-error[hidden] {
  display: none;
}
.dash-cell-model {
  color: var(--fg-dim);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dash-cell-node {
  color: var(--fg-dim);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-cell-task {
  color: var(--fg-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-row[data-state="idle"] .dash-cell-task {
  color: var(--fg-dim);
}
.dash-cell-tokens {
  text-align: right;
  color: var(--fg-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.dash-cell-ctx {
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.dash-cell-ctx.ctx-low {
  color: var(--green);
}
.dash-cell-ctx.ctx-mid {
  color: var(--yellow);
}
.dash-cell-ctx.ctx-high {
  color: var(--red);
}
.dash-cell-ctx.ctx-danger {
  color: var(--red);
  font-weight: 600;
}
.dash-cell-ctx.ctx-idle {
  color: var(--fg-dim);
}

/* ==========================================================================
   Scrollbar — thin, minimal
   ========================================================================== */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fg-dim);
}

/* ==========================================================================
   Focus indicators
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Screen reader utility
   ========================================================================== */
.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;
}

/* ==========================================================================
   Login overlay
   ========================================================================== */
#login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
#login-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 36px;
  width: 340px;
  max-width: 90vw;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 48px -12px rgba(0, 0, 0, 0.5),
    0 0 80px -20px var(--accent-dim);
  position: relative;
}
#login-box::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 1px;
}
#login-box > h2 {
  font-family: var(--font-ui);
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#login-box input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  margin-bottom: 14px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
#login-box input:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
}
#login-box input::placeholder {
  color: var(--fg-dim);
  opacity: 0.6;
}
#login-submit {
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
  letter-spacing: 0.02em;
}
#login-submit:hover {
  filter: brightness(1.1);
}
#login-submit:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
#login-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
}
.login-subtitle {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--fg-dim);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
  min-height: 14px;
}
.login-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-bottom: 5px;
}
.login-toggle {
  text-align: center;
  margin-top: 14px;
}
.login-link {
  background: none;
  border: none;
  color: var(--fg-dim);
  font-family: var(--font-ui);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 8px;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.login-link:hover {
  color: var(--accent);
}
.login-link:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
#login-error {
  color: var(--red);
  font-size: 12px;
  margin-bottom: 8px;
  display: none;
}
@media (max-width: 380px) {
  #login-box {
    padding: 28px 20px;
  }
}

/* OIDC / SSO */
.oidc-btn {
  width: 100%;
  padding: 11px;
  background: var(--bg-highlight);
  color: var(--fg-bright);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
  letter-spacing: 0.02em;
}
.oidc-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--accent);
}
.oidc-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.oidc-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.oidc-divider {
  display: flex;
  align-items: center;
  margin: 16px 0;
  gap: 12px;
}
.oidc-divider::before,
.oidc-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}
.oidc-divider span {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   Keyboard shortcuts overlay
   ========================================================================== */
#kb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
#kb-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 28px;
  width: 360px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
}
#kb-box h2 {
  font-family: var(--font-ui);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kb-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12px;
}
.kb-key {
  color: var(--fg-bright);
  background: var(--bg-highlight);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}
.kb-desc {
  color: var(--fg-dim);
  font-family: var(--font-ui);
}
.kb-section {
  font-family: var(--font-ui);
  color: var(--fg-dim);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 14px;
  margin-bottom: 6px;
}
.kb-section:first-child {
  margin-top: 0;
}
#kb-box .kb-hint {
  color: var(--fg-dim);
  font-size: 11px;
  text-align: center;
  margin-top: 16px;
  font-family: var(--font-ui);
}

/* ==========================================================================
   Toast notification
   ========================================================================== */
#toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-elevated, var(--bg-surface));
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 12px;
  font-family: var(--font-mono);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
#toast.toast-error {
  border-color: var(--red, #c44);
  color: var(--red, #c44);
}
#toast.toast-warn {
  border-color: var(--yellow, #cc8f2e);
  color: var(--yellow, #cc8f2e);
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.dashboard-empty {
  color: var(--fg-dim);
  font-size: 12px;
  padding: 24px 0;
  text-align: center;
  font-family: var(--font-ui);
  font-style: italic;
  opacity: 0.7;
}

/* ==========================================================================
   Reduced motion — base rules
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html,
  body {
    transition: none;
  }
  .dash-state-dot[data-state="running"],
  .dash-state-dot[data-state="thinking"],
  .dash-state-dot[data-state="attention"] {
    animation: none;
    opacity: 1;
  }
  .dash-row,
  .header-btn,
  #toast {
    transition: none;
  }
  #login-box input,
  #login-box button {
    transition: none;
  }
}