/* ═══════════════════════════════════════════════════════════════
   AB-TEST LAB — page-specific styles
   Inherits typography + color tokens from main.css.
   Visual direction: scientific instrument. Thin rules, precise readouts,
   subtle grid behind the charts. Let the two Beta curves carry the page.
   ═══════════════════════════════════════════════════════════════ */

.ab-main { position: relative; z-index: 1; }

.masthead-nav a.active {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* ── Colors: only two variants, one threshold ─────────────────── */
.ab-main {
  --ab-a: var(--ink);
  --ab-b: var(--accent);
  --ab-grid: color-mix(in oklab, var(--ink) 8%, transparent);
  --ab-grid-strong: color-mix(in oklab, var(--ink) 18%, transparent);
  --ab-shade: color-mix(in oklab, var(--accent) 18%, transparent);
}

/* ── Hero ─────────────────────────────────────────────────────── */
.ab-hero { padding: 140px 48px 64px; max-width: 1080px; }
.ab-title { margin-top: 18px; }
.ab-kicker {
  margin-top: 32px; max-width: 680px;
  font-size: 18px; line-height: 1.55; color: var(--ink-soft);
}
.ab-dateline {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  max-width: 900px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim);
}
.ab-dateline .label { color: var(--ink-dim); margin-bottom: 4px; }
.ab-dateline .value {
  color: var(--ink); text-transform: none;
  letter-spacing: 0.02em; font-size: 13px;
}

/* ── Generic section ─────────────────────────────────────────── */
.ab-section { padding: 64px 48px; max-width: 1200px; }
.ab-section .section-label { margin-bottom: 24px; }
.ab-prose { max-width: 680px; font-size: 17px; line-height: 1.55; }
.ab-prose p + p { margin-top: 20px; }
.ab-lede { font-size: 20px; line-height: 1.5; }
.ab-footnote {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-soft); font-style: italic;
}
.ab-note { max-width: 720px; font-size: 15px; color: var(--ink-soft); margin-bottom: 16px; }

/* ═══════════════════════════════════════════════════════════
   SIMULATOR SECTION
   ═══════════════════════════════════════════════════════════ */

/* Decision banner */
.ab-banner {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 28px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ab-banner .banner-state {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.ab-banner .banner-detail {
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 13px;
}
.ab-banner .banner-detail em { font-style: italic; color: var(--ink); }
.ab-banner[data-state="idle"]     { border-color: var(--rule); }
.ab-banner[data-state="running"]  { border-color: var(--ink); }
.ab-banner[data-state="paused"]   { border-color: var(--ink-dim); }
.ab-banner[data-state="sig-up"]   { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--paper-2)); }
.ab-banner[data-state="sig-down"] { border-color: var(--ink); }
.ab-banner[data-state="nosig"]    { border-color: var(--rule); }
.ab-banner[data-state="sig-up"]   .banner-state { color: var(--accent); }

