/* ====================================================================
   LEARNING AIDS — Sola Fide Bible School
   ----------------------------------------------------------
   Styles for diagrams (with summary-box framing) and the four-tier
   critical callout system:

     .callout-soft     — A · summary box for diagrams or sidebars
     .callout-framed   — B · medium-weight framed callout, eyebrow tag
     .callout-seal     — C · heavy seal-style for gospel-non-negotiables
     .callout-boundary — D · structured callout with claim/guard rows

   Plus the .diagram-block wrapper that pairs an SVG diagram with key
   boxes alongside, summary boxes underneath, and an "in a sentence"
   bottom line.

   Uses the site's existing CSS variables (--bg, --text, --accent,
   --crimson, etc.). Dark mode handled via [data-theme="dark"] selectors.
   No external dependencies.
   ==================================================================== */

/* ===== DIAGRAM BLOCK ===== */
.diagram-block {
  margin: 40px auto;
  padding: 24px 28px 28px;
  max-width: 800px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
}

[data-theme="dark"] .diagram-block {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}

.diagram-block .db-eyebrow {
  font-family: 'Cinzel', 'Inter', serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.36em;
  color: var(--accent);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 4px;
}

[data-theme="dark"] .diagram-block .db-eyebrow {
  color: var(--accent-soft);
}

.diagram-block .db-citation {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 22px;
}

/* The diagram + side keys layout */
/* Default: stacked (diagram on top, keys below) — works for wide diagrams */
.diagram-block .db-stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 8px;
  align-items: stretch;
}

.diagram-block .db-svg {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* Flanked: keys to either side of a compact diagram (Trinity Shield only) */
.diagram-block .db-stage.db-stage-flanked {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 360px) 1fr;
  gap: 16px;
  align-items: center;
}

@media (max-width: 720px) {
  .diagram-block .db-stage.db-stage-flanked {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* When keys are below the diagram, render them in a row (2-up) */
.diagram-block .db-stage:not(.db-stage-flanked) > .db-key {
  max-width: 100%;
}

.diagram-block .db-stage:not(.db-stage-flanked) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.diagram-block .db-stage:not(.db-stage-flanked) > .db-svg {
  order: 1;
}

.diagram-block .db-stage:not(.db-stage-flanked) > .db-key {
  order: 2;
}

/* If two keys are stacked under a wide diagram, put them side-by-side on wider screens */
@media (min-width: 600px) {
  .diagram-block .db-stage:not(.db-stage-flanked):has(.db-key + .db-key) {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "svg svg" "key1 key2";
  }
  .diagram-block .db-stage:not(.db-stage-flanked):has(.db-key + .db-key) > .db-svg {
    grid-area: svg;
    grid-column: 1 / -1;
  }
}

/* Side key boxes — narrower, color-keyed to the diagram element they explain */
.diagram-block .db-key {
  padding: 10px 14px;
  border-left-width: 2px;
  border-left-style: solid;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text);
}

.diagram-block .db-key.db-key-accent {
  border-left-color: var(--accent);
  background: rgba(44, 62, 107, 0.04);
}

.diagram-block .db-key.db-key-crimson {
  border-left-color: var(--crimson);
  background: rgba(139, 26, 26, 0.04);
}

[data-theme="dark"] .diagram-block .db-key.db-key-accent {
  border-left-color: var(--accent-soft);
  background: rgba(141, 167, 216, 0.06);
}

[data-theme="dark"] .diagram-block .db-key.db-key-crimson {
  border-left-color: var(--crimson);
  background: rgba(217, 123, 123, 0.07);
}

.diagram-block .db-key-label {
  font-family: 'Cinzel', 'Inter', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.diagram-block .db-key-accent .db-key-label { color: var(--accent); }
.diagram-block .db-key-crimson .db-key-label { color: var(--crimson); }
[data-theme="dark"] .diagram-block .db-key-accent .db-key-label { color: var(--accent-soft); }

/* The 3-up summary row underneath the diagram */
.diagram-block .db-summary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .diagram-block .db-summary-row {
    grid-template-columns: 1fr;
  }
}

.diagram-block .db-summary {
  padding: 12px 16px;
  background: rgba(44, 62, 107, 0.04);
}

[data-theme="dark"] .diagram-block .db-summary {
  background: rgba(141, 167, 216, 0.06);
}

.diagram-block .db-summary-label {
  font-family: 'Cinzel', 'Inter', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}

[data-theme="dark"] .diagram-block .db-summary-label {
  color: var(--accent-soft);
}

.diagram-block .db-summary-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
}

