/* grow.css — lifted out of grow.html verbatim when each feature on that page got its
   own page. Shared by grow.html and its feature pages; nothing was restyled.
   ========================================================================== */

/* ============ Reminder ============ */

.reminder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}

@media (max-width: 860px) { .reminder-layout { grid-template-columns: 1fr; } }

.since-card {
  border-radius: var(--r-lg);
  padding: clamp(2rem, 4.5vw, 3rem);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  color: var(--ink);
}

.since-card .lbl {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--purple) 80%, var(--ink));
}

.since-card .big {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 8vw, 5.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 0.9rem;
}

.since-card .big .unit {
  font-size: 0.32em;
  font-style: italic;
  font-weight: 400;
  color: color-mix(in oklab, var(--purple) 70%, var(--ink));
  margin-left: 0.3rem;
}

/* "AT LEAST" — the qualifier an approximate answer carries (ADR-042). It sits
   ABOVE the number rather than beside it, because a numeral this size read alone
   is a claim of precision the reader never made.

   Authored in caps in the corpus rather than uppercased here: it is an eyebrow,
   and ADR-105 rule 3 keeps an eyebrow's caps in the string so every client's
   reads the same. */
.since-card .big .qual {
  display: block;
  font-family: var(--sans);
  font-size: 0.17em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 0.2rem;
}

.since-card .sub { font-size: 0.9rem; color: var(--ink-2); margin-top: 0.7rem; max-width: 24rem; line-height: 1.6; }

.since-meter { position: relative; }

.since-meter .bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in oklab, white 55%, transparent);
  overflow: hidden;
}

.since-meter .bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), color-mix(in oklab, var(--purple) 55%, var(--orange)));
  transition: width 800ms var(--ease-out);
}

.since-meter.is-over .bar > i { background: linear-gradient(90deg, var(--orange), #E8890B); }

.since-meter .ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-top: 0.55rem;
}

.reminder-settings {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.reminder-settings h3 {
  font-size: 1.45rem;
  font-weight: 500;
}

.rs-row { display: grid; gap: 0.55rem; }

.rs-row > label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
}

.last-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.last-chips button {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--hairline-2);
  color: var(--ink-2);
  transition: border-color 200ms, color 200ms, background 200ms;
}

.last-chips button:hover {
  border-color: var(--purple);
  color: var(--purple);
  background: color-mix(in oklab, var(--purple) 6%, var(--tint));
}

.cadence-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}

.cadence-grid button {
  padding: 0.8rem 0.6rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hairline-2);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: border-color 200ms, background 200ms, color 200ms;
  text-align: center;
}

.cadence-grid button:hover { border-color: var(--purple); color: var(--ink); }

.cadence-grid button.is-active {
  background: color-mix(in oklab, var(--purple) 9%, var(--tint));
  border-color: var(--purple);
  color: var(--purple);
}

.rs-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
}

.rs-toggle-row .tt { font-size: 0.92rem; font-weight: 500; }
.rs-toggle-row .ts { font-size: 0.78rem; color: var(--ink-3); margin-top: 0.15rem; line-height: 1.5; }

/* switch (shared look with reflect page) */
.switch {
  flex-shrink: 0;
  width: 44px; height: 26px;
  border-radius: 999px;
  background: var(--paper-3);
  border: 1px solid var(--hairline-2);
  position: relative;
  transition: background 240ms, border-color 240ms;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: translate 240ms var(--ease-out);
}

.switch.is-on { background: var(--purple); border-color: var(--purple); }
.switch.is-on::after { translate: 18px 0; }

/* ============ Learn ============ */

/* ---- The Grow hub: search, then the library itself -----------------------
   The hub used to describe the library in a card. It shows it instead: a rail
   of the real pieces that scrolls sideways and opens, with one search above it
   and Saved beside the search — which is where everything kept is read from. */
