/* =========================================================================
   Landing hero, the composer, the conversation, and verse cards.
   ========================================================================= */

/* ---- Hero --------------------------------------------------------------- */
.hero {
  max-width: var(--maxw); margin: clamp(2rem, 7vw, 5rem) auto 0;
  padding: 0 clamp(1rem, 4vw, 2rem); text-align: center;
  position: relative; isolation: isolate;
  animation: hero-rise .6s ease both;
}
/* Faint concentric rules radiating from the headline — ruled paper, seen from
   a distance. The hero carries no illustration: a reference tool earns its
   texture from typography and the paper grain, not from a picture behind the
   words. (The old watercolour well went with the old name, and took 500 KB of
   page weight with it.) */
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -1.5rem; transform: translateX(-50%);
  width: 760px; max-width: 135%; height: 440px;
  background: repeating-radial-gradient(circle at 50% 32%, var(--border) 0 1.4px, transparent 1.4px 40px);
  -webkit-mask: radial-gradient(circle at 50% 32%, #000, transparent 62%);
          mask: radial-gradient(circle at 50% 32%, #000, transparent 62%);
  opacity: .55;
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero .eyebrow {
  display: inline-block; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 1.1rem;
}
.hero h1 {
  /* Capped lower than it was: at 3.7rem the two questions wrapped awkwardly and
     the headline read as louder than the answer it introduces. */
  font-size: clamp(2rem, 5.2vw, 2.9rem); line-height: 1.12; margin-bottom: 1.1rem;
  letter-spacing: -0.02em;
  max-width: 20ch; margin-inline: auto;   /* keep each question on its own line */
}
.hero h1 .soft { color: var(--ink-soft); }
.hero .sub {
  font-size: clamp(1.05rem, 2.6vw, 1.25rem); color: var(--ink-soft);
  max-width: 32rem; margin: 0 auto 2rem; line-height: 1.55;
}

/* ---- Composer -----------------------------------------------------------
   The primary action, and it has to read as such at a glance. It sits on the
   same surface tint as several secondary controls, so it is separated by weight
   instead: a heavier border, a deeper shadow, and a ring that appears on hover
   rather than only on focus. */
.composer {
  background: var(--surface); border: 1.5px solid var(--ink-faint);
  border-radius: var(--radius); box-shadow: 0 4px 18px -6px var(--ring), var(--shadow);
  padding: .72rem .72rem .72rem 1.2rem; display: flex; align-items: flex-end; gap: .6rem;
  transition: box-shadow .25s, border-color .25s;
}
.composer:hover { border-color: var(--accent); }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.composer textarea {
  flex: 1; min-width: 0; border: 0; background: transparent; resize: none; color: var(--ink);
  font: inherit; font-size: 1.05rem; line-height: 1.5; padding: .72rem 0; min-height: 3.05rem; max-height: 12rem;
}
.composer textarea::placeholder { color: var(--ink-faint); }
.composer textarea:focus { outline: none; }
.composer .send {
  flex-shrink: 0; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer;
  display: grid; place-items: center; transition: transform .12s, box-shadow .2s, opacity .2s;
}
.composer .send:hover { box-shadow: 0 6px 16px var(--ring); }
.composer .send:disabled { opacity: .4; cursor: default; }
.composer .send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }

.composer-hint {
  text-align: center; color: var(--ink-faint); font-size: .82rem; margin-top: .9rem;
}

/* ---- Example prompts ---------------------------------------------------- */
.prompt-chips {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin-top: 1.8rem;
}
.prompt-chips button {
  font: inherit; font-size: .88rem; cursor: pointer; text-align: left;
  color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--border-soft);
  padding: .5rem .9rem; border-radius: 999px; transition: transform .12s, color .2s, border-color .2s;
}
.prompt-chips button:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }

.trust-row {
  display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center;
  margin: 3.4rem auto 0; max-width: 40rem; color: var(--ink-faint); font-size: .86rem;
}
.trust-row div { display: inline-flex; align-items: center; gap: .45rem; }
.trust-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

@media (max-width: 680px) {
  .hero {
    margin-top: 1.6rem;
    padding-inline: 1rem;
  }
  /* Keep the first screen calm on phones; the remaining prompts are still
     available in the rotating desktop set without crowding the composer. */
  .prompt-chips button:nth-child(n + 4) { display: none; }
  .prompt-chips button { max-width: 100%; }
  .trust-row { gap: .65rem 1.1rem; margin-top: 2.6rem; }
  .composer { padding-left: .95rem; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 2.05rem; }
  .hero .sub { font-size: 1rem; }
  .composer .send { width: 2.7rem; height: 2.7rem; }
  .trust-row { display: grid; justify-items: start; width: max-content; }
}

