/* ============================================================================
   Church UI — shared visual language for member-facing and public pages.

   Extracted from Pages/Home.razor, which is where this look was developed. Every
   value here comes from ChurchThemeService tokens (--church-primary, --church-surface,
   ...) so a church's branding drives all of it and nothing is hardcoded.

   Why a stylesheet and not per-component <style> blocks: Blazor <style> markup inside
   a component is GLOBAL, not scoped. Home.razor and Profile.razor already define
   .section-title / .card-title / .dashboard-card with different values, which only
   stays benign because one page is mounted at a time. Everything here is prefixed
   `cu-` so it can never collide with those page-level definitions.

   The web member experience is light-only for now (CWMC-426), so there are no dark
   variants here. MudThemeProvider has ObserveSystemThemeChange="false" for the same
   reason — the OS auto-switching themes must not repaint these pages.
   ============================================================================ */

/* ── Page shell ───────────────────────────────────────────────────────────── */

.cu-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 60px;
}

.cu-page-narrow {
    max-width: 640px;
}

/* ── Greeting / page heading ──────────────────────────────────────────────── */

.cu-greeting {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--church-text);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.cu-greeting-sub {
    font-size: 1rem;
    color: var(--church-text-secondary);
    margin-bottom: 28px;
}

/* ── Hero card ────────────────────────────────────────────────────────────────
   The brand-gradient panel with the primary call to action. The two decorative
   circles are pointer-events:none so they never eat a tap.
   ─────────────────────────────────────────────────────────────────────────── */

.cu-hero {
    background: linear-gradient(135deg, var(--church-primary) 0%, var(--church-primary-dark) 100%);
    border-radius: 20px;
    padding: 40px 44px;
    color: #fff;
    margin-bottom: 28px;
    box-shadow: 0 8px 32px rgba(var(--church-primary-rgb), 0.18);
    position: relative;
    overflow: hidden;
}

.cu-hero::before,
.cu-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cu-hero::before {
    top: -60%;
    right: -5%;
    width: 280px;
    height: 280px;
    background: rgba(255, 255, 255, 0.10);
}

.cu-hero::after {
    bottom: -40%;
    right: 10%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.07);
}

/* Keeps hero content above the decorative circles. */
.cu-hero > * {
    position: relative;
    z-index: 1;
}

.cu-hero-logo {
    display: block;
    max-width: 180px;
    max-height: 64px;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 20px;
}

.cu-hero-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.cu-hero-text {
    font-size: 1.05rem;
    opacity: 0.92;
    margin-bottom: 28px;
    line-height: 1.6;
    max-width: 500px;
}

.cu-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.18);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
    text-decoration: none;
}

/* ── Buttons ──────────────────────────────────────────────────────────────────
   min-height 44px on both to meet the mobile touch-target standard.
   ─────────────────────────────────────────────────────────────────────────── */

