/* === Baseball Integration — additions on top of styles.css === */

:root {
  --barrier:     #c25555;   /* the line drawn across the game */
  --barrier-hot: #e07070;
  --barrier-tint:rgba(194,85,85,0.07);
  --nl-track:    #d4a64a;   /* Negro Leagues — amber */
  --ml-pre:      #6d614a;   /* MLB before its first Black player — dim olive-tan */
  --ml-post:     #e8e0cf;   /* MLB after — vellum */
}

/* Six-up stat row */
.statrow.six { grid-template-columns: repeat(6, 1fr); }

/* Drop quote — the report's epigraph */
.bb-epi {
  margin: 36px 0 0;
  padding: 30px 0 26px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 56px;
  align-items: end;
}
.bb-epi .q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  line-height: 1.22;
  color: var(--vellum);
  letter-spacing: -0.008em;
  max-width: 920px;
  margin: 0;
}
.bb-epi .q::before {
  content: "“";
  display: inline-block;
  font-size: 56px;
  line-height: 0;
  color: var(--amber);
  vertical-align: -16px;
  margin-right: 8px;
  font-style: normal;
}
.bb-epi .attr {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  line-height: 1.7;
}
.bb-epi .attr .nm { color: var(--vellum-dim); }
.bb-epi .attr .ds { color: var(--muted-2); }

/* === The Record Book chart === */
.tl {
  margin-top: 12px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0 26px;
}
.tl svg { display: block; width: 100%; height: auto; }
.tl text { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; fill: var(--muted); }
.tl text.team {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0;
  fill: var(--vellum-dim);
}
.tl text.team.late { fill: var(--muted); }
.tl text.team-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  fill: var(--muted-2);
}
.tl text.year-axis { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; fill: var(--muted); }
.tl text.banner {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  fill: var(--muted);
  text-transform: uppercase;
}
.tl text.banner.gold { fill: var(--amber); }
.tl text.banner.red  { fill: var(--barrier-hot); }
.tl text.event {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  fill: var(--vellum);
}
.tl text.event-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  fill: var(--muted);
  text-transform: uppercase;
}
.tl .nl-bar      { stroke: var(--nl-track);  stroke-width: 5.5; }
.tl .ml-pre-bar  { stroke: var(--ml-pre);    stroke-width: 5.5; opacity: 0.55; }
.tl .ml-post-bar { stroke: var(--ml-post);   stroke-width: 5.5; }
.tl .row-base    { stroke: var(--rule); stroke-width: 1; }
.tl .barrier {
  stroke: var(--barrier);
  stroke-width: 3;
}
.tl .barrier-fade {
  stroke: var(--barrier);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.7;
}
.tl .barrier-band {
  fill: var(--barrier-tint);
}
.tl .axis-rule { stroke: var(--rule); stroke-width: 1; }
.tl .axis-tick { stroke: var(--muted-2); stroke-width: 1; }
.tl .grid-y    { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 1 4; }
.tl .integration-dot { fill: var(--amber); stroke: var(--ink); stroke-width: 1.5; }
.tl .integration-dot.first { fill: var(--amber-2); }
.tl .integration-dot.last  { fill: var(--barrier-hot); }
.tl .robinson-halo { fill: none; stroke: var(--amber); stroke-width: 1; opacity: 0.7; }
.tl .lag-line { stroke: var(--amber); stroke-width: 1; opacity: 0.35; stroke-dasharray: 1 2; }
.tl .nl-end-tick { stroke: var(--barrier-hot); stroke-width: 1.5; }
.tl .annot-leader { stroke: var(--muted-2); stroke-width: 1; }
.tl .annot-bracket { fill: none; stroke: var(--amber); stroke-width: 1; }

