/* ============================================================
   Positronic — Interactive Components
   ------------------------------------------------------------
   Nine components that move articles from passive newspaper
   pages to web-native understanding engines.

   All colors, fonts and spacing come from tokens.css.
   All components work in all three brands (riks/vector/marknad)
   via existing --brand-* variables.

   Naming follows the existing system: BEM-ish, .chart-figure
   pattern for wrappers, .kicker / .byline for metadata.
   ============================================================ */

/* ============================================================
   A. EVIDENCE LAYER — inline source verification
   ============================================================ */
.evidence {
  position: relative;
  border-bottom: 1px dotted var(--brand-primary);
  cursor: pointer;
  color: inherit;
  /* hairline inset so the dotted rule doesn't crowd descenders */
  padding-bottom: 1px;
  transition: background-color 140ms ease;
}
.evidence:hover,
.evidence:focus-visible {
  background: var(--brand-tint);
  outline: 0;
}
.evidence::after {
  content: "·";
  display: inline-block;
  margin-left: 3px;
  color: var(--brand-primary);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.9em;
  vertical-align: 1px;
  transform: translateY(-1px);
}
.evidence[aria-expanded="true"] {
  background: var(--brand-tint);
}

/* Popover — floats below the span on desktop, bottom-sheet on mobile */
.evidence-popover {
  position: absolute;
  z-index: 50;
  /* Fluid width: never narrower than 260px, grows to 360px, caps at 92vw */
  width: clamp(260px, 50vw, 360px);
  max-width: 92vw;
  background: var(--brand-paper);
  border: 2px solid var(--brand-ink);
  box-shadow: var(--shadow-2);
  padding: var(--space-4);
  font-family: var(--font-body);
  color: var(--brand-ink);
  /* Default position — JS overrides to fixed on desktop */
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Prevent card from growing taller than viewport */
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.evidence-popover[hidden] { display: none; }

.evidence-popover__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-primary);
  font-weight: 600;
  flex-shrink: 0;
  padding-right: var(--space-5);       /* room for close button */
}
.evidence-popover__cite {
  font-family: var(--brand-serif-font, var(--font-serif));
  font-style: italic;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--brand-ink);
  border-left: 3px solid var(--brand-primary);
  padding-left: var(--space-3);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;                        /* allow text to shrink in flex */
}
.evidence-popover__meta {
  display: flex;
  flex-wrap: wrap;                     /* stack on narrow cards */
  align-items: center;
  gap: var(--space-2) var(--space-3);
  border-top: 1px solid var(--brand-line);
  padding-top: var(--space-3);
  min-width: 0;
  flex-shrink: 0;
}
.evidence-popover__link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--brand-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-line);
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;                        /* flex child can shrink */
  flex: 1 1 auto;                      /* take remaining space */
  max-width: 100%;                     /* don't overflow parent */
}
.evidence-popover__link:hover { border-bottom-color: var(--brand-primary); color: var(--brand-primary); }

.evidence-popover__confidence {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-muted);
  flex-shrink: 0;                      /* never crush the confidence bar */
  white-space: nowrap;
}
.evidence-popover__bar {
  position: relative;
  width: 48px; height: 6px;
  background: var(--brand-line);
  flex-shrink: 0;
}
.evidence-popover__bar::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  background: currentColor;
  width: var(--bar, 60%);
}
.evidence-popover__bar[data-confidence="high"]   { color: var(--success); }
.evidence-popover__bar[data-confidence="high"]::after   { width: 100%; }
.evidence-popover__bar[data-confidence="medium"] { color: var(--warning); }
.evidence-popover__bar[data-confidence="medium"]::after { width: 60%; }
.evidence-popover__bar[data-confidence="low"]    { color: var(--danger); }
.evidence-popover__bar[data-confidence="low"]::after    { width: 30%; }

.evidence-popover__close {
  position: absolute; top: 6px; right: 6px;
  background: transparent; border: 0;
  width: 28px; height: 28px;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--brand-muted);
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 1;
}
.evidence-popover__close:hover { color: var(--brand-primary); }

