/* 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;
  }
}

/* 7 · Tablet and small-desktop menu (1024 to 1439 px), 22 Oct
   The phone menu's liquid glass, as a compact floating panel. The menu sits inside the header,
   whose blur stops a blur on the menu from reaching the page (see 6), so the panel keeps a solid
   base under its glass highlights. */
@media (min-width: 1024px) and (max-width: 1439px) {
  body.optical-site:not([data-appearance="light"]):not(#g3-none) .site-header #main-nav.open {
    left: max(20px, calc(50% - 220px)) !important;
    right: auto !important;
    width: min(440px, calc(100% - 40px)) !important;
    gap: 10px !important;
    padding: 18px !important;
    isolation: isolate;
    border: 1px solid rgba(189,219,255,.50) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(ellipse at 0% 0%, rgba(185,239,255,.14), transparent 56%),
      radial-gradient(ellipse at 100% 100%, rgba(173,135,255,.11), transparent 65%),
      #101c35 !important;
    box-shadow: inset 1px 2px 2px rgba(242,254,255,.57), inset -1px -2px 3px rgba(182,149,255,.33), 0 24px 65px rgba(2,6,17,.73) !important;
  }
  body.optical-site:not([data-appearance="light"]):not(#g3-none) .site-header #main-nav.open::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(ellipse 95% 40% at 20% -8%, rgba(239,255,255,.22), transparent 80%);
  }
  body.optical-site:not([data-appearance="light"]):not(#g3-none) .site-header #main-nav.open > a:not(.nav-extra):not(.button) {
    display: flex !important; align-items: center !important; justify-content: flex-start !important;
    min-height: 50px !important; padding: 12px 18px !important;
    position: relative; isolation: isolate; overflow: hidden;
    border: 1px solid rgba(185,234,255,.31) !important; border-radius: 18px !important;
    color: #f2f8ff !important; font-size: 15px !important; font-weight: 500 !important; text-shadow: none;
    background:
      radial-gradient(ellipse 125% 92% at 17% -28%, rgba(228,252,255,.40), rgba(199,238,255,.09) 62%, transparent 64%),
      radial-gradient(ellipse at 100% 100%, rgba(184,151,255,.13), transparent 66%),
      linear-gradient(135deg, rgba(255,255,255,.03), transparent 55%),
      #18304a !important;
    box-shadow: inset 1px 1px 1px rgba(239,255,255,.52), inset 0 -7px 13px rgba(5,14,35,.25), 0 5px 12px rgba(2,7,20,.19) !important;
  }
  body.optical-site:not([data-appearance="light"]):not(#g3-none) .site-header #main-nav.open > a:not(.nav-extra):not(.button)::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(130deg, #F2FEFF 0%, #80E6FF 22%, rgba(167,187,255,.40) 50%, #D7A6FF 82%, #FFFFFF 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: .72;
  }
  body.optical-site:not([data-appearance="light"]):not(#g3-none) .site-header #main-nav.open > a:not(.nav-extra):not(.button)::after {
    content: ''; position: absolute; top: 0; left: 14%; right: 26%; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(239,255,255,.5), rgba(128,230,255,.6), transparent);
    box-shadow: 0 1px 8px rgba(128,230,255,.13);
  }
  body.optical-site:not([data-appearance="light"]):not(#g3-none) .site-header #main-nav.open > a:is(:hover,:focus-visible,[aria-current="page"]) {
    color: #fff !important; border-color: rgba(128,230,255,.60) !important;
    background:
      radial-gradient(ellipse 125% 92% at 17% -28%, rgba(239,255,255,.50), rgba(199,238,255,.14) 62%, transparent 64%),
      radial-gradient(ellipse at 100% 100%, rgba(184,151,255,.17), transparent 66%),
      #1b3c56 !important;
    box-shadow: inset 1px 1px 2px rgba(239,255,255,.65), inset 0 -7px 13px rgba(5,14,35,.25), 0 5px 12px rgba(2,7,20,.19), 0 0 22px -8px rgba(128,230,255,.6) !important;
  }
  body.optical-site:not([data-appearance="light"]):not(#g3-none) .site-header #main-nav.open > a:focus-visible { outline: 3px solid #b9f4ff; outline-offset: 3px; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  body.optical-site[data-appearance="light"] .site-header #main-nav.open {
    left: max(20px, calc(50% - 220px)) !important; right: auto !important; width: min(440px, calc(100% - 40px)) !important;
    gap: 10px !important; padding: 18px !important; border-radius: 28px !important;
    background: #f3f7ff !important; border: 1px solid rgba(104,125,156,.5) !important;
    box-shadow: inset 0 1px #fff, 0 20px 35px rgba(30,59,115,.16) !important;
  }
  body.optical-site[data-appearance="light"] .site-header #main-nav.open > a:not(.nav-extra):not(.button) {
    display: flex !important; align-items: center !important; justify-content: flex-start !important;
    min-height: 50px !important; padding: 12px 18px !important; border-radius: 18px !important;
    color: #0c2340 !important; font-size: 15px !important; font-weight: 500 !important;
    background: linear-gradient(145deg, #fff, #eaf0fb) !important; border: 1px solid rgba(104,125,156,.44) !important;
    box-shadow: inset 0 1px #fff, 0 5px 12px rgba(30,59,115,.08) !important;
  }
  body.optical-site[data-appearance="light"] .site-header #main-nav.open > a:is(:hover,:focus-visible,[aria-current="page"]) {
    color: #005880 !important; background: #e0f3fb !important; border-color: #0369a1 !important;
  }
}