/* Pass 2 P7: Rankings tile, compact pane and full view (full-rankings.js).
   Theme tokens only (--v-*). Medal colours reuse the shared .pc-tint-gold/silver/bronze
   classes (profile.css). Durations and easing are the pass-2 motion tokens (--v-dur-*,
   --v-ease-out / --v-ease-in in design-tokens.css). Rows are badges.js .pc-lb-* parts, restyled inside
   .rk-board only. --rk-left / --rk-bottom / --rk-top-clear are written by full-rankings.js
   from measured button rects, as custom properties on <html>. */

.rk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- compact pane: hangs from its own tile (left edges line up, 8 px above it) ---- */
.rk-pane {
  left: var(--rk-left, 102.9px); bottom: var(--rk-bottom, 92px); width: 372px; max-width: calc(100vw - 24px);
  /* Top edge stays below the top-left button column, so no button is covered. */
  max-height: calc(100vh - var(--rk-bottom, 92px) - var(--rk-top-clear, 228px));
  min-height: var(--rk-hold, 0px);
  display: flex; flex-direction: column; transform-origin: 0 100%;
}
.rk-pane[hidden] { display: none; }
.rk-pane > .pc-ph { flex: none; background: transparent; }
.rk-pane .pc-ich { color: var(--v-acc); }
.rk-scroll {
  flex: 1 1 auto; min-height: 0; overflow: hidden auto; overscroll-behavior: contain;
  margin: 0 -20.2px; padding: 0 20.2px; border-top: 1px solid var(--v-line);
}
.rk-pane.rk-in { animation: rk-pane-in var(--v-dur-base) var(--v-ease-out); }
.rk-pane.rk-out { animation: rk-pane-out var(--v-dur-base) var(--v-ease-in) forwards; pointer-events: none; }
@keyframes rk-pane-in { from { opacity: 0; translate: 0 10px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rk-pane-out { from { opacity: 1; translate: 0 0; scale: 1; } to { opacity: 0; translate: 0 10px; scale: .97; } }
@media (prefers-reduced-motion: reduce) {
  .rk-pane.rk-in, .rk-pane.rk-out { animation: none; }
  .rk-board *, .rk-signin, .rk-showmore, .rk-more { transition: none !important; }
}

/* ---- the board ---- */
.rk-board { display: flex; flex-direction: column; min-width: 0; font-family: var(--v-font); }
.rk-rows { display: flex; flex-direction: column; min-width: 0; }
.rk-head { display: flex; flex-direction: column; gap: 12px; padding: 14px 0 6px; }
/* Main tabs (Players, Crews, Art) and the cut inside each: Today / Week / Month / Year / All time, one segmented
   control that never wraps to a second row. In the narrow pane the cut drops under the tabs and takes the full
   width; in the full view both sit on one row. One active look for both, in every theme: the accent fill, the
   accent ink and an accent border, all three eased together, so a first paint and a click read the same. */
.rk-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.rk-tabs { display: inline-flex; gap: 6px; }
.rk-cut { display: flex; flex: 1 1 320px; min-width: 0; max-width: 400px; margin-left: auto; gap: 2px; padding: 2px; border-radius: var(--v-r-pill); background: var(--v-trk); }
.rk-tab, .rk-cutb {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px solid var(--v-line); border-radius: var(--v-r-pill); background: var(--v-surf); color: var(--v-mut);
  font: 600 14px/1.2 var(--v-font); cursor: pointer; white-space: nowrap;
  transition: background-color var(--v-dur-fast) var(--v-ease-out), border-color var(--v-dur-fast) var(--v-ease-out),
    color var(--v-dur-fast) var(--v-ease-out);
}
.rk-tab { padding: 7px 14px; }
.rk-cutb { flex: 1 1 auto; min-width: 36px; min-height: 36px; padding: 0 8px; border-color: transparent; background: transparent; font-size: 13px; }
.rk-tab-ic { width: 16px; height: 16px; flex: none; }
@media (hover: hover) {
  .rk-tab:hover, .rk-cutb:hover { color: var(--v-ink); background: var(--v-surf2); border-color: var(--v-mut); }
  .rk-cutb:hover { border-color: transparent; }
}
.rk-tab[aria-selected="true"], .rk-cutb[aria-checked="true"],
.rk-tab[aria-selected="true"]:hover, .rk-cutb[aria-checked="true"]:hover {
  background: var(--v-acc); border-color: var(--v-acc); color: var(--v-accink);
}
.rk-tab:focus-visible, .rk-cutb:focus-visible { outline: 2px solid var(--v-ink); outline-offset: 2px; }
/* The rank column is as wide as the widest rank on the board (data-rank-ch = digits + commas). */
.rk-lb { --rk-rank-w: 44px; display: flex; flex-direction: column; min-width: 0; }
.rk-lb[data-rank-ch="4"] { --rk-rank-w: 50px; }
.rk-lb[data-rank-ch="5"] { --rk-rank-w: 54px; }
.rk-lb[data-rank-ch="6"] { --rk-rank-w: 63px; }
.rk-lb[data-rank-ch="7"] { --rk-rank-w: 72px; }
.rk-lb[data-rank-ch="8"] { --rk-rank-w: 81px; }
.rk-lb[data-rank-ch="9"] { --rk-rank-w: 85px; }
.rk-board .pc-lb-row[hidden] { display: none; }
.rk-cols, .rk-board .pc-lb-row {
  display: grid; grid-template-columns: var(--rk-rank-w) minmax(0, 1fr) auto; align-items: center; gap: 12px;
}
.rk-cols { padding: 0 10px; font: 700 12px/1.4 var(--v-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--v-mut); }
.rk-c-rank { text-align: center; letter-spacing: .8px; padding-left: .8px; /* trailing letter-space, so the word centres on the pill and fits its column */ }
.rk-c-name { padding-left: 36px; }
.rk-c-px { text-align: right; }
.rk-lb.rk-is-empty .rk-cols, .rk-lb:not(.rk-has-rows) .rk-cols, .rk-lb[data-kind="art"] .rk-cols { display: none; }
/* Loading and error: the three-row skeleton and the sentence + Retry sit where the rows will be. */
.rk-board .pc-lb-skel { padding: 14px 10px 10px; gap: 14px; }
.rk-board .pc-lb-skel-row { height: 18px; border-radius: 9px; }
.rk-lb[data-state="error"] .pc-lb-note { padding: 14px 10px 6px; }
.rk-board .pc-lb-retry { margin: 0 10px 12px; padding: 7px 18px; font-size: 14px; }
.rk-board .pc-lb-list { gap: 2px; padding: 4px 0; }
.rk-board .pc-lb-row { padding: 8px 10px; font: 600 15px/1.35 var(--v-font); color: var(--v-ink); border-radius: 10px; }
.rk-board .pc-lb-row .pc-lb-rank {
  display: inline-flex; align-items: center; justify-content: center; justify-self: center; box-sizing: border-box;
  min-width: 28px; height: 26px; padding: 0 6px; border-radius: var(--v-r-pill);
  background: var(--v-trk); color: var(--v-mut); font: 700 14px/1 var(--v-font); font-variant-numeric: tabular-nums;
}
.rk-board .pc-lb-row.is-top .pc-lb-rank { background: none; padding: 0; min-width: 0; height: auto; }
.rk-board .pc-lb-row.is-top .pc-lb-rank { color: var(--v-ink); }
/* Crews rows open that crew: the name cell is a bare button, stretched over the row with ::after. */
.rk-board .pc-lb-row.is-link { position: relative; cursor: pointer; transition: background-color var(--v-dur-fast) var(--v-ease-out); }
.rk-crew-open {
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.rk-crew-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--v-r-md); }
.rk-crew-open:focus { outline: none; }
.rk-crew-open:focus-visible::after { outline: 2px solid var(--v-ink); outline-offset: -2px; }
@media (hover: hover) {
  .rk-board .pc-lb-row.is-link:hover { background: var(--v-surf2); }
}
.rk-board .pc-lb-px {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--v-r-pill);
  background: var(--v-surf2); font: 700 14px/1.35 var(--v-font); font-variant-numeric: tabular-nums;
}
.rk-board .pc-lb-row.is-you .pc-lb-px { background: var(--v-trk); }
.rk-pxi { width: 14px; height: 14px; color: var(--v-acc); flex: none; }
.rk-board .pc-lb-you, .rk-teaser .pc-lb-you { display: none; }
/* Names share one start x: avatar chip (fixed slot) first; the country is a tinted pill after the name. */
.rk-board .pc-lb-name { gap: 8px; }
.rk-board .pc-lb-flag { display: none; }
.rk-board {
  /* Chip tints: eight mixes of the theme's own colour tokens (no one-off hues). */
  --rk-t0: var(--v-acc);
  --rk-t1: var(--v-live);
  --rk-t2: color-mix(in srgb, var(--v-acc) 50%, var(--v-live));
  --rk-t3: var(--pc-gold, var(--v-acc));
  --rk-t4: color-mix(in srgb, var(--v-ink) 45%, var(--v-acc));
  --rk-t5: var(--v-acc2, var(--v-mut));
  --rk-t6: color-mix(in srgb, var(--v-mut) 60%, var(--v-live));
  --rk-t7: color-mix(in srgb, var(--v-ink) 50%, var(--v-mut));
}
.rk-av {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal;
  font: 700 13px/1 var(--v-font); color: var(--v-ink); --rk-c: var(--rk-t0);
  background: color-mix(in srgb, var(--rk-c) 32%, var(--v-surf2));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rk-c) 70%, transparent);
}
.rk-av[data-hue="1"] { --rk-c: var(--rk-t1); } .rk-av[data-hue="2"] { --rk-c: var(--rk-t2); }
.rk-av[data-hue="3"] { --rk-c: var(--rk-t3); } .rk-av[data-hue="4"] { --rk-c: var(--rk-t4); }
.rk-av[data-hue="5"] { --rk-c: var(--rk-t5); } .rk-av[data-hue="6"] { --rk-c: var(--rk-t6); }
.rk-av[data-hue="7"] { --rk-c: var(--rk-t7); }
.rk-unnamed { color: var(--v-mut); font-weight: 500; }
.rk-cc {
  flex: none; padding: 1px 7px; border-radius: var(--v-r-pill); background: var(--v-trk); color: var(--v-mut);
  font: 700 12px/1.4 var(--v-font); letter-spacing: .6px;
}
/* Your row: highlighted where it sits, and pinned to the bottom edge while it is scrolled out of view. */
.rk-board .pc-lb-row.is-you {
  position: sticky; bottom: 0; z-index: 1;
  background: var(--v-surf2); box-shadow: inset 0 0 0 1.5px var(--v-acc), var(--v-sh);
}
.rk-board .pc-lb-gap { font: 700 15px/1 var(--v-font); color: var(--v-mut); padding: 4px 0; }
.rk-medal {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, currentColor 30%, transparent); box-shadow: inset 0 0 0 1.5px currentColor;
}
.rk-medal b { color: var(--v-ink); font: 800 13px/1 var(--v-font); font-variant-numeric: tabular-nums; }
.rk-board .pc-lb-note { padding: 10px; font: 500 15px/1.4 var(--v-font); color: var(--v-mut); }

