/* Language switcher (DEV_PLAN §15.2)
   Trigger chrome for both placements, plus the option list inside the popup.
   The popup shell itself is /core_assets/css/popup.css.
-------------------------------------------------- */

.lang-switch {
  display:inline-flex;
  align-items:center;
}

/* Trigger — a quiet outlined pill, identical in both placements (19 September 2026)
   ⚠ The resets below are HISTORICAL. Core used to style the bare `button` element — gold
   gradient, border, inset shadows and a ► on ::after — and the old rule here overrode only
   background and border, so this trigger carried stray gold shadows and an arrow. Core
   stopped styling bare `button` on 19 September 2026 (its buttons moved into base.css on
   the 21st), so the resets are no longer load-bearing. They are harmless and left in place.

   It takes its colour from the header's --hd-fg state token (white bar -> ink, blue bar ->
   white) and falls back to currentColor in the footer, so ONE rule serves all three places.
-------------------------------------------------- */

.lang-switch__btn {
  display:inline-flex;
  align-items:center;
  gap:6px;

  /* A quiet outlined pill, the SAME in the nav and the footer (Ben, 19 September 2026).
     The border reads off --hd-line, so it is a dark hairline on the white bar and a pale
     one on the blue bar and in the footer, without a rule per placement. */
  padding:6px 14px;
  border:1px solid var(--hd-line, rgba(255,255,255,0.24));
  border-radius:30px;
  background:none;
  box-shadow:none;
  overflow:visible;

  color:var(--hd-fg, currentColor);
  font:inherit;
  line-height:1;
  opacity:0.72;
  cursor:pointer;
  transition:opacity 0.2s ease, color 0.2s ease;
}

.lang-switch__btn:hover,
.lang-switch__btn:focus-visible {
  opacity:1;
  color:var(--hd-fg-hover, currentColor);
}

.lang-switch__btn:focus-visible {
  outline:2px solid currentColor;
  outline-offset:3px;
}

/* Chevron. ⚠ Overrides buttons.css's `button::after { content:"►"; position:absolute; … }`
   — it must be reset to a STATIC box or it sits 1.4em off the right edge. Drawn from two
   borders rather than an icon file: core/assets/icons/ has no chevron (the dead
   chevron-down.svg reference in header_footer_v2.css's .ft-lang select never resolved).
   currentColor means it follows the state token exactly as the text does. */
.lang-switch__btn::after {
  content:"";
  position:static;
  width:0.4em;
  height:0.4em;
  margin:-0.2em 0 0 0.1em;
  background:none;
  border:solid currentColor;
  border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}

.lang-switch__code {
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.08em;
}

.lang-switch__label {
  font-size:0.85rem;
}

/* Nav: the code only — no visible "Language" label, the bar has no room for one. The pill
   itself is the shared rule above; there is deliberately nothing placement-specific here. */

/* Footer: the same pill, plus the visible "Language" label. The footer is outside the header,
   so it never inherits --hd-fg — it sets the same three tokens to its own dark-background
   values and the rules above need no footer variant. */
.lang-switch--footer {
  --hd-fg:var(--mhl-text, currentColor);
  --hd-fg-hover:#fff;
  --hd-line:rgba(255,255,255,0.22);
}

/* Options inside the popup
   Text, never flags — see the component header.
   ⚠ Colours read the --popup-* skin tokens since 2.3.7 (core popup.css explains them),
   so the list follows the popup box — light on MHL. They were white-on-dark before.
   The fallbacks are core's, for a site that sets no tokens.
-------------------------------------------------- */

.lang-switch__list {
  margin:0;
  padding:0;
  list-style:none;
}

.lang-switch__item + .lang-switch__item {
  margin-top:6px;
}

.lang-switch__link {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border:1px solid var(--popup-line, rgba(0,0,0,0.12));
  border-radius:12px;
  color:var(--popup-fg, #171717);
  text-decoration:none;
}

.lang-switch__link:hover,
.lang-switch__link:focus-visible {
  border-color:#C9A96E;
  background:var(--popup-surface, rgba(0,0,0,0.04));
}

.lang-switch__link.is-current {
  border-color:#C9A96E;
  background:rgba(201,169,110,0.14);
  font-weight:700;
}

/* Unavailable languages stay clickable — they land on the no-translation message
   page, never a dead end (§15.4). Dimmed, not disabled. */
.lang-switch__link.is-unavailable {
  color:var(--popup-muted, #6b7076);
}

.lang-switch__name {
  font-size:0.98rem;
}

.lang-switch__note {
  flex:0 0 auto;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--popup-muted, #6b7076);
}

.lang-switch__footnote {
  margin:14px 0 0;
  font-size:0.78rem;
  color:var(--popup-muted, #6b7076);
}