/* ---------------------------------------------------------------------
   Big League Service Time Tracker — styles
   Palette / tokens follow the studio dataviz reference palette:
   status colors are reserved for eligibility state, categorical blue is
   the sole accent, and light/dark both derive from the same ramps.
   --------------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.viz-root {
  color-scheme: light;
  --page-plane:      #f9f9f7;
  --surface-1:       #fcfcfb;
  --text-primary:    #0b0b0b;
  --text-secondary:  #52514e;
  --text-muted:      #898781;
  --gridline:        #e1e0d9;
  --baseline:        #c3c2b7;
  --border:          rgba(11,11,11,0.10);
  --accent:          #2a78d6;
  --accent-wash:     #eaf2fc;
  --status-good:     #0ca30c;
  --status-good-wash:#e6f6e6;
  --status-warning:  #b3790f;
  --status-warning-wash: #fdf1da;
  --status-serious:  #c85a35;
  --status-serious-wash: #fbe6dc;
  --status-critical: #d03b3b;

  background: var(--page-plane);
  color: var(--text-primary);
  min-height: 100vh;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root {
    color-scheme: dark;
    --page-plane:      #131313;
    --surface-1:       #1c1c1b;
    --text-primary:    #f0efe9;
    --text-secondary:  #c3c2b7;
    --text-muted:      #898781;
    --gridline:        #2e2e2c;
    --baseline:        #383835;
    --border:          rgba(255,255,255,0.10);
    --accent:          #3987e5;
    --accent-wash:     #16283d;
    --status-good:     #0ca30c;
    --status-good-wash:#123512;
    --status-warning:  #fab219;
    --status-warning-wash: #3a2c0c;
    --status-serious:  #ec835a;
    --status-serious-wash: #3c2216;
    --status-critical: #e66767;
  }
}
:root[data-theme="dark"] .viz-root {
  color-scheme: dark;
  --page-plane:      #131313;
  --surface-1:       #1c1c1b;
  --text-primary:    #f0efe9;
  --text-secondary:  #c3c2b7;
  --text-muted:      #898781;
  --gridline:        #2e2e2c;
  --baseline:        #383835;
  --border:          rgba(255,255,255,0.10);
  --accent:          #3987e5;
  --accent-wash:     #16283d;
  --status-good:     #0ca30c;
  --status-good-wash:#123512;
  --status-warning:  #fab219;
  --status-warning-wash: #3a2c0c;
  --status-serious:  #ec835a;
  --status-serious-wash: #3c2216;
  --status-critical: #e66767;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px clamp(16px, 4vw, 40px) 8px;
}
.page-header-inner h1 {
  margin: 0 0 4px;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.bm-ball {
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.6;
}
.bm-seam {
  fill: none;
  stroke: var(--status-critical);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 60ch;
}
.theme-toggle {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  cursor: pointer;
  flex: none;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle .icon { width: 17px; height: 17px; }
.icon-moon { fill: currentColor; stroke: none; }
.icon-sun  { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* Which glyph to show mirrors the token blocks above: the button offers the
   theme you would switch TO, and under the default "system" setting that is
   only knowable from prefers-color-scheme. */
