/* Header controls replicated from the warranty repo (public/header-ui.css).
   Only change: thumb moves when the LAST segment is active (no hardcoded "kz"), so EN/RU works.
   - Theme toggle: the 💡 bulb from workon (lit = light theme, greyed = dark theme).
   - Language switch: segmented pill with a sliding red thumb (same motion as workon's type toggle).
   Uses each page's tokens: --brand --border --card --muted --ink. */

/* ---------- Theme toggle (workon bulb) ----------
   Bare bulb — no frame, no hover box, no rotation. Hover feedback only where a real
   pointer exists (touch browsers keep :hover "stuck" after a tap). */
.toggle{
  width:44px; height:44px; padding:0; margin:0;
  border:0; background:transparent; box-shadow:none; border-radius:0;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  outline:none;
}
.toggle:focus-visible .bulb{ outline:2px solid var(--brand); outline-offset:6px; border-radius:8px; }
.toggle .bulb{
  font-size:22px; line-height:1; display:inline-block;
  filter:saturate(1.1) brightness(1.02);
  /* no filter/opacity transition: a half-finished state must never be able to stick */
  transition:transform .12s ease;
}
html[data-theme="dark"] .toggle .bulb{ filter:grayscale(.85); opacity:.58; }
.toggle:active .bulb{ transform:scale(.88); }
@media (hover:hover){
  html[data-theme="light"] .toggle:hover .bulb{ filter:saturate(1.3) brightness(1.08); }
  html[data-theme="dark"] .toggle:hover .bulb{ opacity:.85; }
}

/* ---------- Language switch: sliding thumb ---------- */
.pill.lang-toggle{
  position:relative; isolation:isolate;
  display:inline-grid; grid-template-columns:1fr 1fr;
  height:40px; padding:3px; gap:0;
  border:1px solid var(--border); border-radius:999px;
  background:var(--card); overflow:visible;
  cursor:pointer;
}
.pill.lang-toggle .pill-thumb{
  position:absolute; z-index:0; top:3px; bottom:3px; left:3px;
  width:calc((100% - 6px) / 2);
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 2px 8px rgba(213,12,31,.35);
  transition:transform .24s cubic-bezier(.4,0,.2,1);
}
.pill.lang-toggle:has(.langBtn:last-of-type.active) .pill-thumb{ transform:translateX(100%); }
.pill.lang-toggle .langBtn{
  position:relative; z-index:1;
  min-width:48px; height:100%; padding:0 14px;
  border:0; border-radius:999px;
  background:transparent !important; box-shadow:none !important;
  color:var(--muted);
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.5px; line-height:1;
  cursor:pointer;
  transition:color .2s ease;
}
.pill.lang-toggle .langBtn:hover{ color:var(--ink); }
.pill.lang-toggle .langBtn.active{ color:#fff; }
.pill.lang-toggle .langBtn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
/* Browsers without :has(): no thumb, so paint the active segment directly. */
@supports not selector(:has(*)){
  .pill.lang-toggle .pill-thumb{ display:none; }
  .pill.lang-toggle .langBtn.active{ background:var(--brand) !important; }
}
@media (prefers-reduced-motion: reduce){
  .pill.lang-toggle .pill-thumb, .toggle .bulb, .pill.lang-toggle .langBtn{ transition:none; }
}

/* Logo: dark-lettering artwork on light theme, white-lettering artwork on dark theme. */
.logo{ height:30px; width:auto; aspect-ratio:5.2 / 1; max-width:160px; flex:0 0 auto; display:block; object-fit:contain; background:none; padding:0; border-radius:0; }
@media(max-width:420px){ .logo{ height:24px; } }
.logo-dark{ display:none; }
html[data-theme="dark"] .logo-light{ display:none; }
html[data-theme="dark"] .logo-dark{ display:block; }

/* Never let iOS Safari inflate text (it did in the wide model suggestion list). */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }