/* Contourly — leaderboard screen (page-like). Owned by Wave-2 Agent C.
   ONE responsive DOM: mobile-first list, tablet ≥768, desktop ≥1024 wide table
   (podium + rank/flag/name/points/meter grid) wrapped in a paper card. Foundation
   tokens/components (rows, podium, self, tabs, meter, skel) live in app.css; this
   file is layout + the desktop reflow. Root = .ct-screen--page → app.js reveals the
   global footer + owl mascot; header comes from ui.pageHeader(). */

/* ---- wrap (the centered ≤1200 content column) --------------------------- */
.ct-lb__wrap { display: flex; flex-direction: column; padding-bottom: 14px; }

/* ---- bar: title + tabs + reset chip ------------------------------------- */
.ct-lb__bar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title reset" "tabs tabs";
  align-items: center;
  gap: 12px;
  padding: 20px 18px 14px;
}
.ct-lb__title { grid-area: title; margin: 0; font: 700 27px/1 var(--ct-font); letter-spacing: -.02em; }
.ct-lb__bar .ct-tabs { grid-area: tabs; justify-self: center; }
.ct-lb__reset-chip { grid-area: reset; margin: 0; justify-self: end; align-self: center; }

/* ---- podium ------------------------------------------------------------- */
.ct-lb__podium { padding: 4px 20px 0; }
.ct-lb__podium:empty { display: none; }
.ct-podium__coin--gold { background: var(--ct-yellow); }
.ct-podium__crown { top: -26px; }

/* ---- board (the ranked list) -------------------------------------------- */
.ct-lb__board {
  background: var(--ct-white);
  border-top: var(--ct-bw-fat) solid var(--ct-ink);
  margin-top: 14px;
  padding: 4px 16px;
}
.ct-lb-row__meter { display: none; }             /* meter is desktop-only */
.ct-lb-row--skel { border-bottom-color: var(--ct-hairline); }
.ct-lb-row--skel .ct-lb-row__rank { width: 22px; border-radius: 5px; }
.ct-lb__loading-note { font: 600 12px var(--ct-font); color: var(--ct-text-4); text-align: center; margin-top: 12px; padding-bottom: 6px; }

/* the caller's own row, highlighted in place (guest or named) — a pale cobalt
   sticker with a left accent, so "you" is easy to spot without leaving the list */
.ct-lb-row--self { background: rgba(39, 65, 230, .09); border-radius: var(--ct-r-card-sm); }
.ct-lb-row--self .ct-lb-row__rank { color: var(--ct-blue); }
.ct-lb-row--self .ct-lb-row__name { font-weight: 700; }

/* ---- pinned self row ---------------------------------------------------- */
.ct-lb__self-wrap { background: var(--ct-white); padding: 12px 16px 26px; }
.ct-lb__self-wrap--guest { background: transparent; padding: 14px 16px 26px; display: flex; flex-direction: column; gap: 12px; }
.ct-lb-self__pts { white-space: nowrap; }
/* persistence nudge under the board (login keeps points; it doesn't list them) */
.ct-lb__self-note { font: 600 13px/1.45 var(--ct-font); color: var(--ct-text-3); text-align: center; max-width: 340px; margin: 0 auto; }

/* ---- empty week --------------------------------------------------------- */
.ct-lb__empty { text-align: center; margin: 16px 16px 0; padding: 26px 22px; }
.ct-lb__empty-bursts { display: flex; justify-content: center; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.ct-lb__empty-burst { display: block; }
.ct-lb__empty-cta { margin-top: 16px; }

/* ========================================================================= */
/* TABLET ≥768 — roomier, board keeps its own inset card                     */
/* ========================================================================= */
@media (min-width: 768px) {
  .ct-lb__bar { padding: 12px 28px 16px; }
  .ct-lb__title { font-size: 30px; }
  .ct-lb__podium { padding: 8px 28px 0; }
  .ct-lb__board { margin: 16px 24px 0; border: var(--ct-bw) solid var(--ct-ink); border-radius: var(--ct-r-card-lg); box-shadow: var(--ct-sh-5); padding: 6px 22px; }
  .ct-lb__self-wrap { background: transparent; padding: 14px 24px 30px; }
  .ct-lb__empty { max-width: 460px; margin: 20px auto 0; }
}

/* ========================================================================= */
/* DESKTOP ≥1024 — one paper card: header row, big podium, table + meter col  */
/* ========================================================================= */
@media (min-width: 1024px) {
  .ct-lb__wrap {
    max-width: 1040px;
    margin-top: 10px;
    background: var(--ct-cream);
    border: var(--ct-bw-fat) solid var(--ct-ink);
    border-radius: var(--ct-r-panel);
    box-shadow: var(--ct-sh-9);
    overflow: hidden;
    padding-bottom: 0;
    position: relative;
    isolation: isolate;
  }
  .ct-lb__wrap::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(var(--ct-ink) 1.3px, transparent 1.3px);
    background-size: 22px 22px; opacity: .05;
  }

  /* header row: title + tabs inline left, reset chip far right */
  .ct-lb__bar {
    display: flex; align-items: center; gap: 18px;
    padding: 26px 34px 4px;
  }
  .ct-lb__title { font-size: 38px; }
  .ct-lb__bar .ct-tabs { justify-self: auto; }
  .ct-lb__reset-chip { margin-left: auto; justify-self: auto; }

  .ct-lb__podium { padding: 20px 20px 0; }
  .ct-podium { gap: 16px; }
  .ct-lb__podium .ct-podium__base { width: 110px; }
  .ct-lb__podium .ct-podium__slot--1 .ct-podium__base { width: 124px; height: 86px; }
  .ct-lb__podium .ct-podium__slot--2 .ct-podium__base { height: 62px; }
  .ct-lb__podium .ct-podium__slot--3 .ct-podium__base { height: 48px; }

  /* the white table section fills the card to its rounded bottom */
  .ct-lb__board {
    background: var(--ct-white);
    border: 0; border-top: var(--ct-bw-fat) solid var(--ct-ink);
    border-radius: 0; box-shadow: none;
    margin: 6px 0 0; padding: 6px 34px 0;
  }
  .ct-lb-row,
  .ct-lb-self {
    display: grid;
    grid-template-columns: 44px 40px 1fr 96px 190px;
    align-items: center;
    gap: 14px;
    min-height: 58px;
  }
  .ct-lb-row__rank { width: auto; text-align: left; }
  .ct-lb-row__flag { font-size: 22px; }
  .ct-lb-row__name { font-size: 16px; }
  .ct-lb-row__pts  { font-size: 16px; text-align: right; }
  .ct-lb-row__meter { display: block; }
  .ct-lb-row--skel .ct-lb-row__name { max-width: none; }

  /* pinned self row breaks out as a blue sticker at the bottom of the card */
  .ct-lb__self-wrap { background: var(--ct-white); padding: 12px 26px 26px; }
  .ct-lb__self-wrap--guest { background: var(--ct-white); }
  .ct-lb-self { padding: 0 6px; transform: rotate(-.4deg); }
  .ct-lb-self__pts { text-align: right; }
  .ct-lb-self--guest { transform: none; }
  .ct-lb__guest-cta { max-width: 360px; margin: 4px auto 0; }

  .ct-lb__empty { max-width: 520px; margin: 30px auto; padding: 40px 32px; }
  .ct-lb__empty-bursts { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-lb__podium .ct-burst__star--spin { animation: none !important; }
}