/* =====================================================================
   cw-refine.css — REFINEMENT LAYER (loads last)
   ---------------------------------------------------------------------
   Brief: "elevate what's there". The ARENA identity stays exactly as it is
   — #0f0f1a navy ground, #ff5500 orange, Rubik/Inter, per-section accents.
   Nothing here changes a hue or a typeface. What it changes is EXECUTION:

     1. Hierarchy — the page currently renders almost everything at one
        visual weight, so nothing leads. Labels recede, data steps forward.
     2. Numerals — this is a ladder. Ratings and scores are the content,
        so they get the tabular, tightly-tracked treatment they deserve.
        This is the signature move, and it is the only place we spend any
        boldness.
     3. Rhythm — one spacing scale instead of the 14/16/18px drift.
     4. Empty states — "0 in queue" currently reads as broken. It should
        read as an invitation.

   Loaded AFTER cw-lux.css, so it can correct earlier layers without
   editing the 265 KB monolith. !important is used only where an earlier
   layer already used it — see each note.
   ===================================================================== */

:root {
  /* One rhythm, derived from the existing 14/16/18 drift. */
  --rf-1: 6px;
  --rf-2: 10px;
  --rf-3: 14px;
  --rf-4: 18px;
  --rf-5: 26px;

  /* Micro-label: the uppercase eyebrow used on card headers and stat
     captions. Pulled into variables so every instance agrees. */
  --rf-label-size: 10.5px;
  --rf-label-track: .15em;

  /* A hairline that reads on the navy without becoming a visible line. */
  --rf-hair: linear-gradient(90deg,
              color-mix(in srgb, var(--cw-accent) 55%, transparent),
              transparent 62%);
}

/* ---------------------------------------------------------------------
   1. TYPE — establish a real scale.
   The base sets body 14/1.55 and headings Rubik 600. Headings at 600 with
   default tracking read soft at display sizes; 700 with negative tracking
   reads deliberate. Only weight/tracking/size change — same faces.
   --------------------------------------------------------------------- */
.cw-hero h1,
.cw-home-hero h1,
h1 {
  font-weight: 800;
  letter-spacing: -.022em;
  text-wrap: balance;
  line-height: 1.08;
}
.cw-hero h1 { font-size: clamp(28px, 3.4vw, 42px); }

/* The hero's accented word carries the brand; give it the gradient the
   sign-in CTA already establishes rather than a flat orange. */
.cw-hero h1 span,
.cw-home-hero h1 span {
  background: linear-gradient(120deg, var(--cw-accent-2), var(--cw-accent) 62%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Lead paragraph: slightly larger and calmer than body copy, capped near
   65 characters so it stays readable on wide screens. */
.cw-hero > p,
.cw-home-hero > p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cw-fg-2);
  max-width: 62ch;
}

/* ---------------------------------------------------------------------
   2. CARD HEADERS — turn the title into a proper eyebrow.
   Base renders these as mid-weight sentence text competing with the data
   underneath. As a tracked micro-label they frame the content instead.
   cw.css sets these with !important, so we must match it.
   --------------------------------------------------------------------- */
.cw-card-h { padding: 12px var(--rf-3) !important; align-items: center; }
.cw-card-h > h2 {
  font-size: var(--rf-label-size) !important;
  font-weight: 800 !important;
  letter-spacing: var(--rf-label-track) !important;
  text-transform: uppercase;
  color: var(--cw-fg-2) !important;
  display: flex; align-items: center; gap: 8px;
}
/* The accent rail: 2px, glowing, and it stops — a bar that runs the full
   height reads as a border; one that stops reads as a marker. */
.cw-card-h > h2::before {
  height: 12px !important;
  width: 2px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 10px -1px var(--cw-accent);
}
.cw-card-more {
  font-size: 11.5px; font-weight: 700;
  color: var(--cw-fg-dim);
  transition: color .16s ease;
}
.cw-card-more:hover { color: var(--cw-accent-2); }

/* Hairline under the header — separates without a hard 1px rule. */
.cw-card-h { position: relative; }
.cw-card-h::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--rf-hair); opacity: .5; pointer-events: none;
}

/* ---------------------------------------------------------------------
   3. SPACING — repair the .cw-card-b contract.
   Base contract was `.cw-card-b{padding:0}` + `.padded{18px}` so tables sit
   flush inside cards. ARENA later set .cw-card-b{padding:14px 16px}, which
   broke every flush table. Restore the contract; opt-in padding only.
   --------------------------------------------------------------------- */
.cw-card-b { padding: 0 !important; }
.cw-card-b.padded { padding: var(--rf-4) !important; }
/* Anything that isn't a full-bleed table still needs breathing room. */
.cw-card-b > .cw-grid,
.cw-card-b > .cw-home-fmts,
.cw-card-b > .cw-stats { padding: var(--rf-3); }

/* ---------------------------------------------------------------------
   4. NUMERALS — the signature.
   A ladder is read by scanning numbers down a column. Tabular figures with
   tight tracking make that scan work; proportional figures make it wobble.
   --------------------------------------------------------------------- */
