:root {
    --achieve-bg: #fbf8f1;
    --achieve-surface: #ffffff;
    --achieve-surface-soft: #fff8e7;
    --achieve-text: #1f211f;
    --achieve-muted: #6f6a60;
    --achieve-border: #e7ddc7;
    --achieve-gold: #c99a2e;
    --achieve-gold-soft: #f7e7bd;
    --achieve-primary: #2e4a3f;
    --achieve-primary-ink: #ffffff;
    --achieve-success: #3f7a54;
    --achieve-warning: #b9822d;
    --achieve-danger: #a6423a;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(31,33,31,.06), 0 4px 12px rgba(31,33,31,.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overscroll-behavior-y: auto; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--achieve-bg);
    color: var(--achieve-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--achieve-primary); }
.muted { color: var(--achieve-muted); }
.ok { color: var(--achieve-success); font-weight: 600; }
.lead { font-size: 1.05rem; }

/* App shell */
.app-shell {
    min-height: 100dvh; padding-bottom: 84px; padding-top: env(safe-area-inset-top);
    position: relative;
    background: var(--achieve-bg);
    overscroll-behavior-y: none;
}
/* The clouds + wings backdrop is mounted by heavenly.js (see
   .heavenly-backdrop in heavenly.css). The app-shell no longer paints
   its own ::before wings watermark — that would compete with the
   shared backdrop image and duplicate the logo. */
.app-header, .app-main, .app-nav, .app-drawer-tab, .flash { position: relative; z-index: 2; }
.app-header {
    position: sticky; top: 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 16px; background: rgba(251,248,241,.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--achieve-border);
}
.app-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--achieve-text); font-weight: 700; }
.brand-mark { height: 86px; width: auto; margin: -3px 0; filter: drop-shadow(0 2px 4px rgba(31,33,31,.18)); }
.brand-word { font-size: 1.55rem; letter-spacing: .02em; color: var(--achieve-primary); font-weight: 800; }
.app-help {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; min-width: 64px; padding: 0 16px; border-radius: 999px;
    background: var(--achieve-danger); color: #fff; text-decoration: none;
    font-weight: 800; font-size: 1rem; letter-spacing: .04em;
    box-shadow: 0 2px 6px rgba(166,66,58,.25);
}

