/* ── Layout ──────────────────────────────────────────────────────────────── */
main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}

/* ── Threshold control ───────────────────────────────────────────────────── */
.control-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem 1.5rem 1rem;
  margin-bottom: 1.25rem;
}

/* Label sits above the slider on its own full-width line,
   so changing the number never affects the slider's width. */
.threshold-header {
  font-family: sans-serif;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Fixed-width number so digit changes don't shift surrounding text */
#thresh-val {
  display: inline-block;
  min-width: 1.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.threshold-tag {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: 0.68rem;
  font-family: sans-serif;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  visibility: hidden;
}

.threshold-tag.visible { visibility: visible; }

/* Slider takes the full card width — stable, never competes with label */
.slider-wrap {
  display: flex;
  flex-direction: column;
}

#threshold-slider {
  width: 100%;
  cursor: pointer;
  accent-color: var(--red);
}

/* Wand threshold sliders share the slider-wrap but use violet accent */
.wand-card .slider-wrap input[type="range"] {
  width: 100%;
  cursor: pointer;
  accent-color: var(--wand);
}

/* Ticks are absolutely positioned so each is centered on the exact
   theoretical thumb-center position, regardless of label width.
   Formula: left = --tr + i/9 * (100% - 2*--tr)
   --tr is half the browser's slider thumb width (macOS ~10-11px). */
:root { --tr: 10px; }

.slider-ticks {
  position: relative;
  height: 1.2em;
  margin-top: 3px;
  user-select: none;
}

.slider-ticks span {
  position: absolute;
  transform: translateX(-50%);
  font-family: sans-serif;
  font-size: 0.68rem;
  color: var(--muted);
}

.slider-ticks span:nth-child(1)  { left: var(--tr); }
.slider-ticks span:nth-child(2)  { left: calc(var(--tr) + 1*(100% - 2*var(--tr))/9); }
.slider-ticks span:nth-child(3)  { left: calc(var(--tr) + 2*(100% - 2*var(--tr))/9); }
.slider-ticks span:nth-child(4)  { left: calc(var(--tr) + 3*(100% - 2*var(--tr))/9); }
.slider-ticks span:nth-child(5)  { left: calc(var(--tr) + 4*(100% - 2*var(--tr))/9); }
.slider-ticks span:nth-child(6)  { left: calc(var(--tr) + 5*(100% - 2*var(--tr))/9); }
.slider-ticks span:nth-child(7)  { left: calc(var(--tr) + 6*(100% - 2*var(--tr))/9); }
.slider-ticks span:nth-child(8)  { left: calc(var(--tr) + 7*(100% - 2*var(--tr))/9); }
.slider-ticks span:nth-child(9)  { left: calc(var(--tr) + 8*(100% - 2*var(--tr))/9); }
.slider-ticks span:nth-child(10) { left: calc(100% - var(--tr)); }

/* ── Two-column matrix layout ────────────────────────────────────────────── */
.matrices-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 860px) {
  .matrices-row { grid-template-columns: 1fr; }
}

/* ── Matrix card ─────────────────────────────────────────────────────────── */
.matrix-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.25rem 1rem;
}

.group-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.group-header h2 { font-size: 1.1rem; }

