/* Catholicism, for and against: a hub and one page per question. Tokens only (assets/css/tokens.css).
   Sides are named in words, never by colour: blue and yellow are the balance's option colours on this
   site and would say one side wins. Both cases sit on paper in ink; the one night surface is Scripture's. */

/* ---------- The hub: search, then the map of questions ---------- */
.find { max-width: var(--measure); }
.find label { display: block; margin-bottom: var(--s2); font-weight: 650; }
.find input[type="search"] { width: 100%; min-height: 52px; padding: 0 var(--s4); border: var(--bw-strong) solid var(--ink); border-radius: var(--r-control); background: var(--paper); color: var(--ink); font-size: var(--fs-body); -webkit-appearance: none; appearance: none; }
.find input::placeholder { color: var(--ink-2); }
.find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* Which kind of thing to look through. A pressed state is ink on paper plus a rule, not a coloured slab. */
.kinds { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: var(--s3) 0 0; padding: 0; border: 0; }
.kinds legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kinds label { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); cursor: pointer; border-bottom: 2px solid transparent; }
.kinds input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.kinds label:has(input:checked) { color: var(--ink); border-bottom-color: var(--ink); }
.hits { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: var(--bw) solid var(--ink); }
.hits[hidden] { display: none; }
.hits li { margin: 0; border-bottom: var(--bw) solid var(--hair); }
.hits a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--s4); align-items: baseline; min-height: 48px; padding: var(--s3) 0; color: var(--ink); text-decoration: none; }
.hits a:hover .hit-t, .hits a:focus-visible .hit-t { text-decoration: underline; text-underline-offset: 0.2em; }
.hit-k { font-size: var(--fs-meta); font-weight: 650; color: var(--ink-2); }
.hit-t { font-weight: 650; line-height: 1.3; }
.hit-w { display: block; margin-top: var(--s1); font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }
.hits .none { padding: var(--s3) 0; color: var(--ink-2); font-size: var(--fs-small); }
.find-say { margin: var(--s3) 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.find-say:empty { display: none; }
@media (max-width: 640px) { .hits a { grid-template-columns: 1fr; row-gap: var(--s1); } }

/* The map: ruled rows of plain questions, each with its points drawn as squares. A square is a link to its point.
   The three kinds differ by fill (solid, hatched, open), never by colour, so they read the same in print, in
   evening, and to a colour-blind reader. */
.map { list-style: none; margin: 0; padding: 0; border-top: var(--bw-strong) solid var(--ink); }
.map-row { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; column-gap: var(--s5); align-items: center; margin: 0; padding: var(--s2) 0; border-bottom: var(--bw) solid var(--hair); }
.map-link { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: var(--s5); align-items: baseline; min-height: 44px; padding: var(--s2) 0; color: var(--ink); text-decoration: none; }
.map-link:hover .map-t, .map-link:focus-visible .map-t { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
.map-t { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.map-q { font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
.tally { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); line-height: 1.35; color: var(--ink-2); }
.tally li { margin: 0; white-space: nowrap; }
.tally b { display: inline-block; min-width: 1.4em; color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.map-n { font-size: var(--fs-meta); font-weight: 650; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .map-row { grid-template-columns: 1fr; padding-bottom: var(--s3); }
  .map-link { grid-template-columns: 1fr; }
  .map-q { margin-top: var(--s1); }
}

/* What the text lets us conclude: numbered because each builds on the one before. */
.conclusions { max-width: var(--measure); margin: 0; padding-left: 1.4em; }
.conclusions li { margin: 0 0 var(--s4); line-height: 1.55; }
.conclusions li::marker { font-weight: 800; }
.conclusions b { font-weight: 760; }

/* The hub's own words: the point, how to read, our biases. */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s6); margin-top: var(--s5); }
.how h3 { margin: 0 0 var(--s2); font-size: 1.125rem; }
.how p { margin: 0; font-size: var(--fs-small); line-height: 1.5; }
@media (max-width: 860px) { .how { grid-template-columns: 1fr; } }
.bias { max-width: var(--measure); margin-top: var(--s5); padding-top: var(--s4); border-top: var(--bw) solid var(--ink); font-size: var(--fs-small); color: var(--ink-2); }
.bias b { color: var(--ink); }

/* ---------- A question page ---------- */
.q-head .dek { max-width: 42rem; }
/* The pages of the section, under the question. The current one is marked in words and weight. */
.onpage a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 760; }
.intro { max-width: var(--measure); }
.intro p { margin: 0 0 var(--s4); }

/* The passage the question turns on: Scripture's night surface, with the two readings under it. */
.turns .verse { margin-bottom: var(--s4); }
.turns .verse p { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.3; }
.readings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); margin-top: var(--s5); }
.reading { margin: 0; }
.reading button { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 var(--s2); padding: 0; border: 0; border-bottom: 2px solid var(--night-ink-2); background: none; color: var(--night-ink); font-size: var(--fs-small); font-weight: 700; cursor: pointer; }
.reading button[aria-pressed="true"] { border-bottom-color: var(--yellow); }
.reading p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--night-ink-2); }
.reading-say { margin: var(--s3) 0 0; font-size: var(--fs-meta); color: var(--night-ink-2); }
@media (max-width: 640px) { .readings { grid-template-columns: 1fr; } }
/* The words a side leans on, when a reading is pressed: the lamp behind them. The text itself never changes. */
mark.lean { background: var(--yellow); color: var(--on-yellow); padding: 0 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.night mark.lean { background: var(--yellow); color: var(--on-yellow); }

/* The points on this page, as a numbered list to jump from: a long page is one question, and this is its map. */
.jump { margin: 0 0 var(--s6); max-width: var(--measure); }
.jump ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: var(--s6); }
.jump li { margin: 0 0 var(--s1); break-inside: avoid; font-size: var(--fs-small); line-height: 1.4; }
.jump a { color: var(--blue); }
.point[id] { scroll-margin-top: var(--s4); }
@media (max-width: 640px) { .jump ol { columns: 1; } }

