:root {
  --ink: #241f2e;
  --ink-soft: #6b6476;
  --paper: #fbf9f6;
  --card: #ffffff;
  --accent: #6d5bd0;
  --accent-soft: #ece8fb;
  --border: #e7e2ef;
  --radius: 20px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f1eef7;
    --ink-soft: #b7b0c7;
    --paper: #16131d;
    --card: #1f1b29;
    --accent: #9686f0;
    --accent-soft: #2a2440;
    --border: #322c43;
  }

  /* iPhone/Android dark mode specifically read as too dark/overpowering
     (Geoffrey, 2026-10-14) -- lighten just the page-chrome purple
     (--paper, the body background, and --accent-soft, the glow behind
     it) at phone widths. This doesn't touch --card or the card-scope
     override below, so the prayer cards/text boxes stay exactly as
     readable as they already are. */
  @media (max-width: 480px) {
    :root:not([data-theme="light"]) {
      --paper: #241f33;
      --accent-soft: #3a3257;
    }
  }

  /* The page chrome (background glow, header) stays this dark purple,
     but the actual content surfaces -- the prayer textarea, each prayer
     card, the donate/sign-in panel -- need to read as light paper with
     dark ink, same as the light theme, or the text inside them is
     nearly unreadable against the dark page (Geoffrey's iPhone
     screenshot, 2026-10-14: text boxes and prayer cards were far too
     dark to read). Re-declaring the custom properties on each surface
     container (rather than editing --card/--ink above, which would also
     darken the page chrome) means every descendant that reads
     var(--card)/var(--ink)/etc. inside one of these boxes inherits the
     light-card values automatically, with no per-element overrides
     needed. */
  :root:not([data-theme="light"]) .search-card,
  :root:not([data-theme="light"]) .feed-item,
  :root:not([data-theme="light"]) .donate-card,
  :root:not([data-theme="light"]) .archive-link,
  :root:not([data-theme="light"]) .profile-panel {
    --card: #fffdfa;
    --paper: #f3f0fa;
    --ink: #241f2e;
    --ink-soft: #6b6476;
    --border: #e7e2ef;
    --accent: #6d5bd0;
    --accent-soft: #ece8fb;
    /* "color" is normally set once on <body> and just inherited verbatim
       by anything that doesn't redeclare it -- .feed-text, .response-text
       and a few others never did, so they were silently keeping body's
       original dark-mode (light-colored) text instead of picking up the
       --ink redeclared above. Setting color explicitly here, using this
       same scope's --ink, is what makes every plain-text descendant that
       has no color rule of its own actually render dark-on-light instead
       of the old light-on-dark. (--paper is included above for the same
       structural reason: .search-row, .voice-record-panel, the respond
       box, and the profile/donate panel's own inputs all read var(--paper)
       directly rather than var(--card), and were staying dark the same
       way.) */
    color: var(--ink);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.bg-glow {
  position: fixed;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 65%);
  z-index: 0;
  pointer-events: none;
}

.wrap {
  position: relative;
  z-index: 1;
  /* Matches .page-grid's actual content width exactly (620 + 18 + 190 + 18
     + 190 = 1036px) plus this box's own 24px+24px side padding = 1084px.
     Was 1120px, which left ~36px of unused slack on the right because the
     grid's fixed-width tracks don't stretch to fill extra space -- that
     slack was why the top-right corner widgets used to visually "float"
     past the actual right edge of the visible card grid below them --
     see .header-corner-controls further down for how that corner row is
     now positioned. */
  max-width: 1084px;
  margin: 0 auto;
  padding: 36px 24px 48px;
}

/* Keeps the header, search box, and donate section at a comfortable
   reading width even though .wrap itself is wide enough for the
   3-column feed below. */
.narrow {
  max-width: 680px;
  margin: 0 auto;
}

.brand { position: relative; text-align: center; margin-bottom: 16px; }

