/* ── powerrank.css — PA Milk Society Power Rankings ── */

:root {
  --border: rgba(14,22,32,.18);
  --glow:   0 2px 12px rgba(0,0,0,.18);
  --good:   #4a9c5c;
  --bad:    #c05a4a;
}

body {
  background: #f0e5c8;
}

/* Hide the dark atmospheric glow — doesn't belong on a light page */
.site-glow { display: none; }

/* ── App shell ── */
.pr-app {
  position: relative; z-index: 10;
  max-width: 1400px; margin: 0 auto;
  padding: 1.5rem 2rem 5rem;
  color: var(--ink);
}

/* ── AUTO badge ── */
.pr-auto-badge {
  justify-self: end;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  background: rgba(139,109,56,.12); color: #7a5a18;
  border: 1px solid rgba(139,109,56,.32);
  padding: 4px 8px; border-radius: 2px; font-weight: 700;
}

/* ── Pre-season state ── */
.pr-preseason { text-align: center; padding: 3rem 1rem; }
.pr-preseason h2 { font-family: var(--serif); font-size: 1.8rem; color: var(--gold-deep); margin-bottom: .75rem; }
.pr-preseason p  { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin-bottom: 2rem; }

/* ── Week tabs ── */
.pr-week-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pr-week-tab {
  padding: 4px 10px; border-radius: 2px;
  border: 1px solid rgba(14,22,32,.2);
  color: #837b6a; cursor: pointer;
  background: rgba(14,22,32,.05);
  font-size: 10px; font-family: var(--mono); letter-spacing: .06em;
  transition: background .12s;
}
.pr-week-tab.active {
  border: 1px solid rgba(139,109,56,.5);
  background: rgba(139,109,56,.14);
  color: #5c3e0e;
}

/* ── View tabs ── */
.pr-view-tabs {
  display: flex; gap: 0; margin-bottom: 16px;
  border-bottom: 2px solid rgba(14,22,32,.15);
}
.pr-view-tab {
  padding: 8px 18px; background: transparent; border: none;
  color: #837b6a; cursor: pointer;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color .15s, border-color .15s;
}
.pr-view-tab.active   { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
.pr-view-tab:hover:not(.active) { color: var(--ink-soft); }

/* ── Generated timestamp ── */
.pr-generated {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .15em;
  text-transform: uppercase; color: #837b6a; margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════
   PODIUM — dark cards on parchment: instant contrast
══════════════════════════════════════════════════════ */
.pr-podium { margin-bottom: 2rem; }

/* #1 — full-width hero card */
.podium-hero {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(160deg, var(--ink-card), var(--ink-soft));
  border: 1px solid rgba(232,200,137,.35);
  box-shadow: 0 4px 24px rgba(14,22,32,.2), inset 0 1px 0 rgba(232,200,137,.1);
  padding: 1.5rem 1.75rem;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.podium-hero::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--gold);
}
.podium-hero::after {
  content: 'I.';
  position: absolute; right: 2rem; bottom: -0.5rem;
  font-family: var(--serif); font-style: italic;
  font-size: 7rem; line-height: 1;
  color: rgba(232,200,137,.06);
  pointer-events: none; user-select: none;
}

.podium-hero-left { padding-left: .5rem; }
.podium-rank-label {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .25em;
  text-transform: uppercase; color: var(--gold);
  font-weight: 700; margin-bottom: .4rem;
}
.podium-rank-num {
  font-family: var(--serif); font-style: italic;
  font-size: 3.5rem; line-height: 1; letter-spacing: -.03em;
  color: var(--gold); margin-bottom: .4rem;
}
.podium-hero-name {
  font-family: var(--serif);
  font-size: 1.7rem; line-height: 1.05; letter-spacing: -.01em;
  color: var(--cream); margin-bottom: .25rem;
}
.podium-hero-mgr {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cream-mute); margin-bottom: .4rem;
}
.podium-hero-rec {
  font-family: var(--mono); font-size: .75rem;
  color: var(--cream-soft); font-weight: 600;
}
.podium-hero-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
  position: relative; z-index: 1;
}
.podium-hero-logo {
  width: 72px; height: 72px;
  border-radius: 4px; border: 1px solid rgba(232,200,137,.2);
  background: rgba(0,0,0,.3); object-fit: cover;
  object-position: center 15%;
}
.podium-hero-score {
  font-family: var(--mono); font-weight: 700;
  font-size: 1.4rem; color: var(--gold);
}
.podium-runner-score {
  font-family: var(--mono); font-weight: 700;
  font-size: .9rem; color: var(--cream-soft);
}
.podium-hero-delta .rank-delta { font-size: 11px; }

