/* Christian Pro Se — design system
   Concept: a gilt-edged Bible on a courtroom table.
   Bible-paper ivory, letterpress ink, red-letter crimson (scripture & accents),
   court indigo (links & tools), gilt gold (borders only, never text). */

:root {
  --paper: #FAF8F2;
  --paper-2: #F2EFE6;
  --ink: #262420;
  --ink-soft: #5A554B;
  --redletter: #9A3324;
  --indigo: #2A3C5A;
  --gilt: #B08D3F;
  --rule: #E2DDCF;
  --good: #3E5A3E;
  --warn-bg: #F5EEDC;
  --warn-border: #D8C89A;

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Public Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191A20;
    --paper-2: #22232B;
    --ink: #ECE8DC;
    --ink-soft: #A8A294;
    --redletter: #D07A65;
    --indigo: #8FA5C9;
    --gilt: #C9A75C;
    --rule: #34353E;
    --good: #8FAE8F;
    --warn-bg: #2A2620;
    --warn-border: #6B5A32;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* ---- header & nav ---- */
.site-header {
  border-bottom: 2px solid var(--gilt);
  padding: 1.1rem 1.25rem 0.9rem;
  text-align: center;
}
.site-header .brand {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
.site-header .brand-sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}
/* The second line of the tagline. Deliberately quieter than the first: that
   one identifies who the site is for, this one names what they are up against,
   and a second row of tracked capitals would turn the header into a wall.
   Sentence case, so it reads as a sentence. */
.site-header .brand-note {
  display: block;
  max-width: 34rem;
  margin: 0.3rem auto 0;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  margin-top: 0.75rem;
  font-family: var(--sans);
  font-size: 0.82rem;
}
.site-nav a { color: var(--indigo); text-decoration: none; padding: 0.25rem 0; }
.site-nav a:hover, .site-nav a:focus { text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--redletter); font-weight: 700; }

main { max-width: 42rem; margin: 0 auto; padding: 2.25rem 1.25rem 4rem; }
main.wide { max-width: 52rem; }

h1, h2, h3 { line-height: 1.22; font-weight: 600; text-wrap: balance; }
h1 { font-size: 2rem; margin: 0 0 0.75rem; }
/* Present in the accessibility tree, invisible on screen: for a page heading
   that carries no approved visible wording of its own. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
h2 { font-size: 1.4rem; margin: 2.5rem 0 0.75rem; padding-top: 0.8rem; border-top: 2px solid var(--gilt); }
h3 { font-size: 1.1rem; margin: 1.75rem 0 0.5rem; }
p { margin: 0 0 1rem; }
a { color: var(--indigo); }
ul, ol { padding-left: 1.4rem; margin: 0 0 1rem; }
li { margin-bottom: 0.4rem; }
.lead { font-size: 1.15rem; }

.breadcrumbs {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.78rem;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumbs li {
  margin: 0;
}
.breadcrumbs li + li::before {
  content: '\203A';
  margin-right: 0.35rem;
  color: var(--gilt);
}
.breadcrumbs a {
  color: inherit;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--redletter);
  margin: 0 0 0.4rem;
}

.coaching-boundary {
  position: relative;
  width: fit-content;
  max-width: 100%;
}
button.coaching-boundary-trigger {
  display: block;
  max-width: 100%;
  padding: 0 1.3rem 0 0;
  color: var(--redletter);
  background: none;
  border: 0;
  text-align: left;
}
button.coaching-boundary-trigger::after {
  content: '\24D8';
  position: absolute;
  right: 0;
  font-size: 0.9rem;
  letter-spacing: 0;
}
.coaching-boundary-overlay {
  position: absolute;
  z-index: 4;
  top: calc(100% + 0.45rem);
  left: 0;
  width: min(38rem, calc(100vw - 2.5rem));
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gilt);
  border-radius: 0.45rem;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 0.8rem 2.2rem rgb(20 18 14 / 20%);
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.2rem);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}
.coaching-boundary:hover .coaching-boundary-overlay,
.coaching-boundary:focus-within .coaching-boundary-overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.be-still-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem 1rem;
  margin-bottom: 0.75rem;
}
.be-still-heading-row h1 { margin: 0; }
.be-still-heading-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}
.be-still-heading-row a {
  flex: none;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
}
.be-still-heading-row a::after { content: ' \2192'; }
.be-still-heading-row a.privacy-link::after { content: ''; }
.be-still-heading-row a:hover,
.be-still-heading-row a:focus { border-color: var(--indigo); text-decoration: underline; }

/* scripture */
.verse {
  /* No rule down the left. The indent and the italic already say "this is
     quoted", and the bar made every verse look like a pull-quote in a
     brochure. The reference underneath carries the weight instead. */
  padding: 0.25rem 0 0.25rem 1.1rem;
  margin: 1.5rem 0;
  font-style: italic;
  /* A grid, not plain flow, so a share holder companion-image.js appends
     right after the citation lands in the citation's own row instead of
     wrapping below it: the quoted words claim row one on their own, and
     the citation and holder share row two, side by side. Untouched when
     no holder is present, since the second column then has no content. */
  display: grid;
  grid-template-columns: 1fr auto;
}
.verse cite {
  display: block;
  grid-column: 1;
  grid-row: 2;
  margin-top: 0.35rem;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--redletter);
}

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; margin: 1.5rem 0; }
.cards.wide { grid-template-columns: 1fr; }
.card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gilt);
  padding: 1rem 1.1rem;
}
.card h3 { margin: 0 0 0.35rem; }
.card p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.card a.cover { display: block; color: inherit; text-decoration: none; }
.card a.cover:hover h3, .card a.cover:focus h3 { text-decoration: underline; text-decoration-color: var(--indigo); }

