/* Sharing the Moment FIXED102 — scroll-safe themed stage + visual cleanup. */
/*
  FIXED102 keeps the selected-theme background independent from invitation artwork,
  but moves the woodland scene to the stage instead of the scroll container.
  This fixes three regressions at once:
  1) FIXED96 changed active panels to position:relative, so long Details/RSVP pages
     grew behind the clipped stage instead of becoming scrollable.
  2) The FIXED101 center veil read as a large pale vertical stripe.
  3) The woodland companion ornament was absolutely positioned against the whole
     invitation stage because the companion itself was not positioned.
*/

/* The event stage owns the viewport; active panels must stay constrained to it so
   overflow-y:auto can actually scroll long content. */
body[data-stm-working-theme] .event-stage{
  position:relative!important;
  min-height:0!important;
  overflow:hidden!important;
}
body[data-stm-working-theme] .event-panel.active,
body[data-stm-working-theme][data-stm-artwork="1"] .event-panel.active{
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  scrollbar-gutter:stable!important;
  align-content:start!important;
  justify-items:center!important;
  place-items:start center!important;
  padding-top:clamp(22px,3.8vh,42px)!important;
  padding-bottom:max(88px,calc(env(safe-area-inset-bottom) + 72px))!important;
}
/* FIXED96 used a higher-specificity non-neutral selector for position:relative/overflow:hidden.
   Match that specificity explicitly so the scroll repair wins the actual cascade. */
body[data-stm-working-theme]:not([data-stm-working-theme="minimal"]):not([data-stm-working-theme="neutral"]) .event-panel.active{
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  align-content:start!important;
  justify-items:center!important;
  place-items:start center!important;
}
body[data-stm-working-theme] .event-panel.has-custom-invitation.active,
body[data-stm-working-theme][data-stm-artwork="1"] .event-panel.has-custom-invitation.active{
  display:block!important;
}
body[data-stm-working-theme] .event-panel.active:not(.has-custom-invitation){
  display:grid!important;
  grid-auto-rows:max-content!important;
}

/* Woodland scene belongs to the fixed stage, so it stays stable while Details/RSVP
   content scrolls. It never receives pointer input. */
body[data-stm-working-theme="woodland"] .event-stage{
  isolation:isolate!important;
  background:var(--stm-job-surface2)!important;
}
body[data-stm-working-theme="woodland"] .event-stage:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  pointer-events:none!important;
  background-image:var(--stm-theme-backdrop,none)!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center 48%!important;
  filter:saturate(.97) contrast(.98) brightness(.96)!important;
  transform:scale(1.002)!important;
  transform-origin:center!important;
}
body[data-stm-working-theme="woodland"] .event-stage:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(255,252,244,.34) 0 11%,rgba(255,250,240,.18) 28%,rgba(255,248,238,.07) 43%,transparent 61%),
    linear-gradient(180deg,rgba(249,244,230,.08),rgba(239,232,209,.14))!important;
}
body[data-stm-working-theme="woodland"] .event-panel.active,
body[data-stm-working-theme="woodland"][data-stm-artwork="1"] .event-panel.active{
  z-index:2!important;
  isolation:isolate!important;
  background:transparent!important;
}
/* Retire all historical panel-owned backdrop/veil layers for woodland. The stage
   now owns the one independent forest scene, eliminating the pale center band. */
body[data-stm-working-theme="woodland"] .event-panel.active:before,
body[data-stm-working-theme="woodland"] .event-panel.active:after,
body[data-stm-working-theme="woodland"][data-stm-artwork="1"] .event-panel.active:before,
body[data-stm-working-theme="woodland"][data-stm-artwork="1"] .event-panel.active:after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}
body[data-stm-working-theme="woodland"] .event-panel.active>*{
  position:relative!important;
  z-index:3!important;
}

/* Keep the botanical ornament attached to the card it belongs to instead of the
   whole invitation stage. */
body[data-stm-working-theme="woodland"] .custom-invitation-companion94,
body[data-stm-working-theme="woodland"] .content-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
}

