/* ============================================================
   DEADBAND LIFE — COMPONENT LIBRARY
   db-components.css
   ------------------------------------------------------------
   LOAD THIS ONLY ON ARTICLE PAGES, AFTER db-global.css AND
   db-article.css:
   <link rel="stylesheet" href="db-global.css" />
   <link rel="stylesheet" href="db-article.css" />
   <link rel="stylesheet" href="db-components.css" />

   WHAT LIVES HERE:
   This is the SINGLE, EXCLUSIVE source of truth for every
   reusable diagnostic / data / instructional component defined
   in the DB Blog Post Production Prompt V1.1, Section 3.
   Every class below is defined in exactly ONE place — this
   file — and nowhere else in the codebase. Previously,
   .db-root-cause, .db-callout, .db-stat-block, .db-tag,
   .db-action-box, and .db-system-diagram were each defined a
   second time in db-article.css with different specs; which
   definition actually rendered depended on stylesheet load
   order and CSS specificity, not on intent. That bug is fixed
   by this file being the only home for these classes.

   SHARP CORNERS, NO EXCEPTIONS (confirmed 2026):
   DB Brand Soul V1.02 states plainly: "All data visualizations
   must utilize sharp, 90-degree corners." The previous version
   of this file violated that rule for .-diagram and
   .db-stat-display, which used 14-18px border-radius. Every
   component below uses var(--radius-sharp) (0) — in BOTH light
   and dark mode. This is a hard rule, not a default.

   DARK MODE (confirmed 2026):
   Article dark mode mirrors the navy marketing theme palette
   (db-global.css tokens), not an inverted grayscale version of
   the white editorial theme. Each component below has a
   corresponding @media (prefers-color-scheme: dark) override,
   grouped together in Section 11, that swaps backgrounds/text/
   borders to navy-theme tokens while preserving sharp corners
   and the component's structural layout untouched.

   TOKEN DISCIPLINE:
   Every value in this file is a var(--token) reference into
   db-global.css's :root. Previously this file referenced
   --db-light, --db-text, --db-steel, --db-accent, --db-survival,
   --db-security, --db-vitality, --border-rule, and
   --border-standard — NONE of which existed in :root, so every
   one of these rules silently failed and fell back to browser
   defaults. All such references have been corrected to the
   real token names now defined in db-global.css.
   ============================================================ */

/* ============================================================
   1. DEFINITION BOX (db-definition)
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Section 3.2.
   Use: every FIRST use of a DB Lexicon term across the full
   90-article architecture. After first use, subsequent
   articles use inline definition only — do not re-use this
   component for the same term twice.
   ============================================================ */

.db-definition {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--db-navy);
  border-left: var(--border-data-heavy) solid var(--db-blue);
  border-radius: var(--radius-sharp);
}

.db-definition__technical {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-data);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--db-blue-bright);
}

.db-definition__plain {
  font-family: var(--font-article-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--db-white-muted);
}

/* ============================================================
   2. PILLAR GRID (db-pillar-grid)
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Section 3.2.
   Use: Layer 3 Pillar Pages (#27, #28, #29) and Layer 1
   articles overviewing all three pillars (#03, #04).
   Constraint: text-only domain tiles. Never use icons.
   ============================================================ */

.db-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--border-hairline); /* the 1-2px gap IS the ruled-line separator per Brand Soul */
  margin: var(--space-xl) 0;
  background: var(--db-border);
  border: var(--border-hairline) solid var(--db-border);
}

.db-pillar-grid__pillar {
  background: var(--db-white);
  padding: var(--space-md);
  border-top: var(--border-data-heavy) solid; /* accent color set per-modifier below */
}

.db-pillar-grid__pillar--survival { border-top-color: var(--pillar-survival); }
.db-pillar-grid__pillar--security { border-top-color: var(--pillar-security); }
.db-pillar-grid__pillar--vitality { border-top-color: var(--pillar-vitality); }

.db-pillar-grid__name {
  font-family: var(--font-article-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--db-navy);
  margin-bottom: var(--space-xs);
}

.db-pillar-grid__domains {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-data);
  font-size: 0.85rem;
  color: var(--db-steel);
}

.db-pillar-grid__domains li {
  padding: var(--space-3xs) 0;
}

@media (max-width: 768px) {
  .db-pillar-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   3. ROOT CAUSE FLAG (db-root-cause)
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Section 3.1.
   Use: appears in every diagnosis section, names the root
   cause explicitly using the DB Root Cause taxonomy.
   ============================================================ */

.db-root-cause {
  display: inline-block;
  margin-bottom: var(--space-md);
  padding: var(--space-2xs) var(--space-sm);
  background: rgba(37, 99, 235, 0.08);
  border: var(--border-hairline) solid rgba(37, 99, 235, 0.2);
  color: var(--db-blue);
  border-radius: var(--radius-sharp);
  font-family: var(--font-data);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ============================================================
   4. CALLOUTS (db-callout)
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Sections 3.1 and
   5.2. Four source-type variants — never mix source types in
   the same callout component; each communicates a different
   evidence tier to the reader.
   ============================================================ */

.db-callout {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  border-radius: var(--radius-sharp);
  border-left: var(--border-data-heavy) solid;
}

.db-callout__label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Peer-reviewed journal sources */
.db-callout--research {
  background: rgba(37, 99, 235, 0.05);
  border-left-color: var(--db-blue);
}
.db-callout--research .db-callout__label {
  color: var(--db-blue);
}

/* Professional body / government agency sources (FEMA, FHFA,
   CFPB, ISO, ASQ, BTS) — distinct from peer-reviewed research,
   per Section 5.2's explicit instruction not to treat these as
   equivalent. */
.db-callout--standard {
  background: var(--db-light);
  border-left-color: var(--db-steel);
}
.db-callout--standard .db-callout__label {
  color: var(--db-steel);
}

/* Practitioner guidance without peer-reviewed backing */
.db-callout--tip {
  background: rgba(22, 163, 74, 0.05);
  border-left-color: var(--db-success);
}
.db-callout--tip .db-callout__label {
  color: var(--db-success);
}

/* Research data flags and cautions, incl. the mandatory Survey
   Data Flag for thin-evidence domains (Section 5.3) */
.db-callout--warning {
  background: rgba(217, 119, 6, 0.05);
  border-left-color: var(--db-warning);
}
.db-callout--warning .db-callout__label {
  color: var(--db-warning);
}

/* ============================================================
   5. STAT BLOCK (db-stat-block) — single statistic
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Section 3.1.
   Use: ONE key statistic, max 3x per article. For 2-4 related
   stats, use db-stat-display (Section 7 below) instead.
   ============================================================ */

.db-stat-block {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  background: var(--db-light-alt);
  border-left: var(--border-data-heavy) solid var(--db-blue);
  border-radius: var(--radius-sharp);
}

.db-stat-block__number {
  display: block;
  font-family: var(--font-data);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--db-blue);
  line-height: 1;
}

.db-stat-block__source {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-article-body);
  font-size: 0.8rem;
  color: var(--db-steel);
}

