:root {
  --page:           #0b2240;   /* Sun Belt navy, from the conference logo */
  --surface-1:      #ffffff;   /* chart / card surface */
  --on-page:        #ffffff;   /* text directly on the navy (15.9:1) */
  --on-page-muted:  #c9d7f2;   /* secondary text on the navy (11.0:1) */
  --text-primary:   #0b0b0b;   /* ink on a card */
  --text-secondary: #52514e;
  --text-muted:     #6f6d68;
  --grid:           #e4e3dd;   /* hairline gridlines */
  --axis:           #b9b7b0;   /* baseline */
  --border:         rgba(11,11,11,0.12);
  --series-1:       #003087;   /* Tech blue */
  --series-2:       #cb333b;   /* Tech red */
  --accent:         #cb333b;   /* the run you're looking at, on the trend line */
  --gold:           #f5a706;   /* Sun Belt gold, from the conference logo (8.6:1 on the navy) */
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--on-page);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: 30px; letter-spacing: -0.01em; }
h2 { font-size: 17px; }
/* Links inherit whichever ground they are standing on. */
a { color: inherit; text-underline-offset: 2px; }

/* ----------------------------------------------------------------- page */
main { max-width: 1200px; margin: 0 auto; padding: 24px 16px 56px; }
.pagehead { margin-bottom: 20px; }
/* Centered title: the Sun Belt logo over two lines of name. The logo sits on a
   white tile so its navy half doesn't vanish into the navy page */
.pagehead { text-align: center; }
.pagehead h1 { display: flex; flex-direction: column; align-items: center;
  line-height: 1.15; }
/* 'Division Predictor' in Sun Belt gold, under the white 'Sun Belt Conference' */
.pagehead h1 span:last-child { color: var(--gold); }
.pagehead .conflogo { height: 72px; width: auto; flex: none; margin-bottom: 12px;
  padding: 8px 12px; background: var(--surface-1); border-radius: 10px; }
@media (max-width: 520px) {
  .pagehead .conflogo { height: 56px; padding: 6px 10px; }
}
.pagehead .sub { margin: 6px 0 0; color: var(--on-page-muted); font-size: 14px; }
/* The year and run dropdowns, centered under the title */
.pickers { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 10px;
  margin-top: 12px; }
.pickers select { font: inherit; font-size: 14px; color: var(--text-primary);
  background: var(--surface-1); border: 2px solid var(--gold); border-radius: 8px;
  padding: 5px 10px; cursor: pointer; min-width: 0; max-width: 100%; }
.pickers select:focus-visible { outline: 2px solid var(--on-page); outline-offset: 2px; }

section { margin-top: 28px; }
section > header { display: flex; align-items: baseline; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px; text-align: center; }
/* A short gold rule under each section title */
section > header h2::after { content: ''; display: block; width: 44px; height: 3px;
  margin: 6px auto 0; border-radius: 2px; background: var(--gold); }
section > header p { margin: 0; color: var(--on-page-muted); font-size: 13px; }

/* Cards are outlined in Sun Belt gold against the navy */
.card { background: var(--surface-1); color: var(--text-primary);
  border: 2px solid var(--gold); border-radius: 10px; padding: 14px 8px 8px; }
.scroller { overflow-x: auto; }
.scroller svg { display: block; width: 100%; height: auto; min-width: 620px; }
.scroller table { min-width: 460px; }

/* ------------------------------------------------ predicted championship */
/* The Sun Belt starburst rises from the bottom of the card, behind the matchup */
.matchup { padding: 18px 16px 22px; text-align: center;
  background: url('starburst.svg') center bottom / auto 100% no-repeat, var(--surface-1); }
.matchup h2 { color: var(--text-muted); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; }
.matchup .pair { display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 6vw, 72px); margin-top: 14px; }
.matchup .side { flex: 0 1 260px; min-width: 0; }
/* Logos sized by height so a square mark and a wide wordmark read alike */
.matchup .side img { display: block; margin: 0 auto; height: clamp(72px, 16vw, 120px);
  width: auto; max-width: 100%; object-fit: contain; }
.matchup .side .name { margin-top: 10px; font-size: 20px; font-weight: 600; }
.matchup .side .odds { color: var(--text-secondary); font-size: 14px; }
/* Gold 'vs', tying the matchup to the starburst behind it */
.matchup .vs { color: var(--gold); font-size: 28px; font-weight: 700; }

