/* =====================================================================
   VESPERS — Prayer (/prayer) + Prayer Request (/prayer-request)
   Inherits tokens from main.css. Mobile-first.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Shared immersive midnight hero
   --------------------------------------------------------------------- */
.pr-hero, .prq-hero{position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 90% at 50% -10%, #2b2f5c 0%, var(--ink-900) 46%, var(--ink-950) 100%);
  color:var(--on-dark-1); text-align:center;}
.pr-hero{min-height:clamp(560px,82svh,760px); display:flex; align-items:center;
  padding-top:clamp(118px,16vw,160px); padding-bottom:clamp(56px,8vw,96px);}
.prq-hero{padding-top:clamp(116px,15vw,150px); padding-bottom:clamp(40px,6vw,68px);}
.pr-hero-glow{position:absolute; inset:0; z-index:0; pointer-events:none; background:
  radial-gradient(46% 40% at 50% 30%, rgba(226,203,148,.30), transparent 64%),
  radial-gradient(30% 26% at 50% 76%, rgba(198,164,92,.20), transparent 70%);}
.pr-hero .hero-arch, .prq-hero .hero-arch{bottom:-30%; opacity:.5;}
.pr-hero-inner, .prq-hero-inner{position:relative; z-index:2; max-width:60ch; margin-inline:auto;}
.pr-hero h1{color:var(--on-dark-1); font-size:clamp(2.7rem,6.4vw,4.8rem); line-height:1.02; margin:14px 0 0; text-shadow:0 2px 50px rgba(20,22,46,.6);}
.pr-hero h1 em, .prq-hero h1 em{font-style:italic; color:var(--gilt-300);}
.pr-hero .lead, .prq-hero .lead{color:var(--on-dark-2); margin:18px auto 0; max-width:54ch;}
.pr-hero .verse{margin:24px auto 0; max-width:46ch;}
.pr-hero .verse p{color:var(--gilt-100);}
.pr-hero .verse .cite, .prq-hero .verse .cite{color:var(--gilt-300);}
.pr-hero-cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:30px;}

/* floating candle motes */
.pr-candles{position:absolute; inset:0; z-index:1; pointer-events:none;}
.pr-candles span{position:absolute; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle, rgba(243,232,204,.95), rgba(226,203,148,.2) 70%, transparent);
  box-shadow:0 0 14px 3px rgba(226,203,148,.5); animation:pr-float 7s ease-in-out infinite;}
.pr-candles span:nth-child(1){left:16%; top:62%; animation-delay:0s;}
.pr-candles span:nth-child(2){left:30%; top:40%; animation-delay:1.4s; transform:scale(.7);}
.pr-candles span:nth-child(3){left:68%; top:50%; animation-delay:.7s; transform:scale(.85);}
.pr-candles span:nth-child(4){left:82%; top:66%; animation-delay:2.1s; transform:scale(.6);}
.pr-candles span:nth-child(5){left:50%; top:72%; animation-delay:3s;}
@keyframes pr-float{0%,100%{opacity:.5; transform:translateY(0) scale(1);} 50%{opacity:1; transform:translateY(-16px) scale(1.18);}}
@media (prefers-reduced-motion:reduce){ .pr-candles span{animation:none;} }

/* ---------------------------------------------------------------------
   How we pray
   --------------------------------------------------------------------- */
.pr-how{background:var(--parchment-50);}
.pr-how-head{max-width:56ch;}
.pr-how-grid{display:grid; grid-template-columns:1fr; gap:clamp(18px,3vw,28px); margin-top:clamp(26px,3.4vw,42px);}
.pr-how-step{position:relative; background:var(--surface); border:1px solid var(--border-soft); border-radius:18px;
  padding:30px 26px 26px; box-shadow:var(--shadow-sm); overflow:hidden;}
.pr-how-step::before{content:""; position:absolute; inset:0 auto auto 0; width:100%; height:3px;
  background:linear-gradient(90deg, var(--gilt-500), transparent);}
.pr-how-n{position:absolute; top:18px; right:22px; font:600 1.4rem/1 var(--font-display); color:var(--gilt-300);}
.pr-how-med{display:inline-flex; align-items:center; justify-content:center; width:54px; height:60px;
  border-radius:var(--arch); color:var(--accent-strong); background:var(--gilt-100); border:1px solid var(--hairline-gold); margin-bottom:16px;}
.pr-how-step h3{font:600 1.32rem/1.2 var(--font-display); color:var(--fg1);}
.pr-how-step p{font:400 1rem/1.66 var(--font-body); color:var(--fg2); margin-top:8px;}
@media (min-width:760px){ .pr-how-grid{grid-template-columns:repeat(3,1fr);} }

/* ---------------------------------------------------------------------
   Categories
   --------------------------------------------------------------------- */
