/* Tandem reactive sections — additive bundle (auto-generated 2026-05-11) */

/* === Brand color tokens === */
/* Tandem brand tokens — Pacific palette
 * v1.0 · 2026-04
 * Drop-in CSS custom properties. Import before your component styles.
 */

:root {
  /* ─── Pacific (primary) ─── */
  --pac-sky:     #7DD3FC;
  --pac-light:   #38BDF8;
  --pac-primary: #0EA5E9;
  --pac-mid:     #0284C7;
  --pac-deep:    #075985;

  /* ─── Tandem green (accent, use rarely) ─── */
  --tandem-green:        #10B981;
  --tandem-green-light:  #34D399;

  /* ─── Neutrals (70% of UI) ─── */
  --bg:     #0A0C10;
  --card:   #101418;
  --border: #1A2E44;
  --muted:  #8EACC0;
  --fg:     #E8F4FC;

  /* ─── Semantic ─── */
  --success: #10B981;
  --warning: #F59E0B;
  --error:   #F43F5E;
  --info:    #0EA5E9;

  /* ─── Brand gradient ─── */
  --brand-gradient: linear-gradient(135deg, #38BDF8 0%, #0284C7 100%);

  /* ─── Type scale ─── */
  --size-display: 2.5rem;
  --size-h1:      2rem;
  --size-h2:      1.5rem;
  --size-h3:      1.125rem;
  --size-body:    1rem;
  --size-small:   0.875rem;
  --size-caption: 0.75rem;

  /* ─── Font families ─── */
  --font-primary:   'Inter', system-ui, sans-serif;
  --font-technical: 'Space Grotesk', sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  /* ─── Geometric constants ─── */
  --radius: 0;           /* Never round — keep straight edges */
  --border-w: 1px;
}

/* Convenience utility classes */
.bg-brand { background: var(--brand-gradient); }
.fg-brand { color: var(--pac-primary); }
.fg-muted { color: var(--muted); }

.font-technical {
  font-family: var(--font-technical);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}


/* === Shared layout (scoped) === */

.tandem-bench-wrap { background: var(--bg); color: var(--fg); font-family: var(--font-primary); -webkit-font-smoothing: antialiased; padding: 0; margin: 0 auto; }
.tandem-bench-wrap *, .tandem-bench-wrap *::before, .tandem-bench-wrap *::after { box-sizing: border-box; }
.tandem-bench-wrap img, .tandem-bench-wrap svg { display: block; max-width: 100%; }
.tandem-bench-wrap a { color: inherit; }
.tandem-bench-wrap .section-block { padding: 80px 24px; max-width: 1240px; margin: 0 auto; }
.tandem-bench-wrap .section-block h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 12px; color: var(--fg); }
.tandem-bench-wrap .section-block h2 em { font-style: italic; font-weight: 400; color: var(--pac-sky); }
.tandem-bench-wrap .section-block .desc { color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 60ch; margin: 0 0 36px; }
.tandem-bench-wrap .sh, .tandem-bench-wrap .cmd { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 24px; }
.tandem-bench-wrap .sh .pfx, .tandem-bench-wrap .cmd .pfx { color: var(--pac-sky); margin-right: 8px; }
.tandem-bench-wrap .sh .arg { color: var(--tandem-green-light); }

/* Size stability — outer animation containers stay fixed regardless of inner content churn */
.tandem-bench-wrap .ac, .tandem-bench-wrap .pa, .tandem-bench-wrap .tb { min-height: 480px; }
@media (min-width: 900px) {
  .tandem-bench-wrap .ac, .tandem-bench-wrap .pa, .tandem-bench-wrap .tb { min-height: 520px; }
}
.tandem-bench-wrap .ac-feed, .tandem-bench-wrap .tb-side { min-height: 400px; }
.tandem-bench-wrap .ac-feed-list, .tandem-bench-wrap .tb-cards { overflow: hidden; max-height: 380px; }
.tandem-bench-wrap .pa-lanes { min-height: 380px; overflow: hidden; }
.tandem-bench-wrap .tb-board { min-height: 400px; }
/* Lock .tb to fixed height — prevents page reflow from kanban card churn */
.tandem-bench-wrap .tb { height: 580px; }


/* === Section CSS (scoped) === */
.tandem-bench-wrap /* Section 01 (ac- prefix) */
/* ============================================================
   SECTION 01 — AGENT CONSTELLATION (.ac-)
   Graph of Tandem agents + traveling packets + live feed.
   ============================================================ */