/* ============================================================
   6. SYSTEM DIAGRAM (db-system-diagram)
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Section 3.2.
   Use: all Layer 4 System Pages and Layer 2 Methodology
   articles. Input -> Process -> Output with feedback loop
   label underneath.
   CORRECTED 2026: previously used 14-18px border-radius,
   violating Brand Soul's sharp-corner rule for data
   visualizations. Now uses var(--radius-sharp) throughout.
   Domain-specific variants use the pillar accent color that
   matches the article's pillar (Security/Survival/Vitality),
   applied via the modifier classes below.
   ============================================================ */

.db-system-diagram {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  border: var(--border-data) solid var(--db-border-strong);
  border-radius: var(--radius-sharp);
  background: var(--db-light);
}

.db-system-diagram__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.db-system-diagram__box {
  min-width: 140px;
  padding: var(--space-sm);
  text-align: center;
  border: var(--border-data) solid var(--db-border-strong);
  border-radius: var(--radius-sharp);
  background: var(--db-white);
}

.db-system-diagram__box-term {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--db-blue);
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.db-system-diagram__arrow {
  font-size: 2rem;
  color: var(--db-blue);
  line-height: 1;
}

.db-system-diagram__feedback {
  text-align: center;
  margin-top: var(--space-sm);
  font-family: var(--font-article-body);
  font-size: 0.85rem;
  color: var(--db-steel);
}

/* Domain-specific accent variants — apply alongside the base
   class, e.g. class="db-system-diagram db-system-diagram--security" */
.db-system-diagram--survival .db-system-diagram__box-term,
.db-system-diagram--survival .db-system-diagram__arrow {
  color: var(--pillar-survival);
}
.db-system-diagram--security .db-system-diagram__box-term,
.db-system-diagram--security .db-system-diagram__arrow {
  color: var(--pillar-security);
}
.db-system-diagram--vitality .db-system-diagram__box-term,
.db-system-diagram--vitality .db-system-diagram__arrow {
  color: var(--pillar-vitality);
}

@media (max-width: 768px) {
  .db-system-diagram__inner {
    flex-direction: column;
  }
  .db-system-diagram__arrow {
    transform: rotate(90deg);
  }
}

/* ============================================================
   7. STAT DISPLAY (db-stat-display) — multi-stat
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Section 3.2.
   Use: Layer 4 System Pages. 2-4 related stats from
   DIRECT-access sources only, max once per article.
   CORRECTED 2026: previously used 14-18px border-radius and a
   literal "JetBrains Mono" font string instead of the data
   token. Both fixed below.
   ============================================================ */

.db-stat-display {
  margin: var(--space-xl) 0;
  background: var(--db-navy);
  border-radius: var(--radius-sharp);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--border-hairline);
}

.db-stat-display__stat {
  padding: var(--space-md);
  background: var(--db-navy);
  border: var(--border-hairline) solid var(--db-navy-border);
}

.db-stat-display__number {
  display: block;
  font-family: var(--font-data);
  font-size: 2rem;
  font-weight: 700;
  color: var(--db-white);
  line-height: 1;
}

.db-stat-display__label {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-article-display);
  font-size: 0.95rem;
  color: var(--db-white-muted);
}

.db-stat-display__source {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-article-body);
  font-size: 0.75rem;
  color: var(--db-steel-light);
}

/* ============================================================
   8. FAILURE GRID (db-failure-grid)
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Section 3.2.
   Use: MANDATORY on every Layer 4 System Page. Three columns:
   Root Cause Type / Observable Signal / Corrective Action
   Direction. Five rows, one per DB root cause.
   ============================================================ */

.db-failure-grid {
  width: 100%;
  margin: var(--space-xl) 0;
  border-collapse: collapse;
  border: var(--border-data) solid var(--db-border-strong);
}

.db-failure-grid th {
  background: var(--db-navy);
  color: var(--db-white);
  font-family: var(--font-article-display);
  font-size: 0.9rem;
  text-align: left;
  padding: var(--space-sm);
  border: var(--border-hairline) solid var(--db-navy-border);
}

.db-failure-grid td {
  padding: var(--space-sm);
  border: var(--border-hairline) solid var(--db-border);
  font-family: var(--font-article-body);
  font-size: 0.95rem;
  vertical-align: top;
}

.db-failure-grid td .db-root-cause {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .db-failure-grid,
  .db-failure-grid thead,
  .db-failure-grid tbody,
  .db-failure-grid th,
  .db-failure-grid td,
  .db-failure-grid tr {
    display: block;
  }
  .db-failure-grid thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .db-failure-grid tr {
    margin-bottom: var(--space-sm);
    border: var(--border-data) solid var(--db-border-strong);
  }
}

/* ============================================================
   9. VALIDATED INSTRUMENT DISPLAY (db-validated-instrument)
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Section 3.2.
   Use: domains with a validated psychometric instrument only
   (HEPI/Emergency, HPBS/Health, NASA-TLX/Mental). Never mix
   dimensions from different instruments in one display.
   ============================================================ */

.db-validated-instrument {
  margin: var(--space-xl) 0;
  border: var(--border-data) solid var(--db-border-strong);
}

.db-validated-instrument__header {
  background: var(--db-navy);
  color: var(--db-white);
  padding: var(--space-md);
}

.db-validated-instrument__name {
  font-family: var(--font-article-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 var(--space-3xs);
}

.db-validated-instrument__citation {
  font-family: var(--font-article-body);
  font-size: 0.8rem;
  color: var(--db-steel-light);
}

.db-validated-instrument__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--border-hairline);
  background: var(--db-border);
}

.db-validated-instrument__card {
  background: var(--db-light);
  padding: var(--space-md);
}

.db-validated-instrument__dimension {
  display: block;
  font-family: var(--font-article-display);
  font-weight: 700;
  color: var(--db-navy);
  margin-bottom: var(--space-2xs);
}

.db-validated-instrument__description {
  font-family: var(--font-article-body);
  font-size: 0.9rem;
  color: var(--db-text);
}

@media (max-width: 768px) {
  .db-validated-instrument__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   10. FIVE WHYS (db-five-whys)
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Section 3.2.
   Use: #13 (Five Whys Explained) and any Layer 4/5 article
   walking through a root cause chain. Never fabricate the
   causal chain — each level must follow logically.
   ============================================================ */

.db-five-whys {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--db-navy);
  border-radius: var(--radius-sharp);
  font-family: var(--font-data);
}

