/* locale.css: the Japanese and Arabic layer (.claude/plans/site-v2/03-build/i18n-plan.md §3, §4).
   Linked from <head> on every /ja and /ar page, and on every page once a second locale is live
   (the language switcher's styles); every rule below is scoped to a locale, so English renders the same.
   Measured by .claude/plans/site-v2/03-build/scripts/i18n-shot.js (Firefox + Chromium, 8 sizes). */

/* ── scenes keep their geometry (§3.1 "the room is a photograph") ──
   Scene roots carry dir="ltr" in the markup (i18n.Scene); anything marked data-physical gets the
   same here, so FLIP, the single-transform scenes and the station keep measuring what they built.
   Text written on the room's paper and glass sets dir="rtl" itself (i18n.Sheet, i18n.Output). */
html[dir="rtl"] [data-physical] { direction: ltr; }

/* ── [TBD] and other code tokens never reorder inside right-to-left text (§3.3) ── */
.tbd,
.sb-unc,
.sx-unc,
.sx-tape-tbd,
.cx-chalk-tbd,
.cx-ch-tbd,
bdi {
  unicode-bidi: isolate;
  direction: ltr;
}

/* ── fonts (§4): system stacks only, no downloads. Family names checked 2026-10-10 against Microsoft's
   Windows 11 font list (learn.microsoft.com/typography/fonts/windows_11_font_list) and Apple's system
   font list (developer.apple.com/fonts/system-fonts). Latin keeps the house mono: the Latin monos come
   first (a face is picked per character), the script's faces after them.
   ja: Hiragino Sans (macOS/iOS system), BIZ UDGothic / Meiryo (Windows Japanese supplemental fonts),
   Yu Gothic (Windows, always), Noto Sans CJK JP (Linux, Android), MS Gothic (Windows, always; fixed
   pitch). Naming a JP face stops a lang-less fallback from picking Chinese or Korean glyph forms.
   ar: the Latin monos without Arabic glyphs first (Liberation Mono for Linux), then Geeza Pro
   (macOS/iOS system), Segoe UI and Tahoma (Windows, always), Noto Sans/Naskh Arabic (Linux, Android);
   Cascadia Mono and DejaVu Sans Mono carry a monospaced Arabic, so they come after the Arabic faces. */
html:lang(ja) {
  --font-term: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", "Noto Sans Mono",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDGothic", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans CJK JP", "Noto Sans JP", "MS Gothic", monospace;
  /* Klee (macOS, a download) and UD Digi Kyokasho (Windows Japanese supplemental) are the handwritten
     hands; without them the round Hiragino Maru Gothic, then the sans */
  --font-marker: "Marker Felt", "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", "Comic Neue",
    "Klee", "UD Digi Kyokasho N-R", "UD Digi Kyokasho", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans CJK JP", cursive;
}
html:lang(ar) {
  --font-term: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono",
    "Geeza Pro", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, "Cascadia Mono", "DejaVu Sans Mono", monospace;
  /* no system Arabic hand is reliable: the Arabic sans, the sticky's tilt does the rest */
  --font-marker: "Marker Felt", "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", "Comic Neue",
    "Geeza Pro", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, cursive;
}

/* ── type (§3.4) ──
   --fs-floor is the smallest size text may take: every font-size in the site CSS that can go under it
   is written max(var(--fs-floor, 0px), size), so English (no floor) is unchanged. Arabic labels under
   13px and Japanese under 12px do not read. */
html:lang(ar) { --fs-floor: 13px; }
html:lang(ja) {
  --fs-floor: 12px;
  line-break: strict;          /* no line starts with a small kana, ー or closing punctuation */
  overflow-wrap: break-word;
}

/* Tracking breaks Arabic joining and spreads kana apart; neither script has an italic. Latin brand marks,
   wordmarks (Wahori's italic), codes and numbers keep their tracking and style. */
