/* 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: ITHILDIN tokens only (docs/ui-ux/15-ithildin-reskin.md). --wgf-gold-dim is
 * DECORATIVE ONLY and never a text colour below. The active state is token ithildin 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, #333b38);
  border-radius: 0;
  background: linear-gradient(180deg, var(--wgf-panel-1, #151b18), var(--wgf-bg, #0c100e));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  color: var(--wgf-gold-muted, #8fae9f);
  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, #c8f0dd);
  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, #c8f0dd);
}
.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, #070a09), var(--wgf-well-edge, #030605));
  border: 1px solid var(--wgf-metal-soft, #333b38);
  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, #a8b5ab);
}

.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, #a8b5ab);
  white-space: normal;
}

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

/* 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, #93a098);
}
.wgf-sel__opt.is-empty:hover { color: var(--wgf-gold-bright, #c8f0dd); }
.wgf-sel__opt.is-empty .wgf-sel__opt-sub { font-style: italic; }

/* -- 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, #202a25);
}
.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, #c8f0dd);
  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, #a8b5ab);
  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(163, 217, 194, 0.20));
  border-radius: 0;
  color: var(--wgf-gold-muted, #8fae9f);
  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%; }
}