/* Bottom "in a sentence" italic line */
.diagram-block .db-oneline {
  margin-top: 18px;
  padding: 14px 18px;
  background: rgba(139, 26, 26, 0.05);
  border-left: 3px solid var(--crimson);
}

[data-theme="dark"] .diagram-block .db-oneline {
  background: rgba(217, 123, 123, 0.07);
}

.diagram-block .db-oneline-label {
  font-family: 'Cinzel', 'Inter', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--crimson);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.diagram-block .db-oneline-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.0rem;
  line-height: 1.55;
  color: var(--text);
}

/* ===== STYLE A · SOFT CALLOUT ===== */
.callout-soft {
  margin: 24px 0;
  padding: 14px 18px;
  background: rgba(139, 26, 26, 0.05);
  border-left: 3px solid var(--crimson);
}

[data-theme="dark"] .callout-soft {
  background: rgba(217, 123, 123, 0.07);
}

.callout-soft.callout-soft-accent {
  background: rgba(44, 62, 107, 0.05);
  border-left-color: var(--accent);
}

[data-theme="dark"] .callout-soft.callout-soft-accent {
  background: rgba(141, 167, 216, 0.06);
  border-left-color: var(--accent-soft);
}

.callout-soft .cs-label {
  font-family: 'Cinzel', 'Inter', serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--crimson);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.callout-soft.callout-soft-accent .cs-label { color: var(--accent); }
[data-theme="dark"] .callout-soft.callout-soft-accent .cs-label { color: var(--accent-soft); }

.callout-soft .cs-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.0rem;
  line-height: 1.6;
  color: var(--text);
}

/* ===== STYLE B · MEDIUM FRAMED CALLOUT ===== */
.callout-framed {
  margin: 28px 0;
  padding: 22px 24px 22px;
  background: var(--bg);
  border: 1.5px solid var(--crimson);
  border-radius: 0;
  position: relative;
}

[data-theme="dark"] .callout-framed {
  background: var(--bg-elevated);
}

.callout-framed.callout-framed-accent {
  border-color: var(--accent);
}

.callout-framed .cf-tag {
  position: absolute;
  top: -10px;
  left: 18px;
  background: var(--bg);
  padding: 0 10px;
  font-family: 'Cinzel', 'Inter', serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  color: var(--crimson);
  text-transform: uppercase;
  font-weight: 700;
}

[data-theme="dark"] .callout-framed .cf-tag {
  background: var(--bg-elevated);
}

.callout-framed-accent .cf-tag {
  color: var(--accent);
}

[data-theme="dark"] .callout-framed-accent .cf-tag {
  color: var(--accent-soft);
}

.callout-framed .cf-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  margin: 4px 0 0;
}

.callout-framed .cf-text em {
  color: var(--text-soft);
  font-style: italic;
}

/* ===== STYLE C · HEAVY SEAL CALLOUT (gospel-non-negotiable) ===== */
.callout-seal {
  margin: 36px 0;
  padding: 4px;
  background: var(--crimson);
  border-radius: 0;
}

.callout-seal-inner {
  padding: 26px 28px 24px;
  background: var(--bg);
}

[data-theme="dark"] .callout-seal-inner {
  background: var(--bg-elevated);
}

.callout-seal .cseal-tag {
  text-align: center;
  margin-bottom: 14px;
}

.callout-seal .cseal-tag span {
  font-family: 'Cinzel', 'Inter', serif;
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  color: var(--crimson);
  text-transform: uppercase;
  font-weight: 700;
}

.callout-seal .cseal-headline {
  font-family: 'Cinzel', 'Inter', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin: 0 0 14px;
}

.callout-seal .cseal-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.0rem;
  color: var(--text);
  line-height: 1.65;
  text-align: center;
  margin: 0;
}

