/* Live Landing — ported from `Data Room - Live Landing.html` inline styles
   plus the relevant region-cards.css rules. Design-token :root lives in
   colors_and_type.css (loaded alongside this file by landing_page.html). */

body { background: #FFFFFF; color: var(--fg-body); }

:root {
  --page-bg: #FFFFFF;
  --bar-h: 53px;
  --footer-h: 52px;
  --wrap: 82rem;

  /* EuRepoC embed palette (matches the detail page) */
  --color-linen:   #F4F3F5;
  --color-ecru:    #ECEAEE;
  --color-jacket:  #E5E2E8;
  --color-bone:    #D8D5DC;
  --color-oatmeal: #B7B2BC;
  --color-stone:   #6E6874;
  --color-charcoal:#1F2A2B;
  --color-ink:     #11191A;
  --fg-body:       #1A1D1C;

  --color-navy:      #002C38;
  --color-navy-mid:  #194E58;

  --color-slate:       #89BD9E;
  --color-slate-pale:  #DBE9E0;

  /* severity ramp */
  --sev-low:  #A9CEB6;
  --sev-mid:  #F1D285;
  --sev-high: #D9A0A5;
  --sev-low-d:  #5A8A6E;
  --sev-mid-d:  #C08B3A;
  --sev-high-d: #B84E52;

  /* response coding */
  --rsp-attr:  #5A8A6E;
  --rsp-sanc:  #CC0130;
  --rsp-indic: #002C38;
  --rsp-advis: #C08B3A;
  --rsp-state: #6E6874;

  /* incident attribution / response status — check / double-check */
  --att-none-fg:   #8C8792;
  --att-none-bd:   #BFBAC4;
  --att-attr:      #5A8A6E;
  --att-attr-soft: #DCE9E0;
  --att-attr-fg:   #34604A;
  --att-resp:      #0B3B33;
  --att-resp-soft: #CFE0DA;

  /* operation-type coding */
  --op-ransom: #C08B3A;
  --op-disrupt:#B84E52;
  --op-theft:  #002C38;
  --op-hijack: #5A8A6E;
}

/* ───────── Wireframe chrome ───────── */
.wf-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
  padding: var(--space-3) var(--space-6);
  background: var(--color-navy); color: var(--color-linen);
  border-bottom: 1.5px solid var(--color-eurepoc-red);
}
.wf-bar .brand { display: flex; align-items: baseline; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); }
.wf-bar .brand b { color: var(--color-linen); font-weight: var(--weight-medium); }
.wf-bar .brand span { color: var(--color-oatmeal); }
.wf-bar .legend { margin-left: auto; display: flex; gap: var(--space-5); align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-bone); flex-wrap: wrap; }
.wf-bar .legend .key { display: inline-flex; align-items: center; gap: var(--space-2); }
.swatch { width: 24px; height: 13px; border-radius: 2px; flex: none; }
.swatch.card { background: var(--color-linen); border: 1px solid var(--color-oatmeal); }
.swatch.row { background: transparent; border-top: 1.5px solid var(--color-oatmeal); border-bottom: 1.5px solid var(--color-oatmeal); height: 7px; }

.hero-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--margin-outer); }

/* ───────── HERO ─────────
   Note: DaisyUI's output.css also defines a `.hero` (place-items:center;
   display:grid). Reset align/justify-items + width so our left-aligned
   flex layout wins (same fix as incident_room.css). */
.hero {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: stretch; justify-items: stretch; place-items: stretch;
  width: 100%;
  position: relative; padding: var(--space-8) 0 var(--space-16);
}
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); margin-bottom: var(--space-5); }
.breadcrumb i { font-size: 14px; }
.room-title { font-family: var(--font-display); font-weight: var(--weight-light); font-size: clamp(2.8rem, 5vw, 3.75rem); line-height: 1.02; letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0; }
.identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); font-family: var(--font-ui); font-size: var(--text-base); color: var(--color-stone); }
.identity .item { color: var(--fg-body); }
.identity .item b { font-weight: var(--weight-medium); }
.identity .sep { color: var(--color-oatmeal); }
.hero-dek { font-family: var(--font-ui); font-size: var(--text-md); line-height: var(--leading-body); color: var(--fg-body); max-width: 46rem; margin: var(--space-4) 0 0; }

/* trust strip */
.trust { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-stone); }
.trust .ti { display: inline-flex; align-items: baseline; gap: 6px; }
.trust .ti b { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-charcoal); letter-spacing: var(--tracking-tight); }
.trust .dot { color: var(--color-oatmeal); }
.trust .maintained { display: inline-flex; align-items: center; gap: 7px; }
.trust a { margin-left: auto; color: var(--color-navy); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.trust a:hover { color: var(--color-navy-mid); }
.trust a i { font-size: 13px; }

/* ───────── Severity hybrid: ring + weekly pulse ───────── */
.sev-hybrid { display: grid; grid-template-columns: auto 1fr; gap: var(--space-12); align-items: center; margin-top: var(--space-8); }
/* box-shadow:none — the bare `.ring` class collides with Tailwind's `.ring`
   utility in the global output.css, which would otherwise paint a black ring. */
.ring { display: flex; flex-direction: column; align-items: center; flex: none; box-shadow: none; }
.ring-ring { position: relative; width: 172px; height: 172px; }
.ring-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-ring .track { fill: none; stroke: var(--color-stone); stroke-width: 3.5; opacity: 0.45; stroke-dasharray: 1.2 4.5; stroke-linecap: round; }
.ring-ring .arc { fill: none; stroke: var(--sev-high-d); stroke-width: 7; stroke-linecap: round; }
.ring-ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 3rem; line-height: 1; color: var(--color-charcoal); }
.ring-num .mx { font-size: 0.9rem; color: var(--color-stone); }
.ring-qual { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-stone); margin-top: 5px; }
.ring-cap { font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-charcoal); margin-top: var(--space-4); letter-spacing: var(--tracking-tight); text-align: center; }
.ring-cap small { display: block; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-stone); letter-spacing: 0; margin-top: 3px; }

