/* ============================================================
   COLORS — extracted from the Figma source (Metronic-style palette)
   Base ramps + semantic aliases. Values are the literal hexes
   found in the disinformation-monitor dashboard frames.
   ============================================================ */
:root {
  /* ---- Brand / Primary (Editorial indigo) ---- */
  --blue-50:  #EEF2FF;   /* map fill light / info surface */
  --blue-100: #E0E7FF;   /* primary badge bg */
  --blue-200: #C7D2FE;
  --blue-400: #818CF8;   /* logo "Dash", links, lighter accents */
  --blue-500: #4F46E5;   /* PRIMARY — Editorial indigo: buttons, key numbers */
  --blue-600: #4338CA;   /* hover */
  --blue-700: #3730A3;   /* press */

  /* ---- Danger (pink / red) ---- */
  --red-50:   #FFF5F8;   /* danger badge bg */
  --red-100:  #FFE2EA;
  --red-300:  #FA5A7D;   /* alert icon circle */
  --red-500:  #F1416C;   /* DANGER — alert headline, high-prob */
  --red-600:  #F8285A;   /* strong danger / pressed */

  /* ---- Success (green) ---- */
  --green-50:  #E8FFF3;  /* success badge bg */
  --green-500: #50CD89;  /* SUCCESS — low-prob, positive */
  --green-600: #17C653;  /* strong success */

  /* ---- Warning (amber) ---- */
  --amber-50:  #FFF8DD;  /* warning badge bg */
  --amber-500: #F6C000;  /* WARNING — medium-prob */
  --amber-600: #F1BC00;

  /* ---- Info (purple) ---- */
  --purple-50:  #F8F5FF; /* info badge bg */
  --purple-500: #7239EA; /* INFO */
  --purple-400: #A467DC; /* narrative line / accent */

  /* ---- Neutrals (cool gray ramp) ---- */
  --gray-900: #071437;   /* darkest heading / near-black */
  --gray-850: #000C2C;
  --gray-800: #1E293D;
  --gray-700: #252F4A;
  --gray-600: #444A6D;
  --gray-500: #78829D;   /* secondary text */
  --gray-400: #99A1B7;   /* muted / placeholder */
  --gray-300: #C4CADA;   /* disabled text / faint */
  --gray-200: #DBDFE9;   /* borders */
  --gray-150: #ECECEC;
  --gray-100: #F1F1F4;   /* hairlines / track fills */
  --gray-50:  #F9F9F9;   /* page tint */
  --white:    #FFFFFF;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-600);
  --color-primary-press:  var(--blue-700);
  --color-primary-soft:   var(--blue-100);

  --color-danger:         var(--red-500);
  --color-danger-soft:    var(--red-50);
  --color-success:        var(--green-500);
  --color-success-soft:   var(--green-50);
  --color-warning:        var(--amber-500);
  --color-warning-soft:   var(--amber-50);
  --color-info:           var(--purple-500);
  --color-info-soft:      var(--purple-50);

  /* text */
  --text-strong:   var(--gray-900);   /* headings */
  --text-body:     var(--gray-800);   /* default body */
  --text-muted:    var(--gray-500);   /* secondary */
  --text-subtle:   var(--gray-400);   /* placeholder / captions */
  --text-on-primary: var(--white);

  /* surfaces */
  --surface-page:  #F1F3F9;   /* cool blue-grey so white cards lift off the page */
  --surface-card:  var(--white);
  --surface-muted: var(--gray-100);

  /* borders */
  --border-subtle: var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
}


/* ============================================================
   TYPOGRAPHY — Inter (UI/body) + Poppins (display/headings)
   Sizes mirror the dashboard frames (24/20/15/14/13/12 px).
   ============================================================ */
:root {
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-brand:   'Nunito Sans', 'Inter', sans-serif;

  /* weights */
  --fw-regular: 400;    /* @kind font */
  --fw-medium:  500;    /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold:    700;    /* @kind font */
  --fw-extrabold: 800;  /* @kind font */

  /* type scale — headings are FLUID (clamp), mirroring Bootstrap RFS:
     full size on desktop, shrink on mobile. Body/small text (<=16px)
     stays fixed, exactly like Bootstrap's .fs-5/.fs-6. */
  --fs-display: clamp(24px, 1.325rem + 0.9vw, 32px);  /* ~Bootstrap .fs-2 (32) */
  --fs-h1:      clamp(20px, 1.275rem + 0.6vw, 24px);  /* ~Bootstrap .fs-4 (24) */
  --fs-h2:      clamp(18px, 1.20rem  + 0.3vw, 20px);  /* ~Bootstrap .fs-5 (20) */
  --fs-h3: 16px;
  --fs-title: 15px;    /* card headings (Poppins 600) */
  --fs-body: 14px;     /* default body (Inter) */
  --fs-sm: 13px;
  --fs-xs: 12px;       /* badges, captions */
  --fs-2xs: 10px;      /* axis labels */

  /* line-heights */
  --lh-tight: 1.1;   /* @kind font */
  --lh-snug: 1.3;    /* @kind font */
  --lh-normal: 1.5;  /* @kind font */

  /* letter-spacing */
  --ls-caps: 0.04em;   /* small uppercase labels (table heads) */
}


/* ============================================================
   Fonts — DashStack Disinformation Monitor
   Inter   → UI / body / data
   Poppins → headings & display
   Nunito Sans → logo wordmark + select numerics
   All three are Google Fonts (true faces, not substitutes).
   ============================================================ */
/* Fonts are loaded via <link> in the page <head> (an @import here would be
   ignored — it must precede all other rules, and the token blocks come first). */


/* ============================================================
   SPACING, RADII, SHADOWS — dashboard card system
   ============================================================ */
:root {
  /* spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* radii — observed: 4 (badge), 8 (input/btn), 12 (chip), 16/20 (cards) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* elevation — soft, low-spread card shadows */
  --shadow-card: 0px 4px 20px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0px 8px 28px rgba(0, 12, 44, 0.08);
  --shadow-pop: 0px 4px 20.6px rgba(0, 0, 0, 0.2);
  --shadow-alert: inset 0 0 0 1px rgba(241, 65, 108, 0.5), 0px 4px 20.6px rgba(0, 0, 0, 0.08);

  /* borders */
  --border-width: 1px;
}


/* base resets */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); }
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }

/* ============================================================
   PLATFORM COMPONENTS — reusable across /platform/* pages.
   Built on the design-system tokens above (--space-*, --fs-*,
   --radius-*, colour + text aliases). Mobile rules at the bottom.
   ============================================================ */

/* Page shell */
.page { min-height: 100vh; background: var(--surface-page); font-family: var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-body); }
.d-none { display: none !important; }
.contents { display: contents; }

