/* =========================================================
   ZAR AI v2 — SCOPED RESET

   Production deviation from the sandbox mockup: the sandbox's own
   reset.css used bare `button { padding: 0 }` / `img, svg { ... }`
   selectors because the whole sandbox PAGE was the mockup. In
   production, index.php already has its own global reset/base
   styles for the rest of the homepage, and this file must never
   touch anything outside ZAR v2's own DOM. Every rule below is
   scoped under `.zar-v2` for exactly that reason — in particular
   the `.zar-v2 button { padding: 0 }` rule, which exists because
   the browser's own default <button> padding was found (live, in
   the approved sandbox) to silently distort the canonical ZAR
   logo's sizing inside the launcher and compact header; scoping it
   to `.zar-v2` fixes that for ZAR v2 without changing any other
   button on the page.

   2026-09 UI HARDENING FIX: every selector below that resets an
   element ZAR v2 also styles by class (button, svg, img) uses
   `:where(.zar-v2)` rather than a bare `.zar-v2` class selector.
   `:where()` always contributes ZERO specificity, so e.g.
   `:where(.zar-v2) button` has the specificity of a bare `button`
   element selector (0,0,1) — lower than ANY single component
   class like `.zar-v2-model__trigger` (0,1,0). Before this fix,
   `.zar-v2 button`/`.zar-v2 svg` (0,1,1 — class + element) actually
   OUTRANKED single-class component rules regardless of source
   order, which was silently zeroing out the model pill's
   padding/border/background, the theme toggle's sun/moon
   display:none rule (both icons rendered at once), and the orb's
   own background/border — confirmed live via computed-style
   inspection before this fix, not guessed. box-sizing/list/form
   resets don't have this competing-component-class problem (no
   component redeclares them) so they're left as plain `.zar-v2`
   selectors for clarity.
========================================================= */

.zar-v2, .zar-v2 *, .zar-v2 *::before, .zar-v2 *::after {
  box-sizing: border-box;
}

:where(.zar-v2) img, :where(.zar-v2) svg {
  display: block;
  max-width: 100%;
}

:where(.zar-v2) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.zar-v2 input,
.zar-v2 textarea,
.zar-v2 select {
  font: inherit;
  color: inherit;
}

.zar-v2 ul,
.zar-v2 ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (prefers-reduced-motion: reduce) {
  .zar-v2, .zar-v2 *, .zar-v2 *::before, .zar-v2 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}