/* ---------------------------------------------------- division columns */
/* West then East side by side; stacked in that same order when narrow */
.divgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
@media (max-width: 960px) {
  .divgrid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- tables */
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--grid); }
th { color: var(--text-muted); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tr.is-final td { color: var(--text-secondary); }
/* Opponents are marks, not names -- alt text carries the name for anyone who
   can't see them, and title shows it on hover. Sized by height so a square mark
   and a wide wordmark read alike, with a width cap and object-fit so a wordmark
   scales down rather than running away with the row. */
td.mark, th.mark { text-align: center; }
.teamlogo { display: block; margin: 0 auto; height: 26px; width: auto;
  max-width: 64px; object-fit: contain; }
/* The away '@' hangs off the left of the mark in its own narrow column: inside
   the opponent cell it would be centred along with the logo. */
td.at, th.at { width: 1%; padding-right: 0; text-align: right;
  color: var(--text-muted); white-space: nowrap; }

footer { margin-top: 36px; color: var(--on-page-muted); font-size: 13px; text-align: center; }
/* The gtpdd logo closes out the page, linking home (sized as on i20showdown) */
footer .gtpdd { display: block; width: fit-content; margin: 24px auto 32px; }
footer .gtpdd img { display: block; width: 160px; height: auto; }

/* ------------------------------------------------------------- tooltip */
#sb-tooltip { position: fixed; pointer-events: none; z-index: 30;
  max-width: 300px; padding: 7px 10px; border-radius: 6px; display: none;
  background: rgba(11,34,64,0.96); color: #fff;
  font-size: 13px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,20,60,0.35); }
#sb-tooltip .tip-title { font-weight: 600; }
#sb-tooltip .tip-row { color: var(--on-page-muted); }

/* SVG chrome */
.axis-label { fill: var(--text-muted); font-size: 13px;
  font-variant-numeric: tabular-nums; }
.value-label { fill: var(--text-secondary); font-size: 13px; }
.note-label { fill: var(--text-muted); font-size: 12px; }
.hit { fill: transparent; cursor: pointer; }
.gridline { stroke: var(--grid); stroke-width: 1; }
.baseline { stroke: var(--axis); stroke-width: 1; }

/* ------------------------------------------------------ division tables */
.scroller table.standings { min-width: 420px; }
.scroller table#sb-games { min-width: 900px; }
/* Team names are row headers, but read as body text with the logo inline */
th.team { white-space: nowrap; color: var(--text-primary); font-weight: 400; }
th.team .teamlogo { display: inline-block; vertical-align: middle; height: 22px;
  width: 40px; margin: 0 8px 0 0; }
/* The team's color in the flow chart below, so the table doubles as its key */
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 8px; vertical-align: middle; }
tr.is-home td, tr.is-home th { font-weight: 600; }

/* Title odds as a bar in its own cell: one hue, the number beside it */
td.oddsbar { width: 40%; min-width: 130px; }
.bar { display: flex; align-items: center; gap: 8px; }
.bar .track { flex: 1; height: 10px; background: var(--grid); border-radius: 0 4px 4px 0; }
.bar .fill { height: 100%; background: var(--page); border-radius: 0 4px 4px 0; }
.bar .val { width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
/* Eliminated teams: the row grays out and ELIMINATED sits across an empty bar */
.bar .track { position: relative; }
.elim-label { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: #c62828; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
tr.is-elim th, tr.is-elim td { color: var(--text-muted); }
tr.is-elim .teamlogo, tr.is-elim .swatch { filter: grayscale(1); opacity: 0.45; }

/* ------------------------------------------------------- flow charts */
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 8px 10px;
  font-size: 13px; color: var(--text-secondary); }
.legend span { white-space: nowrap; }
.flow .band { stroke: var(--surface-1); stroke-width: 2; stroke-linejoin: round; }
.flow .current { stroke: var(--text-primary); stroke-width: 1.5; stroke-dasharray: 3 3; }
.flow .band-label { fill: var(--text-primary); font-size: 13px; font-weight: 600; }
.flow .band-value { fill: var(--text-secondary); font-size: 12px;
  font-variant-numeric: tabular-nums; }
.scroller svg.flow { min-width: 460px; }

/* What a game swings: one fixed-width cell per team it moves, so logos, winners
   and percentages each form a column down the table */
td.swing { width: 190px; font-size: 13px; color: var(--text-secondary); }
.swing-item { display: flex; align-items: center; gap: 10px; }
.swing-team { display: block; flex: 0 0 48px; height: 30px; width: 48px; object-fit: contain; }
.outcomes { display: grid; gap: 3px; }
.outcome { display: flex; align-items: center; gap: 5px; font-size: 13px;
  color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.outcome .winner { width: 74px; }
.outcome .val { width: 34px; text-align: right; }
/* Title-chance changes: gains green, losses red (both 5:1+ on white) */
.outcome .val.up { color: #1a7f37; font-weight: 600; }
.outcome .val.down { color: #c62828; font-weight: 600; }
.outcome .val.elim { letter-spacing: 0.03em; }
/* The matchup stays compact; leftover width goes to the swing columns */
#sb-games td.mark, #sb-games th.mark { width: 92px; }
#sb-games tbody th { width: 64px; }
/* Each side's win odds, under its logo; the favorite's stands out */
.odds { margin-top: 3px; font-size: 12px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; }
.odds.fav { color: var(--text-primary); font-weight: 600; }
.abbr { font-size: 12px; font-weight: 600; color: var(--text-primary); }

/* ------------------------------------------------------- preview mode */
/* '?preview': the logo through the championship card, centered on the navy at the
   card's 1200x630, for the script's link-preview screenshot */
.preview main { min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; padding-top: 0; padding-bottom: 0; }
.preview .pagehead { margin-bottom: 16px; }
.preview #sb-standings, .preview #sb-flows, .preview main > section:not(.matchup),
.preview footer, .preview #sb-tooltip { display: none; }