/* ═══════════════════════════════════════════════════════════════════════════
   BILINGUAL SHELL — the language switcher, and the wrapping guards that keep
   the Ledger theme intact when its labels are Malayalam.

   ★ TOKENS ONLY. There is no hex colour and no px length in this file: every
     value is a var() from theme/tokens.css, exactly as in every other file
     under web/css. The keyword properties (overflow-wrap, text-wrap) carry no
     measurement, so they introduce no untokenised value.

   ── WHAT WAS ACTUALLY MEASURED ──────────────────────────────────────────────

   All eight pages were rendered in both languages and loaded in Chromium at
   1920x1080 and 390x844 — the two viewports UX_SPEC.md names — and every
   element in every one of those thirty-two documents was measured for
   horizontal overflow, for clipping, and for text inked outside its own box.

   The shell held. There was NO page-level horizontal scroll at either width in
   either language, no element escaping the viewport, and no element clipping
   its own text. The topbar and the page head came out the SAME HEIGHT in both
   languages on every page; the document as a whole grew between 0% and 17%
   in Malayalam, inside the ~30% budget UX_SPEC.md §0.4 asked the layout to
   absorb. Malayalam's taller glyph stacks did not spill: --lh-body and
   --lh-snug already leave the room they need, and --lh-flat is used only on
   the star row, which is punctuation.

   EXACTLY ONE defect was found, and the first rule below is its fix. Nothing
   else in this file changes a measurement — the rest is the switcher, which is
   new markup and therefore had no styles at all.

   Two families of apparent findings were ruled out as by-design, because they
   measure identically in English: `.sr` (visually-hidden text, clipped to a
   one-pixel box on purpose) and `.stars .fg` (the gold star overlay, whose whole
   mechanism is a clipped width — see web/css/fill.css and the D4 note in
   render/funcs.go).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE ONE MEASURED FIX ────────────────────────────────────────────────────
   The narrow viewport (390 wide) · home · the dashboard stat captions.

   Malayalam builds long agglutinated words: "scheduled or ongoing" becomes
   "ഷെഡ്യൂൾ ചെയ്തതോ നടന്നുകൊണ്ടിരിക്കുന്നതോ", whose last word is a single
   unbroken run wider than a stat card's column once .stats drops to two
   columns on a phone. With no space to break at, the browser let it run 15.8
   CSS pixels past the card's right edge, over the neighbouring card's rule.

   The guard is the one this codebase already uses for the same problem in a
   different place (`.kv dd`, css/layout.css): allow a break inside the word
   when there is no other option. `min-width:0` is what lets a grid item
   actually shrink to its column — without it a grid child's automatic minimum
   size is its longest word, and the wrap never gets a chance to apply.

   It is NOT scoped to :lang(ml). A long unbroken run is a property of the
   content, not of the language: a Kerala institution name or an uploaded
   filename can do the same thing in English, and a fix that only defends one
   language leaves the other one broken for the same reason. */
.stat{min-width:0}
.stat .k,
.stat .x{overflow-wrap:break-word}

/* The same guard for the other slots that carry free prose in a narrow box:
   card key/value pairs, empty-state captions, table primary cells and the
   comment body. All of these can receive either a translated sentence or an
   operator-typed name, and neither has a length limit. */
.empty p,
.empty .sub,
.tcard-facts .v,
.cmt-body,
.pane .nm{overflow-wrap:break-word;min-width:0}

/* ── The language switcher ───────────────────────────────────────────────────

   A row of submit buttons — one per language, the current one inert — styled
   to sit beside the theme switch without competing with it. It reuses the
   .iconbtn palette so the two controls read as one pair of preferences rather
   than as a control and an afterthought.

   Each option renders in its own script (മലയാളം, English), so --font-ui has to
   resolve to something that can draw Malayalam. It does: the stack ends in
   system-ui, and every platform this runs on ships a Malayalam face that
   fontconfig substitutes for the missing glyphs. Nothing is fetched — §0.3
   forbids a remote font, and this file adds none. */
.langform{display:flex;margin:var(--sp-0)}

.langgroup{
  display:flex;align-items:stretch;
  border:var(--bw-1) solid var(--rule-strong);
  background:var(--paper-3);
}

.langopt{
  appearance:none;background:transparent;border:0;cursor:pointer;
  display:flex;align-items:center;
  padding:var(--sp-0) var(--sp-3);
  min-height:var(--sz-input);
  color:var(--ink-3);
  font-family:var(--font-ui);
  font-size:var(--fs-0);
  font-weight:var(--fw-med);
  letter-spacing:var(--track-wide);
  /* Malayalam is never uppercased: the script has no case, and
     text-transform:uppercase on it is a no-op that would still change the
     English half of this control. Both halves stay as written. */
  text-transform:none;
  /* --lh-snug, not --lh-flat: മലയാളം stacks a vowel sign above the baseline
     and the switcher is the one place a Malayalam word sits in a short
     control. --lh-flat would crop the top of the ാ. */
  line-height:var(--lh-snug);
  white-space:nowrap;
  text-decoration:none;
}
.langopt + .langopt{border-left:var(--bw-1) solid var(--rule-strong)}
.langopt:hover{color:var(--accent);background:var(--paper-hi)}

/* The current language is not a button — there is nothing to submit — so it is
   a plain span, marked as current and given the ink weight that says "this is
   what you are reading". */
.langopt.is-current{
  color:var(--ink);
  background:var(--paper-2);
  font-weight:var(--fw-bold);
  cursor:default;
}

/* /login has no topbar to hang the switcher off, and it is the page that most
   needs one: somebody who cannot read the sign-in form has to be able to
   change the language before they can sign in. It floats in the corner, above
   the sheet, still inside the normal flow at phone width so it can never cover
   the form. */
.langfloat{
  display:flex;justify-content:flex-end;
  padding:var(--sp-4) var(--sp-5) var(--sp-0);
}

/* 640px is the breakpoint at which layout.css already reflows .topbar-right to
   full width and components.css drops .stats to two columns. The switcher
   follows the shell rather than introducing a breakpoint of its own — a fourth
   distinct width would be a fourth thing to keep in step. */
@media (max-width:640px){
  /* The topbar already wraps rather than overflows (D1b). At phone width the
     switcher joins the theme control on the second row; shrinking its padding
     keeps that row to one line beside the user chip. */
  .langopt{padding:var(--sp-0) var(--sp-2)}
  .langfloat{padding:var(--sp-3) var(--sp-4) var(--sp-0)}
}