html:is(:lang(ar), :lang(ja)) body *:not(.hdr-word, .hdr-brand, .crt-badge, .cs-unit-badge, .sx-badge, .sb-badge, .cs-disk-w, .cs-poster-w,
  .dk-osd, .sb-osd, .sb-bay-n, .tape-n, .lc-num, .cs-tag-n, .cs-st-n, .cs-act-n, .sx-tape-n, .sx-paper-n, .sx-c-n, .sx-n, .sx-ru-k, .sb-mi-n, .sb-di-n,
  .cx-logo, .cx-bk-no, .cx-sec, .sx-band-c, .sb-band-c, .tbd, .sb-unc, .sx-unc, .sx-tape-tbd, .cx-chalk-tbd, .sb-q-code, kbd, time, bdi,
  .sx-flag-name, .sx-wm-n, .sx-h1, .sx-h1-n, .cs-bar-h, .cs-wide, .cs-row-n, .cs-bay-path, .cs-arch-i, .ph-dim, .lc-tn, .lc-name, .lc-slip-t, .lc-stamp,
  .sb-h1, .sb-mark-sub, .sb-bay-path, .sb-bay-dim, .sb-k-read, .sb-u-hash, .crew-cta-go, #crew-h) {
  letter-spacing: 0 !important;
}
html:is(:lang(ar), :lang(ja)) body *:not(.hdr-word, .hdr-brand, .crt-badge, .cs-unit-badge, .sx-badge, .sb-badge, .cs-disk-w, .cs-poster-w,
  .dk-osd, .sb-osd, .sb-bay-n, .tape-n, .lc-num, .cs-tag-n, .cs-st-n, .cs-act-n, .sx-tape-n, .sx-paper-n, .sx-c-n, .sx-n, .sx-ru-k, .sb-mi-n, .sb-di-n,
  .cx-logo, .cx-bk-no, .cx-sec, .sx-band-c, .sb-band-c, .tbd, .sb-unc, .sx-unc, .sx-tape-tbd, .cx-chalk-tbd, .sb-q-code, kbd, time, bdi,
  .sx-flag-name, .sx-wm-n, .sx-h1, .sx-h1-n, .cs-bar-h, .cs-wide, .cs-row-n, .cs-bay-path, .cs-arch-i, .ph-dim, .lc-tn, .lc-name, .lc-slip-t, .lc-stamp,
  .sb-h1, .sb-mark-sub, .sb-bay-path, .sb-bay-dim, .sb-k-read, .sb-u-hash, .crew-cta-go, #crew-h) {
  font-style: normal !important;
}
/* the Latin-only marks above keep their own size too: the floor is for script text */
html:is(:lang(ar), :lang(ja)) :is(.hdr-word, .crt-badge, .cs-unit-badge, .sx-badge, .sb-badge, .cs-disk-w, .cs-poster-w, .dk-osd, .sb-osd, .sb-bay-n,
  .tape-n, .lc-num, .cs-tag-n, .cs-st-n, .cs-act-n, .sx-tape-n, .sx-paper-n, .sx-c-n, .sx-n, .sx-ru-k, .sb-mi-n, .sb-di-n, .cx-logo, .cx-bk-no, .cx-sec, kbd,
  .sx-flag, .sx-flag-name, .sx-flag-n, .sx-wm-n, .cs-wide, .cs-row-n, .cs-arch-i, .lc-tn, .sb-bay-path, .sb-bay-dim, .sb-k-read, .sb-u-hash) {
  --fs-floor: 0px;
}

/* Japanese headings and short labels: no line left holding one character (Chromium and Firefox
   balance up to a few lines; longer text wraps as usual). Paragraphs: "pretty" where supported.
   Not word-break: auto-phrase: it is Chromium-only and keeps "Wahoriサイト" in one phrase, which then
   breaks inside at the edge. */
html:lang(ja) body :is(h1, h2, h3, h4, h5, h6, dt, dd, th, td, figcaption, li, a, b, span, label, button) { text-wrap-style: balance; }
html:lang(ja) body p { text-wrap-style: pretty; }
@supports not (text-wrap-style: pretty) {
  html:lang(ja) body p { text-wrap-style: balance; }   /* Firefox: balance (it stops at a few lines) */
}
/* two-word labels beside a value break at a space, never between two kanji */
html:lang(ja) [data-sandbox="project"] :is(.sb-for-k, .sb-spk-k, .sb-q-fk, .sb-stamp-k) { word-break: keep-all; }
/* a CJK label can break after any character, so a flex row squeezes it to one per line: labels
   beside a value keep their width */
html:lang(ja) .cs-colo dt { flex: none; }

/* ── right-to-left details (§3.3, §3.4) ── */
/* a sheet or output line inside an LTR scene aligns to its own start: without this it would inherit
   "left" from the scene (li elements resolve the UA's match-parent against their LTR parent). Zero
   specificity, so any alignment the site sets still wins. */
:where(html[dir="rtl"] [dir="rtl"]) { text-align: start; }
/* a date or time is a code: "2026-07-15" after Arabic letters would turn into Arabic numbers and read
   15-07-2026; plaintext takes its direction from its own first letter (a translated date stays RTL) */
html[dir="rtl"] time { unicode-bidi: plaintext; }
/* code is code: paths, commands and keys read left to right wherever they sit */
html[dir="rtl"] :is(code, samp) { unicode-bidi: isolate; direction: ltr; }
/* Arabic's taller line boxes: the sticky's category line sits clear of its title */
html:lang(ar) .lc-tcat { margin-bottom: .35em; }
/* a Sandbox chart flag keeps its English size (its number and name are Latin, and the flags fit their
   stair); the Arabic rest of an unnamed project's flag still gets the floor */
