/* Design tokens come from /static/css/_tokens.css, loaded via <link> in every
   page head BEFORE this sheet (FR-3: the render-blocking CSS import chain was removed). */

/* --wgf-gold / --wgf-link / --wgf-gold-2 / --wgf-focus all live in _tokens.css
   (the shadow copies here were removed 2026-07-04, uiux-standardization). */

* {
  box-sizing: border-box;
}

/* === WGF global focus system (added 2026-06-07) === */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--wgf-focus);
  outline-offset: 2px;
}
/* === end focus system === */

/* Skip-to-content link (visually hidden until focused) — added 2026-06-07 */
.wgf-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--wgf-gold);
  color: var(--wgf-on-gold);
  font-weight: 800;
  text-decoration: none;
  border-radius: 0 0 var(--radius-control) 0;
}
.wgf-skip-link:focus {
  left: 0;
}

body.wgf-shell-page,
body.wgf-page {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top center, rgba(244, 196, 92, 0.08), transparent 34rem),
    linear-gradient(180deg, var(--wgf-bg-2), var(--wgf-bg));
  color: var(--wgf-text);
  font-family: var(--font-ui);
  line-height: 1.58;
}

/* Display typeface = the MASTHEAD ONLY (2026-07-02 window-chrome pass): page h1s + the
   logo wordmarks. Nav, section headings, footer heads and buttons run on the UI face —
   lapidary caps on every label was the single biggest "template" tell. */
.wgf-shell-page h1, .wgf-page h1, .wgf-article h1,
.wgf-shell-logo, .wgf-site-footer__logo,
.wgf-page-eyebrow {
  font-family: var(--font-display);
}
.wgf-shell-page h2, .wgf-shell-page h3,
.wgf-page h2, .wgf-page h3,
.wgf-article h2, .wgf-article h3,
.wgf-site-footer__nav h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.wgf-shell-topbar {
  /* The client window TITLE BAR (docs/ui-ux/13-ingame-reference.md §0.4 + owner law 35):
     an OPAQUE Class Hall stone plate - the same rough dark-slate material as the kit window
     header (.wgf-window__title), over a dark wash, inside a metal edge. No navy fill and NO
     backdrop-filter (both condemned outside tooltips); squared, carved, reads in-game. Token
     fallbacks cover static pages that load this sheet with only _tokens.css. */
  border-bottom: 2px solid var(--wgf-metal, #4a4a4a);
  background:
    linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.42)),
    url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat,
    var(--wgf-plate-hi, #221b11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -6px 10px rgba(0, 0, 0, 0.4),
    0 6px 18px rgba(0, 0, 0, 0.45);
  position: sticky;
  top: 0;
  z-index: 40;
}

.wgf-shell-topbar__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  justify-content: flex-start;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: nowrap;
}

/* Right-hand group (search + the region selector). On mobile it grows in the flex row. */
.wgf-shell-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Desktop: pin the header to 3 zones (logo left, nav dead-centre, right group right) so the nav
   is ALWAYS centred on every page, regardless of the region selector which only appears on
   region-aware pages (that variable element was shifting the whole nav between pages). */
/* Scoped to :has(.wgf-shell-right) so it applies ONLY to the converted shell header (seo_kit).
   Static pages with a hand-copied older header (index.html / wow-auction-house / etc.) lack the
   wrapper and keep their original flex layout - never a half-applied grid. */
@media (min-width: 1261px) {
  .wgf-shell-topbar__inner:has(.wgf-shell-right) { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  /* grid-row: 1 on ALL three zones is load-bearing: the nav sits AFTER .wgf-shell-right in the
     DOM, and grid auto-placement cannot move backwards to column 2 on the same row, so without
     an explicit row the nav wrapped to row 2 and read as off-centre (owner bug 2026-07-03). */
  .wgf-shell-topbar__inner:has(.wgf-shell-right) > .wgf-shell-logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .wgf-shell-topbar__inner:has(.wgf-shell-right) > .wgf-shell-nav-toggle { display: none; }
  .wgf-shell-topbar__inner:has(.wgf-shell-right) .wgf-shell-nav { grid-column: 2; grid-row: 1; justify-self: center; margin-left: 0; }
  .wgf-shell-topbar__inner:has(.wgf-shell-right) .wgf-shell-right { grid-column: 3; grid-row: 1; justify-self: end; flex: 0 1 auto; }
  .wgf-shell-right .wgf-shell-search { margin: 0; }
}

.wgf-shell-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--wgf-gold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 900;
  font-size: 15px;
  flex: 0 0 auto;
}

/* Coin mark (SVG). Sized relative to the wordmark so header + footer match. */
.wgf-logo-coin {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
}

.wgf-shell-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
  justify-content: flex-end;
}

