/* =============================================================================
   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 {
    display: block;
    appearance: none;
    border: 0;
    background: transparent;
    inline-size: 100%;
    min-block-size: var(--touch-target);
    margin: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
  }
  .sheet__handle::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    inline-size: 2.5rem;
    block-size: var(--space-2xs);
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
  }
  .sheet__handle:focus-visible {
    outline: none;
  }
  .sheet__handle:focus-visible::before {
    box-shadow: var(--focus-ring);
  }

  /* 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; } }
  }
}