.ac { background: linear-gradient(180deg, #0A1620 0%, #070A0E 100%);
  border: 1px solid rgba(56,189,248,0.18); border-radius: 16px;
  padding: 28px; overflow: hidden; position: relative;
  display: grid; grid-template-columns: 1fr; gap: 24px; }
.tandem-bench-wrap .ac::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 30% 30%, rgba(56,189,248,0.12), transparent 60%),
              radial-gradient(40% 50% at 80% 80%, rgba(14,165,233,0.08), transparent 60%); }
.tandem-bench-wrap .ac-stage { position: relative; aspect-ratio: 4/3; min-height: 360px; }
.tandem-bench-wrap .ac-stage svg { width: 100%; height: 100%; }
.tandem-bench-wrap .ac-node .core { fill: var(--pac-sky); transition: fill 0.4s ease; cursor: pointer; }
.tandem-bench-wrap .ac-node .ring { fill: none; stroke: var(--pac-sky); stroke-width: 1.4; opacity: 0.45; }
.tandem-bench-wrap .ac-node .halo { fill: rgba(56,189,248,0.06); stroke: rgba(56,189,248,0.2); stroke-width: 1; }
.tandem-bench-wrap .ac-node text { fill: var(--muted); font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; pointer-events: none;
  transition: fill 0.2s; }
.tandem-bench-wrap .ac-node:hover text, .tandem-bench-wrap .ac-node.active text { fill: var(--fg); }
.tandem-bench-wrap .ac-node.busy .core { fill: var(--tandem-green-light); }
.tandem-bench-wrap .ac-node.busy .ring { stroke: var(--tandem-green-light); }
.tandem-bench-wrap .ac-link { stroke: rgba(56,189,248,0.18); stroke-width: 1; fill: none; }
.tandem-bench-wrap .ac-packet { fill: var(--pac-sky); }
.tandem-bench-wrap .ac-packet.work { fill: var(--tandem-green-light); }
@keyframes ac-pulse { 0% { r: 8; opacity: 0.7; } 100% { r: 28; opacity: 0; } }
.tandem-bench-wrap .ac-pulse-ring { animation: ac-pulse 2.4s ease-out infinite; transform-origin: center; }
.tandem-bench-wrap .ac-feed { display: flex; flex-direction: column; gap: 14px; min-height: 360px; }
.tandem-bench-wrap .ac-feed-head { display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tandem-bench-wrap .ac-feed-head .label, .tandem-bench-wrap .ac-feed-head .live {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); }
.tandem-bench-wrap .ac-feed-head .live { color: var(--tandem-green-light); display: flex; align-items: center; gap: 6px; }
.tandem-bench-wrap .ac-feed-head .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: live-blink 1.6s infinite; }
.tandem-bench-wrap .ac-feed-list { display: flex; flex-direction: column; gap: 8px; flex: 1;
  overflow: hidden; position: relative; }
.tandem-bench-wrap .ac-event { padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05); font-size: 12px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  animation: ac-slidein 0.4s ease-out;
  transition: opacity 0.5s ease, transform 0.5s ease; }
@keyframes ac-slidein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.tandem-bench-wrap .ac-event.exit { opacity: 0; transform: translateY(-8px); }
.tandem-bench-wrap .ac-event .time { font-family: 'JetBrains Mono', monospace; color: var(--muted);
  font-size: 10px; letter-spacing: 0.06em; }
