/* The manuscript look, layered over styles.css.
   The page is set like an early printed study Bible (the Geneva Bible, the Glossa Ordinaria):
   a title page between thick-and-thin rules, the tabs as a table of contents, the text in a
   column of reading width, and each passage's notes beneath it, folded until they are asked
   for. By day it is black-and-red letterpress on laid paper; by night, gold and silver ink on
   purple vellum.
   The comparison card steps between curtains with the roundels of a genealogy roll —
   the medieval rolls that traced the generations from Adam as circles strung on a red line.
   Colors and type come from the tokens at the top of styles.css. */

/* ---- square, flat chrome: no pills, rounded panels, or drop shadows ---- */
header, .tb-card, .tab, details.tb-drop, details.deeper, .link-btn, .seg, .seg button,
.tb-cover, .tb-lesson, .verdict, .pill, .kicker, .fm-cell, .fm-k, .lg-cell,
.lg-empty, .lg-row-btn, .tb-tip, .modal, .close, .table-wrap, .legend span, .cell-btn,
.caution, .sw {
  border-radius: 0 !important;
}
header, .tb-card, .tab, .link-btn, .seg button, .table-wrap,
.cell-btn, button.fm-cell:hover, .tb-tip, .modal {
  box-shadow: none !important;
}
.sw.dot, .sw.cov { border-radius: 999px !important; }

/* The page fills the window, with a margin that grows with it; the type grows with it too:
   the root size is 18px on a 1280px-wide screen, 20px at 1920px, and 22px at 2560px; every rem scales with it.
   Running text is held to one measure, --measure, wherever it is long: 32rem gives about seventy characters to the
   line in EB Garamond at the body's size, on a laptop and on a wide screen alike. (Not 70ch: the face is narrow, and
   its average letter with the spaces is about 0.4em where a ch is 0.5em, so 70ch would give near ninety.) Headings,
   roundels, charts and tables keep the page's width. */
:root { --gutter: clamp(16px, 3vw, 64px); --moment-indent: 1.6rem; --measure: 32rem; }
html { font-size: clamp(16.5px, 0.3125vw + 14px, 23px); }
body {
  font-size: 1.125rem;
  line-height: 1.58;
  overflow-wrap: break-word;   /* a word longer than its line (a transliteration, a long reference) breaks rather than runs out */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  background-color: var(--bg);
  /* vellum by night: a faint grain, with lamplight at the head of the page */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .15 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse 110% 1100px at 50% 0, var(--bg-top) 0, var(--bg) 70%);
  background-repeat: repeat, no-repeat;
}
:root[data-theme="light"] body {
  /* laid paper by day: chain lines and a faint tooth */
  background-image:
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(120, 100, 70, 0.025) 3px 4px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat, repeat;
}
.page { width: calc(100% - 2 * var(--gutter)); margin: 26px auto 70px; }
::selection { background: color-mix(in srgb, var(--rubric) 30%, transparent); }

/* ---- the title page, ruled thick-and-thin ---- */
header {
  position: static;
  margin: 2.4rem 0 0;
  padding: 38px 40px 30px;
  text-align: center;
  border: 0;
  background:
    linear-gradient(var(--press), var(--press)) top / 100% 3px no-repeat,
    linear-gradient(var(--press), var(--press)) 0 6px / 100% 1px no-repeat,
    linear-gradient(var(--press), var(--press)) bottom / 100% 3px no-repeat,
    linear-gradient(var(--press), var(--press)) 0 calc(100% - 6px) / 100% 1px no-repeat;
}
.eyebrow { margin: 0 0 12px; font-family: var(--caps); font-size: 1.02rem; letter-spacing: 0.24em; color: var(--rubric); }
.head-row { display: block; }
h1 { margin: 0 0 18px; font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
h1 > span { display: block; }
h1 .t1 { font-size: clamp(1.25rem, 2.3vw, 1.75rem); color: var(--rubric); letter-spacing: 0.1em; }
h1 .t2 { font-size: clamp(2.4rem, 6.4vw, 4.8rem); margin: 4px 0 2px; letter-spacing: 0.1em; }
h1 .t3 { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--rubric); letter-spacing: 0.12em; }
h1 .t3::before { content: ""; display: block; width: 90px; height: 1px; margin: 12px auto; background: var(--press); }
/* “About this study”: one line under the title that opens to a short description */
details.hd-about { max-width: 42rem; margin: 2px auto 0; }
details.hd-about > .tb-drop-b p { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.55; color: var(--muted); }
details.hd-about > .tb-drop-b p:last-child { margin-bottom: 0; }
.head-rule { margin: 16px 0 0; color: var(--rubric); font-size: 1.3rem; line-height: 1; }
.head-rule::before { content: "❦"; }

/* ---- the tools (index.html, js/taskbar.js): the reader's options, in the sheet the bar at the foot of the screen raises.
   The bar, its sheets, and the chapters are in css/taskbar.css. ---- */
.opt-sec { padding: 10px 0 12px; border-bottom: 1px dotted var(--rule); }
.opt-sec:last-child { padding-bottom: 2px; border-bottom: 0; }
.opt-k { margin: 0 0 6px; font-family: var(--caps); font-size: 0.86rem; letter-spacing: 0.14em; color: var(--muted); }
.tk-sheet .seg { flex-wrap: wrap; gap: 2px 14px; }
.tk-sheet .seg button { padding: 3px 0; font-size: 0.98rem; }
.opt-list .ti { font-family: var(--sym); font-size: 0.9em; }
.opt-note { margin: 5px 0 0; font-size: 0.88rem; font-style: italic; color: var(--muted); }
.opt-hint { margin: 6px 0 0; font-size: 0.8rem; line-height: 1.35; color: var(--muted); }
.opt-ver { margin: 18px 0 2px; font-family: var(--caps); font-size: 0.62rem; letter-spacing: 0.14em; text-align: center; color: var(--muted); opacity: 0.8; }
.opt-list { display: flex; flex-direction: column; margin: 0 -4px 0 0; }
.opt-list button { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px; width: 100%; padding: 6px 4px 6px 8px; border: 0; border-bottom: 1px dotted var(--rule); border-radius: 0; background: none; box-shadow: none; font-family: var(--display); font-size: 1.02rem; line-height: 1.25; color: var(--ink); text-align: left; cursor: pointer; }
.opt-list button:last-child { border-bottom: 0; }
.opt-sec[hidden], .opt-list button[hidden] { display: none; }        /* (a button the browser cannot use: full screen, install) */
.opt-list button:hover, .opt-list button:focus-visible { background: color-mix(in srgb, var(--rubric) 8%, transparent); color: var(--rubric); }
.opt-list button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.opt-list button[aria-pressed="true"] { color: var(--rubric); box-shadow: inset 3px 0 0 var(--rubric); }
.opt-list .opt-l { flex: 1 1 0; min-width: 0; }   /* a long label wraps, and the picture beside it keeps to the right */
.opt-pv { display: inline-flex; align-items: center; font-family: var(--text); font-size: 0.86rem; color: var(--muted); }
.opt-pv svg { width: 0.74em; height: 0.92em; margin: 0 2px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.opt-pill { padding: 0 0.5em; border: 1px solid var(--rule); border-radius: 999px; font-feature-settings: "lnum"; }
/* the notes, folded or open: the button that names them, and an open note's rule and lines, drawn small */
.opt-gl { display: inline-flex; align-items: center; padding: 0 0.45em 0 0.55em; border: 1px solid color-mix(in srgb, var(--rubric) 65%, transparent); border-radius: 999px; font-family: var(--caps); font-size: 0.92em; letter-spacing: 0.03em; line-height: 1.4; color: var(--rubric); }
.opt-gl svg { width: 0.7em; height: 0.7em; margin-left: 0.3em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.opt-pv .opt-gl-open { width: 2.2em; height: 1.2em; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.opt-pv .opt-gl-open path:first-child { stroke: var(--rubric); stroke-width: 2; }

/* ---- sections open with a printer's rule and a centered head ---- */
.tb-card { margin-top: 54px; padding: 0; border: 0; background: none; }
.tb-card > h2, .tb-h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.95rem); letter-spacing: 0.01em; }
.tb-card > h2 { text-align: center; }
.tb-card > h2::before, .tb-toolbar::before, .tb-detail::before {
  content: "";
  display: block;
  width: 100%;
  height: 7px;
  margin-bottom: 26px;
  background:
    linear-gradient(var(--press), var(--press)) top / 100% 2px no-repeat,
    linear-gradient(var(--press), var(--press)) bottom / 100% 1px no-repeat;
}
.tb-toolbar { flex-wrap: wrap; }
.tb-toolbar::before { flex: 1 1 100%; margin-bottom: 14px; }
.tb-intro .tb-lede, .tb-card > .tb-lede { max-width: var(--measure); margin: 0 auto 20px; text-align: center; text-wrap: pretty; }
.tb-lede { color: var(--muted); }
.tb-lede b { color: var(--ink); }
.tb-kicker-line { font-family: var(--caps); font-size: 1rem; font-weight: 400; letter-spacing: 0.2em; text-transform: none; color: var(--rubric); }

/* the intro, as pointing-hand entries that open */
.tb-acc { gap: 0; max-width: 46rem; margin: 0 auto; }
details.tb-drop { border: 0; background: none; overflow: visible; }
details.tb-drop > summary { padding: 8px 8px 8px 34px; }
details.tb-drop > summary::before { content: "☞"; font-family: var(--sym); left: 4px; top: 9px; color: var(--rubric); }
details.tb-drop[open] > summary::before { transform: none; }
details.tb-drop > summary:hover, details.tb-drop > summary:focus-visible { background: none; box-shadow: none; }
details.tb-drop > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
details.tb-drop > summary:hover .tb-drop-t { color: var(--rubric); }
.tb-drop-t { font-family: var(--display); font-weight: 400; font-size: 1.14rem; }
.tb-drop-s { color: var(--muted); font-size: 0.95rem; }
.tb-drop-s::before { content: "— "; }
.tb-drop-b { border-top: 0; padding: 0 12px 14px 34px; }
.tb-drop-b ul { gap: 7px; }
/* one “How to read this page” line opens the whole introduction, in headed sections */
details.tb-howto > summary { justify-content: center; padding: 8px; text-align: center; }
details.tb-howto > summary::before { position: static; margin-right: 2px; }
details.tb-howto > .tb-drop-b { padding: 4px 12px 16px; }
/* inside it, each section is its own entry that opens on its own */
details.tb-sub { text-align: left; }
details.tb-sub + details.tb-sub { border-top: 1px dotted var(--rule); }
details.tb-sub > summary .tb-drop-t { font-size: 1.06rem; }
details.tb-sub > .tb-drop-b { padding-bottom: 12px; }
details.tb-sub > .tb-drop-b > ul:first-child { margin-top: 2px; }

/* buttons that were pills become plain text links */
.link-btn {
  width: auto;
  border: 0;
  background: none;
  padding: 4px 0;
  justify-content: flex-start;
  font-family: var(--caps);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--rubric);
}
.link-btn .arrow { color: inherit; }
.link-btn:hover, .link-btn:focus-visible { transform: none; background: none; text-decoration: underline; text-underline-offset: 4px; }
.link-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.tb-actions { gap: 4px 24px; }

/* ---- the diagram ---- */
.seg { border: 0; background: none; padding: 0; gap: 16px; }
.seg button { padding: 2px 0; font-family: var(--caps); font-size: 1rem; font-weight: 400; letter-spacing: 0.06em; color: var(--muted); }
.seg button[aria-pressed="true"] { background: none; color: var(--rubric); text-decoration: underline; text-underline-offset: 5px; }
.tb-key { font-size: 0.9rem; }
.tb-svg .t-room { font-family: var(--caps); letter-spacing: 0.1em; font-weight: 400; }
.tb-svg .t-cap { font-family: var(--caps); text-transform: none; letter-spacing: 0.04em; }
.fm-k { background: none !important; color: inherit; padding: 0; min-width: 0; font-family: var(--caps); font-size: 0.86rem; }
.fm-cell { background: var(--surface); }
.tb-tip { max-width: 18rem; background: var(--modal); border-color: var(--rule); font-size: 0.9rem; }
.tb-hint { font-size: 0.9rem; }

/* ---- verdict marks: an ink mark and a word, never color alone ---- */
.verdict { background: none !important; border: 0; padding: 0; gap: 7px; }
.verdict.v-kept { color: var(--ok); }
.verdict.v-broken { color: var(--bad); }
.verdict.v-both { color: var(--warn); }
.verdict.v-over { color: var(--muted); }
.vi {
  width: auto;
  height: auto;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--sym);
  font-style: normal;
  font-weight: 400;
}
.vi.k-kept, .v-kept .vi { color: var(--ok); }
.vi.k-broken, .v-broken .vi { color: var(--bad); }
.vi.k-both, .v-both .vi { color: var(--warn); }
.vi.k-both::after, .v-both .vi::after { display: none; }
.vi.k-over, .v-over .vi { color: var(--muted); }
.vi.k-note { color: var(--rubric); font-family: var(--text); font-weight: 600; font-size: 1.1rem; }
.tb-vlegend { gap: 6px 18px; font-size: 0.92rem; }
.tb-vlegend .verdict { font-family: var(--caps); font-size: 1rem; letter-spacing: 0.04em; }

/* kicker chips become lettered labels */
.kicker { background: none !important; border: 0 !important; padding: 0 !important; }
.kicker.heaven, .heaven > .kicker { color: var(--heaven-ink); }
.kicker.earth, .earth > .kicker { color: var(--earth-ink); }
.kicker.genA, .genA > .kicker { color: var(--genA-ink); }
.kicker.genB, .genB > .kicker { color: var(--genB-ink); }
.kicker.over { color: var(--muted); }
.pill { background: none !important; border: 0 !important; padding: 0 !important; }

/* =====================================================================
   The comparison card: a glossed page
   ===================================================================== */
.tb-card.tb-detail { padding: 0; }
.tb-detail::before { margin-bottom: 30px; }

/* a number set in a circle, moved onto its center by its ink (Study.figure): it has to be a box to move */
.fig { display: inline-block; }