.cu-btn-primary {
    background: var(--church-surface);
    color: var(--church-primary);
    padding: 14px 36px;
    min-height: 44px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.cu-btn-primary:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.cu-btn-primary:active {
    transform: scale(0.99);
}

.cu-btn-secondary {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 12px 22px;
    min-height: 44px;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: background 0.2s ease;
}

.cu-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* On-surface (non-hero) primary button, for pages with no gradient panel. */
.cu-btn-brand {
    background: var(--church-primary);
    color: var(--church-on-primary);
    padding: 14px 32px;
    min-height: 48px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.cu-btn-brand:hover {
    filter: brightness(1.06);
}

.cu-btn-brand:active {
    transform: scale(0.99);
}

/* ── Public nav bar ───────────────────────────────────────────────────────────
   Deliberately mirrors MemberLayout's .site-header: same surface background, same
   border, same 64px height, church identity left, links right. A visitor and a signed-in
   member see the same bar in the same place; signing in adds links and swaps "Sign in"
   for the avatar rather than changing the furniture. That is what makes the anonymous
   experience flow into the member one instead of feeling like a different product.

   Plain anchors only — no dropdown, no MudMenu. These pages are static SSR and must work
   with no circuit and no JS.
   ─────────────────────────────────────────────────────────────────────────── */

.cu-nav {
    background: var(--church-surface, #fff);
    border-bottom: 1px solid var(--church-border, #e6e6e6);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.cu-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cu-nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.cu-nav-brand:hover { opacity: 0.8; }

.cu-nav-logo {
    height: 40px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    flex-shrink: 0;
}

.cu-nav-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--church-text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cu-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cu-nav-link {
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--church-text-secondary);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.cu-nav-link:hover {
    background: var(--church-surface-2);
    color: var(--church-text);
}

.cu-nav-link.active {
    color: var(--church-primary);
    background: var(--church-primary-light);
}

/* Sign in sits where the member avatar sits, so the bar keeps its shape once authenticated. */
.cu-nav-signin {
    padding: 10px 18px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--church-border);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--church-primary);
    text-decoration: none;
    margin-left: 8px;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cu-nav-signin:hover {
    border-color: var(--church-primary);
    background: var(--church-primary-light);
}

/* Phones: stack into two rows — identity above, links below.
   An earlier version squeezed everything onto one row by hiding the church name. That was
   the wrong trade: a church with no logo yet (i.e. any church onboarding hasn't finished)
   then had NO identity anywhere on the giving page at 375px, so a donor saw a payment form
   with no indication whose church they were paying. Verified at a real 375px viewport.
   Identity always wins; the links get their own row and scroll if they must. */
@media (max-width: 640px) {
    /* Not sticky on phones. Two rows is 98px, and pinning that to the top of an 812px screen
       spends 12% of the viewport permanently on a menu. Identity matters when someone ARRIVES
       (deciding whether to trust the page), not while they're typing a card number — by then
       they've committed. Scrolling reclaims the space and the nav is one flick away. */
    .cu-nav { position: static; }

    .cu-nav-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 12px;
        min-height: 0;
    }

    .cu-nav-brand {
        min-height: 52px;
        padding-right: 8px;
    }

    .cu-nav-logo { height: 34px; max-width: 130px; }

    .cu-nav-name {
        font-size: 1rem;
        /* Long church names truncate rather than pushing the row wider. */
        max-width: 100%;
    }

    .cu-nav-links {
        border-top: 1px solid var(--church-border-light, rgba(0,0,0,.06));
        gap: 2px;
        /* Scroll rather than wrap, so the row height stays predictable however many
           destinations a church has enabled. */
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .cu-nav-links::-webkit-scrollbar { display: none; }

    /* Tight enough that the full set (Home / Connect / Give / Get the app / Sign in) fits 375px
       without scrolling. The scroll above is the safety net for longer sets or narrower phones,
       not the expected state — a clipped nav item is easy to miss entirely. */
    .cu-nav-link { padding: 10px 7px; font-size: 0.9375rem; }

    /* Sign in loses its box on phones: in a row that can scroll, a bordered pill reads as
       cut off when it reaches the edge. No margin-left:auto — that reserves free space the
       scroll container doesn't have and would push the row wider than the viewport. */
    .cu-nav-signin {
        border: none;
        padding: 10px 7px;
        font-size: 0.9375rem;
        margin-left: 2px;
    }
}

/* ── Compact church header ────────────────────────────────────────────────────
   The hero's identity, condensed into a bar. Used on pages that sit BEHIND the
   front door (giving, connect) so the church is still the first thing a visitor
   sees, without spending the whole screen re-introducing it.
   ─────────────────────────────────────────────────────────────────────────── */

/* Deliberately the same shape as .cu-hero — same gradient, same 20px radius, same shadow,
   same column. It is the hero, shorter. That containment is what makes moving from the front
   door to a page behind it read as the same place continuing rather than a different site:
   a full-bleed bar here broke the illusion even though the color matched. */
.cu-header {
    background: linear-gradient(135deg, var(--church-primary) 0%, var(--church-primary-dark) 100%);
    color: #fff;
    border-radius: 20px;
    padding: 18px 28px 22px;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(var(--church-primary-rgb), 0.18);
    position: relative;
    overflow: hidden;
}

/* No decorative circle here on purpose. The hero is tall enough for the circles to read as
   texture; at header height any circle cuts a visible arc across the bar and reads as a
   rendering artifact. The gradient alone carries the brand. */

.cu-header-inner {
    position: relative;
    z-index: 1;
}

.cu-header-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    opacity: 0.88;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 44px;
    transition: opacity 0.15s ease;
}

.cu-header-back:hover {
    opacity: 1;
    text-decoration: underline;
}

.cu-header-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cu-header-logo {
    background: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    max-width: 140px;
    max-height: 52px;
    object-fit: contain;
    flex-shrink: 0;
}

.cu-header-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .cu-header { padding: 14px 24px 18px; margin-bottom: 20px; }
    .cu-header-name { font-size: 1.05rem; }
    .cu-header-logo { max-width: 110px; max-height: 44px; }
}

/* ── Surface panel ────────────────────────────────────────────────────────────
   A plain card for page content that isn't an action card (e.g. a form).
   ─────────────────────────────────────────────────────────────────────────── */

.cu-panel {
    background: var(--church-surface);
    border: 1px solid var(--church-border);
    border-radius: 16px;
    padding: 28px;
}

@media (max-width: 768px) {
    .cu-panel { padding: 20px 16px; border-radius: 14px; }
}

/* ── Section title ────────────────────────────────────────────────────────── */

.cu-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--church-text);
    margin-bottom: 14px;
    margin-top: 28px;
    letter-spacing: -0.01em;
    padding-left: 12px;
    border-left: 3px solid var(--church-secondary);
    line-height: 1.1;
}

