/* ==========================================================
   IROZON DESIGN SYSTEM — Dialog & Sheet (canonical, v1)
   Public API:
     <dialog class="iz-dialog">
       <header class="iz-dialog__header"><h2>...</h2></header>
       <div class="iz-dialog__body">...</div>
       <footer class="iz-dialog__footer">...</footer>
     </dialog>
     <dialog class="iz-dialog" data-variant="sheet">
   Built on native <dialog> — showModal()/close() give focus trapping,
   Escape-to-dismiss, and the ::backdrop for free. This file has no JS
   dependency; documentation-only JS (site.js) only ever calls the
   native API, never re-implements it.
   ========================================================== */

.iz-dialog {
  border: none;
  border-radius: var(--r-lg);
  padding: 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
  max-inline-size: min(480px, calc(100vw - 32px));
  inline-size: 100%;
  margin: auto;
}
.iz-dialog::backdrop {
  background: var(--color-overlay);
}

.iz-dialog__header,
.iz-dialog__body,
.iz-dialog__footer {
  padding-inline: 24px;
}
.iz-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-block-start: 24px;
  padding-block-end: 12px;
}
.iz-dialog__header h2 {
  font-family: var(--font-label);
  font-size: var(--fs-h3);
  margin: 0;
}
.iz-dialog__body {
  padding-block: 4px;
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  max-block-size: 60vh;
  overflow-y: auto;
}
.iz-dialog__footer {
  padding-block-start: 16px;
  padding-block-end: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---------- Entrance ----------
   Subtle opacity + a small spatial settle, driven by an [open]
   animation rather than @starting-style — a native <dialog> starts at
   display:none, and [open] fires reliably the instant showModal()
   runs, so this is the simpler, safer-to-reason-about mechanism.
   There's no matching close animation — .close() is instant by
   default; an animated close is a documented JS pattern (delay
   close() one frame past an exit class), not built into this file. */
.iz-dialog[open] {
  animation: iz-dialog-in var(--motion-duration-standard) var(--motion-ease-standard);
}
@keyframes iz-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.iz-dialog::backdrop {
  animation: iz-dialog-backdrop-in var(--motion-duration-standard) var(--motion-ease-standard);
}
@keyframes iz-dialog-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- Sheet ----------
   Pinned to the inline-end edge, full height, meaningful directional
   entrance instead of the Dialog's small settle. Collapses to a
   bottom sheet at narrow widths, where a side sheet stops making
   spatial sense. */
.iz-dialog[data-variant="sheet"] {
  position: fixed;
  inset-block: 0;
  inset-inline: auto 0;
  margin: 0;
  max-inline-size: 420px;
  inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  border-radius: 0;
}
.iz-dialog[data-variant="sheet"][data-size="large"] {
  max-inline-size: 80vw;
  inline-size: 80vw;
}
.iz-dialog[data-variant="sheet"][open] {
  display: flex;
  flex-direction: column;
  animation-name: iz-sheet-in-end;
}
.iz-dialog[data-variant="sheet"] > .iz-dialog__header,
.iz-dialog[data-variant="sheet"] > .iz-dialog__footer {
  flex: 0 0 auto;
}
.iz-dialog[data-variant="sheet"] > .iz-dialog__body {
  flex: 1 1 auto;
  min-block-size: 0;
  max-block-size: none;
}
@keyframes iz-sheet-in-end {
  from {
    opacity: 0.6;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (max-width: 640px) {
  .iz-dialog[data-variant="sheet"] {
    inset-block: auto 0;
    inset-inline: 0;
    block-size: auto;
    max-block-size: 85vh;
    max-inline-size: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .iz-dialog[data-variant="sheet"][data-size="large"] {
    max-inline-size: 100%;
    inline-size: 100%;
  }
  .iz-dialog[data-variant="sheet"][open] {
    animation-name: iz-sheet-in-bottom;
  }
  @keyframes iz-sheet-in-bottom {
    from {
      opacity: 0.6;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ---------- Reduced motion ----------
   Spatial travel is removed; a short opacity change keeps the open
   moment perceptible without motion. */
@media (prefers-reduced-motion: reduce) {
  .iz-dialog[open],
  .iz-dialog[data-variant="sheet"][open] {
    animation: iz-dialog-fade var(--motion-duration-fast) linear;
  }
  .iz-dialog::backdrop {
    animation-duration: var(--motion-duration-fast);
    animation-timing-function: linear;
  }
}
@keyframes iz-dialog-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}