/* Bottom-sheet on small screens */
@media (max-width: 640px) {
  .evidence-popover {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    max-height: 70dvh;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 3px solid var(--brand-ink);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
    border-radius: 0;
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    animation: evidence-sheet-in 200ms ease-out;
  }
}
@keyframes evidence-sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ============================================================
   B. PERSPECTIVE TOGGLE — same event, multiple viewpoints
   ============================================================ */
.perspectives {
  margin: var(--space-7) 0;
  border-top: 3px solid var(--brand-ink);
  padding-top: var(--space-4);
}
.perspectives__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-primary);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.perspectives__nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--brand-line);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.perspectives__nav::-webkit-scrollbar { display: none; }

.perspectives__tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  margin-right: var(--space-5);
  margin-bottom: -1px;        /* overlap container line for active tab */
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms ease, border-color 140ms ease;
}
.perspectives__tab:hover { color: var(--brand-ink); }
.perspectives__tab.is-active {
  color: var(--brand-ink);
  border-bottom-color: var(--brand-primary);
}
.perspectives__tab__count {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--brand-muted);
  font-weight: 400;
}

.perspectives__panels { position: relative; }
.perspectives__panel {
  display: none;
  opacity: 0;
  transition: opacity 150ms ease;
}
.perspectives__panel.is-active {
  display: block;
  opacity: 1;
}
.perspectives__source {
  display: flex; gap: var(--space-3); align-items: center;
  margin-bottom: var(--space-3);
}
.perspectives__source::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--brand-primary);
  flex: 0 0 auto;
}
.perspectives__panel blockquote {
  margin: 0;
  font-family: var(--brand-serif-font, var(--font-serif));
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--brand-ink);
  border-left: 4px solid var(--brand-primary);
  padding: var(--space-2) var(--space-4);
  text-wrap: pretty;
}
[data-brand="broadside"] .perspectives__panel blockquote {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}
[data-brand="vector"] .perspectives__panel blockquote {
  font-family: var(--font-headline);
  font-weight: 700;
  font-style: normal;
  font-size: var(--text-xl);
}
.perspectives__panel p {
  font-family: var(--brand-body-font);
  font-size: var(--text-base);
  color: var(--brand-muted);
  margin: var(--space-3) 0 0;
  padding-left: var(--space-4);
}

/* CSS-only fallback using <details> stack */
.perspectives--fallback .perspectives__nav { display: none; }
.perspectives--fallback details {
  border-top: 1px solid var(--brand-line);
  padding: var(--space-3) 0;
}
.perspectives--fallback details summary {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ============================================================
   C. TIMELINE — chronological story development
   ============================================================ */
.timeline {
  position: relative;
  margin: var(--space-7) 0;
  border-top: 3px solid var(--brand-ink);
  padding-top: var(--space-4);
}
.timeline__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-4);
  gap: var(--space-4);
}
.timeline__head h3 {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--text-xl);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
[data-brand="ledger"] .timeline__head h3 {
  font-family: var(--brand-serif-font);
  font-weight: 700;
}
.timeline__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-primary);
}

/* HORIZONTAL */
.timeline[data-orientation="horizontal"] .timeline__track {
  display: flex;
  gap: var(--space-7);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-7) var(--space-2) var(--space-5);
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-line) transparent;
}
/* Connecting line behind dots */
.timeline[data-orientation="horizontal"] .timeline__track::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--space-7) + 16px);  /* aligns with dot center */
  height: 2px;
  background: linear-gradient(to right,
    transparent 0,
    var(--brand-line) 24px,
    var(--brand-line) calc(100% - 24px),
    transparent 100%);
  z-index: 0;
}
.timeline[data-orientation="horizontal"] .timeline__event {
  position: relative;
  scroll-snap-align: center;
  flex: 0 0 280px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-3);
  padding-top: 0;
}

