/* Global layout contract. Footer visuals live inside platform-footer's shadow root. */
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-group(root){animation-duration:140ms;animation-timing-function:ease-out}
::view-transition-old(root){animation:fairystack-page-out 100ms ease-in both}
::view-transition-new(root){animation:fairystack-page-in 140ms ease-out both}
@keyframes fairystack-page-out{to{opacity:.82}}
@keyframes fairystack-page-in{from{opacity:.82}}
html{height:100%}
/* Trackpad rubber-banding could stick on macOS WebKit, leaving fixed chrome drawn off its hit-test position.
   WebKitGTK stops wheel scrolling under a root overscroll lock (skins.js marks it). */
@media(hover:hover) and (pointer:fine){html:not([data-engine=webkitgtk]),html:not([data-engine=webkitgtk]) body{overscroll-behavior:none}}
body[data-fairystack-shell]{--platform-footer-height:49px;min-height:100%;margin:0;background-color:#dcecdf;background-position:center top;background-size:cover;background-attachment:fixed;color:#17372f}
body[data-fairystack-shell]:not([data-fairystack-shell="conversation"]){background-image:linear-gradient(180deg,rgba(238,248,241,.78),rgba(238,248,241,.92)),url('/assets/fairystack-treehouse-workshop-v3.webp')}
body[data-fairystack-shell]>fairystack-footer{position:fixed;inset:auto 0 0;z-index:30;display:block;width:100%;height:var(--platform-footer-height);margin:0;view-transition-name:fairystack-footer}
::view-transition-old(fairystack-footer),::view-transition-new(fairystack-footer){animation:none;mix-blend-mode:normal}
body[data-fairystack-shell="viewport"]{height:100vh;height:100dvh;overflow:hidden;padding-bottom:var(--platform-footer-height)}
body[data-fairystack-shell="viewport"]>main{height:100%;max-height:100%;overflow:auto;overscroll-behavior:contain}
body[data-fairystack-shell="document"],body[data-fairystack-shell="conversation"]{padding-bottom:var(--platform-footer-height)}
body[data-fairystack-shell="conversation"] #composer-dock{--footer-clearance:var(--platform-footer-height)}
@media(max-width:760px){body[data-fairystack-shell]{--platform-footer-height:45px}}
/* A visible composer carries the navigation once the footer docks (platform-footer.js): inline in wide bars, otherwise only its popups. */
body[data-fairystack-shell]>fairystack-footer[data-placement="composer"][data-docked]{inset:auto auto 0 0;width:0;height:0;overflow:hidden}
body[data-fairystack-shell]:has(fairystack-footer[data-placement="composer"][data-docked]){--platform-footer-height:0px;--mobile-navigation-clearance:0px}
:where(html[data-theme="dark"]) body[data-fairystack-shell]{background-color:#10251f;color:#edf6ea}:where(html[data-theme="dark"]) body[data-fairystack-shell]:not([data-fairystack-shell="conversation"]){background-image:linear-gradient(180deg,rgba(11,28,23,.76),rgba(11,28,23,.94)),url('/assets/fairystack-treehouse-workshop-v3.webp')}
@media(max-width:620px){
  body[data-fairystack-shell]{--platform-footer-height:0px;--mobile-navigation-clearance:42px;--mobile-header-control-size:36px}
  body[data-fairystack-shell]>fairystack-footer{inset:4px 6px auto auto;width:var(--mobile-header-control-size);height:var(--mobile-header-control-size)}
  body[data-fairystack-shell="conversation"] #composer-dock{--composer-gutter:max(12px,env(safe-area-inset-bottom))}
}

@media(max-width:620px){
  body[data-fairystack-shell="conversation"][data-composer-editing="true"] #composer-dock{--composer-gutter:4px}
  body[data-fairystack-shell="conversation"][data-composer-editing="true"]{--mobile-header-control-size:28px}
  body[data-fairystack-shell="conversation"][data-composer-editing="true"]>fairystack-footer{inset:1px 6px auto auto}
}