/* === Integration wave (sequential list) === */
.wave {
  margin-top: 8px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.wave-row {
  display: grid;
  grid-template-columns: 32px 156px 1.1fr 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px dotted var(--rule);
}
.wave-row:last-child { border-bottom: none; }
.wave-row .idx {
  font-family: var(--mono); font-size: 10px; color: var(--muted-2); letter-spacing: 0.14em;
}
.wave-row .dt {
  font-family: var(--mono); font-size: 12px; color: var(--amber); letter-spacing: 0.04em;
  white-space: nowrap;
}
.wave-row .tm {
  font-family: var(--serif); font-size: 19px; color: var(--vellum); letter-spacing: -0.005em;
}
.wave-row .pl {
  font-family: var(--serif); font-style: italic; font-size: 15.5px; color: var(--vellum-dim);
}
.wave-row .nt {
  font-family: var(--serif); font-size: 13px; color: var(--muted); text-align: right; max-width: 360px;
}
.wave-row .lag {
  font-family: var(--mono); font-size: 10px; color: var(--muted-2); letter-spacing: 0.04em;
  margin-left: 10px;
}
.wave-row.first .dt { color: var(--amber-2); }
.wave-row.first .tm { color: var(--amber-2); }
.wave-row.last  .dt { color: var(--barrier-hot); }
.wave-row.last  .tm { color: var(--barrier-hot); }

/* === The reshuffled record book === */
.shuf { margin-top: 8px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.shuf-head {
  display: grid;
  grid-template-columns: 170px 1fr 60px 1fr;
  gap: 22px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.shuf-head .pre, .shuf-head .post { color: var(--muted); }
.shuf-head .post { color: var(--amber); }

.shuf-row {
  display: grid;
  grid-template-columns: 170px 1fr 60px 1fr;
  gap: 22px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px dotted var(--rule);
}
.shuf-row:last-child { border-bottom: none; }
.shuf-row .cat {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vellum-dim);
}
.shuf-row .side .nm {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 3px;
}
.shuf-row .side .val {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}
.shuf-row .side .val .yr {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-left: 10px;
  letter-spacing: 0.06em;
  vertical-align: 3px;
}
.shuf-row .pre  .val { color: var(--muted-2); }
.shuf-row .post .val { color: var(--vellum); }
.shuf-row .post .nm  { color: var(--amber); }
.shuf-row .arr {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--amber);
  text-align: center;
}

/* === Coda · the report's closing note === */
.coda {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.coda .body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--vellum-dim);
  max-width: 760px;
}
.coda .body p { margin: 0 0 14px; }
.coda .body p.dropcap::first-letter {
  font-family: var(--serif);
  font-size: 64px;
  float: left;
  line-height: 0.85;
  padding-right: 8px;
  padding-top: 4px;
  color: var(--amber);
}
.coda .sidenote {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.coda .sidenote .h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  display: block;
  margin-bottom: 8px;
}
.coda .sidenote p { margin: 0 0 12px; }

/* === Footer === */
.bb-foot {
  margin-top: 64px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.bb-foot .nav a {
  color: var(--vellum-dim);
  border-bottom: none;
  margin-right: 22px;
}
.bb-foot .nav a:hover { color: var(--amber); }

/* ===== Light theme · baseball overrides ===== */
[data-theme="light"] {
  --barrier:     #B22222;
  --barrier-hot: #CC3333;
  --barrier-tint:rgba(178,34,34,0.08);
  --nl-track:    #A68A30;
  --ml-pre:      #C4BDA9;
  --ml-post:     #1C1C18;
}
[data-theme="light"] .tl text.team      { fill: #3A3830; }
[data-theme="light"] .tl text.team.late { fill: #6B6558; }
[data-theme="light"] .tl text.team-meta { fill: #6B6558; }
[data-theme="light"] .tl text.banner    { fill: #6B6558; }
[data-theme="light"] .tl text.banner.gold { fill: #A68A30; }
[data-theme="light"] .tl text.banner.red  { fill: #B22222; }
[data-theme="light"] .tl text.event     { fill: #1C1C18; }
[data-theme="light"] .tl text.event-tag { fill: #6B6558; }
[data-theme="light"] .tl text.year-axis { fill: #6B6558; }
[data-theme="light"] .tl .integration-dot { stroke: #EDE8DC; }
[data-theme="light"] .tl .barrier-band  { fill: rgba(178,34,34,0.06); }
[data-theme="light"] .coda .body { background: transparent; }
[data-theme="light"] .bb-epi { background: #F5F0E3; }