/* Groups the sign-in widget and the language icon into ONE unit, flush
   with the far right edge of .wrap (right: 24px matches .wrap's own side
   padding), directly above the 3rd (far-right) column. An earlier pass
   pulled this in to right:232px to cap it above the 2nd/3rd column
   boundary instead, but Geoffrey's follow-up screenshot (2026-10-14,
   drawn arrow pointing further right) called that undershot -- back to
   flush-right. */
.header-corner-controls {
  position: absolute;
  top: 10px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sign-in widget. Plain/minimal to match the current site look; this
   gets a visual pass later alongside the rest of the header. */
.auth-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
}

/* Site-language picker -- a small purple globe-icon button (matches the
   site's accent color) instead of the old "Site language: [dropdown]"
   text row, which took up header space and read as more prominent than
   it needed to be. Clicking it opens a small flyout of language links
   (reusing the same ?lang=xx mechanism as before); the current language
   shows as a 2-letter code badge next to the icon so it's still visible
   at a glance without it being a wall of text. */
/* One merged pill (globe icon + "EN" together), not a bold filled purple
   circle next to a separate badge -- Geoffrey's call (2026-10-14): the
   globe was reading stronger than the dove logo, and he sketched this as
   a single outlined pill. The border/background now live on the wrap
   itself; the globe button and the code badge are both borderless/
   transparent and just sit inside it. */
