.data-table { overflow-x: auto; border: 1px solid var(--border-strong); border-radius: var(--callout-radius, 16px); background: var(--bg-surface-raised); }
.data-table:focus-visible { outline: 2px solid var(--color-moss-9); outline-offset: 2px; }
.data-table table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.data-table caption { padding: var(--space-s) var(--space-m); border-bottom: 1px solid var(--border-default); text-align: left; font-size: var(--fs-caption); font-weight: 600; color: var(--fg-default); }
.data-table thead th { padding: var(--space-s) var(--space-m); border-bottom: 1px solid var(--border-default); text-align: left; vertical-align: bottom; font-size: var(--fs-caption); font-weight: 500; color: var(--fg-weak); }
.data-table tbody :is(th, td) { padding: var(--space-s) var(--space-m); border-top: 1px solid var(--border-default); text-align: left; vertical-align: top; color: var(--fg-weak); }
.data-table tbody tr:first-child :is(th, td) { border-top: 0; }
.data-table tbody th { font-weight: 700; color: var(--fg-default); }
.data-table tbody tr[data-mark~='highlight'] :is(th, td) { background: var(--color-moss-3); }
.data-table tbody tr[data-mark~='total'] :is(th, td) { font-weight: 700; color: var(--fg-default); }
.data-table tfoot td { padding: var(--space-s) var(--space-m); border-top: 1px solid var(--border-strong); font-weight: 600; }
.data-table table[data-numeric] :is(td, thead th):not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.data-table a { color: var(--color-moss-9); text-decoration: underline; text-underline-offset: 3px; }
.data-table strong { color: var(--fg-default); }
@media (max-width: 639px) {
  .data-table[data-stack] { overflow: visible; }
  .data-table[data-stack] table { min-width: 0; }
  .data-table[data-stack] thead { display: none; }
  .data-table[data-stack] :is(tbody, tr, th, td) { display: block; }
  .data-table[data-stack] tbody tr { padding: var(--space-s) var(--space-m); border-top: 1px solid var(--border-default); }
  .data-table[data-stack] tbody tr:first-child { border-top: 0; }
  .data-table[data-stack] tbody :is(th, td) { padding: var(--space-2xs) 0; border: 0; }
  .data-table[data-stack] tbody th { width: auto; font-size: var(--fs-body); }
  .data-table[data-stack] td[data-label]::before { content: attr(data-label); display: block; margin-top: var(--space-xs); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-moss-9); }
}
.line-chart { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.line-chart-grid path { stroke: var(--border-default); stroke-width: 1; }
.line-chart-tick { fill: var(--fg-weak); font-size: var(--fs-eyebrow); }
.line-chart-title { fill: var(--fg-default); font-size: var(--fs-caption); }
.line-chart-reference { stroke: var(--fg-weaker); stroke-width: 1; stroke-dasharray: 3 4; }
.line-chart-reference-label { font-weight: 600; }
.line-chart-series { fill: none; stroke: var(--line); stroke-width: 3; stroke-linejoin: round; }
.line-chart-series[data-dashed] { stroke-width: 2.5; stroke-dasharray: 6 5; }
.line-chart-marker circle { fill: var(--line); stroke: var(--bg-surface-raised); stroke-width: 2; }
.line-chart-marker text { fill: var(--line); font-size: var(--fs-eyebrow); }
.line-chart-marker[data-strong] text { fill: var(--fg-default); font-size: var(--fs-caption); font-weight: 700; }
/* Diagram: figures drawn from data. Grey boards hold small white cards; a key step or stat is tinted in the brand
   green. Sizes come from the type roles, colours from the palette. */
.diagram { display: grid; gap: var(--space-s); margin: 0; }
.diagram-part { display: grid; }
.diagram-board { display: grid; gap: var(--space-s); padding: var(--space-m); border-radius: calc(var(--callout-radius, 16px) * 1.5); background: var(--color-neutral-3); }
.diagram-board[data-layout='row'] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.diagram-board[data-layout='stack'] { justify-items: stretch; }
.diagram-row { display: grid; gap: var(--space-s); grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
@media (max-width: 767px) { .diagram-row, .diagram-board[data-layout='row'] { grid-template-columns: minmax(0, 1fr); } }

.diagram-card { --st-radius: 16; --card-pad: var(--space-m); --fs-card: var(--fs-lead); }
.diagram-card > .card-face { gap: var(--space-xs); }
.diagram-card .card-label, .diagram-eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; color: var(--node-tone, var(--color-moss-9)); }
.diagram-card .card-body, .diagram-text { font-size: var(--fs-small); font-weight: 500; line-height: 1.55; color: var(--fg-weak); }
.diagram-card-detail { display: grid; justify-items: start; gap: var(--space-xs); }
.diagram-card.is-center > .card-face { justify-items: center; text-align: center; }
.diagram-card.is-tint { --card-face: var(--color-moss-3); }
.diagram-card.is-fit-yes, .diagram-card.is-fit-no { --color-line: var(--border-default); }
.diagram-card.is-quote .card-body { font-style: italic; }
.diagram-title { font-size: var(--fs-lead); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg-default); }
.diagram-plain { font-size: var(--fs-body); color: var(--fg-weak); }
.diagram-meta { font-size: var(--fs-caption); font-weight: 500; color: var(--fg-weaker, var(--fg-weak)); }
.diagram-caption { max-width: 40rem; font-size: var(--fs-caption); font-style: italic; line-height: 1.5; color: var(--fg-weaker, var(--fg-weak)); }
.diagram-split { justify-self: center; font-size: var(--fs-caption); font-weight: 600; color: var(--fg-weak); }
.diagram-split::before { content: '↓ '; color: var(--color-moss-9); }
.diagram-pill { display: inline-flex; align-items: center; padding: 0.4em 0.85em; border: 1px solid var(--border-default); border-radius: 999px; background: var(--color-neutral-3); font-size: var(--fs-caption); font-weight: 600; color: var(--fg-weak); }
.diagram-pill[data-tone='good'] { border-color: var(--color-moss-6); background: var(--color-moss-3); color: var(--color-moss-11); }
.diagram-pill[data-tone='warn'] { border-color: var(--color-amber-6); background: var(--color-amber-3); color: var(--color-amber-11); }
.diagram-pill[data-tone='bad'] { border-color: var(--color-red-6); background: var(--color-red-3); color: var(--color-red-11); }
.diagram-list { display: grid; gap: var(--space-2xs); padding-left: 1.3em; font-size: var(--fs-small); color: var(--fg-weak); list-style: disc; }
ol.diagram-list { list-style: decimal; }

