/* PULSE — editorial krant layout
 * Palette + typography copied 1:1 from design/krant-mockup.html.
 * Math (thermometer thresholds, alerts) lives elsewhere; this file is purely
 * visual.
 */

:root {
  --paper: #f4f1ea;
  --paper-rule: #d9d2c3;
  --ink: #1e1a12;
  --ink-soft: #524c40;
  --ink-mute: #7a7464;
  --bull: #1f6e3f;
  --bear: #a02a26;
  --warn: #b67c0a;
  --neutral: #8a8576;
  --alert-bg: rgba(180,124,10,0.06);
  --alert-border: rgba(180,124,10,0.35);
  --alert-strong-bg: rgba(31,110,63,0.07);
  --alert-strong-border: rgba(31,110,63,0.45);
  --alert-critical-bg: rgba(160,42,38,0.08);
  --alert-critical-border: rgba(160,42,38,0.55);
  --display: 'Fraunces', 'Times New Roman', serif;
  --serif: 'IBM Plex Serif', Georgia, serif;
  --mono: 'IBM Plex Mono', Menlo, monospace;
  --sans: 'IBM Plex Sans Condensed', 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(rgba(0,0,0,0.022) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.014) 1.5px, transparent 1.5px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

a { color: inherit; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* ─── NAV (small, paper-styled) ─────────────────────────────────────── */
#nav {
  border-bottom: 1px solid var(--paper-rule);
  padding: 10px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
}
.nav-brand {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.nav-links a {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  margin-left: 18px;
}
.nav-links a.active,
.nav-links a:hover { color: var(--ink); }

.view { display: none; }
.view.active { display: block; }

/* ─── MASTHEAD ─────────────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--ink);
  padding: 28px 32px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 32px;
}
.masthead .brand {
  font-family: var(--display);
  font-weight: 900;
  font-size: 88px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
}
.masthead .brand sup {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  vertical-align: super;
  margin-left: 6px;
  color: var(--ink-mute);
}
.masthead .meta {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  text-align: center;
  border-top: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
  padding: 6px 0;
}
.masthead .meta strong { color: var(--ink); font-weight: 600; }
.masthead .live-tape {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -0.01em;
  text-align: right;
  color: var(--ink-soft);
}
.masthead .live-tape .live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bull);
  margin-right: 6px;
  vertical-align: 1px;
  animation: pulse 2s ease-in-out infinite;
}
.masthead .live-tape .price { color: var(--ink); font-weight: 600; }
.masthead .live-tape .delta-up { color: var(--bull); }
.masthead .live-tape .delta-down { color: var(--bear); }
.masthead .live-tape .stamp { color: var(--ink-mute); margin-left: 10px; }
.pipeline-health-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 6px 0 0;
  border-top: 1px solid var(--paper-rule);
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.pipeline-health-strip:hover,
.pipeline-health-strip:focus { color: var(--ink); }
.pipeline-health-strip .ph-label { color: var(--ink-mute); }
.pipeline-health-strip .ph-state { font-weight: 600; color: var(--ink); }
.pipeline-health-strip.gezond .ph-state { color: var(--bull); }
.pipeline-health-strip.degraded .ph-state { color: var(--ink); }
.pipeline-health-strip.kritiek .ph-state { color: var(--bear); }
.pipeline-health-strip .ph-stat { color: var(--ink-soft); }
.pipeline-health-strip .ph-stat.ok { color: var(--bull); }
.pipeline-health-strip .ph-stat.stale { color: var(--ink); }
.pipeline-health-strip .ph-stat.dood { color: var(--bear); }
.pipeline-health-strip .ph-stat.uit { color: var(--ink-mute); }
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

/* ─── ALERTS (math/dedup unchanged, palette only) ─────────────────── */
#alert-stack {
  padding: 14px 32px 0;
  max-width: 1320px;
  margin: 0 auto;
}
#alert-stack:empty { padding: 0; }
.alert-banner {
  border: 1px solid var(--alert-border);
  background: var(--alert-bg);
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 13px;
  margin-bottom: 6px;
}
.alert-banner.alert-strong { border-color: var(--alert-strong-border); background: var(--alert-strong-bg); }
.alert-banner.alert-critical { border-color: var(--alert-critical-border); background: var(--alert-critical-bg); }
.alert-time { color: var(--ink-mute); font-size: 12px; }
.alert-msg { color: var(--ink); }
.alert-msg strong { font-weight: 600; }
.alert-dismiss {
  background: transparent;
  border: none;
  color: var(--ink-mute);
  cursor: pointer;
  text-align: right;
  font-size: 16px;
  user-select: none;
  padding: 0;
  line-height: 1;
}
.alert-dismiss:hover { color: var(--ink); }

/* ─── LEAD ARTICLE ─────────────────────────────────────────────────── */
.lead {
  padding: 32px 0 24px;
  border-bottom: 2px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
}
.lead .kicker {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bear);
  font-weight: 600;
  margin-bottom: 14px;
}
.lead .kicker.bull { color: var(--bull); }
.lead .kicker.neut { color: var(--ink-mute); }

