/* Shared, compact language choices for the header and focused question screens. */
.language-dialog {position:fixed;inset:auto;margin:0;width:min(268px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:8px;border:1px solid var(--line,#ddd3c7);border-radius:24px;background:var(--paper,#fbf8f2);color:var(--navy,#2a2622);box-shadow:0 14px 40px #2a241f30;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}
.language-dialog::backdrop {background:#222a2412}
.language-choices {display:grid;gap:5px;direction:ltr}
.language-choice {display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 12px;border:1px solid transparent;border-radius:17px;background:transparent;color:var(--navy);font:inherit;line-height:1.4;text-align:start;cursor:pointer;box-shadow:none;white-space:normal;transition:background .12s,border-color .12s}
.language-choice:hover {background:var(--soft,#f4e8da)}
.language-choice[aria-pressed=true] {background:var(--accent-soft,#f4e8da);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.language-choice:focus-visible {outline:2px solid var(--accent);outline-offset:-2px}
.language-tile {position:relative;display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:13px;background:var(--paper);border:1px solid var(--line);font-size:25px;line-height:1;overflow:hidden;isolation:isolate}
.language-choice-name {flex:1;min-width:0;font-size:17px;font-weight:600;text-align:start;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}
.arabic-language-tile {font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;font-size:13px;font-weight:700;direction:rtl}
.arabic-language-tile::before {content:"";position:absolute;inset:1px;z-index:-1;background:var(--accent);opacity:.3;mask:url("assets/middle-east-map.svg") center/contain no-repeat;-webkit-mask:url("assets/middle-east-map.svg") center/contain no-repeat}
.language-selected-check {display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--paper);opacity:0}
.language-selected-check svg {width:16px;height:16px}
.language-choice[aria-pressed=true] .language-selected-check {opacity:1}
.header-language[aria-expanded=true],.question-language[aria-expanded=true] {background:var(--accent-soft);border-color:var(--accent)}
button.question-language {font-family:inherit}
@media(prefers-reduced-motion:reduce) {.language-choice {transition:none}}