.db-five-whys__level {
  padding: var(--space-2xs) 0;
  color: var(--db-white);
  font-size: 0.95rem;
}

/* Each Why level indented one further step than the last */
.db-five-whys__level:nth-child(1) { padding-left: 0; }
.db-five-whys__level:nth-child(2) { padding-left: var(--space-sm); }
.db-five-whys__level:nth-child(3) { padding-left: calc(var(--space-sm) * 2); }
.db-five-whys__level:nth-child(4) { padding-left: calc(var(--space-sm) * 3); }
.db-five-whys__level:nth-child(5) { padding-left: calc(var(--space-sm) * 4); }

.db-five-whys__level--root {
  color: var(--db-blue-bright);
  font-weight: 700;
}

.db-five-whys__step {
  display: block;
  font-family: var(--font-data);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3xs);
  color: var(--db-blue-bright);
}

.db-five-whys__item--root .db-five-whys__step {
  color: var(--db-white);
}

.db-five-whys__question {
  display: block;
  color: var(--db-white);
  margin-bottom: var(--space-3xs);
}

.db-five-whys__answer {
  display: block;
  color: var(--db-white-muted);
}

.db-five-whys__item--root .db-five-whys__question,
.db-five-whys__item--root .db-five-whys__answer {
  color: var(--db-white);
}
/* ============================================================
   11. CASCADE DIAGRAM (db-cascade-diagram)
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Section 3.2.
   Use: TIER 1 CASCADE RISK DOMAINS ONLY — Emergency Systems
   (#33) and Money Systems (#34, approved). Do not use on any
   other article. No diagonal lines — horizontal/vertical only.
   ============================================================ */

.db-cascade-diagram {
  margin: var(--space-xl) 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: var(--border-hairline);
  background: var(--db-border);
  border: var(--border-data) solid var(--db-border-strong);
}

.db-cascade-diagram__node {
  background: var(--db-light);
  padding: var(--space-md);
  text-align: center;
  font-family: var(--font-article-display);
  font-size: 0.9rem;
  color: var(--db-steel);
}

.db-cascade-diagram__node--source {
  background: var(--db-navy);
  color: var(--db-white);
  font-weight: 700;
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 600px) {
  .db-cascade-diagram {
    grid-template-columns: 1fr;
  }
  .db-cascade-diagram__node--source {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ============================================================
   12. BOOK RECOMMENDATION (db-book-rec)
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Section 3.2.
   Use: when the best available source for a claim is a
   credentialed book rather than a peer-reviewed journal.
   Required in all thin-evidence domain articles (Legal, Food,
   Transportation, Civic) where a book is the primary reference.
   ALSO: per standing project instruction, this component is
   the required fallback any time product ideation or content
   claims cannot be traced to a peer-reviewed source.
   ============================================================ */

.db-book-rec {
  display: flex;
  gap: var(--space-sm);
  margin: var(--space-xl) 0;
  padding: var(--space-md);
  background: var(--db-navy);
  border-left: var(--border-data-heavy) solid var(--db-blue);
  border-radius: var(--radius-sharp);
}

.db-book-rec__icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.db-book-rec__label {
  display: block;
  color: var(--db-blue-bright);
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.db-book-rec__title {
  display: block;
  font-family: var(--font-article-display);
  font-weight: 700;
  color: var(--db-white);
}

.db-book-rec__author {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--db-white);
  font-family: var(--font-article-body);
  font-size: 0.9rem;
}

.db-book-rec__description {
  font-family: var(--font-article-body);
  font-size: 0.9rem;
  color: var(--db-white);
}

/* ============================================================
   13. ACTION BOX (db-action-box)
   ------------------------------------------------------------
   Spec: DB Blog Post Production Prompt V1.1, Section 2.1.
   Use: NON-NEGOTIABLE — must appear in EVERY article. The
   single 24-hour action.
   ============================================================ */

.db-action-box {
  margin: var(--space-2xl) 0;
  padding: var(--space-lg);
  background: var(--db-navy);
  color: var(--db-white);
  border-radius: var(--radius-sharp);
}

.db-action-box__label {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--db-blue-bright);
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.db-action-box h3 {
  font-family: var(--font-article-display);
  color: var(--db-white);
  margin: 0 0 var(--space-2xs);
}

.db-action-box p {
  color: var(--db-white-muted);
  margin: 0;
}

.db-action-step {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sharp);
  line-height: 1.6;
}

/* ============================================================
   14. DOMAIN CARD (db-domain-card)
   ------------------------------------------------------------
   Use: domain index/overview listings inside article body
   content (e.g. "The Twelve Life Systems Explained," #04).
   Moved here from db-global.css, which is chrome-only and
   should not own article-body content components.
   ============================================================ */

.db-domain-card {
  padding: var(--space-md);
  border: var(--border-data) solid var(--db-border-strong);
  border-radius: var(--radius-sharp);
  background: var(--db-white);
}

.db-domain-card--survival { border-top: var(--border-data-heavy) solid var(--pillar-survival); }
.db-domain-card--security { border-top: var(--border-data-heavy) solid var(--pillar-security); }
.db-domain-card--vitality { border-top: var(--border-data-heavy) solid var(--pillar-vitality); }

.db-domain-card__name {
  font-family: var(--font-article-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--db-navy);
  margin-bottom: var(--space-2xs);
}

.db-domain-card__description {
  font-family: var(--font-article-body);
  font-size: 0.9rem;
  color: var(--db-text);
}

/* ============================================================
   15. LEXICON ITEM (db-lexicon-item)
   ------------------------------------------------------------
   Use: glossary-style listing of DB Lexicon terms (e.g. within
   a "Deadband Glossary" reference article). Distinct from
   db-definition, which is for FIRST-USE full treatment inline;
   this is for a standalone reference listing of many terms at
   once. Moved here from db-global.css for the same reason as
   db-domain-card above.
   ============================================================ */

.db-lexicon-item {
  padding: var(--space-sm) 0;
  border-bottom: var(--border-hairline) solid var(--db-border);
}

.db-lexicon-item__technical {
  font-family: var(--font-data);
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--db-steel);
}

.db-lexicon-item__plain {
  font-family: var(--font-article-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--db-navy);
  margin: var(--space-3xs) 0;
}

.db-lexicon-item__definition {
  font-family: var(--font-article-body);
  font-size: 0.95rem;
  color: var(--db-text);
}

/* ============================================================
   17. CONTENT COMPONENTS FOUND IN PRODUCTION ARTICLES
   ------------------------------------------------------------
   Added 2026 after auditing the 18 already-written articles
   against this file. Per project decision: the 18 articles are
   the source of truth — every class/structure below matches
   their actual HTML exactly, including cases where the same
   conceptual component (e.g. db-pillar-grid, db-system-diagram,
   db-stat-display) was independently built with different
   internal naming across different articles. Where multiple
   genuine variants exist, all are supported so nothing in the
   18 files renders broken; reconciling which variant becomes
   the permanent standard is flagged for the structural review
   pass, not decided here.
   ============================================================ */

