/* ==========================================================================
   Math Primer — shared stylesheet
   Base layer (brand tokens, reset, body, section nav, hub).
   Section-specific rules are appended below as each section is ported.
   ========================================================================== */

:root {
  --brand-background: #3b4b77;
  --brand-text: #ffffff;
  --brand-text-muted: rgba(255, 255, 255, 0.7);
  --brand-accent: #2dd4bf;
  --brand-border: rgba(255, 255, 255, 0.3);
  --brand-border-dim: rgba(255, 255, 255, 0.12);
  --brand-danger: #f87171;
  --brand-warning: #fbbf24;
  --brand-success: #34d399;
  --bg-card: rgba(255, 255, 255, 0.06);
  --bg-card-raised: rgba(255, 255, 255, 0.1);
  --accent-tint: rgba(45, 212, 191, 0.08);
  --danger-tint: rgba(248, 113, 113, 0.08);
  --warning-tint: rgba(251, 191, 36, 0.08);
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;
  /* Section-specific palette extensions (used by individual section pages) */
  --group-a: #a78bfa;
  --group-b: #fb923c;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--brand-background);
  color: var(--brand-text);
  font-family: var(--font-sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 60px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Section navigation (BACK | Title | NEXT) — shared across all section pages
   -------------------------------------------------------------------------- */

.sec-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 0;
  margin-bottom: 8px;
}

.sec-nav__header {
  justify-self: center;
  color: var(--brand-text);
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin: 0;
}

.sec-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sec-nav__btn--back {
  justify-self: start;
  background: transparent;
  border: 1px solid var(--brand-border);
  color: var(--brand-text-muted);
}

.sec-nav__btn--back:hover {
  border-color: var(--brand-text);
  color: var(--brand-text);
}

.sec-nav__btn--next {
  justify-self: end;
  background: var(--brand-accent);
  border: none;
  color: var(--brand-background);
}

.sec-nav__btn--next:hover { filter: brightness(1.1); }

@media (max-width: 420px) {
  .sec-nav__header { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   Problem statement (section subtitle under the nav)
   -------------------------------------------------------------------------- */

.problem-statement {
  font-size: 16px;
  color: var(--brand-text-muted);
  max-width: 700px;
  margin: 0 auto 24px;
  line-height: 1.55;
  text-align: center;
}

@media (max-width: 600px) {
  .problem-statement { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Hub page (index.html) — header + 3x2 card grid
   -------------------------------------------------------------------------- */

.hub-header {
  text-align: center;
  padding: 0 20px;
  margin: 0 auto 20px;
  max-width: 820px;
}

.hub-title {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
  color: var(--brand-text);
}

.hub-tagline {
  font-size: 16px;
  color: var(--brand-text-muted);
  line-height: 1.5;
  margin: 0;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 20px auto 64px;
  padding: 0 24px;
}

@media (max-width: 900px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-title { font-size: 28px; }
}

@media (max-width: 600px) {
  .hub-grid { grid-template-columns: 1fr; gap: 16px; }
  .hub-title { font-size: 24px; }
  .hub-tagline { font-size: 14px; }
}

.hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 22px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--brand-border-dim);
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 220px;
  text-decoration: none;
  color: inherit;
}

.hub-card:hover {
  transform: translateY(-5px);
  background: var(--bg-card-raised);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.hub-card__icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 12px;
}

.hub-card__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 10px;
}

.hub-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-text);
  margin: 0 0 8px 0;
}

.hub-card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-text-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Shared section patterns (every section page uses these)
   -------------------------------------------------------------------------- */

/* Pill-style tab selector */
.tab-selector {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.tab-btn {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--brand-border);
  border-radius: 9999px;
  background: transparent;
  color: var(--brand-text-muted);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: inherit;
}

.tab-btn:hover { border-color: var(--brand-text); color: var(--brand-text); }

