@layer components {
  /* Turbo-frame modal, rendered by shared/_modal:
   * <turbo-frame id="modal"> → <dialog> opened with showModal
   *
   *   .modal__dialog[--narrow|--medium|--wide]   the <dialog>; scrolls when content is tall
   *     .modal__header
   *       .modal__title         icon + h4
   *       .modal__close
   *     .modal__body            form content
   *       .modal__footer        stacked actions, side by side from 640px
   */
  .modal__dialog {
    background-color: var(--color-canvas);
    border: 0;
    border-radius: 0.25rem;
    color: inherit;
    inline-size: calc(100% - 2rem);
    margin: 1rem auto auto;
    max-block-size: calc(100dvh - 2rem);
    max-inline-size: none;
    overflow-y: auto;
    padding: 0;
    text-align: start;

    &:not([open]) {
      display: none;
    }

    &::backdrop {
      background-color: var(--color-scrim);
    }

    @media (min-width: 768px) {
      margin: auto;
    }

    @media (min-width: 1024px) {
      max-inline-size: 48rem;
    }
  }

  .modal__dialog--narrow {
    max-inline-size: 32rem;
  }

  .modal__dialog--medium {
    @media (min-width: 768px) {
      max-inline-size: 42rem;
    }
  }

  .modal__dialog--wide {
    @media (min-width: 1024px) {
      max-inline-size: 56rem;
    }

    @media (min-width: 1280px) {
      max-inline-size: 64rem;
    }
  }

  .modal__header {
    align-items: center;
    border-block-end: 1px solid var(--color-ink-lighter);
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.5rem;
  }

  .modal__title {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    min-inline-size: 0;

    .icon,
    [class^="ph-"],
    [class*=" ph-"] {
      color: var(--color-primary-400);
      font-size: 1rem;
    }

    /* Wraps rather than truncates: picker titles carry the grid position. */
    h4 {
      color: var(--color-ink-darker);
      flex: 1;
      font-size: 0.8125rem;
      font-weight: 600;
      line-height: 1.43;
      min-inline-size: 0;
      overflow-wrap: anywhere;
      text-transform: uppercase;
    }
  }

  .modal__close {
    align-items: center;
    color: var(--color-ink-light);
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    justify-content: center;
    transition: color 150ms ease;

    &:hover {
      color: var(--color-ink-dark);
    }

    &:focus {
      outline: none;
    }
  }

  .modal__body {
    padding: 1.5rem;
  }

  .modal__footer {
    border-block-start: 1px solid var(--color-ink-lightest);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-start: 1.5rem;
    padding: 0.75rem 1rem;

    > * {
      inline-size: 100%;
    }

    @media (min-width: 640px) {
      align-items: center;
      flex-direction: row-reverse;

      > * {
        flex: 1;
        inline-size: auto;
      }
    }
  }

  /* Confirm dialog (layouts/shared/_confirm_dialog, helpers/confirm_modal.js)
  /* ------------------------------------------------------------------------ */

  /* A modal <dialog> is centered by margin: auto, which normalize.css zeroes. */
  .confirm-dialog {
    background: transparent;
    border: 0;
    inline-size: calc(100% - 2rem);
    margin: auto;
    max-inline-size: 24rem;
    overflow: visible;
    padding: 0;

    &::backdrop {
      animation: confirm-fade 0.15s ease;
      background: rgb(16 42 67 / 50%);
    }
  }

  .confirm__card {
    background-color: var(--color-canvas);
    border-radius: 1rem;
    box-shadow: var(--shadow-overlay);
    inline-size: 100%;
    overflow: hidden;

    .confirm-dialog[open] & {
      animation: confirm-pop 0.17s cubic-bezier(0.22, 1, 0.36, 1);
    }
  }

  .confirm__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.75rem 1.5rem 1.25rem;
    text-align: center;
  }

  .confirm__icon {
    align-items: center;
    background-color: var(--color-primary-50);
    block-size: 3.5rem;
    border-radius: 1rem;
    color: var(--color-primary-500);
    display: flex;
    font-size: 1.5rem;
    inline-size: 3.5rem;
    justify-content: center;

    .confirm-dialog--destructive & {
      background-color: var(--color-danger-50);
      color: var(--color-danger-500);
    }
  }

  .confirm__title {
    color: var(--color-ink);
    font-size: 1.25rem;
    font-weight: 600;
  }

  .confirm__description {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    line-height: 1.625;
    max-inline-size: 34ch;
  }

  .confirm__actions {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    padding: 0 1.25rem 1.25rem;
  }

  .confirm__btn {
    block-size: 2.75rem;
    border-radius: 0.75rem;
    color: var(--color-ink-darker);
    background-color: var(--color-ink-lightest);
    cursor: pointer;
    flex: 1;
    font-size: var(--text-small);
    font-weight: 600;
    transition: background-color 150ms ease;
    white-space: nowrap;

    &:hover {
      background-color: var(--color-ink-lighter);
    }
  }

  .confirm__btn--commit {
    background-color: var(--color-primary-400);
    color: var(--color-ink-inverted);

    &:hover { background-color: var(--color-primary-500); }
    &:active { background-color: var(--color-primary-600); }

    .confirm-dialog--destructive & {
      background-color: var(--color-danger-500);

      &:hover { background-color: var(--color-danger-600); }
      &:active { background-color: var(--color-danger-700); }
    }
  }

  @keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes confirm-pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: reduce) {
    .confirm-dialog::backdrop,
    .confirm__card { animation: none !important; }
  }
}