/* The Site language chooser (design "FluentPlex Interface Languages"): a globe and the code in headers, a full row
   in the phone menu, links in footers, a row in the account menu, cards on Profile. Colors follow the site's theme. */
.site-lang { position: relative; }
.site-lang__button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.site-lang__button:hover { border-color: var(--ink); }
.site-lang__button[aria-expanded="true"] { border: 1.5px solid var(--ink); background: var(--card); outline: 3px solid color-mix(in srgb, var(--ink) 25%, transparent); outline-offset: 2px; }
.site-lang__button .icon { width: 18px; height: 18px; }
.site-lang__code { letter-spacing: .5px; font-family: var(--font-sans); }
.site-lang__caret { font-size: 11px; }
.site-lang__button[aria-expanded="true"] .site-lang__caret { transform: rotate(180deg); }
.site-lang__panel { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 30; width: 220px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 24px 48px -20px rgba(23, 24, 43, .45); }
.site-lang__panel[hidden] { display: none; }
.site-lang__label { padding: 8px 10px 6px; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.site-lang__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-lang__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px;
  border-radius: 10px; color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none; }
.site-lang__option:hover { background: var(--sand); color: var(--ink); text-decoration: none; }
.site-lang__option[aria-current="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); font-weight: 700; }
.site-lang__tick { color: var(--green); font-weight: 700; }
.site-lang__note { border-top: 1px solid var(--line); margin-top: 4px; padding: 10px 10px 6px; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.site-lang__name--ar { font-family: var(--font-ui-arabic); }

/* In the phone menu: the last item, labelled in words, opening in place. */
.site-lang--phone .site-lang__button { width: 100%; border-radius: 14px; min-height: 52px; font-size: 16px; text-align: start; background: var(--card); }
.site-lang--phone .site-lang__stack { flex: 1; display: flex; flex-direction: column; font-weight: 600; }
.site-lang--phone .site-lang__eyebrow { font-size: 12px; color: var(--text-muted); }
.site-lang--phone .site-lang__panel { position: static; width: auto; margin-top: 8px; box-shadow: none; border-color: var(--line); border-radius: 14px; }
.site-lang--phone .site-lang__option { min-height: 48px; font-size: 17px; }

/* On the sign-in panel (dark): opens upward. */
.site-lang--dark { align-self: flex-start; margin-top: auto; }
.site-lang--dark .site-lang__button { color: #fff; border-color: rgba(255, 255, 255, .3); font-size: 14px; }
.site-lang--dark .site-lang__button[aria-expanded="true"] { background: rgba(255, 255, 255, .08); border-color: #fff; }
.site-lang--dark .site-lang__panel { top: auto; bottom: calc(100% + 10px); inset-inline-end: auto; inset-inline-start: 0; color: var(--ink); }

/* In a footer: all five as links. */
.site-lang-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.site-lang-links__label { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 4px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.site-lang-links__label .icon { width: 16px; height: 16px; }
.site-lang-links__option { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.site-lang-links__option:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.site-lang-links__option[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }

/* The site in Arabic: its headings in a Kufi face need room above and below, and no tightened letters. */
:root { --font-ui-arabic: "IBM Plex Sans Arabic", system-ui, sans-serif; }
html[data-site="ar"] { --font-ui-arabic: "Readex Pro", system-ui, sans-serif; }
html[lang="ar"] :is(h1, h2, h3, .page-title, .serif) { letter-spacing: 0; line-height: 1.5; }

/* On Profile (design 3b): a radio group of five cards, each name in its own script. */
.site-lang-setting { display: flex; flex-direction: column; gap: 16px; }
.site-lang-setting__title { display: flex; align-items: center; gap: 10px; }
.site-lang-setting__lead { margin: 4px 0 0; color: var(--text-body); }
.site-lang-setting__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.site-lang-setting__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 76px; padding: 14px;
  border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.site-lang-setting__card:has(:checked) { border: 2px solid var(--ink); padding: 13px; }
.site-lang-setting__card:has(:focus-visible) { outline: 3px solid color-mix(in srgb, var(--ink) 30%, transparent); outline-offset: 3px; }
.site-lang-setting__radio { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.site-lang-setting__name { font-size: 17px; font-weight: 500; }
.site-lang-setting__card:has(:checked) .site-lang-setting__name { font-weight: 700; }
.site-lang-setting__info { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--sand); font-size: 14px; line-height: 1.5; }
.site-lang-setting__i { font-weight: 700; color: var(--ink); }
.site-lang-setting__learning { font-weight: 700; }
.site-lang-setting__saved { margin: 0; font-size: 13px; font-weight: 600; color: var(--green); }
.site-lang-setting__save { display: none; } /* choosing saves; the button is for browsers without scripts */
@media (scripting: none) { .site-lang-setting__save { display: inline-flex; } }

/* In the account menu (design 3a): a row that opens its five choices in place as menu radio items. */
.site-lang--account .site-lang__row { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: start; }
.site-lang--account .site-lang__row[aria-expanded="true"] { background: var(--sand); }
.site-lang__row-current { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; }
.site-lang__group { list-style: none; margin: 0 0 4px; padding: 4px 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 2px; }
.site-lang__group[hidden] { display: none; }
.site-lang__radio { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px;
  border-radius: 10px; color: var(--ink); font-size: 15px; text-decoration: none; }
.site-lang__radio:hover { background: var(--sand); color: var(--ink); text-decoration: none; }
.site-lang__radio[aria-checked="true"] { font-weight: 700; background: var(--sand); }

/* "EN · Meanings in English" (shared/_meanings_en): dictionary meanings stay English in other site languages. */
.meanings-en { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 2px 10px; border-radius: 999px;
  background: var(--sand); color: var(--ink); font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.6; }
.meanings-en__code { font-weight: 700; color: var(--green); }
.meanings-en__note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }

/* The site in Arabic: English stored with the content (dictionary meanings, glosses, translations) lays itself out
   left to right from its first letter, so its punctuation lands at the right end; it stays at the interface's side. */
html[dir="rtl"] :is([class$="-en"], [class*="-en "], [class$="__en"], [class*="__en "], .dict__meaning, .tconj__meaning,
  .reader__entry-meaning, .tdict__result, .pub__gloss, .pub__result-gloss, .pub__root-meaning) { unicode-bidi: plaintext; }

/* Addresses and passwords are typed left to right in any language; in Arabic they sit at the form's right edge. */
html[dir="rtl"] input:is([type="email"], [type="password"], [type="url"], [type="tel"]) { direction: ltr; text-align: right; }