/* CounterAgent design tokens and shared components. Dark is the default; T toggles. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0A0A0A; --surface-1:#121212; --surface-2:#1A1A1A; --surface-3:#262626;
  --line:#2B2B2B; --line-strong:#474747;
  --text:#F5F5F5; --text-2:#B3B3B3; --text-3:#858585; --text-4:#5C5C5C;
  --hover:rgba(255,255,255,.08); --press:rgba(255,255,255,.12);
  --overlay:rgba(18,18,18,.92); --scrim:rgba(10,10,10,.86);
  --shadow-md:0 8px 24px rgba(0,0,0,.50); --shadow-lg:0 24px 64px rgba(0,0,0,.60);
  --focus:0 0 0 2px #0A0A0A, 0 0 0 4px #F5F5F5;
  --red:#FF5A5F; --red-bg:rgba(255,90,95,.14); --red-line:rgba(255,90,95,.55);
  --green:#3DD68C; --green-bg:rgba(61,214,140,.14); --green-line:rgba(61,214,140,.55);
  --amber:#F5A524; --amber-bg:rgba(245,165,36,.14); --amber-line:rgba(245,165,36,.55);
  --on-red:#FFFFFF; --on-status:#0A0A0A;
  --green-text:#3DD68C; --amber-text:#F5A524; --stage-bg:#0A0A0A; --g-dim:.12; --g-dim-edge:.08;
  --chart-human:#8C8C8C; --chart-agent:#F5F5F5; --chart-grid:#2E2E2E; --chart-band:rgba(255,255,255,.06); --chart-knockout:#121212;
  --g-frontier:#F5F5F5; --g-open:#8F8F8F; --g-screen:#0A0A0A;
  --g-company:#111111; --g-company-line:#3A3A3A; --g-company-label:#F5F5F5; --g-label:#D4D4D4;
  --g-reports:#4A4A4A; --g-msg:#5E5E5E; --g-chan:#707070; --g-flash:#FFFFFF;
  --g-packet:#F5F5F5; --g-packet-text:#0A0A0A; --g-select:#FFFFFF; --g-dot:#BDBDBD;
  --paper:#FFFFFF; --paper-text:#0A0A0A; --paper-text-2:#525252; --paper-line:#EBEBEB; --paper-border:#D4D4D4; --paper-green:#15803D; --paper-amber:#B45309;
  --paper-shadow:0 24px 64px rgba(0,0,0,.55);
  --ease-out:cubic-bezier(.2,0,0,1); --ease-in-out:cubic-bezier(.4,0,.2,1); --ease-stamp:cubic-bezier(.3,1.35,.5,1);
}
:root { --race-l:56px; --race-r:120px; }
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#FFFFFF; --surface-1:#F7F7F7; --surface-2:#FFFFFF; --surface-3:#EDEDED;
  --line:#E5E5E5; --line-strong:#BDBDBD;
  --text:#0A0A0A; --text-2:#474747; --text-3:#6B6B6B; --text-4:#A3A3A3;
  --hover:rgba(0,0,0,.05); --press:rgba(0,0,0,.08);
  --overlay:rgba(255,255,255,.94); --scrim:rgba(255,255,255,.90);
  --shadow-md:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08); --shadow-lg:0 24px 64px rgba(0,0,0,.16);
  --focus:0 0 0 2px #FFFFFF, 0 0 0 4px #0A0A0A;
  --red:#DC2626; --red-bg:rgba(220,38,38,.08); --red-line:rgba(220,38,38,.45);
  --green:#16A34A; --green-bg:rgba(22,163,74,.09); --green-line:rgba(22,163,74,.40);
  --amber:#F59E0B; --amber-bg:rgba(245,158,11,.12); --amber-line:rgba(217,119,6,.45);
  --green-text:#15803D; --amber-text:#B45309; --stage-bg:#F3F3F3; --g-dim:.3; --g-dim-edge:.18;
  --on-red:#FFFFFF; --on-status:#FFFFFF;
  --chart-human:#8A8A8A; --chart-agent:#0A0A0A; --chart-grid:#E3E3E3; --chart-band:rgba(0,0,0,.045); --chart-knockout:#F7F7F7;
  --g-frontier:#0A0A0A; --g-open:#8C8C8C; --g-screen:#FFFFFF;
  --g-company:#FFFFFF; --g-company-line:#D4D4D4; --g-company-label:#0A0A0A; --g-label:#262626;
  --g-reports:#BDBDBD; --g-msg:#A3A3A3; --g-chan:#8F8F8F; --g-flash:#000000;
  --g-packet:#0A0A0A; --g-packet-text:#FFFFFF; --g-select:#000000; --g-dot:#525252;
  --paper-shadow:0 1px 2px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.14);
}
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { font: 400 14px/20px Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; font-feature-settings: "cv11" 1, "ss01" 1; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
body { display: grid; grid-template-rows: 56px minmax(0, 1fr); }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.tnum { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ---------- header ---------- */
header { display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--bg); min-width: 0; }
.mark { width: 10px; height: 10px; border-radius: 2px; background: var(--text); flex: none; }
.wordmark { font: 650 18px/24px Inter, sans-serif; letter-spacing: -0.01em; white-space: nowrap; }
.divider { width: 1px; height: 20px; background: var(--line-strong); flex: none; }
.meta { font: 500 12px/16px "JetBrains Mono", monospace; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hright { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border-radius: 8px; gap: 8px; font: 500 14px/20px Inter, sans-serif; letter-spacing: .005em; border: 1px solid transparent; cursor: pointer; transition: background 120ms var(--ease-out); white-space: nowrap; text-decoration: none; }
.btn:focus-visible, .seg button:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: color-mix(in srgb, var(--text) 88%, var(--bg)); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: var(--hover); }
.btn-ghost:active { background: var(--press); }
.btn-icon { width: 36px; padding: 0; font-size: 16px; }
kbd { font: 500 12px/16px "JetBrains Mono", monospace; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; }
.btn-primary kbd { border-color: rgba(127,127,127,.5); color: var(--bg); opacity: .7; }
.seg { display: inline-flex; height: 36px; padding: 2px; border-radius: 8px; background: var(--overlay); border: 1px solid var(--line-strong); gap: 2px; }
.seg button { height: 30px; padding: 0 12px; border-radius: 6px; font: 500 13px/18px Inter, sans-serif; color: var(--text-2); background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button.active { background: var(--surface-3); color: var(--text); font-weight: 600; }

/* ---------- pills, chips, badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--line-strong); font: 600 12px/16px Inter, sans-serif; color: var(--text); white-space: nowrap; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); position: relative; }
.pill.running .dot { background: var(--amber); }
.pill.running .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: pulse 1.4s var(--ease-out) infinite; }
.pill.closed .dot { background: var(--green); }
body.is-blocked .pill .dot { background: var(--red); }
@keyframes pulse { from { box-shadow: 0 0 0 0 var(--amber-line); } to { box-shadow: 0 0 0 10px transparent; } }
.tourpill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--text); color: var(--bg); font: 600 12px/16px Inter, sans-serif; }
.code { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--text-2); font: 700 12px/16px "JetBrains Mono", monospace; letter-spacing: .04em; white-space: nowrap; }
.code.block { color: var(--red); border-color: var(--red-line); background: var(--red-bg); }
.code.money { color: var(--green-text); border-color: var(--green-line); background: var(--green-bg); }
.code.flag { color: var(--amber-text); border-color: var(--amber-line); background: var(--amber-bg); }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 8px; max-width: 100%; flex-wrap: wrap; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--text-2); font: 500 12px/16px Inter, sans-serif; }
.tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.tag .dot.working { background: var(--amber); } .tag .dot.blocked { background: var(--red); } .tag .dot.done { background: var(--green); }

/* ---------- canvas overlays ---------- */
.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--stage-bg); }
#cy { position: absolute; inset: 0; }
.chapter { position: absolute; top: 20px; left: 24px; max-width: 420px; z-index: 5; pointer-events: none; }
.chapter .row1 { display: flex; align-items: center; gap: 8px; }
.chapter .eyebrow { font: 500 12px/16px "JetBrains Mono", monospace; color: var(--text-3); }
.chapter .blk { font: 600 12px/16px Inter, sans-serif; color: var(--red); display: none; }
body.is-blocked .chapter .blk { display: inline; }
.chapter .title { margin-top: 4px; font: 650 28px/32px Inter, sans-serif; letter-spacing: -0.02em; transition: opacity 160ms var(--ease-in-out); }
.camera { position: absolute; top: 20px; right: 24px; z-index: 5; }
.legend { position: absolute; top: 64px; right: 24px; z-index: 5; display: flex; align-items: center; gap: 12px; font: 500 12px/16px Inter, sans-serif; color: var(--text-3); pointer-events: none; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend b { width: 6px; height: 12px; border-radius: 2px; display: inline-block; }
.legend .sep { width: 1px; height: 12px; background: var(--line-strong); }

/* ---------- dock: KPIs + race chart ---------- */
.dock { view-transition-name: dock; background: var(--surface-1); border-top: 1px solid var(--line-strong); padding: 12px 24px; display: grid; grid-template-rows: 82px 172px; row-gap: 10px; min-width: 0; }
.kpis { display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr .8fr; gap: 8px; min-width: 0; }
.kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; display: grid; grid-template-rows: 16px 44px; row-gap: 2px; align-content: center; min-width: 0; }
.kpi.hero { border-color: var(--line-strong); }
.kpi.hero.closed { border-color: var(--green-line); }
.kpi .lbl { font: 500 12px/16px Inter, sans-serif; letter-spacing: .02em; color: var(--text-3); white-space: nowrap; }
.kpi .val { display: flex; align-items: baseline; gap: 6px; font: 600 28px/44px Inter, sans-serif; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.kpi.hero .val { font: 700 40px/44px Inter, sans-serif; letter-spacing: -0.025em; }
.kpi.hero .val .x { font: 500 28px/44px Inter, sans-serif; color: var(--text-2); }
.kpi .sub { font: 400 12px/16px Inter, sans-serif; color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kpi .val > span:first-child { flex: none; }
.main.spot .kpi .sub { display: none; }
.race { display: grid; grid-template-rows: 140px 32px; min-width: 0; }
.race-plot { position: relative; height: 140px; min-width: 0; }
.race-plot canvas { position: absolute; inset: 0; }
#raceHead { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--chart-knockout); pointer-events: none; will-change: transform; }
#raceHead::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: pulse 1.4s var(--ease-out) infinite; }
body.is-blocked #raceHead { background: var(--red); }
.race.closed #raceHead { background: var(--green); } .race.closed #raceHead::after { animation: none; }
.race.idle #raceHead { display: none; }
.race.nodeal #raceHead { background: var(--text-3); } .race.nodeal #raceHead::after { animation: none; }
.chips { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); padding: 0 var(--race-r) 0 var(--race-l); position: relative; list-style: none; margin: 0; }
.chip { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; min-width: 0; text-align: center; }
.chip::before { content: ""; height: 4px; border-radius: 2px; margin: 0 2px; background: var(--line-strong); transition: background 200ms var(--ease-out) calc(var(--i) * 40ms); }
.chip span { font: 500 12px/16px Inter, sans-serif; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.chip.done::before { background: var(--text-2); } .chip.done span { color: var(--text-2); }
.chip.on::before { background: var(--amber); } .chip.on span { color: var(--text); font-weight: 600; }
body.is-blocked .chip.on::before { background: var(--red); }
.chips.closed .chip::before { background: var(--green); }
.chip-end { position: absolute; right: 0; top: 0; width: calc(var(--race-r) - 16px); }
.chip-end.on::before { background: var(--green); } .chip-end.on span { color: var(--green-text); font-weight: 600; }

/* ---------- caption ---------- */
.caption { position: absolute; left: 24px; bottom: 16px; max-width: 640px; z-index: 6; pointer-events: none; }
.stage.has-invoice .caption { max-width: calc(100% - 432px); }
.cap { background: var(--overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line-strong); border-left: 4px solid var(--text); border-radius: 12px; padding: 12px 16px 12px 14px; box-shadow: var(--shadow-md); animation: capin 160ms var(--ease-out); }
.cap .who { display: flex; align-items: center; gap: 8px; font: 600 13px/16px Inter, sans-serif; color: var(--text-2); min-width: 0; }
.cap .who span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap .txt { margin-top: 4px; font: 500 18px/26px Inter, sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cap.block { border-left-color: var(--red); } .cap.money, .cap.win { border-left-color: var(--green); } .cap.escalate, .cap.flag { border-left-color: var(--amber); }
@keyframes capin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- invoice (paper, light in both themes) ---------- */
.invoice { position: absolute; right: 24px; bottom: 16px; width: 360px; z-index: 7; padding: 20px; border-radius: 12px; background: var(--paper); color: var(--paper-text); border: 1px solid var(--paper-border); box-shadow: var(--paper-shadow); animation: invin 320ms var(--ease-out); }
.invoice .top { display: flex; justify-content: space-between; align-items: center; }
.invoice .ttl { font: 600 14px/20px Inter, sans-serif; }
.invoice .mode { font: 700 12px/16px "JetBrains Mono", monospace; text-transform: uppercase; height: 20px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--paper-text); display: inline-flex; align-items: center; }
.invoice .parties { margin-top: 4px; font: 400 14px/20px Inter, sans-serif; color: var(--paper-text-2); }
.invoice .amt { margin: 8px 0 12px; font: 700 40px/48px Inter, sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.invoice .row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--paper-line); font: 400 14px/20px Inter, sans-serif; }
.invoice .row span { color: var(--paper-text-2); } .invoice .row b { font-weight: 600; text-align: right; }
.invoice .st-sent { color: var(--paper-amber); } .invoice .st-paid { color: var(--paper-green); }
.invoice a { display: inline-block; margin-top: 12px; font: 600 14px/20px Inter, sans-serif; color: var(--paper-text); text-decoration: underline; text-underline-offset: 3px; }
.invoice .stamp { position: absolute; right: 20px; top: 56px; border: 3px solid var(--paper-green); color: var(--paper-green); padding: 2px 12px; border-radius: 6px; font: 800 28px/32px Inter, sans-serif; letter-spacing: .08em; transform: rotate(-8deg); opacity: 0; }
.invoice.paid .stamp { animation: stamp 260ms var(--ease-stamp) forwards; }
.invoice.paid { animation: invin 320ms var(--ease-out), paidflash 600ms var(--ease-out); }
@keyframes stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.4); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes paidflash { 0% { border-color: var(--paper-green); } 100% { border-color: var(--paper-border); } }
@keyframes invin { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- closed takeover ---------- */
.takeover { position: absolute; inset: 0; z-index: 20; background: var(--scrim); display: grid; place-items: center; text-align: center; padding: 32px; animation: fadein 400ms var(--ease-out); }
.takeover .content { max-width: 760px; display: flex; flex-direction: column; gap: 8px; align-items: center; animation: rise 500ms var(--ease-out) 150ms both; }
.takeover .eyebrow { font: 600 14px/20px Inter, sans-serif; letter-spacing: .01em; color: var(--green-text); display: inline-flex; align-items: center; gap: 8px; }
.takeover .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.takeover .headline { font: 700 128px/120px Inter, sans-serif; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.takeover .subline { font: 500 24px/32px Inter, sans-serif; color: var(--text-2); }
.takeover .hero { font: 700 32px/40px Inter, sans-serif; letter-spacing: -0.02em; }
.takeover .detail { margin-top: 12px; font: 400 14px/20px "JetBrains Mono", monospace; color: var(--text-2); }
.takeover .actions { margin-top: 20px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.takeover .actions .btn { height: 40px; }
.takeover.nodeal .eyebrow { color: var(--text-2); }
.takeover.nodeal .headline { font: 700 64px/64px Inter, sans-serif; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- options popover ---------- */
.options { position: relative; }
.options .menu { position: absolute; top: 44px; right: 0; width: 260px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px; display: grid; gap: 10px; z-index: 30; }
.options label { display: flex; gap: 8px; align-items: center; font: 400 14px/20px Inter, sans-serif; color: var(--text); }
.options .field { display: grid; gap: 6px; font: 500 12px/16px Inter, sans-serif; color: var(--text-3); }
.options input[type=number] { height: 36px; width: 100%; font: 400 14px/20px "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; background: var(--surface-3); color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; }

/* ---------- projector 1280x720 ---------- */
@media (max-width: 1360px), (max-height: 780px) {
  body { grid-template-rows: 48px minmax(0, 1fr); }
  header { padding: 0 16px; }
  .wordmark { font-size: 16px; }
  .meta, kbd { display: none; }
  .btn { height: 32px; padding: 0 12px; font-size: 13px; line-height: 18px; }
  .btn-icon { width: 32px; }
  .seg { height: 32px; } .seg button { height: 26px; }
  .dock { padding: 10px 16px; grid-template-rows: 64px 140px; row-gap: 8px; }
  :root { --race-l: 48px; --race-r: 104px; }
  .race { grid-template-rows: 108px 32px; } .race-plot { height: 108px; }
  .kpi { padding: 8px 12px; grid-template-rows: 16px 36px; }
  .kpi .val { font-size: 22px; line-height: 36px; } .kpi.hero .val { font-size: 32px; line-height: 36px; } .kpi.hero .val .x { font-size: 22px; line-height: 36px; }
  .kpi .sub { display: none; }
  .chapter { top: 16px; left: 16px; } .chapter .title { font-size: 24px; line-height: 28px; }
  .camera { top: 16px; right: 16px; } .legend { top: 56px; right: 16px; }
  .caption { left: 16px; bottom: 12px; max-width: 520px; } .stage.has-invoice .caption { max-width: calc(100% - 368px); }
  .cap .txt { font-size: 16px; line-height: 24px; }
  .invoice { width: 320px; right: 16px; bottom: 12px; } .invoice .amt { font-size: 32px; line-height: 40px; }
  .takeover .headline { font-size: 96px; line-height: 92px; } .takeover .hero { font-size: 28px; line-height: 36px; } .takeover .subline { font-size: 20px; line-height: 28px; }
}