.note {
  background: var(--paper-2);
  border-top: 2px solid var(--gilt);
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.notice {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-left: 4px solid var(--gilt);
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

/* Published Stones are long first-person accounts, so they remain a single
   reading column instead of becoming cramped cards. */
.story-source-note { color: var(--ink-soft); font-size: 0.95rem; }
.stone-story {
  border-top: 1px solid var(--rule);
  padding-top: 0.4rem;
  margin: 2.25rem 0 3rem;
}
.stone-story h3 { font-size: 1.35rem; margin-top: 1rem; }
.stone-story .verse { margin: 1.25rem 0; }
.stone-story .practical-response {
  background: var(--paper-2);
  border-left: 3px solid var(--gilt);
  padding: 0.8rem 1rem;
}
.stone-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  font-family: var(--sans);
}
.stone-actions button.quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
}
.stone-actions button.quiet.flagged {
  background: var(--paper-2);
  border-color: var(--indigo);
  color: var(--indigo);
}
.stone-flag-icon, .stone-share-icon { width: 1.05rem; height: 1.05rem; flex: none; }
.stone-feedback-link { font-size: 0.82rem; }
.stone-actions .stone-status {
  flex-basis: 100%;
  margin: 0.1rem 0 0;
}

/* tables */
.tablewrap { overflow-x: auto; margin: 1rem 0 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
th, td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* forms & tools (Public Sans territory) */
.tool, form.stone-form { font-family: var(--sans); font-size: 0.95rem; }
label { display: block; font-weight: 600; font-size: 0.85rem; margin: 1rem 0 0.3rem; }
input[type="text"], input[type="number"], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.55rem 0.6rem;
}
textarea { min-height: 8rem; }
input:focus, textarea:focus, select:focus, button:focus, a:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
}
.check { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; font-size: 0.9rem; margin: 0.75rem 0; }
.check input { margin-top: 0.2rem; }
button, .btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: #FAF8F2;
  background: var(--indigo);
  border: none;
  border-radius: 2px;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { filter: brightness(1.12); }
button:disabled { opacity: 0.5; cursor: default; }
button.quiet { background: transparent; color: var(--indigo); border: 1px solid var(--rule); font-weight: 600; padding: 0.35rem 0.6rem; }
.hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.25rem; }

/* exhibit builder file list */
.filelist { list-style: none; padding: 0; margin: 1rem 0; }
.filelist li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.4rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}
.filelist .fname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.filelist .fmeta { color: var(--ink-soft); font-size: 0.75rem; white-space: nowrap; }
.filelist .lead-tag { color: var(--redletter); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 1.25rem; }
.progress {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.9rem;
  min-height: 1.3rem;
}
.privacy-line {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: 0.7rem;
  margin-top: 1.5rem;
}

/* scheme entries (wise as serpents) */
.scheme { margin: 0 0 2.25rem; }
.scheme h3 { margin-bottom: 0.4rem; }
.scheme .part-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.8rem 0 0.15rem;
}
.scheme .verse { margin: 0.75rem 0; }