.cw-home-stat .n,
.cw-stat .n, .cw-stat b,
.cw-lbt .rating, .cw-table .rating,
.cw-lb-rating, .cw-rank-rating,
.cw-mrow .score, .cw-ts-lroom-cnt, .cw-ts-sub-cnt {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -.015em;
}

/* Stat tiles: number leads hard, caption recedes to a tracked micro-label.
   The old version rendered both at similar weight, so neither led. */
.cw-home-statbar { gap: var(--rf-2); }
.cw-home-stat {
  padding: var(--rf-3) var(--rf-3) 12px;
  border-radius: var(--cw-radius);
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--cw-bg-3) 70%, transparent),
              color-mix(in srgb, var(--cw-bg-2) 90%, transparent));
  border: 1px solid var(--cw-border);
}
.cw-home-stat .n {
  font-family: var(--cw-font-display);
  font-size: 30px; font-weight: 800; line-height: 1;
  color: var(--cw-fg);
}
.cw-home-stat .n.is-zero { color: var(--cw-fg-dim); font-weight: 700; }
.cw-home-stat .l {
  font-size: var(--rf-label-size); font-weight: 800;
  letter-spacing: var(--rf-label-track); text-transform: uppercase;
  color: var(--cw-fg-dim);
}
.cw-home-stat .sub { font-size: 11px; font-weight: 700; color: var(--cw-accent-2); }

/* ---------------------------------------------------------------------
   5. TABLES / LEADERBOARD — make the rank column carry the hierarchy.
   --------------------------------------------------------------------- */
.cw-table th {
  font-size: var(--rf-label-size) !important;
  letter-spacing: var(--rf-label-track) !important;
  font-weight: 800 !important;
  color: var(--cw-fg-dim) !important;
}
.cw-table td { padding-top: 10px; padding-bottom: 10px; }
.cw-table tbody tr { transition: background .14s ease; }
.cw-table tbody tr:hover { background: color-mix(in srgb, var(--cw-accent) 5%, transparent); }
/* Player name is the row's anchor — it should outweigh its neighbours. */
.cw-table .cw-name-cell, .cw-table td .cw-pname { font-weight: 650; color: var(--cw-fg); }

/* ---------------------------------------------------------------------
   6. QUEUE CARDS — an empty queue should invite, not look broken.
   --------------------------------------------------------------------- */
.cw-home-fmt {
  border-radius: var(--cw-radius);
  padding: var(--rf-3);
  transition: border-color .16s ease, background .16s ease;
}
.cw-home-fmt-name { font-weight: 800; letter-spacing: -.01em; }
.cw-home-fmt-blurb { color: var(--cw-fg-dim); font-size: 12.5px; line-height: 1.5; }
.cw-home-fmt-q {
  font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--cw-good);
  background: color-mix(in srgb, var(--cw-good) 13%, transparent);
  border-radius: 999px; padding: 3px 9px;
}
/* The empty state: quiet, but deliberately styled rather than a dead grey
   pill — it reads "open", not "broken". */
.cw-home-fmt-q.empty {
  color: var(--cw-fg-dim);
  background: color-mix(in srgb, var(--cw-fg-dim) 10%, transparent);
}

/* ---------------------------------------------------------------------
   6b. PLACEMENT BADGE — a progress state, not missing data.
   CWRank::badge() now emits a count + pip track instead of "?" over "- MMR".
   --------------------------------------------------------------------- */
.cw-prem-unranked .cw-prem-chip-unranked {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  min-width: 30px; height: 26px;
  font-size: 13px;
}
.cw-prem-unranked .cw-prem-tier {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cw-fg-dim);
  text-shadow: none;
}
.cw-prem-pips { display: inline-flex; gap: 3px; align-items: center; margin-top: 2px; }
.cw-prem-pips i {
  width: 12px; height: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--cw-fg-dim) 32%, transparent);
}
.cw-prem-pips i.on { background: var(--cw-accent); box-shadow: 0 0 6px -1px var(--cw-accent); }

/* ---------------------------------------------------------------------
   7. BUTTONS + FOCUS — one focus treatment, not four.
   Earlier layers define :focus-visible four times with different radii.
   --------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cw-accent) !important;
  outline-offset: 2px !important;
  border-radius: var(--cw-radius-sm);
}
.cw-btn { letter-spacing: .005em; }
/* Touch targets: the base only guarantees 40px on the topbar at <=900px. */
@media (pointer: coarse) {
  .cw-btn, .cw-btn.sm, .cw-chip, .cw-card-more { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ---------------------------------------------------------------------
   8. SERVER + TS ROWS — align the two "where do I play" surfaces.
   --------------------------------------------------------------------- */
.cw-home-server { padding: 11px var(--rf-3); border-radius: var(--cw-radius-sm); }
.cw-home-server-name { font-weight: 700; }
.cw-home-server-addr,
.cw-srv-addr {
  font-family: var(--cw-font-mono);
  font-size: 11.5px; color: var(--cw-fg-dim);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   9. Respect reduced motion — every transition above is decorative.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cw-card-more, .cw-table tbody tr, .cw-home-fmt { transition: none !important; }
}