/* =========================================================
   GlobeWarn — lang.css

   The page already styles the language control and its menu (.lang__btn,
   .lang__menu). This adds only what a list of thirty-two needs that a list
   of one did not: a height limit with its own scroll, room for the endonym
   beside the name, and the one-line note at the top.

   Nothing here restyles the control itself, so the header keeps its look.
   ========================================================= */

.lang__menu {
  max-height: min(22rem, 60svh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-width: 15rem;
}

.lang__menu [role="option"] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
}

.lang__menu [role="option"]:focus-visible {
  outline: 2px solid var(--accent, #D9480F);
  outline-offset: -2px;
}

.lang__name { flex: 0 1 auto; }

.lang__endonym {
  flex: 0 1 auto;
  font-size: 0.86rem;
  color: var(--text-dim, #55606d);
  text-align: end;
  unicode-bidi: isolate;      /* keeps Arabic and Urdu the right way round */
}

.lang__note {
  padding: 0.5rem 0.7rem;
  margin: 0 0 0.25rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-dim, #55606d);
  border-bottom: 1px solid var(--line, #c9d2dc);
  cursor: default;
}