/* ============================================================
   The Efficiency Frontier - styles
   Editorial / sports-analytics aesthetic
   ============================================================ */
 
:root {
  --bg: #0e1116;
  --bg-soft: #161b22;
  --ink: #e9edf2;
  --ink-soft: #9aa6b2;
  --accent: #ff7a2f;       /* warm court-orange */
  --accent-2: #4cc38a;     /* good = green */
  --line: #2a313b;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --maxw: 960px;
}
 
* { box-sizing: border-box; }
 
html { scroll-behavior: smooth; }
 
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
 
/* ---------- HERO ---------- */
.hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem 8vw 0;
  position: relative;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,122,47,0.18), transparent 60%),
    radial-gradient(800px 500px at 0% 110%, rgba(76,195,138,0.12), transparent 60%),
    var(--bg);
}
 
.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  color: var(--ink-soft);
  margin-top: 1.2rem;
  max-width: 42ch;
}
 
.hero-inner { max-width: 1120px; }
 
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}
 
.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.02em;
}
 
.hero h1 .accent { color: var(--accent); font-style: italic; }
 
.dek {
  font-size: clamp(1.05rem, 2.5vw, 1.5rem);
  color: var(--ink-soft);
  max-width: 38ch;
  margin-top: 1.6rem;
}
 
.dek em { color: var(--ink); font-style: italic; }
 
.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-soft);
  font-size: 1.6rem;
  animation: bob 1.8s ease-in-out infinite;
}
 
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
 
/* ---------- PROSE ---------- */
.prose {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4rem 1.5rem;
  font-size: 1.12rem;
}
 
.prose p { color: var(--ink); }
 
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
 
h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--accent);
  margin-top: 1.8rem;
}
 
/* ---------- VIZ SECTION ---------- */
.viz-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
 
.viz-caption {
  color: var(--ink-soft);
  font-size: 0.98rem;
  max-width: 60ch;
  margin-bottom: 2rem;
}
 
#chart {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem;
}
 
/* force the chart SVG to scale to its container, never overflow it.
   this is what keeps the scrolly grid column from being blown out. */
#chart svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
 
.axis-explainer {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-top: 1rem;
  color: var(--ink);
}
 
.axis-explainer h3 {
  font-size: 1rem;
  margin: 0 0 0.4rem;
}
 
.axis-explainer p {
  margin: 0.25rem 0;
  color: var(--ink-soft);
  line-height: 1.45;
}
 
/* axes */
.axis text { fill: var(--ink-soft); font-size: 12px; }
.axis line, .axis path { stroke: var(--line); }
.axis-label { fill: var(--ink); font-size: 14px; font-weight: 500; }
.median-line { stroke: var(--ink-soft); stroke-dasharray: 4 4; opacity: 0.45; }
.quadrant-label { fill: var(--ink-soft); font-size: 12px; opacity: 0.72; }
 
.dot {
  cursor: pointer;
  transition: r 0.12s ease, opacity 0.35s ease, filter 0.2s ease;
}
.dot:hover { stroke: var(--ink); stroke-width: 1.5px; }
.dot.dim { opacity: 0.12; }
.dot.dimmed { opacity: 0.15; filter: blur(1.5px); pointer-events: none; }
.dot.compare-selected { stroke: var(--accent-2) !important; stroke-width: 2px !important; }
 
/* ---------- VIZ HEADER (two-column) ---------- */
.viz-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
 
.viz-header-text {
  flex: 1 1 320px;
  min-width: 280px;
}
 
.viz-header .net-legend {
  flex: 0 1 460px;
  margin: 0;            /* override the old bottom margin */
}
 
/* ---------- TOOLTIP ---------- */
.tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--ink);
  color: var(--bg);
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
 
.tooltip .t-name { font-weight: 700; }
.tooltip .t-row { color: #444; font-weight: 500; }
 
/* ---------- FOOTER ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
 
/* ---------- NET COLOR LEGEND ---------- */
.net-legend {
  max-width: 520px;
  margin: 0 0 2rem;
}
 
.net-legend-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
}
 
.net-legend-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
 
.net-legend-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
 
.net-bin-legend {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}
 
.net-bin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.16rem;
  min-width: 88px;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
 
.net-bin-swatch {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--bin-color);
  border: 1px solid rgba(0, 0, 0, 0.18);
}
 
