/* ==========================================================================
   Rankings: the Power list and its chrome (hero, filters, podium, Kings of Tiers), the League / Merit / Race tables and their drill-downs, monthly stories, the rating guide, the monthly breakdown and Doughnuts.
   Moved out of app.css unchanged (docs/architecture/PARALLEL_DEVELOPMENT_SPLIT.md).
   ========================================================================== */

  .tierbar{
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding-bottom:2px;
  }
  .searchwrap{
    position:relative;
  }
  .searchwrap input{
    width:100%;
    font-family:'Helvetica Neue', Arial, sans-serif;
    background:var(--bg1);
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    color:var(--text);
    font-size:14px;
  }
  .searchwrap input::placeholder{color:var(--text-dim);}
  .sortbar{
    display:flex;
    gap:6px;
    font-family:'Helvetica Neue', Arial, sans-serif;
  }

  .list{padding:0 16px;}
  .row{
    display:grid;
    grid-template-columns: 22px 30px minmax(0, 1fr) auto;
    align-items:center;
    column-gap:10px;
    padding:12px 4px;
    border-bottom:1px solid var(--surface-border-soft, var(--line));
  }
  .rank{
    text-align:center;
    font-family:'Helvetica Neue', Arial, sans-serif;
    color:var(--text-dim);
    font-size:12px;
  }

  .namecol{min-width:0;}
  .namecol .nm{font-size:15.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .namecol .meta{
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-size:11px; color:var(--text-dim); margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .wl{
    text-align:right;
    font-family:'Helvetica Neue', Arial, sans-serif;
    min-width:56px;
    white-space:nowrap;
  }
  .wl .pct{font-size:16px; font-weight:700;}
  .wl .rec{font-size:11px; color:var(--text-dim); margin-top:2px;}
  .wl .rec .w{color:var(--green);}
  .wl .rec .l{color:var(--red);}
  .wl .rec .d{color:var(--draw);}
  .upset-tag{
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-size:11.5px;
    font-weight:700;
    padding:5px 8px;
    border-radius:6px;
    margin:5px 0;
    letter-spacing:.01em;
  }
  .upset-good{ background:rgba(212,175,55,.15); color:var(--gold-bright); border:1px solid var(--gold-dim); }
  .upset-bad{ background:rgba(181,69,63,.15); color:#e8a5a1; border:1px solid var(--red); }

  .minGamesRow{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'Helvetica Neue', Arial, sans-serif;
    flex-wrap:wrap;
  }
  .minGamesLabel{ font-size:12px; color:var(--text-dim); }
  #minGamesInput{
    width:48px;
    background:var(--bg1);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--text);
    font-size:13px;
    padding:5px 6px;
    text-align:center;
  }
  .minGamesPresets{ display:flex; gap:5px; }
  /* Ranking status and player status are separate questions, so they get
     separate controls rather than one three-way toggle that implies an order. */
  .stateFilterRow{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:8px; }
  /* The reason an action is unavailable, shown in the same row as the action
     rather than somewhere the eye has to hunt for it. */
  .row-unavailable{ opacity:0.72; }
  .upset-mini{ font-size:11px; color:var(--text-dim); margin-top:2px; }
  .upset-mini .uw{ color:var(--gold-bright); }
  .upset-mini .ul{ color:#e8a5a1; }
  /* Marks where the league table (P/W/L/D/GD/Pts) ends and supporting
     context (Avg Opp/Form) begins -- a subtle divider, not a hard rule. */
  .league-context-col{ border-left:1px solid var(--surface-border); }

/* Podium -- signature Money Padel component, reusable for any tier/month
   combination. Drama comes from typography, scale, restrained elevation and
   subtle surface differentiation between positions -- never from gradients,
   metallic shine or a large crown. */
.rankings-podium{
  position: relative; border-radius: var(--radius-lg);
  background: var(--surface-1); background-image: var(--gold-illumination);
  border: 1px solid var(--surface-border); box-shadow: var(--shadow-podium);
  padding: var(--space-3) var(--space-3) var(--space-2);
  margin: var(--space-2) var(--space-4) var(--space-3);
  overflow: hidden;
}
.rankings-podium .podium-row{
  display: flex; align-items: flex-end; justify-content: center; gap: var(--space-2);
  position: relative; z-index: 1;
}
.podium-slot{ flex: 1; text-align: center; cursor: pointer; position: relative; }
.podium-slot .rank-num{
  font-family: var(--font-prestige); color: var(--text-dim); font-size: 13px; font-style: italic;
}
.podium-slot .rank-num.gold{ color: var(--gold-bright); font-style: normal; font-size: 14px; }
/* Production crown/laurel asset -- replaces the earlier CSS-drawn crown+laurel
   for #1 only. A prestige accent, not the focal point -- gets its own modest
   breathing room from the name below, distinct from the tight rating-to-
   pedestal gap, so the crown doesn't feel crammed against Kaz's name. */
.podium-slot .crown-laurel-wrap{ position: relative; height: 24px; margin-bottom: 4px; }
.podium-slot .crown-laurel-img{
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  height: 100%; width: auto; max-width: none; object-fit: contain; pointer-events: none;
}
.podium-slot .crown-laurel-wrap .rank-num{ position: relative; }
.podium-slot .p-name{
  font-family: var(--font-prestige); color: var(--text); font-size: 13.5px; margin: 3px 0 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 2px;
  position: relative; z-index: 1;
}
.podium-slot .p-rating{
  font-family: var(--font-interface); color: var(--text); font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  position: relative; z-index: 1;
}
/* Production pedestal artwork -- transparent PNGs, sized by height per
   position to preserve the 2-1-3 hierarchy; object-fit:contain guarantees
   the artwork is never stretched, whatever its native aspect ratio is.
   object-position:top anchors the visible surface to the top of its box --
   without it, contain's own letterboxing (since the artwork is wider than
   its column) splits empty space above and below, adding an invisible gap
   under the rating text that has nothing to do with the margin below.
   Each podium-slot is one component: rank/crown -> name -> rating -> pedestal,
   flush together with only this small margin -- never positioned separately,
   so the player reads as physically standing on their own pedestal. Column
   height differs naturally by position (taller pedestal = taller column);
   .podium-row's flex-end alignment is what puts Erf/Osh visibly lower than
   Kaz, producing the actual 2-1-3 silhouette, while this margin stays
   identical across all three so the text-to-surface relationship never varies. */
.podium-slot .p-pedestal{
  display: block; margin: 3px auto 0; width: 100%; object-fit: contain; object-position: center top;
}
.podium-slot.second .p-pedestal{ height: 46px; }
.podium-slot.third .p-pedestal{ height: 34px; }
.podium-slot.first{ padding-top: 2px; }
.podium-slot.first .p-pedestal{ height: 64px; }
.podium-slot.first .p-name{ font-size: 16.5px; font-style: normal; }
.podium-slot.first .p-rating{ font-size: 22px; color: var(--gold-bright); }
.podium-caption{
  position: relative; z-index: 1; text-align: center; margin-top: var(--space-3);
  font-family: var(--font-interface); color: var(--text-dim); font-size: 9px;
  letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.65;
}

/* ==========================================================================
   KINGS OF TIERS -- a compact honours-board panel, not another podium.
   Three equal-weight cards (A/B/C never 1st/2nd/3rd against each other) --
   same crown asset, same scale, same card treatment for all three; only a
   subtle per-tier metallic tint (glow wash + text color) tells them apart.
   ========================================================================== */
.kings-panel{
  background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) var(--space-3) var(--space-4);
  margin: var(--space-2) var(--space-4) var(--space-3);
}
.kings-panel-header{
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  padding: 0 var(--space-1) var(--space-2);
}
.kings-panel-title{
  font-family: var(--font-interface); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-bright);
}
.kings-panel-period{ font-family: var(--font-interface); font-size: 10.5px; color: var(--text-dim); }
.kings-panel-note{
  font-family: var(--font-interface); font-size: 10.5px; color: var(--text-dim);
  line-height: 1.45; padding: var(--space-2) var(--space-1) 0;
}