.cu-section-title:first-of-type {
    margin-top: 8px;
}

/* ── Card grid ────────────────────────────────────────────────────────────────
   Fixed column counts so a partial last row never looks orphaned.
   ─────────────────────────────────────────────────────────────────────────── */

.cu-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

.cu-grid-1 { grid-template-columns: 1fr; max-width: 520px; }
.cu-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cu-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ── Action card ──────────────────────────────────────────────────────────────
   Works as a <div> or an <a>. When it's an <a> the whole card is the tap target,
   which is what public/mobile visitors expect.
   ─────────────────────────────────────────────────────────────────────────── */

.cu-card {
    background: var(--church-surface);
    border: 1px solid var(--church-border);
    border-radius: 14px;
    padding: 24px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
}

/* When the card is a <button> (opens a dialog rather than navigating), strip the
   native button styling so it reads identically to the <a> and <div> variants. */
button.cu-card {
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.cu-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--church-primary) 0%, var(--church-primary-dark) 100%);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.cu-card:hover {
    border-color: var(--church-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
    transform: translateY(-3px);
}

.cu-card:hover::before {
    transform: scaleX(1);
}

.cu-card-icon {
    width: 48px;
    height: 48px;
    background: rgba(var(--church-primary-rgb), 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.cu-card-icon .mud-icon-root {
    color: var(--church-primary);
    font-size: 1.5rem;
}

.cu-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--church-text);
    margin-bottom: 6px;
}

.cu-card-text {
    font-size: 0.875rem;
    color: var(--church-text-secondary);
    line-height: 1.5;
    margin-bottom: 14px;
}

.cu-card-action {
    color: var(--church-primary);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
}

.cu-card:hover .cu-card-action,
.cu-card-action:hover {
    gap: 10px;
}

/* ── Stat strip ───────────────────────────────────────────────────────────── */

.cu-stats {
    background: var(--church-surface);
    border: 1px solid var(--church-border);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 32px;
}

.cu-stats-grid {
    display: grid;
    gap: 24px;
}

.cu-stats-grid-1 { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
.cu-stats-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cu-stats-grid-3 { grid-template-columns: repeat(3, 1fr); }

.cu-stat {
    text-align: center;
    padding: 8px 0;
}

.cu-stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--church-primary);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.cu-stat-label {
    font-size: 0.8125rem;
    color: var(--church-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Promo panel (app download and similar) ───────────────────────────────── */

.cu-promo {
    background: var(--church-bg);
    border: 1px solid var(--church-border);
    border-radius: 16px;
    padding: 36px;
    text-align: center;
}

.cu-promo-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--church-text);
    margin-bottom: 8px;
}

.cu-promo-text {
    font-size: 0.9375rem;
    color: var(--church-text-secondary);
    margin-bottom: 20px;
}

.cu-promo-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.cu-promo-btn {
    background: var(--church-surface);
    border: 1px solid var(--church-border);
    padding: 10px 24px;
    min-height: 44px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    color: var(--church-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: border-color 0.2s ease, transform 0.2s ease;
    font-size: 0.9375rem;
}

.cu-promo-btn:hover {
    border-color: var(--church-primary);
    transform: translateY(-2px);
}

/* ── Church code callout (app download) ───────────────────────────────────────
   For churches on the shared Connect With My Church app, entering this code is a
   required step after install. It gets real weight because a visitor who misses it
   installs the app and then cannot find their church.
   ─────────────────────────────────────────────────────────────────────────── */

/* One quiet line, not a billboard. This is a POST-install instruction: it has to be
   unmissable but must not outrank the download buttons it supports. An earlier version with
   a dashed border, uppercase label and 1.6rem code was the loudest thing on the panel. */
.cu-appcode {
    margin-top: 18px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(var(--church-primary-rgb), 0.07);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.9375rem;
    color: var(--church-text-secondary);
}

.cu-appcode-label { white-space: nowrap; }

.cu-appcode-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--church-primary);
    /* Codes get typed by hand into a phone. Monospace keeps 0/O and 1/l apart. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

/* The code IS the button. One control instead of a code plus a separate Copy button: the code
   is the biggest, most obvious thing to tap, and the icon inside signals it is interactive
   without adding a second element competing with the store buttons.

   An icon alone (no code text) was rejected deliberately — the two-rectangles copy glyph reads
   as obvious to people who use developer tools and as decoration to plenty of church visitors. */
.cu-appcode-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(var(--church-primary-rgb), 0.35);
    background: var(--church-surface);
    font: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cu-appcode-chip:hover {
    background: rgba(var(--church-primary-rgb), 0.10);
    border-color: var(--church-primary);
}

.cu-appcode-chip:active { transform: scale(0.98); }

.cu-appcode-chip .mud-icon-root {
    font-size: 1.1rem;
    color: var(--church-primary);
    opacity: 0.75;
}

/* Confirmation swaps the copy glyph for a tick and keeps the code in place, so the chip does
   not resize and the user can still see what they copied. */
.cu-appcode-chip .cu-icon-done { display: none; }
.cu-appcode-chip.is-copied .cu-icon-copy { display: none; }
.cu-appcode-chip.is-copied .cu-icon-done { display: inline-flex; }
.cu-appcode-chip.is-copied .mud-icon-root { opacity: 1; }
.cu-appcode-chip.is-copied { border-color: var(--church-primary); }

.cu-appcode-note {
    margin-top: 16px;
    font-size: 0.8125rem;
    color: var(--church-text-muted);
}

/* Phones: the label and the chip don't fit on one line at 375px, so stack them deliberately
   and centre them rather than letting the row wrap into something that looks accidental. */
@media (max-width: 480px) {
    .cu-appcode {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    .cu-appcode-label { white-space: normal; }
}

/* ── Textarea support for auth.css fields ─────────────────────────────────────
   auth.css styles `.auth-input-wrap input` only, so a <textarea> in the same wrapper got
   no sizing at all and collapsed to a few pixels with its label stranded above. These
   rules mirror the input styling and float the label the same way.
   ─────────────────────────────────────────────────────────────────────────── */

.auth-input-wrap textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 104px;
    padding: 14px;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    color: rgba(0, 0, 0, .87);
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .23);
    border-radius: 4px;
    outline: none;
    resize: vertical;
    display: block;
    transition: border-color .15s, box-shadow .15s;
}

