/* =====================================================================
   The pages of a chapter (js/pager.js): one page of a chapter in view at a time, the rest put away; the row of the bar
   at the foot of the screen that steps between them; and the list of them under the chapter, in the chapters' sheet.
   The row stands above the bar's two buttons, under a hairline: the page before and the page after, each named, as
   the catchwords at the foot of a printed page name the next. The row is there only while a chapter with pages is
   open (html.tk-pages), and the bar is the taller for it.
   ===================================================================== */

/* a page put away, and a card whose pages are all put away */
.pg-off { display: none !important; }

/* the bar is taller by the row */
:root.tk-pages { --tk-h: calc(58px + 44px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { :root.tk-pages { --tk-h: calc(54px + 42px + env(safe-area-inset-bottom, 0px)); } }

/* the row: the bar is a column of the row and its buttons, which share its height between them */
.tk-bar { display: flex; flex-direction: column; }
.tk-row { flex: 1 1 auto; height: auto; min-height: 0; width: 100%; }
.tk-pages-row { flex: none; display: flex; align-items: stretch; height: 44px; width: 100%; max-width: 34rem; margin: 0 auto; }
.tk-pages-row[hidden] { display: none; }
/* under a hairline, and over the bar's own double rule, which runs the width of the screen */
:root.tk-pages .tk-bar { border-top: 1px solid var(--press); }
:root.tk-pages .tk-row { border-top: 3px double var(--press); }
@media (min-width: 768px) { .tk-pages-row { height: 42px; max-width: 40rem; } }

/* the page before, and the page after: each half of the row, its name kept beside its arrow; the arrows at the ends
   are set in 16px, as far as the page's text stands from the edge of a phone's screen (--gutter) */
.tk-pg-step {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 10px;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted);
  font: inherit; font-family: var(--caps); font-size: 0.86rem; letter-spacing: 0.1em; line-height: 1.1; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tk-pg-step:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.tk-pg-step[hidden] { display: none; }
.tk-pg-step .tk-pg-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tk-pg-step .tk-pg-arrow { flex: none; font-family: var(--text); font-size: 1rem; }
.tk-pg-prev { justify-content: flex-start; padding-left: 16px; text-align: left; color: var(--ink); }
.tk-pg-next { justify-content: flex-end; padding-right: 16px; text-align: right; color: var(--rubric); }
.tk-pg-prev:hover, .tk-pg-next:hover { color: var(--rubric); }
/* with only one of the two, the other's place is kept, so that Next stays at the right */
.tk-pg-prev[hidden] + .tk-pg-next { margin-left: auto; flex: 0 1 auto; }
@media (min-width: 768px) { .tk-pg-step { font-size: 0.92rem; letter-spacing: 0.12em; } }

/* the pages of a chapter, as they are listed under it in the chapters' sheet. A page on its own is one line; a page
   with pages under it (a study with its sides) is a line that opens to them, set in a step from the left, and the
   one that holds the page in view is open when the sheet is raised, the page marked by a rule at its left. */
.pg-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-width: 0;
  margin: 0; padding: 9px 8px 10px 10px; border: 0; border-radius: 0; background: none; box-shadow: none !important;
  text-align: left; font: inherit; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pg-item .pg-t { font-family: var(--display); font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.pg-item .pg-s { font-size: 0.88rem; font-style: italic; line-height: 1.3; color: var(--muted); }
.pg-item:hover, .pg-item:focus-visible { background: color-mix(in srgb, var(--rubric) 8%, transparent); color: var(--rubric); }
.pg-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pg-item.active { color: var(--rubric); box-shadow: inset 3px 0 0 var(--rubric) !important; }
.pg-lone, .pg-group { border-bottom: 1px dotted var(--rule); }
.pg-lone:last-child, .pg-group:last-child { border-bottom: 0; }

/* a page with pages under it: its line, and the chevron that opens them */
.pg-row { display: grid; grid-template-columns: minmax(0, 1fr) 2.4rem; align-items: stretch; }
.pg-group.has-current > .pg-row > .pg-parent .pg-t::after { content: ""; display: inline-block; width: 0.36em; height: 0.36em; margin-left: 0.45em; vertical-align: 0.16em; background: var(--rubric); transform: rotate(45deg); }
.pg-chev-btn { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-left: 1px dotted color-mix(in srgb, var(--rule) 70%, transparent); border-radius: 0; background: none; box-shadow: none; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pg-chev-btn:hover, .pg-chev-btn:focus-visible { background: color-mix(in srgb, var(--rubric) 8%, transparent); }
.pg-chev-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pg-chev { width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.25, 1), margin 0.28s ease; }
.pg-group.open > .pg-row .pg-chev { margin-top: 0.25rem; transform: rotate(-135deg); color: var(--rubric); }
/* the pages under it open and shut by their own height, set in a step from the left on a ground a shade apart */
.pg-list { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.8, 0.25, 1), visibility 0s linear 0.3s; }
.pg-group.open > .pg-list { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.8, 0.25, 1), visibility 0s; }
.pg-list-in { min-height: 0; overflow: hidden; }
.pg-group.open > .pg-list > .pg-list-in { margin: 0 0 8px 1.5rem; padding-bottom: 4px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.pg-sub { padding: 7px 8px 8px 16px; border-top: 1px dotted color-mix(in srgb, var(--rule) 70%, transparent); }
.pg-sub .pg-t { font-family: var(--caps); font-size: 1.05rem; letter-spacing: 0.035em; }
@media (prefers-reduced-motion: reduce) { .pg-list, .pg-chev { transition: none; } }

/* the row of tabs some chapters carried at their head (Noah, the calendar: .nh-tabs) is the bar's work now */
:root.tk-pages .nh-tabs { display: none; }

/* in the chapters' sheet: a chapter's line, the chevron beside it, and its pages beneath, set in a step further */
.toc .pg-chap { border-bottom: 0; }
.toc .pg-chap > .pg-row > .tab { border-top: 0; }
.toc .pg-chap { border-top: 1px dotted color-mix(in srgb, var(--rule) 70%, transparent); }
.toc .pg-chap.open > .pg-list > .pg-list-in { margin: 0 0 8px 1.25rem; }
/* the chapter being read is opened to its pages at once as the sheet rises (js/pager.js), without the lists' motion,
   so that the sheet can measure where the page in view stands */
.toc.no-anim .pg-list, .toc.no-anim .pg-chev { transition: none; }
/* a chapter open to its pages holds its own line at the top of the sheet while they pass beneath it, on the ground of
   its part (a part's list clips its chapters without being a scroll box, css/taskbar.css; -4px is the sheet's padding) */
.toc .pg-chap.open > .pg-row {
  position: sticky; top: -4px; z-index: 2; border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  background: linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent), color-mix(in srgb, var(--ink) 5%, transparent)), var(--panel);
}
.toc .pg-chap .pg-item { padding-left: 12px; }
.toc .pg-chap .pg-item .pg-t { font-size: 1.02rem; }
.toc .pg-chap .pg-group .pg-list-in { margin-left: 1rem; }