/* footer */
.site-footer {
  border-top: 2px solid var(--gilt);
  margin-top: 3rem;
  padding: 1.5rem 1.25rem 2.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.site-footer .promises {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.9rem;
}
.site-footer .promises span { white-space: nowrap; }
.site-footer .verse-line { font-style: italic; margin-bottom: 0.9rem; }
.site-footer nav { font-family: var(--sans); font-size: 0.78rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.1rem; }
.site-footer a { color: var(--indigo); }
.disclaimer { font-family: var(--sans); font-size: 0.72rem; color: var(--ink-soft); max-width: 36rem; margin: 1rem auto 0; }

/* honeypot field — visually removed, still in the form for bots */
.hp { position: absolute; left: -9999px; }

/* Be Still companion console. Built by be-still/be-still.js, so none of this
   is on the page until the server says the companion is actually available. */
/* The conversation is part of the page, not a box inside it. It used to be a
   60vh scroller with overscroll-behavior: contain, which meant an answer
   longer than that box had to be scrolled inside it, and the wheel died
   wherever the pointer happened to be over the conversation. The page is the
   only scroller now, so nothing can be trapped. The height cap existed to keep
   the composer reachable, and the sticky rule below does that job instead. */
.thread {
  margin: 1.5rem 0;
}
.thread:empty { display: none; }
/* The composer rides the bottom of the screen while the conversation is on
   it, so the next thing someone wants to say is always one click away however
   long the thread grows. It sticks only within #companion, so it lifts off
   again once the reader scrolls past the conversation into the page below.
   The page background is explicit because turns scroll behind it. */
#companion form {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 0.6rem 0 0.4rem;
}
/* On a short screen, a phone held sideways, the composer would cover most of
   what it is meant to sit under. Let it scroll away there and give the reading
   the whole window back. */
@media (max-height: 34rem) {
  #companion form { position: static; border-top: 0; }
}
/* Scripture inside an answer sits tighter than on a page of prose, where a
   verse is a set piece. Here it is one beat in a reply. */
.thread .verse { margin: 0.9rem 0; }
.turn { margin: 1.1rem 0; }
.turn:first-child { margin-top: 0; }
.turn .who {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 0.3rem;
}
.turn .said p { margin: 0 0 0.7rem; }
.turn .said p:last-child { margin-bottom: 0; }
/* The person's own words sit slightly apart, the way a quoted message does,
   so a long thread still reads as a conversation and not as one block. */
