/* =============================================================================
   wgf-pvp-cutoffs.css - page-scoped skin for /pvp/cutoffs/ (owner rebuild
   2026-07-04, OWNER_REVIEW addendum 2 item 12).
   -----------------------------------------------------------------------------
   Owner law: docs/ui-ux/13-ingame-reference.md 0.4 (container standard),
   0.6 (red button), 0.8 (the EXACT ranked-tier medallions). Every bracket is a
   rich in-game asset card (.wgf-window from wgf-chrome.css) with the LIVE cutoff
   numbers big and RED beside the client tier medallion, a red kit button through
   to the ladder, and a collapsible fact-only detail pane. The fixed title floors
   render as a visual MEDAL LADDER, never a text list.

   Consumes the chrome kit + tokens (both loaded before this file by pvp_app._page):
   .wgf-window / .wgf-well / .wgf-btn-red come from wgf-chrome.css; colours,
   spacing and fonts from static/css/_tokens.css. No pills, no fill bars, no AI
   art, no em dashes. Legibility contract: text lands on the near-black .wgf-well
   scrim with an ink outline, never over the loading-screen backdrop.
   ============================================================================= */

/* The card grid: in-game windows, one per bracket. */
.wgf-cut-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin: 0 0 var(--space-5);
}

/* One bracket card. The .wgf-window frame/plate is supplied by the kit; this
   only lays out the body. */
.wgf-cut-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The headline cutoff numbers: each is a link straight through to the ladder
   (spec: the card clicks through), medallion left, big RED number right. */
.wgf-cut-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.wgf-cut-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border-radius: 4px;
  background: var(--wgf-well);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.55);
  text-decoration: none;
  transition: box-shadow var(--motion-fast) var(--ease-standard);
}
.wgf-cut-stat:hover {
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6),
              inset 0 0 0 1px var(--wgf-gold-dark, #7a5a1a);
}
.wgf-cut-stat:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-cut-medal { display: inline-flex; flex: 0 0 auto; line-height: 0; }
.wgf-cut-medal img {
  width: 46px;
  height: 46px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.wgf-cut-stat__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: auto;
  text-align: right;
}
.wgf-cut-stat__label {
  font-family: var(--font-game);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--wgf-gold);
  text-shadow: var(--text-ink-outline);
}
/* the big RED cutoff number - the same rating red as the champion cards */
.wgf-cut-stat__rt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 600;
  color: var(--wgf-rating-red, #ff6257);
  text-shadow: 0 0 14px color-mix(in srgb, var(--wgf-rating-red, #ff6257) 30%, transparent);
}

/* the through-to-ladder red kit button spans the card */
.wgf-cut-card__go { width: 100%; }

/* -----------------------------------------------------------------------------
   The collapsible fact-only detail pane (details/summary, kit-styled).
   Closed by default; the summary reads as a quiet in-game control, the body is
   the near-black well (legibility contract: dark scrim + ink outline).
   --------------------------------------------------------------------------- */
.wgf-cut-pane { border-radius: 4px; }
.wgf-cut-pane__sum {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--wgf-metal-soft);
  border-radius: 4px;
  background: linear-gradient(var(--wgf-plate-hi, #211c14), var(--wgf-plate, var(--wgf-well)));
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  text-shadow: var(--text-ink-outline);
  cursor: pointer;
  list-style: none;
}
.wgf-cut-pane__sum::-webkit-details-marker { display: none; }
.wgf-cut-pane__sum::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid var(--wgf-gold);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.wgf-cut-pane[open] .wgf-cut-pane__sum::before { transform: rotate(90deg); }
.wgf-cut-pane__sum:hover { color: var(--wgf-gold-bright); }
.wgf-cut-pane__sum:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-cut-pane__body {
  margin-top: var(--space-2);
  padding: var(--space-3);
}
.wgf-cut-fact {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--wgf-text);
  text-shadow: var(--text-ink-outline);
}
.wgf-cut-fact:last-child { margin-bottom: 0; }
.wgf-cut-fact b { color: var(--wgf-gold-bright); font-weight: 700; }
.wgf-cut-fact--floors { color: var(--wgf-muted); }

/* -----------------------------------------------------------------------------
   The fixed-tier MEDAL LADDER (owner: not a text list). Each rung is the client
   tier medal + tier name + rating floor, single-sourced from _TIERS via
   _tier_badge so the medal can never disagree with the floor.
   --------------------------------------------------------------------------- */
.wgf-cut-ladder {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.wgf-cut-rung {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.wgf-cut-rung:last-child { border-bottom: 0; }
.wgf-cut-rung__medal { display: inline-flex; flex: 0 0 auto; line-height: 0; }
.wgf-cut-rung__medal img {
  width: 38px;
  height: 38px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.wgf-cut-rung__name {
  font-family: var(--font-game);
  font-size: var(--text-md);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  color: var(--wgf-gold);
  text-shadow: var(--text-ink-outline);
}
.wgf-cut-rung__floor {
  margin-left: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--wgf-text);
}

/* the page-level fixed-floors section (one window, shared by every bracket) */
.wgf-cut-floors { margin: 0 0 var(--space-5); }
.wgf-cut-floors__lead {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--wgf-muted);
}
.wgf-cut-floors .wgf-cut-ladder {
  max-width: 420px;
  margin-inline: auto;
}

@media (max-width: 560px) {
  .wgf-cut-grid { grid-template-columns: 1fr; }
}