/* ==========================================================================
   OPEC Intelligence Dashboard — design system + component styles
   --------------------------------------------------------------------------
   Ported from the "OPEC Intelligence Dashboard" Claude Design mockup.
   The mockup used huge inline styles; everything has been lifted into the
   semantic classes below so the F3 templates stay readable. Component classes
   are grouped by section and mirror the section partials in app/Views/v2/.

   Fonts (linked from Google Fonts in the layout <head>):
     - Archivo       display face — headlines, big numerals
     - Public Sans   body face
     - IBM Plex Mono tabular figures / codes
   Swap these for the official OPEC brand fonts when available.
   ========================================================================== */


  /* ---- Self-hosted webfonts ---------------------------------------------- */
  /* Archivo — variable (display face) */
  @font-face {
    font-family: "Archivo";
    src: url("/assets/fonts/Archivo.woff2") format("woff2");
    font-weight: 100 900;      /* variable weight axis */
    font-style: normal;
    font-display: swap;
  }

  /* Public Sans — variable (body face) */
  @font-face {
    font-family: "Public Sans";
    src: url("/assets/fonts/PublicSans.woff2") format("woff2");
    font-weight: 100 900;      /* variable weight axis */
    font-style: normal;
    font-display: swap;
  }

  /* IBM Plex Mono — static 400 + 500 (figures / codes) */
  @font-face {
    font-family: "IBM Plex Mono";
    src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Mono";
    src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Brand blue scale (anchored on emblem #00A5E8) */
  --blue-50:  #E9F7FD;
  --blue-100: #D0EFFB;
  --blue-200: #A1DFF7;
  --blue-300: #66CCF2;
  --blue-400: #29B6EC;
  --blue-500: #00A5E8;
  --blue-600: #0089C2;
  --blue-700: #006E9D;
  --blue-800: #015277;
  --blue-900: #063A54;
  --blue-950: #07293A;

  /* Ink / neutral scale */
  --ink-950: #0E0F10;
  --ink-900: #16181A;
  --ink-800: #232629;
  --ink-700: #383D42;
  --ink-600: #51575E;
  --ink-500: #6B727A;
  --ink-400: #8A9097;
  --ink-300: #B4B9BF;
  --ink-200: #D5D9DD;
  --ink-100: #E7EAEC;
  --ink-50:  #F3F5F6;
  --ink-25:  #FAFBFB;

  /* Semantic status */
  --green-600: #1E7F52;
  --green-100: #DDF2E7;
  --amber-600: #9A6700;
  --amber-100: #FBEFD4;
  --red-600:   #C0392B;
  --red-100:   #FBE3E0;

  --opec:      #00A5E8;

  /* Semantic aliases */
  --text-heading:   var(--ink-900);
  --text-body:      var(--ink-800);
  --text-secondary: var(--ink-500);
  --text-link:      var(--blue-700);

  --surface-page:       #FFFFFF;
  --surface-card:       #FFFFFF;
  --surface-brand-tint: var(--blue-50);

  --border-hairline: var(--ink-100);

  --status-positive:    var(--green-600);
  --status-caution:     var(--amber-600);
  --status-negative:    var(--red-600);
  --status-negative-bg: var(--red-100);

  /* Typography */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Radii / shadow */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-full: 999px;
  --shadow-card: 0 1px 2px rgba(14, 15, 16, 0.06);
}

/* ---- Base --------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--surface-page);
  color: var(--text-body);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; color: var(--text-heading); font-family: var(--font-display); }
a { color: inherit; }
::selection { background: var(--blue-100); }

@keyframes opecpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pulse { animation: opecpulse 2.4s ease-in-out infinite; }

/* Status-driven colour. Set `--st` on a container (e.g. .st-red) and child
   elements reference it via .st-dot / . st-text / .st-bar. */
.st-red    { --st: var(--status-negative); --st-bg: var(--red-100); }
.st-yellow { --st: var(--status-caution);  --st-bg: var(--amber-100); }
.st-green  { --st: var(--status-positive); --st-bg: var(--green-100); }
.st-text { color: var(--st); }
.st-dot  { background: var(--st); }

/* Importance severity colour (news rows). Set `--sev` via .sev-*. */
.sev-high { --sev: var(--status-negative); }
.sev-med  { --sev: var(--amber-600); }
.sev-low  { --sev: var(--blue-600); }

/* Up / down deltas */
.up   { color: var(--status-positive); }
.down { color: var(--status-negative); }

/* Generic helpers reused across sections */
.mono { font-family: var(--font-mono); }
.dim  { color: var(--ink-200); }
.sep  { color: var(--ink-300); }

/* Page container */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }

/* Visibility toggle (used by the news category switcher) */
.hidden { display: none; }

/* ---- Sticky page head (masthead + section nav) -------------------------- */
.page-head {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface-page);
  margin-bottom: 36px;
}

/* ---- Masthead ----------------------------------------------------------- */
.masthead-strip {
  padding-top: 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 18px;
  font: 600 11px/1.2 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary);
  padding-bottom: 14px; border-bottom: 1px solid var(--border-hairline);
}
.masthead-strip .group { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.masthead-strip .group.metrics { gap: 16px; letter-spacing: .02em; }
.masthead-strip .heading { color: var(--text-heading); }
.masthead-strip .edition { font-family: var(--font-mono); letter-spacing: 0; }
.masthead-strip .live { display: inline-flex; align-items: center; gap: 6px; }
.masthead-strip .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-600); }

.masthead-brand {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 18px 0;
}
.masthead-brand .lockup { display: flex; align-items: center; gap: 16px; min-width: 0; }
.masthead-emblem { height: 52px; display: block; flex: none; }
.masthead-title { font: 700 32px/1 var(--font-display); letter-spacing: -0.02em; color: var(--text-heading); }
.masthead-sub {
  font: 600 11px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-secondary); margin-top: 7px;
}

/* ---- Sticky section nav ------------------------------------------------- */
.section-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 20px; padding: 11px 0;
  border-top: 2px solid var(--ink-900); border-bottom: 1px solid var(--border-hairline);
}
.section-nav .links { display: flex; align-items: center; gap: 4px; }
.section-nav a {
  font: 500 13px/1 var(--font-body); text-decoration: none;
  color: var(--text-secondary); padding: 8px 12px; border-radius: var(--radius-sm);
}
.section-nav a:hover { color: var(--text-heading); }
.section-nav a.active { font-weight: 600; color: var(--text-heading); }
.section-nav .updated { font: 500 11px/1 var(--font-mono); color: var(--text-secondary); letter-spacing: .02em; }

/* ---- Section scaffolding ------------------------------------------------ */
/* scroll-margin must clear the sticky page head (brand row + nav) */
.section { scroll-margin-top: 170px; margin-bottom: 56px; }
.section--supply { margin-bottom: 48px; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 14px;
}
.eyebrow { font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--opec); }
.section-title { font: 700 31px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--text-heading); margin: 9px 0 0; }
.section-meta { font: 500 12px/1.4 var(--font-body); color: var(--text-secondary); text-align: right; }
.section-meta .num { font-family: var(--font-mono); color: var(--text-heading); }

.rule-strong { height: 1px; background: var(--ink-900); margin-bottom: 18px; }
.group-label {
  font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 10px;
}

/* ---- News: category pills ---------------------------------------------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 var(--font-body);
  padding: 8px 14px; border-radius: var(--radius-full);
  border: 1px solid var(--border-hairline); background: var(--surface-card);
  color: var(--text-secondary); cursor: pointer; transition: all .12s ease;
}
.pill:hover { border-color: var(--blue-300); color: var(--text-heading); }
.pill .pill-count { font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); }
/*.pill[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }*/
.pill[aria-pressed="true"] { background: var(--opec); border-color: var(--ink-900); color: #fff; }
.pill[aria-pressed="true"] .pill-count { color: #fff; opacity: .65; }

/* ---- News: AI briefing card -------------------------------------------- */
.briefing {
  background: var(--surface-brand-tint); border: 1px solid var(--blue-100);
  border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 18px;
}
.briefing-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.briefing-label {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-800);
}
.briefing-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500); }
.briefing-synth { font: 500 10px/1 var(--font-mono); color: var(--blue-700); letter-spacing: .04em; }
.briefing-text { font: 400 15px/1.6 var(--font-body); color: var(--ink-800); margin: 0; text-wrap: pretty; }
.briefing-foot { font: 500 11px/1.5 var(--font-mono); color: var(--blue-700); margin-top: 12px; }
.briefing-note { color: var(--amber-600); }

/* ---- News: morning overview (label rail + numbered top lines) ----------- */
/* Deliberately not a .briefing card: no fill, heavy ink rules, numbered
   headlines — so it reads as the front page above the category briefings. */