/* Designer panel */
.ab-designer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 48px;
  padding: 24px 28px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  margin-bottom: 24px;
}
.designer-col { display: flex; flex-direction: column; gap: 18px; }
.designer-field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.field-row { display: flex; align-items: center; gap: 14px; }
.field-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: var(--ink-dim);
  outline: none;
  cursor: pointer;
}
.field-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  background: var(--accent);
  border-radius: 0;
  cursor: pointer;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--accent);
}
.field-row input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--accent);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--accent);
  border-radius: 0;
  cursor: pointer;
}
.field-val {
  font-size: 13px;
  min-width: 72px;
  text-align: right;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.field-readout {
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}

/* Controls */
.ab-controls {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 24px 28px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  background: var(--paper);
  margin-bottom: 28px;
}
.control-group { display: flex; align-items: center; gap: 10px; }
.control-label {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.ctl-btn {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 7px 14px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ctl-btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}
.ctl-btn:disabled {
  opacity: 0.35; cursor: not-allowed;
}
.ctl-btn.primary {
  background: var(--ink);
  color: var(--paper);
}
.ctl-btn.primary:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
}

.speed-dial {
  display: inline-flex;
  border: 1px solid var(--rule);
  padding: 2px;
}
.speed-dial button {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  padding: 6px 10px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.speed-dial button[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}

.preset-select {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 6px 10px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* Chart frames with scientific grid background */
.chart-frame.beta-frame,
.chart-frame.strip-frame,
.chart-frame.peek-frame {
  background:
    linear-gradient(to right, var(--ab-grid) 1px, transparent 1px) 0 0 / 40px 100%,
    linear-gradient(to bottom, var(--ab-grid) 1px, transparent 1px) 0 0 / 100% 40px,
    var(--paper);
  position: relative;
}
.chart-frame.beta-frame  { min-height: 440px; padding-top: 24px; }
.chart-frame.strip-frame { min-height: 220px; padding-top: 24px; margin-top: 20px; }
.chart-frame.peek-frame  { min-height: 340px; padding-top: 24px; }

/* Counters row (between big chart and strip) */
.ab-counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.counter {
  padding: 16px 18px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 8px;
}
.counter.counter-a { border-left: 2px solid var(--ab-a); }
.counter.counter-b { border-left: 2px solid var(--ab-b); }
.counter.counter-metrics { border-left: 2px solid var(--ink-dim); }
.counter-head {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 4px;
}
.counter-row {
  display: flex; align-items: baseline; gap: 10px;
  justify-content: space-between;
}
.counter-val {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.counter-lbl {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim);
}

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS
   ═══════════════════════════════════════════════════════════ */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.how-card {
  padding: 28px 24px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.how-fig {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.how-title {
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 8px 0 12px;
  font-weight: 300;
}
.how-card p {
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
}

/* ═══════════════════════════════════════════════════════════
   PEEKING PANEL
   ═══════════════════════════════════════════════════════════ */
.peek-controls {
  display: flex; align-items: center; gap: 24px;
  margin: 24px 0;
}
.peek-status {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.peek-results { margin-top: 24px; }
.peek-hero {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.peek-stat {
  padding: 20px 22px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.peek-stat-primary {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 6%, var(--paper-2));
}
.peek-val {
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--ink);
}
.peek-stat-primary .peek-val { color: var(--accent); }
.peek-lbl {
  margin-top: 6px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim);
}
.peek-reference {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════
   VERDICT (Freq vs Bayes)
   ═══════════════════════════════════════════════════════════ */
.verdict-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.verdict-card {
  padding: 24px 28px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 18px;
}
.verdict-freq  { border-left: 3px solid var(--ab-a); }
.verdict-bayes { border-left: 3px solid var(--ab-b); }
.verdict-head {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.verdict-detail {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.verdict-detail .serif {
  color: var(--ink);
  font-size: 18px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
.verdict-call {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -0.005em;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}
.verdict-call.called-up   { color: var(--accent); font-style: italic; }
.verdict-call.called-down { color: var(--ink); }

.divergence-log {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.divergence-log[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════
   RECEIPTS & METHODOLOGY (shared pattern)
   ═══════════════════════════════════════════════════════════ */
.ab-section .metrics-grid {
  display: grid;
  /* Fixed 3-column so the 6 receipt cards read as a clean 3 × 2 grid,
     not a 5 + 1 with a lonely orphan on the bottom row. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
@media (max-width: 720px) {
  .ab-section .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .ab-section .metrics-grid { grid-template-columns: 1fr; }
}
.ab-section .metric {
  padding: 20px 22px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.ab-section .metric-value {
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ab-section .metric-label {
  margin-top: 4px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim);
}

.ab-colophon-section { max-width: 1200px; }
.method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
  margin-top: 24px;
}
.method-head {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.method-grid p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.method-ctas {
  margin-top: 48px;
  display: flex; gap: 16px; flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ab-hero { padding: 120px 24px 48px; }
  .ab-section { padding: 48px 24px; }
  .ab-dateline { grid-template-columns: 1fr; gap: 16px; }
  .ab-designer { grid-template-columns: 1fr; }
  .ab-controls { gap: 16px 20px; }
  .ab-counters { grid-template-columns: 1fr; }
  .how-grid,
  .verdict-grid,
  .method-grid { grid-template-columns: 1fr; }
  .peek-hero { grid-template-columns: 1fr 1fr; }
  .peek-stat-primary { grid-column: 1 / -1; }
  .chart-frame.beta-frame { min-height: 340px; }
}

@media (max-width: 500px) {
  .ab-section { padding: 40px 16px; }
  .peek-hero { grid-template-columns: 1fr; }
  .peek-stat-primary { grid-column: auto; }
}