/* The language menu (js/lang.js), and what each script asks of the page's type.

   The button sits in the nav beside Join the list: a globe and the language in its own name, or
   its two letters where the nav is narrow. The list is a real list of links. On a phone it rises
   from the foot of the screen as a sheet, in reach of the thumb that opened it; wider, it drops
   from the button as a card on the page's raised grey. Either way it stands on --raise-2 with the
   page's hairline, as every object on the ground does. */
.nav-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.lang { position: relative; }
.lang-button {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px 0 11px;
  border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer;
  font: 500 14px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--hair-2);
  transition: background 0.2s, box-shadow 0.2s;
}
.lang-button:hover, .lang-button[aria-expanded="true"] { background: color-mix(in oklab, currentColor 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 30%, transparent); }
.lang-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lang-globe { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: 0.8; }
.lang-code { display: none; font: 500 12.5px/1 var(--mono); letter-spacing: 0.04em; }

.lang-menu {
  position: fixed; z-index: 70; width: min(620px, calc(100vw - 2 * var(--gutter)));
  max-height: min(70vh, 640px); overflow: auto; overscroll-behavior: contain;
  padding: 14px; border-radius: 18px; background: var(--raise-2);
  box-shadow: 0 0 0 1px var(--hair-2), 0 30px 80px -20px rgba(0, 0, 0, 0.75);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.18s, transform 0.25s var(--ease);
}
.lang-menu.shown { opacity: 1; transform: none; }
.lang-title { margin: 2px 8px 10px; font: 500 12px/1.4 var(--mono); letter-spacing: 0.02em; color: var(--fg-3); }
.lang-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.lang-list a {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 10px;
  font: 500 15px/1.25 var(--sans); color: var(--fg); transition: background 0.15s;
}
.lang-list a span { font: 400 12.5px/1.3 var(--sans); color: var(--fg-3); }
.lang-list a:hover, .lang-list a:focus-visible { background: color-mix(in oklab, var(--snow) 7%, transparent); outline: none; }
/* The language the page is in: the one blue on the card, as the app marks what is chosen. */
.lang-list a[aria-current] { background: color-mix(in oklab, var(--blue) 16%, transparent); }
.lang-list a[aria-current]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); margin-top: 3px; }
.lang-scrim { position: fixed; inset: 0; z-index: 69; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.2s; }
.lang-scrim.shown { opacity: 1; }

@media (max-width: 900px) {
  .lang-now { display: none; }
  .lang-code { display: inline; }
  .lang-button { padding: 0 11px 0 10px; gap: 6px; }
}
/* A phone: the sheet from the foot, two columns, and the page behind it holds still. */
@media (max-width: 640px) {
  .lang-menu {
    inset: auto 0 0 0 !important; width: 100%; max-height: 78dvh; border-radius: 22px 22px 0 0;
    padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(24px);
  }
  .lang-menu::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px; margin: 2px auto 12px; background: var(--hair-2); }
  .lang-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang-list a { padding: 11px 10px; }
  html.lang-open, html.lang-open body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .lang-menu, .lang-scrim { transition: none; } }

/* ── Scripts ──
   The page's headlines are set tight for Latin (-0.045em, lines at 0.96), which suits no other
   script: Arabic's letters join and must never be pulled apart, Devanagari's and Bengali's marks
   stand above and below the line and would be cut off, CJK and Thai read cramped. Each script gets
   its own tracking and spacing; its face comes from the page's head (tools/i18n/build.mjs). */
[data-script] h1, [data-script] h2, [data-script] h3, [data-script] .brand { letter-spacing: 0; }
[data-script="cjk"] h1, [data-script="cjk"] h2 { line-height: 1.14; }
[data-script="indic"] h1, [data-script="indic"] h2 { line-height: 1.3; }
[data-script="indic"] body { line-height: 1.7; }
[data-script="thai"] h1, [data-script="thai"] h2 { line-height: 1.3; }
[data-script="arabic"] h1, [data-script="arabic"] h2 { line-height: 1.3; }
[data-script="arabic"] body { line-height: 1.75; }
/* Nastaliq, the hand Urdu is read in, falls steeply along the line and needs twice the room. */
[data-script="nastaliq"] h1, [data-script="nastaliq"] h2 { line-height: 1.9; }
[data-script="nastaliq"] body { line-height: 2.1; }
/* Vietnamese stacks two marks on a letter; at 0.96 they touch the line above. */
html[lang="vi"] h1, html[lang="vi"] h2 { line-height: 1.1; }
/* A long compound (German, Finnish, Hungarian, Dutch) can outgrow a phone's width in a headline:
   it breaks where the language hyphenates it rather than running off the screen. */
@media (max-width: 640px) {
  html:not([lang="en"]) h1, html:not([lang="en"]) h2 { hyphens: auto; overflow-wrap: break-word; }
  /* The breaks in a headline were set where the English turns; a translation turns elsewhere, and
     on a phone a kept break plus the wrap around it left lines of one word. The phone balances the
     lines itself, and js/fit.js steps a headline down that still runs long. */
  html:not([lang="en"]) h2 br { display: none; }
  /* A headline sized to its words (the studies' fit-content) had its English breaks to keep it
     narrow; without them it would run as one line off the screen. */
  html:not([lang="en"]) h1, html:not([lang="en"]) h2 { max-width: calc(100vw - var(--gutter) * 2); }
}

/* ── Right to left ──
   Arabic and Urdu pages read right to left. The app's window, its islands and the drawings stay as
   the app shows them, left to right in English, since that is the app a reader will open. */
[dir="rtl"] .app-stage, [dir="rtl"] .history-view, [dir="rtl"] .ask-art, [dir="rtl"] .make-art,
[dir="rtl"] .hatch-room, [dir="rtl"] .tg-board, [dir="rtl"] .tk-board, [dir="rtl"] .tk-islands,
[dir="rtl"] .board-art, [dir="rtl"] .approval-art, [dir="rtl"] .sheets-art, [dir="rtl"] .cmdline,
[dir="rtl"] .drawn-check, [dir="rtl"] .dive-read, [dir="rtl"] .study-read, [dir="rtl"] .form-read,
[dir="rtl"] [translate="no"], [dir="rtl"] input[type="email"] { direction: ltr; }
[dir="rtl"] .lang-menu { direction: rtl; }

/* ── Longer words ──
   Some languages say "Join the list" in three times the letters. The form's field keeps room for an
   address and the button goes under it when the two no longer share a line; in the nav, js/lang.js
   marks a bar too tight for its button and the button steps out, since the form is on the screen. */
.signup .field { flex-wrap: wrap; }
.signup .field input { flex: 1 1 10em; min-width: 0; }
.signup .field .btn { flex: 1 0 auto; }
.nav.tight .nav-end .btn { display: none; }
/* The headline's measurement is a drawing's figure: it reads left to right on every page. */
[dir="rtl"] .h-dim { direction: ltr; unicode-bidi: isolate; }
/* Japanese breaks a line between any two characters, so a headline can split a word in half;
   where the browser can, it breaks between phrases instead. */
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] .lede { word-break: auto-phrase; }