/* wgf-version-switch - the game-version switcher (era / mop / retail).

   This sheet does NOT define a component. The switcher chips ARE the kit's squared
   red-button tabs (.wgf-tab in a .wgf-tabrow strip, assets/wgf-chrome.css - ig-17/19:
   the active tab is pulled brighter on the pressed slices with gold text). Everything
   here is a scoped variant of the kit, which is why this sheet must load AFTER
   wgf-chrome.css. The old selected state (the blue AH nav highlight slice) is retired:
   blue-on-blue is the owner's named slop marker (13-ingame-reference sec 3 delta 3).

   Standards: window anatomy 02-components section 1, tokens per DESIGN_SYSTEM rule 2
   (no hardcoded hex a token owns). */

/* the switcher rail: the label + a kit tab row inside the window body */
.wgf-vsw {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
}

.wgf-vsw-title {
  font-family: var(--font-game);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wgf-muted);
}

/* .wgf-tab is a single-line 30px tab; this variant lets it carry the two-line
   label + cap. Padding follows the kit's scaled-cap rule: at 46px tall the 56px
   source cap renders ~20px wide, so horizontal padding is 20px exactly. */
.wgf-vsw-chip {
  height: 46px;
  min-width: 132px;
  padding: 0 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1.25;
  text-decoration: none;
}

.wgf-vsw-chip:hover {
  text-decoration: none;
}

/* a version with no guide yet: an honest disabled tab, never a dead link */
.wgf-vsw-chip.is-empty,
.wgf-vsw-chip.is-empty:hover {
  opacity: .5;
  cursor: not-allowed;
  color: var(--wgf-muted);
}

.wgf-vsw-label {
  font-family: var(--font-game);
  font-size: var(--text-sm);
}

.wgf-vsw-cap {
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--wgf-gold-dim);
  text-transform: none;
  letter-spacing: 0;
}

.wgf-vsw-chip.is-active .wgf-vsw-cap,
.wgf-vsw-chip[aria-current="page"] .wgf-vsw-cap {
  color: var(--wgf-gold);
}

/* the family directory grid on /guides/professions/ - kit nav-button plates
   (.wgf-navbtn) carrying the same two-line label/cap, as .wgf-vsw-card */
.wgf-vsw-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
}

.wgf-vsw-card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 52px;
  line-height: 1.2;
  text-decoration: none;
}

.wgf-vsw-card:hover { text-decoration: none; }

/* the page notice (provenance + review status) is the kit dialog banner; this is
   only its layout seat inside the window body */
.wgf-window__body .wgf-dialog-banner { margin: 0 0 var(--space-4); }

/* ── Guide body typography (13-ingame-reference.md, AUTHORITY: SUPREME) ─────────
   - Section h2s are OBJECTS: the renderer emits the kit's .wgf-secthead pill
     (wgf-chrome.css) - no bare-h2 styling here.
   - Tables are the guide book (assets/wgf-guide-book.css) - no table skin here.
   - Display face is the small-caps gold game face; body prose stays white/light in
     the humanist serif, because "gold is reserved for labels and meta, white for
     body copy". */

.wgf-guide-body {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.72;
  color: var(--wgf-text);
}

.wgf-guide-body p {
  margin: 0 0 var(--space-3);
}

/* section headers use the kit pill; give it the guide rhythm around it */
.wgf-guide-body h2.wgf-secthead {
  margin: var(--space-6) auto var(--space-3);
  font-size: var(--text-lg);
}

/* sub-sections are the lighter form of the same object: a carved rule, not a full banner */
.wgf-guide-body h3 {
  margin: var(--space-5) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--wgf-border);
  color: var(--wgf-gold-muted);
  font-family: var(--font-game);
  font-variant: small-caps;
  letter-spacing: .03em;
  font-size: var(--text-md);
}

/* item and recipe names read as labels, so they carry the gold thread */
.wgf-guide-body strong {
  color: var(--wgf-gold-muted);
  font-weight: 600;
}

.wgf-guide-body ol,
.wgf-guide-body ul {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}

.wgf-guide-body li {
  margin-bottom: var(--space-1);
}

@media (max-width: 700px) {
  .wgf-vsw {
    gap: var(--space-2);
  }

  .wgf-vsw-chip {
    min-width: 0;
    flex: 1 1 auto;
  }
}