/* ==========================================================================
   Diagram styles — Journey of Holiness, Substitutes wheel, Path of Holiness,
   and the Causality diagram. Loaded only on pages that carry a diagram.
   ========================================================================== */

.diagram-figure {
  margin: var(--space-6) auto;
  max-width: 66rem;
  padding-inline: var(--space-3);
}

.diagram-caption {
  text-align: center;
  margin-bottom: var(--space-4);
}
.diagram-caption .diagram-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--navy);
  letter-spacing: 0.04em;
}
.diagram-caption .diagram-title::after {
  content: '';
  display: block;
  width: 3rem;
  border-top: 1px solid var(--gold);
  margin: var(--space-2) auto;
}
.diagram-caption .diagram-sub {
  display: block;
  font-style: italic;
  font-size: 1.05rem;
  max-width: 38rem;
  margin-inline: auto;
}

.diagram-quote {
  text-align: center;
  font-style: italic;
  font-size: 1rem;
  margin-top: var(--space-4);
}
.diagram-quote cite {
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--gold-text);
  font-size: 0.9rem;
}

/* Shared detail panel */
.diagram-panel {
  background: var(--cream-deep);
  border: 1px solid var(--gold);
  padding: var(--space-4);
}
.diagram-panel-hint {
  font-style: italic;
  font-size: 1rem;
  margin: 0;
}
.diagram-panel-title {
  margin: 0 0 var(--space-1);
  font-size: 1.4rem;
}
.diagram-panel-sub {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--gold-text);
  font-size: 0.95rem;
  margin: 0 0 var(--space-3);
}
.diagram-panel-fields { margin: 0; }
.diagram-panel-fields dt {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--gold-text);
  font-size: 0.95rem;
  margin-top: var(--space-3);
}
.diagram-panel-fields dt:first-child { margin-top: 0; }
.diagram-panel-fields dd {
  margin: var(--space-1) 0 0;
  font-size: 1.02rem;
}
.diagram-panel-fields .love-row { color: var(--red); }

/* Text-version fallback */
.diagram-text {
  margin-top: var(--space-4);
  border-top: 1px solid var(--cream-deep);
  padding-top: var(--space-3);
  font-size: 1.02rem;
}
.diagram-text summary {
  cursor: pointer;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--gold-text);
}

/* --------------------------------------------------------------------------
   Journey of Holiness
   -------------------------------------------------------------------------- */

.journey-grid {
  display: grid;
  gap: var(--space-3);
  position: relative;
}
@media (min-width: 760px) {
  .journey-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  /* Gold connector line behind the medallions */
  .journey-grid::before {
    content: '';
    position: absolute;
    top: 1.6rem;
    left: 16%;
    right: 16%;
    border-top: 1px solid var(--gold);
  }
}

.journey-stage {
  text-align: center;
  background: var(--cream-deep);
  border: 1px solid var(--gold);
  /* slimmer side padding gives the mottos room to read as one breath */
  padding: 0 var(--space-3) var(--space-4);
  position: relative;
  margin-top: 1.6rem;
}

.journey-medallion {
  display: inline-grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--gold);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.6rem;
  position: relative;
  top: -1.6rem;
  z-index: 1;
}

.journey-head {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 1.25rem;
  margin: -0.5rem 0 var(--space-2);
}
.journey-head small {
  display: block;
  font-size: 0.95rem;
  color: var(--gold-text);
  letter-spacing: 0.12em;
}

.journey-motto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: var(--space-2);
}

.journey-body {
  font-size: 1rem;
  margin: 0;
}

.journey-band {
  margin-top: var(--space-4);
  background: var(--navy);
  color: var(--cream);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}
