:root{--jroon-overlay-bg:rgba(20,25,19,.48);--jroon-overlay-blur:8px}
body.jroon-overlay-locked{overflow:hidden;overscroll-behavior:none}
html.jroon-surface-open{overscroll-behavior:none}

/* One backdrop language for all non-camera user surfaces. The active sheet keeps
   its own scrolling; the underlying core page is inert by runtime contract. */
.modal.open:not(.scanner-modal),
.feedback-modal.open,
.product-card-modal.open,
.foods-choice-surface.open:not(.scanner-active),
.liquid-modal.open,
.gallery-v4.open,
.gallery-editor.open,
.lukoshko-backdrop.open{
  background:var(--jroon-overlay-bg)!important;
  -webkit-backdrop-filter:blur(var(--jroon-overlay-blur));
  backdrop-filter:blur(var(--jroon-overlay-blur));
}
dialog::backdrop{
  background:var(--jroon-overlay-bg)!important;
  -webkit-backdrop-filter:blur(var(--jroon-overlay-blur))!important;
  backdrop-filter:blur(var(--jroon-overlay-blur))!important;
}
html.jroon-night{--jroon-overlay-bg:rgba(5,8,6,.62);--jroon-overlay-blur:9px}

/* Settings is a popover, so its own surface stays crisp while the rest of the
   page becomes visibly inactive. */
body:has(.native-app-menu[open])::before{
  content:"";
  position:fixed;
  z-index:1280;
  inset:0;
  background:var(--jroon-overlay-bg);
  -webkit-backdrop-filter:blur(var(--jroon-overlay-blur));
  backdrop-filter:blur(var(--jroon-overlay-blur));
  pointer-events:none;
}
/* The direct Diary surface is itself a low root stacking context. A root-level
   backdrop would paint above its menu no matter how high the child z-index is.
   Keep the backdrop inside that surface so the popover can stay visibly above it. */
body:has(.section-swipe-current .native-app-menu[open])::before{display:none}
.section-swipe-current:has(.native-app-menu[open])::before{
  content:"";
  position:fixed;
  z-index:1280;
  inset:0;
  background:var(--jroon-overlay-bg);
  -webkit-backdrop-filter:blur(var(--jroon-overlay-blur));
  backdrop-filter:blur(var(--jroon-overlay-blur));
  pointer-events:none;
}
body:has(.native-app-menu[open]) .section-header-trailing{position:relative;z-index:1290}
body:has(.native-app-menu[open]) .native-app-toolbar{z-index:1291}
body:has(.native-app-menu[open]) .native-app-menu[open]{z-index:1292}
body:has(.native-app-menu[open]) .native-app-menu[open] .native-app-menu-popover{display:grid!important;visibility:visible!important;opacity:1!important;z-index:1293!important}

/* Feedback moved into the header in #667; its sheet must follow the same
   semantic surfaces as every other changed overlay. */
html.jroon-night .feedback-sheet{background:var(--card)!important;color:var(--text)!important;border:1px solid var(--line)}
html.jroon-night .feedback-sheet input,
html.jroon-night .feedback-sheet textarea,
html.jroon-night .feedback-sheet select,
html.jroon-night .feedback-close{background:var(--surface-soft)!important;color:var(--text)!important;border-color:var(--line)!important}

.mascot-fire-celebration-close{
  min-width:148px;
  min-height:48px;
  margin-top:4px;
  padding:12px 20px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:16px;
  background:#fff;
  color:#315f2a;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  text-shadow:none;
}
.mascot-fire-celebration-close:focus-visible{outline:3px solid #9ada83;outline-offset:4px}
.mascot-fire-celebration-manual small{max-width:290px;line-height:1.4;opacity:.9}
.mascot-progress-copy strong,.mascot-progress-copy small{display:block}
.mascot-progress-copy small{margin-top:2px;color:var(--muted);font-size:10px;font-weight:700}