/* ── Cream accent line — one slim cream rule on every podium card ──
   Sits just above the bottom row to tie all three cards to the cream
   page beneath them.  ~35% opacity so it reads as an accent, not a
   second border. */
.podium-hero-rec {
  padding-top: .55rem;
  border-top: 1px solid rgba(244,235,216,.30);
}
.podium-runner-bottom {
  border-top-color: rgba(244,235,216,.35) !important;  /* was --ink-line */
}

/* #2 & #3 — side-by-side runner cards */
.podium-runners {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.podium-runner {
  background: linear-gradient(160deg, var(--ink-card), var(--ink-soft));
  border: 1px solid var(--ink-line);
  padding: 1rem 1.2rem 1rem 1.4rem;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(14,22,32,.15);
}
.podium-runner::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
}
.p2::before { background: var(--steel); }
.p3::before { background: var(--rust); }

/* Faded Roman numeral watermark — matches the "I." on the hero card. */
.podium-runner::after {
  position: absolute;
  right: .9rem; bottom: -.6rem;
  font-family: var(--serif); font-style: italic;
  font-size: 5rem; line-height: 1;
  pointer-events: none; user-select: none;
}
.p2::after { content: 'II.';  color: rgba(107,138,168,.10); }
.p3::after { content: 'III.'; color: rgba(160,72,48,.11); }

.podium-runner-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: .75rem;
  padding-right: 4.5rem;   /* leave room for the absolute-positioned score */
}
/* Score sits in the top-right corner of the runner cards */
.podium-runner-score {
  position: absolute;
  top: .85rem; right: 1rem;
  z-index: 1;
}
.podium-runner-logo {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 4px; border: 1px solid var(--ink-line);
  background: rgba(0,0,0,.3); object-fit: cover;
  object-position: center 15%;
}
.podium-runner-label {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 700;
  margin-bottom: .2rem;
}
.p2 .podium-runner-label { color: var(--steel); }
.p3 .podium-runner-label { color: var(--rust); }
.podium-runner-name {
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.1;
  color: var(--cream); margin-bottom: .1rem;
}
.podium-runner-mgr {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  color: var(--cream-mute);
}
.podium-runner-bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dotted var(--ink-line); padding-top: .6rem;
}
.podium-runner-rec {
  font-family: var(--mono); font-size: .72rem;
  color: var(--cream-mute); font-weight: 600;
}
.podium-runner-score {
  font-family: var(--mono); font-size: .85rem;
  font-weight: 700; color: var(--cream-soft);
}

/* ══════════════════════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════════════════════ */
.pr-section { margin-top: 2.5rem; }
.pr-section-header {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .75rem; padding-bottom: .85rem; margin-bottom: 1.25rem;
  border-bottom: 3px double rgba(14,22,32,.2);
}
.pr-section-num {
  font-family: var(--mono); font-weight: 700;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
}
.pr-section-title {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem); letter-spacing: -.01em;
  color: var(--ink); margin: 0;
}
.pr-section-meta {
  font-family: var(--mono);
  font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  color: #837b6a;
}

/* ── Rankings section header ── */
.pr-rankings-header {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .75rem; padding-bottom: .85rem; margin-bottom: 1.25rem;
  border-bottom: 3px double rgba(14,22,32,.2);
}

/* ── Conference grid (2-col) ── */
.pr-conf-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem; margin-top: 0;
}

/* ══════════════════════════════════════════════════════
   TABLES — dark cards on parchment page
══════════════════════════════════════════════════════ */
.pr-table-wrap {
  background: var(--ink-card);
  border: 2px solid rgba(14,22,32,.3);
  overflow-x: auto; margin-bottom: 4px;
  box-shadow: 0 2px 16px rgba(14,22,32,.15), 0 0 0 1px rgba(139,109,56,.15);
}
.pr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pr-table th {
  padding: .75rem 1rem; text-align: left;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cream-mute);
  background: var(--ink-soft);
  border-bottom: 1px solid var(--ink-line); white-space: nowrap;
}
.pr-table td {
  padding: .85rem 1rem; border-top: 1px solid var(--ink-line-soft);
  vertical-align: middle;
}
.pr-table tbody tr:hover td { background: rgba(232,200,137,.03); }
.pr-table tr.top-row td { border-top-color: rgba(232,200,137,.12); }