@media (min-width: 760px) {
  .journey-band { grid-template-columns: repeat(3, 1fr); }
}
.journey-band span { font-size: 0.98rem; line-height: 1.5; }
.journey-band strong {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  color: var(--gold-bright);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

/* --------------------------------------------------------------------------
   Substitutes wheel
   -------------------------------------------------------------------------- */

.substitutes-layout {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 900px) {
  .substitutes-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

.substitutes-wheel svg {
  width: 100%;
  height: auto;
  display: block;
}

.sub-spokes line {
  stroke: var(--gold);
  stroke-opacity: 0.75;
  stroke-width: 2;
}

.sub-center-disc { fill: var(--navy); }
.sub-center-ring {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.5;
}
.sub-center-title {
  fill: var(--cream);
  font-family: var(--font-body);
  font-size: 28px;
  letter-spacing: 4px;
  font-weight: 600;
}
.sub-center-sub {
  fill: var(--gold-bright);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
}

.sub-node { cursor: pointer; }
.sub-node-disc {
  fill: var(--cream-deep);
  stroke: var(--gold);
  stroke-width: 1.5;
  transition: stroke 0.2s ease, fill 0.2s ease;
}
.sub-node:hover .sub-node-disc,
.sub-node:active .sub-node-disc,
.sub-node:focus-visible .sub-node-disc {
  stroke: var(--gold-bright);
  stroke-width: 2.5;
}
.sub-node:active .sub-node-disc { fill: var(--cream); }
.sub-node.selected .sub-node-disc {
  fill: var(--navy);
  stroke: var(--gold-bright);
  stroke-width: 2.5;
}
.sub-node-label {
  fill: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
  pointer-events: none;
}
.sub-node.selected .sub-node-label { fill: var(--cream); }
.sub-node:focus { outline: none; }
.sub-node:focus-visible .sub-node-disc { stroke-dasharray: 4 3; }

/* Belief → Trust → Abandonment → Self-Gift strip */
.path-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.path-strip-label {
  font-variant: small-caps;
  letter-spacing: 0.14em;
  color: var(--gold-text);
  font-size: 0.95rem;
  margin-right: var(--space-2);
}
.path-strip a {
  font-variant: small-caps;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--navy);
  font-size: 1.05rem;
}
.path-strip a:hover { color: var(--gold-text); }
.path-strip-arrow { color: var(--gold); }

/* --------------------------------------------------------------------------
   Path of Holiness map
   -------------------------------------------------------------------------- */

.path-map-mount { display: none; }

@media (min-width: 760px) {
  html.js .svg-active .path-map-mount { display: block; }
  html.js .svg-active .path-stage-list { display: none; }
}

.path-map-mount svg {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--navy);
}