/* Katern-accent-kleuren — kicker-niveau, regime-class wint waar aanwezig.
   Lichaam = terracotta (aards, geen overlap met bull-groen of warn-oker).
   NEMESIS = gedempt paars (koel, adversarial, geen overlap met bear-rood).
   :not(.bull):not(.bear) zorgt dat regime-betekenis prevaleert wanneer
   sensor regime-class oplevert. */
.lichaam-lead .kicker:not(.bull):not(.bear),
.lichaam-cortex .kicker:not(.bull):not(.bear) { color: #5c3a1f; }
.lichaam-brier .kicker:not(.bull):not(.bear) { color: #7a4a2a; }
.lichaam-bloed .kicker:not(.bull):not(.bear) { color: #3a2410; font-weight: 600; }
.nemesis-lead .kicker:not(.bull):not(.bear),
.nemesis-tribunal .kicker:not(.bull):not(.bear),
.nemesis-graveyard .kicker:not(.bull):not(.bear) { color: #5d3a7a; }

/* Marker voor sensors op KANDIDAAT-VERWIJDERING */
.tile.kandidaat,
.tile.kandidaat .kicker { opacity: 0.72; }
.tile.kandidaat::after {
  content: "kandidaat-verwijdering";
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-top: 8px;
  border-top: 1px dashed var(--paper-rule);
  padding-top: 6px;
}
.lead h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  font-variation-settings: 'opsz' 144;
}
.lead h1 em { font-style: italic; font-weight: 500; }
.lead .deck {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0 0 18px;
  font-style: italic;
}
.lead .lead-body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  column-count: 2;
  column-gap: 32px;
  column-rule: 1px solid var(--paper-rule);
}
.lead .lead-body::first-letter {
  font-family: var(--display);
  float: left;
  font-size: 64px;
  line-height: 0.85;
  font-weight: 900;
  margin: 4px 8px -4px 0;
  color: var(--ink);
}
.lead .lead-body p { margin: 0 0 0.8em; }
.lead .lead-body strong { font-weight: 600; color: var(--ink); }
.lead .lead-body .cite { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }

.lead-chart {
  margin-top: 18px;
  border-top: 1px solid var(--paper-rule);
  padding-top: 12px;
}
.lead-chart .chart-canvas { height: 220px; width: 100%; }
.lead-chart .chart-fallback,
.chart-fallback {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  padding: 12px 0;
}
.lead-chart .chart-caption {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-top: 6px;
}

.lead aside {
  border-left: 1px solid var(--paper-rule);
  padding-left: 32px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
}
.lead aside .label {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.lead aside h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.lead aside p { margin: 0 0 10px; }
.lead aside .falsifier {
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(22,20,15,0.04);
  padding: 10px 12px;
  border-left: 2px solid var(--bear);
  margin: 12px 0;
  white-space: pre-line;
}
.lead aside .meta-row {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--paper-rule);
  padding-top: 8px;
  margin-top: 12px;
}

/* ─── FEAR & GREED SUB-BAND ───────────────────────────────────────── */
.fg-band {
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  gap: 32px;
  align-items: stretch;
  padding: 22px 0;
  border-bottom: 1px solid var(--paper-rule);
  min-height: 160px;
}
.fg-band .fg-num {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fg-band .fg-num .value {
  font-family: var(--display);
  font-weight: 900;
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variation-settings: 'opsz' 144;
}
.fg-band .fg-num .label {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  margin-top: 8px;
}
.fg-band .fg-num.fg-fear .value { color: var(--bear); }
.fg-band .fg-num.fg-greed .value { color: var(--bull); }
.fg-band .fg-num.fg-neutral .value { color: var(--ink); }

.fg-band .fg-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.fg-gauge {
  position: relative;
  height: 14px;
  background: rgba(22,20,15,0.05);
  border: 1px solid var(--paper-rule);
}
.fg-gauge .mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: var(--paper-rule);
}
.fg-gauge .tick {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: var(--ink);
}
.fg-gauge-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.fg-heatmap {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 2px;
  height: 18px;
}
.fg-heatmap .cell { background: rgba(22,20,15,0.06); }
.fg-heatmap .cell.extreme-fear { background: var(--bear); opacity: 0.9; }
.fg-heatmap .cell.fear { background: var(--bear); opacity: 0.55; }
.fg-heatmap .cell.neutral { background: var(--neutral); opacity: 0.55; }
.fg-heatmap .cell.greed { background: var(--bull); opacity: 0.55; }
.fg-heatmap .cell.extreme-greed { background: var(--bull); opacity: 0.9; }
.fg-heatmap-label {
  font-family: var(--sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}

.fg-band .fg-claim {
  border-left: 1px solid var(--paper-rule);
  padding-left: 24px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
}
.fg-band .fg-claim .kicker {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.fg-band .fg-claim h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.fg-band .fg-claim .falsifier {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  border-left: 2px solid var(--bear);
  padding: 6px 10px;
  background: rgba(22,20,15,0.03);
  margin-top: 8px;
}

/* ─── HEAT INDEX (was: thermometer-strip) ────────────────────────── */
.heat-index { padding: 24px 0; border-bottom: 1px solid var(--paper-rule); }
.heat-index .section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
  margin-bottom: 14px;
}
.heat-index .section-head h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.015em;
}
.heat-index .section-head .sub {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.heat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
}
.heat-block .group-label {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--paper-rule);
  padding-bottom: 4px;
}
.heat-block table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
}
.heat-block thead th {
  font-family: var(--sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-align: right;
  padding: 4px 0;
  font-weight: 500;
}
.heat-block thead th:first-child { text-align: left; }
.heat-block tbody td { padding: 5px 0; }
.heat-block tbody td:first-child {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.heat-block tbody td.bull { color: var(--bull); text-align: right; }
.heat-block tbody td.bear { color: var(--bear); text-align: right; }
.heat-block tbody td.neut { color: var(--neutral); text-align: right; }
.heat-block tbody td.pending { color: var(--ink-mute); text-align: right; opacity: 0.55; }
.heat-block tbody tr { border-bottom: 1px dotted var(--paper-rule); }
.heat-block tbody tr:last-child { border-bottom: none; }

/* ─── POSITION INSET (T-001) ─────────────────────────────────────── */
.position-inset {
  margin: 24px 0;
  border: 1px solid var(--ink);
  background: rgba(22,20,15,0.025);
  padding: 24px 32px;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 24px;
  align-items: start;
}
.position-inset.empty {
  border-style: dashed;
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-align: center;
  display: block;
  padding: 18px;
}
.position-inset .corner {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  border-right: 1px solid var(--paper-rule);
  padding-right: 24px;
}
.position-inset .corner .symbol {
  font-family: var(--display);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 8px 0 4px;
  text-transform: none;
}
.position-inset .corner .side {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--bull);
  font-weight: 600;
}
.position-inset .corner .side.short { color: var(--bear); }
.position-inset .body h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 8px;
  line-height: 1.15;
}
.position-inset .body p { font-size: 14px; line-height: 1.5; margin: 0 0 8px; }
.position-inset .body strong { font-weight: 600; }
.position-inset .levels {
  font-family: var(--mono);
  font-size: 12px;
  text-align: right;
  border-left: 1px solid var(--paper-rule);
  padding-left: 24px;
  min-width: 180px;
}
.position-inset .levels div { margin-bottom: 6px; }
.position-inset .levels .lbl {
  font-family: var(--sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  display: block;
}
.position-inset .levels .v { color: var(--ink); font-weight: 500; }
.position-inset .levels .mtm { color: var(--bull); font-weight: 600; font-size: 16px; }
.position-inset .levels .mtm.bear { color: var(--bear); }

/* ─── TRIPLE / DUO ──────────────────────────────────────────────── */
.triple {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  padding: 28px 0;
  gap: 0 24px;
  border-bottom: 1px solid var(--paper-rule);
}
.duo {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  padding: 28px 0;
  gap: 0 24px;
  border-bottom: 1px solid var(--paper-rule);
}
.triple .rule, .duo .rule { background: var(--paper-rule); }

.triple article .kicker,
.duo article .kicker {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 8px;
}
.triple article .kicker.bull,
.duo article .kicker.bull { color: var(--bull); }
.triple article .kicker.bear,
.duo article .kicker.bear { color: var(--bear); }
.triple article h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.08;
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.triple article h2 em { font-style: italic; font-weight: 500; }
.duo article h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.05;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.duo article h2 em { font-style: italic; font-weight: 500; }
.triple article .byline,
.duo article .byline {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.triple article p {
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.duo article p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.triple article p strong, .duo article p strong { font-weight: 600; }
.triple article .stat {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  border-top: 1px solid var(--paper-rule);
  padding-top: 8px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

/* sparkline inside triple-col macro */
.macro-sparkline {
  margin: 10px 0 12px;
  height: 90px;
  width: 100%;
  position: relative;
}
.macro-sparkline .chart-fallback { padding: 4px 0; }

/* ─── STRIP FOOTER ──────────────────────────────────────────────── */
.strip {
  padding: 24px 0;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.strip .item {
  border-left: 1px solid var(--paper-rule);
  padding-left: 12px;
}
.strip .item:first-child { border-left: none; padding-left: 0; }
.strip .item .name {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 9px;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.strip .item .v {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.strip .item .v.warn { color: var(--warn); }
.strip .item .v.bear { color: var(--bear); }
.strip .item .v.bull { color: var(--bull); }
.strip .item .v.dim { color: var(--ink-mute); font-weight: 400; }

footer.editorial {
  padding: 24px 0 60px;
  text-align: center;
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
}

/* ─── SECTION HEADERS (heat-index pattern, reused) ──────────────── */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
  margin-bottom: 14px;
}

/* ─── DOCUMENT VIEW (markdown reader) ───────────────────────────── */
#document-view { padding: 32px; max-width: 1320px; margin: 0 auto; }
#breadcrumb {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--paper-rule);
}
#breadcrumb a { color: var(--ink); text-decoration: none; }
#breadcrumb a:hover { text-decoration: underline; }
#breadcrumb strong { color: var(--ink); }
#document-content {
  font-family: var(--serif);
  line-height: 1.7;
  max-width: 800px;
}
#document-content h1 { font-family: var(--display); font-weight: 700; font-size: 32px; margin: 1.5rem 0 0.75rem; letter-spacing: -0.01em; }
#document-content h2 { font-family: var(--display); font-weight: 700; font-size: 22px; margin: 1.25rem 0 0.5rem; }
#document-content h3 { font-family: var(--display); font-weight: 700; font-size: 17px; margin: 1rem 0 0.5rem; }
#document-content p { margin: 0.5rem 0; }
#document-content ul, #document-content ol { padding-left: 1.5rem; margin: 0.5rem 0; }
#document-content li { margin: 0.25rem 0; }
#document-content code {
  font-family: var(--mono);
  background: rgba(22,20,15,0.05);
  padding: 0.15em 0.4em;
  font-size: 0.9em;
}
#document-content pre {
  background: rgba(22,20,15,0.05);
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
  border-left: 2px solid var(--ink-soft);
}
#document-content pre code { background: none; padding: 0; }
#document-content blockquote {
  border-left: 2px solid var(--ink);
  padding-left: 1rem;
  color: var(--ink-soft);
  margin: 0.75rem 0;
  font-style: italic;
}
#document-content table {
  border-collapse: collapse;
  margin: 1rem 0;
  width: 100%;
  font-size: 0.9rem;
  font-family: var(--mono);
}
#document-content th, #document-content td {
  border-bottom: 1px solid var(--paper-rule);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
