/* Shared language picker: Ordex utility controls and elevated popover tokens. */
.ordex-language {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--ordex-space-2);
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.ordex-language [hidden],
[data-dashboard-language-home][hidden] { display: none !important; }

.ordex-language__label {
  display: flex;
  flex-direction: column;
  gap: var(--ordex-space-1);
  min-width: 0;
  margin: 0;
}
.ordex-language__label-text {
  color: var(--ordex-ink-muted);
  font-size: 14px;
  font-weight: 500;
}
.ordex-language__select,
.ordex-language__fallback-submit,
.ordex-language__trigger {
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: var(--ordex-space-2) var(--ordex-space-3);
  border: 1px solid var(--ordex-hairline);
  border-radius: var(--ordex-radius-utility);
  background: var(--ordex-surface);
  color: var(--ordex-ink-secondary);
  font-family: var(--ordex-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  touch-action: manipulation;
}
.ordex-language__select { font-size: 16px; border-color: var(--ordex-ink-muted); }
.ordex-language__picker { position: relative; min-width: 0; max-width: 100%; }
.ordex-language__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ordex-space-2);
  white-space: nowrap;
  user-select: none;
}
.ordex-language__flag {
  display: block;
  width: 24px;
  height: 18px;
  flex: 0 0 24px;
  object-fit: contain;
  border-radius: var(--ordex-radius-field);
  user-select: none;
  -webkit-user-drag: none;
}
.ordex-language__chevron,
.ordex-language__check {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--ordex-ink-muted);
  pointer-events: none;
}
.ordex-language__menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + var(--ordex-space-2));
  right: 0;
  width: 272px;
  max-width: calc(100vw - var(--ordex-space-8));
  max-height: min(320px, calc(100dvh - 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ordex-space-2);
  border: 1px solid var(--ordex-hairline);
  border-radius: var(--ordex-radius-large);
  background: var(--ordex-surface);
  box-shadow: var(--ordex-shadow-elevated);
}
.ordex-language__option {
  display: flex;
  align-items: center;
  gap: var(--ordex-space-3);
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: var(--ordex-space-3);
  border: 0;
  border-radius: var(--ordex-radius-utility);
  background: transparent;
  color: var(--ordex-ink-secondary);
  font: 400 15px/1.5 var(--ordex-font);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.ordex-language__option-name { flex: 1; min-width: 0; }
.ordex-language__check { visibility: hidden; }
.ordex-language__option[aria-checked="true"] {
  background: var(--ordex-canvas);
  color: var(--ordex-ink);
  font-weight: 600;
}
.ordex-language__option[aria-checked="true"] .ordex-language__check { visibility: visible; color: var(--ordex-primary); }
.ordex-language__trigger[aria-expanded="true"] { border-color: var(--ordex-ink-muted); }
.ordex-language__trigger:active,
.ordex-language__option:active,
.ordex-language__fallback-submit:active { background: var(--ordex-canvas); }
.ordex-language__select:focus-visible,
.ordex-language__fallback-submit:focus-visible,
.ordex-language__trigger:focus-visible,
.ordex-language__option:focus-visible { outline: 2px solid var(--ordex-primary-focus); outline-offset: 2px; }
.ordex-language__trigger:disabled { cursor: wait; color: var(--ordex-ink-muted); }

.ordex-language--compact .ordex-language__label-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ordex-language--full,
.ordex-language--full .ordex-language__label,
.ordex-language--full .ordex-language__picker,
.ordex-language--full .ordex-language__trigger { width: 100%; }
.ordex-language--full .ordex-language__trigger { justify-content: flex-start; }
.ordex-language--full .ordex-language__current-name { flex: 1; text-align: left; }
.ordex-language--full .ordex-language__menu { left: 0; right: auto; max-width: 100%; }
.ordex-language--constrained .ordex-language__menu {
  position: fixed;
  top: 72px;
  right: var(--ordex-space-4);
  left: auto;
  max-width: calc(100vw - var(--ordex-space-8));
}

.site-nav__inner > .ordex-language { margin-left: auto; }
.site-nav__inner > .ordex-language + .site-nav__access { margin-left: 0; }
.invite-header { justify-content: space-between; gap: var(--ordex-space-3); }
.header-actions > .ordex-language { flex: 0 0 auto; }
.public-main > .ordex-language { display: flex; width: fit-content; margin: 0 0 var(--ordex-space-4) auto; }
.dashboard-language-home { margin-left: auto; flex: 0 0 auto; }
.topbar-right { flex: 0 0 auto; gap: var(--ordex-space-3); }
.settings-language {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ordex-space-4);
  overflow: visible;
}
.settings-language .card-title { margin: 0; }
.settings-language > .ordex-language { width: 272px; }
.settings-language .ordex-language__menu { z-index: 2350; }
.mobile-header:focus-within { z-index: 2350; }

@media (max-width: 1023px) {
  .ordex-language--compact .ordex-language__current-name { display: none; }
}
@media (max-width: 600px) {
  .site-nav__inner { gap: var(--ordex-space-2); }
  .ordex-language--compact .ordex-language__chevron { display: none; }
  .ordex-language--compact .ordex-language__trigger { width: 44px; padding: var(--ordex-space-2); }
  .settings-language { align-items: stretch; flex-direction: column; }
  .settings-language > .ordex-language { width: 100%; }
  .ordex-language__option { font-size: 16px; }
}
@media (max-width: 359px) {
  .site-nav__inner > .site-nav__access { padding-inline: var(--ordex-space-2); }
}
@media (forced-colors: active) {
  .ordex-language__trigger,
  .ordex-language__select,
  .ordex-language__menu { border-color: ButtonText; }
  .ordex-language__option[aria-checked="true"] { outline: 1px solid Highlight; outline-offset: -1px; }
  .ordex-language__check { color: ButtonText; }
}