.grow-find {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.grow-find__box {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.grow-find__box svg {
  position: absolute;
  left: 1rem;
  color: var(--ink-3);
  pointer-events: none;
}

.grow-find__box .field { padding-left: 2.5rem; width: 100%; }

.grow-find__saved {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  padding: 0 1.15rem;
  border-radius: var(--r-md);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--purple);
  background: var(--purple-soft);
  border: 1px solid color-mix(in oklab, var(--purple) 22%, transparent);
  text-decoration: none;
  transition: background 200ms, border-color 200ms;
}

.grow-find__saved:hover { background: color-mix(in oklab, var(--purple) 14%, var(--tint)); border-color: var(--purple); }

.grow-rail { margin-bottom: clamp(2rem, 4vw, 3rem); }

.grow-rail__hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.grow-rail__t { font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.15; margin-top: 0.5rem; }

.grow-rail__meta { display: flex; align-items: center; gap: 1rem; }
.grow-rail__n { font-size: 0.76rem; color: var(--ink-3); }

.grow-rail__all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--purple);
  text-decoration: none;
  white-space: nowrap;
}

.grow-rail__all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Sideways, because the library is a shelf and not a page of it. The slots keep
   the grid card's proportions so a piece reads the same in either view. */
.art-rail {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--gutter);
  padding: 0.3rem 0.3rem 1.2rem;
  margin: -0.3rem -0.3rem 0;
  scrollbar-width: thin;
}

.art-rail > .article-slot {
  flex: 0 0 min(20rem, 76vw);
  scroll-snap-align: start;
}

.art-rail .article-card { height: 100%; }

.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 1.1rem;
}

.article-card {
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 1.6rem 1.6rem 1.4rem;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  position: relative;
  overflow: hidden;
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 300ms;
}

.article-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent, var(--purple));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--ease-out);
}

.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--hairline-2); }
.article-card:hover::before { transform: scaleX(1); }

.article-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.article-card .cat {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* `--accent` is the card's FILL colour — the 3px rule on top, the pull-quote's
     edge. This is 10px TEXT, so it takes the ink (ADR-092). On the gold and blue
     categories the fill read 2.06 and 3.52 here, which is the smallest type in
     the product at the worst ratios in it. */
  color: var(--accent-ink, var(--purple));
}

.article-card .min { font-size: 0.72rem; color: var(--ink-3); }

.article-card h3 { font-size: 1.45rem; line-height: 1.15; }

.article-card p { font-size: 0.88rem; color: var(--ink-2); line-height: 1.6; font-weight: 300; }

.article-card .rd--ext { color: var(--ink-2); }

/* ---- Topic filter ---- */
.topic-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.topic-chip {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--hairline-2);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.topic-chip:hover { border-color: var(--purple); color: var(--purple); }
.topic-chip[aria-pressed="true"] { background: var(--purple-fill); border-color: var(--purple-fill); color: white; }

/* ---- Article reader ---- */
.reader-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 12, 32, 0.55);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: start center;
  overflow-y: auto;
  padding: 3vh 1rem 6vh;
}
.reader {
  background: var(--surface);
  border-radius: var(--r-md);
  max-width: 42rem;
  width: 100%;
  padding: 2.4rem clamp(1.3rem, 4vw, 2.8rem) 2.8rem;
  box-shadow: var(--shadow-md);
  position: relative;
}
.reader__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 1px solid var(--hairline-2);
  background: var(--surface);
  border-radius: 999px;
  width: 2.1rem;
  height: 2.1rem;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 1.1rem;
  line-height: 1;
}
.reader__close:hover { color: var(--purple); border-color: var(--purple); }
.reader__cat {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink, var(--purple));
}
.reader h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.12; margin: 0.6rem 0 0.3rem; }
.reader__sub { color: var(--ink-2); font-weight: 300; margin-bottom: 0.4rem; }
.reader__min { font-size: 0.76rem; color: var(--ink-3); }