.net-bin-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}
 
.net-bin-range {
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.net-bin-desc {
  font-size: 0.67rem;
  color: var(--ink-soft);
  opacity: 0.7;
  line-height: 1.25;
}
 
.net-legend-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
 
.net-legend-link:hover {
  border-bottom-color: var(--accent);
}
 
/* ---------- CONFERENCE FILTER ---------- */
.conf-filter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
 
.conf-dropdown {
  position: relative;
}
 
.conf-button {
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: border-color 0.15s ease;
}
 
.conf-button:hover { border-color: var(--accent); }
 
.conf-caret { font-size: 0.7rem; color: var(--ink-soft); }
 
.conf-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.4rem;
  z-index: 20;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
 
.conf-dropdown.open .conf-menu { display: block; }
 
.conf-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
 
.conf-option:hover { background: rgba(255, 255, 255, 0.04); }
 
.conf-option input {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
 
.conf-rank {
  color: var(--ink-soft);
  font-size: 0.8rem;
  width: 1.6rem;
  flex-shrink: 0;
}
 
.conf-name { flex: 1; }
 
.conf-count {
  color: var(--ink-soft);
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
}
 
.conf-clear {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
 
.conf-clear:hover { color: var(--ink); border-color: var(--ink-soft); }
 
.conf-status {
  color: var(--ink-soft);
  font-size: 0.85rem;
}
 
.conf-footnote {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: -0.5rem 0 1.5rem;
}
 
.conf-footnote a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
 
.conf-footnote a:hover { border-bottom-color: var(--accent); }
 
.glossary-btn {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.6rem 1.3rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.glossary-btn:hover {
  background: var(--accent);
  color: var(--bg);
}

.byline {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-top: 1.8rem;
  letter-spacing: 0.01em;
}
 
.byline-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  margin-right: 0.5rem;
  opacity: 0.7;
}
 
.byline a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.15s ease, border-color 0.15s ease;
}
 
.byline a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.byline-top {
  margin-top: 0.4rem;
  margin-bottom: 0;
}
 
/* ---------- SELECTED DOT ---------- */
.dot.selected {
  stroke: var(--ink);
  stroke-width: 2px;
}
 
/* ---------- TEAM DETAIL PANEL ---------- */
.team-panel {
  margin-top: 1.5rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  min-height: 80px;
}
 
.team-panel-hint {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
  text-align: center;
}
 
.tp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
  margin-bottom: 1.2rem;
}
 
.tp-name {
  font-family: var(--font-display);
  font-size: 1.7rem;
  margin: 0;
  color: var(--ink);
}
 
.tp-sub {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0.3rem 0 0;
}
 
.tp-close {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.3rem;
  transition: color 0.15s ease;
}
 
.tp-close:hover { color: var(--accent); }
 
/* headline stats */
.tp-headline {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
 
.tp-stat {
  flex: 1 1 220px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
 
.tp-stat-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
 
.tp-stat-value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  margin: 0.2rem 0;
}
 
.tp-stat-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
}
 
.tp-stat-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  margin: 0.7rem 0 0.4rem;
  overflow: hidden;
}
 
.tp-stat-bar-fill {
  height: 100%;
  border-radius: 3px;
}
 
.tp-stat-pct {
  font-size: 0.78rem;
  color: var(--ink-soft);
}
 
/* zone table */
.tp-section-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 0.8rem;
}
 
.tp-zone-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1.4fr;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.92rem;
}
 