/* Empty state: the trophy and one line. */
.rk-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 12px 18px; text-align: center; }
.rk-empty[hidden] { display: none; }
.rk-empty-ic { width: 40px; height: 40px; color: var(--v-mut); opacity: .7; margin-bottom: 4px; }
.rk-empty-t { font: 700 16px/1.35 var(--v-font); color: var(--v-ink); }

/* Footer: the guest sign-in nudge (Players only). */
.rk-foot {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 10px 12px;
  border-radius: 12px; background: var(--v-surf2);
}
.rk-foot[hidden] { display: none; }
.rk-foot-ic { width: 20px; height: 20px; color: var(--v-acc); flex: none; }
.rk-foot-t { flex: 1; min-width: 0; font: 600 15px/1.35 var(--v-font); color: var(--v-ink); }
.rk-signin {
  flex: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--v-line);
  background: var(--v-surf); color: var(--v-ink); font: 600 14px/1.2 var(--v-font); cursor: pointer;
  transition: border-color var(--v-dur-fast) var(--v-ease-out);
}
.rk-signin:hover { border-color: var(--v-mut); }
.rk-signin[hidden] { display: none; }
.rk-showmore {
  align-self: center; margin: 12px 0 4px; padding: 8px 20px; border-radius: var(--v-r-pill); border: 1px solid var(--v-line);
  background: var(--v-surf2); color: var(--v-ink); font: 600 14px/1.2 var(--v-font); cursor: pointer;
  transition: border-color var(--v-dur-fast) var(--v-ease-out);
}
.rk-showmore:hover { border-color: var(--v-mut); }
.rk-showmore[hidden] { display: none; }
.rk-note { margin: 12px 0; font: 500 15px/1.4 var(--v-font); color: var(--v-mut); }