/* ---- Bookmark control (ADR-035) ----
   One class for both places it appears: the card and the reader. It is a
   TOGGLE, so it carries aria-pressed rather than changing its accessible name
   between "Save" and "Unsave" — a control whose name moves is a control a
   screen reader user cannot find twice. */
.bmk {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--hairline-2);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.bmk:hover { color: var(--purple); border-color: var(--purple); }
.bmk[aria-pressed="true"] {
  color: var(--purple);
  border-color: var(--purple);
  background: color-mix(in oklab, var(--purple) 8%, var(--tint));
}
.bmk svg { width: 13px; height: 13px; }
/* Filled only when saved — the fill IS the state, so it must not be decorative. */
.bmk[aria-pressed="true"] svg { fill: currentColor; }
.bmk svg { fill: none; stroke: currentColor; stroke-width: 1.7; }

/* On the card the bookmark sits over the corner. The card is itself a <button>,
   so this one is a SIBLING, never a descendant: a button inside a button is
   invalid markup, and what a browser does with it depends on the card's other
   children. Measured in Chromium: nesting it inside THIS card is silently
   repaired into a sibling, because the card holds an <h3> and a block element
   closes an open button during parsing — so it appears to work, and would stop
   the day the heading changed. The positioning is a sibling by construction
   instead of by luck. */
.article-slot { position: relative; display: grid; }
.article-slot .bmk {
  position: absolute;
  /* BOTTOM right, not top right. The top right is the meta row's "N min" read
     time, and the bookmark sat on top of it — legible in a screenshot, invisible
     to every assertion. The bottom right is the only corner the card leaves
     empty: the "Read →" call to action is bottom LEFT. */
  bottom: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  padding: 0.3rem 0.55rem;
}

/* ---- Saved (ADR-035 decision 5) ---- */
.saved-groups { display: grid; gap: 1.6rem; }
.saved-group h3 {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 0.7rem;
}
.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.saved-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.saved-list .si {
  font-size: 0.9rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.saved-list .sd { margin-top: 0.2rem; font-size: 0.74rem; color: var(--ink-3); }
.saved-list .sx, .saved-list .so {
  border: 1px solid var(--hairline-2);
  background: transparent;
  color: var(--ink-2);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  white-space: nowrap;
}
.saved-list .sx:hover, .saved-list .so:hover { color: var(--purple); border-color: var(--purple); }
.saved-empty {
  border: 1px dashed var(--hairline-2);
  border-radius: var(--r-md);
  padding: 1.6rem;
  text-align: center;
  color: var(--ink-2);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.7;
}
.saved-empty strong { display: block; font-weight: 500; color: var(--ink); margin-bottom: 0.35rem; }
.reader__body { margin-top: 1.6rem; display: grid; gap: 1.05rem; }
.reader__body p { line-height: 1.75; color: var(--ink-1); font-weight: 300; }
.reader__pull {
  margin: 1.6rem 0 0.4rem;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--accent, var(--purple));
  background: var(--tint, rgba(106, 27, 216, 0.05));
  border-radius: 0 var(--r-sm, 8px) var(--r-sm, 8px) 0;
}
.reader__pull q { font-style: italic; font-size: 1.05rem; line-height: 1.5; quotes: none; }
.reader__pull cite { display: block; margin-top: 0.5rem; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-style: normal; }

/* What an article offers under its body (ADR-156): the inspired-by card, then
   Purchase and Email Me as primary buttons, stacked in iOS's order. Tokens
   only. The card sits on `--surface-2` with a hairline because the overlay
   reader is itself `--surface`, where a `--surface` card would not be seen. */
.reader__actions { margin-top: 1.6rem; display: grid; gap: 0.75rem; }
.reader__actions .btn { justify-content: center; }
.reader__inspired {
  display: block;
  padding: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--ink);
  font-weight: 300;
  line-height: 1.6;
  text-decoration: none;
}
.reader__inspired cite { font-family: var(--serif); font-style: normal; font-weight: 500; }
.reader__more { color: var(--danger-ink); font-weight: 500; white-space: nowrap; }

