/* ============================================================
   SHARED SITE STYLES
   Structural/component styles matching the splash page's
   notebook/graph-paper aesthetic. Colors and fonts pull from
   theme.css's custom properties — change values there, not here,
   for a global restyle.
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--paper);
  /* Faint graph-paper grid, matching the splash page's background texture. */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* A short hand-drawn-style wavy divider, used under page titles.
   Reusable everywhere via <div class="squiggle"></div>. */
.squiggle {
  width: 140px;
  height: 14px;
  margin: 4px 0 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 12 2, 22 8 T 42 8 T 62 8 T 82 8 T 102 8 T 122 8 T 140 8' fill='none' stroke='%238B6FE8' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  border-top: 8px solid var(--purple-banner);
  border-bottom: 2px solid var(--ink);
  background: var(--surface);
  flex-wrap: wrap;
}

.site-nav .brand {
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--purple);
  white-space: nowrap;
}

.nav-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}

.nav-tab {
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  border: 2px solid transparent;
}

.nav-tab.active {
  color: #fff;
  background: var(--purple);
}

.nav-team-select {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  max-width: 180px;
}

/* --- League View standings table --- */

.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 42px;
  letter-spacing: -0.01em;
  color: var(--purple);
  margin: 40px 0 0;
  text-shadow: 3px 3px 0 var(--purple-light);
}

.page-sub {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 28px;
}

.standings-head {
  display: grid;
  grid-template-columns: 5% 32% 7% 8% 8% 14% 1fr;
  gap: 6px;
  padding: 0 10px 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-soft);
  border-bottom: 3px solid var(--ink);
}