/* =====================================================================
   A chapter's overview (js/pager.js, and the chapters' scripts): the one page at its head. It holds the chapter's
   title and lede, the drawing that sets out its idea (where it has one), where the reader left off (once there is
   somewhere: js/progress.js), the chart where a study is chosen, one citation for every passage the studies read, a
   card for each of the chapter's other pages, and last "How to read this page", shut. The parts sit under the title's
   double rule, each under a short rule of its own.
   ===================================================================== */
/* a lede of more than about ninety words is read rather than glanced at: set at the reading measure, from the left */
.tb-card > .tb-lede.long { max-width: var(--measure, 32rem); text-align: left; }

/* the parts: the drawing (data-section="figure") and the chart (data-section="guide"), where an old address lands */
.pg-part { margin-top: 46px; scroll-margin-top: 8px; }
.pg-part > h3, .pg-part > .tb-toolbar > h3 {
  margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.62rem);
  line-height: 1.2; letter-spacing: 0.01em; text-align: center; text-wrap: balance; color: var(--ink);
}
.pg-part > h3::before { content: ""; display: block; width: 90px; height: 1px; margin: 0 auto 22px; background: var(--press); }
/* the chart's own lede is a hint, in a smaller italic: what to choose, and what choosing does */
.pg-part[data-section="guide"] > .tb-lede { max-width: 40rem; margin: 0 auto 18px; font-size: 0.98rem; font-style: italic; line-height: 1.5; text-align: center; text-wrap: balance; }
/* the Tabernacle's chart is a drawing with its own tools: its title over them, under the short rule */
.pg-part > .tb-toolbar { justify-content: center; }
.pg-part > .tb-toolbar::before { height: 1px; margin-bottom: 8px; background: linear-gradient(var(--press), var(--press)) center / 90px 1px no-repeat; }
.pg-part > .tb-toolbar > h3 { flex: 1 1 100%; margin: 0; }
@media (min-width: 900px) { .pg-part > .tb-key { justify-content: center; } }