/* Column sizing */
.col-rank   { width: 52px; }
.col-team   { min-width: 160px; }
.col-record { width: 72px; white-space: nowrap; }
.col-pf     { width: 80px; white-space: nowrap; }
.col-score  { width: 72px; white-space: nowrap; }
.col-bars   { width: 160px; }

/* Rank cell */
.rank-cell  { display: flex; align-items: center; gap: 4px; }
.rank-num   { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--cream-soft); min-width: 22px; }
.conf-rank-num { font-size: 1.1rem; }
.rank-delta { font-size: 9px; font-weight: 800; font-family: var(--mono); line-height: 1; }
.delta-up   { color: var(--good); }
.delta-down { color: var(--bad); }
.delta-same { color: var(--ink-line); }

/* Team cell */
.team-cell { display: flex; align-items: center; gap: 8px; }
.team-logo {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--ink-line); background: rgba(0,0,0,.3);
  object-fit: cover; object-position: center 15%;
}
.team-name-main { font-weight: 700; font-size: .9rem; line-height: 1.2; color: var(--cream); }
.team-mgr       { font-size: .72rem; color: var(--cream-mute); }

/* Conf badges */
.conf-badge {
  display: inline-block; font-size: .57rem; padding: 1px 5px;
  border-radius: 2px; border: 1px solid;
  font-family: var(--mono); letter-spacing: .1em; font-weight: 700;
  margin-left: 5px; vertical-align: middle;
}
.conf-badge-whole {
  background: rgba(232,200,137,.1);
  border-color: rgba(232,200,137,.3);
  color: var(--gold);
}
.conf-badge-skim {
  background: rgba(107,138,168,.1);
  border-color: rgba(107,138,168,.3);
  color: var(--steel);
}

/* Score / record / PF cells */
.score-cell { font-family: var(--mono); font-weight: 700; font-size: .85rem; color: var(--gold); }
.pf-cell    { font-family: var(--mono); font-size: .82rem; color: var(--cream-soft); }
.rec-cell   { font-family: var(--mono); font-size: .82rem; color: var(--cream-soft); font-weight: 600; }

/* Factor mini-bars */
.factor-bars { display: flex; flex-direction: column; gap: 2px; }
.fbar-row    { display: flex; align-items: center; gap: 4px; }
.fbar-label  { font-size: 8px; color: var(--cream-mute); font-family: var(--mono); width: 22px; text-align: right; }
.fbar-track  { flex: 1; height: 4px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden; }
.fbar-fill   { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--rust)); }
.fbar-val    { font-size: 7px; color: var(--cream-mute); font-family: var(--mono); width: 22px; }

/* ── Projection table columns ── */
.proj-wl-cell {
  font-family: var(--mono); font-size: .82rem;
  color: var(--cream-soft); font-weight: 700; white-space: nowrap;
}
.proj-pct-cell { white-space: nowrap; }
.proj-bye-cell {
  font-family: var(--mono); font-size: .82rem;
  color: var(--cream-soft); white-space: nowrap;
}
.proj-pct-val {
  font-family: var(--mono); font-size: .78rem;
  color: var(--cream-soft); margin-left: 6px;
}

/* Projection bar */
.proj-bar-wrap {
  display: inline-block; vertical-align: middle;
  width: 80px; height: 5px;
  background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden;
}
.proj-bar {
  height: 100%; border-radius: 2px;
  transition: width .3s ease;
}
.proj-bar.bar-elite { background: linear-gradient(90deg, var(--gold), #d4a96a); }
.proj-bar.bar-good  { background: linear-gradient(90deg, rgba(232,200,137,.8), var(--rust)); }
.proj-bar.bar-mid   { background: linear-gradient(90deg, var(--rust), rgba(160,72,48,.6)); }
.proj-bar.bar-low   { background: rgba(255,255,255,.12); }

/* ── Formula (i) button ── */
.formula-info-btn {
  background: none; border: none; cursor: pointer;
  color: var(--steel); font-size: .78rem;
  padding: 0 2px; vertical-align: middle; transition: color .15s;
}
.formula-info-btn:hover { color: var(--gold-deep); }

/* ── Formula popup ── */
.formula-popup[hidden] { display: none; }
.formula-popup {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 1.5rem;
}
.formula-popup-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
}
.formula-popup-card {
  position: relative; z-index: 1;
  background: var(--ink-card);
  border: 1px solid rgba(232,200,137,.2);
  padding: 1.5rem;
  max-width: 500px; width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  max-height: 85vh; overflow-y: auto;
}
.formula-popup-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.formula-popup-title {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); font-weight: 700;
}
.formula-popup-label {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cream-mute);
  margin-bottom: 8px; font-weight: 700;
  padding-bottom: 4px; border-bottom: 1px solid var(--ink-line);
}
.formula-popup-close {
  background: transparent; border: 1px solid var(--ink-line);
  color: var(--cream); padding: 2px 8px;
  cursor: pointer; font-size: 18px; line-height: 1; transition: background .12s;
}
.formula-popup-close:hover { background: rgba(255,255,255,.06); }