.standings-row {
  display: grid;
  grid-template-columns: 5% 32% 7% 8% 8% 14% 1fr;
  gap: 6px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-left: 6px solid var(--row-accent, var(--muted));
  border-radius: var(--radius);
  margin-top: 6px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

.standings-row:hover { border-color: var(--purple); }

/* A team whose exact final standings position is mathematically fixed
   -- not just "clinched a category" but "nothing can move this exact
   row anymore." Outline (not an extra border) so it doesn't disturb
   the existing border-left team-color accent or the grid's spacing. */
.standings-row.is-locked { outline: 3px solid var(--ink); outline-offset: 2px; }

.standings-row .rank { font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.standings-row .name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
}
.standings-row .name .name-full,
.standings-row .name .name-short {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Full team name shows at desktop/tablet widths; abbreviated code
   takes over below the mobile breakpoint (see @media block). */
.name-short { display: none; }
.standings-row .num { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 800; }
.standings-row .num.mp { color: var(--ink-soft); font-weight: 600; } /* de-emphasized so Pts stays the primary read */
.standings-row .gd-pos { color: var(--turf); }
.standings-row .gd-neg { color: var(--brick); }
.standings-row .odds { text-align: right; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.standings-row .range { font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* OPTIONAL: hide the "final points range" column on mobile if it ever
   feels too cramped. Currently OFF (range stays visible at every
   width, by design). To turn it on, uncomment BOTH lines below —
   the display:none AND the matching 6-column grid — otherwise the
   column will still be hidden but its grid track will sit there
   empty, leaving a dead gap where it used to be. */
/*
@media (max-width: 600px) {
  .standings-row .range,
  .standings-head > div:nth-child(6) { display: none; }
  .standings-head,
  .standings-row { grid-template-columns: 5% 30% 10% 12% 15% 1fr; }
}
*/
.standings-row .status { font-size: 10px; font-weight: 800; line-height: 1.2; }
.status-wooden-spoon { color: var(--brick); font-weight: 900; font-style: italic; }
.status-eliminated { color: var(--brick); }
.status-shield { color: var(--purple); font-weight: 900; }
.status-home-field { color: var(--purple); font-weight: 700; }
.status-clinched { color: var(--turf); }
.status-in-control { color: var(--turf); }
.status-danger { color: var(--brick); font-weight: 700; }
.status-bubble { color: var(--coral); }
.status-alive { color: var(--brass); }

.playoff-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 4px;
  padding: 0 12px;
}
.playoff-line .rule { flex: 1; height: 4px; background: var(--coral); border-radius: 999px; }
.playoff-line .label { font-size: 11px; font-weight: 800; color: var(--coral); text-align: center; line-height: 1.3; }
/* Second line under PLAYOFF LINE: the league-wide magic number. Muted
   and small so it reads as a note on the line, not a competing label. */
.playoff-line .floor-note { display: block; font-size: 10px; font-weight: 700; color: var(--ink-soft); }
.playoff-line .floor-note[hidden] { display: none; }

/* --- Playoff bracket ---
   Mobile-first: .bracket-tree is a single vertical column by default,
   in real reading order (qf-left, sf-left, qf-right, sf-right, final
   -- see the DOM order render_bracket_section() outputs). The @media
   block below is the ONLY thing that regroups those same 5 blocks into
   the traditional left/right bracket shape with connector lines, using
   grid placement rather than relying on DOM order -- same markup both
   ways, no separate templates. */
.bracket-section { margin-top: 32px; padding-top: 24px; border-top: 3px solid var(--ink); }

.bracket-tree { display: flex; flex-direction: column; gap: 20px; margin-top: 12px; }
.bracket-col { display: flex; flex-direction: column; gap: 12px; }

.bracket-match {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
}
/* Same "exact position mathematically fixed" signal as .standings-row.is-locked
   -- only lit once BOTH teams/feeders are individually locked. */
.bracket-match.is-locked { outline: 3px solid var(--ink); outline-offset: 2px; }

.bracket-team {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 4px 8px;
  min-width: 0;
  border-left: 4px solid var(--row-accent, var(--muted));
}
.bracket-seed { font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 18px; }
.bracket-team-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bracket-vs { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; padding: 2px 0 2px 26px; }

/* A colored dot standing in for the full tier-pill badge -- same
   status color (matches .status-* everywhere else), a fraction of the
   width, so the row keeps room for the full team name. Full tier text
   is still there as a hover tooltip (see render_bracket_section()).
   Same filled-vs-outline split as .tier-pill: a solid disc for the 5
   pure-math "settled" tiers (.is-filled), a hollow colored ring for
   the probability-based reads (in_control/danger/bubble/alive). */
.bracket-tier-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 2px solid currentColor;
  background: transparent;
}
.bracket-tier-dot.status-wooden-spoon,
.bracket-tier-dot.status-eliminated,
.bracket-tier-dot.status-danger { color: var(--brick); }
.bracket-tier-dot.status-shield,
.bracket-tier-dot.status-home-field { color: var(--purple); }
.bracket-tier-dot.status-clinched,
.bracket-tier-dot.status-in-control { color: var(--turf); }
.bracket-tier-dot.status-bubble { color: var(--coral); }
.bracket-tier-dot.status-alive { color: var(--brass); }

.bracket-tier-dot.is-filled { background: currentColor; border-color: transparent; }

/* Semifinal/final placeholder blocks -- "winner of X or Y," never a
   real team, since real playoff results aren't tracked (yet). Logo
   chips instead of spelled-out names: the full "1 NJ/NY Gotham FC or
   8 Seattle Reign" text wrapped badly in these narrower columns. */
.bracket-pending { text-align: center; }
.bracket-pending .bracket-vs { padding-left: 0; }
.bracket-round-label { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.bracket-winner-of {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 0;
}
.bracket-mini-team { display: inline-flex; align-items: center; gap: 4px; }
.bracket-or { font-size: 10px; font-weight: 700; color: var(--muted); }
.bracket-note { font-size: 10px; font-weight: 600; font-style: italic; color: var(--muted); margin-top: 6px; }
.bracket-venue { margin-top: 4px; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: var(--purple); }
.bracket-final { border-color: var(--purple); }

@media (min-width: 768px) {
  /* The bracket's 5-column shape needs ~1150px+ minimum width (full
     team names + logos + connector gaps don't shrink), which is well
     past .wrap's 880px page-wide cap -- left unconstrained, the grid
     was overflowing past the right edge of the page instead of
     respecting it. Breaking .bracket-section out of .wrap's width here
     and giving it its own independently-centered, wider column (up to
     1200px) instead, so it isn't fighting the rest of the page's
     narrower measure. Standard "full-bleed section" trick: span the
     full viewport width, then re-center the content with padding.
     Mobile is untouched -- this rule only exists at this breakpoint. */
  .bracket-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-left: max(20px, calc((100vw - 1200px) / 2));
    padding-right: max(20px, calc((100vw - 1200px) / 2));
  }

  /* qf-left | sf-left | qf-right | sf-right | final -- final sits
     visually in the middle column despite coming last in the DOM, so
     mobile keeps a sane top-to-bottom reading order while desktop gets
     the traditional shape. align-items:center vertically centers the
     1-box sf/final columns against the 2-box qf columns' height. */
  .bracket-tree {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr 0.9fr 0.7fr 1.3fr;
    align-items: center;
    column-gap: 28px;
    row-gap: 12px;
  }
  /* Mirrored, outward-in shape: qf-left, sf-left, final (center),
     sf-right, qf-right -- decoupled from DOM order via explicit
     grid-column, since the DOM stays in mobile reading order. */
  .bracket-col-qf-left  { grid-column: 1; grid-row: 1; position: relative; }
  .bracket-col-sf-left  { grid-column: 2; grid-row: 1; position: relative; }
  .bracket-col-final    { grid-column: 3; grid-row: 1; position: relative; }
  .bracket-col-sf-right { grid-column: 4; grid-row: 1; position: relative; }
  .bracket-col-qf-right { grid-column: 5; grid-row: 1; position: relative; }

  /* Connector lines: a vertical bar joining the 2 QF cards' rough
     vertical centers, bridged by a horizontal stub into the gap on
     each side; plain horizontal stubs both sides of each semifinal
     reaching to/from the final. Approximate (assumes the 2 QF cards
     are close in height), tuned by eye rather than measured -- fine
     for a decorative line. */
  .bracket-col-qf-left::after,
  .bracket-col-qf-right::after {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    width: 2px;
    background: var(--line);
  }
  .bracket-col-qf-left::after { right: -14px; }
  .bracket-col-qf-right::after { left: -14px; }

  .bracket-col-sf-left::before,
  .bracket-col-sf-left::after,
  .bracket-col-sf-right::before,
  .bracket-col-sf-right::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 2px;
    background: var(--line);
  }
  .bracket-col-sf-left::before { left: -14px; }
  .bracket-col-sf-left::after { right: -14px; }
  .bracket-col-sf-right::before { left: -14px; }
  .bracket-col-sf-right::after { right: -14px; }
}

/* --- Team View --- */

/* --- Team Permutations two-column layout --- */
.permutation-container {
  display: flex;
  gap: 20px;
}
.pick-path {
  flex: 1 1 50%;
  min-width: 0; /* lets flex children shrink below their content's natural width instead of overflowing */
}
.projected-standings {
  flex: 1 1 30%;
  min-width: 0;
}

.team-hero {
  background: color-mix(in srgb, var(--team-accent) 16%, var(--paper) 84%);
  border: 3px solid var(--team-accent);
  border-radius: 20px;
  padding: 40px 28px 32px;
  color: var(--ink);
  text-align: center;
  max-width: var(--max-width);
  margin: 24px auto 0;
}

.team-hero .back-link {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 20px;
  font-family: var(--font-body);
  text-decoration: none;
  display: inline-block;
}

.team-hero .team-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

/* Today's tier pill under "Currently" -- the regular .tier-pill scaled up
   so it reads as part of the hero, not a table cell. */
.team-hero .hero-tier { margin: 6px 0 2px; }
.team-hero .hero-tier .tier-pill {
  font-size: 16px;
  padding: 6px 18px;
}
.team-hero .hero-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

.team-hero .hero-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--team-accent-dark, var(--ink));
}

