/* ============================================================
   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); }

.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); }

/* --- 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;
}

.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-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;
}

/* ============================================================
   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: #fff;
}
/* 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;
  color: var(--team-accent);
  border: 2px solid var(--team-accent);
  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: 20px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
}
.share-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  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: 8px 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; }