/* the genealogy roll: the curtain before, this one, and the one after, on a red line */
.tb-roll {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.7rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 24px;
  padding: 0 2.4rem;
}
.tb-roll::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1.5px); height: 3px; background: var(--rubric); opacity: 0.85; }
.rl-node {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  width: 5.35rem;
  height: 5.35rem;
  padding: 6px;
  border-radius: 50%;
  border: 3px double var(--genB-edge);
  background: var(--genB-soft);
  color: var(--ink);
  font-family: var(--text);
  text-align: center;
  line-height: 1.1;
}
button.rl-node { cursor: pointer; transition: transform 120ms ease; }
button.rl-node:hover { transform: scale(1.05); }
button.rl-node:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.rl-node.genA { border-color: var(--genA-edge); background: var(--genA-soft); }
.rl-node.heaven { border-color: var(--heaven-edge); background: var(--heaven-soft); }
.rl-node.earth { border-color: var(--earth-edge); background: var(--earth-soft); }
.rl-n { font-family: var(--display); font-size: 1.35rem; line-height: 1.05; color: var(--rubric); }
.rl-name { font-family: var(--caps); font-size: 0.8rem; letter-spacing: 0.02em; }
.rl-k { font-family: var(--caps); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--muted); }
.rl-node.cur { width: 8.6rem; height: 8.6rem; border-width: 5px; box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--genB-edge); }
.rl-node.cur.genA { box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--genA-edge); }
.rl-node.cur.heaven { box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--heaven-edge); }
.rl-node.cur.earth { box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--earth-edge); }
.rl-node.cur .rl-n { font-size: 2.4rem; line-height: 1; margin: 2px 0; }
.rl-node.cur .rl-name { font-family: var(--display); font-size: 1.1rem; letter-spacing: 0; }
/* the word above the number sits where the circle is narrowest, so it is set small and close */
.rl-node.cur .rl-k { font-size: 0.6rem; letter-spacing: 0.06em; }
/* a long name wraps before it reaches the ring */
.rl-node.cur .rl-name { max-width: 80%; }
.rl-end { position: relative; flex: none; width: 5.35rem; padding: 4px 0; background: var(--bg); font-family: var(--caps); font-size: 0.86rem; text-align: center; color: var(--muted); }

.tb-d-head { text-align: center; margin-bottom: 26px; }
.tb-d-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.tb-d-title.long { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
.tb-d-title:focus { outline: none; }
.tb-d-title .tb-d-sub { display: block; margin-top: 8px; font-family: var(--caps); font-size: 0.36em; letter-spacing: 0.14em; text-transform: none; color: var(--rubric); }
.tb-d-ref { margin: 12px 0 0; color: var(--muted); }
.tb-d-ref b { color: var(--ink); font-weight: 600; }
.tb-d-cov { margin: 14px auto 0; max-width: var(--measure); text-align: start; font-size: 0.95rem; text-wrap: pretty; }
.tb-d-cov b { font-weight: 600; }

/* run-in heads, as the old study Bibles set "The Argument" */
.run-in { margin-right: 0.45em; font-family: var(--caps); font-size: 1.02em; letter-spacing: 0.06em; color: var(--rubric); }

/* "The Argument": the chapter summary. Long text is set ragged-right, as it reads best on a screen: the browser
   cannot space a justified line as a compositor would, and its gaps open into rivers around the citations. */
.tb-d-summary, .tb-d-place { max-width: var(--measure); margin-left: auto; margin-right: auto; text-wrap: pretty; }
.tb-d-summary { display: flow-root; margin-bottom: 12px; font-size: 1.12rem; }
.tb-d-place { font-size: 0.98rem; color: var(--muted); margin-bottom: 0; }

/* the lesson that spans both commandments, under a centered head like a verse picked out; how the two fit together,
   the longest text of the card, at the size of the text */
.tb-lesson { max-width: var(--measure); margin: 34px auto 48px; padding: 0; border: 0; background: none; text-align: center; }
.tb-lesson .tb-kicker-line { margin-bottom: 10px; }
.tb-lesson p { margin: 0; font-size: 1.14rem; line-height: 1.62; text-align: start; text-wrap: pretty; }
.tb-lesson .tb-kicker-line + p + .tb-kicker-line { margin-top: 26px; }
.tb-lesson p.tb-overview { font-size: inherit; line-height: 1.58; }
.tb-lesson::after { content: "❦"; display: block; margin-top: 16px; color: var(--rubric); font-size: 1.2rem; }

/* each covered commandment (or each side of a pair): its head across the page, and its text in
   one column of the reading measure, centered, with the notes on each passage folded beneath it
   (Study.noteMarks). */
.tb-pair { grid-template-columns: 1fr; gap: 60px; }
.tb-cover { border: 0; padding: 0; background: none; container-type: inline-size; }
.tb-cover.flash { animation: tbflash-ink 1.2s ease-out; }
@keyframes tbflash-ink {
  0% { background: color-mix(in srgb, var(--rubric) 16%, transparent); }
  100% { background: transparent; }
}
.tb-cover-main { display: flow-root; max-width: var(--measure); margin: 0 auto; }
/* each section opens across the full width with its number in a roundel, set in a thick-and-thin
   rule of the section's own ink, and its head centered beneath — so the start of the next
   commandment, generation, or day stands out while scrolling, even when two sections share an ink */
.tb-cover { --sec-ink: var(--rubric); --sec-soft: var(--surface-2); --sec-edge: var(--press); }
.tb-cover.heaven { --sec-ink: var(--heaven-ink); --sec-soft: var(--heaven-soft); --sec-edge: var(--heaven-edge); }
.tb-cover.earth  { --sec-ink: var(--earth-ink);  --sec-soft: var(--earth-soft);  --sec-edge: var(--earth-edge); }
.tb-cover.genA   { --sec-ink: var(--genA-ink);   --sec-soft: var(--genA-soft);   --sec-edge: var(--genA-edge); }
.tb-cover.genB   { --sec-ink: var(--genB-ink);   --sec-soft: var(--genB-soft);   --sec-edge: var(--genB-edge); }
.tb-cover.over   { --sec-ink: var(--muted);      --sec-soft: var(--surface-2);   --sec-edge: var(--rule); }
.tb-cover.beat   { --sec-ink: var(--beat-ink);   --sec-soft: var(--beat-soft);   --sec-edge: var(--beat-edge); }
.tb-cover.cov    { --sec-ink: var(--cov-ink);    --sec-soft: var(--cov-soft);    --sec-edge: var(--cov-edge); }
.tb-cover.divide { --sec-ink: var(--form-ink);   --sec-soft: var(--form-soft);   --sec-edge: var(--form-edge); }
.tb-cover.fill   { --sec-ink: var(--fill-ink);   --sec-soft: var(--fill-soft);   --sec-edge: var(--fill-edge); }
.tb-cover.rest   { --sec-ink: var(--rest-ink);   --sec-soft: var(--rest-soft);   --sec-edge: var(--rest-edge); }
.tb-cover-head {
  --n: 5.4rem;                         /* the roundel */
  --open: calc(var(--n) / 2 + 1rem);   /* the rule stops this far either side of the middle */
  position: relative;
  display: block;
  margin-bottom: 30px;
  padding: calc(var(--n) + 16px) 0 0;
  border: 0;
  text-align: center;
  background:
    linear-gradient(90deg, var(--sec-edge) calc(50% - var(--open)), transparent 0 calc(50% + var(--open)), var(--sec-edge) 0) 0 calc(var(--n) / 2 - 4px) / 100% 3px no-repeat,
    linear-gradient(90deg, var(--sec-edge) calc(50% - var(--open)), transparent 0 calc(50% + var(--open)), var(--sec-edge) 0) 0 calc(var(--n) / 2 + 3px) / 100% 1px no-repeat;
}
.tb-cover-n {
  position: absolute;
  top: 0;
  left: calc(50% - var(--n) / 2);
  display: grid;
  place-items: center;
  width: var(--n);
  height: var(--n);
  border: 4px double var(--sec-edge);
  border-radius: 50%;
  background: var(--sec-soft);
  font-family: var(--display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--sec-ink);
}
/* the number is centered by its ink (Study.figure); the overhang's arrow is EB Garamond's, whose
   ink sits 0.115em below the middle of its line */
.tb-cover-n.mark > span { font-family: var(--text); font-size: 0.8em; translate: 0 -0.115em; }
.tb-cover-head .verdict { margin-left: 14px; }
.tb-cover .kicker { font-family: var(--caps); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.14em; }
.tb-cover .verdict { font-family: var(--caps); font-size: 1.02rem; font-weight: 400; letter-spacing: 0.06em; }
.arc { margin-left: 8px; font-style: normal; color: var(--muted); }
.arc::before { content: "— "; }
.tb-cover-head h3 { margin: 6px 0 4px; font-family: var(--display); font-weight: 400; font-size: 2.5rem; line-height: 1.15; text-wrap: balance; }
.tb-cover-where { max-width: 46rem; margin: 0 auto; font-size: 0.92rem; text-wrap: balance; }
.tb-cover-sum { font-weight: 600; font-size: 1.05rem; margin: 0 0 14px; text-wrap: pretty; }
.tb-why { margin: 0 0 18px; text-wrap: pretty; }

.moments { display: block; margin: 0 0 18px; }
.moments > li { display: block; position: relative; padding-left: var(--moment-indent); margin-bottom: 14px; font-size: 1rem; }
.moments > li > .vi { position: absolute; left: 0; top: 4px; font-size: 0.92rem; }
.moments > li > .vi.k-note { top: 0; font-size: 1.1rem; }
.moments .m-text { margin: 0; text-wrap: pretty; }

/* The notes on a passage (Study.noteMarks). At the end of the passage, the one mark in the text: a button in the
   rubric's small capitals that names the kinds of note the passage has, and opens them. It is set whole on one line
   (or on its own, on a narrow phone, where it breaks only between kinds), it is no taller than the line it sits in,
   and it is tapped over a band about 32px tall. Opened, the notes stand beneath the passage at nearly the size of the
   text, in a light block ruled in the rubric, each led by its kind in small capitals and in an ink of its own: In the
   text in the rubric, Across Scripture in the covenant's, Tradition in the Beatitudes', with its pointing hand. The
   kind is told by its word first, its colour second. */
.gl-btn {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 0 0.5em 0 0.62em;
  border: 1px solid color-mix(in srgb, var(--rubric) 65%, transparent);
  border-radius: 0.85em;   /* round at the ends on one line; a rounded box where a narrow phone breaks it */
  background: none;
  box-shadow: none;
  font-family: var(--caps);
  font-size: 0.86rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.035em;
  line-height: 1.45;
  color: var(--rubric);
  text-align: left;
  text-indent: 0;
  vertical-align: 0.08em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.gl-btn::before { content: ""; position: absolute; inset: -5px -4px; }   /* the band a finger may tap */
.gl-k { white-space: nowrap; }
.gl-n { font-family: var(--text); font-size: 0.92em; font-feature-settings: "lnum"; letter-spacing: 0; }
.gl-sep { color: color-mix(in srgb, var(--rubric) 55%, transparent); }
.gl-ch { display: inline-block; width: 0.72em; height: 0.72em; margin: 0 0 0 0.32em; vertical-align: -0.02em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease; }
.gl-btn[aria-expanded="true"] { border-color: var(--rubric); background: color-mix(in srgb, var(--rubric) 11%, transparent); }
.gl-btn[aria-expanded="true"] .gl-ch { transform: rotate(180deg); }
@media (hover: hover) { .gl-btn:hover { border-color: var(--rubric); background: color-mix(in srgb, var(--rubric) 11%, transparent); } }
.gl-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* a folded block is hidden "until found", which keeps its box (only what is in it is hidden), so the block is given
   no look of its own: its look is on .gloss-b, within it. Nor is it given a display, which would show it where the
   browser hides it in the old way. */
.gloss-b {
  display: grid;
  gap: 10px;
  margin: 10px 0 4px;
  padding: 11px 14px 12px 16px;
  border-left: 2px solid var(--rubric);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}
.tb-why-wrap > .gloss > .gloss-b { margin: -6px 0 18px; }
.gloss-i { margin: 0; text-wrap: pretty; }
.gloss-k { margin-right: 0.15em; font-family: var(--caps); font-size: 1.04em; letter-spacing: 0.04em; color: var(--rubric); }
.n-wide .gloss-k { color: var(--cov-ink); }
.n-trad .gloss-k { color: var(--beat-ink); }
.n-trad .gloss-k::before { content: "☞ "; content: "☞ " / ""; font-family: var(--sym); font-size: 0.85em; }
@media (prefers-reduced-motion: reduce) { .gl-btn, .gl-ch { transition: none; } }
/* on paper every note is printed, beneath its passage, and the buttons are not */
@media print {
  .gl-btn { display: none; }
  .gloss[hidden] { display: block !important; content-visibility: visible !important; }
  .gloss-b { break-inside: avoid; }
}

.conseq { border-top: 0; padding-top: 4px; gap: 10px; }
.conseq-k { font-family: var(--caps); font-size: 1rem; font-weight: 400; letter-spacing: 0.16em; text-transform: none; color: var(--rubric); }
.conseq p { border-left: 0; padding-left: 0; font-size: 1rem; text-wrap: pretty; }
.conseq p b { font-family: var(--caps); font-weight: 400; font-size: 1.04rem; letter-spacing: 0.04em; }
.conseq p.c-kept b { color: var(--ok); }
.conseq p.c-broken b { color: var(--bad); }
.tb-over-meaning { border-top: 0; padding-top: 0; font-size: 1rem; text-wrap: pretty; }
.tb-more { margin-top: 14px; }

/* the tabernacle note and the other commandments that surface, centered at the foot */
.tb-echoes { max-width: var(--measure); margin: 56px auto 0; text-align: center; }
.tb-echoes-h { margin: 0 0 12px; font-family: var(--caps); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.16em; color: var(--rubric); }
.tb-echoes > p { margin: 0 0 30px; text-align: start; text-wrap: pretty; }
.tb-echoes .echo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-size: 1rem; }
.tb-echoes .echo-num { font-family: var(--caps); font-weight: 400; letter-spacing: 0.04em; color: var(--muted); margin-right: 6px; }

/* catchwords: the next page's first words at the foot, as printers set them */
.tb-d-nav { align-items: baseline; margin-top: 42px; padding-top: 12px; border-top: 1px solid var(--press); }
.tb-d-nav .link-btn { font-size: 1.05rem; color: var(--ink); }
.tb-d-nav .link-btn:last-child { color: var(--rubric); }

/* ---- the ledger ---- */
table.lg thead th { font-family: var(--caps); font-weight: 400; font-size: 0.9rem; }
table.lg .lg-group th { font-family: var(--caps); text-transform: none; letter-spacing: 0.06em; font-size: 0.86rem; }
.lg-row-btn { font-size: 0.98rem; }
.lg-row-btn .n { font-family: var(--caps); font-weight: 400; }
.lg-cell .vi { font-size: 1rem; }
.lg-edge { font-family: var(--text); }

/* =====================================================================
   Beatitudes & Covenants
   ===================================================================== */
/* the eight pairs: each Beatitude on the left, its covenant on the right; a bracket joins the
   first and the last, which share one present-tense promise */
.bt-ladder-head, .bt-rung {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr) 3rem minmax(0, 1fr) 8.4rem;
  align-items: center;
  gap: 0 18px;
}
.bt-ladder-head { max-width: 62rem; margin: 0 auto 8px; font-family: var(--caps); font-size: 1rem; letter-spacing: 0.1em; color: var(--rubric); }
.bt-ladder-head span:first-child { grid-column: 2; text-align: right; }
.bt-ladder-head span:last-child { grid-column: 4; }
.bt-ladder { position: relative; max-width: 62rem; margin: 0 auto; padding: 0; list-style: none; }
.bt-ladder::before { content: ""; position: absolute; left: 2px; top: 1.9rem; bottom: 1.9rem; width: 12px; border: 1px solid var(--rubric); border-right: 0; }
.bt-rung {
  width: 100%;
  padding: 9px 6px 9px 0;
  border: 0;
  border-bottom: 1px dotted var(--rule);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* each Beatitude's name lines up with its covenant's, however many lines the references take;
   the number and the labels at either end stay centered */
.bt-rung { align-items: start; }
.bt-rung .bt-n, .bt-rung .bt-tense, .bt-rung .bt-strength { align-self: center; }
.bt-ladder li:last-child .bt-rung { border-bottom: 0; }
.bt-rung:hover b, .bt-rung:focus-visible b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bt-rung:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bt-rung.sel { background: color-mix(in srgb, var(--rubric) 10%, transparent); }
.bt-tense { padding-left: 24px; font-family: var(--caps); font-size: 0.92rem; letter-spacing: 0.04em; color: var(--muted); }
.bt-rung.now .bt-tense { color: var(--rubric); }
.bt-beat { text-align: right; }
.bt-beat b, .bt-cov b { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 400; line-height: 1.2; }
.bt-beat b { color: var(--beat-ink); }
.bt-cov b { color: var(--cov-ink); }
.bt-beat i, .bt-cov i { display: block; margin-top: 2px; font-size: 0.93rem; color: var(--muted); }
.bt-n {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  border: 2px solid var(--beat-edge);
  box-shadow: inset 0 0 0 2px var(--cov-edge);
  background: var(--beat-soft);
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--rubric);
}
/* a reference (or each side of a pair) kept on one line where it fits, and broken only where it is wider than its column */
.nw { display: inline-block; max-width: 100%; }
.bt-strength { font-family: var(--caps); font-size: 0.92rem; letter-spacing: 0.04em; color: var(--muted); }
.bt-strength.st-anchor { color: var(--rubric); }
.bt-strength.st-strong { color: var(--ink); }