.team-hero .hero-magic {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 2px solid var(--team-accent-dark, var(--ink));
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.team-hero .hero-magic--clinched { background: var(--turf); border-color: var(--turf); color: #fff; }

.team-hero .hero-delta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
}

.team-hero .stat-row {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 22px;
  font-family: var(--font-body);
}
.team-hero .stat-row .stat-value { font-size: 20px; font-weight: 800; }
.team-hero .stat-row .stat-label { font-size: 11px; font-weight: 600; color: var(--ink-soft); }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 4px;
}

.section-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--surface);
}

.match-row .date { font-size: 12px; font-weight: 700; color: var(--muted); }
.match-row .opponent { font-size: 15px; font-weight: 800; }

.pill-group {
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--line-strong);
}

.pill-group button {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink);
}

.pill-group button.active {
  background: var(--team-accent);
  color: #fff;
}

.scenario-toggle {
  margin-top: 28px;
  margin-bottom: 8px;
}
.scenario-toggle .label {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}
.scenario-toggle .pill-group { width: fit-content; }
.scenario-toggle .pill-group button {
  padding: 8px 14px;
  font-size: 12px;
}
.scenario-toggle .pill-group button.active {
  background: var(--purple);
}

.projected-row {
  display: grid;
  grid-template-columns: 28px 26px 1fr 56px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-left: 6px solid var(--row-accent, var(--muted));
  border-radius: var(--radius);
  margin-top: 6px;
  background: var(--surface);
  transition: transform 340ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .projected-row {
    transition: none;
  }
}

.projected-row.is-me {
  background: var(--purple-light);
  font-weight: 800;
  border-color: var(--purple);
}

.projected-row.playoff-cutoff {
  border-bottom: 4px solid var(--coral);
}

.projected-row .rank { font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.projected-row .name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projected-row .pts { text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.disclaimer {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 16px;
  margin-bottom: 24px;
}

.loading-note {
  font-size: 12px;
  font-weight: 700;
  color: var(--purple);
  font-style: italic;
}

/* --- Pick counter + reset (universal, all breakpoints) --- */
.pick-path-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.pick-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  white-space: nowrap;
}
.picks-counter {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.reset-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.reset-btn:hover {
  background: var(--line);
}

/* --- Delusion-o-meter line — a fixed-size box at all times (border
   and padding never change), so activating/deactivating the message
   never shifts the match-list below it. Only color/background swap
   with .is-delulu, which don't affect layout. --- */
.delusion-line {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  margin: 0 0 16px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-size: 14px;
  font-weight: 800;
  font-style: italic;
  color: var(--ink-soft);
}
.delusion-line.is-delulu {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 12%, var(--surface) 88%);
  color: var(--purple);
}

/* --- Sticky standings (mobile only — toggled via JS/matchMedia,
   never shown at wider widths regardless of the JS state).
   Uses visibility (not display) so its own offsetHeight stays
   stable whether it's showing or not — toggling display instead
   caused a feedback loop right at the standings boundary (hidden ->
   height reads 0 -> condition says show -> now visible -> height
   reads real value -> condition says hide -> repeat). --- */
.sticky-standings {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  gap: 4px;
  padding: 12px 16px;
  background: var(--paper);
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  visibility: hidden;
  pointer-events: none;
}
.sticky-standings.is-visible {
  visibility: visible;
  pointer-events: auto;
}
.sticky-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sticky-standings .sticky-rank {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  font-variant-numeric: tabular-nums;
}
.sticky-standings .sticky-counter {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.sticky-message {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  font-style: italic;
  color: var(--purple);
}

/* While the sticky bar is showing, hide its in-page duplicates
   (counter, delusion line, tier badge) so the same info isn't
   printed twice on screen at once. Reset stays visible — it's not
   duplicated, it's an action. */
body.sticky-active #picks-counter,
body.sticky-active #delusion-line {
  display: none;
}

.tier-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 2px solid currentColor;
  font-size: 12px;
  font-weight: 800;
}

/* The 5 pure-math tiers (arithmetic certainty, not a simulated odds
   read) get the INVERTED/filled treatment — solid background, white
   text, no outline — same wooden_spoon/eliminated/shield/home_field/
   clinched set as TIER_BADGE_FILLED in assets/share/share-card.php,
   so the live Status column pill and the shared PNG card agree on
   which tiers read as "locked in" vs. "still odds-based." The
   probability tiers (in_control/danger/bubble) and the pre-simulation
   "alive" fallback stay the plain outline .tier-pill above. */
.tier-pill.status-wooden-spoon,
.tier-pill.status-eliminated,
.tier-pill.status-shield,
.tier-pill.status-home-field,
.tier-pill.status-clinched {
  border-color: transparent;
  color: #FFFFFF;
}
.tier-pill.status-wooden-spoon,
.tier-pill.status-eliminated { background-color: var(--brick); }
.tier-pill.status-shield,
.tier-pill.status-home-field { background-color: var(--purple); }
.tier-pill.status-clinched { background-color: var(--turf); }