/* VERTICAL */
.timeline[data-orientation="vertical"] .timeline__track {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  position: relative;
}
.timeline[data-orientation="vertical"] .timeline__track::before {
  content: "";
  position: absolute;
  top: 6px; bottom: 6px;
  left: 22px;
  width: 2px;
  background: var(--brand-line);
}
.timeline[data-orientation="vertical"] .timeline__event {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}
.timeline[data-orientation="vertical"] .timeline__event > .timeline__date {
  grid-column: 2; grid-row: 1;
}
.timeline[data-orientation="vertical"] .timeline__event > .timeline__dot {
  grid-column: 1; grid-row: 1 / span 2;
  margin-top: 6px;
  margin-left: -10px; /* center over rail */
}
.timeline[data-orientation="vertical"] .timeline__event > .timeline__card {
  grid-column: 2; grid-row: 2;
}

.timeline__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-primary);
  font-weight: 600;
}
.timeline__dot {
  width: 14px; height: 14px;
  background: var(--brand-paper);
  border: 2px solid var(--brand-line);
  border-radius: 50%;
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: start;
  margin-bottom: var(--space-3);
}
.timeline[data-orientation="horizontal"] .timeline__dot { margin-bottom: var(--space-4); }
.timeline__event.is-current .timeline__dot {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--brand-tint);
}
.timeline__event.is-past .timeline__dot {
  background: var(--brand-line);
  border-color: var(--brand-line);
}
.timeline__card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  padding: var(--space-3) var(--space-4);
  position: relative;
}
.timeline__event.is-current .timeline__card {
  border-color: var(--brand-primary);
  border-width: 2px;
  background: var(--brand-paper);
}
.timeline__card h4 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--text-sm);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-ink);
  text-wrap: balance;
}
[data-brand="ledger"] .timeline__card h4 {
  font-family: var(--brand-serif-font);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.timeline__card p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--brand-ink);
  line-height: var(--leading-normal);
}
.timeline__card .byline {
  display: block;
}

.timeline__hint {
  display: flex; justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-muted);
  padding: 0 var(--space-2);
}

/* ============================================================
   D. COMPARISON CHART — paired bars, shared axis
   ============================================================ */
.chart-compare .compare {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-3);
}
.chart-compare .compare__group {
  display: grid;
  grid-template-columns: 160px 1fr 100px;
  gap: var(--space-4);
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--brand-line);
}
.chart-compare .compare__group:last-child { border-bottom: 0; }

.chart-compare .compare__labels {
  display: grid; gap: 4px;
  font-family: var(--font-headline);
  font-size: var(--text-xs);
}
.chart-compare .compare__label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.chart-compare .compare__swatch {
  width: 14px; height: 14px;
  background: var(--swatch, var(--brand-primary));
  flex: 0 0 auto;
}
.chart-compare .compare__bars {
  display: grid; gap: 4px;
  min-width: 0;
}
.chart-compare .compare__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
}
.chart-compare .compare__track {
  position: relative;
  height: 28px;
  background: var(--brand-surface);
  border-left: 2px solid var(--brand-ink);
}
.chart-compare .compare__fill {
  height: 100%;
  background: var(--fill, var(--brand-primary));
  width: var(--w, 0%);
  transition: width 600ms cubic-bezier(.2,.7,.3,1);
}
.chart-compare .compare__value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
  text-align: right;
}
.chart-compare .compare__delta {
  display: inline-grid;
  gap: 2px;
  justify-items: end;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-muted);
  text-align: right;
}
.chart-compare .compare__delta strong {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--brand-primary);
  letter-spacing: -0.01em;
}
.chart-compare .compare__delta[data-direction="down"] strong { color: var(--success); }

.chart-compare .compare__axis {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--brand-muted);
  text-transform: uppercase;
  padding-top: 4px;
  border-top: 1px solid var(--brand-line);
  margin-top: var(--space-3);
}

/* ============================================================
   E. SPARKLINE GRID — compact metric overview
   ============================================================ */