.diagram-steps { display: grid; gap: var(--space-xs); padding: var(--space-m); border-radius: calc(var(--callout-radius, 16px) * 1.5); background: var(--color-neutral-3); }
.diagram-steps[data-row] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.diagram-steps > li { display: grid; gap: var(--space-2xs); padding: var(--space-s) var(--space-m); border-radius: var(--callout-radius, 16px); background: var(--bg-surface-raised); font-size: var(--fs-small); color: var(--fg-weak); }
.diagram-steps > li > p:not([class]) { font-size: var(--fs-small); }
.diagram-steps > li[data-kind='key'] { background: var(--color-moss-3); }
.diagram-steps > li[data-kind='result'] { border: 1px solid var(--border-default); background: var(--color-neutral-3); }
.diagram-steps .diagram-title { font-size: var(--fs-body); }

.diagram-stats { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.diagram-stat { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-m); border: 1px solid var(--border-default); border-radius: var(--callout-radius, 16px); background: var(--bg-surface-raised); }
.diagram-stat[data-highlight] { border-color: var(--color-moss-6); background: var(--color-moss-3); }
.diagram-num { font-size: var(--fs-headline); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--fg-default); }

.diagram-bars { display: grid; gap: var(--space-xs); padding: var(--space-m); border-radius: calc(var(--callout-radius, 16px) * 1.5); background: var(--color-neutral-3); }
.diagram-bar { display: grid; gap: var(--space-2xs); }
.diagram-bar-label { font-size: var(--fs-small); font-weight: 600; color: var(--fg-default); }
.diagram-bar-track { display: flex; overflow: hidden; border-radius: 8px; background: var(--bg-surface-raised); }
.diagram-bar-seg { padding: 0.35em 0.6em; background: var(--node-tone, var(--color-moss-9)); font-size: var(--fs-caption); font-weight: 600; color: var(--fg-on-brand); white-space: nowrap; }
.diagram-bar[data-highlight] .diagram-bar-label { color: var(--color-moss-9); }
.diagram-bar-value { font-size: var(--fs-caption); color: var(--fg-weak); }
.diagram-legend { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); font-size: var(--fs-caption); color: var(--fg-weak); }
.diagram-legend > span::before { content: ''; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.4em; border-radius: 50%; background: var(--node-tone, var(--color-moss-9)); }