.overview {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px;
  border-top: 3px solid var(--ink-900); border-bottom: 1px solid var(--ink-900);
  padding: 16px 0 6px; margin: 6px 0 32px;
}
.overview-label {
  font: 600 12px/1.35 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-700);
}
.overview-meta { font: 500 11px/1.6 var(--font-mono); color: var(--text-secondary); margin-top: 10px; }
.overview-lines { list-style: none; counter-reset: ov; margin: 0; padding: 0; }
.overview-line {
  counter-increment: ov; position: relative; padding: 0 0 12px 40px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border-hairline);
}
.overview-line:last-child { border-bottom: 0; margin-bottom: 0; }
.overview-line::before {
  content: counter(ov); position: absolute; left: 0; top: -2px;
  font: 700 24px/1 var(--font-display); color: var(--opec);
}
.overview-headline { font: 600 17px/1.3 var(--font-display); letter-spacing: -0.005em; color: var(--text-heading); text-wrap: balance; }
.overview-text { font: 400 14px/1.55 var(--font-body); color: var(--ink-600); margin: 4px 0 0; text-wrap: pretty; }
.overview-sources { font: 500 11px/1.5 var(--font-mono); margin-top: 5px; }
.overview-sources a { color: var(--text-link); text-decoration: none; }
.overview-sources a:hover { text-decoration: underline; }
.overview-sources .sep { color: var(--ink-300); margin: 0 6px; }
.overview-lede { font: 400 19px/1.5 var(--font-display); color: var(--text-heading); margin: 0 0 12px; text-wrap: pretty; }

/* ---- News: article list ------------------------------------------------ */
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.list-head h3 { font: 600 13px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); margin: 0; }
.list-count { font: 500 11px/1 var(--font-mono); color: var(--text-secondary); }

.article-list { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.article { display: flex; gap: 14px; padding: 12px 16px; align-items: flex-start; border-top: 1px solid var(--border-hairline); }
.article:first-child { border-top: none; }
.article-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--sev, var(--ink-300)); }
.article-body { flex: 1; min-width: 0; }
.article-headline { font: 600 14.5px/1.35 var(--font-body); color: var(--text-heading); }
.article-headline a { text-decoration: none; }
.article-headline a:hover { color: var(--text-link); }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 5px;
  font: 500 11.5px/1.2 var(--font-body); color: var(--text-secondary);
}
.article-source { font-family: var(--font-mono); color: var(--ink-700); }
.badge-alert {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
  border-radius: var(--radius-full); background: var(--status-negative-bg); color: var(--status-negative);
  font: 600 9.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
.article-imp { flex: none; width: 64px; text-align: right; }
.article-imp .value { font: 500 18px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--sev, var(--text-heading)); }
.article-imp .label { font: 600 9px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); margin-top: 3px; }
.article-imp .level { font: 600 9px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; color: var(--sev, var(--text-secondary)); }

