/* ── Shared site chrome: tokens, page kit, header, footer, documents ──────
   The tokens are the app's card-deck kit (Pressed Paper v2), ported from
   firl/lib/presentation/features/carddeck/ui/cd_theme.dart (CdTheme +
   CdPalette), cd_depth.dart (CdDepth) and presentation/theme/appearance.dart
   (kBrandAccent). The app mixes every neutral live from the accent; a static
   page can't, so these are that mix precomputed against the fixed coral.
   Re-derive them if kBrandAccent or a CdPalette base ever moves.

   The chrome layout (sticky translucent header, three-block footer with a
   bottom line) follows the cwn-micropage shell; the skin is firl's. */

:root {
    color-scheme: light dark;

    /* kBrandAccent: coral, fixed for everyone. */
    --accent: #F05A6B;
    --on-accent: #ffffff;

    /* Warm cream paper, accent-cast (light). */
    --ink: #331E1B;
    --sub: #64514C;
    --faint: #AF9D94;
    --bg: #F1E7E0;
    --surface: #FBF2EC;
    /* CdDepth.disc's face; light carries the lift with shadow alone. */
    --paper-lift: var(--surface);
    /* CdDepth.deboss: darker than bg in both modes, so a slot reads
       pressed in. */
    --deboss: #E6DCD6;
    /* CdPalette.wash: accent at 12% composited opaque onto bg. */
    --wash: #F1D6D2;

    --divider: rgba(22, 20, 15, 0.12);
    --hair: rgba(22, 20, 15, 0.10);
    --edge: rgba(22, 20, 15, 0.16);

    /* CdPalette.printBorderOf: the role's own ink at 0.38. */
    --print-border: rgba(240, 90, 107, 0.38);
    --print-border-neutral: rgba(51, 30, 27, 0.38);

    /* CdPalette.liftShadow and its pressed first entry. */
    --lift-shadow: 0 1px 2px rgba(22, 20, 15, 0.102),
                   0 2px 8px rgba(22, 20, 15, 0.078);
    --lift-shadow-pressed: 0 1px 2px rgba(22, 20, 15, 0.102);
    /* CdDebossDecoration: a near wall in shadow, a far lip in the light. */
    --deboss-shadow: inset 0 1.5px 3px rgba(22, 20, 15, 0.16),
                     inset 0 -1px 0 rgba(251, 248, 241, 0.35);
}
@media (prefers-color-scheme: dark) {
    :root {
        /* Warm charcoal paper: one OKLCH hue, only lightness steps. */
        --ink: #F3DDD9;
        --sub: #BDA8A0;
        --faint: #88776F;
        --bg: #241B15;
        --surface: #2A211B;
        --paper-lift: #352C25;
        --deboss: #1E150F;
        --wash: #3C231F;

        --divider: rgba(251, 248, 241, 0.18);
        --hair: rgba(251, 248, 241, 0.14);
        --edge: rgba(251, 248, 241, 0.24);

        --print-border-neutral: rgba(243, 221, 217, 0.38);

        --lift-shadow: 0 1px 2px rgba(0, 0, 0, 0.451),
                       0 3px 10px rgba(0, 0, 0, 0.302);
        --lift-shadow-pressed: 0 1px 2px rgba(0, 0, 0, 0.451);
        --deboss-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.38),
                         inset 0 -1px 0 rgba(251, 248, 241, 0.07);
    }
}

/* Author `display` rules outrank the UA sheet's [hidden]; keep it
   authoritative, the invite page gates most of itself with it. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    /* The app renders San Francisco on iOS and the DM Sans brand face on
       Android; same resolution order here. */
    font-family: -apple-system, BlinkMacSystemFont, "DM Sans", Roboto,
        "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    width: 100%;
    box-sizing: border-box;
}

/* ── Wordmark ─────────────────────────────────────────────────────────────
   CdWordmark: the lowercase name with a DOTLESS ı, plus the accent full
   stop resting on the baseline. Pinned to DM Sans in the app — a logo is a
   fixed letterform; platforms without it fall back to their own sans. */
.brand {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, Roboto,
        "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
}
.brand-dot {
    display: inline-block;
    width: 0.15em;
    height: 0.15em;
    margin-left: 0.04em;
    border-radius: 50%;
    background: var(--accent);
    /* Bottom margin edge on the alphabetic baseline — a true full stop. */
    vertical-align: baseline;
}

/* ── Page kit: the phone column the homepage and the invite share ──────── */
.column {
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
    /* spaceXl / spaceLg */
    padding: 32px 24px 40px;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.4;
}

/* Type scale: CdTheme's named roles at their iOS sizes. */
.display {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0;
}
.title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin: 0;
}
.headline {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.1px;
    line-height: 1.3;
    margin: 0;
}
.callout {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}
.footnote {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sub);
    margin: 0;
}
/* CdSectionHeader: tracked small caps in faint, the one use of faint. */
.micro-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0;
}
.sub {
    color: var(--sub);
}

/* A page section, set off by the one hairline. */
.section {
    margin: 40px 0 0;
    padding: 24px 0 0;
    border-top: 0.5px solid var(--hair);
}

