@layer components {
  .modal {
    align-items: center;
    background: rgb(15 23 42 / 0.6);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 2rem 1rem;
    position: fixed;
    z-index: 50;
  }

  .modal.hidden {
    display: none;
  }

  .modal .hidden {
    display: none;
  }

  .modal--dark {
    background: rgb(2 6 23 / 0.95);
    color: var(--color-white);
  }

  .modal__panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    inline-size: min(100%, 40rem);
    padding: 1.5rem;
  }

  .modal__panel--compact {
    padding: 1.25rem;
  }

  .modal__panel--stepped {
    inline-size: min(100%, 42rem);
    max-block-size: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .modal__panel-inner {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    min-block-size: 0;
  }

  .modal__form {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-block-size: 0;
  }

  .modal__body {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    padding: 0.25rem;
    margin: -0.25rem;
  }

  .modal__footer {
    flex-shrink: 0;
  }

  /* Progress indicator */
  .progress-indicator {
    padding-block: 0;
  }

  .progress-indicator__list {
    align-items: center;
    display: flex;
    gap: 0;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .progress-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--block-space-quarter);
    position: relative;
    flex: 1;
    min-width: 0;
  }

  /* Connector line between steps */
  .progress-step:not(:last-child)::after {
    background: var(--color-border);
    block-size: 2px;
    content: '';
    inset-block-start: 0.875rem;
    inset-inline-start: calc(50% + 1rem);
    position: absolute;
    inline-size: calc(100% - 2rem);
  }

  .progress-step--completed:not(:last-child)::after {
    background: var(--color-emerald-500);
  }

  .progress-step__marker {
    align-items: center;
    background: var(--color-slate-100);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-ink-muted);
    display: flex;
    font-size: var(--text-xs);
    font-weight: 600;
    block-size: 1.75rem;
    inline-size: 1.75rem;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }

  .progress-step__number {
    display: block;
  }

  .progress-step__check {
    display: none;
  }

  .progress-step__label {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
  }

  /* Current step */
  .progress-step--current .progress-step__marker {
    background: var(--color-emerald-600);
    border-color: var(--color-emerald-600);
    color: var(--color-white);
  }

  .progress-step--current .progress-step__label {
    color: var(--color-ink);
    font-weight: 600;
  }

  /* Completed step */
  .progress-step--completed .progress-step__marker {
    background: var(--color-emerald-500);
    border-color: var(--color-emerald-500);
    color: var(--color-white);
  }

  .progress-step--completed .progress-step__number {
    display: none;
  }

  .progress-step--completed .progress-step__check {
    display: block;
  }

  .progress-step--completed .progress-step__label {
    color: var(--color-emerald-700);
  }

  /* Campaign selection cards */
  .campaign-card {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .campaign-card:hover {
    border-color: var(--color-emerald-300);
  }

  .campaign-card:has(input:checked),
  .campaign-card--selected {
    border-color: var(--color-emerald-500);
    box-shadow: 0 0 0 1px var(--color-emerald-500);
  }

  .campaign-card:has(input:focus-visible) {
    outline: 2px solid var(--color-emerald-500);
    outline-offset: 2px;
  }

  /* Input error state */
  .input--error {
    border-color: var(--color-rose-500);
  }

  .input--error:focus {
    border-color: var(--color-rose-500);
    box-shadow: 0 0 0 3px rgb(244 63 94 / 0.15);
  }

  /* Fullscreen modals on mobile */
  @media (max-width: 640px) {
    .modal {
      padding: 0;
    }

    .modal__panel {
      border-radius: 0;
      block-size: 100%;
      inline-size: 100%;
      max-block-size: 100%;
      display: flex;
      flex-direction: column;
    }

    .modal__panel--stepped {
      max-block-size: 100%;
    }

    .modal__body {
      flex: 1;
    }
  }
}