.tab-btn.active {
  background: var(--brand-accent);
  color: var(--brand-background);
  border-color: var(--brand-accent);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

@media (max-width: 600px) {
  .tab-btn { font-size: 13px; padding: 0.5rem 0.9rem; }
}

/* Generic utility */
.hidden { display: none !important; }

/* ==========================================================================
   SECTION STYLES — appended per section as pages are ported
   ==========================================================================
   [phacking]             — done
   [pvalues]              — done
   [regression_reading]   — done
   [power]                — done
   [ttable]               — done
   [ftable]               — done
   ========================================================================== */

/* ------------------------ [phacking] ------------------------ */

/* Stage cards */
.stage {
  background: var(--bg-card);
  border: 1px solid var(--brand-border-dim);
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 20px;
}

.stage-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.stage-number {
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--bg-card-raised);
  border: 1px solid var(--brand-border-dim);
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--brand-text-muted);
}

.stage-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand-text);
}

.prose {
  color: var(--brand-text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.prose strong { color: var(--brand-text); }
.prose em { color: var(--brand-accent); font-style: normal; font-weight: 600; }

/* Callouts */
.callout {
  background: var(--accent-tint);
  border-left: 3px solid var(--brand-accent);
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--brand-text-muted);
}

.callout strong { color: var(--brand-text); }

.callout-title {
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--brand-accent);
}

.callout.warning { background: var(--warning-tint); border-left-color: var(--brand-warning); }
.callout.warning .callout-title { color: var(--brand-warning); }
.callout.danger { background: var(--danger-tint); border-left-color: var(--brand-danger); }
.callout.danger .callout-title { color: var(--brand-danger); }
.callout.success { background: rgba(52, 211, 153, 0.08); border-left-color: var(--brand-success); }
.callout.success .callout-title { color: var(--brand-success); }

/* Arena (experiment area) */
.arena {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--brand-border-dim);
  border-radius: 8px;
  padding: 24px;
  margin: 20px 0;
}

/* Strip plot */
.strip-plot-container {
  width: 100%;
  height: 140px;
  background: var(--bg-card-raised);
  border: 1px solid var(--brand-border-dim);
  border-radius: 8px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.strip-plot-container canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.plot-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--brand-text-muted);
}

.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-dot.a { background: var(--group-a); }
.legend-dot.b { background: var(--group-b); }
.legend-line { width: 16px; height: 2px; }
.legend-line.dashed {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0px, rgba(255,255,255,0.5) 4px, transparent 4px, transparent 8px);
}

/* Groups layout */
.groups-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: start;
}

.group {
  background: var(--bg-card-raised);
  border-radius: 8px;
  padding: 20px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.group.winner {
  border-color: var(--brand-success);
  box-shadow: 0 0 30px rgba(52, 211, 153, 0.15);
}

.group-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.group-a .group-label { color: var(--group-a); }
.group-b .group-label { color: var(--group-b); }

.group-label::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.group-a .group-label::before { background: var(--group-a); }
.group-b .group-label::before { background: var(--group-b); }

/* Participant cards */
.participants {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.participant {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--brand-border-dim);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-text-muted);
  position: relative;
  transition: all 0.3s ease;
}

.participant.high {
  background: rgba(52, 211, 153, 0.15);
  border-color: var(--brand-success);
  color: var(--brand-success);
}

.participant.low {
  background: rgba(248, 113, 113, 0.06);
  border-color: transparent;
  color: var(--brand-text-muted);
  opacity: 0.6;
}

.participant .delta {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 0.6rem;
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--brand-danger);
  color: white;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.participant.regressed .delta {
  opacity: 1;
  transform: scale(1);
}

/* Group stats */
.group-stats {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid var(--brand-border-dim);
}

.mean-label {
  font-size: 0.75rem;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mean-value {
  font-size: 1.8rem;
  font-weight: 700;
}

.group-a .mean-value { color: var(--group-a); }
.group-b .mean-value { color: var(--group-b); }

/* VS divider */
.vs-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.vs-text {
  font-size: 0.9rem;
  color: var(--brand-text-muted);
  background: var(--bg-card);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--brand-border-dim);
}

