/* The app's first-launch language step, in the landing's semantic tokens. It
   shares the appearance step's brand, heading and action styles. */
/* Held until the reader's words are in place; language.js releases it on a deadline. */
html.language-pending body { visibility: hidden; }
.language-setup[hidden] { display: none; }
.lumi-intro[data-opening-step="language"] > .night-backdrop { display: none; }
.lumi-intro[data-opening-step="language"] { max-width: 100vw; }
/* The app's layout: a header, a list that scrolls on its own, and Continue held beneath
   it. Seven rows are taller than a phone, and the way forward must not scroll away. */
.language-setup { height: 100svh; display: grid; grid-template-rows: minmax(0,1fr); place-items: center; padding: max(1.5rem,env(safe-area-inset-top)) 1.25rem max(1.5rem,env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 50% 40%,var(--surface-soft),transparent 70%),var(--cream); }
.language-content { width: min(100%,38rem); min-width: 0; max-height: 100%; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto minmax(0,1fr) auto; justify-items: center; gap: 1.4rem; text-align: center; }
.language-mascot { display: block; }
.language-mascot img { display: block; width: clamp(5.5rem,20svh,11rem); height: auto; }
/* The noninteractive title receives initial dialog focus, not a control ring. */
#language-title:focus { outline: none; }
.appearance-heading > #language-description { max-width: 27rem; color: var(--ink-2); font-size: 1rem; line-height: 1.6; text-wrap: balance; }
/* The inset keeps a row's focus ring and selected edge clear of the scroll clip, and the
   fade is exactly as deep as the inset: rows at rest are untouched, scrolled ones soften. */
.language-options { -webkit-mask-image: linear-gradient(to bottom,transparent,#000 .45rem,#000 calc(100% - .45rem),transparent); mask-image: linear-gradient(to bottom,transparent,#000 .45rem,#000 calc(100% - .45rem),transparent); width: 100%; min-width: 0; min-height: 0; max-height: 100%; margin: 0; padding: .45rem; scroll-padding-block: .45rem; border: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr)); align-content: start; gap: .6rem; text-align: left; }
.language-options legend, .language-option > input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.language-option { position: relative; min-width: 0; cursor: pointer; }
.language-card { display: flex; align-items: center; gap: .85rem; min-height: 3.5rem; padding: .7rem 1rem; border: 2px solid var(--line); border-radius: 1rem; background: var(--surface-raised); }
.language-option > input:checked + .language-card { border-color: var(--purple-brand); box-shadow: 0 0 0 1px var(--purple-brand); }
.language-option > input:focus-visible + .language-card { outline: 3px solid var(--purple-brand); outline-offset: 4px; }
/* Flags are decorative; each row's accessible name spells out its region. */
.language-flag { width: 2rem; height: 1.5rem; flex-shrink: 0; border-radius: .2rem; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.language-name { flex: 1; min-width: 0; display: grid; gap: .1rem; font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.language-name small { font-size: .75rem; font-weight: 400; color: var(--ink-2); }
.language-check { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; flex-shrink: 0; border-radius: 50%; background: var(--purple-brand); color: var(--cream); font-size: .8rem; visibility: hidden; }
.language-option > input:checked + .language-card .language-check { visibility: visible; }

/* A translated heading keeps its source's line breaks but not its line lengths, and a
   longer line would wrap to leave one orphaned word. Balancing splits it evenly instead.
   English is left exactly as it was designed. */
html:not(:lang(en)) :is(h1,h2,h3,h4):is([data-i18n],[data-i18n-html]) { text-wrap: balance; }

/* The page's own language control reopens the step. */
.language-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.9rem; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: 3rem; background: var(--surface-raised); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 500; letter-spacing: .02em; cursor: pointer; }
.language-toggle[hidden], .site-footer [data-language-toggle][hidden] { display: none; }
.language-toggle:hover { background: var(--surface-soft); }
.language-toggle svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.site-footer [data-language-toggle] { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; cursor: pointer; }
.site-footer [data-language-toggle]:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .language-card { transition: border-color .2s ease,box-shadow .2s ease; }
  .language-toggle { transition: background-color .2s ease; }
}
@media (max-width: 54em) {
  .language-toggle { min-width: 2.8rem; min-height: 2.8rem; padding: .65rem; }
  .language-toggle-label { display: none; }
}
@media (max-width: 37em) {
  .language-content { gap: 1.1rem; }
  .language-options { gap: .5rem; }
  .language-card { min-height: 3.1rem; padding: .55rem .85rem; }
}
@media (max-width: 20em) {
  .language-setup { padding-inline: 1rem; }
}