/* public/assets/css/lang_picker.css -- the landing language picker's styles.
   Markup: landing/_lang_picker.php (nav strip) + landing/_lang_picker_modal.php
   (the popup). Load flag-icons BEFORE this file.

   ── Why this is its own file (2026-09-20, phase 2 of the registration
      translation) ────────────────────────────────────────────────────────────
   These ~100 lines lived in landing_v2.css, which was right while the picker
   only ever appeared on the two landing pages. Phase 2 puts it on eight more --
   the apply forms, verify_email, login_beta, profile_setup and the notices --
   and those pages load no shared stylesheet at all. Pulling all 82 KB of
   landing_v2.css onto a 420px card to style one control would be absurd, and
   writing a second picker would make it the fourth implementation in this
   codebase (app/lang_picker.php, the student shell's inline block, this one).
   landing/_lang.php's own header sets out why that is a trap. One definition,
   ten callers.

   ── The var() fallbacks ─────────────────────────────────────────────────────
   Every rule below is byte-for-byte what landing_v2.css held, EXCEPT that each
   --lv2-* reference now carries a fallback: `var(--lv2-text, #eef1fb)`. A
   var() fallback is used ONLY when the custom property is not set, so on the
   landing pages -- which define all seven on :root -- nothing changes at all.
   On the registration pages, which define none of them, the picker gets the
   landing palette anyway and looks like the control it is a copy of.

   The fallbacks are the landing values as of 2026-09-20. If a token is
   retuned there, it is retuned here too -- but the landing pages will have
   already taken the new value, so a stale fallback only ever affects the
   registration cards.

   ── Scoping ────────────────────────────────────────────────────────────────
   Still `.lv2 .lp-lang-*`, unchanged. Both picker partials wrap themselves in
   a `.lv2` div for exactly this reason (see _lang_picker_modal.php's header on
   why `class="lv2 lp-lang-overlay"` on one element does NOT match), so a page
   that never heard of the landing stylesheet still satisfies the selector.
   Descendant scoping also keeps these rules off the registration cards' own
   .card / .btn / label rules, which share none of these names but would be
   easy to collide with later.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Language picker (2026-09-16) ────────────────────────────────────────────
   A PORT OF THE APP PICKER's styles -- the inline block in
   public/student/partials/header.php:464-525. Sizes, the auto-fill grid and
   the active treatment are carried across so the two pickers look like the
   same control; only the palette is swapped from the shell's literal rgba()
   values to the --lv2-* tokens, so it sits on this page rather than looking
   pasted in.

   Accent is --lv2-accent (#5865f2) rather than the shell's #6366f1. They are
   near-identical blues, and matching the page the control lives on beats
   matching a control the visitor cannot see.
   ─────────────────────────────────────────────────────────────────────────── */
.lv2 .lp-lang-switch {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 6px; row-gap: 4px; flex-shrink: 0;
}

/* Quick-switch chips. opacity .55 at rest, full on hover/active -- the app's
   treatment, so the strip reads as secondary to the nav links beside it. */
