/* ============================================================
   AGENT SOLO — Brand & Component Tokens
   Dark first, light derived. One token system.
   Accent direction set via [data-accent], theme via [data-theme]
   ============================================================ */

/* ---------- THEME: DARK (primary) ---------- */
:root,
[data-theme="dark"] {
  --bg-base:    #0a0b0e;
  --bg-raised:  #121419;
  --bg-overlay: #181b22;
  --bg-inset:   #07080a;

  --text-primary:   #f2f4f8;
  --text-secondary: #a7afbc;
  --text-muted:     #7e8694;

  --border-subtle: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);

  --shadow-overlay: 0 18px 48px -12px rgba(0,0,0,0.7);

  /* status — base / surface / text, tuned for dark */
  --success:#3dd68c; --success-surf:rgba(61,214,140,0.12); --success-text:#6ee7ac;
  --warning:#f2b542; --warning-surf:rgba(242,181,66,0.12); --warning-text:#f7c96b;
  --danger: #f2575f; --danger-surf: rgba(242,87,95,0.13);  --danger-text: #ff8088;
  --info:   #4cc2f0; --info-surf:   rgba(76,194,240,0.12); --info-text:   #7ad3f5;
  --queued: #5fb0f0; --queued-surf: rgba(95,176,240,0.12); --queued-text: #8cc6f5;
  --improving:#b58cf0; --improving-surf:rgba(181,140,240,0.13); --improving-text:#c9aaf7;

  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
  --grid-line: rgba(255,255,255,0.05);
}

/* ---------- THEME: LIGHT (derived) ---------- */
[data-theme="light"] {
  --bg-base:    #f4f6f9;
  --bg-raised:  #ffffff;
  --bg-overlay: #ffffff;
  --bg-inset:   #eaedf2;

  --text-primary:   #0d1016;
  --text-secondary: #515a68;
  --text-muted:     #5f6776;

  --border-subtle: rgba(13,20,32,0.09);
  --border-strong: rgba(13,20,32,0.17);

  --shadow-overlay: 0 18px 48px -16px rgba(20,28,45,0.22);

  --success:#15a45f; --success-surf:rgba(21,164,95,0.10); --success-text:#0f7e49;
  --warning:#c8830a; --warning-surf:rgba(200,131,10,0.12); --warning-text:#9a6605;
  --danger: #d6353e; --danger-surf: rgba(214,53,62,0.10);  --danger-text: #b21e26;
  --info:   #1387c0; --info-surf:   rgba(19,135,192,0.10); --info-text:   #0f6c9c;
  --queued: #2a7fc4; --queued-surf: rgba(42,127,196,0.10); --queued-text: #1f659e;
  --improving:#7e4fd6; --improving-surf:rgba(126,79,214,0.10); --improving-text:#6336b8;

  --grid-line: rgba(13,20,32,0.06);
}

/* ============================================================
   ACCENT DIRECTIONS — share chroma/lightness discipline,
   vary hue. accent-contrast is the text color used ON accent.
   ============================================================ */

/* A — SIGNAL (teal, evolves the live product) */
[data-accent="signal"] {
  --accent:        oklch(0.78 0.13 188);
  --accent-hover:  oklch(0.84 0.13 188);
  --accent-press:  oklch(0.71 0.12 188);
  --accent-contrast:#04181a;
  --accent-surf:   oklch(0.78 0.13 188 / 0.13);
  --accent-border: oklch(0.78 0.13 188 / 0.38);
  --accent-glow:   oklch(0.78 0.13 188 / 0.32);
}
[data-theme="light"][data-accent="signal"] {
  --accent:        oklch(0.62 0.12 192);
  --accent-hover:  oklch(0.56 0.12 192);
  --accent-press:  oklch(0.50 0.11 192);
  --accent-contrast:#ffffff;
  --accent-surf:   oklch(0.62 0.12 192 / 0.12);
  --accent-border: oklch(0.62 0.12 192 / 0.42);
}

