/* ring: commons
 * seed: snap (easing) · duration capped at --ss-modal-max (loading law 3.8)
 * still: ./still.md
 * reduced: cut
 * when-not: page veils, in-subject loading (that is C-STATUS-BUTTON), a second seed on enter vs exit
 *
 * C-MODAL — native <dialog>. Enter/exit one seed. Focus trapped. Esc closes.
 */

[data-c-modal] {
  box-sizing: border-box;
  width: min(28rem, calc(100% - 32px));
  max-width: min(28rem, calc(100% - 32px));
  margin: auto;
  padding: 24px;
  border: 1px solid var(--os-rule);
  border-radius: var(--os-radius-md);
  background: var(--os-ground);
  color: var(--os-ink);
  box-shadow: var(--os-press-shadow-out);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transform-origin: center center;
}

[data-c-modal][open][data-ready]:not([data-closing]) {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--ss-modal-max, 280ms) var(--ss-snap-easing, cubic-bezier(0.32, 0, 0.09, 1)),
    transform var(--ss-modal-max, 280ms) var(--ss-snap-easing, cubic-bezier(0.32, 0, 0.09, 1));
}

[data-c-modal][data-closing] {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity var(--ss-modal-max, 280ms) var(--ss-snap-easing, cubic-bezier(0.32, 0, 0.09, 1)),
    transform var(--ss-modal-max, 280ms) var(--ss-snap-easing, cubic-bezier(0.32, 0, 0.09, 1));
}

[data-c-modal]::backdrop {
  background: color-mix(in oklab, var(--os-ground-void) 48%, transparent);
  opacity: 0;
}

[data-c-modal][open][data-ready]:not([data-closing])::backdrop {
  opacity: 1;
  transition: opacity var(--ss-modal-max, 280ms) var(--ss-snap-easing, cubic-bezier(0.32, 0, 0.09, 1));
}

[data-c-modal][data-closing]::backdrop {
  opacity: 0;
  transition: opacity var(--ss-modal-max, 280ms) var(--ss-snap-easing, cubic-bezier(0.32, 0, 0.09, 1));
}

[data-c-modal] .c-modal-title {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

[data-c-modal] .c-modal-copy {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--os-muted);
}

[data-c-modal] .c-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

[data-c-modal] .c-modal-actions button:focus-visible {
  outline: var(--os-focus-ring-width) solid var(--os-focus-ring-color);
  outline-offset: var(--os-focus-ring-offset);
}

html[data-theme="night"] [data-c-modal],
html[data-night="1"] [data-c-modal] {
  background: color-mix(in oklab, var(--os-ground-void) 92%, var(--os-ground));
  color: var(--os-ground);
  border-color: color-mix(in oklab, var(--os-ground) 16%, transparent);
}

html[data-theme="night"] [data-c-modal] .c-modal-copy,
html[data-night="1"] [data-c-modal] .c-modal-copy {
  color: color-mix(in oklab, var(--os-ground) 55%, var(--os-ground-void));
}