.tandem-bench-wrap .ac-event .body strong { display: block; font-weight: 500; color: var(--fg); }
.tandem-bench-wrap .ac-event .body span { color: var(--muted); font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; }
.tandem-bench-wrap .ac-event .badge { font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.tandem-bench-wrap .ac-event[data-sev="info"] .badge { background: rgba(56,189,248,0.15); color: var(--pac-sky); }
.tandem-bench-wrap .ac-event[data-sev="ship"] .badge { background: rgba(52,211,153,0.15); color: var(--tandem-green-light); }
.tandem-bench-wrap .ac-event[data-sev="fail"] .badge { background: rgba(244,63,94,0.18); color: #FF8F8F; }
.tandem-bench-wrap .ac-tooltip { position: absolute; pointer-events: none; opacity: 0;
  background: rgba(10,16,24,0.95); border: 1px solid rgba(56,189,248,0.3);
  backdrop-filter: blur(8px); border-radius: 8px; padding: 10px 12px;
  font-size: 11px; min-width: 160px; transition: opacity 0.2s; z-index: 5; }
.tandem-bench-wrap .ac-tooltip strong { display: block; color: var(--fg); font-weight: 500; margin-bottom: 4px; }
.tandem-bench-wrap .ac-tooltip span { color: var(--muted); font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em; }
.tandem-bench-wrap /* Section 04 (pa- prefix) */
/* ============================================================
   SECTION 04 — PARALLEL AGENTS (.pa-)
   Multiple agent lanes streaming tokens left → right.
   ============================================================ */
.pa { background: linear-gradient(180deg, #0A1620 0%, #070A0E 100%);
  border: 1px solid rgba(56,189,248,0.18); border-radius: 16px;
  padding: 28px; overflow: hidden; position: relative; }
.tandem-bench-wrap .pa::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 60% at 80% 30%, rgba(56,189,248,0.10), transparent 70%); }
.tandem-bench-wrap .pa-grid { display: grid; grid-template-columns: 1fr; gap: 24px; position: relative; }
.tandem-bench-wrap .pa-lanes { display: flex; flex-direction: column; gap: 10px; min-height: 360px; }
.tandem-bench-wrap .pa-lane { display: grid; grid-template-columns: 160px 1fr 80px; gap: 14px; align-items: center;
  padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,0.025);
  border: 1px solid rgba(56,189,248,0.08); position: relative; transition: all 0.3s; }
.tandem-bench-wrap .pa-lane .name { font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.06em; color: var(--fg); }
.tandem-bench-wrap .pa-lane .name span { display: block; color: var(--muted); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; margin-top: 3px; }
.tandem-bench-wrap .pa-lane .track { position: relative; height: 22px; background: rgba(56,189,248,0.04);
  border-radius: 6px; overflow: hidden; }
