/* Onboarding
 * Styles specific to the onboarding funnel screens.
 * Uses shared components (cards, pills, buttons, animations) and the auth layout.
 */

@layer components {
  /* ── Screen layout ── */

  .onboarding-screen {
    width: 100%;
    max-width: 26rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .onboarding-screen__question {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: clamp(1.375rem, 4vw, 1.75rem);
    font-weight: 800;
    text-align: center;
    margin-block-end: 4px;
  }

  .onboarding-screen__hint {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    text-align: center;
    margin-block-end: 20px;
  }

  /* ── Welcome screen pillars ── */

  .welcome-subtitle {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-ink);
    margin-block-end: 40px;
    text-align: center;
    text-wrap: balance;
    max-width: 20rem;
  }

  .pillars {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-block-end: 40px;
  }

  .pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .pillar__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;

    & svg {
      width: 26px;
      height: 26px;
    }
  }

  .pillar__icon--plan {
    background: oklch(var(--lch-golden) / 0.15);
    color: oklch(var(--lch-golden));
  }

  .pillar__icon--find {
    background: oklch(var(--lch-laser) / 0.15);
    color: oklch(var(--lch-laser));
  }

  .pillar__icon--split {
    background: oklch(var(--lch-flare) / 0.15);
    color: oklch(var(--lch-flare));
  }

  .pillar__icon--remember {
    background: oklch(var(--lch-uv) / 0.15);
    color: oklch(var(--lch-uv));
  }

  .pillar__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-ink-muted);
  }

  /* ── Festival edition cards (compact, selectable) ── */

  .edition-cards {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 26rem;
    overflow-y: auto;
    padding-block-end: 4px;
    margin-block: 16px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-interactive) transparent;
  }

  .edition-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 2px solid var(--color-border-interactive);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;

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

    &:has(input:focus-visible) {
      outline: 2px solid oklch(var(--lch-flare));
      outline-offset: 2px;
    }

    &:has(input:checked) {
      border-color: oklch(var(--lch-flare));
      background: color-mix(in oklch, oklch(var(--lch-flare)) 6%, var(--color-surface));
    }
  }

  .edition-card__initials {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: linear-gradient(135deg, oklch(var(--lch-flare)), oklch(var(--lch-golden)));
    overflow: hidden;
    user-select: none;
  }

  .edition-card__initials-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: oklch(17% 0.02 276);
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .edition-card__favicon {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    background: var(--color-surface);
  }

  .edition-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }

  .edition-card__name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .edition-card__edition {
    font-size: 0.8125rem;
    font-weight: 500;
    color: oklch(var(--lch-flare));
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .edition-card__meta {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .edition-card__dot {
    display: inline-block;
    margin-inline: 4px;
  }

  /* Checkmark badge on selected edition card */
  .edition-card:has(input:checked)::after {
    content: "";
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    right: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: oklch(var(--lch-flare));
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    animation: checkmarkPop 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .edition-card:has(input:checked) {
    padding-inline-end: 40px;
  }

  @keyframes checkmarkPop {
    0% { scale: 0; opacity: 0; }
    60% { scale: 1.15; opacity: 1; }
    100% { scale: 1; opacity: 1; }
  }

  /* Turbo frame loading pulse */
  turbo-frame[busy] .festival-list__empty {
    animation: loadPulse 1.5s ease-in-out infinite;
  }

  /* ── Initial empty state: festival search ── */

  .festival-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 24px 24px;
    text-align: center;
  }

  .festival-empty__radar {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: 12px;
  }

  .festival-empty__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid oklch(var(--lch-flare) / 0.5);
    animation: radarPulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  }

  .festival-empty__ring:nth-child(2) {
    animation-delay: 0.8s;
    border-color: oklch(var(--lch-golden) / 0.4);
  }

  .festival-empty__ring:nth-child(3) {
    animation-delay: 1.6s;
    border-color: oklch(var(--lch-uv) / 0.4);
  }

  .festival-empty__icon {
    position: relative;
    width: 34px;
    height: 34px;
    color: oklch(var(--lch-flare));
    filter: drop-shadow(0 0 12px oklch(var(--lch-flare) / 0.4));
    z-index: 1;
  }

  .festival-empty__title {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0;
  }

  .festival-empty__hint {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    margin: 0;
  }

  @keyframes radarPulse {
    0% {
      scale: 0.4;
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    100% {
      scale: 1.4;
      opacity: 0;
    }
  }

  @keyframes loadPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .add-festival-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-ink-muted);
    cursor: pointer;
    text-decoration: none;

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

  .add-festival-row__icon {
    width: 20px;
    height: 20px;
    border: 1px dashed var(--color-border-interactive);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: var(--color-ink-muted);
  }

  /* ── Crew name suggestions ── */

  .suggestions__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    margin-block-end: 8px;
    display: block;
  }

  .suggestions__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: 16px;
  }

  .suggestion-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--color-surface);
    border: 1px solid var(--color-border-interactive);
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, scale 120ms cubic-bezier(0.22, 1, 0.36, 1);

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

    &:active {
      scale: 0.96;
    }
  }

  .suggestion-chip--selected,
  .suggestion-chip[aria-selected="true"] {
    background: oklch(var(--lch-flare));
    border-color: oklch(var(--lch-flare));
    color: oklch(17% 0.02 276);
  }

  /* ── Avatar picker ── */

  .avatar-picker {
    border: none;
    padding: 0;
    margin-block-end: 16px;
  }

  .avatar-picker__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    margin-block-end: 8px;
  }

  .avatar-picker__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .avatar-picker__option {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: var(--touch-min);
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-border-interactive);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, scale 120ms cubic-bezier(0.22, 1, 0.36, 1);

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

    &:active {
      scale: 0.92;
    }

    &:has(input:checked) {
      border-color: oklch(var(--lch-flare));
      background: oklch(var(--lch-flare) / 0.1);
    }

    &:has(input:checked) .avatar-picker__emoji {
      animation: avatarBounce 320ms cubic-bezier(0.22, 1, 0.36, 1);
    }
  }

  @keyframes avatarBounce {
    0% { scale: 1; }
    50% { scale: 1.2; }
    100% { scale: 1; }
  }

  .avatar-picker__emoji {
    font-size: 1.25rem;
    line-height: 1;
    user-select: none;
  }

  .or-label {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    margin-block-end: 8px;
    display: block;
    text-align: center;
  }

  /* ── Invite link card ── */

  .invite-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-interactive);
    border-radius: var(--radius-lg);
    margin-block-end: 20px;
  }

  .invite-link__display {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .invite-link__host {
    color: var(--color-ink);
    font-weight: 600;
  }

  .invite-link__path {
    color: var(--color-ink-muted);
  }

  .invite-link__copy {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: oklch(var(--lch-flare));
    color: oklch(17% 0.02 276);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    min-width: 4rem;
    text-align: center;
    transition: background 150ms ease;
  }

  .invite-link__copy--copied {
    background: oklch(var(--lch-laser));
  }

  .invite-link__copy-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .invite-link__copy-state--copied {
    display: none;

    & svg {
      width: 14px;
      height: 14px;
    }
  }

  .invite-link__copy--copied .invite-link__copy-state--default {
    display: none;
  }

  .invite-link__copy--copied .invite-link__copy-state--copied {
    display: inline-flex;
  }

  /* ── Share buttons ── */

  .share-options {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-block-end: 24px;
  }

  .share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-interactive);
    border-radius: var(--radius-lg);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-ink);
    min-width: 88px;
    min-height: var(--touch-min);
    cursor: pointer;
    transition: border-color 150ms ease;

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

    &:focus-visible {
      outline: 2px solid oklch(var(--lch-flare));
      outline-offset: 2px;
    }

    & svg {
      width: 24px;
      height: 24px;
      color: oklch(80% 0.04 293);
    }
  }

  .share-btn__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .share-btn__state--copied {
    display: none;

    & svg {
      color: oklch(var(--lch-laser));
    }
  }

  .share-btn--copied .share-btn__state--default {
    display: none;
  }

  .share-btn--copied .share-btn__state--copied {
    display: flex;
    color: oklch(var(--lch-laser));
  }

  /* ── PWA install card ── */

  .pwa-card {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border-interactive);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
  }

  .pwa-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, oklch(var(--lch-flare)), oklch(var(--lch-golden)));
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: oklch(17% 0.02 276);
  }

  .pwa-title {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    margin-block-end: 12px;
  }

  .pwa-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block-end: 20px;
    text-align: left;

    & li {
      font-size: 0.8125rem;
      color: oklch(75% 0.04 293);
      padding-inline-start: 28px;
      position: relative;
      line-height: 1.4;

      & svg {
        position: absolute;
        left: 0;
        top: 1px;
        width: 18px;
        height: 18px;
      }
    }
  }

  .pwa-features__icon--offline { color: oklch(var(--lch-laser)); }
  .pwa-features__icon--notify { color: oklch(var(--lch-flare)); }
  .pwa-features__icon--locate { color: oklch(var(--lch-golden)); }
  .pwa-features__icon--update { color: oklch(var(--lch-uv)); }

  /* ── iOS install dialog ── */

  .ios-install-dialog {
    max-width: 22rem;
    padding: 24px;
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-border-interactive);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px oklch(0% 0 0 / 0.4);

    &::backdrop {
      background: oklch(0% 0 0 / 0.6);
    }

    & h2 {
      font-family: "Outfit", system-ui, sans-serif;
      font-size: 1.25rem;
      font-weight: 700;
      margin-block-end: 12px;
    }

    & ol {
      padding-inline-start: 20px;
      margin-block-end: 16px;

      & li {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-block-end: 8px;
      }
    }
  }

  /* ── Celebration card (install step) ── */

  .celebration-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px;
    background: color-mix(in oklch, oklch(var(--lch-uv)) 8%, var(--color-surface));
    border: 1px solid color-mix(in oklch, oklch(var(--lch-uv)) 25%, transparent);
    border-radius: var(--radius-lg);
    margin-block-end: 20px;
    text-align: center;
  }

  .celebration-card__emoji {
    font-size: 2rem;
    line-height: 1;
    margin-block-end: 4px;
    animation: celebrationPulse 600ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
  }

  @keyframes celebrationPulse {
    0% { scale: 0.3; opacity: 0; }
    60% { scale: 1.15; opacity: 1; }
    100% { scale: 1; opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .celebration-card__emoji {
      animation: none;
    }
  }

  .celebration-card__name {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
  }

  .celebration-card__festival {
    font-size: 0.8125rem;
    color: oklch(var(--lch-uv));
    font-weight: 500;
  }

  /* ── Guest warning ── */

  .guest-limits {
    font-size: 0.75rem;
    color: oklch(var(--lch-golden));
    background: oklch(var(--lch-golden) / 0.08);
    border: 1px solid oklch(var(--lch-golden) / 0.2);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-block-start: 12px;
    line-height: 1.4;
    text-align: center;
  }

  /* ── Onboarding footer link ── */

  .onboarding-footer {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    margin-block-start: 16px;

    & a {
      color: oklch(var(--lch-flare));
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  /* ── Text link button (used for "I'll invite later", "Not now") ── */

  .btn--text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-min);
    background: none;
    border: none;
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
    text-decoration: none;

    &:hover {
      color: var(--color-ink);
      text-decoration: underline;
    }
  }

  /* ── Hint below the primary submit button ── */

  .onboarding-submit-hint {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    margin-block-start: 8px;
  }

  /* ── Onboarding actions footer (used on invite + install steps) ── */

  .onboarding-screen__actions {
    margin-block-start: 16px;
    width: 100%;
    text-align: center;
  }

  .onboarding-screen__actions-secondary {
    text-align: center;
    margin-block-start: 12px;
  }

  /* ── Festival empty state (search prompt / no results) ── */

  .festival-list__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 32px 24px;
    color: var(--color-ink-muted);
    font-size: 0.8125rem;

    & p { margin: 0; }
  }

  /* ── Auth card overflow variant (festival search needs visible overflow for dropdown) ── */

  .auth-card--overflow-visible {
    overflow: visible;
  }
}