/* the study card: a pair's roundels carry both colors — the Beatitude's ring outside, the covenant's within */
.rl-node.pair { border-color: var(--beat-edge); background: var(--beat-soft); box-shadow: inset 0 0 0 3px var(--cov-soft), inset 0 0 0 4px var(--cov-edge); }
.rl-node.cur.pair { box-shadow: inset 0 0 0 4px var(--cov-soft), inset 0 0 0 5px var(--cov-edge), 0 0 0 6px var(--bg), 0 0 0 7px var(--beat-edge); }
.kicker.beat, .beat > .kicker { color: var(--beat-ink); }
.kicker.cov, .cov > .kicker { color: var(--cov-ink); }
.bt-when { display: inline-block; max-width: calc(100% - 12px); margin-left: 12px; font-family: var(--caps); font-size: 0.98rem; letter-spacing: 0.04em; color: var(--muted); }
.bt-named { max-width: 46rem; margin: 6px auto 0; font-size: 0.94rem; font-style: italic; color: var(--muted); text-wrap: balance; }
.conseq p.c-now b, .conseq p.c-then b { color: var(--rubric); }
/* a link and the case for it, as the Plagues set each plague beside a day of creation and Psalm 105 (js/plagues.js) */
.bt-link .bt-anchor { max-width: var(--measure); margin: 0 auto 16px; font-size: 1.1rem; text-wrap: pretty; }
.bt-anchor .bt-strength { margin-right: 0.3em; font-size: 1.02rem; color: var(--rubric); }
.bt-reasons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: var(--measure); margin: 0 auto 20px; padding: 0; list-style: none; text-align: left; text-wrap: pretty; }
.bt-reasons li { position: relative; padding-left: 1.6em; }
.bt-reasons li::before { content: "☞"; position: absolute; left: 0; top: 0.1em; font-family: var(--sym); font-size: 0.95em; color: var(--rubric); }
/* the limits of a link: a quiet box, ruled, set apart from the case for it (the Plagues, the calendars) */
.bt-caution { max-width: var(--measure); margin: 0 auto; padding: 10px 14px 11px; border: 1px solid var(--rule); color: var(--muted); font-size: 0.98rem; text-align: start; text-wrap: pretty; }

/* Why they pair (js/pairs.js, js/beatitudes.js, js/creation.js): one ruled panel, how sure the link is beside the
   case for it. The scale is the chapter's own legend, each level an open diamond and this pair's filled in the rubric
   and named as its own, with its definition beneath; the case is the anchor, the reasons that hold it up, each ticked,
   and the limits in a warm box of their own. The scale stands to the left where the section has the room for both
   columns, and above on a phone; the Days of Creation have none. Its borders hold 3:1 against the ground in both
   themes, which the hairline --rule does not, and the panel is never wider than the scale and one reading measure. */
.tb-echoes.why { max-width: 62rem; container-type: inline-size; }
.why-panel {
  display: grid; grid-template-columns: minmax(0, var(--measure)); gap: 24px;
  width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0 auto; padding: 26px 30px 28px;
  border: 1px solid color-mix(in srgb, var(--muted) 50%, var(--rule));
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  text-align: start;
}
.why-panel.has-sure .why-sure { padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
@container (min-width: 46rem) {
  .why-panel.has-sure { grid-template-columns: 15rem minmax(0, var(--measure)); column-gap: 2.6rem; }
  .why-panel.has-sure .why-sure { padding-bottom: 0; border-bottom: 0; }
}
.why-k { margin: 0 0 10px; font-family: var(--caps); font-size: 1rem; letter-spacing: 0.12em; line-height: 1.3; color: var(--rubric); }
.why-k.ok { color: var(--ok); }
.why-k.warn { color: var(--warn); }
.why-scale { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.why-scale li, .why-one { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); margin: 0 -8px; padding: 3px 8px 4px; font-family: var(--caps); font-size: 1.02rem; letter-spacing: 0.04em; line-height: 1.35; color: var(--muted); }
.why-dia { width: 0.5rem; height: 0.5rem; margin-top: 0.42rem; border: 1.5px solid var(--muted); transform: rotate(45deg); }
.why-scale .on, .why-one { background: color-mix(in srgb, var(--rubric) 12%, transparent); color: var(--rubric); }
.why-scale .on .why-dia, .why-one .why-dia { border-color: var(--rubric); background: var(--rubric); }
.why-scale b, .why-one b { font-weight: 400; }
.why-def { margin: 14px 0 0; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.why-def b { font-family: var(--caps); font-weight: 400; letter-spacing: 0.04em; color: var(--rubric); }
.why-lead { margin: 0 0 20px; font-size: 1.12rem; text-wrap: pretty; }
.why-reasons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 1.02rem; text-wrap: pretty; }
.why-reasons li { position: relative; padding-left: 1.5em; }
.why-tick { position: absolute; left: 0.1em; top: 0.05em; font-family: var(--sym); font-size: 0.92em; color: var(--ok); }
.why-limits { padding: 12px 16px 14px; border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn-soft) 55%, transparent); }
:root[data-theme="light"] .why-limits { border-color: color-mix(in srgb, var(--warn) 80%, transparent); }
.why-limits .why-k { margin-bottom: 4px; }
.why-limits p:last-child { margin: 0; font-size: 1rem; text-wrap: pretty; }
.why-case > :last-child { margin-bottom: 0; }

/* =====================================================================
   Days of Creation
   ===================================================================== */
/* three inks for the three kinds of day: dividing (days 1–3), filling (4–6), and rest (7) */
:root {
  --form-ink: var(--heaven-ink); --form-soft: var(--heaven-soft); --form-edge: var(--heaven-edge);
  --fill-ink: var(--genB-ink);   --fill-soft: var(--genB-soft);   --fill-edge: var(--genB-edge);
  --rest-ink: var(--beat-ink);   --rest-soft: var(--beat-soft);   --rest-edge: var(--beat-edge);
}
.kicker.divide { color: var(--form-ink); }
.kicker.fill { color: var(--fill-ink); }
.kicker.rest { color: var(--rest-ink); }

/* the chart: days 1–3 on the left, the days that fill them on the right, and between them a
   roundel carrying both numbers, with the words the two days share */
.cr-week { max-width: 72rem; margin: 0 auto; }
.cr-week-head, .cr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 1fr);
  align-items: center;
  gap: 0 22px;
}
.cr-week-head { margin-bottom: 6px; padding: 0 10px; font-family: var(--caps); font-size: 0.98rem; letter-spacing: 0.08em; color: var(--muted); }
.cr-h b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.6rem; letter-spacing: 0.04em; line-height: 1.2; }
.cr-h.divide { grid-column: 1; text-align: right; }
.cr-h.divide b { color: var(--form-ink); }
.cr-h.fill { grid-column: 3; }
.cr-h.fill b { color: var(--fill-ink); }
.cr-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--press); }
.cr-row {
  width: 100%;
  padding: 18px 10px;
  border: 0;
  border-bottom: 1px dotted var(--rule);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cr-row:hover .cr-day-t, .cr-row:focus-visible .cr-day-t, .cr-rest:hover .cr-day-t, .cr-rest:focus-visible .cr-day-t {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.cr-row:focus-visible, .cr-rest:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cr-row.sel { background: color-mix(in srgb, var(--rubric) 10%, transparent); }
/* the two days of a pair line up line by line — day and reference, title, what it holds, marks —
   however many lines either side takes, by sharing the row's grid lines (subgrid); the roundel
   stays centered between them */
.cr-row { grid-template-rows: repeat(4, auto); align-items: start; }
.cr-day { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; align-content: start; min-width: 0; }
.cr-row .cr-mid { grid-row: 1 / -1; align-self: center; }
.cr-row .cr-day:first-child { text-align: right; }
.cr-day-k { display: block; font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.1em; color: var(--muted); }
.cr-day-ref { margin-left: 0.35em; font-family: var(--text); font-size: 0.95em; font-style: italic; letter-spacing: 0; }
.cr-day-t { display: block; margin: 1px 0 4px; font-family: var(--display); font-size: 1.55rem; font-weight: 400; line-height: 1.15; }
.divide .cr-day-t { color: var(--form-ink); }
.fill .cr-day-t { color: var(--fill-ink); }
.rest .cr-day-t { color: var(--rest-ink); }
.cr-day-s { display: block; font-size: 0.97rem; line-height: 1.45; color: var(--muted); }
.cr-day-w { display: none; font-size: 0.86rem; font-style: italic; line-height: 1.35; color: var(--muted); }
.cr-marks { display: flex; flex-wrap: wrap; gap: 3px 16px; margin-top: 9px; }
.cr-row .cr-day:first-child .cr-marks { justify-content: flex-end; }
.cr-chip { font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.04em; white-space: nowrap; color: var(--ink); }
.cr-chip-k { margin-right: 6px; }
.cr-chip .vi { font-size: 0.92rem; }
.cr-chip .vi + .vi { margin-left: 3px; }
.cr-chip.c-broken { color: var(--bad); }
.cr-chip.c-none { color: var(--muted); }
.cr-dash { font-family: var(--text); }

.cr-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cr-n {
  position: relative;
  display: flex;
  align-items: center;
  width: 3.7rem;
  height: 3.7rem;
  border-radius: 50%;
  border: 2px solid transparent;
  /* a ring half in each ink: the day of dividing on the left, the day of filling on the right */
  background:
    linear-gradient(90deg, var(--form-soft) 50%, var(--fill-soft) 50%) padding-box,
    linear-gradient(90deg, var(--form-edge) 50%, var(--fill-edge) 50%) border-box;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1;
}
.cr-n > span { flex: 1; text-align: center; }
.cr-n > span + span { border-left: 1px solid var(--rule); }
.cr-n .divide { color: var(--form-ink); }
.cr-n .fill { color: var(--fill-ink); }
/* a rule from the roundel out to each day, the length of the middle column */
.cr-row .cr-n::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: calc(-1 * (11rem - 3.7rem) / 2);
  right: calc(-1 * (11rem - 3.7rem) / 2);
  height: 1px;
  background: var(--rubric);
  opacity: 0.8;
}
.cr-mid { position: relative; z-index: 0; }
.cr-link { font-family: var(--caps); font-size: 0.9rem; letter-spacing: 0.02em; line-height: 1.3; color: var(--ink); }
.cr-link-ref { display: block; margin-top: 2px; font-family: var(--text); font-size: 0.86rem; font-style: italic; letter-spacing: 0; color: var(--muted); }

/* day 7: a foundation stone under all six, ruled thick-and-thin, its roundel set in the top rule */
.cr-rest {
  position: relative;
  display: block;
  width: 100%;
  margin: 46px 0 0;
  padding: 42px 24px 26px;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  background:
    linear-gradient(var(--rest-edge), var(--rest-edge)) top / 100% 3px no-repeat,
    linear-gradient(var(--rest-edge), var(--rest-edge)) 0 6px / 100% 1px no-repeat,
    linear-gradient(var(--rest-edge), var(--rest-edge)) bottom / 100% 3px no-repeat,
    linear-gradient(var(--rest-edge), var(--rest-edge)) 0 calc(100% - 6px) / 100% 1px no-repeat,
    color-mix(in srgb, var(--rest-soft) 55%, transparent);
}
.cr-rest.sel { background-color: color-mix(in srgb, var(--rubric) 12%, var(--rest-soft)); }
.cr-rest .cr-day-t { font-size: 1.9rem; }
.cr-rest .cr-day-s { max-width: 40rem; margin: 0 auto; }
.cr-rest .cr-marks { justify-content: center; }
.cr-n7 {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
  border-color: var(--rest-edge);
  background: var(--rest-soft);
  color: var(--rest-ink);
  font-size: 1.6rem;
}

/* the study card: a pair's roundels carry both inks; day 7's is the ink of rest */
.rl-node.cr-pair {
  border: 3px solid transparent;
  background:
    linear-gradient(90deg, var(--form-soft) 50%, var(--fill-soft) 50%) padding-box,
    linear-gradient(90deg, var(--form-edge) 50%, var(--fill-edge) 50%) border-box;
}
.rl-node.cr-seven { border-color: var(--rest-edge); background: var(--rest-soft); }
.rl-node.cur.cr-pair { border-width: 4px; box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--rubric); }
.rl-node.cur.cr-seven { box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--rest-edge); }
/* the ampersand between a pair's numbers, raised to the middle of the line where their ink is centered */
.rl-amp { display: inline-block; margin: 0 0.12em; font-size: 0.7em; color: var(--muted); translate: 0 -0.081em; }
/* each refrain of the day on its own line: the marks, then the refrain, with where it comes beneath it in the text's column */
.conseq.cr-refrains p { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-items: baseline; }
.conseq.cr-refrains p .cr-w { grid-column: 2; }
.cr-ic { text-align: right; white-space: nowrap; }
.cr-ic .vi + .vi { margin-left: 2px; }
.conseq.cr-refrains p b { color: var(--ink); }
.conseq.cr-refrains p.c-broken b { color: var(--bad); }
.cr-refrains p.cr-not, .conseq.cr-refrains p.cr-not b { color: var(--muted); }