/* ───────── Weekly stacked pulse (volume + heat colour) ───────── */
.pulse { min-width: 0; --pulse-rsp: #102D56; }
.pulse .seg-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.pulse .seg-head .label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.pulse .seg-head .win { font-family: var(--font-mono); font-size: 11px; color: var(--color-oatmeal); white-space: nowrap; }
.pulse-chart { position: relative; }
.pulse-cols { display: grid; gap: 2px; align-items: stretch; }
.pw { display: grid; grid-template-rows: var(--inc-h, 66px) 30px; }
.pw-inc { display: flex; flex-direction: column-reverse; align-items: stretch; justify-content: flex-start; }
.pbar { display: block; width: 100%; border-radius: 1px 1px 0 0; }
.pw-rsp { display: flex; flex-direction: column; align-items: stretch; }
.prbar { display: block; width: 100%; background: var(--pulse-rsp); }
.pulse-axisline { position: absolute; left: 0; right: 0; top: var(--inc-h, 66px); height: 1px; background: var(--color-oatmeal); }
.pw.now .pw-inc { box-shadow: inset 0 0 0 1px var(--color-eurepoc-red); }
.pw.now .pw-rsp { box-shadow: inset 0 0 0 1px var(--color-eurepoc-red); }
.pw:hover .pw-inc { outline: 1px solid var(--color-charcoal); outline-offset: 0; }

/* ───────── Monthly variant (.pm) — clickable anchor selector ─────────
   Re-uses the .pulse / .pulse-cols / .pbar / .prbar scaffolding but each cell
   is a <button> with an inline month label below the response bar. */
.pm { appearance: none; background: transparent; border: 0; padding: 0; margin: 0;
      display: grid; grid-template-rows: var(--inc-h, 66px) 30px 14px; cursor: pointer;
      font: inherit; color: inherit; text-align: center; }
.pm-inc { display: flex; flex-direction: column-reverse; align-items: stretch; justify-content: flex-start; }
.pm-rsp { display: flex; flex-direction: column; align-items: stretch; }
.pm-lab { font-family: var(--font-mono); font-size: 9.5px; color: var(--color-stone);
          line-height: 14px; align-self: stretch; padding-top: 2px; white-space: nowrap; overflow: hidden; }
.pm.now .pm-inc { box-shadow: inset 0 0 0 1px var(--color-eurepoc-red); }
.pm.now .pm-rsp { box-shadow: inset 0 0 0 1px var(--color-eurepoc-red); }
.pm:hover .pm-inc, .pm:focus-visible .pm-inc { outline: 1px solid var(--color-charcoal); outline-offset: 0; }
.pm:focus-visible { outline: none; }
.pm.selected .pm-inc { box-shadow: inset 0 0 0 2px var(--color-navy); }
.pm.selected .pm-rsp { box-shadow: inset 0 0 0 2px var(--color-navy); }

/* ── Incomplete-month overlay (current + previous month) ──
   The bar grey-base reads as "observed so far"; a striped tile sits above
   it up to the Bayesian median; a thin whisker spans the CI range. All
   pixel positions come from inline custom properties set by the controller. */
.pm.incomplete .pm-inc { position: relative; }
.pm.incomplete .pm-inc > .pbar,
.pm.incomplete .pm-inc > .pbar-ci-whisker { position: absolute; left: 0; right: 0; }
.pm.incomplete .pbar-observed {
    bottom: 0;
    height: var(--observed-h, 0);
    background: var(--bar-colour, var(--color-stone));
    border-radius: 0;
}
.pm.incomplete .pbar-est {
    bottom: var(--observed-h, 0);
    height: var(--est-h, 0);
    background-color: var(--bar-colour, var(--color-stone));
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 0 3px,
        rgba(255, 255, 255, .45) 3px 6px
    );
    border-radius: 1px 1px 0 0;
}
/* Whisker: thin centred line from ci_lower to ci_upper, with end caps. */
.pm.incomplete .pbar-ci-whisker {
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    bottom: var(--ci-lower-h, 0);
    height: calc(var(--ci-upper-h, 0) - var(--ci-lower-h, 0));
    background: var(--color-charcoal);
    opacity: .75;
}
.pm.incomplete .pbar-ci-whisker::before,
.pm.incomplete .pbar-ci-whisker::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 7px;
    height: 1px;
    background: var(--color-charcoal);
    transform: translateX(-50%);
}
.pm.incomplete .pbar-ci-whisker::before { top: 0; }
.pm.incomplete .pbar-ci-whisker::after  { bottom: 0; }
/* Hover/now/selected outlines defined above still apply; no override needed. */
.pm.selected .pm-lab { color: var(--color-charcoal); font-weight: var(--weight-semibold); }

.band-grid[aria-busy="true"] .rc { opacity: .5; pointer-events: none; transition: opacity .12s ease; }

