/* eigenball — minimal, retro-scientific.
   Body type is Google Sans Code; the page reads like a lab notebook. */

:root {
  --color-bg:          #f8f8f6;   /* warm paper */
  --color-bg-alt:      #eeede9;
  --color-text:        #1a1a1a;
  --color-heading:     #0d0d0d;
  --color-muted:       #5f5f5f;
  --color-faint:       #8a8780;
  --color-rule:        #2a2a2a;   /* near-black hairline rules */
  --color-rule-soft:   #d8d4c8;
  --color-accent:      #3a7d85;   /* faded teal-blue: "good" / above-average */
  --color-accent-dark: #2c6168;
  --color-warn:        #b8442b;   /* faded vermillion: "bad" / below-average */
  --color-warn-dark:   #8a3220;
  --color-grid:        #e5e2d6;

  --font-mono: "Google Sans Code", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --font-sans: "Google Sans Code", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }

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

html {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  font-variant-ligatures: none;
}
@media (min-width: 38em) {
  html { font-size: 14px; }
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ----- Type ----- */

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover, a:focus {
  color: var(--color-accent-dark);
  background-color: var(--color-bg-alt);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .4rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-heading);
  font-family: var(--font-mono);
  letter-spacing: 0;
}
h1 { font-size: 1.05rem; }
h2 { font-size: 0.95rem; }

p { margin: 0 0 .85rem; }

hr {
  margin: 1.2rem 0;
  border: 0;
  border-top: 1px solid var(--color-rule);
}

code {
  font-family: var(--font-mono);
  font-size: 100%;
  padding: 0 0.25em;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-rule-soft);
  border-radius: 0;
}

::selection {
  background-color: var(--color-accent);
  color: #fff;
}

/* Small-caps section labels & meta */
.label, .eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
}

/* ----- Layout ----- */

.container {
  max-width: 100%;
  padding: 0 1.25rem;
  margin: 0 auto;
}
@media (min-width: 38em) {
  .container { max-width: 64rem; padding: 0 2rem; }
}

/* Masthead = a single-line "header rule" with a numeric figure id, like
   a journal page header. */