/* ---- Traditional prayers ----
   Each is a devotion card (styles.css `.dv-card`, ADR-142). Its body is the
   reader's prayer text size — `recited` (22) by default, ADR-121 amended — and
   the leading and stanza gap are the card's, at every step. */
.prayer-texts { display: grid; gap: 1.1rem; }

.article-card .rd {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--purple-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ============ Prayer ============ */

/* The shell is the instrument, not the prayer: paper, hairline, quiet. The
   colour goes on the card the prayer arrives in. */
.prayer-shell {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-lg);
  color: var(--ink);
  padding: clamp(2rem, 5vw, 3.5rem);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 860px) { .prayer-shell { grid-template-columns: 1fr; } }

.prayer-shell::before {
  content: "";
  position: absolute;
  top: -35%; right: -12%;
  width: 34rem; height: 34rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 40% 40%, color-mix(in oklab, var(--purple) 9%, transparent), transparent 62%),
    radial-gradient(circle at 65% 65%, color-mix(in oklab, var(--blue) 6%, transparent), transparent 55%);
  pointer-events: none;
}

.prayer-shell h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); position: relative; }
.prayer-shell h2 em { color: var(--purple); font-weight: 400; }

.prayer-shell .sub {
  color: var(--ink-2);
  font-size: 0.94rem;
  font-weight: 300;
  line-height: 1.7;
  margin-top: 1rem;
  max-width: 26rem;
  position: relative;
}

.prayer-form { margin-top: 1.8rem; display: grid; gap: 0.8rem; position: relative; }

.prayer-form textarea {
  background: var(--tint);
  border: 1.5px solid var(--hairline-2);
  border-radius: var(--r-md);
  color: var(--ink);
  min-height: 5.2rem;
}

.prayer-form textarea::placeholder { color: var(--ink-3); }

.prayer-form textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--purple) 14%, transparent);
}

.prayer-form .btn--moon { justify-self: start; background: var(--purple-fill); color: #fff; }

.prayer-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; position: relative; }
.prayer-chips:empty { display: none; }

.prayer-chips button {
  font-size: 0.76rem;
  font-weight: 500;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--hairline-2);
  background: var(--tint);
  color: var(--ink-2);
  transition: border-color 200ms, color 200ms, background 200ms;
}

.prayer-chips button:hover {
  border-color: var(--purple);
  color: var(--purple);
  background: var(--purple-mist);
}

.prayer-out {
  background: var(--stained-glass);
  border: 1px solid var(--stained-border);
  box-shadow: var(--stained-shadow);
  color: var(--stained-ink);
  border-radius: clamp(4rem, 11vw, 9rem) clamp(4rem, 11vw, 9rem) var(--r-lg) var(--r-lg);
  padding: clamp(3.4rem, 6vw, 4.8rem) clamp(1.7rem, 4vw, 3rem) clamp(2.2rem, 4vw, 3rem);
  min-height: 24rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.prayer-out .plbl {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stained-accent);
  text-align: center;
  margin-bottom: 1.4rem;
}

/* The arch is the EMPTY state only since 11.13.0: a composed prayer renders
   on the devotion card (`#prayerResult`), and the arch steps aside. `display:
   flex` above outranks the UA's [hidden], so it is said here. */
.prayer-out[hidden] { display: none; }

.prayer-out .empty {
  flex: 1;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.8rem;
  color: var(--stained-ink-2);
  font-size: 0.9rem;
  font-weight: 300;
  max-width: 18rem;
  margin-inline: auto;
  line-height: 1.7;
}

.prayer-out .empty .fl { font-size: 1.6rem; color: var(--stained-accent); }