.reset-anchor { appearance: none; background: transparent; border: 1px solid var(--color-oatmeal);
                border-radius: var(--radius-pill); padding: 3px 10px; margin-left: var(--space-3);
                font-family: var(--font-ui); font-size: 11px; color: var(--color-stone);
                display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.reset-anchor:hover { color: var(--color-charcoal); border-color: var(--color-charcoal); }
.seg-axis { display: grid; height: 16px; margin-top: 6px; }
.seg-m { grid-row: 1; font-family: var(--font-mono); font-size: 10px; color: var(--color-stone); white-space: nowrap; align-self: start; }
.pulse-caption { font-family: var(--font-ui); font-size: 12px; color: var(--color-stone); margin-top: var(--space-3); max-width: 40rem; }
.seg-legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-ecru); }
.seg-legend .grp { display: inline-flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.seg-legend .glab { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-oatmeal); }
.seg-legend .k { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 11.5px; color: var(--color-stone); }
.seg-legend .k .sw { width: 12px; height: 12px; border-radius: 2px; flex: none; }

/* ───────── Below-hero: centre body ───────── */
.below { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-10); max-width: var(--wrap); margin: 0 auto; padding: 0 var(--margin-outer) var(--space-24); align-items: start; }
.below-main { grid-column: 1; min-width: 0; }

/* section scaffolding */
section[id] { scroll-margin-top: calc(var(--bar-h) + var(--space-4)); }
.feed > * + * { margin-top: var(--space-16); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-oatmeal); }
.sec-head .ht { display: flex; align-items: baseline; gap: var(--space-3); }
.sec-head h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0; }
.sec-head .count { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-stone); }
.sec-head .kind { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-oatmeal); }
.sec-head .alllink { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-navy); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sec-head .alllink:hover { color: var(--color-navy-mid); }

.sev-pill { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.sev-pill .lab { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.sev-pill.b-low  { background: var(--sev-low);  color: #2C4A38; }
.sev-pill.b-mid  { background: var(--sev-mid);  color: #6B4E18; }
.sev-pill.b-high { background: var(--sev-high); color: #6E2A2E; }

/* ── Featured highlight ──
   Light card body alongside a dark-sea map panel: the .fmap keeps its navy
   "sea" + light landmass treatment; the .fbody half reverts to the standard
   linen card surface and dark typography. */
.feature { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: var(--space-6); background: var(--color-linen); border: 1px solid var(--color-oatmeal); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; }
.feature:hover { background: var(--color-ecru); }
.feature .fmap { position: relative; background: var(--color-navy); border-right: 1px solid var(--color-oatmeal); min-height: 168px; padding: var(--space-6) var(--space-3) var(--space-3); }
.feature .fmap .jvm-mount { height: 100%; min-height: 168px; width: 100%; }
.feature .fmap .jvm-container { background: transparent !important; }
.feature .fmap .map-tag { position: absolute; top: var(--space-2); left: var(--space-3); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-oatmeal); z-index: 1; }
.feature .fmap .map-cap { position: absolute; bottom: var(--space-2); left: var(--space-3); font-family: var(--font-mono); font-size: 9.5px; color: var(--color-linen); z-index: 1; }
.feature .fmap > i.ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; color: var(--color-linen); opacity: 0.35; }
.feature .fbody { padding: var(--space-6) var(--space-6) var(--space-6) 0; display: flex; flex-direction: column; }
.feature .feyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-eurepoc-red-muted); margin-bottom: var(--space-3); }
.feature h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-light); line-height: 1.06; letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0 0 var(--space-2); }
.feature .fdek { font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-body); color: var(--color-stone); margin: 0 0 var(--space-4); max-width: 40rem; }
.feature .fmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: auto; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-stone); }
.feature .fmeta .sep { color: var(--color-oatmeal); }
.feature .fread { margin-top: var(--space-4); display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-navy); }
.feature .fread i { font-size: 16px; }

/* ── Editorial briefing cards ── */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-6); }
.card { display: flex; flex-direction: column; background: var(--color-linen); border: 1px solid var(--color-oatmeal); border-radius: var(--radius-md); padding: var(--space-6); text-decoration: none; }
.card:hover { background: var(--color-ecru); }
.card .ceyebrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.card .ceyebrow .lab { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); display: inline-flex; align-items: center; gap: 6px; }
.card h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: 1.12; letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0 0 var(--space-2); }
.card .cdek { font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; color: var(--color-stone); margin: 0 0 var(--space-4); }
.card .cmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-bone); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-stone); }
.card .cmeta .sep { color: var(--color-oatmeal); }
.card .cmeta b { font-family: var(--font-mono); color: var(--fg-body); font-weight: var(--weight-medium); }
.pub-grid { margin-top: var(--space-8); }

/* attribution badge — single check (attributed) / double check (responded) */
.att-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 11px; font-weight: var(--weight-medium); padding: 3px 9px 3px 7px; border-radius: var(--radius-pill); white-space: nowrap; line-height: 1; }
.att-badge i { font-size: 14px; }
.att-badge.none { color: var(--att-none-fg); border: 1px dashed var(--att-none-bd); }
.att-badge.attributed { color: var(--att-attr-fg); background: var(--att-attr-soft); }
.att-badge.attributed i { color: var(--att-attr); }
.att-badge.responded { color: var(--att-resp); background: var(--att-resp-soft); }
.att-badge.responded i { color: var(--att-resp); }
.att-badge.sm { font-size: 10px; padding: 2px 7px 2px 5px; }
.att-badge.sm i { font-size: 12.5px; }