.lang-picker-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.lang-picker-wrap:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.lang-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  padding: 0;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
}
.lang-picker-wrap:hover .lang-icon-btn { color: var(--accent); }
.lang-globe-icon {
  width: 16px;
  height: 16px;
}
.lang-code-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.lang-flyout {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
}
.lang-flyout[hidden] {
  display: none;
}
.lang-flyout-item {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  text-align: left;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.lang-flyout-item:hover {
  background: var(--accent-soft);
}
.lang-flyout-item.lang-flyout-item-active {
  color: var(--accent);
  font-weight: 600;
}
.auth-signin-btn,
.auth-signout-btn {
  font-family: inherit;
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.auth-signin-btn:hover,
.auth-signout-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.auth-signin-form {
  display: flex;
  align-items: center;
  gap: 6px;
}
.auth-email-input {
  font-family: inherit;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  width: 170px;
}
.auth-send-link-btn {
  font-family: inherit;
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--ink);
  color: var(--card);
  cursor: pointer;
  white-space: nowrap;
}
.auth-signed-in {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-name {
  color: var(--ink-soft);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Signed-in "name ▾" trigger + its dropdown menu (Profile / Sign out).
   Replaces the old flat name + sign-out-button pair so there's room to
   add more menu items later without crowding the header. */
.auth-name-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  max-width: 180px;
}
.auth-name-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.auth-name-btn .auth-name {
  max-width: 120px;
}
.auth-caret {
  font-size: 10px;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.auth-menu-wrap {
  position: relative;
}
.auth-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
}
.auth-menu-item {
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.auth-menu-item:hover {
  background: var(--accent-soft);
}
.auth-menu-item.auth-menu-signout {
  color: var(--ink-soft);
}
/* Without this, the plain `.auth-menu { display: flex }` rule above wins
   the cascade over the browser's own `[hidden] { display: none }` rule
   (same specificity, but an author stylesheet always beats the UA
   stylesheet) -- so menu.hidden = true in common.js would silently do
   nothing and the dropdown would show open on every page load. This
   selector's higher specificity (two class-level selectors) is what
   actually makes the `hidden` attribute work here. */
.auth-menu[hidden] {
  display: none;
}

/* The "Your Profile" modal opened from the dropdown -- deliberately tiny
   (email + member-since) since RequestingPrayer.com stays a small site;
   a fuller account page belongs on GodTracer.com instead. */
.profile-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 28, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.profile-panel {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 22px 24px;
  width: 100%;
  max-width: 320px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  position: relative;
}
.profile-panel h3 {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink);
}
.profile-row {
  margin-bottom: 10px;
}
.profile-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.profile-name-edit {
  display: flex;
  gap: 6px;
}
.profile-name-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
}
.profile-name-save {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.profile-name-save:hover { background: var(--ink); }
.profile-name-save:disabled { opacity: 0.6; cursor: default; }
.profile-name-hint {
  font-size: 11px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.profile-name-msg {
  font-size: 12px;
  color: var(--accent);
  margin: 6px 0 0;
}
.profile-name-msg-error { color: #c0392b; }
.profile-name-suggestion-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.profile-close-btn {
  margin-top: 10px;
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.profile-close-btn:hover {
  background: var(--border);
}

/* Donate modal -- opened from the "Donate" button, reuses .profile-panel's
   box/overlay styling above. Once a valid amount is entered, Stripe's
   embedded Checkout form mounts right inside this same panel (see
   openDonatePanel in common.js) -- .donate-panel--embedded widens the
   panel from the base .profile-panel's 320px cap to fit the card form
   and Apple Pay/Link buttons comfortably. */
.donate-panel--embedded {
  max-width: 640px;
}
.donate-checkout-mount {
  margin-top: 4px;
  /* Reserves space before Stripe's iframe finishes loading so the panel
     doesn't visibly jump/collapse for a moment first. */
  min-height: 280px;
}
.donate-amount-row {
  display: block;
  margin-bottom: 4px;
}
.donate-amount-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--paper);
}
.donate-dollar-sign {
  color: var(--ink-soft);
  font-size: 14px;
}
.donate-amount-input {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  width: 100%;
  outline: none;
}
/* Hides the number input's native up/down spinner arrows (Chrome/Safari/
   Firefox each need their own selector) -- they added visual clutter next
   to the dollar sign for no real benefit here. */
.donate-amount-input::-webkit-outer-spin-button,
.donate-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.donate-amount-input[type="number"] {
  -moz-appearance: textfield;
}
.donate-frequency-row {
  margin-top: 14px;
}
.donate-frequency-options {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}
.donate-frequency-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.donate-frequency-option input {
  accent-color: var(--accent);
  margin: 0;
}
.donate-error {
  color: #b3261e;
  font-size: 12px;
  margin: 8px 0 0;
}
.donate-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.donate-submit-btn {
  margin-top: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.donate-submit-btn:hover { background: var(--ink); }
.donate-submit-btn:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 920px) {
  /* Below the point where the archive columns collapse out of the
     page-grid (see .page-grid's own breakpoint), there's no "2nd column"
     left to line up above. Geoffrey's call (2026-10-14, re-confirmed with
     a drawn arrow after an earlier attempt still read as centered): keep
     this row pinned to the right edge of .wrap on narrow screens too,
     not centered under the title. */
  .header-corner-controls {
    position: static;
    margin: 0 0 10px;
    display: flex;
    justify-content: flex-end;
  }
}
@media (max-width: 560px) {
  .header-corner-controls { flex-wrap: wrap; justify-content: flex-end; }
  .auth-widget { justify-content: flex-end; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  /* iPhone-width screens specifically -- the language picker's text reads
     small at the desktop sizes above, so bump it up a notch here rather
     than site-wide. */
  .lang-picker-wrap { height: 32px; padding: 0 12px 0 10px; }
  .lang-code-badge {
    height: 32px;
    font-size: 15px;
  }
  .lang-icon-btn { width: 18px; height: 18px; }
  .lang-globe-icon { width: 18px; height: 18px; }
  .lang-flyout-item { font-size: 15px; padding: 9px 10px; }
  .lang-flyout { min-width: 190px; }
}

.brand h1 {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.brand h1 span { color: var(--accent); }
.brand h1 .dot { color: var(--ink-soft); font-size: 20px; font-weight: 400; }

/* The dove, moved from its own line above the title (old brand-mark) to
   sit inline right after ".com" instead (Geoffrey's request, 2026-10-14).
   Sized in em off the h1's own font-size (not .dot's smaller one, since
   this sits as a direct sibling of .dot rather than inside it) so it
   scales down automatically at the 920px/680px breakpoints where h1
   itself shrinks. Was 0.7em (matched the "P" cap-height exactly); per
   Geoffrey's 2026-10-14 follow-up ("it needs to be taller... make it
   35% larger") this is now 0.7 * 1.35 = 0.945em, rounded to 0.95em. */
.brand-dove-inline {
  height: 0.95em;
  width: auto;
  vertical-align: baseline;
  margin-left: 0.2em;
  position: relative;
  top: 0.08em;
}

.tagline {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink-soft);
  font-size: 15px;
  margin-top: 10px;
}

.search-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 16px;
  box-shadow: 0 10px 30px -15px rgba(109, 91, 208, 0.25);
}

.search-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 10px 12px 18px;
}

textarea#prayerInput {
  flex: 1;
  border: none;
  background: transparent;
  resize: vertical;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  min-height: 192px;
  max-height: 640px;
  padding: 4px 0;
}

/* Honeypot: visually hidden but present in the DOM/tab order trap for bots.
   display:none is deliberately avoided -- some bots skip fields hidden that way,
   so this is pulled off-screen instead. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}
textarea#prayerInput:focus { outline: none; }
textarea#prayerInput::placeholder { color: var(--ink-soft); }

#submitBtn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
#submitBtn:hover { transform: scale(1.05); }
#submitBtn:disabled { opacity: 0.35; cursor: default; transform: none; }

.dictate-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  align-self: flex-end;
  margin-bottom: 2px;
}
.dictate-btn:hover { color: var(--accent); border-color: var(--accent); }
.dictate-btn.listening {
  color: white;
  background: #e0435c;
  border-color: #e0435c;
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 67, 92, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(224, 67, 92, 0); }
}

.voice-section { margin-top: 10px; }
.voice-toggle-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.voice-toggle-btn:hover { color: var(--accent); border-color: var(--accent); }

.voice-record-panel {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--paper);
}
.voice-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.voice-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: white;
  cursor: pointer;
  min-height: 40px;
}
.voice-btn.recording { background: #e0435c; border-color: #e0435c; }
.voice-btn.voice-remove { background: transparent; color: var(--ink-soft); border-color: var(--border); }
.voice-timer {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.voice-preview { width: 100%; margin-top: 12px; }
.voice-error {
  margin: 10px 0 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  color: #c0304a;
}

.search-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 10px 6px 2px;
}

.anon-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.anon-toggle input { accent-color: var(--accent); }

.hint {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  margin: 18px 4px 0;
}

.feed { margin-top: 14px; }

.feed-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.feed-header h2 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }

/* The archive columns span the FULL page -- header, search box, feed, and
   donate box -- not just the feed section, so they flank everything top to
   bottom. align-items: stretch (the grid default) makes both side columns
   exactly as tall as the center content; a fixed conveyor keeps the
   content bounded (never taller than center), and justify-content:
   space-between on .archive-col spreads its few cards across that full
   height (with the Prayer Archive box anchored at the very bottom-right)
   instead of leaving empty space below a cluster at the top. */
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 620px) 190px 190px;
  gap: 18px;
}
/* Visual order: big center box, then the "left" column, then the "right"
   column -- both narrow columns now sit to the right of center instead of
   flanking it. The underlying HTML/IDs (archiveLeft/archiveRight) and the
   post numbers they hold are unchanged, only where they're drawn. */
