/* =============================================================================
   FILE: resources/css/components/modal.css
   Frontend Spec Section 5.11 — Standard Modal / Dialog
============================================================================= */

.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgba(22, 33, 29, 0.4);
  opacity: 0;
  transition: opacity var(--ease-sheet);
}

.modal-scrim.is-visible {
  opacity: 1;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 51;
  width: calc(100% - (var(--space-4) * 2));
  max-width: 320px;
  background-color: var(--color-paper);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  transition: transform var(--ease-sheet), opacity var(--ease-sheet);
}

.modal.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.modal__body {
  margin-top: var(--space-2);
}

.modal__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.modal__actions .btn {
  width: 100%;
}