/* Layout container — mirrors the Bootstrap .container used on the
   presentation pages (canva/style.css) so platform content lines up. */
.container { --bs-gutter-x: 1.5rem; width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-right: auto; margin-left: auto; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* Top navigation */
.nav { position: sticky; top: 0; z-index: 10; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); transition: box-shadow .2s ease; }
.nav-inner { height: 64px; display: flex; align-items: center; gap: var(--space-5); transition: height .2s ease; }
.nav.is-stuck { box-shadow: 0 6px 20px rgba(0, 12, 44, .07); }
.nav.is-stuck .nav-inner { height: 56px; }
.nav-brand { flex: 0 0 auto; text-decoration: none; display: inline-flex; align-items: center; }
.brand-logo { height: 36px; width: auto; display: block; }
.brand { display: inline-flex; align-items: center; gap: 9px; user-select: none; }
.brand-mark { width: 29px; height: 29px; display: block; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-display); font-weight: var(--fw-extrabold); letter-spacing: .01em; color: var(--text-strong); }
.brand-sub { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 9.5px; letter-spacing: .34em; color: var(--text-strong); margin: 2px 0 0 1px; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav-link { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 2px solid transparent; font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); text-decoration: none; transition: color .15s, border-color .15s; }
.nav-link:hover { color: var(--text-strong); }
.nav-link.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--fw-semibold); }
.nav-icon { font-size: var(--fs-h3); line-height: 1; }
.nav-toggle { display: none; margin-left: auto; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--text-strong); cursor: pointer; border-radius: var(--radius-sm); transition: background .15s; }
.nav-toggle:hover { background: var(--surface-muted); }

/* Eyebrow pill — small label above a heading (reusable) */
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-body); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-pill); padding: var(--space-1) 13px; }
.eyebrow-icon { font-size: 15px; line-height: 1; }

/* Hero — always themed to one domain via .hero[data-domain]. --domain-accent
   drives the title accent word and the Trending word; each value is the
   dominant colour of that domain's illustration (distinct from the pill palette). */
.hero { position: relative; padding: var(--space-6) var(--space-5); --domain-accent: var(--color-primary); }
.hero[data-domain="migration"]   { --domain-accent: #D97706; }
.hero[data-domain="climate"]     { --domain-accent: #16A34A; }
.hero[data-domain="health"]      { --domain-accent: #0284C7; }
.hero[data-domain="geopolitics"] { --domain-accent: #7C3AED; }
.hero[data-domain="politics"]    { --domain-accent: #DC2626; }
.hero[data-domain="economy"]     { --domain-accent: #A16207; }
.hero[data-domain="society"]     { --domain-accent: #DB2777; }
.hero[data-domain="science"]     { --domain-accent: #3B6BF0; }

.hero-head { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 6vw, 96px); }
.hero-copy { flex: 0 1 660px; min-width: 0; text-align: center; }
.hero-title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(28px, 1.2rem + 1.5vw, 40px); line-height: 1.15; color: var(--text-strong); text-wrap: pretty; }
.hero-accent { color: var(--domain-accent); transition: color .25s ease; }
.trend-accent { color: var(--domain-accent); font-weight: var(--fw-bold); }
.hero-lead { margin: var(--space-3) 0 0; font-size: var(--fs-title); line-height: 1.55; color: var(--text-muted); }

/* Domain illustrations flank the title as flex siblings (right is mirrored),
   scaling down with the viewport. Dropped only on phones where there's no room. */
.hero-illo { flex: 0 0 auto; width: clamp(104px, 11vw, 150px); height: auto; opacity: .55; pointer-events: none; user-select: none; }
.hero-illo--right { transform: scaleX(-1); }
.hero.is-neutral .hero-illo { display: none; }   /* no domain selected → no illustration */
@media (max-width: 640px) { .hero-illo { display: none; } }

/* Search bar */
.search { max-width: 720px; margin: var(--space-8) auto 0; }
.search-row { display: flex; align-items: center; gap: var(--space-3); }
.search-box { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--space-3); background: var(--surface-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3) var(--space-2) 18px; box-shadow: var(--shadow-card); transition: border-color .15s; }
.search-box:focus-within { border-color: var(--color-primary); }
.search-icon { flex-shrink: 0; color: var(--gray-500); font-size: 18px; display: inline-flex; }
.search-input { flex: 1 1 0; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--font-sans); font-size: var(--fs-title); color: var(--text-body); }
.search-sep { width: 1px; height: 22px; background: var(--gray-150); flex-shrink: 0; }
.search-mode { position: relative; flex-shrink: 0; }
.search-mode-btn { cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); border: 0; background: transparent; outline: none; padding: var(--space-1) 2px; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-primary); }
.search-mode-caret { font-size: var(--fs-xs); line-height: 1; transition: transform .15s ease; }
.search-mode-btn[aria-expanded="true"] .search-mode-caret { transform: rotate(180deg); }

/* Search-mode dropdown menu */
.search-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 50; width: 330px; max-width: 84vw; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.search-menu[hidden] { display: none; }
.search-option { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer; transition: background .12s ease; }
.search-option:hover { background: var(--surface-muted); }
.search-option.is-selected { background: var(--color-primary-soft); }
.search-option-icon { flex-shrink: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-size: 18px; background: var(--surface-muted); color: var(--text-muted); }
.search-option.is-selected .search-option-icon { background: var(--color-primary); color: var(--text-on-primary); }
.search-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-option-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-title); color: var(--text-strong); }
.search-option.is-selected .search-option-title { color: var(--color-primary); }
.search-option-desc { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-muted); }

/* Buttons (reusable) — scoped under .page so they don't clobber Metronic's
   .btn on the workbench page (/resultDemo), which has no .page wrapper. */
.page .btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 0; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-semibold); white-space: nowrap; text-decoration: none; transition: background .15s, box-shadow .15s; }
.btn-primary { padding: var(--space-3) var(--space-6); background: var(--color-primary); color: var(--text-on-primary); box-shadow: 0 2px 8px rgba(79, 70, 229, .3); }
.btn-primary:hover { background: var(--color-primary-hover); }

/* Chip row */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0 auto var(--space-16); max-width: 920px; }

/* Section header */
.section-head { margin-top: var(--space-12); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.section-title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h2); color: var(--text-strong); }
.section-sub { margin: var(--space-1) 0 0; font-size: var(--fs-body); color: var(--text-muted); }
.live { display: flex; align-items: center; gap: 7px; }
.live-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-success); display: inline-block; animation: live-pulse 1s ease-out infinite; }
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(80, 205, 137, .5); }
  70%  { box-shadow: 0 0 0 4px rgba(80, 205, 137, 0); }
  100% { box-shadow: 0 0 0 0 rgba(80, 205, 137, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; box-shadow: 0 0 0 3px rgba(80, 205, 137, .2); } }
