/* The language picker: a quiet dialog instead of the browser's own dropdown. Behaviour: lang-modal.js (loaded after nav.js).
   One title, one list. Each language is a single line in its own script; the one you are reading is a cream row with a check.
   Desktop: a small night card that lands with the nav's spring. Phone (<= 560px): a bottom sheet with a grabber you can pull down.
   Motion tokens: motion-tokens.css. */

/* ───────── the chip in the nav: once the script has taken over, the real <select> stays in the DOM (i18n.js keeps it in sync) but out of sight ───────── */
.lang.is-modal select { display: none; }
.lang-hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
.lang.is-modal:focus-within { outline: none; }
.lang.is-modal:has(.lang-hit:focus-visible) { outline: 2px solid #a9c6e8; outline-offset: 2px; }
.lang.is-modal:has(.lang-hit[aria-expanded="true"]) { background: rgba(216, 216, 203, 0.16); border-color: rgba(216, 216, 203, 0.4); }
.lang.is-modal svg { transition: transform var(--mx-spring-stamp-ms) var(--mx-spring-stamp); }
.lang.is-modal:active svg { transform: scale(0.88) rotate(-12deg); }
@media (hover: hover) { .lang.is-modal:hover svg { transform: rotate(24deg); } }

/* ───────── the dialog ───────── */
html.lm-lock { overflow: hidden; padding-right: var(--lm-sbw, 0px); }
.lm { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; visibility: hidden; pointer-events: none; color: #d8d8cb;
  transition: visibility 0s linear var(--mx-dur-base); }
.lm.on { visibility: visible; pointer-events: auto; transition: visibility 0s; }

.lm-scrim { position: absolute; inset: 0; background: rgba(2, 12, 24, 0.5); opacity: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity var(--mx-dur-base) var(--mx-takeoff); }
.lm.on .lm-scrim { opacity: 1; transition: opacity var(--mx-dur-base) var(--mx-glide); }

.lm-panel { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; border-radius: 28px;
  background: #041122; border: 1px solid rgba(216, 216, 203, 0.1);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.7), 0 4px 20px rgba(0, 0, 0, 0.25);
  opacity: 0; transform: translateY(20px) scale(0.97); transform-origin: 50% 45%;
  transition: opacity var(--mx-dur-quick) var(--mx-takeoff), transform var(--mx-dur-base) var(--mx-takeoff); }
.lm.on .lm-panel { opacity: 1; transform: none; transition: opacity var(--mx-dur-base) var(--mx-glide), transform var(--mx-spring-land-ms) var(--mx-spring-land); }
.lm-panel.drag { transition: none; }
.lm-grab { display: none; }

.lm-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 16px 8px 28px; }
.lm-head h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: rgba(216, 216, 203, 0.7); }
.lm-x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: rgba(216, 216, 203, 0.7); background: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform var(--mx-spring-stamp-ms) var(--mx-spring-stamp); }
.lm-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.lm-x:hover { background: rgba(216, 216, 203, 0.1); color: #d8d8cb; }
.lm-x:active { transform: scale(var(--mx-stamp-down)); }
.lm-x:focus-visible, .lm-opt:focus-visible { outline: 2px solid #d8d8cb; outline-offset: -2px; }

.lm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 20px; scrollbar-width: thin; scrollbar-color: rgba(216, 216, 203, 0.25) transparent; }
.lm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }

/* every language is a radio button and one line: its name, in its own script */
.lm-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 0 16px; border: 0; border-radius: 16px; text-align: left; cursor: pointer; font: inherit; color: #d8d8cb; background: none; -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: translateY(8px);
  transition: background-color 0.16s ease, color 0.16s ease, transform var(--mx-spring-stamp-ms) var(--mx-spring-stamp), opacity var(--mx-dur-quick) ease; }
.lm.on .lm-opt { opacity: 1; transform: none;
  transition: background-color 0.16s ease, color 0.16s ease, opacity var(--mx-dur-base) var(--mx-glide) calc(var(--i) * 22ms + 70ms), transform var(--mx-spring-land-ms) var(--mx-spring-land) calc(var(--i) * 22ms + 70ms); }
.lm.on .lm-opt.go { transition-delay: 0s; }
.lm-name { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; }
@media (hover: hover) { .lm-opt:hover { background: rgba(216, 216, 203, 0.08); } }
.lm.on .lm-opt:active { transform: scale(0.97); transition: transform var(--mx-stamp-down-ms) ease; }

/* the one you are reading, and the one you just picked: a cream row with a check (the page reloads right after) */
.lm-opt[aria-checked="true"], .lm-opt.go { background: #d8d8cb; color: #041122; cursor: default; }
.lm-opt .lm-tick { flex: none; width: 18px; height: 18px; fill: none; stroke: #041122; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.4); }
.lm-opt[aria-checked="true"] .lm-tick { opacity: 1; transform: none; }
.lm.on .lm-opt.go .lm-tick, .lm.on .lm-opt[aria-checked="true"] .lm-tick { animation: lm-pop var(--mx-spring-stamp-ms) var(--mx-spring-stamp) 0.2s backwards; }
.lm-opt.go { cursor: default; }
@keyframes lm-pop { from { transform: scale(0.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* ───────── phone: a bottom sheet ───────── */
@media (max-width: 560px) {
  .lm { place-items: end center; padding: 0; }
  .lm-panel { width: 100%; max-height: min(88dvh, 640px); border-radius: 28px 28px 0 0; border-bottom: 0; transform: translateY(100%) scale(1); transform-origin: 50% 100%; touch-action: none; }
  .lm.on .lm-panel { transform: none; }
  .lm-grab { display: block; flex: none; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: rgba(216, 216, 203, 0.25); }
  .lm-head { padding: 12px 12px 4px 22px; }
  .lm-body { padding: 2px 10px calc(18px + env(safe-area-inset-bottom)); touch-action: pan-y; }
  .lm-grid { gap: 2px 4px; }
  .lm-opt { min-height: 52px; padding: 0 14px; }
  .lm-name { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-panel, .lm-opt, .lm-scrim { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .lm-panel { transform: none; }
  .lm-opt .lm-tick { animation: none !important; }
}