/* Stratum website · liquid glass v3.1 (DESIGN-01, approved 20 Oct 2026). v3.1 adds section 6, the mobile menu guard.
   Load this file LAST on every page. Dark appearance only; the light appearance is untouched.
   Skin only: no layout, size, copy or motion changes. The sphere is not targeted.
   :not(#g3-none) only raises selector strength so these rules win over earlier page rules; it matches every page. */

body.optical-site:not([data-appearance="light"]):not(#g3-none) {
  --g3-spec: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 20%, rgba(255,255,255,0) 42%);
  --g3-sheen: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 46%, rgba(255,255,255,.03) 54%, rgba(255,255,255,.08) 100%);
  --g3-rim: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(255,255,255,.16), inset 1px 0 0 rgba(255,255,255,.14), inset -1px 0 0 rgba(255,255,255,.08);
  --g3-glow: 0 0 0 .5px rgba(255,255,255,.10), 0 30px 70px -24px rgba(3,9,29,.75), 0 0 60px -20px rgba(85,202,255,.45);
  --g3-edge: linear-gradient(130deg, #F2FEFF 0%, #80E6FF 22%, rgba(167,187,255,.25) 48%, rgba(215,166,255,.55) 78%, #FFFFFF 100%);
}

/* 1 · Glass panels and cards */
body.optical-site:not([data-appearance="light"]):not(#g3-none) :is(.ah-glass, .acp-glass, .ah-value-card, .tour-section, .ah-score, .plan-card, .pricing-card, .matrix-desktop) {
  border: 1px solid rgba(255,255,255,.22) !important;
  background:
    var(--g3-spec),
    linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.02) 70%, rgba(151,188,255,.12) 100%),
    rgba(14,28,56,.52) !important;
  box-shadow: var(--g3-rim), inset 0 0 22px rgba(255,255,255,.06), inset 0 -14px 28px rgba(3,9,29,.20), var(--g3-glow) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.8) !important;
  backdrop-filter: blur(26px) saturate(1.8) !important;
}
/* 2 · Evidence cards in the sample review: blue requirement, amber proposal gap, green correction */
body.optical-site:not([data-appearance="light"]):not(#g3-none) .ah-finding {
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.10), inset 0 0 16px rgba(255,255,255,.05), 0 10px 24px -14px rgba(6,10,35,.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.7) !important;
  backdrop-filter: blur(20px) saturate(1.7) !important;
}
body.optical-site:not([data-appearance="light"]):not(#g3-none) #ah-supplied-requirement.ah-finding {
  background:
    var(--g3-spec) padding-box,
    linear-gradient(140deg, rgba(42,74,110,.72), rgba(24,48,74,.62) 30%, rgba(24,48,74,.58) 70%, rgba(36,64,106,.68)) padding-box,
    linear-gradient(125deg, #FFFFFF, #80E6FF 26%, rgba(167,187,255,.40) 56%, #D7A6FF 88%, #FFFFFF) border-box !important;
}
body.optical-site:not([data-appearance="light"]):not(#g3-none) .ah-finding.ah-amber {
  background:
    var(--g3-spec) padding-box,
    linear-gradient(140deg, rgba(84,88,92,.72), rgba(55,64,76,.64) 30%, rgba(55,64,76,.60) 68%, rgba(92,80,56,.64)) padding-box,
    linear-gradient(125deg, #FFFFFF, #F2B046 26%, rgba(193,158,103,.45) 56%, #F2B046 88%, #FFFFFF) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 16px rgba(242,176,70,.10), 0 10px 24px -14px rgba(6,10,35,.8), 0 0 26px -14px rgba(242,176,70,.65) !important;
}
body.optical-site:not([data-appearance="light"]):not(#g3-none) #ah-suggested-correction.ah-finding {
  background:
    var(--g3-spec) padding-box,
    linear-gradient(140deg, rgba(63,93,84,.72), rgba(21,57,47,.64) 32%, rgba(21,57,47,.60) 68%, rgba(33,72,60,.68)) padding-box,
    linear-gradient(125deg, #FFFFFF, #9CE3C5 26%, rgba(112,184,160,.45) 56%, #9CE3C5 88%, #FFFFFF) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 16px rgba(156,227,197,.10), 0 10px 24px -14px rgba(6,10,35,.8), 0 0 26px -14px rgba(156,227,197,.65) !important;
}

/* 3 · Capsule glass buttons (every .button variant). Primary keeps Stratum blue. */
body.optical-site:not([data-appearance="light"]):not(#g3-none) .button,
body.optical-site:not([data-appearance="light"]):not(#g3-none) :is(.acp-action, .ah-motion-toggle, .visual-motion-button) {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  background:
    var(--g3-sheen),
    linear-gradient(135deg, rgba(216,242,255,.10), rgba(255,255,255,0) 50%, rgba(181,150,255,.10)),
    rgba(22,46,82,.46) !important;
  box-shadow: var(--g3-rim), inset 0 0 14px rgba(255,255,255,.08), 0 10px 26px -12px rgba(3,9,29,.85), 0 0 26px -12px rgba(123,216,255,.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.9) brightness(1.1) !important;
  backdrop-filter: blur(18px) saturate(1.9) brightness(1.1) !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 1px rgba(3,9,29,.35);
  transition: transform 120ms cubic-bezier(.25,1,.5,1), box-shadow 120ms cubic-bezier(.25,1,.5,1), border-color 120ms cubic-bezier(.25,1,.5,1);
}
body.optical-site:not([data-appearance="light"]):not(#g3-none) .button.gradient:not([data-action="motion"]) {
  border-color: rgba(200,240,255,.55) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.10) 48%, rgba(255,255,255,0) 52%, rgba(255,255,255,.12) 100%),
    linear-gradient(145deg, rgba(8,107,164,.94), rgba(3,98,154,.90) 60%, rgba(21,75,130,.94)) !important;
  box-shadow: var(--g3-rim), inset 0 0 16px rgba(180,236,255,.18), 0 12px 32px -12px rgba(23,166,255,.85), 0 0 36px -12px rgba(123,229,255,.6) !important;
}
body.optical-site:not([data-appearance="light"]):not(#g3-none) .button:hover,
body.optical-site:not([data-appearance="light"]):not(#g3-none) :is(.acp-action, .ah-motion-toggle, .visual-motion-button):hover {
  border-color: rgba(255,255,255,.55) !important;
  box-shadow: var(--g3-rim), inset 0 0 18px rgba(255,255,255,.14), 0 14px 30px -12px rgba(3,9,29,.9), 0 0 34px -10px rgba(123,216,255,.85) !important;
}
body.optical-site:not([data-appearance="light"]):not(#g3-none) .button:active {
  transform: scale(.97);
}

/* 4 · Pills and badges: glass chips; amber stays attention, green stays resolved */
body.optical-site:not([data-appearance="light"]):not(#g3-none) :is(.ah-badge, .acp-badge) {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  background: var(--g3-sheen), rgba(24,48,74,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.08), 0 4px 12px -6px rgba(3,9,29,.6) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.7) !important;
  backdrop-filter: blur(16px) saturate(1.7) !important;
}
body.optical-site:not([data-appearance="light"]):not(#g3-none) .ah-badge.ah-amber {
  color: #F2B046 !important;
  border-color: rgba(242,176,70,.55) !important;
  background: var(--g3-sheen), rgba(62,64,62,.62) !important;
}

/* 5 · Header: floating navigation glass */
body.optical-site:not([data-appearance="light"]):not(#g3-none) .site-header {
  background:
    var(--g3-spec),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 40%, rgba(151,188,255,.06)),
    rgba(14,32,62,.50) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.16), 0 18px 40px -24px rgba(3,9,29,.8) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.9) brightness(1.06) !important;
  backdrop-filter: blur(26px) saturate(1.9) brightness(1.06) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.optical-site:not([data-appearance="light"]):not(#g3-none) .button { transition: none; }
  body.optical-site:not([data-appearance="light"]):not(#g3-none) .button:active { transform: none; }
}

/* 6 · Mobile menu guard (v3.1)
   The open menu sits inside the header, and the header's blur stops any blur on the menu from
   reaching the page. A see-through menu would show page text, so the open menu keeps its existing
   solid fill (never glass) and nothing inside it may push it into sideways scrolling. */
@media (max-width: 1023px) {
  body.optical-site:not([data-appearance="light"]):not(#g3-none) .site-header #main-nav {
    background-color: rgb(16,28,53) !important;
  }
  body.optical-site:not([data-appearance="light"]):not(#g3-none) .site-header #main-nav.open {
    overflow-x: hidden !important;
    overscroll-behavior: contain;
  }
  body.optical-site:not([data-appearance="light"]):not(#g3-none) .site-header #main-nav .button {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}