/* Result banner */
.result-banner {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.result-banner.waiting {
  background: var(--bg-card-raised);
  border: 1px dashed var(--brand-border);
  color: var(--brand-text-muted);
}

.result-banner.not-significant {
  background: var(--bg-card-raised);
  border: 1px solid var(--brand-border-dim);
  color: var(--brand-text-muted);
}

.result-banner.significant {
  background: rgba(52, 211, 153, 0.1);
  border: 2px solid var(--brand-success);
  color: var(--brand-success);
}

.result-banner .p-value {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 4px;
}

/* Buttons (brand pills) */
.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary { background: var(--brand-accent); color: var(--brand-background); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }

.btn-danger { background: var(--brand-danger); color: white; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--brand-text-muted); border: 1px solid var(--brand-border); }
.btn-ghost:hover:not(:disabled) { border-color: var(--brand-text); color: var(--brand-text); }

.controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.attempt-counter {
  font-size: 0.8rem;
  color: var(--brand-text-muted);
  text-align: center;
  margin-top: 12px;
}

/* Comparison grid (retest) */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}

.comparison-card {
  background: var(--bg-card-raised);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid var(--brand-border-dim);
}

.comparison-card h4 {
  font-size: 0.8rem;
  color: var(--brand-text-muted);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.score-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--brand-border-dim);
  font-size: 0.85rem;
}

.score-row:last-child { border-bottom: none; }
.score-row .label { color: var(--brand-text-muted); }
.score-row .value { font-weight: 700; }
.score-row .value.up { color: var(--brand-success); }
.score-row .value.down { color: var(--brand-danger); }

/* Reveal message */
.reveal-message {
  text-align: center;
  padding: 32px;
  background: rgba(248, 113, 113, 0.06);
  border-radius: 12px;
  border: 1px solid var(--brand-border-dim);
}

.reveal-message h3 {
  font-size: 1.3rem;
  margin-bottom: 16px;
  color: var(--brand-danger);
}

.reveal-message p {
  color: var(--brand-text-muted);
  max-width: 600px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
}

.reveal-message p strong { color: var(--brand-text); }

/* Shake animation */
@keyframes ph-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.shake { animation: ph-shake 0.3s ease-in-out; }

/* Phacking responsive */
@media (max-width: 600px) {
  .stage { padding: 20px; }
  .groups-container { grid-template-columns: 1fr; gap: 12px; }
  .vs-divider { padding: 8px 0; }
  .participants { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .mean-value { font-size: 1.4rem; }
  .comparison-grid { grid-template-columns: 1fr; }
  .prose { font-size: 14px; }
  .arena { padding: 16px; }
}

@media (max-width: 1366px) and (hover: none), (max-width: 1366px) and (pointer: coarse) {
  .prose,
  .callout,
  .reveal-message p { font-size: 16px; }
}

@media (max-width: 600px) {
  .prose,
  .callout,
  .reveal-message p { font-size: 14px; }
}

/* ------------------------ [pvalues] ------------------------ */

/* Single content card wrapping each tab panel */
.content-card {
  background: var(--bg-card);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 24px 28px;
  min-height: 320px;
}

.content-card h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-text);
  margin: 0 0 12px 0;
}

.content-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-accent);
  margin: 20px 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.content-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text-muted);
  margin: 0 0 12px 0;
}

.content-card p:last-child { margin-bottom: 0; }
.content-card strong { color: var(--brand-text); font-weight: 600; }
.content-card em { color: var(--brand-accent); font-style: normal; font-weight: 600; }

/* Key definition callout */
.key-definition {
  background: var(--accent-tint);
  border-left: 3px solid var(--brand-accent);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  margin: 16px 0;
}

.key-definition p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text);
  margin: 0;
}

/* Misinterpretation list (red X bullets) */
.misinterpretation-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
}