/* ---- Markets: metric cards --------------------------------------------- */
.metric-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--border-hairline); border: 1px solid var(--border-hairline);
  margin-bottom: 26px;
}
.metric-grid--wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.metric-grid:last-child { margin-bottom: 0; }
.metric { background: var(--surface-card); padding: 15px 16px; }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-label { font: 600 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.metric-code { font: 500 10px/1 var(--font-mono); color: var(--ink-400); }
.metric-value-row { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.metric-value { font: 500 26px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-heading); }
.metric-value--sm { font-size: 24px; }
.metric-unit { font: 400 11px/1 var(--font-body); color: var(--text-secondary); }
.metric-delta-row { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.metric-delta { font: 500 13px/1 var(--font-mono); }
.metric-when { font: 400 10px/1 var(--font-body); color: var(--ink-400); }
/* Chart.js (maintainAspectRatio:false) fills the parent box, so the wrapper
   carries the fixed height — not the canvas itself. */
.spark { position: relative; width: 100%; height: 34px; margin-top: 10px; }
.spark canvas { display: block; width: 100% !important; height: 100% !important; }
/* Floating hover tooltip for sparklines that carry dated history (shipping).
   Rendered on <body> so the 34px canvas can't clip it; positioned in JS. */
.spark-tip {
  position: absolute; z-index: 60; pointer-events: none;
  transform: translate(-50%, calc(-100% - 9px));
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 8px; border-radius: var(--radius-sm);
  background: var(--ink-900); color: #fff; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(14, 15, 16, 0.20);
  opacity: 0; transition: opacity .1s ease;
}
.spark-tip-date { font: 500 10px/1.2 var(--font-body); letter-spacing: .02em; opacity: .7; }
.spark-tip-val  { font: 500 12px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
/* Equity-index cards carry no history series, so they drop the sparkline;
   a little extra foot padding keeps them reading as cards, not truncated. */
.metric--nospark { padding-bottom: 18px; }
/* Index levels run 5–6 digits followed by a currency tag, unlike the 2-digit
   commodity prices, so they get a smaller value and a wider minimum column —
   otherwise the currency clips at the card edge. Wrap is a final safety net. */
.metric--nospark .metric-value { font-size: 20px; }
.metric--nospark .metric-value-row { flex-wrap: wrap; }
.metric-grid--idx { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }

/* ---- Supply chain: chokepoints ----------------------------------------- */
/* Methodology info popover (zero-JS <details>; JS adds Esc/outside-click). */
.choke-title-row { display: flex; align-items: center; gap: 8px; }
.choke-info { position: relative; display: inline-flex; }
.choke-info > summary { list-style: none; cursor: pointer; }
.choke-info > summary::-webkit-details-marker { display: none; }
.choke-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--radius-full);
  color: var(--ink-400); transition: color .15s, background .15s;
}
.choke-info-btn:hover, .choke-info[open] .choke-info-btn { color: var(--blue-600); background: var(--blue-50); }
.choke-info > summary:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: var(--radius-full); }

.choke-info-pop {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  width: min(360px, calc(100vw - 40px));
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md); box-shadow: 0 8px 28px rgba(14, 15, 16, 0.14);
  padding: 16px 17px; text-align: left;
}
.choke-info-pop-head { font: 700 14px/1.2 var(--font-display); color: var(--text-heading); margin-bottom: 9px; }
.choke-info-lead { font: 400 12.5px/1.55 var(--font-body); color: var(--ink-800); margin: 0 0 13px; }
.choke-info-lead strong { font-weight: 700; color: var(--text-heading); }

.choke-info-axes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 13px; }
.choke-info-axis { background: var(--ink-25); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 9px 10px; }
.choke-info-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 9.5px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--text-heading); margin-bottom: 5px; }
.choke-info-tag .dot { width: 7px; height: 7px; border-radius: 50%; }
.choke-info-axis p { font: 400 11.5px/1.45 var(--font-body); color: var(--ink-700); margin: 0; }

.choke-info-gloss { margin: 0 0 12px; }
.choke-info-gloss dt { font: 600 11.5px/1.3 var(--font-body); color: var(--text-heading); margin-top: 10px; }
.choke-info-gloss dt:first-child { margin-top: 0; }
.choke-info-gloss dd { font: 400 11.5px/1.45 var(--font-body); color: var(--ink-700); margin: 2px 0 0; }
.choke-info-gloss strong { font-weight: 700; color: var(--text-heading); }

.choke-info-foot { font: 400 11px/1.5 var(--font-body); color: var(--text-secondary); margin: 0; padding-top: 11px; border-top: 1px solid var(--border-hairline); }

@media (max-width: 560px) { .choke-info-axes { grid-template-columns: 1fr; } }

.choke-legend { display: flex; flex-wrap: wrap; gap: 14px; font: 500 12px/1 var(--font-body); color: var(--text-secondary); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item .dot { width: 8px; height: 8px; border-radius: 50%; }

.choke-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px; align-items: start; margin-bottom: 34px;
}

.choke-feature {
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 20px;
}
.choke-feature-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.choke-status { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--st); }
.choke-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st); }
.choke-coords { font: 500 11px/1 var(--font-mono); color: var(--ink-400); }
.choke-feature h3 { font: 700 22px/1.1 var(--font-display); letter-spacing: -0.01em; color: var(--text-heading); margin: 0 0 8px; }
.choke-desc { font: 400 13.5px/1.55 var(--font-body); color: var(--ink-800); margin: 0 0 16px; }

/* Two-axis badges (risk tier + flow state + hazard). Each badge sets its own
   .st-* class, so --st / --st-bg resolve per badge regardless of the card. */
.choke-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.choke-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-body); letter-spacing: .01em;
  padding: 5px 9px; border-radius: var(--radius-full);
  color: var(--st); background: var(--st-bg);
}
.choke-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st); }