/* ---- Saved prayers (ADR-007) ---- */
.saved-prayers { margin-top: 1.4rem; }
.saved-prayers ul { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.saved-prayers li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--moon) 16%, transparent);
  background: color-mix(in oklab, var(--purple-night) 55%, transparent);
}
.saved-prayers .si {
  font-size: 0.86rem;
  color: var(--moon);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.saved-prayers .sd { margin-top: 0.2rem; font-size: 0.74rem; color: var(--moon-2); }
.saved-prayers .sx {
  border: 1px solid color-mix(in oklab, var(--moon) 30%, transparent);
  background: transparent;
  color: var(--moon-2);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}
.saved-prayers .sx:hover { color: var(--moon); border-color: color-mix(in oklab, var(--moon) 50%, transparent); }

.prayer-note {
  font-size: 0.74rem;
  color: var(--ink-3);
  margin-top: 1.2rem;
  text-align: center;
  position: relative;
  line-height: 1.6;
}

/* ---- Psalter card (reuses the prayer-* shell; psalm text scrolls — Psalm 119 is 176 verses) ---- */
/* ---- The Psalter: one shell to ask in, one sheet to read on ---------------
   The two were one panel with the psalm scrolling inside the arch, which put a
   scrollbar inside a reading surface and capped the psalm at 19rem — Psalm 119
   is 176 verses. So they are separated: the dark shell keeps the form, and the
   psalm gets its own arch on paper, full length, at reading measure. Nothing
   scrolls but the page. */

/* The ask arch is paper: the same shape as the psalm sheet, the plain one of
   the pair. */
.prayer-shell--solo {
  grid-template-columns: 1fr;
  border-radius: clamp(4rem, 11vw, 9rem) clamp(4rem, 11vw, 9rem) var(--r-lg) var(--r-lg);
  padding: clamp(3.4rem, 6vw, 4.8rem) clamp(2rem, 5vw, 3.4rem) clamp(2.2rem, 4vw, 3rem);
  text-align: center;
}

.prayer-shell--solo::before { display: none; }

.prayer-shell--solo > div { max-width: 41rem; margin-inline: auto; }

.prayer-shell--solo .psalter-sub {
  max-width: 22rem;
  margin-inline: auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-2);
}
.prayer-shell--solo .prayer-chips { justify-content: center; }
.prayer-shell--solo .prayer-form .btn--moon { justify-self: center; }
.prayer-shell--solo .prayer-form textarea { text-align: center; }

/* Ask on the left, read on the right: the form stays put while psalms come and
   go beside it. */
.wrap--pair {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.6rem, 3.4vw, 3rem);
  transition: gap 560ms var(--ease-out);
}

.wrap--pair > .psalm-ask,
.wrap--pair > .psalm-read { flex: 1 1 0; min-width: 0; }

.psalm-ask {
  overflow: hidden;
  transition: flex-grow 560ms var(--ease-out), opacity 300ms var(--ease-out);
}

/* Both columns are labelled and both arches spring from the same line. */
#psalter, #prayer { padding-top: clamp(0.6rem, 1.6vw, 1.4rem); }

/* Tablet portrait still holds the pair, on a tighter gap. */
@media (max-width: 1080px) {
  .wrap--pair { gap: clamp(1rem, 2.2vw, 1.8rem); }
  .prayer-shell--solo { padding-inline: clamp(1.3rem, 3vw, 2rem); }
}
@media (max-width: 880px) {
  .prayer-shell--solo { padding-top: clamp(2.4rem, 8vw, 3.4rem); }
  .psalter-sub { font-size: 0.95rem; }
  .psalm-wide__lbl { display: none; }
  .psalm-wide { padding: 0 0.35rem; }
}