/* One block per point: the title, the passage, where the text lands, then the two readings side by side. */
.point { padding: var(--s6) 0 var(--s5); border-top: var(--bw-strong) solid var(--ink); }
.point:first-of-type { border-top: 0; padding-top: var(--s3); }
.point > h3 { margin: 0 0 var(--s4); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 820; letter-spacing: -0.015em; line-height: 1.15; }
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s7); }
.case { min-width: 0; }
.case h4 { margin: 0 0 var(--s2); font-size: var(--fs-small); font-weight: 760; }
.case > p { margin: 0 0 var(--s3); font-size: var(--fs-small); line-height: 1.55; }
/* A quoted sentence: hanging quote mark, who said it and where, as a link to that page. */
.said { margin: var(--s3) 0 0; padding: 0; }
.said p { margin: 0; font-size: var(--fs-body); line-height: 1.5; font-weight: 500; hanging-punctuation: first; text-wrap: pretty; }
.said cite { display: block; margin-top: var(--s2); font-style: normal; font-size: var(--fs-meta); line-height: 1.45; color: var(--ink-2); }
.said cite a { color: var(--blue); }
.both { max-width: var(--measure); }
.both h4 { margin: 0 0 var(--s2); font-size: var(--fs-small); font-weight: 760; }
.both > p { margin: 0 0 var(--s3); font-size: var(--fs-small); line-height: 1.55; }
@media (max-width: 760px) { .cases { grid-template-columns: 1fr; gap: var(--s5); } }

/* The passage under a point, on paper, in Scripture's face, with the verse's own rule. */
.passages { margin-top: var(--s5); display: grid; gap: var(--s4); }
.passages .verse { margin: 0; padding-left: var(--s4); border-left: var(--bw-strong) solid var(--ink); }
.passages .verse p { font-size: 1.25rem; line-height: 1.45; }
.passages .verse .in-context { max-width: none; }

/* Where the text lands: said in words, one weight for all four verdicts. */
.stands { margin: var(--s4) 0 0; max-width: var(--measure); font-size: var(--fs-small); line-height: 1.55; }
.stands b { font-weight: 760; }

/* Watch: one from each side; the side is named in the caption. */
.side-of { font-weight: 650; color: var(--ink); }

/* Sources: every page a quote came from, dated. */
.sources { list-style: none; margin: 0; padding: 0; border-top: var(--bw) solid var(--ink); max-width: 60rem; }
.sources li { margin: 0; padding: var(--s3) 0; border-bottom: var(--bw) solid var(--hair); font-size: var(--fs-small); line-height: 1.45; }
.sources .src-side { display: inline-block; min-width: 6.5rem; font-weight: 650; color: var(--ink-2); font-size: var(--fs-meta); }
.sources .src-date { color: var(--ink-2); font-size: var(--fs-meta); }