/* ---- Conversation ------------------------------------------------------- */
.thread { max-width: var(--maxw); margin: 2rem auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.thread-head { margin-bottom: 1.6rem; }
.thread-head a { color: var(--ink-faint); text-decoration: none; font-size: .88rem; }
.thread-head a:hover { color: var(--accent); }
.mode-tag {
  display: inline-block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border-radius: 999px;
  padding: .2rem .6rem; margin-top: .6rem;
}

.turn { margin-bottom: 1.7rem; animation: rise .4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.turn-user .bubble {
  background: var(--accent); color: var(--accent-ink);
  padding: .85rem 1.15rem; border-radius: var(--radius) var(--radius) 4px var(--radius);
  display: inline-block; max-width: 85%; margin-left: auto; box-shadow: var(--shadow);
}
.turn-user { text-align: right; }

.turn-assistant .reflection {
  font-family: var(--serif); font-size: 1.14rem; line-height: 1.62; color: var(--ink);
}
.turn-assistant .reflection p { margin-bottom: .85rem; }

/* ---- Verse cards -------------------------------------------------------- */
.verses { margin-top: 1.2rem; display: grid; gap: .8rem; }
.verse-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--verse-bar);
  border-radius: var(--radius-sm); padding: 1rem 1.15rem; box-shadow: var(--shadow);
}
.verse-card .ref {
  font-family: var(--display-font); font-weight: 640; color: var(--ink);
  font-size: .98rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.verse-card .translation { font-size: .72rem; color: var(--ink-faint); font-weight: 500; letter-spacing: .05em; }
.verse-card blockquote {
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.55; color: var(--ink-soft);
  margin: .5rem 0 0; font-style: italic;
}
.verse-card .why {
  margin-top: .7rem; font-size: .8rem; color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: .4rem;
}
.verse-card .why::before { content: "why this"; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--accent); font-size: .68rem; }

.ungrounded-note {
  margin-top: 1rem; font-size: .86rem; color: var(--ink-faint);
  border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: .7rem .9rem;
}

/* ---- Crisis card -------------------------------------------------------- */
.crisis {
  background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; box-shadow: var(--shadow); margin-top: .6rem;
}
.crisis h3 { font-size: 1rem; margin-bottom: .5rem; color: var(--ink); }
.crisis ul { list-style: none; display: grid; gap: .6rem; margin-top: .8rem; }
.crisis li { display: grid; }
.crisis .res-label { font-weight: 640; color: var(--ink); }
.crisis .res-detail { color: var(--ink-soft); font-size: .92rem; }

/* ---- Source cards (voices from the tradition) --------------------------- */
.sources { margin-top: 1.4rem; display: grid; gap: .7rem; }
.sources-label {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-bottom: -.1rem;
}
.source-card {
  background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
              var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 1rem 1.15rem 0.9rem 2.3rem; position: relative; box-shadow: var(--shadow);
}
.source-card::before {
  content: "\201C"; /* big opening quote */
  position: absolute; left: .5rem; top: .1rem;
  font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--accent); opacity: .55;
}
.source-card blockquote {
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; color: var(--ink);
  font-style: italic; margin: 0;
}
.source-card figcaption {
  margin-top: .6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  font-size: .85rem;
}
.source-card .src-author { font-weight: 640; color: var(--ink); font-style: normal; }
.source-card .src-author::before { content: "— "; color: var(--ink-faint); }
.source-card .src-work { color: var(--ink-soft); font-style: italic; }
.source-card .src-badge {
  font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-faint); border: 1px solid var(--border); border-radius: 999px;
  padding: .08rem .45rem; font-style: normal;
}

/* ---- Community finder --------------------------------------------------- */
.community { margin-top: 1.1rem; display: grid; gap: .9rem; }
.community-links { display: grid; gap: .6rem; }
.community-link {
  display: block; text-decoration: none; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--verse-bar);
  border-radius: var(--radius-sm); padding: .85rem 1.05rem; box-shadow: var(--shadow);
  transition: transform .12s, border-color .2s;
}
.community-link:hover { transform: translateY(-1px); border-color: var(--accent); }
.cl-name { display: block; font-weight: 640; color: var(--ink); }
.cl-note { display: block; margin-top: .2rem; font-size: .88rem; color: var(--ink-soft); }

.community-guide {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: .3rem .95rem;
}
.community-guide summary {
  cursor: pointer; font-weight: 600; color: var(--ink); padding: .55rem 0;
  font-size: .95rem; list-style-position: inside;
}
.community-guide[open] summary { margin-bottom: .3rem; }
.community-guide ul { margin: 0 0 .7rem 1.1rem; display: grid; gap: .4rem; }
.community-guide li { color: var(--ink-soft); font-size: .93rem; line-height: 1.45; }
.community-guide.flags summary { color: var(--accent); }
.flag-foot { color: var(--ink-faint); font-size: .86rem; font-style: italic; margin: 0 0 .6rem; }

