/* =====================================================
   MH Theme Phase 39 — Global Liquid Glass Material
   Single source of truth for header and mobile dock glass. Utility control owns its own glass in 12__go-to-top.css.
   No fake purple reflections. No component-owned glass.
   ===================================================== */

:root {
  --mht-glass-bg: rgba(8, 8, 10, .40);
  --mht-glass-bg-strong: rgba(8, 8, 10, .56);
  --mht-glass-highlight: rgba(255, 255, 255, .36);
  --mht-glass-highlight-soft: rgba(255, 255, 255, .12);
  --mht-glass-border: transparent;
  --mht-glass-border-soft: transparent;
  --mht-glass-lowlight: rgba(0, 0, 0, .42);
  --mht-glass-filter: blur(13px) saturate(175%) contrast(1.04) brightness(1.02);
  --mht-glass-shadow:
    0 16px 42px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(255,255,255,.045);
}

html[data-mht-theme-effective="light"],
html[data-mht-theme="light"] {
  --mht-glass-bg: rgba(10, 10, 12, .32);
  --mht-glass-bg-strong: rgba(10, 10, 12, .46);
  --mht-glass-highlight: rgba(255, 255, 255, .44);
  --mht-glass-highlight-soft: rgba(255, 255, 255, .16);
  --mht-glass-border: transparent;
  --mht-glass-border-soft: transparent;
  --mht-glass-lowlight: rgba(0, 0, 0, .30);
  --mht-glass-shadow:
    0 16px 42px rgba(47,31,58,.17),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Floating/navigation controls only. Content cards must not inherit this. */
.mht-nav__inner,
.mht-mobile-dock__inner,
.mht-appearance-toggle:not(.mht-appearance-toggle--floating) {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045) 34%, rgba(0,0,0,.16) 100%),
    var(--mht-glass-bg) !important;
  border: 0 !important;
  box-shadow: var(--mht-glass-shadow) !important;
  -webkit-backdrop-filter: var(--mht-glass-filter) !important;
  backdrop-filter: var(--mht-glass-filter) !important;
}

/* Top light catch. Thin/soft, not a painted purple blob. */
.mht-nav__inner::before,
.mht-mobile-dock__inner::before,
.mht-appearance-toggle:not(.mht-appearance-toggle--floating)::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px 1px auto 1px !important;
  height: 38% !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .42 !important;
  background: linear-gradient(180deg, var(--mht-glass-highlight), var(--mht-glass-highlight-soft) 42%, rgba(255,255,255,0) 100%) !important;
}

/* Bottom edge depth only. No visible middle bar. */
.mht-nav__inner::after,
.mht-mobile-dock__inner::after,
.mht-appearance-toggle:not(.mht-appearance-toggle--floating)::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 12px 2px 12px !important;
  height: 1px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .28 !important;
  background: rgba(255,255,255,.26) !important;
  box-shadow: 0 -10px 22px var(--mht-glass-lowlight) !important;
}

.mht-nav__inner > *,
.mht-mobile-dock__inner > *,
.mht-appearance-toggle:not(.mht-appearance-toggle--floating) > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Glass content is white unless a specific active colored control overrides it. */
.mht-nav__inner,
.mht-nav__inner *:not(.mht-u-btn--nav:hover):not(.mht-u-btn--nav:hover *),
.mht-mobile-dock__inner,
.mht-mobile-dock__inner * *,
.mht-appearance-toggle:not(.mht-appearance-toggle--floating),
.mht-appearance-toggle:not(.mht-appearance-toggle--floating) * {
  color: #fff !important;
}

.mht-nav__inner svg,
.mht-mobile-dock__inner svg,
.mht-appearance-toggle:not(.mht-appearance-toggle--floating) svg {
  color: #fff !important;
  stroke: #fff !important;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mht-nav__inner,
  .mht-mobile-dock__inner,
  .mht-appearance-toggle:not(.mht-appearance-toggle--floating) {
    background: var(--mht-glass-bg-strong) !important;
  }
}


/* =====================================================
   Phase 90 — Global mobile glass angle source
   One mobile glass treatment for phone controls only:
   - top-left logo glass (.mht-nav__inner)
   - Floating Utility Dock (.mht-utility-control)
   - bottom dock (.mht-mobile-dock__inner)
   Uses the same -40deg light-source logic as the desktop header border.
   ===================================================== */