/* ---- full view: the same board, grown ---- */
/* The view itself never scrolls: tabs and column header stay on the pane's own surface and only the
   rows box scrolls under them, so nothing shows through. Your pinned row sits flush on the pane bottom. */
.rk-body { flex-direction: column; overflow: hidden; padding: 0 22px; }
.rk-body .rk-board { flex: 1 1 0; min-height: 0; width: 100%; max-width: 860px; margin: 0 auto; }
.rk-body .rk-lb { flex: 1 1 0; min-height: 0; }
.rk-body .rk-head { flex: none; padding-top: 16px; }
.rk-body .rk-rows { flex: 1 1 0; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; padding-right: 2px; }
.rk-body .rk-foot { flex: none; margin: 8px 0 14px; }
.rk-body .rk-tab { padding: 8px 18px; font-size: 15px; }
.rk-body .rk-cutb { padding: 0 12px; font-size: 14px; }
.rk-body .pc-lb-row { padding: 10px 12px; font-size: 16px; }
.rk-body .pc-lb-px, .rk-body .pc-lb-row .pc-lb-rank { font-size: 16px; }
.rk-body .rk-cols { padding: 0 12px; }
.rk-body .rk-av { width: 32px; height: 32px; font-size: 14px; }
.rk-body .rk-c-name { padding-left: 40px; }
.rk-body .pc-lb-row:not(.is-you) + .pc-lb-row:not(.is-you) { box-shadow: inset 0 1px 0 var(--v-line); border-radius: 0; }
.rk-body .rk-medal { width: 30px; height: 30px; }
/* The full view sets the rank at 16 px (the sheet's 14 px), so its pill is wider: measured 43.0 / 57.7 / 68.0 / 78.4 / 93.0 px
   for 3 / 5 / 6 / 7 / 9 characters. Each column is that plus about 2 px. */