.group-n {
  font-family: sans-serif;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── 3×3 Confusion matrix grid — classic black-outline style ────────────── */
/*
        | Did Reoffend | Did NOT Reoffend
  HIGH  |      TP      |       FP
  LOW   |      FN      |       TN
*/
.matrix-grid {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  grid-template-rows: auto auto auto;
  border: 1.5px solid #1e293b;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.9rem;
}

/* Every cell contributes its right and bottom border */
.matrix-grid > * {
  border-right: 1px solid #1e293b;
  border-bottom: 1px solid #1e293b;
}

/* Last column: no right border */
.matrix-grid > :nth-child(3n) { border-right: none; }

/* Last row: no bottom border */
.matrix-grid > :nth-child(n+7) { border-bottom: none; }

.mg-corner { background: #f8fafc; }

.mg-col-head {
  font-family: sans-serif;
  font-size: 0.68rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0.45rem 0.5rem;
  background: #f1f5f9;
  color: #334155;
}

.mg-row-head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.3rem;
  background: #f8fafc;
}

.risk-badge {
  font-family: sans-serif;
  font-size: 0.63rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.25rem 0.4rem;
  border-radius: 3px;
}

.risk-badge.high { background: #1e293b; color: #fff; }
.risk-badge.low  { background: #e2e8f0; color: #334155; }

/* ── Confusion matrix cells ──────────────────────────────────────────────── */
.mg-cell {
  background: #fff;
  padding: 0.65rem 0.7rem 0.6rem;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cell-type {
  font-family: sans-serif;
  font-size: 0.58rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
}

.cell-n {
  font-family: sans-serif;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
}

.cell-desc {
  font-size: 0.71rem;
  line-height: 1.4;
  color: #475569;
  margin-top: auto;
}

/* TP and TN: faint green background, dark numbers */
.mg-tp, .mg-tn { background: #f4fdf6; }
.mg-tp .cell-n,
.mg-tn .cell-n { color: #1e293b; }

/* FP: red — the primary fairness concern */
.mg-fp .cell-n    { color: var(--red); }
.mg-fp .cell-type { color: var(--red); }

/* FN: amber */
.mg-fn .cell-n    { color: #b45309; }
.mg-fn .cell-type { color: #b45309; }

/* ── Stats bar below each matrix ─────────────────────────────────────────── */
.stats-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}

.stat {
  text-align: center;
  padding: 0.55rem 0.4rem;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.stat-value {
  font-family: sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.stat-name {
  font-family: sans-serif;
  font-size: 0.63rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}

.stat-desc {
  font-size: 0.63rem;
  color: var(--muted);
  line-height: 1.3;
}

.stat.fp-rate .stat-value { color: var(--red); }
.stat.ppv     .stat-value { color: var(--blue); }
.stat.fn-rate .stat-value { color: #b45309; }

/* ── Clickable stat buttons ──────────────────────────────────────────────── */
.stat[data-stat] {
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.stat[data-stat]:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.stat.stat-open {
  outline: 2px solid;
  outline-offset: 3px;
}
.stat.fp-rate.stat-open { outline-color: var(--red); }
.stat.ppv.stat-open     { outline-color: var(--blue); }
.stat.fn-rate.stat-open { outline-color: #d97706; }

/* ── Cell highlight transitions ──────────────────────────────────────────── */
.mg-cell {
  transition: opacity 0.2s, filter 0.2s, box-shadow 0.2s, background-color 0.2s;
}

/* When any stat is active: dim all cells */
.matrix-grid[data-active-stat] [data-cell] {
  opacity: 0.2;
  filter: grayscale(1);
}

/* False Alarm Rate — FP/(FP+TN) */
.matrix-grid[data-active-stat="fp-rate"] [data-cell="fp"] {
  opacity: 1; filter: none;
  background: rgba(233,69,96,0.08);
  box-shadow: inset 0 0 0 3px var(--red);
}
.matrix-grid[data-active-stat="fp-rate"] [data-cell="tn"] {
  opacity: 0.8; filter: none;
  background: rgba(233,69,96,0.03);
  box-shadow: inset 0 0 0 1.5px rgba(233,69,96,0.45);
}

/* Score Accuracy / PPV — TP/(TP+FP) */
.matrix-grid[data-active-stat="ppv"] [data-cell="tp"] {
  opacity: 1; filter: none;
  background: rgba(15,52,96,0.07);
  box-shadow: inset 0 0 0 3px var(--blue);
}
.matrix-grid[data-active-stat="ppv"] [data-cell="fp"] {
  opacity: 0.8; filter: none;
  background: rgba(15,52,96,0.03);
  box-shadow: inset 0 0 0 1.5px rgba(15,52,96,0.45);
}

/* Miss Rate — FN/(FN+TP) */
.matrix-grid[data-active-stat="fn-rate"] [data-cell="fn"] {
  opacity: 1; filter: none;
  background: rgba(217,119,6,0.08);
  box-shadow: inset 0 0 0 3px #d97706;
}
.matrix-grid[data-active-stat="fn-rate"] [data-cell="tp"] {
  opacity: 0.8; filter: none;
  background: rgba(217,119,6,0.03);
  box-shadow: inset 0 0 0 1.5px rgba(217,119,6,0.45);
}

/* ── Stat explainer panel ─────────────────────────────────────────────────── */
.stat-explainer {
  max-width: 1280px;
  margin: 1rem auto 0;
  padding: 0.9rem 1.25rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.stat-explainer.hidden { display: none; }

.explainer-fraction {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.frac-label {
  font-family: sans-serif;
  font-size: 0.58rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.frac-bar {
  width: 48px;
  height: 2px;
  background: #1e293b;
  margin: 2px 0;
}

/* Mini 2×2 confusion matrix — cells in reading order: TP FP / FN TN */
.mini-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 36px;
  height: 36px;
  border: 1.5px solid #1e293b;
  gap: 1px;
  background: #1e293b;
  border-radius: 2px;
  overflow: hidden;
}
.mm-cell        { background: #dde1e7; }
.mm-red   .mm-on { background: var(--red); }
.mm-blue  .mm-on { background: var(--blue); }
.mm-amber .mm-on { background: #d97706; }

.explainer-text { flex: 1; }

.explainer-name {
  font-family: sans-serif;
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}

.explainer-desc {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #334155;
}

.explainer-close {
  background: none;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 1;
}
.explainer-close:hover { background: #f1f5f9; border-color: #94a3b8; }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.hidden { display: none; }

/* ── Magic wand color tokens ─────────────────────────────────────────────── */
:root {
  --wand:       #7c3aed;           /* vivid violet */
  --wand-light: rgba(124,58,237,0.12);
  --wand-glow:  rgba(124,58,237,0.28);
}

/* ── Magic Wand enter button (inside real control card) ──────────────────── */
.wand-toggle-row {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
}

.wand-btn {
  background: none;
  border: 1px solid var(--wand);
  color: var(--wand);
  font-family: sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  letter-spacing: 0.01em;
}
.wand-btn:hover {
  background: var(--wand-light);
  box-shadow: 0 2px 10px var(--wand-glow);
}

/* ── Wand card (replaces control card in wand mode) ──────────────────────── */
.wand-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
  overflow: hidden;
}

/* Deep purple-indigo gradient banner */
.wand-banner {
  background: linear-gradient(135deg, #2e1065 0%, #1e1b4b 100%);
  color: #c4b5fd;
  font-family: sans-serif;
  font-size: 0.82rem;
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Text-only badge — glowing label, not a button */
.wand-badge {
  color: #e9d5ff;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  flex-shrink: 0;
  text-shadow: 0 0 10px rgba(233,213,255,0.7), 0 0 24px rgba(196,181,253,0.4);
}

.wand-banner-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wand-defaults-btn {
  background: none;
  border: none;
  color: rgba(196,181,253,0.7);
  font-family: sans-serif;
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wand-defaults-btn:hover { color: #c4b5fd; }

.wand-exit-btn {
  background: none;
  border: 1px solid rgba(196,181,253,0.4);
  color: #c4b5fd;
  font-family: sans-serif;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.wand-exit-btn:hover { border-color: #c4b5fd; color: #fff; }

.wand-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 860px) {
  .wand-body { grid-template-columns: 1fr; }
}

/* ── Wand sections (one per intervention) ────────────────────────────────── */
.wand-section {
  padding: 0.75rem 1.5rem 0.75rem;
}

.wand-section + .wand-section {
  border-left: 1px solid #e9e3f7;
}

@media (max-width: 860px) {
  .wand-section + .wand-section {
    border-left: none;
    border-top: 1px solid #e9e3f7;
  }
}

.wand-section-label {
  font-family: sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--wand);
  margin-bottom: 0.55rem;
}

.wand-slider-group {
  margin-bottom: 0.7rem;
}

/* Threshold label line inside wand section */
.wand-thresh-header {
  font-family: sans-serif;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Base-rate / accuracy label line */
.wand-br-header {
  font-family: sans-serif;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

/* Violet accent for all wand range sliders */
.wand-range         { width: 100%; cursor: pointer; accent-color: var(--wand); }
.wand-range-accuracy { accent-color: var(--wand); }

/* Endpoint labels below base-rate / accuracy sliders */
.br-endpoints {
  display: flex;
  justify-content: space-between;
  font-family: sans-serif;
  font-size: 0.6rem;
  color: var(--muted);
  margin-top: 1px;
}

/* Disclaimer inline below Intervention 2 sliders */
.wand-disclaimer {
  font-family: sans-serif;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--muted);
  margin: 0.3rem 0 0;
  line-height: 1.45;
}

/* ── Pulsing glow animation for wand-mode matrix cards ───────────────────── */
@keyframes wand-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1.5px var(--wand),
                0 0 14px var(--wand-light),
                var(--shadow);
  }
  50% {
    box-shadow: 0 0 0 1.5px var(--wand),
                0 0 28px var(--wand-glow),
                0 0 48px var(--wand-light),
                var(--shadow);
  }
}

/* ── Wand mode — matrix card visual treatment ─────────────────────────────── */
main.wand-mode .matrix-card {
  border: 1.5px solid var(--wand);
  background: #faf5ff;
  animation: wand-pulse 3s ease-in-out infinite;
}

main.wand-mode .group-header h2::after {
  content: " (hypothetical)";
  font-size: 0.7rem;
  font-style: italic;
  color: var(--wand);
  font-weight: normal;
  opacity: 0.75;
}

/* ── Explainer section ───────────────────────────────────────────────────── */
#explainer {
  display: flex;
  justify-content: center;
  padding: 2rem 1.5rem 1rem;
}
#explainer.hidden { display: none; }

#main-app.hidden { display: none; }

.slide-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 2.5rem 1.75rem;
  max-width: 680px;
  width: 100%;
  position: relative;
}

.skip-btn {
  position: absolute;
  top: 1rem; right: 1.25rem;
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: sans-serif;
  color: var(--muted);
  padding: 3px 8px;
  cursor: pointer;
}
.skip-btn:hover { background: #f1f5f9; color: var(--navy); }

.slide-card h2 {
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: 0.6rem;
  padding-right: 5rem;
}
.slide-card > p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 0;
}

#slide-viz { margin: 1.25rem 0 0.25rem; }

.slide-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}
.slide-nav button {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
  font-family: sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.slide-nav button:hover { background: var(--blue); }
.slide-nav #btn-prev {
  background: #f7f6f3;
  color: var(--navy);
  border: 1px solid #e2e8f0;
}
.slide-nav #btn-prev:hover { background: #eee; }

.dots { display: flex; gap: 6px; margin-left: auto; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; transition: background 0.2s; }
.dot.active { background: var(--navy); }

/* ── Slide visualizations ────────────────────────────────────────────────── */

/* Slide 1 — score scale */
.sv-scale-track {
  display: flex;
  border: 1.5px solid #1e293b;
  border-radius: 6px;
  overflow: hidden;
  font-family: sans-serif;
  height: 76px;
}
.sv-scale-low, .sv-scale-high {
  flex: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.sv-scale-low  { background: #f1f5f9; }
.sv-scale-high { background: #1e293b; color: #fff; }
.sv-scale-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.sv-scale-nums  { font-size: 1.05rem; font-weight: 600; }
.sv-scale-divider {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 0.5rem; background: var(--red); color: #fff;
  font-size: 0.7rem; font-weight: 700; text-align: center; gap: 3px; min-width: 60px;
}
.sv-scale-note { font-size: 0.55rem; font-weight: 400; opacity: 0.9; line-height: 1.2; }

/* Slide 2 — mini confusion matrix */
.sv-matrix {
  display: grid;
  grid-template-columns: 72px 1fr 1fr;
  border: 1.5px solid #1e293b;
  border-radius: 4px;
  overflow: hidden;
  font-family: sans-serif;
  font-size: 0.75rem;
}
.sv-matrix > * { border-right: 1px solid #1e293b; border-bottom: 1px solid #1e293b; }
.sv-matrix > :nth-child(3n)  { border-right: none; }
.sv-matrix > :nth-child(n+7) { border-bottom: none; }
.sv-m-corner { background: #f8fafc; }
.sv-m-head {
  background: #f1f5f9; text-align: center; padding: 0.3rem 0.4rem;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #334155;
}
.sv-m-row-head {
  display: flex; align-items: center; justify-content: center;
  padding: 0.3rem; background: #f8fafc;
  font-size: 0.65rem; font-weight: 700; color: #334155; text-align: center;
}
.sv-m-cell { padding: 0.45rem 0.6rem; line-height: 1.35; }
.sv-tp, .sv-tn { background: #f4fdf6; }
.sv-fp { color: var(--red); }
.sv-fn { color: #b45309; }

/* Slide 3 — two stats */
.sv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.sv-stat-box {
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  font-family: sans-serif;
}
.sv-stat-box.sv-red  { background: rgba(196,22,42,0.06);  border-left: 3px solid var(--red); }
.sv-stat-box.sv-blue { background: rgba(15,52,96,0.06);   border-left: 3px solid var(--blue); }
.sv-stat-label {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;
}
.sv-red  .sv-stat-label { color: var(--red); }
.sv-blue .sv-stat-label { color: var(--blue); }
.sv-stat-sub  { font-size: 0.7rem; color: #475569; line-height: 1.35; margin-bottom: 0.4rem; }
.sv-stat-nums { display: flex; flex-direction: column; gap: 1px; font-size: 0.8rem; font-weight: 600; color: #1e293b; }

/* Slide 4 — base rate bars */
.sv-bars { font-family: sans-serif; padding: 0.25rem 0; }
.sv-bar-row { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.55rem; }
.sv-bar-label { font-size: 0.75rem; min-width: 140px; color: #334155; }
.sv-bar-track { flex: 1; height: 22px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.sv-bar-fill  { height: 100%; border-radius: 3px; }
.sv-bar-a     { background: var(--red); }
.sv-bar-b     { background: var(--blue); }
.sv-bar-pct   { font-size: 0.75rem; font-weight: 600; min-width: 36px; color: #1e293b; }
.sv-bar-caption { font-size: 0.65rem; color: var(--muted); font-style: italic; margin-top: 0.4rem; }

/* ── Foundational research footer ────────────────────────────────────────── */
.papers-section {
  background: var(--navy);
  color: #ccc;
  padding: 2rem 2rem 2.5rem;
  margin-top: 3rem;
}
.papers-section h3 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.papers-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
.paper-link {
  background: rgba(255,255,255,0.07);
  border-radius: 5px;
  padding: 0.6rem 0.9rem;
  font-size: 0.8rem;
  font-family: sans-serif;
  line-height: 1.4;
}
.paper-link a { color: #7ecfff; text-decoration: none; }
.paper-link a:hover { text-decoration: underline; }
.paper-link .venue { color: #999; font-style: italic; }