.diagram-fields { display: grid; gap: var(--space-xs); padding: var(--space-m); border-radius: calc(var(--callout-radius, 16px) * 1.5); background: var(--color-neutral-2); }
.diagram-field { padding: 0.5em 0.85em; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-surface-raised); font-size: var(--fs-small); font-weight: 500; color: var(--node-tone, var(--color-moss-9)); }
.diagram-field[data-new] { border-style: dashed; }
.diagram-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); font-size: var(--fs-small); color: var(--fg-default); }
.diagram-arrow { color: var(--color-moss-9); }
.diagram-questions { display: grid; gap: var(--space-xs); }
.diagram-questions > p { padding: var(--space-s) var(--space-m); border-left: 3px solid var(--color-moss-6); background: var(--color-neutral-2); font-size: var(--fs-body); color: var(--fg-default); }
.diagram-lines { display: grid; gap: var(--space-2xs); }
.diagram-lines > span { height: 0.5rem; border-radius: 4px; background: var(--color-neutral-7); }
.diagram-lines > span:nth-child(3n) { width: 70%; }
.diagram-lines[data-muted] > span { background: var(--color-neutral-5); }
.diagram-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px; }
.diagram-grid > span { min-height: 0.75rem; border-radius: 3px; background: color-mix(in srgb, var(--color-moss-9) 14%, transparent); }
.diagram-grid > .diagram-grid-head { min-height: 0; padding: 0.25em 0.3em; background: none; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.06em; color: var(--color-moss-9); overflow-wrap: anywhere; }
.diagram-card.is-panel.is-mint, .diagram-card.is-sage { --card-face: var(--color-moss-3); }
.diagram-card.is-panel.is-ink, .diagram-card.is-panel.is-dark { --card-face: var(--color-moss-12); --card-text: var(--fg-on-brand); }
.diagram-card.is-panel.is-ink { --card-face: var(--color-moss-10); }
:is(.is-ink, .is-dark) .card-label, :is(.is-ink, .is-dark) .diagram-eyebrow { color: var(--color-lily-9); }
:is(.is-ink, .is-dark) :is(.diagram-title, .diagram-text, .card-body) { color: var(--fg-on-brand); }
.diagram-card.is-frame { --card-face: var(--bg-surface-raised); --card-pad: var(--space-l); }
.diagram-card.is-panel { --st-edge: 1; --color-line: var(--border-default); }
.diagram-card.is-panel.is-mint { --card-face: var(--color-moss-2); --color-line: var(--color-moss-6); }
.diagram-card.is-panel.is-mint .diagram-meta { color: var(--color-moss-9); }
.diagram-row:not([data-variant]):has(> .diagram-eyebrow:first-child) { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.diagram-lines:not([data-muted]) { padding: var(--space-s); border: 1.5px dashed var(--border-strong); border-radius: 10px; }
.diagram-lines:not([data-muted]) > span { width: 100%; background: var(--bg-surface-raised); box-shadow: inset 0 0 0 1px var(--border-default); }
.diagram-card.is-statement { --card-face: var(--color-lily-3); --card-text: var(--color-moss-9); --color-line: var(--color-lily-6); }
.diagram-card.is-statement .card-title, .diagram-card.is-statement .diagram-title { font-size: calc(var(--fs-headline) * 0.8); line-height: 1.1; color: var(--color-moss-9); }
.diagram-steps > li[data-numbered] { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-s); align-items: start; }
.diagram-step-number { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--bg-surface-raised); font-size: var(--fs-caption); font-weight: 700; color: var(--fg-default); }
/* A row of numbered steps: equal columns, the number above, the result filled in the brand green. */
.diagram-steps[data-row] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.diagram-steps[data-row] > li[data-numbered] { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-s); align-content: start; }
.diagram-steps[data-row] > li[data-kind='result'][data-numbered] { border: 0; background: var(--color-moss-9); color: var(--fg-on-brand); }
.diagram-steps[data-row] > li[data-kind='result'][data-numbered] :is(.diagram-eyebrow, p) { color: var(--fg-on-brand); }
.diagram-legend > span[data-note]::before { content: none; }
.diagram-bar-label small { margin-left: var(--space-xs); font-size: var(--fs-caption); font-weight: 500; color: var(--fg-weak); }