/* avatar stack */
.av-stack { display: flex; flex: none; }
.av-stack .av { width: 30px; height: 30px; border-radius: 50%; background: var(--color-jacket); border: 2px solid var(--color-linen); box-shadow: 0 0 0 1px var(--color-oatmeal); display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 10.5px; font-weight: var(--weight-semibold); color: var(--color-charcoal); margin-left: -9px; }
.av-stack .av:first-child { margin-left: 0; }
.feature .fby { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
.feature .fby .fby-text { display: flex; flex-direction: column; line-height: 1.3; }
.feature .fby .by { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--fg-body); }
.feature .fby .by b { font-weight: var(--weight-medium); color: var(--color-charcoal); }
.feature .fby .by-meta { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-stone); }
.card .cby { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); }
.card .cby .av-stack .av { width: 24px; height: 24px; font-size: 9px; margin-left: -7px; }
.card .cby .by { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-stone); }
.card .cby .by b { font-weight: var(--weight-medium); color: var(--fg-body); }

/* ── Structured data table ── */
.tbl-wrap { border: 1px solid var(--color-oatmeal); border-radius: var(--radius-md); overflow: hidden; }
table.dt { width: 100%; border-collapse: collapse; font-family: var(--font-ui); }
table.dt thead th { text-align: left; font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); padding: var(--space-3) var(--space-4); background: var(--color-jacket); border-bottom: 1px solid var(--color-oatmeal); white-space: nowrap; }
table.dt thead th.num { text-align: right; }
table.dt tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-ecru); font-size: var(--text-sm); color: var(--fg-body); vertical-align: middle; }
table.dt tbody tr:last-child td { border-bottom: none; }
table.dt tbody tr { cursor: pointer; }
table.dt tbody tr:hover { background: var(--color-ecru); }
.dt .nm { display: flex; flex-direction: column; gap: 1px; }
.dt .nm .t { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-charcoal); display: inline-flex; align-items: center; gap: var(--space-2); }
.dt .nm .a { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-stone); }
.dt .brief-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: 9px; font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-navy); background: var(--color-slate-pale); padding: 2px 6px; border-radius: var(--radius-sm); }
.dt .origin { display: flex; flex-direction: column; gap: 1px; }
.dt .origin .c { font-weight: var(--weight-medium); color: var(--fg-body); }
.dt .origin .ac { font-size: 11.5px; color: var(--color-stone); }
.dt .date { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-stone); white-space: nowrap; }
.dt .typ { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dt .typ .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.dt .ibar { display: flex; align-items: center; gap: var(--space-3); justify-content: flex-end; }
.dt .ibar .track { width: 64px; height: 5px; border-radius: var(--radius-pill); background: var(--color-bone); position: relative; }
.dt .ibar .track > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); }
.dt .ibar .track > span.b-low  { background: var(--sev-low-d); }
.dt .ibar .track > span.b-mid  { background: var(--sev-mid-d); }
.dt .ibar .track > span.b-high { background: var(--sev-high-d); }
.dt .ibar .v { font-family: var(--font-mono); font-size: 12px; color: var(--color-charcoal); width: 26px; text-align: right; }
.dt .go { color: var(--color-oatmeal); font-size: 16px; text-align: right; }
table.dt tbody tr:hover .go { color: var(--color-navy); }

/* ───────── All incidents — combined ledger + master-detail panel ─────────
   Verbatim port of the design handoff (Data Room - Europe Profile.html). */
.records-grid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
/* The ledger is a fixed-height column that scrolls in place (the page does not
   extend as more of the stream loads); chunks load as the sentinel nears the
   bottom of this box. */
.records-grid .ledger { max-width: 480px; min-width: 0; position: sticky; top: calc(var(--bar-h) + var(--space-5)); max-height: calc(100vh - var(--bar-h) - var(--footer-h) - var(--space-6)); overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-2); }
.ledger-sentinel { height: 1px; }

/* ── ledger (incidents + responses interleaved) ── */
.ledger { position: relative; }
.ev { display: grid; grid-template-columns: 64px 26px 1fr; align-items: start; }
.ev .when { text-align: right; padding-top: 13px; padding-right: 4px; display: flex; flex-direction: column; line-height: 1.1; }
.ev .when .d { font-family: var(--font-mono); font-size: 12px; color: var(--color-charcoal); }
.ev .when .y { font-family: var(--font-mono); font-size: 9.5px; color: var(--color-oatmeal); }
.ev .when.cont { justify-content: flex-start; }
.ev .when.cont .cdot { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--color-oatmeal); margin-top: 2px; align-self: flex-end; margin-right: 2px; }
.ev .rail { position: relative; align-self: stretch; }
.ev .rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--color-oatmeal); transform: translateX(-50%); }
.ev:first-child .rail::before { top: 16px; }
.ev:last-child .rail::before { bottom: auto; height: 16px; }
.ev .node { position: absolute; left: 50%; top: 14px; transform: translate(-50%, 0); z-index: 1; }
.node.n-inc { width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; box-shadow: 0 0 0 3px var(--page-bg); }
.node.n-inc.b-low { background: var(--sev-low-d); }
.node.n-inc.b-mid { background: var(--sev-mid-d); }
.node.n-inc.b-high { background: var(--sev-high-d); }
.node.n-rsp { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; box-shadow: 0 0 0 3px var(--page-bg); margin-top: -2px; }

/* time gap — plain spine, logarithmic scale */
.ev.gap .rail { display: flex; flex-direction: column; align-items: center; }
.ev.gap .sp { display: block; width: 1px; }
.ev.gap .gcard { display: flex; align-items: center; padding-left: 12px; }
.ev.gap .gdays { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--color-oatmeal); white-space: nowrap; }