/* under the chart: one citation that opens every passage the studies read, together */
.pg-sum:empty { display: none; }
.pg-sum-all { margin: 16px auto 0; font-size: 0.98rem; text-align: center; color: var(--muted); }
.pg-sum-ref-all { font: inherit; font-family: var(--display); color: var(--rubric); }
/* (a chapter with studies and no chart lists them here instead, each with the passages it reads) */
.pg-sum-h { margin: 18px 0 6px; font-family: var(--caps); font-weight: 400; font-size: 1rem; letter-spacing: 0.16em; color: var(--rubric); }
.pg-sum-list { margin: 0; padding: 0 0 0 1.6em; }
.pg-sum-list li { margin: 0 0 4px; padding-left: 4px; line-height: 1.4; }
.pg-sum-list li::marker { font-family: var(--caps); color: var(--muted); }
.pg-sum-go { font-family: var(--display); font-size: 1.05rem; }
.pg-sum-ref { display: block; margin: 0 0 2px 1.2em; font-size: 0.92rem; color: var(--muted); }

/* the chapter's other pages, a card to each: its name in the display face and the line under it, as the chapters' sheet
   has them; side by side as the width allows, one above another on a phone. The grid is no wider than the columns
   its cards need (--cols, js/pager.js), so that two or three stand centred, not at the left of an empty row */
.pg-cards-h { margin: 46px 0 14px; font-family: var(--caps); font-weight: 400; font-size: 1rem; letter-spacing: 0.16em; text-align: center; color: var(--rubric); }
.pg-cards-h::before { content: ""; display: block; width: 90px; height: 1px; margin: 0 auto 22px; background: var(--press); }
.pg-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 10px;
  max-width: 62rem; margin: 0 auto 30px; padding: 0; list-style: none;
}
@media (min-width: 700px) { .pg-cards { max-width: min(62rem, calc(var(--cols, 4) * 17rem)); } }
/* four cards stand two and two, or four in a row, never three and one: while four do not fit (four 15rem tracks and
   their gaps), the grid is held too narrow for three */
@media (min-width: 700px) { .pg-cards[style*="--cols: 4"] { max-width: clamp(44rem, (100% - 60rem - 30px) * 999, 62rem); } }
.pg-cards > li { display: flex; margin: 0; padding: 0; }
.pg-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  width: 100%; min-height: 3.5rem; margin: 0; padding: 11px 2.4rem 12px 14px;
  border: 1px solid color-mix(in srgb, var(--rule) 75%, transparent); border-top: 2px solid var(--press); border-radius: 0;
  background: color-mix(in srgb, var(--ink) 3%, transparent); box-shadow: none; text-align: left; font: inherit; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pg-card-t { font-family: var(--display); font-size: 1.12rem; line-height: 1.22; overflow-wrap: anywhere; }
