/* ============================================================
 * Gopnik Wallet — Cross-Browser Compatibility Layer
 *  (2026-06-06)
 *
 * Loaded LAST from base.html so its fallbacks win the cascade.
 * Targets the rendering deltas observed in Edge (Chromium) and
 * provides graceful degradation for older / restricted engines:
 *
 *   §1  color-scheme — stops Edge/Chrome auto-darkening form
 *       controls + scrollbars with wrong colors on the dark UI
 *   §2  Glass / transparency fallbacks — when backdrop-filter is
 *       unavailable (Edge with GPU acceleration disabled, strict
 *       enterprise policies, older engines) glass surfaces fall
 *       back to near-opaque solids instead of unreadable
 *       see-through cards
 *   §3  color-mix() fallbacks — solid defaults for engines
 *       pre-Chromium 111 / Safari 16.2
 *   §4  Cross-document view transitions — CSS-native, input-safe
 *       replacement for the removed JS interceptor
 *   §5  Form-input zoom guard (iOS) + text-size-adjust
 *   §6  Scrollbar normalisation (Firefox + WebKit/Blink)
 *   §7  Forced-colors / high-contrast mode (Windows HCM via Edge)
 * ============================================================ */


/* ─── §1  COLOR-SCHEME ───────────────────────────────────────── */
/* Without this, Edge renders form controls, scrollbars and the
   "auto dark" heuristic against a LIGHT scheme assumption — the
   number-one cause of "some colors are displayed wrong in Edge"
   on dark-theme sites.  Declaring the scheme makes native widgets
   (selects, date pickers, scrollbars, autofill) match the theme. */
:root {
  color-scheme: dark;
}
html.light-theme,
body.light-theme {
  color-scheme: light;
}

/* Edge/Chrome autofill paints inputs pale yellow/white which looks
   broken on glass cards.  Repaint the autofill layer in-theme. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #f0f1ff;
  -webkit-box-shadow: 0 0 0 1000px rgba(13, 13, 34, 0.95) inset;
  caret-color: #f0f1ff;
  transition: background-color 99999s ease-out;  /* defer repaint */
}


/* ─── §2  GLASS / TRANSPARENCY FALLBACKS ─────────────────────── */
/* backdrop-filter is supported by modern Edge, BUT it silently
   no-ops when hardware acceleration is off (common on corporate /
   battery-saver setups) and on older engines.  When the blur is
   missing, a `rgba(…, 0.5)` glass card over busy content becomes
   an unreadable transparent rectangle — exactly the "cards and
   transparent things are displayed wrong" symptom.  These
   fallbacks keep the same design language with near-opaque
   surfaces whenever the blur cannot run. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card,
  .gn-card,
  .card.glass,
  .gn-hero-card,
  .gn-business-card,
  .dropdown-menu,
  .partners-menu,
  .modal-content {
    background-color: rgba(13, 13, 34, 0.97) !important;
    border-color: rgba(var(--gn-accent-rgb), 0.35) !important;
  }
  .glass-nav,
  .navbar.glass-nav,
  .gn-mobile-header[data-scrolled] {
    background-color: rgba(7, 7, 20, 0.97) !important;
  }
  .mobile-bottom-nav {
    background: rgba(7, 7, 20, 0.97) !important;
    border-top-color: rgba(var(--gn-accent-rgb), 0.3) !important;
  }
  .gn-drawer-backdrop {
    background: rgba(7, 7, 20, 0.82) !important;
  }
  .gn-celebrate {
    background: rgba(7, 7, 20, 0.95) !important;
  }
  .cosmic-toast,
  .toast {
    background-color: rgba(13, 13, 34, 0.97) !important;
  }
  /* Light theme equivalents */
  html.light-theme .glass-card,
  html.light-theme .gn-card,
  html.light-theme .dropdown-menu,
  html.light-theme .modal-content {
    background-color: rgba(250, 250, 255, 0.98) !important;
  }
}


/* ─── §3  color-mix() FALLBACKS ──────────────────────────────── */
/* volume-v2.css, demo-*.css lean on color-mix() for borders and
   tints.  Engines without it drop the whole declaration, leaving
   transparent borders / invisible separators.  Give those
   surfaces sane solid defaults that the modern declaration
   overrides where supported. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .vb2-card, .vb2-panel, .vb2-stat,
  .demo-card, .demo-panel, .demo-stage,
  [class*="vb2-"], [class*="demo-"] {
    border-color: rgba(var(--gn-accent-rgb), 0.28);
  }
  .vb2-card, .vb2-panel,
  .demo-card, .demo-panel {
    background-color: rgba(13, 13, 34, 0.92);
  }
}


/* ─── §4  CROSS-DOCUMENT VIEW TRANSITIONS (input-safe) ───────── */
/* Replaces the removed JS startViewTransition() link interceptor,
   which blocked all input behind a full-screen snapshot during
   navigation.  The CSS-native mechanism animates between
   same-origin page loads asynchronously — scroll and taps keep
   working, and engines without support simply ignore it. */