/* Shared team logo sizing — used by index.php, team.php, and
   permutations.php via render.php's team_logo_html() instead of each
   page picking its own size independently. Pages needing a different
   size add a modifier class (e.g. team-logo-lg) rather than
   redefining width/height from scratch. */
.team-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
}
.team-logo-lg {
  width: 32px;
  height: 32px;
}
.team-logo-sm {
  width: 18px;
  height: 18px;
}

/* ============================================================
   RESPONSIVE — phone-width fixes.
   The standings/projected tables use fixed-width grid columns
   that add up to more than a phone screen has room for; this
   redefines the grid with fewer/narrower columns below 600px
   rather than letting it overflow or squish illegibly.
   ============================================================ */

html, body {
  overflow-x: hidden; /* safety net: never allow page-level horizontal scroll/zoom */
}

/* ============================================================
   BREAKPOINT ORDER MATTERS: 1024px (medium/tablet) comes FIRST,
   600px (mobile) comes LAST. Both conditions match on a real phone
   (e.g. 375px matches "max-width:1024px" AND "max-width:600px"), and
   for any property both blocks set, CSS gives the win to whichever
   rule appears LATER in the file — so the narrower, more specific
   600px tier has to come second, or its mobile-specific tuning gets
   silently overridden by the wider tablet tier. (Found this while
   reconciling — the two blocks were in the opposite order before.)
   ============================================================ */

@media (max-width: 1024px) {
  .wrap { padding: 0 14px; }

  .site-nav {
    padding: 10px 14px;
    gap: 8px;
  }
  .site-nav .brand {
    width: 100%;
    text-align: center;
  }
  .nav-tab {
    font-size: 12px;
    padding: 6px 10px;
    width: 100%;
  }
  .nav-tabs {
    display: flex; /* was "inline-table" — that's not a flex value, so it was silently
                       disabling the flex-wrap/gap below it. Flex is what makes those work. */
    gap: 4px;
    flex: 1;
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
  .nav-team-select {
    display: inline-block;
    max-width: 100%;
    font-size: 12px;
  }

  .page-title { font-size: 28px; }
  .squiggle { width: 100px; }

  /* Full team names are still shown at this tier (only the narrower
     600px "mobile" breakpoint switches to abbreviated codes), so the
     name column keeps a healthy share of the row. */
  .standings-head,
  .standings-row {
    grid-template-columns: 5% 24% 8% 9% 11% 15% 1fr;
    gap: 6px;
    padding: 0 10px 8px;
    font-size: 11px;
  }
  .standings-row { padding: 8px 10px; }
}

@media (max-width: 600px) {
  .nav-team-select {
    max-width: 100%;
  }

  /* Below this width, team names switch from the full name to their
     short code — full names simply don't fit comfortably at phone
     widths without crowding out the numbers next to them. */
  .name-full { display: none; }
  .name-short { display: inline; }

  .standings-head,
  .standings-row {
    grid-template-columns: 5% 18% 9% 10% 13% 15% 1fr;
  }

  .team-hero {
    padding: 28px 16px 24px;
    margin: 16px auto 0;
  }
  .team-hero .hero-number { font-size: 52px; }
  .team-hero .stat-row {
    flex-wrap: wrap;
    gap: 16px;
  }

  /* Team Permutations' two-column layout stacks to one column here —
     there isn't room for pick-path and projected-standings side by
     side on a phone screen. */
  .permutation-container {
    display: block;
  }
  .pick-path,
  .projected-standings {
    width: 100%;
  }

  .match-row { flex-wrap: wrap; gap: 8px; }
  .pill-group button { padding: 7px 12px; font-size: 12px; }

  .projected-row {
    grid-template-columns: 20px 20px 1fr 44px;
    font-size: 12px;
  }
  .projected-row .team-logo {
    width: 20px;
    height: 20px;
  }
}


/* ============================================================
   FOOTER — mirrors the top nav's functionality, plus mission
   statement, disclaimer, and copyright.
   ============================================================ */

.site-footer {
  margin-top: 56px;
  border-top: 8px solid var(--purple-banner);
  background: var(--surface);
  padding: 32px 0 40px;
}

.footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.footer-nav .nav-team-select { margin-left: 8px; }

.footer-mission {
  max-width: 560px;
  margin: 0 auto 20px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.6;
}

.footer-disclaimer {
  max-width: 560px;
  margin: 0 auto 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.6;
}

.footer-copyright {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 600px) {
  .site-footer { padding: 24px 0 32px; margin-top: 36px; }
  .footer-mission,
  .footer-disclaimer { font-size: 13px; padding: 0 16px; }
}

/* ============================================================
   SHARE GRAPHICS — buttons + lightbox modal
   Buttons reuse the same padding/radius/weight as the original
   inline-styled "This Week's What If" button so spacing matches.
   ============================================================ */
.share-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  background: var(--ink);
  color: #fff;
}
.share-btn-team {
  background: var(--team-accent);
  color: var(--team-accent-ink, #fff); /* dark on light accents (e.g. Washington yellow) */
}
/* Secondary action -- the clinch card is a positive-only extra next to
   the main "share this week's what if" button, so it reads as a lower-
   emphasis option (outline instead of filled) rather than a second
   equally-weighted CTA. */
.share-btn-clinch {
  background: transparent;
  /* accent-dark, not accent: the hero is a tint of the accent, so an
     accent-colored outline/text vanishes on light accents. */
  color: var(--team-accent-dark, var(--ink));
  border: 2px solid var(--team-accent-dark, var(--ink));
  padding: 8px 18px;
}
.hero-actions { text-align: center; margin-top: 20px; }
.hero-actions .share-btn + .share-btn { margin-left: 12px; }
@media (max-width: 600px) {
  .hero-actions .share-btn { display: block; width: fit-content; margin: 10px auto 0; }
}
.share-pickpath-wrap { margin: 20px 0; }

.share-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 43, 0.7);
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.share-modal-overlay.open { display: flex; }
.share-modal {
  background: var(--paper);
  border-radius: var(--radius);
  border: 3px solid var(--line);
  padding: 32px 20px 20px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
}
.share-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}
.share-modal-imgwrap {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0 16px;
}
.share-modal img { max-width: 100%; border-radius: 10px; display: none; }
.share-modal-loading { font-family: var(--font-body); color: var(--ink-soft); font-size: 14px; }