/* B — IRIS (premium indigo / violet) */
[data-accent="iris"] {
  --accent:        oklch(0.68 0.17 285);
  --accent-hover:  oklch(0.74 0.17 285);
  --accent-press:  oklch(0.62 0.16 285);
  --accent-contrast:#0c0820;
  --accent-surf:   oklch(0.68 0.17 285 / 0.15);
  --accent-border: oklch(0.68 0.17 285 / 0.42);
  --accent-glow:   oklch(0.68 0.17 285 / 0.38);
}
[data-theme="light"][data-accent="iris"] {
  --accent:        oklch(0.55 0.19 285);
  --accent-hover:  oklch(0.49 0.18 285);
  --accent-press:  oklch(0.44 0.17 285);
  --accent-contrast:#ffffff;
  --accent-surf:   oklch(0.55 0.19 285 / 0.12);
  --accent-border: oklch(0.55 0.19 285 / 0.42);
}

/* C — VOLT (electric blue) */
[data-accent="volt"] {
  --accent:        oklch(0.70 0.16 248);
  --accent-hover:  oklch(0.76 0.16 248);
  --accent-press:  oklch(0.64 0.15 248);
  --accent-contrast:#04101f;
  --accent-surf:   oklch(0.70 0.16 248 / 0.14);
  --accent-border: oklch(0.70 0.16 248 / 0.42);
  --accent-glow:   oklch(0.70 0.16 248 / 0.36);
}
[data-theme="light"][data-accent="volt"] {
  --accent:        oklch(0.55 0.18 252);
  --accent-hover:  oklch(0.49 0.17 252);
  --accent-press:  oklch(0.44 0.16 252);
  --accent-contrast:#ffffff;
  --accent-surf:   oklch(0.55 0.18 252 / 0.12);
  --accent-border: oklch(0.55 0.18 252 / 0.42);
}

/* ============================================================
   BASE / TYPOGRAPHY
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: "Space Grotesk", sans-serif; }
.font-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-feature-settings: normal; }
.tnum { font-variant-numeric: tabular-nums; }

h1,h2,h3,h4 { font-family: "Space Grotesk", sans-serif; font-weight: 600; margin: 0; line-height: 1.12; letter-spacing: -0.01em; }

.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
}

a { color: var(--accent); text-decoration: none; }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}
.inset {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

/* buttons */
.btn {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, transform .05s, color .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: var(--bg-overlay); color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--accent-border); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-overlay); color: var(--text-primary); }
.btn-danger { background: var(--danger-surf); color: var(--danger-text); border-color: color-mix(in oklab, var(--danger) 40%, transparent); }
.btn-danger:hover { background: color-mix(in oklab, var(--danger) 22%, transparent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; }

/* badges / status pills */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent; line-height: 1.4; white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-success  { background: var(--success-surf);  color: var(--success-text); }
.badge-warning  { background: var(--warning-surf);  color: var(--warning-text); }
.badge-danger   { background: var(--danger-surf);   color: var(--danger-text); }
.badge-info     { background: var(--info-surf);     color: var(--info-text); }
.badge-queued   { background: var(--queued-surf);   color: var(--queued-text); }
.badge-improving{ background: var(--improving-surf);color: var(--improving-text); }
.badge-neutral  { background: var(--bg-overlay); color: var(--text-secondary); border-color: var(--border-subtle); }
.badge-accent   { background: var(--accent-surf); color: var(--accent); }

/* grade chip */
.grade {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.grade-a { background: var(--success-surf); color: var(--success-text); }
.grade-b { background: var(--info-surf); color: var(--info-text); }
.grade-c { background: var(--warning-surf); color: var(--warning-text); }

/* progress */
.track { height: 6px; border-radius: 999px; background: var(--bg-overlay); overflow: hidden; }
.track > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

/* toggle */
.toggle {
  --w: 38px; width: var(--w); height: 22px; border-radius: 999px;
  background: var(--bg-overlay); border: 1px solid var(--border-strong);
  position: relative; cursor: pointer; transition: background .18s, border-color .18s; flex: none;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--text-secondary); transition: transform .18s, background .18s;
}
.toggle[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.toggle[aria-checked="true"]::after { transform: translateX(16px); background: var(--accent-contrast); }

/* segmented control */
.seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px;
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
}
.seg button {
  font-family: "Hanken Grotesk", sans-serif; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); background: transparent; border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: 7px; transition: background .15s, color .15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.seg button[aria-pressed="true"] { background: var(--bg-overlay); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }

/* swatch */
.swatch { height: 56px; border-radius: 10px; border: 1px solid var(--border-subtle); }
.token-row { display:flex; align-items:center; gap: 10px; font-size: 13px; }
.token-row .chip { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border-subtle); flex:none; }
.mono-label { font-family:"JetBrains Mono",monospace; font-size:12px; color: var(--text-muted); }