.callout-seal .cseal-scripture {
  text-align: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.callout-seal .cseal-scripture span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ===== STYLE D · BOUNDARY-DOCTRINE STRUCTURED CALLOUT ===== */
.callout-boundary {
  margin: 28px 0;
  border: 1.5px solid var(--accent);
  border-radius: 0;
  background: var(--bg);
}

[data-theme="dark"] .callout-boundary {
  background: var(--bg-elevated);
  border-color: var(--accent-soft);
}

.callout-boundary-header {
  padding: 14px 20px 12px;
  background: rgba(44, 62, 107, 0.06);
  border-bottom: 1px solid var(--accent);
}

[data-theme="dark"] .callout-boundary-header {
  background: rgba(141, 167, 216, 0.08);
  border-bottom-color: var(--accent-soft);
}

.callout-boundary .cb-tag {
  font-family: 'Cinzel', 'Inter', serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}

[data-theme="dark"] .callout-boundary .cb-tag {
  color: var(--accent-soft);
}

.callout-boundary .cb-headline {
  font-family: 'Cinzel', 'Inter', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
  margin: 0;
}

.callout-boundary-body {
  padding: 16px 20px 18px;
}

.callout-boundary .cb-row {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 10px;
}

.callout-boundary .cb-row:last-child {
  margin-bottom: 0;
}

.callout-boundary .cb-row-label {
  font-family: 'Cinzel', 'Inter', serif;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 10px;
  min-width: 110px;
  vertical-align: baseline;
}

.callout-boundary .cb-row-affirm .cb-row-label {
  color: var(--accent);
}

.callout-boundary .cb-row-guard .cb-row-label {
  color: var(--crimson);
}

[data-theme="dark"] .callout-boundary .cb-row-affirm .cb-row-label {
  color: var(--accent-soft);
}

@media (max-width: 600px) {
  .callout-boundary .cb-row-label {
    display: block;
    min-width: auto;
    margin-bottom: 4px;
  }
}

/* ===== PRINT — soften everything for print ===== */
@media print {
  .diagram-block, .callout-framed, .callout-seal, .callout-boundary {
    border: 1px solid #999 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .callout-seal { padding: 0 !important; }
  .callout-seal-inner { background: transparent !important; }
  .callout-soft { background: transparent !important; border-left: 2px solid #999 !important; }
}

/* ====================================================================
   DARK MODE — SVG color overrides for diagrams
   ----------------------------------------------------------
   The SVGs have inline strokes/fills for light mode (navy + crimson).
   Dark mode swaps them to brighter blue + brighter crimson.
   ==================================================================== */

/* TRINITY SHIELD */
[data-theme="dark"] .ts-line-pos { stroke: #a8c1ed !important; }
[data-theme="dark"] .ts-line-neg { stroke: #e89999 !important; }
[data-theme="dark"] .ts-circle { fill: #16171c !important; stroke: #a8c1ed !important; }
[data-theme="dark"] .ts-center { fill: rgba(168, 193, 237, 0.12) !important; stroke: #a8c1ed !important; }
[data-theme="dark"] .ts-name { fill: #e7e7e3 !important; }
[data-theme="dark"] .ts-god { fill: #a8c1ed !important; }
[data-theme="dark"] .ts-label-pos { fill: #c8c8c4 !important; }
[data-theme="dark"] .ts-label-neg { fill: #e89999 !important; }

/* ORDO SALUTIS */
[data-theme="dark"] .os-phase-label { fill: #a8c1ed !important; }
[data-theme="dark"] .os-rule { stroke: #a8c1ed !important; }
[data-theme="dark"] .os-arrow { stroke: #a8c1ed !important; }
[data-theme="dark"] .os-num { fill: #a8c1ed !important; }
[data-theme="dark"] .os-num-conv { fill: #e89999 !important; }
[data-theme="dark"] .os-name { fill: #e7e7e3 !important; }
[data-theme="dark"] .os-desc { fill: #c8c8c4 !important; }
[data-theme="dark"] .os-box-decree { fill: rgba(141, 167, 216, 0.06) !important; stroke: #a8c1ed !important; }
[data-theme="dark"] .os-box-conv { fill: rgba(217, 123, 123, 0.06) !important; stroke: #e89999 !important; }
[data-theme="dark"] .os-box-life { fill: rgba(141, 167, 216, 0.06) !important; stroke: #a8c1ed !important; }
[data-theme="dark"] .os-box-end { fill: rgba(141, 167, 216, 0.12) !important; stroke: #a8c1ed !important; }

/* FEDERAL HEADSHIP */
[data-theme="dark"] .fh-divider { stroke: #a8c1ed !important; }
[data-theme="dark"] .fh-role { fill: #a8c1ed !important; }
[data-theme="dark"] .fh-head { fill: #e7e7e3 !important; }
[data-theme="dark"] .fh-head-christ { fill: #e89999 !important; }
[data-theme="dark"] .fh-act-label { fill: #8e8e8a !important; }
[data-theme="dark"] .fh-act { fill: #e7e7e3 !important; }
[data-theme="dark"] .fh-act-sub { fill: #8e8e8a !important; }
[data-theme="dark"] .fh-arrow-bad { stroke: #e89999 !important; }
[data-theme="dark"] .fh-arrow-good { stroke: #a8c1ed !important; }
[data-theme="dark"] .fh-imputed { fill: #e89999 !important; }
[data-theme="dark"] .fh-imputed-sub { fill: #e89999 !important; }
[data-theme="dark"] .fh-imputed-good { fill: #a8c1ed !important; }
[data-theme="dark"] .fh-imputed-good-sub { fill: #a8c1ed !important; }
[data-theme="dark"] .fh-result { fill: #e7e7e3 !important; }
[data-theme="dark"] .fh-result-sub { fill: #8e8e8a !important; }
[data-theme="dark"] .fh-people-row { fill: rgba(141, 167, 216, 0.06) !important; stroke: #a8c1ed !important; }
[data-theme="dark"] .fh-people { fill: #c8c8c4 !important; }
[data-theme="dark"] .fh-caption { fill: #c8c8c4 !important; }
[data-theme="dark"] .fh-caption-sub { fill: #8e8e8a !important; }

/* CHALCEDONIAN */
[data-theme="dark"] .ch-boundary-label { fill: #a8c1ed !important; }
[data-theme="dark"] .ch-heresy-name { fill: #e89999 !important; }
[data-theme="dark"] .ch-heresy-text { fill: #e89999 !important; }
[data-theme="dark"] .ch-heresy-line { stroke: #e89999 !important; }
[data-theme="dark"] .ch-frame { fill: rgba(141, 167, 216, 0.06) !important; stroke: #a8c1ed !important; }
[data-theme="dark"] .ch-center { fill: rgba(217, 123, 123, 0.08) !important; stroke: #e89999 !important; }
[data-theme="dark"] .ch-orthodoxy-label { fill: #e89999 !important; }
[data-theme="dark"] .ch-orthodoxy-line { fill: #e7e7e3 !important; }
[data-theme="dark"] .ch-orthodoxy-italic { fill: #8e8e8a !important; }
[data-theme="dark"] .ch-caption { fill: #c8c8c4 !important; }
[data-theme="dark"] .ch-caption-sub { fill: #8e8e8a !important; }

/* THREE VIEWS OF ORIGINAL SIN TABLE */
[data-theme="dark"] .tos-col-pelagian-bg { fill: rgba(217, 123, 123, 0.05) !important; }
[data-theme="dark"] .tos-col-federal-bg { fill: rgba(141, 167, 216, 0.08) !important; stroke: #a8c1ed !important; }
[data-theme="dark"] .tos-col-pelagian { fill: #e89999 !important; }
[data-theme="dark"] .tos-col-realist { fill: #e7e7e3 !important; }
[data-theme="dark"] .tos-col-federal { fill: #e7e7e3 !important; }
[data-theme="dark"] .tos-col-tag { fill: #8e8e8a !important; }
[data-theme="dark"] .tos-row-label { fill: #a8c1ed !important; }
[data-theme="dark"] .tos-cell { fill: #c8c8c4 !important; }
[data-theme="dark"] .tos-rule { stroke: #a8c1ed !important; }
[data-theme="dark"] .tos-verdict-rejected { fill: #e89999 !important; }
[data-theme="dark"] .tos-verdict-minority { fill: #8e8e8a !important; }
[data-theme="dark"] .tos-verdict-standard { fill: #a8c1ed !important; }
[data-theme="dark"] .tos-verdict-tag { fill: #8e8e8a !important; }
[data-theme="dark"] .tos-caption { fill: #c8c8c4 !important; }

/* ====================================================================
   ZOOM REFINEMENT — for the flanked Trinity Shield specifically
   ----------------------------------------------------------
   At higher zoom levels, the 3-column flanked layout (key | diagram |
   key) crushes the middle diagram. Solution: stack at zoom-150 and
   zoom-175 so the diagram gets full width.
   ==================================================================== */

html.zoom-150 .diagram-block .db-stage-flanked,
html.zoom-175 .diagram-block .db-stage-flanked {
  grid-template-columns: 1fr;
  gap: 1em;
}

html.zoom-150 .diagram-block .db-stage-flanked .db-svg,
html.zoom-175 .diagram-block .db-stage-flanked .db-svg {
  max-width: 100%;
  width: 100%;
  min-height: 24em;
}

/* The 3-up summary row stacks at high zoom too */
html.zoom-150 .diagram-block .db-summary-row,
html.zoom-175 .diagram-block .db-summary-row {
  grid-template-columns: 1fr;
}

/* Smaller diagram-block padding at zoom so content has more room */
html.zoom-150 .diagram-block,
html.zoom-175 .diagram-block {
  padding: 1em 1.2em 1.4em;
}

/* Make the side keys narrower at zoom-125 so they don't crush diagram */
html.zoom-125 .diagram-block .db-stage-flanked {
  grid-template-columns: minmax(8em, 1fr) minmax(16em, 22em) minmax(8em, 1fr);
}

/* All callout text wraps cleanly at high zoom — no fixed widths */
html.zoom-150 .callout-boundary .cb-row-label,
html.zoom-175 .callout-boundary .cb-row-label {
  display: block;
  min-width: auto;
}

/* The seal callout's body and headline shouldn't be too tight at zoom */
html.zoom-150 .callout-seal-inner,
html.zoom-175 .callout-seal-inner {
  padding: 1.4em 1.4em 1.2em;
}

/* ====================================================================
   BREAKOUT — wide content inside the narrow text column
   ----------------------------------------------------------
   The site's .container-narrow caps content at 760px. That's right for
   prose readability. But diagrams and comparison tables need MORE
   horizontal room — especially at high zoom levels where text grows
   inside cells. Without breakout they crush text vertically.

   This solution lets diagram-blocks and tables "escape" the narrow
   column and use the page's full available width — up to a sensible
   maximum — by extending into the empty margin space on either side.

   How it works:
   - position: relative + left: 50% + transform: translateX(-50%)
     re-centers the element regardless of its container width.
   - max-width is set to fill the page width (with breathing room).
   - At small viewports, max-width caps at 100% so no overflow.
   ==================================================================== */

/* Diagram blocks: left-anchored breakout into empty left margin only,
   keeping right edge inside the prose column to avoid the right sidebar. */
.diagram-block {
  width: calc(100% + 100px);
  max-width: none;
  margin-left: -100px;
  margin-right: 0;
  box-sizing: border-box;
}

/* When a diagram-block sits INSIDE a .depth-section, cancel the
   leftward breakout entirely and let the section's own 42px padding
   inset the diagram so there is visible space between the diagram and
   the section's border on both sides. */
.depth-section .diagram-block {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Tables in depth-sections: same breakout, but only when they need more
   width than the column gives them */
.depth-section table,
.apol-intro table {
  /* Left-anchored breakout — same approach as diagram-block. Extends
     leftward into the empty left margin to avoid the right sidebar. */
  width: calc(100% + 140px);
  max-width: none;
  margin-left: -140px;
  margin-right: 0;
  box-sizing: border-box;

  display: table;
  table-layout: auto;
  /* border-collapse intentionally omitted — set to "separate" by the
     unified prose-table styling in styles.css so border-radius works. */
}

/* Inside .depth-section, cancel the leftward -140px breakout entirely
   and let the section's own 42px horizontal padding inset the table on
   both sides. The table never crosses the section's border, AND there
   is visible breathing room between the table edges and the box edges. */
.depth-section table {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* When viewport is narrow (≤1080px), there's no room to break out left.
   Reset to 100% width (just the prose column). */
@media (min-width: 769px) and (max-width: 1080px) {
  .depth-section table,
  .apol-intro table {
    width: 100%;
    margin-left: 0;
  }
}

/* For .views-table specifically: explicit column widths so cells don't
   crush into each other. Heresy column (with names like "Apollinarianism
   (4th c.)") needs comfortable width. */
.depth-section .views-table {
  table-layout: fixed;
}

.depth-section .views-table th:nth-child(1),
.depth-section .views-table td:nth-child(1) {
  width: 20%;
}
.depth-section .views-table th:nth-child(2),
.depth-section .views-table td:nth-child(2) {
  width: 28%;
}
.depth-section .views-table th:nth-child(3),
.depth-section .views-table td:nth-child(3) {
  width: 28%;
}
.depth-section .views-table th:nth-child(4),
.depth-section .views-table td:nth-child(4) {
  width: 24%;
  min-width: 7em;
  /* Long single words like "Constantinople" must be allowed to break
     when the column is narrow, otherwise they overflow into neighbours. */
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Cells: comfortable padding, sane minimum width, no forced word breaking */
.depth-section table th,
.depth-section table td,
.apol-intro table th,
.apol-intro table td {
  padding: 12px 16px;
  vertical-align: top;
  line-height: 1.55;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* The view-name column: bold but allow wrapping when needed */
.depth-section table td.view-name,
.depth-section table th.view-name {
  font-weight: 600;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

/* On narrow viewports the breakout would overflow — cap at 100% */
@media (max-width: 768px) {
  .diagram-block,
  .depth-section table,
  .apol-intro table {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .depth-section table td.view-name,
  .depth-section table th.view-name {
    white-space: normal;
  }

  .depth-section table th,
  .depth-section table td,
  .apol-intro table th,
  .apol-intro table td {
    padding: 9px 11px;
    font-size: 0.92em;
  }
}

/* At progressive zoom levels, the breakout still works the same way —
   the table grows wider, using available margin space on either side
   of the 760px text column. No scroll needed. */

/* Trinity Shield's flanked layout: stack at high zoom for readability */
html.zoom-150 .diagram-block .db-stage-flanked,
html.zoom-175 .diagram-block .db-stage-flanked {
  grid-template-columns: 1fr;
  gap: 1em;
}

/* The 3-up summary row collapses to a single column at high zoom */
html.zoom-150 .diagram-block .db-summary-row,
html.zoom-175 .diagram-block .db-summary-row {
  grid-template-columns: 1fr;
}

/* Tighter padding on diagram-blocks at high zoom so content has more room */
html.zoom-150 .diagram-block,
html.zoom-175 .diagram-block {
  padding: 1em 1.2em 1.4em;
}

/* The cb-row-label can crush content at high zoom — let it stack */
html.zoom-150 .callout-boundary .cb-row-label,
html.zoom-175 .callout-boundary .cb-row-label {
  display: block;
  min-width: auto;
  margin-bottom: 4px;
}

/* ====================================================================
   SIDEBAR: hide at high zoom levels
   ----------------------------------------------------------
   The "New Here?" floating sidebar at the right takes ~210px of
   horizontal space. At 150-175% zoom on a typical desktop viewport
   it competes with content for space — wide tables get cropped.
   The sidebar is a wayfinding hint, not core content; visitors who
   need it can find Start Here via the main nav. So at high zoom,
   hide it and give content the full width.
   ==================================================================== */

html.zoom-150 .start-here-sidebar,
html.zoom-175 .start-here-sidebar {
  display: none !important;
}


/* When the sidebar is hidden (high zoom), tables and diagrams can break
   out RIGHTWARD too — full available width. (Excludes anything inside
   a .depth-section: that content must stay inside the section's
   bordered box, otherwise the section's right border draws through it.) */
html.zoom-150 .apol-intro table,
html.zoom-175 .apol-intro table,
html.zoom-150 .diagram-block,
html.zoom-175 .diagram-block {
  width: calc(100% + 240px);
  margin-right: -140px;
}

html.zoom-150 .depth-section .diagram-block,
html.zoom-175 .depth-section .diagram-block {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Unified prose-table styling moved to styles.css so it works on every
   page (most pages don't load learning-aids.css). */
/* .companion-box styling also lives in styles.css. */

/* ====================================================================
   BIBLICAL-THEOLOGY CALENDAR — Redemptive-History Timeline
   --------------------------------------------------------------------
   A horizontal track of the nine movements of redemptive history.
   Reusable component that locates any OT book or theme on the arc
   from Creation to Christ.  Use `data-current="N"` (1-9) on .bt-cal
   to highlight the active stage.

   Usage:
     <div class="bt-cal" data-current="3">
       <div class="bt-cal-eyebrow">Biblical-theology calendar</div>
       <div class="bt-cal-title">Where this stands in the unfolding story</div>
       <ol class="bt-cal-track">
         <li><span class="bt-num">I</span><span class="bt-name">Creation</span><span class="bt-cite">Gen 1–2</span></li>
         <li><span class="bt-num">II</span><span class="bt-name">Fall</span><span class="bt-cite">Gen 3–11</span></li>
         <li><span class="bt-num">III</span><span class="bt-name">Promise</span><span class="bt-cite">Gen 12–50</span></li>
         <li><span class="bt-num">IV</span><span class="bt-name">Exodus</span><span class="bt-cite">Exod–Deut</span></li>
         <li><span class="bt-num">V</span><span class="bt-name">Conquest</span><span class="bt-cite">Josh–Judg</span></li>
         <li><span class="bt-num">VI</span><span class="bt-name">Kingdom</span><span class="bt-cite">Sam–Kgs</span></li>
         <li><span class="bt-num">VII</span><span class="bt-name">Exile</span><span class="bt-cite">prophets</span></li>
         <li><span class="bt-num">VIII</span><span class="bt-name">Return</span><span class="bt-cite">Ezra–Mal</span></li>
         <li><span class="bt-num">IX</span><span class="bt-name">Christ</span><span class="bt-cite">NT</span></li>
       </ol>
       <p class="bt-cal-note">Genesis 12 inaugurates the Promise stage…</p>
     </div>
   ==================================================================== */

.bt-cal {
  margin: 30px 0;
  padding: 22px 24px 20px;
  background:
    radial-gradient(circle at 96% 8%, rgba(212, 175, 55, 0.10), transparent 50%),
    linear-gradient(180deg, rgba(255, 252, 244, 0.85) 0%, rgba(244, 234, 213, 0.75) 100%);
  border: 1px solid var(--gold, #b8860b);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 4px 12px rgba(60, 40, 20, 0.06);
  font-family: 'EB Garamond', Georgia, serif;
}

.bt-cal-eyebrow {
  font-family: 'Cinzel', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-deep, #8c6f4d);
  margin-bottom: 4px;
}

.bt-cal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--crimson, #963131);
  margin-bottom: 16px;
}

.bt-cal-track {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  position: relative;
}

/* Horizontal connector line behind the stage chips */
.bt-cal-track::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 4%;
  right: 4%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(184, 134, 11, 0.5) 0%,
    rgba(184, 134, 11, 0.5) 100%);
  z-index: 0;
}

.bt-cal-track li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 2px;
}

.bt-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: rgba(255, 250, 235, 0.95);
  border: 1.5px solid var(--gold-deep, #8c6f4d);
  font-family: 'Cinzel', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-deep, #8c6f4d);
  letter-spacing: 0.04em;
}

.bt-name {
  font-family: 'Cinzel', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a3f28;
  margin-bottom: 2px;
  line-height: 1.2;
}

.bt-cite {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.75rem;
  color: #6b5530;
  line-height: 1.2;
}

/* Highlight the current stage based on data-current="N" (1-9) */
.bt-cal[data-current="1"] .bt-cal-track li:nth-child(1) .bt-num,
.bt-cal[data-current="2"] .bt-cal-track li:nth-child(2) .bt-num,
.bt-cal[data-current="3"] .bt-cal-track li:nth-child(3) .bt-num,
.bt-cal[data-current="4"] .bt-cal-track li:nth-child(4) .bt-num,
.bt-cal[data-current="5"] .bt-cal-track li:nth-child(5) .bt-num,
.bt-cal[data-current="6"] .bt-cal-track li:nth-child(6) .bt-num,
.bt-cal[data-current="7"] .bt-cal-track li:nth-child(7) .bt-num,
.bt-cal[data-current="8"] .bt-cal-track li:nth-child(8) .bt-num,
.bt-cal[data-current="9"] .bt-cal-track li:nth-child(9) .bt-num {
  background: var(--crimson, #963131);
  border-color: var(--crimson, #963131);
  color: #fbf1e4;
  width: 38px;
  height: 38px;
  font-size: 0.78rem;
  box-shadow: 0 2px 6px rgba(150, 49, 49, 0.35);
}
.bt-cal[data-current="1"] .bt-cal-track li:nth-child(1) .bt-name,
.bt-cal[data-current="2"] .bt-cal-track li:nth-child(2) .bt-name,
.bt-cal[data-current="3"] .bt-cal-track li:nth-child(3) .bt-name,
.bt-cal[data-current="4"] .bt-cal-track li:nth-child(4) .bt-name,
.bt-cal[data-current="5"] .bt-cal-track li:nth-child(5) .bt-name,
.bt-cal[data-current="6"] .bt-cal-track li:nth-child(6) .bt-name,
.bt-cal[data-current="7"] .bt-cal-track li:nth-child(7) .bt-name,
.bt-cal[data-current="8"] .bt-cal-track li:nth-child(8) .bt-name,
.bt-cal[data-current="9"] .bt-cal-track li:nth-child(9) .bt-name {
  color: var(--crimson, #963131);
  font-weight: 700;
}

/* Multi-stage highlight (data-spans="1,3" or data-spans="1-9") via .is-active */
.bt-cal-track li.is-active .bt-num {
  background: var(--crimson, #963131);
  border-color: var(--crimson, #963131);
  color: #fbf1e4;
  box-shadow: 0 2px 6px rgba(150, 49, 49, 0.35);
}
.bt-cal-track li.is-active .bt-name {
  color: var(--crimson, #963131);
  font-weight: 700;
}

.bt-cal-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(184, 134, 11, 0.3);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #3a3220;
}
.bt-cal-note strong { color: var(--crimson, #963131); }

@media (max-width: 720px) {
  .bt-cal-track {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 4px;
  }
  .bt-cal-track::before { display: none; }
  .bt-name { font-size: 0.6rem; }
  .bt-cite { font-size: 0.7rem; }
}


/* ====================================================================
   INTERPRETIVE TIP — "How to Read This Book / Passage" callout
   --------------------------------------------------------------------
   A compact three-row card that names the genre cue, the hermeneutical
   move, and the Christ-line for a book or section. Designed to live
   inside each .depth-section or each book card.

   Usage:
     <aside class="how-to-read">
       <div class="htr-eyebrow">How to read · Genesis</div>
       <dl class="htr-rows">
         <div class="htr-row">
           <dt>Genre cue</dt>
           <dd>Theological history with patriarchal narrative — read by
               narrative arc, not by isolated proof-text.</dd>
         </div>
         <div class="htr-row">
           <dt>Hermeneutical move</dt>
           <dd>Track the seed-promise from Eden through Abraham…</dd>
         </div>
         <div class="htr-row">
           <dt>Christ-line</dt>
           <dd>Genesis 3:15 → Genesis 22 → Christ as the seed of Abraham…</dd>
         </div>
       </dl>
     </aside>
   ==================================================================== */

.how-to-read {
  margin: 22px 0;
  padding: 18px 22px 16px;
  background: rgba(255, 250, 235, 0.65);
  border: 1px solid rgba(184, 134, 11, 0.55);
  border-left: 4px solid var(--crimson, #963131);
  border-radius: 4px;
  font-family: 'EB Garamond', Georgia, serif;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 3px 8px rgba(60, 40, 20, 0.04);
}

.htr-eyebrow {
  font-family: 'Cinzel', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson, #963131);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(150, 49, 49, 0.25);
}

.htr-rows {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.htr-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: start;
}

.htr-row dt {
  font-family: 'Cinzel', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep, #8c6f4d);
  padding-top: 2px;
}

.htr-row dd {
  margin: 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.68;
  color: #2a2a2a;
}

.htr-row dd em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--sepia, #8c6f4d);
}

@media (max-width: 640px) {
  .htr-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .htr-row dt {
    font-size: 0.66rem;
  }
}