.pg-card-s { font-size: 0.9rem; font-style: italic; line-height: 1.32; color: var(--muted); }
.pg-card-go { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); font-family: var(--text); font-size: 1.05rem; color: var(--rubric); }
.pg-card:hover, .pg-card:focus-visible { color: var(--rubric); background: color-mix(in srgb, var(--rubric) 8%, transparent); border-color: color-mix(in srgb, var(--rubric) 45%, transparent); border-top-color: var(--rubric); }
.pg-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* where the reader left off (js/progress.js): once a page of the chapter has been opened, a panel between the lede (and
   the drawing) and the chart, held to the reading measure and framed in the rubric: how many of the studies are read,
   a pip for each, a button that goes on from the page last read, and beneath it a small one that begins again */
.pg-where {
  max-width: var(--measure, 32rem); margin: 34px auto 0; padding: 12px 16px 6px;
  border: 1px solid color-mix(in srgb, var(--rubric) 55%, transparent); border-top: 2px solid var(--rubric);
  background: color-mix(in srgb, var(--rubric) 7%, transparent);
}
.pg-where-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; }
.pg-where-h { margin: 0; font-family: var(--caps); font-size: 1rem; letter-spacing: 0.14em; color: var(--rubric); }
.pg-where-n { margin: 0; font-size: 0.95rem; color: var(--muted); font-variant-numeric: lining-nums; }
/* the pips, one to a study, in a row the width of the panel: the studies read are filled */
.pg-pips { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 4px; margin: 8px 0 12px; }
.pg-pips > span { height: 5px; background: color-mix(in srgb, var(--rubric) 22%, transparent); }
.pg-pips > span.on { background: var(--rubric); }
/* go on: the page last read, named under the word, on the rubric's ground */
.pg-cont {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; margin: 0;
  padding: 8px 14px; border: 0; border-radius: 0; background: var(--rubric); box-shadow: none; color: var(--bg);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pg-cont-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.22; }
.pg-cont-k { font-family: var(--caps); font-size: 0.86rem; letter-spacing: 0.12em; }
.pg-cont-t { font-family: var(--display); font-size: 1.18rem; overflow-wrap: anywhere; }
.pg-cont-go { flex: none; font-family: var(--text); font-size: 1.3rem; }
.pg-cont:hover { background: color-mix(in srgb, var(--rubric) 85%, var(--ink)); }
.pg-cont:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* begin again: a small word at the right, not a second button to be pressed by mistake */
.pg-over {
  display: block; min-height: 36px; margin: 2px 0 0 auto; padding: 4px 2px; border: 0; border-radius: 0; background: none;
  box-shadow: none; font: inherit; font-family: var(--caps); font-size: 0.9rem; letter-spacing: 0.08em; color: var(--muted);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pg-over:hover, .pg-over:focus-visible { color: var(--rubric); text-decoration: underline; text-underline-offset: 4px; }
.pg-over:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* a study read, ticked where it is chosen: a ✓ on a seal of the kept ink at the edge of its roundel on the chart, or at
   the corner of its card (the name of each says "read" as well, js/progress.js). The roundels that are not
   already placed are made the ✓'s frame of reference; those set in a rule stay as they are. */
.pg-read .pg-tick {
  position: absolute; z-index: 1; top: -5px; right: -7px; flex: none;
  display: grid; place-items: center; width: 1.15rem; height: 1.15rem; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--bg);
  font-family: var(--sym); font-size: 0.68rem; font-style: normal; font-weight: 400; line-height: 1; letter-spacing: 0;
  text-align: center; text-decoration: none; color: var(--bg); pointer-events: none;
}
.bt-rung.pg-read .bt-n, .pl-cell.pg-read .pl-n { position: relative; }
.pg-card.pg-read .pg-tick, .pg-sum-go.pg-read .pg-tick { top: -8px; right: -8px; }
.pg-sum-go.pg-read { position: relative; padding-right: 14px; }