#document-content th {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--ink);
}
#document-content a { color: var(--ink); text-decoration: underline; }
#document-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--paper-rule);
}

/* ─── GRAPH VIEW ────────────────────────────────────────────────── */
#graph-view { padding: 0; }
#graph-container {
  width: 100%;
  height: calc(100vh - 60px);
  background: var(--paper);
}
.link { stroke: var(--paper-rule); stroke-opacity: 0.7; }
.node circle { stroke: var(--ink-soft); stroke-width: 1; cursor: pointer; }
.node text {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--ink-soft);
  pointer-events: none;
}
.tooltip {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.75rem;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  pointer-events: none;
  max-width: 300px;
  z-index: 200;
  display: none;
}

/* ─── SHARED HELPERS ────────────────────────────────────────────── */
.bull-text { color: var(--bull); }
.bear-text { color: var(--bear); }
.neut-text { color: var(--neutral); }
.dim { color: var(--ink-mute); }

.loading {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  padding: 32px;
  text-align: center;
}

/* ─── KATERN-PAGINA (PR #5) ──────────────────────────────────────── */
/* Hergebruikt bestaande typografie (.kicker, .deck, .lead h1, .meta-row).
 * Nieuwe klassen alleen voor katern-page-grid + per-katern viz-blokken. */

