/* Shared standings page (068, Desk Q136). The Rankings list keeps the portal's
   own styles (styles.css); this file only lays out and restyles this page.
   Polish (22 Oct): every rule is scoped to .standings-page or .standings-header,
   which only /standings/ renders and the Results Admin preview
   (.standings-page.standings-preview, the page's own renderer) borrows, so the
   portal's own Rankings page stays exactly as it is. No inline style (site
   CSP), no new fonts or external requests. Configured program artwork uses
   the portal's existing same-origin assets. */

/* R5: the program page's warm panels and shared theme tokens. No local palette:
   base.css supplies both explicit and system light/dark themes. */
.standings-page {
  --st-accent: var(--ink);
  --st-accent-tint: var(--dune);
  --st-accent-rule: var(--muted);
  --st-zebra: var(--dune);
}

.standings-header .wordmark { text-decoration: none; color: inherit; }
.page.standings-page { padding-top: var(--space-3); }
.standings-app:not(:empty) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.standings-app > .site-footer { margin-top: auto; }

/* The title and lead; status lives below the category tabs. */
.standings-page .standings-page-header { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-2); }
.standings-page .standings-page-header > .standings-masthead { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.standings-masthead > :is(h1, p) { margin: 0; }
.standings-page .standings-page-header .eyebrow { color: var(--st-accent); }
.standings-page .standings-lead { max-width: 62ch; }
.standings-snapshot-status { display: grid; gap: var(--space-2); margin: 0; }
.standings-status-line { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.standings-status-line strong { color: var(--ink); white-space: normal; }
.standings-status-line strong::before { content: none; }
.standings-header .standings-sign-out { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: var(--tap); margin: 0; padding: 0 var(--space-2); border: 0; font-size: var(--text-sm); font-weight: 400; letter-spacing: normal; text-transform: none; }
.standings-header .standings-sign-out:hover { text-decoration: underline; text-underline-offset: .45rem; }
.standings-header .header-actions { gap: var(--space-1); margin-right: 0; }
.standings-header .header-actions .settings-control { margin-left: 0; }
.standings-recorded { margin: 0; max-width: 62ch; font-weight: 600; }
.standings-page .notice.standings-recorded { border-left-color: var(--st-accent-rule); background: var(--st-accent-tint); color: var(--ink); }

/* The card stays centred; About opens down inside it at the same width.
   Normal flow lets an opened disclosure extend the page without overlap. */
.page.standings-gate {
  display: grid;
  flex: 1;
  grid-template-rows: 1fr;
}
.standings-gate > .standings-card { align-self: start; justify-self: center; }
.standings-page .standings-card { width: min(440px, 100%); margin: 0; padding: var(--space-3); border: 0; border-top: 3px solid var(--st-accent-rule); background: var(--st-accent-tint); }
.standings-card h1 { margin: 0; font-size: clamp(1.85rem, 7vw, 2.4rem); line-height: 1.08; text-wrap: balance; text-align: center; }
.standings-card-lead { margin: var(--space-2) 0 0; color: var(--ink); font-size: var(--text-md); line-height: 1.45; text-align: center; }
.standings-card .standings-signed-out { margin: var(--space-3) 0 0; padding: .75rem 1rem; background: var(--paper); }
.standings-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
.standings-password-field { grid-template-columns: minmax(0, 1fr); width: 100%; }
.standings-password-wrap { position: relative; min-width: 0; width: 100%; }
.standings-password-field input { display: block; box-sizing: border-box; width: 100%; max-width: 100%; padding-right: calc(var(--tap) + var(--space-2)); font-size: 1.0625rem; letter-spacing: .02em; }
/* The focus ring stays inside the field so its visible edges also match the
   button and sharing line, including the initial autofocus. */
.standings-password-field input:focus-visible { outline: var(--focus); outline-offset: -2px; }
.standings-password-wrap input[type="password"] { letter-spacing: .12em; }
.standings-password-wrap input[readonly] { color: var(--muted); }
.standings-reveal { position: absolute; top: 2px; right: 2px; bottom: 2px; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); min-height: var(--tap); padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.standings-reveal:hover { color: var(--ink); }
.standings-reveal:focus-visible { outline: var(--focus); outline-offset: -4px; }
.standings-reveal[aria-pressed="true"] { color: var(--ink); }
.standings-reveal .standings-reveal-hide, .standings-reveal[aria-pressed="true"] .standings-reveal-show { display: none; }
.standings-reveal[aria-pressed="true"] .standings-reveal-hide { display: block; }
.standings-field-error { padding-left: .75rem; border-left: 3px solid var(--error); }
.standings-submit[data-busy] { opacity: 1; cursor: progress; }
.standings-spinner { display: none; flex: none; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.standings-submit[data-busy] .standings-spinner, .standings-card-loading .standings-spinner { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .standings-spinner { animation: standings-spin .8s linear infinite; }
}
@keyframes standings-spin { to { transform: rotate(360deg); } }
.standings-share { display: flex; align-items: flex-start; gap: var(--space-1); margin: var(--space-3) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--rule); color: var(--ink); font-size: var(--text-sm); line-height: 1.45; }
.standings-share svg { flex: none; margin-top: calc((1lh - 18px) / 2); color: var(--st-accent); }
.standings-card-state { margin-top: var(--space-3); }
.standings-card-state h2 { margin: 0 0 .5rem; font-size: 1.5rem; line-height: 1.15; }
.standings-card-state p { margin: 0; }
.standings-card-state .btn { margin-top: var(--space-3); }
.standings-card-loading { display: flex; align-items: center; gap: .75rem; color: var(--muted); }

/* Category tabs: the portal's tab look; phones show two rows of equal cells. */
.standings-tabs { display: flex; flex-wrap: nowrap; gap: 0; margin: 0 0 var(--space-3); padding-block: var(--space-1); overflow-x: auto; border-bottom: 1px solid var(--rule); }
.standings-tab { display: inline-flex; align-items: center; justify-content: center; flex: 1 0 auto; height: var(--tap); min-height: var(--tap); margin: 0; padding: 0 var(--space-2); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 400 var(--text-md)/1.3 var(--font-text); text-align: center; white-space: nowrap; cursor: pointer; }
.standings-tab[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }
.standings-tab:focus-visible { outline: var(--focus); outline-offset: -4px; }
@media (hover: hover) {
  .standings-tab:not([aria-selected="true"]):hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
}
@media (prefers-reduced-motion: no-preference) {
  .standings-tab { transition: color 150ms ease-out, border-color 150ms ease-out; }
}

/* One results-month/status/date line; no separate campaign period or as-of block. */
.standings-panel > .ranking-head--list { padding: 0 0 var(--space-2); }
.standings-panel > .ranking-head--list h2 + p, .standings-panel > .ranking-head--list div > p:first-child { margin-top: 0; }

/* Status and actions share one row; the table follows after 24px. */
.standings-page .rankings-rows--compact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-2); padding-top: 0; }
.standings-page .rankings-rows--compact > .standings-snapshot-status { grid-column: 1; grid-row: 1; }
.standings-page .ranking-controls { grid-column: 2; grid-row: 1; justify-self: end; }
.standings-page .leaderboard-wrap { grid-column: 1 / -1; min-width: 0; }