.pr-cats{background:var(--surface-warm); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);}
.pr-cats-head{max-width:54ch;}
.pr-cats-grid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:clamp(24px,3vw,38px);}
.pr-cat{position:relative; display:flex; flex-direction:column; gap:4px; padding:22px 22px 22px 78px;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);}
.pr-cat-med{position:absolute; left:20px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:50px; border-radius:var(--arch); color:var(--accent-strong); background:var(--gilt-100); border:1px solid var(--hairline-gold);}
.pr-cat-name{font:600 1.2rem/1.1 var(--font-display); color:var(--fg1);}
.pr-cat-desc{font:400 .92rem/1.5 var(--font-body); color:var(--fg2);}
.pr-cat-go{position:absolute; right:20px; top:50%; transform:translateY(-50%); color:var(--accent-strong); opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease);}
@media (hover:hover){
  .pr-cat:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--hairline-gold);}
  .pr-cat:hover .pr-cat-go{opacity:1; transform:translate(4px,-50%);}
}
@media (min-width:620px){ .pr-cats-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:980px){ .pr-cats-grid{grid-template-columns:repeat(3,1fr);} }

/* ---------------------------------------------------------------------
   Promises (dark band)
   --------------------------------------------------------------------- */
.pr-promises{position:relative; overflow:hidden; isolation:isolate; color:var(--on-dark-1);
  background:linear-gradient(165deg, var(--indigo-600), var(--ink-900) 72%);}
.pr-promises-glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(50% 50% at 82% 8%, rgba(226,203,148,.18), transparent 62%);}
.pr-promises>.wrap{position:relative; z-index:2;}
.pr-promises-head{max-width:56ch;}
.pr-promises-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:clamp(24px,3vw,38px);}
.pr-promise{position:relative; margin:0; padding:26px 24px; background:rgba(251,248,240,.04);
  border:1px solid var(--border-on-dark,rgba(251,248,240,.16)); border-radius:16px; backdrop-filter:blur(2px);}
.pr-promise-mark{color:var(--gilt-300); opacity:.85;}
.pr-promise blockquote{margin:8px 0 0; font:italic 500 1.18rem/1.5 var(--font-display); color:var(--gilt-100); letter-spacing:-.01em;}
.pr-promise figcaption{margin-top:12px; font:700 .72rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--gilt-300);}
@media (min-width:680px){ .pr-promises-grid{grid-template-columns:1fr 1fr;} }

/* ---------------------------------------------------------------------
   Invite
   --------------------------------------------------------------------- */
.pr-invite{background:var(--parchment-50); text-align:center;}
.pr-invite-inner{max-width:60ch; margin-inline:auto; display:flex; flex-direction:column; align-items:center;}
.pr-invite-mark{color:var(--accent-strong); margin-bottom:8px;}
.pr-invite .kicker em{color:var(--accent-strong); font-style:italic;}
.pr-invite-note{font:400 1.06rem/1.7 var(--font-body); color:var(--fg2); margin:14px auto 0; max-width:48ch;}
.pr-invite-cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:26px;}

/* =====================================================================
   Prayer Request — the letter
   ===================================================================== */
.prq-crumb{display:flex; align-items:center; gap:9px; justify-content:center; font:600 .8rem/1 var(--font-body); color:var(--on-dark-3); margin-bottom:14px; flex-wrap:wrap;}
.prq-crumb a{color:var(--on-dark-2); transition:color .25s;}
.prq-crumb span[aria-hidden]{color:var(--on-dark-3);}
@media (hover:hover){ .prq-crumb a:hover{color:var(--gilt-300);} }
.prq-hero h1{color:var(--on-dark-1); font-size:clamp(2.3rem,5.2vw,3.7rem); line-height:1.05; margin:12px 0 0;}

.prq-body{background:var(--parchment-50);}
.prq-shell{display:grid; grid-template-columns:1fr; gap:clamp(24px,3.4vw,40px); align-items:start;}
@media (min-width:920px){ .prq-shell{grid-template-columns:1.7fr .9fr;} }

/* the parchment letter card */
.prq-letter{position:relative; background:var(--surface); border:1px solid var(--hairline-gold); border-radius:20px;
  padding:clamp(26px,3.6vw,44px); box-shadow:var(--shadow-lg);}
.prq-letter::before{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); pointer-events:none;}
.prq-letter-head{text-align:center; margin-bottom:22px;}
.prq-seal{display:inline-flex; align-items:center; justify-content:center; width:58px; height:64px; border-radius:var(--arch);
  color:var(--accent-strong); background:var(--gilt-100); border:1px solid var(--hairline-gold); margin-bottom:12px;}
.prq-letter-head h2{font:600 clamp(1.6rem,2.6vw,2.1rem)/1.1 var(--font-display); color:var(--fg1);}
.prq-letter-head p{font:400 1rem/1.6 var(--font-body); color:var(--fg2); margin-top:8px;}

.prq-form{margin-top:6px;}
.prq-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.prq-cats{border:0; padding:0; margin:0 0 4px;}
.prq-cats legend, .prq-field label{font:700 .72rem/1.2 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--fg3); margin-bottom:9px;}
.prq-chips{display:flex; flex-wrap:wrap; gap:9px;}
.prq-chip{position:relative; cursor:pointer;}
.prq-chip input{position:absolute; opacity:0; inset:0; cursor:pointer;}
.prq-chip span{display:inline-block; padding:8px 16px; border-radius:999px; font:600 .9rem/1 var(--font-body); color:var(--fg2);
  background:var(--surface-warm); border:1px solid var(--border); transition:all .2s var(--ease);}