/* incident card (selectable) */
.cardx { padding: 9px 12px 13px; min-width: 0; }
.cardx.cx-inc { display: block; cursor: pointer; border-radius: var(--radius-md); transition: background var(--transition-base); }
.cardx.cx-inc:hover { background: var(--color-linen); }
.cardx.cx-inc:hover .t { color: var(--color-navy); }
.cardx[role="button"] { outline: none; -webkit-tap-highlight-color: transparent; }
.cardx[role="button"]:focus-visible { box-shadow: 0 0 0 2px var(--color-slate); }
.cardx.cx-inc[aria-pressed="true"] { background: var(--color-slate-pale); }
.cardx.cx-inc[aria-pressed="true"] .t { color: var(--color-navy); }
.cardx.cx-inc .r1 { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cardx.cx-inc .r1 .t { font-size: 15.5px; font-weight: var(--weight-semibold); color: var(--color-charcoal); display: inline-flex; align-items: center; gap: 8px; }
.cardx.cx-inc .r2 { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); margin-top: 2px; }
.cardx.cx-inc .r3 { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 7px; font-size: 12.5px; color: var(--color-stone); }
.cardx.cx-inc .r3 .origin { color: var(--fg-body); }
.cardx .typ { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; color: var(--color-stone); }
.cardx .typ .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cardx .brief-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: 9px; font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-navy); background: var(--color-slate-pale); padding: 2px 6px; border-radius: 3px; }

/* ledger intensity bar (+ unscored) */
.ledger .ibar { display: inline-flex; align-items: center; gap: 10px; }
.ledger .ibar .track { width: 60px; height: 5px; border-radius: var(--radius-pill); background: var(--color-bone); position: relative; flex: none; }
.ledger .ibar .track > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); }
.ledger .ibar .track > span.b-low { background: var(--sev-low-d); }
.ledger .ibar .track > span.b-mid { background: var(--sev-mid-d); }
.ledger .ibar .track > span.b-high { background: var(--sev-high-d); }
.ledger .ibar .v { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-charcoal); width: 24px; text-align: right; }
.ledger .ibar.unscored .uns { font-family: var(--font-mono); font-size: 11px; font-style: italic; color: var(--color-oatmeal); white-space: nowrap; }

/* response card */
.cardx.cx-rsp { background: var(--color-linen); border: 1px solid var(--color-ecru); border-radius: var(--radius-md); padding: 9px 12px; margin: 3px 0 9px; cursor: pointer; transition: border-color var(--transition-base), background var(--transition-base); }
.cardx.cx-rsp .r1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cardx.cx-rsp .kind { font-size: 10.5px; font-weight: var(--weight-semibold); letter-spacing: 0.07em; text-transform: uppercase; }
.cardx.cx-rsp .lag { font-family: var(--font-mono); font-size: 10px; color: var(--color-oatmeal); white-space: nowrap; }
.cardx.cx-rsp .ttl { font-size: 14.5px; font-weight: var(--weight-medium); color: var(--color-charcoal); margin-top: 3px; }
.cardx.cx-rsp .ref { font-size: 12.5px; color: var(--color-stone); margin-top: 3px; }
.cardx.cx-rsp .ref .arr { color: var(--color-oatmeal); }
.cardx.cx-rsp .ref .lk { color: var(--color-navy); }
.cardx.cx-rsp:hover { border-color: var(--color-oatmeal); }
.cardx.cx-rsp[aria-pressed="true"] { border-color: var(--color-navy); background: var(--color-slate-pale); }

/* ── detail panel (sticky master-detail surface) ── */
.detail { position: sticky; top: calc(var(--bar-h) + var(--space-5)); max-height: calc(100vh - var(--bar-h) - var(--footer-h) - var(--space-6)); overflow-y: auto; background: var(--color-linen); border: 1px solid var(--color-bone); border-radius: var(--radius-lg); }
.detail .d-body { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); }
.detail .d-overview { gap: var(--space-6); padding: var(--space-5) var(--space-5) var(--space-6); }
.detail .ins-eyebrow { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-oatmeal); }

.d-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.d-type { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.d-sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.d-flag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-eurepoc-red-muted); border: 1px solid var(--color-eurepoc-red-muted); border-radius: var(--radius-pill); padding: 2px 8px; }
.d-title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 27px; line-height: 1.08; letter-spacing: var(--tracking-tight); color: var(--color-charcoal); margin: 0; }
.d-alt { font-family: var(--font-mono); font-size: 12px; color: var(--color-stone); margin-top: -2px; }

.d-intensity { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-oatmeal); border-bottom: 1px solid var(--color-oatmeal); }
.d-int-fig { font-family: var(--font-display); font-weight: var(--weight-light); font-size: 42px; line-height: 1; }
.d-int-fig .d-int-max { font-size: 15px; color: var(--color-oatmeal); }
.b-low-fg { color: var(--sev-low-d); } .b-mid-fg { color: var(--sev-mid-d); } .b-high-fg { color: var(--sev-high-d); }
.d-int-meta { display: flex; flex-direction: column; gap: 4px; }
.d-int-band { font-family: var(--font-ui); font-size: 12px; font-weight: var(--weight-semibold); width: fit-content; padding: 2px 9px; border-radius: var(--radius-pill); }
.d-int-band.b-low { color: var(--sev-low-d); background: color-mix(in srgb, var(--sev-low-d) 16%, transparent); }
.d-int-band.b-mid { color: var(--sev-mid-d); background: color-mix(in srgb, var(--sev-mid-d) 16%, transparent); }
.d-int-band.b-high { color: var(--sev-high-d); background: color-mix(in srgb, var(--sev-high-d) 16%, transparent); }
.d-int-impact { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); }

