/* ═══════════════════════════════════════════════════════════════
   /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; }
.td-parts { columns: 2 360px; column-gap: 56px; max-width: 1000px; margin: 0 auto; }
.td-part { break-inside: avoid; margin: 0 0 36px; }
.td-part-h { font-family: var(--font-body); font-size: 20px; font-weight: 600; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--color-rule); }
.td-loci { list-style: none; margin: 0; padding: 0; }
.td-locus { margin: 0; }
.td-locus-link {
  display: block;
  padding: 9px 0;
  font-size: 17px;
  color: var(--color-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 41, 39, 0.06);
}
.td-locus-link:hover, .td-locus-link:focus-visible { color: var(--sd-accent); text-decoration: underline; text-underline-offset: 3px; }
.td-locus--child .td-locus-link { padding-left: 20px; font-size: 15px; color: var(--color-muted); }

/* ── 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); overflow-x: auto; }
.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-parts { columns: 1; }
  .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")
   ══════════════════════════════════════════════════════════════════ */

/* The contents: each part of the system is a box, three across on a
   wide screen. Columns rather than a grid because the parts differ so
   much in length (God has twelve loci, Christ one) that a grid's equal
   rows would leave holes; a part never breaks across a column. */
.sd .td-root:not(.has-topic) { max-width: 1320px; }
.td-parts { max-width: none; column-gap: 20px; }
@media (min-width: 1100px) { .td-parts { columns: 3 300px; } }
.td-part {
  break-inside: avoid;
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: #fbf8f3;
  padding: 16px 20px 12px;
  margin: 0 0 20px;
}
.td-part-h { margin: 0 -20px 10px; padding: 0 20px 10px; }

/* 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-part { padding: 14px 16px 10px; }
  .td-part-h { margin: 0 -16px 10px; padding: 0 16px 10px; }
  .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; }