/* CdDepth.deboss: a text slot pressed into the paper, continuous corner. */
.slot {
    background: var(--deboss);
    box-shadow: var(--deboss-shadow);
    border-radius: 16px;
    corner-shape: superellipse(1.6);
}

/* CdDepth.disc: loose paper a face lies on; lifts and ranks nothing. */
.disc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--paper-lift);
    box-shadow: var(--lift-shadow);
    font-size: 26px;
    font-weight: 600;
    color: var(--ink);
}

/* ── Buttons: depth is the only rank ─────────────────────────────────────── */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    /* buttonHeight is a floor, not a fixed size. */
    min-height: 44px;
    margin: 12px 0 0;
    padding: 4px 16px;
    border-radius: 100px;
    text-decoration: none;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.1px;
    line-height: 1.3;
    cursor: pointer;
    appearance: none;
    /* CdMotion.press and pressScale. */
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:active {
    transform: scale(0.96);
}
/* CdDepth.print: an option printed on the paper, its ink the meaning.
   Accent for forward, neutral ink for administrative. */
.btn-print {
    background: transparent;
    color: var(--accent);
    border: 1.5px solid var(--print-border);
}
.btn-print.neutral {
    color: var(--ink);
    border-color: var(--print-border-neutral);
}

/* Store links: the page's primary pair. Badge black with white text, the
   colour the official badges own, on the kit's capsule. Not imitations of
   the vendors' artwork (Apple publishes no TestFlight badge), only the
   logos are. Equal flex basis keeps the two the same size. */
.store-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.store {
    flex: 1 1 9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 56px;
    padding: 8px 14px;
    border: 0;
    border-radius: 100px;
    background: #000000;
    color: #ffffff;
    text-decoration: none;
    box-shadow: var(--lift-shadow);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
@media (prefers-color-scheme: dark) {
    /* On charcoal paper a black capsule needs an edge of its own. */
    .store {
        box-shadow: var(--lift-shadow), inset 0 0 0 1px rgba(251, 248, 241, 0.22);
    }
}
.store:active {
    transform: scale(0.96);
    box-shadow: var(--lift-shadow-pressed);
}
.store-logo {
    flex: none;
    width: 22px;
    height: 22px;
}
.store-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.store-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    line-height: 1.3;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}
.store-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.1px;
    line-height: 1.25;
}

/* The column footer: the site footer stacked to the phone column. Hrefs
   are absolute, since every path under /f/ answers with the invite page. */
.site-footer.column-footer {
    border-top: 0;
    width: 100%;
    max-width: 24rem;
    margin: auto auto 0;
    padding: 8px 24px 32px;
    box-sizing: border-box;
    line-height: 1.4;
}
.column-footer .footer-content {
    padding-top: 20px;
    border-top: 0.5px solid var(--hair);
    margin-bottom: 20px;
}
.column-footer .footer-links {
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.column-footer .footer-links a {
    font-size: 13px;
    color: var(--sub);
    text-decoration: none;
}
.column-footer .footer-bottom {
    padding-top: 20px;
    border-top: 0.5px solid var(--hair);
}

/* ── Header — the cwn glass bar on warm paper ────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0.875rem 0;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 0.5px solid var(--hair);
}
.site-header .brand {
    font-size: 20px;
}

/* ── Document typography (legal pages) ───────────────────────────────────── */
main.doc {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    width: 100%;
    box-sizing: border-box;
}
main.doc h1 {
    font-size: 1.75rem;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin: 0 0 1.5rem;
}
main.doc h2 {
    font-size: 1.15rem;
    line-height: 1.3;
    letter-spacing: -0.1px;
    margin: 2rem 0 0.75rem;
}
main.doc h3 {
    font-size: 1rem;
    line-height: 1.3;
    margin: 1.25rem 0 0.5rem;
}
main.doc p {
    margin: 0 0 1rem;
}
main.doc ul {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}
main.doc li {
    margin: 0 0 0.5rem;
}
main.doc a {
    color: var(--accent);
    overflow-wrap: break-word;
}
main.doc .doc-meta {
    color: var(--sub);
    font-size: 0.875rem;
    margin: -1rem 0 1.5rem;
}
.unavailable,
.muted {
    color: var(--sub);
}

/* ── Footer — cwn's three-block shell in footnote ink ───────────────────── */
.site-footer {
    margin-top: auto;
    padding: 2rem 0;
    border-top: 0.5px solid var(--hair);
}
.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.footer-app .brand {
    font-size: 17px;
}
.footer-app p {
    font-size: 13px;
    color: var(--sub);
    margin: 0.375rem 0 0;
}
.footer-links,
.footer-nav,
.footer-connect {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: baseline;
}
.footer-nav a,
.footer-connect a {
    font-size: 13px;
    color: var(--sub);
    text-decoration: none;
}
.footer-nav a:hover,
.footer-connect a:hover {
    color: var(--ink);
}
/* Mobile: one right-aligned column, brand on the left — never a link soup. */
@media (max-width: 640px) {
    .footer-links,
    .footer-nav,
    .footer-connect {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.875rem;
        flex-wrap: nowrap;
    }
}
.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 0.5px solid var(--hair);
}
.footer-bottom p {
    font-size: 13px;
    color: var(--faint);
    margin: 0;
}