/* wgf-realm-board.css - the /realm/ hub's status board and A-Z jump strip.
 *
 * Its own sheet, loaded only by the hub (realm_pages_render.BOARD_CSS_HREF). The detail
 * page's 17 KB wgf-realm-header.css is not pulled here, and the family sheet
 * wgf-realms.css is not grown further: one concern, one file (Hard Rule 11).
 *
 * Why this exists (audit 2026-09-03): /realm/ published 86 realm cards in one flat grid
 * with a search box and nothing else. A reader could not see, without reading all 86,
 * how many realms there are, how they split across Blizzard's population ladder, or
 * where in the alphabet they are. The board answers that in one line and doubles as the
 * filter; the strip is the index.
 *
 * Palette: docs/ui-ux/17-blizzard-palette.md. Slate plates #0d0f14 / #14161c, bronze
 * rules #6e5a2a, gold #ffd100, parchment #f4ecd8, muted #9d9d9d. The ladder colours are
 * NOT redeclared here - .rd-pop--* lives once, in wgf-realms.css, and the board reuses
 * those classes on its counts. No gradients, no glows, no green chrome.
 */

/* ── The status board ─────────────────────────────────────────────────────── */
.rd-board {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-3, 12px) 0 0;
}

.rd-board__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 74px;
  padding: 8px 12px;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: var(--wgf-panel, #14161c);
  color: var(--wgf-text, #f4ecd8);
  font: inherit;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.rd-board__tile:hover,
.rd-board__tile:focus-visible {
  border-color: var(--wgf-gold-bright, #ffd100);
  background: var(--wgf-panel-2, #1a1d24);
}

.rd-board__tile.is-active {
  border-color: var(--wgf-gold-bright, #ffd100);
  background: #0d0f14;
}

/* The count. .rd-pop--* (wgf-realms.css) colours it with the client's own ladder value,
 * so the number on the tile is the same colour as the label on every card it selects. */
.rd-board__n {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.rd-board__k {
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wgf-muted, #9d9d9d);
  white-space: nowrap;
}

.rd-board__tile--all .rd-board__n { color: var(--wgf-gold-bright, #ffd100); }

/* ── The A-Z jump strip ───────────────────────────────────────────────────── */
.rd-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 var(--space-3, 12px);
  padding: 6px;
  border: 1px solid var(--wgf-metal, #6e5a2a);
  background: #0d0f14;
}

.rd-alpha__k {
  min-width: 26px;
  padding: 3px 6px;
  border: 1px solid transparent;
  background: none;
  color: var(--wgf-muted, #9d9d9d);
  font: inherit;
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
}

.rd-alpha__k:hover,
.rd-alpha__k:focus-visible {
  color: var(--wgf-text, #f4ecd8);
  border-color: var(--wgf-metal, #6e5a2a);
}

.rd-alpha__k.is-active {
  color: var(--wgf-gold-bright, #ffd100);
  border-color: var(--wgf-gold-bright, #ffd100);
}

/* ── The coverage line ────────────────────────────────────────────────────── */
/* A scope statement, not an empty state: it says which region the snapshots cover and
 * points at the surface that carries the others. */
.rd-scope-note {
  margin: 0 0 var(--space-3, 12px);
  padding: 8px 10px;
  border-left: 2px solid var(--wgf-metal, #6e5a2a);
  color: var(--wgf-muted, #9d9d9d);
  font-size: .84rem;
}

.rd-scope-note a { color: var(--wgf-gold-bright, #ffd100); }

@media (max-width: 560px) {
  .rd-board__tile { min-width: 62px; padding: 6px 9px; }
  .rd-board__n    { font-size: 1rem; }
  .rd-alpha__k    { min-width: 22px; }
}