/* In the topbar the nav is the right-hand zone: fixed size, never wraps,
   no auto-margin (the search's auto-margins handle centering instead). */
.wgf-shell-topbar .wgf-shell-nav {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin-left: 0;
  white-space: nowrap;
}

/* Hamburger toggle — hidden on desktop, shown via the mobile media query. */
.wgf-shell-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  width: 44px;
  height: 40px;
  padding: 0 var(--space-2);
  background: transparent;
  border: 1px solid var(--wgf-border);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.wgf-shell-nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--wgf-gold-2);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.wgf-shell-topbar.is-open .wgf-shell-nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.wgf-shell-topbar.is-open .wgf-shell-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.wgf-shell-topbar.is-open .wgf-shell-nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Header search — primary lookup entry point. */
/* The search is the PRIMARY action in the bar — it gets the prominent central real estate
   and grows; the pillars compress to the right of it. */
.wgf-shell-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 600px;
  margin: 0 auto 0 var(--space-2);
}

/* Scope toggle (Items / Characters) — injected by wgf-shell.js as the first child of
   the search form. Two themed buttons that replace the un-theme-able native <select>.
   Sits flush-left as the first segment; the input rounds only on the right side. */
.wgf-scope-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  border: 1px solid var(--wgf-border);
  border-right: none;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}
.wgf-scope-btn {
  height: 42px;
  padding: 0 11px;
  border: none;
  border-right: 1px solid rgba(244, 196, 92, 0.15);
  background: transparent;
  color: var(--wgf-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}
.wgf-scope-btn:last-child { border-right: none; }
.wgf-scope-btn:hover {
  color: var(--wgf-gold-2);
  background: rgba(244, 196, 92, 0.08);
}
.wgf-scope-btn.is-active {
  color: var(--wgf-gold);
  background: rgba(244, 196, 92, 0.12);
}

.wgf-shell-search__input {
  width: 100%;
  min-height: 42px;
  padding: var(--space-2) 42px var(--space-2) var(--space-3);
  border: 1px solid var(--wgf-border-strong);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.3);
  color: var(--wgf-text);
  font-family: var(--font-ui);
  font-size: 15px;
}

/* When the scope toggle is present, the input butts against it (flat left edge). */
.wgf-shell-search:has(.wgf-scope-toggle) .wgf-shell-search__input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.wgf-shell-search__input::placeholder {
  color: var(--wgf-muted);
}

.wgf-shell-search__input:focus {
  border-color: var(--wgf-gold-2);
  background: rgba(0, 0, 0, 0.45);
}

.wgf-shell-search__btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--wgf-gold-2);
  cursor: pointer;
}

.wgf-shell-search__btn:hover {
  color: var(--wgf-gold);
}

.wgf-shell-search__btn svg {
  width: 17px;
  height: 17px;
}

.wgf-shell-topbar .wgf-shell-nav a {
  color: #d9d5c9;
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
}

.wgf-shell-topbar .wgf-shell-nav a:hover {
  text-decoration: underline;
}

/* Active page: subtle gold underline, not a filled pill (reserve fills for CTAs). */
.wgf-shell-topbar .wgf-shell-nav a {
  position: relative;
  padding: var(--space-1) var(--space-1);
}

.wgf-shell-topbar .wgf-shell-nav a.is-active {
  color: var(--wgf-gold);
}

.wgf-shell-topbar .wgf-shell-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -2px;
  height: 2px;
  /* Squared, never a pill (owner in-game kit law): a flat carved gold rule under the
     active pillar, not a rounded chip. */
  border-radius: 0;
  background: linear-gradient(90deg, var(--wgf-gold-2), var(--wgf-gold));
}

.wgf-shell-topbar .wgf-shell-nav a:not(.is-active):hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


.wgf-shell-main,
.wgf-wrap {
  max-width: 1220px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
}