.path-band-purgative { fill: #14213d; }
.path-band-illuminative { fill: #1b2a4a; }
.path-band-unitive { fill: #243760; }

.path-band-label {
  fill: rgb(250 246 238 / 0.85);
  font-family: var(--font-body);
  font-size: 17px;
  letter-spacing: 4px;
}

/* The destination light — union with God — breaking through as a soft halo. */
.path-glow {
  fill: var(--gold-bright);
  opacity: 0.5;
  filter: blur(3px);
}
.path-glow-core {
  fill: #f4e6bf;
  opacity: 1;
}

.path-goal-label {
  fill: var(--gold-bright);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
}

.path-road {
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.9;
}

.path-station { cursor: pointer; }
.path-station-disc {
  fill: var(--navy-deep);
  stroke: var(--gold);
  stroke-width: 2;
  transition: stroke 0.2s ease, fill 0.2s ease;
}
.path-station:hover .path-station-disc,
.path-station:active .path-station-disc,
.path-station:focus-visible .path-station-disc {
  stroke: var(--gold-bright);
  stroke-width: 3;
}
.path-station.selected .path-station-disc {
  fill: var(--gold-bright);
}
.path-station-numeral {
  fill: var(--cream);
  font-family: var(--font-display);
  font-size: 17px;
  pointer-events: none;
}
.path-station.selected .path-station-numeral { fill: var(--navy-deep); font-weight: 600; }
.path-station-name {
  fill: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.5px;
}
.path-station:focus { outline: none; }

.path-night-marker { cursor: pointer; }
.path-night-moon {
  fill: rgb(250 246 238 / 0.7);
  transition: fill 0.2s ease;
}
.path-night-marker:hover .path-night-moon,
.path-night-marker:focus-visible .path-night-moon,
.path-night-marker.selected .path-night-moon {
  fill: var(--gold-bright);
}
.path-night-marker:focus { outline: none; }

.path-panel { margin-top: var(--space-3); }

.macro-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: 0.98rem;
}
.macro-step {
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: var(--ink);
  /* 0.7, not lower: keeps the inactive steps quiet while staying above the
     4.5:1 contrast minimum on both cream backgrounds. */
  opacity: 0.7;
}
.macro-step.active {
  color: var(--gold-text);
  opacity: 1;
  font-weight: 600;
  border-bottom: 1px solid var(--gold);
}
.macro-arrow { color: var(--gold); }

/* Pre-rendered stage list (mobile + no-JS) */
.path-stage-list .path-way {
  border: 1px solid var(--gold);
  background: var(--cream-deep);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.path-stage-list h3 {
  margin-top: 0;
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.12em;
}
.path-way-desc {
  font-style: italic;
  font-size: 1rem;
  text-align: center;
}
.path-stage-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.path-stage-list ol li { margin-bottom: var(--space-3); }
.path-stage-list h4 {
  margin: 0 0 var(--space-1);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 1.1rem;
}
.path-stage-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.98rem;
}
.path-stage-list ul li { margin-bottom: 0.15rem; }
.path-night {
  border-top: 1px solid var(--gold);
  padding-top: var(--space-3);
  font-size: 0.98rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Causality diagram
   -------------------------------------------------------------------------- */

.causality { max-width: 44rem; margin-inline: auto; }

.causality-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.causality-toggle { display: inline-flex; }
.causality-state-btn {
  font-family: var(--font-body);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 1rem;
  background: var(--cream);
  color: var(--navy);
  border: 1px solid var(--gold);
  padding: 0.5rem 1.4rem;
  cursor: pointer;
}
.causality-state-btn + .causality-state-btn { border-left: 0; }
.causality-state-btn.active {
  background: var(--navy);
  color: var(--cream);
}

.causality-select-label {
  font-size: 1rem;
  font-style: italic;
}
.causality-select {
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1px solid var(--gold);
  background: var(--cream);
  color: var(--ink);
  padding: 0.4rem 0.6rem;
  margin-left: var(--space-2);
}

.causality-diagram {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  position: relative;
}

.causality-node {
  text-align: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--gold);
  min-width: 16rem;
}
.causality-node strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}
.causality-node-kicker {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  margin-bottom: var(--space-1);
}
.causality-node-sub {
  display: block;
  font-style: italic;
  font-size: 0.98rem;
}

.causality-node.governing {
  background: var(--navy);
  color: var(--cream);
}
.causality-node.governing .causality-node-kicker { color: var(--gold-bright); }
.causality-node.governing.usurper {
  background: var(--red);
  border-color: var(--red);
}
.causality-node.governing.usurper .causality-node-kicker { color: var(--cream); }

.causality-arrows {
  display: flex;
  gap: var(--space-5);
  color: var(--gold);
  font-size: 1.3rem;
  line-height: 1;
}
.causality-arrows.strained { color: var(--red); opacity: 0.7; }

.causality-means {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.causality-means li {
  border: 1px solid var(--gold);
  background: var(--cream-deep);
  padding: var(--space-1) var(--space-3);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
}
.causality-means.strained li {
  border-style: dashed;
  opacity: 0.85;
}

.causality-side.dotted {
  border: 1px dashed var(--gold);
  color: var(--gold-text);
  text-align: center;
  padding: var(--space-2) var(--space-3);
  font-size: 0.95rem;
}
.causality-side.dotted strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.causality-node.fruit { background: var(--cream-deep); }
.causality-node.fruit.withered {
  opacity: 0.75;
  border-style: dashed;
}

.causality-caption {
  margin-top: var(--space-4);
  font-style: italic;
  font-size: 1.02rem;
  text-align: center;
}

/* Causal ledger: the four causes read out under the diagram, flipping with
   the toggle so the inversion is seen at every level, not only the top. */
.causal-ledger {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) auto 0;
  padding-top: var(--space-2);
  border-top: 1px solid rgb(176 141 62 / 0.35);
  max-width: 44rem;
}
.causal-ledger > div { text-align: center; }
.causal-ledger dt {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  color: var(--gold-text);
}
.causal-ledger dd {
  margin: 0;
  font-size: 1rem;
  color: var(--navy);
}
.causal-ledger.usurped dd {
  color: var(--red);
  font-style: italic;
}

/* Honor reduced-motion for the interactive diagrams' state transitions too. */
@media (prefers-reduced-motion: reduce) {
  .sub-node-disc,
  .path-station-disc,
  .path-night-moon {
    transition-duration: 0.01ms;
  }
}

/* --------------------------------------------------------------------------
   Sacramental data page — indexed chart and diocesan explorer
   -------------------------------------------------------------------------- */

/* Direct child only: the legend's small swatch SVGs must not be stretched. */
.sd-chart-wrap > svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--font-body);
}

