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

   This sheet does NOT define a component. The chips ARE the client nav button
   (.wgf-navbtn in assets/wgf-chrome.css: the real auctionhouse-nav-button slice with the
   highlight slice on hover); everything here is a scoped variant of the kit, which is why
   this sheet must load AFTER wgf-chrome.css.

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

/* the switcher rail: a horizontal row of client nav buttons 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-vsw-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* .wgf-navbtn is built for the vertical rail (width:100%). These variants make it sit in a
   row and carry two lines, without touching the kit's own rule. */
.wgf-vsw-chip {
  width: auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  min-width: 132px;
  line-height: 1.2;
  text-decoration: none;
}

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

/* selected: the client's own selected nav slice, same as the rail's active state */
.wgf-vsw-chip.is-active {
  background-image: url(/assets/ui/auctionhouse-nav-button-highlight.png);
  background-position: center;
  background-size: 100% 100%;
  color: var(--wgf-gold-bright);
}

.wgf-vsw-chip.is-empty,
.wgf-vsw-chip.is-empty:hover {
  opacity: .45;
  cursor: not-allowed;
  background-image: url(/assets/ui/auctionhouse-nav-button.png);
  background-position: center top;
  background-size: 100% 118%;
  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);
  color: var(--wgf-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* the family directory grid on /guides/professions/ */
.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-grid .wgf-vsw-chip {
  min-width: 0;
  width: 100%;
}

/* provenance: which client build the numbers came from */
.wgf-prov {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-3);
  border-left: 2px solid var(--wgf-gold-dim);
  font-size: var(--text-sm);
  color: var(--wgf-muted);
}

/* guide callout (02-components section 14): bordered block, well fill, calm prose */
.wgf-draft-flag {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--wgf-border-neutral);
  border-left: 3px solid var(--wgf-gold-dim);
  background: var(--wgf-well);
  font-size: var(--text-sm);
  color: var(--wgf-muted);
}

/* ── Guide body typography (13-ingame-reference.md, AUTHORITY: SUPREME) ─────────
   The pack's laws applied here:
   - "Section headers are objects, not typography": an embossed metal-edged pill holds the
     header text INSIDE the content area (slate family: gold text in a dark metal pill).
   - 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".
   - "Value alignment law: label left, value right, ALWAYS. Never centered values."
   - Lists alternate a subtle stripe. */

.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 header AS AN OBJECT: embossed dark pill with a metal edge, gold small-caps */
.wgf-guide-body h2 {
  display: block;
  margin: var(--space-6) 0 var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--wgf-metal);
  border-radius: var(--radius-control);
  background: linear-gradient(180deg, var(--wgf-plate-hi), var(--wgf-plate));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(0, 0, 0, .5);
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-variant: small-caps;
  letter-spacing: .04em;
  font-size: var(--text-lg);
  text-align: center;
}

/* 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);
}

/* bracket routes and shopping lists: a client data pane, not a web table */
.wgf-guide-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
  background: var(--wgf-well);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
}

.wgf-guide-body th,
.wgf-guide-body td {
  border: 1px solid var(--wgf-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.wgf-guide-body th {
  background: var(--wgf-plate);
  color: var(--wgf-gold);
  font-family: var(--font-game);
  font-variant: small-caps;
  font-size: var(--text-xs);
  letter-spacing: .04em;
}

/* Value alignment law: numeric columns are VALUES, so they sit right with lining figures.
   In every guide table the first column is the label (skill range / material) and the
   numeric columns follow it. */
.wgf-guide-body td:not(:first-child),
.wgf-guide-body th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

/* the materials column is prose, not a value: it stays left even though it is not first */
.wgf-guide-body td:last-child:not(:nth-child(2)),
.wgf-guide-body th:last-child:not(:nth-child(2)) {
  text-align: left;
}

.wgf-guide-body tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, .22);
}

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

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

  .wgf-guide-body table {
    display: block;
    overflow-x: auto;
  }
}