.wgf-page-hero,
.wgf-hero {
  border: 1px solid var(--wgf-border-strong);
  border-radius: var(--radius-hero);
  background: var(--wgf-bg-hero);
  padding: clamp(var(--space-4), 4vw, 36px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
  margin-bottom: var(--space-3);
}

.wgf-page-hero--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.wgf-page-hero__aside {
  flex: 0 0 auto;
}

.wgf-page-eyebrow,
.wgf-home-eyebrow {
  color: var(--wgf-gold-2);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 850;
  font-size: 12px;
  margin: 0 0 12px;
}

.wgf-page-hero h1,
.wgf-hero h1 {
  color: var(--wgf-gold);
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 1.05;
  margin: 0 0 var(--space-3);
}

.wgf-page-hero p,
.wgf-hero p {
  max-width: 820px;
  color: var(--wgf-muted);
  font-size: clamp(16px, 2vw, 20px);
  margin: 0;
}

.wgf-tool-panel {
  border: 1px solid var(--wgf-border);
  border-radius: var(--radius-card);
  background: rgba(10, 12, 26, 0.55);
  padding: 0;
  overflow: hidden;
}

.wgf-tool-panel--ah {
  border: none;
  background: transparent;
  overflow: visible;
  width: 100%;
  min-width: 0;
}

body.wgf-ah-page .wgf-shell-topbar__inner,
body.wgf-ah-page .wgf-shell-main {
  max-width: min(1536px, calc(100vw - 36px));
  width: 100%;
}

body.wgf-ah-page .wgf-tool-panel--ah {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* AH tool page: low-profile header so the browser fills the viewport */
body.wgf-ah-page .wgf-shell-main {
  padding-top: var(--space-3);
  padding-bottom: 28px;
}

body.wgf-ah-page .wgf-page-hero--ah-compact {
  padding: 2px 2px var(--space-1);
  margin-bottom: var(--space-2);
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.wgf-ah-page .wgf-page-hero--ah-compact h1 {
  font-size: clamp(18px, 2.2vw, 24px);
  margin: 0 0 var(--space-1);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

body.wgf-ah-page .wgf-page-hero--ah-compact .wgf-page-hero--ah-tagline {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--wgf-muted);
  max-width: 42rem;
}

.wgf-tool-panel .wtd-page {
  max-width: none;
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-6);
}

.wgf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--space-3);
  margin-top: 0;
}

.wgf-article {
  max-width: 890px;
  margin: var(--space-3) auto 0;
  border: 1px solid var(--wgf-border);
  background: rgba(12, 14, 28, 0.88);
  border-radius: var(--radius-card);
  padding: 2rem;
}

.wgf-article h1,
.wgf-article h2,
.wgf-article h3 {
  color: var(--wgf-gold);
  line-height: 1.18;
}

.wgf-article h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: 0;
}

.wgf-meta {
  color: var(--wgf-muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.wgf-callout {
  border-left: 4px solid var(--wgf-gold-2);
  background: rgba(var(--wgf-gold-rgb), 0.08);
  padding: 1rem;
  border-radius: var(--radius-control);
  color: var(--wgf-text);
}

.wgf-shell-page .wgf-card h2 a {
  color: var(--wgf-gold);
  text-decoration: none;
}

.wgf-shell-page .wgf-card h2 a:hover {
  text-decoration: underline;
}

.wgf-home-hero {
  border: 1px solid var(--wgf-border-strong);
  border-radius: var(--radius-hero);
  background: var(--wgf-bg-hero);
  padding: clamp(28px, 5vw, 58px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
}

.wgf-home-eyebrow {
  color: var(--wgf-gold-2);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 850;
  font-size: 12px;
  margin-bottom: 12px;
}

.wgf-home-hero h1,
.wgf-shell-page h1 {
  color: var(--wgf-gold);
  font-size: clamp(34px, 6vw, 68px);
  line-height: 0.98;
  margin: 0 0 var(--space-3);
}

.wgf-home-hero p {
  max-width: 820px;
  color: var(--wgf-muted);
  font-size: clamp(17px, 2.1vw, 22px);
  margin: 0 0 var(--space-4);
}

.wgf-home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.wgf-home-card {
  display: block;
  padding: var(--space-3);
  border: 1px solid var(--wgf-border);
  background: rgba(14, 17, 32, 0.88);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.wgf-home-card:hover {
  border-color: var(--wgf-gold-2);
  background: rgba(14, 17, 32, 1);
}

.wgf-home-card h2 {
  color: var(--wgf-gold);
  margin: 0 0 var(--space-2);
  font-size: 22px;
}

.wgf-home-card p {
  color: var(--wgf-muted);
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.wgf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px var(--space-3);
  border-radius: var(--radius-control);
  border: 1px solid var(--wgf-border-strong);
  color: var(--wgf-on-gold);
  background: linear-gradient(180deg, var(--wgf-gold-bright), var(--wgf-gold-accent));
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 700;
}

.wgf-button--ghost {
  color: var(--wgf-gold-2);
  background: rgba(var(--wgf-gold-rgb), 0.08);
}

.wgf-home-grid,
.wgf-sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.wgf-card,
.wgf-sitemap-card {
  border: 1px solid var(--wgf-border);
  background: rgba(14, 17, 32, 0.88);
  border-radius: var(--radius-card);
  padding: var(--space-3);
}

.wgf-card h2,
.wgf-sitemap-card h2 {
  color: var(--wgf-gold);
  margin: 0 0 var(--space-2);
  font-size: 20px;
}

.wgf-card p,
.wgf-sitemap-card p {
  color: var(--wgf-muted);
  margin: 0 0 12px;
}

.wgf-card a,
.wgf-sitemap-card a,
.wgf-shell-page a {
  color: var(--wgf-link);
}

.wgf-sitemap-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wgf-sitemap-card li {
  margin: var(--space-2) 0;
}

.wgf-card h3 {
  color: var(--wgf-gold);
  margin: 0 0 var(--space-2);
  font-size: 18px;
}

.wgf-section {
  /* In-game plate: solid panel, neutral bevel + a faint top highlight (gold borders were
     everywhere, so nothing stood out; gold is now reserved for emphasis). */
  margin-top: var(--space-4);
  border: 1px solid var(--wgf-border-neutral);
  background: var(--wgf-panel-1);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-1);
}

.wgf-section h2 {
  color: var(--wgf-gold);
  margin-top: 0;
}

.wgf-section p {
  color: var(--wgf-muted);
}

/* Character search results (/character/search/) — a rich, scannable card per character:
   portrait, name/realm, class+spec, then the four numbers people compare (Level / Item
   Level / peak PvP / Mythic+). Its own layout — deliberately NOT the ladder table. */
.wgf-csearch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.wgf-csearch-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-3);
  border: 1px solid var(--wgf-border-neutral);
  /* Class-colour left rail + a gentle class wash (the shared leaderboard identity treatment);
     --cc is set per card, falls back to the neutral border when the class is unknown. */
  border-left: 3px solid var(--cc, var(--wgf-border-neutral));
  border-radius: var(--radius-card);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cc, transparent) 13%, transparent),
              transparent 44%), var(--wgf-panel-1);
  text-decoration: none;
  transition: border-color var(--motion-fast, 120ms) ease, background var(--motion-fast, 120ms) ease;
}
.wgf-csearch-card:hover {
  border-color: var(--wgf-gold-2);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cc, transparent) 18%, transparent),
              transparent 44%), var(--wgf-panel-2);
}