.live-label { font-size: var(--fs-sm); color: var(--text-muted); }

/* Card grid + card (reusable) */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-6); }
/* Search-result cards: drop the 252px floor so cards hug content (equal height,
   still stretched by the grid) and the foot rides up close to the title. */
.page .search-grid .card { min-height: 0; }
.page .search-grid .card-foot { padding-top: var(--space-2); }

/* Explore is normal scrolling flow — the trending cards keep their fixed
   (hugged) size and do NOT stretch to fill the viewport on bigger screens. */
.page .card { display: flex; flex-direction: column; gap: var(--space-4); min-height: 252px; padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); cursor: pointer; text-decoration: none; color: inherit; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); transition: border-color .15s, box-shadow .15s; }
.page .card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card-hover); }
.card-head { display: flex; align-items: center; gap: var(--space-3); }
.page .card-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 18px; line-height: 1.4; color: var(--text-strong); text-wrap: pretty; }
.card-stats { display: flex; gap: var(--space-4); margin-top: auto; }
.stat-value { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-strong); }
.stat-label { font-size: var(--fs-sm); color: var(--text-muted); margin-left: var(--space-1); }
.card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }

/* Badge (reusable) — scoped under .page (with its modifiers) so the workbench
   page's Metronic .badge / .badge-outline keep their own styling. */
.page .badge { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; font-weight: var(--fw-semibold); font-size: var(--fs-xs); line-height: 1; padding: var(--space-2) 9px; border-radius: var(--radius-xs); background: var(--gray-100); color: var(--gray-600); }

/* Trend indicator */
.trend { display: inline-flex; align-items: center; gap: var(--space-3); }
.speedometer { display: inline-flex; flex-shrink: 0; }      /* placeholder filled by speedometer.js */
.trend svg { width: 54px; height: 35px; flex-shrink: 0; }   /* speedometer — scaled up via CSS (overrides inline size) */
.trend-text { display: flex; flex-direction: column; gap: 1px; }
.trend-label { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .07em; text-transform: uppercase; }
.trend-label.is-steady { color: #B45309; }            /* amber-700, no exact token */
.trend-label.is-rising { color: var(--color-danger); }
.trend-value { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-strong); }
.card-link { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 5px var(--space-2); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-primary); transition: background .15s; }
.card-link:hover { background: var(--color-primary-soft); }

/* Domain chips — single-select topic filters. Each carries its own colour
   (--chip / --chip-soft); unselected = white + grey, hover tints to the domain
   colour, the active one gets a leading dot + soft tinted fill. */
.domain-chip { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium); border-radius: var(--radius-pill); padding: 6px 14px; transition: color .15s, border-color .15s, background .15s; background: var(--surface-card); color: var(--text-muted); border: 1px solid var(--border-default); --chip: var(--color-primary); --chip-soft: var(--color-primary-soft); }
.domain-chip[data-domain="migration"]   { --chip: #D97706; --chip-soft: #FEF3C7; }
.domain-chip[data-domain="climate"]     { --chip: #16A34A; --chip-soft: #DCFCE7; }
.domain-chip[data-domain="health"]      { --chip: #0284C7; --chip-soft: #E0F2FE; }
.domain-chip[data-domain="geopolitics"] { --chip: #7C3AED; --chip-soft: #EDE9FE; }
.domain-chip[data-domain="politics"]    { --chip: #DC2626; --chip-soft: #FEE2E2; }
.domain-chip[data-domain="economy"]     { --chip: #A16207; --chip-soft: #FFEDD5; }
.domain-chip[data-domain="society"]     { --chip: #DB2777; --chip-soft: #FCE7F3; }
.domain-chip[data-domain="science"]     { --chip: #3B6BF0; --chip-soft: #E0E7FF; }
.domain-chip:not(.is-selected):hover { border-color: var(--chip); color: var(--chip); }
.domain-chip:focus-visible { outline: 2px solid var(--chip); outline-offset: 2px; }
.domain-chip.is-selected { color: var(--chip); border-color: var(--chip); background: var(--chip-soft); box-shadow: var(--shadow-card); }
.domain-chip.is-selected::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--chip); flex-shrink: 0; }

/* ---- Responsive: tablet 2-up ---- */
@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Mobile (<=640px) — single column, tighter spacing, icon-only nav ---- */
@media (max-width: 640px) {
  .container { --bs-gutter-x: 1.5rem; }   /* tighter side padding on phones */
  .nav-inner { height: 56px; gap: var(--space-3); }
  .nav.is-stuck .nav-inner { height: 52px; }
  .brand-logo { height: 30px; }
  .nav-toggle { display: inline-flex; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: var(--space-2); background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); box-shadow: 0 12px 24px rgba(0, 12, 44, .10); display: none; }
  .nav-links.is-open { display: flex; }
  .nav-link { padding: var(--space-3); border-bottom: 0; border-radius: var(--radius-sm); }
  .nav-link.is-active { border-bottom: 0; background: var(--color-primary-soft); }
  .hero { padding: var(--space-6) var(--space-4) var(--space-8); }
  /* Domain pills: one horizontally-scrollable row instead of wrapping */
  .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--bs-gutter-x) * -.5) var(--space-8); padding: 4px 0 10px; scroll-padding: 0; }
  .chips::-webkit-scrollbar { display: none; }
  .domain-chip { flex: 0 0 auto; }
  .search-row { flex-wrap: wrap; }
  .btn-primary { width: 100%; }
  .section-head { margin-top: var(--space-8); }
  .card-grid { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-5); }
  .card { min-height: 0; padding: var(--space-5); }
  .card-title { font-size: 16px; }
}

/* ============================================================
   NARRATIVE PAGE — /platform/narrative
   Reuses shared components (nav, container, badge, card, trend,
   stat-*, section-title); below are the narrative-specific bits.
   ============================================================ */
.nr-wrap { padding-top: var(--space-8); padding-bottom: var(--space-12); }
.nr-wrap .section-title { font-size: 18px; }   /* narrative panel headings are 16–18px in the design, not 20px */
.nr-back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-muted); text-decoration: none; margin-bottom: var(--space-5); transition: color .15s; }
.nr-back:hover { color: var(--color-primary); }

/* coloured topic badge variant */
.page .badge-primary { background: var(--color-primary-soft); color: var(--color-primary); }
.page .badge-danger { background: var(--red-50); color: var(--color-danger); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--fw-bold); }