.kings-row{ display: flex; gap: var(--space-2); }
.kings-card{
  flex: 1; min-width: 0; text-align: center; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--surface-border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-1) var(--space-2);
  position: relative; overflow: hidden;
}
.kings-card::before{
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--kings-glow, transparent) 0%, transparent 75%);
}
.kings-tier-a{ --kings-glow: rgba(245,213,118,0.16); }
.kings-tier-b{ --kings-glow: rgba(217,204,163,0.14); }
.kings-tier-c{ --kings-glow: rgba(201,154,99,0.16); }

.kings-crown-wrap{ position: relative; z-index: 1; height: 30px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.kings-crown{ height: 100%; width: auto; object-fit: contain; }
/* Same crown image and scale for every tier -- only a subtle filter (not a
   different asset) shifts A's warm champagne toward B's cooler antique-
   platinum and C's deeper bronze. */
.kings-tier-b .kings-crown{ filter: saturate(0.45) brightness(1.1); }
.kings-tier-c .kings-crown{ filter: sepia(0.35) saturate(0.85) brightness(0.8) hue-rotate(-8deg); }

.kings-name{
  position: relative; z-index: 1;
  font-family: var(--font-prestige); font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kings-name-empty{ color: var(--text-dim); }
.kings-tier-label{
  position: relative; z-index: 1; margin-top: 2px;
  font-family: var(--font-interface); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
}
.kings-rating{ position: relative; z-index: 1; font-family: var(--font-interface); font-weight: 700; font-size: 15px; margin-top: 3px; }

.kings-tier-a .kings-tier-label, .kings-tier-a .kings-rating{ color: var(--kings-a-bright); }
.kings-tier-b .kings-tier-label, .kings-tier-b .kings-rating{ color: var(--kings-b-bright); }
.kings-tier-c .kings-tier-label, .kings-tier-c .kings-rating{ color: var(--kings-c-bright); }

@media (max-width: 360px){
  .kings-name{ font-size: 12px; }
  .kings-rating{ font-size: 13.5px; }
  .kings-crown-wrap{ height: 26px; }

}

/* Compact ranking rows sit under the podium (or alone, once state is filtered
   away from canonical) -- restyles the EXISTING .row element additively. */
.row{ transition: none; }
.rankings-compact-note{
  padding: var(--space-2) var(--space-4); color: var(--text-dim);
  font-family: var(--font-interface); font-size: 11px; text-align: center;
}

.upset-drill{ cursor: pointer; text-decoration: underline; text-decoration-color: rgba(212,175,55,0.4); }

/* ==========================================================================
   PRESTIGE V1B — polish pass: compact filters, hero, refined podium/header/nav
   ========================================================================== */

/* Rankings toolbar -- ONE clean row: Month | Tier | Filter icon. Premium
   dark bordered surfaces with icons, per the approved reference -- neutral
   borders by default, gold reserved for the filter button's active state. */
.rankings-toolbar{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; gap: 8px; align-items: stretch;
  padding: var(--space-2) var(--space-4) var(--space-2);
  margin-top: 6px;
  max-width: 100%;
}
.toolbar-control{
  display: flex; align-items: center; gap: 8px; height: 40px; box-sizing: border-box;
  background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  padding: 0 10px; width: 100%; min-width: 0;
}
.toolbar-control svg{ width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; }
.toolbar-control select{
  background: transparent; border: none; flex: 1; min-width: 0; width: 0;
  color: var(--text); font-family: var(--font-interface); font-size: 12.5px; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rankings-toolbar .filter-btn{
  width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  color: var(--text-dim); cursor: pointer; position: relative; flex-shrink: 0; box-sizing: border-box;
}
.rankings-toolbar .filter-btn.has-filters{ color: var(--gold-bright); border-color: var(--gold-hairline); background: var(--gold-wash); }
.rankings-toolbar .filter-btn .filter-dot{
  position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-bright); display: none;
}
.rankings-toolbar .filter-btn.has-filters .filter-dot{ display: block; }

/* Tier pills strip -- permanently retired in favour of the Tier dropdown
   above. Kept in the DOM (buttons still fire their real click handlers when
   the dropdown changes) but never shown again, regardless of what inline
   style app.js's own visibility logic tries to set on it. */
#tierbar{ display: none !important; }
/* Same for the old Month row wrapper -- its select has moved into the new
   toolbar, leaving only an orphaned "Month:" label behind. */
#monthFilterRow{ display: none !important; }

/* Segmented ranking-mode switcher -- one continuous low-profile surface with
   subtle internal dividers, not four separate boxes. Selected mode gets a
   restrained gold wash, not a full outline. Sits closer to the podium now,
   with the toolbar above it visually receding by comparison. */
#sortbarPower{
  display: flex; background: var(--surface-1); border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm); padding: 3px; margin: 0 16px 14px; gap: 2px;
}
#sortbarPower .sortbtn{
  flex: 1; border: 1px solid transparent;
  background: transparent; border-radius: 6px;
  padding: 8px 2px; font-size: 10.5px; letter-spacing: 0.03em; color: var(--text-dim); font-weight: 500;
}
#sortbarPower .sortbtn.active{
  color: var(--gold-bright); background: var(--gold-wash); border-color: var(--gold-hairline);
  font-weight: 700;
}