.page-main { order: 1; }
#archiveLeft { order: 2; }
#archiveRight { order: 3; }

.feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.archive-col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Top-aligned with a fixed gap, not spread across the full column height --
     space-between stretched 2-3 short cards across three tall center cards'
     worth of height, leaving large empty gaps between them. */
  justify-content: flex-start;
}
.archive-col:empty { display: none; }

@media (max-width: 920px) {
  .wrap { max-width: 680px; }
  .page-grid { grid-template-columns: 1fr; }
  .page-main { order: 1; }
  .archive-col { order: 2; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .archive-col .feed-item { flex: 1 1 260px; }
}
@media (max-width: 480px) {
  .archive-col { flex-direction: column; }
  .archive-col .feed-item { flex: 1 1 auto; }
}

.feed-item {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  animation: fadeIn 0.3s ease;
}

.feed-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.feed-who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.avatar-anon {
  background: var(--accent-soft);
  color: var(--accent);
}
.avatar-anon svg { width: 18px; height: 18px; }

.avatar-named {
  background: var(--accent);
  color: white;
}

.feed-who .feed-author {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-where {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.feed-where-main {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.feed-number-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}

.feed-number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.feed-country {
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.feed-exact-time {
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.75;
  white-space: nowrap;
}

.request-audio { width: 100%; margin: 4px 0 2px; }

/* Archived items: the li keeps everything it had in the main feed (the
   .feed-full wrapper), it's just hidden by default and a compact
   .archive-summary button takes its place -- clicking it expands the
   original content right there in the column, translate/respond intact. */
.feed-item.is-archived { padding: 12px 14px; }
.feed-item.is-archived .feed-full { display: none; }
.feed-item.is-archived.is-expanded .feed-full { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

.archive-summary {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 3px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.feed-item.is-archived .archive-summary { display: flex; }

/* Expanded archived items are narrower (side column) than the main feed,
   so the I prayed / Respond pills are scaled down to match instead of
   crowding the smaller card. */
.feed-item.is-archived .pray-btn,
.feed-item.is-archived .respond-toggle-btn {
  font-size: 11px;
  padding: 5px 10px;
  min-height: 28px;
}

/* The respond composer (text box + voice recorder) also needs to shrink
   to fit the narrow side-column width -- otherwise the "Start recording"
   pill (sized for the full-width main form) dwarfs everything else. */
.feed-item.is-archived .respond-composer { padding: 8px; }
.feed-item.is-archived .respond-text { font-size: 12px; padding: 6px 8px; }
.feed-item.is-archived .respond-voice .voice-controls { gap: 6px; }
.feed-item.is-archived .respond-voice .voice-btn {
  font-size: 10.5px;
  font-weight: 600;
  padding: 5px 9px;
  min-height: 26px;
}
.feed-item.is-archived .respond-voice .voice-timer { font-size: 9.5px; }
.feed-item.is-archived .respond-submit-btn {
  font-size: 11px;
  padding: 6px 12px;
  min-height: 28px;
}

/* Mirrors the big cards' country/time | number pattern: identity on the
   left, a thin vertical separator, then the number on the right. */
.archive-summary-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.archive-identity {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.archive-number-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  flex-shrink: 0;
}
.archive-number {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Country abbreviation sits just left of the "| 0009" number -- compact,
   uppercase, same muted weight as the number beside it. */
.archive-country-abbr {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  opacity: 0.8;
  white-space: nowrap;
}
/* Date/time sits on its own line under the name, above the blurb. */
.archive-summary-time {
  font-size: 10.5px;
  color: var(--ink-soft);
  opacity: 0.75;
  white-space: nowrap;
}
.archive-blurb {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Once expanded, the full card below (feed-full) already shows the complete
   text and its own avatar/name -- so the compact blurb and the duplicate
   country/time/number row in feed-top are hidden to avoid showing the same
   info twice (name + number stay visible via archive-summary-top above). */
.feed-item.is-archived.is-expanded .archive-blurb { display: none; }
.feed-item.is-archived .feed-where { display: none; }

/* The permanent "Prayer Archive" box -- always the last slot in the right
   column, never pushed down by new prayers. */
.archive-link-box { padding: 0; overflow: hidden; }
.archive-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 10px;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  /* Flipped from the normal card look so it stands out among the prayer
     cards at rest, and settles back to the plain card background on hover. */
  background: var(--accent-soft);
}
.archive-link:hover { background: var(--card); }
.archive-link-icon { font-size: 20px; }
.archive-link-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.archive-link-sub {
  font-size: 10.5px;
  color: var(--ink-soft);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  max-width: calc(100vw - 32px);
  background: var(--ink);
  color: var(--paper);
  padding: 11px 20px;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13.5px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.translate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 10px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.translate-btn:hover { opacity: 0.85; }
.translate-btn[data-state="loading"] { opacity: 0.6; cursor: wait; }
.translate-btn[data-state="done"] { background: transparent; color: var(--ink-soft); border-color: transparent; padding-left: 0; }

.feed-text.translated-original {
  color: var(--ink-soft);
  font-size: 14px;
  margin-top: -4px;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.feed-text {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.5;
}

.feed-footer {
  display: flex;
  gap: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
}
.feed-responses { color: var(--accent); font-weight: 600; }

.responses-section { margin-top: 12px; }

.responses-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.pray-btn, .respond-toggle-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
}
.pray-btn:hover, .respond-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.pray-btn.prayed { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.respond-composer {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
}
.respond-text {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  padding: 8px 10px;
  resize: vertical;
}
.respond-voice { margin-top: 10px; }
/* Small line above the voice recorder in the full-size composer, offering
   the voice option as an alternative to typing. */
.voice-hint {
  margin: 10px 0 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
}
/* Right-aligns "Post response" under the textarea/voice recorder. */
.respond-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.respond-submit-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  min-height: 38px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: white;
  cursor: pointer;
}
/* Full-size composer: match the "Start recording" button's font size to
   the "Post response" button beside it, instead of the larger default. */
.respond-composer .respond-voice .voice-btn.voice-start {
  font-size: 13px;
}

/* Narrow archived composer: label + a very small voice button share one
   row, label on the left, button on the right. */
.respond-voice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.voice-hint-compact {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10.5px;
  color: var(--ink-soft);
}
.respond-voice-row .voice-controls { flex: 0 0 auto; }
.respond-voice-row .voice-timer { display: none; }
.voice-btn-compact {
  font-size: 10px !important;
  padding: 3px 9px !important;
  min-height: 22px !important;
}

.response-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.response-list:empty { display: none; }
.response-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.response-item .avatar { width: 26px; height: 26px; font-size: 11px; }
.response-body { flex: 1; min-width: 0; }
.response-author {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.response-text { margin: 0; font-size: 14.5px; line-height: 1.5; }
.response-body audio { width: 100%; margin-top: 4px; }

.donate-card {
  margin-top: 56px;
  padding: 32px 28px;
  text-align: center;
  background: linear-gradient(180deg, var(--accent-soft), var(--card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.donate-mark { font-size: 28px; margin-bottom: 8px; }

.donate-card h2 {
  font-size: 21px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--ink);
}

.donate-card p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 440px;
  margin: 0 auto 20px;
}

.donate-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 36px;
  min-height: 46px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: white;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(109, 91, 208, 0.55);
}
.donate-btn:hover { opacity: 0.92; }

@media (max-width: 480px) {
  .wrap { padding: 20px 16px 32px; }
  .brand h1 { font-size: 28px; }
  /* General iPhone legibility bump for the actual prayer/response copy --
     the language-picker bump above only covered that one control.
     (Geoffrey, 2026-10-14.) */
  .tagline { font-size: 16px; }
  .feed-text, .response-text { font-size: 15.5px; }
  .hint { font-size: 14px; }
  .donate-card p { font-size: 15.5px; }
  .feed-author { font-size: 14.5px; }
  /* Holds the submit button once index.js moves it here on narrow screens
     -- left-aligned, below the voice-recorder offer line. */
  .submit-btn-mobile-slot { display: flex; justify-content: flex-start; margin-top: 10px; }
}

/* Prayer Archive page (archive.html) */
.archive-brand { margin-bottom: 32px; }
.archive-back {
  display: inline-block;
  margin-bottom: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.archive-back:hover { text-decoration: underline; }
.archive-title { font-size: 28px; font-weight: 500; margin: 0; }

.archive-full-list { gap: 16px; }
.archive-empty {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink-soft);
  text-align: center;
  padding: 40px 0;
}

/* Pagination strip (number ranges like "1-50", "51-100") above and below
   the full archive list. */
.archive-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}
.archive-page-link {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink-soft);
  text-decoration: none;
}
.archive-page-link:hover { border-color: var(--accent); color: var(--accent); }
.archive-page-link.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}