.rk-body .rk-lb[data-rank-ch="4"] { --rk-rank-w: 56px; }
.rk-body .rk-lb[data-rank-ch="5"] { --rk-rank-w: 60px; }
.rk-body .rk-lb[data-rank-ch="6"] { --rk-rank-w: 70px; }
.rk-body .rk-lb[data-rank-ch="7"] { --rk-rank-w: 80px; }
.rk-body .rk-lb[data-rank-ch="8"] { --rk-rank-w: 89px; }
.rk-body .rk-lb[data-rank-ch="9"] { --rk-rank-w: 95px; }
.rk-body .rk-medal b { font-size: 14px; }
.rk-title-ic { width: 24px; height: 24px; color: var(--v-acc); flex: none; }

/* ---- Art gallery: masonry of thumbnails (full-rankings.js buildTile) ----
   Columns are built in JS (each tile goes to the shortest one, so ranks 1-3 sit side by side at the top);
   the column count is --rk-gcols: 2 in the pane and on a phone, 3 in the full view, 4 on a wide screen. */
.rk-gal { --rk-gcols: 2; --rk-gg: 10px; display: flex; align-items: flex-start; gap: var(--rk-gg); padding: 12px 0 8px; min-width: 0; }
.rk-gal[hidden] { display: none; }
.rk-gcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--rk-gg); }
.rk-art {
  box-sizing: border-box; display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; overflow: hidden;
  border: 1.5px solid var(--v-line); border-radius: var(--v-r-md); background: var(--v-surf2); color: var(--v-ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--v-dur-fast) var(--v-ease-out);
}
.rk-art:hover { border-color: var(--v-mut); }
.rk-art:focus-visible { outline: 2px solid var(--v-ink); outline-offset: 2px; }
/* The frame's height follows the artwork's own shape (--rk-ar, clamped), the art sits whole inside it. */
.rk-art-frame { display: block; box-sizing: border-box; width: 100%; aspect-ratio: 1 / var(--rk-ar, 1); padding: 12px; }
.rk-art[data-tone="light"] .rk-art-frame { background: color-mix(in srgb, var(--v-ink) 78%, var(--v-surf2)); }
:root[data-theme="dark"] .rk-art[data-tone="dark"] .rk-art-frame, :root[data-theme="neon"] .rk-art[data-tone="dark"] .rk-art-frame {
  background: color-mix(in srgb, var(--v-ink) 88%, var(--v-surf2));
}
:root[data-theme="dark"] .rk-art[data-tone="light"] .rk-art-frame, :root[data-theme="neon"] .rk-art[data-tone="light"] .rk-art-frame { background: none; }
.rk-art-cv { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.rk-art-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 8px; min-height: 30px; }
.rk-like {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--v-r-pill);
  background: var(--v-surf); font: 700 13px/1.35 var(--v-font); font-variant-numeric: tabular-nums;
}
.rk-likei { width: 14px; height: 14px; flex: none; color: var(--v-live); }
.rk-art .rk-medal { width: 24px; height: 24px; flex: none; }
.rk-art .rk-medal b { font-size: 13px; }
.rk-body .rk-gal { --rk-gcols: 3; --rk-gg: 14px; padding-top: 14px; }
.rk-body .rk-art-meta { padding: 0 10px 10px; }
@media (min-width: 1200px) { .rk-body .rk-gal { --rk-gcols: 4; } }
@media (prefers-reduced-motion: reduce) { .rk-art { transition: none; } }