.prq-chip input:checked + span{background:var(--ink-900); color:var(--gilt-100); border-color:var(--ink-900);}
.prq-chip input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
@media (hover:hover){ .prq-chip:hover span{border-color:var(--accent);} }

.prq-field{display:flex; flex-direction:column; margin-top:20px;}
.prq-field input, .prq-field textarea{width:100%; font:400 1rem/1.55 var(--font-body); color:var(--fg1); background:var(--surface-warm);
  border:1px solid var(--border); border-radius:12px; padding:13px 15px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);}
.prq-field textarea{resize:vertical; min-height:150px; font-family:var(--font-body);}
.prq-field input:focus, .prq-field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(198,164,92,.18); background:var(--surface);}
.prq-field input.is-invalid, .prq-field textarea.is-invalid{border-color:#B5523C !important; box-shadow:0 0 0 3px rgba(181,82,60,.14) !important;}
.prq-field input:disabled{opacity:.55; cursor:not-allowed;}
.prq-opt{font-weight:500; letter-spacing:0; text-transform:none; color:var(--fg3);}
.prq-grid2{display:grid; grid-template-columns:1fr; gap:0 18px;}
@media (min-width:560px){ .prq-grid2{grid-template-columns:1fr 1fr;} }

.prq-anon{display:inline-flex; align-items:center; gap:11px; margin-top:20px; cursor:pointer; user-select:none;}
.prq-anon input{position:absolute; opacity:0; width:1px; height:1px;}
.prq-anon-box{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px;
  border:1.5px solid var(--border-strong); color:transparent; background:var(--surface); transition:all .2s var(--ease);}
.prq-anon input:checked + .prq-anon-box{background:var(--ink-900); border-color:var(--ink-900); color:var(--gilt-100);}
.prq-anon input:focus-visible + .prq-anon-box{outline:2px solid var(--accent); outline-offset:2px;}
.prq-anon-txt{font:500 .98rem/1.3 var(--font-body); color:var(--fg1);}

.prq-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px;}
.prq-privacy{display:flex; align-items:center; gap:7px; margin-top:16px; font:500 .82rem/1.4 var(--font-body); color:var(--fg3);}
.prq-privacy vm-icon{color:var(--accent-strong);}

/* success panel */
.prq-success{text-align:center; background:var(--surface); border:1px solid var(--hairline-gold); border-radius:20px;
  padding:clamp(36px,5vw,60px) clamp(24px,4vw,48px); box-shadow:var(--shadow-lg); grid-column:1 / -1; max-width:620px; margin-inline:auto;}
.prq-success-mark{display:inline-flex; align-items:center; justify-content:center; width:78px; height:78px; border-radius:50%;
  color:var(--accent-strong); background:var(--gilt-100); border:1px solid var(--hairline-gold); margin-bottom:18px;}
.prq-success h2{font:600 clamp(1.8rem,3vw,2.4rem)/1.1 var(--font-display); color:var(--fg1);}
.prq-success p{font:400 1.05rem/1.65 var(--font-body); color:var(--fg2); margin:12px auto 0; max-width:46ch;}
.prq-success .verse{margin:22px auto; max-width:40ch;}
.prq-success-cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px;}

/* aside */
.prq-aside{display:flex; flex-direction:column; gap:18px;}
@media (min-width:920px){ .prq-aside{position:sticky; top:96px;} }
.prq-aside-card{background:var(--surface-warm); border:1px solid var(--border-soft); border-radius:16px; padding:24px;}
.prq-aside-card h3{font:600 1.22rem/1.2 var(--font-display); color:var(--fg1); margin-bottom:14px;}
.prq-aside-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px;}
.prq-aside-list li{display:flex; align-items:flex-start; gap:11px; font:400 .96rem/1.5 var(--font-body); color:var(--fg2);}
.prq-aside-list li span{flex:0 0 auto; color:var(--accent-strong); margin-top:1px;}
.prq-aside-verse{margin:0; padding:24px; border-radius:16px; color:var(--on-dark-1);
  background:linear-gradient(165deg, var(--indigo-600), var(--ink-900) 78%); position:relative; overflow:hidden;}
.prq-aside-verse::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 80% 10%, rgba(226,203,148,.2), transparent 62%);}
.prq-aside-verse>*{position:relative;}
.prq-aside-mark{color:var(--gilt-300);}
.prq-aside-verse blockquote{margin:8px 0 0; font:italic 500 1.1rem/1.5 var(--font-display); color:var(--gilt-100);}
.prq-aside-verse figcaption{margin-top:12px; font:700 .7rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--gilt-300);}
.prq-aside-foot{font:400 .9rem/1.6 var(--font-body); color:var(--fg3);}
.prq-aside-foot a{color:var(--accent-strong); font-weight:700;}

@media (prefers-reduced-motion:reduce){ .pr-cat, .pr-how-step{transition:none !important;} }