.masthead {
  padding: 0.85rem 0 0.65rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-rule);
}
.masthead-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}
.masthead-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
}
.masthead-title a { color: var(--color-heading); text-decoration: none; }
.masthead-title a:hover { background: none; color: var(--color-accent); }
.masthead-title small {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-left: 0.6rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.site-nav a {
  position: relative;
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.05rem 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -0.75rem;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 1px;
  background: var(--color-rule-soft);
}
.site-nav a:hover { color: var(--color-accent); background: none; }
.site-nav a.active {
  color: var(--color-heading);
  border-bottom-color: var(--color-accent);
}

.page { margin-bottom: 2rem; }

.page-title {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.page-subtitle {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  max-width: 48em;
}

footer.site-footer {
  margin: 4rem 0 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-rule);
  color: var(--color-muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
footer.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }

/* ----- Tables — lab-report style ----- */

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.5rem;
}

table.table {
  margin: 0 auto;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 0.82rem;
  width: 100%;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

.table th {
  font-size: 0.62rem;
  font-weight: 600;
  border-bottom: 1px solid var(--color-rule);
  background-color: transparent;
  color: var(--color-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  user-select: none;
  padding: 0.45rem 0.5rem 0.4rem;
}
.table th:hover {
  color: var(--color-accent);
}

.table th, .table td {
  text-align: center;
  padding: 0.18rem 0.5rem;
}
.table td {
  border-bottom: 1px dotted var(--color-rule-soft);
  background-color: transparent;
  color: var(--color-text);
  white-space: nowrap;
}
.table tr:last-child td { border-bottom: none; }

.table td.right-border { border-right: 1px solid var(--color-rule); }
.table td.left-border  { border-left:  1px solid var(--color-rule); }

.table .prob-cell, .table th.prob-cell { min-width: 56px; }

/* Compact variant — narrower max-width with slightly larger type. */
.table-scroll.compact { max-width: 36rem; margin-left: 0; margin-right: 0; }
.table-scroll.compact table.table { font-size: 0.86rem; }

.clinch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.clinch svg {
  width: 1.2em;
  height: 1.2em;
  display: block;
}

.table .team-cell {
  text-align: left;
  font-family: var(--font-mono);
}
.table .team-cell .abbr {
  font-weight: 700;
  color: var(--color-text);
  margin-right: 6px;
}
.table .team-cell .full {
  color: var(--color-muted);
  font-weight: 400;
}
.table .team-cell a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.table .team-cell a:hover {
  background: none;
  border-bottom-color: var(--color-accent);
}
.table .team-cell a:hover .abbr { color: var(--color-accent); }

@media (max-width: 600px) {
  .table { font-size: 0.72rem; }
  .table td, .table th { padding: 0.18rem 0.35rem; }
  /* Shot-skill leaderboard has 9 fixed-% columns that crush below readable
     at narrow viewports. Force a min-width so .table-scroll's overflow-x
     engages and the table swipes horizontally instead. */
  #shot-table table.table { min-width: 720px; }
}

/* ----- Inline filters / inputs ----- */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.78rem;
}
.filter-row .label { letter-spacing: 0.1em; }

.filter-row input[type="number"],
.filter-row input[type="text"],
.filter-row select {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0.18rem 0.4rem;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: 0;
  color: var(--color-text);
}
.filter-row input[type="number"] { width: 6.5em; }
.filter-row input[type="text"]   { width: 14em; }
.filter-row input:focus,
.filter-row select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ----- Cell variants used by the data tables ----- */

.table .num     { font-variant-numeric: tabular-nums; text-align: center; }
.table .strong  { font-weight: 700; }
.table .name-cell {
  text-align: left;
  font-family: var(--font-mono);
  padding-left: 0.5rem;
}
.table .name-cell a,
.table a.cell-link {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.table .name-cell a:hover,
.table a.cell-link:hover {
  color: var(--color-accent);
  background: none;
  border-bottom-color: var(--color-accent);
}

/* ----- Margin-ruler cell (past predictions on team page) -----
   Inline SVG per row showing predicted (hollow) and actual (filled)
   margin on a shared scale. Header above shows the axis once. */
.table.past-table {
  max-width: 42rem;       /* don't stretch full-width on desktop */
  width: 100%;
  margin: 0 auto;
}
.table.past-table td.vs-cell {
  color: var(--color-faint);
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  width: 1.4rem;
}
.table.past-table th.margin-head {
  vertical-align: bottom;
  padding-bottom: 0.1rem;
}
.table.past-table th.margin-head > div {
  margin-bottom: 0.15rem;
}
.table.past-table td.margin-cell {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  width: 180px;
}
.table.past-table td.wl-cell {
  font-weight: 700;
  width: 1.6rem;
  letter-spacing: 0;
}
.table.past-table td.wl-cell { color: var(--color-text); }
.margin-ruler, .margin-axis {
  display: block;
  margin: 0 auto;
}

/* Hover tooltip for past-predictions rows. */
.row-tooltip {
  position: absolute;
  z-index: 30;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  padding: 0.45rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text);
  pointer-events: none;
  box-shadow: 2px 2px 0 var(--color-rule-soft);
  min-width: 9rem;
}
.row-tooltip .hd {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-faint);
  margin-bottom: 0.15rem;
}
.row-tooltip .hd2 {
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.row-tooltip .ln {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  line-height: 1.3;
}
.row-tooltip .ln .k { color: var(--color-muted); }
.row-tooltip .ln .v { font-variant-numeric: tabular-nums; }
.row-tooltip .wl-win  { color: var(--color-accent); font-weight: 700; }
.row-tooltip .wl-loss { color: var(--color-warn);   font-weight: 700; }
tr.past-row:hover td { background-color: var(--color-bg-alt); }

/* Narrow viewports: shrink ruler so the table doesn't overflow.
   SVG keeps its 180-wide viewBox; CSS-scales uniformly. */
@media (max-width: 480px) {
  .table.past-table td.margin-cell { width: 130px; }
  .margin-ruler, .margin-axis { width: 130px; height: auto; }
  .table.past-table td.wl-cell { width: 1.3rem; padding-left: 0.2rem; padding-right: 0.2rem; }
}
.ruler-legend {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-faint);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin: 0 0 0.35rem;
  padding-left: 0.1rem;
}
.ruler-legend svg { vertical-align: middle; margin-right: 0.1rem; }
.ruler-legend .sep { color: var(--color-rule-soft); margin: 0 0.15rem; }

/* ----- Toggle buttons — terminal-tab style ----- */

.toggle-row {
  margin: 0.75rem 0 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--color-rule);
}