/* ============================================================
   GLOBAL FOCUS-VISIBLE (accessibility) — one ring, both themes
   ============================================================ */
:where(a, button, input, select, textarea, [role="switch"], [role="tab"],
       [role="menuitem"], [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 8px;
}
.btn:focus-visible, .toggle:focus-visible { box-shadow: var(--focus-ring); }

/* ============================================================
   FORM INPUTS
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.field .hint { font-size: 12px; color: var(--text-muted); }
.input, .select, .textarea {
  font-family: "Hanken Grotesk", sans-serif; font-size: 14px; color: var(--text-primary);
  background: var(--bg-inset); border: 1px solid var(--border-strong);
  border-radius: 9px; padding: 10px 12px; width: 100%; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-surf);
}
.textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
  linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.searchbox { position: relative; }
.searchbox svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.searchbox .input { padding-left: 36px; }

.check { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong);
  background: var(--bg-inset); display: grid; place-items: center; flex: none; transition: background .15s, border-color .15s; }
.check .box svg { opacity: 0; stroke: var(--accent-contrast); }
.check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .box svg { opacity: 1; }
.check input:focus-visible + .box { box-shadow: var(--focus-ring); }
.check.radio .box { border-radius: 50%; }
.check.radio input:checked + .box { background: var(--bg-inset); border-color: var(--accent); }
.check.radio .box::after { content:""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .15s; }
.check.radio input:checked + .box::after { transform: scale(1); }

/* ============================================================
   TABS
   ============================================================ */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-subtle); }
.tabs [role="tab"] {
  border: 0; background: none; font-family: "Hanken Grotesk", sans-serif; font-size: 14px; font-weight: 600;
  color: var(--text-secondary); padding: 11px 14px; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s, border-color .15s; display: inline-flex; align-items: center; gap: 7px;
}
.tabs [role="tab"]:hover { color: var(--text-primary); }
.tabs [role="tab"][aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--accent); }

/* ============================================================
   OVERLAYS — menu, modal, toast
   ============================================================ */
.menu {
  background: var(--bg-overlay); border: 1px solid var(--border-strong); border-radius: 11px;
  padding: 6px; box-shadow: var(--shadow-overlay); min-width: 210px;
}
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; background: none; border: 0;
  color: var(--text-primary); font-family: "Hanken Grotesk", sans-serif; font-size: 13.5px; font-weight: 500;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; text-align: left; }
.menu button:hover { background: var(--bg-inset); }
.menu button .sc { margin-left: auto; font-family: "JetBrains Mono"; font-size: 11px; color: var(--text-muted); }
.menu button.danger { color: var(--danger-text); }
.menu .sep { height: 1px; background: var(--border-subtle); margin: 6px 4px; }

.scrim { position: absolute; inset: 0; background: rgba(2,4,8,0.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; border-radius: 16px; }
.modal { background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: var(--shadow-overlay); width: min(420px, 90%); padding: 24px; }
.modal h3 { font-size: 19px; margin-bottom: 8px; }

.toast { display: flex; align-items: center; gap: 13px; background: var(--bg-overlay);
  border: 1px solid var(--border-strong); border-radius: 11px; padding: 12px 14px;
  box-shadow: var(--shadow-overlay); max-width: 420px; }
.toast .tic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }

/* ============================================================
   LOADERS — skeleton, spinner, dots, indeterminate bar
   ============================================================ */
.skel { position: relative; overflow: hidden; background: var(--bg-overlay); border-radius: 7px; }
.skel::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text-muted) 22%, transparent), transparent);
  transform: translateX(-100%); animation: asShimmer 1.5s ease-in-out infinite; }
.skel-line { height: 11px; border-radius: 5px; }
@keyframes asShimmer { 100% { transform: translateX(100%); } }

.dots { display: inline-flex; gap: 5px; align-items: center; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: asBounce 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes asBounce { 0%,80%,100% { transform: scale(0.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* orbit loader — the Agent Solo mark in motion: satellite circling the core */
.as-orbit { --orbit-size: 44px; position: relative; width: var(--orbit-size); height: var(--orbit-size); flex: none; color: var(--accent); display: inline-block; perspective: calc(var(--orbit-size) * 2.6); }
.as-orbit .ring,
.as-orbit .spin { position: absolute; inset: 6%; border-radius: 50%; transform-style: preserve-3d; }
.as-orbit .ring { border: 1.5px solid color-mix(in oklab, currentColor 34%, transparent); animation: asRingTurn 3s linear infinite; }
.as-orbit .core { z-index: 2; }
.as-orbit .core { position: absolute; top: 50%; left: 50%; width: 26%; height: 26%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in oklab, currentColor 45%, #fff), currentColor 62%); box-shadow: 0 0 7px color-mix(in oklab, currentColor 45%, transparent); }
.as-orbit .spin { border-color: transparent; animation: asElec 3s linear infinite; }
.as-orbit .spin .sat { position: absolute; top: 50%; left: 100%; width: calc(var(--orbit-size) * 0.16); height: calc(var(--orbit-size) * 0.16); transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in oklab, currentColor 42%, #fff), currentColor 62%);
  box-shadow: 0 0 8px color-mix(in oklab, currentColor 60%, transparent); animation: asBill 3s linear infinite; }
@keyframes asRingTurn { from { transform: rotateZ(0deg) rotateX(64deg); } to { transform: rotateZ(360deg) rotateX(64deg); } }
@keyframes asElec { from { transform: rotateZ(0deg) rotateX(64deg) rotateZ(0deg); } to { transform: rotateZ(360deg) rotateX(64deg) rotateZ(360deg); } }
@keyframes asBill { from { transform: translate(-50%,-50%) rotateZ(0deg) rotateX(-64deg) rotateZ(0deg); } to { transform: translate(-50%,-50%) rotateZ(-360deg) rotateX(-64deg) rotateZ(-360deg); } }
@media (prefers-reduced-motion: reduce) { .as-orbit .ring { animation: none; transform: rotateZ(25deg) rotateX(64deg); } .as-orbit .spin { animation: none; } .as-orbit .spin .sat { animation: none; transform: translate(-50%,-50%) rotateX(-64deg); } }

.track.indet { position: relative; overflow: hidden; }
.track.indet > i { position: absolute; left: 0; width: 38%; animation: asIndet 1.4s ease-in-out infinite; }
@keyframes asIndet { 0% { left: -38%; } 100% { left: 100%; } }

/* empty state */
.empty { text-align: center; padding: 42px 24px; }
.empty .e-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: var(--bg-overlay); border: 1px solid var(--border-subtle); margin: 0 auto 16px; color: var(--text-muted); }
.empty h3 { font-size: 17px; margin-bottom: 7px; }
.empty p { color: var(--text-muted); font-size: 13.5px; max-width: 340px; margin: 0 auto 18px; }

/* keyframes for the agents-working pulse */
@keyframes asPulse { 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
@keyframes asSweep { 0%{ transform: translateX(-100%) } 100%{ transform: translateX(100%) } }
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; } }