/*!
 * drawer.css — bottom-sheet drawer (vanilla port of vaul v1.1.2).
 *
 * The top section (positioning, transforms, scroll-lock, handle hit-
 * area) is ported verbatim from vaul/src/style.css, scoped to
 * bottom-direction modal sheets. The shy-tomato overrides at the tail
 * supply the visual treatment (radius, surface color, shadow, drag-
 * handle tone, backdrop tone) using design tokens so the drawer reads
 * as shy-tomato rather than as raw vaul. drawer.js handles all dynamic
 * behavior; the static rules here only cover the FOUC-flash before
 * drawer.js initializes plus the dimensions vaul itself does not set.
 *
 * Ported from vaul (https://github.com/emilkowalski/vaul) v1.1.2,
 * commit 73d06cd. License at ui/static/js/THIRD_PARTY/vaul-LICENSE.md.
 */

@layer components {
  /* The drawer surface itself. ---------------------------------------------- */
  [data-vaul-drawer] {
    /* Stop the OS from interpreting touchmoves as scroll/zoom while we drag. */
    touch-action: none;
    /* Promote to its own compositor layer for buttery transforms. */
    will-change: transform;
    /* Transition is set inline by drawer.js when needed; defaults to none here so
       interactive drags don't fight the animation curve. */
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    /* Anchor to bottom of viewport — consumer can override max-height etc. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Initial state — pushed off-screen until .open() is called. JS keeps this
       in sync via inline transform; we set it here so the FOUC-flash before
       drawer.js initializes still has the sheet hidden. */
    transform: translate3d(0, 100%, 0);
  }

  /* Prevent text selection while actively dragging — selection blocks pointer
     events on iOS and creates "drag the highlight" artifacts on desktop. */
  [data-vaul-drawer].vaul-dragging,
  [data-vaul-drawer].vaul-dragging * {
    user-select: none;
    -webkit-user-select: none;
  }

  /* Stylus-on-trackpad / mouse — vaul disables selection on hover-fine devices
     so click-drags don't accidentally select drawer body text. */
  @media (hover: hover) and (pointer: fine) {
    [data-vaul-drawer] {
      user-select: none;
      -webkit-user-select: none;
    }
  }

  /* Optional decorative drag handle. Consumer adds [data-vaul-handle] to a
     <div> at the top of the sheet. Behaviour: visual only — drag works
     anywhere on the sheet, per the shy-tomato scope. */
  [data-vaul-handle] {
    display: block;
    position: relative;
    opacity: 0.7;
    background: currentColor;
    margin-left: auto;
    margin-right: auto;
    height: 5px;
    width: 32px;
    border-radius: 1rem;
    /* Allow vertical pan gestures to reach our pointer handler. */
    touch-action: pan-y;
  }

  [data-vaul-handle]:hover,
  [data-vaul-handle]:active {
    opacity: 1;
  }

  /* Larger invisible tap target (>=44x44 per Apple HIG) wrapped around the
     visible handle. Consumer places <span data-vaul-handle-hitarea> inside. */
  [data-vaul-handle-hitarea] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 2.75rem);
    height: max(100%, 2.75rem);
    touch-action: inherit;
  }

  /* Backdrop overlay. Consumer supplies the element; we manage opacity inline
     during drag and transition it on open/close. */
  [data-vaul-overlay] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    /* Don't intercept pointers when closed — JS toggles via data-state. */
    pointer-events: none;
  }
  [data-vaul-overlay][data-state='open'] {
    pointer-events: auto;
  }

  /* Respect prefers-reduced-motion: kill the cubic-bezier and snap to states.
     drawer.js also handles this for inline transform; the rule below covers
     any CSS-only fallback path. */
  @media (prefers-reduced-motion: reduce) {
    [data-vaul-drawer],
    [data-vaul-overlay] {
      transition: none !important;
    }
  }

  /* ---------------------------------------------------------------------
   * shy-tomato token overrides
   *
   * The vaul port's stylesheet (above) leaves visual treatment to the
   * consumer. These rules supply the design-bible-aligned surface so
   * the drawer reads as shy-tomato:
   *   - drawer surface uses the same md-surface as the peek-panel
   *     side-sheet on desktop, so the cross-viewport identity holds.
   *   - top corner radius matches the peek-panel's --radius-xl on the
   *     desktop side-sheet (border-radius-xl, top-corners only).
   *   - shadow uses --shadow-xl, matching the peek-panel.
   *   - safe-area inset for iPhone home-indicator clearance.
   *   - drag-handle tone keys off the surface variant for legibility on
   *     either light or dark surfaces (currentColor is inherited from
   *     the wrapper, which gets a token-aware color below).
   *   - backdrop tint keeps the vaul default rgba (0,0,0,0.45) — the
   *     spec calls for ~40% black scrim and 0.45 is within rounding.
   * ------------------------------------------------------------------- */

  #peek-drawer {
    /* Baseline positioning matches the [data-vaul-drawer] rule above —
       inlined here so the wrapper is positioned even before drawer.js
       attaches on mobile (avoids a FOUC-flash) and so desktop CSS has
       a base to override with `inset: 0 0 0 auto`. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translate3d(0, 100%, 0);
    background: var(--md-surface-container-low);
    color: var(--md-on-surface-variant);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    /* Cap at 85vh per the spec (closed/full snap points, no mid-snap). */
    max-height: 85vh;
    /* Keep the drawer above the backdrop. */
    z-index: 60;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* The inner peek-panel content scrolls inside; the drawer surface
       itself does not scroll. */
    overflow: hidden;
  }

  #peek-backdrop {
    /* Just below the drawer surface. */
    z-index: 55;
  }

  /* The handle row hosts the decorative grip with breathing room above
     and below so the hit-area target sits comfortably. */
  .peek-drawer__handle-row {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0 var(--space-2);
    color: var(--md-on-surface-variant);
    /* Cheap visual signal that this area is the grip; the actual hit area
       is wider via [data-vaul-handle-hitarea]. */
    flex: 0 0 auto;
  }

  /* When wrapping the peek-panel content inside the drawer, the peek-panel
     itself must scroll (its body is taller than 85vh). Drop the peek-
     panel's own fixed positioning + side-sheet transform; let the drawer
     wrapper own positioning. */
  #peek-drawer .peek-panel {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: none;
    /* The peek-panel becomes the scrollable body of the drawer. */
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
    z-index: auto;
  }
}