/* ---- NYC Live TODAY teaser: top 3 and a link to the full Rankings ---- */
.rk-teaser .pc-lb-rule { display: none; }
.rk-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 0;
  border: 0; background: none; color: var(--v-mut); font: 600 14px/1.3 var(--v-font); cursor: pointer;
  transition: color var(--v-dur-fast) var(--v-ease-out);
}
.rk-more:hover { color: var(--v-ink); }
.rk-more .pc-icon { width: 16px; height: 16px; }

@media (max-width: 600px) {
  .rk-body .rk-gal { --rk-gcols: 2; --rk-gg: 10px; }
  .rk-pane {
    left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none;
    max-height: calc(100vh - 80px); zoom: 1;
  }
  /* The sheet covers the bottom tiles, so the corner chrome and the paint dock step aside while it
     is open (full-rankings.js sets body.pc-rankings-open); Close is in the sheet header. */
  body.pc-rankings-open .chrome-corner:not(.chrome-top-right),
  body.pc-rankings-open #pc-bottom-dock { display: none; }
  .rk-pane .pc-hcb, .pc-full[data-view="rankings"] .pc-full-head .pc-hcb { width: 44px; height: 44px; }
  /* Touch targets: tabs 40 px tall, every cut option at least 36 x 36 (set above for every width). */
  .rk-tab { min-height: 40px; }
  /* Opaque on a phone: no logo or corner button shows through the sheet or the full view. */
  .rk-pane, .pc-full[data-view="rankings"], .pc-full[data-view="rankings"] .pc-full-frame, .pc-full[data-view="rankings"] .pc-full-head {
    background: var(--v-card);
    background: rgb(from var(--v-surf) r g b / 1);
  }
}