.sparkgrid-figure {
  margin: var(--space-6) 0;
  border-top: 3px solid var(--brand-ink);
  padding-top: var(--space-4);
}
.sparkgrid-figure__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-2);
}
.sparkgrid-figure__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-primary); font-weight: 600;
}
.sparkgrid-figure__source {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.06em;
  color: var(--brand-muted); text-transform: uppercase;
}
.sparkgrid-figure__title {
  font-family: var(--font-headline);
  font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.15; margin: 0 0 var(--space-4);
  text-wrap: balance;
}
[data-brand="ledger"] .sparkgrid-figure__title {
  font-family: var(--brand-serif-font); font-weight: 700; letter-spacing: -0.01em;
}
.sparkgrid-figure__foot {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.06em;
  color: var(--brand-muted);
  border-top: 1px solid var(--brand-line);
  padding-top: var(--space-2);
  display: flex; justify-content: space-between; align-items: center;
}

.sparkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--brand-line);
  border: 1px solid var(--brand-line);
}
.sparkgrid-figure > .sparkgrid { margin: 0; }
.sparkgrid__cell {
  background: var(--brand-paper);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label  label"
    "spark  spark"
    "value  delta";
  align-items: end;
  gap: var(--space-2);
  min-height: 120px;
}
.sparkgrid__label {
  grid-area: label;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-muted);
  font-weight: 600;
}
.sparkgrid__line {
  grid-area: spark;
  width: 100%;
  height: 32px;
  overflow: visible;
}
.sparkgrid__line polyline { stroke-linejoin: round; stroke-linecap: round; }
.sparkgrid__line .spark-fill {
  fill: var(--brand-primary);
  opacity: 0.08;
}
.sparkgrid__value {
  grid-area: value;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--brand-ink);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
[data-brand="broadside"] .sparkgrid__value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
}
[data-brand="ledger"] .sparkgrid__value {
  font-family: var(--brand-serif-font);
  font-weight: 700;
  font-size: var(--text-xl);
}
.sparkgrid__delta {
  grid-area: delta;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  align-self: end;
  padding-bottom: 2px;
  white-space: nowrap;
}
.sparkgrid__delta--up   { color: var(--danger); }
.sparkgrid__delta--down { color: var(--success); }
.sparkgrid__delta--neutral { color: var(--brand-muted); }
/* Inverted semantics — "up = good" for positive metrics */
.sparkgrid__cell[data-tone="positive"] .sparkgrid__delta--up   { color: var(--success); }
.sparkgrid__cell[data-tone="positive"] .sparkgrid__delta--down { color: var(--danger); }

.sparkgrid__delta::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  margin-right: 4px;
  vertical-align: 1px;
}
.sparkgrid__delta--up::before   { border-bottom: 6px solid currentColor; }
.sparkgrid__delta--down::before { border-top:    6px solid currentColor; }
.sparkgrid__delta--neutral::before { display: none; }

/* ============================================================
   F. GEO CONTEXT — SVG map with pins
   ============================================================ */
.geo-context {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
  margin: var(--space-6) 0;
  border-top: 3px solid var(--brand-ink);
  padding-top: var(--space-4);
}
@media (max-width: 720px) {
  .geo-context { grid-template-columns: 1fr; }
}
.geo-context__head {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4);
}
.geo-context__head h3 {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
}
[data-brand="ledger"] .geo-context__head h3 { font-family: var(--brand-serif-font); font-weight: 700; }
.geo-context__head .kicker { font-family: var(--font-mono); font-size: var(--text-xs); }
.geo-context__source {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.06em;
  color: var(--brand-muted); text-transform: uppercase;
  align-self: baseline;
}
.geo-context__foot {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.06em;
  color: var(--brand-muted);
  border-top: 1px solid var(--brand-line);
  padding-top: var(--space-2);
  display: flex; justify-content: space-between; align-items: center;
}