.icon-sun { display: none; }
.icon-moon { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .theme-toggle .icon-sun  { display: inline-block; }
  :root:where(:not([data-theme="light"])) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"]  .theme-toggle .icon-sun  { display: inline-block; }
:root[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: inline-block; }

.disclaimer-banner {
  margin: 0 clamp(16px, 4vw, 40px) 20px;
  padding: 10px 14px;
  background: var(--accent-wash);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.disclaimer-icon { color: var(--accent); flex: none; }

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 clamp(16px, 4vw, 40px) 24px;
}
.stat-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.stat-tile .value {
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: proportional-nums;
  line-height: 1.1;
}
.stat-tile .label {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.stat-tile.accent-good .value   { color: var(--status-good); }
.stat-tile.accent-warning .value{ color: var(--status-warning); }
.stat-tile.accent-serious .value{ color: var(--status-serious); }
.stat-tile.accent-critical .value{ color: var(--status-critical); }
/* Incomplete history is a coverage caveat, not a failure. It used to render
   in the same red as a critical status, which read as an error on a figure
   that is merely a floor. */
.stat-tile.accent-muted .value { color: var(--text-secondary); }
.stat-tile.accent-muted { background: transparent; border-style: dashed; }

/* Census counts describe the whole database; the eligibility tiles describe
   the players on a 40-man today. They are different kinds of fact and used
   to be seven identical tiles all shouting at once. */
.census {
  margin: 0 clamp(16px, 4vw, 40px) 14px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.census b { color: var(--text-primary); font-weight: 650; }
.census .sep { color: var(--text-muted); margin: 0 0.5em; }
.census-note { color: var(--text-muted); }

/* --- Incomplete-history flag ------------------------------------------- */
/* Marks players who debuted before the transaction feed begins, whose
   service time is a floor rather than an estimate. Deliberately quiet --
   it should read as a footnote, not an error. */
.no-data {
  color: var(--text-muted, #8b949e);
  font-style: italic;
  border-bottom: 1px dotted currentColor;
  cursor: help;
  text-decoration: none;
}

/* Quiet by design. In red it read as an error on the row; what it actually
   says is that some of the figure is presumed rather than read, which is a
   footnote about confidence. */
.partial-flag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  border-bottom: 1px dotted var(--text-muted);
  cursor: help;
  margin-left: 0.4em;
  text-decoration: none;
}

/* --- Pagination --------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.25rem 0 0.5rem;
  flex-wrap: wrap;
}

.page-btn {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--gridline);
  background: var(--surface-1);
  color: var(--text-primary);
  cursor: pointer;
  min-height: 40px; /* comfortable tap target on a tablet */
}

.page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.page-btn:disabled { opacity: 0.4; cursor: default; }

.page-status {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 clamp(16px, 4vw, 40px) 16px;
}
.controls input,
.controls select {
  font: inherit;
  font-size: 0.9rem;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
}
#search-input { flex: 1 1 220px; min-width: 180px; }

.table-wrap {
  margin: 0 clamp(16px, 4vw, 40px) 28px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
  background: var(--surface-1);
}

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

thead th {
  position: sticky;
  top: 0;
  background: var(--surface-1);
  text-align: left;
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--gridline);
  cursor: pointer;
  white-space: nowrap;
}
thead th:hover { color: var(--text-primary); }
/* A permanent, faint caret on every sortable column, so the table advertises
   that it sorts instead of only confirming it after a click. */
thead th[data-key]::after {
  content: " ▾";
  opacity: 0.25;
}
thead th[aria-sort="ascending"]::after  { content: " ▴"; opacity: 1; color: var(--accent); }
thead th[aria-sort="descending"]::after { content: " ▾"; opacity: 1; color: var(--accent); }

tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gridline);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--accent-wash); }

.num-col, td.num-col { font-variant-numeric: tabular-nums; text-align: right; }

/* --- Service time: the number is the product ---------------------------
   It used to render at the same size and weight as the club name two
   columns to its left. It is now the largest thing in the row, with the
   years and the days typographically separated, over a track that encodes
   the same value against the two thresholds that give it meaning:
   3.000 (arbitration) and 6.000 (free agency).

   The track is deliberately coarse -- 4px, no gradient, no sub-pixel
   precision. These are estimates and a hairline-accurate bar would imply a
   measurement this project cannot make. */
.svc-col { min-width: 132px; }
.svc {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  width: 108px;
}
.svc-num { font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.svc-years {
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.svc-days { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.svc-track {
  /* Spans, so they need blockifying: width and height do not apply to an
     inline box and the meter rendered as a hairline without this. */
  display: block;
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--gridline);
}
.svc-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--text-muted);
  width: calc(var(--pct, 0) * 1%);
}
/* The 3.000 arbitration line, at the midpoint of a 0-6.000 track. Drawn
   after the fill so it stays visible across it. */
.svc-track::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--baseline);
}
.svc-fill.f-good    { background: var(--status-good); }
.svc-fill.f-warning { background: var(--status-warning); }
.svc-fill.f-serious { background: var(--status-serious); }
.svc-fill.f-accent  { background: var(--accent); }
.svc-none { color: var(--text-muted); }

.player-name { font-weight: 600; }

