/**
 * @file
 * Modal component styles.
 * Overlay uses STEEL at 60%.
 */

.modal[open] {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: none;
  padding: 0;
  margin-block: auto;
  margin-inline: var(--gutter-min, 24px);
  background: transparent;
  inline-size: calc(100vw - var(--gutter-min, 24px) * 2);
  max-inline-size: var(--modal-width, 960px);
  max-block-size: calc(100dvh - var(--space-xl, 2rem) * 2);
  overflow: hidden;
  color: var(--color-charcol, #1d2d3a);
}

.modal::backdrop {
  background: rgba(81, 88, 97, 0.6);
}

.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  box-sizing: border-box;
  min-block-size: 0;
  max-block-size: 100%;
  --modal-scroll-gutter: var(--space-md, 1rem);
  padding: var(--space-lg, 1.5rem);
  background: var(--color-white, #fff);
  border-radius: var(--radius-2xl, 1rem);
  box-shadow: 0 0 24px -4px rgba(81, 88, 97, 0.16);
  overflow: hidden;
}

.modal__close {
  position: absolute;
  inset-block-start: var(--space-md, 1rem);
  inset-inline-end: var(--space-md, 1rem);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm, 0.25rem);
  background: transparent;
  color: var(--color-charcol, #1d2d3a);
  cursor: pointer;
}

.modal__close-icon {
  display: block;
  inline-size: 24px;
  block-size: 24px;
  background: url('../../images/icons/close-x.svg') center / contain no-repeat;
}


.modal__title sup {
  font-size: 0.65em;
  line-height: 0;
}

.modal__title h2 {
  margin: 0 0 var(--space-2xl, 2.5rem);
  padding-inline-end: var(--space-3xl, 3rem);
  color: var(--color-charcol, #1d2d3a);
  font-size: var(--size-h2, 28px);
  font-weight: normal;
  line-height: 1.25;
  font-family: var(--font-tilt-neon, 'Tilt Neon', sans-serif);
}

.modal__scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-inline-end: calc(-1 * var(--modal-scroll-gutter));
  padding-inline-end: var(--modal-scroll-gutter);
  overflow-x: hidden;
}

.modal__content {
  min-block-size: 0;
}

.modal__content > :first-child {
  margin-block-start: 0;
}

.modal__content > :last-child {
  margin-block-end: 0;
}

/* Canvas editor — keep slot content editable without opening the dialog. */
body.path-canvas .modal {
  display: block;
  position: relative;
  inline-size: 100%;
  max-block-size: none;
  margin-block: var(--space-lg, 1.5rem);
}

body.path-canvas .modal::backdrop {
  display: none;
}

body.path-canvas .modal__panel {
  max-block-size: none;
}

body.path-canvas .modal__scroll {
  overflow: visible;
}

@media (min-width: 768px) {
  .modal[open] {
    margin-inline: auto;
    inline-size: min(
      calc(100vw - var(--space-xl, 2rem) * 2),
      var(--modal-width, 960px)
    );
    max-inline-size: none;
  }

  .modal__panel {
    padding: var(--space-2xl, 2.5rem);
  }

  .modal__close {
    inset-block-start: var(--space-xl, 1.5rem);
    inset-inline-end: var(--space-xl, 1.5rem);
  }

  .modal__title h2 {
    padding-inline-end: var(--space-4xl, 4rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .modal[open] {
    animation: modal-fade-in var(--transition-fast, 150ms ease-in-out);
  }

  .modal[open]::backdrop {
    animation: modal-backdrop-fade-in var(--transition-fast, 150ms ease-in-out);
  }
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modal-backdrop-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal[open],
  .modal[open]::backdrop {
    animation: none;
  }
}

@media (prefers-contrast: more) {
  .modal::backdrop {
    background: rgba(0, 0, 0, 0.85);
  }

  .modal__panel {
    outline: 3px solid var(--color-charcol, #1d2d3a);
  }
}