.auth-input-wrap textarea:hover { border-color: rgba(0, 0, 0, .87); }

.auth-input-wrap textarea:focus {
    border-color: var(--auth-accent);
    box-shadow: inset 0 0 0 1px var(--auth-accent);
}

/* A textarea's label can't sit vertically centred like an input's — it pins to the top
   line instead, then rises to notch the border once focused or filled. */
.auth-input-wrap:has(textarea) label {
    top: 14px;
    transform: none;
}

.auth-input-wrap textarea:focus + label,
.auth-input-wrap textarea:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%) scale(0.75);
}

/* ── Form headings and checkbox list ─────────────────────────────────────────
   Used by the public connect form. The inputs themselves reuse auth.css (.auth-field,
   .auth-input-wrap, floating labels) so every public form looks the same and picks up
   auth.js's no-circuit inline validation.
   ─────────────────────────────────────────────────────────────────────────── */

.cu-form-heading {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--church-text);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.cu-form-sub {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--church-text-secondary);
    margin-bottom: 24px;
}

.cu-form-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--church-text);
    margin-bottom: 10px;
}

.cu-checks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 24px;
}

/* Whole row is the target, not just the box — these get tapped on phones. */
.cu-check {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--church-text);
    transition: background 0.15s ease;
}

.cu-check:hover { background: var(--church-surface-2); }

.cu-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--church-primary);
    cursor: pointer;
    margin: 0;
}

/* ── Public footer ────────────────────────────────────────────────────────────
   Quiet by design: these pages exist to get someone to give, get in touch, or install the
   app, so the footer must be findable without competing with any of that.
   ─────────────────────────────────────────────────────────────────────────── */

