/* ============================================================================
   LANGUAGE PICKER -- i18n_picker() / i18n_lang_links() in backend/lib/i18n.php.

   One small sheet linked by every page that shows the picker. It borrows the
   host page's colours (app.css tokens, or the landing's --g-* through the
   --xl-* hooks below) and falls back to plain values on a page with neither.
   ========================================================================= */

.xf-lang {
    --xl-bg:   var(--g-card, var(--bg-panel, #fff));
    --xl-line: var(--g-line, var(--border, #e2e8f0));
    --xl-ink:  var(--g-ink, var(--text, #0f172a));
    --xl-ink2: var(--g-ink-2, var(--text-dim, #475569));
    --xl-acc:  var(--g-pri, var(--accent, #2563eb));
    --xl-soft: var(--g-pri-soft, var(--accent-soft, rgba(37, 99, 235, .1)));
    position: relative; display: inline-block; flex: none;
    font-size: 12.5px; line-height: 1.2;
}
.xf-lang > summary {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 10px;
    border-radius: 9px; border: 1px solid var(--xl-line); background: var(--xl-bg);
    color: var(--xl-ink2); font-weight: 700; white-space: nowrap; cursor: pointer;
    list-style: none; user-select: none; transition: color .2s, border-color .2s;
}
.xf-lang > summary::-webkit-details-marker { display: none; }
.xf-lang > summary::marker { content: ""; }
.xf-lang > summary:hover, .xf-lang[open] > summary { color: var(--xl-acc); border-color: var(--xl-acc); }
.xf-lang > summary:focus-visible { outline: 2px solid var(--xl-acc); outline-offset: 2px; }
.xf-lang-chev { transition: transform .2s; }
.xf-lang[open] .xf-lang-chev { transform: rotate(180deg); }

.xf-lang-menu {
    position: absolute; z-index: 1000; inset-inline-end: 0; top: calc(100% + 6px);
    display: grid; gap: 2px; min-width: 176px; padding: 6px;
    border-radius: 12px; border: 1px solid var(--xl-line); background: var(--xl-bg);
    box-shadow: 0 18px 44px -14px rgba(2, 8, 23, .45);
}
.xf-lang.up .xf-lang-menu { top: auto; bottom: calc(100% + 6px); }
.xf-lang.start .xf-lang-menu { inset-inline-end: auto; inset-inline-start: 0; }
.xf-lang-menu a, .xf-langs a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px; border-radius: 8px; text-decoration: none;
    color: var(--xl-ink, var(--text, #0f172a)); font-size: 13px; font-weight: 700;
}
.xf-lang-menu a:hover, .xf-langs a:hover { background: var(--xl-soft, rgba(37, 99, 235, .1)); }
.xf-lang-menu a[aria-current="true"], .xf-langs a[aria-current="true"] { background: var(--xl-acc, #2563eb); color: #fff; }
.xf-lang-menu small, .xf-langs small { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; opacity: .65; }

/* the flat form: a grid of the six, for a menu or a footer */
.xf-langs {
    --xl-ink:  var(--g-ink, var(--text, #0f172a));
    --xl-acc:  var(--g-pri, var(--accent, #2563eb));
    --xl-soft: var(--g-pri-soft, var(--accent-soft, rgba(37, 99, 235, .1)));
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
}
.xf-langs a { padding: 7px 9px; font-size: 12.5px; border: 1px solid transparent; }
.xf-langs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* inside the tool's settings menu (app.php) */
.menu-langrow { padding: 8px 8px 10px; border-block-end: 1px solid var(--border, #e2e8f0); }
.menu-langrow .xf-langs a { padding: 6px 8px; }

/* FONTS PER SCRIPT. Yekan Bakh is a Persian face: its Latin side has no
   accented letters, so in Spanish, French and Turkish every é ñ ğ ş ı İ œ fell
   back to Times New Roman in the middle of a word (measured in Chrome).
   Those three use the system's own UI face instead, which has them all;
   Persian, Arabic and English keep Yekan Bakh. Every stylesheet reads the
   face from --sans (app.css) or --g-sans (site.css), so this is the one place. */
html:lang(es), html:lang(fr), html:lang(tr) {
    --sans:   "LatinNum", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --g-sans: "LatinNum", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}
html:lang(es) body, html:lang(fr) body, html:lang(tr) body {
    font-family: "LatinNum", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* a two-letter form of the picker, for strips with no room for the name */
.xf-lang-code { display: none; }