/* portrait — race/gender face ringed in the class color */
.wgf-csearch-card__av {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  padding: 2px;
  background: var(--ring, #3a3326);
  display: inline-flex;
}
.wgf-csearch-card__av img,
.wgf-csearch-card__av .wgf-csearch-av-blank {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  background: #0e0c09;
}
/* neutral silhouette inside the blank avatar (discovered-but-not-yet-crawled characters) */
.wgf-csearch-card__av .wgf-csearch-av-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wgf-csearch-av-glyph {
  width: 66%;
  height: 66%;
  opacity: .55;
}

.wgf-csearch-card__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 0 0 auto;
}
.wgf-csearch-card__name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.wgf-csearch-card__sub {
  color: var(--wgf-muted);
  font-size: 13px;
}

.wgf-csearch-card__spec {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 160px;
  color: var(--wgf-muted);
  font-size: 14px;
}
.wgf-csearch-card__spec img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex: 0 0 auto;
}
/* honest placeholder text when class/spec isn't crawled yet (keeps the slot from being a phantom) */
.wgf-csearch-card__hint {
  font-style: italic;
  font-size: 13px;
  color: var(--wgf-muted);
  opacity: .8;
}

.wgf-csearch-card__stats {
  display: flex;
  gap: 20px;
  margin-left: auto;
  flex: 0 0 auto;
}
.wgf-csearch-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 46px;
}
.wgf-csearch-stat b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--wgf-text);
}
.wgf-csearch-stat small {
  margin-top: var(--space-1);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wgf-muted);
}
.wgf-csearch__empty {
  color: var(--wgf-muted);
  margin: 0;
}

/* Player-card upgrades (owner spec 2026-07-03, shared vocabulary with wgf-player-card.css):
   faction-lit wash on the card's stat side, red-bold ratings, the searched-substring mark,
   and the quiet missing-stat placeholder. Faction hues are the in-game Horde/Alliance colours. */
