/* wgf-weekly-reports.css — /reports/ and /reports/<week>/ (2026-09-03).

   Replaces the inline <style> block weekly_report_app.py used to append to its body
   (banned: docs/ui-ux/18-blizzard-asset-kit.md §4 — shell output stays brace-free).

   Palette: tokens only, from static/css/_tokens.css. The two market tints are
   --wgf-up / --wgf-down, the sanctioned Blizzard market semantics on the green-purge
   keep-list — the only green on this page. No new hex, no gradient, no glow.

   Art on this page is first-party only: the sliced auctionhouse-itemicon-border-*.png
   quality rings (.wgf-qborder, assets/wgf-chrome.css), assets/icons/*.jpg through
   datamine_read.icon_url_from_slug, and assets/coins/*.png through wgf-coins.css. */

/* ── market direction ─────────────────────────────────────────────────────────────── */
.wgf-report-up   { color: var(--wgf-up);   font-variant-numeric: tabular-nums; }
.wgf-report-down { color: var(--wgf-down); font-variant-numeric: tabular-nums; }
.wgf-report-note { font-size: var(--text-sm); color: var(--wgf-muted); }

/* ── masthead: icon in a Blizzard ring beside the title ───────────────────────────── */
.wgf-report-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.wgf-report-hero__text { flex: 1 1 16rem; min-width: 0; }

/* The ring art is a fixed 44px in wgf-chrome.css; the masthead wears it larger. */
.wgf-report-hero__frame { width: 72px; height: 72px; flex: 0 0 auto; }
.wgf-report-hero__frame .wgf-qborder__icon { width: 52px; height: 52px; }

/* The client's own title face. NOT the "FrizQT" family wgf-game-skin.css declares — that
   sheet restyles body and a shell page must never load it. static/css/_tokens.css (shell
   level, linked on every page) already declares the same woff2 as 'FrizQuadrata' and
   exposes it as --font-game, which is the one home. */
.wgf-report-title { font-family: var(--font-game); }

/* ── quick facts plate ────────────────────────────────────────────────────────────── */
.wgf-report-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: var(--wgf-panel);
  border: 1px solid var(--wgf-border);
  border-radius: var(--radius-card);
}
.wgf-report-fact dt {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wgf-muted);
}
.wgf-report-fact dd {
  margin: 2px 0 0;
  color: var(--wgf-text, var(--wgf-gold-bright));
}

/* ── commodity cell: framed icon + quality-coloured name ──────────────────────────── */
.wgf-report-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.wgf-report-cell__frame { flex: 0 0 auto; width: 40px; height: 40px; }
.wgf-report-cell__frame .wgf-qborder__icon { width: 30px; height: 30px; }

/* An item with no datamine ring still gets a seated icon, not a bare square. */
.wgf-report-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wgf-border-strong);
  border-radius: var(--radius-control);
  background: #000;
}
.wgf-report-frame img { width: 30px; height: 30px; border-radius: var(--radius-control); }

/* The name carries its quality colour (q-* from wgf-item-card.css). Nothing here sets
   `color` on the anchor, so that class always wins. */
.wgf-report-item {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.wgf-report-item:hover,
.wgf-report-item:focus-visible { border-bottom-color: currentColor; }

/* ── week cards ───────────────────────────────────────────────────────────────────── */
.wgf-report-chip {
  margin-left: var(--space-2);
  padding: 1px 6px;
  border: 1px solid var(--wgf-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--wgf-gold-bright);
  white-space: nowrap;
}

/* ── the Data Desk rail ───────────────────────────────────────────────────────────── */
.wgf-report-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-2);
}
.wgf-report-rail__card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--wgf-panel);
  border: 1px solid var(--wgf-border);
  border-radius: var(--radius-card);
  text-decoration: none;
}
.wgf-report-rail__card:hover,
.wgf-report-rail__card:focus-visible { border-color: var(--wgf-border-strong); }
.wgf-report-rail__card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-report-rail__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--wgf-border-strong);
  border-radius: var(--radius-control);
  background: #000;
  object-fit: cover;
}
.wgf-report-rail__text { display: block; min-width: 0; }
.wgf-report-rail__name {
  display: block;
  font-family: var(--font-display);
  color: var(--wgf-gold-bright);
}
.wgf-report-rail__meta {
  display: block;
  font-size: var(--text-sm);
  color: var(--wgf-muted);
}

/* ── the hub headline board (2026-09-03) ──────────────────────────────────────────────
   Two columns of scannable rows, not a table: the hub's job is "what moved", the week
   page's job is the full ranking. Tokens only; the direction tints stay --wgf-up /
   --wgf-down, the same two the tables use. */
.wgf-report-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-3);
}
.wgf-report-board__col {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--wgf-panel);
  border: 1px solid var(--wgf-border);
  border-radius: var(--radius-card);
}
.wgf-report-board__head {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--wgf-gold-bright);
}
.wgf-report-board__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wgf-report-board__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-1) 0;
  border-top: 1px solid var(--wgf-border);
}
.wgf-report-board__row:first-child { border-top: 0; }
.wgf-report-board__row .wgf-report-cell { flex: 1 1 10rem; min-width: 0; }
.wgf-report-board__move {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--wgf-muted);
  white-space: nowrap;
}
.wgf-report-board__arrow { padding: 0 2px; }
.wgf-report-board__pct {
  flex: 0 0 auto;
  min-width: 4.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wgf-report-board__more { margin: var(--space-3) 0 0; }

/* ── the cohort strip: sibling weeks on a week page ───────────────────────────────── */
.wgf-report-chiplist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-2);
}
.wgf-report-chiplink {
  display: block;
  padding: var(--space-2);
  background: var(--wgf-panel);
  border: 1px solid var(--wgf-border);
  border-radius: var(--radius-card);
  text-decoration: none;
}
.wgf-report-chiplink:hover,
.wgf-report-chiplink:focus-visible { border-color: var(--wgf-border-strong); }
.wgf-report-chiplink:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-report-chiplink__name {
  display: block;
  font-family: var(--font-display);
  color: var(--wgf-gold-bright);
}
.wgf-report-chiplink__meta {
  display: block;
  font-size: var(--text-sm);
  color: var(--wgf-muted);
}
.wgf-report-chiplink__meta .wgf-report-chip { margin-left: var(--space-1); }