.toggle-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--color-rule);
  border-bottom: none;
  background: var(--color-bg-alt);
  color: var(--color-muted);
  cursor: pointer;
  margin-right: -1px;
  margin-bottom: -1px;
  border-radius: 0;
  transition: background 0.1s, color 0.1s;
}
.toggle-btn.active {
  background: var(--color-bg);
  color: var(--color-heading);
  border-bottom: 1px solid var(--color-bg);
  z-index: 1;
}
.toggle-btn:hover:not(.active) {
  color: var(--color-accent);
}

/* ----- Card list (landing) — section directory ----- */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 1rem 0 2rem;
  border-top: 1px solid var(--color-rule);
}

.card {
  display: block;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--color-rule-soft);
  color: inherit;
  text-decoration: none;
  position: relative;
}
.card:hover {
  background-color: var(--color-bg-alt);
  text-decoration: none;
  color: inherit;
}
.card-title {
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.1rem;
  font-size: 0.88rem;
  letter-spacing: 0;
}
.card-title::before {
  content: attr(data-fig) " · ";
  color: var(--color-accent);
  font-weight: 400;
}
.card-desc {
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.card.coming-soon .card-title::after {
  content: " [draft]";
  color: var(--color-faint);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

/* ----- Small-multiples grid (markets, etc.) ----- */

.sm-grid {
  display: grid;
  gap: 12px;
  margin-top: 0.5rem;
}
.sm-cell {
  border: 1px solid var(--color-rule-soft);
  padding: 0.35rem 0.45rem 0.2rem;
  background: var(--color-bg);
  cursor: crosshair;
}
.sm-cell svg { overflow: hidden; }

/* SVG text — d3 axes / chart labels — share the page font. */
svg text { font-family: var(--font-mono); }
.sm-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.75rem;
  margin-bottom: 0.1rem;
}
.sm-team {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-heading);
}
.sm-val {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.sm-val.pos { color: var(--color-accent); }
.sm-val.neg { color: var(--color-warn); }

/* ----- Pagination ----- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
  font-size: 0.78rem;
}
.pag-nav {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.pag-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-rule-soft);
  background: var(--color-bg);
  color: var(--color-muted);
  cursor: pointer;
  margin-right: -1px;
  border-radius: 0;
}
.pag-btn:hover:not(:disabled):not(.active) {
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.pag-btn.active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
.pag-btn:disabled {
  color: var(--color-faint);
  cursor: not-allowed;
}
.pag-ellipsis {
  padding: 0 0.3rem;
  color: var(--color-faint);
}

/* ----- Misc helpers ----- */

.muted { color: var(--color-muted); }
.small { font-size: 0.78rem; }
.note  {
  color: var(--color-muted);
  font-size: 0.78rem;
  margin: 0.5rem 0 1rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--color-rule-soft);
}

.pct {
  font-size: 0.72em;
  color: inherit;
  margin-left: 1px;
}

/* ----- Team page ----- */

.team-section-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin: 1.6rem 0 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-rule);
}

.team-overview { margin: 1rem 0 0.5rem; }
.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 38em) {
  /* auto-fit means a half-empty trailing row's blocks expand to fill it,
     so 3 blocks → 3 cols, 5 blocks → 3 cols then row 2 spans 2 wide each. */
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.stat-block {
  border: 1px solid var(--color-rule-soft);
  padding: 0.75rem 1rem;
  background: var(--color-bg);
}
.stat-block-title {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}
.stat-table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  width: 100%;
}
.stat-table td {
  padding: 0.18rem 0;
  border-bottom: 1px dotted var(--color-rule-soft);
}
.stat-table tr:last-child td { border-bottom: none; }
.stat-table .stat-label { color: var(--color-muted); }
.stat-table .stat-val   { text-align: right; font-weight: 600; padding-left: 0.6rem; }
.stat-table .stat-val.pct-cell {
  background-clip: padding-box;
  padding: 0.18rem 0.5rem;
}
.stat-table .stat-rank  {
  text-align: right;
  color: var(--color-faint);
  font-size: 0.78rem;
  padding-left: 0.5rem;
  width: 3.2em;
}
.rank { font-variant-numeric: tabular-nums; }