.wgf-csearch-card { --wgf-rating-red: #ff6257; position: relative; overflow: hidden; }
.wgf-csearch-card[data-faction="horde"] {
  background: linear-gradient(270deg, rgba(196, 30, 58, .16), transparent 38%),
    linear-gradient(90deg, color-mix(in srgb, var(--cc, transparent) 13%, transparent),
    transparent 44%), var(--wgf-panel-1);
}
.wgf-csearch-card[data-faction="alliance"] {
  background: linear-gradient(270deg, rgba(0, 112, 221, .16), transparent 38%),
    linear-gradient(90deg, color-mix(in srgb, var(--cc, transparent) 13%, transparent),
    transparent 44%), var(--wgf-panel-1);
}
.wgf-csearch-card__sub .wgf-pvp-crest {
  width: 16px; height: 16px; border-radius: 3px; vertical-align: -3px; margin-right: var(--space-1);
}
.wgf-csearch-card .wgf-pc-mark,
mark.wgf-pc-mark {
  background: rgba(var(--wgf-gold-rgb), .24); color: inherit;
  border-radius: 3px; padding: 0 .06em;
}
.wgf-pc-nostat { color: var(--wgf-muted); opacity: .55; font-weight: 400; }

@media (max-width: 680px) {
  .wgf-csearch-card { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  .wgf-csearch-card__spec { order: 3; flex-basis: 100%; min-width: 0; }
  .wgf-csearch-card__stats {
    order: 4;
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    gap: var(--space-2);
    border-top: 1px solid var(--wgf-border-neutral);
    padding-top: var(--space-2);
  }
  .wgf-csearch-stat { align-items: flex-start; }
}

/* Item search results (/item/search/) — rich row per item: rarity-framed icon, name in
   rarity color, type/ilvl, item ID, cheapest live price. Sibling of .wgf-csearch. */
.wgf-isearch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.wgf-isearch-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-3);
  border: 1px solid var(--wgf-border-neutral);
  border-radius: var(--radius-card);
  background: var(--wgf-panel-1);
  text-decoration: none;
  transition: border-color var(--motion-fast, 120ms) ease, background var(--motion-fast, 120ms) ease;
}
.wgf-isearch-card:hover {
  border-color: var(--wgf-gold-2);
  background: var(--wgf-panel-2);
}
/* icon framed by the item's rarity color (inset ring so the art never gets clipped) */
.wgf-isearch-card__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0e0c09;
  box-shadow: inset 0 0 0 2px var(--q, #3a3326);
}
.wgf-isearch-card__icon img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: block;
}
.wgf-isearch-card__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.wgf-isearch-card__name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wgf-isearch-card__sub {
  color: var(--wgf-muted);
  font-size: 13px;
}
.wgf-isearch-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
  min-width: 70px;
}
.wgf-isearch-stat b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--wgf-text);
}
.wgf-isearch-stat small,
.wgf-isearch-price small {
  margin-top: var(--space-1);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wgf-muted);
}
.wgf-isearch-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
  min-width: 96px;
}
@media (max-width: 680px) {
  .wgf-isearch-card { flex-wrap: wrap; }
  .wgf-isearch-card__id { flex-basis: calc(100% - 58px); }
  .wgf-isearch-stat,
  .wgf-isearch-price {
    align-items: flex-start;
    min-width: 0;
    flex: 1 1 auto;
    margin-top: var(--space-1);
  }
}

/* Breadcrumb — a SHELL component (single-sourced via site_shell.render_breadcrumb), so its CSS
   lives here in the shell sheet (loaded on EVERY page, incl. the static AH browser/deals pages
   which don't load wgf-seo-pages.css). Class kept as .wgf-seo-breadcrumb for back-compat. */
/* M03 harmonization (2026-06-23): restyled to the locked breadcrumb design — muted
   links → gold hover, brighter current page, chevron separators, home glyph on crumb 1.
   Markup stays .wgf-seo-breadcrumb (render_breadcrumb); this is the single visual home. */
/* Kit re-cut (2026-07-04): the trail is a SQUARED in-game strip in the small-caps game face,
   gold chevron separators, sitting AGAINST the window chrome (a carved metal seam under it)
   rather than floating as a plain web crumb row. Markup stays .wgf-seo-breadcrumb
   (render_breadcrumb). Token fallbacks cover static pages loaded with only _tokens.css. */
.wgf-seo-breadcrumb { padding: var(--space-2) var(--space-3); max-width: 1180px; margin: 0 auto; border-bottom: 1px solid var(--wgf-metal-soft, #2e2e2e); }
.wgf-seo-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-family: var(--font-game); font-variant: small-caps; letter-spacing: 0.04em; font-size: var(--text-sm, 0.875rem); }
.wgf-seo-breadcrumb li { display: flex; align-items: center; white-space: nowrap; color: var(--wgf-muted); }
.wgf-seo-breadcrumb li::after { content: "\203A"; color: var(--wgf-gold-2); padding: 0 var(--space-2); line-height: 1; }
.wgf-seo-breadcrumb li:last-child { color: var(--wgf-gold); opacity: 1; }
.wgf-seo-breadcrumb li:last-child::after { content: ""; padding: 0; }
.wgf-seo-breadcrumb a { text-decoration: none; color: var(--wgf-muted); text-underline-offset: 2px; border-radius: 0; }
.wgf-seo-breadcrumb a:hover { color: var(--wgf-gold); text-decoration: underline; }
.wgf-seo-breadcrumb .bc-home-icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.12em; margin-right: var(--space-1); flex: 0 0 auto; }

