/* Faithful desktop · the first visit. See faithful-desktop-welcome.js.
 * Same gold-and-navy values as the phone's welcome layer
 * (faithful-mobile-welcome.css), reused here for one brand, not two: light
 * cards with a gold rule, dark gradient cards, gold for the one primary
 * action. Fixed to the viewport, not a device frame -- desktop has no
 * scaled mock to correct for. */

/* ── the tour ─────────────────────────────────────────────────────── */
.dw-tour{position:fixed;inset:0;z-index:200;overflow:hidden}
.dw-tour[hidden]{display:none}
html.dw-touring{overflow: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. */
.dw-tour-dim{position:absolute;inset:0;background:#051d3ee0}
.dw-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}
.dw-tour-hole[hidden]{display:none}
.dw-tour-card{position:fixed;width:380px;padding:22px 22px 16px;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 22px 56px #051d3e80}
/* GRACE hosts the card: her orb sits beside the step's own title, at the
   same "sm" size as the sidebar orb she is introduced from. */
.dw-tour-head{display:flex;align-items:flex-start;gap:12px}
.dw-tour-orb{flex:none;width:34px;height:34px}
.dw-tour-orb .grace-orb{width:100%;height:100%}
.dw-tour-head-text{flex:1;min-width:0}
.dw-tour-position{margin:0 0 4px;font:600 12px/1.4 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8a5f14}
.dw-tour-title{margin:0;font:700 22px/1.2 var(--font-display);letter-spacing:-.3px;color:#113657;outline:none}
.dw-tour-caption{margin:8px 0 0;font:400 15px/1.5 'Inter',sans-serif;color:#476178}
/* Ask GRACE a question, right from the card. */
.dw-tour-ask{display:flex;align-items:center;gap:8px;margin-top:14px;padding:4px 4px 4px 14px;border:1px solid #d6e2e8;border-radius:22px;background:#fbfdfe}
.dw-tour-ask input{flex:1;min-width:0;border:0;background:none;font:400 14px/1 'Inter',sans-serif;color:#0f2c46}
.dw-tour-ask input:focus{outline:none}
.dw-tour-ask input::placeholder{color:#8a9aa8}
.dw-tour-ask-send{flex:none;width:32px;height:32px;border-radius:50%;border:0;background:linear-gradient(135deg,#143e63 0%,#316796 100%);color:#fff;font:600 15px/1 'Inter',sans-serif;cursor:pointer}
.dw-tour-actions{display:flex;align-items:center;gap:8px;margin-top:14px}
.dw-tour-actions button{min-height:40px;padding:0 16px;border-radius:20px;border:0;font:600 14px/1 'Inter',sans-serif;cursor:pointer}
.dw-tour-skip{background:none;color:#113657;padding-left:4px!important}
.dw-tour-next{margin-left:auto;background:linear-gradient(135deg,#143e63 0%,#316796 100%);color:#fff;box-shadow:0 8px 18px #143e6340}
.dw-tour-next:active{filter:brightness(.92)}
/* The speaker toggle: one icon, two states, no label needed once you have
   clicked it -- the aria-label carries the meaning for anyone who has not. */
.dw-tour-speaker{flex:none;width:40px;padding:0!important;background:none;color:#113657;display:flex;align-items:center;justify-content:center}
.dw-tour-speaker.is-muted{color:#8a94a6}
.dw-tour-status{min-height:0;margin:0;font:400 12px/1.5 'Inter',sans-serif;color:#536d85}
.dw-tour-status:not(:empty){margin-top:8px}
.dw-tour button:focus-visible{outline:3px solid #3285bf;outline-offset:2px}
.dw-tour-ask input:focus-visible{outline:3px solid #3285bf;outline-offset:2px}

/* ── Home: one slim line until the story is filled in or dismissed ────── */
#sec-home > .dw-story-nudge{display:flex;align-items:center;margin:16px 0 0;padding:0 4px 0 18px;min-height:52px;border-radius:16px;background:linear-gradient(180deg,#fff 0%,#f7fafc 100%);border:1px solid #e6d8b0;box-shadow:0 1px 0 #fff inset}
#sec-home > .dw-story-nudge[hidden]{display:none}
.dw-story-nudge-go{flex:1;min-width:0;min-height:52px;padding:0;border:0;background:none;text-align:left;font:600 14px/1.3 'Inter',sans-serif;color:#113657;cursor:pointer}
.dw-story-nudge-go small{display:block;font:400 12px/1.4 'Inter',sans-serif;color:#8a5f14}
.dw-story-nudge-close{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:none;font:400 20px/1 'Inter',sans-serif;color:#8a5f14;cursor:pointer}
.dw-story-nudge button:focus-visible{outline:3px solid #3285bf;outline-offset:-2px}

/* ── My story, as a page ───────────────────────────────────── */
#sec-destination-my-story [data-member-story] > form{display:block;margin:0;padding:0;border:0;background:none}
#sec-destination-my-story .fp-connection-layout{display:block}
#sec-destination-my-story :is(.fp-question,.fp-story-note,.fp-consent){margin:0 0 16px;padding:18px;border:1px solid #e6d8b0;border-radius:18px;background:linear-gradient(180deg,#fff 0%,#f7fafc 100%);box-shadow:0 1px 0 #fff inset,0 2px 4px #11365712,0 14px 30px #1136571c}
#sec-destination-my-story :is(legend,.fp-story-note > label){padding:0;font:700 17px/1.25 var(--font-display);color:#113657}
#sec-destination-my-story fieldset > legend{float:left;width:100%;margin:0 0 10px}
/* A full-width float still lets the next box's line text ride up beside it. */
#sec-destination-my-story fieldset > legend ~ *{clear:both}
#sec-destination-my-story .fmn-hint{margin:10px 0 0;font-size:13px;line-height:1.5;color:#5b7a92}
#sec-destination-my-story fieldset::after{content:'';display:block;clear:both}
#sec-destination-my-story :is(p,label,dd,dt,select,textarea){font-size:15px;line-height:1.5}
#sec-destination-my-story :is(textarea,select,input[type="text"]){display:block;width:100%;margin-top:10px;padding:12px;border:1px solid #d6e2e8;border-radius:10px;font-size:15px;background:#fbfdfe;color:#0f2c46}
#sec-destination-my-story .fp-profile{margin:0 0 16px;padding:18px;border-radius:18px;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}
#sec-destination-my-story .fp-profile h3{margin:0;font:700 17px/1.25 var(--font-display);color:#fff}
#sec-destination-my-story .fp-profile h3:not(:first-child){margin-top:16px}
#sec-destination-my-story .fp-profile p{margin:4px 0 0;font-size:13px;line-height:1.5;color:#d3e4ec}
#sec-destination-my-story .fp-profile .fp-preview-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#f0d596}
#sec-destination-my-story .fp-profile dl{display:block;margin:8px 0 0}
#sec-destination-my-story .fp-profile dt{margin-top:10px;font-size:12px;font-weight:600;color:#f0d596}
#sec-destination-my-story .fp-profile dd{margin:2px 0 0;font-size:15px;color:#fff}
#sec-destination-my-story .fp-consent{display:flex;align-items:flex-start;gap:12px;min-height:32px}
#sec-destination-my-story .fp-consent input{flex:none;width:18px;height:18px;margin:2px 0 0}
#sec-destination-my-story .fp-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#sec-destination-my-story .fp-choices label{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid #e6d8b0;border-radius:20px;font-size:13px;background:linear-gradient(180deg,#fdfcf6,#f6f4e6);color:#113657}
#sec-destination-my-story .fp-choices label:has(input:checked){background:linear-gradient(135deg,#143e63 0%,#316796 100%);border-color:transparent;color:#fff}
#sec-destination-my-story .fp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
#sec-destination-my-story .fp-actions button{flex:1 1 auto;min-height:44px;padding:0 18px;border-radius:22px;border:1px solid #e6d8b0;background:linear-gradient(180deg,#fff,#f7fafc);color:#113657;font:600 14px/1 'Inter',sans-serif;cursor:pointer}
#sec-destination-my-story .fp-actions button[type=submit]{flex-basis:100%;border:0;background:linear-gradient(135deg,#e6c070 0%,#cf9f48 52%,#b5822f 100%);color:#0f223b;box-shadow:0 1px 0 #ffffff80 inset}

/* ── Settings: the way back in ───────────────────────────────────── */
/* Sits between .sb-top (which has its own padding+border-bottom) and
   .sb-scroll (which pads itself top:12px) -- needs its own horizontal
   inset now that it is not inside .sb-foot's padded box any more. */

/* "Tour this page", in the top corner of every guide dropdown.
   A row of its own rather than a float: a floated control inside a <details>
   lets the first paragraph ride up beside it, which is the bug the story
   fieldsets already hit once. It also keeps the button out of <summary>,
   where an interactive child fights the disclosure it sits in. */
/* "Tour this page": one look, one position, on every page.
   Inset to the same 24px as the guide's content instead of touching the edge.
   The :is(#...) prefix outranks page-level button rules -- Reflect's
   "#sec-profile button" and ".wj button" were turning it into a large white
   square there. */
:is(#sec-home,#sec-ai,#sec-network,#sec-profile,#sec-wallet,#sec-mobile) .fp-preferences > .dw-tour-bar{display:flex;justify-content:flex-end;margin:0;padding:14px 24px 0}
:is(#sec-home,#sec-ai,#sec-network,#sec-profile,#sec-wallet,#sec-mobile) .dw-tour-bar > .dw-tour-link{display:inline-flex;align-items:center;gap:8px;height:auto;min-height:36px;margin:0;padding:0 14px 0 6px;border-radius:999px;border:1px solid #c9dbea;background:#fff;color:#193654;font:600 13px/1 var(--font-body);box-shadow:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
:is(#sec-home,#sec-ai,#sec-network,#sec-profile,#sec-wallet,#sec-mobile) .dw-tour-bar > .dw-tour-link::before{content:'';flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#c9a24a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7.5v9l7-4.5z' fill='%2310283f'/%3E%3C/svg%3E") center/18px no-repeat}
:is(#sec-home,#sec-ai,#sec-network,#sec-profile,#sec-wallet,#sec-mobile) .dw-tour-bar > .dw-tour-link:hover{background:#f2f7fc;border-color:#9fbfd9}
:is(#sec-home,#sec-ai,#sec-network,#sec-profile,#sec-wallet,#sec-mobile) .dw-tour-bar > .dw-tour-link:focus-visible{outline:2px solid #175fa5;outline-offset:2px}
/* Reflect's ".wj small{margin:8px 0}" made its guide header 8px taller than
   every other page's; give the subline the same spacing as the rest. */
#sec-profile [data-reflect-guide] > summary .fh-guide-subline{margin:5px 0 0}

/* My Church asks name + starting point on desktop; the research questions
   (age, language, attendance, app confidence) are not part of this workshop.
   They mount after this layer runs, so they are hidden by rule, not by script. */
#sec-home [data-story-segments]{display:none!important}