.katern-page { padding: 28px 0 60px; }

.katern-header {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 14px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 24px;
}
.katern-header .back-link {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-decoration: none;
  align-self: end;
  padding-bottom: 6px;
}
.katern-header .back-link:hover { color: var(--ink); }
.katern-header h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  font-variation-settings: 'opsz' 144;
}
.katern-header .tagline {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  text-align: right;
  padding-bottom: 6px;
}

.katern-viz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  border-bottom: 1px solid var(--paper-rule);
  padding-bottom: 24px;
  margin-bottom: 24px;
}
.katern-viz .viz-block { min-width: 0; }
.katern-viz .viz-label {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--paper-rule);
  padding-bottom: 4px;
}

/* Tile-grid: drie-koloms tot 1100px, twee tot 700px, één daaronder. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tile {
  border-top: 1px solid var(--paper-rule);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
}
.tile h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 4px 0 10px;
}
.tile .deck {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 12px;
  flex: 1;
}
.tile-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--paper-rule);
  padding-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.tile-foot .deep-link {
  text-decoration: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.tile-foot .deep-link:hover { text-decoration: underline; }

.tijd-delta-kicker {
  font-family: var(--sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bear);
  font-weight: 600;
  border-left: 2px solid var(--bear);
  padding-left: 8px;
  margin-bottom: 8px;
}

.tile.fresh-down .kicker::after,
.tile.fresh-stale .kicker::after {
  content: ' · stale';
  color: var(--warn);
  font-weight: 400;
}

/* Tile-level visual dim for non-fresh sensors. A second-glance signal —
   stale sensors aren't broken, they're just not from today. Ink-tint via
   existing variables stays within the editorial palette. */
