/* css/climbers.css — "Climbers of the Week". Prefix: clw-
   Deliberately a MIRROR of css/killers.css (kw-): same card → brandbar → hero →
   podium → list skeleton, same selector order, so the two weekly pages read as
   one family and a future diff between them stays legible. Two differences that
   are on purpose:
     · Sky accent, not green — the pages must be tellable apart at a glance, and
       leaving the warm end of the palette free keeps the gold #1 ring reading as
       first place rather than as the page colour.
     · The metric slot carries TWO numbers (THP/week + %/week) where killers
       carries one; .clw-pct is the second line, in both the podium and the row. */

:root {
  --clw-1: #38bdf8;                    /* the sky */
  --clw-2: #7dd3fc;
  --clw-glow:   rgba(56, 189, 248, .20);
  --clw-glow-2: rgba(56, 189, 248, .07);
  --clw-border: rgba(56, 189, 248, .26);
  --clw-gold: #fbbf24;
}

/* ── light theme (cool clay/glass, 2026-08-19) ───────────────────────
   Mirrors the killers block for the same reason: --clw-2 carries the podium
   gain figure (.clw-pod-gain), and a #7dd3fc sky blue on the pale sky card
   is ~1.7:1. Deepened to hold as a number. See css/killers.css. */
:root[data-theme="light"] {
  /* ⚠ --clw-1 must be here too, and it was missed on the first pass because
     killers' equivalent is `--kw-1: var(--accent)` and follows the theme by
     itself — this one is a hardcoded #38bdf8, which is 1.98:1 on the pale
     card. It carries the eyebrow, the brand mark, the active tab, the #1
     podium gain AND .clw-pct, which is 11.5px, so it needs full AA rather
     than large-text AA. Darker than --clw-2, preserving the dark theme's
     hierarchy where --clw-1 is the stronger of the two. */
  --clw-1: #145d94;   /* 6.41:1 */
  --clw-2: #1f7fc4;   /* 3.96:1 — large podium figures only */
  --clw-glow:   rgba(31, 107, 196, .13);
  --clw-glow-2: rgba(31, 107, 196, .06);
  --clw-border: rgba(31, 107, 196, .26);
}


.clw-wrap { max-width: 780px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-10); position: relative; }

/* ── controls (hidden in screenshot mode) ─────────────────────────── */
.clw-shot-toggle {
  position: absolute; top: var(--sp-5); right: var(--sp-4); z-index: 6;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: var(--glass-bg-2); border: 1px solid var(--border-2); color: var(--text-2);
  font: 700 12px/1 var(--font-ui); white-space: nowrap;
}
.clw-shot-toggle:hover { color: var(--text-1); border-color: var(--clw-border); }
body.clw-shot .clw-controls { display: none; }
body.clw-shot .clw-shot-toggle { background: var(--clw-glow-2); border-color: var(--clw-border); color: var(--clw-1); }

.clw-controls { margin: 8px 0 18px; padding-right: 120px; }
.clw-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.clw-tab {
  flex: 0 0 auto; padding: var(--sp-2) var(--sp-4); border-radius: 999px; cursor: pointer;
  background: var(--glass-bg-2); border: 1px solid var(--border-2); color: var(--text-2);
  font: 700 0.9rem/1 var(--font-ui); white-space: nowrap; transition: all .15s;
}
.clw-tab:hover { color: var(--text-1); border-color: var(--border-3); }
.clw-tab-on { background: var(--clw-glow-2); border-color: var(--clw-border); color: var(--clw-1); }
.clw-pickers { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.clw-ctl { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; }
/* Must beat the display:flex above or the [hidden] attribute is ignored and
   every picker shows in every tier — the bug killers.css calls out. */
.clw-ctl[hidden] { display: none; }
.clw-ctl-label { font: 600 0.7rem/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.clw-input {
  width: 100%; padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text-1);
  font: 600 1rem/1 var(--font-data);
}
.clw-input:focus { outline: none; border-color: var(--clw-border); box-shadow: 0 0 0 3px var(--clw-glow-2); }

/* ── the shareable card ───────────────────────────────────────────── */
.clw-card {
  border: 1px solid var(--clw-border); border-radius: var(--r-2xl); overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--clw-glow), transparent 60%),
    var(--glass-bg-2);
  box-shadow: var(--shadow-lg);
}