.misinterpretation-list li {
  position: relative;
  padding: 10px 12px 10px 36px;
  margin-bottom: 8px;
  background: var(--danger-tint);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-text-muted);
}

.misinterpretation-list li::before {
  content: '\2717';
  position: absolute;
  left: 12px;
  top: 10px;
  color: var(--brand-danger);
  font-weight: 700;
  font-size: 14px;
}

/* Formula box */
.formula-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.8;
  color: var(--brand-accent);
  overflow-x: auto;
}

.formula-box .label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* Numbered steps list */
.steps-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  counter-reset: step-counter;
}

.steps-list li {
  counter-increment: step-counter;
  position: relative;
  padding: 8px 0 8px 36px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text-muted);
}

.steps-list li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 8px;
  width: 24px;
  height: 24px;
  background: var(--brand-accent);
  color: var(--brand-background);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Interpretation grid */
.interp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.interp-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
}

.interp-item .interp-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-accent);
  margin-bottom: 4px;
}

.interp-item .interp-label {
  font-size: 13px;
  color: var(--brand-text-muted);
  line-height: 1.4;
}

.interp-item.example {
  border-color: var(--brand-accent);
  background: var(--accent-tint);
}

@media (max-width: 600px) {
  .content-card { padding: 18px 20px; min-height: 260px; }
  .content-card h2 { font-size: 18px; }
  .content-card p { font-size: 14px; }
  .formula-box { font-size: 12px; padding: 12px 14px; }
  .interp-grid { grid-template-columns: 1fr; }
  .misinterpretation-list li { font-size: 13px; }
}

@media (max-width: 1366px) and (hover: none), (max-width: 1366px) and (pointer: coarse) {
  .content-card p,
  .key-definition p,
  .steps-list li,
  .misinterpretation-list li { font-size: 16px; }
}

@media (max-width: 600px) {
  .content-card p,
  .key-definition p,
  .steps-list li,
  .misinterpretation-list li { font-size: 14px; }
}

/* ------------------------ [regression_reading] ------------------------ */

/* Regression output table */
.reg-table-wrap { overflow-x: auto; margin: 16px 0; }

.reg-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--brand-border-dim);
}

.reg-table th,
.reg-table td {
  padding: 10px 14px;
  text-align: center;
  border: 1px solid var(--brand-border-dim);
  font-size: 13px;
}

.reg-table th {
  background: var(--bg-card-raised);
  color: var(--brand-accent);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.reg-table td { color: var(--brand-text-muted); }
.reg-table td.row-header { text-align: left; font-weight: 600; color: var(--brand-text); }
.reg-table .highlight { color: var(--brand-accent); font-weight: 700; }

/* Canvas wrappers */
.canvas-wrap {
  position: relative;
  width: 100%;
  margin: 20px 0;
}

.canvas-wrap canvas {
  width: 100%;
  height: 260px;
  display: block;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
}

.ci-canvas-wrap {
  position: relative;
  width: 100%;
  margin: 20px 0;
}

.ci-canvas-wrap canvas {
  width: 100%;
  height: 160px;
  display: block;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
}

/* Slider controls */
.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.slider-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text);
  min-width: 130px;
}

.slider-row input[type="range"] {
  flex: 1;
  min-width: 120px;
  accent-color: var(--brand-accent);
}

.slider-row .slider-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-accent);
  min-width: 70px;
  text-align: right;
}

/* Stat readout grid */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.stat-item {
  background: var(--bg-card-raised);
  border: 1px solid var(--brand-border-dim);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
}

.stat-item .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-accent);
  margin-bottom: 4px;
}

.stat-item .stat-label {
  font-size: 13px;
  color: var(--brand-text-muted);
  line-height: 1.4;
}

.stat-item.significant { border-color: var(--brand-success); }
.stat-item.significant .stat-value { color: var(--brand-success); }
.stat-item.not-significant { border-color: var(--brand-danger); }
.stat-item.not-significant .stat-value { color: var(--brand-danger); }