.tile.fresh-stale {
  opacity: 0.88;
}
.tile.fresh-stale h2,
.tile.fresh-stale .deck {
  color: var(--ink-soft);
}

.tile.fresh-down {
  opacity: 0.72;
}
.tile.fresh-down h2,
.tile.fresh-down .deck {
  color: var(--ink-mute);
}

.katern-empty {
  border: 1px dashed var(--paper-rule);
  padding: 48px 32px;
  text-align: center;
  color: var(--ink-soft);
}
.katern-empty h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 8px;
}
.katern-empty p {
  font-family: var(--serif);
  font-size: 14px;
  margin: 0;
}

/* Uptime-strip (machinekamer-katern) */
.uptime-strip-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.uptime-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
}
.uptime-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
}
.uptime-blocks {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 2px;
  height: 14px;
}
.uptime-blocks .block { background: rgba(22,20,15,0.06); }
.uptime-blocks .block.fresh { background: var(--bull); opacity: 0.75; }
.uptime-blocks .block.stale { background: rgba(22,20,15,0.06); }
.uptime-loading {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* Residu-heatmap (residu-katern, PR #7) */
.residu-heatmap {
  display: grid;
  gap: 2px;
  font-family: var(--mono);
  font-size: 11px;
}
.residu-heatmap .hm-cell {
  background: rgba(22,20,15,0.04);
  padding: 4px 0;
  text-align: center;
  color: var(--ink-soft);
  min-height: 22px;
}
.residu-heatmap .hm-corner { background: transparent; }
.residu-heatmap .hm-header {
  font-family: var(--sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  background: transparent;
  border-bottom: 1px solid var(--paper-rule);
  padding-bottom: 6px;
}
.residu-heatmap .hm-day {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  background: transparent;
  text-align: right;
  padding-right: 8px;
}
.residu-heatmap .hm-data { color: var(--ink); }
.residu-heatmap .hm-cell-dark { color: var(--paper); }
.hm-foot {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--paper-rule);
}
.hm-loading, .hm-empty {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  padding: 16px 0;
  text-align: center;
}

/* Residu-lead — observer-residue als full-bleed lead binnen residu-katern */
.residu-lead { padding-top: 8px; }
.residu-lead .lead-body { column-count: 1; max-width: 720px; }
.residu-lead .lead-body::first-letter {
  /* Geen drop-cap voor observer-residue — sensor is technisch niet narratief */
  font-family: var(--serif);
  float: none;
  font-size: inherit;
  margin: 0;
}

/* Necrologie-katern (PR #8) */
.necrologie-lead {
  border-bottom: 2px solid var(--ink);
}
.necrologie-lead .kicker {
  /* Doodsoorzaak als kicker — bear-color voor visueel afgesloten */
  color: var(--bear);
}
.necrologie-grafsteen {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  margin: 14px 0 16px;
  padding: 14px 16px;
  background: rgba(22,20,15,0.04);
  border-left: 2px solid var(--ink);
}
.grafsteen-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
}
.grafsteen-row .lbl {
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  align-self: center;
}
.grafsteen-row .v { color: var(--ink); }

.necrologie-lead .deep-link {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--ink);
  display: inline-block;
  margin-top: 4px;
}
.necrologie-lead .deep-link:hover { text-decoration: underline; }

