/* Language switcher — custom dropdown (native <select> is kept hidden for the
   change logic) so the options panel can be fully styled, unlike a native one.
   Shared by the app shell (base-app.html) and the public/login layout
   (base.html). Relies on the design tokens from constants.css. */
.lang-select { position: relative; margin-left: auto; }
.lang-select__native { display: none; }

.lang-select__trigger {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: .35rem .55rem .35rem .8rem; background: var(--surface);
  font-size: .85rem; font-weight: 600; color: var(--text); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.lang-select__trigger:hover { border-color: var(--text-subtle); }
.lang-select__trigger:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.lang-select__flag { flex: 0 0 auto; display: inline-block; width: 18px; height: 18px;
  border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .12); }
.lang-select__flag svg { display: block; width: 100%; height: 100%; }
.lang-select__chevron { width: 14px; height: 14px; color: var(--text-subtle); transition: transform .15s ease; }
.lang-select.is-open .lang-select__chevron { transform: rotate(180deg); }

.lang-select__menu {
  display: block; text-align: left;
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  min-width: 100%; margin: 0; padding: .35rem; list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.lang-select__menu[hidden] { display: none; }

.lang-select__option {
  display: flex; align-items: center; gap: .55rem; margin: 0;
  padding: .5rem .7rem; border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 500; color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
}
.lang-select__option:hover,
.lang-select__option:focus-visible { background: var(--surface-muted); color: var(--text); outline: none; }
.lang-select__option.is-selected { color: var(--brand); font-weight: 700; background: var(--brand-weak); }