/* Language picker, machine-translation boxes and the one-time notice (script: i18n.js).
   The tokens used here (--accent, --accent-soft, --body, --paper, …) are mapped onto the site's in app.css. */
.lang-pick {position: relative; flex: none;}
/* sized like the header's other buttons (.icon-btn: 36px, radius 10, --line-2 border) */
.lang-btn {display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; font: 600 0.9rem/1 var(--body); cursor: pointer;}
.lang-btn:hover {border-color: var(--accent);}
.lang-btn.is-on {border-color: var(--accent); background: var(--accent-soft);}
.lang-flag, .lang-opt img {width: 22px; height: 16px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12); flex: none;}
/* line-height above 1: overflow: hidden (for the ellipsis) would otherwise clip the descenders of "g", "p", "ñ" */
.lang-name {max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; padding-block: 1px;}
.lang-caret {flex: none; color: var(--muted);}
.lang-btn[aria-expanded="true"] .lang-caret {transform: rotate(180deg);}
.lang-dd {position: absolute; z-index: 35; top: calc(100% + 8px); right: 0; width: 300px; display: grid; gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgb(15 23 42 / 0.2);}
.lang-dd[hidden] {display: none;}
.lang-search {width: 100%; min-height: 42px; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font: 400 1rem/1.2 var(--body);}
.lang-search:focus {outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent);}
.lang-list {list-style: none; margin: 0; padding: 0; max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;}
.lang-list li[hidden] {display: none;}
.lang-opt {width: 100%; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; color: var(--ink); background: transparent; border: 0; border-radius: 8px; font: 400 0.95rem/1.2 var(--body); text-align: left; cursor: pointer;}
.lang-opt span {flex: 1; min-width: 0;}
.lang-opt small {font: 600 0.7rem/1 var(--mono); letter-spacing: 0.06em; color: var(--muted);}
.lang-opt:hover {background: var(--accent-soft);}
/* keyboard focus must be visible, and different from "selected" */
.lang-opt:focus-visible {outline: 2px solid var(--focus); outline-offset: -2px;}
.lang-opt[aria-selected="true"] {background: var(--accent-soft); color: var(--accent); font-weight: 700;}
.lang-opt[aria-selected="true"] small {color: var(--accent);}
.lang-note {margin: 0; padding: 2px 4px 0; font-size: 0.78rem; line-height: 1.4; color: var(--muted);}
/* up to 960px the header also holds the top nav: flag only, so the row never overflows */
@media (max-width: 960px) {
  .lang-name {display: none;}
  .lang-btn {padding: 0 9px; gap: 6px;}
}
@media (max-width: 760px) {
  /* the site header (backdrop-filter) is the containing block of this fixed panel: place it just under the header */
  .lang-dd {position: fixed; top: calc(100% + 6px); left: 12px; right: 12px; width: auto;}
  /* phones: the language is chosen from the header's Menu ("Language: …"), which opens this same panel */
  .lang-btn {display: none;}
  .lang-list {max-height: min(62vh, 480px);}
}
.translation-box {display: block; margin: 0.35em 0 0.9em; padding: 0.5em 0.85em; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; color: var(--ink); font: 400 0.93rem/1.55 var(--body); letter-spacing: normal; text-transform: none; text-align: start; overflow-wrap: anywhere;}
.translation-box[dir="rtl"] {border-left: 0; border-right: 3px solid var(--accent); border-radius: 8px 0 0 8px;}
.translation-box.is-loading {color: var(--muted); font-style: italic;}
.translation-box .katex {font-size: 1.05em;}
.translation-box img {max-height: 3em; width: auto; vertical-align: middle;}
.translation-box .katex-display {display: inline; margin: 0;}
.translation-box .katex-display > .katex {display: inline;}
.translation-box.tr-in {margin: 0.45em 0 0.1em; font-size: 0.88rem; padding: 0.4em 0.7em;}
h1 + .translation-box {font-size: 1.05rem; font-weight: 600; max-width: 40rem;}
h2 + .translation-box, h3 + .translation-box {font-weight: 600;}
.lead + .translation-box {max-width: 40rem;}
.choice .translation-box {background: transparent; padding: 0.15em 0 0.15em 0.6em; margin: 0.35em 0 0; font-weight: 400;}
.choice .translation-box[dir="rtl"] {padding: 0.15em 0.6em 0.15em 0;}
.q-feedback .translation-box {background: var(--surface);}
.faq summary .translation-box {font-weight: 400;}
.tr-notice {background: var(--accent-soft); border-bottom: 1px solid var(--line); color: var(--ink); font-size: 0.86rem; line-height: 1.45;}
.tr-notice[hidden] {display: none;}
.tr-notice .wrap {display: flex; align-items: center; gap: 12px; padding-block: 8px;}
.tr-notice p {margin: 0; flex: 1; min-width: 0; display: grid; gap: 2px;}
.tr-notice-en {font-weight: 600;}
.tr-notice-t:empty {display: none;}
.tr-notice-x {flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; font-size: 0.9rem;}
.tr-notice-x:hover {border-color: var(--accent); color: var(--accent);}
/* with JavaScript the picker replaces the plain English / Español link */
.js .head-tools > .chip[hreflang] {display: none;}