/* =============================================================================
   COMPONENT: sheet — a bottom sheet for secondary choices / short forms, built
   on native <dialog> (MOBILE.md). Animates up from the thumb zone; on desktop
   it centers as a modal. Pure CSS + the dialog element — no JS library.
   Open/close with dialog.showModal()/close() from a tiny Stimulus controller.
   ========================================================================== */
@layer components {
  .sheet {
    border: 0;
    padding: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    margin: auto auto 0;                 /* dock to the bottom on mobile */
    background: var(--surface-raised);
    border-start-start-radius: var(--radius-xl);
    border-start-end-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transition: translate var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete;
    translate: 0 100%;
    opacity: 0;
  }
  .sheet[open] { translate: 0 0; opacity: 1; }
  @starting-style { .sheet[open] { translate: 0 100%; opacity: 0; } }
  .sheet::backdrop { background: oklch(0% 0 0 / 0.4); }
  .sheet__body { padding: var(--space-lg); padding-block-end: max(var(--space-lg), var(--safe-bottom)); }
  .sheet__handle { inline-size: 2.5rem; block-size: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-border-strong); margin: var(--space-xs) auto; }

  /* Action row: primary on top, dismiss (Cancel/Done) full-width and centered below. */
  .sheet .cluster:has([data-action="sheet#close"]) {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .sheet .cluster:has([data-action="sheet#close"]) > .btn {
    inline-size: 100%;
    justify-content: center;
  }

  /* Touch devices lack hover — show the ghost dismiss tint by default. */
  @media (hover: none) {
    .sheet [data-action="sheet#close"].btn--ghost { background: var(--accent-tint); }
  }

  @media (min-width: 48rem) {
    .sheet {
      margin: auto;                      /* center as a modal on desktop */
      max-inline-size: 32rem;
      border-radius: var(--radius-xl);
      translate: 0 0;
    }
    .sheet--media { max-inline-size: min(42rem, 92vw); }
    @starting-style { .sheet[open] { opacity: 0; translate: 0 1rem; } }
  }
}