/* Visual cleanup: solid, calm reading surfaces over the photographic scene without
   turning the entire center of the viewport into a washed-out column. */
body[data-stm-working-theme="woodland"] .custom-invitation-companion94,
body[data-stm-working-theme="woodland"] .content-card{
  background:linear-gradient(165deg,rgba(255,253,247,.975),rgba(247,242,231,.965))!important;
  border:1px solid rgba(103,92,69,.22)!important;
  outline:1px solid rgba(79,95,49,.10)!important;
  outline-offset:-8px!important;
  box-shadow:0 24px 58px rgba(39,31,18,.15)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body[data-stm-working-theme="woodland"] .custom-invitation-frame94{
  background:rgba(255,253,247,.94)!important;
  border-color:rgba(103,92,69,.18)!important;
  box-shadow:0 22px 54px rgba(39,31,18,.14)!important;
}
body[data-stm-working-theme="woodland"] .custom-invitation-stage94{
  min-height:0!important;
  padding-top:clamp(18px,3vh,34px)!important;
  padding-bottom:max(62px,calc(env(safe-area-inset-bottom) + 44px))!important;
}

/* Long utility pages should feel like readable sheets, not oversized white towers. */
body[data-stm-working-theme="woodland"] .event-panel:not([data-panel="invitation"]) .content-card{
  width:min(740px,calc(100% - 44px))!important;
  margin:0 auto!important;
  padding:clamp(34px,4vw,54px)!important;
}
body[data-stm-working-theme="woodland"] .event-panel:not([data-panel="invitation"]) .content-card h2{
  margin-bottom:12px!important;
}
body[data-stm-working-theme="woodland"] .event-panel:not([data-panel="invitation"]) .detail-grid{
  margin:20px 0!important;
  gap:12px!important;
}
body[data-stm-working-theme="woodland"] .event-panel:not([data-panel="invitation"]) .detail-grid>div,
body[data-stm-working-theme="woodland"] .event-panel:not([data-panel="invitation"]) .event-note-block{
  background:rgba(247,241,226,.92)!important;
  border:1px solid rgba(103,92,69,.16)!important;
}

/* A visible but unobtrusive scrollbar is preferable to a page that appears frozen. */
body[data-stm-working-theme] .event-panel.active{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--stm-job-primary) 48%,transparent) transparent;
}
body[data-stm-working-theme] .event-panel.active::-webkit-scrollbar{width:10px}
body[data-stm-working-theme] .event-panel.active::-webkit-scrollbar-track{background:transparent}
body[data-stm-working-theme] .event-panel.active::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--stm-job-primary) 34%,transparent);
  border:3px solid transparent;
  background-clip:padding-box;
  border-radius:999px;
}

@media(min-width:1200px){
  body[data-stm-working-theme="woodland"] .event-panel:not([data-panel="invitation"]) .content-card{
    width:min(720px,calc(100% - 56px))!important;
    padding:46px 50px!important;
  }
}

@media(max-width:919px){
  body[data-stm-working-theme] .event-panel.active,
  body[data-stm-working-theme][data-stm-artwork="1"] .event-panel.active{
    padding-top:16px!important;
    padding-bottom:max(96px,calc(env(safe-area-inset-bottom) + 72px))!important;
    scrollbar-gutter:auto!important;
  }
  body[data-stm-working-theme="woodland"] .event-stage:before{
    background-position:center 44%!important;
    filter:saturate(.9) contrast(.97) brightness(.98)!important;
  }
  body[data-stm-working-theme="woodland"] .event-stage:after{
    background:linear-gradient(180deg,rgba(249,244,230,.40),rgba(239,232,209,.56))!important;
  }
  body[data-stm-working-theme="woodland"] .event-panel:not([data-panel="invitation"]) .content-card{
    width:min(100%,calc(100% - 20px))!important;
    padding:28px 20px!important;
    margin:0 auto!important;
  }
}