/* ---- 17.1 PILLAR GRID — RICH COLUMN VARIANT ----
   Used in: security-protecting-resources-reducing-risk,
   survival-building-stable-foundation,
   three-pillars-stability-security-vitality,
   twelve-life-systems-explained. This is a SEPARATE, richer
   structure from the simpler .db-pillar-grid__pillar layout
   already defined in Section 2 above (used by
   what-is-deadband-life.html only). Both variants are
   supported; Section 2's simple version and this richer
   "__column" version currently coexist as genuine alternates
   across the article set. */

.db-pillar-grid__column {
  background: var(--db-white);
  padding: var(--space-md);
  position: relative;
}

.db-pillar-grid__column--active {
  background: var(--db-light);
}

.db-pillar-grid__column--inactive {
  opacity: 0.6;
}

/* Some articles mark the active column by pillar identity
   instead of by active/inactive state (e.g. three-pillars and
   twelve-life-systems, which show all three pillars at equal
   weight). Modifiers below support that usage too. */
.db-pillar-grid__column--survival,
.db-pillar-grid__column--security,
.db-pillar-grid__column--vitality {
  background: var(--db-white);
}

.db-pillar-grid__accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--border-data-heavy);
}

.db-pillar-grid__accent-bar--survival { background: var(--pillar-survival); }
.db-pillar-grid__accent-bar--security { background: var(--pillar-security); }
.db-pillar-grid__accent-bar--vitality { background: var(--pillar-vitality); }

.db-pillar-grid__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: var(--space-sm) 0 var(--space-md);
}

.db-pillar-grid__pillar-name {
  font-family: var(--font-article-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--db-navy);
}

.db-pillar-grid__function {
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--db-steel);
}

.db-pillar-grid__domain-tile {
  display: block;
  padding: var(--space-2xs) 0;
  font-size: 0.95rem;
  color: var(--db-text);
}

.db-pillar-grid__failure {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--border-hairline) solid var(--db-border);
  font-size: 0.85rem;
  color: var(--db-steel);
}

.db-pillar-grid__note {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--db-steel);
}

/* ---- 17.2 PILLAR CARD — THREE VARIANTS ----
   VARIANT 1 (simple): what-is-deadband-life.html.
   __label + __subtitle + __domains, no __header wrapper. */

.db-pillar-card {
  padding: var(--space-md);
  background: var(--db-white);
  border: var(--border-data) solid var(--db-border-strong);
  border-top: var(--border-data-heavy) solid;
}

.db-pillar-card--survival { border-top-color: var(--pillar-survival); }
.db-pillar-card--security { border-top-color: var(--pillar-security); }
.db-pillar-card--vitality { border-top-color: var(--pillar-vitality); }

.db-pillar-card__label {
  display: block;
  font-family: var(--font-article-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--db-navy);
}

.db-pillar-card__subtitle {
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--db-steel);
  margin: var(--space-2xs) 0 var(--space-sm);
}

.db-pillar-card__domains {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--db-text);
}

/* VARIANT 2 (with header + synonym + failure note):
   three-pillars-stability-security-vitality.html. */

.db-pillar-card__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.db-pillar-card__synonym {
  font-family: var(--font-data);
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--db-steel);
}

.db-pillar-card__failure {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: var(--border-hairline) solid var(--db-border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--db-steel);
}

/* ---- 17.3 DOMAIN CARD — ADDITIONAL SUB-ELEMENTS ----
   Base .db-domain-card already exists (Section 14, original
   rebuild). These sub-elements were missing. */

.db-domain-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.db-domain-card__tier {
  flex-shrink: 0;
  padding: var(--space-3xs) var(--space-xs);
  font-family: var(--font-data);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sharp);
  color: var(--db-white);
}

.db-domain-card__tier--tier1 { background: var(--db-danger); }
.db-domain-card__tier--tier2 { background: var(--db-warning); }
.db-domain-card__tier--tier3 { background: var(--db-steel); }
.db-domain-card__tier--tier4 { background: var(--pillar-vitality); }

.db-domain-card__signal-label {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-data);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--db-steel);
}

.db-domain-card__signal {
  display: block;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--db-text);
}

.db-domain-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-top: var(--space-sm);
  font-weight: 600;
  font-size: 0.9rem;
}

.db-domain-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

@media (max-width: 768px) {
  .db-domain-overview {
    grid-template-columns: 1fr;
  }
}

/* ---- 17.4 DOMAIN ENTRY ----
   Used in twelve-life-systems-explained.html: a denser variant
   of the domain card pattern, grouped by pillar section
   (Section 17.9 below). */

.db-domain-entries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--border-hairline);
  background: var(--db-border);
  margin: var(--space-lg) 0;
}

.db-domain-entry {
  background: var(--db-white);
  padding: var(--space-md);
}

/* Pillar tint modifiers on the grid container — applied per
   the HTML's own authoring comment ("Survival tint background
   applied to all entries via modifier class"). Solid-color
   fallback declared first for browsers without color-mix()
   support; color-mix() overrides it where supported. */
.db-domain-entries--survival .db-domain-entry {
  background: var(--db-light);
  background: color-mix(in srgb, var(--pillar-survival) 6%, var(--db-white));
}
.db-domain-entries--security .db-domain-entry {
  background: var(--db-light);
  background: color-mix(in srgb, var(--pillar-security) 6%, var(--db-white));
}
.db-domain-entries--vitality .db-domain-entry {
  background: var(--db-light);
  background: color-mix(in srgb, var(--pillar-vitality) 6%, var(--db-white));
}

.db-domain-entry__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.db-domain-entry__name {
  font-family: var(--font-article-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--db-navy);
}

.db-domain-entry__tier {
  flex-shrink: 0;
  padding: var(--space-3xs) var(--space-xs);
  font-family: var(--font-data);
  font-size: 0.65rem;
  text-transform: uppercase;
  border-radius: var(--radius-sharp);
  color: var(--db-white);
  white-space: nowrap;
}

.db-domain-entry__tier--tier1 { background: var(--db-danger); }
.db-domain-entry__tier--tier2 { background: var(--db-warning); }
.db-domain-entry__tier--tier3 { background: var(--db-steel); }
.db-domain-entry__tier--tier4 { background: var(--pillar-vitality); }

.db-domain-entry__definition {
  font-size: 0.92rem;
  color: var(--db-text);
  margin-bottom: var(--space-sm);
}

.db-domain-entry__signal-label {
  display: block;
  font-family: var(--font-data);
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--db-steel);
}