.tp-zone-head {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
 
.tp-zone-label { color: var(--ink); }
 
.tp-zone-cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
 
.tp-bar {
  display: inline-block;
  height: 9px;
  background: var(--accent);
  border-radius: 4px;
  opacity: 0.55;
}
 
.tp-val {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
 
.tp-pct-chip {
  font-size: 0.72rem;
  font-weight: 600;
  color: #0e1116;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
 
/* ---------- BRUSH ---------- */
.brush .selection {
  fill: var(--accent);
  fill-opacity: 0.12;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
 
.brush .handle { fill: var(--accent); fill-opacity: 0.4; }
 
/* let dot hovers/clicks pass through the brush overlay */
.brush .overlay { cursor: crosshair; }
 
/* ---------- CONFERENCE LINK (homepage status) ---------- */
.conf-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
 
.conf-link:hover { border-bottom-color: var(--accent); }
 
/* ---------- CONFERENCE PROFILE PAGE ---------- */
.conf-nav {
  padding: 1.5rem 8vw;
  border-bottom: 1px solid var(--line);
}
 
.conf-nav-back {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.15s ease;
}
 
.conf-nav-back:hover { color: var(--accent); }
 
.conf-hero {
  padding: 4rem 8vw 3rem;
  background:
    radial-gradient(900px 500px at 85% -20%, rgba(255,122,47,0.16), transparent 60%),
    var(--bg);
}
 
.conf-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  line-height: 1;
  margin: 0.3rem 0 0;
  letter-spacing: -0.02em;
}
 
.conf-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
 
.conf-placeholder {
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 2.5rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.conf-meta-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.conf-meta-btn:hover { color: var(--ink); border-color: var(--ink-soft); }
 
.annot-label {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.annot-input {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  padding: 0.5rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  width: 56px;
  outline: none;
  text-align: center;
  transition: border-color 0.15s ease;
  -moz-appearance: textfield;
  appearance: textfield;
}
.annot-input::-webkit-inner-spin-button,
.annot-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.annot-input:focus { border-color: var(--accent); }
 
#team-search {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  padding: 0.5rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  width: 220px;
  outline: none;
  transition: border-color 0.15s ease;
}
#team-search::placeholder { color: var(--ink-soft); }
#team-search:focus { border-color: var(--accent); }
 
.team-annotation {
  fill: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}
 
/* ---------- SHOT CHART ---------- */
.court-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
  width: 100%;
}
 
.court-svg {
  border-radius: 10px;
  cursor: crosshair;
  display: block;
  max-width: 100%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}
 
.court-legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
 
.court-legend-bar {
  width: 120px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #d73027, #fc8d59, #fee08b, #d9ef8b, #91cf60, #1a9850);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
 
.court-legend-label {
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
 
.court-legend-note {
  font-size: 0.68rem;
  color: var(--ink-soft);
  opacity: 0.55;
  margin-left: 0.2rem;
}
 
/* ============================================================
   STORYTELLING
   ============================================================ */
 
/* ---- scrolly layout: sticky chart + scrolling steps --------------------
   minmax(0, ...) on the columns and min-width:0 on the children is the
   critical part. without it, the chart SVG's intrinsic width becomes the
   column's minimum, which blows out the track and crushes the text column
   into a sliver (the "hamburger" bug). */
.scrolly {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, 0.9fr);
  gap: 2.5rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
  align-items: start;
}
 
.scrolly-graphic,
.scrolly-steps {
  min-width: 0;   /* allow both columns to shrink below content width */
}
 
.scrolly-steps {
  display: flex;
  flex-direction: column;
}
 
/* each step takes most of a screen so the chart has time to react */
.story-step {
  min-height: 85vh;
  display: flex;
  align-items: center;
}
 
.story-step p {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.65;
  background: rgba(20, 22, 28, 0.72);
  border-left: 3px solid var(--accent-2);
  padding: 1.4rem 1.6rem;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0.45;
  transform: translateY(8px);
}
 
.story-step.is-active p {
  opacity: 1;
  transform: translateY(0);
}
 
.story-step strong { color: var(--accent-2); font-weight: 600; }
.story-step em { color: var(--ink); font-style: italic; }
 
/* ---- dot states driven by the story ----------------------------------- */
.dot.story-dim {
  opacity: 0.08 !important;
  pointer-events: none;
}
 
.dot.story-hi {
  stroke: #fff !important;
  stroke-width: 1.5px !important;
}
 
/* story callout labels on the chart */
.story-annotation {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
 
/* ---- free-exploration zone --------------------------------------------- */
.explore-zone {
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 0 1.5rem;
}
 
/* ---- takeaway ----------------------------------------------------------- */
.takeaway {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 4rem;
  padding-top: 2.5rem;
}
 
.takeaway-lead {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent-2);
  margin-bottom: 1.5rem;
}
 
/* ---- mobile / narrow: stack chart on top, steps below ------------------ */
@media (max-width: 820px) {
  .scrolly {
    grid-template-columns: 1fr;
  }
  .scrolly-graphic {
    position: sticky;
    top: 0;
    background: var(--bg);
    padding: 0.75rem 0;
    z-index: 5;
  }
  .story-step {
    min-height: 70vh;
  }
  .story-step p {
    font-size: 1.05rem;
  }
}

.scrolly-graphic {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
}
 
/* hide ONLY the interactive controls, and ONLY during the story.
   the legend (including the color caption) stays put. */
body.story-mode .scrolly-graphic .conf-filter,
body.story-mode .scrolly-graphic .conf-footnote {
  display: none;
}
 
/* compact legend, but KEEP the color caption visible at all times */
.scrolly-graphic .net-legend { margin: 0 0 0.5rem; }
.scrolly-graphic .net-legend-link { display: none; }   /* drop only the link */
.scrolly-graphic .net-legend-note {
  display: block;                /* keep the "colored by NET" caption */
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
}
.scrolly-graphic .net-bin-legend { margin-top: 0.35rem; }
.scrolly-graphic .net-bin {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.28rem 0.5rem;
}
.scrolly-graphic .net-bin-swatch { width: 18px; height: 8px; }
.scrolly-graphic .net-bin-range { display: none; }
 
.scrolly-graphic .viz-header { margin-bottom: 0.5rem; }
.scrolly-graphic .viz-header-text h2 { font-size: 1.5rem; margin-bottom: 0.3rem; }
.scrolly-graphic .viz-caption { margin-bottom: 0.4rem; font-size: 0.85rem; }
 
/* chart fills all remaining height */
.scrolly-graphic #chart {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: 0.5rem;
}
.scrolly-graphic #chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.scrolly {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, 0.9fr);
  gap: 2.5rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
  align-items: start;
}
 
.scrolly-graphic,
.scrolly-steps { min-width: 0; }
 
/* chart is sticky and viewport-tall at ALL times — never changes size */
.scrolly-graphic {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
}
 
.scrolly-steps { display: flex; flex-direction: column; }
 
.story-step {
  min-height: 85vh;
  display: flex;
  align-items: center;
}
 
/* controls: hidden only during the story, return at the end. Because the
   chart fills leftover flex space, showing the controls costs only the
   control row's height. To keep the chart from shrinking at all, the
   controls are absolutely positioned at the bottom of the graphic so they
   overlay rather than push — see below. */
body.story-mode .scrolly-graphic .conf-filter,
body.story-mode .scrolly-graphic .conf-footnote {
  display: none;
}
 
/* chart fills all remaining height, identical in both states */
.scrolly-graphic #chart {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: 0.5rem;
}
.scrolly-graphic #chart svg {
  width: 100%;
  height: 100%;
  display: block;
}
 