/* brand rides the very top — in any crop the domain is visible */
.clw-brandbar {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-bottom: 1px solid var(--border-1);
  background: linear-gradient(180deg, var(--clw-glow-2), transparent);
}
.clw-brand-img { border-radius: 6px; }
.clw-brand-text { font: 800 1rem/1 var(--font-ui); letter-spacing: .02em; color: var(--text-1); }
.clw-brand-dim { color: var(--clw-1); }
.clw-brand-tag { margin-left: auto; font: 700 0.78rem/1 var(--font-data); color: var(--text-2); }

/* hero — eyebrow + glorifying scope title + stats */
.clw-hero { text-align: center; padding: 24px 18px 6px; position: relative; }
.clw-eyebrow {
  font: 700 0.74rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--clw-1); margin-bottom: 10px;
}
.clw-title {
  font: 800 clamp(2.1rem, 8vw, 3.4rem)/1.02 var(--font-ui); margin: 0; letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff 8%, var(--clw-2) 62%, var(--clw-1) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--clw-1);
  overflow-wrap: anywhere;
}
:root[data-theme="light"] .clw-title { background: linear-gradient(180deg, #0c2233 8%, var(--clw-1) 100%); -webkit-background-clip: text; background-clip: text; }
.clw-sub { font: 500 0.95rem/1.4 var(--font-ui); color: var(--text-2); margin: 10px 0 0; }
.clw-sub strong { color: var(--text-1); font-weight: 700; }

/* ── podium (top 3) ───────────────────────────────────────────────── */
.clw-podium { padding: 22px 16px 4px; }
.clw-podium-head { text-align: center; font: 700 0.72rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 16px; }
.clw-podium-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.clw-pod {
  container-type: inline-size; text-align: center; cursor: pointer;
  border: 1px solid var(--border-1); border-radius: var(--r-lg);
  background: var(--glass-bg); padding: 16px 8px 14px; transition: transform .12s, border-color .12s;
}
.clw-pod:hover { transform: translateY(-3px); border-color: var(--clw-border); }
/* order 2/1/3 puts first place in the CENTRE and raises it — the podium shape */
.clw-pod-1 {
  order: 2; padding-top: 22px;
  border-color: var(--clw-border);
  background: linear-gradient(180deg, var(--clw-glow), transparent 70%), var(--glass-bg-3);
  box-shadow: 0 8px 28px -14px var(--clw-1);
}
.clw-pod-2 { order: 1; } .clw-pod-3 { order: 3; }
.clw-pod-photo { position: relative; width: min(64cqw, 74px); aspect-ratio: 1; margin: 0 auto 9px; }
.clw-pod-1 .clw-pod-photo { width: min(78cqw, 94px); }
.clw-pod-photo::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--border-3); pointer-events: none;
}
.clw-pod-1 .clw-pod-photo::after { border-color: var(--clw-gold); box-shadow: 0 0 18px -2px var(--clw-gold); }
.clw-pod-2 .clw-pod-photo::after { border-color: #cbd5e1; }
.clw-pod-3 .clw-pod-photo::after { border-color: #d69b6a; }
.clw-pod-img, .clw-pod-initial {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.clw-pod-initial {
  display: grid; place-items: center; background: var(--bg-3); color: var(--text-2);
  font: 800 1.3rem/1 var(--font-ui);
}
.clw-pod-badge {
  position: absolute; right: -2px; bottom: -2px; min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; color: #0c2233;
  font: 800 12px/1 var(--font-data); background: linear-gradient(135deg, #e2e8f0, #94a3b8);
  border: 2px solid var(--bg-2);
}
.clw-pod-1 .clw-pod-badge { background: linear-gradient(135deg, var(--clw-gold), #d97706); min-width: 25px; height: 25px; font-size: 13px; }
.clw-pod-3 .clw-pod-badge { background: linear-gradient(135deg, #e0a97a, #b4703c); }
.clw-pod-name { font: 700 12.5px/1.25 var(--font-ui); color: var(--text-1); margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clw-pod-1 .clw-pod-name { font-size: 14px; }
.clw-pod-gain { font: 800 clamp(14px, 4.8vw, 20px)/1 var(--font-data); color: var(--clw-2); font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.clw-pod-1 .clw-pod-gain { color: var(--clw-1); }
/* the second metric — percent of their OWN starting power, so a 90M player and
   a 600M player are readable against each other on the same podium */
.clw-pod-pct { font: 700 11px/1 var(--font-data); color: var(--text-2); font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.clw-pod-meta { font: 500 10px/1.3 var(--font-data); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clw-pod-meta .ab { color: var(--text-2); }

/* ── the rest of the list ─────────────────────────────────────────── */
.clw-list { list-style: none; margin: 0; padding: 8px 12px 4px; display: flex; flex-direction: column; gap: 2px; }
.clw-center { text-align: center; padding: var(--sp-8) var(--sp-2); color: var(--text-2); font: 500 0.95rem/1.4 var(--font-ui); }
.clw-muted { color: var(--text-2); }
.clw-row {
  display: grid; grid-template-columns: 2rem 2.2rem 1fr auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); cursor: pointer;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.clw-row:hover { background: var(--glass-bg-2); border-color: var(--border-2); }
.clw-rk { font: 800 0.95rem/1 var(--font-data); color: var(--text-2); text-align: center; font-variant-numeric: tabular-nums; }
.clw-av { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-2); background: var(--bg-3); }
.clw-av-blank { display: inline-block; }

/* skeleton loader rows */
.clw-skel { pointer-events: none; }
.clw-skel-box, .clw-skel-line {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--clw-glow-2) 50%, var(--bg-2) 75%);
  background-size: 200% 100%; animation: clw-shimmer 1.2s ease-in-out infinite; border-radius: 6px;
}
.clw-skel-line { height: 11px; display: inline-block; }
@keyframes clw-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.clw-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.clw-name { font: 700 0.96rem/1.2 var(--font-ui); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clw-meta { display: flex; gap: var(--sp-2); align-items: center; }
.clw-abbr { font: 700 0.72rem/1 var(--font-data); color: var(--clw-1); }
.clw-wz { font: 600 0.72rem/1 var(--font-data); color: var(--text-2); }
.clw-metric { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.clw-perweek { font: 800 0.98rem/1 var(--font-data); color: var(--text-1); font-variant-numeric: tabular-nums; }
.clw-pct { font: 600 0.72rem/1 var(--font-data); color: var(--clw-1); font-variant-numeric: tabular-nums; }

.clw-cardfoot { text-align: center; padding: 14px 16px 18px; margin: 6px 0 0; font: 500 0.72rem/1.4 var(--font-ui); color: var(--text-2); }
.clw-cardfoot strong { color: var(--clw-1); font-weight: 700; }

.clw-foot { margin-top: var(--sp-5); font: 500 0.78rem/1.5 var(--font-ui); color: var(--text-3); text-align: center; }

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .clw-wrap { padding: var(--sp-4) var(--sp-3) var(--sp-10); }
  /* Static (not absolute) on phones so it can never overlap the tabs — the
     mobile collision killers.css documents. */
  .clw-shot-toggle { position: static; display: block; margin: 0 0 10px auto; }
  .clw-controls { margin-top: 0; padding-right: 0; }
  .clw-tabs { flex-wrap: wrap; overflow: visible; gap: 6px; }
  .clw-tab { flex: 1 1 40%; justify-content: center; text-align: center; padding: 9px 6px; font-size: 0.84rem; }
  .clw-pickers { flex-direction: column; gap: var(--sp-2); }
  .clw-ctl { flex: 1 1 auto; }
  .clw-brandbar { padding: 11px 14px; }
  .clw-hero { padding: 20px 12px 4px; }
  .clw-podium { padding: 18px 8px 2px; }
  .clw-list { padding: 8px 8px 4px; }
  .clw-row { grid-template-columns: 1.5rem 2rem 1fr auto; gap: var(--sp-2); padding: var(--sp-2) var(--sp-1); }
  .clw-av { width: 2rem; height: 2rem; }
  .clw-name { font-size: 0.9rem; }
  .clw-perweek { font-size: 0.92rem; }
}
@media (max-width: 380px) {
  .clw-title { font-size: 1.85rem; }
}

/* ─────────────────────────────────────────────────────────────
   WEEK PICKER — mirrors /killers' (css/killers.css .kw-week*), in this page's
   sky tokens. The CTA sits above the tier tabs; the sheet is the site's modal
   layer (z 500 — the bottom nav goes to 400 and would eat the last row lower).
   ⚠ The CTA is OUTSIDE .clw-tabs, so shot mode has to hide it explicitly too.
───────────────────────────────────────────────────────────── */
.clw-weekcta {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; margin: 0 0 10px; padding: 11px 14px;
  background: linear-gradient(180deg, var(--clw-glow-2), transparent), var(--glass-bg);
  border: 1px solid var(--clw-border); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--glass-shine);
  backdrop-filter: var(--blur-md) saturate(var(--glass-sat));
  -webkit-backdrop-filter: var(--blur-md) saturate(var(--glass-sat));
  color: var(--text-1); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.clw-weekcta:hover { border-color: var(--clw-1); }
.clw-weekcta:focus-visible { outline: 2px solid var(--clw-1); outline-offset: 2px; }
.clw-weekcta[hidden] { display: none; }
body.clw-shot .clw-weekcta { display: none; }
.clw-weekcta-ico { font-size: 1.05rem; line-height: 1; }
.clw-weekcta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.clw-weekcta-label { font: 600 0.66rem/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.clw-weekcta-value { font: 700 1rem/1.2 var(--font-ui); color: var(--clw-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clw-weekcta-caret { color: var(--text-2); font-size: .8rem; }

.clw-modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--scrim); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm);
}
.clw-modal.hidden { display: none; }
.clw-modal-sheet {
  width: min(520px, 100%); max-height: 80vh; overflow-y: auto;
  background: var(--glass-bg-2); border: 1px solid var(--glass-border-2);
  box-shadow: inset 0 1px 0 var(--glass-shine), var(--shadow-xl);
  backdrop-filter: var(--blur-lg) saturate(var(--glass-sat)); -webkit-backdrop-filter: var(--blur-lg) saturate(var(--glass-sat));
  border-radius: var(--r-2xl) var(--r-2xl) 0 0; padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
}
@media (min-width: 640px) {
  .clw-modal { align-items: center; }
  .clw-modal-sheet { border-radius: var(--r-2xl); }
}
.clw-modal-handle { width: 38px; height: 4px; margin: 2px auto 10px; background: var(--border-2); border-radius: 2px; }
.clw-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.clw-modal-title { font: 700 1.05rem/1.2 var(--font-ui); color: var(--text-1); }
.clw-modal-close { background: none; border: 0; color: var(--text-2); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 4px 6px; }
.clw-modal-close:hover { color: var(--text-1); }

.clw-weeklist { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.clw-weekopt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; padding: 12px 14px; cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--r-md); color: var(--text-1); font: inherit; text-align: left;
}
.clw-weekopt:hover { border-color: var(--clw-1); }
.clw-weekopt:focus-visible { outline: 2px solid var(--clw-1); outline-offset: 2px; }
.clw-weekopt-on { border-color: var(--clw-1); background: var(--clw-glow-2); }
.clw-weekopt-main { font: 600 0.98rem/1.2 var(--font-ui); }
.clw-weekopt-tag {
  font: 600 0.68rem/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase;
  color: var(--clw-1); border: 1px solid var(--clw-border); border-radius: 999px; padding: 4px 8px;
}
.clw-weekopt-check { color: var(--clw-1); font-size: .95rem; }