/* Rankings hero -- atmospheric background only, never the first thing
   noticed. Racket lives top-right per the approved concept; the gradient
   ensures the title/subtitle stay perfectly readable and the image fades to
   pure black before the toolbar begins. Never repeated/tiled or stretched --
   cover + no-repeat handles both, responsively, mobile-portrait first. */
#rankingsHero {
  position: relative;
  background:
    var(--gold-illumination),
    linear-gradient(180deg, rgba(10,10,9,0.20) 0%, rgba(10,10,9,0.58) 55%, var(--surface-0) 100%),
    url("../../rankings/rankings-hero-racket.webp") top right / cover no-repeat;
}

/* Ranking eligibility -- ineligible players stay fully visible with their
   real rating/stats, just without an official numbered position. */
.eligibility-divider{
  padding: 14px 16px 10px; margin-top: 4px; border-top: 1px solid var(--line);
  font-family: var(--font-interface); font-size: 10.5px; color: var(--text-dim);
  text-align: center; letter-spacing: 0.02em;
}
.row.ineligible-row{ opacity: 0.6; }

/* Collapsible monthly-methodology trigger -- restrained, reveals on tap.
   Same pattern as the "How this works" disclosure, applied per-month. */
.month-note-toggle{
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--surface-border-soft);
  color: var(--text-dim); font-family: var(--font-interface); font-size: 11px;
  letter-spacing: 0.02em; padding: 10px 4px; cursor: pointer;
}
.month-note-toggle.open{ color: var(--gold-soft); }