@media (max-width: 900px) {
  .mht-nav__inner,
  .mht-mobile-dock__inner {
    position: relative !important;
  }

  .mht-utility-control {
    position: fixed !important;
  }

  .mht-nav__inner,
  .mht-mobile-dock__inner,
  .mht-utility-control {
    isolation: isolate !important;
    overflow: hidden !important;
    color: #fff !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.048) 36%, rgba(0,0,0,.18) 100%),
      rgba(8, 8, 10, .44) !important;
    border: 0 !important;
    box-shadow:
      0 18px 46px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(0,0,0,.30),
      inset 0 0 32px rgba(255,255,255,.035) !important;
    -webkit-backdrop-filter: var(--mht-glass-filter) !important;
    backdrop-filter: var(--mht-glass-filter) !important;
  }

  html[data-mht-theme-effective="light"] .mht-nav__inner,
  html[data-mht-theme-effective="light"] .mht-mobile-dock__inner,
  html[data-mht-theme-effective="light"] .mht-utility-control,
  html[data-mht-theme="light"] .mht-nav__inner,
  html[data-mht-theme="light"] .mht-mobile-dock__inner,
  html[data-mht-theme="light"] .mht-utility-control {
    background:
      linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.07) 38%, rgba(47,31,58,.20) 100%),
      rgba(10, 10, 12, .34) !important;
    box-shadow:
      0 18px 46px rgba(47,31,58,.18),
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -1px 0 rgba(47,31,58,.20),
      inset 0 0 30px rgba(255,255,255,.045) !important;
  }

  .mht-nav__inner::before,
  .mht-mobile-dock__inner::before,
  .mht-utility-control::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 44% !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: .34 !important;
    background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 58%, rgba(255,255,255,0) 100%) !important;
    box-shadow: none !important;
  }

  .mht-nav__inner::after,
  .mht-mobile-dock__inner::after,
  .mht-utility-control::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: inherit !important;
    padding: 1.15px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: .62 !important;
    background:
      linear-gradient(
        -40deg,
        rgba(255,255,255,.50) 0%,
        rgba(255,255,255,.31) 18%,
        rgba(255,255,255,.12) 44%,
        rgba(255,255,255,.035) 68%,
        rgba(255,255,255,0) 100%
      ) !important;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    box-shadow: none !important;
  }

  html[data-mht-theme-effective="light"] .mht-nav__inner::after,
  html[data-mht-theme-effective="light"] .mht-mobile-dock__inner::after,
  html[data-mht-theme-effective="light"] .mht-utility-control::after,
  html[data-mht-theme="light"] .mht-nav__inner::after,
  html[data-mht-theme="light"] .mht-mobile-dock__inner::after,
  html[data-mht-theme="light"] .mht-utility-control::after {
    opacity: .54 !important;
    background:
      linear-gradient(
        -40deg,
        rgba(255,255,255,.58) 0%,
        rgba(255,255,255,.30) 18%,
        rgba(255,255,255,.10) 48%,
        rgba(0,0,0,.035) 76%,
        rgba(0,0,0,0) 100%
      ) !important;
  }

  .mht-nav__inner > *,
  .mht-mobile-dock__inner > *,
  .mht-utility-control > * {
    position: relative !important;
    z-index: 1 !important;
  }
}


/* =====================================================
   Phase 94 — Locked global glass utility
   Use this class when a product surface must use the same locked glass
   material as the navigation glass. Do not expose these values as user
   customization controls.
   ===================================================== */
.mht-global-glass {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045) 34%, rgba(0,0,0,.16) 100%),
    var(--mht-glass-bg) !important;
  border: 0 !important;
  box-shadow: var(--mht-glass-shadow) !important;
  -webkit-backdrop-filter: var(--mht-glass-filter) !important;
  backdrop-filter: var(--mht-glass-filter) !important;
}

.mht-global-glass::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 44% !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .34 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 58%, rgba(255,255,255,0) 100%) !important;
  box-shadow: none !important;
}

.mht-global-glass::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  padding: 1.25px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .62 !important;
  background:
    linear-gradient(
      -40deg,
      rgba(255,255,255,.50) 0%,
      rgba(255,255,255,.32) 18%,
      rgba(255,255,255,.12) 44%,
      rgba(255,255,255,.035) 68%,
      rgba(255,255,255,0) 100%
    ) !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  box-shadow: none !important;
}

.mht-global-glass > * {
  position: relative !important;
  z-index: 1 !important;
}

html[data-mht-theme-effective="light"] .mht-global-glass,
html[data-mht-theme="light"] .mht-global-glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.07) 38%, rgba(47,31,58,.20) 100%),
    var(--mht-glass-bg) !important;
  box-shadow: var(--mht-glass-shadow) !important;
}

html[data-mht-theme-effective="light"] .mht-global-glass::after,
html[data-mht-theme="light"] .mht-global-glass::after {
  opacity: .54 !important;
  background:
    linear-gradient(
      -40deg,
      rgba(255,255,255,.58) 0%,
      rgba(255,255,255,.30) 18%,
      rgba(255,255,255,.10) 48%,
      rgba(0,0,0,.035) 76%,
      rgba(0,0,0,0) 100%
    ) !important;
}

.mht-global-glass,
.mht-global-glass * {
  color: #fff !important;
}

.mht-global-glass svg {
  color: #fff !important;
  stroke: #fff !important;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mht-global-glass {
    background: var(--mht-glass-bg-strong) !important;
  }
}