/* header */
.nr-header { position: relative; background: linear-gradient(to right, #fff 83%, #FFE2E5 100%); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 34px 210px 34px 36px; display: flex; align-items: center; min-height: 168px; overflow: visible; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); margin-bottom: var(--space-5); }
.nr-header-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.nr-title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(23px, 2.3vw, 33px); line-height: 1.25; color: var(--text-strong); text-wrap: pretty; }
.nr-illo { position: absolute; right: -24px; bottom: 0; width: 195px; height: auto; display: block; border-bottom-right-radius: 12px; filter: drop-shadow(-4px 8px 12px rgba(0, 0, 0, .18)); }

/* panels (white cards) */
.panel { background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; padding: var(--space-6); box-shadow: 0 2px 8px rgba(0, 0, 0, .04); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.panel-sub { margin: 3px 0 0; font-size: var(--fs-xs); color: var(--text-subtle); }
.panel-tag { font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; }
/* Where/Who card header: title + tag share the top row, subtitle spans full-width below. */
.panel-head-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.nr-spread .panel-head { flex-direction: column; align-items: stretch; gap: 0; }

/* rows / grids */
.nr-row { display: grid; gap: var(--space-5); margin-bottom: var(--space-5); }
.nr-row-keyfacts { display: flex; align-items: stretch; }
.nr-row-keyfacts > .panel { flex: 2 1 0; min-width: 0; }
.nr-row-keyfacts > .nr-aside { flex: 1 1 0; min-width: 0; }
.nr-row-2 { grid-template-columns: 1fr 1fr; }

/* key fake news list */
.fake-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fake-item { background: #EEF2FF; border-radius: 9px; padding: 10px 14px; border-left: 3px solid var(--color-primary); font-size: var(--fs-title); color: var(--text-body); }

/* stats aside */
.nr-aside { display: flex; flex-direction: column; gap: var(--space-3); justify-content: space-between; }
.nr-gauge-card { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--space-4); flex: 1 1 auto; min-height: 0; padding: var(--space-4) var(--space-5); }
.nr-gauge-svg { width: 100px; height: 64px; flex-shrink: 0; }
.nr-gauge-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.nr-gauge-text .trend-value { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--color-danger); line-height: 1; }
.nr-gauge-note { margin: 0; font-size: var(--fs-xs); line-height: 1.3; color: var(--text-muted); text-align: left; }
.nr-gauge-note strong { color: var(--color-danger); font-weight: var(--fw-bold); }
.nr-stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.nr-stat-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-1); padding: var(--space-4); }
.nr-stat-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--fs-title); margin-bottom: var(--space-1); }
.nr-stat-card .stat-value { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.nr-stat-card .stat-label { margin: 0; font-size: var(--fs-body); color: var(--text-muted); }

/* bar lists (countries) */
.spread-map { width: 100%; height: 150px; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-4); background: var(--surface-muted); }
.spread-map am-geomap { display: block; width: 100%; height: 100%; }
/* Spreading card: two columns split by a vertical divider */
.nr-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); padding: 0; margin-bottom: var(--space-6); }
.nr-spread::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 50%; width: 1px; background: var(--border-subtle); }
.nr-spread-col { padding: var(--space-6); }
.country-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.country-chip { background: var(--surface-muted); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--fs-body); color: var(--text-muted); }
.country-chip b { color: var(--text-strong); font-weight: var(--fw-bold); margin-left: 4px; }
.channel-pct { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-strong); }

.bar-list, .channel-list { display: flex; flex-direction: column; gap: var(--space-3); }
.bar-row { display: grid; grid-template-columns: 80px 1fr 40px; align-items: center; gap: var(--space-3); }
.bar-name { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-strong); }
.bar-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-muted); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--color-primary); }
.bar-val { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); text-align: right; }

/* channels */
.channel { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: #F6F6F8; border-radius: var(--radius-sm); }
.channel-rank { flex-shrink: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--color-primary); font-variant-numeric: tabular-nums; }
.channel-meta { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.channel-name { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-strong); }
.channel-sub { font-size: var(--fs-xs); color: var(--text-subtle); }