/* Ranking table column header -- grid columns must exactly match .row's own
   so headings stay aligned with the data beneath them. */
.rankings-col-header{
  display: none; /* JS sets to 'grid' on Power Rankings only */
  grid-template-columns: 22px 30px minmax(0, 1fr) auto;
  column-gap: 10px; padding: 0 20px 8px 4px; margin: 0 16px;
  font-family: var(--font-interface); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); opacity: 0.6;
}
.rankings-col-header .col-right{ text-align: right; min-width: 56px; }

/* ---- Power Rating Guide -------------------------------------------------
   Leads with the idea and keeps the arithmetic one tap away. Premium dark /
   champagne throughout; nothing here introduces a new colour. */
.rg-panel{ padding-bottom: 8px; }
.rg-sub{ font-family: var(--font-interface); font-size: 11.5px; color: var(--text-dim); margin-bottom: 12px; }
.rg-anchor{
  font-family: 'Georgia', serif; font-size: 14.5px; line-height: 1.5;
  color: var(--gold-bright); border-left: 2px solid var(--gold-dim);
  padding: 2px 0 2px 12px; margin-bottom: 16px;
}
.rg-section{ margin-bottom: 18px; }
.rg-h{
  font-family: var(--font-interface); font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gold-soft);
  margin-bottom: 7px;
}
.rg-h2{
  font-family: var(--font-interface); font-size: 12.5px; font-weight: 700;
  color: var(--text); margin: 14px 0 4px;
}
.rg-p{ font-family: var(--font-interface); font-size: 12px; color: var(--text-soft); line-height: 1.6; margin-bottom: 6px; }
.rg-warn{ color: var(--gold-bright); }
.rg-note{ font-family: var(--font-interface); font-size: 10.5px; color: var(--text-dim); line-height: 1.5; margin-top: 8px; }
.rg-list{ margin: 0; padding-left: 18px; }
.rg-list li{ font-family: var(--font-interface); font-size: 12px; color: var(--text-soft); line-height: 1.6; margin-bottom: 7px; }

.rg-concept{ display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--surface-border-soft); }
.rg-concept:last-of-type{ border-bottom: none; }
.rg-concept-name{ font-family: var(--font-interface); font-size: 12px; font-weight: 700; color: var(--text); flex: 0 0 38%; }
.rg-concept-what{ font-family: var(--font-interface); font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }

