/* =============================================================================
   wgf-cheapest-board.css — the server-rendered default board on /cheapest-realm/
   (cheapest_realm_board.py). Added 2026-08-31.

   Uses ONLY existing site tokens (static/css/_tokens.css) and the same squared
   metal-framed plate idiom as .searchsec in cheapest-realm.css, so the board reads
   as another window of the same in-game screen rather than a bolted-on table.

   NEW FILE on purpose: a fresh path has no cache history, so it ships with its own
   explicit ?v= and needs no ASSET_VERSION bump — which would have forced a global
   cache-bust across every asset while five other agents are mid-deploy.
   ============================================================================= */

.crb {
  margin: 1.8rem 0 1.4rem;
  padding: 1.5rem 1.4rem 1.3rem;
  border: 2px solid var(--wgf-metal);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(12, 12, 30, .6), rgba(5, 5, 16, .85));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .65), 0 12px 34px -20px rgba(0, 0, 0, .85);
}

.crb-head { margin-bottom: 1.1rem }
.crb-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .04em;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--wgf-gold);
  margin: 0;
  line-height: 1.15;
}
.crb-sub {
  margin: .55rem 0 0;
  font-size: .92rem;
  color: var(--wgf-muted);
  max-width: 62rem;
  line-height: 1.55;
}
.crb-fresh { display: block; margin-top: .35rem; font-family: var(--font-mono); font-size: .82rem }

.crb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem }

.crb-row {
  display: grid;
  align-items: center;
  gap: .5rem 1rem;
  padding: .7rem .85rem;
  border: 1px solid rgba(var(--wgf-gold-rgb), .18);
  border-radius: 3px;
  background: rgba(0, 0, 0, .3);
  /* desktop: rank | item | realm | there | typical | saved | spread */
  grid-template-columns: 2rem minmax(11rem, 1.4fr) minmax(9rem, 1.1fr)
                         repeat(3, minmax(7rem, .8fr)) minmax(6rem, .7fr);
}
.crb-row:hover { border-color: rgba(var(--wgf-gold-rgb), .38); background: rgba(0, 0, 0, .45) }

.crb-rank {
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--wgf-gold-soft);
  text-align: right;
  opacity: .8;
}
.crb-item { font-weight: 600; line-height: 1.25 }
.crb-item a { color: inherit }

/* Item-quality colours. The single token home is static/css/_tokens.css, which names them
   (--q-rare, --q-epic ...) rather than numbering them; the numeric class comes from Blizzard's
   quality id on the row. Mapping id -> token here, once, is the only place the two meet. */
.crb-item.q0 a { color: var(--q-poor) }
.crb-item.q1 a { color: var(--q-common) }
.crb-item.q2 a { color: var(--q-uncommon) }
.crb-item.q3 a { color: var(--q-rare) }
.crb-item.q4 a { color: var(--q-epic) }
.crb-item.q5 a { color: var(--q-legendary) }
.crb-item.q6 a { color: var(--q-artifact) }
.crb-item.q7 a { color: var(--q-heirloom) }

.crb-cell { display: flex; flex-direction: column; gap: .12rem; min-width: 0 }
.crb-l {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .62rem;
  color: var(--wgf-muted);
  white-space: nowrap;
}
.crb-v { font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere }
.crb-tied { color: var(--wgf-muted); font-size: .82rem; white-space: nowrap }

.crb-cell--save .crb-v { color: var(--wgf-gold-bright); font-weight: 600 }
.crb-mult {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .34rem;
  border: 1px solid rgba(var(--wgf-gold-rgb), .35);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--wgf-gold-soft);
}
.crb-cell--spread .crb-v { font-family: var(--font-mono); font-size: .88rem; color: var(--wgf-muted) }

.crb-note {
  margin: 1rem 0 0;
  font-size: .86rem;
  color: var(--wgf-muted);
  line-height: 1.55;
  max-width: 62rem;
}

/* ---- tablet: drop the spread column into the flow ---- */
@media (max-width: 1080px) {
  .crb-row { grid-template-columns: 1.8rem minmax(9rem, 1.3fr) repeat(3, minmax(6.5rem, .9fr)) }
  .crb-cell--spread { display: none }
}

/* ---- phone (the 390px viewport the page was measured at) ----
   The 7-column grid becomes a stacked card: item on its own line, then the four
   facts in a 2x2 so nothing truncates and no row scrolls sideways. */
@media (max-width: 720px) {
  .crb { padding: 1.1rem .9rem 1rem }
  .crb-row {
    grid-template-columns: 1fr 1fr;
    gap: .55rem .8rem;
    padding: .8rem .75rem;
  }
  .crb-rank { display: none }
  .crb-item { grid-column: 1 / -1; font-size: 1.02rem }
  .crb-cell--spread { display: flex; grid-column: 1 / -1 }
  .crb-cell--spread .crb-l { display: inline }
}