/* how it evolved */
.nr-evolve { margin-top: 20px; position: relative; background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: 12px; padding: 22px 24px; overflow: visible; display: flex; align-items: stretch; gap: var(--space-8); }
.nr-evolve-aside { flex: 0 0 225px; display: flex; flex-direction: column; }
.nr-evolve-illo { width: 220px; height: auto; margin: auto 0 -42px 0; }   /* pinned low in the aside; sits inside the left edge, bleeding down */
.nr-evolve-title { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.nr-evolve-aside .panel-sub { white-space: nowrap; }   /* keep the subtitle on one row */
/* How it evolved — trend chart. Six chronological points (date · country · %)
   shape one smooth curve; only three are marked. In this fixed-height box the
   texts are pinned to the edges — the start & latest (indigo) to the bottom,
   the peak (red) to the top — while the curve floats in the middle, each dot
   tied to its text by a dashed drop-line. The line is stretched
   (preserveAspectRatio=none), so the dots + labels are HTML overlays (dots
   stay round). Point positions are data-driven — set inline by JS in
   narrative.blade.php; appearance lives here. */
.tl-chart { position: relative; flex: 1 1 0; min-width: 0; height: 210px; margin: 0 var(--space-6) 0 var(--space-8); }
.tl-plot { position: absolute; inset: 0; }                 /* the line + dots layer; fills the chart on desktop, fixed-height on mobile */
.tl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tl-poly { fill: none; stroke: var(--blue-400); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tl-guide { position: absolute; width: 0; border-left: 1px dashed var(--blue-200); transform: translateX(-.5px); }
.tl-guide--start, .tl-guide--end { border-left-color: var(--color-primary); }   /* match the blue dots */
.tl-guide--peak { border-left-color: var(--color-danger); }                     /* match the red peak dot */
.tl-node { position: absolute; width: 13px; height: 13px; border-radius: var(--radius-pill); transform: translate(-50%, -50%); }
.tl-node--start, .tl-node--end { background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.tl-node--peak { background: var(--color-danger); box-shadow: 0 0 0 4px var(--red-50); }
.tl-mark { position: absolute; display: flex; flex-direction: column; gap: 4px; width: min(240px, 42%); }
.tl-mark--start { left: 0; text-align: left; width: 48%; }    /* each endpoint gets ~half the width so */
.tl-mark--end { right: 0; text-align: right; width: 48%; }     /* long headlines wrap short and stay inside the card */
.tl-mark--peak { flex-direction: column-reverse; width: min(520px, 56%); }   /* wide so the long peak claim wraps to few lines; edge-anchored (peak-start/peak-end) so it never spills the card; label sits above the dot, date row nearest it */
.tl-mark--peak-start { text-align: left; }   /* peak landed on the first point: align like the start, but red & up top */
.tl-mark--peak-end { text-align: right; }     /* peak landed on the last point: align like the end, but red & up top */
.tl-meta { line-height: 1.25; }                            /* date + country share one row */
.tl-date { font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--text-strong); }
.tl-place { font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.tl-place::before { content: "·"; margin: 0 6px; color: var(--text-subtle); font-weight: var(--fw-bold); }
.tl-quote { font-size: var(--fs-body); font-style: normal; font-weight: var(--fw-semibold); }   /* show the headline/quote in full — no line clamp */
.tl-quote-start, .tl-quote-end { color: var(--color-primary); }
.tl-quote-peak { color: var(--color-danger); }

/* centered section divider ("Go deeper") */
.nr-divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-6) 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.nr-divider::before, .nr-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }

/* expert workbench banner */
.workbench { margin-top: 20px; background: var(--gray-900); border-radius: 12px; padding: 24px 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; color: #fff; }
.workbench-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.workbench-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .08em; color: var(--blue-200); }
.workbench-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h2); }
.workbench-desc { margin: 4px 0 0; font-size: var(--fs-body); line-height: 1.5; color: rgba(255, 255, 255, .75); max-width: 560px; }
.btn-light { flex-shrink: 0; padding: var(--space-3) var(--space-5); background: #fff; color: var(--color-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.btn-light:hover { background: var(--blue-50); }

.nr-other-head { margin-top: var(--space-8); margin-bottom: var(--space-4); }
.nr-card-foot { margin-top: auto; justify-content: flex-end; }
/* Other-narratives cards carry no stats/speedometer, so they hug their content
   height instead of the 252px min the trending cards need. */
.nr-wrap .card { min-height: auto; }

/* ---- Narrative mobile ---- */
@media (max-width: 860px) {
  .nr-row-keyfacts { flex-direction: column; }              /* fake news full-width, stats below */
  .nr-row-keyfacts > .panel, .nr-row-keyfacts > .nr-aside { flex: 1 1 auto; }
  .nr-spread { grid-template-columns: 1fr; }                 /* where + who stack into a column */
  .nr-spread::before { display: none; }                      /* hide the vertical divider when stacked */
  .nr-spread-col + .nr-spread-col { border-left: 0; border-top: 1px solid var(--border-subtle); }
}
@media (max-width: 640px) {
  .nr-wrap { padding-top: var(--space-3); }
  .nr-title { font-size: 19px; }
  .fake-item { font-size: var(--fs-sm); padding: 9px 12px; }   /* smaller claim text on mobile */
  .nr-back { margin-bottom: var(--space-3); }
  .nr-header { padding: 16px 110px 16px 18px; min-height: 120px; }
  .nr-illo { width: 104px; right: -12px; }
  .nr-evolve { flex-direction: column; text-align: left; align-items: stretch; gap: var(--space-4); padding: var(--space-5); }
  .nr-evolve-aside { flex: 0 0 auto; width: auto; }
  .nr-evolve-illo { display: none; }                         /* no illustration on phones */
  .workbench { flex-direction: column; align-items: flex-start; padding: var(--space-5); }
  .btn-light { width: 100%; }
  /* How it evolved on mobile: the plotted line + dots sit up top in a fixed
     band, then the three points stack beneath as a list (drop-lines hidden). */
  .tl-chart { flex: none; height: auto; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .tl-plot { position: relative; flex: none; height: 90px; }
  .tl-guide { display: none; }
  .tl-mark { position: static; width: auto; text-align: left; transform: none !important; border-left: 3px solid var(--border-default); padding-left: 12px; }
  .tl-mark--start { border-color: var(--color-primary); }
  .tl-mark--peak { flex-direction: column; border-color: var(--color-danger); }
  .tl-mark--end { border-color: var(--color-primary); }
}


/* ============================================================
   WORKBENCH — graph view 3 (/resultDemo)
   Merged in from the old workbench.css. The workbench page is a
   Metronic shell (no .page wrapper), so the platform component
   rules above that share Bootstrap/Metronic names (.card/.badge/
   .btn/.card-title) are scoped under .page and never reach it.
   Every class here is uniquely prefixed `.wb-` so it can safely
   live in the same file without colliding with Metronic/Bootstrap.
   (Design tokens are the :root set at the top of this file — the
   workbench used a subset of identical values.)
   ============================================================ */

/* ---- PAGE SHELL — side padding / max-width matching the rest of the platform ---- */
.wb-container{ --wb-gutter-x:3rem; width:100%; padding-right:calc(var(--wb-gutter-x) * .5); padding-left:calc(var(--wb-gutter-x) * .5); margin-right:auto; margin-left:auto; }
@media (min-width:576px) { .wb-container{ max-width:540px; } }
@media (min-width:768px) { .wb-container{ max-width:720px; } }
@media (min-width:992px) { .wb-container{ max-width:960px; } }
@media (min-width:1200px){ .wb-container{ max-width:1240px; } }   /* Workbench-only: a touch wider than platform's 1140… */
@media (min-width:1400px){ .wb-container{ max-width:1480px; } }   /* …and 1480 vs 1320, to give the country chart room */
@media (min-width:1600px){ .wb-container{ max-width:1560px; } }   /* large screens keep widening the chart column… */
@media (min-width:1920px){ .wb-container{ max-width:1800px; } }   /* …capped at 1800 on full-HD+ so text stays readable */
/* neutralise Metronic's own horizontal content padding so the
   .wb-container gutters are the only side padding (matches platform). */
.wb-content{ padding-left:0 !important; padding-right:0 !important; }
/* page background = the platform pages' surface (--surface-page), overriding
   Metronic's .bg-light which paints a slightly different shade. */
#kt_app_body, #kt_app_page, #kt_app_main, #kt_app_content, #kt_app_content_container{ background:var(--surface-page) !important; }

/* ---- Two-column workbench grid: results (left) + views (right) ---- */
/* The results card hugs its content (no forced stretch) and sticks while the
   right column scrolls; the list only scrolls if the content would run past the
   bottom of the viewport. */
.wb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.wb-col-left{ position:sticky; top:82px; align-self:start; }
.wb-col-left .wb-narr-list{ max-height:calc(100vh - 140px); overflow-y:auto; }
/* stack on narrower screens */
@media (max-width:1199.98px){
    .wb-grid{ grid-template-columns:1fr; }
    .wb-col-left{ position:static; }
    .wb-col-left .wb-narr-list{ max-height:560px; }
}
.wb-col-right{ display:flex; flex-direction:column; gap:18px; min-width:0; }

/* ---- TOP NAVBAR (ported from the narrative page) ---- */
.wb-nav{ position:sticky; top:0; z-index:100; background:var(--surface-card); border-bottom:1px solid var(--border-subtle); font-family:var(--font-sans); transition:box-shadow .2s ease; }
.wb-nav.is-stuck{ box-shadow:0 6px 20px rgba(0,12,44,.07); }
.wb-nav-inner{ height:64px; display:flex; align-items:center; gap:20px; transition:height .2s ease; }
.wb-nav.is-stuck .wb-nav-inner{ height:56px; }
.wb-brand{ flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; text-decoration:none; user-select:none; }
.wb-brand-logo{ height:36px; width:auto; display:block; }
.wb-brand-mark{ width:29px; height:29px; display:block; flex-shrink:0; }
.wb-brand-text{ display:flex; flex-direction:column; line-height:1; }
.wb-brand-name{ font-family:var(--font-display); font-weight:800; letter-spacing:.01em; color:var(--text-strong); }
.wb-brand-sub{ font-family:var(--font-display); font-weight:700; font-size:9.5px; letter-spacing:.34em; color:var(--text-strong); margin:2px 0 0 1px; }
.wb-nav-links{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.wb-nav-link{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:2px solid transparent; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); text-decoration:none; transition:color .15s, border-color .15s; }
.wb-nav-link:hover{ color:var(--text-strong); }
.wb-nav-link.is-active{ color:var(--color-primary); border-bottom-color:var(--color-primary); font-weight:600; }
.wb-nav-ico{ font-size:16px; line-height:1; }
.wb-nav-toggle{ display:none; margin-left:auto; width:40px; height:40px; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:var(--text-strong); cursor:pointer; border-radius:8px; transition:background .15s; }
.wb-nav-toggle:hover{ background:var(--surface-muted); }

/* ---- HEADER (dark "Advanced analysis" search card) ---- */
.wb-header{ background:var(--gray-900); border-radius:12px; padding:24px 28px; margin:0 0 18px; font-family:var(--font-sans); }
.wb-header-title{ font-family:var(--font-display); font-weight:600; font-size:22px; color:#fff; margin-bottom:2px; }
.wb-header-sub{ font-size:14px; color:rgba(255,255,255,.6); line-height:1.5; margin-bottom:18px; }
.wb-header-domain{ color:#fff; font-weight:600; }   /* selected-domain accent in the sub-header */
.wb-header-search{ display:flex; gap:8px; align-items:center; }
.wb-search-box{ flex:1; display:flex; align-items:center; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.18); border-radius:10px; padding:9px 14px; gap:10px; }
.wb-search-ico{ font-size:14px; color:rgba(255,255,255,.5); flex-shrink:0; line-height:1; }
.wb-search-input{ flex:1; border:none; background:transparent; font-family:var(--font-sans); font-size:14px; color:#fff; outline:none; min-width:0; }
.wb-search-input::placeholder{ color:rgba(255,255,255,.45); }
.wb-search-btn{ cursor:pointer; flex-shrink:0; padding:10px 22px; border-radius:10px; border:none; background:var(--color-primary); color:#fff; font-family:var(--font-sans); font-size:14px; font-weight:600; white-space:nowrap; box-shadow:0 2px 8px rgba(79,70,229,.4); }
.wb-search-btn:hover{ background:var(--color-primary-hover); }

/* ---- CARD (white panel base used by the redesigned sections) ---- */
.wb-card{ background:#fff; border:1px solid var(--border-subtle); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.04); font-family:var(--font-sans); }

/* bottom call-to-action banner ("Customize your graph") — page workbench style */
.wb-cta{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin:24px 0; padding:24px 32px; border-radius:16px; background:var(--gray-900); color:#fff; font-family:var(--font-sans); }
.wb-cta-title{ font-family:var(--font-display); font-weight:600; font-size:20px; }
.wb-cta-desc{ margin:4px 0 0; font-size:14px; line-height:1.5; color:rgba(255,255,255,.75); max-width:560px; }
.wb-cta-btn{ cursor:pointer; flex-shrink:0; display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:12px; border:none; background:var(--color-primary); color:#fff; font-family:var(--font-sans); font-size:14px; font-weight:600; box-shadow:0 2px 8px rgba(79,70,229,.4); transition:background .15s; }
.wb-cta-btn:hover{ background:var(--color-primary-hover); }
.wb-cta-btn i{ font-size:16px; line-height:1; }
@media (max-width:640px){ .wb-cta{ flex-direction:column; align-items:flex-start; padding:20px; } .wb-cta-btn{ width:100%; justify-content:center; } }
/* shared card metrics so every card matches: 22px padding, 16px Poppins title, 18px gap */
.wb-card-pad{ padding:24px; }
.wb-card-title{ margin:0; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--text-strong); }
.wb-card-sub{ margin:6px 0 16px; font-size:14px; color:var(--text-muted); line-height:1.5; }
.wb-card-gap{ margin-top:18px; }
.wb-card-scroll{ max-height:400px; overflow:auto; margin-top:4px; }

/* bottom scroll shadow — shows while there's more content below, fades at the end */
.wb-scroll-host{ position:relative; }
.wb-scroll-host::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:22px; pointer-events:none; background:linear-gradient(to top, rgba(7,20,55,.06), rgba(7,20,55,0)); opacity:0; transition:opacity .18s ease; }
.wb-scroll-host.wb-has-more::after{ opacity:1; }
.wb-sr.wb-scroll-host::after{ border-radius:0 0 8px 8px; }
.wb-ch-scroll{ max-height:360px; overflow-y:auto; scrollbar-width:thin; }
/* channels: shadow spans the full card width at the card's bottom edge (not inset to the list) */
.wb-card-pad > .wb-scroll-host{ margin:0 -24px -24px; }
.wb-card-pad > .wb-scroll-host > .wb-ch-scroll{ padding:0 24px 16px; }
.wb-card-pad > .wb-scroll-host::after{ border-radius:0 0 12px 12px; }
/* channel article popover floated to <body> so the scroll never clips it */
.wb-chpop-float{ position:fixed; z-index:9999; width:280px; max-height:60vh; overflow:auto; background:#fff; border:1px solid var(--border-subtle); border-radius:8px; box-shadow:0 8px 24px rgba(0,12,44,.15); padding:10px 12px; text-align:left; font-family:var(--font-sans); }
/* channel rows: rank · domain · country/language · count */
/* channels header: title + total count */
.wb-ch-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wb-ch-total{ font-size:14px; color:var(--text-subtle); }
/* compact rows: small grey number (like the fake-news list), inline meta */
.wb-ch-list{ display:flex; flex-direction:column; gap:4px; }
.wb-ch{ display:flex; align-items:center; gap:10px; width:100%; padding:6px 10px; border-radius:6px; background:#FCFCFC; transition:background .12s; }
.wb-ch:hover{ background:#F5F7FF; }
.wb-ch:hover .wb-ch-rank{ color:var(--color-primary); }
.wb-ch-rank{ flex-shrink:0; min-width:18px; font-size:11px; font-weight:700; color:var(--text-muted); text-align:right; font-variant-numeric:tabular-nums; }
.wb-ch-meta{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wb-ch-name{ font-size:14px; font-weight:500; color:var(--text-strong); }
.wb-ch-loc{ font-size:13px; color:var(--text-subtle); }
.wb-ch-count{ flex-shrink:0; min-width:24px; text-align:right; font-size:13px; font-weight:600; color:var(--text-strong); }
/* info icon + on-hover article popover for each channel */
.wb-ch-info{ position:relative; flex-shrink:0; display:inline-flex; }
/* same as the fake-news list buttons (.wb-fnbtn): 22px bordered box, blue on row hover */
.wb-ch-ibtn{ cursor:pointer; width:26px; height:26px; border-radius:6px; border:none; background:transparent; display:flex; align-items:center; justify-content:center; color:var(--text-subtle); padding:0; transition:all .12s; }
.wb-ch-ibtn i, .wb-ch-ibtn .bi{ color:inherit; font-size:16px; line-height:1; }
.wb-ch:hover .wb-ch-ibtn{ background:#EEF2FF; color:var(--color-primary); }
.wb-ch-pop{ display:none; position:absolute; top:26px; right:0; z-index:50; width:280px; background:#fff; border:1px solid var(--border-subtle); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12); padding:10px 12px; text-align:left; }
/* .wb-ch-pop stays display:none — it's the data source for the floated popover (see JS) */
.wb-ch-pop-title{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-subtle); margin-bottom:6px; }
.wb-chpop-float, .wb-ch-pop{ counter-reset:wb-art; }
.wb-ch-pop-item{ font-size:14px; color:var(--text-body); line-height:1.4; padding:2px 0; counter-increment:wb-art; }
.wb-ch-pop-item::before{ content:counter(wb-art) ". "; }

/* interactive bar-chart statements popover (clickable links, like the map overlay) */
.wb-chart-pop{ position:fixed; z-index:9999; max-width:380px; max-height:60vh; overflow:auto; background:#fff; border:1px solid var(--border-subtle); border-radius:8px; box-shadow:0 10px 28px rgba(0,12,44,.18); padding:10px 12px; font-family:var(--font-sans); }
.wb-chart-pop-title{ font-size:13px; font-weight:700; color:var(--text-strong); margin-bottom:6px; }
.wb-chart-pop-item{ display:block; font-size:13px; color:var(--text-body); line-height:1.4; padding:4px 0; text-decoration:none; border-bottom:1px solid var(--border-subtle); }
.wb-chart-pop-item:last-child{ border-bottom:none; }
.wb-chart-pop-item:hover{ color:var(--color-primary); text-decoration:underline; }
.wb-chart-pop-more{ margin-top:4px; font-style:italic; color:var(--text-subtle); font-size:12px; }

/* ---- ? popover (hover) ---- */
.wb-pop{ position:relative; display:inline-flex; }
.wb-pop-btn{ cursor:pointer; width:18px; height:18px; border-radius:99px; border:1.5px solid var(--border-default); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--text-subtle); padding:0; font-family:var(--font-sans); font-size:11px; font-weight:700; line-height:1; }
.wb-pop-body{ display:none; position:absolute; top:24px; left:0; z-index:99; width:300px; background:#fff; border:1px solid var(--border-subtle); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.10); padding:16px; text-align:left; font-family:var(--font-sans); }
.wb-pop:hover .wb-pop-body{ display:block; }
.wb-pop-body h4{ margin:0 0 4px; font-size:14px; font-weight:700; color:var(--text-strong); }
.wb-pop-body h4 + .wb-pop-p{ margin-top:0; }
.wb-pop-p{ margin:0 0 12px; font-size:14px; color:var(--text-muted); line-height:1.5; }
.wb-pop-p:last-child{ margin-bottom:0; }
.wb-pop-p strong{ color:var(--text-strong); }

/* ---- SEARCH RESULTS (narratives panel) ---- */
.wb-sr{ overflow:hidden; }
.wb-sr-head{ padding:24px 24px 16px; border-bottom:1px solid var(--border-subtle); }
.wb-sr-head-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wb-title-wrap{ display:flex; align-items:center; gap:7px; }   /* title + ? on one row (used by both cards) */
.wb-sr-title{ margin:0; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--text-strong); }
.wb-sr-count{ font-size:14px; color:var(--text-subtle); }
.wb-sr-count strong{ color:var(--color-primary); }
.wb-sr-desc{ margin:8px 0 0; font-size:14px; color:var(--text-muted); line-height:1.5; }
.wb-sr-empty{ margin:0; padding:24px 4px; font-size:14px; color:var(--text-muted); text-align:center; }   /* shown when a search returns no narratives */
.wb-narr-list{ padding:14px 24px 24px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; scrollbar-width:thin; }

/* narrative card */
.wb-narr{ flex-shrink:0; border:1px solid var(--border-subtle); border-radius:8px; overflow:hidden; background:#fff; transition:background .15s ease, border-color .15s ease; }
.wb-narr[data-selected="1"]{ border-color:#C7D2FE; background:#EEF2FF; }   /* selected: blue border + tint */
.wb-narr-head{ cursor:pointer; display:flex; gap:11px; padding:13px 14px; align-items:flex-start; }
.wb-check{ margin-top:1px; width:18px; height:18px; flex:none; border-radius:5px; border:1.5px solid var(--border-default); display:flex; align-items:center; justify-content:center; background:#fff; position:relative; }
.wb-check-on{ position:absolute; inset:-1.5px; border-radius:5px; background:var(--color-primary); color:#fff; display:none; align-items:center; justify-content:center; }
.wb-narr[data-selected="1"] .wb-check-on{ display:flex; }
.wb-check-on i, .wb-check-on .bi{ color:#fff; }   /* checkmark stays white over the blue fill */
.wb-narr-main{ min-width:0; flex:1; }
.wb-narr-title{ font-size:14px; font-weight:600; color:var(--text-strong); line-height:1.4; }
.wb-narr-tags{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:7px; }
.wb-badge{ display:inline-flex; align-items:center; padding:2px 7px; border-radius:4px; background:#F4F4F6; font-size:11px; font-weight:500; color:#6E7191; white-space:nowrap; transition:background .15s, color .15s; }
.wb-narr[data-selected="1"] .wb-badge{ background:#C7D2FE; color:#3730A3; }
.wb-chev{ flex:none; display:inline-flex; color:var(--text-subtle); margin-top:2px; transition:transform .15s; }
.wb-narr[data-expanded="1"] .wb-chev{ transform:rotate(180deg); }

/* expandable body */
.wb-narr-body{ display:none; padding:4px 0 12px 0; background:#fff; border-top:1px solid var(--border-subtle); }
.wb-narr[data-expanded="1"] .wb-narr-body{ display:block; }
.wb-fn-label{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-subtle); margin:12px 4px 6px; padding-left: 4px; }
.wb-fn-rows{ display:flex; flex-direction:column; width:100%; }
.wb-fnrow{ display:flex; gap:9px; align-items:flex-start; padding:6px 4px; border-bottom:1px solid var(--border-subtle); width:100%; box-sizing:border-box; transition:background .12s; }
.wb-fnrow:hover{ background:#F5F7FF; }
.wb-fnrow:hover .wb-fnnum{ color:var(--color-primary); }
.wb-fnrow:hover .wb-fnbtn{ background:#EEF2FF; color:var(--color-primary); }
.wb-fnrow.wb-fnextra{ display:none; }
.wb-narr-body.wb-show-all .wb-fnextra{ display:flex; }
.wb-fnnum{ min-width:18px; font-size:11px; font-weight:700; color:var(--text-muted); flex:none; margin-top:2px; text-align:right; transition:color .12s; }
.wb-fntext{ font-size:14px; color:var(--text-body); line-height:1.3; flex:1; }
.wb-fnbtns{ display:flex; gap:4px; flex-shrink:0; margin-top:1px; }
.wb-fnbtn{ cursor:pointer; width:26px; height:26px; border-radius:6px; border:none; background:transparent; display:flex; align-items:center; justify-content:center; color:var(--text-subtle); padding:0; transition:all .12s; }
.wb-fnbtn i, .wb-fnbtn .bi{ color:inherit; font-size:14px; line-height:1; }   /* icon follows the button colour (turns blue on row hover) */
.wb-loadmore{ margin:6px 12px 0; cursor:pointer; display:flex; margin-left:auto; align-items:center; gap:5px; font-family:var(--font-sans); font-size:14px; font-weight:600; color:var(--color-primary); background:none; border:none; padding:4px 0; }
.wb-narr-body.wb-show-all .wb-loadmore{ display:none; }

/* fake-news "more info" popover — floats to <body>, opens on click of the (i) button */
.wb-fninfo-pop{ position:fixed; z-index:9999; width:260px; max-width:calc(100vw - 16px); background:#fff; border:1px solid var(--border-subtle); border-radius:8px; box-shadow:0 8px 24px rgba(0,12,44,.15); padding:14px 16px; text-align:left; font-family:var(--font-sans); }
.wb-fninfo-row{ font-size:13px; line-height:1.5; color:var(--text-body); word-break:break-word; }
.wb-fninfo-row + .wb-fninfo-row{ margin-top:3px; }
.wb-fninfo-row b{ color:var(--text-strong); font-weight:700; }

/* ---- GEOGRAPHIC SPREAD (map / chart toggle + language spread) ---- */
.wb-geo{ padding:24px; }
.wb-geo-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.wb-geo-title{ margin:0; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--text-strong); }
.wb-geo-meta{ display:flex; align-items:center; gap:14px; }
.wb-geo-count{ font-size:14px; color:var(--text-subtle); }
.wb-geo-desc{ margin:8px 0 16px; font-size:14px; color:var(--text-muted); line-height:1.5; }

/* segmented Map/Chart toggle */
.wb-seg{ display:flex; gap:3px; background:var(--gray-50); border:1px solid var(--border-subtle); border-radius:8px; padding:3px; }
.wb-seg-btn{ cursor:pointer; display:inline-flex; align-items:center; gap:6px; border:none; font-family:var(--font-sans); font-size:14px; font-weight:600; border-radius:6px; padding:6px 11px; transition:all .15s ease; background:transparent; color:var(--text-muted); }
.wb-seg-btn.is-active{ background:#fff; color:var(--color-primary); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.wb-seg-btn i, .wb-seg-btn .bi{ color:inherit; }   /* icon follows the button colour (blue when selected) */

/* map / chart view wrappers */
.wb-geo-view{ border:1px solid var(--border-subtle); border-radius:8px; overflow:hidden; background:#fff; }
.wb-geo-view--chart{ display:none; padding:16px 8px; overflow:visible; }
/* let the bar-chart statements tooltip extend past the chart box instead of being clipped */
#wb-geo-chart, #kt_countries_chart, #wb-geo-chart .apexcharts-canvas{ overflow:visible !important; }
.wb-geo-chart-note{ font-size:13px; color:var(--text-muted); margin:0 8px 6px; line-height:1.5; }
.wb-map{ width:100%; height:440px; }

/* language spread */
.wb-lang{ margin-top:28px; }
.wb-lang-head{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.wb-lang-title{ font-size:14px; font-weight:600; color:var(--text-strong); }
.wb-lang-desc{ margin:0 0 12px; font-size:14px; color:var(--text-muted); line-height:1.5; }
.wb-lang-list{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.wb-lang-chip{ display:inline-flex; align-items:center; gap:5px; background:var(--surface-muted); border-radius:6px; padding:4px 9px; cursor:pointer; transition:background .12s; }
.wb-lang-chip:hover{ background:var(--color-primary-soft); }
.wb-lang-chip:hover .wb-lang-name, .wb-lang-chip:hover .wb-lang-num{ color:var(--color-primary); }
.wb-lang-name{ font-size:12px; font-weight:500; color:var(--text-body); }
.wb-lang-num{ font-size:12px; font-weight:700; color:var(--text-strong); }
.wb-lang-pop-title{ display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-subtle); margin-bottom:6px; }

/* ---- responsive ---- */
@media (max-width:768px){
    .wb-nav-toggle{ display:inline-flex; }
    .wb-nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; margin:0; padding:8px; background:var(--surface-card); border-bottom:1px solid var(--border-subtle); box-shadow:0 12px 24px rgba(0,12,44,.10); display:none; z-index:101; }
    .wb-nav-links.is-open{ display:flex; }
    .wb-nav-link{ width:100%; justify-content:flex-start; padding:12px; border-bottom:0; border-radius:8px; }
    .wb-nav-link.is-active{ border-bottom:0; background:var(--color-primary-soft); }
}
@media (max-width:640px){
    .wb-nav-inner{ height:56px; gap:12px; }
    .wb-brand-logo{ height:30px; }
    .wb-container{ padding-left:16px; padding-right:16px; }   /* 16px gutter on mobile (was ~18px from the rem-based 3rem) */
    .wb-header{ padding:16px 16px; }
    .wb-header-search{ flex-wrap:wrap; }
    .wb-search-btn{ width:100%; }
    .wb-geo{ padding:14px 16px; }
    .wb-sr-head{ padding:16px 16px 12px; }       /* match the geographic card's tighter mobile padding */
    .wb-narr-list{ padding:10px 16px 16px; }
    /* mobile: stack the headers — title (+?) on one row, then meta below */
    .wb-sr-head-row{ flex-direction:column; align-items:flex-start; gap:6px; }
    .wb-geo-head{ flex-direction:column; align-items:flex-start; gap:10px; }
    .wb-geo-meta{ flex-direction:column; align-items:flex-start; gap:10px; }
}