.wgf-site-footer {
  position: relative;
  border-top: 1px solid #7a7a96;
  background:
    linear-gradient(180deg, rgba(18, 18, 32, 0.99), rgba(8, 8, 16, 1));
  color: var(--wgf-muted);
  padding: var(--space-5) var(--space-3) var(--space-4);
  margin-top: 40px;
  font-family: var(--font-ui);
}

.wgf-site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244, 196, 92, 0.22) 20%,
    rgba(244, 196, 92, 0.6) 50%,
    rgba(244, 196, 92, 0.22) 80%,
    transparent 100%
  );
}

.wgf-site-footer__inner {
  max-width: 1220px;
  margin: 0 auto;
}

.wgf-site-footer__brand {
  margin-bottom: var(--space-4);
}

.wgf-site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--wgf-gold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 900;
  font-size: 15px;
  margin-bottom: var(--space-2);
}

.wgf-site-footer__brand p {
  max-width: 620px;
  margin: 0;
  color: var(--wgf-muted);
}

.wgf-site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(244, 196, 92, 0.18);
  border-bottom: 1px solid rgba(244, 196, 92, 0.18);
}

/* Phones: two columns instead of one 32-link tower (halves the footer scroll). */
@media (max-width: 680px) {
  .wgf-site-footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-3);
  }
}

.wgf-site-footer__nav h2 {
  color: var(--wgf-gold);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 var(--space-2);
}

.wgf-site-footer__nav a {
  display: block;
  color: #e6d6a8;
  text-decoration: none;
  margin: var(--space-2) 0;
  font-size: 14px;
  font-weight: 650;
}

.wgf-site-footer__nav a:hover {
  text-decoration: underline;
}

.wgf-site-footer__bottom {
  padding-top: var(--space-3);
}

.wgf-site-footer__bottom p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wgf-neutral-text);
}

.wgf-site-footer__copy {
  margin-top: var(--space-2) !important;
  font-size: 12px !important;
  color: var(--wgf-gold-muted) !important;
  opacity: 0.85;
}

.wgf-site-footer__copy a {
  color: #e6d6a8;
  text-decoration: none;
}

.wgf-site-footer__copy a:hover {
  color: var(--wgf-gold);
  text-decoration: underline;
}

@media (max-width: 760px) {
  .wgf-home-hero,
  .wgf-page-hero,
  .wgf-hero {
    padding: var(--space-4);
  }

  .wgf-article {
    padding: 1.25rem;
  }
}

/* === Collapsing mobile header (added 2026-06-12; breakpoint raised 2026-06-23) ===
   Below 1020px the logo + search + the eight primary pillars can't share one row
   without crowding/wrapping, so they collapse behind the hamburger and reveal as a
   stacked dropdown when open. (Bumped from 1200px when Leaderboards became a top-level
   pillar — 8 items, two of them wide: "Cheapest Realm" + "Leaderboards".) */