.lv2 .lp-lang-quick {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px; border: 2px solid transparent; border-radius: 6px;
  text-decoration: none; opacity: .55; line-height: 1;
}
.lv2 .lp-lang-quick .fi { width: 22px; height: 16px; border-radius: 2px; display: block; flex-shrink: 0; }
.lv2 .lp-lang-abbr {
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--lv2-text, #eef1fb); white-space: nowrap;
}
.lv2 .lp-lang-quick:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.lv2 .lp-lang-quick.is-active {
  opacity: 1; border-color: var(--lv2-accent, #5865f2); background: var(--lv2-accent-dim, rgba(88,101,242,0.15));
}

.lv2 .lp-lang-trigger {
  display: inline-flex; align-items: center; padding: 5px 7px;
  border: 1px solid var(--lv2-border, rgba(255,255,255,0.08)); border-radius: 8px;
  background: rgba(255,255,255,0.04); text-decoration: none;
}
.lv2 .lp-lang-trigger:hover { background: rgba(255,255,255,0.10); border-color: var(--lv2-glass-border, rgba(255,255,255,0.09)); }
.lv2 .lp-lang-caret { font-size: 9px; color: var(--lv2-text-3, #c2cade); }

/* ── The popup ───────────────────────────────────────────────────────────────
   :target, not JavaScript. The app picker hangs this on each shell's existing
   modal chrome and says plainly that inventing overlay/z-index logic is not
   that file's job. These pages have no such chrome, so it is defined here --
   kept to the minimum that does the job, and scoped to .lp-lang-* so it cannot
   reach the page's own overlays (the cookie notice, the beta signup modal).
   ─────────────────────────────────────────────────────────────────────────── */
.lv2 .lp-lang-overlay {
  display: none; position: fixed; inset: 0;
  /* z-index 9600, chosen against this page's actual layer stack rather than
     picked as "a big number". Measured 2026-09-16:
         9999  #lt-qr-modal, #mic-limit-overlay   (task dialogs)
         9500  #cookie-overlay                    (consent notice)
           50  .lv2-nav-wrap                      (sticky nav)
     The first version used 1200 and opened BEHIND the cookie notice -- the
     trigger appeared to do nothing.
     Above the consent notice on purpose: a visitor who cannot read the notice
     needs the language control more than the notice needs to stay on top.
     Below the task dialogs on purpose: if the level-test QR or the mic-limit
     overlay is up, the nav trigger is unreachable anyway, and a language popup
     surfacing over an active task would be the wrong thing to win.
     On the registration cards there is no such stack at all -- nothing else on
     those pages is positioned -- so the number is simply harmless there. */
  z-index: 9600;
  background: rgba(8,11,20,0.72);
  align-items: center; justify-content: center; padding: 12px;
}
.lv2 .lp-lang-overlay:target { display: flex; }

.lv2 .lp-lang-modal {
  width: 100%; max-width: 420px; max-height: 84vh; overflow-y: auto;
  background: var(--lv2-panel, #131a2b); border: 1px solid var(--lv2-border, rgba(255,255,255,0.08));
  border-radius: 16px; padding: 18px 14px 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.lv2 .lp-lang-title {
  font-size: 15px; font-weight: 700; color: var(--lv2-text, #eef1fb);
  margin-bottom: 12px; text-align: center;
}

/* auto-fill, and .lp-lang-name is flex:0 1 auto -- both carried over from the
   app, where a `1fr` grid plus a `flex:1` label manufactured ~120px of dead
   space inside every row and made a full dialog look empty. */
.lv2 .lp-lang-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 5px; max-height: 56vh; overflow-y: auto; margin-bottom: 4px;
}
.lv2 .lp-lang-opt {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px; border-radius: 8px; border: 1px solid transparent;
  text-decoration: none; color: var(--lv2-text-3, #c2cade); font-size: 13px;
}
.lv2 .lp-lang-opt:hover { background: rgba(255,255,255,0.08); color: var(--lv2-text, #eef1fb); }
.lv2 .lp-lang-opt .fi { width: 16px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.lv2 .lp-lang-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv2 .lp-lang-tick { flex: none; color: var(--lv2-accent, #5865f2); font-weight: 700; font-size: 10px; }
.lv2 .lp-lang-opt.is-active {
  background: var(--lv2-accent-dim, rgba(88,101,242,0.15)); border-color: rgba(88,101,242,0.45); color: var(--lv2-text, #eef1fb);
}
.lv2 .lp-lang-code { font-size: 11px; font-weight: 700; color: var(--lv2-text, #eef1fb); padding: 0 4px; }

.lv2 .lp-lang-cancel {
  display: block; width: 100%; margin-top: 10px; padding: 10px 0;
  border-radius: 10px; border: 1px solid var(--lv2-border, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.04); color: var(--lv2-text-3, #c2cade);
  text-align: center; font-size: 13px; text-decoration: none;
}
.lv2 .lp-lang-cancel:hover { background: rgba(255,255,255,0.08); color: var(--lv2-text, #eef1fb); }

/* Wider dialog and roomier cells once there is space -- the app widens to
   640px at desktop for the same reason: 14 rows in one narrow column reads as
   a list to scroll rather than a set to choose from. */
@media (min-width: 721px) {
  .lv2 .lp-lang-modal { max-width: 640px; padding-left: 24px; padding-right: 24px; }
  .lv2 .lp-lang-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}