/* ---- Follow-up composer at the foot of a thread ------------------------- */
.thread .composer { margin-top: 2rem; }

/* ---- "Go deeper": re-ask the same question in the scholarly register ----
   Quiet by design. It sits under a reflection, so it should read as a door
   left open, not as the thing you were meant to click. */
.go-deeper-form { margin-top: 1rem; }
.go-deeper {
  font: inherit; font-size: .89rem; font-weight: 560; cursor: pointer;
  color: var(--ink-soft); background: transparent;
  border: 1px dashed var(--border); border-radius: 999px;
  padding: .45rem 1rem;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.go-deeper:hover {
  color: var(--accent); border-color: var(--accent); border-style: solid;
  background: var(--accent-soft);
}
.go-deeper:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---- Conversation pages on small screens --------------------------------
   The landing page got its own pass; the thread — where people actually read
   answers — hadn't had one. These are the places it broke at 360-390px. */
@media (max-width: 680px) {
  .thread { margin: 1.4rem auto 2rem; }

  /* The reference and its translation badge sat in a no-wrap flex row with
     space-between, so "1 Thessalonians 5:16-18" + "WEB" overflowed the card. */
  .verse-card .ref { flex-wrap: wrap; gap: .15rem .75rem; }

  /* Reclaim the quote-glyph gutter — 2.3rem is a lot of a 360px screen. */
  .source-card { padding: .95rem 1rem .85rem 1.85rem; }
  .source-card::before { font-size: 2rem; left: .35rem; }

  .turn-user .bubble { max-width: 92%; }
  .verse-card { padding: .9rem 1rem; }
  .crisis { padding: 1.05rem 1.1rem; }

  /* Touch targets. These are all fine with a mouse and too small for a thumb:
     a bare text link is ~20px tall and the guidance is 44. */
  .thread-head a { display: inline-block; padding: .5rem .25rem .5rem 0; }
  .go-deeper { padding: .7rem 1.15rem; font-size: .92rem; }
  .prompt-chips button { padding: .6rem 1rem; }
  .community-guide summary { padding: .8rem 0; }
  .community-link { padding: 1rem 1.05rem; }
}

/* A long unbroken token — a URL in a citation, a hyphenated reference — would
   otherwise push the page sideways. `overflow-x: clip` on body hides that by
   cutting the text off; this wraps it instead, which is what a reader needs. */
.turn-assistant .reflection,
.turn-user .bubble,
.verse-card blockquote,
.verse-card .ref,
.source-card blockquote,
.source-card figcaption,
.crisis .res-detail,
.cl-name, .cl-note {
  overflow-wrap: break-word;
}

/* ---- "See also": the cross-reference apparatus ---------------------------
   Collapsed by default. Someone reading for counsel should see the passage and
   nothing else; someone studying should be one tap from the thread of related
   texts. The corpus is the Treasury of Scripture Knowledge, so the links are
   the ones a concordance would have sent you to. */
.see-also { margin-top: .75rem; border-top: 1px dashed var(--border-soft); padding-top: .55rem; }
.see-also summary {
  cursor: pointer; list-style: none;
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-faint);
  padding: .35rem 0; display: inline-flex; align-items: center; gap: .4rem;
}
.see-also summary::-webkit-details-marker { display: none; }
.see-also summary::after { content: "▾"; font-size: .7rem; transition: transform .18s ease; }
.see-also[open] summary::after { transform: rotate(180deg); }
.see-also summary:hover { color: var(--accent); }
.see-also .count {
  font-size: .68rem; color: var(--ink-faint);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 0 .38rem; letter-spacing: 0;
}
.see-also ol { list-style: none; margin: .35rem 0 .3rem; display: grid; gap: .5rem; }
.see-also li { font-size: .9rem; line-height: 1.45; }
.see-also .xref-ref {
  font-family: var(--display-font); font-weight: 640; color: var(--accent);
  margin-right: .45rem; white-space: nowrap;
}
.see-also .xref-text { color: var(--ink-soft); overflow-wrap: break-word; }

@media (max-width: 680px) {
  .see-also summary { padding: .55rem 0; }
}

/* ---- The original-language layer ----------------------------------------
   Collapsed like "see also": a reader wants the passage, a scholar wants the
   receipts. The gloss is a table in spirit but a list in fact, because a table
   at 390px is a horizontal scrollbar waiting to happen. */