/* Comparison figures. Panels are small bordered cards inside a figure; white, tint (grey), mint and sage are their
   grounds, dark is the brand green, ink is near-black, outline has a green edge and dashed a dashed one. A row panel
   sets its parts side by side. */
.diagram-card.is-panel { --card-pad: var(--space-s); --st-radius: 12; }
.diagram-card.is-panel > .card-face { gap: var(--space-xs); }
.diagram-card.is-panel.is-white, .diagram-card.is-outline, .diagram-card.is-mini, .diagram-card.is-stage.is-white { --card-face: var(--bg-surface-raised); }
.diagram-card.is-tint, .diagram-card.is-stat, .diagram-card.is-stage { --card-face: var(--color-neutral-2); }
.diagram-card.is-stage.is-after { --card-face: var(--color-moss-2); --color-line: var(--color-moss-6); }
.diagram-card.is-panel.is-sage { --card-face: var(--bg-surface-raised); --color-line: var(--color-moss-6); }
.diagram-card.is-frame.is-sage { --card-face: var(--color-moss-3); --color-line: var(--color-moss-6); }
.diagram-card.is-frame.is-mint { --card-face: var(--color-moss-2); }
.diagram-card.is-outline { --color-line: var(--color-moss-9); --st-edge: 2; }
.diagram-card.is-dashed { --card-face: var(--color-neutral-2); --color-line: var(--border-strong); }
.diagram-card.is-ghost { --card-face: transparent; --color-line: color-mix(in srgb, var(--fg-on-brand) 60%, transparent); }
.diagram-card.is-dark, .diagram-card.is-stat.is-dark, .diagram-card.is-stage.is-dark { --card-face: var(--color-moss-9); --color-line: var(--color-moss-9); --card-text: var(--fg-on-brand); }
.diagram-card.is-ink { --card-face: var(--color-neutral-12); --color-line: var(--color-neutral-12); --card-text: var(--fg-on-brand); }
.diagram-card:is(.is-dark, .is-ink) :is(.diagram-title, .diagram-text, .diagram-meta, .card-body, .card-title) { color: var(--fg-on-brand); }
.diagram-card:is(.is-dark, .is-ink) :is(.card-label, .diagram-eyebrow) { color: var(--color-moss-4); }
.diagram-card.is-dark.is-text .diagram-text, .diagram-card.is-prompt .diagram-title { font-size: var(--fs-body); font-weight: 600; }
.diagram-card.is-tight > .card-face, .diagram-card.is-tile > .card-face { gap: var(--space-2xs); }
.diagram-card.is-snug { --card-pad: var(--space-m); }
.diagram-card.is-row > .card-face { grid-auto-flow: column; grid-auto-columns: auto; justify-content: space-between; align-items: center; }
.diagram-card.is-frame.is-row > .card-face { justify-content: start; }
@media (max-width: 767px) { .diagram-card.is-row > .card-face { grid-auto-flow: row; justify-content: start; } }
.diagram-card.is-mini { --card-pad: var(--space-s); --st-radius: 12; max-width: 26rem; }
/* "When to choose" cards set inside a section, and a gap or hub between two panels (no card ground). */
.diagram-card.is-choice { --card-face: var(--bg-surface-raised); --card-pad: var(--space-m); }
.diagram-card.is-choice.is-both { --card-face: var(--color-moss-2); --color-line: var(--color-moss-6); }
.diagram-card:is(.is-gap, .is-hub) { --card-face: transparent; --st-edge: 0; }
.diagram-card:is(.is-gap, .is-hub) > .card-face { justify-items: center; text-align: center; }
.diagram-card.is-gap > .card-face { border-block: 1.5px dashed var(--color-red-6); border-radius: 0; }
.diagram-card.is-answer { --card-face: var(--bg-surface-raised); --card-pad: var(--space-s); }