/* the table of refrains: days across, refrains down, the total at the end of each row */
table.cr-lg { max-width: 66rem; margin: 0 auto; }
table.cr-lg col.cr-col-r { width: 13.5rem; }
table.cr-lg col.cr-col-tot { width: 4.6rem; }
table.cr-lg .lg-group th { text-align: center; }
table.cr-lg .lg-group .divide-g { color: var(--form-ink); border-bottom: 2px solid var(--form-edge); }
table.cr-lg .lg-group .fill-g { color: var(--fill-ink); border-bottom: 2px solid var(--fill-edge); }
table.cr-lg .lg-group .rest-g { color: var(--rest-ink); border-bottom: 2px solid var(--rest-edge); }
table.cr-lg thead th.lg-genh { vertical-align: bottom; }
.cr-lg-by { color: var(--muted); }
.cr-lg-day { width: 100%; padding: 2px 0; border: 0; background: none; font-family: var(--display); font-size: 1.3rem; cursor: pointer; }
.cr-lg-day:hover, .cr-lg-day:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.cr-lg-day:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cr-lg-dh.divide .cr-lg-day { color: var(--form-ink); }
.cr-lg-dh.fill .cr-lg-day { color: var(--fill-ink); }
.cr-lg-dh.rest .cr-lg-day { color: var(--rest-ink); }
table.cr-lg tbody th { padding-right: 10px; text-align: left; font-family: var(--caps); font-size: 1rem; font-weight: 400; letter-spacing: 0.03em; line-height: 1.25; }
.lg-abbr { display: none; }
.lg-cell.cr-lg-cell { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 5px; height: auto; min-height: 34px; padding: 3px 2px; }
table.cr-lg .cr-lg-edge { box-shadow: -3px 0 0 0 var(--rule); }
table.cr-lg td.cr-lg-sel { background: color-mix(in srgb, var(--rubric) 6%, transparent); }
table.cr-lg th.cr-lg-sel { background: color-mix(in srgb, var(--rubric) 16%, transparent); }
table.cr-lg th.cr-lg-sel .cr-lg-day { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.cr-lg-tot { text-align: center; font-family: var(--display); font-size: 1.4rem; color: var(--rubric); }
table.cr-lg thead th.cr-lg-toth { font-family: var(--caps); color: var(--rubric); }
.cr-key-empty { display: inline-block; width: 1.9rem; height: 1.05rem; margin-right: 6px; vertical-align: -2px; background: var(--surface-2); opacity: 0.8; }

/* by the numbers: a figure set large in the margin of each entry */
.cr-stat-group { max-width: 72rem; margin: 0 auto 30px; }
.cr-stat-h { margin: 26px 0 8px; text-align: center; font-family: var(--caps); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.16em; color: var(--rubric); }
.cr-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 34px; margin: 0; padding: 0; list-style: none; }
.cr-stat {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  grid-template-areas: "n l" "n t";
  align-content: start;
  column-gap: 14px;
  padding: 13px 0 15px;
  border-top: 1px solid var(--rule);
}
.cr-stat-n { grid-area: n; align-self: start; font-family: var(--display); font-size: 2.6rem; line-height: 0.95; text-align: right; color: var(--rubric); }
.cr-stat-n.long { font-size: 1.8rem; line-height: 1.3; }
.cr-stat-l { grid-area: l; font-family: var(--caps); font-size: 1.05rem; letter-spacing: 0.03em; line-height: 1.3; }
.cr-stat-t { grid-area: t; margin-top: 3px; font-size: 0.92rem; line-height: 1.45; color: var(--muted); }

/* the popup notes */
.modal { border-color: var(--rule); }
.modal h2 { font-family: var(--display); font-weight: 400; }
.close { background: none; border-color: var(--rule); font-family: var(--sym); }
.pill { font-family: var(--caps); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--muted); }
.pill + .pill::before { content: "·"; margin-right: 0.45em; }
.caution { border-left-width: 3px; }
details.deeper { border-color: var(--rule); background: none; }
details.deeper > summary { font-family: var(--caps); font-weight: 400; letter-spacing: 0.04em; color: var(--rubric); }
details.deeper > summary::before { color: var(--rubric); }

/* a narrow cover: the refrains' marks in a narrower column */
@container (max-width: 46rem) {
  .conseq.cr-refrains p { grid-template-columns: 3.1rem minmax(0, 1fr); row-gap: 0; }
  .conseq.cr-refrains p .cr-w { grid-column: 2; }
}

/* =====================================================================
   The paired studies (js/pairs.js): From Grasping to Grace, Exodus Answers Genesis, Moses’
   Father-in-Law, The Five Books, The Five Scrolls, The First & the Second
   ===================================================================== */
/* Each tab gives its left side, right side, and lone entry an ink (--pa-*, --pb-*, --pc-*, set on
   the panel by js/pairs.js); these are the fallbacks. The chart is the Days of Creation's, with
   those inks in place of dividing, filling, and rest. */
.tab-panel {
  --pa-ink: var(--heaven-ink); --pa-soft: var(--heaven-soft); --pa-edge: var(--heaven-edge);
  --pb-ink: var(--genB-ink);   --pb-soft: var(--genB-soft);   --pb-edge: var(--genB-edge);
  --pc-ink: var(--beat-ink);   --pc-soft: var(--beat-soft);   --pc-edge: var(--beat-edge);
}
.tb-cover.pa { --sec-ink: var(--pa-ink); --sec-soft: var(--pa-soft); --sec-edge: var(--pa-edge); }
.tb-cover.pb { --sec-ink: var(--pb-ink); --sec-soft: var(--pb-soft); --sec-edge: var(--pb-edge); }
.tb-cover.pc { --sec-ink: var(--pc-ink); --sec-soft: var(--pc-soft); --sec-edge: var(--pc-edge); }
.kicker.pa { color: var(--pa-ink); }
.kicker.pb { color: var(--pb-ink); }
.kicker.pc { color: var(--pc-ink); }

.pr-week { max-width: 72rem; margin: 0 auto; }
.pr-week-head, .pr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 1fr);
  align-items: center;
  gap: 0 22px;
}
.pr-week-head { margin-bottom: 6px; padding: 0 10px; font-family: var(--caps); font-size: 0.98rem; letter-spacing: 0.08em; color: var(--muted); }
.pr-h b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.6rem; letter-spacing: 0.04em; line-height: 1.2; }
.pr-h.pa { grid-column: 1; text-align: right; }
.pr-h.pa b { color: var(--pa-ink); }
.pr-h.pb { grid-column: 3; }
.pr-h.pb b { color: var(--pb-ink); }
.pr-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--press); }
/* heads at the foot, for a chart read from the foot upward (the Five Books' mountain) */
.pr-week.heads-foot .pr-rows { border-top: 0; border-bottom: 1px solid var(--press); }
.pr-week.heads-foot .pr-rows > li:last-child .pr-row { border-bottom: 0; }
.pr-week.heads-foot .pr-week-head { margin: 12px 0 0; }
.pr-row {
  width: 100%;
  padding: 18px 10px;
  border: 0;
  border-bottom: 1px dotted var(--rule);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pr-row:hover .pr-t, .pr-row:focus-visible .pr-t, .pr-center:hover .pr-t, .pr-center:focus-visible .pr-t {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.pr-row:focus-visible, .pr-center:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pr-row.sel { background: color-mix(in srgb, var(--rubric) 10%, transparent); }
/* the two sides of a pair line up line by line (subgrid), with the roundel centered between them */
.pr-row { grid-template-rows: repeat(5, auto); align-items: start; }
.pr-side { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }
.pr-row .pr-mid { grid-row: 1 / -1; align-self: center; }
.pr-row .pr-side:first-child { text-align: right; }
.pr-k { display: block; font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.1em; color: var(--muted); }
.pr-ref { margin-left: 0.35em; font-family: var(--text); font-size: 0.95em; font-style: italic; letter-spacing: 0; }
.pr-t { display: block; margin: 1px 0 4px; font-family: var(--display); font-size: 1.55rem; font-weight: 400; line-height: 1.15; }
.pa .pr-t { color: var(--pa-ink); }
.pb .pr-t { color: var(--pb-ink); }
.pr-center .pr-t { color: var(--pc-ink); }
.pr-s { display: block; font-size: 0.97rem; line-height: 1.45; color: var(--muted); }
.pr-w { display: none; font-size: 0.86rem; font-style: italic; line-height: 1.35; color: var(--muted); }
.pr-tags { display: flex; flex-wrap: wrap; gap: 3px 16px; margin-top: 9px; }
.pr-row .pr-side:first-child .pr-tags { justify-content: flex-end; }
.pr-tag { font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.04em; color: var(--ink); }

.pr-mid { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pr-n {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.7rem;
  height: 3.7rem;
  border-radius: 50%;
  border: 2px solid transparent;
  /* a ring half in each ink: the left side's and the right side's */
  background:
    linear-gradient(90deg, var(--pa-soft) 50%, var(--pb-soft) 50%) padding-box,
    linear-gradient(90deg, var(--pa-edge) 50%, var(--pb-edge) 50%) border-box;
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--rubric);
}
/* a rule from the roundel out to each side, the length of the middle column */
.pr-row .pr-n::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: calc(-1 * (11rem - 3.7rem) / 2);
  right: calc(-1 * (11rem - 3.7rem) / 2);
  height: 1px;
  background: var(--rubric);
  opacity: 0.8;
}
/* a roundel with two numbers, each in its side's ink (the Five Books: 1 | 5, 2 | 4) */
.pr-n.pr-n2 { display: flex; align-items: center; font-size: 1.35rem; }
.pr-n2 > span { flex: 1; text-align: center; }
.pr-n2 > span + span { border-left: 1px solid var(--rule); }
.pr-n2 .pa { color: var(--pa-ink); }
.pr-n2 .pb { color: var(--pb-ink); }
.pr-link { font-family: var(--caps); font-size: 0.9rem; letter-spacing: 0.02em; line-height: 1.3; color: var(--ink); }
.pr-link-ref { display: block; margin-top: 2px; font-family: var(--text); font-size: 0.86rem; font-style: italic; letter-spacing: 0; color: var(--muted); }
.pr-mid .bt-strength { font-size: 0.86rem; }

/* the entry that stands alone — the summit above the pairs, or the foundation beneath them —
   ruled thick-and-thin in its own ink, with its roundel set in the rule */
.pr-center {
  position: relative;
  display: block;
  width: 100%;
  padding: 42px 24px 26px;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  background:
    linear-gradient(var(--pc-edge), var(--pc-edge)) top / 100% 3px no-repeat,
    linear-gradient(var(--pc-edge), var(--pc-edge)) 0 6px / 100% 1px no-repeat,
    linear-gradient(var(--pc-edge), var(--pc-edge)) bottom / 100% 3px no-repeat,
    linear-gradient(var(--pc-edge), var(--pc-edge)) 0 calc(100% - 6px) / 100% 1px no-repeat,
    color-mix(in srgb, var(--pc-soft) 55%, transparent);
}
.pr-center.foot { margin: 46px 0 0; }
.pr-center.top { margin: 30px 0 34px; }
.pr-center.sel { background-color: color-mix(in srgb, var(--rubric) 12%, var(--pc-soft)); }
.pr-center .pr-t { font-size: 1.9rem; }
.pr-center .pr-s { max-width: 40rem; margin: 0 auto; }
.pr-center .pr-tags { justify-content: center; }
.pr-nc {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translate(-50%, -50%);
  border-color: var(--pc-edge);
  background: var(--pc-soft);
  color: var(--pc-ink);
  font-size: 1.6rem;
}

/* the study card: a pair's roundels carry both inks; the lone entry's, its own */
.rl-node.pr-pair {
  border: 3px solid transparent;
  background:
    linear-gradient(90deg, var(--pa-soft) 50%, var(--pb-soft) 50%) padding-box,
    linear-gradient(90deg, var(--pa-edge) 50%, var(--pb-edge) 50%) border-box;
}
.rl-node.pr-cn { border-color: var(--pc-edge); background: var(--pc-soft); }
.rl-node.cur.pr-pair { border-width: 4px; box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--rubric); }
.rl-node.cur.pr-cn { box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--pc-edge); }

