/* Customer Factory — design tokens + shared component styles
   Source of truth: the "Tokens" artboard. Dark is the default theme.
   Theme switch: set data-theme="light" on <html>. With no attribute,
   follow the OS via prefers-color-scheme. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* surfaces */
  --bg: #0a0c0f;
  --s1: #11151a;      /* cards, header */
  --s2: #171c22;      /* buttons, inset */
  --s3: #1f262e;      /* tags, track */
  --line: #252d37;
  --line2: #35414e;
  /* text */
  --tx: #e9edf2;
  --tx2: #a5b0bd;
  --tx3: #808c9a;     /* min text grey — passes 4.5:1 on --s1 */
  /* accent: "the machine is moving / your move" */
  --ac: #4fd3e6;
  --ac-ink: #03242a;  /* text on --ac */
  --ac-soft: rgba(79, 211, 230, .12);
  /* health — reserved for health, never decoration */
  --ok: #3ccf8a;   --ok-soft: rgba(60, 207, 138, .13);
  --warn: #f0b43c; --warn-soft: rgba(240, 180, 60, .14);
  --bad: #ff6a61;  --bad-ink: #2b0604; --bad-soft: rgba(255, 106, 97, .14);
  --na: #6f7984;
  /* chart */
  --bar: #2b3a47;
  --line-signups: var(--ac);
  --line-trials: #f39a52;
  /* elevation */
  --shadow-panel: 0 24px 64px rgba(0, 0, 0, .55);
  --scrim: rgba(5, 8, 12, .55);

  /* type */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-hero: 44px;   /* north-star number */
  --fs-h1: 22px;
  --fs-h2: 18px;
  --fs-body: 15px;
  --fs-meta: 13px;
  --fs-eyebrow: 12px;

  /* space */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
  --gutter: 40px;          /* 16px under 640px */
  --maxw: 1360px;

  /* radius */
  --r-tag: 6px; --r-btn: 10px; --r-opt: 12px; --r-card: 16px; --r-pill: 999px;

  /* targets */
  --tap: 44px;

  /* motion */
  --dur-flow: 1.1s;
  --dur-flow-slow: 3s;
  --dur-pulse: 2.2s;
  --dur-breathe: 2.4s;
  --dur-panel: 220ms;
  --ease-panel: cubic-bezier(.2, .8, .2, 1);
  --dur-press: 100ms;
  --dur-color: 150ms;
}

:root[data-theme="light"] {
  --bg: #f5f6f8; --s1: #ffffff; --s2: #f0f2f5; --s3: #e6e9ee;
  --line: #dce1e7; --line2: #c3cbd5;
  --tx: #0d1116; --tx2: #46515e; --tx3: #5c6875;
  --ac: #0a7a8d; --ac-ink: #ffffff; --ac-soft: rgba(10, 122, 141, .10);
  --ok: #11784a; --ok-soft: rgba(17, 120, 74, .10);
  --warn: #985b00; --warn-soft: rgba(152, 91, 0, .10);
  --bad: #c22a21; --bad-ink: #ffffff; --bad-soft: rgba(194, 42, 33, .09);
  --na: #7a8490; --bar: #c9d4de; --line-trials: #b4560f;
  --shadow-panel: 0 24px 64px rgba(16, 24, 40, .18);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f6f8; --s1: #ffffff; --s2: #f0f2f5; --s3: #e6e9ee;
    --line: #dce1e7; --line2: #c3cbd5;
    --tx: #0d1116; --tx2: #46515e; --tx3: #5c6875;
    --ac: #0a7a8d; --ac-ink: #ffffff; --ac-soft: rgba(10, 122, 141, .10);
    --ok: #11784a; --ok-soft: rgba(17, 120, 74, .10);
    --warn: #985b00; --warn-soft: rgba(152, 91, 0, .10);
    --bad: #c22a21; --bad-ink: #ffffff; --bad-soft: rgba(194, 42, 33, .09);
    --na: #7a8490; --bar: #c9d4de; --line-trials: #b4560f;
    --shadow-panel: 0 24px 64px rgba(16, 24, 40, .18);
  }
}

