/* ==========================================================================
   The prayer wall widget.

   Served from the console that owns the requests, exactly as the Prayer
   Engine serves its own - so the widget and the API it talks to can never
   drift apart in a version.

   ⭐ EVERY COLOR IS A CUSTOM PROPERTY WITH A FALLBACK. The host page sets
   --pw-* to its own palette and the wall belongs to that site; set nothing and
   it still renders as something considered rather than as unstyled markup.
   ========================================================================== */

#prayer-wall {
  --_ink:    var(--pw-ink, #14201C);
  --_dim:    var(--pw-dim, #55655F);
  --_faint:  var(--pw-faint, #8A9B95);
  --_accent: var(--pw-accent, #0B7E76);
  --_line:   var(--pw-line, #E2EAE7);
  --_panel:  var(--pw-panel, #F4FAF8);
  --_paper:  var(--pw-paper, #FFFFFF);
  --_warm:   var(--pw-warm, #A9741B);
  --_radius: var(--pw-radius, 14px);

  color: var(--_ink);
  font-family: var(--pw-font, inherit);
  line-height: 1.6;
}

#prayer-wall * { box-sizing: border-box; }

/* ------------------------------------------------------------- the form */
.pw-ask {
  background: var(--_panel);
  border: 1px solid var(--_line);
  border-radius: var(--_radius);
  padding: 22px;
  margin-bottom: 28px;
}
.pw-ask h3 { margin: 0 0 6px; font-size: 1.15rem; }
.pw-ask .pw-intro { margin: 0 0 16px; color: var(--_dim); font-size: .95rem; }

.pw-field { margin-bottom: 14px; }
.pw-field label {
  display: block; font-size: .8rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--_faint); margin-bottom: 5px;
}
.pw-ask textarea, .pw-ask input[type=text], .pw-ask select {
  width: 100%; font: inherit; font-size: 1rem; padding: 11px 13px;
  border: 1px solid var(--_line); border-radius: 10px;
  background: var(--_paper); color: var(--_ink);
  /* 16px minimum: anything smaller makes iOS zoom the page on focus, and the
     visitor is then looking at a form they have to pinch back out of. */
  min-height: 46px;
}
.pw-ask textarea { min-height: 110px; resize: vertical; }
.pw-ask textarea:focus, .pw-ask input:focus, .pw-ask select:focus {
  outline: 2px solid var(--_accent); outline-offset: 1px; border-color: var(--_accent);
}
.pw-row { display: flex; gap: 14px; flex-wrap: wrap; }
.pw-row .pw-field { flex: 1 1 220px; }

/* The honeypot. Off-screen rather than display:none - some bots skip hidden
   fields, and none of them skip a field that is merely somewhere else. */
.pw-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.pw-btn {
  font: inherit; font-size: 1rem; font-weight: 600;
  background: var(--_accent); color: #fff; border: 0;
  border-radius: 999px; padding: 13px 26px; cursor: pointer; min-height: 48px;
}
.pw-btn:hover { filter: brightness(1.08); }
.pw-btn[disabled] { opacity: .55; cursor: progress; }

.pw-said { margin-top: 12px; font-size: .95rem; min-height: 1.4em; }
.pw-said.ok  { color: var(--_accent); font-weight: 600; }
.pw-said.bad { color: #A4243B; font-weight: 600; }

.pw-closed {
  background: var(--_panel); border: 1px dashed var(--_line);
  border-radius: var(--_radius); padding: 18px 22px; color: var(--_dim);
  margin-bottom: 28px;
}

/* -------------------------------------------------------- the requests */
.pw-list { display: grid; gap: 16px; }

.pw-card {
  background: var(--_paper);
  border: 1px solid var(--_line);
  border-radius: var(--_radius);
  padding: 20px 22px;
}
.pw-card.answered { border-color: color-mix(in srgb, var(--_accent) 40%, var(--_line)); }

.pw-card__top {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.pw-who { font-weight: 700; }
.pw-when { color: var(--_faint); font-size: .82rem; }
.pw-tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--_accent); color: #fff;
}
.pw-text { margin: 0; white-space: pre-wrap; }

.pw-answer {
  margin-top: 12px; padding: 11px 14px;
  background: var(--_panel); border-left: 3px solid var(--_accent);
  border-radius: 0 8px 8px 0; font-size: .95rem; color: var(--_dim);
}
.pw-answer b { color: var(--_ink); }

.pw-card__foot { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.pw-pray {
  font: inherit; font-size: .9rem; font-weight: 600;
  background: transparent; color: var(--_accent);
  border: 1.5px solid var(--_line); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; min-height: 42px;
}
.pw-pray:hover { border-color: var(--_accent); }
.pw-pray[disabled] { opacity: .7; cursor: default; }
.pw-count { color: var(--_faint); font-size: .85rem; }

/* ------------------------------------------------------------- paging
   ⭐ The wall PAGES rather than loading lazily, and the controls to jump a
   page, five pages, or straight to either end are here because a lazy wall
   cannot be navigated: somebody looking for the request they left last month
   has to scroll past everything newer, on a phone, with no idea how far
   there is to go. */
.pw-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-top: 28px;
}
.pw-pager button {
  font: inherit; font-size: .9rem; font-weight: 600;
  background: var(--_paper); color: var(--_ink);
  border: 1px solid var(--_line); border-radius: 10px;
  min-width: 48px; min-height: 44px; padding: 0 12px; cursor: pointer;
}
.pw-pager button:hover:not([disabled]) { border-color: var(--_accent); color: var(--_accent); }
.pw-pager button[disabled] { opacity: .4; cursor: default; }
.pw-pager .pw-where { color: var(--_dim); font-size: .9rem; padding: 0 10px; }

.pw-empty, .pw-loading {
  text-align: center; color: var(--_dim); padding: 34px 20px;
  background: var(--_panel); border-radius: var(--_radius);
}

@media (max-width: 560px) {
  .pw-ask { padding: 18px; }
  .pw-card { padding: 16px 17px; }
  .pw-pager button { min-width: 44px; }
}

/* Somebody may have asked their browser not to animate things. */
@media (prefers-reduced-motion: reduce) {
  #prayer-wall * { transition: none !important; animation: none !important; }
}