/* links to another tab look like the links within one */
a.link-btn { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }

/* the table of marks: the Days of Creation's, with a note column where a row needs one */
table.pr-lg { max-width: 66rem; }
table.pr-lg col.pr-col-note { width: 38%; }
table.pr-lg .lg-group .pr-g { text-align: center; }
table.pr-lg .lg-group .pr-g.pa { color: var(--pa-ink); border-bottom: 2px solid var(--pa-edge); }
table.pr-lg .lg-group .pr-g.pb { color: var(--pb-ink); border-bottom: 2px solid var(--pb-edge); }
table.pr-lg .lg-group .pr-g.pc { color: var(--pc-ink); border-bottom: 2px solid var(--pc-edge); }
table.pr-lg thead th.pr-lg-ch { vertical-align: bottom; font-family: var(--caps); font-size: 0.95rem; line-height: 1.25; }
table.pr-lg thead th.pr-lg-ch.pa { color: var(--pa-ink); }
table.pr-lg thead th.pr-lg-ch.pb { color: var(--pb-ink); }
table.pr-lg thead th.pr-lg-ch.pc { color: var(--pc-ink); }
table.pr-lg thead th.pr-lg-noteh { text-align: left; padding-left: 12px; }
.pr-lg-go { padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.pr-lg-go:hover, .pr-lg-go:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.pr-lg-go:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
table.pr-lg td.pr-lg-note { padding: 2px 0 2px 12px; font-size: 0.92rem; line-height: 1.4; color: var(--muted); text-align: left; vertical-align: middle; }
table.pr-lg tr.pr-lg-break td { padding: 14px 0 6px; text-align: center; font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.08em; color: var(--rubric); }
table.pr-lg tr.pr-lg-break td span { display: block; padding-top: 8px; border-top: 1px solid var(--press); }
table.pr-lg tr.pr-row-sel th, table.pr-lg tr.pr-row-sel td.pr-lg-note { background: color-mix(in srgb, var(--rubric) 8%, transparent); }
.pr-lg-sub { display: none; }

/* a table of words: headed columns, and a row head that opens the study */
.pr-lg-wrap { overflow-x: visible; }
table.pr-tt { width: 100%; min-width: 0; max-width: 72rem; margin: 0 auto; border-collapse: collapse; table-layout: auto; }
table.pr-tt th, table.pr-tt td { border: 0; border-bottom: 1px dotted var(--rule); padding: 10px 12px 10px 0; vertical-align: top; text-align: left; background: none; text-transform: none; letter-spacing: 0; font-size: 0.95rem; line-height: 1.45; }
table.pr-tt thead th { border-bottom: 1px solid var(--press); font-family: var(--caps); font-weight: 400; font-size: 0.98rem; letter-spacing: 0.06em; color: var(--rubric); vertical-align: bottom; }
table.pr-tt tbody th { font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.2; color: var(--ink); white-space: nowrap; }
table.pr-tt tbody th.pa { color: var(--pa-ink); }
table.pr-tt tbody th.pb { color: var(--pb-ink); }
table.pr-tt tbody th.pc { color: var(--pc-ink); }
table.pr-tt tr.pr-row-sel th, table.pr-tt tr.pr-row-sel td { background: color-mix(in srgb, var(--rubric) 8%, transparent); }
table.pr-tt tbody tr:last-child th { border-bottom: 0; }
table.pr-tt.pr-list tbody th { font-family: var(--caps); font-size: 1rem; color: var(--rubric); white-space: nowrap; }
table.pr-tt.pr-list td:first-of-type { font-weight: 600; }
.pr-acc { max-width: 60rem; }
.pr-extra .tb-drop-b { padding-left: 12px; }

/* What happens, scene by scene: a side's scenes as numbered steps strung on a thread of the side's ink, as the roll
   strings its roundels, each step its roundel, its name in small capitals, and its quotation at near the size of the
   text. The notes on the passage follow the last step. */
.sc-k { margin: 20px 0 12px; font-family: var(--caps); font-size: 1.02rem; letter-spacing: 0.12em; line-height: 1.3; color: var(--rubric); }
.sc-list { --sc-n: 2.3rem; margin: 0; padding: 0; list-style: none; }
.sc { position: relative; display: grid; grid-template-columns: var(--sc-n) minmax(0, 1fr); column-gap: 0.85rem; padding-bottom: 18px; }
.sc:last-child { padding-bottom: 0; }
.sc:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--sc-n) / 2 - 0.5px); top: var(--sc-n); bottom: 0; width: 1px; background: var(--sec-edge); opacity: 0.75; }
.sc-n {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--sc-n);
  height: var(--sc-n);
  border: 1.5px solid var(--sec-edge);
  border-radius: 50%;
  background: var(--sec-soft);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--sec-ink);
}
.sc-l { margin: 0.42rem 0 2px; font-family: var(--caps); font-size: 1.02rem; letter-spacing: 0.08em; line-height: 1.3; color: var(--sec-ink); }
.sc-q { margin: 0; font-size: 1.04rem; line-height: 1.5; text-wrap: pretty; }
.sc-notes { margin: 16px 0 0; }
.sc-wrap > .gloss > .gloss-b { margin: 10px 0 0; }
.sc-wrap > .pr-full { margin-bottom: 24px; }

/* How the two fit together, on a calendar: a lead, a key, and the events hung on one line by month, each on a
   diamond — filled where it stands in the texts, open where it rests on later tradition, where the line beside it
   runs dashed and the event is named so above its words. A marked event (the fiftieth day) is boxed in the rubric,
   with the weeks counted drawn above its words; the question the pair leaves open is set last, in the warm box of
   the limits. Inside "The lesson" its paragraphs are set at the size of the text, not the lesson's. */
.tl { --tl-x: 0.55rem; --tl-in: 1.9rem; margin: 2px 0 0; text-align: start; }
.tl p { margin: 0; font-size: 1.02rem; line-height: 1.5; text-wrap: pretty; }
.tl .tl-lead { font-size: 1.14rem; line-height: 1.58; }
.tl .tl-key { display: flex; flex-wrap: wrap; gap: 2px 22px; margin: 6px 0 20px; font-size: 1rem; color: var(--muted); }
.tl-key > span { display: inline-flex; align-items: center; gap: 0.55em; }
.tl-dia { flex: none; box-sizing: border-box; width: 0.6rem; height: 0.6rem; border: 1.5px solid var(--rubric); background: var(--rubric); transform: rotate(45deg); }
.tl-dia.open { background: var(--bg); }
.tl-line, .tl-evs { margin: 0; padding: 0; list-style: none; }
.tl-line { position: relative; }
.tl-gl::after, .tl-ev::after { content: ""; position: absolute; left: calc(var(--tl-x) - 1px); width: 2px; background: color-mix(in srgb, var(--press) 80%, transparent); }
/* the spine, drawn a stretch to each month and each event, so that it stops at the last event's diamond: a month's
   stretch spans the gap above it (.tl-g + .tl-g) and its own margin below; the first starts at its tick */
.tl-gl::after { top: -20px; bottom: -8px; }
.tl-g:first-child .tl-gl::after { top: 0.65rem; }
.tl-ev::after { top: 0; bottom: 0; }
.tl-ev.trad::after { content: none; }                      /* the dashed stretch, .tl-ev.trad::before, is drawn instead */
.tl-g:last-child .tl-ev:last-child::after { bottom: auto; height: 0.78rem; }   /* to the last diamond's middle */
.tl-g + .tl-g { margin-top: 20px; }
.tl .tl-gl { position: relative; margin: 0 0 8px; padding-left: var(--tl-in); font-family: var(--caps); font-size: 1rem; letter-spacing: 0.14em; line-height: 1.3; color: var(--muted); }
.tl-gl::before { content: ""; position: absolute; left: calc(var(--tl-x) - 0.45rem); top: calc(50% - 1px); width: 0.9rem; height: 2px; background: var(--press); }
.tl-ev { position: relative; padding: 0 0 16px var(--tl-in); }
.tl-g:last-child .tl-ev:last-child { padding-bottom: 0; }
.tl-ev > .tl-dia { position: absolute; z-index: 1; left: calc(var(--tl-x) - 0.3rem); top: 0.48rem; }
.tl-ev.trad::before { content: ""; position: absolute; left: calc(var(--tl-x) - 1px); top: 0; bottom: 0; border-left: 2px dashed var(--press); background: var(--bg); }
.tl .tl-k { margin-bottom: 2px; font-family: var(--caps); font-size: 1rem; letter-spacing: 0.08em; line-height: 1.3; color: var(--rubric); }
.tl-ev.trad .tl-k { color: var(--beat-ink); }
.tl-ev.trad > .tl-dia { top: 0.36rem; }
.tl-ev.mark .tl-b { padding: 11px 14px 13px; border: 1px solid var(--rubric); background: color-mix(in srgb, var(--rubric) 8%, transparent); }
.tl-ev.mark > .tl-dia { width: 0.8rem; height: 0.8rem; left: calc(var(--tl-x) - 0.4rem); top: calc(11px + 0.25rem); }
.tl-count { display: flex; align-items: center; gap: 4px; margin: 8px 0 10px; }
.tl-wk { flex: 1 1 0; display: grid; place-items: center; min-width: 0; height: 1.7rem; background: color-mix(in srgb, var(--rubric) 20%, transparent); font-family: var(--caps); font-size: 0.92rem; line-height: 1; color: var(--ink); }
.tl-day { flex: none; display: grid; place-items: center; box-sizing: border-box; width: 2.6rem; height: 2.6rem; margin-left: 4px; border: 2px solid var(--rubric); border-radius: 50%; font-family: var(--display); font-size: 1.25rem; line-height: 1; color: var(--rubric); }
.tl-close { margin-top: 22px; }
.tl-close .why-k { font-size: 1rem; }

/* The paragraph the steps or the timeline were drawn from, whole and folded beneath them: a ruled line that opens,
   with the pointing hand of the page's other folds. On paper it is printed open. */
.pr-full { margin: 22px 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: start; }
.pr-full > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 6px 4px 6px 30px;
  list-style: none;
  cursor: pointer;
  font-family: var(--caps);
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--rubric);
  -webkit-tap-highlight-color: transparent;
}
.pr-full > summary::-webkit-details-marker { display: none; }
.pr-full > summary::before { content: "☞"; content: "☞" / ""; position: absolute; left: 4px; top: 50%; translate: 0 -55%; font-family: var(--sym); font-size: 0.95em; }
.pr-full > summary:hover .pr-full-t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pr-full > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pr-full-ch { flex: none; width: 0.72em; height: 0.72em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease; }
.pr-full[open] .pr-full-ch { transform: rotate(180deg); }
.pr-full-b { padding: 4px 0 16px; }
.pr-full-b > p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .pr-full-ch { transition: none; } }
@media print {
  .pr-full::details-content { content-visibility: visible; }
  .pr-full-ch { display: none; }
}