.rg-fold{ border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 18px; }
.rg-fold-summary{ list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; }
.rg-fold-summary::-webkit-details-marker{ display: none; }
.rg-fold-summary::after{ content: '›'; margin-left: auto; color: var(--gold-soft); font-size: 15px; line-height: 1; }
.rg-fold[open] > .rg-fold-summary::after{ content: '⌄'; }
.rg-fold-title{ font-family: var(--font-interface); font-size: 13px; font-weight: 700; color: var(--text); }
.rg-fold-sub{ font-family: var(--font-interface); font-size: 10.5px; color: var(--text-dim); }
.rg-fold-body{ margin-top: 10px; }

.rg-formula{
  font-family: 'Menlo', 'Consolas', monospace; font-size: 12px;
  color: var(--gold-bright); background: rgba(212,175,55,.06);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin: 6px 0;
  /* Wraps rather than scrolls: a formula the reader has to swipe to finish is
     a formula most readers will not finish. */
  white-space: pre-wrap; word-break: break-word; line-height: 1.5;
}
.rg-worked{ border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; margin-top: 6px; }
.rg-worked-row{ display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--surface-border-soft); font-family: var(--font-interface); font-size: 12px; color: var(--text-dim); }
.rg-worked-row b{ color: var(--text); }
.rg-worked-total{ border-bottom: none; }
.rg-worked-total b{ color: var(--gold-bright); }