.tandem-bench-wrap .pa-lane .track svg { width: 100%; height: 100%; }
.tandem-bench-wrap .pa-token { fill: var(--pac-sky); }
.tandem-bench-wrap .pa-lane .lat { font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--pac-sky); text-align: right; }
.tandem-bench-wrap .pa-lane .lat .v { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--pac-sky); }
.tandem-bench-wrap .pa-lane .lat .u { color: var(--muted); font-size: 9px; letter-spacing: 0.14em; margin-left: 2px; }
.tandem-bench-wrap .pa-lane .lat span.sub { display: block; color: var(--muted); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; margin-top: 3px; }
.tandem-bench-wrap .pa-lane.busy { border-color: rgba(56,189,248,0.35); background: rgba(56,189,248,0.06); }
.tandem-bench-wrap .pa-side { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.tandem-bench-wrap .pa-stat { padding: 16px; border-radius: 10px; border: 1px solid rgba(56,189,248,0.2);
  background: rgba(14,165,233,0.04); }
.tandem-bench-wrap .pa-stat .lbl { font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.tandem-bench-wrap .pa-stat .val { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 30px;
  color: var(--pac-sky); line-height: 1; letter-spacing: -0.02em; }
.tandem-bench-wrap .pa-stat .sub { font-size: 11px; color: var(--muted); margin-top: 4px;
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
.tandem-bench-wrap .pa-spark { padding: 14px; border-radius: 10px; background: rgba(255,255,255,0.025);
  border: 1px solid rgba(56,189,248,0.1); }
.tandem-bench-wrap .pa-spark .lbl { font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tandem-bench-wrap .pa-spark svg { width: 100%; height: 60px; }
.tandem-bench-wrap .pa-spark path { fill: none; stroke: var(--pac-sky); stroke-width: 1.5; }
.tandem-bench-wrap .pa-spark .area { fill: rgba(56,189,248,0.12); stroke: none; }
.tandem-bench-wrap /* Section 05 (tb- prefix) */
/* ============================================================
   SECTION 05 — THROUGHPUT BOARD (.tb-)
   Kanban: Backlog → Doing → Shipped. AI cards zip faster.
   ============================================================ */
.tb { background: linear-gradient(180deg, #0A1620 0%, #070A0E 100%);
  border: 1px solid rgba(56,189,248,0.18); border-radius: 16px;
  padding: 28px; overflow: hidden; position: relative; }
.tandem-bench-wrap .tb::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 60% at 50% 0%, rgba(56,189,248,0.10), transparent 70%); }
.tandem-bench-wrap .tb-grid { display: grid; grid-template-columns: 1fr; gap: 24px; position: relative; }
.tandem-bench-wrap .tb-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-height: 380px; }
.tandem-bench-wrap .tb-col { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 380px; }
.tandem-bench-wrap .tb-col h4 { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between; align-items: center; }
.tandem-bench-wrap .tb-col h4 .count { color: var(--pac-sky); font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 16px; letter-spacing: 0; }
.tandem-bench-wrap .tb-col[data-c="done"] h4 .count { color: var(--tandem-green-light); }
.tandem-bench-wrap .tb-cards { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tandem-bench-wrap .tb-card { padding: 10px 12px; border-radius: 8px; background: rgba(56,189,248,0.06);
  border: 1px solid rgba(56,189,248,0.18); font-size: 12px; animation: tb-in 0.5s ease; }
/* Lock card height — prevents inner column jitter from variable-line desc text */
.tandem-bench-wrap .tb-card { height: 56px; overflow: hidden; box-sizing: border-box; }
@keyframes tb-in { from { opacity: 0; transform: translateX(20px); } }
.tandem-bench-wrap .tb-card.exit { animation: tb-out 0.4s ease forwards; }
@keyframes tb-out { to { opacity: 0; transform: translateX(-20px); } }
.tandem-bench-wrap .tb-card.ai { background: rgba(125,211,252,0.10); border-color: rgba(125,211,252,0.32); }
.tandem-bench-wrap .tb-card .meta { display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tandem-bench-wrap .tb-card.ai .meta .who { color: var(--pac-sky); }
.tandem-bench-wrap .tb-card .desc { color: var(--fg); line-height: 1.35; }
.tandem-bench-wrap .tb-card .ttc { font-family: 'JetBrains Mono', monospace; color: var(--muted);
  font-size: 10px; margin-top: 6px; letter-spacing: 0.04em; }
.tandem-bench-wrap .tb-card.ai .ttc { color: var(--pac-sky); }
.tandem-bench-wrap .tb-side { display: flex; flex-direction: column; gap: 14px; }
.tandem-bench-wrap .tb-hero { padding: 18px; border-radius: 10px; border: 1px solid rgba(56,189,248,0.25);
  background: rgba(14,165,233,0.05); }
.tandem-bench-wrap .tb-hero .lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tandem-bench-wrap .tb-hero .val { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 42px;
  line-height: 1; letter-spacing: -0.03em; color: var(--pac-sky); }
.tandem-bench-wrap .tb-hero .sub { color: var(--fg); font-size: 13px; margin-top: 6px; }
.tandem-bench-wrap .tb-split { padding: 14px; border-radius: 10px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06); }
.tandem-bench-wrap .tb-split .lbl { font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.tandem-bench-wrap .tb-split .row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.tandem-bench-wrap .tb-split .row:last-child { margin: 0; }
.tandem-bench-wrap .tb-split .row .who { width: 80px; color: var(--fg); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em; }
.tandem-bench-wrap .tb-split .row .bar { flex: 1; height: 8px; background: rgba(255,255,255,0.05);
  border-radius: 4px; overflow: hidden; }
.tandem-bench-wrap .tb-split .row .bar > span { display: block; height: 100%; transition: width 0.6s ease; }
.tandem-bench-wrap .tb-split .row.team .bar > span { background: rgba(255,255,255,0.25); }
.tandem-bench-wrap .tb-split .row.ai .bar > span { background: linear-gradient(90deg, var(--pac-light), var(--pac-sky)); }
.tandem-bench-wrap .tb-split .row .num { width: 40px; text-align: right; font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 14px; }
.tandem-bench-wrap .tb-split .row.ai .num { color: var(--pac-sky); }

/* === All @keyframes (global by name, safe to share) === */
@keyframes live-blink { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
@keyframes ac-pulse { 0% { r: 8; opacity: 0.7; } 100% { r: 28; opacity: 0; } }
@keyframes ac-slidein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes cb-caret { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
@keyframes cb-dot { 0%,80%,100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes tp-in { from { opacity: 0; transform: translateX(20px); } }
@keyframes tp-out { to { opacity: 0; transform: translateX(-20px); } }
@keyframes tp-blink { 50% { opacity: 0.45; } }
@keyframes tb-in { from { opacity: 0; transform: translateX(20px); } }
@keyframes tb-out { to { opacity: 0; transform: translateX(-20px); } }
@keyframes od-in { to { opacity: 1; transform: none; } }