/* ═══════════════════════════════════════════════════════════════
   /the-faith-received/topics/ — Topics as a systematic theology.

   Loaded after scripture-dev.css, whose sd- parts (filters, TFR
   buttons, source rows, previews, chart bars, the panel) this page
   reuses so it works like the Scripture reader and the Verse Desk.
   Only the layout and the parts unique to Topics live here (td-).

   Scoped under .sd where an element also carries .container, because
   screen.min.css loads after page CSS and its .container padding and
   max-width win ties (found on /the-faith-received/scripture/, 2026-09-22).

   SCROLLING. The source sidebar scrolls on its own (sidebars are the
   recorded exception). Nothing else caps its height.
   ═══════════════════════════════════════════════════════════════ */

.sd .td-root {
  max-width: 1320px;
  padding-top: 48px;
  padding-bottom: 96px;
  font-family: var(--font-body);
  color: var(--color-dark);
  /* Trace colours belong to the tradition, so Lutheran is the same on
     every topic (design review, 2026-09-22). The Fathers and medievals
     are one warm family in steps; Rome, Wittenberg, Geneva and England,
     which fill the widest rows, are four clearly different hues. Every
     swatch is at least 3:1 against the page ground. */
  --td-c-gf: #8c3b2a; --td-c-pl: #a8572b; --td-c-po: #6e4a2e; --td-c-md: #7d6a3c;
  --td-c-rc: #7a2f4f; --td-c-lu: #2f5d7c; --td-c-rf: #3d6b45; --td-c-ed: #2d2927;
  --td-c-hl: #6b6660; --td-c-x: #857a70;
  --sd-card: #fffdf9;
  --sd-panel: #fbf8f3;
  --sd-ink: var(--color-dark, #2d2927);
  --sd-muted: var(--color-muted, #6b6660);
  /* Topics has no sticky bar, so the shared sidebar must not leave room
     for one. */
  --sd-bar-h: 0px;
}
.td-title { font-family: var(--font-body); font-weight: 600; font-size: clamp(34px, 5vw, 48px); line-height: 1.1; margin: 6px 0 12px; }
.td-lede { font-size: 19px; line-height: 1.6; max-width: 680px; margin: 0 0 24px; }
.td-note { font-size: 15px; margin: -6px 0 16px; max-width: 680px; }
.td-counts { font-size: 15px; margin: 0; }
.td-kids { font-size: 15px; margin: 10px 0 0; }
.td-kids a, .td-head a { color: var(--sd-accent); }
.td-roman { color: var(--sd-accent); font-weight: 600; margin-right: 6px; }

/* ── The contents page ───────────────────────────────────────── */
.td-head--contents { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.td-head--contents .td-lede { margin-left: auto; margin-right: auto; }
.td-find { max-width: 420px; margin: 0 auto; text-align: left; }
.td-find-empty { margin-top: 12px; }

/* ── A topic: full workspace | optional source sidebar ────────── */
.td-main { min-width: 0; }
.td-head { padding-bottom: 20px; border-bottom: 1px solid var(--color-rule); }
.td-topic-path { display: flex; flex-wrap: wrap; gap: 0; }
.td-confessions { padding-top: 28px; }
.td-source-sub { font-size: 15px; line-height: 1.4; }
.td-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.td-chip {
  font-family: var(--font-body); font-size: 14px; min-height: 44px; padding: 8px 14px;
  color: var(--tfr-btn, var(--color-dark)); background: transparent;
  border: 1px solid var(--tfr-btn, var(--color-dark)); border-radius: 3px; cursor: pointer;
}
.td-chip[aria-pressed="true"], .td-chip:hover, .td-chip:focus-visible {
  background: var(--tfr-btn, var(--color-dark)); color: var(--tfr-btn-ink, #fff);
}

.td-tabs { display: flex; gap: 0; margin: 36px 0 24px; box-shadow: inset 0 -1px 0 var(--color-rule); flex-wrap: wrap; }
.td-tab {
  flex: 0 0 auto; padding: 12px 18px; min-height: 44px; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--color-muted); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.td-tab:hover, .td-tab:focus-visible { color: var(--color-dark); }
.td-tab[aria-current="page"], .td-tab[aria-current="true"] { color: var(--color-dark); border-bottom-color: var(--sd-accent); }
.td-view > section + section { margin-top: 44px; }
.td-view .sd-h2 { margin-top: 0; }

.td-quote-item .sd-quote { margin-bottom: 10px; }
.td-quote-foot { align-items: center; }
.td-author-link {
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--color-dark);
  background: none; border: 0; padding: 4px 0; min-height: 44px; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 3px;
}
.td-author-link:hover, .td-author-link:focus-visible { color: var(--sd-accent); text-decoration-color: currentColor; }

.td-works { list-style: none; margin: 0; padding: 0; }
.td-work { padding: 12px 0; border-bottom: 1px solid var(--color-rule); }
.td-work:last-child { border-bottom: 0; }
.td-work-head { display: flex; flex-direction: column; gap: 3px; }
.td-work-title { display: inline-block; padding: 8px 0; font-size: 17px; font-style: italic; color: var(--color-dark); text-decoration: none; }
.td-work-title:hover, .td-work-title:focus-visible { color: var(--sd-accent); text-decoration: underline; }
.td-secs { margin-top: 8px; }
.td-secs > summary { font-size: 14px; color: var(--sd-accent); cursor: pointer; padding: 12px 0; min-height: 44px; }
.td-secs .sd-sources { padding-left: 14px; border-left: 2px solid var(--color-rule); }

.td-cmp-pick { margin-bottom: 20px; }
.td-cmp { display: grid; grid-template-columns: repeat(var(--td-cols, 3), minmax(0, 1fr)); gap: 28px; }
.td-cmp-col { min-width: 0; }
.td-cmp-h { font-family: var(--font-body); font-size: 18px; font-weight: 600; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 3px solid var(--sd-accent); }
.td-cmp-sub { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-muted); font-weight: 600; margin: 20px 0 6px; }
.td-cmp-authors { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.td-cmp-authors li { padding: 3px 0; }

.td-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 16px; padding: 0; font-size: 13px; }
.td-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.td-trace { list-style: none; margin: 0; padding: 0; }
.td-trace-row {
  display: grid; grid-template-columns: 120px 1fr 56px; align-items: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 4px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; color: var(--color-dark); text-align: left;
}
.td-trace-row:hover, .td-trace-row:focus-visible { background: rgba(238, 125, 81, 0.08); }
/* Every bar is full width and shows shares: on a linear scale the 16th
   and 17th centuries filled the chart and 18 rows were slivers. */
.td-trace-track { display: flex; height: 16px; width: 100%; }
.td-trace-seg { display: block; height: 100%; min-width: 1px; }
.td-trace-n { text-align: right; color: var(--color-muted); font-variant-numeric: tabular-nums; }

.td-proofs { list-style: none; margin: 0; padding: 0; }
.td-proof { padding: 12px 0; border-bottom: 1px solid var(--color-rule); }
.td-proof-head { display: grid; grid-template-columns: 170px 1fr 92px; align-items: center; gap: 12px; }
.td-proof-ref { display: inline-block; padding: 10px 0; font-size: 17px; font-weight: 600; color: var(--color-dark); }
.td-proof-ref:hover, .td-proof-ref:focus-visible { color: var(--sd-accent); }
.td-proof-bar { display: block; height: 10px; }
.td-proof-text { margin: 6px 0 0; font-size: 15px; line-height: 1.55; }

.td-panel-meta { margin-top: 4px; grid-column: 1; }
.td-side-works { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.td-side-works li { padding: 4px 0; }
.td-side-works a { color: var(--color-dark); font-style: italic; }

/* The topic fills the workspace until an author panel is requested. */
@media (min-width: 900px) {
  .sd .td-root.has-topic.has-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 36px;
    align-items: start;
  }
}
/* The panel on phones sits in the flow under what opened it. */
.td-main .sd-panel {
  display: block; margin: 12px 0 24px; padding: 18px 16px 20px; background: var(--color-white, #fff);
  border: 1px solid var(--color-rule); border-top: 3px solid var(--color-primary);
}

@media (max-width: 899px) {
  .td-cmp { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sd .td-root { padding-top: 40px; }
  .td-trace-row { grid-template-columns: 84px 1fr 44px; min-height: 44px; }
  .td-proof-head { grid-template-columns: 1fr 44px; }
  .td-proof-bar { display: none; }
  .td-tab { padding: 12px 12px; letter-spacing: 0.08em; }
}

/* Review fixes, 2026-09-22 */
.td-order { max-width: 420px; margin-top: 12px; }
.td-conf-note { font-size: 13px; margin: 10px 0 0; }
.td-proof-n { white-space: nowrap; }
/* Compare: quote footers stack in narrow columns, and the columns stack
   whenever the author sidebar takes the room. */
.td-cmp .td-quote-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
.sd .td-root.has-side .td-cmp { grid-template-columns: 1fr; }
/* The source sidebar parks beside the full topic workspace. */
.td-root .sd-side { top: calc(var(--sd-top, 0px) + 16px); max-height: calc(100vh - var(--sd-top, 0px) - 32px); }
@media (max-width: 640px) {
  .sd .td-root { padding-bottom: 56px; }
  .td-tab { padding: 12px 9px; letter-spacing: 0.03em; }
  .td-proof-head { grid-template-columns: 1fr auto; }
}

/* ═══ Two blocks: what the church confessed / what its teachers wrote
   (Ian, 2026-09-22). Each has the same four tabs. ═══════════════════ */
.sd .td-root { --td-g-early: #8c3b2a; --td-g-rc: #7a2f4f; --td-g-lu: #2f5d7c; --td-g-rf: #3d6b45; }
.td-block { padding-top: 40px; }
.td-block + .td-block { margin-top: 24px; border-top: 1px solid var(--color-rule); }
.td-block-h { font-family: var(--font-body); font-size: 26px; font-weight: 600; margin: 0 0 6px; }
.td-block .td-tabs { margin-top: 16px; }

/* Confession articles: the article's own words, open on the page. */
.td-articles { list-style: none; margin: 0; padding: 0; }
.td-article { padding: 18px 0; border-bottom: 1px solid var(--color-rule); scroll-margin-top: calc(var(--sd-top, 0px) + 16px); }
.td-article:last-child { border-bottom: 0; }
.td-article.is-picked { background: rgba(238, 125, 81, 0.07); box-shadow: -12px 0 0 rgba(238, 125, 81, 0.07), 12px 0 0 rgba(238, 125, 81, 0.07); }
.td-article-doc { font-size: 14px; font-style: italic; margin: 0; }
.td-type { font-style: normal; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-left: 6px; }
.td-article-h { font-family: var(--font-body); font-size: 19px; font-weight: 600; margin: 4px 0 10px; }
.td-article-text { font-size: 16px; }
.td-article-foot { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; margin: 8px 0 0; font-size: 14px; }
.td-article-foot .sd-clear { min-height: 44px; }
.td-proof-chips { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 6px 0 0; font-size: 14px; }
.td-proof-chips a { color: var(--sd-accent); padding: 6px 0; }
.td-cmp .td-article-h { font-size: 16px; }
.td-cmp .td-article-text { font-size: 15px; }

/* Classic treatments: who, the work and its section, the opening words,
   and the whole section read in place. */
.td-treat-group + .td-treat-group { margin-top: 12px; }
.td-treats { list-style: none; margin: 0; padding: 0; }
.td-treat { padding: 16px 0; border-bottom: 1px solid var(--color-rule); }
.td-treat:last-child { border-bottom: 0; }
.td-treat-who { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.td-treat-author { font-size: 15px; font-weight: 600; }
.td-treat-h { font-family: var(--font-body); font-weight: 400; margin: 2px 0 10px; display: flex; flex-direction: column; gap: 2px; }
.td-treat-work { font-size: 18px; font-style: italic; }
.td-treat-sec { font-size: 15px; color: var(--color-muted); }
.td-treat-excerpt { font-size: 16px; }
.td-treat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; }
.td-all-works { margin-top: 28px; border-top: 1px solid var(--color-rule); }
.td-all-works > summary { cursor: pointer; padding: 14px 0; min-height: 44px; font-size: 15px; color: var(--sd-accent); }
.td-cmp .td-treat-work { font-size: 16px; }

/* The timeline: Connections' strip, for one topic. A row per tradition,
   points placed by date in percent, sized by weight. Not a scroll box:
   it is as wide as the column and takes its own height. */
.td-tl { margin: 8px 0 0; }
.td-tl-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; min-height: 44px; border-bottom: 1px solid rgba(45, 41, 39, 0.06); }
.td-tl-label { font-size: 13px; color: var(--color-muted); padding-right: 12px; }
.td-tl-track { position: relative; height: 44px; margin: 0 14px; }
.td-tl-pt {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7); padding: 0; min-height: 0;
  opacity: 0.8; cursor: pointer; transition: opacity 0.12s, transform 0.12s;
}
.td-tl-pt:hover, .td-tl-pt:focus-visible { opacity: 1; transform: translate(-50%, -50%) scale(1.25); z-index: 2; outline: 2px solid var(--color-dark); outline-offset: 1px; }
.td-tl-axis { border-bottom: 0; min-height: 28px; }
.td-tl-axis .td-tl-track { height: 28px; }
.td-tl-tick { position: absolute; top: 4px; transform: translateX(-50%); font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .td-tl-row { grid-template-columns: 1fr; }
  .td-tl-label { padding: 8px 0 0; }
  .td-tl-tick:nth-child(even) { display: none; }
  .td-block-h { font-size: 22px; }
}

/* Review fixes (2026-09-22, rework) */
/* Every point gets a hit area of at least 24px, whatever its size. */
.td-tl-pt::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.td-tl-people:not(:empty) { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--color-rule); }
.td-cmp-all { margin-top: 8px; min-height: 44px; }
.td-block-h { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════
   THIN-LINE BOXES, THE WHOLE WIDTH (Ian, 2026-09-23, after the author
   room: "do the same for the Scripture and Topics pages")
   ══════════════════════════════════════════════════════════════════ */

.sd .td-root:not(.has-topic) { max-width: 1320px; }

/* Its header is a panel, its numbers boxes. */
.td-head:not(.td-head--contents) {
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: #fbf8f3;
  padding: 20px 24px 18px;
  margin-bottom: 8px;
}
.td-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 0; }
.td-stat {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--color-rule); border-radius: 3px; background: #fff;
  padding: 12px 16px 10px;
}
.td-stat b { font-size: 24px; line-height: 1.1; font-weight: 500; font-variant-numeric: tabular-nums; }
.td-stat span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.td-head .td-kids { margin-top: 14px; }

/* Each block's heading gets room to breathe above it. */
.td-block { padding-top: 12px; }

/* Articles and treatments as cards, not hairline rows. */
.td-articles, .td-treats { display: flex; flex-direction: column; gap: 12px; }
.td-article, .td-treat {
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: #fff;
  padding: 18px 22px;
}
.td-article:last-child, .td-treat:last-child { border-bottom: 1px solid var(--color-rule); }
.td-article.is-picked { box-shadow: none; border-color: var(--sd-accent); }
.td-treat-group > .sd-h3 { margin-top: 18px; }

/* On a wide screen with no author panel open, the treatments sit two
   across: they are short (a heading and an opening paragraph), and one
   column of them left most of the page empty. */
@media (min-width: 1280px) {
  .sd .td-root.has-topic:not(.has-side) .td-treats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
}

@media (max-width: 640px) {
  .td-head:not(.td-head--contents) { padding: 16px 16px 14px; }
  .td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-stat b { font-size: 21px; }
  .td-article, .td-treat { padding: 16px; }
}

/* Topic reading indexes, 2026-09-27. The page opens with choices rather
   than scores of full articles. Five choices form a row; one reading
   panel opens beneath that row, using ruled text rather than nested cards. */
.td-document-index,
.td-treatment-index,
.td-all-works { margin-top: 14px; }
.td-documents-more { margin-top: 8px; }
.td-index-card { min-height: 82px; }
.td-document-panel,
.td-treatment-panel,
.td-work-panel { background: var(--sd-panel); }
.td-document-panel > .td-articles,
.td-treatment-panel > .td-treats { display: block; margin: 0; }
.td-document-panel .td-article,
.td-treatment-panel .td-treat,
.td-document-panel .td-article:last-child,
.td-treatment-panel .td-treat:last-child {
  margin: 0;
  padding: 18px 2px;
  border: 0;
  border-bottom: 1px solid var(--color-rule);
  border-radius: 0;
  background: transparent;
}
.td-document-panel .td-article:last-child,
.td-treatment-panel .td-treat:last-child { border-bottom: 0; }
.td-document-panel .sd-more { margin-top: 14px; }
.td-treatment-panel .td-treat-actions { margin-bottom: 0; }
.td-work-panel-body { padding-top: 12px; }
.td-work-panel-body > .sd-sources { margin: 0; }
.td-work-panel-body > .sd-sources > .sd-source {
  margin: 0;
  padding: 14px 2px;
  border: 0;
  border-bottom: 1px solid var(--color-rule);
  border-radius: 0;
  background: transparent;
}
.td-all-works > summary {
  min-height: 48px;
  padding: 14px 0;
  border-block: 1px solid var(--color-rule);
  color: var(--color-muted);
  cursor: pointer;
  font-size: 15px;
}
.td-all-works[open] > summary { margin-bottom: 14px; color: var(--color-dark); }

@media (max-width: 640px) {
  .td-index-card { min-height: 76px; }
  .td-document-panel .td-article,
  .td-treatment-panel .td-treat { padding: 16px 0; }
  .td-stats .td-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* The contents page's head: the search in a thin-line panel across the
   width, like every other TFR surface's controls (Ian, 2026-09-23). */
@media (min-width: 641px) {
  .td-root .td-head--contents {
    max-width: none;
    border: 1px solid var(--color-rule);
    border-radius: 3px;
    background: #fbf8f3;
    padding: 22px 28px;
    margin: 0 0 24px;
  }
}

/* ── Folding sections (Ian, 2026-09-24) ───────────────────────────
   The two blocks (Creeds, Confessions, and Catechisms; Works) and each
   tradition or century group inside them are <details>, open to start.
   The summary keeps the heading's own look; a thin chevron sits at the
   right and turns when the section closes. */
.td-fold-sum {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  padding-right: 32px;
}
.td-fold-sum::-webkit-details-marker { display: none; }
.td-fold-sum::marker { content: ""; }
.td-fold-sum::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--color-secondary, #c1593c);
  border-bottom: 1.5px solid var(--color-secondary, #c1593c);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s ease;
}
details:not([open]) > .td-fold-sum::after { transform: translateY(-30%) rotate(-45deg); }
.td-fold-sum:hover .td-block-h,
.td-fold-sum:hover .sd-h3 { color: var(--color-secondary, #c1593c); }
.td-fold-sum:focus-visible { outline: 2px solid var(--color-secondary, #c1593c); outline-offset: 3px; border-radius: 3px; }
/* The block chevron lines up with its heading, not the note under it. */
.td-block > .td-fold-sum::after { top: 20px; }
.td-block:not([open]) { padding-bottom: 12px; }
.td-block:not([open]) > .td-fold-sum .td-note { margin-bottom: 0; }
/* Group headings: the rule under the name is the section's edge, so the
   chevron sits on the name's line. */
.td-treat-group > .td-fold-sum > .sd-h3,
.td-cen-group > .td-fold-sum > .sd-h3 { margin-bottom: 8px; }
.td-treat-group:not([open]) > .td-fold-sum > .sd-h3,
.td-cen-group:not([open]) > .td-fold-sum > .sd-h3 { margin-bottom: 0; }
.td-treat-group > .td-fold-sum::after,
.td-cen-group > .td-fold-sum::after { top: auto; bottom: 12px; transform: rotate(45deg); }
.td-treat-group:not([open]) > .td-fold-sum::after,
.td-cen-group:not([open]) > .td-fold-sum::after { bottom: 9px; transform: rotate(-45deg); }
.td-treat-group > .td-fold-sum { margin-top: 18px; }
.td-treat-group > .td-fold-sum > .sd-h3 { margin-top: 0; }
/* The group's rule runs the full width, under the chevron too. */
.td-treat-group > .td-fold-sum,
.td-cen-group > .td-fold-sum { padding-right: 0; }
.td-treat-group > .td-fold-sum > .sd-h3,
.td-cen-group > .td-fold-sum > .sd-h3 { padding-right: 28px; }

/* ═══ The maps' drawings on Topics (2026-10-22) ═══════════════════
   assets/css/port/tradition-graphics.css draws the contents' rows and
   miniatures (.tgi-*) and a topic's three sections (.tgt: Authors
   through time, Disputed questions, Scripture by chapter), as on The
   Faith Received. It reads the page's own tokens, so only what this
   page does differently is here: Source Serif for names and headings
   (no display face on a working surface, as in topic-desk.css), links
   in the page's accent like the desk around them, the chosen
   question's heading one level down (the desk's modules are h3), and
   the scroll offset under the masthead and the rail. The traditions'
   colours are the maps' (--tg-*), as on the Maps, Controversies and
   Disputed questions pages, and since the quality pass of the same day
   the desk's ruler and the Trace timelines take them too (below). */
.td-page .tg { --tg-display: var(--font-body); }
.td-page .tgt a { color: var(--sd-accent); }
.td-page .tg h4.tg-chosen-h { margin: 0 0 .3rem; color: var(--tg-ink); font: 600 1.25rem/1.3 var(--tg-display); text-wrap: balance; }
.td-page .tgt-sec, .td-page .tgt .tg-chosen { scroll-margin-top: calc(var(--sd-top, 0px) + 16px); }
.td-page .tgt .tg-qm { margin-top: 4px; }
/* The strip's two figures (its tallest column, and the undated) sit in a band of their own above the bars rather than over them,
   where a tall column at either end would run under the words (scripts/check-desk-overlap.mjs measures it). The bars keep their
   height; the column a reader points at is marked over the bars only. */
.td-page .tgt .tg-plot { box-sizing: border-box; height: calc(9.5rem + 1.25rem); padding-top: 1.25rem; }
.td-page .tgt .tg-hi { top: 1.25rem; }
/* In the band the two figures stand a little below the top, clear of the hairlines the leading voices drop to the strip. */
.td-page .tgt :is(.tg-max, .tg-und) { top: .15rem; }
@media (max-width: 640px) { .td-page .tgt .tg-plot { height: calc(7.5rem + 1.25rem); } }
/* The contents: the parts' numerals as the topic pages name them ("Part VII"), then the name. */
.td-page .tgi .tgi-ph h2 .td-roman { margin-right: 0; }
.td-page .tgi-intro { margin: 0 0 4px; }
.td-page .tgi-intro .tgi-key { margin-top: 0; }
.td-page .tgi-intro[hidden] { display: none; }
.td-page .tgi-jump[hidden] { display: none; }
.td-page .tgi > .tgi-part:first-child { margin-top: 1.8rem; }

/* ═══ The quality pass (2026-10-22, owner: "we need a pass for the controversies, topics, compare, and commentary decks") ═══ */

/* ONE PALETTE FOR THE TRADITIONS. The page drew two: the maps' colours in its drawings (--tg-*, assets/css/port/
   tradition-graphics.css: Lutheran a red-orange, English writers a blue) and the desk's own set below them (--tdk-*, and --cn-* on
   its century ruler, topic-desk.css; Lutheran a blue, English writers near-black), with this page's Trace timelines on a third
   copy of the desk's (--td-c-*, --td-g-*, above). The owner likes the maps, so the maps' palette wins: the desk's and the
   timelines' nine shelf tokens point at the module's. Only the shelf colours move; the desk's surfaces, era tints, ink and accent
   stay its own. Every shelf colour keeps 3:1 on the desk's card (#fffdf9) and on each of its era tints, the closest being
   Medieval at 3.03:1 and Eastern Fathers at 3.21:1 on the early-church tint (scripts/check-topic-desk.mjs measures the --cn-*
   hex values written in topic-desk.css, not these). The confessions' trace has a row for the early church (documents before
   1054), which is no shelf: it takes the Greek Fathers' colour, as it took the desk's. The fallbacks are the module's light
   values, for a page where its sheet did not load. When the page says data-sd-theme="dark" the desk's own dark set still wins
   (its selectors are stronger than these), so no light value lands on a dark ground; Mere Orthodoxy keeps these tools light. */
.td-page .td-desk {
  --tdk-gf: var(--tg-gf, #2e6e8e); --tdk-pl: var(--tg-pl, #7a4e9b); --tdk-po: var(--tg-po, #5e8c61);
  --tdk-md: var(--tg-md, #b07b2a); --tdk-rc: var(--tg-rc, #a63d5a); --tdk-lu: var(--tg-lu, #c1593c);
  --tdk-rf: var(--tg-rf, #2f7d4f); --tdk-ed: var(--tg-ed, #3b5ba5); --tdk-hl: var(--tg-hl, #8c7b5c);
}
.td-page .td-desk .tdk-cent {
  --cn-gf: var(--tg-gf, #2e6e8e); --cn-pl: var(--tg-pl, #7a4e9b); --cn-po: var(--tg-po, #5e8c61);
  --cn-md: var(--tg-md, #b07b2a); --cn-rc: var(--tg-rc, #a63d5a); --cn-lu: var(--tg-lu, #c1593c);
  --cn-rf: var(--tg-rf, #2f7d4f); --cn-ed: var(--tg-ed, #3b5ba5); --cn-hl: var(--tg-hl, #8c7b5c);
}
.sd.td-page .td-root {
  --td-c-gf: var(--tg-gf, #2e6e8e); --td-c-pl: var(--tg-pl, #7a4e9b); --td-c-po: var(--tg-po, #5e8c61);
  --td-c-md: var(--tg-md, #b07b2a); --td-c-rc: var(--tg-rc, #a63d5a); --td-c-lu: var(--tg-lu, #c1593c);
  --td-c-rf: var(--tg-rf, #2f7d4f); --td-c-ed: var(--tg-ed, #3b5ba5); --td-c-hl: var(--tg-hl, #8c7b5c); --td-c-x: var(--tg-x, #7a7a76);
  --td-g-early: var(--tg-gf, #2e6e8e); --td-g-rc: var(--tg-rc, #a63d5a); --td-g-lu: var(--tg-lu, #c1593c); --td-g-rf: var(--tg-rf, #2f7d4f);
}

/* THE CONTENTS' FIND BOX keeps the page's left edge, inside its thin-line panel, like the key and the outline under it (it stood
   centred in a full-width panel, the one centred thing on the page); the line that says nothing matched follows it. */
.td-page .td-root .td-head--contents { text-align: left; }
.td-page .td-head--contents .td-find { margin: 0; max-width: 480px; }
.td-page .td-find-empty { overflow-wrap: anywhere; }

/* ON A PHONE THE MINIATURES KEEP THEIR AXIS. The module hides a part's axis under 640px; it comes back under the part's name, over
   the miniatures' own column, with the Compare column a fixed 4.5rem as on a wide screen so the two line up. */
@media (max-width: 640px) {
  .td-page .tgi .tgi-ph { grid-template-columns: minmax(0, 1fr) 4.5rem; column-gap: .9rem; }
  .td-page .tgi .tgi-ph > h2 { grid-column: 1 / -1; }
  .td-page .tgi .tgi-ph > .tg-mini-ax { display: block; grid-column: 1; margin-top: .3rem; }
  .td-page .tgi .tgi-row { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  .td-page .tgi .tgi-row > .tgi-cmp { justify-self: end; }
}