@media (max-width: 1020px) {
  .wgf-shell-topbar__inner {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .wgf-shell-nav-toggle {
    display: flex;
    order: 2;
    margin-left: auto;
  }

  /* Search stays VISIBLE on mobile (search-first product) — it is no longer buried in the
     hamburger. The whole right group (search + the region chips on region-aware pages)
     drops to its OWN full-width row under the logo/toggle bar; without this the search
     was squeezed to a sliver between the logo and the hamburger on one cramped row
     (owner: "the entire nav is awkward on mobile"). */
  .wgf-shell-topbar .wgf-shell-right {
    order: 3;
    flex-basis: 100%;
    min-width: 0;
    margin: var(--space-2) 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .wgf-shell-topbar .wgf-shell-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    display: flex;
  }

  .wgf-shell-topbar .wgf-shell-nav {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    margin: var(--space-2) 0 0;
    display: none;
    white-space: normal;
  }

  .wgf-shell-topbar.is-open .wgf-shell-nav {
    display: flex;
    /* The open menu is a DRAWER, not a header that grows without bound: it scrolls
       internally (the page behind is scroll-locked via html.wgf-nav-open), so every
       pillar/link is reachable on a short phone viewport without losing the header. */
    max-height: calc(100vh - 180px);
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Page scroll-lock while the mobile menu is open (wgf-shell.js toggles the class). */
  html.wgf-nav-open,
  html.wgf-nav-open body {
    overflow: hidden;
  }

  .wgf-shell-topbar .wgf-shell-nav a {
    padding: 13px var(--space-1);
    border-top: 1px solid rgba(244, 196, 92, 0.12);
  }

  .wgf-shell-topbar .wgf-shell-nav a.is-active {
    color: var(--wgf-gold);
  }

  .wgf-shell-topbar .wgf-shell-nav a.is-active::after {
    left: 4px;
    right: auto;
    width: 18px;
    bottom: 8px;
  }
}

/* === Grouped primary-nav dropdowns (added 2026-06-20, nav IA) ==================
   Pillar links are server-rendered (crawler-visible); the dropdown is progressive
   enhancement. Desktop reveals on hover / keyboard focus; mobile shows every link
   expanded inside the existing hamburger panel (no accordion JS). */
.wgf-shell-topbar .wgf-shell-nav { align-items: center; }

.wgf-nav-group { position: relative; display: flex; align-items: center; }

.wgf-shell-topbar .wgf-shell-nav .wgf-nav-trigger {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.wgf-nav-caret {
  width: 0; height: 0; margin-left: var(--space-1);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.85;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.wgf-nav-group:hover .wgf-nav-caret,
.wgf-nav-group:focus-within .wgf-nav-caret { transform: rotate(180deg); opacity: 1; }

/* In-game dropdown surface (2026-07-04 chrome re-cut, docs/ui-ux/13-ingame-reference.md
   §0.10 / ig-51): the open menu is a SQUARED near-black well plate with a thin metal edge
   and a subtle inset shadow - the same visual family as the kit .wgf-dropdown open menu,
   never a warm-brown rounded panel. Tokens fall back to literals because wgf-chrome.css
   (where --wgf-well/--wgf-metal-soft live) is not loaded on every shell page. */
.wgf-nav-menu {
  position: absolute;
  top: 100%; left: 0;
  width: 210px;
  margin-top: var(--space-1);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: linear-gradient(180deg, var(--wgf-well, #0c0c0f), var(--wgf-well-edge, #050507));
  border: 1px solid var(--wgf-metal-soft);
  border-radius: 0;
  box-shadow: var(--shadow-2, 0 4px 16px rgba(0, 0, 0, 0.5)), inset 0 0 0 1px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  /* Forgiving close: the hide transition is DELAYED 300ms, so briefly leaving the
     trigger/menu (crossing the gap, overshooting) never snaps it shut (owner bug
     2026-07-03: "disappears too fast"). Opening stays instant via the :hover rule. */
  transition: opacity 0.15s ease 0.3s, transform 0.15s ease 0.3s, visibility 0s linear 0.45s;
  z-index: 50;
  /* Short laptop screens: the Database menu (17 links + group heads) must never clip
     off the bottom of the viewport - scroll inside the popover instead. */
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}
/* Invisible hover bridge covering the 5px gap + the header padding under the trigger,
   so the pointer never leaves the group while travelling into the menu. */
.wgf-nav-menu::before {
  content: "";
  position: absolute;
  top: -18px; left: -8px; right: -8px;
  height: 18px;
}

.wgf-nav-group:hover > .wgf-nav-menu,
.wgf-nav-group:focus-within > .wgf-nav-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s, 0s, 0s;
}

/* The right-most pillar (More) anchors its menu to the right edge of the trigger so a
   left-anchored panel never spills off the viewport. (No effect in the mobile static view.) */
.wgf-shell-topbar .wgf-shell-nav .wgf-nav-group:last-child > .wgf-nav-menu {
  left: auto; right: 0;
}

.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: 0;
  white-space: nowrap;
  font-family: var(--font-game);
  font-size: 13px;
  font-weight: 650;
}
/* Hover/focus = the in-game subtle white glow (§9b / ig-57): a soft light lift + faint
   outer glow, never a rounded brown fill or a colour swap. Keyboard focus keeps the site
   focus ring (the global a:focus-visible outline) on top of the glow. */
.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu a:hover,
.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu a:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 8px rgba(255, 255, 255, 0.10);
  text-decoration: none;
}
/* In-menu active item: gold text + chip, never the underline bar used in the bar. */
.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu a.is-active {
  color: var(--wgf-gold);
  background: rgba(244, 196, 92, 0.10);
}
.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu a.is-active::after { display: none; }
/* Non-clickable "coming soon" note inside a dropdown — muted, italic, no hover. */
.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu .wgf-nav-note {
  display: block;
  padding: var(--space-2) 12px;
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  color: var(--wgf-muted);
  cursor: default;
  border-top: 1px solid rgba(244, 196, 92, 0.10);
  margin-top: 2px;
}
/* Section subheader inside a dropdown (e.g. "PvP" / "PvE") so one hover reads as a complete map. */
.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu .wgf-nav-grouphead {
  display: block;
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-family: var(--font-game);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wgf-gold);
  cursor: default;
  opacity: 0.78;
}
/* First subheader hugs the top; later ones get a faint divider above. */
.wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu .wgf-nav-grouphead:not(:first-child) {
  margin-top: var(--space-1);
  border-top: 1px solid rgba(244, 196, 92, 0.10);
  padding-top: var(--space-2);
}

@media (max-width: 1020px) {
  .wgf-nav-group { position: static; display: block; }
  .wgf-nav-caret { display: none; }
  .wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    margin: 0; padding: 0;
    background: transparent; border: none; box-shadow: none;
    width: auto; min-width: 0;
  }
  .wgf-shell-topbar .wgf-shell-nav .wgf-nav-menu a {
    padding: 11px var(--space-1) 11px var(--space-3);
    border-top: 1px solid rgba(244, 196, 92, 0.10);
    border-radius: 0;
    font-size: 14px;
  }

  /* Accordion (wgf-shell.js adds .is-accordion on mobile): collapse each pillar's children
     behind its trigger so the open menu is the 8 pillars, not a flat wall of ~25 links. The
     pillar's hub is its first child, so it stays reachable. Without JS the menus stay expanded
     (the rules above) — no regression. */
  .wgf-shell-nav.is-accordion .wgf-nav-menu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.22s ease;
  }
  .wgf-shell-nav.is-accordion .wgf-nav-group.is-expanded > .wgf-nav-menu {
    /* Tall enough for the LARGEST pillar (Database: 17 links + 4 group heads ≈ 800px).
       The old 640px cap CLIPPED its tail (Quests/Achievements/Currencies were unreachable
       on mobile). The drawer itself scrolls, so a generous cap costs nothing. */
    max-height: 1200px;
  }
  /* Every top-level pillar row rides the same flex grid — grouped triggers AND single
     pillars (e.g. Token, which has no submenu/caret). Without this, single .wgf-nav-link
     pillars render as plain block links on a different box model than the flex triggers,
     so their text left-edge and row structure don't line up with the rest of the menu. */
  .wgf-shell-nav.is-accordion .wgf-nav-trigger,
  .wgf-shell-nav.is-accordion > .wgf-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .wgf-shell-nav.is-accordion .wgf-nav-caret {
    display: inline-block;
    margin-left: auto;
    transition: transform 0.18s ease;
  }
  .wgf-shell-nav.is-accordion .wgf-nav-group.is-expanded > .wgf-nav-trigger .wgf-nav-caret {
    transform: rotate(180deg);
  }
}