@media (max-width: 600px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .canvas-wrap canvas { height: 220px; }
  .ci-canvas-wrap canvas { height: 130px; }
  .reg-table th,
  .reg-table td { padding: 8px 8px; font-size: 11px; }
}

@media (max-width: 1366px) and (hover: none), (max-width: 1366px) and (pointer: coarse) {
  .stat-item .stat-label { font-size: 16px; }
}

@media (max-width: 600px) {
  .stat-item .stat-label { font-size: 14px; }
}

/* ------------------------ [power] ------------------------ */

/* Four levers grid */
.levers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.lever-card {
  background: var(--bg-card-raised);
  border: 1px solid var(--brand-border-dim);
  border-radius: 8px;
  padding: 16px 18px;
  border-top: 3px solid var(--brand-accent);
}

.lever-card.alpha    { border-top-color: var(--brand-danger); }
.lever-card.power    { border-top-color: var(--brand-success); }
.lever-card.effect   { border-top-color: #a78bfa; }
.lever-card.variance { border-top-color: var(--brand-warning); }

.lever-card .lever-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--brand-text);
  margin-bottom: 6px;
}

.lever-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--brand-text-muted);
  margin: 0 0 4px 0;
}

.lever-card p:last-child { margin-bottom: 0; }

/* Radio toggle (calculator: two-sided / one-sided) */
.radio-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.radio-row label.radio-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text);
  min-width: 130px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--brand-text-muted);
}

.radio-option input[type="radio"] { accent-color: var(--brand-accent); }

/* Highlight-card variant of .stat-item */
.stat-item.highlight-card {
  border-color: var(--brand-accent);
  background: rgba(45, 212, 191, 0.06);
}

.stat-item.highlight-card .stat-value { font-size: 28px; }

/* Mistake list (cross-mark pattern) */
.mistake-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
}

.mistake-list li {
  position: relative;
  padding: 10px 12px 10px 36px;
  margin-bottom: 8px;
  background: rgba(248, 113, 113, 0.08);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-text-muted);
}

.mistake-list li::before {
  content: '\2717';
  position: absolute;
  left: 12px;
  top: 10px;
  color: var(--brand-danger);
  font-weight: 700;
  font-size: 14px;
}

.mistake-list li strong { color: var(--brand-text); }

/* Two-distribution overlay canvas (shorter than default 280px) */
.dist-canvas-wrap canvas { height: 240px; }

/* Inline reference link (used in "Reference Tables" row on Why T-Tests tab) */
.ref-link {
  color: var(--brand-accent);
  text-decoration: underline;
  font-weight: 600;
}

.ref-link:hover { filter: brightness(1.15); }

/* Responsive */
@media (max-width: 600px) {
  .levers-grid { grid-template-columns: 1fr; }
  .lever-card p { font-size: 12px; }
  .dist-canvas-wrap canvas { height: 200px; }
  .mistake-list li { font-size: 13px; }
}

@media (max-width: 1366px) and (hover: none), (max-width: 1366px) and (pointer: coarse) {
  .lever-card p,
  .mistake-list li { font-size: 16px; }
}

@media (max-width: 600px) {
  .lever-card p,
  .mistake-list li { font-size: 14px; }
}

/* ------------------------ [ttable] ------------------------ */

/* T-table extensions to the shared .reg-table atom */
.reg-table th.sub-header {
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-text-muted);
  text-transform: none;
  letter-spacing: 0;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
}

/* Highlighted column (alpha = 0.05 two-tailed) */
.reg-table .col-highlight    { background: rgba(45, 212, 191, 0.06); }
.reg-table th.col-highlight  { background: rgba(45, 212, 191, 0.12); }

/* Zebra striping */
.reg-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.reg-table tbody tr:nth-child(odd)  { background: transparent; }

/* Sticky first column on mobile scroll */
.reg-table td.row-header,
.reg-table th.df-header {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-card-raised);
}

