@layer surfaces {
  :where(dialog[data-modal-surface]) {
    box-sizing: border-box;
    max-block-size: var(--surface-modal-max-block);
    max-inline-size: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - (2 * var(--space-section)));
  }

  :where(dialog[data-modal-surface])::backdrop,
  .modal::backdrop { background: var(--bg-overlay); }

  .modal {
    --modal-dialog-inline-size: min(520px, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - (2 * var(--space-section))));
    --modal-sheet-inline-size: min(640px, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - (2 * var(--space-section))));
    --modal-reference-inline-size: min(720px, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - (2 * var(--space-section))));
    --modal-confirm-inline-size: min(420px, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - (2 * var(--space-section))));
    background: transparent;
    border: 0;
    color: var(--text);
    inline-size: var(--modal-dialog-inline-size);
    margin: auto;
    padding: 0;
    z-index: var(--z-modal);
  }

  .modal[data-modal-policy="sheet"] { inline-size: var(--modal-sheet-inline-size); }
  .modal[data-modal-policy="reference"],
  .modal-wide { inline-size: var(--modal-reference-inline-size); }
  .modal[data-modal-policy="confirm"] { inline-size: var(--modal-confirm-inline-size); }

  .modal-surface {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-block-size: var(--surface-modal-max-block);
    overflow: hidden;
  }

  .modal-header,
  .modal-footer {
    align-items: center;
    display: flex;
    gap: var(--space-related);
    padding: var(--space-section);
  }

  .modal-header { border-block-end: 1px solid var(--border); justify-content: space-between; }
  .modal-footer { border-block-start: 1px solid var(--border); justify-content: flex-end; }
  .modal-body { display: grid; gap: var(--space-cluster); min-block-size: 0; padding: var(--space-section); scroll-padding-block: var(--surface-focus-scroll-padding); }
  .modal-title { font-size: var(--ui-font-size); font-weight: var(--ui-font-weight-strong); }
  .modal-description { color: var(--text-sec); }

  .modal-close-button { inline-size: var(--control-height); padding: 0; }
  .modal-primary-button { background: var(--text); color: var(--bg-surface); }
  .modal-danger-button { color: var(--danger); }

  .modal-field { display: grid; gap: var(--space-tight); }
  .modal-field-label { color: var(--text); font-size: var(--ui-font-size); font-weight: var(--ui-font-weight-strong); }
  .modal-field-optional { color: var(--text-sec); font-weight: 400; }
  .modal-fieldset { border: 1px solid var(--border); display: grid; gap: var(--space-cluster); margin: 0; padding: var(--space-cluster); }
  .modal-fieldset-title { color: var(--text); font-size: var(--ui-font-size); font-weight: var(--ui-font-weight-strong); padding-inline: var(--space-tight); }
  .modal-grid { display: grid; gap: var(--space-cluster); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  .modal-text-input,
  .modal-textarea,
  .modal-select {
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--ui-field-font-size);
    font-weight: var(--ui-field-font-weight);
    line-height: var(--ui-field-line-height);
    inline-size: 100%;
    padding-block: var(--space-related);
  }

  .modal-textarea { min-block-size: 96px; resize: vertical; }
  .modal-select { appearance: auto; }
  .modal-warning-text { border: 1px solid var(--border); color: var(--text); margin: 0; padding: var(--space-cluster); }
  .modal-checkbox-field,
  .modal-check-row { align-items: center; display: flex; gap: var(--space-related); }
  .modal-check-row { color: var(--text); margin: 0; }
  .modal-checkbox { block-size: 1rem; flex: 0 0 auto; inline-size: 1rem; }
  .modal-checklist { color: var(--text-sec); display: grid; gap: var(--space-tight); margin: 0; padding-inline-start: 1.25rem; }

  .review-note-anchor-preview {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--shape-control);
    margin: 0;
    padding: var(--space-related) var(--space-cluster);
  }

  .review-note-status[data-type="error"] { color: var(--danger); }
  .restore-version-meta { margin: 0; }
  .shortcut-row { align-items: center; display: grid; gap: var(--space-cluster); grid-template-columns: 1fr auto; }
  .shortcut-row kbd { border: 1px solid var(--border); font-family: var(--font-mono); padding: 2px var(--space-tight); }

  @media (max-width: 599px) {
    .modal {
      inline-size: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - (2 * var(--space-cluster)));
    }

    .modal-surface {
      max-block-size: calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - (2 * var(--space-cluster)));
    }
  }
}

@layer components {
  :where(.modal, .command-palette)[open] {
    animation: compose-surface-reveal var(--motion-duration-surface) var(--motion-ease-out) both;
    transform-origin: top center;
  }

  :where(.modal, .command-palette)[open]::backdrop {
    animation: compose-backdrop-reveal var(--motion-duration-surface) var(--motion-ease-standard) both;
  }

  .modal[data-modal-policy="sheet"][open] {
    animation-name: compose-sheet-reveal;
  }

  .modal[data-modal-policy="confirm"][open] {
    --motion-distance-surface: 4px;
    transform-origin: center;
  }

  @keyframes compose-backdrop-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.modal, .command-palette)[open],
    :where(.modal, .command-palette)[open]::backdrop,
    .modal[data-modal-policy="sheet"][open] {
      animation-duration: var(--motion-duration-reduced);
    }
  }
}