: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
     (the site owner, 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 (the site owner'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 the site owner's follow-up screenshot (2026-10-14,
   drawn arrow pointing further right) called that undershot -- back to
   flush-right. */
/* NOT absolutely positioned (that was the bug -- see 2026-10-15 fix note
   below): a fixed-height corner box overlapped the brand title whenever
   its content grew taller than the ~30px of top padding it had to work
   with, which is exactly what happened once the cross-device sign-in
   "waiting for you to click the email link" message (a full sentence,
   several times longer than the old compact email+button form) started
   rendering here and ran straight over the "RequestingPrayer.com" logo.
   Flowing in normal document layout (right-aligned via justify-content)
   means this row always pushes the brand title down by however tall it
   actually is, so it can never overlap again regardless of how long a
   future state's text gets. Matches the same fix already in place below
   920px -- this just makes it true at every width, not only on mobile. */
/* flex-wrap added 2026-10-15 (the sign-in-waiting-panel squeeze bug this
   was fighting). As of the waiting-panel's modal-popup redesign the same
   day, the waiting panel no longer lives in this row at all -- it's a
   centered overlay now (see .auth-waiting-overlay below) -- but flex-wrap
   stays here since the email form + globe/EN pill can still compete for
   room on a narrow window. */
.header-corner-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 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 -- the site owner'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;
}
/* Without this, the form's own `display: flex` above wins over the
   browser's default `[hidden] { display: none }` (same bug pattern
   already fixed once for .lang-flyout below) -- so setting
   `form.hidden = true` in common.js's beginWaiting() silently did
   nothing visually, and the email form kept showing stacked on top of
   the waiting panel instead of being replaced by it. */
.auth-signin-form[hidden] {
  display: none;
}
.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;
}
/* Purple fill matching the "Prayer" highlight in the title (var(--accent))
   instead of plain black -- the site owner's call (2026-10-15). Hover
   flips to the same look the globe/EN pill always shows (white fill,
   purple border + text), so the two pills read as one consistent pair. */
.auth-send-link-btn {
  font-family: inherit;
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.auth-send-link-btn:hover {
  background: var(--card);
  color: var(--accent);
}
/* Redesigned as a centered modal popup (site owner's explicit request,
   2026-10-15) instead of an inline corner box -- the corner-box version
   is what led to the "We / sent / a / link / to" wrapping bug in the
   first place (fighting for room against the globe/EN pill), and a
   modal sidesteps that whole class of problem since it owns the full
   viewport instead of a cramped header row. .auth-waiting-overlay is
   the fixed, full-screen, dimmed backdrop; .auth-waiting-panel is now
   the white popup card centered inside it (not a flex row anymore). */
.auth-waiting-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 36, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2000;
}
.auth-waiting-overlay[hidden] {
  display: none;
}
.auth-waiting-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 340px;
  background: var(--card);
  border: 1px solid var(--accent-soft);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(20, 16, 36, 0.35);
  padding: 32px 28px 26px;
  text-align: center;
}
.auth-waiting-msg {
  font-size: 14px;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}
.auth-waiting-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 4px solid var(--accent-soft);
  border-top-color: var(--accent);
  animation: auth-waiting-spin 0.8s linear infinite;
}
@keyframes auth-waiting-spin {
  to { transform: rotate(360deg); }
}
.auth-waiting-change-btn {
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.auth-waiting-change-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.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-msg-success {
  color: #1e7d34;
  font-weight: 700;
  background: #e6f4ea;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-block;
  animation: profile-name-msg-flash 1.4s ease-out;
}
@keyframes profile-name-msg-flash {
  0% { background: #bfe8cb; }
  100% { background: #e6f4ea; }
}
.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. the site owner'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 (the site owner'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
   the site owner'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;
  /* Was 16px -- noticeably airier than the center feed's own 10px gap
     (.feed-list above) even though these compact cards hold far less
     content each, so the whitespace read as "too much space between
     entries" (the site owner, 2026-10-15). Matched to the center column's gap
     instead of a bigger number of its own. */
  gap: 10px;
  /* 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,
.feed-item.is-archived .share-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, .share-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, .share-btn:hover { border-color: var(--accent); color: var(--accent); }
.pray-btn.prayed { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* Share button, 2026-10-15 -- same pill shape as pray/respond so it reads
   as a third equal action, not an afterthought. Can be pulled off every
   post instantly via the SHARE_BUTTON_ENABLED flag at the top of
   common.js, which is also what controls whether this markup ever renders
   at all (so there's nothing to hide here with CSS). */

.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.
     (the site owner, 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;
}

/* Site footer (added 2026-10-15) -- a quiet, small-text link row to the
   new Privacy Policy / Terms of Service pages, present on every page.
   Deliberately minimal (no logo/columns) since the site doesn't need a
   heavier footer, just a place those two required links can live. */
.site-footer {
  max-width: 1084px;
  margin: 24px auto 0;
  padding: 18px 24px 36px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  color: var(--ink-soft);
  position: relative;
  z-index: 1;
}
.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
  margin: 0 8px;
}
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer .footer-sep { opacity: 0.5; }

/* Privacy Policy / Terms of Service pages (privacy.html, terms.html) --
   plain readable prose in a card, matching .search-card's look so these
   pages don't feel like they belong to a different site. */
.legal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 40px 40px;
  box-shadow: 0 10px 30px -15px rgba(109, 91, 208, 0.25);
}
.legal-card h1 {
  font-size: 26px;
  margin: 0 0 4px;
}
.legal-card .legal-updated {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.legal-card h2 {
  font-size: 18px;
  margin: 28px 0 10px;
}
.legal-card p, .legal-card li {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
}
.legal-card ul { padding-left: 22px; }
.legal-card a { color: var(--accent); }
.legal-back-link {
  display: inline-block;
  margin-bottom: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
}
.legal-back-link:hover { color: var(--accent); }