/* ── Languages (FEATURE-42, specs/009-multi-language; js/locales.js) ──────────────────────────────────────
   LangMenu: the language menu of the app header (between the search and the light/dark switch).
   LangFlags: the flag buttons of the public pages.
   The menu follows the app's tokens (both themes); the flags take --lf-* from the page that hosts them,
   with dark defaults (the public pages are dark). */

/* ── Header menu ── */
.hdr-lang { position: relative; flex: none; margin-right: 10px; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 8px;
  background: var(--surf2, #20202c); border: 1px solid var(--border, #2a2a3a); border-radius: 8px;
  color: var(--text, #eef0f6); font: 700 12px/1 var(--font, system-ui, sans-serif); letter-spacing: .5px;
  cursor: pointer; transition: border-color .15s;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: var(--color-primary, #e0414e); }
.lang-btn:focus-visible { outline: 2px solid var(--color-primary-ink, var(--color-primary, #e0414e)); outline-offset: 2px; }
.lang-btn-flag { display: inline-flex; }
.lang-btn-flag svg, .lang-opt > svg:first-child {
  display: block; flex: none; width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px var(--border, #2a2a3a);
}
.lang-chev { flex: none; color: var(--muted, #8b8fb0); transition: transform .15s; }
.lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang-menu.is-busy .lang-btn { opacity: .6; cursor: progress; }
.lang-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 420; min-width: 210px; padding: 6px;
  background: var(--surf, #171720); border: 1px solid var(--border, #2a2a3a); border-radius: 12px;
  box-shadow: var(--e3, 0 16px 48px rgba(0,0,0,.5));
  animation: lang-in var(--dur-2, 250ms) var(--ease, ease);
}
.lang-list[hidden] { display: none; }
@keyframes lang-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lang-list-head {
  padding: 6px 10px; font-size: var(--fs-xxs, 10px); font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted, #8b8fb0);
}
.lang-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text, #eef0f6); font: 500 13px/1.2 var(--font, system-ui, sans-serif);
  text-align: left; cursor: pointer;
}
.lang-opt:hover { background: var(--surf2, #20202c); }
.lang-opt:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-primary-ink, var(--color-primary, #e0414e)); }
.lang-opt[aria-checked="true"] { background: var(--color-primary-light, rgba(224,65,78,.14)); font-weight: 700; }
.lang-opt-name { flex: 1; }
.lang-check { flex: none; color: var(--color-primary-ink, var(--color-primary, #e0414e)); visibility: hidden; }
.lang-opt[aria-checked="true"] .lang-check { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .lang-list { animation: none; } .lang-chev { transition: none; } }
/* a phone header: the flag alone says which language (the letters and the chevron go; app.css makes room) */
@media (max-width: 480px) {
  .hdr-lang { margin-right: 0; }
  .lang-btn { gap: 0; padding: 0 5px; }
  .lang-btn-code, .lang-btn .lang-chev { display: none; }
}

/* ── Flags of the public pages ── */
.lang-flags {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
  background: var(--lf-bg, rgba(23,23,32,.72));
  border: 1px solid var(--lf-border, rgba(255,255,255,.08));
  border-radius: 999px;
}
.lang-flags .lang-flag {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; height: auto; margin: 0; padding: 5px 10px 5px 6px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--lf-muted, #a3a3c2);
  font: 600 12px/1 -apple-system, "Segoe UI", system-ui, sans-serif; letter-spacing: .5px;
  cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.lang-flags .lang-flag:hover { background: var(--lf-hover, rgba(255,255,255,.07)); color: var(--lf-text, #eef0f6); }
.lang-flags .lang-flag[aria-pressed="true"] {
  background: var(--lf-on-bg, rgba(224,65,78,.22)); color: var(--lf-on-text, #fff);
  box-shadow: inset 0 0 0 1px var(--lf-on-ring, rgba(224,65,78,.65));
}
.lang-flags .lang-flag:focus-visible { outline: 2px solid var(--color-primary-ink, var(--color-primary, #e0414e)); outline-offset: 2px; }
.lang-flags svg {
  display: block; flex-shrink: 0; width: 22px; height: 16px; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18); transition: filter .15s;
}
.lang-flags .lang-flag:not([aria-pressed="true"]) svg { filter: saturate(.6) brightness(.85); }
.lang-flags .lang-flag:hover svg { filter: none; }
@media (max-width: 380px) {
  .lang-flags .lang-flag { gap: 4px; padding: 5px 7px 5px 5px; }
}