/* Faithful mobile · the first visit. See faithful-mobile-welcome.js.
 * Same scale as Home: 22 · 17 · 15 · 13 · 12, two families, three weights.
 * Every selector is under .app, so nothing here reaches another page.
 * Surfaces follow Home's indigo-and-gold system (faithful-mobile-home.css):
 * light cards with a gold rule, dark gradient cards, gold for the one primary
 * action, navy pills for the rest. The values are repeated here rather than
 * shared because these pieces also appear on screens other than Home. */

/* ── the tour ───────────────────────────────────────────────────────────── */
/* The layer takes every tap, so the page underneath cannot be used by accident
   mid-step. The dimming is a filled layer with the spotlight cut out of it by
   clip-path (set in the script); the "hole" element is only the gold ring. */
.app .fw-tour{position:absolute;inset:0;z-index:70;overflow:hidden}
.app .fw-tour[hidden]{display:none}
/* Demo toasts keep firing on a timer; under a tour they are just noise. */
.app.fw-touring :is(.impact-float,.toast,.watch-donate-toast){visibility:hidden}
/* 88%: engines that blend transparency in linear light render this lighter
   than ones that blend in sRGB, and it has to read as "dimmed" in both. */
.app .fw-tour-dim{position:absolute;inset:0;background:#051d3ee0}
.app .fw-tour-hole{position:absolute;box-sizing:border-box;border:2px solid #e6c070;box-shadow:0 0 0 1px #051d3e66,0 0 24px #e6c07059;pointer-events:none}
.app .fw-tour-hole[hidden]{display:none}
.app .fw-tour-card{position:absolute;left:16px;right:16px;padding:18px 18px 14px;border-radius:20px;background:linear-gradient(180deg,#fff 0%,#f7fafc 100%);border:1px solid #e6d8b0;color:#0f2c46;box-shadow:0 1px 0 #fff inset,0 18px 48px #051d3e80}
.app .fw-tour-position{margin:0 0 4px;font:600 12px/1.4 var(--font-ui,Inter),sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8a5f14}
.app .fw-tour-title{margin:0;font:700 22px/1.2 var(--font-display,Georgia),Georgia,serif;letter-spacing:-.3px;color:#113657;outline:none}
.app .fw-tour-caption{margin:8px 0 0;font:400 15px/1.5 var(--font-ui,Inter),sans-serif;color:#476178}
.app .fw-tour-actions{display:flex;align-items:center;gap:8px;margin-top:16px}
.app .fw-tour-actions button{min-height:44px;padding:0 16px;border-radius:22px;border:0;font:600 15px/1 var(--font-ui,Inter),sans-serif;cursor:pointer}
.app .fw-tour-skip,.app .fw-tour-listen{background:none;color:#113657}
.app .fw-tour-skip{padding-left:4px!important}
.app .fw-tour-next{margin-left:auto;background:linear-gradient(135deg,#143e63 0%,#316796 100%);color:#fff;box-shadow:0 8px 18px #143e6340}
.app .fw-tour-next:active{filter:brightness(.92)}
.app .fw-tour-listen:disabled{opacity:.5;cursor:default}
.app .fw-tour-status{min-height:0;margin:0;font:400 12px/1.5 var(--font-ui,Inter),sans-serif;color:#536d85}
.app .fw-tour-status:not(:empty){margin-top:8px}
.app .fw-tour button:focus-visible{outline:3px solid #3285bf;outline-offset:2px}

/* ── one tip per tab, above the tab bar, never over the top of the page ─── */
/* 78px: above the GRACE bar, which now sits over every tab. */
.app .screen > .fw-tip{position:absolute;left:12px;right:12px;bottom:78px;z-index:6;padding:16px 16px 10px;border-radius:20px;background:radial-gradient(130% 70% at 50% 0%,#3c668b 0%,#3c668b00 62%),linear-gradient(180deg,#0c2444 0%,#173c5d 52%,#0c2e4c 100%);border:1.5px solid #c8963e;color:#fff;box-shadow:0 1px 0 #ffffff24 inset,0 14px 34px #091e3966;animation:fw-rise .28s ease both}
.app .screen{position:relative}
.app .screen:not(#_) > .fw-tip h2{margin:0;font:700 17px/1.25 var(--font-display,Georgia),Georgia,serif;color:#fff}
.app .screen:not(#_) > .fw-tip p{margin:4px 0 0;font:400 13px/1.5 var(--font-ui,Inter),sans-serif;color:#d3e4ec}
.app .fw-tip-actions{display:flex;justify-content:flex-end;gap:4px;margin-top:6px}
.app .screen:not(#_) > .fw-tip button{min-height:44px;padding:0 14px;border:0;border-radius:22px;background:none;color:#f0d596;font:600 15px/1 var(--font-ui,Inter),sans-serif;cursor:pointer}
.app .screen:not(#_) > .fw-tip .fw-tip-ok{background:linear-gradient(135deg,#e6c070 0%,#cf9f48 52%,#b5822f 100%);color:#0f223b;box-shadow:0 1px 0 #ffffff80 inset}
.app .fw-tip button:focus-visible{outline:3px solid #79c5ff;outline-offset:-2px}
@keyframes fw-rise{from{opacity:0;transform:translateY(12px)}}

/* The tip says what the row's subline said, once. After that a closed row is
   its title: one line instead of three. Open, it is unchanged. */
.app .screen .fp-connection:not([open]) > summary .fh-guide-subline{display:none}
.app .screen .fp-connection:not([open]) > summary{min-height:52px;padding-top:12px;padding-bottom:12px;display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.3}

/* ── Home: one slim line until the story is filled in or dismissed ──────── */
.app #screen-home > .scroll > .fw-story-nudge{display:flex;align-items:center;margin:16px 16px 0;padding:0 4px 0 16px;min-height:56px;border-radius:18px}
.app #screen-home > .scroll > .fw-story-nudge[hidden]{display:none}
.app .fw-story-nudge-go{flex:1;min-width:0;min-height:56px;padding:0;border:0;background:none;text-align:left;font:600 15px/1.3 var(--font-ui,Inter),sans-serif;color:#113657;cursor:pointer}
.app .fw-story-nudge-go small{display:block;font:400 12px/1.4 var(--font-ui,Inter),sans-serif;color:#8a5f14}
.app .fw-story-nudge-close{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:none;font:400 22px/1 var(--font-ui,Inter),sans-serif;color:#8a5f14;cursor:pointer}
.app .fw-story-nudge button:focus-visible{outline:3px solid #3285bf;outline-offset:-2px}

/* ── My story, as a page ────────────────────────────────────────────────── */
.app #screen-destination-my-story [data-member-story] > form{display:block;margin:0;padding:0;border:0;background:none}
.app #screen-destination-my-story .fp-connection-layout{display:block}
.app #screen-destination-my-story :is(.fp-question,.fp-story-note,.fp-consent){margin:0 0 16px;padding:16px;border:1px solid #e6d8b0;border-radius:20px;background:linear-gradient(180deg,#fff 0%,#f7fafc 100%);box-shadow:0 1px 0 #fff inset,0 2px 4px #11365712,0 14px 30px #1136571c}
.app #screen-destination-my-story :is(legend,.fp-story-note > label){padding:0;font:700 17px/1.25 var(--font-display,Georgia),Georgia,serif;color:#113657}
.app #screen-destination-my-story :is(p,label,dd,dt,select,textarea){font-size:15px;line-height:1.5}
.app #screen-destination-my-story :is(textarea,select){width:100%;margin-top:10px;padding:12px;border:1px solid #d6e2e8;border-radius:12px;font-size:16px;background:#fbfdfe;color:#0f2c46}
/* The "taking shape" preview is the page's dark card: your own words, read
   back. Its list was a two-column grid sized for the desktop sidebar. */
.app #screen-destination-my-story .fp-profile{margin:0 0 16px;padding:16px;border-radius:20px;border:1.5px solid #c8963e;background:radial-gradient(130% 70% at 50% 0%,#3c668b 0%,#3c668b00 62%),linear-gradient(180deg,#0c2444 0%,#173c5d 52%,#0c2e4c 100%);box-shadow:0 1px 0 #ffffff24 inset,0 18px 36px #091e394d}
.app #screen-destination-my-story .fp-profile h3{margin:0;font:700 17px/1.25 var(--font-display,Georgia),Georgia,serif;color:#fff}
.app #screen-destination-my-story .fp-profile h3:not(:first-child){margin-top:16px}
.app #screen-destination-my-story .fp-profile p{margin:4px 0 0;font-size:13px;line-height:1.5;color:#d3e4ec}
.app #screen-destination-my-story .fp-profile .fp-preview-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#f0d596}
.app #screen-destination-my-story .fp-profile dl{display:block;margin:8px 0 0}
.app #screen-destination-my-story .fp-profile dt{margin-top:10px;font-size:12px;font-weight:600;color:#f0d596}
.app #screen-destination-my-story .fp-profile dd{margin:2px 0 0;font-size:15px;color:#fff}
.app #screen-destination-my-story .fp-consent label{display:flex;align-items:flex-start;gap:12px;min-height:44px}
.app #screen-destination-my-story .fp-consent input{flex:none;width:22px;height:22px;margin:2px 0 0}
.app #screen-destination-my-story .fp-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.app #screen-destination-my-story .fp-choices label{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid #e6d8b0;border-radius:22px;font-size:13px;background:linear-gradient(180deg,#fdfcf6,#f6f4e6);color:#113657}
.app #screen-destination-my-story .fp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.app #screen-destination-my-story .fp-actions button{flex:1 1 auto;min-height:48px;padding:0 18px;border-radius:24px;border:1px solid #e6d8b0;background:linear-gradient(180deg,#fff,#f7fafc);color:#113657;font:600 15px/1 var(--font-ui,Inter),sans-serif;cursor:pointer}
/* Get connected (faithful-mobile-get-connected.js). The gold button is the one
   that sends to the church; keeping it on the phone is an ordinary button, so
   the two cannot be mistaken for each other. */
.app #screen-destination-my-story .fgc-hint{margin:12px 0 0;font-size:13px;line-height:1.5;color:#5a7788}
.app #screen-destination-my-story .fgc-name input{width:100%;min-height:48px;margin-top:10px;padding:12px}
.app #screen-destination-my-story .fp-choices label:has(input:checked){background:linear-gradient(135deg,#143e63 0%,#316796 100%);border-color:transparent;color:#fff}
.app #screen-destination-my-story .fgc-send{margin:0 0 16px;padding:16px;border-radius:20px;border:1.5px solid #c8963e;background:radial-gradient(130% 70% at 50% 0%,#3c668b 0%,#3c668b00 62%),linear-gradient(180deg,#0c2444 0%,#173c5d 52%,#0c2e4c 100%);box-shadow:0 1px 0 #ffffff24 inset,0 18px 36px #091e394d}
/* Two IDs: the app-wide heading rule is (1,3,1) and would paint this navy on a
   dark card. */
.app .screen:not(#_)#screen-destination-my-story .fgc-send h3{margin:0 0 12px;font:700 17px/1.25 var(--font-display,Georgia),Georgia,serif;color:#fff}
.app #screen-destination-my-story .fgc-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;margin:0 0 8px;font-size:15px;line-height:1.45;color:#fff}
.app #screen-destination-my-story .fgc-check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:#e6c070}
.app #screen-destination-my-story .fgc-small{margin:4px 0 14px;font-size:13px;line-height:1.5;color:#d3e4ec}
.app #screen-destination-my-story .fgc-go{width:100%;min-height:48px;border:0;border-radius:24px;background:linear-gradient(135deg,#e6c070 0%,#cf9f48 52%,#b5822f 100%);color:#0f223b;font:600 15px/1 var(--font-ui,Inter),sans-serif;cursor:pointer;box-shadow:0 1px 0 #ffffff80 inset,0 10px 22px #051d3e59}
.app #screen-destination-my-story .fgc-go:disabled{opacity:.6;cursor:default}
.app #screen-destination-my-story .fgc-status{margin:0;font-size:13px;line-height:1.5;color:#f0d596}
.app #screen-destination-my-story .fgc-status:not(:empty){margin-top:10px}
.app #screen-destination-my-story .fgc-or{margin:0 0 12px;font:600 12px/1.4 var(--font-ui,Inter),sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8a5f14;text-align:center}
.app #screen-destination-my-story .fp-actions button[type=submit]{flex-basis:100%}

/* ── side menu: the two ways back in, as one row ────────────────────────── */
.app .fw-drawer-row{display:flex;gap:8px;margin:12px 2px 2px}
.app .fw-drawer-chip{flex:1 1 auto;min-width:0;min-height:44px;padding:0 6px;white-space:nowrap;border-radius:22px;border:1px solid #ffffff38;background:#ffffff12;color:#f0f5fc;font:600 13px/1 var(--font-ui,Inter),sans-serif;cursor:pointer}
.app .fw-drawer-chip:active{background:#ffffff24}
.app .fw-drawer-chip:focus-visible{outline:3px solid #79c5ff;outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  .app .screen > .fw-tip{animation:none}
}

/* Per-tab tours replace the guide dropdowns (2026-09-21). */
.app .fw-page-tour{margin:10px 16px 4px;display:flex;justify-content:flex-start}
.app .fw-page-tour-go{min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line,#d4e2ee);background:#fff;color:var(--ink,#193654);font:600 13px/1.3 var(--font-body);display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.app .fw-page-tour-go::before{content:'';width:8px;height:8px;border-radius:50%;background:#c9a24a;flex:0 0 8px}
.app .fm-wallet-notice{margin:8px 16px 12px;padding:10px 12px;border-radius:10px;background:#eef4fa;color:#27516f;font:400 12px/1.55 var(--font-body)}
.app .fw-impact-section{margin-top:8px}
.app .fw-impact-heading{font-family:var(--font-display);font-size:22px;line-height:1.25;margin:4px 16px 8px;color:var(--ink,#193654)}