/* Praying Wall — the living Wall (scripts/stonewall.js).
   The stage is always night: the wall is lit by prayer, not by the theme. */

.sw-tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin-top: var(--s5, 24px);
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.sw-tabs [role="tab"] {
  font: 600 0.95rem/1 var(--sans); color: var(--dim);
  padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; min-height: 40px;
}
.sw-tabs [role="tab"][aria-selected="true"] { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--btn-shadow); }
.sw-tabs [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sw { position: relative; background: #03061a; isolation: isolate; }
.sw-page { margin-top: var(--s5, 24px); }
.sw-stage { position: relative; overflow: hidden; }
.sw-page .sw-stage { height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 460px; max-height: 900px; }
.sw-home .sw-stage { height: clamp(380px, 62vh, 620px); }
.sw-canvas { display: block; width: 100%; height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; cursor: grab; }

/* homepage: a quiet title over the night sky */
.sw-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px max(16px, env(safe-area-inset-left));
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(3, 6, 26, 0.85), rgba(3, 6, 26, 0));
}
.sw-head > * { pointer-events: auto; }
.sw-home-h { margin: 0; font: 600 clamp(1.15rem, 2.6vw, 1.7rem)/1.2 var(--serif); color: #f4ecd6; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
.sw-home-cta { flex: none; }

.sw-ui {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px max(84px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  pointer-events: none;
  background: linear-gradient(to top, rgba(3, 6, 26, 0.82), rgba(3, 6, 26, 0));
}
.sw-ui > * { pointer-events: auto; }
.sw-hint { margin: 0; max-width: 36ch; flex: 1 1 220px; font: italic 400 1rem/1.4 var(--serif); color: rgba(244, 236, 214, 0.88); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.sw-legend { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.sw-lg { display: inline-flex; align-items: center; gap: 7px; font: 500 0.8rem/1 var(--sans); color: rgba(234, 238, 255, 0.85); }
.sw-dot { width: 14px; height: 9px; border-radius: 2px; background: #4c4a5e; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.sw-lg-1 .sw-dot { background: #e9b46a; box-shadow: 0 0 10px 2px rgba(255, 160, 70, 0.75); }
.sw-lg-2 .sw-dot { background: linear-gradient(135deg, #a8701a, #fff0b0 50%, #d9a536); box-shadow: 0 0 12px 3px rgba(255, 210, 100, 0.85); animation: sw-breathe 4.6s ease-in-out infinite; }
@keyframes sw-breathe { 50% { box-shadow: 0 0 18px 6px rgba(255, 215, 110, 0.55); } }

.sw-ctl { display: flex; gap: 6px; }
.sw-zbtn {
  width: 44px; height: 44px; border-radius: 50%;
  font: 600 1.3rem/1 var(--sans); color: #f5e6c2;
  background: rgba(20, 16, 10, 0.62); border: 1px solid rgba(245, 210, 117, 0.42);
  backdrop-filter: blur(6px); cursor: pointer;
}
.sw-play { font-size: 0.85rem; letter-spacing: -1px; }
.sw-zbtn:hover { background: rgba(60, 42, 14, 0.8); }
.sw-zbtn:focus-visible { outline: 2px solid #F5D275; outline-offset: 2px; }

.sw-status { position: absolute; top: 42%; left: 0; right: 0; margin: 0; text-align: center; font: italic 400 1.15rem/1.4 var(--serif); color: rgba(244, 236, 214, 0.85); }

/* The wall for screen readers and keyboards: unseen until a key reaches it;
   then the focused stone is ringed in gold and its words shown as a caption. */
.sw-sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; list-style: none; overflow: visible; }
.sw-sr li { position: absolute; }
.sw-sr-btn {
  position: absolute; left: 50vw; top: 24px; transform: translateX(-50%);
  width: max-content; max-width: min(92vw, 640px); padding: 10px 14px; border-radius: 10px;
  font: 400 0.95rem/1.4 var(--sans); text-align: start;
  color: #fff6e0; background: rgba(20, 14, 6, 0.92); border: 1px solid rgba(245, 210, 117, 0.6);
  clip-path: inset(50%); opacity: 0; pointer-events: none; white-space: normal;
}
.sw-sr-btn:focus { clip-path: none; opacity: 1; outline: 2px solid #F5D275; outline-offset: 2px; z-index: 5; }

.sw-more-wrap { text-align: center; margin: var(--s5, 24px) 0 0; }

/* The owner's panel inside the prayer view */
.sw-owner { margin: 18px 0 6px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(160deg, rgba(245, 210, 117, 0.16), rgba(217, 163, 46, 0.06)); border: 1px solid var(--accent-edge); }
.sw-owner-h { margin: 0 0 4px; font: 600 1.1rem/1.3 var(--serif); }
.sw-owner-p { margin: 0 0 12px; color: var(--dim); }
.sw-owner-btn, .sw-owner-go { position: relative; overflow: hidden; }
.sw-owner-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 240, 0.55) 50%, transparent 65%); transform: translateX(-120%); animation: sw-sheen 4.6s ease-in-out infinite; }
@keyframes sw-sheen { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.sw-owner-lab { display: grid; gap: 6px; margin-bottom: 10px; }
.sw-owner-lab textarea { width: 100%; }
.sw-owner-msg { margin: 10px 0 0; }
.sw-owner-msg.is-ok { color: var(--accent); font-weight: 600; }
.sw-owner-msg.is-err { color: #ff8b8b; }

@media (max-width: 640px) {
  .sw-legend { gap: 10px; }
  .sw-ui { padding-right: 16px; }
  .sw-ctl { margin-inline-start: auto; margin-inline-end: 64px; }
  .sw-home-cta { padding: 7px 14px; font-size: 0.85rem; min-height: 0; }
  .sw-head { padding-block: 10px; }
  .sw-home .sw-legend { display: none; }
  .sw-hint { font-size: 0.85rem; flex-basis: auto; flex: 1 1 0; }
  .sw-zbtn { width: 38px; height: 38px; font-size: 1.1rem; }
  .sw-play { font-size: 0.75rem; }
  .sw-ui { flex-wrap: nowrap; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-lg-2 .sw-dot, .sw-owner-btn::after { animation: none; }
}

/* "Request prayer" dialog (scripts/requestmodal.js) */
.req-dialog {
  width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; border: 1px solid var(--line); border-radius: 20px;
  background: var(--bg); color: var(--text); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}
.req-dialog[open] { animation: req-in 0.28s ease-out; }
@keyframes req-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.req-dialog::backdrop { background: rgba(3, 6, 26, 0.74); backdrop-filter: blur(4px); }
.req-dialog > .request { margin: 0; border: 0; }
.req-close {
  position: sticky; top: 12px; float: right; z-index: 3; margin: 12px 12px -56px 0;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--text); cursor: pointer;
}
.req-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.req-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html.req-open { overflow: hidden; }
@media (max-width: 640px) {
  .req-dialog { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
}
@media (prefers-reduced-motion: reduce) { .req-dialog[open] { animation: none; } }

/* the globe on the homepage */
.map-home .map-head h2 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.05; font-size: clamp(2rem, 5.4vw, 3.2rem); letter-spacing: -.01em; }
.map-home .map-head h2 em { font-style: italic; font-weight: 400; color: var(--accent); }
:root:not([data-theme-resolved="light"]) .map-home .map-head h2 em { background: linear-gradient(180deg, #FFF1BF, #F5D275 55%, #D9A32E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.map-home-more { text-align: center; margin: 0; padding: 0 16px var(--s6, 32px); background: inherit; }

/* The hero is now the picture alone: the floating button carries the call */
.hero.hero-art-only { padding-bottom: 0; }
.hero-art-only .hero-inner { padding-top: var(--art-h); }

/* Floating "Send a prayer request" — gold, warm, breathing; above everything
   but the dialogs; steps aside while a prayer or the form is open. */
.req-fab {
  position: fixed; z-index: 58;
  right: calc(max(14px, env(safe-area-inset-right)) + 58px); bottom: max(14px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 22px 7px 7px; min-height: 52px; border-radius: 999px;
  font: 700 1rem/1.1 var(--sans); letter-spacing: .005em; text-decoration: none;
  color: #2A1B00; background: linear-gradient(178deg, #FFE7A3 0%, #F5D275 38%, #D9A32E 100%);
  border: 1px solid rgba(255, 244, 205, .9);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 6px rgba(150,95,10,.35) inset,
              0 10px 30px -6px rgba(217, 163, 46, .65), 0 2px 8px rgba(0, 0, 0, .28);
  overflow: hidden; isolation: isolate;
  transform: translateY(0); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, opacity .25s ease, visibility .25s;
  animation: fab-rise .7s cubic-bezier(.2,.8,.2,1) .5s both, fab-breathe 4.6s ease-in-out 1.4s infinite;
}
.req-fab::before {                                   /* a slow sweep of light across the gold */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 240, .75) 50%, transparent 70%);
  transform: translateX(-130%); animation: fab-sheen 6.5s ease-in-out 2s infinite;
}
.req-fab-ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #3a2a10, #1c1204); color: #FFE7A3;
  box-shadow: 0 0 0 2px rgba(255, 240, 200, .5), 0 0 14px rgba(255, 200, 90, .55);
}
.req-fab-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.req-fab:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 6px rgba(150,95,10,.35) inset, 0 16px 40px -6px rgba(217, 163, 46, .8), 0 4px 12px rgba(0, 0, 0, .3); }
.req-fab:active { transform: translateY(0) scale(.98); }
.req-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #0066CC; }
html.req-open .req-fab, html.pv-open .req-fab { opacity: 0; visibility: hidden; transform: translateY(20px); }
@keyframes fab-rise { from { opacity: 0; transform: translateY(28px) scale(.92); } }
@keyframes fab-breathe { 0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 6px rgba(150,95,10,.35) inset, 0 10px 30px -6px rgba(217,163,46,.65), 0 2px 8px rgba(0,0,0,.28); }
                         50% { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 6px rgba(150,95,10,.35) inset, 0 12px 44px 2px rgba(255,200,90,.75), 0 2px 8px rgba(0,0,0,.28); } }
@keyframes fab-sheen { 0%, 70% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } }
/* phones: a wide pill along the bottom, clear of the "Aa" button */
@media (max-width: 640px) {
  .req-fab { left: max(14px, env(safe-area-inset-left)); right: calc(max(14px, env(safe-area-inset-right)) + 56px); justify-content: center; padding-right: 18px; }
  body { padding-bottom: 80px; }
}
/* the analytics notice sits above it while it is showing */
.req-fab { margin-bottom: var(--ga-h, 0px); }
@media (prefers-reduced-motion: reduce) {
  .req-fab, .req-fab::before { animation: none; }
}