/*
 * pm-lang — the language switcher (WO-14).
 *
 * Source frame: docs/design/frames/14-language-switcher.json (node 133:5124;
 * the mobile frame 133:5132 is the same component in the 64px mobile bar —
 * no separate measurements, contradictions[3]).
 *
 * Closed state: the trigger is visually identical to the WO-77 placeholder —
 * the 16px chevron (currentColor) beside the current native_name, 14px
 * uppercase, 4px apart. Those values cascade from the slot's own
 * .pm-header__lang rules (header.css), which the trigger sits inside; the
 * button reset below lets them land.
 *
 * Open state (measured.open): a White popover hugging its content — 94 × 103
 * at natural size — padding 8 top / 8 sides / 12 bottom, gap 12 between its
 * three children: the trigger row repeated in accent (a span, not a link —
 * contradictions[0]), a 1px divider-soft, then the other languages as 13px
 * ink sentence-case links, gap 8 (the typed --pm-font-size-lang-list,
 * contradictions[1]).
 *
 * Compiled to assets/css/components/lang-switcher.css by
 * src/build-tokens.mjs, which substitutes the breakpoint markers (a comment
 * holding `@bp <name>`) with the pixel value from tokens/tokens.json. Never
 * type a breakpoint width here. Every colour is a --pm-color-* token; no hex
 * value and no literal breakpoint width may appear in this file.
 *
 * The switcher works on both bars and at every width (WO-14 AC 4 — the
 * mobile bar shows it left of the burger), so unlike the mega panel there is
 * no breakpoint scoping here at all.
 */

/*
 * The hidden attribute is the closed state. The UA stylesheet already hides
 * it; this explicit guard keeps the popover closed even under a stylesheet
 * that sets display on the popover's classes (the mega panel's guard).
 */
.pm-lang__popover[hidden] {
	display: none;
}

/*
 * The popover's positioning ancestor is the switcher itself — not the header
 * band the mega panel needs: this popover is the trigger's own width, and
 * anchoring it to the header would need a per-bar offset. Nothing between
 * the popover and .pm-lang is positioned.
 *
 * WO-82 AC 1/3 — the wrapper is a flex row: as a plain block it laid the
 * inline-flex trigger out in a line box, and a leading SVG has no baseline
 * (the flex baseline falls to the svg's bottom edge), which hung the row
 * ~3.5px below the strut and pushed the popover's anchor — this element's
 * bottom — the same distance off the trigger's bottom. Flex itemises the
 * button: the wrapper's height is the trigger's own 16px content box, the
 * slot's 32px row holds (header.css), and the popover's top:
 * calc(100% + var(--pm-space-2)) sits exactly --pm-space-2 below the
 * trigger's bottom again.
 */
.pm-lang {
	position: relative;
	display: flex;
}

/*
 * The trigger (WO-14 AC 1): a real <button> so click/Enter/Space operate it
 * natively. The button reset lets the slot's .pm-header__lang treatment
 * (14px uppercase, the bar's colour) land on it unchanged — the closed
 * state stays visually identical to the WO-77 placeholder on both bars
 * (AC 4: the trigger follows the bar colour). The row is its own flex: the
 * slot's gap belongs to .pm-header__lang's children, not this button's —
 * without it the block-level SVG stacks above the label.
 *
 * WO-82 AC 1 — the trigger's row box lives on the SLOT, not here: the slot
 * is the switcher row in both render states (the fallback renders chevron +
 * label directly in it), so the frame's 8px block padding and the 16px
 * line are stated once there (header.css). This button keeps padding: 0 —
 * padding here too would double the row to 48px — and takes the 16px
 * line-height through font: inherit. The popover's top: calc(100% +
 * var(--pm-space-2)) anchors to .pm-lang, the trigger's content box, so the
 * 8px offset from the trigger's bottom is unchanged by the slot's padding.
 */
.pm-lang__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-space-1);
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
}

.pm-lang__trigger svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* WO-09's focus ring convention (2px accent, 2px offset) — the same ring
   header.css gives every other focusable header element. */
.pm-lang__trigger:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}

/*
 * The popover (WO-14 AC 2): White with ink text on BOTH bars — the one part
 * of the control that never follows the bar colour. 8px below the trigger:
 * no gap is measured in the extract; the mega panel's 8px offset
 * (18-mega-menu.json#measured, the header's only popover offset) is the
 * convention. z-index matches the mega panel's (mega-menu.css) so the two
 * stack identically inside the header's context.
 *
 * The slot's uppercase is reset here: the popover's list is sentence case
 * (measured.open.list), and only the repeated trigger row is uppercase
 * again. width: max-content is the extract's "hugs its content".
 */
.pm-lang__popover {
	position: absolute;
	top: calc(100% + var(--pm-space-2));
	left: 0;
	z-index: 10; /* the mega panel's value — mega-menu.css */
	width: max-content;
	box-sizing: border-box;
	padding: var(--pm-space-2) var(--pm-space-2) var(--pm-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-3);
	background-color: var(--pm-color-white);
	color: var(--pm-color-ink);
	text-transform: none;
}

/*
 * The current language, repeated from the trigger in accent (AC 2) — a
 * <span aria-current="page">, not a link: the page is where the reader
 * already is. Same row shape as the trigger: chevron then name, 4px apart,
 * 14px uppercase (the slot's size, re-stated because the popover reset the
 * transform this row keeps).
 */
.pm-lang__current {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-space-1);
	color: var(--pm-color-accent);
	font-size: 0.875rem; /* the slot's 14px — no font-size token exists (header.css) */
	font-weight: var(--pm-font-weight-400);
	text-transform: uppercase;
	white-space: nowrap;
}

.pm-lang__current svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* The 1px divider-soft role — ink @15 (measured.open.divider). */
.pm-lang__divider {
	display: block;
	height: 1px;
	background-color: var(--pm-color-divider-soft);
}

/*
 * The other languages (AC 2): a plain list, 13px ink sentence case
 * (--pm-font-size-lang-list, typed for this component from the extract),
 * 8px apart. Hover follows the footer's developer-judgement convention
 * (hover states are not designed, MISTAKES.md §C12): an underline, colour
 * unchanged.
 */
.pm-lang__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-2);
}

.pm-lang__link {
	color: var(--pm-color-ink);
	font-size: var(--pm-font-size-lang-list);
	font-weight: var(--pm-font-weight-400);
	text-decoration: none;
	white-space: nowrap;
}

.pm-lang__link:hover,
.pm-lang__link:focus-visible {
	text-decoration: underline;
}

.pm-lang__link:focus-visible {
	outline: 2px solid var(--pm-color-accent);
	outline-offset: 2px;
}