/* ── Language switcher ────────────────────────────────────────────────────
   Partner stylesheet to static/js/i18n.js and templates/_lang_switcher.html.
   Loaded from base.html on EVERY page, signed in or not — the auth pages and
   the marketing header carry the switcher too, and somebody who cannot read
   the sign-in form is exactly the person who needs it.

   Written to sit beside .lx-theme in the account card without looking like a
   different product, so the trigger geometry and the popover chrome mirror
   theme.css's. Tokens only — see static/css/theme.css. */

.lx-lang { position: relative; display: inline-flex; }

.lx-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast, .16s) var(--ease-standard, ease),
              background var(--dur-fast, .16s) var(--ease-standard, ease),
              border-color var(--dur-fast, .16s) var(--ease-standard, ease);
}
.lx-lang-trigger:hover { color: var(--text); border-color: var(--accent-tint-30); }
.lx-lang-trigger svg { width: 14px; height: 14px; flex-shrink: 0; }
.lx-lang-trigger[aria-expanded="true"] { color: var(--accent); border-color: var(--accent-tint-30); }

.lx-lang-current {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lx-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 9500;
  min-width: 210px;
  padding: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: rgba(var(--card-rgb), .97);
  backdrop-filter: blur(22px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}
/* Inside the account card a right-anchored popover hangs off the edge — this
   is what `align="left"` on the macro switches to. */
.lx-lang-menu.is-left { right: auto; left: 0; }
.lx-lang-menu[hidden] { display: none; }

.lx-lang-head {
  padding: 5px 9px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lx-lang-opt {
  display: grid;
  /* name / english-name / tick — the name column takes the slack so the two
     labels stay left-aligned down the list rather than centring per row. */
  grid-template-columns: 1fr auto 16px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast, .16s) var(--ease-standard, ease),
              color var(--dur-fast, .16s) var(--ease-standard, ease);
}
.lx-lang-opt:hover { background: var(--surface-hover); }
.lx-lang-opt.is-active { color: var(--accent); }
.lx-lang-opt.is-busy { opacity: .55; pointer-events: none; }

.lx-lang-name { font-weight: 600; }
.lx-lang-en { font-size: 10.5px; color: var(--text-muted); }

.lx-lang-tick {
  width: 14px;
  height: 14px;
  opacity: 0;
  color: var(--accent);
}
.lx-lang-opt.is-active .lx-lang-tick { opacity: 1; }

/* ── Inside the account card ──
   The switcher shares the username's line with the theme control and matches
   its square footprint. base.css gives .lx-theme `margin-left: auto` to push
   the pair right; that auto has to MOVE to whichever control comes first, or
   two auto margins split the free space and open a gap between them. The
   sibling selector is also more specific than base.css's rule, so it wins
   regardless of load order. */
.lx-account-head .lx-lang {
  margin-left: auto;
  align-self: flex-start;
  margin-top: -3px;
}
.lx-account-head .lx-lang + .lx-theme { margin-left: 6px; }
.lx-account-head .lx-lang-trigger { width: 30px; height: 30px; padding: 0; justify-content: center; }
.lx-account-head .lx-lang-trigger svg { width: 15px; height: 15px; }
.lx-account-head .lx-lang-current { display: none; }

/* Auth pages put it under the form as a quiet, secondary control — it must not
   compete with the sign-in button above it. */
.lx-lang-foot {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.lx-lang-foot .lx-lang-menu {
  /* Opening downwards here would run off the bottom of a short auth card. */
  top: auto;
  bottom: calc(100% + 6px);
  right: 50%;
  transform: translateX(50%);
}
.lx-lang-foot .lx-lang-menu.is-left { left: auto; right: 50%; }

@media (max-width: 520px) {
  .lx-lang-menu { min-width: 180px; }
  .lx-lang-en { display: none; }
  .lx-lang-opt { grid-template-columns: 1fr 16px; }
}