/* ---- Languages (src/I18n.php, assets/i18n.js): the switchers and the note on translated legal pages ---- */

/* Shell footer: the eight languages, each in its own words; plain links, so they work without JavaScript. */
.lang-switch { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line, rgba(242, 238, 223, .2)); font: 14px/1.4 system-ui, sans-serif; }
.lang-switch-mark { color: var(--red, #ef4b3f); font: 400 18px/1 "Yu Mincho", "MS Mincho", serif; }
.safety-footer .lang-switch a { display: inline-flex; align-items: center; min-height: 44px; color: #c9c5b9; text-decoration: none; }
.safety-footer .lang-switch a:hover { color: var(--paper, #f2eedf); text-decoration: underline; text-decoration-color: var(--red, #ef4b3f); }
.safety-footer .lang-switch a[aria-current] { color: var(--paper, #f2eedf); font-weight: 700; text-decoration: underline; text-decoration-color: var(--red, #ef4b3f); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lang-switch a:focus-visible { outline: 2px solid var(--red, #ef4b3f); outline-offset: 2px; }

/* A grid of the eight names: the profile menu panel and Notebook → Settings. */
.lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.lang-option { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 1px solid #c9c4b4; color: var(--ink, #121212); background: transparent; font: 16px/1.2 Georgia, serif; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s; }
.lang-option::before { content: ''; flex: none; width: 10px; height: 10px; border: 1.5px solid #8d887c; border-radius: 50%; transition: background-color .2s, border-color .2s; }
.lang-option:hover { border-color: var(--ink, #121212); }
.lang-option[aria-pressed="true"] { border-color: var(--red, #ef4b3f); background: rgba(239, 75, 63, .07); }
.lang-option[aria-pressed="true"]::before { border-color: var(--red, #ef4b3f); background: var(--red, #ef4b3f); box-shadow: inset 0 0 0 2px var(--paper, #f2eedf); }
.lang-option:focus-visible { outline: 2px solid var(--red, #ef4b3f); outline-offset: 2px; }
.lang-option[aria-busy="true"] { opacity: .6; }

/* Profile menu: the row unfolds the grid, like the install hint. */
.pm-lang { margin: 0 8px 8px 60px; }
.pm-lang .lang-grid { gap: 4px; }
.pm-lang .lang-option { min-height: 44px; font-size: 15px; }

/* Notebook → Settings */
.nb-lang h2 { margin-top: 18px; font: 400 26px/1.1 Georgia, serif; letter-spacing: -.02em; }
.nb-lang p { margin: 10px 0 16px; color: #55514a; font: 15px/1.6 Arial, sans-serif; }

/* Information pages (src/pages/layout.php): footer column and the note above a translated or English-only text. */
.pg-lang .lang-switch { justify-content: flex-start; margin: 0; padding: 0; border: 0; font: 15px/1.3 var(--sans, system-ui, sans-serif); gap: 0 16px; }
.pg-lang .lang-switch-mark { display: none; }
.pg-lang .lang-switch a { display: inline-flex; align-items: center; min-height: 44px; color: #d8d4c8; text-decoration: none; }
.pg-lang .lang-switch a:hover, .pg-lang .lang-switch a[aria-current] { color: var(--paper, #f2eedf); text-decoration: underline; text-decoration-color: var(--red, #ef4b3f); text-underline-offset: 5px; }
.pg-lang-note { display: flex; gap: 14px; align-items: flex-start; max-width: 760px; margin: 22px 0 0; padding: 12px 16px; border-left: 3px solid var(--red, #ef4b3f); color: #d8d4c8; background: rgba(242, 238, 223, .06); font: 14px/1.55 var(--sans, system-ui, sans-serif); }
.pg-lang-note b { flex: none; color: var(--red, #ef4b3f); font: 400 20px/1.1 var(--kanji, "Yu Mincho", serif); }
.pg-lang-note a { color: var(--paper, #f2eedf); text-decoration-color: var(--red, #ef4b3f); text-underline-offset: 3px; }

/* Japanese: no letter-spacing tricks meant for Latin capitals, and lines break between phrases. */
:lang(ja) .section-label, :lang(ja) .kicker, :lang(ja) .pg-kicker, :lang(ja) .pm-who small { letter-spacing: .04em; }
html:lang(ja) body { line-break: strict; }

@media (prefers-reduced-motion: reduce) {
    .lang-option, .lang-option::before { transition: none; }
}