.geo-context__map {
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  padding: var(--space-4);
  position: relative;
}
.geo-context__map svg {
  width: 100%; height: auto;
  font-family: var(--font-mono);
}
.geo-context__region {
  fill: var(--brand-surface);
  stroke: var(--brand-line);
  stroke-width: 1;
}
[data-brand="ledger"] .geo-context__region {
  fill: var(--brand-surface);
  stroke: var(--brand-line);
}
.geo-context__water {
  fill: var(--brand-surface);
}
.geo-context__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--brand-muted);
}
.geo-context__radius {
  fill: var(--brand-primary);
  opacity: 0.08;
  stroke: var(--brand-primary);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.geo-context__pin {
  fill: var(--brand-primary);
  stroke: var(--brand-paper);
  stroke-width: 2;
  cursor: pointer;
  transition: r 140ms ease;
}
.geo-context__pin:hover { r: 8; }
.geo-context__pin-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--brand-ink);
  font-weight: 600;
  pointer-events: none;
}

.geo-context__legend {
  background: var(--brand-paper);
  border: 2px solid var(--brand-ink);
}
.geo-context__legend-head {
  background: var(--brand-ink);
  color: var(--brand-paper);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
}
.geo-context__legend-head h4 {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.geo-context__legend ul {
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
}
.geo-context__legend li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px dashed var(--brand-line);
  font-size: var(--text-sm);
}
.geo-context__legend li:last-child { border-bottom: 0; }
.geo-context__dot {
  width: 10px; height: 10px;
  background: var(--brand-primary);
  border-radius: 50%;
  display: inline-block;
}
.geo-context__legend .when {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--brand-muted);
}
.geo-context__legend .place {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--brand-ink);
}

/* ============================================================
   G. SCROLLYTELLING — sticky vis + scrolling steps
   ============================================================ */
.scrolly {
  position: relative;
  margin: var(--space-8) calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  background: var(--brand-surface);
  border-top: 3px solid var(--brand-ink);
  border-bottom: 3px solid var(--brand-ink);
  /* No `overflow: hidden` — it defeats position: sticky.
     Bleed is prevented by ending the wrap at the right moment
     instead, via the short last step + zero bottom padding below. */
}
.scrolly__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  z-index: 1;
  /* No negative margin here — that would zero out the sticky's
     effective height for the release-at-bottom calculation, and
     the vis would hang 100vh below the wrap. The overlap with
     steps is achieved via margin-top: -100vh on .scrolly__steps
     instead — same visual stack, correct release behavior. */
}
.scrolly__vis {
  position: relative;
  width: min(680px, 100%);
  aspect-ratio: 4 / 3;
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  padding: var(--space-4);
}
.scrolly__vis svg {
  width: 100%; height: 100%;
  overflow: visible;
}

.scrolly__steps {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0;
  /* Negative margin pulls steps up to overlap the sticky vis,
     so they scroll over the top of it. The sticky's natural
     bottom (parent.top + 100vh) is preserved, so it releases
     correctly when the wrap ends. */
  margin-top: -100vh;
  /* Top padding gives the first step room to enter the viewport before
     becoming active. Bottom padding is intentionally small — once the
     last step has been read, the wrap ends and the sticky slides out. */
  padding: 25vh 0 0;
}
.scrolly__step {
  /* Each step is one screen of dwell time. */
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-6) 0;
  opacity: 0.25;
  transition: opacity 280ms ease;
}
/* The last step is shorter — once you finish reading it the vis should
   exit, not linger and block whatever comes next. */
.scrolly__step:last-child {
  min-height: 45vh;
  padding-bottom: var(--space-3);
}
.scrolly__step.is-active { opacity: 1; }
.scrolly__step__card {
  max-width: 380px;
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  padding: var(--space-5);
  box-shadow: var(--shadow-2);
  border-left: 4px solid var(--brand-line);
  transition: border-color 280ms ease;
}
.scrolly__step.is-active .scrolly__step__card {
  border-left-color: var(--brand-primary);
}
.scrolly__step__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-primary);
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-2);
}
.scrolly__step__card h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}
[data-brand="ledger"] .scrolly__step__card h4 {
  font-family: var(--brand-serif-font);
  font-weight: 700;
}
.scrolly__step__card p {
  margin: 0;
  font-family: var(--brand-body-font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--brand-ink);
}

