/* COMMENTARY AND RECEPTION BESIDE THE TEXT (2026-10-18; default on the Scripture page 10-19). The site's own monochrome register:
   Source Serif, ink on the grey ground, white paper for the rail; one tint marks the verse the rail follows. */
:root {
  --cp-ink: var(--fg, #1C1C1A);
  --cp-muted: var(--muted, #5A5A56);
  --cp-paper: var(--card, #FFFFFF);
  --cp-ground: var(--bg, #F0F0ED);
  --cp-rule: var(--border, #D6D6D0);
  --cp-mark: #E7E4D9;
  --cp-hit: #F3EED9;
  --cp-faint: var(--faint, #83837E);
  --cp-heat: var(--fg, #1C1C1A);
 --cp-sheet: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="sepia"]) { --cp-rule: #3A3A36; --cp-mark: #2E2C26; --cp-hit: #353020; --cp-sheet: #1F1E1B; }
}
:root[data-theme="dark"] { --cp-rule: #3A3A36; --cp-mark: #2E2C26; --cp-hit: #353020; --cp-sheet: #1F1E1B; }

/* the reader's own rule is .scripture-reader-layout:has(…) (0,3,0): these outrank it while the pane is open */
html body.cp-on main .scripture-reader-layout:has(.cp-pane) {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(420px, 1.2fr);
  gap: 36px;
  align-items: start;
}
html body.cp-on main.scripture-page:has(.cp-pane) { max-width: min(1400px, 100%) !important; }
body.cp-on .scripture-verse-summary { display: none; }
body.cp-on.cp-src .scripture-verse-summary { display: block; }
body.cp-on.cp-src .cp-pane { display: none; }

/* ── The rail, set like the Citations view (10-19, owner: "design wise, it should be like the citation") ──
   Small label over a large heading, thin-ruled rows, italic work titles over a muted author and century line, the body face
   throughout (no display face on a working surface), no pill, and no box inside the rail that scrolls: the rail takes the height
   its content takes and the page scrolls (the phone sheet scrolls as a whole). The values are the Citations view's own
   (.sd-eyebrow, .sd-panel-ref, .sd-h3, .sd-ov-stat, .sd-ov-comm-row in scripture-dev.css and port/dev-notes.css). */
.cp-pane {
  --cp-accent: var(--sd-accent, var(--cp-ink));
  /* in the page's flow, like the Citations view beside it (which the reader leaves unsticky, 2026-09-23: "the side panel doesn't need
     to be sticky"); a rail that sticks and is taller than the window cannot be read to its end without a box that scrolls on its own */
  position: relative;
  color: var(--cp-ink);
  /* the page's hero and chapter heading are centered and that is inherited here: every row in the pane reads left to right */
  text-align: left;
  font-family: "Source Serif Pro", Palatino, Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--cp-paper);
  border: 1px solid var(--cp-rule);
  padding: 18px 20px 24px;
}
.cp-pane button { font: inherit; color: inherit; }
.cp-pane :focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }

.cp-tabs { display: flex; gap: 0; margin: 0 0 16px; border-bottom: 1px solid var(--cp-rule); }
/* One face, one weight, every state. The row is also cloned into the Citations sidebar, outside .cp-pane, where the pane's
   "button { font: inherit }" does not reach: the clone fell back to the browser's button face, and the pressed tab was set at 600,
   a weight the site's Source Serif is not loaded in, so it drew a different, wider face and moved the row. The face and weight are
   stated on the button itself, the pressed tab is shown by colour and the underline alone, and nothing about it changes width. */
.cp-tabs button, .cp-tabs button:hover, .cp-tabs button:focus, .cp-tabs button:focus-visible, .cp-tabs button[aria-pressed="true"] {
  font-family: var(--font-body, "Source Serif Pro", Palatino, Georgia, serif); font-size: 15px; font-weight: 400; font-style: normal;
  font-variation-settings: normal; font-synthesis: none; letter-spacing: 0; text-transform: none; line-height: 1.3;
}
.cp-tabs button {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 6px; background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--cp-muted); cursor: pointer; text-align: center;
}
.cp-tabs button:hover { color: var(--cp-ink); }
.cp-tabs button[aria-pressed="true"] { color: var(--cp-ink); border-bottom-color: var(--cp-accent); }
.scripture-verse-summary > .cp-tabs, .sd-side > .cp-tabs { margin: 0 0 16px; }
.cp-pane[data-tab="r"] .cp-head, .cp-pane[data-tab="r"] .cp-where, .cp-pane[data-tab="r"] .cp-body, .cp-pane[data-tab="r"] .cp-foot { display: none; }
.cp-pane:not([data-tab="r"]) .cp-rec { display: none; }
.cp-pane[data-tab="r"] .cp-creeds { display: none; }

/* the label and the large heading, as the Citations view's "THIS CHAPTER IN THE LIBRARY / Genesis 1" */
.cp-top { margin: 0 0 14px; }
/* Close: the Citations panel's own control (.sd-close), in the same place, top right of the head */
html.cp-site-mo .cp-top { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: start; }
html.cp-site-mo .cp-top > .cp-eyebrow, html.cp-site-mo .cp-top > .cp-ref { grid-column: 1; }
.cp-pane button.cp-close { grid-column: 2; grid-row: 1 / span 2; align-self: start; font-family: var(--font-body, inherit); font-size: 12px; font-weight: 600; color: var(--tfr-btn, var(--color-dark)); }
.cp-pane button.cp-close:hover, .cp-pane button.cp-close:focus-visible { color: var(--tfr-btn-ink, var(--color-white, #fff)); }
.cp-pane button.cp-close[hidden] { display: none; }
.cp-eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cp-accent); }
.cp-ref { margin: 2px 0 0; font-family: inherit; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: 0; text-transform: none; font-style: normal; color: var(--cp-ink); }

/* the commentary chosen: one row, as a commentary is listed in the Citations view; Change opens the others in place */
.cp-head { margin: 0 0 4px; }
.cp-cur { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--cp-rule); border-bottom: 1px solid var(--cp-rule); }
.cp-cur-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-what { font-size: 14px; font-style: italic; line-height: 1.35; }
.cp-who { font-size: 12.5px; color: var(--cp-muted); }
.cp-pick { flex: none; min-height: 44px; padding: 0 2px; background: none; border: 0; font-size: 14px; color: var(--cp-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cp-list { margin: 0 0 6px; padding: 0; list-style: none; }
/* The key works of the chapter, one click away (2026-10-19): the four first on the book, a rule, the two first on the whole Bible. */
.cp-keys { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 2px; }
.cp-keys-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cp-keys-lab { flex: none; margin-right: 2px; font-size: 0.8125rem; color: var(--cp-muted, #6b6b6b); }
.cp-keys:empty { display: none; }
.cp-key { padding: 3px 10px; border: 1px solid var(--cp-rule); border-radius: 999px; background: transparent; color: var(--cp-ink); font: inherit; font-size: 12.5px; line-height: 1.4; cursor: pointer; }
.cp-key:hover { border-color: var(--cp-ink); }
.cp-key[aria-pressed="true"] { background: var(--cp-ink); border-color: var(--cp-ink); color: var(--cp-paper); }
.cp-key:focus-visible { outline: 2px solid var(--cp-ink); outline-offset: 2px; }
.cp-keys-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--cp-rule); }
.cp-li-h { margin: 12px 0 4px; font-size: 13px; font-weight: 600; color: var(--cp-ink); }
.cp-list .cp-row-li { border-bottom: 1px solid var(--cp-rule); }
.cp-list .cp-li-h + .cp-row-li { border-top: 1px solid var(--cp-rule); }
.cp-list .cp-row[aria-pressed="true"] .cp-row-t { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cp-accent); }
/* an author's other works on the chapter, beneath his row and inside its rule (10-19) */
.cp-list .cp-row-li:has(+ .cp-row-sub) { border-bottom: 0; }
.cp-list .cp-row-sub .cp-row { min-height: 0; padding: 0 2px 9px 18px; }
/* the sub rows keep the 44px touch target on a phone (they were 26px) */
@media (max-width: 640px) { .cp-list .cp-row-sub .cp-row { min-height: 44px; padding: 9px 2px 9px 18px; } }
.cp-list .cp-li-more { border-bottom: 0; }
.cp-more-btn { min-height: 44px; padding: 9px 2px; background: none; border: 0; color: var(--cp-muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cp-more-btn:hover, .cp-more-btn:focus-visible { color: var(--cp-accent); }
.cp-list .cp-row-sub .cp-row-t { font-size: 13px; }

/* a row: an italic work title over a muted line (author, century, page) */
.cp-rows, .cp-eras, .cp-top-list { margin: 0 0 6px; padding: 0; list-style: none; }
.cp-rows { border-top: 1px solid var(--cp-rule); }
.cp-row-li { border-bottom: 1px solid var(--cp-rule); }
.cp-rows > .cp-row-li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.cp-row { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 44px; padding: 9px 2px; text-align: left; background: none; border: 0; cursor: pointer; }
.cp-row-t { font-size: 14px; font-style: italic; line-height: 1.35; color: var(--cp-ink); }
.cp-row-m { font-size: 12.5px; color: var(--cp-muted); }
.cp-row:hover .cp-row-t, .cp-row:focus-visible .cp-row-t, a.cp-row-t:hover { color: var(--cp-accent); text-decoration: underline; text-underline-offset: 3px; }
.cp-row-pg { font-size: 12.5px; color: var(--cp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-wit { display: flex !important; flex-direction: column; gap: 2px; padding: 9px 2px; }
.cp-wit[hidden] { display: none !important; }
a.cp-row-t { text-decoration: none; }
.cp-w-g { font-size: 13px; line-height: 1.45; color: var(--cp-muted); max-width: 62ch; }

/* English or the source text: one control of two segments, the chosen one inked (10-21) */
.cp-lang { display: inline-flex; align-items: stretch; width: max-content; margin: 8px 0 0; border: 1px solid var(--cp-rule); border-radius: 3px; overflow: hidden; font-size: 13px; }
.cp-lang[hidden] { display: none; }
.cp-lang button { min-width: 4.6em; min-height: 32px; padding: 0 12px; background: none; border: 0; font-size: 13px; color: var(--cp-muted); cursor: pointer; }
.cp-lang button + button { border-left: 1px solid var(--cp-rule); }
.cp-lang button:hover:not([aria-pressed="true"]) { color: var(--cp-ink); background: var(--cp-ground); }
.cp-lang button[aria-pressed="true"] { background: var(--cp-ink); color: var(--cp-paper); }
.cp-pane .cp-lang button:focus-visible { outline-offset: -3px; }
@media (pointer: coarse) { .cp-lang button { min-height: 44px; } }

/* the directory of every commentary on the chapter (scripture-verse-rail.css), in the rail's flow: the rail has no box that scrolls,
   so the find box stays where it is rather than sticking to the window under the masthead (10-21) */
.cp-list .vr-dir { margin: 2px 0 10px; }
.cp-list .vr-dir-find { position: static; padding: 8px 0; }
/* the rail's paper and ground are one cream here: a work's preview is set on a white sheet with a hairline, so it reads as the work's
   page and not as the list */
html.cp-site-mo .vr-e-box { background: var(--cp-sheet, #fff); border: 1px solid var(--cp-rule); border-radius: 3px; }
html.cp-site-mo .vr-dir-find input { background: var(--cp-sheet, #fff); }

.cp-where { margin: 10px 0 16px; padding: 0 0 10px; font-size: 13px; color: var(--cp-muted); border-bottom: 1px solid var(--cp-rule); }
.cp-where .cp-pg { font-variant-numeric: tabular-nums; }
.cp-where a { color: var(--cp-accent); text-decoration: underline; text-underline-offset: 3px; }
/* the way to the reader keeps its separator with it when the line wraps (10-21) */
.cp-where .cp-go { white-space: nowrap; }

/* the commentary's own words: in the page's flow, so the page scrolls and there is no second scrollbar */
.cp-body { font-size: 16px; line-height: 1.62; }
.cp-body p { margin: 0 0 0.8em; max-width: 68ch; }
.cp-body .cp-hit, .cp-body .cp-hit-on { background: var(--cp-hit); margin-left: -10px; margin-right: -10px; padding: 6px 10px; }
.cp-body .cp-hit:has(+ .cp-hit-on), .cp-body .cp-hit-on:has(+ .cp-hit-on) { margin-bottom: 0; padding-bottom: 0.8em; }
.cp-body.cp-loading { opacity: 0.45; transition: opacity 0.2s ease-out; }
.cp-break { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--cp-muted); font-size: 12.5px; }
.cp-break::before, .cp-break::after { content: ""; flex: 1; height: 1px; background: var(--cp-rule); }
.cp-empty { color: var(--cp-muted); font-style: italic; }
.cp-body abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.cp-body .cp-h { margin: 1.1em 0 0.5em; font-weight: 600; font-size: 15px; }
.cp-sig { margin: -2px 0 14px; font-size: 13px; color: var(--cp-muted); }
.cp-index { margin: 0 0 14px; font-size: 13px; color: var(--cp-muted); line-height: 1.7; }
.cp-index a { color: var(--cp-ink); text-decoration-color: var(--cp-rule); }
.cp-crit { scroll-margin-top: 8px; padding: 4px 0 10px; border-bottom: 1px solid var(--cp-rule); margin-bottom: 12px; }
.cp-crit:last-child { border-bottom: 0; }
.cp-crit h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.cp-crit h4 a { font-weight: 400; font-size: 12.5px; color: var(--cp-muted); font-variant-numeric: tabular-nums; }
.cp-crit p { margin: 0; }
.cp-expand, .cp-more { display: block; min-height: 44px; margin: 0; padding: 0 2px; background: none; border: 0; font-size: 14px; color: var(--cp-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cp-fold[hidden] { display: none; }
.cp-app { margin: 14px 0; color: var(--cp-muted); font-size: 13px; }
.cp-app > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--cp-muted); text-decoration: underline; text-underline-offset: 3px; }
.cp-app > p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }

.cp-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--cp-rule); font-size: 14px; }
.cp-follow { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.cp-pages { display: inline-flex; gap: 14px; }
.cp-pages button { min-height: 44px; padding: 0 2px; background: none; border: 0; font-size: 14px; color: var(--cp-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── Reception: the verse's history from the pages ── */
.cp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
.cp-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 10px; background: var(--cp-sheet, #fff); border: 1px solid var(--cp-rule); border-radius: 3px; }
.cp-stat b { font-size: 24px; line-height: 1.1; font-weight: 500; font-variant-numeric: tabular-nums; }
.cp-stat span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-muted); }
.cp-lede { margin: 0 0 14px; font-size: 13px; color: var(--cp-muted); }
.cp-h3 { margin: 26px 0 8px; padding-bottom: 6px; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; font-style: normal; color: var(--cp-muted); border-bottom: 1px solid var(--cp-rule); }
.cp-rec-strip { margin: 0 0 6px; }
.cp-rec-strip ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; align-items: end; height: 64px; margin: 0; padding: 0; list-style: none; }
.cp-rec-strip li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.cp-rec-strip .cp-bar { display: block; width: 100%; height: calc(var(--k) * 48px); min-height: 1px; background: var(--cp-ink); opacity: 0.72; }
.cp-rec-strip li.is-zero .cp-bar { background: var(--cp-rule); opacity: 1; }
.cp-rec-strip small { margin-top: 4px; font-size: 10px; color: var(--cp-faint); font-variant-numeric: tabular-nums; }
.cp-rec-strip figcaption { margin-top: 6px; font-size: 12.5px; color: var(--cp-muted); }
.cp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cp-eras .cp-era { margin: 0 0 14px; }
.cp-era-h { margin: 12px 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; font-family: inherit; font-size: 13px; font-weight: 600; font-style: normal; letter-spacing: 0; }
.cp-era-h small { font-size: 12.5px; font-weight: 400; color: var(--cp-muted); font-variant-numeric: tabular-nums; }
.cp-era-more { margin: 4px 0 0; font-size: 12.5px; color: var(--cp-muted); }
.cp-top-list { border-top: 1px solid var(--cp-rule); }
.cp-top-list li { border-bottom: 1px solid var(--cp-rule); }
.cp-verse-row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; width: 100%; min-height: 44px; padding: 10px 2px; background: transparent; border: 0; text-align: left; cursor: pointer; }
.cp-verse-row:hover .cp-vr-ref, .cp-verse-row:focus-visible .cp-vr-ref { color: var(--cp-accent); }
.cp-verse-row[aria-current="true"] .cp-vr-ref { text-decoration: underline; text-underline-offset: 3px; }
.cp-vr-ref { font-weight: 600; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-meter { height: 6px; background: rgba(45, 41, 39, 0.07); border-radius: 3px; overflow: hidden; }
.cp-meter i { display: block; height: 100%; background: var(--cp-accent); border-radius: 3px; }
.cp-vr-n { font-size: 13px; color: var(--cp-muted); font-variant-numeric: tabular-nums; }
.cp-rec-foot { margin: 16px 0 0; font-size: 12.5px; color: var(--cp-faint); }

/* ── Creeds, confessions and catechisms that cite the verse (Mere Orthodoxy's page only) ──
   Above the commentary, as one heading row with its count and the first three entries; Show all opens the rest in place, by church.
   Set like the Citations view: thin-ruled rows, an italic title over a muted line, the words quoted beneath. No pill, no box that
   scrolls, no display face. Closed it is short enough for the commentary to begin in the first screen. */
.cp-creeds { margin: 0 0 14px; padding: 0 0 4px; border-bottom: 1px solid var(--cp-rule); }
.cp-creeds[hidden] { display: none; }
.cp-cr-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.cp-cr-bar[hidden] { display: none; }
.cp-cr-h { margin: 0; font-family: inherit; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none; font-style: normal; color: var(--cp-ink); }
.cp-cr-all { min-height: 44px; padding: 0 2px; background: none; border: 0; font-size: 14px; color: var(--cp-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cp-cr-all[hidden] { display: none; }
.cp-cr-at { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-creeds .cp-wit { align-items: flex-start; min-height: 44px; padding: 6px 2px; }
.cp-creeds a.cp-row-t { display: block; }
.cp-cr-q { font-style: normal; }
/* closed, a quotation is one line, so the commentary begins in the first screen */
.cp-creeds:not(.is-open) .cp-cr-q { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cp-cr-note { margin: 4px 0 8px; font-size: 13px; color: var(--cp-muted); }
.cp-cr-retry { min-height: 44px; padding: 0 2px; background: none; border: 0; font-size: 13px; color: var(--cp-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cp-cr-body .cp-era { margin: 0 0 8px; }
.cp-cr-body .cp-era-more { margin: 0 0 4px; }
.cp-cr-whole, .cp-cr-papal { margin-top: 14px; }
@media (max-width: 899px) {
  .cp-creeds { margin: 4px 0 8px; }
  .cp-cr-h { font-size: 15.5px; }
  /* on the phone's sheet the closed list is the document, its church and year: the quotations come with Show all */
  .cp-creeds:not(.is-open) .cp-cr-q { display: none; }
  .cp-cr-bar { flex-wrap: nowrap; }
  .cp-cr-h { min-width: 0; font-size: 14.5px; }
  .cp-cr-all { flex: none; }
  .cp-creeds:not(.is-open) a.cp-row-t, .cp-creeds:not(.is-open) .cp-row-m { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cp-creeds .cp-wit { padding: 4px 2px; }
}

/* how much reception each verse has, in the verse number itself: the most cited darkest and heaviest, the least faint (four steps of
   the chapter's own range); no mark is added to the text */
body.cp-on .scripture-verse-wrap[data-cp-heat] sup { color: var(--cp-faint); }
body.cp-on .scripture-verse-wrap[data-cp-heat="2"] sup { color: var(--cp-muted); }
body.cp-on .scripture-verse-wrap[data-cp-heat="3"] sup { color: var(--cp-ink); }
body.cp-on .scripture-verse-wrap[data-cp-heat="4"] sup { color: var(--cp-ink); font-weight: 700; }

/* the verse the commentary is following */
body.cp-on .scripture-verse-wrap.cp-focus { background: var(--cp-mark); }

@media (max-width: 900px) {
  html body.cp-on main .scripture-reader-layout:has(.cp-pane) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .cp-body.cp-loading { transition: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="sepia"]) .cp-rec-strip .cp-bar { opacity: 0.85; } }

/* ── Mere Orthodoxy (the theme's Scripture reader, html.cp-site-mo): its own tokens, its two-column .sd-layout ── */
html.cp-site-mo {
  --cp-ink: var(--color-dark, #2d2927);
  --cp-muted: var(--color-muted, #6b6660);
  --cp-paper: #fbf8f3; /* the sidebar's own ground */
  --cp-ground: #fbf8f3;
  --cp-rule: var(--color-rule, #ddd5c8);
  --cp-mark: #efe6d4;
  --cp-hit: #f4ead2;
  --cp-faint: var(--sd-faint, #8a837b);
}
html.cp-site-mo .cp-pane { font-family: var(--font-body, Georgia, serif); border-radius: 3px; color: var(--color-dark); }
/* Half and half (10-19, owner: "the space should be split 50/50"): the text and the rail share the width equally, the gap kept */
html.cp-site-mo body.cp-on .sd-layout:has(.cp-pane) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: start; }
html.cp-site-mo body.cp-on .sd-side { display: none !important; }
html.cp-site-mo body.cp-on.cp-src .sd-side { display: block !important; }
html.cp-site-mo body.cp-on.cp-src .cp-pane { display: none; }
html.cp-site-mo body.cp-on .bible-verse.cp-focus { background: var(--cp-mark); }
html.cp-site-mo body.cp-on .sd-side > .cp-tabs { margin: 0 0 16px; }
@media (max-width: 899px) {
  html.cp-site-mo body.cp-on .sd-layout:has(.cp-pane) { grid-template-columns: 1fr !important; }
  /* the phone: a sheet at the bottom that scrolls as a whole. It carries the three tabs; the label and the large heading are left
     out and the spacing is tight, so the commentary's words have the room. Citations here is the verse panel under the verse in
     the text: the sheet shrinks to its tabs and the panel is brought into view. */
  .cp-pane { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; top: auto; height: 50vh; overflow-y: auto; overscroll-behavior: contain;
    border-width: 1px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08); padding: 0 14px 12px; }
  html.cp-site-mo .cp-pane { border-radius: 0; }
  body.cp-on { padding-bottom: 50vh; }
  body.cp-on.cp-peek { padding-bottom: 56px; }
  .cp-pane[data-tab="s"] { height: auto; }
  .cp-pane[data-tab="s"] > :not(.cp-tabs) { display: none; }
  .cp-tabs { position: sticky; top: 0; z-index: 1; margin: 0 -14px 6px; padding: 0 14px; background: var(--cp-paper); }
  .cp-tabs button { min-height: 40px; padding: 4px 6px; }
  .cp-top, html.cp-site-mo .cp-top { display: none; }
  /* the sheet keeps only Close from the head, in a row of its own while a verse is chosen */
  html.cp-site-mo .cp-pane .cp-top:has(.cp-close:not([hidden])) { display: flex; justify-content: flex-end; margin: 0 0 6px; }
  html.cp-site-mo .cp-top > .cp-eyebrow, html.cp-site-mo .cp-top > .cp-ref { display: none; }
  .cp-cur { padding: 4px 2px; }
  .cp-pick { min-height: 36px; }
  .cp-lang { margin: 0; }
  .cp-where { margin: 6px 0 8px; padding-bottom: 6px; }
  .cp-body { font-size: 15.5px; line-height: 1.55; }
  .cp-foot { margin-top: 10px; padding-top: 4px; }
  .cp-follow, .cp-pages button { min-height: 40px; }
  .cp-stats { margin-bottom: 6px; }
  /* the Ask button rides above the sheet instead of covering its text */
  body.cp-on #fra-launcher { bottom: calc(50vh + 12px); }
  body.cp-on.cp-peek #fra-launcher { bottom: 68px; }
}

/* the verse panel (the Citations view): the active source filter, named with the way out; the commentaries on the verse, then on the chapter */
.scripture-summary-scope { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; padding: 8px 10px;
  background: var(--cp-ground); border: 1px solid var(--cp-rule); font-size: 0.88rem; }
.scripture-summary-scope span { font-weight: 600; }
.scripture-summary-sub { margin: 12px 0 4px; font-size: 0.8rem; font-weight: 600; color: var(--cp-muted); letter-spacing: 0.01em; }
.scripture-summary-sub:first-child { margin-top: 4px; }

/* with the rail beside it, the text comes first: the passage bar on one quiet line (its labels still name each control for a
   screen reader), the source filter and the views close under it, no instruction row (the rail says what a verse opens) */
body.cp-on main.scripture-page .scripture-heading { margin-bottom: 10px; }
body.cp-on main.scripture-page .scripture-passage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 0; grid-template-columns: none; }
body.cp-on main.scripture-page .scripture-passage-bar > :not(label):first-of-type { margin-left: auto; }
body.cp-on main.scripture-page .scripture-passage-bar > label { display: block; flex: none; width: auto; min-width: 0; margin: 0; font-size: 0; line-height: 0; }
body.cp-on main.scripture-page .scripture-passage-bar > label select { height: 38px; font-size: 0.95rem; line-height: normal; }
body.cp-on main.scripture-page .scripture-passage-bar > label:nth-of-type(1) select { width: 210px; }
body.cp-on main.scripture-page .scripture-passage-bar > label:nth-of-type(2) select { width: 76px; }
body.cp-on main.scripture-page .scripture-passage-bar > label:nth-of-type(3) select { width: min(320px, 100%); }
body.cp-on main.scripture-page .bible-scope { margin: 2px 0 0; }
body.cp-on main.scripture-page .scripture-tabs { margin: 6px 0 14px; }
body.cp-on main.scripture-page .scripture-reading-meta { margin-bottom: 10px; }
body.cp-on main.scripture-page .scripture-reading-meta > p { display: none; }
@media (max-width: 640px) {
  body.cp-on main.scripture-page .scripture-passage-bar > label:nth-of-type(1) select { width: 150px; }
  body.cp-on main.scripture-page .scripture-passage-bar > label:nth-of-type(3) select { width: 100%; }
}
html.cp-site-mo body.cp-on .bible-verse[data-cp-heat] > sup { color: var(--cp-faint); }
html.cp-site-mo body.cp-on .bible-verse[data-cp-heat="2"] > sup { color: var(--cp-muted); }
html.cp-site-mo body.cp-on .bible-verse[data-cp-heat="3"] > sup { color: var(--cp-ink); }
html.cp-site-mo body.cp-on .bible-verse[data-cp-heat="4"] > sup { color: var(--cp-ink); font-weight: 700; }

/* ── The commentary fills the rail (Ian, 2026-10-20: "When I expand the commentary section, the text should expand to fill the space
   as well") ── On Mere Orthodoxy's page the 68ch cap left the words and their tinted blocks in a 620px column inside a rail that runs
   to 1,300px with Panel only. The paragraphs take the rail's width, and the type steps up as the rail widens so a wide line still
   reads as a line. */
html.cp-site-mo .cp-pane { container: cp-rail / inline-size; }
html.cp-site-mo .cp-body p { max-width: none; }
@container cp-rail (min-width: 800px) { html.cp-site-mo .cp-body { font-size: 17px; line-height: 1.66; } }
@container cp-rail (min-width: 1040px) { html.cp-site-mo .cp-body { font-size: 18px; line-height: 1.7; } }
@container cp-rail (min-width: 1200px) { html.cp-site-mo .cp-body { font-size: 20px; line-height: 1.75; } }

/* ── The Verse Desk (Ian, 2026-10-20) ── The last control in the tab row, a site button (.btn, hollow). On a desktop the row and its
   clone in the Citations panel scroll away with the rail (Ian, 10-23: the stuck row let the list show above it). The phone's sheet
   keeps its row pinned (the 899px rules above and below). */
html.cp-site-mo .cp-tabs { align-items: center; }
html.cp-site-mo .cp-pane > .cp-tabs { margin: -18px -20px 16px; padding: 6px 20px 0; background: var(--cp-paper); }
html.cp-site-mo .cp-tabs .cp-desk { flex: none; min-height: 36px; margin: 0 0 6px 12px; padding: 6px 14px; font-size: 14px; }
@media (max-width: 899px) {
  /* the phone's sheet: the row is already pinned to the top of the sheet, so only the button is fitted to it */
  html.cp-site-mo .cp-pane > .cp-tabs { top: 0; margin: 0 -14px 6px; padding: 0 14px; }
  html.cp-site-mo .cp-tabs button { min-height: 44px; padding: 4px 0; font-size: 14px; }
  html.cp-site-mo .cp-tabs .cp-desk { min-height: 44px; margin: 0 0 0 8px; padding: 4px 9px; font-size: 13.5px; }
}
/* the most cited verses of the chapter, one line of buttons under the reception (scripture-verse-rail, 2026-10-21) */
.cp-rec-most { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 4px 0 18px; padding-top: 12px; border-top: 1px solid var(--cp-rule); font-size: 0.82rem; }
.cp-rec-most > span { color: var(--cp-muted); margin-right: 2px; }
.cp-rec-most button { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 8px; background: none; border: 1px solid var(--cp-rule);
  font: inherit; color: var(--cp-ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.cp-rec-most button small { color: var(--cp-muted); font-size: 0.74rem; }
.cp-rec-most button[aria-current="true"] { border-color: var(--cp-ink); }
.cp-rec-most button:hover { background: var(--cp-ground); }
.cp-rec-most button:focus-visible, .cp-more:focus-visible { outline: 2px solid var(--cp-ink); outline-offset: 2px; }
@media (max-width: 640px) {
  .cp-keys-row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
  .cp-keys-row::-webkit-scrollbar { display: none; }
  .cp-key { flex: none; }
}