@media (max-width: 700px) {
  .wrap--pair { flex-direction: column; gap: clamp(2.2rem, 5vw, 3.4rem); }
  /* `flex: 1 1 0` is a WIDTH share in the row. In the column it is a zero
     height basis, and `.psalm-ask`'s `overflow: hidden` removes the automatic
     minimum that would otherwise hold it open — so the whole form, button
     included, was 0px tall on every phone. The columns size to their content. */
  .wrap--pair > .psalm-ask,
  .wrap--pair > .psalm-read { flex: none; }
  /* Expanded has no second column to grow into here, so the form simply goes;
     the same control brings it back. */
  .wrap--pair.is-wide .psalm-ask { display: none; }
  .psalm-sheet { width: min(38rem, 100%); }
}

.psalm-kind {
  justify-content: center;
  margin-bottom: 0;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
}

/* The label line carries the expand control. A three-track grid keeps the label
   centred in the space that is actually free, so the control cannot ride on top
   of it at tablet widths; a shared min-height keeps both columns' labels — and
   so both arch tops — on the same line. */
.psalm-topline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 1.5rem;
  margin-bottom: 1rem;
}

.psalm-kind { grid-column: 2; }

.psalm-wide {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 500;
  height: 1.5rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  color: var(--ink-3);
  background: transparent;
  transition: color 200ms, background 200ms;
}

.psalm-wide:hover { color: var(--purple); background: var(--purple-mist); }
.psalm-wide svg { flex-shrink: 0; }
.psalm-wide .i-in { display: none; }
.psalm-wide[aria-pressed="true"] .i-in { display: block; }
.psalm-wide[aria-pressed="true"] .i-out { display: none; }

@media (max-width: 700px) { .psalm-wide { display: none; } }

/* Expanded: the ask column closes horizontally and the psalm grows into the
   space it leaves, so it is obvious where the form went and how to get it back.
   The verses hold their measure inside the wider arch. */
.wrap--pair.is-wide { gap: 0; }
.wrap--pair.is-wide .psalm-ask { flex-grow: 0; opacity: 0; pointer-events: none; }
.wrap--pair.is-wide .psalm-sheet,
.wrap--pair.is-wide .prayer-out {
  border-radius: clamp(5rem, 13vw, 11rem) clamp(5rem, 13vw, 11rem) var(--r-lg) var(--r-lg);
}
.wrap--pair.is-wide .dv-card,
.wrap--pair.is-wide .prayer-out .empty { max-width: 38rem; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .wrap--pair, .psalm-ask { transition: none; }
}

.psalm-sheet {
  position: relative;
  width: 100%;
  margin-inline: auto;
  background: var(--stained-glass);
  border: 1px solid var(--stained-border);
  border-radius: clamp(4rem, 11vw, 9rem) clamp(4rem, 11vw, 9rem) var(--r-lg) var(--r-lg);
  box-shadow: var(--stained-shadow);
  padding: clamp(3.4rem, 6vw, 4.8rem) clamp(1.7rem, 4vw, 3rem) clamp(2.2rem, 4vw, 3rem);
}

/* The psalm reads on the devotion card (ADR-142) — its reference as the title,
   the verses numbered, Save / Listen / Share / Text size on the card. The
   stained-glass sheet is the EMPTY state only, and steps aside when a psalm
   arrives; the page scrolls, never the card (Psalm 119 is 176 verses). */
.psalm-sheet[hidden] { display: none; }

.psalm-empty {
  display: grid;
  place-items: center;
  gap: 0.9rem;
  text-align: center;
  max-width: 22rem;
  margin-inline: auto;
  padding-block: 1.4rem 2rem;
  font-size: 0.94rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--stained-ink-2);
}

.psalm-empty .fl { font-size: 1.7rem; color: var(--stained-accent); }

/* The actions sit under the sheet, not inside it: the sheet is scripture, the
   row beneath it is the reader's. */
.psalm-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms;
}

.psalm-acts.is-shown { opacity: 1; pointer-events: auto; }

