/* Vrienden uitnodigen (spec docs/superpowers/specs/2026-10-09-uitnodigen-design.md §5). Alleen tokens. */

/* /uitnodigen: de link met kopieerknop en de deelknoppen */
.uitn-link { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.uitn-link input { flex: 1 1 14rem; min-width: 0; font-variant-numeric: tabular-nums; background: var(--color-surface-sunken); }
.uitn-kanalen { display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.uitn-kanalen .btn { justify-content: flex-start; }
.uitn-wa .icon { color: var(--color-success); }
.uitn-nieuw { border-top: 1px solid var(--color-divider); padding-top: var(--space-md); }

/* /kom/{code}: één kaart met een band in de merkkleuren; de pasfoto staat half op de band */
.uitn-kom {
    background: linear-gradient(110deg, var(--brand-ink), var(--brand-blue) 60%, var(--brand-signal)) top / 100% 3.5rem no-repeat, var(--color-surface);
    text-align: center; justify-items: center;
}
.uitn-kom h1 { text-wrap: balance; }
.uitn-kom > p { max-width: 44ch; margin-inline: auto; }
.uitn-av { width: 96px; height: 96px; border-radius: 50%; margin-inline: auto; }
.uitn-av-leeg { display: grid; place-items: center; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); }
.uitn-av-leeg .icon { width: 40px; height: 40px; }
.uitn-zin { margin: 0; max-width: 44ch; margin-inline: auto; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-panel);
    background: var(--color-surface-muted); border: 1px solid var(--color-border); }
.uitn-zin blockquote { margin: 0; }
.uitn-zin p { margin: 0; }
.uitn-wat { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); text-align: start; }
.uitn-wat li { display: flex; gap: var(--space-xs); align-items: flex-start; padding: var(--space-sm); border-radius: var(--radius-sm);
    border: 1px solid var(--color-border); background: var(--color-surface-sunken); font-size: var(--text-sm); }
.uitn-wat li > span { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.uitn-wat .icon { color: var(--color-action); flex-shrink: 0; }
.uitn-cta { display: grid; gap: var(--space-xs); justify-items: center; }
.uitn-cta.btn-row { display: flex; justify-content: center; }
.uitn-cta p { margin: 0; }
@media (max-width: 30rem) { .uitn-cta .btn { width: 100%; } }

/* /aanmelden: "Uitgenodigd door" boven het formulier */
.uitn-via { display: flex; gap: var(--space-sm); align-items: center; }
.uitn-via p { min-width: 0; }

/* /uitnodigen/kaartje: groot om te scannen; geprint vier op een A4 (spec uitnodigen §2.1) */
.uitn-kaarten { display: grid; justify-items: center; }
.uitn-kaart { width: min(100%, 22rem); margin-inline: auto; text-align: center; }
.uitn-kaart-logo { height: 1.75rem; width: auto; }
.uitn-kaart-kop { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--color-heading); text-wrap: balance; }
.uitn-qr { width: min(100%, 15rem); margin-inline: auto; color: var(--brand-ink); line-height: 0; }
.uitn-qr svg { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.uitn-kaart-url { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-heading); }
.uitn-print-only { display: none; }
@media print {
    body.uitn-print .site-top, body.uitn-print .site-footer, body.uitn-print .uitn-print-weg, body.uitn-print .flash { display: none; }
    html:has(body.uitn-print), body.uitn-print { background: none; }
    .uitn-kaarten { grid-template-columns: repeat(2, 1fr); gap: 0; }
    .uitn-print-only { display: grid; }
    .uitn-kaart { width: auto; height: 13.5cm; align-content: center; box-shadow: none; border: 1px dashed var(--color-border); border-radius: 0; break-inside: avoid;
        color-scheme: light; background: none; }
    .uitn-qr { width: 5.5cm; }
    /* Vaste merkkleuren: in een donker thema kwamen kop en adres anders licht op wit papier */
    .uitn-kaart-kop, .uitn-kaart-url { color: var(--brand-ink); }
    .uitn-kaart .muted { color: var(--neutral-600); }
}

/* /uitnodigen: drie tellers boven "Via jouw link" (spec uitnodigen §2.2), als gegevenslijst: tegels pasten niet in de zijkolom */
.uitn-tel dd { font-variant-numeric: tabular-nums; }