.d-meta { display: grid; grid-template-columns: 92px 1fr; gap: 9px var(--space-4); margin: 0; }
.d-meta > div { display: contents; }
.d-meta dt { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); padding-top: 2px; }
.d-meta dd { margin: 0; font-family: var(--font-ui); font-size: 13px; color: var(--color-charcoal); line-height: 1.4; }
.d-dek { font-family: var(--font-ui); font-size: 14px; line-height: var(--leading-body); color: var(--fg-body); margin: 0; text-wrap: pretty; }

.d-thread { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--color-oatmeal); }
.d-thread-head { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); display: flex; align-items: center; gap: 8px; }
.d-thread-n { font-family: var(--font-mono); font-size: 11px; color: var(--color-oatmeal); background: var(--color-bone); border-radius: var(--radius-pill); padding: 1px 7px; }
.d-rsp { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; text-align: left; background: var(--page-bg); border: 1px solid var(--color-bone); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); cursor: pointer; transition: border-color var(--transition-base), background var(--transition-base); }
.d-rsp:hover { border-color: var(--color-navy); background: var(--color-linen); }
.d-rsp-node { width: 24px; height: 24px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; margin-top: 1px; }
.d-rsp-node.node-inc { border-radius: 50%; width: 16px; height: 16px; margin: 4px 4px 0; }
.d-rsp-node.node-inc.b-low { background: var(--sev-low-d); } .d-rsp-node.node-inc.b-mid { background: var(--sev-mid-d); } .d-rsp-node.node-inc.b-high { background: var(--sev-high-d); }
.d-rsp-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.d-rsp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.d-rsp-kind { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
.d-rsp-lag { font-family: var(--font-mono); font-size: 10px; color: var(--color-oatmeal); white-space: nowrap; }
.d-rsp-ttl { font-family: var(--font-ui); font-size: 13.5px; font-weight: var(--weight-medium); color: var(--color-charcoal); line-height: 1.3; }
.d-rsp-by { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-stone); }
.d-rsp-go { color: var(--color-oatmeal); font-size: 15px; align-self: center; flex: none; }
.d-rsp:hover .d-rsp-go { color: var(--color-navy); }
.d-empty { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 12.5px; color: var(--color-stone); font-style: italic; }
.d-empty i { font-size: 15px; color: var(--color-oatmeal); font-style: normal; }

.d-open { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-family: var(--font-ui); font-size: 13px; font-weight: var(--weight-medium); color: var(--color-navy); text-decoration: none; padding-top: var(--space-2); }
.d-open:hover { color: var(--color-navy-mid); }
.d-open i { font-size: 15px; }
.d-hint { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 12px; color: var(--color-stone); padding-top: var(--space-5); border-top: 1px solid var(--color-oatmeal); }
.d-hint i { font-size: 15px; color: var(--color-oatmeal); }

.ins-stat { display: flex; flex-direction: column; gap: 2px; }
.ins-fig { font-family: var(--font-display); font-weight: var(--weight-light); font-size: 38px; line-height: 1; color: var(--color-navy); letter-spacing: -0.01em; }
.ins-fig .ins-unit { font-size: 22px; margin-left: 1px; }
.ins-lab { font-family: var(--font-ui); font-size: 12.5px; font-weight: var(--weight-medium); color: var(--color-charcoal); line-height: 1.35; }
.ins-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-stone); margin-top: 2px; }
.ins-block { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--color-oatmeal); }
.ins-block .ins-lab { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }

.mix { display: flex; flex-direction: column; gap: 7px; }
.mix-row { display: grid; grid-template-columns: 1fr 46px 16px; align-items: center; gap: 8px; }
.mix-lab { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-charcoal); white-space: nowrap; }
.mix-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.mix-bar { height: 5px; border-radius: var(--radius-pill); background: var(--color-bone); position: relative; }
.mix-bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); }
.mix-n { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); text-align: right; }

.rsp-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rsp-top li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rsp-top .rsp-name { font-size: 12.5px; color: var(--color-charcoal); }
.rsp-top .rsp-n { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); }

@media (max-width: 980px) {
  .records-grid { grid-template-columns: 1fr; }
  .records-grid .ledger { max-width: 580px; position: static; max-height: 75vh; }
  .detail { position: static; max-height: none; overflow: visible; }
  .detail .d-overview { flex-direction: row; flex-wrap: wrap; gap: var(--space-6) var(--space-8); }
  .detail .d-overview .ins-eyebrow { flex-basis: 100%; }
  .d-overview .ins-stat, .d-overview .ins-block { flex: 1 1 200px; }
  .d-overview .ins-block { border-top: none; padding-top: 0; }
  .d-overview .d-hint { flex-basis: 100%; }
}

/* ── About the room ── */
.about-card { background: var(--color-ecru); border: 1px solid var(--color-oatmeal); border-radius: var(--radius-md); padding: var(--space-8); }
.about-card p { font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg-body); max-width: 46rem; margin: 0 0 var(--space-5); }
.about-card p:last-of-type { margin-bottom: var(--space-6); }
.about-card .links { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-1) var(--space-8); }
.about-card .links a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; font-family: var(--font-ui); font-size: var(--text-base); color: var(--color-navy); text-decoration: none; border-bottom: 1px solid var(--color-bone); }
.about-card .links a:hover { color: var(--color-navy-mid); }
.about-card .links a i { font-size: 18px; color: var(--color-stone); }
@media (max-width: 620px) { .about-card .links { grid-template-columns: 1fr; } }
.about-src { font-family: var(--font-mono); font-size: 10px; color: var(--color-oatmeal); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-bone); }