.db-domain-entry__signal {
  display: block;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--db-text);
  margin-bottom: var(--space-sm);
}

.db-domain-entry__link {
  font-weight: 600;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .db-domain-entries {
    grid-template-columns: 1fr;
  }
}

/* ---- 17.5 PILLAR SECTION WRAPPER ----
   Groups a set of db-domain-entry cards under one pillar
   heading (twelve-life-systems-explained.html). */

.db-pillar-section {
  margin: var(--space-2xl) 0;
}

.db-pillar-section__intro {
  display: block;
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2xs);
}

.db-pillar-section--survival .db-pillar-section__intro { color: var(--pillar-survival); }
.db-pillar-section--security .db-pillar-section__intro { color: var(--pillar-security); }
.db-pillar-section--vitality .db-pillar-section__intro { color: var(--pillar-vitality); }

.db-pillar-section__synthesis {
  font-size: 1.05rem;
  color: var(--db-steel);
  margin-bottom: var(--space-md);
}

/* ---- 17.6 FAILURE CARD ----
   The actual structure db-failure-grid contains: a vertical
   stack of cards, each with three labeled columns, rather than
   the <table> markup originally assumed. The base
   .db-failure-grid rule (Section 8, original rebuild) still
   applies as the outer container; these are its children. */

.db-failure-card {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.6fr;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: var(--border-hairline) solid var(--db-border);
}

.db-failure-card:last-child {
  border-bottom: none;
}

.db-failure-card__col-label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-data);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--db-steel);
}

.db-failure-card__type {
  font-weight: 700;
  color: var(--db-navy);
  font-size: 0.95rem;
}

.db-failure-card__text {
  font-size: 0.9rem;
  color: var(--db-text);
}

.db-failure-card__fix {
  font-size: 0.9rem;
  color: var(--db-text);
}

.db-failure-card__fix strong {
  display: block;
  color: var(--db-blue);
  margin-bottom: var(--space-3xs);
}

@media (max-width: 768px) {
  .db-failure-card {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* ---- 17.7 COST TABLE ----
   Used in home-systems-foundation-of-stability.html: a
   3-column proactive-vs-reactive cost comparison, built as
   divs with table ARIA roles rather than a native <table>. */

.db-cost-table {
  margin: var(--space-xl) 0;
  border: var(--border-data) solid var(--db-border-strong);
}

.db-cost-table__header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  background: var(--db-navy);
}

.db-cost-table__header-cell {
  padding: var(--space-sm);
  color: var(--db-white);
  font-family: var(--font-article-display);
  font-size: 0.9rem;
  font-weight: 700;
}

.db-cost-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border-top: var(--border-hairline) solid var(--db-border);
}

.db-cost-table__system {
  padding: var(--space-sm);
  font-weight: 600;
  color: var(--db-navy);
  font-size: 0.9rem;
}

.db-cost-table__system span {
  display: block;
  margin-top: var(--space-3xs);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--db-steel);
}

.db-cost-table__cost-preventive,
.db-cost-table__cost-reactive {
  padding: var(--space-sm);
  font-family: var(--font-data);
  font-size: 0.9rem;
  align-self: center;
}

.db-cost-table__cost-preventive {
  color: var(--db-success);
}

.db-cost-table__cost-reactive {
  color: var(--db-danger);
}

.db-cost-table__caption {
  padding: var(--space-sm);
  font-size: 0.8rem;
  color: var(--db-steel);
  border-top: var(--border-hairline) solid var(--db-border);
}

@media (max-width: 600px) {
  .db-cost-table__header,
  .db-cost-table__row {
    grid-template-columns: 1fr;
  }
}

/* ---- 17.8 SYSTEM DIAGRAM — ADDITIONAL NAMING VARIANTS ----
   The base .db-system-diagram container (Section 6, original
   rebuild) is shared. Three different internal-naming patterns
   for its children exist across the article set; all are
   supported here. */

/* Variant: __row / __box / __arrow / __feedback (simple,
   used by most Layer 1/2 articles) */
.db-system-diagram__row {
  display: grid;
  align-items: center;
  justify-content: center;
   grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Variant: __flow / __box--input / __box--output / __box-type /
   __box-name / __box-detail / __feedback-row / __feedback-label
   / __caption (richer, used by Layer 4 System Pages) */
.db-system-diagram__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.db-system-diagram__box--input {
  border-left: var(--border-data-heavy) solid var(--db-blue);
}

.db-system-diagram__box--output {
  border-right: var(--border-data-heavy) solid var(--db-blue);
}

.db-system-diagram__box--process {
  border-top: var(--border-data-heavy) solid var(--db-blue);
}

.db-system-diagram__box-type {
  display: block;
  font-family: var(--font-data);
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--db-blue);
  margin-bottom: var(--space-2xs);
}

.db-system-diagram__box-name {
  display: block;
  font-family: var(--font-article-display);
  font-weight: 700;
  color: var(--db-navy);
  margin-bottom: var(--space-2xs);
}

.db-system-diagram__box-detail {
  display: block;
  font-size: 0.8rem;
  color: var(--db-steel);
  line-height: 1.5;
}

.db-system-diagram__feedback-row {
  width: 100%;
  margin-top: var(--space-sm);
}

.db-system-diagram__feedback-label {
  text-align: center;
  font-size: 0.85rem;
  color: var(--db-steel);
}

.db-system-diagram__caption {
  margin-top: var(--space-sm);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--db-steel);
  text-align: center;
}

/* Variant: __inner / __box-term / __box-label (used only by
   systems-thinking-everyday-life.html) */
.db-system-diagram__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.db-system-diagram__box-term {
  display: block;
  font-family: var(--font-data);
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--db-blue);
  margin-bottom: var(--space-2xs);
}

.db-system-diagram__box-label {
  display: block;
  font-size: 0.85rem;
  color: var(--db-text);
}

.db-system-diagram__label {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--db-steel);
}

@media (max-width: 768px) {
  .db-system-diagram__row,
  .db-system-diagram__flow,
  .db-system-diagram__inner {
    flex-direction: column;
  }
}

/* ---- 17.9 STAT DISPLAY — ADDITIONAL NAMING VARIANTS ----
   Base .db-stat-display container (Section 7, original
   rebuild) is shared. Two child-naming variants found:
   __item (most Layer 4 articles) and __cell (health-systems
   article only). Both map to the same visual treatment as the
   original __stat rule. */

.db-stat-display__item,
.db-stat-display__cell {
  padding: var(--space-md);
  background: var(--db-navy);
  border: var(--border-hairline) solid var(--db-navy-border);
}

.db-stat-display__number--accent {
  color: var(--db-blue-bright);
}

