/* Scoped to this one page on purpose — the shared site style.css stays the
   real site's original light theme (index.html, pipeline-review.html);
   this project intentionally breaks from it with its own dark, product-
   matched identity instead of dragging the whole portfolio dark with it. */

:root {
  --background: #0d0f14;
  --surface: #151820;
  --surface-raised: #1c202a;
  --surface-3: #242834;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text: #f3f5f7;
  --text-secondary: #9ba3af;
  --text-muted: #666e7a;

  --accent: #20c997;
  --accent-hover: #35e0ac;
  --accent-soft: rgba(32, 201, 151, 0.12);
  --accent-soft-strong: rgba(32, 201, 151, 0.22);

  --warning: #e2a03f;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --container: 860px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.wrap { max-width: var(--container); margin: 0 auto; padding: 72px 24px 120px; }

/* ── Typography ─────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
h1 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  text-wrap: balance;
}
h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  color: var(--text);
}
p { margin: 0 0 14px; color: var(--text-secondary); max-width: 66ch; }
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.lede { font-size: 16.5px; color: var(--text-secondary); max-width: 58ch; }

/* ── Chips / buttons / links ────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 12.5px; color: var(--text-secondary);
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 20px; padding: 6px 12px;
}
.chip b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 9px 15px;
  transition: border-color .15s, color .15s, background .15s;
}
.btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 600; color: var(--accent);
  transition: gap .15s;
}
.link-arrow:hover { gap: 8px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.case-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 6px; flex-wrap: wrap; }
.case-header .btn { flex-shrink: 0; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 26px; }
.back-link:hover { color: var(--text-secondary); }

/* ── Card ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ── Video switcher ─────────────────────────────────────────────────────── */
.video-switcher {
  position: relative;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  min-height: 220px;
  box-shadow: inset 0 0 0 1px var(--border);
}
.video-switcher video {
  display: none; width: 100%; height: 100%;
  object-fit: contain; background: #000;
  position: relative; z-index: 1;
}
.video-switcher video.active { display: block; }

/* Explicit z-index on every overlay control, not left to default stacking
   order — a <video> element gets its own compositing layer in Chromium
   once it starts playing, which was silently swallowing clicks meant for
   .video-playpause (caught by Playwright's own hit-test: "video intercepts
   pointer events" at the button's screen position). */
.video-dots {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 2; display: flex; gap: 4px; padding: 6px;
  background: rgba(13, 15, 20, 0.65); backdrop-filter: blur(6px);
  border-radius: 20px; border: 1px solid var(--border);
}
/* The visible dot stays small — the clickable area doesn't. A 7x7px hit
   target is unusable on touch; padding the button out to 24x24 (dot
   centered inside) keeps the compact look but gives real tap room. */
.video-dot {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0; cursor: pointer;
}
.video-dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transition: background .15s, transform .15s;
}
.video-dot:hover::before { background: rgba(255,255,255,0.5); }
.video-dot.active::before { background: var(--accent); transform: scale(1.25); }

.video-playpause {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 15, 20, 0.65); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-secondary); cursor: pointer;
}
.video-playpause:hover { color: var(--text); border-color: var(--border-strong); }
.video-playpause svg { width: 11px; height: 11px; }
.video-playpause .icon-pause { display: none; }
.video-switcher.playing .video-playpause .icon-play { display: none; }
.video-switcher.playing .video-playpause .icon-pause { display: block; }

/* Caption lives BELOW the video box, in normal flow — not overlaid on the
   video pixels. It used to be an absolute label inside the switcher and
   collided with whatever the captured UI itself was showing in that same
   corner at that moment (its own real header text in one of the two
   clips) — a caption over live footage can never be guaranteed clear of
   the content under it, so it isn't overlaid at all now. */
.video-caption {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.video-caption .n { color: var(--text-secondary); }

/* ── Architecture flow diagram ──────────────────────────────────────────── */
/* row-gap must be non-zero — flex-wrap starts a new row with NO vertical
   breathing room otherwise, so a wrapped node sits jammed directly under
   the row above it instead of looking like a deliberate second line. */
.flow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 0; margin: 18px 0 6px; }
.flow-node {
  font-size: 13px; color: var(--text);
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 14px; white-space: nowrap;
}
.flow-node.accent { border-color: var(--accent-soft-strong); color: var(--accent); background: var(--accent-soft); }
.flow-arrow { color: var(--text-muted); padding: 0 10px; font-size: 14px; flex-shrink: 0; }
.flow-branch { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 8px; padding-left: 2px; }

.flow-vertical { display: none; }
@media (max-width: 560px) {
  .flow { display: none; }
  .flow-vertical { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 18px 0 6px; }
  .flow-vertical .flow-node { align-self: stretch; text-align: center; }
  .flow-vertical .flow-down { color: var(--text-muted); font-size: 13px; align-self: center; line-height: 1; }
}

/* ── Stat blocks ────────────────────────────────────────────────────────── */
.stat-row { display: flex; flex-wrap: wrap; gap: 28px; margin: 8px 0 24px; }
.stat { min-width: 130px; }
.stat .n {
  font-family: var(--font-display); font-weight: 600; font-size: 26px;
  color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  display: block; margin-bottom: 3px;
}
.stat .n.accent { color: var(--accent); }
.stat .l { font-size: 12px; color: var(--text-muted); }

/* ── Defect / "what broke" cards ────────────────────────────────────────── */
.defect { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border); }
.defect:last-child { border-bottom: 1px solid var(--border); }
.defect-mark { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); margin-top: 6px; }
.defect-body h3 { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.defect-body p { font-size: 13px; margin: 0; }

/* ── Section rhythm ─────────────────────────────────────────────────────── */
section.block { margin-top: 52px; }
section.block:first-of-type { margin-top: 44px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wrap { padding: 48px 18px 90px; }
  h1 { font-size: 26px; }
  .case-header { flex-direction: column; }
}