.rg-compare{ display: flex; gap: 8px; margin: 8px 0; }
.rg-compare-col{ flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.rg-compare-label{ font-family: var(--font-interface); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.rg-compare-detail{ font-family: var(--font-interface); font-size: 10.5px; color: var(--text-dim); line-height: 1.4; margin-top: 3px; }
.rg-compare-value{ font-family: var(--font-interface); font-size: 18px; font-weight: 700; color: var(--gold-bright); margin-top: 5px; }

.rg-faq{ border-bottom: 1px solid var(--surface-border-soft); padding: 9px 0; }
.rg-faq:last-of-type{ border-bottom: none; }
.rg-faq-q{
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-interface); font-size: 12.5px; font-weight: 700; color: var(--text);
}
.rg-faq-q::-webkit-details-marker{ display: none; }
.rg-faq-q::after{ content: '›'; margin-left: auto; color: var(--gold-soft); font-size: 15px; line-height: 1; flex: none; }
.rg-faq[open] > .rg-faq-q::after{ content: '⌄'; }
.rg-faq-a{ font-family: var(--font-interface); font-size: 11.5px; color: var(--text-soft); line-height: 1.6; margin-top: 6px; }
.rg-closing{ border-top: 1px solid var(--surface-border-soft); padding-top: 14px; }

/* Doughnut leaderboard -- simple, restrained list, no emoji per the
   established visual language, matching the More-menu modal pattern. */
.doughnut-sort-row{ display: flex; gap: 6px; margin-bottom: 10px; }
.doughnut-sort-btn{
  flex: 1; background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  color: var(--text-dim); font-family: var(--font-interface); font-size: 11px; font-weight: 600;
  padding: 8px 4px; cursor: pointer;
}
.doughnut-sort-btn.active{ color: var(--gold-bright); border-color: var(--gold-hairline); background: var(--gold-wash); }
.doughnut-header-row, .doughnut-row{
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 8px 2px; border-bottom: 1px solid var(--surface-border-soft);
}
.doughnut-header-row{
  font-family: var(--font-interface); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-dim); opacity: 0.7;
}
.doughnut-header-row span:not(:first-child), .doughnut-row span:not(.doughnut-name){ text-align: right; min-width: 44px; }
.doughnut-name{ font-family: var(--font-prestige); font-size: 13.5px; color: var(--text); }
.doughnut-given{ font-family: var(--font-interface); font-size: 13px; color: var(--gold-bright); font-weight: 700; }
.doughnut-received{ font-family: var(--font-interface); font-size: 13px; color: #e8a5a1; font-weight: 700; }
.doughnut-row{ cursor: pointer; border-bottom: none; }
.doughnut-row-wrap{ border-bottom: 1px solid var(--surface-border-soft); }
.doughnut-chev{ color: var(--text-dim); font-size: 11px; margin-left: 4px; }
.doughnut-detail{ padding: 0 2px 10px; }
.doughnut-game-row{
  display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; margin-top: 4px;
  background: var(--surface-1); border-radius: var(--radius-sm); border: 1px solid var(--surface-border-soft);
}
.doughnut-game-teams{ font-family: var(--font-interface); font-size: 11.5px; color: var(--text); }
.doughnut-game-score{ font-family: var(--font-interface); font-size: 11px; color: var(--text-dim); }
.doughnut-game-score b{ color: var(--gold-bright); }
/* Doughnut List: each doughnut as a result, newest first. */
.doughnut-controls{ margin-bottom: 4px; }
.doughnut-list{ display: grid; gap: 6px; }
.doughnut-list-count{ font-size: 11px; margin: 0 0 6px; }
.doughnut-result{
  display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; width: 100%;
  min-height: 48px; padding: 8px 10px; text-align: left; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--surface-border-soft); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-interface);
}
.doughnut-result:active{ opacity: .7; }
.doughnut-result-date{ font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.doughnut-result-line{ font-size: 12.5px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.doughnut-result-score{ color: var(--text-dim); white-space: nowrap; }
.doughnut-result-score .doughnut-set{ color: var(--gold-bright); }
.doughnut-result-draw{ color: var(--text-dim); font-size: 11px; }
.doughnut-empty{ padding: 18px 4px; text-align: center; color: var(--text-dim); font-family: var(--font-interface); font-size: 13px; }

/* Monthly Rating Breakdown -- the shared "why is this rating what it is"
   screen opened from Kings of Tiers, the podium, and the full ranking list.
   Deliberately plain/numeric (no crest imagery) since its job is to read
   like a ledger a close result can be checked against. */
.mrb-header{ margin-bottom: 4px; }
.mrb-period{
  font-family: var(--font-interface); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-dim); opacity: 0.8; margin-bottom: 6px;
}
.mrb-rankname{ display: flex; align-items: baseline; gap: 8px; }
.mrb-rank{ font-family: var(--font-interface); font-size: 13px; font-weight: 700; color: var(--gold-soft); }
.mrb-name{ font-family: var(--font-prestige); font-size: 19px; color: var(--text); }
.mrb-rating-row{ display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.mrb-rating{ font-family: var(--font-interface); font-size: 30px; font-weight: 700; color: var(--gold-bright); line-height: 1; }
.mrb-rating-label{ font-family: var(--font-interface); font-size: 11.5px; color: var(--text-dim); line-height: 1.25; }
.mrb-gap{ font-family: var(--font-interface); font-size: 12.5px; color: var(--text); margin-top: 6px; }
.mrb-gap-secondary{ color: var(--text-dim); margin-top: 2px; }
.mrb-close-note{
  font-family: var(--font-interface); font-size: 11.5px; color: var(--gold-bright);
  margin-top: 8px; padding: 6px 8px; background: rgba(212,175,55,0.10); border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm);
}
.mrb-detail-line{ font-size: 11.5px; color: var(--text-dim); line-height: 1.6; margin-bottom: 6px; }
.mrb-detail-line:last-child{ margin-bottom: 0; }
.mrb-compare-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.mrb-compare-btn{ flex: 1 1 auto; }

.mrb-compare-title{ font-family: var(--font-prestige); font-size: 17px; color: var(--text); margin-top: 4px; }
.mrb-compare-ratings{
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 14px; padding: 12px 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
}
.mrb-compare-side{ flex: 1; text-align: center; }
.mrb-compare-name{ font-family: var(--font-prestige); font-size: 14px; color: var(--text); }
.mrb-compare-rating{ font-family: var(--font-interface); font-size: 24px; font-weight: 700; color: var(--gold-bright); margin-top: 2px; }
.mrb-compare-pos{ font-family: var(--font-interface); font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.mrb-compare-vs{ font-family: var(--font-interface); font-size: 11px; font-weight: 700; color: var(--text-dim); flex: 0 0 auto; }

/* ---- Monthly stories: four separate measures, visually separated so none
   reads as a restatement of another ---- */
.monthly-stories{border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 2px 14px;background:var(--card);}
.ms-head{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
/* Key takeaways -- one line from each of three different stories, so the top
   of the card answers "what happened" before the detail asks for attention. */
.ms-takeaways{
  border:1px solid var(--line); border-radius:10px;
  padding:9px 11px; margin-bottom:12px; background:rgba(212,175,55,.04);
}
.ms-takeaways-head{
  font-family:'Helvetica Neue', Arial, sans-serif; font-size:10px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--gold-soft);
  font-weight:700; margin-bottom:5px;
}
.ms-takeaway{ display:flex; align-items:baseline; gap:8px; padding:3px 0; font-size:12px; }
.ms-takeaway-value{ font-weight:700; min-width:60px; }
.ms-takeaway-name{ color:var(--text); font-weight:600; }
.ms-takeaway-note{ color:var(--text-dim); font-size:11px; margin-left:auto; text-align:right; }

/* The remaining three stories fold away. Nothing is deleted -- each keeps its
   own title and its own explanation, which appear as soon as it is opened. */
.ms-fold{ border-top:1px solid var(--surface-border-soft); padding:8px 0 2px; }
.ms-fold-summary{ list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:8px; }
.ms-fold-summary::-webkit-details-marker{ display:none; }
.ms-fold-summary::after{ content:'›'; margin-left:auto; color:var(--gold-soft); font-size:15px; line-height:1; }
.ms-fold[open] > .ms-fold-summary::after{ content:'⌄'; }
.ms-fold-title{ font-size:13px; font-weight:600; color:var(--text); flex:none; }
.ms-fold-explain{ font-size:10.5px; color:var(--text-dim); line-height:1.3; }
.ms-fold-body{ margin-top:6px; }

.ms-block{margin-bottom:12px;}
.ms-block:last-of-type{margin-bottom:6px;}
.ms-title{font-size:13px;font-weight:600;color:var(--text);}
.ms-explain{font-size:11px;color:var(--text-dim);margin:2px 0 6px;line-height:1.35;}
.ms-line{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px;}
.ms-main{color:var(--text);white-space:nowrap;}
.ms-sub{color:var(--text-dim);text-align:right;}
.ms-foot{font-size:11px;color:var(--text-dim);border-top:1px solid var(--line);padding-top:8px;}
.ms-idle{color:var(--text-dim);font-size:10px;}


/* ==========================================================================
   LEAGUE SCREEN — disclosures and the Last 10 table
   The screen's job is to show a table. The explanation and the four stacked
   tier tables both sat above one on a phone, so both fold away. Closed is the
   default for the explanation; the tier tables remember only within a session.
   ========================================================================== */
/* A line of text you can tap, not a control. No card, no border, no fill --
   the first attempt used a bordered block for this and ended up heavier than
   the heading above it and the table below. */
.lg-inline-fold{
  display: inline-flex; align-items: baseline; gap: 5px;
  margin: 2px 0 0; padding: 4px 0;
  background: none; border: none;
  color: var(--gold-soft); font-family: var(--font-interface); font-size: 12px;
  text-align: left; cursor: pointer;
}
.lg-inline-fold:active{ opacity: .7; }
.lg-inline-chev{ color: var(--text-dim); font-size: 11px; }
.lg-inline-body{ margin: 2px 0 4px; }

/* A tier heading that happens to be tappable. It keeps .section-heading, so it
   is the same type and weight as every other heading on the screen; the
   chevron is the only thing that marks it as a control. */
.lg-tier-head{
  display: flex; align-items: baseline; gap: 7px;
  width: 100%; padding: 0; background: none; border: none;
  text-align: left; cursor: pointer;
}
.lg-tier-head:active{ opacity: .7; }
.lg-tier-head .lg-inline-chev{ font-size: 12px; }

/* A sample shorter than the window, marked beside the P it qualifies.
   Quiet, because it is a caveat on the number rather than a number itself. */
.l10-short{
  font-family: var(--font-interface); font-size: 9.5px; color: var(--text-dim);
  white-space: nowrap;
}

/* Month and View side by side. Both controls are preserved exactly -- same
   ids, same options, same handlers -- this is layout only. */
.lg-controls{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
.lg-controls .fg-row{ margin-bottom: 0; min-width: 0; }
.lg-controls .fg-label{ font-size: 10px; margin-bottom: 4px; }
.lg-controls .fg-select{ padding: 7px 9px; font-size: 13px; }

/* The Monthly Summary heading, made tappable. It keeps .ms-head, so the type,
   colour, letter-spacing and spacing are exactly as they were -- the chevron
   is the only addition. Not a card, per the League Table decision. */
.ms-head-toggle{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; padding: 0; background: none; border: none;
  text-align: left; cursor: pointer;
  font-family: inherit;
}
.ms-head-toggle:active{ opacity: .7; }

/* Collapsed, the card chrome comes off entirely: a heading inside a bordered,
   filled, padded box with nothing under it is a dropdown, which is the thing
   that was rejected. Expanded, the card is unchanged. */
.monthly-stories.is-collapsed{
  border: none; background: none; border-radius: 0;
  padding: 0 2px; margin: 10px 2px 14px;
}
.monthly-stories.is-collapsed .ms-head{ margin-bottom: 0; }


/* ==========================================================================
   MERIT TABLE — Hard / Favoured and the matches behind them
   Nine columns on a phone, so the table is sized to fit rather than scroll:
   the numeric columns take only what they need and the player name yields.
   ========================================================================== */
.merit-table{ table-layout: fixed; }
.merit-table th, .merit-table td{ white-space: nowrap; }
/* The one column that can afford to wrap or clip is the name. */
.merit-table th:nth-child(2), .merit-table td:nth-child(2){
  white-space: normal; word-break: break-word;
}

/* A count you can open. It reads as a number first and a control second. */
.merit-count{
  background: none; border: none; padding: 2px 4px; margin: -2px 0;
  font: inherit; font-weight: 700; cursor: pointer;
  border-bottom: 1px dotted currentColor; line-height: 1.1;
}
.merit-count:active{ opacity: .6; }
.merit-count.is-open{ border-bottom-style: solid; }

/* Monthly Race: the score opens its matches, like a Merit count. */
.race-score{ color: var(--gold-bright); }
.race-score.is-neg{ color: var(--red); }
.race-pts.is-neg{ color: var(--red); }
/* The drill-down lives inside a table cell; let its prose wrap. */
.race-drill-row .merit-drill-teams, .race-drill-meta{ white-space: normal; }
.race-drill-meta{ line-height: 1.45; }
.race-drill-score{ color: var(--text-dim); font-size: 11px; white-space: nowrap; }
.race-drill-total{
  border-top: 1px solid var(--line); margin-top: 4px; padding-top: 7px; text-align: right;
  font-family: var(--font-interface); font-size: 11.5px; font-weight: 700; color: var(--gold-bright);
}
.race-noq{
  font-family: var(--font-interface); font-size: 12px; color: var(--text-dim);
  padding: 10px 2px 4px; font-style: italic;
}
.race-prov-head{
  font-family: var(--font-interface); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim); margin: 12px 2px 6px;
}

/* The matches behind a count, inline under the row they belong to. */
.merit-drill-body{
  background: var(--surface-2); border-top: 1px solid var(--surface-border);
  padding: 9px 10px 10px;
}
.merit-drill-head{
  font-family: var(--font-interface); font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 7px;
}
.merit-drill-row{ padding: 6px 0; border-top: 1px solid var(--line); }
.merit-drill-row:first-of-type{ border-top: none; }
.merit-drill-top{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.merit-drill-date{ font-family: var(--font-interface); font-size: 10.5px; color: var(--text-dim); }
.merit-drill-pts{ font-family: var(--font-interface); font-size: 11.5px; font-weight: 700; color: var(--gold-bright); }
.merit-drill-teams{ font-size: 12px; margin-top: 2px; line-height: 1.4; }
/* The tier each player held for THAT fixture, beside their name. */
.merit-drill-tier{
  font-family: var(--font-interface); font-size: 9px; color: var(--text-dim);
  vertical-align: super; margin-left: 2px;
}
.merit-drill-meta{
  font-family: var(--font-interface); font-size: 10.5px; color: var(--text-dim); margin-top: 3px;
}
#rankingsMonthNoteHost .mm-note{ margin: -2px 16px 8px; }

/* P / W / D / L counts that open their games (League and Merit). Same
   component as Hard / Fav, quieter: the table's own weight, a dotted line to
   say it can be opened, and a slightly larger hit area that does not widen
   the column. */
.merit-count.tbl-count{ font-weight: inherit; color: inherit; padding: 5px 4px; margin: -5px -2px; }
.merit-drill-body{ white-space: normal; }
/* The League table can scroll sideways; its detail stays in view. */
.callout-card[style*="overflow-x"] .merit-drill-body{ position: sticky; left: 0; max-width: calc(100vw - 34px); box-sizing: border-box; }
.tbl-result-W{ color: var(--green); }
.tbl-result-L{ color: var(--red); }
.tbl-result-D{ color: var(--text-dim); }