/* ---- 17.10 STAT BLOCK — ADDITIONAL SUB-ELEMENTS ----
   Base .db-stat-block (Section 5, original rebuild) is shared.
   Some articles add a __label or __text paragraph beneath the
   number, separate from __source. */

.db-stat-block__label,
.db-stat-block__text {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-article-body);
  font-size: 0.95rem;
  color: var(--db-text);
}

/* ---- 17.11 FIVE WHYS — ALTERNATE ROW NAMING ----
   Base .db-five-whys container (Section 10, original rebuild)
   is shared. Several articles use __row / __root instead of
   __level / __level--root. */

.db-five-whys__row {
  padding: var(--space-2xs) 0;
  color: var(--db-white-muted);
  font-size: 0.95rem;
}

.db-five-whys__root {
  color: var(--db-blue-bright);
  font-weight: 700;
}

/* ---- 17.12 CASCADE DIAGRAM — ACTUAL ARTICLE STRUCTURE ----
   emergency-systems-preparing-for-the-unexpected.html builds
   this differently than the original rebuild assumed: a
   labeled center node, a text "radiator" arrow row, then a
   flat grid of affected-domain tiles (not a 3x3 grid with the
   source pinned at center). Supporting the actual structure. */

.db-cascade-diagram__label {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--db-steel-light);
  text-align: center;
}

.db-cascade-diagram__center {
  text-align: center;
  padding: var(--space-sm);
  margin: 0 auto var(--space-sm);
  max-width: 280px;
  background: var(--db-blue);
  color: var(--db-white);
  font-family: var(--font-article-display);
  font-weight: 700;
  font-size: 0.95rem;
}

.db-cascade-diagram__radiator {
  display: block;
  text-align: center;
  color: var(--db-blue);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.db-cascade-diagram__domains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: var(--border-hairline);
  background: var(--db-border);
}

.db-cascade-diagram__domain {
  background: var(--db-light);
  padding: var(--space-sm);
  text-align: center;
  font-family: var(--font-article-display);
  font-size: 0.85rem;
  color: var(--db-steel);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Emergency sits in the visual center of the 3x2 grid (position
   5 of 6: row 2, column 2), with the five affected domains
   surrounding it, so the layout reads as radiation rather than
   a plain list. */
.db-cascade-diagram__domain--source {
  background: var(--db-navy);
  color: var(--db-white);
  font-weight: 700;
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 600px) {
  .db-cascade-diagram__domains {
    grid-template-columns: 1fr;
  }
  .db-cascade-diagram__domain--source {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ---- 17.13 VALIDATED INSTRUMENT — ALTERNATE NAMING ----
   emergency-systems article uses .db-hepi-grid / .db-hepi-card
   as a domain-specific instance of the validated-instrument
   pattern, rather than the generic db-validated-instrument
   classes. Distinct component, supported on its own terms. */

.db-hepi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--border-hairline);
  background: var(--db-border);
  margin: var(--space-xl) 0;
  border: var(--border-data) solid var(--db-border-strong);
}

.db-hepi-card {
  background: var(--db-white);
  padding: var(--space-md);
}

.db-hepi-card__number {
  display: block;
  font-family: var(--font-data);
  font-size: 0.8rem;
  color: var(--db-blue);
  margin-bottom: var(--space-2xs);
}

.db-hepi-card__name {
  display: block;
  font-family: var(--font-article-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--db-navy);
  margin-bottom: var(--space-2xs);
}

.db-hepi-card__desc {
  font-size: 0.9rem;
  color: var(--db-text);
}

@media (max-width: 768px) {
  .db-hepi-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 17.14 CONCEPT GRID + CONCEPT CARD ----
   Used in systems-thinking-everyday-life.html for the
   Stock/Flow/Feedback/Delay four-concept grid. */

.db-concept-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.db-concept-card {
  padding: var(--space-md);
  background: var(--db-light);
  border: var(--border-data) solid var(--db-border-strong);
}

.db-concept-card__term {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-data);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--db-blue);
}

.db-concept-card__plain {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-article-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--db-navy);
}

@media (max-width: 600px) {
  .db-concept-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 17.15 CONCEPT DIAGRAM — DEADBAND ZONE VISUAL ----
   Used only in what-is-a-deadband.html, for the engineering
   deadband-zone illustration (threshold / steady-zone bands). */

.db-concept-diagram {
  margin: var(--space-xl) 0;
}

.db-concept-diagram__label {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-data);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--db-steel);
}

.db-concept-diagram__wrapper {
  border: var(--border-data) solid var(--db-border-strong);
  padding: var(--space-md);
}

.db-concept-diagram__bar {
  display: flex;
  align-items: stretch;
}

.db-concept-diagram__zone {
  flex: 1;
  padding: var(--space-sm);
  text-align: center;
  font-size: 0.85rem;
  border-right: var(--border-hairline) solid var(--db-border);
}

.db-concept-diagram__zone:last-child {
  border-right: none;
}

.db-concept-diagram__zone--action-low,
.db-concept-diagram__zone--action-high {
  background: var(--db-light);
  color: var(--db-steel);
  flex: 0.8;
}

.db-concept-diagram__zone--threshold {
  background: var(--db-border);
  color: var(--db-steel);
  flex: 0.3;
  font-family: var(--font-data);
  font-size: 0.65rem;
  text-transform: uppercase;
}

.db-concept-diagram__zone--deadband {
  background: var(--db-white);
  border-top: var(--border-data-heavy) solid var(--db-blue);
  border-bottom: var(--border-data-heavy) solid var(--db-blue);
  flex: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2xs);
}

.zone-name {
  font-family: var(--font-article-display);
  font-weight: 700;
  color: var(--db-navy);
}

.zone-setpoint {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--db-blue);
}

.db-concept-diagram__labels {
  display: flex;
  margin-top: var(--space-2xs);
}

.db-concept-diagram__zone-label {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  padding: var(--space-2xs);
}

.db-concept-diagram__zone-label--action {
  color: var(--db-steel);
  flex: 0.8;
}

.db-concept-diagram__zone-label--threshold {
  flex: 0.3;
}

.db-concept-diagram__zone-label--deadband {
  color: var(--db-blue);
  flex: 1.6;
}

.db-concept-diagram__caption {
  margin-top: var(--space-sm);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--db-steel);
}

@media (max-width: 768px) {
  .db-concept-diagram__bar,
  .db-concept-diagram__labels {
    flex-direction: column;
  }
  .db-concept-diagram__zone,
  .db-concept-diagram__zone-label {
    border-right: none;
    border-bottom: var(--border-hairline) solid var(--db-border);
  }
}

/* ---- 17.16 EXAMPLES GRID — WITH/WITHOUT COMPARISON ----
   Used in what-is-a-deadband.html for the three domain
   examples (Money/Health/Mental) contrasting life with and
   without a Steady Zone. */