.diagram-title[data-size='sm'] { font-size: var(--fs-small); font-weight: 600; }
.diagram-title[data-size='md'] { font-size: var(--fs-body); }
.diagram-title[data-size='lg'] { font-size: calc(var(--fs-headline) * 0.7); font-weight: 800; letter-spacing: -0.02em; }
.diagram-title[data-size='num'] { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-moss-9); font-size: var(--fs-lead); font-weight: 800; color: var(--fg-on-brand); }
.diagram-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.diagram-board[data-layout='column'] { padding: 0; background: none; }
/* A timeline row: the day on the left, its card beside it. A label row names the row on the left. */
.diagram-row[data-variant='timeline'] { grid-template-columns: 6rem minmax(0, 1fr); align-items: start; }
.diagram-row[data-variant='timeline'] > .diagram-eyebrow { padding-top: var(--space-s); }
.diagram-row[data-variant='label'] { grid-template-columns: 9rem; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; align-items: center; }
@media (max-width: 767px) { .diagram-row[data-variant='timeline'] { grid-template-columns: 4rem minmax(0, 1fr); } .diagram-row[data-variant='label'] { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; } }

.diagram-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1.5rem)); gap: var(--space-2xs); }
.diagram-dots > span { aspect-ratio: 1; border: 1.5px solid var(--color-neutral-8); border-radius: 50%; background: var(--bg-surface-raised); }
.diagram-dots > span[data-marked] { border-color: var(--color-red-11); background: var(--color-red-11); }
.diagram-dots[data-shape='tile'] { grid-template-columns: repeat(5, minmax(0, 2.5rem)); }
.diagram-dots[data-shape='tile'] > span { border-color: var(--color-moss-6); border-radius: 10px; }
.diagram-dots[data-shape='tile'] > span[data-marked] { border-color: var(--color-moss-9); background: var(--color-moss-9); }
.diagram-dots[data-shape='icon'] { grid-template-columns: repeat(auto-fill, 1.75rem); }
.diagram-dots[data-shape='icon'] > span { border-radius: 50% 50% 40% 40%; border-color: var(--color-neutral-9); }
.diagram-spark { display: block; width: 100%; height: 5.5rem; }
.diagram-spark-area { fill: var(--color-moss-3); }
.diagram-spark-line { fill: none; stroke: var(--color-moss-9); stroke-width: 3; vector-effect: non-scaling-stroke; }
.diagram-mini-bars { display: flex; align-items: end; gap: var(--space-2xs); }
.diagram-mini-bars > span { border-radius: 4px; }
.diagram-meter { height: 1.75rem; overflow: hidden; border: 1px solid var(--border-default); border-radius: 8px; background: var(--color-neutral-2); }
.diagram-meter > span { display: block; width: 4%; height: 100%; background: var(--color-moss-9); }
.diagram-pill[data-tone='good'] + .diagram-pill[data-tone='good'] { margin: 0; }
/* Parts of a card that are boxes themselves fill its width. */
.diagram-card-detail > :is(.diagram-card, .diagram-row, .diagram-board, .diagram-steps, .diagram-stats, .diagram-bars, .data-table, .diagram-flow, .diagram-spark, .diagram-meter, .diagram-chips) { justify-self: stretch; }
.diagram-flow { display: flex; align-items: stretch; gap: var(--space-xs); }
.diagram-flow > .diagram-card { flex: 1; }
.diagram-flow > .diagram-arrow { align-self: center; font-size: var(--fs-lead); }
@media (max-width: 767px) { .diagram-flow { flex-direction: column; } .diagram-flow > .diagram-arrow { rotate: 90deg; } }
.diagram-card.is-stage.is-bad { --card-face: var(--color-red-2); --color-line: var(--color-red-6); }
.diagram-card.is-stage.is-bad .diagram-title { color: var(--color-red-11); }
.diagram-card.is-stage:not(:has(.card-label)) > .card-face { place-content: center; text-align: center; }
.diagram-list[data-check] { padding-left: 0; list-style: none; }
.diagram-list[data-check] > li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); }
.diagram-list[data-check] > li::before { content: '✓'; font-weight: 700; color: var(--color-moss-9); }
:is(.is-dark, .is-ink) .diagram-list[data-check] > li::before { color: var(--color-moss-4); }
:is(.is-dark, .is-ink) .diagram-list { color: var(--fg-on-brand); }
/* Numbered lines inside a panel: no box, a small number before each line. */
.diagram-steps[data-compact] { padding: 0; background: none; gap: var(--space-xs); }
.diagram-steps[data-compact] > li { padding: 0; background: none; border: 0; }
.diagram-steps[data-compact] .diagram-step-number { border: 0; background: var(--color-moss-3); color: var(--color-moss-9); }
:is(.is-dark, .is-ink) .diagram-steps[data-compact] .diagram-step-number { background: var(--bg-surface-raised); }
:is(.is-dark, .is-ink) .diagram-steps[data-compact] > li { color: var(--fg-on-brand); }
.diagram-row[data-variant='indent'] { grid-template-columns: minmax(0, 1fr); margin-left: var(--space-m); padding-left: var(--space-s); border-left: 1.5px solid var(--color-moss-6); }
.diagram-mini-bars > span { width: 2.1rem; height: 0.5rem; background: var(--color-red-6); }
.diagram-mini-bars[data-tall] > span { width: 1.4rem; height: 2.1rem; background: var(--color-neutral-8); }
/* A light card inside a dark one keeps dark text. */
.diagram-card:is(.is-dark, .is-ink) .diagram-card:not(.is-dark, .is-ink, .is-ghost) :is(.diagram-title, .diagram-text, .card-body, .card-title, .diagram-list) { color: var(--fg-default); }
.diagram-card:is(.is-dark, .is-ink) .diagram-card:not(.is-dark, .is-ink, .is-ghost) .diagram-meta { color: var(--fg-weak); }
.diagram-card:is(.is-dark, .is-ink) .diagram-card:not(.is-dark, .is-ink, .is-ghost) :is(.card-label, .diagram-eyebrow) { color: var(--node-tone, var(--color-moss-9)); }
.diagram-row:has(> .diagram-card.is-hub) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
@media (max-width: 767px) { .diagram-row:has(> .diagram-card.is-hub) { grid-template-columns: minmax(0, 1fr); } }
/* Four or more side by side wrap onto two lines when the figure is narrow. */
.diagram-row[data-wrap] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.sources { display: grid; gap: var(--space-xs); padding-top: var(--space-m); border-top: 1px solid var(--border-default); font-size: var(--fs-caption); line-height: 1.7; color: var(--fg-weak); scroll-margin-top: 6rem; }
.sources-title { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-weak); }
.sources ul { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); }
.sources ol { display: grid; gap: var(--space-2xs); padding-left: 1.5em; list-style: decimal; }
.sources li { overflow-wrap: anywhere; scroll-margin-top: 6rem; }
.sources a { color: var(--color-moss-9); }
.sources a:hover { text-decoration: underline; }
.callout { display: grid; gap: var(--space-s); }
.callout[data-kind='outline'] { padding: var(--space-m) var(--space-m); border: 1px solid var(--border-strong); border-radius: var(--callout-radius, 16px); background: var(--bg-surface-raised); }
.callout[data-kind='sunken'] { padding: var(--space-m); border-radius: var(--callout-radius, 16px); background: var(--color-neutral-3); }
.callout[data-kind='statement'] { max-width: 34rem; padding-block: var(--space-xs); font-size: var(--fs-feature); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--color-moss-11); }
.callout-label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-moss-9); }
.callout ul { display: grid; gap: var(--space-2xs); padding-left: 1.4em; list-style: disc; }
.callout li::marker { color: var(--color-moss-9); }