@media (max-width: 780px) {
  /* the chart keeps its two columns on a phone: each side gives its title, and the roundel alone
     joins them (the summaries and shared words are in the study) */
  .pr-week-head, .pr-row { grid-template-columns: minmax(0, 1fr) 2.9rem minmax(0, 1fr); gap: 0 9px; }
  .pr-week-head { padding: 0 2px; font-size: 0.8rem; letter-spacing: 0.04em; }
  .pr-h b { font-size: 1.22rem; }
  .pr-row { padding: 13px 2px; }
  .pr-k { font-size: 0.8rem; letter-spacing: 0.06em; }
  .pr-ref { display: block; margin: 0; }
  .pr-ref.pr-inline { display: inline; margin-left: 0.35em; }
  .pr-t { font-size: 1.12rem; margin-bottom: 2px; }
  .pr-row .pr-s, .pr-link, .pr-mid .bt-strength { display: none; }
  .pr-w { display: block; }
  .pr-tags { flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 5px; }
  .pr-row .pr-side:first-child .pr-tags { align-items: flex-end; }
  .pr-tag { font-size: 0.84rem; }
  .pr-n { width: 2.9rem; height: 2.9rem; font-size: 1.12rem; }
  .pr-n.pr-n2 { font-size: 1.08rem; }
  .pr-row .pr-n::before { display: none; }
  .pr-center { padding: 34px 10px 20px; }
  .pr-center.foot { margin-top: 38px; }
  .pr-center .pr-t { font-size: 1.5rem; }
  .pr-center .pr-s { font-size: 0.94rem; }
  .pr-center .pr-tags { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
  .pr-nc { font-size: 1.3rem; }

  table.pr-lg col.pr-col-note, table.pr-lg td.pr-lg-note, table.pr-lg th.pr-lg-noteh { display: none; }
  table.pr-lg.has-note col.cr-col-r { width: 42%; }
  table.pr-lg tbody th { vertical-align: middle; }
  .pr-lg-sub { display: block; margin-top: 2px; font-family: var(--text); font-size: 0.8rem; line-height: 1.35; color: var(--muted); }
  table.pr-lg thead th.pr-lg-ch { font-size: 0.72rem; letter-spacing: 0; }
  table.pr-lg .lg-full { display: none; }
  table.pr-lg .lg-abbr { display: inline; }
  table.pr-lg tbody th { padding-right: 4px; font-size: 0.78rem; letter-spacing: 0; }

  /* a table of words becomes a stack of entries, each cell under its column's name */
  table.pr-tt, table.pr-tt tbody, table.pr-tt tr, table.pr-tt th, table.pr-tt td { display: block; width: auto; }
  table.pr-tt thead { display: none; }
  table.pr-tt tr { padding: 10px 0 8px; border-bottom: 1px solid var(--rule); }
  table.pr-tt th, table.pr-tt td { border: 0; padding: 2px 0; }
  table.pr-tt tbody th, table.pr-tt.pr-list tbody th { white-space: normal; margin-bottom: 4px; }
  table.pr-tt td[data-label]::before { content: attr(data-label) " · "; font-family: var(--caps); font-size: 0.92em; letter-spacing: 0.04em; color: var(--rubric); }
  table.pr-tt.pr-list td:first-of-type::before { content: none; }
  table.tb-tens-t td .tb-tens-ref { display: inline; margin-left: 0.3em; }
}

@media (max-width: 370px) {
  /* the chart, like the roll, keeps its size on a small phone set to larger text (each min() is its usual size until then) */
  .pr-week-head, .pr-row { grid-template-columns: minmax(0, 1fr) min(2.6rem, 13vw) minmax(0, 1fr); gap: 0 6px; }
  .pr-n { width: min(2.6rem, 13vw); height: min(2.6rem, 13vw); font-size: min(1rem, 5.1vw); }
  .pr-n.pr-n2 { font-size: min(0.98rem, 5vw); }
  .pr-h b { font-size: min(1.22rem, 6.2vw); }
  .pr-k { font-size: min(0.8rem, 4.1vw); }
  .pr-t { font-size: min(1.02rem, 5.2vw); }
  .pr-tag { font-size: min(0.78rem, 4vw); }
}

/* Tabernacle Layers: the four tens, the tent as a new Eden, and the scarlet through Scripture — tables of words (table.pr-tt) */
.tb-tens-key { max-width: 42rem; margin: -8px auto 14px; text-align: center; font-size: 0.95rem; color: var(--muted); }
.tb-tens-ref { display: block; margin-top: 1px; font-family: var(--text); font-size: 0.86rem; font-style: italic; letter-spacing: 0; color: var(--muted); }
table.pr-tt thead th .tb-tens-ref { font-size: 0.84rem; }
.tb-tag { display: block; margin-top: 3px; font-family: var(--caps); font-size: 0.86rem; letter-spacing: 0.03em; line-height: 1.3; color: var(--rubric); }
a.tb-tag { width: fit-content; margin-top: 5px; text-decoration: none; }
a.tb-tag:hover, a.tb-tag:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
a.tb-tag:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
table.tb-tens-t tbody th { font-size: 1.35rem; color: var(--rubric); text-align: center; }
table.tb-tens-t td { font-size: 1.02rem; }
.tb-tens-more, .tb-eden-more { margin-top: 22px; }
table.pr-tt td .tb-go { font-size: 0.84rem; }
/* The hinge at the bronze clasps and the seam at the gold (#tabernacle/clasps, #tabernacle/seam) are set like the four
   tens, with a few pieces of their own: a row of the table where the clasps join the two sets; notes headed inside the
   entries that open, as Noah's "How to read this page" heads its own (.nh-how h4); a line of sources under them; the
   figures beside the seam kept narrow enough to stand in two columns, one for each set of linen; and the links to the
   studies, centered at the foot of the page. */
table.pr-tt tr.tb-join td { padding: 16px 0 4px; border-bottom: 0; white-space: normal; text-align: center; font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.08em; color: var(--rubric); }
table.pr-tt tr.tb-join td > span { display: block; padding-top: 8px; border-top: 1px solid var(--press); }
/* the two sets side by side keep an equal width each, so the note across them does not crowd them out */
table.tb-pairs-t thead th:nth-child(2), table.tb-pairs-t thead th:nth-child(3) { width: 21%; }
.tb-notes h3 { margin: 22px 0 4px; font-family: var(--caps); font-size: 0.98rem; font-weight: 400; letter-spacing: 0.08em; color: var(--rubric); }
.tb-notes > :first-child { margin-top: 6px; }
.tb-notes h3 + p { margin-top: 4px; }
.tb-notes .lg-wrap { margin: 14px 0 6px; }
.tb-sources { margin: 16px 0 2px; font-size: 0.9rem; font-style: italic; color: var(--muted); }
.tb-sources a { color: inherit; text-underline-offset: 3px; }
.tb-seam .cr-stat-group { max-width: 52rem; margin-top: 34px; }
.tb-clasps > .tb-actions, .tb-seam > .tb-actions { justify-content: center; margin-top: 26px; }
@media (max-width: 780px) {
  table.pr-tt tr.tb-join { padding: 6px 0 0; border-bottom: 0; }
  .tb-clasps > .tb-actions, .tb-seam > .tb-actions { justify-content: flex-start; }   /* a list, the arrows in line with the entries above */
}

/* Noah: the title and its tabs, the seven covenant cards in a row that scrolls sideways, numbered lists,
   the paper icons and their window, and the sections beneath (tables are table.pr-tt) */

/* the translation switch above the title (js/noah.js) */
.nh-tr { margin: 0 0 18px; text-align: center; font-size: 0.92rem; font-style: italic; color: var(--muted); }
.nh-tr-name { font-weight: 400; color: var(--ink); }
.nh-tr-change { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; color: var(--rubric); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nh-tr-change:hover { text-decoration-thickness: 2px; }
.nh-tr-change:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nh-acc { margin-bottom: 18px; }
.nh-more { margin-top: 22px; }
.nh-key { max-width: 44rem; margin: 18px auto 0; text-align: center; font-size: 0.95rem; color: var(--muted); }

/* the tabs: only one section shows at a time */
.nh-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--rule); }
.nh-tabs button { padding: 6px 2px 5px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; font-family: var(--caps); font-size: 1rem; font-weight: 400; letter-spacing: 0.06em; color: var(--muted); cursor: pointer; }
.nh-tabs button:hover { color: var(--ink); }
.nh-tabs button[aria-selected="true"] { color: var(--rubric); border-bottom-color: var(--rubric); }
.nh-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nh-sec[hidden] { display: none; }

/* how to read this page */
.nh-how h4 { margin: 18px 0 4px; font-family: var(--caps); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.08em; color: var(--rubric); }
.nh-how h4:first-child { margin-top: 4px; }
.nh-how p { margin: 4px 0; }
.nh-legend { list-style: none; margin: 0; padding: 0; }
.nh-legend li { display: grid; grid-template-columns: 6.2rem 1fr; gap: 10px; margin: 6px 0; align-items: baseline; }
.nh-legend .bt-strength { grid-area: auto; }
.nh-fine { margin-top: 16px; font-size: 0.92rem; font-style: italic; color: var(--muted); }
.nh-small { max-width: 72rem; margin: 56px auto 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.nh-small ul { margin: 0; padding-left: 1.1em; }

/* the cards: one in view, the rest a swipe away; the row is as tall as the card in view */
.nh-stepper { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 6px; }
.nh-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; }
.nh-sg { display: inline-flex; gap: 6px; padding: 3px 7px; border: 1px dotted var(--rule); border-radius: 999px; }
.nh-steps button, .nh-arrow { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: none; box-shadow: none; font-family: var(--text); font-feature-settings: "lnum"; font-size: 1rem; line-height: 1; color: var(--muted); cursor: pointer; }
.nh-arrow { width: 2.2rem; height: 2.2rem; font-size: 1.5rem; padding-bottom: 3px; color: var(--rubric); border-color: var(--rubric); }
.nh-steps button:hover, .nh-arrow:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.nh-steps button[aria-current="true"] { border-color: var(--rubric); background: var(--rubric); color: var(--bg); }
.nh-arrow:disabled, .nh-end:disabled { opacity: 0.3; cursor: default; }
.nh-steps button:focus-visible, .nh-arrow:focus-visible, .nh-end:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nh-hint { margin: 0 0 12px; text-align: center; font-size: 0.88rem; font-style: italic; color: var(--muted); }
.nh-track { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 0 28px 0 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; scrollbar-width: none; transition: height 0.25s ease; }
.nh-track::-webkit-scrollbar { display: none; }
/* the next card shows as a faded edge, a hint that there is more to the right */
.nh-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), rgba(0, 0, 0, 0.28) calc(100% - 17px)); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), rgba(0, 0, 0, 0.28) calc(100% - 17px)); }
.nh-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nh-card { flex: 0 0 100%; min-width: 0; align-self: flex-start; scroll-snap-align: start; scroll-snap-stop: always; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); overflow: hidden; }
.nh-ck { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 14px; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--rubric) 7%, transparent); font-family: var(--caps); font-size: 0.9rem; letter-spacing: 0.06em; color: var(--rubric); }
.nh-cks { font-family: var(--text); font-size: 0.86rem; font-style: italic; letter-spacing: 0; color: var(--muted); }
.nh-lab { display: block; margin-bottom: 4px; font-family: var(--caps); font-size: 0.9rem; letter-spacing: 0.05em; color: var(--rubric); }
.nh-lab-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nh-r { font-family: var(--text); font-size: 0.86rem; font-style: italic; letter-spacing: 0; white-space: nowrap; color: var(--muted); }
.nh-lab .nh-r { margin-left: 0.4em; }
.nh-earlier { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); border-left: 3px solid var(--rubric); background: color-mix(in srgb, var(--rubric) 4%, transparent); font-size: 1rem; }
.nh-eb { flex: 1; min-width: 0; }
.nh-num { flex: none; display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-top: 1px; border: 1.5px solid var(--rubric); border-radius: 50%; font-family: var(--text); font-feature-settings: "lnum"; font-size: 1.05rem; color: var(--rubric); }
.nh-turn { display: block; margin-top: 5px; font-size: 0.92rem; font-style: italic; color: var(--muted); }
.nh-cols { display: grid; grid-template-columns: 1fr 1fr; }
.nh-col { min-width: 0; padding: 10px 14px 12px; font-size: 1.04rem; line-height: 1.5; }
.nh-col + .nh-col { border-left: 1px dotted var(--rule); }
.nh-col b { font-weight: 600; color: var(--rubric); }
.nh-vt { display: block; }
.nh-v { position: relative; top: -0.45em; margin-right: 0.15em; font-size: 0.68em; line-height: 0; vertical-align: baseline; color: var(--muted); }
a.nh-day { font-family: var(--caps); font-size: 0.9rem; letter-spacing: 0.05em; color: var(--rubric); text-decoration: none; }
a.nh-day:hover, a.nh-day:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
a.nh-day:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nh-share { padding: 10px 14px 12px; border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--rubric) 4%, transparent); font-size: 0.97rem; line-height: 1.5; }
.nh-verdict { display: block; font-weight: 600; }
.nh-lead { display: block; margin-top: 4px; }
.nh-foot { display: block; margin-top: 4px; color: var(--muted); }
.nh-endbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 0 16px; }
.nh-end { padding: 6px 4px; border: 0; background: none; box-shadow: none; font-family: var(--caps); font-size: 0.98rem; letter-spacing: 0.06em; color: var(--rubric); cursor: pointer; }
.nh-pos { font-size: 0.92rem; color: var(--muted); }
.nh-pos b { font-weight: 400; color: var(--ink); }

/* numbered lists */
ol.nl { list-style: none; counter-reset: nl; margin: 0.35em 0 0.5em; padding: 0; text-align: left; }
ol.nl > li { counter-increment: nl; position: relative; margin: 0.3em 0; padding-left: 2.15em; line-height: 1.45; }
ol.nl > li::before { content: counter(nl); position: absolute; left: 0; top: 0.12em; width: 1.5em; height: 1.5em; border: 1px solid var(--rubric); border-radius: 50%; font-family: var(--text); font-feature-settings: "lnum"; font-size: 0.78em; line-height: 1.55em; text-align: center; color: var(--rubric); }
td ol.nl { margin-top: 0.15em; }
ol.nl-flow { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 4px 0; }
ol.nl-flow > li { margin: 0.15em 0; padding-left: 1.95em; }
.tb-lede + ol.nl-flow { justify-content: center; margin: 0 auto 18px; font-size: 1.05rem; }
ol.nl > li.nl-hinge { counter-increment: none; padding-left: 0; font-style: italic; color: var(--ink); }
ol.nl > li.nl-hinge::before { content: none; }
.nh-mirror-list { text-align: left; }
/* The Bible version: a quotation the versions word differently is written in each, a face for each wording that names the
   versions it serves (<span data-tr="kjv web">), and the page's data-version (set from the Tools, js/prefs.js) shows one. */
html:not([data-version="kjv"]):not([data-version="web"]) [data-tr]:not([data-tr~="bsb"]),
html[data-version="kjv"] [data-tr]:not([data-tr~="kjv"]),
html[data-version="web"] [data-tr]:not([data-tr~="web"]) { display: none !important; }
/* Citations: js/noah-refs.js writes all three faces of a bracketed citation, and the page's data-cites (set from the
   Tools, js/prefs.js) shows one. A reference in a sentence (.ref-text) and a bare verse number (.ref-num)
   are words in the paper-icon and full-reference choices; in the bubble choice a bare number is a pill. */
.ref-cite, .ref-text, .ref-num { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; transform: none; cursor: pointer; }
.ref-text, .ref-num { color: inherit; text-decoration: underline dotted var(--muted); text-underline-offset: 0.2em; }
.ref-text:hover, .ref-text:focus-visible, .ref-num:hover, .ref-num:focus-visible { color: var(--rubric); text-decoration-color: var(--rubric); }
.ref-text:focus-visible, .ref-num:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vn-sep { white-space: pre-wrap; }