.db-examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.db-examples-grid__card {
  padding: var(--space-md);
  border: var(--border-data) solid var(--db-border-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.db-examples-grid__domain {
  font-family: var(--font-article-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--db-navy);
}

.db-examples-grid__without-label,
.db-examples-grid__with-label {
  display: block;
  font-family: var(--font-data);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.db-examples-grid__without-label { color: var(--db-steel); }
.db-examples-grid__with-label { color: var(--db-blue); }

.db-examples-grid__without,
.db-examples-grid__with {
  display: block;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--db-text);
}

@media (max-width: 768px) {
  .db-examples-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 17.17 BELIEF LIST ----
   Used in what-is-deadband-life.html: a numbered list of the
   Five Beliefs, numbered via CSS counters in JetBrains Mono. */

.db-belief-list {
  list-style: none;
  margin: var(--space-lg) 0;
  padding: 0;
  counter-reset: belief-counter;
}

.db-belief-list li {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: var(--space-md);
  counter-increment: belief-counter;
}

.db-belief-list li::before {
  content: counter(belief-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-data);
  font-weight: 700;
  color: var(--db-blue);
  font-size: 0.95rem;
}

/* ---- 17.18 DEFINITION BOX — ADDITIONAL SUB-ELEMENTS ----
   Base .db-definition (Section 1, original rebuild) is shared.
   Several articles add a __term-row (term + synonym side by
   side) instead of using __technical directly for the term. */

.db-definition__term-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.db-definition__term {
  font-family: var(--font-article-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--db-white);
}

.db-definition__synonym {
  font-family: var(--font-data);
  font-size: 0.85rem;
  color: var(--db-blue-bright);
}

/* Pillar-specific accent variants of the definition box, used
   in three-pillars-stability-security-vitality.html. */
.db-definition--survival { border-left-color: var(--pillar-survival); }
.db-definition--security { border-left-color: var(--pillar-security); }
.db-definition--vitality { border-left-color: var(--pillar-vitality); }

/* ============================================================
   18. DARK MODE — SECTION 17 ADDITIONS
   ------------------------------------------------------------
   Grouped together for the same maintainability reason as
   Section 16 above.
   ============================================================ */

@media (prefers-color-scheme: dark) {

  .db-pillar-grid__column,
  .db-pillar-grid__column--survival,
  .db-pillar-grid__column--security,
  .db-pillar-grid__column--vitality {
    background: var(--db-navy-raised);
  }
  .db-pillar-grid__column--active {
    background: var(--db-navy-border);
  }
  .db-pillar-grid__pillar-name {
    color: var(--db-white);
  }
  .db-pillar-grid__function,
  .db-pillar-grid__failure,
  .db-pillar-grid__note,
  .db-pillar-grid__domain-tile {
    color: var(--db-steel-light);
  }
  .db-pillar-grid__failure {
    border-top-color: var(--db-navy-border);
  }
  .db-pillar-grid__accent-bar--survival { background: var(--pillar-survival-dark); }
  .db-pillar-grid__accent-bar--security { background: var(--pillar-security-dark); }
  .db-pillar-grid__accent-bar--vitality { background: var(--pillar-vitality-dark); }

  .db-pillar-card {
    background: var(--db-navy-raised);
    border-color: var(--db-navy-border);
  }
  .db-pillar-card--survival { border-top-color: var(--pillar-survival-dark); }
  .db-pillar-card--security { border-top-color: var(--pillar-security-dark); }
  .db-pillar-card--vitality { border-top-color: var(--pillar-vitality-dark); }
  .db-pillar-card__label,
  .db-pillar-card__domains {
    color: var(--db-white);
  }
  .db-pillar-card__subtitle,
  .db-pillar-card__synonym,
  .db-pillar-card__failure {
    color: var(--db-steel-light);
  }

  .db-domain-card__signal,
  .db-domain-entry__definition,
  .db-domain-entry__signal {
    color: var(--db-white-muted);
  }
  .db-domain-card__signal-label,
  .db-domain-entry__signal-label {
    color: var(--db-steel-light);
  }
  .db-domain-entries {
    background: var(--db-navy-border);
  }
  .db-domain-entry {
    background: var(--db-navy-raised);
  }
  .db-domain-entry__name {
    color: var(--db-white);
  }

  .db-failure-card {
    border-bottom-color: var(--db-navy-border);
  }
  .db-failure-card__type {
    color: var(--db-white);
  }
  .db-failure-card__text,
  .db-failure-card__fix {
    color: var(--db-white-muted);
  }
  .db-failure-card__col-label {
    color: var(--db-steel-light);
  }

  .db-cost-table {
    border-color: var(--db-navy-border);
  }
  .db-cost-table__row {
    border-top-color: var(--db-navy-border);
  }
  .db-cost-table__system {
    color: var(--db-white);
  }
  .db-cost-table__system span,
  .db-cost-table__caption {
    color: var(--db-steel-light);
  }
  .db-cost-table__caption {
    border-top-color: var(--db-navy-border);
  }

  .db-system-diagram__box-name {
    color: var(--db-white);
  }
  .db-system-diagram__box-detail,
  .db-system-diagram__feedback-label,
  .db-system-diagram__caption,
  .db-system-diagram__label,
  .db-system-diagram__box-label {
    color: var(--db-steel-light);
  }
  .db-system-diagram__box-term,
  .db-system-diagram__box-type {
    color: var(--db-blue-bright);
  }

  .db-hepi-grid {
    background: var(--db-navy-border);
    border-color: var(--db-navy-border);
  }
  .db-hepi-card {
    background: var(--db-navy-raised);
  }
  .db-hepi-card__name {
    color: var(--db-white);
  }
  .db-hepi-card__desc {
    color: var(--db-white-muted);
  }
  .db-hepi-card__number {
    color: var(--db-blue-bright);
  }

  .db-concept-card {
    background: var(--db-navy-raised);
    border-color: var(--db-navy-border);
  }
  .db-concept-card__plain {
    color: var(--db-white);
  }

  .db-concept-diagram__wrapper {
    border-color: var(--db-navy-border);
  }
  .db-concept-diagram__zone {
    border-right-color: var(--db-navy-border);
  }
  .db-concept-diagram__zone--action-low,
  .db-concept-diagram__zone--action-high,
  .db-concept-diagram__zone--threshold {
    background: var(--db-navy-raised);
    color: var(--db-steel-light);
  }
  .db-concept-diagram__zone--deadband {
    background: var(--db-navy);
    border-color: var(--db-blue-bright);
  }
  .zone-name {
    color: var(--db-white);
  }
  .db-concept-diagram__zone-label--action {
    color: var(--db-steel-light);
  }
  .db-concept-diagram__caption {
    color: var(--db-steel-light);
  }

  .db-examples-grid__card {
    border-color: var(--db-navy-border);
  }
  .db-examples-grid__domain {
    color: var(--db-white);
  }
  .db-examples-grid__without,
  .db-examples-grid__with {
    color: var(--db-white-muted);
  }

  .db-definition__term {
    color: var(--db-white);
  }
}


/* ============================================================
   16. DARK MODE — ALL COMPONENTS
   ------------------------------------------------------------
   Confirmed 2026: mirrors the navy marketing theme palette.
   Sharp corners preserved throughout — no exceptions in dark
   mode either. Grouped together here (rather than inline per
   component above) so the full set of dark-mode overrides can
   be reviewed and maintained as one block.
   ============================================================ */

@media (prefers-color-scheme: dark) {

  /* Definition box: already navy in light mode, so dark mode
     just needs a slightly lighter surface to stay distinct
     from the page background. */
  .db-definition {
    background: var(--db-navy-raised);
    border-left-color: var(--db-blue-bright);
  }
  .db-definition__technical {
    color: var(--db-blue-bright);
  }

  /* Pillar grid */
  .db-pillar-grid {
    background: var(--db-navy-border);
    border-color: var(--db-navy-border);
  }
  .db-pillar-grid__pillar {
    background: var(--db-navy-raised);
  }
  .db-pillar-grid__pillar--survival { border-top-color: var(--pillar-survival-dark); }
  .db-pillar-grid__pillar--security { border-top-color: var(--pillar-security-dark); }
  .db-pillar-grid__pillar--vitality { border-top-color: var(--pillar-vitality-dark); }
  .db-pillar-grid__name {
    color: var(--db-white);
  }
  .db-pillar-grid__domains {
    color: var(--db-steel-light);
  }

  /* Root cause flag */
  .db-root-cause {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.35);
    color: var(--db-blue-bright);
  }

  /* Callouts */
  .db-callout--research {
    background: rgba(59, 130, 246, 0.1);
    border-left-color: var(--db-blue-bright);
  }
  .db-callout--research .db-callout__label { color: var(--db-blue-bright); }

  .db-callout--standard {
    background: var(--db-navy-raised);
    border-left-color: var(--db-steel-light);
  }
  .db-callout--standard .db-callout__label { color: var(--db-steel-light); }

  .db-callout--tip {
    background: rgba(22, 163, 74, 0.12);
    border-left-color: var(--db-success);
  }

  .db-callout--warning {
    background: rgba(217, 119, 6, 0.12);
    border-left-color: var(--db-warning);
  }

  .db-callout {
    color: var(--db-white-muted);
  }

  /* Stat block */
  .db-stat-block {
    background: var(--db-navy-raised);
    border-left-color: var(--db-blue-bright);
  }
  .db-stat-block__number {
    color: var(--db-blue-bright);
  }
  .db-stat-block__source {
    color: var(--db-steel-light);
  }

  /* System diagram */
  .db-system-diagram {
    background: var(--db-navy-raised);
    border-color: var(--db-navy-border);
  }
  .db-system-diagram__box {
    background: var(--db-navy);
    border-color: var(--db-navy-border);
  }
  .db-system-diagram__box-term,
  .db-system-diagram__arrow {
    color: var(--db-blue-bright);
  }
  .db-system-diagram__feedback {
    color: var(--db-steel-light);
  }
  .db-system-diagram--survival .db-system-diagram__box-term,
  .db-system-diagram--survival .db-system-diagram__arrow { color: var(--pillar-survival-dark); }
  .db-system-diagram--security .db-system-diagram__box-term,
  .db-system-diagram--security .db-system-diagram__arrow { color: var(--pillar-security-dark); }
  .db-system-diagram--vitality .db-system-diagram__box-term,
  .db-system-diagram--vitality .db-system-diagram__arrow { color: var(--pillar-vitality-dark); }

  /* Stat display — already navy-based in light mode; dark mode
     lightens the card borders so cards stay legible against a
     now-navy page background instead of a white one. */
  .db-stat-display__stat {
    border-color: var(--db-navy-border);
    background: var(--db-navy-raised);
  }

  /* Failure grid */
  .db-failure-grid {
    border-color: var(--db-navy-border);
  }
  .db-failure-grid th {
    border-color: var(--db-navy-border);
  }
  .db-failure-grid td {
    background: var(--db-navy-raised);
    border-color: var(--db-navy-border);
    color: var(--db-white-muted);
  }

  /* Validated instrument */
  .db-validated-instrument {
    border-color: var(--db-navy-border);
  }
  .db-validated-instrument__grid {
    background: var(--db-navy-border);
  }
  .db-validated-instrument__card {
    background: var(--db-navy-raised);
  }
  .db-validated-instrument__dimension {
    color: var(--db-white);
  }
  .db-validated-instrument__description {
    color: var(--db-white-muted);
  }

  /* Cascade diagram */
  .db-cascade-diagram {
    background: var(--db-navy-border);
    border-color: var(--db-navy-border);
  }
  .db-cascade-diagram__node {
    background: var(--db-navy-raised);
    color: var(--db-steel-light);
  }
  .db-cascade-diagram__node--source {
    background: var(--db-blue);
    color: var(--db-white);
  }

  /* Book rec — already navy in light mode; dark mode lightens
     the surface one step so it remains distinct from the page
     background. */
  .db-book-rec {
    background: var(--db-navy-raised);
    border-left-color: var(--db-blue-bright);
  }
  .db-book-rec__label {
    color: var(--db-blue-bright);
  }

  /* Action box — same reasoning as book rec/definition above. */
  .db-action-box {
    background: var(--db-navy-raised);
  }
  .db-action-box__label {
    color: var(--db-blue-bright);
  }

  /* Domain card */
  .db-domain-card {
    background: var(--db-navy-raised);
    border-color: var(--db-navy-border);
  }
  .db-domain-card--survival { border-top-color: var(--pillar-survival-dark); }
  .db-domain-card--security { border-top-color: var(--pillar-security-dark); }
  .db-domain-card--vitality { border-top-color: var(--pillar-vitality-dark); }
  .db-domain-card__name {
    color: var(--db-white);
  }
  .db-domain-card__description {
    color: var(--db-white-muted);
  }

  /* Lexicon item */
  .db-lexicon-item {
    border-bottom-color: var(--db-navy-border);
  }
  .db-lexicon-item__technical {
    color: var(--db-steel-light);
  }
  .db-lexicon-item__plain {
    color: var(--db-white);
  }
  .db-lexicon-item__definition {
    color: var(--db-white-muted);
  }
}

/* Two-path parallel/redundancy variant of db-system-diagram
   (used in Article #10): two stacked input boxes converging on
   one shared output box, rather than the standard linear
   input -> process -> output row. */

.db-system-diagram__paths {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}