.cu-footer {
    border-top: 1px solid var(--church-border);
    background: var(--church-surface);
    padding: 24px;
    margin-top: 40px;
}

.cu-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    font-size: 0.8125rem;
    color: var(--church-text-secondary);
}

/* Copyright and links share the left group, separated by a divider dot rather than a wide gap. */
.cu-footer-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.cu-footer-links {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.cu-footer-links::before {
    content: "·";
    color: var(--church-border);
    margin-right: 0;
}

.cu-footer-links a,
.cu-footer-powered a {
    color: var(--church-text-secondary);
    text-decoration: none;
    /* 44px targets: these get tapped on phones like anything else. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.cu-footer-links a:hover,
.cu-footer-powered a:hover {
    color: var(--church-primary);
    text-decoration: underline;
}

.cu-footer-powered a { font-weight: 600; color: var(--church-primary); }

@media (max-width: 640px) {
    .cu-footer { padding: 20px 16px; margin-top: 28px; }

    /* Stacked and centred: side by side at 375px wraps into something that reads as broken
       rather than as a footer. */
    .cu-footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 2px;
    }

    .cu-footer-left { flex-direction: column; gap: 0; }

    /* The divider dot only makes sense when the links sit beside the copyright. */
    .cu-footer-links::before { content: none; }
    .cu-footer-links { justify-content: center; gap: 16px; }
}

/* ── Empty / error state ──────────────────────────────────────────────────── */

.cu-notice {
    background: var(--church-surface);
    border: 1px solid var(--church-border);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
    max-width: 440px;
    margin: 0 auto;
}

.cu-notice-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--church-text);
    margin: 12px 0 4px;
}

.cu-notice-text {
    font-size: 0.9375rem;
    color: var(--church-text-secondary);
    line-height: 1.6;
}

/* ── Skeleton loading ─────────────────────────────────────────────────────── */

.cu-skeleton {
    background: linear-gradient(90deg,
        var(--church-border-light) 25%,
        var(--church-border) 50%,
        var(--church-border-light) 75%);
    background-size: 200% 100%;
    animation: cu-shimmer 1.5s infinite;
    border-radius: 8px;
    margin: 0 auto;
}

@keyframes cu-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Honour reduced-motion: keep the placeholder, drop the animation. */
@media (prefers-reduced-motion: reduce) {
    .cu-skeleton { animation: none; }

    .cu-card,
    .cu-card::before,
    .cu-btn-primary,
    .cu-promo-btn {
        transition: none;
    }
}

/* ── Phone frame ──────────────────────────────────────────────────────────────
   Used by the onboarding reveal step to show a church their live front door the
   way a visitor will actually see it. Most visitors arrive on a phone, so a
   phone-shaped frame is the honest preview.
   ─────────────────────────────────────────────────────────────────────────── */

.cu-phone-frame {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    background: #1a1a1a;
    border-radius: 40px;
    padding: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}

.cu-phone-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 19.5;
    border-radius: 30px;
    overflow: hidden;
    background: var(--church-bg);
}

.cu-phone-screen > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .cu-page { padding: 20px 16px 48px; }

    .cu-greeting { font-size: 1.4rem; }

    /* Trimmed so the first action card clears the fold on a 375x812 phone. The hero's job on
       the front door is to say whose church this is and make it feel like theirs; the cards
       below are what the visitor actually came to do, and they were being pushed off-screen. */
    .cu-hero {
        padding: 22px 20px;
        border-radius: 16px;
        margin-bottom: 20px;
    }

    .cu-hero-title { font-size: 1.5rem; }
    .cu-hero-text { font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5; }

    /* Decorative circles shrink with it — at hero-on-a-phone size the desktop ones cover
       most of the panel rather than reading as texture. */
    .cu-hero::before { width: 190px; height: 190px; top: -50%; }
    .cu-hero::after { width: 130px; height: 130px; }

    .cu-btn-primary { padding: 12px 28px; font-size: 0.95rem; }

    .cu-btn-secondary {
        margin-left: 0;
        margin-top: 10px;
        display: inline-flex;
    }

    .cu-grid-2,
    .cu-grid-3 { grid-template-columns: 1fr; }

    .cu-stats-grid-2,
    .cu-stats-grid-3 { grid-template-columns: 1fr; }

    .cu-stat-value { font-size: 1.75rem; }

    .cu-promo { padding: 28px 20px; }
    .cu-promo-buttons { flex-direction: column; align-items: stretch; }
}