/* ============================================================================
   Floom — the sheet
   ----------------------------------------------------------------------------
   A product page, opened from the Features menu, rises from the bottom of the
   window as a round-topped panel over the dimmed page, the way a sheet does on
   a phone. The page inside is the real page, in a frame, arriving with
   ?embed=1&sheet=1 so it drops its own nav and footer (floom-ui.css, the embed
   block) and scrolls on its own. floom-sheet.js builds this, opens it and
   closes it; the mega menu hands it the click.

   The geometry is the wireframe's: the panel's top edge a little under a
   tenth of the window down, 6px off each side, 16px corners, and a grab — a
   white pill — floating 22px above the edge, on the scrim. The grab is also
   the close button; so are the scrim, Escape (from either document) and Back.

   The first scroll inside grows the sheet to the whole window — the gap
   above closes, the sides meet the window's edges, the corners square off,
   the way a phone's sheet reaches its full height when you scroll it — and
   back at the top of the page it settles into the sheet again. The script
   sets .is-full on the root off the frame's own scroll position; the grab
   gives way to a close button at the top right.
   ========================================================================== */

.sh{
  position: fixed;
  inset: 0;
  z-index: 950;                 /* over the nav and its menu, under the curtain */
  --sh-top:  round(clamp(56px, 8.8svh, 120px), 8px);
  --sh-side: 8px;
  --sh-ease-grow: cubic-bezier(.3, .7, .1, 1);   /* leaves fast, lands soft — the opening's */
  --sh-ease-back: cubic-bezier(.4, 0, .2, 1);    /* the closing's */
}
/* Author display rules would beat the UA's [hidden]; be explicit. */
.sh[hidden]{ display: none !important; }

/* The page behind, dimmed and softened; the script fades it in and out. */
.sh-scrim{
  position: absolute; inset: 0;
  background: rgba(24, 24, 24, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
}

/* The moving part: carries the panel AND the grab above it, so the two travel
   as one. Rests a full height below the window; the script slides it up. */
.sh-sheet{
  position: absolute;
  left: var(--sh-side); right: var(--sh-side);
  top: var(--sh-top); bottom: 0;
  transform: translateY(100%);
  will-change: transform;
  /* settling back into the sheet; growing is timed on .is-full below */
  transition: top .46s var(--sh-ease-back), left .46s var(--sh-ease-back), right .46s var(--sh-ease-back);
}

.sh-grab{
  position: absolute;
  left: 50%; top: -24px;
  translate: -50% 0;
  z-index: 1;                   /* over the panel, for when it comes inside */
  width: 116px; height: 8px;
  margin: 0; padding: 0; border: 0;
  border-radius: 4px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* fading back in as the sheet returns (visible at once, so the keyboard can
     land on it); fading out is timed on .is-full below */
  transition: opacity .3s var(--sh-ease-back) .12s, visibility 0s;
}
.sh-grab:focus-visible{ outline: 2px solid var(--ap-orange); outline-offset: 5px; border-radius: 6px; }

/* The panel. The page's own ground, so the page inside looks as it was
   designed to — its cards were drawn on this cream, not on white. */
.sh-shell{
  position: absolute; inset: 0;
  background: var(--fl-canvas, #FAF6F1);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow: 0 -24px 64px rgba(24, 24, 24, .22);
  transition: border-radius .46s var(--sh-ease-back);
}
.sh-frame{
  display: block;
  width: 100%; height: 100%;
  border: 0;
  background: transparent;
}

/* ── full ──────────────────────────────────────────────────────────────────
   Scrolled inside: the whole window. Growing takes the opening's timing;
   the base rules above carry the closing's, for the way back. */
.sh.is-full .sh-sheet{
  top: 0; left: 0; right: 0;
  transition: top .56s var(--sh-ease-grow), left .56s var(--sh-ease-grow), right .56s var(--sh-ease-grow);
}
.sh.is-full .sh-shell{ border-radius: 0; transition-duration: .56s; transition-timing-function: var(--sh-ease-grow); }
/* The grab goes with the gap it floated in: a pill laid over the page would
   be lost on the stage's ink and patchy over the heading. In its place a
   close button, top right, frosted so it reads on the cream and the ink
   alike, arriving once the edge has all but reached the top. */
.sh.is-full .sh-grab{
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--sh-ease-grow), visibility 0s linear .2s;
}
.sh-x{
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px;
  margin: 0; padding: 0; border: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #FFFFFF;
  background: rgba(24, 24, 24, .56);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; transform: scale(.82);
  transition: opacity .26s var(--sh-ease-back), transform .26s var(--sh-ease-back), visibility 0s linear .26s;
}
.sh-x:hover{ background: rgba(24, 24, 24, .74); }
.sh-x:focus-visible{ outline: 2px solid var(--ap-orange); outline-offset: 3px; }
.sh.is-full .sh-x{
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .34s var(--sh-ease-grow) .22s, transform .34s var(--sh-ease-grow) .22s, visibility 0s;
}

/* The page under the sheet holds still. The padding stands in for a classic
   scrollbar's width while overflow is hidden, so nothing shifts. */
html.sh-open{ overflow: hidden; }
html.sh-open body{ padding-right: var(--sh-sbw, 0px); }

@media (max-width: 600px){
  .sh{ --sh-side: 0px; --sh-top: round(clamp(40px, 6svh, 80px), 8px); }
  .sh-shell{ border-radius: 14px 14px 0 0; }
  .sh-grab{ width: 72px; top: -16px; }
  .sh-x{ top: 8px; right: 8px; width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce){
  .sh-sheet, .sh-shell, .sh-grab, .sh-x{ transition: none; }
}