.original { margin-top: .7rem; border-top: 1px dashed var(--border-soft); padding-top: .55rem; }
.original summary {
  cursor: pointer; list-style: none;
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-faint);
  padding: .35rem 0; display: inline-flex; align-items: center; gap: .45rem;
}
.original summary::-webkit-details-marker { display: none; }
.original summary::after { content: "▾"; font-size: .7rem; transition: transform .18s ease; }
.original[open] summary::after { transform: rotate(180deg); }
.original summary:hover { color: var(--accent); }
.original .edition {
  font-size: .68rem; letter-spacing: 0; text-transform: none; color: var(--ink-faint);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 0 .38rem;
}
.original-text {
  font-family: var(--serif); font-size: 1.08rem; line-height: 1.7; color: var(--ink);
  margin: .35rem 0 .6rem; overflow-wrap: break-word;
}
.gloss { list-style: none; display: grid; gap: .3rem; margin: 0 0 .55rem; }
.gloss li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem;
  font-size: .84rem; padding-bottom: .25rem; border-bottom: 1px solid var(--border-soft);
}
.g-surface { font-family: var(--serif); color: var(--ink); font-size: .96rem; }
.g-lemma   { font-family: var(--serif); color: var(--accent); }
.g-parsed  { color: var(--ink-faint); font-size: .78rem; }
.g-strongs { color: var(--ink-faint); font-size: .72rem; margin-left: auto; }
.original-note { font-size: .78rem; color: var(--ink-faint); font-style: italic; margin: 0; }

@media (max-width: 680px) {
  .original summary { padding: .55rem 0; }
  .g-strongs { margin-left: 0; }
}

/* ---- The folio ----------------------------------------------------------
   A page of the Biblia latina printed at Strasbourg in 1481, its text block
   ringed by the Glossa ordinaria — which is what this whole tool is: the
   passage, and the centuries of argument written around it. Public domain.

   Loaded only from 900px up. A 492 KB decoration has no business on a phone,
   and because the rule lives inside the media query the file is never even
   requested there — the paper grain carries the small screens on its own.

   The left edge dissolves into the page rather than ending in a rectangle, and
   each skin sets its own tint and weight: parchment wants warming, Nocturne
   wants inverting, or a lit page floats on a near-black ground. */
@media (min-width: 900px) {
  .hero::after {
    content: ""; position: absolute; z-index: -2; pointer-events: none;
    top: -2rem; bottom: -2rem; right: clamp(-10rem, -6vw, -3rem);
    width: min(24rem, 30vw);
    background: url("/folio.jpg") right top / cover no-repeat;
    opacity: var(--folio-opacity);
    filter: var(--folio-filter);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 58%, #000 100%);
            mask-image: linear-gradient(to right, transparent, #000 58%, #000 100%);
  }
}


/* ---- Pending state -------------------------------------------------------
   An answer takes several seconds: retrieval, the model, then citation
   validation that can reject and regenerate. A full page POST gives no signal
   at all in that window, so people conclude it's broken and submit again. */
.composer .send-spinner { display: none; }
.composer.is-pending .send-arrow { display: none; }
.composer.is-pending .send-spinner { display: block; }
.composer.is-pending .send { opacity: 1; cursor: progress; }
.composer.is-pending { border-color: var(--accent); }
.composer.is-pending textarea { color: var(--ink-soft); }

.send-spinner circle {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 44; stroke-dashoffset: 34;
  transform-origin: 50% 50%; animation: send-spin .9s linear infinite;
}
@keyframes send-spin { to { transform: rotate(360deg); } }

.composer-status {
  margin-top: .7rem; text-align: center;
  font-size: .86rem; color: var(--ink-faint);
}

/* A reader who asked for less motion still needs the state, just not the spin. */
@media (prefers-reduced-motion: reduce) {
  .send-spinner circle { animation: none; stroke-dashoffset: 0; opacity: .55; }
}

/* Chips that already have an answer behind them are links, not buttons — they
   must be indistinguishable from the ones that aren't. */
.prompt-chips .chip {
  font: inherit; font-size: .88rem; cursor: pointer; text-align: left; text-decoration: none;
  color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--border-soft);
  padding: .5rem .9rem; border-radius: 999px; transition: transform .12s, color .2s, border-color .2s;
}
.prompt-chips .chip:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }
@media (max-width: 680px) { .prompt-chips .chip { padding: .6rem 1rem; } }

.sample-note {
  margin: 2rem 0 -.6rem; text-align: center;
  font-size: .84rem; color: var(--ink-faint); font-style: italic;
}

/* A degraded answer: composed mechanically because the model call failed. It
   has to look unlike an answer, or it is one — the whole promise of the tool is
   that manufactured prose is never passed off as reasoning. */
.reflection p.notice {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: .75rem 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink);
  font-size: .93rem;
}