.necrologie-triple {
  border-bottom: 1px solid var(--paper-rule);
}
.necrologie-mini {
  min-height: 80px;
}
.necrologie-mini h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  margin: 4px 0 8px;
}
.necrologie-mini h2 a {
  text-decoration: none;
  color: var(--ink);
}
.necrologie-mini h2 a:hover { text-decoration: underline; }
.necrologie-mini.empty {
  /* Placeholder slot wanneer minder dan 3 begrafenissen — toont niets,
     houdt grid-balans voor visuele consistentie */
  opacity: 0.3;
}

.necrologie-strip {
  margin-top: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--paper-rule);
  border-bottom: none;
}
.necrologie-strip .item .v {
  word-break: break-all;
  font-size: 12px;
}

.necrologie-viz svg { display: block; margin: 0 auto; }

/* Watchlist sparkline-grid (markt-katern) */
.watchlist-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.watchlist-item {
  border-top: 1px solid var(--paper-rule);
  padding-top: 6px;
}
.watchlist-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.watchlist-spark {
  height: 40px;
  width: 100%;
}

/* ─── LIQUIDITY-TIDE FEATURE ──────────────────────────────────────── */
.liquidity-tide-section { padding: 22px 0; border-bottom: 1px solid var(--paper-rule); }
.lt-band { display: grid; grid-template-columns: 240px 1fr 280px; gap: 28px; align-items: stretch; }
.lt-band .kicker { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: #2a5a6e; margin-bottom: 6px; }
.lt-claim h3 { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.25; margin: 0 0 8px; letter-spacing: -0.01em; }
.lt-claim .falsifier { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); border-left: 2px solid #2a5a6e; padding: 6px 10px; background: rgba(42,90,110,0.05); margin-top: 8px; }
.lt-viz { min-height: 220px; display: flex; align-items: center; }
.lt-viz svg { width: 100%; height: auto; }
.lt-table { border-left: 1px solid var(--paper-rule); padding-left: 18px; font-family: var(--serif); font-size: 12px; }
.lt-table table { width: 100%; border-collapse: collapse; }
.lt-table th { font-family: var(--sans); font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; text-align: left; color: var(--ink-mute); border-bottom: 1px solid var(--paper-rule); padding: 4px 6px 4px 0; }
.lt-table td { padding: 3px 6px 3px 0; border-bottom: 1px solid rgba(22,20,15,0.06); }
.lt-table .lt-asset { font-family: var(--mono); font-weight: 600; }
.lt-table .lt-regime { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.lt-actie { margin-top: 10px; font-family: var(--serif); font-size: 12px; color: var(--ink-soft); }
.lt-actie .kicker { display: inline; margin-right: 6px; }
.lt-empty { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); padding: 24px 0; }
.lt-katern-block { padding: 14px 0; border-bottom: 1px solid var(--paper-rule); }
.lt-katern-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.lt-katern-head .regime { font-family: var(--mono); font-size: 11px; color: #2a5a6e; }
.lt-katern-kop { font-family: var(--display); font-size: 15px; line-height: 1.3; margin-bottom: 8px; }

/* ─── MOBILE ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .lead { grid-template-columns: 1fr; }
  .lead aside { border-left: none; padding-left: 0; border-top: 1px solid var(--paper-rule); padding-top: 18px; }
  .fg-band { grid-template-columns: 1fr; }
  .fg-band .fg-claim { border-left: none; padding-left: 0; border-top: 1px solid var(--paper-rule); padding-top: 14px; }
  .lt-band { grid-template-columns: 1fr; gap: 16px; }
  .lt-table { border-left: none; padding-left: 0; border-top: 1px solid var(--paper-rule); padding-top: 12px; }
  .position-inset { grid-template-columns: 1fr; }
  .position-inset .corner { border-right: none; padding-right: 0; border-bottom: 1px solid var(--paper-rule); padding-bottom: 14px; }
  .position-inset .levels { border-left: none; padding-left: 0; text-align: left; border-top: 1px solid var(--paper-rule); padding-top: 14px; }
  .triple, .duo { grid-template-columns: 1fr; }
  .triple .rule, .duo .rule { display: none; }
  .triple article, .duo article { padding: 18px 0; border-bottom: 1px solid var(--paper-rule); }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .heat-grid { grid-template-columns: 1fr; gap: 18px; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .katern-viz { grid-template-columns: 1fr; }
  .watchlist-grid { grid-template-columns: repeat(4, 1fr); }
  .katern-header { grid-template-columns: 1fr; gap: 8px; }
  .katern-header .tagline { text-align: left; padding-bottom: 0; }
}

@media (max-width: 700px) {
  .container { padding: 0 18px; }
  .masthead { grid-template-columns: 1fr; padding: 18px; gap: 12px; }
  .masthead .brand { font-size: 56px; }
  .masthead .meta, .masthead .live-tape { text-align: left; }
  .lead h1 { font-size: 36px; }
  .lead .lead-body { column-count: 1; }
  .fg-band .fg-num .value { font-size: 64px; }
  .strip { grid-template-columns: 1fr; }
  .strip .item { border-left: none; padding-left: 0; border-top: 1px solid var(--paper-rule); padding-top: 8px; }
  .strip .item:first-child { border-top: none; padding-top: 0; }
  .tile-grid { grid-template-columns: 1fr; }
  .watchlist-grid { grid-template-columns: repeat(2, 1fr); }
  .katern-header h1 { font-size: 40px; }
  .uptime-row { grid-template-columns: 80px 1fr; }
}

.lichaam-triple .kicker:not(.bull):not(.bear),
.lichaam-predictions .kicker:not(.bull):not(.bear),
.lichaam-falsifier .kicker:not(.bull):not(.bear),
.lichaam-falsifier-detail .kicker:not(.bull):not(.bear) { color: #5c3a1f; }

/* Drift alarmstrook */
.alarm-kritiek {
  background: #7a2a2a;
  color: #fff;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.alarm-degraded {
  background: #a8862c;
  color: #fff;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.al-prefix { font-weight: 600; margin-right: 4px; }
.al-chip {
  background: rgba(255,255,255,0.15);
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 10px;
}
.al-chip:hover { background: rgba(255,255,255,0.3); }