/* the paper icon: raised at the end of a quotation, as a power is raised beside a number */
.ref-cite { position: relative; top: -0.5em; display: inline-block; width: 0.74em; height: 0.92em; margin: 0 0 0 0.14em; color: var(--muted); line-height: 0; vertical-align: baseline; }
.ref-cite .c-i { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.ref-cite .c-b, .ref-cite .c-f { display: none; }
.ref-cite::after { content: ""; position: absolute; inset: -7px -7px -5px -7px; }       /* a tap target a little wider than the icon, but no taller than a line, so it never covers a citation on the next line */
.ref-cite:hover, .ref-cite:focus-visible { color: var(--rubric); }
.ref-cite:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html:not([data-cites="bubble"]):not([data-cites="full"]) .c-sp { display: none; }   /* the icon sits against the quotation */
.c-nb { white-space: nowrap; }   /* the citation stays with the word before it and the mark after it */

/* the bubble: the verse numbers in a small pill */
html[data-cites="bubble"] .ref-cite { top: 0; width: auto; height: auto; max-width: 100%; margin: 0 0 0 0.1em; padding: 0 0.5em; border: 1px solid var(--rule); border-radius: 0.8em; color: var(--ink); font-size: 0.8em; font-feature-settings: "lnum"; line-height: 1.55; white-space: normal; text-align: left; vertical-align: 0.08em; }
/* a bubble or a full reference may begin a line of its own, after the word it follows, where the line has no room for
   both; and one longer than the line breaks within itself. Only the icon is held to its word: it is too small to stand
   alone. Nothing is then wider than the column it stands in, at any size of text. */
html[data-cites="bubble"] .c-nb, html[data-cites="full"] .c-nb { white-space: normal; }
html[data-cites="bubble"] .c-wj, html[data-cites="full"] .c-wj { display: none; }
html[data-cites="bubble"] .ref-cite .c-i { display: none; }
html[data-cites="bubble"] .ref-cite .c-b { display: inline; }
html[data-cites="bubble"] .ref-cite::after { inset: -4px -3px; }
html[data-cites="bubble"] .ref-cite:hover, html[data-cites="bubble"] .ref-cite:focus-visible { border-color: var(--rubric); color: var(--rubric); }
html[data-cites="bubble"] .ref-cite:focus-visible { outline-offset: 2px; }
html[data-cites="bubble"] .ref-num { min-width: 1.9em; padding: 0 0.45em; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); text-align: center; text-decoration: none; font-size: 0.9em; font-feature-settings: "lnum"; }
html[data-cites="bubble"] .ref-num:hover, html[data-cites="bubble"] .ref-num:focus-visible { border-color: var(--rubric); color: var(--rubric); }
html[data-cites="bubble"] .nh-vns { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
html[data-cites="bubble"] .vn-sep { display: none; }

/* the full reference: as it is written, and tapped like the others */
html[data-cites="full"] .ref-cite { top: 0; width: auto; height: auto; margin: 0; color: inherit; line-height: inherit; white-space: normal; text-align: left; text-decoration: underline dotted var(--muted); text-underline-offset: 0.2em; }
html[data-cites="full"] .ref-cite .c-i { display: none; }
html[data-cites="full"] .ref-cite .c-f { display: inline; }
html[data-cites="full"] .ref-cite::after { content: none; }
html[data-cites="full"] .ref-cite:hover, html[data-cites="full"] .ref-cite:focus-visible { color: var(--rubric); text-decoration-color: var(--rubric); }
html[data-cites="full"] .ref-cite:focus-visible { outline-offset: 2px; }
.ref-text:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the window the icon opens */
.nh-pop { width: calc(100% - 32px); max-width: 34rem; max-height: min(82vh, 38rem); padding: 0; border: 1px solid var(--press); border-radius: 6px; background: var(--bg); color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.nh-pop[open] { display: flex; flex-direction: column; }
.nh-pop::backdrop { background: rgba(10, 6, 14, 0.62); }
.nh-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--rule); }
.nh-pop-head h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.3rem; color: var(--rubric); }
.nh-pop-x { width: 2.4rem; height: 2.4rem; padding: 0 0 3px; border: 0; border-radius: 50%; background: none; box-shadow: none; font-size: 1.7rem; line-height: 1; color: var(--muted); cursor: pointer; }
.nh-pop-x:hover, .nh-pop-x:focus-visible { color: var(--ink); }
.nh-pop-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.nh-pop-body { padding: 14px 18px 8px; overflow-y: auto; font-size: 1.1rem; line-height: 1.55; }
.nh-pop-v { margin: 0 0 12px; }
.nh-pop-ref { margin: 10px 0 2px; font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.05em; color: var(--rubric); }
.nh-pop-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; padding: 8px 18px 12px; border-top: 1px solid var(--rule); }
.nh-pop-src { margin: 0; font-size: 0.82rem; font-style: italic; color: var(--muted); }
.nh-pop-read { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; font-size: 0.95rem; color: var(--rubric); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nh-pop-read:hover { text-decoration-thickness: 2px; }
.nh-pop-read:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nh-pop-wait { color: var(--muted); font-style: italic; }

/* the sections beneath (How it is built, Unmade and remade, The creatures, By the numbers) */
table.nh-tt tbody th { white-space: normal; width: 9.5rem; }
table.nh-tt td.nh-none { color: var(--muted); text-align: center; }
table.nh-list-t td:last-child { font-family: var(--caps); letter-spacing: 0.03em; color: var(--muted); white-space: nowrap; }
table.nh-num-t { max-width: 40rem; }
table.nh-num-t thead th:not(:first-child), table.nh-num-t td { text-align: center; }
table.nh-num-t td { font-family: var(--display); font-size: 1.15rem; }
table.nh-num-t td .tb-tens-ref { font-size: 0.8rem; }
table.nh-num-t tbody tr:last-child th, table.nh-num-t tbody tr:last-child td { border-top: 1px solid var(--rule); color: var(--muted); }
.nh-mirror { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 16px; margin: 6px auto 0; font-family: var(--display); font-size: 1.7rem; color: var(--rubric); }
.nh-mirror .nh-hinge { padding: 0 10px; font-family: var(--caps); font-size: 1rem; letter-spacing: 0.06em; color: var(--ink); }
@media (max-width: 780px) {
  .nh-tabs { gap: 2px 16px; }
  .nh-tabs button { font-size: 0.92rem; }
  .nh-legend li { grid-template-columns: 5.2rem 1fr; }
  .nh-stepper { gap: 6px; }
  .nh-sg { gap: 3px; padding: 2px 4px; }
  .nh-steps { gap: 4px 6px; }
  .nh-steps button { width: 1.75rem; height: 1.75rem; font-size: 0.92rem; }
  .nh-arrow { width: 2rem; height: 2rem; }
  .nh-track { gap: 8px; padding: 0 22px 0 10px; scroll-padding: 0 10px; }
  .nh-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), rgba(0, 0, 0, 0.28) calc(100% - 15px)); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), rgba(0, 0, 0, 0.28) calc(100% - 15px)); }
  .nh-ck { padding: 5px 10px; font-size: 0.82rem; }
  .nh-earlier { gap: 8px; padding: 8px 10px; font-size: 0.94rem; }
  .nh-num { width: 1.55rem; height: 1.55rem; font-size: 0.95rem; }
  .nh-col { padding: 8px 8px 10px; font-size: 0.92rem; line-height: 1.42; }
  .nh-share { padding: 8px 10px 10px; font-size: 0.92rem; }
  .nh-lab, .nh-r { font-size: 0.8rem; }
  .nh-endbar { padding: 0 10px; }
  .nh-pop-body { font-size: 1.04rem; }
  table.nh-tt tbody th { width: auto; }
  table.nh-tt td.nh-none { display: none; }
  table.nh-list-t td:last-child { white-space: normal; }
  /* the counts keep their three columns: each is a word and two numbers */
  table.nh-num-t { display: table; }
  table.nh-num-t thead { display: table-header-group; }
  table.nh-num-t tbody { display: table-row-group; }
  table.nh-num-t tr { display: table-row; padding: 0; }
  table.nh-num-t th, table.nh-num-t td { display: table-cell; padding: 8px 8px 8px 0; border-bottom: 1px dotted var(--rule); }
  table.nh-num-t td[data-label]::before { content: none; }
  table.nh-num-t thead th { font-size: 0.86rem; }
  .nh-mirror { gap: 2px 10px; font-size: 1.35rem; }
  .nh-mirror .nh-hinge { flex-basis: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .nh-track { transition: none; } }

/* =====================================================================
   Narrower screens
   ===================================================================== */

