/* wgf-selector.css - the sitewide region + game-version selector (chip + panel).
 *
 * Companion to assets/wgf-selector.js (builds the markup) and wgf_selector.py (emits both
 * tags from inside </footer>). Bump wgf_selector.ASSET_VERSION on ANY edit here.
 *
 * Design law (OWNER_DIRECTIVES, docs/ui-ux/13 + 15): squared journal-window chrome, never a
 * rounded pill. The chip is a small well plate with an engraved small-caps readout; the
 * panel is the SAME in-game dropdown surface the nav menus use (.wgf-nav-menu: near-black
 * well, thin metal edge, inset shadow, radius 0); the options ARE the client's own nav
 * button (.wgf-navbtn from wgf-chrome.css, the auctionhouse-nav-button slice) re-cut to sit
 * in a row, exactly as the guides switcher and the old version strip did; the one action
 * ("Change realm") is the kit's small red button. Nothing new is invented.
 *
 * Palette law: brand tokens only (docs/ui-ux/17-blizzard-palette.md). --wgf-gold-dim is
 * DECORATIVE ONLY and never a text colour below. The active state is token gold over
 * the resting slice, NOT the highlight slice (that slice is navy, owner-condemned in the
 * sitewide header - verified 2026-08-23).
 *
 * Scope law: every rule is anchored to .wgf-sel, so this file is a pure no-op elsewhere.
 * It never edits wgf-site-shell.css / wgf-chrome.css; it wins by cascade (loaded last from
 * the footer) and specificity.
 */

.wgf-sel {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-right: 8px;
}

/* -- the chip: current REGION - VERSION, always visible --------------------------- */