.flow { margin-bottom: 16px; }
.flow-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.flow-label { font: 600 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.flow-figure { font: 500 13px/1 var(--font-mono); }
/* Bar spans the published 0–150% clamp; the baseline (100%) is marked at 66.7%. */
.flow-track { position: relative; height: 10px; width: 100%; background: var(--ink-50); border-radius: var(--radius-full); }
.flow-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--st, var(--status-negative)); border-radius: var(--radius-full); }
.flow-baseline { position: absolute; left: 66.7%; top: -3px; bottom: -3px; width: 1.5px; background: var(--ink-900); }
.flow-note { font: 500 11px/1.4 var(--font-body); color: var(--text-secondary); margin-top: 7px; }

/* legacy .bar (still used by other sections) */
.bar { height: 8px; width: 100%; background: var(--ink-50); border-radius: var(--radius-full); overflow: hidden; }
.bar-fill { height: 100%; background: var(--st, var(--status-negative)); }

/* Operator reroute playbook — the highest-value field, previously unrendered. */
.choke-intel { background: var(--st-bg); border-radius: var(--radius-md); padding: 11px 13px; margin-bottom: 16px; }
.choke-intel-label { font: 600 10px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--st); margin-bottom: 5px; }
.choke-intel p {
  font: 400 12.5px/1.5 var(--font-body); color: var(--ink-800); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.choke-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 14px; border-top: 1px solid var(--border-hairline); text-align: center; }
.choke-stat .value { font: 500 20px/1 var(--font-mono); color: var(--text-heading); }
.choke-stat .value.st-text { color: var(--st); }
.choke-stat .label { font: 600 9px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-top: 4px; }

.choke-routes { margin-top: 14px; }
.choke-routes .label { font: 600 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.choke-routes p { font: 400 13px/1.5 var(--font-body); color: var(--ink-800); margin: 6px 0 0; }

.choke-list { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.choke-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--border-hairline); }
.choke-row:first-child { border-top: none; }
.choke-row-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--st); }
.choke-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.choke-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.choke-row h4 { font: 600 16px/1.2 var(--font-display); color: var(--text-heading); margin: 0; }
.choke-row-level { font: 600 9.5px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--st); flex: none; }
.choke-row-routes { font: 500 11.5px/1.4 var(--font-mono); color: var(--text-secondary); }
.choke-row-note { font: 400 12.5px/1.45 var(--font-body); color: var(--ink-700); margin: 0; }
.choke-row-metric { flex: none; width: 54px; text-align: right; }
.choke-row-metric .value { font: 500 17px/1 var(--font-mono); color: var(--st); }
.choke-row-metric .label { font: 600 9px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-top: 3px; }