/* Right-side drawer */
.app-drawer-tab {
    position: fixed; top: 124px; right: 0; transform: none;
    width: 28px; height: 72px; padding: 0;
    border: 1px solid var(--achieve-primary); border-right: none;
    border-radius: 14px 0 0 14px;
    background: var(--achieve-primary);
    color: #fff;
    font-size: 1.05rem; font-weight: 800; line-height: 72px;
    cursor: pointer; z-index: 18;
    box-shadow: -3px 3px 10px rgba(31,33,31,.18);
    transition: transform .18s ease, background .18s ease;
}
.app-drawer-tab:hover, .app-drawer-tab:focus-visible { background: #25382f; transform: translateX(-2px); outline: none; }
.app-drawer { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.app-drawer[aria-hidden="false"] { pointer-events: auto; }
.app-drawer-scrim {
    position: absolute; inset: 0;
    background: rgba(31,33,31,.32);
    opacity: 0; transition: opacity .22s ease;
}
.app-drawer[aria-hidden="false"] .app-drawer-scrim { opacity: 1; }
.app-drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(320px, 86vw);
    background: linear-gradient(170deg, #2e4a3f 0%, #3f6151 70%, #4f7763 100%);
    color: #fff;
    border-left: 1px solid var(--achieve-primary);
    box-shadow: -8px 0 24px rgba(31,33,31,.22);
    padding: 24px 22px calc(24px + env(safe-area-inset-bottom)) 22px;
    transform: translateX(100%); transition: transform .26s ease;
    display: flex; flex-direction: column; gap: 18px;
}
.app-drawer-panel .app-drawer-close { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; }
.app-drawer-panel .app-drawer-eyebrow { color: rgba(255,255,255,.7); }
.app-drawer-panel .app-drawer-user strong { color: #fff; }
.app-drawer-panel .app-drawer-link { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: #fff; }
.app-drawer-panel .app-drawer-link:hover, .app-drawer-panel .app-drawer-link:focus-visible { background: rgba(255,255,255,.18); }
.app-drawer-panel .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.app-drawer[aria-hidden="false"] .app-drawer-panel { transform: translateX(0); }
.app-drawer-close {
    align-self: flex-end;
    width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid var(--achieve-border); background: var(--achieve-surface-soft);
    color: var(--achieve-text); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.app-drawer-user { display: flex; flex-direction: column; gap: 2px; }
.app-drawer-eyebrow { color: var(--achieve-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.app-drawer-user strong { font-size: 1.1rem; }
.app-drawer-nav { display: flex; flex-direction: column; gap: 8px; }
.app-drawer-link {
    display: flex; align-items: center;
    min-height: 56px; padding: 0 16px; border-radius: 14px;
    background: var(--achieve-surface-soft);
    border: 1px solid var(--achieve-border);
    color: var(--achieve-text); text-decoration: none;
    font-size: 1.05rem; font-weight: 700;
}
.app-drawer-link:hover, .app-drawer-link:focus-visible { background: #fff1cf; outline: none; }
.app-drawer-install { margin-top: 4px; }
.app-drawer-install .btn-ghost { width: 100%; }
.app-drawer-signout { margin-top: auto; }
.app-drawer-signout .btn-ghost { width: 100%; }
@media (prefers-reduced-motion: reduce) {
    .app-drawer-scrim, .app-drawer-panel, .app-drawer-tab { transition: none; }
}
.app-main { max-width: 720px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.flash {
    max-width: 720px; margin: 12px auto 0; padding: 10px 14px;
    background: var(--achieve-gold-soft); color: var(--achieve-text);
    border: 1px solid var(--achieve-gold); border-radius: var(--radius);
}

/* Bottom nav */
.app-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: grid; grid-template-columns: repeat(6, 1fr);
    background: var(--achieve-surface);
    border-top: 1px solid var(--achieve-border);
    padding: 8px 4px env(safe-area-inset-bottom);
    z-index: 12;
}
.nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 4px; text-decoration: none;
    color: var(--achieve-muted); font-size: .72rem;
}
.nav-item.is-active { color: var(--achieve-primary); font-weight: 700; }
.nav-icon { font-size: 1.1rem; line-height: 1; }

/* Cards / hero */
.hero { display: flex; flex-direction: column; gap: 6px; }
.hero h1 { margin: 4px 0; font-size: 1.6rem; }
.card {
    background: var(--achieve-surface);
    border: 1px solid var(--achieve-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
}
.card h2 { margin-top: 0; font-size: 1.15rem; }
.card.emergency { background: #fff4f2; border-color: #efc4be; }

/* Calm moment */
.calm-moment {
    position: relative;
    overflow: hidden;
    min-height: 218px;
    padding: 16px;
    border: 1px solid var(--achieve-border);
    border-radius: var(--radius);
    background: linear-gradient(145deg, #ffffff 0%, #fff8e7 58%, #edf4ef 100%);
    box-shadow: var(--shadow);
}
.calm-moment::before {
    content: none;
}
.calm-content { position: relative; z-index: 1; max-width: 34rem; display: flex; flex-direction: column; gap: 7px; }
.calm-kicker { margin: 0; color: var(--achieve-primary); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.calm-title { margin: 0; max-width: 16ch; font-size: 1.6rem; line-height: 1.08; letter-spacing: 0; }
.calm-subtitle { margin: 0; max-width: 30rem; color: var(--achieve-muted); font-size: .94rem; line-height: 1.38; }
.calm-message {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 82px;
    margin-top: 4px;
    padding: 10px 12px;
    border-left: 3px solid var(--achieve-gold);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    animation: calmMessageIn 720ms ease both;
}
.calm-message-kind { color: var(--achieve-primary); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.calm-message strong { font-size: .96rem; }
.calm-message p { margin: 0; font-size: 1rem; line-height: 1.42; }
.calm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.calm-actions .btn, .calm-actions .btn-primary, .calm-actions .btn-danger, .calm-actions .btn-ghost { min-height: 42px; }
.calm-moment--home { min-height: 196px; }
.calm-moment--home .calm-subtitle { display: none; }
.calm-moment--after { min-height: 210px; }

@keyframes calmWingFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-4px, 5px, 0) scale(1.015); }
}

@keyframes calmMessageIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Buttons */
.btn, .btn-primary, .btn-ghost, .btn-danger, .btn-lg {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 18px; border-radius: 999px; text-decoration: none;
    min-height: 40px;
    border: 1px solid var(--achieve-border); background: var(--achieve-surface-soft);
    color: var(--achieve-text); font-weight: 600; cursor: pointer; font-size: .95rem;
    transition: transform .05s ease;
}
.btn:active, .btn-primary:active, .btn-ghost:active, .btn-danger:active { transform: scale(.98); }
.btn-primary { background: var(--achieve-primary); color: var(--achieve-primary-ink); border-color: var(--achieve-primary); }
.btn-ghost { background: transparent; border-color: var(--achieve-border); color: var(--achieve-primary); }
.btn-danger { background: var(--achieve-danger); color: #fff; border-color: var(--achieve-danger); }
.btn-lg { padding: 14px 22px; font-size: 1.05rem; min-height: 48px; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Extra-large rescue buttons */
.btn-xl {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    min-height: 96px; padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid var(--achieve-border);
    background: var(--achieve-surface);
    color: var(--achieve-text); text-decoration: none;
    font: inherit; cursor: pointer;
    box-shadow: 0 2px 4px rgba(31,33,31,.06), 0 8px 22px rgba(31,33,31,.06);
    transition: transform .08s ease, box-shadow .18s ease;
    text-align: center;
}
.btn-xl:active { transform: scale(.985); }
.btn-xl-eyebrow { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.btn-xl-label { font-size: 1.55rem; font-weight: 800; line-height: 1.05; letter-spacing: .005em; }
.btn-xl-primary { background: var(--achieve-primary); color: var(--achieve-primary-ink); border-color: var(--achieve-primary); }
.btn-xl-primary .btn-xl-eyebrow { opacity: .82; }
.btn-xl-danger { background: var(--achieve-danger); color: #fff; border-color: var(--achieve-danger); }
.btn-xl-danger .btn-xl-eyebrow { opacity: .85; }

/* Dual SOS row */
.sos-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 420px) {
    .sos-pair { grid-template-columns: 1fr; }
    .btn-xl { min-height: 88px; }
    .btn-xl-label { font-size: 1.4rem; }
}

.quiet-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.quiet-row .btn-ghost {
    min-height: 48px;
    padding: 10px 18px;
    background: rgba(255,255,255,.92);
    border: 1.5px solid var(--achieve-border);
    color: var(--achieve-primary);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(31,33,31,.08);
    backdrop-filter: blur(4px);
}
.quiet-row .btn-ghost:hover { background: #fff; box-shadow: 0 4px 10px rgba(31,33,31,.12); }

/* Tap-in step-by-step wizard */
.tap-wizard { display: flex; flex-direction: column; gap: 18px; }
.tap-wizard-progress {
    display: flex; gap: 6px; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; color: var(--achieve-muted); text-transform: uppercase; letter-spacing: .06em;
}
.tap-wizard-progress .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--achieve-border); }
.tap-wizard-progress .dot.is-active { background: var(--achieve-primary); transform: scale(1.25); }
.tap-wizard-progress .dot.is-done { background: var(--achieve-success); }
.tap-step { display: none; flex-direction: column; gap: 16px; animation: tapStepIn .22s ease both; }
.tap-step.is-active { display: flex; }
.tap-step-title { margin: 0; font-size: 1.45rem; }
.tap-step-help { margin: 0; color: var(--achieve-muted); }
.tap-step-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 8px; }
.tap-step-nav button {
    font: inherit;
    appearance: none;
    cursor: pointer;
    border-radius: 14px;
    min-height: 56px;
    padding: 0 22px;
    font-weight: 800;
    letter-spacing: .01em;
}
.tap-step-nav .btn-back {
    background: var(--achieve-surface);
    border: 1.5px solid var(--achieve-border);
    color: var(--achieve-primary);
    min-width: 96px;
}
.tap-step-nav .btn-back:hover, .tap-step-nav .btn-back:focus-visible { background: var(--achieve-surface-soft); outline: none; }
.tap-step-nav .btn-next, .tap-step-nav .btn-send {
    flex: 1;
    background: var(--achieve-primary); color: #fff; border: 1.5px solid var(--achieve-primary);
    font-size: 1.1rem;
    box-shadow: 0 3px 10px rgba(46,74,63,.22);
}
.tap-step-nav .btn-send { background: var(--achieve-success); border-color: var(--achieve-success); box-shadow: 0 3px 10px rgba(63,122,84,.28); }
.tap-step-nav .btn-next:hover, .tap-step-nav .btn-send:hover { filter: brightness(1.06); }
@keyframes tapStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Tap-in chip grid */
.tap-form { display: flex; flex-direction: column; gap: 18px; }
.tap-grid-wrap { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tap-grid-wrap legend { padding: 0; font-size: .82rem; font-weight: 800; color: var(--achieve-primary); text-transform: uppercase; letter-spacing: .06em; }
.tap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.tap-grid--circle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tap-chip {
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    min-height: 76px; padding: 14px 16px;
    border: 2px solid var(--achieve-border);
    border-radius: 16px;
    background: var(--achieve-surface);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.tap-chip:active { transform: scale(.985); }
.tap-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tap-chip-label { font-size: 1.1rem; font-weight: 800; }
.tap-chip-hint { font-size: .85rem; color: var(--achieve-muted); line-height: 1.25; }
.tap-chip:has(input:checked) {
    border-color: var(--achieve-primary);
    background: var(--achieve-surface-soft);
    box-shadow: 0 2px 6px rgba(46,74,63,.12);
}
.tap-chip:has(input:focus-visible) { outline: 3px solid rgba(46,74,63,.25); outline-offset: 2px; }
.tap-message { display: flex; flex-direction: column; gap: 8px; font-weight: 700; font-size: .9rem; color: var(--achieve-primary); }
.tap-message textarea {
    font: inherit; padding: 14px 16px; border-radius: 14px;
    border: 1.5px solid var(--achieve-border); background: #fff;
    min-height: 96px; resize: vertical;
    box-shadow: inset 0 1px 2px rgba(31,33,31,.04);
    color: var(--achieve-text); font-weight: 500;
}
.tap-message textarea:focus { outline: none; border-color: var(--achieve-primary); box-shadow: 0 0 0 3px rgba(46,74,63,.18); }
.tap-send { width: 100%; }
@media (min-width: 560px) {
    .tap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tap-grid--circle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Reach-Out hero CTA (replaces dual SOS) */
.reach-out-hero {
    /* Wrapper is purely structural — no background/border/shadow so the
       deep-green .btn-reach reads as a single, primary CTA instead of a
       button-inside-a-button. */
    display: flex;
    flex-direction: column;
}
.btn-reach {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    min-height: 84px; padding: 14px 18px;
    border-radius: 18px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Solid, grounded deep-green. Opaque all the way through so the
       button reads as the primary CTA on the page. */
    background: #2b473d;
    color: #fff; text-decoration: none;
    border: 1px solid #1a2922;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 6px 14px rgba(36,59,50,.32),
        0 18px 36px rgba(36,59,50,.26);
    text-align: center;
}
.btn-reach::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg, #243b32 0%, #36544a 100%);
}
.btn-reach:hover { filter: brightness(1.04); }
.btn-reach:active { transform: translateY(1px); }
.btn-reach-eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: 1; color: #f1ead3; }
.btn-reach-label { font-size: 1.25rem; font-weight: 800; line-height: 1.05; }
.btn-reach-hint { font-size: .8rem; opacity: .95; }

/* Prayer reactions ("Christ's Reach") */
.reactions { display: flex; flex-direction: column; gap: 10px; }
.reactions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.reaction-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 999px;
    background: var(--achieve-surface-soft); border: 1px solid var(--achieve-border);
    color: var(--achieve-text); font: inherit; cursor: pointer;
    min-height: 40px;
}
.reaction-btn .glyph { font-size: 1.15rem; line-height: 1; }
.reaction-btn .count { font-weight: 700; font-size: .9rem; }
.reaction-btn.is-mine { background: var(--achieve-primary); color: #fff; border-color: var(--achieve-primary); }
.reactions-note { color: var(--achieve-muted); font-size: .82rem; margin: 0; }

/* Grid tiles */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px; background: var(--achieve-surface); border: 1px solid var(--achieve-border);
    border-radius: var(--radius); text-decoration: none; color: var(--achieve-text);
    box-shadow: var(--shadow);
}
.tile strong { font-size: 1rem; }
.tile span { color: var(--achieve-muted); font-size: .85rem; }
.circle-tile { min-height: 110px; justify-content: space-between; }
.circle-tile__count { margin-top: auto; }
.circle-add-form { margin-top: 12px; }

.circle-top { margin-bottom: 8px; }
.circle-hero-card {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(202, 166, 74, .22);
}
.circle-hero-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.circle-hero-card__head h1 { margin: 0; font-size: 1.45rem; }
.circle-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    color: #6a4d1a;
    background: #fff5da;
    border: 1px solid rgba(202, 166, 74, .3);
}
.circle-hero-card__meta {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--achieve-muted);
    font-size: .88rem;
}
.circle-hero-card__meta span {
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--achieve-border);
    background: #fff;
}
.circle-hero-card__desc {
    margin: 10px 0 0;
    line-height: 1.5;
}
.circle-hero-card__actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.circle-composer textarea {
    width: 100%;
    font: inherit;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--achieve-border);
    background: #fff;
    color: var(--achieve-text);
    resize: vertical;
}
.circle-composer__chips {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.circle-composer__chips .btn-ghost {
    padding: 7px 12px;
    font-size: .85rem;
}
.circle-privacy-pill {
    margin: 10px 0 0;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef3f0;
    border: 1px solid rgba(46, 74, 63, .24);
    color: #2e4a3f;
    font-size: .78rem;
    font-weight: 700;
}

.circle-empty-state h3 { margin: 0 0 6px; }
.circle-empty-state p { margin-top: 0; color: var(--achieve-muted); }
.circle-feed {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.circle-feed-card {
    border: 1px solid var(--achieve-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    padding: 12px;
}
.circle-feed-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.circle-feed-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.circle-feed-card__author p { margin: 2px 0 0; font-size: .8rem; }
.circle-feed-card__type {
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid rgba(31, 33, 31, .14);
    padding: 3px 8px;
    color: #2f3f36;
    background: #f5f4ef;
}
.circle-feed-card__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.circle-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    background: #fff1cf;
    color: #6a4d1a;
    border: 1px solid rgba(202, 166, 74, .3);
}

.circle-members-grid {
    display: grid;
    gap: 8px;
}
.circle-member-chip {
    border: 1px solid var(--achieve-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.circle-member-chip p { margin: 2px 0 0; font-size: .82rem; }

.circle-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.circle-row {
    border: 1px solid var(--achieve-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.circle-row__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.circle-row__title h3 {
    margin: 0;
    font-size: 1.06rem;
}

.circle-row__meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.circle-stat {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--achieve-border);
    background: #fff;
    color: var(--achieve-muted);
    font-size: .82rem;
}

.circle-row__latest {
    margin: 8px 0 0;
    font-size: .86rem;
}

.circle-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.circle-mini-invite {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.circle-mini-invite svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.btn-mini {
    padding: 8px 12px;
    font-size: .85rem;
    min-height: 38px;
}

.circle-feed-card__actions {
    margin: 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Phone-first compaction for circles workflow. */
@media (max-width: 560px) {
    .circle-hero-card,
    .circle-row,
    .circle-feed-card,
    .circle-member-chip {
        padding: 10px;
        border-radius: 12px;
    }

    .circle-hero-card__head h1 {
        font-size: 1.2rem;
        line-height: 1.2;
    }

    .circle-row__title h3 {
        font-size: 1rem;
    }

    .circle-row__meta {
        gap: 6px;
        margin-top: 6px;
    }

    .circle-stat,
    .circle-type-badge,
    .circle-privacy-pill {
        font-size: .74rem;
        padding: 2px 7px;
    }

    .circle-row__latest,
    .circle-feed-card__author p,
    .circle-member-chip p {
        font-size: .78rem;
    }

    .circle-row__actions,
    .circle-hero-card__actions,
    .circle-feed-card__actions {
        gap: 6px;
    }

    .circle-row__actions .btn,
    .circle-row__actions .btn-ghost,
    .circle-hero-card__actions .btn,
    .circle-hero-card__actions .btn-ghost,
    .circle-feed-card__actions .btn,
    .circle-feed-card__actions .btn-ghost {
        min-height: 38px;
        padding: 8px 12px;
        font-size: .85rem;
    }

    .circle-mini-invite svg {
        width: 14px;
        height: 14px;
    }

    .circle-avatar {
        width: 26px;
        height: 26px;
        font-size: .78rem;
    }

    .circle-feed-card .reactions-row {
        gap: 6px;
    }

    .circle-feed-card .reaction-btn {
        min-height: 38px;
        padding: 8px 12px;
        gap: 4px;
    }

    .circle-feed-card .reaction-btn .glyph {
        font-size: 1.05rem;
    }

    .circle-feed-card .reaction-btn .count {
        font-size: .82rem;
    }
}

@media (min-width: 820px) {
    .circle-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .circle-row__main {
        flex: 1;
        min-width: 0;
    }

    .circle-row__actions {
        justify-content: flex-end;
    }

    .circle-members-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Lists, scripture */
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 8px 0; border-bottom: 1px solid var(--achieve-border); }
.list li:last-child { border-bottom: none; }
.scripture { background: var(--achieve-surface-soft); padding: 10px 12px; border-left: 3px solid var(--achieve-gold); border-radius: 6px; margin: 6px 0; }
.prayer { background: #f3efe2; padding: 10px 12px; border-left: 3px solid var(--achieve-primary); border-radius: 6px; }
.scripture-hero .lead { margin: 0; font-weight: 700; color: var(--achieve-primary); }
.scripture-guide h2, .devotional-card h2, .scripture-practice-grid h2 { margin-top: 0; }
.scripture-stack { display: grid; gap: 10px; }
.scripture-card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.scripture-card header { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.scripture-card header span { color: var(--achieve-muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.scripture-text { margin: 0; font-size: 1rem; }
.scripture-context { margin: 0; color: var(--achieve-muted); }
.devotional-card p { margin: 0 0 12px; }
.devotional-card p:last-child { margin-bottom: 0; }
.scripture-practice-grid { display: grid; gap: 16px; }
.scripture-actions, .scripture-prompts { margin: 0; padding-left: 22px; }
.scripture-actions li, .scripture-prompts li { margin-bottom: 10px; }
.scripture-actions li:last-child, .scripture-prompts li:last-child { margin-bottom: 0; }
.scripture-actions strong { display: block; }
.scripture-actions span { display: block; color: var(--achieve-muted); }

/* Forms */
.stacked-form { display: flex; flex-direction: column; gap: 12px; }
.stacked-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; color: var(--achieve-text); }
.stacked-form input:not([type=checkbox]):not([type=radio]), .stacked-form select, .stacked-form textarea, .inline-form input, .inline-form select {
    font: inherit; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--achieve-border); background: #fff; color: var(--achieve-text);
}
.stacked-form__check {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px !important;
    font-weight: 500;
    line-height: 1.35;
}
.stacked-form__check input[type=checkbox],
.stacked-form__check input[type=radio] {
    margin-top: 2px;
    flex: 0 0 auto;
}
.stacked-form__check span { display: inline-block; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input[type=text] { flex: 1; min-width: 200px; }
.error-banner { background: #fff4f2; border: 1px solid #efc4be; color: #6b2a23; padding: 10px 12px; border-radius: 10px; }

.quick-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.quick-card-heading h2 { margin: 0; }
.quick-tap-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-tap-form label { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; font-weight: 700; }
.quick-tap-form select {
    width: 100%;
    min-height: 44px;
    font: inherit;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--achieve-border);
    background: #fff;
    color: var(--achieve-text);
}
.quick-tap-form .btn { width: 100%; grid-column: 1 / -1; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* Auth pages */
.page-auth {
    background: var(--achieve-bg);
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior-y: auto;
}
.page-auth > * { position: relative; z-index: 2; }
.auth-card { max-width: 460px; width: 100%; background: rgba(255,255,255,.92); border-radius: 22px; border: 1px solid var(--achieve-border); padding: 28px; text-align: center; box-shadow: 0 10px 30px rgba(31,33,31,.10); backdrop-filter: blur(1.5px); margin-block: auto; }
.auth-wings { width: 100%; max-width: 180px; max-height: 140px; object-fit: contain; margin: 0 auto 8px; display: block; }
.auth-card h1 { margin: 4px 0 6px; color: #17221c; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.auth-card .lead, .auth-card .muted { color: #36433c; }
.auth-card form { text-align: left; display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.auth-card label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; }
.auth-card input { font: inherit; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--achieve-border); }
.auth-card .btn, .auth-card .btn-primary { margin-top: 6px; width: 100%; }
.footnote { margin-top: 14px; font-size: .9rem; }
.auth-card--logo-only .lead { margin: 4px auto 0; max-width: 34ch; }
.auth-wings--hero { max-width: 430px; max-height: 370px; margin-bottom: 10px; }

.page-auth:focus-within {
    place-items: start center;
}

.page-auth:focus-within .auth-card {
    margin-block: 12px auto;
}

@media (max-width: 420px) {
    .page-auth {
        padding-inline: 12px;
    }

    .auth-card {
        padding: 22px 18px;
    }

    .auth-wings--hero { max-width: 360px; max-height: 310px; }
}

@media (max-height: 860px) {
    .page-auth { align-items: start; }
    .auth-card {
        margin-top: 10px;
        max-height: calc(100dvh - 24px);
        overflow: auto;
    }
}

@media (max-height: 760px) {
    .auth-wings {
        max-width: 124px;
        max-height: 92px;
        margin-bottom: 4px;
    }

    .auth-rotator {
        min-height: 72px;
        margin-top: 10px;
    }

    .auth-rotator-item blockquote {
        font-size: .94rem;
        line-height: 1.35;
    }
}

/* Login scripture rotator: stacked items, slow crossfade */
.auth-rotator {
    --auth-rotator-count: 5;
    --auth-rotator-step: 7s;          /* per-slide duration */
    position: relative;
    margin: 14px auto 4px;
    min-height: 96px;
    max-width: 360px;
    text-align: center;
}
.auth-rotator-item {
    position: absolute; inset: 0;
    margin: 0;
    display: flex; flex-direction: column; gap: 6px;
    align-items: center; justify-content: center;
    opacity: 0;
    animation-name: authRotatorFade;
    animation-duration: calc(var(--auth-rotator-step) * var(--auth-rotator-count));
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.auth-rotator-item blockquote { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--achieve-text); max-width: 32ch; }
.auth-rotator-ref { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--achieve-primary); }

@keyframes authRotatorFade {
    /* Each slide gets ~1/N of the cycle. With N=5, that's 20%.
       Soft fade in/out inside that window. */
    0%   { opacity: 0; transform: translateY(4px); }
    3%   { opacity: 1; transform: translateY(0); }
    17%  { opacity: 1; transform: translateY(0); }
    20%  { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .auth-rotator-item { animation: none; }
    .auth-rotator-item:first-child { opacity: 1; }
}

/* Narrow help pages */
.page-narrow { max-width: 640px; margin: 0 auto; padding: 24px 16px 80px; }
.help-page { display: flex; flex-direction: column; gap: 16px; }
.disclaimer { font-size: .85rem; color: var(--achieve-muted); padding: 8px 4px; }

/* Badges */
.badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.badges li { background: var(--achieve-gold-soft); border: 1px solid var(--achieve-gold); color: #5a4416; padding: 4px 10px; border-radius: 999px; font-size: .85rem; }

/* Admin tables */
.data { width: 100%; border-collapse: collapse; font-size: .85rem; }
.data th, .data td { padding: 6px 8px; border-bottom: 1px solid var(--achieve-border); text-align: left; vertical-align: top; }
.data thead th { background: var(--achieve-surface-soft); }

.track-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--achieve-surface-soft); border: 1px solid var(--achieve-border); font-size: .85rem; }

@media (min-width: 720px) {
    .hero h1 { font-size: 1.9rem; }
    .calm-moment { min-height: 224px; padding: 18px; }
    .calm-moment--home { min-height: 210px; }
    .calm-moment--home .calm-subtitle { display: block; }
    .calm-title { font-size: 1.85rem; }
}

@media (max-width: 420px) {
    .brand-word { display: none; }
    .brand-mark { height: 72px; }
    .app-help { min-width: 56px; height: 40px; padding: 0 12px; font-size: .95rem; }
    .app-drawer-tab { top: 110px; }
    .calm-moment { min-height: 206px; padding: 14px; }
    .calm-moment--home { min-height: 184px; }
    .calm-moment::before { width: 138px; right: -34px; top: -26px; opacity: .075; }
    .calm-title { font-size: 1.42rem; }
    .calm-subtitle { font-size: .9rem; }
    .calm-message { min-height: 78px; padding: 9px 10px; }
    .calm-message p { font-size: .94rem; }
    .app-drawer-tab { width: 20px; height: 56px; line-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .calm-moment::before, .calm-message { animation: none; }
}

/* Calm page-to-page fade. A full-viewport veil covers the swap so the header,
   nav, fonts and images on the new page never flash in. SOS (.app-help) is
   exempt — JS skips the fade for it. */
.page-veil {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #2e4a3f; /* matches <meta name="theme-color"> */
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
    will-change: opacity;
}
body.is-page-leaving .page-veil { opacity: 1; pointer-events: auto; }
html.is-page-entering .page-veil,
body.is-page-entering .page-veil { opacity: 1; pointer-events: auto; transition: none; }
body.is-page-leaving { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
    .page-veil { display: none !important; }
}

/* Install prompt on app.christsreach.com */
body.has-install-dock.page-auth {
    padding-bottom: calc(184px + env(safe-area-inset-bottom));
}

body.has-install-dock.app-shell {
    padding-bottom: calc(178px + env(safe-area-inset-bottom));
}

.install-app-dock {
    position: fixed;
    left: 10px;
    right: 10px;
    z-index: 24;
    border: 1px solid var(--achieve-border);
    border-radius: 16px;
    background: rgba(251,248,241,.98);
    box-shadow: 0 14px 28px rgba(31, 33, 31, .2);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

.app-shell .install-app-dock {
    bottom: calc(66px + env(safe-area-inset-bottom));
}

.page-auth .install-app-dock {
    bottom: max(8px, env(safe-area-inset-bottom));
}

.install-app-dock__copy {
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.install-app-dock__copy strong {
    color: #1a2922;
    font-size: .98rem;
}

.install-app-dock__copy span {
    color: #425046;
    font-size: .84rem;
}

.install-app-dock__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.install-app-dock__actions .btn {
    min-height: 40px;
}

.install-app-modal {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.install-app-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(18, 24, 20, .45);
}

.install-app-modal__panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(460px, calc(100% - 28px));
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid var(--achieve-border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 20px 40px rgba(31, 33, 31, .3);
}

.install-app-modal__x {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--achieve-border);
    background: #fff;
    font-size: 1.2rem;
    line-height: 1;
}

.install-app-modal__panel h2 {
    margin: 0 0 6px;
    color: #1a2922;
    font-size: 1.25rem;
}

.install-app-modal__lead {
    margin: 0 0 12px;
    color: #34423a;
    font-size: .95rem;
}

.install-app-modal__steps {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
    color: #243027;
}

.install-app-modal__actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 420px) {
    .install-app-dock {
        left: 8px;
        right: 8px;
    }

    .install-app-dock__actions {
        grid-template-columns: 1fr;
    }
}