/* after the story, the controls appear in a compact row ABOVE the chart
   (in the header zone), where the height was already reserved by the
   legend — so the chart's flex space barely changes */
/* after story: controls overlay the top of the chart card instead of
   stacking above it, so they take ZERO height from the chart */
body:not(.story-mode) .scrolly-graphic {
  position: sticky;          /* keep as-is */
}

body:not(.story-mode) .scrolly-graphic #chart {
  position: relative;        /* anchor for the absolute controls */
}

body:not(.story-mode) .scrolly-graphic .conf-filter {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
  z-index: 15;
  margin: 0;
  gap: 0.4rem;
  background: rgba(14, 17, 22, 0.85);
  backdrop-filter: blur(6px);
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
}
body:not(.story-mode) .scrolly-graphic .conf-footnote {
  display: none;            /* drop the footnote to save height; link is in legend area */
}

body:not(.story-mode) .scrolly-graphic .conf-menu {
  position: absolute;
  z-index: 20;
}
 
/* compact legend always, so header height is constant */
.scrolly-graphic .net-bin-range { display: none; }
.scrolly-graphic .net-legend-link { display: none; }
.scrolly-graphic .net-legend-note { display: block; font-size: 0.78rem; }
.scrolly-graphic .net-bin {
  flex-direction: row; align-items: center; gap: 0.4rem;
  min-width: 0; padding: 0.28rem 0.5rem;
}
.scrolly-graphic .net-bin-swatch { width: 18px; height: 8px; }
.scrolly-graphic .net-bin-desc { font-size: 0.62rem; opacity: 0.65; }
.scrolly-graphic .viz-header { margin-bottom: 0.5rem; }
.scrolly-graphic .viz-header-text h2 { font-size: 1.5rem; margin-bottom: 0.3rem; }
.scrolly-graphic .viz-caption { margin-bottom: 0.4rem; font-size: 0.85rem; }