/* Desktop only: the snapshot the browser holds during the
   transition swallows touch input while the next page loads, so
   touch devices navigate without it. */
@media (hover: hover) and (pointer: fine) {
  @view-transition {
    navigation: auto;
  }
  /* Keep the cross-fade quick so slow pages never feel held back. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 180ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}


/* ─── §5  INPUT ZOOM GUARD + TEXT SIZE ───────────────────────── */
/* iOS Safari zooms the page when a focused input's font-size is
   under 16 px — a frequent "mobile feels broken" report.  Also
   stop Edge/Chrome on Android inflating text unpredictably. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (max-width: 991.98px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="tel"],
  input[type="url"], select, textarea {
    font-size: max(16px, 1em);
  }
}


/* ─── §6  SCROLLBAR NORMALISATION ────────────────────────────── */
/* Firefox ignores ::-webkit-scrollbar; Edge paints light
   scrollbars on dark UIs unless told otherwise (also mitigated by
   §1 color-scheme). */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gn-accent-rgb), 0.45) rgba(13, 13, 34, 0.6);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(13, 13, 34, 0.6); }
*::-webkit-scrollbar-thumb {
  background: rgba(var(--gn-accent-rgb), 0.45);
  border-radius: 5px;
  border: 2px solid rgba(13, 13, 34, 0.6);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--gn-accent-rgb), 0.65); }


/* ─── §6b  GPU-OFF CPU GUARD  ─────────────────────── */
/* The same machines whose backdrop-filter silently no-ops (Edge /
   Chrome with hardware acceleration disabled, VMs, RDP) also have
   NO GPU compositor — so the wallet's decorative infinite
   animations (hero gradients, shimmers, glows, halos) rasterise on
   the CPU at 60 fps and drag the whole laptop down.  Detect the
   GPU-off condition via the same @supports gate and freeze all
   decorative motion there.  Safety-critical spinners opt out via
   .gn-no-anim (same contract as perf-motion.css). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  *:not(.gn-no-anim):not(.gn-no-anim *),
  *:not(.gn-no-anim)::before,
  *:not(.gn-no-anim)::after {
    animation-iteration-count: 1 !important;
    animation-duration: 0.6s !important;
  }
}


/* ─── §6c  MOBILE BATTERY GUARD (, perf F-1) ────────── */
/* Phones pay for decorative motion twice: GPU/CPU time AND battery.
   The wallet's hero gradients, shimmers, glows and halos add nothing
   on a 390 px screen that's mostly scrolled past them.  On coarse-
   pointer devices, decorative animations play ONCE and stop instead
   of looping forever.  Same .gn-no-anim opt-out contract as
   perf-motion.css for anything safety-critical (signing spinners,
   progress indicators). prefers-reduced-motion still wins (1ms). */
@media (hover: none), (pointer: coarse) {
  /* Exemptions: the .gn-no-anim contract PLUS anything that looks
     like a loading indicator (Bootstrap spinners, skeletons, custom
     loaders) — a spinner frozen after one rotation reads as a hang. */
  *:not(.gn-no-anim):not(.gn-no-anim *):not(.spinner-border):not(.spinner-grow):not([class*="spinner"]):not([class*="loading"]):not([class*="skeleton"]):not([class*="progress"]),
  *:not(.gn-no-anim):not([class*="spinner"]):not([class*="loading"]):not([class*="skeleton"])::before,
  *:not(.gn-no-anim):not([class*="spinner"]):not([class*="loading"]):not([class*="skeleton"])::after {
    animation-iteration-count: 1 !important;
  }
}


/* ─── §7  FORCED COLORS (Windows High Contrast via Edge) ─────── */
/* In forced-colors mode the engine strips backgrounds/shadows.
   Keep interactive boundaries visible instead of letting cards
   melt into the page. */
@media (forced-colors: active) {
  .glass-card, .gn-card, .card,
  .mobile-nav-item, .gn-drawer__row,
  .btn, button {
    border: 1px solid CanvasText;
  }
  .mobile-nav-item.active {
    forced-color-adjust: none;
    color: Highlight;
  }
}