/* Reserve each chart's height before its SVG (or noscript image) arrives, so
   the essay text below doesn't jump when the diagram renders. The ratios are
   the SVG viewBoxes in deficit.js / decline-mini.js / decline.js — keep them
   in sync. The legend appended under the SVG still adds a little height. */
#deficit-chart-mount { aspect-ratio: 900 / 520; }
#decline-mini-mount { aspect-ratio: 900 / 440; }
#sd-chart-mount { aspect-ratio: 960 / 540; }

/* On phones the whole SVG scales down with its viewBox, which shrinks the
   in-chart type below legibility. Enlarge the axis ticks and marker discs
   (SVG presentation attributes lose to CSS), and let the caption carry the
   deficit annotation, which cannot fit at this scale. */
@media (max-width: 600px) {
  .sd-chart-wrap > svg .sd-tick { font-size: 22px; }
  .sd-chart-wrap > svg .sd-marker-num { font-size: 19px; }
  .sd-chart-wrap > svg .sd-marker-disc { r: 16px; }
  .sd-chart-wrap > svg .sd-note { display: none; }
}

.sd-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}
.sd-legend-item {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 0.98rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.sd-swatch {
  display: inline-block;
  width: 1.4rem;
  height: 4px;
  border-radius: 2px;
}
.sd-legend-events {
  text-align: center;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--gold-text);
  margin: var(--space-2) 0 0;
}

/* The explorer controls only do anything once decline.js has populated and
   wired them, so without JS they stay hidden and the <noscript> note speaks
   instead of a row of dead inputs. */
.sd-controls { display: none; }
html.js .sd-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-4) 0 var(--space-3);
}
.sd-controls label {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.92rem;
  color: var(--gold-text);
  margin-bottom: var(--space-1);
}
.sd-controls select,
.sd-controls input {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--gold);
  padding: 0.45rem 0.6rem;
}
.sd-controls .sd-search-wrap { flex: 1 1 14rem; }
.sd-controls input { width: 100%; }

.sd-count {
  font-size: 0.95rem;
  font-style: italic;
  margin: 0 0 var(--space-2);
}

.sd-table-scroll {
  max-height: 34rem;
  overflow: auto;
  border: 1px solid var(--gold);
  background: var(--cream);
}
.sd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}
.sd-table thead th {
  position: sticky;
  top: 0;
  background: var(--navy);
  color: var(--cream);
  text-align: left;
  padding: 0;
}
.sd-table thead button {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 0.92rem;
}
.sd-table thead button:hover { color: var(--gold-bright); }
.sd-table thead button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: -3px;
}
/* Sorted-column indicator: gold header plus a direction arrow. */
.sd-table thead button.sorted-asc,
.sd-table thead button.sorted-desc { color: var(--gold-bright); }
.sd-table thead button.sorted-asc::after { content: ' ↑'; }
.sd-table thead button.sorted-desc::after { content: ' ↓'; }
.sd-table th, .sd-table td { padding: var(--space-1) var(--space-3); }
.sd-table tbody th {
  font-weight: 400;
  text-align: left;
}
.sd-table tbody tr:nth-child(even) { background: var(--cream-deep); }
.sd-table .num, .sd-table thead th.num button { text-align: right; }
.sd-table tfoot th, .sd-table tfoot td {
  border-top: 2px solid var(--gold);
  font-weight: 600;
  padding-block: var(--space-2);
}
.sd-table tfoot th { text-align: left; }

/* Static national summary table (text alternative for the chart) */
.sd-static-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-top: var(--space-3);
}
.sd-static-table th, .sd-static-table td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--cream-deep);
}
.sd-static-table th { font-variant: small-caps; letter-spacing: 0.06em; color: var(--navy); }
.sd-static-table td { text-align: right; }
.sd-static-table td:first-child, .sd-static-table th:first-child { text-align: left; }