/* ============================================================
   LEAGUE PERMUTATIONS PAGE — moved out of permutations.php's inline
   <style> block during the efficiency pass, so page CSS lives in one
   place (this file) instead of being split across the stylesheet and
   individual PHP templates. .perm-logo (28px) was dropped here — it
   was dead code, orphaned when the page switched to the shared
   team_logo_html() helper (which uses .team-logo, 26px, defined
   above) instead of its own inline <img class="perm-logo">.
   ============================================================ */
.perm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-left: 6px solid var(--row-accent, var(--muted));
  border-radius: var(--radius);
  margin-top: 8px;
  background: var(--surface);
  flex-wrap: wrap;
  transition: background 200ms ease, transform 340ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .perm-row {
    transition: background 200ms ease;
  }
}
/* Once every match shown for a team has a pick, tint the row so it
   visually reads as "done" -- subtle, doesn't touch the accent
   border or the W/D/L pill colors. */
.perm-row.row-complete {
  background: rgba(20, 23, 43, 0.07);
}
.perm-fixed {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 220px;
}
.perm-rank { font-size: 13px; font-weight: 800; color: var(--muted); width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.perm-name { font-size: 13px; font-weight: 800; min-width: 44px; }
.perm-pts { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
.perm-gd { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.perm-tier {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  width: 112px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* .perm-btn / .perm-btn-reset: NOT yet unified with the shared
   .share-btn / .reset-btn (see styleguide.php's Buttons section) --
   .perm-btn duplicates .share-btn exactly (safe to drop, unused
   currently), but .perm-btn-reset renders visibly larger than
   .reset-btn, which is a real design decision still pending, not a
   safe cleanup. Left as its own rule for that reason. */
.perm-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  border: none;
}
.perm-btn-reset {
  border: 2px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
}
.perm-matches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 6px;
  flex: 1 1 auto;
}
.perm-match { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.perm-match img {
  width: 20px; height: 20px; object-fit: contain;
  transition: filter 200ms ease, opacity 200ms ease;
}
/* Per-selection dim: once a match has a result picked, gray down its
   opponent logo so the eye is drawn to what's still unpicked. The
   W/D/L pill itself stays fully colored -- that's the actual
   indicator of what was chosen. */
.perm-match.match-picked img {
  filter: grayscale(1);
  opacity: 0.4;
}
.perm-pill-group { display: flex; gap: 2px; }
.perm-pill-group button {
  width: 20px; height: 20px; font-size: 10px; font-weight: 800;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 4px; cursor: pointer; line-height: 1; padding: 0;
}
.perm-pill-group button.active-w { background: var(--turf); border-color: var(--turf); color: #fff; }
.perm-pill-group button.active-d { background: var(--brass); border-color: var(--brass); color: #fff; }
.perm-pill-group button.active-l { background: var(--brick); border-color: var(--brick); color: #fff; }
@media (max-width: 768px) {
  .perm-fixed { min-width: 100%; }
  .perm-matches { width: 100%; }
}

/* ============================================================
   WHAT IF PAGE — moved out of whatif.php's 49 scattered inline
   style="" attributes during the efficiency pass. Per-branch colors
   (win=turf, draw=brass, loss=brick, "right now"=purple) stay
   dynamic via --branch-color / --result-color custom properties
   (same pattern as --row-accent elsewhere) since they genuinely vary
   per render; everything else here was static and had no reason to
   live inline.
   ============================================================ */
.whatif-branch-card {
  margin-top: 36px;
  padding: 20px;
  border: 3px solid var(--branch-color, var(--ink));
  border-radius: var(--radius);
  background: var(--surface);
}
.whatif-branch-title {
  color: var(--branch-color, var(--ink));
  margin-bottom: 10px;
}
.whatif-accent { color: var(--branch-color, var(--ink)); }

.whatif-rank-headline { font-size: 24px; font-weight: 800; margin-bottom: 4px; }

.whatif-dream-box {
  margin-bottom: 20px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--purple-light);
}
.whatif-dream-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--purple);
  margin-bottom: 6px;
}
.whatif-recipe-list { padding-left: 20px; font-size: 13px; line-height: 1.7; margin: 0; }
.whatif-recipe-list--with-companion { margin-bottom: 14px; }

.whatif-section-title-spaced { margin-top: 32px; }
.whatif-subhead-tight { margin-top: -4px; }

.whatif-verdict-safe { font-size: 16px; color: var(--turf); font-weight: 700; margin: 8px 0; }
.whatif-verdict-out { font-size: 16px; color: var(--brick); font-weight: 700; margin: 8px 0; }
.whatif-subheading-turf {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--turf); margin: 16px 0 8px;
}
.whatif-subheading-brick {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--brick); margin: 20px 0 8px;
}
.whatif-muted-note { font-size: 14px; color: var(--muted); }
.whatif-caveat { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.whatif-playoff-watch-list { padding-left: 20px; font-size: 14px; line-height: 1.8; margin: 0; }

.whatif-stats-row {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
.whatif-stat-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.whatif-stat-value { font-size: 13px; font-weight: 700; color: var(--muted); }
.whatif-stat-sub { font-size: 10px; color: var(--muted); }
.whatif-stat-median { font-size: 11px; font-weight: 600; }

.whatif-matchlist-toggle-wrap { text-align: center; margin: 32px 0 0; }
.whatif-matchlist { display: none; margin-top: 16px; }
.whatif-upcoming-tag { color: var(--muted); font-size: 12px; }

.whatif-doubleheader-box {
  margin-top: 24px; padding: 20px; border-radius: var(--radius);
  background: var(--purple-light); border: 3px solid var(--purple);
}
.whatif-doubleheader-title { color: var(--purple); margin-bottom: 8px; }
.whatif-doubleheader-sub { margin-bottom: 14px; }
.whatif-doubleheader-label { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }

.whatif-already-played-box {
  padding: 14px 18px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--result-color) 12%, var(--paper) 88%);
  border: 2px solid var(--result-color);
  margin-top: 20px;
}
.whatif-result-label { font-weight: 800; color: var(--result-color); text-transform: uppercase; }
.whatif-no-games-sub { margin-top: 32px; }
.whatif-followup-sub { margin-top: 8px; }
/* hero-number defaults to 80px for a short number like "#14" -- too
   large for a full sentence like "No games this week". */
.team-hero .hero-number--message { font-size: 32px; }
.whatif-threshold-list { padding-left: 20px; font-size: 14px; line-height: 1.9; margin: 0; }
.whatif-playoff-watch-heading { font-size: 18px; margin: 24px 0 6px; }