/* ----- Player page ----- */

.player-bio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
  margin: 0.25rem 0 1rem;
  font-size: 0.86rem;
  color: var(--color-text);
}
.player-bio .bio-team {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule-soft);
  padding-bottom: 1px;
}
.player-bio .bio-team:hover {
  color: var(--color-accent);
  background: none;
  border-bottom-color: var(--color-accent);
}
.player-bio .bio-sep { color: var(--color-faint); }
.player-bio .bio-span { color: var(--color-muted); }

/* ----- Playoff bracket ----- */

/* Wrap the 4-column bracket in a horizontal swipe container — at narrow
   viewports the columns sum to ~750px and need to scroll, not collapse. */
#bracket {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bracket-grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: start;
  column-gap: 1.6rem;
  row-gap: 0.55rem;
  margin: 0.4rem 0 1rem;
  position: relative;
}
.bracket-grid.east-only,
.bracket-grid.west-only {
  grid-template-columns: repeat(3, max-content);
}

/* Round wrappers are invisible to layout on desktop — children's explicit
   grid-column / grid-row land them in the parent .bracket-grid as before. */
.round { display: contents; }

/* Round-nav tab bar and per-round east/west labels: hidden on desktop,
   shown only in the mobile swipe layout below. */
.round-nav,
.round-conf-label { display: none; }

/* Narrow viewports: 4 columns can't fit. Switch to a horizontal
   scroll-snap carousel — one round per viewport-width panel, swipe (or
   tap a round-nav button) to advance. Each panel lays out its own
   matchups vertically. */
@media (max-width: 720px) {
  /* Bracket-grid uses width:100vw + negative margin to break out of the
     container's padding. Clip body overflow as a safety net so any
     fractional miscalc never makes the whole page scrollable sideways. */
  html, body { overflow-x: clip; }

  /* Round-nav tab bar above the swipe area. Scrolls horizontally as a
     safety net if labels + viewport don't allow flex:1 division to fit. */
  .round-nav {
    display: flex;
    gap: 0.35rem;
    margin: 0.4rem 0 0.6rem;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .round-nav::-webkit-scrollbar { display: none; }
  .round-nav-btn {
    flex: 1 1 0;
    min-width: 0;
    background: none;
    border: 1px solid var(--color-rule-soft);
    color: var(--color-muted);
    font: inherit;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.4rem 0.2rem;
    cursor: pointer;
    border-radius: 2px;
    white-space: nowrap;
  }
  .round-nav-btn[aria-current="true"] {
    color: var(--color-heading);
    border-color: var(--color-rule);
    font-weight: 600;
  }

  /* Carousel: full-bleed horizontal scroll with mandatory snap. The
     trailing right-padding lets the last (Finals) panel snap to the same
     start-x as every other panel. */
  #bracket {
    overflow-x: visible;
  }
  .bracket-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    column-gap: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 1rem;
    scroll-padding: 0 1rem;
  }
  .bracket-grid::-webkit-scrollbar { height: 4px; }
  .bracket-grid::-webkit-scrollbar-thumb {
    background: var(--color-rule-soft);
    border-radius: 3px;
  }
  .bracket-grid > .bracket-connectors { display: none; }

  /* Each round is one snap panel. Width leaves ~3rem peek of the next
     panel on the right edge so the swipe affordance is visually
     obvious. The trailing scroll-padding keeps the last panel
     snap-aligned at the same start-x as every earlier panel. */
  .round {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 0 0 calc(100vw - 4rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    align-content: start;
  }
  .round + .round { margin-left: 1rem; }
  .bracket-grid { padding-right: 4rem; }

  /* Reset desktop grid placement. Cards keep their fit-content width
     (centered in the panel via margin: 0 auto on .matchup) so the inner
     row stays compact and easy to scan. */
  .round > .matchup,
  .round > .bracket-round-head {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: center;
  }

  /* East / West group labels — small caps separator between halves of
     the bracket so the 4 east + 4 west cards in R1 (etc.) read as two
     groups, not 8 unrelated rows. */
  .round-conf-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-faint);
    text-align: center;
    margin: 0.4rem 0 0;
    padding-bottom: 0.15rem;
    border-bottom: 1px dotted var(--color-rule-soft);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .round-conf-label:first-child { margin-top: 0; }
  /* Round name already shown in the active .round-nav tab — no need to
     repeat it inside the panel. */
  .round > .bracket-round-head { display: none; }
}

