/* ── PRAYER NEEDS (2026-08-10) ──────────────────────────────────────────────
   Loaded ONLY by /prayer/, after styles.css, and it adds
   nothing to any other page. It lives in its own file rather than at the foot
   of styles.css because that stylesheet was being reworked by another crew the
   day this shipped, and a page's own component does not need to be inside the
   site-wide bundle to inherit its tokens: every value below is a token from
   :root in styles.css, and no colour, radius, easing or duration is invented
   here.

   DIRECTION (one sentence, committed before the markup): a page that says the
   safe thing before it asks for the risky one, so the boldness is spent in
   exactly ONE place — the two big choice cards, the only spot in the form where
   the brass gradient appears — and everything else is the paper card, hairline
   and mono voice the rest of the site already speaks.

   Two-viewport contract: SAME at 390px and desktop apart from the choice pair,
   which is one column on a phone and two side by side from 560px. The wall is a
   single column at every width on purpose; a prayer need is read, not scanned.
   Nothing here is hover-only — every action is a real control with a tap path.
   ────────────────────────────────────────────────────────────────────────── */

/* ── the private-or-shared choice ──────────────────────────────────────────
   Exposed cards, never a dropdown: this is the one decision on the page that
   somebody must not make by accident, so both answers are on screen with what
   each one actually means written inside them.
   PRIVATE IS PRE-SELECTED, and it is the tinted one. That is the reverse of the
   usual "pre-select the option we want": a prayer need is sensitive, so the
   default has to be the one that costs the person nothing if they never read
   the labels. */
.share-pick {
  display: grid;
  gap: 12px;
  /* the card adapts to ITS OWN width, so long labels restack here and do not
     force a smaller type size on the whole page */
  container-type: inline-size;
}
@media (min-width: 560px) {
  .share-pick { grid-template-columns: 1fr 1fr; }
}
.share-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.share-pick label {
  display: block;
  /* comfortably past the 44px floor; these are the two biggest taps on the page */
  min-block-size: 44px;
  padding-block: 16px;
  padding-inline: 18px;
  border-radius: var(--radius-card);
  border: 1px solid var(--control-line);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease), transform var(--press-up) var(--ease-press);
}
.share-pick label:active { transition-duration: var(--press-down); transform: scale(0.98); }
@media (hover: hover) {
  .share-pick label:hover {
    border-color: var(--control-line-strong);
    background: #fff;
    box-shadow: var(--shadow-control-lift);
  }
}
.share-pick .pick-name {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}
.share-pick .pick-why {
  display: block;
  margin-block-start: 6px;
  color: var(--steel);
  font-size: 13.5px;
  line-height: 1.55;
}
/* the chosen one: a brass hairline and a wash, not a filled block — the text
   inside it has to stay as readable as it was a moment ago */
.share-pick input:checked + label {
  border-color: var(--accent);
  background:
    linear-gradient(135deg, rgba(236, 195, 92, 0.16), rgba(201, 154, 46, 0.09));
  box-shadow: var(--shadow-accent-soft);
}
.share-pick input:checked + label .pick-name { color: var(--gold-text); }
.share-pick input:focus-visible + label {
  outline: 2px solid var(--gold-ring);
  outline-offset: 3px;
}

/* ── a label that is a SENTENCE (audit 2026-08-12, wave C) ─────────────────
   `.field label` (styles.css:1964) is 12px tracked uppercase mono. That is the
   house voice for a field CAPTION — "PHONE", "YOUR NAME" — and the wrong voice
   for a whole sentence: "FIRST NAME, OPTIONAL. LEAVE IT BLANK AND IT STAYS
   ANONYMOUS." shipped as two shouting lines at 390px, right where somebody is
   deciding whether to put their name on a prayer need. Sentences belong in the
   body face; mono uppercase stays the label voice.
   Reset on the one element rather than by narrowing the element rule: fourteen
   pages set every field caption they have with it. The same class carries the
   same fix on /qa/, in that page's own <style> block — it has no stylesheet of
   its own and styles.css is shared. */
.field label.field-note {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  line-height: 1.45;
  color: var(--ink);
}

/* the line under the form that answers "who sees this" one more time, in the
   place somebody who hesitated will look */
.pray-note {
  max-inline-size: 720px;
  margin: 18px auto 0;
  color: var(--steel);
  /* body copy floor, 16px (was 14px) */
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

/* ── the wall ─────────────────────────────────────────────────────────────── */
.pray-wall {
  display: grid;
  gap: 14px;
  max-inline-size: 720px;
  margin-inline: auto;
  margin-block-start: 26px;
}
.pray-card {
  container-type: inline-size;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  padding-block: 22px;
  padding-inline: 22px;
}
@media (min-width: 640px) {
  .pray-card { padding-block: 26px; padding-inline: 28px; }
}
/* not a clickable card, so it never lifts on hover — the button inside it is
   the only interactive thing here */
.pray-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pray-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 18px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--line);
}
.pray-who {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-quiet);
}
/* the two halves of the meta line stack under each other on a narrow card
   rather than squeezing the button */
@container (max-width: 20rem) {
  .pray-foot { flex-direction: column; align-items: flex-start; }
  .pray-do { inline-size: 100%; justify-content: center; }
}

/* "I prayed". A real count or no count at all — never a zero dressed up as
   activity, and never a number this page did not actually receive. The button
   works perfectly well from nothing. */
.pray-do {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-block-size: 44px;
  padding-inline: 20px;
  border-radius: 9999px;
  border: 1px solid var(--control-line);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease), transform var(--press-up) var(--ease-press);
}
.pray-do:active { transition-duration: var(--press-down); transform: scale(0.96); }
@media (hover: hover) {
  .pray-do:hover:not([disabled]) {
    border-color: var(--control-line-strong);
    background: #fff;
    box-shadow: var(--shadow-control-lift);
  }
}
.pray-do:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: 3px; }
.pray-do .pray-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-text);
}
/* already prayed on this device: the state change is TWO things at once, a
   brass edge and a wash, so it reads without relying on colour alone */
.pray-do[disabled] {
  cursor: default;
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(236, 195, 92, 0.18), rgba(201, 154, 46, 0.1));
  box-shadow: none;
  opacity: 1;
}

/* Designed, not defaulted. This is what the page says on the day it opens, and
   it has to read as a deliberate sentence rather than a missing list. */
.pray-empty {
  max-inline-size: 46ch;
  margin-inline: auto;
  margin-block-start: 26px;
  text-align: center;
  color: var(--steel);
  font-size: 16px;
  line-height: 1.65;
}

/* the wall's own heading block, centred over a centred column */
.pray-wall-head { text-align: center; }
.pray-wall-head .eyebrow { justify-content: center; }
.pray-wall-head .lede { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .share-pick label,
  .pray-do { transition-duration: 0.001ms; }
  .share-pick label:active,
  .pray-do:active { transform: none; }
}