/* ── Formula grid ── */
.pr-formula-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.pr-factor {
  background: var(--ink-soft); border: 1px solid var(--ink-line);
  padding: 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.pr-factor-pts   { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--gold); }
.pr-factor-label { font-weight: 700; font-size: .82rem; color: var(--cream); }
.pr-factor-note  { font-size: .7rem; color: var(--cream-mute); line-height: 1.4; }
.pr-formula-note {
  margin-top: 8px; font-size: .74rem; color: var(--cream-mute); font-style: italic;
}

/* ── Site footer override for light page ── */
.site-footer {
  color: #837b6a;
  border-top-color: rgba(14,22,32,.15);
}

/* ── Responsive ── */
@media (max-width: 800px) {
  .pr-conf-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px) {
  .pr-app { padding: 10px 12px 30px; }

  /* #1 hero — keep its own row but scale everything down */
  .podium-hero { padding: 1.1rem 1.2rem; gap: .75rem; }
  .podium-hero::after { font-size: 4.5rem; right: 1.2rem; }
  .podium-rank-label { font-size: .52rem; letter-spacing: .2em; margin-bottom: .3rem; }
  .podium-rank-num { font-size: 2.4rem; margin-bottom: .25rem; }
  .podium-hero-name { font-size: 1.25rem; }
  .podium-hero-mgr { font-size: .58rem; letter-spacing: .1em; margin-bottom: .3rem; }
  .podium-hero-rec { font-size: .65rem; }
  .podium-hero-right { gap: .35rem; }
  .podium-hero-logo { width: 52px; height: 52px; }
  .podium-hero-score { font-size: 1.1rem; }

  /* #2 + #3 stay side-by-side with equal cells, shrunken */
  .podium-runners { grid-template-columns: 1fr 1fr; gap: 8px; }
  .podium-runner { padding: .75rem .8rem .75rem 1rem; }
  .podium-runner-top { gap: 8px; margin-bottom: .5rem; }
  .podium-runner-logo { width: 32px; height: 32px; }
  .podium-runner-label { font-size: .5rem; letter-spacing: .18em; margin-bottom: .15rem; }
  .podium-runner-name { font-size: .9rem; line-height: 1.05; }
  .podium-runner-mgr { font-size: .55rem; letter-spacing: .08em; }
  .podium-runner-bottom { padding-top: .45rem; }
  .podium-runner-rec { font-size: .6rem; }
  .podium-runner-score { font-size: .72rem; }

  .col-bars { display: none; }
  .col-pf   { display: none; }
  .rank-num { font-size: 1.1rem; }
  .proj-bar-wrap { width: 50px; }

  /* §03 conference tables: tighten so they fit phone width without overflow */
  .pr-conf-grid .pr-table { font-size: 12px; }
  .pr-conf-grid .pr-table th,
  .pr-conf-grid .pr-table td { padding: .55rem .5rem; }
  .pr-conf-grid .pr-table th { font-size: .52rem; letter-spacing: .12em; }
  .pr-conf-grid .col-rank   { width: 32px; }
  .pr-conf-grid .col-team   { min-width: 0; }
  .pr-conf-grid .col-record,
  .pr-conf-grid .col-score  { width: auto; }
  .pr-conf-grid .team-cell  { gap: 6px; }
  .pr-conf-grid .team-logo  { width: 26px; height: 26px; }
  .pr-conf-grid .team-name-main { font-size: .78rem; }
  .pr-conf-grid .team-mgr   { font-size: .58rem; }
  .pr-conf-grid .conf-rank-num { font-size: .9rem; min-width: 16px; }
  .pr-conf-grid .rec-cell,
  .pr-conf-grid .score-cell { font-size: .72rem; }
}
@media (max-width: 420px) {
  .pr-view-tab { padding: 6px 10px; font-size: .63rem; }
  .pr-section-title { font-size: 1.2rem; }

  /* Even tighter for tiny phones so runners still fit two-up */
  .podium-runner { padding: .65rem .65rem .65rem .85rem; }
  .podium-runner-logo { width: 28px; height: 28px; }
  .podium-runner-name { font-size: .82rem; }
  .podium-runner-mgr { font-size: .5rem; }
  .podium-runner-rec { font-size: .55rem; }
  .podium-runner-score { font-size: .68rem; }
}