/* ───────── Contents footer bar ───────── */
.toc-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: var(--footer-h); background: var(--color-linen); border-top: 1.5px solid var(--color-oatmeal); box-shadow: 0 -1px 4px rgba(31, 42, 43, 0.06); }
.toc-bar .inner { max-width: var(--wrap); height: 100%; margin: 0 auto; padding: 0 var(--margin-outer); display: flex; align-items: center; gap: var(--space-6); }
.toc-bar .tb-title { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); flex: none; }
.toc-bar .tb-list { display: flex; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.toc-bar .tb-list::-webkit-scrollbar { display: none; }
.toc-bar .tb-list a { display: inline-flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-stone); text-decoration: none; position: relative; }
.toc-bar .tb-list a .num { font-family: var(--font-mono); font-size: 10px; color: var(--color-oatmeal); }
.toc-bar .tb-list a:hover { color: var(--color-charcoal); background: var(--color-ecru); }
.toc-bar .tb-list a.active { color: var(--color-navy); font-weight: var(--weight-medium); }
.toc-bar .tb-list a.active .num { color: var(--color-eurepoc-red-muted); }
.toc-bar .tb-list a.active::before { content: ""; position: absolute; top: -1px; left: var(--space-3); right: var(--space-3); height: 2px; background: var(--color-eurepoc-red); border-radius: 0 0 2px 2px; }

/* ───────── Section: Explore tabs ───────── */
.sec-head-tabs { align-items: flex-end; }
.tabs { display: flex; align-items: flex-end; }
.tab { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: 1.1; color: var(--color-oatmeal); background: none; border: none; padding: 0 0 var(--space-2); margin-right: var(--space-6); cursor: pointer; position: relative; }
.tab:last-child { margin-right: 0; }
.tab:hover { color: var(--color-stone); }
.tab.active { color: var(--color-charcoal); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-eurepoc-red); border-radius: 2px 2px 0 0; }
.tabpanel[hidden] { display: none; }

.region-key { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-6); }
.region-key .rk-grp { display: inline-flex; align-items: center; gap: var(--space-3); }
.region-key .rk-lab { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-oatmeal); }
.region-key .k { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 11.5px; color: var(--color-stone); }
.region-key .k .sw { width: 10px; height: 10px; border-radius: 2px; }

/* ───────── Region cards (port of region-cards.css) ───────── */
.band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1000px) { .band-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .band-grid { grid-template-columns: 1fr; } }

.rc { display: flex; gap: 20px; align-items: center; box-sizing: border-box; width: 100%;
  background: var(--color-linen); border: 1px solid var(--color-oatmeal); border-radius: 8px;
  padding: 20px; text-decoration: none; }
.rc:hover { background: var(--color-ecru); }
.rc-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.rc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rc-head h3 { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -.01em; color: var(--color-charcoal); margin: 0; line-height: 1.1; }
.rc-avg { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-stone); }
.rc-avg b { font-family: var(--font-mono); color: var(--color-charcoal); font-weight: 500; }
.rc-meta { font-family: var(--font-ui); font-size: 12px; color: var(--color-stone); }
.rc-meta b { color: var(--fg-body); font-weight: 500; }

/* the wheel — visual style mirrors the hero's average-intensity ring
   (dotted stone track + thin red arc, rounded caps, SVG rotated so the fill
   starts at 12 o'clock). */
.wheel { position: relative; flex: none; }
.wheel svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.wtrack { fill: none; stroke: var(--color-stone); stroke-width: 3.5; opacity: 0.45; stroke-dasharray: 1.2 4.5; stroke-linecap: round; }
.wgauge { fill: none; stroke: var(--sev-high-d); stroke-width: 7; stroke-linecap: round; }
.wheel-ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wheel-ctr .big { font-family: var(--font-display); font-weight: 400; line-height: .95; color: var(--color-charcoal); font-size: 38px; }
.wheel-ctr .big .mx { font-size: .46em; color: var(--color-stone); }
.wheel-ctr .sub { font-family: var(--font-ui); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-stone); margin-top: 4px; }