@media (max-width: 640px) { :root { --gutter: 16px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--tx);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ac); }
a:hover { color: var(--tx); }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-card); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 16px; border-radius: var(--r-btn);
  border: 1px solid var(--line2); background: var(--s2); color: var(--tx);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-color), background var(--dur-color), transform var(--dur-press);
}
.btn:hover { border-color: var(--tx3); color: var(--tx); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--ac); border-color: var(--ac); color: var(--ac-ink); }  /* wins / double down */
.btn--primary:hover { color: var(--ac-ink); border-color: var(--ac); filter: brightness(1.07); }
.btn--danger { background: var(--bad); border-color: var(--bad); color: var(--bad-ink); } /* only: Review N in Slack */
.btn--danger:hover { color: var(--bad-ink); border-color: var(--bad); filter: brightness(1.07); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--tx2); }
.btn--quiet:hover { border-color: var(--line2); }
.btn[aria-pressed="true"] { background: var(--tx); color: var(--bg); border-color: var(--tx); }

/* ---------- tags + status pills ---------- */
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-tag);
  font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--s3); color: var(--tx2); }
.tag--ok { background: var(--ok-soft); color: var(--ok); }
.tag--warn { background: var(--warn-soft); color: var(--warn); }
.tag--bad { background: var(--bad-soft); color: var(--bad); }
.tag--accent { background: var(--ac-soft); color: var(--ac); }

.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
.pill--pending { background: var(--ac-soft); color: var(--ac); }
.pill--done { background: var(--ok-soft); color: var(--ok); }
.pill--failed { background: var(--bad-soft); color: var(--bad); }
.pill--info { background: var(--s3); color: var(--tx2); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot--ok { background: var(--ok); } .dot--warn { background: var(--warn); }
.dot--bad { background: var(--bad); } .dot--unknown { background: var(--na); }

/* ---------- the loop ---------- */
.loop { position: relative; width: 680px; max-width: 100%; aspect-ratio: 680 / 556; margin: 0 auto; }
.loop__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop__track { fill: none; stroke: var(--line); stroke-width: 1; }
.edge { fill: none; stroke-width: 3; stroke-linecap: round; }
.edge--flow { stroke: var(--ac); stroke-dasharray: 1 13; animation: cf-flow var(--dur-flow) linear infinite; }
.edge--slow { stroke: var(--warn); stroke-dasharray: 1 13; animation: cf-flow var(--dur-flow-slow) linear infinite; }
.edge--stall { stroke: var(--bad); stroke-dasharray: 10 10; opacity: .6; }
.edge--none { stroke: var(--line2); stroke-dasharray: 2 10; }

.stage {
  position: absolute; width: 190px; height: 112px; border-radius: var(--r-card);
  background: var(--s1); border: 1px solid var(--line); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--tx); z-index: 2;
  transition: transform .2s ease, border-color .2s ease;
}
.stage:hover { transform: translateY(-3px); border-color: var(--line2); color: var(--tx); }
.stage--warn { border-color: var(--warn); }
.stage--bad { border-color: var(--bad); animation: cf-pulse var(--dur-pulse) ease-in-out infinite; }
.stage--unknown { border-style: dashed; border-color: var(--line2); }
.dot--ok.is-live, .is-live { animation: cf-breathe var(--dur-breathe) ease-in-out infinite; }

/* ---------- panel (action panel + evidence drawer share it) ---------- */
.sheet-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; z-index: 51;
  background: var(--s1); border-left: 1px solid var(--line); box-shadow: var(--shadow-panel);
  display: flex; flex-direction: column; animation: cf-slidein var(--dur-panel) var(--ease-panel);
}
.option { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left;
  padding: 14px 16px; border-radius: var(--r-opt); border: 1px solid var(--line); background: var(--s2);
  color: var(--tx); font: inherit; cursor: pointer; }
.option:hover { border-color: var(--line2); }
.option[aria-checked="true"] { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac); background: var(--ac-soft); }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 600; font-size: 12px; color: var(--tx3); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); }
.tbl .r { text-align: right; }
.tbl tr.is-best td { background: var(--ok-soft); }

/* ---------- motion ---------- */
@keyframes cf-flow { to { stroke-dashoffset: -28; } }
@keyframes cf-breathe { 50% { opacity: .3; } }
@keyframes cf-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--bad), 0 0 0 4px var(--bad-soft); }
  50% { box-shadow: 0 0 0 1px var(--bad), 0 0 0 14px transparent; }
}
@keyframes cf-slidein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .edge--flow, .edge--slow, .stage--bad, .is-live, .sheet { animation: none !important; }
  .stage, .btn { transition: none; }
}