html:lang(ar) .sx-flag-rest { font-size: 13px; }
/* the clipboard's case rows: under a wide fallback Arabic face the status stamp takes two lines rather
   than let the case's name (its longest word) run under it */
html:is(:lang(ar), :lang(ja)) .dk-case { grid-template-columns: 3ch minmax(min-content, 1fr) auto; }
html:is(:lang(ar), :lang(ja)) .dk-case .dk-case-s { white-space: normal; text-align: center; }
/* Japanese on the crew page: a 7-character stat label fits its cell at 12px instead of leaving one kana */
html:lang(ja) .lc .lc-stats dt { font-size: 12px; }
html:lang(ja) .hero-deck { text-wrap-style: balance; }
/* a sheet's arrows point the way the text reads (glossary §6.5); list markers sit at the start */
html[dir="rtl"] .lc [dir="rtl"] .lc-strengths li::before { content: "◂"; }
@media (min-width: 761px) { html[dir="rtl"] .cs-scroll[dir="rtl"] .cs-arch-l li:not(:last-child)::after { content: "←"; } }   /* a phone stacks them: ↓ */
html[dir="rtl"] .cs-scroll[dir="rtl"] .cs-flow li:not(:last-child)::after { content: "‹"; }

/* the hero's pull log on a small phone: a translated layer name and "Pull complete" are wider than the
   English, so the log drops its hex ids (decoration) and keeps the layer and its bar (English keeps
   its 13ch id column) */
@media (max-width: 400px) {
  html:is(:lang(ar), :lang(ja)) .pull-log { grid-template-columns: minmax(0, 1fr) 0 0 max-content; }
  html:is(:lang(ar), :lang(ja)) .pull-id { display: none; }
}

/* the Sandbox learning register: Arabic and Japanese questions need more than the wide ledger's
   question column on a mid glass (1024px), so the ledger takes its narrow layout (sandbox.css,
   sbg <= 700px) up to a 1000px glass; a "still open" may wrap */
@container sbg (min-width: 701px) and (max-width: 1000px) {
  html:is(:lang(ar), :lang(ja)) [data-sandbox="project"] .sb-reg-hd { display: none; }
  html:is(:lang(ar), :lang(ja)) [data-sandbox="project"] .sb-q { grid-template-columns: minmax(0, 1fr) minmax(60px, 34%); row-gap: 8px; padding: 14px 4px; }
  html:is(:lang(ar), :lang(ja)) [data-sandbox="project"] .sb-q-code { grid-column: 1; grid-row: 1; align-self: center; }
  html:is(:lang(ar), :lang(ja)) [data-sandbox="project"] .sb-q-sig { grid-column: 2; grid-row: 1; height: 24px; }
  html:is(:lang(ar), :lang(ja)) [data-sandbox="project"] .sb-q-t { grid-column: 1 / -1; }
  html:is(:lang(ar), :lang(ja)) [data-sandbox="project"] .sb-q-r { grid-column: 1 / -1; padding-inline-start: 0; border-inline-start: 0; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 6px 14px; }
}
html:is(:lang(ar), :lang(ja)) [data-sandbox="project"] .sb-q-still { white-space: normal; }
/* the idle stage on a phone glass: the translated text box takes two lines, so the stage is square
   (not 4:3) and the box stays clear of the art's label */
@container sbg (max-width: 480px) {
  html:is(:lang(ar), :lang(ja)) [data-sandbox="project"] .sb-stage-idle { aspect-ratio: 1 / 1; }
}
/* the rail folded into a row of words: its keys' 6px padding, not the English 8px pull, at the edge */
@container sbg (max-width: 899px) {
  html:is(:lang(ar), :lang(ja)) [data-sandbox="project"] .sb-dock { margin-inline-start: -6px; }
}
/* the register's column heads are short words: they break at spaces, not between characters */
html:lang(ja) [data-sandbox="project"] .sb-reg-hd span { word-break: keep-all; }

/* ── the language switcher (common.LangSwitch / LangNames), in the header's nav type ── */
.lang-switch {
  display: flex;
  gap: 4px;
  flex: none;
}
.lang-switch a {
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid var(--color-phosphor-faint);
  color: var(--color-phosphor);
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.lang-switch a:hover {
  background: rgba(166, 245, 154, .1);
  color: var(--color-phosphor-hi);
}
.lang-switch a[aria-current] {
  background: rgba(166, 245, 154, .12);
  color: var(--color-amber);
}
.lang-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5ch;
}
.lang-names a[aria-current] { color: var(--color-amber); }

@media (max-width: 760px) {
  .lang-switch { gap: 2px; }
  .lang-switch a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding: 0 5px;
    font-size: 12px;
  }
}
@media (max-width: 360px) {
  /* a 320px phone (308px with a classic scrollbar) holds the brand, the four sections and the chips */
  .lang-switch { gap: 0; }
  .lang-switch a { padding: 0 3px; }
}