/* =============================================================================
   TG Access — the language picker, on its own because it is on every shell

   WHY ITS OWN FILE. These rules lived in `tgaccess.css`, which only the PUBLIC
   site loads. The picker was then added to the tenant dashboard, to /admin and
   to three standalone dashboard pages (D-312 follow-up) — six templates, of
   which exactly one loaded the stylesheet. So the button rendered completely
   unstyled everywhere else: 51x21px against a 44px tap-target floor, on
   nineteen pages, which is what `test_dashboard_quality_gates` found. A
   component used by every shell needs a stylesheet every shell links, and
   `tokens.css` is not it — see the theming note below.

   THEMED THROUGH FOUR VARIABLES, not through the public palette. The dashboard
   and /admin each carry their own dark theme in their own namespace
   (`--dash-*`, `--ad-*`) and neither redefines `--surface` or `--line`, so a
   component hardcoding those paints a white menu with a pale border on a dark
   page. Each shell sets these four; the public defaults keep the public site
   byte-identical to what it rendered before this move.
   ========================================================================== */

/* THE DEFAULTS SIT ON `:root`, NOT ON `.langpick`, AND THAT IS LOAD-ORDER SAFETY,
   not style. They were on `.langpick` for one commit and it broke the dark
   dashboard: this file is linked AFTER `dashboard.css`, both rules matched
   `.langpick` with identical specificity, so the later one — the public default
   — won, and `--ink-muted` (#5b6588, never redefined for the dashboard's dark
   theme) landed on `--dash-panel` (#111a3d) at 2.96:1 against a 4.5 floor, on
   nineteen pages in three dark variants.

   A custom property declared ON the element always beats one INHERITED from an
   ancestor, whatever order the files load in. So the shells override with
   `.langpick { ... }` and win by proximity rather than by being lucky about link
   order — which is what the first version was relying on without knowing it. */
:root {
  --langpick-bg:        var(--surface);
  --langpick-line:      var(--line);
  --langpick-ink:       var(--ink);
  --langpick-ink-muted: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
   THE LANGUAGE PICKER

   One globe showing the current code, one menu listing every language in its
   own name. It replaced a row of inline buttons whose labels were decided with
   `'العربية' if code == 'ar' else 'English'` — a two-way choice that rendered
   the header as "English | العربية | English" the day Spanish shipped.

   The menu is a native `[popover]`, so open, close, Escape, click-outside and
   focus return come from the browser. The UA hides a closed popover with
   `[popover]:not(:popover-open) { display: none }`, which is why the open state
   is styled rather than the closed one: in a browser without popover support
   the menu is simply always visible, which is usable, where styling it closed
   would have hidden it permanently.
   --------------------------------------------------------------------------- */
.langpick { position: relative; }

.langpick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 44px of target at every width: this is the only way to another language. */
  min-block-size: 44px;
  padding: 6px 12px;
  border: 1px solid var(--langpick-line);
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  color: var(--langpick-ink-muted);
  cursor: pointer;
}

.langpick-btn:hover { color: var(--langpick-ink); border-color: var(--langpick-ink-muted); }

.langpick-btn:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

.langpick-globe { font-size: 1rem; line-height: 1; }
.langpick-code { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* `position: fixed`, AND `absolute` WAS THE BUG — the whole bug, on every page.
   A native `[popover]` is promoted to the TOP LAYER when it opens, and `position:
   absolute` then resolves against the initial containing block rather than against
   `.langpick { position: relative }`. So `inset-block-start: calc(100% + 6px)` meant
   100% OF THE VIEWPORT: measured live on the public header at 1440x900, the menu
   opened correctly — `:popover-open`, `display: block`, `visibility: visible`, no
   console error — at `top: 906px`, six pixels below the fold. Clicking the globe did
   nothing a reader could see, on the public header, the dashboard, /admin and the
   login pages alike, because they all share this rule.

   Fixed positioning is measured from the viewport too, which is what the top layer
   gives you — so the coordinates are supplied by `langpick.js` from the button's own
   rect. The declarative `popovertarget` still opens and closes it, so Escape,
   click-outside and focus return remain the browser's job; only the placement is
   ours. With no JavaScript the fallback below puts it under the header instead of
   off-screen, and its items are plain `?lang=` links either way. */
.langpick-menu {
  position: fixed;
  /* The no-JS fallback: top-right under a ~64px header, flipped for RTL. Replaced by
     `langpick.js` with the button's real position the moment it opens. */
  inset-block-start: 68px;
  inset-inline-end: 16px;
  inset-inline-start: auto;
  z-index: 60;
  min-inline-size: 11rem;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--langpick-line);
  border-radius: var(--radius-sm);
  background: var(--langpick-bg);
  box-shadow: 0 12px 28px rgba(16, 24, 48, .14);
}

.langpick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 40px;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: .92rem;
  color: var(--langpick-ink);
}

.langpick-item:hover { background: var(--purple-50, rgba(0, 0, 0, .04)); }

.langpick-item:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: -2px;
}

.langpick-item.is-current { font-weight: 700; }

/* A fixed column for the tick, so the names line up whether or not one is
   ticked — a list that shifts sideways as the current language changes reads
   as a different list. */
.langpick-tick {
  inline-size: .9rem;
  flex: 0 0 auto;
  color: var(--green-600);
  text-align: center;
}

/* The drawer's inline version: no popover, no absolute position. */
.langpick-inline { display: grid; gap: 2px; }
.langpick-inline .langpick-item { min-block-size: 44px; }