/* Per-row live signals: flow line (own --st via .st-*) + conflict activity. */
.choke-row-signals { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.choke-row-flow { font: 500 11.5px/1.4 var(--font-mono); color: var(--text-secondary); }
.choke-row-incidents { font: 600 10.5px/1.4 var(--font-body); color: var(--status-negative); }
.choke-muted { color: var(--ink-400); }

.choke-coverage-note { font: 500 11.5px/1.4 var(--font-body); color: var(--amber-600); margin: -8px 0 18px; }

/* ---- Energy & OPEC impact (enriched news, sections/impact.php) --------- */
.impact-list { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.impact {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px;
  padding: 16px; border-top: 1px solid var(--border-hairline);
}
.impact:first-child { border-top: none; }

/* Relevance badge — colour set per row via .rel-high / .rel-mid / .rel-low */
.rel-high { --rel: #fff;              --rel-bg: var(--opec);    --rel-border: var(--opec); }
.rel-mid  { --rel: var(--blue-800);   --rel-bg: var(--blue-50); --rel-border: var(--blue-200); }
.rel-low  { --rel: var(--ink-500);    --rel-bg: var(--ink-25);  --rel-border: var(--border-hairline); }
.impact-score {
  align-self: start; text-align: center; padding: 9px 0 8px;
  border-radius: var(--radius-sm); border: 1px solid var(--rel-border);
  background: var(--rel-bg); color: var(--rel);
}
.impact-score .value { font: 500 22px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.impact-score .label { font: 600 8.5px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; margin-top: 5px; opacity: .85; }

.impact-body { min-width: 0; }
.impact-signal { font-weight: 600; }
.badge-quality {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
  border-radius: var(--radius-full); background: var(--amber-100); color: var(--amber-600);
  font: 600 9.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
.impact-summary { font: 400 14.5px/1.55 var(--font-body); color: var(--ink-800); margin: 9px 0 0; text-wrap: pretty; }
.impact-why {
  font: 400 14px/1.5 var(--font-body); color: var(--ink-800); text-wrap: pretty;
  margin: 9px 0 0; padding-left: 11px; border-left: 2px solid var(--opec);
}
.impact-why .k {
  font: 600 10.5px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-800); margin-right: 7px;
}
.impact-figures { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 12px 0 0; }
.impact-figures dt { font: 500 11px/1.3 var(--font-body); color: var(--text-secondary); max-width: 260px; }
.impact-figures dd { margin: 3px 0 0; font: 500 15px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-heading); }
.impact-figures .unit { font-size: 11.5px; color: var(--text-secondary); }
.impact-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.impact-tag {
  font: 500 11px/1 var(--font-mono); padding: 4px 7px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline); background: var(--ink-25); color: var(--ink-600);
}
.impact-tag.is-opec      { border-color: var(--opec); background: var(--blue-50); color: var(--blue-800); font-weight: 600; }
.impact-tag.is-opec-plus { border-color: var(--blue-200); color: var(--blue-700); }
.impact-tag--commodity   { font-family: var(--font-body); }
.impact-note { font: 500 11px/1.4 var(--font-mono); color: var(--text-secondary); margin-top: 10px; }

/* ---- News briefing: admin summaries (NewsItem::$enrichment) ------------ */
/* Reuses the impact-* blocks above; only the relevance pill and the label are new. */
.article-rel {
  display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px 0 5px;
  border-radius: var(--radius-full); border: 1px solid var(--rel-border);
  background: var(--rel-bg); color: var(--rel);
  font: 600 10px/1 var(--font-mono); font-variant-numeric: tabular-nums;
}
/* OPEC emblem in the relevance pill (here) and the impact score box (above).
   The SVG is a mask filled with the text colour, so it stays visible on the
   solid-blue high-relevance background too. */
.article-rel::before,
.impact-score::before {
  content: ""; flex: none;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/opec-mark.svg") center / contain no-repeat;
          mask: url("/assets/img/opec-mark.svg") center / contain no-repeat;
}
.article-rel::before { width: 11px; height: 11px; }
.impact-score::before { display: block; width: 14px; height: 14px; margin: 0 auto 6px; }
.article-ai { margin-top: 2px; }
.article-ai .impact-summary { font-size: 14px; margin-top: 8px; }
.article-ai .impact-why { font-size: 13.5px; }
.article-ai .impact-figures { margin-top: 10px; }
.article-ai .impact-tags { margin-top: 10px; }
.article-ai-label {
  font: 600 9.5px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-700); margin-right: 8px;
}
.article.has-summary { padding-top: 14px; padding-bottom: 16px; }

/* ---- Footer (fixed to the bottom of the viewport) ----------------------- */
.dash-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--surface-page);
  border-top: 2px solid var(--ink-900);
  padding: 12px max(28px, calc((100vw - 1320px) / 2));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
}
/* Keep the last section clear of the fixed footer */
body { padding-bottom: 64px; }
.dash-footer .note { font: 500 11px/1.4 var(--font-body); color: var(--text-secondary); }
.dash-footer .disclaimer { font: 400 11px/1.4 var(--font-body); color: var(--ink-400); }
.dash-footer .stamp { font: 500 11px/1 var(--font-mono); color: var(--text-secondary); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .dash-footer { padding-left: 16px; padding-right: 16px; }
  /* masthead wraps and gets taller on small screens */
  .section { scroll-margin-top: 235px; }
  body { padding-bottom: 112px; }
  /* nav links scroll sideways instead of running off-screen */
  .section-nav .links { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .section-nav .links a { flex: none; }
  .impact { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .impact-score { justify-self: start; display: flex; align-items: baseline; gap: 6px; padding: 5px 9px; }
  .impact-score .value { font-size: 16px; }
  .impact-score .label { margin-top: 0; }
  /* overview: rail folds above the list */
  .overview { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .overview-label br, .overview-meta br { display: none; }
  .overview-rail { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .overview-label { white-space: nowrap; }
  .overview-meta { margin-top: 0; }
  .overview-line { padding-left: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
}