.wgf-sel__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 10px;
  border: 1px solid var(--wgf-metal-soft, #3a3120);
  border-radius: 0;
  background: linear-gradient(180deg, var(--wgf-panel-1, #14161c), var(--wgf-bg, #0a0b0f));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  color: var(--wgf-gold-muted, #b5a06a);
  font-family: var(--font-game, serif);
  font-size: 12.5px;
  font-weight: 650;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  cursor: pointer;
}
.wgf-sel__chip:hover,
.wgf-sel.is-open .wgf-sel__chip {
  color: var(--wgf-gold-bright, #ffe375);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 8px rgba(255, 255, 255, 0.10);
}
.wgf-sel__chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.wgf-sel__chip-region,
.wgf-sel__chip-version {
  color: var(--wgf-gold-bright, #ffe375);
}
.wgf-sel__chip-dot { opacity: 0.6; }

.wgf-sel__caret {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.85;
  transition: transform 0.15s ease;
}
.wgf-sel.is-open .wgf-sel__caret { transform: rotate(180deg); }

/* -- the panel: the in-game dropdown well ---------------------------------------- */

.wgf-sel__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: 352px;
  max-width: calc(100vw - 16px);
  padding: var(--space-2, 8px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  background: linear-gradient(180deg, var(--wgf-well, #08090c), var(--wgf-well-edge, #040507));
  border: 1px solid var(--wgf-metal-soft, #3a3120);
  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);
  text-align: left;
  font-variant: normal;
}
.wgf-sel__panel[hidden] { display: none; }

.wgf-sel__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* display:flex above would otherwise beat the UA [hidden] rule (the You row hides itself
   when there is no character and no realm to name). */
.wgf-sel__row[hidden] { display: none; }

/* Engraved section label (02-components section 12: small-caps labels, not pills). */
.wgf-sel__label {
  padding: 0 2px;
  font-family: var(--font-game, serif);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wgf-muted, #b3a88f);
}

.wgf-sel__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Scoped re-cut of .wgf-navbtn: the kit button is built for the VERTICAL rail
   (display:flex, width:100%, min-height:40px, text-align:left), so unmodified it stacks
   the options in a column. Same fix the guides switcher (.wgf-vsw-chip) uses. Slice art,
   hover highlight and focus ring still come from wgf-chrome.css. */
.wgf-sel__opt {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  padding: 4px 10px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  font-size: 12.5px;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
}
.wgf-sel__opt:hover { text-decoration: none; }
.wgf-sel__opt-main { white-space: nowrap; }
.wgf-sel__opt-sub {
  font-family: var(--font-ui, serif);
  font-variant: normal;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: none;
  color: var(--wgf-muted, #b3a88f);
  white-space: normal;
}

/* The one you are on: token gold ring over the resting slice (never the navy slice). */
.wgf-sel__opt.is-active {
  color: var(--wgf-gold-bright, #ffe375);
  box-shadow: inset 0 0 0 1px var(--wgf-border-strong, rgba(255, 209, 0, 0.38));
  cursor: default;
}
.wgf-sel__opt.is-active .wgf-sel__opt-sub { color: var(--wgf-gold-muted, #b5a06a); }

/* A version this page has no data for. Still a real link (it opens the guides that do
   serve it), but visibly quieter than the versions this page can switch in place. */
.wgf-sel__opt.is-empty {
  background-image: url(/assets/ui/auctionhouse-nav-button.png);
  background-position: center top;
  background-size: 100% 118%;
  color: var(--wgf-neutral-text, #9b9384);
}
.wgf-sel__opt.is-empty:hover { color: var(--wgf-gold-bright, #ffe375); }
.wgf-sel__opt.is-empty .wgf-sel__opt-sub { font-style: italic; }

/* -- announced versions (wgf_version.COMING_VERSIONS): awareness, never selection -----
   The Coming section's badged links. The accent rides a per-option CSS var the JS sets
   from the registry row (the same pattern the version seal uses on the chip); every
   fallback below is a brand token, so a row without an accent still renders lawfully. */
.wgf-sel__opt.is-coming {
  border: 1px solid var(--wgf-coming-accent, var(--wgf-metal-soft, #3a3120));
}
.wgf-sel__opt.is-coming .wgf-sel__opt-main {
  color: var(--wgf-coming-accent, var(--wgf-gold-bright, #ffe375));
}
.wgf-sel__opt.is-coming:hover .wgf-sel__opt-main { color: var(--wgf-gold-bright, #ffe375); }
.wgf-sel__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid var(--wgf-coming-accent, var(--wgf-border, rgba(255, 209, 0, 0.20)));
  border-radius: 0;
  color: var(--wgf-coming-accent, var(--wgf-gold-muted, #b5a06a));
  font-family: var(--font-game, serif);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
}

/* -- who you are playing as --------------------------------------------------------- */

.wgf-sel__you {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--wgf-border-neutral-soft, #202229);
}
.wgf-sel__you > .wgf-sel__label { flex: none; }
.wgf-sel__who {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}
.wgf-sel__name {
  color: var(--wgf-gold-bright, #ffe375);
  font-family: var(--font-game, serif);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wgf-sel__where {
  font-family: var(--font-ui, serif);
  font-size: 11.5px;
  color: var(--wgf-muted, #b3a88f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Which game the character came from (always Retail today - see
   wgf_selector.CHARACTER_SOURCE_VERSION). A squared engraved tag, not a pill. */
.wgf-sel__flavor {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid var(--wgf-border, rgba(255, 209, 0, 0.20));
  border-radius: 0;
  color: var(--wgf-gold-muted, #b5a06a);
  font-family: var(--font-game, serif);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.wgf-sel__change { flex: none; }

/* -- narrow viewports: the panel becomes a bottom sheet, thumb-reachable -----------
   wgf-selector.js moves the open panel to <body> on phones (the header is a stacking
   context, so a fixed child would paint under the body-level consent bar) and tags it
   --sheet. z-index sits above the consent bar (9999, wgf-consent.js) and below the
   Escape Game Menu overlay (wgf-keybinds.js), which must always win. */

.wgf-sel__panel--sheet {
  position: fixed;
  top: auto;
  right: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 10000;
  width: auto;
  max-width: none;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

@media (max-width: 720px) {
  .wgf-sel { margin-right: 4px; }
  .wgf-sel__opt { flex-basis: 46%; }
  .wgf-sel__panel--sheet .wgf-sel__opt { flex-basis: 46%; }
}


/* -- version SEAL on the chip (docs/ui-ux/16-version-seals.md) ------------------------
   The JS sets --wgf-version-accent / --wgf-version-chip-border on <html> from the registry
   accent for a NON-default served version; on retail they are unset and every fallback
   below is the chip exactly as before. */
.wgf-sel__chip { border-color: var(--wgf-version-chip-border, var(--wgf-metal-soft, #3a3120)); }
.wgf-sel__chip-version { color: var(--wgf-version-accent, var(--wgf-gold-bright, #ffe375)); }

/* -- version SPINE (site_shell.render_version_spine) --------------------------------
   The band under the primary nav on every non-retail page: a lit rule in the version's
   light, the version name in the game face, a reader's tagline, and the twins. The accent
   vars ride the element's own style attribute. Brand tokens only otherwise. */
.wgf-sel-spine {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 34px;
  padding: 0 18px;
  border-top: 1px solid rgba(var(--wgf-version-accent-rgb, 255, 227, 117), 0.35);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  background:
    linear-gradient(90deg, rgba(var(--wgf-version-accent-rgb, 255, 227, 117), 0.16),
      rgba(var(--wgf-version-accent-rgb, 255, 227, 117), 0.04) 40%, transparent 75%),
    var(--wgf-panel-1, #14161c);
  color: var(--wgf-text, #ece3cf);
  font-size: 12.5px;
  line-height: 1.25;
}
.wgf-sel-spine__light {
  flex: none;
  width: 3px;
  height: 18px;
  background: var(--wgf-version-accent, #ffe375);
  box-shadow: 0 0 10px rgba(var(--wgf-version-accent-rgb, 255, 227, 117), 0.85),
    0 0 2px var(--wgf-version-accent, #ffe375);
}
.wgf-sel-spine__name {
  flex: none;
  font-family: var(--font-game, serif);
  font-variant: small-caps;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--wgf-version-accent, #ffe375);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.wgf-sel-spine__tag {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wgf-gold-muted, #b5a06a);
}
.wgf-sel-spine__twins { flex: none; color: var(--wgf-gold-muted, #b5a06a); }
.wgf-sel-spine__twin {
  color: var(--wgf-gold-bright, #ffe375);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 227, 117, 0.45);
}
.wgf-sel-spine__twin:hover { border-bottom-style: solid; }
@media (max-width: 720px) {
  .wgf-sel-spine { flex-wrap: wrap; gap: 6px 12px; padding: 6px 12px; }
  .wgf-sel-spine__tag { flex-basis: 100%; order: 3; white-space: normal; }
  /* "Also on ..." twins wrap instead of widening the page (site-health F06: 514px at 390). */
  .wgf-sel-spine__twins { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}

/* Owner 2026-09-18: ONE game switcher, the masthead's top-left strip. This control is the
   REGION picker only: the chip shows the region, the panel keeps Region + Your character. */
.wgf-sel__chip-dot, .wgf-sel__chip-version { display: none; }
.wgf-sel__row[aria-label="Game"], .wgf-sel__row[aria-label="Coming"] { display: none !important; }