/* Hairline orthogonal connectors between parent and child matchups —
   drawn in the inter-column gaps. Lives behind the cards (cards have
   opaque paper bg so paths only show in the gaps). */
.bracket-connectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.bracket-connectors path {
  fill: none;
  stroke: var(--color-rule-soft);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
/* Single-conference views handled in the rule above. */

.bracket-round-head {
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 0.25rem;
  margin-bottom: 0.15rem;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background: var(--color-bg);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Per-card axis tick row above each matchup's team rows. Grid template
   must match .matchup-row exactly so the 4/5/6/7 ticks line up over their
   bucket cells — use rem (root-relative) so the differing font-size on
   this element doesn't reflow the column widths. */
.matchup-axis {
  display: grid;
  grid-template-columns: 0.85rem 2.05rem repeat(4, 0.85rem) 2.4rem;
  column-gap: 0.28rem;
  padding-bottom: 0.18rem;
  margin-bottom: 0.18rem;
  border-bottom: 1px dotted var(--color-rule-soft);
  font-size: 0.58rem;
  color: var(--color-faint);
  letter-spacing: 0.06em;
  text-align: center;
}

.bracket-conf-rule {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-rule);
  margin: 0.25rem 0;
}
.bracket-conf-label {
  grid-column: 1 / -1;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-faint);
  border-bottom: 1px dotted var(--color-rule-soft);
  padding-bottom: 0.15rem;
  margin-top: 0.25rem;
}

/* Each matchup is a small lab-notebook block: hairline top + bottom rule,
   no fill, content sized to be unambiguous in monospace. Cards hug their
   content (fit-content width) and center within their bracket column so
   the cells don't drift to the left edge of a wide column. */
.matchup {
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  padding: 0.35rem 0.5rem 0.3rem;
  background: var(--color-bg);
  font-variant-numeric: tabular-nums;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
.matchup.span2  { align-self: center; }
.matchup.span4  { align-self: center; }
.matchup.spanall{ align-self: center; }

.matchup-row {
  display: grid;
  grid-template-columns: 0.85rem 2.05rem repeat(4, 0.85rem) 2.4rem;
  align-items: center;
  column-gap: 0.28rem;
  font-size: 0.78rem;
  padding: 0.1rem 0;
  color: var(--color-text);
}
.matchup-row + .matchup-row {
  border-top: 1px dotted var(--color-rule-soft);
}
.matchup-row .seed {
  font-size: 0.62rem;
  color: var(--color-faint);
  letter-spacing: 0.08em;
  text-align: center;
}
.matchup-row .team {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0;
}
.matchup-row .team:hover {
  color: var(--color-accent);
  background: none;
  border-bottom-color: var(--color-accent);
}
.matchup-row.lead .team { color: var(--color-heading); }
.matchup-row.dim  .team,
.matchup-row.dim  .seed { color: var(--color-faint); }

.matchup-row .bucket {
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
  background: var(--color-bg);
}
.matchup-row .bucket::after {
  /* CSS-driven tooltip — native title is unreliable on tiny elements
     and has a long delay. data-tip carries the formatted hover text. */
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.18rem 0.45rem;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.05s ease-out;
  z-index: 10;
}
.matchup-row .bucket:hover::after { opacity: 1; }

.matchup-row .winprob {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  padding: 0.05rem 0.2rem;
}

.matchup-meta {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin-top: 0.3rem;
  padding-top: 0.25rem;
  border-top: 1px dotted var(--color-rule-soft);
  text-align: center;
}
.matchup-meta .score-team { color: var(--color-text); font-weight: 700; }

.matchup-more {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.1rem 0;
  background: none;
  border: none;
  border-top: 1px dotted var(--color-rule-soft);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  text-align: center;
}
.matchup-more:hover { color: var(--color-accent); }

.bracket-empty {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 1rem 0;
}


/* Bracket mobile rules live in the (max-width: 720px) block above — keep
   them together so source order matches specificity. */