.psalm-acts button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.62rem 1.15rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px var(--hairline-2), var(--shadow-sm);
  transition: color 200ms, box-shadow 200ms, background 200ms;
}

.psalm-acts button svg { flex-shrink: 0; }

.psalm-acts button:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--purple), var(--shadow-sm); }

/* One accented action, because only one of the three leaves the device. */
.psalm-acts .pa-accent {
  background: color-mix(in oklab, var(--purple) 10%, var(--tint));
  color: var(--purple-ink);
  box-shadow: none;
}

.psalm-acts .pa-accent:hover {
  background: color-mix(in oklab, var(--purple) 16%, var(--tint));
  color: var(--purple-ink);
  box-shadow: none;
}

.psalm-acts button[disabled] { opacity: 0.5; cursor: default; }
.psalm-acts button[disabled]:hover { color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--hairline-2), var(--shadow-sm); }


/* ---- Ask → Read ---------------------------------------------------------
   A wide screen holds both panels at once, which is the point of the desktop
   layout: the form stays put while psalms come and go beside it. Below 860px
   the shell is a single column, and there a psalm 176 verses long cannot
   share the screen with the form — so the narrow layout becomes the two
   steps the phone app pushes between, with the form kept in the DOM (and its
   text intact) behind an "Ask again" pill. */

.psalter-sub {
  color: var(--ink-2);
  font-size: 0.94rem;
  font-weight: 300;
  line-height: 1.7;
  position: relative;
  max-width: 24rem;
}

.psalter-hint {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-3);
}

.psalter-local {
  font-size: 0.72rem;
  line-height: 1.6;
  /* Was a de-emphasis BELOW `--ink-3` (3.41:1). A caption that names where the
     psalm came from is information, so it takes the muted token itself. */
  color: var(--ink-3);
}

.psalter-back { display: none; }

/* The disclosure lives at the button it describes — not on the ask side,
   where it would be describing a call the reader has not been offered yet. */
.psalter-privacy {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  max-width: 34rem;
  margin: 1.3rem auto 0;
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--ink-3);
  text-align: left;
}

.psalter-privacy svg { flex-shrink: 0; margin-top: 0.18rem; }

.prayer-form .btn[disabled] { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

.psl-spin { animation: psl-spin 0.9s linear infinite; }

@keyframes psl-spin { to { transform: rotate(360deg); } }

#psalmInput[disabled] {
  background: var(--paper-2);
  border-color: var(--hairline);
  color: var(--ink-3);
  cursor: default;
}

.prayer-chips.is-disabled { opacity: 0.35; pointer-events: none; }

@media (max-width: 860px) {
  .psalm-sheet {
    border-radius: clamp(3rem, 16vw, 6rem) clamp(3rem, 16vw, 6rem) var(--r-lg) var(--r-lg);
    padding-top: clamp(2.8rem, 13vw, 4rem);
  }
  .prayer-form .btn--moon { justify-self: stretch; justify-content: center; }
}

/* ---- The prayer search, moved off grow.html with the list it filters ----
   These five rules lived in grow.html's inline <style> because the search and
   `#prayerTexts` were on the same page. The list moved to prayers.html at the
   leaf-route port and the search followed it here; a control styled from the
   page it no longer sits on is a rule waiting to be deleted as unused. */
.prayer-search { margin-bottom: 1.4rem; position: relative; }
.prayer-search .field { padding-right: 2.8rem; }
.prayer-search .pc {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  color: var(--ink-3);
}
.prayer-search .pc:hover { color: var(--purple); }
.prayer-count {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.9rem;
}

/* A saved psalm's row OPENS the psalm (ADR-143): the name and incipit are one
   link to `psalter.html#<id>`, and Remove sits beside it like every row's. */
.saved-open { display: block; min-width: 0; color: inherit; text-decoration: none; }
.saved-open .si, .saved-open .sd { display: block; }
.saved-open:hover .si { color: var(--purple-ink); }