/* --------------------------------------------------------------------------
   Holiness page — examination callouts, Where Do I Stop cards, Rule of
   Reordering, path lenses, saints strip, fatherhood bridge
   -------------------------------------------------------------------------- */

/* A spiritual mirror, not a workbook exercise. */
.examen {
  max-width: 34rem;
  margin: var(--space-5) auto;
  padding-inline: var(--space-3);
  text-align: center;
}
.examen::before {
  content: '';
  display: block;
  width: 2.5rem;
  border-top: 1px solid var(--gold);
  margin: 0 auto var(--space-3);
}
.examen p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.5;
  color: var(--gold-text);
  margin: 0;
}

/* Where Do I Stop? */
.examine-heading { text-align: center; }
.examine-cards {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-4);
}
@media (min-width: 700px) {
  .examine-cards { grid-template-columns: repeat(2, 1fr); }
}
.examine-card {
  background: var(--cream-deep);
  border: 1px solid var(--gold);
}
.examine-card summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: var(--space-2) var(--space-4);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--navy);
  font-size: 1.08rem;
  transition: background 0.2s ease;
}
.examine-card summary::-webkit-details-marker { display: none; }
.examine-card summary::after {
  content: '+';
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
}
.examine-card[open] summary::after { content: '−'; }
.examine-card summary:hover { background: rgb(176 141 62 / 0.08); }
.examine-card p {
  padding: 0 var(--space-4);
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}
.examine-card p:last-child { padding-bottom: var(--space-3); }
.examine-card p strong {
  display: block;
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: var(--gold-text);
}

/* Rule of Reordering — table on wide screens, stacked cards on narrow. */
.reorder-table {
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
  border-collapse: collapse;
  font-size: 1rem;
}
.reorder-table thead th {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--gold-text);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--gold);
}
.reorder-table tbody th {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-weight: 400;
  color: var(--navy);
  text-align: left;
  padding: var(--space-2) var(--space-3);
}
.reorder-table tbody td { padding: var(--space-2) var(--space-3); }
.reorder-table tbody td[data-label="False Substitution"] { color: var(--red); font-style: italic; }
.reorder-table tbody td[data-label="Reordered in Holiness"] { color: var(--navy); }
/* Four-causes comparison on causality.html reuses the same table dress. */
.reorder-table tbody td[data-label="The Church’s Order"] { color: var(--navy); }
.reorder-table tbody td[data-label="The Assumed Order"] { color: var(--red); font-style: italic; }
.reorder-table tbody tr { border-bottom: 1px solid var(--cream-deep); }
.reorder-table tbody tr:nth-child(even) { background: rgb(243 236 221 / 0.5); }

@media (max-width: 700px) {
  .reorder-table, .reorder-table tbody, .reorder-table tr, .reorder-table th, .reorder-table td {
    display: block;
  }
  .reorder-table thead { display: none; }
  .reorder-table tbody tr {
    border: 1px solid var(--gold);
    background: var(--cream-deep);
    margin-bottom: var(--space-3);
    padding: var(--space-2) 0;
  }
  .reorder-table tbody tr:nth-child(even) { background: var(--cream-deep); }
  .reorder-table tbody th { font-size: 1.1rem; padding-bottom: 0; }
  .reorder-table tbody td { padding-block: var(--space-1); }
  .reorder-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    color: var(--gold-text);
    font-style: normal;
  }
}
.reorder-doorway {
  text-align: center;
  font-style: italic;
  font-size: 1rem;
  max-width: 44rem;
  margin: var(--space-4) auto 0;
}

/* Path lenses */
.path-lenses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.path-lenses-label {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  color: var(--gold-text);
  margin-right: var(--space-2);
}
.path-lens-btn {
  font-family: var(--font-body);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.98rem;
  color: var(--navy);
  background: var(--cream);
  border: 1px solid var(--gold);
  padding: 0.4rem 1.1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.path-lens-btn:hover { background: rgb(176 141 62 / 0.12); }
.path-lens-btn[aria-pressed="true"] {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--gold-bright);
}
/* The lens reading leads the stage panel; switching lenses swaps this block. */
.path-lens-lead {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--gold);
  background: rgb(176 141 62 / 0.07);
  transition: background 0.35s ease-out;
}
.path-lens-lead.is-fresh { background: rgb(176 141 62 / 0.22); }
.path-lens-lead-label {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 0.92rem;
  color: var(--gold-text);
  margin-bottom: 0.25rem;
}
.path-lens-lead p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--navy);
}
@media (prefers-reduced-motion: reduce) {
  .path-lens-lead { transition: none; }
}

