/* Clarity STICKY HARDEN v1 — final chrome pin; content scrolls under
   Build: 20261009HARDEN | Phase A
   Strategy: pure sticky (in-flow), opaque chrome, overflow-x:clip, measured --clarity-nav-h
*/

:root {
  --clarity-nav-h: 48px;
  --clarity-banner-h: 160px;
  --clarity-chrome-stack-z: 2100;
}

/* overflow-x:hidden breaks position:sticky in WebKit/Blink in some cases */
html {
  overflow-x: clip !important;
  overflow-y: auto !important;
  height: auto !important;
}
body {
  overflow-x: clip !important;
  overflow-y: visible !important;
  /* do not create a scrollport that traps sticky */
  position: relative !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
}

#main-application-workspace,
#main-content,
main.main-content,
.page-wrapper,
.tab-panel,
.section-panel {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}

/* ===== ALWAYS sticky stack (all viewports) ===== */
html body #clarity-global-nav.global-nav,
html body nav#clarity-global-nav,
html[data-chrome-pin] body #clarity-global-nav.global-nav,
html[data-chrome-pin="0"] body #clarity-global-nav.global-nav,
body.clarity-chrome-pinned #clarity-global-nav.global-nav,
body:not(.clarity-chrome-pinned) #clarity-global-nav.global-nav {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 2100 !important;
  margin: 0 !important;
  transform: none !important;
  /* opaque so scrolled content never bleeds through */
  background: #fffdf8 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="dark"] body #clarity-global-nav.global-nav,
html[data-theme="night"] body #clarity-global-nav.global-nav,
html[data-theme="dark"] body nav#clarity-global-nav {
  background: #0f1a14 !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35) !important;
}

html body #clarity-top-duo,
html[data-chrome-pin] body #clarity-top-duo,
html[data-chrome-pin="0"] body #clarity-top-duo,
body.clarity-chrome-pinned #clarity-top-duo,
body:not(.clarity-chrome-pinned) #clarity-top-duo {
  position: sticky !important;
  top: var(--clarity-nav-h, 48px) !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 2090 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: #0d4f3c !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

/* Banner stays inside sticky duo; constrain height on small screens */
html body #clarity-top-duo .banner {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Track / gate strip sticks under banner when present */
html body .clarity-gate-switcher.rrra-sitewide,
html body .clarity-gate-switcher {
  position: sticky !important;
  top: calc(var(--clarity-nav-h, 48px) + var(--clarity-banner-h, 160px)) !important;
  z-index: 2080 !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  background: #0f1f18 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="light"] body .clarity-gate-switcher,
html[data-theme="day"] body .clarity-gate-switcher {
  background: #e8f0eb !important;
}

/* Kill body::before spacers from older fixed-chrome patches */
html body::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Mobile: keep sticky but shrink banner so content remains usable */
@media (max-width: 900px) {
  :root { --clarity-nav-h: 44px; }
  html body #clarity-top-duo .banner,
  html body #clarity-top-duo .banner-overlay {
    max-height: min(38vh, 280px) !important;
  }
  html body #clarity-top-duo .banner-overlay {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* door rail stays fixed bottom — already in critical CSS */
}

@media (max-width: 600px) {
  html body #clarity-top-duo .banner,
  html body #clarity-top-duo .banner-overlay {
    max-height: min(34vh, 240px) !important;
  }
}

/* Ensure bottom door rail stays above content, below nothing critical */
html body #clarity-door-rail.door-rail-bottom,
html body nav#clarity-door-rail {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2200 !important;
  width: 100% !important;
}

/* Content padding so last cards clear bottom rail */
#main-application-workspace,
#main-content {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
}