/* === Tool-page quick links (added 2026-06-22) ===================================
   A compact "where to go next" row that sits right under a tool page's hero so the
   primary intents (find deals / browse item prices / compare realms) are one tap away
   without competing with the tool itself. Used on the Auction House browser page. */
.wgf-ah-quicklinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 2px;
}
.wgf-ah-quicklinks__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wgf-muted);
  margin-right: 2px;
}
/* The quicklink chips are the in-game red kit button now (AH kit re-cut, owner
   "OPUS agent" 2026-07-04): the rounded-pill idiom is dead here. This rule only
   styles any NON-kit link that might still land in the row; `.wgf-btn-red` links
   render as the client red button from wgf-chrome.css. */
.wgf-ah-quicklinks a:not(.wgf-btn-red) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 12px;
  border: 1px solid var(--wgf-border);
  background: rgba(244, 196, 92, 0.06);
  color: var(--wgf-gold-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.wgf-ah-quicklinks a:not(.wgf-btn-red):hover {
  border-color: var(--wgf-gold-2);
  background: rgba(244, 196, 92, 0.14);
  color: var(--wgf-gold);
}

/* (Removed 2026-07-04, AH kit re-cut) The old "search-first emphasis" block that
   nudged the search box and dimmed Market/Export/Sort lived here. Its job is now
   done by the in-game chrome kit re-cut in assets/ah/base.css (the inset near-black
   fields, the black filter-button idiom, the collapsed dropdown look) so the two no
   longer fight over the same controls. */

/* ── Region selector (US ⇄ EU) ──────────────────────────────────────────────────
   Header chrome rendered by site_shell.render_region_selector, only on region-aware
   pages (item surface). A compact segmented toggle: the active region is a filled
   gold chip, the other a quiet outline link that swaps to the same page in that
   region. See wgf_region.py + assets/wgf-region.js. */
.wgf-region-select {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--wgf-border);
  border-radius: 999px;
  background: rgba(var(--wgf-gold-rgb), 0.04);
  flex: 0 0 auto;
}
.wgf-region-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  color: var(--wgf-gold-2);
  transition: background-color 120ms ease, color 120ms ease;
}
a.wgf-region-opt:hover,
a.wgf-region-opt:focus-visible {
  background: rgba(var(--wgf-gold-rgb), 0.16);
  color: var(--wgf-gold);
  outline: none;
}
.wgf-region-opt.is-active {
  background: var(--wgf-gold);
  color: #1a1408;
  cursor: default;
}

/* Stable scrollbar gutter (owner review 2026-07-03): without this the centered nav shifts
   between short pages (no scrollbar) and long pages. One line kills the residual nav shift. */
html { scrollbar-gutter: stable; }