/* Vis state choreography — declarative; only one state visible at a time */
.scrolly .vis-layer { transition: opacity 320ms ease, transform 480ms ease; opacity: 0; }
.scrolly[data-active-step="1"] .vis-layer[data-state="overview"]      { opacity: 1; }
.scrolly[data-active-step="2"] .vis-layer[data-state="zoom"]          { opacity: 1; }
.scrolly[data-active-step="3"] .vis-layer[data-state="timeline"]      { opacity: 1; }
.scrolly[data-active-step="4"] .vis-layer[data-state="conclusion"]    { opacity: 1; }
.scrolly:not([data-active-step]) .vis-layer[data-state="overview"]   { opacity: 1; }

.scrolly__source {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-muted);
  background: var(--brand-paper);
  padding: 6px 10px;
  border-left: 2px solid var(--brand-primary);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3);
  pointer-events: none;
}
.scrolly__progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-line);
  z-index: 3;
}
.scrolly__progress::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--scrolly-progress, 0%);
  background: var(--brand-primary);
  transition: width 100ms linear;
}

/* ============================================================
   H. ENTITY CARD — inline actor reference
   ============================================================ */
.entity-inline {
  background: var(--brand-tint);
  padding: 1px 5px;
  cursor: pointer;
  color: inherit;
  font-weight: inherit;
  position: relative;
  border-bottom: 1px solid transparent;
  transition: background 140ms ease, border-color 140ms ease;
  white-space: nowrap;
}
.entity-inline:hover,
.entity-inline:focus-visible,
.entity-inline[aria-expanded="true"] {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  outline: 0;
}
.entity-inline::after {
  content: "›";
  display: inline-block;
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  opacity: 0.6;
  transform: translateY(-1px) rotate(90deg);
  transition: transform 140ms ease, opacity 140ms ease;
}
.entity-inline:hover::after { opacity: 1; }

.entity-card {
  position: absolute;
  z-index: 50;
  width: min(380px, 92vw);
  background: var(--brand-paper);
  border: 2px solid var(--brand-ink);
  box-shadow: var(--shadow-2);
  font-family: var(--brand-body-font);
  color: var(--brand-ink);
  display: grid;
  /* Default position — JS repositions at runtime to stay in viewport */
  top: calc(100% + 8px);
  left: 0;
  white-space: normal;         /* override parent .entity-inline nowrap */
  word-wrap: break-word;
}
.entity-card[hidden] { display: none; }
.entity-card__head {
  background: var(--brand-ink);
  color: var(--brand-paper);
  padding: var(--space-3) var(--space-4);
  display: grid;
  gap: 2px;
}
.entity-card__name {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
[data-brand="ledger"] .entity-card__name {
  font-family: var(--brand-serif-font);
  font-weight: 700;
}
.entity-card__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-accent);
}
.entity-card__body {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.entity-card__stat {
  display: flex; gap: var(--space-3); align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-muted);
}
.entity-card__stat strong {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--text-xl);
  color: var(--brand-primary);
  text-transform: none;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.entity-card__quote {
  font-family: var(--brand-serif-font, var(--font-serif));
  font-style: italic;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--brand-ink);
  border-left: 3px solid var(--brand-primary);
  padding-left: var(--space-3);
  margin: 0;
}
.entity-card__quote cite {
  display: block;
  font-style: normal;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-muted);
}
.entity-card__quote cite::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--brand-primary);
  margin-right: 6px;
  vertical-align: 1px;
}
.entity-card__stories {
  border-top: 1px solid var(--brand-line);
  padding-top: var(--space-3);
}
.entity-card__stories__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-muted);
  display: block;
  margin-bottom: var(--space-2);
}
.entity-card__stories ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.entity-card__stories li a {
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-ink);
  text-decoration: none;
  border: 1px solid var(--brand-line);
  padding: 4px 8px;
  transition: all 120ms;
}
.entity-card__stories li a:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.entity-card__more {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  text-decoration: none;
  border-top: 1px solid var(--brand-line);
  padding: var(--space-3) var(--space-4);
  display: flex; justify-content: space-between; align-items: center;
}
.entity-card__more:hover { background: var(--brand-tint); }
.entity-card__close {
  position: absolute; top: 4px; right: 4px;
  background: transparent; border: 0;
  width: 28px; height: 28px;
  color: var(--brand-paper);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  display: grid; place-items: center;
}
.entity-card__close:hover { color: var(--brand-accent); }

