/* components/sheet.css — BottomSheet / FilterSheet (components/sheet.js).
 *
 * One DOM, CSS-switched (MOBILE_PLAN.md §2.4): below 768 px the panel is a
 * bottom sheet — full width, `--sheet-radius` on the top corners, height
 * capped by `--sheet-max-h`, sliding in over `--dur` (0 under reduced
 * motion). At 768 px and above it is a centred dialog, max `--sheet-width`.
 * `size: "full"` (`dialog.sheet--full`) is the near-full-screen panel.
 *
 * The body scrolls internally (`overflow-y: auto; overscroll-behavior:
 * contain`). The dialog carries a bottom band of `var(--keyboard-inset)`
 * (kept current by lib/viewport.js) as padding, so the whole panel — not
 * just the footer — ends at the keyboard's top edge and every field can be
 * scrolled above it. The footer sits at `bottom: 0` with `padding-bottom:
 * max(var(--space-3), var(--safe-bottom))` and so clears the home indicator.
 *
 * Colour, type, spacing, radius and motion come only from tokens.css. The
 * backdrop uses the Modal family (`--backdrop-dim` / `--backdrop-solid` /
 * `--backdrop-blur`) — P1's pick of the two families F1 and main left in
 * tokens.css — so the sheet and components/modal.js share one scrim.
 * No literal colours anywhere here.
 */

/* Background scroll lock while at least one sheet is open. `scrollbar-gutter`
   keeps the reserved gutter while `overflow: hidden` hides the scrollbar, so
   classic-scrollbar desktops do not shift sideways. */
html.sheet-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

dialog.sheet {
  /* The bottom padding is the keyboard band: the panel above it ends at the
     keyboard, and `max-height` (border-box) then caps the panel at
     `--sheet-max-h - var(--keyboard-inset)`. */
  padding: 0 0 var(--keyboard-inset);
  border: 0;
  background: transparent;
  color: var(--ink);
  width: 100%;
  max-width: min(var(--sheet-width), calc(100vw - var(--space-6)));
  max-height: var(--sheet-max-h);
  overflow: visible;
  /* At ≥768 the dialog is the centred panel of brief §18. */
  margin: auto;
}

dialog.sheet::backdrop {
  background: var(--backdrop-solid);
}

@supports (backdrop-filter: blur(2px)) {
  dialog.sheet::backdrop {
    background: var(--backdrop-dim);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
  }
}

.sheet-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(var(--sheet-max-h) - var(--keyboard-inset));
  background: var(--modal-surface);
  border: 1px solid var(--modal-border);
  border-radius: var(--sheet-radius);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--modal-pad) var(--modal-pad) var(--space-3);
  flex: 0 0 auto;
}

.sheet-title {
  margin: 0;
  font-size: var(--modal-title-size);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.sheet-close {
  appearance: none;
  position: relative;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-section);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
  /* 44 px hit area without a 44 px glyph. */
  min-width: var(--hit-min);
  min-height: var(--hit-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* The rounded corner clips the hit box just enough to fail the 44 px probe
 * at (±21, ±21). A square, transparent overlay restores the full corner hit
 * area without touching the rounded look (the hover wash stays rounded). */
.sheet-close::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sheet-close:hover {
  color: var(--ink);
  background: var(--panel-hover);
}

.sheet-close:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* The body scrolls; the head and the footer stay put. */
.sheet-body {
  padding: 0 var(--modal-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1 1 auto;
}

/* Sticky footer: the panel itself ends at the keyboard band (the dialog's
   `padding-bottom` above), and the bottom padding clears the home indicator
   (brief §21). */
.sheet-foot {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--modal-pad);
  padding-bottom: max(var(--space-3), var(--safe-bottom));
  border-top: 1px solid var(--modal-border);
  background: var(--modal-surface);
}

/* Footer buttons keep the shared .btn skin and a 44 px target (brief §6). */
.sheet-action {
  min-height: var(--hit-min);
  min-width: var(--hit-min);
}

/* The first action of a split pair ("Clear" in the FilterSheet) pins left. */
.sheet-action--start {
  margin-right: auto;
}

/* size:"full" — the near-full-screen panel (brief §18). */
dialog.sheet--full {
  max-height: calc(100dvh - var(--safe-top) - var(--space-4));
}

/* ---- phones: a bottom sheet (brief §18) ---------------------------------- */

@media (max-width: 767.98px) {
  dialog.sheet {
    width: 100%;
    max-width: 100%;
    margin: auto auto 0;
    max-height: var(--sheet-max-h);
  }

  dialog.sheet[open] {
    animation: sheet-in var(--dur) ease;
  }

  /* size:"full" fills its dialog: the panel stretches to the dialog's content
     box, so there is no transparent strip for a tap-to-close click. */
  dialog.sheet--full {
    height: calc(100dvh - var(--safe-top) - var(--space-4));
    max-height: calc(100dvh - var(--safe-top) - var(--space-4));
  }

  dialog.sheet--full .sheet-panel {
    height: 100%;
    max-height: 100%;
  }

  .sheet-panel {
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    border-bottom: 0;
  }

  .sheet-head {
    padding-top: var(--space-4);
  }
}

/* Slide up from the bottom edge. `--dur` is 0 under prefers-reduced-motion
   (tokens.css), so the animation is already reduced-motion safe. */
@keyframes sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}