/* Saints strip */
.saints-strip {
  display: grid;
  gap: var(--space-3);
  max-width: 60rem;
  margin-inline: auto;
}
@media (min-width: 700px) {
  .saints-strip { grid-template-columns: repeat(4, 1fr); }
}
.saint-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--cream-deep);
  border: 1px solid var(--gold);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.saint-card:hover, .saint-card:focus-visible {
  border-color: var(--gold-bright);
  transform: translateY(-3px);
}
.saint-card .saint-name {
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: var(--navy);
  font-size: 1.15rem;
}
.saint-card .saint-line {
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink);
}

/* Fatherhood bridge: two flow strips joined by a descending arrow */
.bridge-panel .flow-strip + .flow-strip { margin-top: var(--space-4); position: relative; }
.bridge-panel .flow-strip + .flow-strip::before {
  content: '↓';
  position: absolute;
  top: calc(-1 * var(--space-4) - 0.2em);
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
}
.bridge-panel .flow-caption { margin-top: var(--space-4); }

/* Grayscale line swatches in mini-chart legend */
.sd-swatch-line { width: 1.75rem; height: 6px; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .saint-card, .saint-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   The Saints God Sends — century frieze (saints.html)
   -------------------------------------------------------------------------- */

/* A vertical ledger: one gold spine runs down the left, each century hangs
   its small-caps label in the gutter, and its saints sit as chips to the
   right of the spine. Chronology reads top to bottom; on wide screens the
   detail panel stands to the right and follows the scroll. Plain buttons —
   keyboard-operable and legible at every width, no SVG. */
.frieze-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.frieze-rail::before {
  content: '';
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 5.2rem;
  width: 2px;
  background: var(--gold);
}
.frieze-era {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  align-items: baseline;
}
.frieze-era:not(:first-child) { margin-top: var(--space-3); }
.frieze-era-label {
  text-align: right;
  padding-right: var(--space-2);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--gold-text);
}
/* The last era — our own — is not yet history: its label is rubricated
   like its chip. */
.frieze-era:last-child .frieze-era-label { color: var(--red); }
.frieze-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-1);
  padding-left: var(--space-3);
}
.frieze-chip {
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--navy);
  background: var(--cream);
  border: 1px solid rgb(27 42 74 / 0.3);
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  cursor: pointer;
}
.frieze-chip:hover { background: rgb(176 141 62 / 0.12); border-color: var(--gold-bright); }
.frieze-chip.selected {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
}
/* The final chip — our own age — is not yet history: rubricated, italic,
   still being written. */
.frieze-chip-open {
  border-color: var(--red);
  color: var(--red);
  font-style: italic;
}
.frieze-chip-open.selected { background: var(--red); border-color: var(--red); color: var(--cream); }

/* Without JS the frieze cannot render: hide its mount and panel so the
   figure reads caption → text-version table, with nothing dangling. */
html:not(.js) .saints-layout { display: none; }

.saints-layout .diagram-panel { margin-top: var(--space-3); min-height: 11rem; }
/* Wide screens: ledger left, panel right — the panel keeps pace with the
   reader as the centuries scroll past. */
@media (min-width: 900px) {
  .saints-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(16rem, 36%, 20rem);
    gap: var(--space-4);
    align-items: start;
  }
  .saints-layout .diagram-panel {
    position: sticky;
    top: var(--space-3);
    margin-top: 0;
  }
}
.frieze-panel-more {
  margin: var(--space-3) 0 0;
  font-style: italic;
  font-size: 0.98rem;
}

/* Static five-column table (text version / no-JS fallback): .reorder-table
   supplies the dress and the stacked-card mobile form; these add the column
   tints and the open final row. */
.saints-table td[data-label="Heresy or Error Confronted"] { color: var(--red); }
.saints-table td[data-label="Characteristic Form of Holiness"] { color: var(--navy); }
.saints-table tr.open-row { border-top: 2px solid var(--red); }
.saints-table tr.open-row th, .saints-table tr.open-row td { font-style: italic; }