.reg-table tbody tr:nth-child(even) td.row-header {
  background: rgba(255, 255, 255, 0.08);
}

.reg-table tbody tr:nth-child(odd) td.row-header {
  background: var(--bg-card-raised);
}

/* Number-input row (custom lookup) */
.input-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.input-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text);
  min-width: 130px;
}

.input-group input[type="number"] {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--brand-text);
  font-size: 14px;
  font-family: var(--font-mono);
  width: 120px;
  outline: none;
  transition: border-color 0.2s ease;
}

.input-group input[type="number"]:focus {
  border-color: var(--brand-accent);
}

/* Divider between the two calculators on the Custom Lookup tab */
.section-divider {
  border: none;
  border-top: 1px solid var(--brand-border-dim);
  margin: 24px 0;
}

/* Responsive */
@media (max-width: 600px) {
  .reg-table th.sub-header { font-size: 9px; padding: 4px 8px; }
  .input-group label { min-width: 100px; font-size: 13px; }
  .input-group input[type="number"] { width: 100px; font-size: 13px; }
}

/* ------------------------ [ftable] ------------------------ */

/* Alpha-pill selector row */
.alpha-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.alpha-selector label {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text);
}

.alpha-pill {
  padding: 6px 14px;
  border: 1px solid var(--brand-border);
  border-radius: 9999px;
  background: transparent;
  color: var(--brand-text-muted);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: inherit;
}

.alpha-pill:hover  { border-color: var(--brand-text); color: var(--brand-text); }
.alpha-pill.active { background: var(--brand-accent); color: var(--brand-background); border-color: var(--brand-accent); }

/* Scrollable F-table wrapper (distinct from .reg-table-wrap — has sticky headers) */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px 12px;
  max-height: 560px;
  overflow-y: auto;
}

.table-wrap::-webkit-scrollbar       { height: 6px; width: 6px; }
.table-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 3px; }
.table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* F-table (distinct from .reg-table — denser, monospaced, sticky row/col) */
.f-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}

.f-table thead th {
  background: var(--bg-card-raised);
  color: var(--brand-accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px 8px;
  text-align: center;
  border-bottom: 2px solid var(--brand-border-dim);
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

.f-table thead th:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg-card-raised);
}

.f-table tbody td {
  padding: 7px 8px;
  text-align: center;
  color: var(--brand-text-muted);
  font-size: 13px;
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--brand-border-dim);
  white-space: nowrap;
}

.f-table tbody td:first-child {
  text-align: left;
  font-weight: 700;
  color: var(--brand-text);
  font-family: var(--font-sans);
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-card);
}

.f-table tbody tr:nth-child(even) td               { background: rgba(255, 255, 255, 0.02); }
.f-table tbody tr:nth-child(even) td:first-child   { background: rgba(255, 255, 255, 0.05); }
.f-table tbody tr:hover td                         { background: rgba(45, 212, 191, 0.06); }
.f-table tbody tr:hover td:first-child             { background: rgba(45, 212, 191, 0.10); }

.f-table .corner-label {
  font-size: 11px;
  color: var(--brand-text-muted);
  font-weight: 600;
}

/* Input row used on F-table Custom Lookup tab (analogous to .input-group) */
.input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.input-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text);
  min-width: 130px;
}

.input-row input[type="number"] {
  width: 120px;
  padding: 8px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--brand-text);
  font-size: 14px;
  font-family: var(--font-mono);
  outline: none;
  transition: border-color 0.2s ease;
}

.input-row input[type="number"]:focus { border-color: var(--brand-accent); }

/* Responsive */
@media (max-width: 600px) {
  .f-table              { font-size: 12px; }
  .f-table thead th     { font-size: 11px; padding: 8px 6px; }
  .f-table tbody td     { padding: 6px; font-size: 12px; }
  .input-row label      { min-width: 100px; font-size: 13px; }
  .alpha-pill           { font-size: 12px; padding: 5px 10px; }
}