.page-container {
  @apply mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8;
}

@layer components {
  .site-header {
    @apply border-b-[3px] border-slate-900;
  }

  .btn {
    @apply inline-flex items-center justify-center font-extrabold transition motion-reduce:transition-none;
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2;
  }

  .btn-primary {
    @apply rounded-xl border-[3px] border-slate-900 bg-white px-7 py-3 text-base text-slate-900;
    @apply shadow-[4px_4px_0_0_#0f172a] hover:translate-y-px hover:shadow-[3px_3px_0_0_#0f172a];
    @apply active:translate-y-px active:shadow-[3px_3px_0_0_#0f172a];
  }

  .btn-secondary {
    @apply rounded-xl border-[3px] border-slate-900 bg-white-smoke px-5 py-2.5 text-sm text-slate-900;
    @apply shadow-[3px_3px_0_0_#0f172a] hover:translate-y-px hover:shadow-[2px_2px_0_0_#0f172a];
    @apply active:translate-y-px active:shadow-[2px_2px_0_0_#0f172a];
  }

  .btn-accent {
    @apply rounded-xl border-[3px] border-slate-900 bg-vouch-blue px-4 py-2.5 text-sm text-slate-900;
    @apply shadow-[3px_3px_0_0_#0f172a] hover:translate-y-px hover:shadow-[2px_2px_0_0_#0f172a];
    @apply active:translate-y-px active:shadow-[2px_2px_0_0_#0f172a];
  }

  .btn-ghost {
    @apply rounded-lg border-0 bg-transparent px-2 py-1.5 text-sm font-semibold text-slate-600 shadow-none;
    @apply hover:translate-y-0 hover:text-slate-900;
    @apply active:text-slate-900;
  }

  .text-link {
    @apply text-sm font-semibold text-slate-600 underline decoration-slate-400 underline-offset-2;
    @apply hover:text-slate-900;
    @apply active:text-slate-900;
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2 rounded;
  }

  .btn-sm {
    @apply px-4 py-2 text-sm;
  }

  .btn-sm.btn-primary {
    @apply shadow-[3px_3px_0_0_#0f172a] hover:shadow-[2px_2px_0_0_#0f172a];
    @apply active:shadow-[2px_2px_0_0_#0f172a];
  }

  .btn-google {
    @apply inline-block overflow-hidden rounded-xl border-[3px] border-slate-900 bg-white p-0;
    @apply shadow-[4px_4px_0_0_#0f172a] transition motion-reduce:transition-none;
    @apply hover:translate-y-px hover:shadow-[3px_3px_0_0_#0f172a];
    @apply active:translate-y-px active:shadow-[3px_3px_0_0_#0f172a];
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-2;
  }

  .btn-compose {
    @apply gap-3 rounded-xl border-[3px] border-slate-900 bg-white px-4 py-2.5 text-sm text-slate-900;
    @apply shadow-[3px_3px_0_0_#0f172a] hover:translate-y-px hover:shadow-[2px_2px_0_0_#0f172a];
    @apply active:translate-y-px active:shadow-[2px_2px_0_0_#0f172a];
  }

  .app-heading {
    @apply text-3xl font-extrabold tracking-tight text-slate-950 sm:text-4xl;
  }

  .app-lead {
    @apply text-lg font-semibold leading-relaxed text-slate-900;
  }

  .app-section-title {
    @apply text-lg font-extrabold text-slate-900;
  }

  .card {
    @apply rounded-2xl border-[3px] border-slate-900 bg-white p-4 shadow-[6px_6px_0_0_#0f172a] sm:p-5;
  }

  .pick-group > summary {
    @apply list-none cursor-pointer;
  }

  .pick-group > summary::-webkit-details-marker {
    display: none;
  }

  .pick-group__summary {
    @apply flex items-start gap-3;
  }

  .pick-group__summary-main {
    @apply min-w-0 flex-1 space-y-1;
  }

  .pick-group__title {
    @apply min-w-0;
  }

  .pick-group__summary .outreach-completed-status {
    @apply text-base sm:text-lg;
  }

  .pick-group__summary .outreach-completed-status__icon {
    @apply size-5;
  }

  .pick-group__chevron {
    @apply shrink-0 self-center text-slate-600 transition-[color,transform] duration-200 ease-out motion-reduce:transition-none;
  }

  .pick-group__summary:hover .pick-group__chevron {
    @apply scale-125 text-slate-900;
  }

  .pick-group[open] > .pick-group__summary .pick-group__chevron {
    @apply rotate-180;
  }

  .pick-group[open] > .pick-group__summary {
    @apply pb-3;
  }

  .pick-group__body {
    @apply border-t-2 border-slate-900/10 pt-4;
  }

  .contact-picker__row {
    @apply flex w-full cursor-pointer items-start gap-3 rounded-xl border-2 border-transparent px-3 py-2.5 transition-colors;
  }

  .contact-picker__row:hover {
    @apply bg-vouch-blue/15;
  }

  .contact-picker__row:has(.contact-picker__checkbox:checked) {
    @apply bg-vouch-blue/5;
  }

  .contact-picker__row:has(.contact-picker__checkbox:checked):hover {
    @apply bg-vouch-blue/15;
  }

  .contact-picker__checkbox {
    @apply mt-0.5 size-5 shrink-0 rounded border-2 border-slate-900 text-vouch-blue;
    @apply outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-900 focus-visible:ring-offset-1;
  }

  .outreach-completed-status {
    @apply inline-flex items-center gap-1.5 text-sm font-semibold text-slate-600;
  }

  .outreach-completed-status__icon {
    @apply size-4 shrink-0 text-emerald-600;
  }

  .vouch-loading {
    @apply flex flex-col items-center gap-3;
  }

  .vouch-loading__icon {
    @apply size-24 shrink-0;
  }

  .vouch-loading__bubble {
    transform-box: fill-box;
    transform-origin: center;
    animation: vouch-loading-pulse 1.6s ease-in-out infinite;
    @apply motion-reduce:animate-none;
  }

  .vouch-loading__check {
    stroke-dasharray: 250;
    animation: vouch-check-draw 1.2s ease-in-out infinite alternate;
    @apply motion-reduce:animate-none;
  }

  .vouch-loading__subtext {
    @apply text-sm font-semibold text-slate-600;
  }

  @media (prefers-reduced-motion: reduce) {
    .vouch-loading__check {
      stroke-dashoffset: 0;
    }
  }
}

@keyframes vouch-loading-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes vouch-check-draw {
  from {
    stroke-dashoffset: 250;
  }

  to {
    stroke-dashoffset: 0;
  }
}