/* after story: hide the redundant title + caption only.
   the controls already sit above the chart, so this just frees the space
   they were overlapping with. Do NOT reposition the controls. */
body:not(.story-mode) .scrolly-graphic .viz-header-text {
  display: none;
}

/* after story: hide the dot color legend as well (reader has context) */
body:not(.story-mode) .scrolly-graphic .net-legend {
  display: none;
}

/* prominent handoff to the exploration page at the end of the story */
.explore-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding: 0.9rem 1.5rem;
  background: var(--accent-2);
  color: #0e1116;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 24px rgba(76, 195, 138, 0.3);
}
.explore-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(76, 195, 138, 0.45);
}
.explore-cta-arrow { font-size: 1.4rem; }
.explore-cta-sub {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  opacity: 0.7;
}

/* explore page: cap the chart size so the full plot is visible */
.viz-section #chart {
  max-width: 760px;
  margin: 0 auto;
}

/* explore page: keep all 5 NET bins on one row */
.viz-section .net-bin-legend {
  flex-wrap: nowrap;
}
.viz-section .net-bin {
  min-width: 0;
  flex: 1 1 0;
}

/* ============================================================
   25 / 25 PROOF SECTION
   --proof-w controls the width of the squares + head row together.
   Raise it to enlarge the whole graphic; lower to shrink.
   ============================================================ */
.proof-section {
  --proof-w: 680px;        /* size dial for the squares + head row */
  max-width: 920px;
  margin: 4rem auto 0;
  padding: 0 1.5rem;
  text-align: center;
}

.proof-intro {
  max-width: 60ch;
  margin: 0.4rem auto 1.8rem;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.proof-2525 {
  padding: 1.6rem 1.8rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.proof-row { margin-bottom: 1.5rem; }
.proof-row:last-of-type { margin-bottom: 0.9rem; }

.proof-row-head,
.proof-squares {
  max-width: var(--proof-w);
  margin-left: auto;
  margin-right: auto;
}

.proof-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.55rem;
}

.proof-squares { width: 100%; height: auto; display: block; }

.proof-row-label { font-size: 1.05rem; color: var(--ink-soft); }

.proof-row-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.proof-count-full { color: var(--accent-2); }
.proof-count-partial { color: var(--ink-soft); }

.proof-caption {
  max-width: var(--proof-w);
  margin: 0.9rem auto 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* shared: bolded words inside the proof text */
.proof-row-label strong,
.proof-caption strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   EMBEDDED EXPLORER (iframe at bottom of story page)
   ============================================================ */
.explore-embed {
  max-width: 1200px;
  margin: 4rem auto 0;
  padding: 0 1.5rem 4rem;
  text-align: center;
}

.explore-embed-intro {
  max-width: 62ch;
  margin: 0.4rem auto 1.6rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.explore-frame {
  width: 100%;
  height: 900px;        /* tall enough that the chart + panel never scroll internally */
  border: none;          /* no box border */
  border-radius: 0;
  background: transparent;
  display: block;
  overflow: hidden;
}

.explore-embed-link {
  margin-top: 1rem;
  font-size: 0.95rem;
}
.explore-embed-link a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.explore-embed-link a:hover { border-bottom-color: var(--accent); }

.proof-tip {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  background: var(--ink);
  color: var(--bg);
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.1s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  text-align: left;
  max-width: 260px;
}
.proof-tip-name { font-weight: 700; }
.proof-tip-row { color: #444; }
.proof-tip-row strong { color: #111; font-weight: 700; }

/* ---------- COMPARE WIDGET ---------- */
.tp-compare-widget {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.tp-compare-widget-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.tp-compare-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  padding: 0.55rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.tp-compare-input::placeholder { color: var(--ink-soft); }
.tp-compare-input:focus { border-color: var(--accent-2); }

.tp-vs {
  font-family: var(--font-body);
  font-size: 0.7em;
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0 0.4rem;
}
.tp-compare-courts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.tp-compare-side .court-wrap { width: 100%; }
.tp-compare-side .court-svg { width: 100% !important; height: auto !important; }
.tp-compare-side .court-legend { display: none; }
.tp-compare-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 0.4rem;
}
.tp-zones-compare .tp-zone-row {
  grid-template-columns: 1.4fr 1fr 1fr;
}