/* Keep the original layout in installed mode. Browser mode uses one real
   document for the detail, so Safari can paint content behind its controls. */
.gallery-frame { display: contents; }

@media (display-mode: browser) {
  html {
    --ss-flow-paper: #fff;
    height: auto !important;
    min-height: 100lvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Match the gallery's native vertical rebound; keep horizontal restraint. */
    overscroll-behavior: none contain;
    scrollbar-width: none;
    background: var(--ss-bottom);
  }
  html::-webkit-scrollbar { display: none; }
  html[data-theme="dark"] { --ss-flow-paper: #0f172a; }
  html:has(.detail-panel.show), html:has(.detail-panel.forming) { background: var(--ss-flow-paper); }
  html:has(.modal-backdrop.show), html:has(.image-viewer.open) {
    overflow-y: hidden !important;
  }
  body {
    position: relative;
    height: auto !important;
    min-height: 100lvh !important;
    overflow: visible !important;
    overscroll-behavior: none contain;
  }
  .page-canvas {
    position: absolute;
    bottom: 0;
    height: auto;
    min-height: 100lvh;
    /* Follow the whole document, including the detail, without stretching
       the accepted first-screen artwork when a longer item is opened. */
    background-color: var(--ss-bottom);
    background-size: 100% 100lvh,100% 100lvh,220% 220lvh;
    background-position: 0 0,0 0,0 -60lvh;
    overflow: clip;
  }
  .surface-glare, .caustics { position: absolute; }
  /* Empty legacy fixed/filter pseudo-elements must not escape the canvas. */
  .page-art::before, .page-art::after { content: none; }
  .shell {
    --ss-flow-pad-top: 24px;
    --ss-flow-pad-side: 24px;
    --ss-flow-controls-height: 46px;
    --ss-flow-line-height: 30px;
    --ss-flow-pond-height: 42svh;
    --ss-flow-gallery-height: calc(var(--ss-flow-controls-height) + var(--ss-flow-pond-height) + var(--ss-flow-line-height));
    height: auto !important;
    min-height: 100lvh !important;
    display: block;
    overflow: visible;
    padding-bottom: 0 !important;
  }
  .gallery-frame {
    display: grid;
    align-content: start;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto minmax(0,var(--ss-flow-pond-height)) var(--ss-flow-line-height);
    height: var(--ss-flow-gallery-height);
    position: sticky;
    top: var(--ss-flow-pad-top);
    z-index: 10;
    isolation: isolate;
  }
  .gallery-frame::before {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--ss-flow-pad-top)) calc(-1 * var(--ss-flow-pad-side)) 0;
    z-index: -1;
    background-color: var(--ss-top);
    background-image: var(--ss-canvas-image);
    background-size: 100% 100lvh,100% 100lvh,220% 220lvh;
    background-repeat: no-repeat;
    background-position: 0 0,0 0,0 50%;
  }
  .gallery-frame > * { min-width: 0; }
  .header-slot { display: block; height: auto; }
  .gallery-frame .brand {
    position: relative !important;
    top: auto;
    left: auto;
    width: 100%;
  }
  /* The legacy header overlay is never shown by document-flow scrolling. */
  .brand::before { content: none; }
  /* These cards are covered by artwork. Blurring behind that opaque image
     adds a rendering pass without contributing to the visible artwork. */
  .liquid-card.has-art {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Fit the decoration to the viewport without clipping sticky ancestors. */
  .waterline {
    margin-left: calc(-1 * var(--ss-flow-pad-side)) !important;
    margin-right: calc(-1 * var(--ss-flow-pad-side)) !important;
    overflow-x: clip;
    overflow-y: visible;
  }
  .utility-drawers { max-height: 60svh; overflow-y: auto; }
  .pond-wrap { margin-top: 0 !important; height: 100% !important; }
  .pond-container { padding-top: 26px !important; }
  .detail-panel:not(.show):not(.forming) { display: none; }
  .shell .detail-panel.show, .shell .detail-panel.forming {
    height: auto !important;
    max-height: none !important;
    min-height: max(0px,calc(100lvh - var(--ss-flow-pad-top) - var(--ss-flow-gallery-height))) !important;
    overflow: visible !important;
    background: var(--ss-flow-paper) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: 0;
  }
  .panel-actions { padding-bottom: max(20px,env(safe-area-inset-bottom)); }
}

@media (display-mode: browser) and (max-width:600px) {
  .shell {
    --ss-flow-pad-top: 12px;
    --ss-flow-pad-side: 12px;
    --ss-flow-line-height: 24px;
    --ss-flow-pond-height: max(0px,calc((100svh - var(--ss-flow-pad-top) - var(--ss-flow-controls-height) - var(--ss-flow-line-height)) * .48));
  }
}


/* Formation needs its final document geometry before it becomes visible.
   Keep the animated reveal, then let the paper continue without a bottom clip. */
@media (display-mode: browser) {
 .browser-footer { display: none !important; }
 /* Before selection there is no long detail document. Paint the actual
    page background against the viewport, including beneath browser controls. */
 html:not(:has(.detail-panel.show,.detail-panel.forming)) .page-canvas {
  position: fixed;
 }
}

/* Keep off-screen decoration out of the document's horizontal extent.
   clip preserves the document as the sticky gallery's vertical scroller. */
@media (display-mode: browser) {
 body { overflow-x: clip !important; overflow-y: visible !important; }
 .motion-effects {
  position: absolute;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  overflow: hidden;
  overflow: clip;
  contain: layout paint;
 }
 .motion-effects > * { position: absolute; }
}