/* --- 3. Club identity ---------------------------------------------------
   A club's primary color as a stripe down the row. Identity only: the club
   is still named in text beside it, because a color alone is unreadable to
   anyone who cannot distinguish it, and several clubs share a navy. */
tbody td.player-name {
  border-left: 4px solid var(--club, transparent);
}
/* The same color again, next to the club name -- where the eye already is
   when it is looking for the club. A 4px stripe at the far left of a wide
   row is easy to miss. */
.club-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: 7px;
  background: var(--club, transparent);
  vertical-align: baseline;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root .club-dot {
    background: var(--club-d, var(--club, transparent));
  }
}
:root[data-theme="dark"] .viz-root .club-dot {
  background: var(--club-d, var(--club, transparent));
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root tbody td.player-name {
    border-left-color: var(--club-d, var(--club, transparent));
  }
}
:root[data-theme="dark"] .viz-root tbody td.player-name {
  border-left-color: var(--club-d, var(--club, transparent));
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-good    { color: var(--status-good);    background: var(--status-good-wash); }
.badge-warning { color: var(--status-warning); background: var(--status-warning-wash); }
.badge-serious { color: var(--status-serious); background: var(--status-serious-wash); }
.badge-neutral { color: var(--text-secondary); background: var(--gridline); }

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.pill-yes { color: var(--status-good); border-color: var(--status-good); }
.pill-no  { color: var(--text-muted); }

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 32px 12px;
}

.page-footer {
  margin: 0 clamp(16px, 4vw, 40px) 40px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  max-width: 80ch;
}
.page-footer p { margin: 0 0 6px; }
.page-footer a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.page-footer a:hover, .page-footer a:focus-visible { border-bottom-color: var(--accent); }

@media (max-width: 640px) {
  .page-header { flex-direction: row; align-items: center; }
  .subtitle { display: none; }
  .page-header-inner h1 { font-size: 1.25rem; }
  .brand-mark { width: 24px; height: 24px; }
  .svc-col { min-width: 96px; }
  .svc { width: 78px; }
  .svc-years { font-size: 1.05rem; }
  .census { font-size: 0.78rem; }

  /* Measured on a 390x844 phone: the table began 755px down the page, so
     the first screen was header, disclaimer, tiles and filters and no data
     at all. The disclaimer keeps its full text -- it is the one thing on
     this page that must not be quietly shrunk away -- and the space comes
     out of the chrome around it instead. */
  .disclaimer-banner { font-size: 0.8rem; padding: 8px 11px; margin-bottom: 14px; }

  /* Four tiles as 2x2 rather than 2x2 with desktop padding. */
  .stat-tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
  .stat-tile { padding: 9px 11px; }
  .stat-tile .value { font-size: 1.25rem; }
  .stat-tile .label { font-size: 0.68rem; margin-top: 2px; }

  /* Five stacked full-width controls was 218px of filters above the data.
     Search stays full width; the four selects pair up. */
  .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #search-input { grid-column: 1 / -1; min-width: 0; }
  .controls select { min-width: 0; width: 100%; font-size: 0.85rem; padding: 7px 8px; }
}

/* --- player profile ----------------------------------------------------- */

.player-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid transparent;
}
.player-link:hover,
.player-link:focus-visible {
  border-bottom-color: var(--accent);
  outline: none;
}

body.profile-open { overflow: hidden; }

.profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 1rem;
  background: rgba(11, 11, 11, 0.55);
  overflow-y: auto;
}
.profile-overlay[hidden] { display: none; }

.profile-panel {
  position: relative;
  width: min(56rem, 100%);
  /* A flex item defaults to min-width:auto, so a wide season table would
     stretch the panel past the viewport instead of scrolling inside it.
     This is what keeps the last column reachable on a phone. */
  min-width: 0;
  max-width: 100%;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.profile-close {
  position: absolute;
  top: 0.5rem;
  right: 0.65rem;
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.profile-close:hover { color: var(--text-primary); }

.profile-header h2 { margin: 0 0 0.15rem; font-size: 1.4rem; }
.profile-sub { margin: 0 0 1rem; color: var(--text-secondary); font-size: 0.9rem; }

.profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0 0 1.1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--gridline);
  border-bottom: 1px solid var(--gridline);
}
.profile-facts div { margin: 0; }
.profile-facts dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.profile-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.profile-total { font-size: 1.35rem; font-weight: 600; }