.from-you .said {
  background: var(--paper-2);
  border-left: 3px solid var(--rule);
  padding: 0.6rem 0.9rem;
}
.from-companion .said { border-left: 3px solid var(--gilt); padding: 0.1rem 0.9rem; }
.prompt-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.prompt-row .said { flex: 1 1 auto; min-width: 0; }
button.edit-turn-control {
  flex: none;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0.25rem;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
}
.response-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
  padding-top: 0.35rem;
  border-top: 1px solid var(--rule);
}
.scripture-card-trigger {
  flex: none;
  width: 2.4rem;
  min-width: 2.4rem;
  min-height: 2.4rem;
  margin-right: auto;
  padding: 0.4rem;
  border-radius: 999px;
  color: var(--ink-soft);
}
.scripture-card-trigger svg { display: block; width: 1.35rem; height: 1.35rem; fill: currentColor; }
.scripture-card-trigger:hover,
.scripture-card-trigger:focus-visible { color: var(--ink); border-color: var(--gilt); }
.scripture-card-dialog {
  box-sizing: border-box;
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(48rem, calc(100dvh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0.7rem;
  box-shadow: 0 1.5rem 4rem rgb(18 20 30 / 28%);
}
.scripture-card-dialog[open] { display: flex; flex-direction: column; }
.scripture-card-dialog::backdrop { background: rgb(18 20 30 / 48%); backdrop-filter: blur(2px); }
.scripture-card-header {
  position: relative;
  flex: 0 0 auto;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.scripture-card-header h2 { margin: 0; font-size: 1.15rem; }
.scripture-card-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
button.scripture-card-close {
  min-width: 2.2rem;
  min-height: 2.2rem;
  padding: 0.15rem;
  border-radius: 999px;
  font-size: 1.45rem;
  line-height: 1;
}
.scripture-card-body { padding: 1rem 1.1rem 1.2rem; }
.scripture-card-reference {
  margin: 0 0 0.55rem;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.scripture-card-verse {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  background: var(--paper-2);
  border-left: 3px solid var(--gilt);
  font-size: 1.08rem;
  line-height: 1.6;
}
.scripture-card-verse .scripture-card-reference {
  display: block;
  margin: 0.45rem 0 0;
  font-style: normal;
}
.scripture-card-section + .scripture-card-section,
.scripture-card-actions { margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px solid var(--rule); }
.scripture-card-section h3,
.scripture-card-actions h3 { margin: 0 0 0.45rem; font-size: 1rem; }
.scripture-card-section p { margin: 0.45rem 0; }
.scripture-card-context-reference,
.scripture-card-loading,
.scripture-card-unavailable { color: var(--ink-soft); font-family: var(--sans); font-size: 0.82rem; }
.scripture-explore-choices,
.scripture-passage-choices { display: grid; gap: 0.45rem; }
.scripture-passage-choices {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  padding: 0.8rem 1rem 0;
}
.scripture-passage-choices[hidden] { display: none; }
button.scripture-explore-choice,
button.scripture-passage-choice {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  text-align: left;
  line-height: 1.35;
}
button.scripture-passage-choice[aria-pressed="true"] { border-color: var(--gilt); }
.scripture-source { color: var(--ink-soft); font-family: var(--sans); font-size: 0.78rem; }
.scripture-source { margin-top: -0.35rem; }
.scripture-commentary-sources {
  margin: 0.65rem 0 0;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.75rem;
  text-align: right;
}
.scripture-commentary-sources a { color: inherit; }
.scripture-misuse-note + .scripture-misuse-note { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px solid var(--rule); }
#companion .response-actions .answer-image-action.image-maker {
  margin: 0;
  padding: 0;
  border-top: 0;
}
.answer-feedback {
  display: inline-flex;
  gap: 0.25rem;
}
button.answer-feedback-button {
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0.25rem;
  border-radius: 999px;
  line-height: 1;
}
button.answer-feedback-button[aria-pressed="true"] {
  border-color: var(--gilt);
  background: var(--paper-2);
}
.trouble .said { border-left-color: var(--redletter); }
/* Waiting, shown as something breathing rather than something being timed.
   The global prefers-reduced-motion rule stops the animation, which leaves a
   plain "Be Still is thinking..." — the right fallback, so it is left alone. */
.pending .who { color: var(--indigo); }
.queue-notice {
  max-width: 48rem;
  margin: 0.7rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.dots span {
  animation: bestill-breathe 1.4s ease-in-out infinite;
  opacity: 0.25;
}
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bestill-breathe {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}
.elapsed {
  margin-left: 0.5rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
/* A sweeping bar, not a filling one. Nothing here knows how far along the
   answer is, so a percentage would be invented. */
.sweep {
  position: relative;
  overflow: hidden;
  height: 2px;
  margin: 0.15rem 0 0 0;
  background: var(--rule);
}
.sweep span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 32%;
  background: var(--gilt);
  animation: bestill-sweep 1.8s ease-in-out infinite;
}
@keyframes bestill-sweep {
  0% { left: -32%; }
  100% { left: 100%; }
}
/* Reduced motion kills the animations above, which would leave a stalled bar
   sitting at the far left pretending to be progress. Hide it and let the
   ticking second count carry the "something is happening" job on its own. */
@media (prefers-reduced-motion: reduce) {
  .sweep { display: none; }
}
.said-hint {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0.35rem 0 0;
}
#companion textarea { min-height: 4.5rem; }
.companion-entry-disclaimer,
.companion-moral-note {
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.74rem;
  line-height: 1.4;
}
.companion-entry-disclaimer { margin: 0 0 0.35rem; }
.composer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.45rem;
}
.composer-actions .intro-open { margin-left: 0; }
.composer-actions .turn-control { min-width: 2.55rem; min-height: 2.55rem; }
.companion-moral-note { margin: 0.35rem 0 0; }
/* Response-emphasis slider: Personal on the left, Strategic on the right,
   three stops, always the middle (the normal Be Still blend) on load. Its
   position lives only in this input element in memory; it is never written
   to localStorage, sessionStorage, or a cookie. */
.emphasis-slider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.emphasis-slider .emphasis-label { white-space: nowrap; }
.emphasis-slider input[type="range"] {
  flex: 1 1 auto;
  min-width: 5rem;
  max-width: 9rem;
  accent-color: var(--gilt);
}
.starter-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
  max-height: min(18rem, 38vh);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.starter-questions[hidden] { display: none; }
button.starter-question {
  max-width: 100%;
  padding: 0.38rem 0.55rem;
  text-align: left;
  font-size: 0.78rem;
  line-height: 1.3;
}
@media (max-width: 600px) {
  .starter-questions {
    display: grid;
    grid-template-columns: 1fr;
    max-height: var(--starter-mobile-max-height, none);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
  button.starter-question { width: 100%; }
}
.structured-choice-turn .said { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.conversation-choices {
  display: grid;
  gap: 0.45rem;
}
button.conversation-choice {
  width: 100%;
  padding: 0.55rem 0.7rem;
  text-align: left;
  line-height: 1.35;
}

/* A small reading carousel inside the temporary waiting turn. The source
   articles live in the page, making future tips and Scripture quotations a
   markup-only addition. The whole carousel leaves with the waiting turn. */
.waiting-tip-carousel {
  margin: 1rem 0 0.35rem;
  padding: 0.9rem 1rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gilt);
  border-radius: 0.4rem;
}
.waiting-tip-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.waiting-tip-label { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.waiting-tip-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.waiting-tip-card { min-height: 8.5rem; padding: 0.65rem 0 0.4rem; }
.waiting-tip-card h3 { margin: 0 0 0.45rem; font-size: 1.05rem; }
.waiting-tip-card p { margin: 0; }
.waiting-tip-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-left: auto;
}
button.waiting-tip-arrow { min-width: 2.25rem; font-size: 1.05rem; line-height: 1; }
button.waiting-tip-pause { min-width: 5.2rem; }

/* The page's introduction, once be-still.js has moved it out of the flow. A
   real dialog, so Escape closes it, focus stays inside it while it is open,
   and the top layer puts it over the sticky composer without a z-index race.
   It scrolls inside itself when the words are taller than the screen, which is
   the one nested scroller on this page that cannot trap anything: there is
   nothing behind it to scroll. */
.intro-overlay {
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gilt);
  border-radius: 0.9rem;
  box-shadow: 0 1.4rem 4rem rgb(20 18 14 / 24%);
}
.intro-overlay::backdrop { background: rgb(18 20 30 / 46%); backdrop-filter: blur(2px); }
.intro-dismiss {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0.7rem 1rem;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.intro-said { padding: 1.1rem 1.5rem 0.6rem; }
.intro-said > :last-child { margin-bottom: 0; }
.intro-open { margin-left: 0.6rem; }

@media (max-width: 480px) {
  body { font-size: 1rem; }
  h1 { font-size: 1.6rem; }
  main { padding: 1.5rem 1rem 3rem; }
  .be-still-heading-row { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Stop is the only turn action under the composer. Message-specific actions
   stay beside the prompt or response they affect. */
.turn-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.turn-controls[hidden] { display: none; }
.turn-control {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  min-width: 2.4rem; min-height: 2.4rem;
  padding: 0.25rem; font-size: 0.78rem; font-family: var(--sans);
  background: none; border: 1px solid var(--rule, #d8d2c6); border-radius: 999px;
  color: inherit; cursor: pointer; opacity: 0.8;
}
.turn-control:hover { opacity: 1; }
.turn-control[hidden] { display: none; }
.control-icon { width: 1.05rem; height: 1.05rem; flex: none; }

.scripture-picker {
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(46rem, calc(100vh - 2rem));
  padding: 0;
  border: 1px solid var(--rule, #d8d2c6);
  border-radius: 0.9rem;
  color: var(--ink, #25231f);
  background: var(--paper, #fffdf8);
  box-shadow: 0 1.4rem 4rem rgb(20 18 14 / 24%);
}
.scripture-picker::backdrop { background: rgb(18 20 30 / 46%); backdrop-filter: blur(2px); }
.scripture-picker form { padding: 1.5rem; }
.scripture-picker h2 { margin: 0 0 1rem; font-size: 1.35rem; }
.scripture-picker-choices {
  display: grid;
  gap: 0.55rem;
  max-height: min(32rem, calc(100vh - 12rem));
  overflow: auto;
  padding: 0.15rem 0.3rem 0.15rem 0.15rem;
}
.scripture-picker-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--rule, #d8d2c6);
  border-radius: 0.65rem;
  cursor: pointer;
}
.scripture-picker-choice:has(input:checked) {
  border-color: var(--redletter, #a3242c);
  background: rgb(163 36 44 / 5%);
}
.scripture-picker-choice input { grid-row: 1 / 3; margin-top: 0.2rem; }
.scripture-picker-words { font-family: var(--serif, Georgia, serif); line-height: 1.4; }
.scripture-picker-cite { color: var(--ink-soft, #686158); font-size: 0.78rem; }
.scripture-picker-actions { display: flex; justify-content: flex-end; gap: 0.65rem; margin-top: 1.15rem; }
.scripture-translation-status { color: var(--redletter); font-family: var(--sans); font-size: 0.82rem; }
.scripture-verse-actions {
  display: inline-flex;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
}
.scripture-verse-actions .scripture-image-action.image-maker { margin-left: 0; }
.scripture-translation-action { display: inline-flex; }
.scripture-translation-button { display: inline-flex; align-items: center; justify-content: center; }

/* The passes a turn goes through, shown as they happen. Waiting, running, done
   with the seconds it took, so a long wait is legible instead of blank. */
.stages { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.78rem; font-family: var(--sans); }
.stage { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.1rem 0; opacity: 0.45; }
.stage.running { opacity: 1; }
.stage.done { opacity: 0.7; }
.stage-mark { width: 0.9em; text-align: center; color: var(--redletter, #a3242c); }
.stage.done .stage-mark { color: #1f6f43; }
.stage-name { flex: 1; }
.stage-time { font-variant-numeric: tabular-nums; opacity: 0.75; }

/* Front-page start guide. The list ships in the page and start-guide.js lifts
   it into a dialog, so these styles have to read correctly in both places. */
.start-guide h2 {
  font-size: 1.2rem;
  margin: 0 0 1rem;
  padding-top: 0;
  border-top: 0;
}
/* Two columns where there is room, one where there is not. The doors are read
   rather than scanned, so they need width for the sentence under each title. */
.start-choices {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0.6rem;
}
.start-choices li { margin: 0; }
.start-choices a {
  display: flex;
  gap: 0.75rem;
  height: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gilt);
  color: inherit;
  text-decoration: none;
}
.start-choices a:hover, .start-choices a:focus {
  border-left-color: var(--redletter);
  background: var(--paper);
}
.start-icon {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  margin-top: 0.1rem;
  color: var(--gilt);
}
.start-choices a:hover .start-icon, .start-choices a:focus .start-icon { color: var(--redletter); }
.start-text { display: block; min-width: 0; }
.start-choices strong { display: block; font-size: 0.96rem; line-height: 1.3; }
.start-choices .start-text span {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* The first door is the way in, not one of seven equals. It takes the full
   width of the grid and a red-letter edge, so the eye lands there first. */
.start-lead { grid-column: 1 / -1; }
.start-lead a { border-left-color: var(--redletter); background: var(--paper); }
.start-lead .start-icon { color: var(--redletter); }
.start-lead strong { font-size: 1.05rem; }

/* The last door. It takes the full width like the first one, and a warning
   ground rather than the paper the others sit on, because the person who needs
   it needs it more than anything above it. */
.start-crisis { grid-column: 1 / -1; }
.start-crisis a {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  border-left-color: var(--redletter);
}
.start-crisis a:hover, .start-crisis a:focus { background: var(--warn-bg); }
.start-crisis .start-icon { color: var(--redletter); }

/* The dialog itself. It is in the top layer, so nothing on the page can clip
   it or paint over it. */
.start-overlay {
  width: min(50rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1.2rem 1.3rem 1.4rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gilt);
  border-radius: 3px;
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 28%);
}
.start-overlay::backdrop { background: rgb(0 0 0 / 45%); }
.start-skip { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.start-again { margin: 1.5rem 0; }
.start-intro p:last-of-type { margin-bottom: 1.1rem; }

@media (max-width: 40rem) {
  .start-choices { grid-template-columns: 1fr; }
  .start-overlay { padding: 1rem 0.9rem 1.1rem; }
}