/* ---------- The FAQ page ---------- */
.faq-list { margin: 0; padding: 0; }
.faq { padding: var(--s5) 0; border-top: var(--bw-strong) solid var(--ink); }
.faq:first-of-type { border-top: 0; padding-top: var(--s3); }
.faq h3 { margin: 0 0 var(--s3); font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.faq .cases { gap: var(--s4) var(--s7); }
.faq .case p { margin: 0; }
.faq .case a { color: var(--blue); }
.faq .goto { margin: var(--s3) 0 0; font-size: var(--fs-small); }

/* ---------- Prev and next (the section's own, since this is not a room) ---------- */
.q-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); margin-top: var(--s4); padding-block: var(--s5) var(--s8); border-top: var(--bw-strong) solid var(--ink); }
.q-nav a { display: inline-flex; flex-direction: column; min-height: 44px; justify-content: center; color: var(--ink); text-decoration: none; }
.q-nav .k { font-size: var(--fs-meta); font-weight: 650; color: var(--ink-2); }
.q-nav .n { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.q-nav a:hover .n, .q-nav a:focus-visible .n { text-decoration: underline; text-underline-offset: 0.2em; }
.q-nav .to-next { text-align: right; align-items: flex-end; margin-left: auto; }

/* ---------- Practice beside the text: one scale, the same for every row ---------- */
.key { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); list-style: none; margin: var(--s4) 0; padding: 0; font-size: var(--fs-small); font-weight: 600; }
.key li { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.key .mk { position: static; transform: none; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--s5); margin: var(--s4) 0 0; max-width: 60rem; }
.steps dt { font-weight: 760; font-size: var(--fs-small); }
.steps dd { margin: var(--s1) 0 0; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
@media (max-width: 760px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The marks: holders a filled dot, critics a ring, both a dot inside a ring. Shape, never colour. */
.mk { position: absolute; z-index: 2; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); box-sizing: border-box; display: inline-block; }
.mk-h { background: var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.mk-c { background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.mk-b { width: 22px; height: 22px; background: var(--ink); border: 4px solid var(--paper); box-shadow: 0 0 0 2px var(--ink); }

.cmp-group + .cmp-group { margin-top: var(--s7); }
#chart h3 { margin: 0 0 var(--s1); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 820; }
#chart h3 + .sum-say { margin-bottom: var(--s3); }

/* The scale's names sit over every group and stay in view while its rows scroll past. */
.cmp-head { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s6); padding: var(--s2) 0; background: var(--paper); border-bottom: var(--bw-strong) solid var(--ink); }
.cmp-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmp-scale span { text-align: center; font-size: var(--fs-meta); font-weight: 760; }
.cmp { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.cmp li { margin: 0; border-bottom: var(--bw) solid var(--hair); }
.row > summary { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s6); align-items: center; min-height: 56px; padding: var(--s2) 0; cursor: pointer; list-style: none; }
.row > summary::-webkit-details-marker { display: none; }
.row-t { display: flex; flex-direction: column; gap: 2px; }
.row-n { font-weight: 700; line-height: 1.3; }
.row-w { font-size: var(--fs-meta); color: var(--ink-2); }
.row-w::after { content: "  Open for reasons"; color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; white-space: pre; }
.row[open] .row-w::after { content: "  Close"; }
.row > summary:hover .row-n { text-decoration: underline; text-underline-offset: 0.2em; }
/* The track: a hairline with four stops; the marks sit on the stops. */
.track { position: relative; display: block; height: 32px; }
.track::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 50%; border-top: var(--bw) solid var(--hair); }
.track::after { content: ""; position: absolute; inset: 11px 12.5%; background: linear-gradient(var(--hair), var(--hair)) 0 0 / 1px 100% no-repeat, linear-gradient(var(--hair), var(--hair)) 33.33% 0 / 1px 100% no-repeat, linear-gradient(var(--hair), var(--hair)) 66.66% 0 / 1px 100% no-repeat, linear-gradient(var(--hair), var(--hair)) 100% 0 / 1px 100% no-repeat; }
.span-line { position: absolute; z-index: 1; top: 50%; height: 0; border-top: 3px solid var(--ink); transform: translateY(-50%); }
.row-b { padding: 0 0 var(--s4); max-width: var(--measure); }
.row-b p { margin: 0 0 var(--s2); font-size: var(--fs-small); line-height: 1.5; }
.row-b b { font-weight: 700; }
.row-refs { color: var(--ink-2); }
.row:target > summary, .row[open] > summary { background: var(--paper-2); }
@media (max-width: 640px) {
  .cmp-head, .row > summary { grid-template-columns: 1fr; }
  .cmp-head > span:first-child { display: none; }
  .row > summary { row-gap: var(--s1); }
}

/* ---------- The strongest voices: one ruled entry each, never a card ---------- */
.voices { list-style: none; margin: 0; padding: 0; border-top: var(--bw-strong) solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); }
.voice { margin: 0; padding: var(--s4) 0 var(--s5); border-bottom: var(--bw) solid var(--hair); }
.voice h4 { margin: 0 0 var(--s1); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.voice-post { margin: 0 0 var(--s2); font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.voice-why { margin: 0 0 var(--s2); font-size: var(--fs-small); line-height: 1.5; }
.voice .said p { font-size: 1.0625rem; }
.voice-go { margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: 1.5; }
.voice:target { background: var(--paper-2); }
@media (max-width: 760px) { .voices { grid-template-columns: 1fr; } }
.praise { margin: 0 0 var(--s3); padding-left: 1.2em; max-width: var(--measure); }
.praise li { margin: 0 0 var(--s2); line-height: 1.5; }

/* ---------- Bible first (2026-10-25): passage, then verdict, then the readings ---------- */
.point > .passages { margin: 0 0 var(--s4); }
.point > .passages-more { margin: calc(-1 * var(--s2)) 0 var(--s4); max-width: none; }
.passages-more > .passages { display: grid; gap: var(--s3); margin: var(--s2) 0 0; }
.point > .stands { margin: 0 0 var(--s5); padding: var(--s3) 0; border-top: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--hair); font-size: var(--fs-body); }
.point > .stands b { display: block; margin-bottom: var(--s1); font-size: var(--fs-small); font-weight: 800; }
.faq .goto { margin: 0 0 var(--s3); }

/* ---------- What Mary is called ---------- */
/* Two words defined before the titles. */
.defs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s4); max-width: var(--measure); margin: var(--s4) 0 0; padding: var(--s3) 0 0; border-top: var(--bw) solid var(--hair); line-height: 1.5; }
.defs dt { font-weight: 800; }
.defs dd { margin: 0; }
/* One row per title, opening where it sits. The summary is the row; the column heads sit above on wide screens. */
.title-head, .title-entry > summary { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 1fr) 3.5em; gap: var(--s4); align-items: start; }
.title-head { padding: var(--s2) 0; font-size: var(--fs-small); font-weight: 800; color: var(--ink-2); border-bottom: var(--bw-strong) solid var(--ink); }
.title-entry { margin: 0; border-top: 0; }
.title-entry > summary { padding: var(--s3) 0; font-weight: 400; line-height: 1.45; }
.title-entry > summary::after { justify-self: end; }
.title-entry .tt { font-size: 1.125rem; font-weight: 700; }
.title-entry .tc { font-size: var(--fs-small); }
.title-entry[open] > summary { border-bottom: var(--bw) solid var(--hair); }
.title-open { padding: var(--s4) 0 var(--s5); }
.title-open .passages { display: grid; gap: var(--s3); margin: 0 0 var(--s4); }
.title-open .passages .verse, #holy .passages .verse { margin: 0; padding-left: var(--s4); border-left: var(--bw-strong) solid var(--ink); }
.title-open .passages .verse p, #holy .passages .verse p { font-size: 1.25rem; line-height: 1.45; }
#holy .passages { display: grid; gap: var(--s4); margin: 0 0 var(--s4); }
#holy .stands, .title-open .stands { max-width: var(--measure); margin: 0 0 var(--s4); padding: var(--s3) 0; border-top: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--hair); }
#holy .stands b, .title-open .stands b { display: block; margin-bottom: var(--s1); font-size: var(--fs-small); font-weight: 800; }
.title-from { margin: 0 0 var(--s4); line-height: 1.5; max-width: var(--measure); }
.means { max-width: var(--measure); margin: 0 0 var(--s5); }
.means dt { font-weight: 800; margin-top: var(--s3); }
.means dd { margin: var(--s1) 0 0; line-height: 1.55; }
.title-entry:target > summary { background: var(--paper-2); }
.title-open > .cases { max-width: none; }

/* Phones: the column heads go, and each cell in a row shows its own label. */
@media (max-width: 760px) {
  .defs { grid-template-columns: 1fr; gap: 0; }
  .defs dd { margin-bottom: var(--s3); }
  .title-head { display: none; }
  .title-entry > summary { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); }
  .title-entry .tt { grid-column: 1; grid-row: 1; }
  .title-entry > summary::after { grid-column: 2; grid-row: 1; }
  .title-entry .tc { grid-column: 1 / -1; }
  .title-entry .tc::before { content: attr(data-label) ": " / ""; font-weight: 700; color: var(--ink-2); }
}