.profile-gap,
.profile-empty,
.profile-loading {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  background: var(--status-warning-wash);
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.5;
}
.profile-loading { background: var(--accent-wash); }

/* --- 7. Career strip ----------------------------------------------------
   The season table below it is accurate and it opens as twenty-two rows of
   digits. This says the same thing in one glance: how much each season was
   worth, which club it was with, and -- crucially -- which seasons are
   presumed rather than read. Verlander's ten hatched bars followed by
   eleven solid ones is the whole argument for the source column, made
   visible.  */
.career-strip {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 86px;
  margin: 0 0 1.1rem;
  padding: 18px 2px 0;
  border-bottom: 1px solid var(--baseline);
}
.cs-season {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  position: relative;
  cursor: help;
}
.cs-bar {
  height: calc(var(--h, 0) * 1%);
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--club, var(--accent));
}
/* A season with no credited days still gets a row in the table; here it is
   a baseline tick, so the gap in a career is visible as a gap. */
.cs-season.cs-zero .cs-bar { background: var(--gridline); height: 2px; }
/* Same lightened twin the row stripes use: several primaries are navies
   that disappear against a dark plane. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root .cs-bar {
    background-color: var(--club-d, var(--accent));
  }
}
:root[data-theme="dark"] .viz-root .cs-bar {
  background-color: var(--club-d, var(--accent));
}
/* Hatching, not a different hue: presumed seasons are the same quantity
   held with less confidence, and a separate color would read as a separate
   category of thing. */
.cs-season.cs-presumed .cs-bar {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.55) 0 2px,
    transparent 2px 5px
  );
  opacity: 0.75;
}
.cs-year {
  font-size: 0.58rem;
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
/* Where the running total crossed 3.000 and 6.000 -- the two dates that
   actually change what a player is entitled to. */
.cs-cross {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--accent);
}
.cs-cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 6px;
  background: var(--accent);
}
.career-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: -0.7rem 0 1.1rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.career-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.career-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--text-secondary);
  display: inline-block;
}
.career-legend i.lg-zero { height: 2px; background: var(--baseline); border-radius: 0; }
.career-legend i.lg-presumed {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.55) 0 2px,
    transparent 2px 5px
  );
  opacity: 0.75;
}

.season-table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  /* The last column is the first thing to go on a narrow screen, so let the
     table scroll inside the panel rather than clipping it. */
  overflow-x: auto;
}

.season-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.season-table th,
.season-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--gridline);
  text-align: left;
}
.season-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
}
.season-table .num-col { text-align: right; font-variant-numeric: tabular-nums; }
.season-table tr.season-empty td { color: var(--text-muted); }
.season-zero { color: var(--text-muted); }

.season-note {
  cursor: help;
  color: var(--accent);
  text-decoration: none;
  border: 0;
}

.src-pill {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  white-space: nowrap;
  cursor: help;
  border: 1px solid transparent;
}
.src-read { background: var(--status-good-wash); color: var(--status-good); }
.src-carry { background: var(--accent-wash); color: var(--accent); }
.src-presumed { background: var(--status-warning-wash); color: var(--status-warning); }

.profile-trim {
  margin: -0.5rem 0 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.profile-foot {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.src-short { display: none; }

@media (max-width: 640px) {
  .src-full { display: none; }
  .src-short { display: inline; }
  .profile-panel { padding: 1.15rem 0.85rem 1rem; }
  .profile-facts { gap: 1rem; }
  /* Five columns in ~330px. Everything gives a little so the "how do we
     know this" column stays on screen -- it is the column that keeps the
     numbers honest, and hiding it would be the wrong trade. */
  .season-table { font-size: 0.72rem; }
  .season-table th, .season-table td { padding: 0.3rem 0.25rem; }
  .src-pill { padding: 0.05rem 0.3rem; font-size: 0.66rem; }
  .career-strip { height: 66px; gap: 1px; }
  /* Two-digit years collide below about twelve seasons of width. The bars
     still carry the shape, which is what the strip is for. */
  .cs-year { display: none; }
}