/* momentum pill */
.mom { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.mom i { font-size: 13px; }
.mom.up   { color: #8A3338; background: rgba(184, 78, 82, .15); }
.mom.down { color: var(--color-navy); background: var(--color-slate-pale); }
.mom.hot  { color: #fff; background: var(--color-eurepoc-red); }
.mom.none { color: var(--color-stone); background: var(--color-ecru); }

/* severity micro-legend */
.sevleg { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sevleg .s { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11.5px; color: var(--color-stone); }
.sevleg .s i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ───────── Landscape placeholder (deferred) ───────── */
.coming-soon { background: var(--color-linen); border: 1px dashed var(--color-oatmeal); border-radius: var(--radius-md); padding: var(--space-12) var(--space-8); text-align: center; }
.coming-soon h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--color-charcoal); margin: 0 0 var(--space-3); }
.coming-soon p { font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-body); color: var(--color-stone); max-width: 36rem; margin: 0 auto; }

/* ───────── Responsive ───────── */
@media (max-width: 1040px) {
  .below { grid-template-columns: 1fr; }
  .below-main { grid-column: auto; }
  .hero { min-height: 0; padding-top: var(--space-10); }
  .toc-bar .tb-title { display: none; }
}
@media (max-width: 860px) {
  .sev-hybrid { grid-template-columns: 1fr; gap: var(--space-10); }
  .ring { align-self: flex-start; }
  .feature { grid-template-columns: 1fr; }
  .feature .fmap { min-height: 150px; border-right: none; border-bottom: 1px solid var(--color-oatmeal); }
  .feature .fbody { padding: var(--space-6); }
  .cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dt .hide-sm { display: none; }
  .toc-bar .tb-list a .lbl { display: none; }
}

/* ═════════ Region profile additions (used by region_profile_page.html) ═════════ */

/* Breadcrumb parent link */
.bc-link { color: var(--color-stone); text-decoration: none; transition: color var(--transition-base); }
.bc-link:hover { color: var(--color-navy); }

/* Title row + inline regional standing */
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-8); flex-wrap: wrap; }
.standing-inline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: baseline; padding-bottom: 4px; }
.si { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-stone); white-space: nowrap; }
.si .si-lab { color: var(--color-stone); }
.si .si-rank { font-family: var(--font-mono); font-weight: var(--weight-medium); color: var(--color-charcoal); }
.si.lead .si-rank { color: var(--color-eurepoc-red-muted); }
@media (max-width: 760px) {
  .standing-inline { gap: var(--space-1) var(--space-4); }
  .si { font-size: var(--text-xs); }
}

/* ISO country chip */
.iso { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: 0.04em; color: var(--color-navy); background: var(--color-slate-pale); border-radius: var(--radius-sm); padding: 2px 5px; line-height: 1; flex: none; }
.iso.sm { font-size: 9px; padding: 1.5px 4px; }

/* Country table — intro + legend */
.country-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-5); }
.country-intro { font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-body); color: var(--color-stone); margin: 0; max-width: 42rem; }
.country-intro b { font-family: var(--font-mono); font-weight: var(--weight-medium); color: var(--fg-body); }
.country-legend { display: inline-flex; align-items: center; gap: var(--space-4); flex: none; }
.country-legend .cl-lab { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-oatmeal); }
.country-legend .k { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 11.5px; color: var(--color-stone); }
.country-legend .k i { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* Country table — rank column + severity-mix cell */
.country-dt th.rk, .country-dt td.rk { width: 34px; text-align: right; padding-right: var(--space-3); }
.country-dt .rk-n { font-family: var(--font-mono); font-size: 11px; color: var(--color-oatmeal); }
.country-dt .nm .t { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-charcoal); }
.country-dt .cnum { font-family: var(--font-mono); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-charcoal); }
.country-dt .typ-txt { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--fg-body); white-space: nowrap; }
.country-dt .mom { font-size: 11px; }
.country-dt td.num, .country-dt thead th.num { text-align: right; }
.sevmix-cell { display: flex; align-items: center; gap: var(--space-3); }
.sevmix { display: flex; width: 96px; height: 9px; border-radius: 2px; overflow: hidden; background: var(--color-bone); flex: none; }
.sevmix i { display: block; height: 100%; }
.sevavg { font-family: var(--font-mono); font-size: 12px; color: var(--color-charcoal); }

/* Pct rank cell — country table version of the region card wheel. */
.pct-cell { display: inline-flex; align-items: center; gap: 8px; }
.pct-mini { width: 22px; height: 22px; flex: none; transform: rotate(-90deg); }
.pct-mini .t { fill: none; stroke: var(--color-oatmeal); stroke-width: 14; opacity: .55; }
.pct-mini .g { fill: none; stroke: var(--color-charcoal); stroke-width: 14; stroke-linecap: round; }
.pct-num { font-family: var(--font-mono); font-size: 12px; font-weight: var(--weight-semibold); color: var(--color-charcoal); }
.pct-num .mx { font-size: 9px; color: var(--color-stone); margin-left: 2px; }
.pct-qual { font-family: var(--font-ui); font-size: 11px; color: var(--color-stone); }

.country-dt tbody[aria-busy="true"] tr { opacity: .5; pointer-events: none; transition: opacity .12s ease; }

/* Empty-row cell */
.dt tbody td.empty { text-align: center; padding: var(--space-6) var(--space-4); color: var(--color-oatmeal); font-style: italic; }

/* Landscape placeholder (deferred tab) */
.ls-placeholder { border: 1px dashed var(--color-oatmeal); border-radius: var(--radius-md); background: var(--color-linen); padding: var(--space-8); display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-6); align-items: start; }
.lp-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-ecru); display: flex; align-items: center; justify-content: center; color: var(--color-stone); font-size: 24px; }
.lp-text { min-width: 0; align-self: center; }
.lp-text h3 { font-family: var(--font-ui); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-charcoal); margin: 0 0 var(--space-2); }
.lp-text p { font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-body); color: var(--color-stone); margin: 0; max-width: 46rem; }
.lp-stubs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-2); }
.lp-stub { background: var(--color-ecru); border: 1px solid var(--color-bone); border-radius: var(--radius-sm); padding: var(--space-4); }
.lp-cap { font-family: var(--font-ui); font-size: 10px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-stone); }
.lp-rows { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-3); }
.lp-bar { height: 8px; border-radius: 2px; background: var(--color-bone); }
@media (max-width: 760px) {
  .ls-placeholder { grid-template-columns: 1fr; }
  .lp-stubs { grid-template-columns: 1fr; }
}