/* Program components keep the portal's styles.css layout and typography.
   Only the tab-to-content gap and our final explanation belong to this page. */
.standings-how > section:first-child > :is(.program-lead, .program-artwork-pending) { margin-top: 0; }
.standings-ranking-explanation { margin-top: var(--space-5); }
.standings-ranking-explanation h2 { margin: 0; font-size: var(--text-xl); }
.standings-ranking-explanation p { max-width: 70ch; margin: var(--space-2) 0 0; }

/* The Results Admin preview: the page's look inside the admin section. */
.standings-page.standings-preview { margin-top: var(--space-2); }

/* The distributor as a small tag. */
.standings-tag { display: inline-block; max-width: 100%; padding: .1rem .5rem; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }

/* The list: calmer rows, bigger rank numerals, tabular amounts on the right,
   quiet zebra rows, a sticky column header. */
.standings-page .leaderboard { font-size: var(--text-sm); }
.standings-page .leaderboard .numeric { font-variant-numeric: tabular-nums; font-weight: 600; }
.standings-page .leaderboard tr[data-ranking-row] td:first-child strong { font-size: 2rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.standings-page .leaderboard tr[data-ranking-row]:is([data-status="qualifying"], [data-status="qualified"]) td:first-child { box-shadow: inset 3px 0 var(--st-accent-rule); }

/* The sort control (Pasha, "display error on Highest"): the native select
   drew its own arrow and, at some widths, clipped the label; here it has
   its own chevron, room for the longest label ("Le plus bas d'abord") and
   no shrinking below it. */
.standings-page .ranking-sort { flex: none; }
.standings-page .ranking-sort select { appearance: none; -webkit-appearance: none; min-width: 11.5rem; padding-right: 2.5rem; background: var(--paper); color: var(--ink); text-overflow: ellipsis; }
.standings-page .ranking-sort::after { content: ""; position: absolute; top: 50%; right: 1rem; width: .5rem; height: .5rem; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

/* The Qualifying line: an accent band "Top 22 · about $X". */
.standings-page .leaderboard tr.rankings-divider td { padding: .85rem 1rem; border-block: 1px solid var(--st-accent-rule); background: var(--st-accent-tint); color: var(--st-accent); }
.standings-line-band { font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.standings-line-note { float: inline-end; margin-inline-start: var(--space-2); color: var(--st-accent); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }

@media (min-width: 701px) {
  .standings-page .leaderboard thead th { position: sticky; top: 0; z-index: var(--z-raised); background: var(--paper); box-shadow: inset 0 -1px var(--ink); border-bottom: 0; }
  .standings-page .leaderboard thead th:nth-child(4) { text-align: right; }
  .standings-page .leaderboard tr[data-ranking-row] td { padding-block: .8rem; vertical-align: middle; }
  .standings-page .leaderboard tr[data-ranking-row]:nth-child(even of [data-ranking-row]) { background: var(--st-zebra); }
  .standings-page .leaderboard tr[data-ranking-row] td:nth-child(2) strong { font-weight: 600; }
}

/* Empty: no category at all. */
.standings-empty { margin: var(--space-3) 0 0; padding: clamp(1.5rem, 5vw, 2.5rem); border-top: 2px solid var(--rule-strong); background: var(--st-accent-tint); }
.standings-empty h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.15; }
.standings-empty p:last-child { max-width: 62ch; margin: 0; }

/* A category with no results yet (Instant Revive + Care before its first
   month): its name, rule, period, what counts and the Top N, then when its
   first standings appear. */
.standings-upcoming { margin: var(--space-3) 0 0; padding: clamp(1.5rem, 5vw, 2.5rem); border-top: 3px solid var(--st-accent-rule); background: var(--st-accent-tint); }
.standings-upcoming > .eyebrow { margin: 0 0 .5rem; color: var(--st-accent); }
.standings-upcoming h2 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.25rem); line-height: 1.1; text-wrap: balance; }
.standings-upcoming-rule { max-width: 62ch; margin: 1rem 0 0; font-size: var(--text-md); line-height: 1.5; }
.standings-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0; margin: var(--space-3) 0 0; border-top: 1px solid var(--rule); }
.standings-facts > div { padding: .9rem 1.25rem .9rem 0; border-bottom: 1px solid var(--rule); }
.standings-facts dt { margin: 0 0 .25rem; color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
.standings-facts dd { margin: 0; font-weight: 600; line-height: 1.4; }
.standings-facts dd small { display: block; margin-top: .15rem; color: var(--muted); font-size: var(--text-sm); font-weight: 400; font-variant-numeric: tabular-nums; }
.standings-upcoming-first { max-width: 62ch; margin: var(--space-3) 0 0; padding: .85rem 1rem; border-left: 3px solid var(--st-accent-rule); background: var(--paper); font-weight: 600; }

/* Phones: all four tabs stay visible and the rows are two-line cards:
   rank | name, status / distributor, amount. The rank column is sized for
   four digits ("#1,000"): from three digits the numeral steps down, so the
   names and tags line up on every row (the user's "#252" screenshot). Octave
   Display's old-style figures are wider than the stand-in's: four digits are .9rem. */
@media (max-width: 700px) {
  .standings-page .standings-page-header { grid-template-columns: minmax(0, 1fr); }
  .standings-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .standings-tab { min-width: 0; padding-inline: var(--space-1); white-space: normal; overflow-wrap: anywhere; font-size: var(--text-sm); }
  .standings-page .standings-card { padding: var(--space-2); }
  .standings-page .ranking-sort select { min-width: 0; }
  .standings-page .rankings-rows--compact { grid-template-columns: minmax(0, 1fr); }
  .standings-page .ranking-controls { grid-column: 1; grid-row: 2; justify-self: stretch; width: 100%; }
  .standings-page .ranking-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: var(--space-2); }
  .standings-page .ranking-sort, .standings-page .ranking-sort select, .standings-page .ranking-jump { width: 100%; }
  .standings-page .ranking-label-long { position: static; display: inline; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .standings-page .ranking-label-short { display: none; }
  .standings-page .ranking-sort::after { right: .85rem; }
  .standings-page .rankings-rows--compact .leaderboard tbody { display: flex; flex-direction: column; gap: .5rem; }
  .standings-page .rankings-rows--compact .leaderboard tr[data-ranking-row] {
    grid-template-columns: 3.4rem minmax(0, 1fr) auto;
    grid-template-areas: "rank name status" "rank distributor amount";
    align-items: center;
    row-gap: .35rem;
    column-gap: .6rem;
    padding: .65rem .7rem .65rem .6rem;
    border: 1px solid var(--rule);
    background: var(--paper);
  }
  .standings-page .rankings-rows--compact .leaderboard tr[data-ranking-row]:is([data-status="qualifying"], [data-status="qualified"]) { border-left-color: var(--st-accent-rule); box-shadow: inset 2px 0 var(--st-accent-rule); }
  .standings-page .leaderboard tr[data-ranking-row]:is([data-status="qualifying"], [data-status="qualified"]) td:first-child { box-shadow: none; }
  .standings-page .rankings-rows--compact .leaderboard tr[data-ranking-row] td:first-child { overflow: hidden; }
  .standings-page .rankings-rows--compact .leaderboard tr[data-ranking-row] td:first-child strong { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; line-height: 1; white-space: nowrap; }
  .standings-page .rankings-rows--compact .leaderboard tr[data-rank-digits="3"] td:first-child strong { font-size: 1.2rem; }
  .standings-page .rankings-rows--compact .leaderboard tr[data-rank-digits="4"] td:first-child strong { font-size: .9rem; }
  .standings-facts > div { padding-right: 0; }
  .standings-page .rankings-rows--compact .leaderboard td:nth-child(2) > strong { font-weight: 600; }
  .standings-page .rankings-rows--compact .leaderboard td:nth-child(3) { justify-self: start; }
  .standings-page .rankings-rows--compact .leaderboard td:nth-child(3) .standings-tag { padding-inline: .375rem; }
  .standings-page .rankings-rows--compact .leaderboard td:nth-child(4) { font-size: var(--text-md); }
  .standings-page .rankings-rows--compact .leaderboard tr.rankings-divider { padding: 0; border: 0; background: transparent; }
  .standings-page .rankings-rows--compact .leaderboard tr.rankings-divider td { padding: .75rem .85rem; border-block: 1px solid var(--st-accent-rule); background: var(--st-accent-tint); }
  .standings-line-note { float: none; display: block; margin: .15rem 0 0; }
}

/* Portal disclosure and footer primitives, in the same page column. Footer
   CSS comes directly from base.css, including its mobile and theme rules. */
.standings-privacy { margin: var(--space-6) 0 0; font-size: var(--text-sm); }
.standings-gate .standings-privacy { margin: var(--space-3) 0 0; }
.standings-card .standings-privacy .disclosure-body { padding-inline: 0; }
.standings-privacy summary { height: var(--tap); padding-block: 0; }
.standings-privacy summary:focus-visible { outline: var(--focus); outline-offset: 2px; }
.standings-privacy summary h2 { margin: 0; color: var(--ink); font-family: var(--font-text); font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
.standings-privacy .disclosure-body { padding: var(--space-2); }
.standings-about-questions { margin-bottom: var(--space-3); }
/* Nested questions use body typography in both About locations and themes. */
.standings-about-questions > .disclosure > summary { font: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; }
.standings-about-questions .disclosure-body p { margin: 0; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.standings-card .standings-about-questions .disclosure-body { padding: var(--space-2); }
.standings-privacy-list { max-width: 70ch; margin: 0; padding: 0; }
.standings-privacy-list > div { padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
.standings-privacy-list > div:first-child { border-top: 0; }
.standings-privacy-list dt { margin: 0 0 var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
.standings-privacy-list dd { margin: 0; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.standings-privacy-link { margin: var(--space-2) 0 0; }
.standings-privacy-link a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; }
.standings-privacy-link a:hover { text-decoration: underline; text-underline-offset: .35rem; }
.standings-notice > .back-link { margin-bottom: var(--space-2); }
.standings-notice-list { margin-top: var(--space-3); }

/* The card summary follows its body copy rather than the page heading style. */
.standings-card .standings-privacy summary h2 { font-family: var(--font-text); font-size: var(--text-sm); font-weight: 400; line-height: 1.45; }

/* The footer summary stays beside Privacy. Its panel is outside normal flow,
   anchored above the footer line, and grows upward on desktop and phone. */
.standings-footer .site-footer-inner { position: relative; align-items: start; }
.standings-footer .site-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-2); align-items: start; width: min(100%, 30rem); }
.standings-footer .site-footer-links > a { grid-column: 2; grid-row: 1; align-self: start; justify-self: start; min-width: 0; }
.standings-privacy--footer { grid-column: 1 / -1; grid-row: 1; min-width: 0; margin: 0; }
.standings-privacy--footer > .disclosure { border-top: 0; }
.standings-privacy--footer > .disclosure > summary { width: calc((100% - var(--space-2)) / 2); }
.standings-privacy--footer > .disclosure > summary::after { content: none; }
.standings-privacy--footer > .disclosure > summary h2 { color: inherit; font: inherit; font-size: var(--text-xs); font-weight: 400; letter-spacing: var(--track-label); text-transform: uppercase; }
.standings-privacy--footer > .disclosure > summary:hover { text-decoration: underline; text-underline-offset: .35rem; }
.standings-privacy--footer > .disclosure > .disclosure-body { position: absolute; z-index: 10; inset-inline-end: 0; bottom: 100%; width: min(100%, 30rem); box-sizing: border-box; max-height: min(70vh, 36rem); max-height: min(70dvh, 36rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3); border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font-size: var(--text-sm); letter-spacing: normal; text-transform: none; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .standings-privacy--footer > .disclosure > .disclosure-body { inset-inline-start: 0; inset-inline-end: auto; }
}