/* ══════════════════════════════════════════════════════════════════
   ░ INVERTED TABLE TREATMENT ░  — applied after the original styles
   so they override.  This is the "Style A" Stepped Mat from the
   tables-demo: cream interior tables with layered navy frames.

     · .pr-page-masthead   — Style-C masthead at top of the page
     · .pr-table-wrap      — Style-A stepped frame on every table
     · .pr-table-wrap.has-badge — Style-D floating badge for conf tables
     · cell colors flipped for cream backgrounds
   ══════════════════════════════════════════════════════════════════ */

/* ── MASTHEAD NAV (replaces the standard nav + page masthead) ─────────
   Navy frame surrounds a cream interior strip. Inside that strip:
     · Back button (left), AUTO badge (right)
     · Title "Power Rankings." (center), double-rule underline,
       kicker "THE LAKESIDE LEAGUE · 2026" below
   ─────────────────────────────────────────────────────────────────── */
.pr-nav {
  position: sticky; top: 0; z-index: 30;
  background: var(--ink-card);   /* navy shows only along the bottom edge */
  padding: 0 0 2px;
  margin: 0 0 2.5rem;
}
.pr-nav-inner {
  background: var(--cream);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.4rem .9rem;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(14,22,32,.18);
}
.pr-nav-back {
  justify-self: start;
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  color: var(--gold-deep);
  transition: color .15s;
}
.pr-nav-back svg { display: block; }
.pr-nav-back:hover { color: #c89868; }
.pr-nav-center { text-align: center; justify-self: center; }
.pr-nav-title {
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1; letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: .4rem;
  transition: color .15s;
}
.pr-nav-title em { font-style: italic; color: var(--gold-deep); }
.pr-nav-title:hover { color: var(--ink-soft); }
.pr-nav-kicker {
  display: inline-block;
  font-family: var(--mono); font-weight: 700;
  font-size: .56rem; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(14,22,32,.55);
  padding-top: .42rem;
  border-top: 3px double rgba(139,109,56,.55);
}
.pr-nav-auto {
  justify-self: end;
  font-family: var(--mono); font-weight: 700;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(139,109,56,.14);
  border: 1px solid rgba(139,109,56,.4);
  padding: .35rem .65rem;
  border-radius: 2px;
}

/* ── STEPPED-MAT FRAME — main tables (10px outward) ────────────────
   Single central gold line between two navy mats. Tighter drop shadow.
   Cascade is strictly ascending so every layer is visible.
   ─────────────────────────────────────────────────────────────────── */
.pr-table-wrap {
  background: var(--cream);
  background-image: none;
  border: none;
  border-radius: 2px;
  position: relative;
  overflow-x: auto;
  margin: 16px 0 28px;
  box-shadow:
    inset 0 0 0 1px rgba(14,22,32,.18),     /* inner dark hairline */
    0 0 0 1px rgba(232,200,137,.55),        /* gold halo at plate edge */
    0 0 0 3px var(--ink-card),               /* inner navy mat (2px wide) */
    0 0 0 4.5px rgba(232,200,137,.7),       /* single central gold line (1.5px wide) */
    0 0 0 7px var(--ink-card),               /* outer navy mat (2.5px wide) */
    0 0 0 8px rgba(0,0,0,.65),               /* outer dark hairline */
    0 12px 18px -8px rgba(14,22,32,.45),    /* tight drop shadow */
    0  2px  6px -1px rgba(14,22,32,.22);    /* tight near shadow */
}

/* ── Conference tables — even tighter (7px outward) ─────────────── */
.pr-conf-grid .pr-table-wrap {
  margin: 12px 0 18px;
  box-shadow:
    inset 0 0 0 1px rgba(14,22,32,.18),
    0 0 0 1px rgba(232,200,137,.55),
    0 0 0 3px var(--ink-card),               /* inner navy 2px */
    0 0 0 4px rgba(232,200,137,.7),         /* single central gold line */
    0 0 0 5px var(--ink-card),               /* outer navy 1px */
    0 0 0 6px rgba(0,0,0,.6),                /* outer dark hairline */
    0 10px 16px -8px rgba(14,22,32,.40),
    0  2px  5px -1px rgba(14,22,32,.20);
}
/* And give the §03 grid a touch more horizontal gap so the frames breathe */
.pr-conf-grid { gap: 2rem; }

/* ── INNER TABLE CELLS — flip for cream interior ──────────────────── */
.pr-table thead {
  background: rgba(14,22,32,.06);
  border-bottom: 1px solid rgba(14,22,32,.18);
}
.pr-table th {
  color: #6b614e;            /* darker mute, readable on cream */
  background: transparent;
}
.pr-table td {
  color: var(--ink-soft);
  border-top: 1px solid rgba(14,22,32,.08);
}
.pr-table tbody tr:hover td { background: rgba(14,22,32,.04); }
.pr-table tr.top-row td     { border-top-color: rgba(232,200,137,.45); }

/* Rank */
.rank-num   { color: var(--gold-deep); }
.delta-same { color: rgba(14,22,32,.35); }

/* Team */
.team-logo {
  border: 1px solid rgba(14,22,32,.18);
  background: rgba(14,22,32,.08);
}
.team-name-main { color: var(--ink); }
.team-mgr       { color: rgba(14,22,32,.55); }

/* Conference badges (inline, inside team-info) */
.conf-badge-whole {
  background: rgba(139,109,56,.14);
  border-color: rgba(139,109,56,.4);
  color: var(--gold-deep);
}
.conf-badge-skim {
  background: rgba(107,138,168,.14);
  border-color: rgba(107,138,168,.45);
  color: #3d5670;
}

/* Score / record / PF cells */
.score-cell { color: var(--gold-deep); }
.pf-cell    { color: var(--ink-soft); }
.rec-cell   { color: var(--ink-soft); }

/* Factor bars */
.fbar-label { color: #6b614e; }
.fbar-track { background: rgba(14,22,32,.10); }
.fbar-fill  { background: linear-gradient(90deg, var(--gold-deep), var(--rust)); }
.fbar-val   { color: #6b614e; }

/* Projection table cells */
.proj-wl-cell  { color: var(--ink-soft); }
.proj-bye-cell { color: var(--ink-soft); }
.proj-pct-val  { color: var(--ink-soft); }

/* Projection % bar */
.proj-bar-wrap { background: rgba(14,22,32,.10); }
.proj-bar.bar-elite { background: linear-gradient(90deg, var(--gold-deep), #b08550); }
.proj-bar.bar-good  { background: linear-gradient(90deg, rgba(139,109,56,.8), var(--rust)); }
.proj-bar.bar-mid   { background: linear-gradient(90deg, var(--rust), rgba(160,72,48,.55)); }
.proj-bar.bar-low   { background: rgba(14,22,32,.12); }

/* ── Mobile: collapse frames + nav so they don't eat width ──────── */
@media (max-width: 640px) {
  .pr-nav-inner {
    grid-template-columns: auto 1fr auto;
    padding: .8rem 1rem .7rem;
    gap: .6rem;
  }
  .pr-nav-back { width: 28px; height: 28px; }
  .pr-nav-title { font-size: 1.25rem; }
  .pr-nav-kicker { font-size: .48rem; letter-spacing: .22em; }
  .pr-nav-auto { font-size: .52rem; padding: .25rem .5rem; }

  .pr-table-wrap {
    margin: 10px 0 22px;
    box-shadow:
      inset 0 0 0 1px rgba(14,22,32,.18),
      0 0 0 1px rgba(232,200,137,.55),
      0 0 0 3px var(--ink-card),
      0 0 0 4px rgba(232,200,137,.7),       /* single central gold line */
      0 0 0 7px var(--ink-card),
      0 0 0 8px rgba(0,0,0,.65),
      0 10px 14px -8px rgba(14,22,32,.45);
  }
  /* On mobile the conf grid collapses to one column anyway, so use the
     same lightweight stack as the main tables. */
  .pr-conf-grid .pr-table-wrap {
    margin: 8px 0 18px;
  }
  .pr-conf-grid { gap: 1rem; }
}