@media (max-width: 640px) {
  .entity-card {
    position: fixed;
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%;
    border-left: 0; border-right: 0; border-bottom: 0;
    border-top: 3px solid var(--brand-ink);
    animation: evidence-sheet-in 200ms ease-out;
  }
}

/* ============================================================
   I. CLAIM CHECK — statement vs verified fact
   ============================================================ */
.claim-check {
  margin: var(--space-7) 0;
  position: relative;
  border-top: 3px solid var(--brand-ink);
}
.claim-check__claim {
  background: var(--brand-surface);
  padding: var(--space-5);
  border-left: 4px solid var(--brand-line);
  position: relative;
}
[data-brand="ledger"] .claim-check__claim {
  background: var(--brand-surface);
}
.claim-check__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-muted);
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-2);
}
.claim-check__claim blockquote {
  margin: 0 0 var(--space-3);
  font-family: var(--brand-serif-font, var(--font-serif));
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--brand-ink);
  font-weight: 500;
  text-wrap: pretty;
}
[data-brand="broadside"] .claim-check__claim blockquote {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}
.claim-check__claim cite {
  font-style: normal;
}

.claim-check__verdict {
  position: relative;
  display: flex;
  justify-content: center;
  background: var(--brand-surface);
  border-top: 1px solid var(--brand-line);
  padding: 0;
  z-index: 1;
}
[data-brand="ledger"] .claim-check__verdict { background: var(--brand-surface); }
.claim-check__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-paper);
  background: var(--brand-muted);
  position: relative;
  top: 0;
  transform: translateY(-50%);
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
}
.claim-check__badge__icon {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1;
}

.claim-check[data-verdict="correct"]    .claim-check__badge { background: var(--success); }
.claim-check[data-verdict="partly"]     .claim-check__badge { background: var(--warning); }
.claim-check[data-verdict="misleading"] .claim-check__badge { background: var(--cat-5-500); }
.claim-check[data-verdict="false"]      .claim-check__badge { background: var(--danger); }

.claim-check[data-verdict="correct"]    .claim-check__fact { border-left-color: var(--success); }
.claim-check[data-verdict="partly"]     .claim-check__fact { border-left-color: var(--warning); }
.claim-check[data-verdict="misleading"] .claim-check__fact { border-left-color: var(--cat-5-500); }
.claim-check[data-verdict="false"]      .claim-check__fact { border-left-color: var(--danger); }

.claim-check__fact {
  background: var(--brand-paper);
  padding: var(--space-5) var(--space-5) var(--space-5);
  border-left: 4px solid var(--brand-primary);
  margin-top: calc(var(--space-3) * -1); /* pull up so badge bridges */
  padding-top: var(--space-6);
}
.claim-check__fact p {
  margin: 0;
  font-family: var(--brand-body-font);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--brand-ink);
}
.claim-check__fact p em {
  font-style: italic;
  background: var(--brand-tint);
  padding: 0 4px;
  font-weight: 600;
}
.claim-check__sources {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--brand-line);
}
.claim-check__sources::before {
  content: "Källor";
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-muted);
  align-self: center;
}
.claim-check__sources a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-primary);
  padding-bottom: 1px;
}
.claim-check__sources a:hover { color: var(--brand-primary); }

/* ============================================================
   Showcase-only helpers — used by interactive.html
   ============================================================ */
.demo-body {
  font-family: var(--brand-serif-font, var(--font-serif));
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--brand-ink);
  max-width: var(--col-text);
}
.demo-body p { margin: 0 0 var(--space-4); }
[data-brand="broadside"]    .demo-body { font-family: var(--brand-body-font); }
[data-brand="vector"] .demo-body { font-family: var(--brand-body-font); }