/* Shared language picker — AliasX, PasswordX, Slevin. Claude Code (design), 09.11.2026.
   Visual only. Behaviour comes from native HTML popover (popovertarget, Esc, light dismiss)
   and the brand runtime (aria-pressed, setLanguage, route map). No JS here.
   Contract: design/shared/language-picker-HANDOFF.md

   Brands only set inherited variables on any ancestor (e.g. :root, .site-header, footer):
     --lp-fg, --lp-muted, --lp-bg, --lp-surface, --lp-line, --lp-accent, --lp-on-accent,
     --lp-radius, --lp-font, --lp-focus
   Defaults are neutral black/white and follow prefers-color-scheme. */

[data-language-picker] {
  --_fg: var(--lp-fg, #141414);
  --_muted: var(--lp-muted, #5f6360);
  --_bg: var(--lp-bg, transparent);
  --_surface: var(--lp-surface, #ffffff);
  --_line: var(--lp-line, rgba(20, 20, 20, .16));
  --_accent: var(--lp-accent, #141414);
  --_on-accent: var(--lp-on-accent, #ffffff);
  --_radius: var(--lp-radius, 8px);
  --_font: var(--lp-font, inherit);
  --_focus: var(--lp-focus, var(--_accent));
  position: relative;
  display: inline-flex;
  min-width: 0;
  font-family: var(--_font);
}
@media (prefers-color-scheme: dark) {
  [data-language-picker] {
    --_fg: var(--lp-fg, #f1f1ee);
    --_muted: var(--lp-muted, #a3a7a2);
    --_surface: var(--lp-surface, #1b1d1c);
    --_line: var(--lp-line, rgba(255, 255, 255, .16));
    --_accent: var(--lp-accent, #f1f1ee);
    --_on-accent: var(--lp-on-accent, #141414);
  }
}

/* ---------- Trigger ---------- */
.lp-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; max-width: 100%; padding: 0 12px;
  border: 1px solid var(--_line); border-radius: var(--_radius);
  background: var(--_bg); color: var(--_fg);
  font: 500 .875rem/1.2 var(--_font); white-space: nowrap; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.lp-trigger:hover { border-color: var(--_muted); }
.lp-trigger:focus-visible, .lp-item:focus-visible, .lp-panel a:focus-visible, .lp-select:focus-visible {
  outline: 2px solid var(--_focus); outline-offset: 2px;
}
.lp-trigger [data-language-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lp-globe, .lp-chev { flex: none; width: 16px; height: 16px; }
.lp-chev { width: 10px; height: 10px; color: var(--_muted); transition: transform .15s; }
[data-language-picker]:has(.lp-panel:popover-open) .lp-chev { transform: rotate(180deg); }
/* Header: compact — only the globe and the autonym, capped so the header never reflows. */
[data-language-picker][data-placement="header"] .lp-trigger { min-height: 40px; padding: 0 10px; }
[data-language-picker][data-placement="header"] [data-language-current] { max-width: 8.5em; }
/* Footer: quiet text row. */
[data-language-picker][data-placement="footer"] .lp-trigger { border-color: transparent; padding-inline: 8px; color: var(--_muted); }
[data-language-picker][data-placement="footer"] .lp-trigger:hover { color: var(--_fg); border-color: var(--_line); }

/* ---------- Panel (native popover, top layer) ---------- */
.lp-panel {
  /* reset UA popover box */
  inset: auto; margin: 0; padding: 8px;
  width: min(30rem, calc(100vw - 24px));
  max-height: min(70dvh, 34rem); overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--_line); border-radius: calc(var(--_radius) + 4px);
  background: var(--_surface); color: var(--_fg);
  box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .35);
  font-family: var(--_font);
  /* fallback position without anchor support: centred */
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.lp-panel:not(:popover-open) { display: none; }
.lp-panel::backdrop { background: rgba(0, 0, 0, .18); }
@supports (anchor-scope: all) and (position-area: block-end) {
  /* Anchored to its own trigger; anchor-scope keeps header and footer instances apart. */
  [data-language-picker] { anchor-scope: --lp; }
  .lp-trigger { anchor-name: --lp; }
  .lp-panel {
    position-anchor: --lp; top: auto; left: auto; transform: none;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    margin: 6px 8px;
  }
  .lp-panel::backdrop { background: transparent; }
  [data-placement="footer"] .lp-panel { position-area: block-start span-inline-end; }
}
.lp-panel:focus, .lp-panel:focus-visible { outline: none; }
.lp-title { margin: 4px 8px 8px; font: 600 .75rem/1.3 var(--_font); letter-spacing: .04em; text-transform: uppercase; color: var(--_muted); }
.lp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }

/* Items: buttons (SPA) or links (SSR articles). Same look. */
.lp-item {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  width: 100%; min-height: 44px; padding: 6px 34px 6px 10px; position: relative;
  border: 0; border-radius: calc(var(--_radius) - 2px); background: transparent;
  color: var(--_fg); font: 500 .9375rem/1.25 var(--_font); text-align: start; text-decoration: none; cursor: pointer;
}
.lp-item:hover { background: color-mix(in srgb, var(--_fg) 7%, transparent); }
.lp-item .lp-en { font-size: .75rem; font-weight: 400; color: var(--_muted); }
.lp-item[aria-pressed="true"], .lp-item[aria-current="true"], .lp-item[aria-current="page"] {
  background: color-mix(in srgb, var(--_accent) 12%, transparent); font-weight: 650;
}
.lp-item[aria-pressed="true"]::after, .lp-item[aria-current="true"]::after, .lp-item[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline-end: 12px; top: 50%; width: 12px; height: 7px; margin-top: -5px;
  border-left: 2px solid var(--_accent); border-bottom: 2px solid var(--_accent); transform: rotate(-45deg);
}
.lp-item:disabled, .lp-item[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

/* Native select fallback (also the no-popover browser path). */
.lp-select {
  min-height: 44px; max-width: 100%; padding: 0 12px;
  border: 1px solid var(--_line); border-radius: var(--_radius);
  background: var(--_bg); color: var(--_fg); font: 500 .875rem var(--_font);
}

/* Phones: bottom sheet, one column if the screen is narrow. */
@media (max-width: 560px) {
  .lp-panel, [data-placement] .lp-panel {
    position: fixed; inset: auto 8px 8px 8px; top: auto; left: auto; transform: none;
    width: auto; max-height: 70dvh; margin: 0; position-area: none;
  }
  .lp-panel::backdrop { background: rgba(0, 0, 0, .32); }
}
@media (max-width: 340px) { .lp-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lp-chev, .lp-trigger { transition: none; } }
@media (forced-colors: active) {
  .lp-item[aria-pressed="true"], .lp-item[aria-current] { outline: 2px solid Highlight; }
}