/* Shari's Home Cooking // viewport contract
   Uses the same core physical-shell approach as Prime Creation:
   CSS owns viewport geometry and browser-trusted gestures own scrolling.
   No JS visualViewport measurement, synthetic scrolling, or scroll restoration. */

:root{
  --shari-shell-bg:#fff6f8;
  --shari-shell-height:100vh;
  --shari-page-height:100vh;
  --shari-safe-left:env(safe-area-inset-left,0px);
  --shari-safe-right:env(safe-area-inset-right,0px);
  --shari-safe-top:env(safe-area-inset-top,0px);
  --shari-safe-bottom:env(safe-area-inset-bottom,0px);
  --shari-pill-reserve:calc(76px + var(--shari-safe-bottom));
  --shari-gutter:clamp(.7rem,2.5vw,1.25rem);
}
@supports(height:100dvh){
  :root{--shari-shell-height:100dvh;--shari-page-height:100dvh}
}
html{
  margin:0!important;padding:0!important;width:100%!important;height:var(--shari-shell-height)!important;
  background:var(--shari-shell-bg)!important;overflow:clip!important;overscroll-behavior:none!important;
}
body.shari-v1{
  position:fixed!important;inset:0 auto auto 0!important;width:100%!important;height:var(--shari-shell-height)!important;
  min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;
  background:var(--shari-shell-bg)!important;overflow:clip!important;overscroll-behavior:none!important;
}
@supports (-webkit-touch-callout:none){
  @media (hover:none) and (pointer:coarse){
    html{height:100%!important;min-height:100%!important}
    body.shari-v1{position:absolute!important;inset:0!important;height:100%!important;min-height:100%!important}
  }
}
body.shari-v1>#main[data-app-shell]{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;
  overflow:clip!important;background:var(--shari-shell-bg)!important;contain:layout style!important;
}
#main[data-app-shell]>.app-window{display:none!important}
#main[data-app-shell]>.app-window[hidden],
#main[data-app-shell]>.app-window[aria-hidden="true"],
#main[data-app-shell]>.app-window:not(.is-shari-viewport-active){
  display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;content-visibility:hidden!important;
}
#main[data-app-shell]>.app-window.is-shari-viewport-active:not([hidden])[aria-hidden="false"]{
  display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;content-visibility:visible!important;
  position:absolute!important;top:var(--shari-safe-top)!important;right:var(--shari-safe-right)!important;
  bottom:var(--shari-pill-reserve)!important;left:var(--shari-safe-left)!important;
  width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;margin:0!important;box-sizing:border-box!important;
  overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-x:none!important;overscroll-behavior-y:contain!important;
  touch-action:pan-y pinch-zoom!important;scroll-behavior:auto!important;overflow-anchor:none!important;-webkit-overflow-scrolling:touch;
}
.shari-pill{
  position:absolute!important;z-index:9000!important;left:max(var(--shari-safe-left),.7rem)!important;
  right:max(var(--shari-safe-right),.7rem)!important;bottom:max(var(--shari-safe-bottom),.55rem)!important;
}
.app-window.is-shari-viewport-active :where(*){min-width:0}
.app-window.is-shari-viewport-active :where(img,video,canvas,svg,iframe){max-width:100%}
:where(button,.button,a[href],input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(217,31,104,.58)!important;outline-offset:2px!important;
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
}