@media (max-width: 780px) {
  html { font-size: 16.5px; }
  body { font-size: 1.09rem; }
  header { padding: 34px 6px 26px; margin-top: 38px; }
  h1 .t2 { font-size: clamp(1.7rem, 8.4vw, 2.6rem); letter-spacing: 0.06em; }
  .tb-card { margin-top: 44px; padding: 0; }
  .tb-drop-b { padding: 0 6px 12px 34px; }
  details.tb-howto .tb-drop-s { flex-basis: 100%; }
  details.tb-howto .tb-drop-s::before { content: none; }
  details.tb-howto > .tb-drop-b { padding: 4px 4px 14px; }
  details.tb-sub > .tb-drop-b { padding: 0 2px 12px 22px; }

  /* the roll is a picture: on a phone set to larger text it keeps its size (each min() is its usual size until then)
     rather than run past the screen's edge */
  .tb-roll { gap: 14px; padding: 0 10px; margin-bottom: 22px; }
  .rl-node { width: min(4.6rem, 22vw); height: min(4.6rem, 22vw); padding: 4px; }
  .rl-node .rl-name { font-size: min(0.68rem, 3.1vw); }
  .rl-node .rl-n { font-size: min(1.15rem, 5.3vw); }
  .rl-node.cur { width: min(7.8rem, 36vw); height: min(7.8rem, 36vw); }
  .rl-node.cur .rl-n { font-size: min(1.8rem, 8.3vw); }
  .rl-node.cur .rl-name { font-size: min(0.94rem, 4.3vw); }
  .rl-node.pair:not(.cur) .rl-name { font-size: min(0.64rem, 2.9vw); letter-spacing: 0; }
  .rl-end { width: min(4.6rem, 22vw); font-size: min(0.78rem, 3.6vw); }

  /* one long word (“RIGHTEOUSNESS”) must still fit a small phone */
  .tb-d-title { font-size: clamp(1.8rem, 11.5vw, 2.7rem); }
  .tb-d-title.long { font-size: clamp(1.4rem, 8.6vw, 2.1rem); }
  .tb-pair { gap: 48px; }
  .tb-cover-head { --n: 4.4rem; margin-bottom: 24px; }
  .tb-cover-n { font-size: 2.05rem; }
  .tb-cover-head h3 { font-size: 1.9rem; }
  /* a phone's narrow column, ragged-right as at every width, is broken within the longer words, so that its lines
     run more evenly */
  .tb-detail .m-text, .tb-detail .tb-why, .tb-detail .conseq p, .tb-detail .tb-over-meaning, .tb-detail .tb-d-summary,
  .tb-detail .tb-d-place, .tb-detail .tb-lesson p, .tb-detail .tb-echoes > p, .tb-detail .bt-caution, .tb-detail .gloss-i,
  .tb-detail .why-case p, .tb-detail .why-reasons li, .tb-detail .why-def, .tb-detail .sc-q, .tb-detail .tl p {
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
  }
  .tb-d-nav .link-btn { font-size: 0.92rem; }
  .why-panel { padding: 20px 16px 22px; }
  .why-limits { padding: 10px 12px 12px; }

  /* the list keeps both sides on a phone: each Beatitude on the left, its covenant on the right,
     the number between them; the tense sits under the Beatitude and the strength under the covenant */
  .bt-ladder-head, .bt-rung { grid-template-columns: minmax(0, 1fr) 2.6rem minmax(0, 1fr); gap: 0 10px; }
  .bt-ladder-head { padding: 0 2px; font-size: 0.84rem; letter-spacing: 0.06em; }
  .bt-ladder-head span:first-child { grid-column: 1; }
  .bt-ladder-head span:last-child { grid-column: 3; }
  .bt-ladder::before { display: none; }
  .bt-rung { grid-template-areas: "beat n cov" "tense n strength"; align-items: start; row-gap: 5px; padding: 12px 2px; }
  .bt-n { grid-area: n; align-self: center; width: 2.6rem; height: 2.6rem; font-size: 1.12rem; }
  .bt-beat { grid-area: beat; }
  .bt-cov { grid-area: cov; }
  .bt-tense { grid-area: tense; padding-left: 0; text-align: right; font-size: 0.8rem; }
  .bt-strength { grid-area: strength; font-size: 0.8rem; }
  .bt-beat b, .bt-cov b { font-size: 1.1rem; }
  .bt-beat i, .bt-cov i { font-size: 0.84rem; line-height: 1.4; }

  /* the chart keeps its two columns on a phone: each day gives its title and marks, and the
     roundel alone joins them (the summaries and shared words are in the study) */
  .cr-week-head, .cr-row { grid-template-columns: minmax(0, 1fr) 2.9rem minmax(0, 1fr); gap: 0 9px; }
  .cr-week-head { padding: 0 2px; font-size: 0.8rem; letter-spacing: 0.04em; }
  .cr-h b { font-size: 1.22rem; }
  .cr-row { padding: 13px 2px; }
  .cr-day-k { font-size: 0.8rem; letter-spacing: 0.06em; }
  .cr-day-ref { display: block; margin: 0; }
  .cr-day-ref.cr-inline { display: inline; margin-left: 0.35em; }
  .cr-day-t { font-size: 1.12rem; margin-bottom: 2px; }
  .cr-row .cr-day-s, .cr-link { display: none; }
  .cr-day-w { display: block; }
  .cr-marks { flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 5px; }
  .cr-row .cr-day:first-child .cr-marks { align-items: flex-end; }
  .cr-chip { font-size: 0.84rem; }
  .cr-n { width: 2.9rem; height: 2.9rem; font-size: 1.08rem; }
  .cr-row .cr-n::before { display: none; }
  .cr-rest { margin-top: 38px; padding: 34px 10px 20px; }
  .cr-rest .cr-day-t { font-size: 1.5rem; }
  .cr-rest .cr-day-s { font-size: 0.94rem; }
  .cr-rest .cr-marks { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
  .cr-n7 { font-size: 1.3rem; }

  table.cr-lg col.cr-col-r { width: 5.4rem; }
  table.cr-lg col.cr-col-tot { width: 2.3rem; }
  table.cr-lg col.cr-col-7 { width: 2.4rem; }
  table.cr-lg .lg-group th { padding: 2px 0 5px; font-size: 0.7rem; letter-spacing: 0.02em; }
  table.cr-lg .lg-full, .cr-lg-by { display: none; }
  table.cr-lg .lg-abbr { display: inline; }
  table.cr-lg tbody th { padding-right: 4px; font-size: 0.78rem; letter-spacing: 0; }
  table.cr-lg thead th.lg-genh, table.cr-lg thead th.cr-lg-toth { font-size: 0.7rem; }
  .cr-lg-day { font-size: 1rem; }
  .lg-cell.cr-lg-cell { gap: 0 2px; min-height: 28px; padding: 2px 1px; }
  .lg-cell.cr-lg-cell .vi { width: auto; height: auto; font-size: 0.66rem; }
  .cr-lg-tot { font-size: 1.05rem; }
  .cr-stats { grid-template-columns: minmax(0, 1fr); }
  .cr-stat { grid-template-columns: 3.7rem minmax(0, 1fr); column-gap: 12px; }
  .cr-stat-n { font-size: 2.1rem; }
  .cr-stat-n.long { font-size: 1.45rem; }
}

@media (max-width: 370px) {
  .tb-roll { gap: 8px; padding: 0 4px; }
  .rl-node { width: min(4rem, 20.5vw); height: min(4rem, 20.5vw); padding: 3px; }
  .rl-node .rl-name { font-size: min(0.6rem, 3.1vw); }
  .rl-node.cur { width: min(6.9rem, 35vw); height: min(6.9rem, 35vw); }
  .rl-node.cur .rl-n { font-size: min(1.55rem, 8vw); }
  .rl-node.cur .rl-name { font-size: min(0.82rem, 4.2vw); }
  .rl-end { width: min(4rem, 20.5vw); font-size: min(0.7rem, 3.6vw); }
  /* the seven weeks and the fiftieth day of the Pentecost timeline, like the roll, keep their size on a small phone
     set to larger text */
  .tl-count { gap: 3px; }
  .tl-wk { font-size: min(0.92rem, 4.2vw); }
  .tl-day { width: min(2.6rem, 12.2vw); height: min(2.6rem, 12.2vw); font-size: min(1.25rem, 6vw); }

  .bt-ladder-head, .bt-rung { grid-template-columns: minmax(0, 1fr) 2.3rem minmax(0, 1fr); gap: 0 7px; }
  .bt-ladder-head { font-size: 0.76rem; letter-spacing: 0.03em; }
  .bt-n { width: 2.3rem; height: 2.3rem; font-size: 1rem; }
  .bt-beat b, .bt-cov b { font-size: 1rem; }
  .bt-beat i, .bt-cov i { font-size: 0.8rem; }
  .bt-tense, .bt-strength { font-size: 0.74rem; letter-spacing: 0.02em; }

  .cr-week-head, .cr-row { grid-template-columns: minmax(0, 1fr) 2.6rem minmax(0, 1fr); gap: 0 6px; }
  .cr-n { width: 2.6rem; height: 2.6rem; font-size: 0.98rem; }
  .cr-day-t { font-size: 1.02rem; }
  .cr-chip { font-size: 0.78rem; }
  table.cr-lg col.cr-col-r { width: 4.7rem; }
  table.cr-lg col.cr-col-tot { width: 1.9rem; }
  table.cr-lg col.cr-col-7 { width: 2.2rem; }
  table.cr-lg .lg-group th { font-size: 0.64rem; letter-spacing: 0; }
  table.cr-lg tbody th { font-size: 0.7rem; }
  .lg-cell.cr-lg-cell .vi { font-size: 0.6rem; }
}

/* ---- the Bible, to read here (js/bible.js) ---- */
.bb { max-width: 42rem; margin: 0 auto; padding-bottom: 3rem; }
.bb-title { margin: 54px 0 2px; text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 2.8rem); letter-spacing: 0.04em; color: var(--ink); }
.bb-sub { margin: 0 0 8px; text-align: center; font-style: italic; color: var(--muted); }
/* the box to hide the verse numbers */
.bb-opt { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin: 0 0 12px; padding: 6px 10px; font-size: 1.02rem; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bb-opt input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--rubric); cursor: pointer; }
.bb-opt:hover { color: var(--ink); }
.bb-opt input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bb.no-nums .bb-n { display: none; }
/* the name of the chapter, which stays at the top of the screen while it is read, and opens the choice of book, chapter and verse */
.bb-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0; background: var(--bg); border-top: 3px double var(--press); border-bottom: 1px solid var(--rule); }
.bb-ref, .bb-step, .bb-more, .bb-crumb, .bb-pick-x, .bb-b, .bb-c, .bb-vn, .bb-open, .bb-back { border-radius: 0; box-shadow: none; font-family: inherit; cursor: pointer; }
.bb-ref { display: inline-flex; align-items: baseline; gap: 8px; min-width: 11rem; justify-content: center; padding: 4px 10px; border: 0; border-bottom: 1px dotted var(--muted); background: none; font-family: var(--display); font-size: clamp(1.35rem, 3.2vw, 1.75rem); font-weight: 400; color: var(--ink); }
.bb-caret { font-size: 0.7em; color: var(--rubric); }
.bb-ref:hover, .bb-ref:focus-visible { color: var(--rubric); }
.bb-step { width: 2.5rem; height: 2.5rem; padding: 0 0 3px; border: 1px solid var(--rule); background: none; font-size: 1.7rem; line-height: 1; color: var(--muted); }
.bb-step:hover:not(:disabled), .bb-step:focus-visible { border-color: var(--rubric); color: var(--rubric); }
.bb-step:disabled, .bb-more:disabled { opacity: 0.3; cursor: default; }
.bb-ref:focus-visible, .bb-step:focus-visible, .bb-more:focus-visible, .bb-crumb:focus-visible, .bb-pick-x:focus-visible, .bb-b:focus-visible, .bb-c:focus-visible, .bb-vn:focus-visible, .bb-open:focus-visible, .bb-back:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.bb-text { padding: 20px 4px 8px; font-size: 1.24rem; line-height: 1.78; scroll-margin-top: 4.2rem; overflow-wrap: break-word; }
.bb-ch { margin: 4px 0 18px; text-align: center; font-family: var(--display); font-weight: 400; font-size: 1.5rem; letter-spacing: 0.06em; color: var(--rubric); }
.bb-p { margin: 0 0 1.05em; }
.bb-s { margin: 0 0 1.05em; line-height: 1.62; }
.bb-l { padding-left: 1.6em; text-indent: -1.6em; }
.bb-head { margin: 1.2em 0 0.5em; text-align: center; font-weight: 400; font-style: italic; font-size: 1rem; color: var(--muted); }
.bb-n { position: relative; top: -0.15em; margin-right: 0.28em; font-family: var(--text); font-size: 0.6em; font-weight: 400; font-feature-settings: "lnum"; color: var(--rubric); vertical-align: super; line-height: 0; }
.bb-t { transition: background-color 1.4s ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bb-t.is-target { background: color-mix(in srgb, var(--rubric) 20%, transparent); }
.bb-wait { text-align: center; font-style: italic; color: var(--muted); }
.bb-retry { padding: 0; border: 0; background: none; font: inherit; color: var(--rubric); text-decoration: underline; cursor: pointer; }
.bb-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.bb-more { max-width: 48%; padding: 8px 12px; border: 1px solid var(--rule); background: none; font-size: 1.05rem; color: var(--ink); }
.bb-more:hover:not(:disabled) { border-color: var(--rubric); color: var(--rubric); }

/* the choice: a sheet over the page, book, then chapter, then verse */
.bb-pick { width: calc(100% - 24px); max-width: 40rem; max-height: min(84vh, 44rem); padding: 0; border: 1px solid var(--press); border-radius: 6px; background: var(--bg); color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.bb-pick[open] { display: flex; flex-direction: column; overflow: hidden; }   /* only the list inside scrolls, so the crumbs stay in view */
.bb-pick::backdrop { background: rgba(10, 6, 14, 0.62); }
.bb-pick-head { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; padding: 6px 6px 0 10px; border-bottom: 1px solid var(--rule); }
.bb-crumbs { display: flex; flex: 1; min-width: 0; }
.bb-crumb { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px 7px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); text-align: left; }
.bb-crumb:disabled { opacity: 0.4; cursor: default; }
.bb-crumb[aria-current="step"] { border-bottom-color: var(--rubric); color: var(--ink); }
.bb-crumb-k { font-family: var(--caps); font-size: 0.8rem; letter-spacing: 0.12em; }
.bb-crumb-v { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.3em; font-size: 1.05rem; color: var(--rubric); }
.bb-pick-x { align-self: center; width: 2.4rem; height: 2.4rem; padding: 0 0 3px; border: 0; background: none; font-size: 1.7rem; line-height: 1; color: var(--muted); }
.bb-pick-x:hover { color: var(--ink); }
.bb-pick-body { flex: 1 1 auto; min-height: 0; padding: 12px 14px 16px; overflow-y: auto; overscroll-behavior: contain; }
.bb-find input { display: block; box-sizing: border-box; width: 100%; margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 0; background: none; font: inherit; color: var(--ink); }
.bb-find input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.bb-test h4 { margin: 14px 0 4px; padding-bottom: 4px; border-bottom: 3px double var(--press); font-family: var(--caps); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.18em; color: var(--rubric); }
.bb-set-h { margin: 10px 0 5px; font-style: italic; font-size: 0.95rem; color: var(--muted); }
.bb-grid { display: grid; gap: 6px; }
.bb-books { grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); }
.bb-nums { grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); }
.bb-b, .bb-c, .bb-vn { padding: 8px 6px; border: 1px solid var(--rule); background: none; color: var(--ink); font-size: 1.08rem; line-height: 1.2; text-align: center; }
.bb-b { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.45em; text-align: left; padding-left: 10px; }
.bb-tag { font-size: 0.8em; font-style: italic; color: var(--muted); }
.bb-b:hover .bb-tag, .bb-b[aria-current] .bb-tag { color: inherit; }
.bb-b:hover, .bb-c:hover, .bb-vn:hover { border-color: var(--rubric); color: var(--rubric); }
.bb-b[aria-current], .bb-c[aria-current] { border-color: var(--rubric); background: color-mix(in srgb, var(--rubric) 12%, transparent); color: var(--rubric); }
.bb-b[hidden], .bb-set[hidden], .bb-test[hidden] { display: none; }
.bb-c, .bb-vn { font-family: var(--text); font-feature-settings: "lnum"; }
.bb-lead { margin: 0 0 12px; font-size: 1.1rem; }
.bb-back { margin-right: 8px; padding: 3px 8px; border: 1px solid var(--rule); background: none; font-size: 0.95rem; color: var(--muted); }
.bb-back:hover { border-color: var(--rubric); color: var(--rubric); }
.bb-whole { padding: 8px 14px; border: 1px solid var(--rubric); background: none; font-size: 1.05rem; color: var(--rubric); }
.bb-none { text-align: center; font-style: italic; color: var(--muted); }

@media (max-width: 780px) {
  .bb-title { margin-top: 44px; }
  .bb-text { font-size: 1.17rem; line-height: 1.72; padding-left: 0; padding-right: 0; }
  .bb-ref { min-width: 0; flex: 1; }
  .bb-books { grid-template-columns: repeat(2, 1fr); }
  .bb-pick-body { padding: 10px 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .bb-t { transition: none; } }
@media print { .bb-bar, .bb-foot, .bb-pick { display: none; } }

/* ---- search the Bible (js/bible-search.js) ---- */
.bb-searchbtn { margin-left: 4px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.bb-searchbtn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.bb-search { width: calc(100% - 20px); max-width: 44rem; height: min(88vh, 48rem); max-height: calc(100vh - 24px); margin-top: 12px; margin-bottom: auto; padding: 0; border: 1px solid var(--press); border-radius: 6px; background: var(--bg); color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); overflow: hidden; }
.bb-search[open] { display: flex; flex-direction: column; }
.bb-search::backdrop { background: rgba(10, 6, 14, 0.62); }
.bb-search-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--rule); }
.bb-search-head h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--rubric); }
.bb-search-form { flex: none; padding: 12px 14px 4px; }
.bb-search-form input[type="search"] { display: block; box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 0; background: none; font: inherit; font-size: 1.12rem; color: var(--ink); -webkit-appearance: none; appearance: none; }
.bb-search-form input[type="search"]:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.bb-search-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.bb-scope select { max-width: 100%; padding: 7px 8px; border: 1px solid var(--rule); border-radius: 0; background: var(--bg); font: inherit; font-size: 1rem; color: var(--ink); }
.bb-scope select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.bb-scope-ver select { font-family: var(--caps); letter-spacing: 0.08em; }
.bb-whole-l { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; color: var(--muted); cursor: pointer; }
.bb-whole-l input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--rubric); cursor: pointer; }
.bb-whole-l input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bb-search-status { flex: none; margin: 8px 16px 6px; min-height: 1.3em; font-size: 0.98rem; font-style: italic; color: var(--muted); }
.bb-search-results { flex: 1 1 auto; min-height: 0; padding: 0 12px 14px; overflow-y: auto; overscroll-behavior: contain; }
.bb-rh { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 4px; padding: 0 4px 3px; border-bottom: 1px solid var(--rule); font-family: var(--caps); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.12em; color: var(--rubric); }
.bb-rh span { font-family: var(--text); font-size: 0.9rem; letter-spacing: 0; color: var(--muted); font-feature-settings: "lnum"; }
.bb-res { margin: 0; padding: 0; list-style: none; }
.bb-hit { display: block; width: 100%; padding: 8px 6px 9px; border: 0; border-bottom: 1px dotted var(--rule); border-radius: 0; background: none; box-shadow: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.bb-hit:hover, .bb-hit:focus-visible { background: color-mix(in srgb, var(--rubric) 8%, transparent); }
.bb-hit:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.bb-hit-r { display: block; margin-bottom: 1px; font-family: var(--caps); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--rubric); }
.bb-hit-t { display: block; font-size: 1.05rem; line-height: 1.45; }
.bb-hit-t mark { padding: 0 1px; background: color-mix(in srgb, var(--rubric) 24%, transparent); color: inherit; border-radius: 2px; }
.bb-jump, .bb-more-btn { display: block; width: 100%; margin: 10px 0 4px; padding: 11px 12px; border: 1px solid var(--rubric); border-radius: 0; background: none; box-shadow: none; font: inherit; font-size: 1.08rem; color: var(--rubric); cursor: pointer; }
.bb-jump:hover, .bb-more-btn:hover, .bb-jump:focus-visible, .bb-more-btn:focus-visible { background: color-mix(in srgb, var(--rubric) 10%, transparent); }
.bb-jump:focus-visible, .bb-more-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 780px) {
  .bb-search { width: calc(100% - 12px); }
  .bb-hit-t { font-size: 1rem; }
}
@media print { .bb-search { display: none; } }

/* ------------------------------------------------------------------ the figure card (js/pairs.js)
   One drawing set before a tab's chart, so the page's idea is seen before it is read. The SVG is
   drawn in the site's inks (var(--ink), var(--muted), the identity colors), so it follows the theme. */
.pr-figure .pr-fig { margin: 0.9rem 0 0.15rem; }
.pr-fig svg { display: block; width: 100%; height: auto; }
.pr-fig text { font-family: inherit; }
.pr-fig-cap { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.86rem; font-style: italic; }