/**
 * Crisis Monitor — UI Components Library
 *
 * Classes extracted from inline styles in index.html to replace
 * ad-hoc style="" attributes with semantic, token-driven classes.
 *
 * Load order (from index.html):
 *   1. design-tokens.css   variables (spacing, type, color scales)
 *   2. ui-components.css   component classes (this file)
 *   3. style.css           legacy monolith (progressively being replaced)
 *   4. cyberpunk-2027.css  theme overlay (scoped to rankings)
 *
 * Naming: BEM-lite (.component__element--modifier).
 * Utility classes: .u-* prefix.
 * State classes: .is-* prefix.
 */

/* ============================================================
   RESET + APP SHELL LAYOUT
   ------------------------------------------------------------
   Replaces the legacy style.css monolith. Paper-coloured, token-
   driven app chrome: navbar, sidebar, main, footer, mobile nav,
   AI FAB, modal base. Section-specific styles live further down.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg-canvas); color: var(--text-primary); }
h1, h2, h3, h4, h5, h6 { margin: 0; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }

.hidden { display: none !important; }

/* Navbar shell */
.navbar-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.navbar-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cp-brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.cp-brand-indicator {
  width: 10px; height: 10px; border-radius: var(--radius-full);
  background: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-primary) 20%, transparent);
}
.cp-brand-text { display: inline-flex; flex-direction: column; gap: 2px; }
.cp-brand-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.cp-brand-accent { color: var(--accent-primary); }
.cp-brand-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.sidebar-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* App layout: sidebar + main */
.app-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100vh - 120px);
}

/* Sidebar — Perplexity-inspired structure (2026-04-25):
   "+ New chat" prominent at top → primary nav (5 sections) → recent
   sessions list → workspace assets → settings at bottom.
   Each section is a .sidebar-section block with optional __label.
   On tablet (icon-only mode) the labels and section headers collapse;
   the new chat button shrinks to a + icon. */

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* "+ New chat" — primary affordance, full width below navbar gap */
.sidebar-new-chat {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: var(--space-4) var(--space-3) var(--space-2);
  padding: 10px 14px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-color, rgba(0,0,0,0.12));
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: var(--weight-medium, 500);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  min-height: 40px;
  flex-shrink: 0;
}
.sidebar-new-chat:hover {
  background: var(--bg-muted);
  border-color: var(--accent-red, #b33a3a);
  color: var(--accent-red, #b33a3a);
}
.sidebar-new-chat:active {
  transform: translateY(1px);
}
.sidebar-new-chat svg {
  flex-shrink: 0;
  color: currentColor;
}

/* Section grouping inside nav */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}
.sidebar-section + .sidebar-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}
.sidebar-section--bottom {
  margin-top: auto;
  padding-bottom: var(--space-3);
}
.sidebar-section__label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary, #6b5d4c);
  padding: 6px var(--space-3);
  margin-bottom: 2px;
}

/* RECENT — sessions list. Each item is text-only, single-line truncate,
   smaller font than primary nav. Designed to scroll inside its inner
   list when items pile up; the section itself doesn't grow with flex
   so Workspace + Settings remain visible below it on every viewport. */
.sidebar-section--recent {
  flex: 0 0 auto;
}
.sidebar-recent__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.sidebar-recent__list::-webkit-scrollbar { width: 6px; }
.sidebar-recent__list::-webkit-scrollbar-thumb {
  background: var(--border-subtle, rgba(0,0,0,0.12));
  border-radius: 3px;
}
.sidebar-recent__item {
  display: block;
  width: 100%;
  padding: 6px var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-recent__item:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}
.sidebar-recent__empty {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  padding: 6px var(--space-3);
  font-style: italic;
}
.sidebar-recent__view-all {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: 0.74rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.12s ease;
}
.sidebar-recent__view-all:hover {
  color: var(--accent-red, #b33a3a);
}

/* Tablet (769-1279px) — icon-only mode: hide labels, recent section,
   and shrink + New chat to icon only. */
@media (min-width: 769px) and (max-width: 1279px) {
  .sidebar-new-chat {
    margin: var(--space-3) var(--space-2);
    padding: 0;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-self: center;
  }
  .sidebar-new-chat__label { display: none; }
  .sidebar-section__label { display: none; }
  .sidebar-section--recent { display: none; }
  .sidebar-section + .sidebar-section {
    border-top: none;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
  }
}

/* Mobile (≤768px) — drawer: full content visible (labels + recent) */
@media (max-width: 768px) {
  .sidebar-new-chat { margin: var(--space-3); }
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-4);
  flex: 1 1 auto;
  min-height: 0;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;        /* breathing room — was var(--space-3) ≈ 8px */
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.92rem;        /* was --text-sm (~13.6px), now 14.7px — more readable */
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sidebar-item:hover { background: var(--bg-muted); color: var(--text-primary); }
.sidebar-item.active {
  background: var(--bg-muted);
  color: var(--text-primary);
  border-left-color: var(--accent-primary);
  font-weight: var(--weight-semibold);
}
.sidebar-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: currentColor;
  flex-shrink: 0;
}
.sidebar-icon svg { width: 100%; height: 100%; }
.sidebar-label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-tight);
}
.sidebar-footer { padding: var(--space-4); }

/* Main content area */
.main-content {
  padding: var(--space-5) var(--space-6);
  min-width: 0;
}
.content-section { display: none; }
.content-section.active { display: block; }

/* Language selector */
.lang-select {
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  cursor: pointer;
  letter-spacing: var(--tracking-wide);
}

/* Footer */
.app-footer {
  border-top: 1px solid var(--border-color);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
}
.footer-main {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.footer-contact, .footer-legal {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.footer-tagline {
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-medium);
}

/* Mobile bottom nav */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0));
  background: color-mix(in oklab, var(--bg-canvas) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-top: 1px solid var(--border-color);
  justify-content: space-around;
  z-index: var(--z-sticky, 200);
}
.bottom-nav-item {
  background: transparent; border: none;
  padding: var(--space-2);
  color: var(--text-tertiary);
  cursor: pointer;
}
.bottom-nav-item svg { width: 22px; height: 22px; }
.bottom-nav-item.active { color: var(--accent-primary); }

/* AI FAB */
.ai-fab {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-sticky, 200);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in oklab, var(--accent-primary) 30%, var(--border-color));
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  color: #fff;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    0 8px 24px rgb(26 24 21 / 0.18);
  font-weight: var(--weight-semibold);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ai-fab:hover { transform: translateY(-2px); }
.ai-fab svg { width: 20px; height: 20px; }
.fab-label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

/* AI modal (base shell) */
.ai-modal {
  position: fixed;
  /* Leave the left sidebar visible behind/beside the modal so the
     navigation icons stay reachable. Inset-left matches the sidebar
     width per breakpoint:
       - desktop (≥1280px): 240px sidebar
       - tablet (769-1279px): 64px icon-only sidebar
       - mobile (≤768px): sidebar is a drawer, modal goes full-width */
  inset: 56px 0 0 240px;
  z-index: var(--z-modal, 500);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
@media (min-width: 769px) and (max-width: 1279px) {
  .ai-modal { inset: 56px 0 0 64px; }
}
@media (max-width: 768px) {
  .ai-modal { inset: 0; }
}
.ai-modal.hidden { display: none; }
.ai-modal-backdrop {
  position: absolute; inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ai-modal-content {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.ai-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-color);
}
.ai-modal-header h2 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.ai-modal-close {
  background: none; border: none;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  font-size: 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ai-modal-close:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}
.ai-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}

/* Loading spinner */
.loading-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: var(--radius-full);
  animation: ui-spin 780ms linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* Responsive — collapse sidebar */
/* TABLET (769-1279px) — icon-only sidebar in grid, no drawer, no bottom-nav.
   The drawer + bottom-nav pattern is phone-only. iPad portrait/landscape
   gets a persistent 64px icon column with hover/focus tooltip. */
@media (min-width: 769px) and (max-width: 1279px) {
  .app-layout { grid-template-columns: 64px 1fr; max-width: none; }
  .sidebar {
    position: relative;
    width: 64px;
    transform: none;
    border-right: 1px solid var(--border-subtle);
  }
  .sidebar-nav { padding: var(--space-3) var(--space-2); }
  .sidebar-item {
    justify-content: center;
    padding: 14px 12px;
    border-left: none;
    border-radius: var(--radius-md);
    min-height: 48px;
    position: relative;
  }
  .sidebar-item.active {
    background: color-mix(in oklab, var(--accent-primary) 10%, transparent);
    border-left: none;
  }
  .sidebar-icon { width: 22px; height: 22px; }
  .sidebar-label { display: none; }
  .sidebar-divider__label { display: none; }
  .sidebar-divider { padding: var(--space-2) 0; text-align: center; }
  .sidebar-toggle { display: none; }
  .mobile-bottom-nav { display: none; }
  .main-content { padding: var(--space-4) var(--space-5); max-width: none; }
  .navbar-content { padding: 0 var(--space-4); }

  /* Tooltip for icon-only sidebar — hover/focus reveals the label.
     Uses aria-label as the source so a11y and visual stay in sync. */
  .sidebar-item[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--text-primary);
    color: var(--bg-canvas, #faf6ec);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  .sidebar-item:hover[aria-label]::after,
  .sidebar-item:focus-visible[aria-label]::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* MOBILE (≤768px) — drawer + bottom-nav. Phone-only layout. */
@media (max-width: 768px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; bottom: 0;
    left: 0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    z-index: var(--z-modal, 500);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; }
  /* Reserve space at the bottom of main-content equal to the fixed
     bottom-nav height (padding 8 + svg 22 + padding 8 ≈ 38px) plus the
     iPhone home-indicator safe-area inset. Without this, the inline
     "Ask Argus" chat bar and the bottom of the main content disappear
     under the bottom-nav. 72px is a conservative ceiling that handles
     every current device. */
  .main-content {
    padding: var(--space-4);
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }
  .mobile-bottom-nav { display: flex; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
/* No !important — JS that sets element.style.display = 'block'
   must be able to override the hidden state via inline style. */
.is-hidden          { display: none; }
.is-invisible       { visibility: hidden; }

.u-mb-sm            { margin-bottom: var(--space-2); }
.u-mb-md            { margin-bottom: var(--space-4); }
.u-mb-lg            { margin-bottom: var(--space-5); }
.u-mb-section       { margin-bottom: var(--space-6); } /* gap between major page blocks (32px) */
.u-mt-sm            { margin-top: var(--space-2); }
.u-mt-md            { margin-top: var(--space-4); }

.u-flex-between     { display: flex; justify-content: space-between; align-items: center; }
.u-flex-gap-sm      { display: flex; gap: var(--space-2); }
.u-flex-gap-md      { display: flex; gap: var(--space-4); }

/* ============================================================
   NEWS FILTER HINT (Overview › Latest News header)
   ============================================================ */
.news-filter-hint {
  display: none;
  font-size: 0.68rem;
  color: var(--text-tertiary);
  margin-left: var(--space-2);
  align-self: center;
}
.news-filter-hint.is-visible { display: inline; }

/* ============================================================
   DAILY BRIEF (Overview › Daily Brief card)
   ------------------------------------------------------------
   AI-generated daily crisis synthesis. Teal accent = editorial.
   ============================================================ */
.daily-brief {
  /* Padding: vertical var(--space-5) 24px = breathing room around editorial prose.
     Horizontal var(--space-5) same for uniform feel. */
  padding: var(--space-5) var(--space-5);
  border-left: 3px solid var(--accent-teal);
}

.daily-brief__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.daily-brief__label,
.daily-brief__deep-dive-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--accent-teal);
  font-weight: var(--weight-semibold);
}

.daily-brief__date {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.daily-brief__headline {
  /* Journalist-first: citable hero sentence. text-md 18px/snug reads well
     on single-line and wraps cleanly on 2-3 lines without feeling cramped. */
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.daily-brief__body {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.daily-brief__body > p               { margin-bottom: var(--space-3); }
.daily-brief__body > p:last-child    { margin-bottom: 0; }

.daily-brief__watch {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
}

.daily-brief__watch-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}

.daily-brief__watch-items {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.daily-brief__deep-dive {
  display: none;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}
.daily-brief__deep-dive.is-visible { display: block; }

.daily-brief__deep-dive-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.daily-brief__deep-dive-label {
  letter-spacing: var(--tracking-widest);
}

.daily-brief__deep-dive-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.daily-brief__deep-dive-close:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

.daily-brief__deep-dive-headline {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.daily-brief__deep-dive-body {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.daily-brief__deep-dive-body > p             { margin-bottom: var(--space-2); }
.daily-brief__deep-dive-body > p:last-child  { margin-bottom: 0; }

/* ============================================================
   SECTION-LEVEL DESCRIPTIVE PARAGRAPH
   Used under section headers ("Per-dimension rankings of..." etc.)
   ============================================================ */
.section-desc {
  color: var(--text-secondary);
  font-size: 0.82rem;
  margin-bottom: var(--space-4);
  max-width: 860px;
  line-height: 1.55;
}

/* ============================================================
   RANKINGS FILTER BAR (Countries section)
   ------------------------------------------------------------
   Search input · urgency chips · result count.
   Replaces ~40 inline styles on the filter row.
   ============================================================ */
.rankings-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.rankings-search {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}

.rankings-search__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.rankings-search__input {
  width: 100%;
  padding: var(--space-2) 30px var(--space-2) 32px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--cp-mono, inherit);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.rankings-search__input:focus,
.rankings-search__input:focus-visible {
  border-color: var(--accent-teal);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-teal) 10%, transparent);
}

.rankings-search__clear {
  display: none;
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  line-height: 1;
}
.rankings-search__clear.is-visible { display: inline-block; }

/* Urgency chips — shared base + per-severity color accents */
.urgency-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.urgency-chip {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--cp-mono, inherit);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-semibold);
  transition: all var(--transition-fast);
}
.urgency-chip:hover {
  border-color: var(--border-strong, color-mix(in oklab, var(--text-primary) 20%, transparent));
  color: var(--text-primary);
}
.urgency-chip.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-strong, color-mix(in oklab, var(--text-primary) 20%, transparent));
}

.urgency-chip--red {
  background: color-mix(in oklab, var(--status-critical) 8%, transparent);
  border-color: color-mix(in oklab, var(--status-critical) 30%, transparent);
  color: var(--status-critical);
  font-weight: 700;
}
.urgency-chip--red:hover,
.urgency-chip--red.active {
  background: color-mix(in oklab, var(--status-critical) 18%, transparent);
  border-color: color-mix(in oklab, var(--status-critical) 50%, transparent);
}

.urgency-chip--orange {
  background: color-mix(in oklab, var(--status-high) 8%, transparent);
  border-color: color-mix(in oklab, var(--status-high) 30%, transparent);
  color: var(--status-high);
  font-weight: 700;
}
.urgency-chip--orange:hover,
.urgency-chip--orange.active {
  background: color-mix(in oklab, var(--status-high) 18%, transparent);
  border-color: color-mix(in oklab, var(--status-high) 50%, transparent);
}

.urgency-chip--critical {
  background: color-mix(in oklab, var(--status-critical) 8%, transparent);
  border-color: color-mix(in oklab, var(--status-critical) 30%, transparent);
  color: var(--status-critical);
  font-weight: 700;
}
.urgency-chip--critical:hover,
.urgency-chip--critical.active {
  background: color-mix(in oklab, var(--status-critical) 18%, transparent);
  border-color: color-mix(in oklab, var(--status-critical) 50%, transparent);
}

.rankings-filter-count {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   LOADING ROW (table / tab-pane empty states)
   ============================================================ */
.loading-row {
  /* Skeleton-style loader. Text inside (e.g. "Loading rankings…")
     stays for a11y / screen readers but is visually replaced by the
     shimmering background block. Replaces the previous bare-text
     "Loading…" placeholder which felt low-effort. */
  position: relative;
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(90deg,
      color-mix(in oklab, var(--text-primary) 5%, transparent) 0%,
      color-mix(in oklab, var(--text-primary) 9%, transparent) 50%,
      color-mix(in oklab, var(--text-primary) 5%, transparent) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
  color: transparent;
  min-height: 64px;
  margin: var(--space-3) 0;
  user-select: none;
}

/* ============================================================
   REGIONAL PULSE (Countries section hotspot loader)
   ============================================================ */
.regional-pulse-loading {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* ============================================================
   SECTION HEAD — icon · title · right-aligned subtitle
   ------------------------------------------------------------
   Used above Strategic Outlook, Nowcast, and other Intelligence
   subsections. Replaces 3 inline-styled wrapper divs each.
   ============================================================ */
.section-head {
  margin-bottom: var(--space-3);
}

.section-head__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-head__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.section-head__subtitle {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   STRATEGIC OUTLOOK (Intelligence › Predictive Analysis)
   ------------------------------------------------------------
   Empty state and filled card, with color-coded subsections
   (conflict · food · economic · humanitarian · emerging · etc).
   Amber accent throughout.
   ============================================================ */
.outlook-empty {
  margin-bottom: var(--space-4);
  padding: var(--space-5) var(--space-5);
  border-left: 3px solid color-mix(in oklab, var(--accent-orange) 30%, transparent);
  text-align: center;
}

.outlook-empty__text {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-normal);
}

.outlook-empty__cta {
  padding: var(--space-2) var(--space-4);
  background: #f59e0b;
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  transition: background var(--transition-fast);
}
.outlook-empty__cta:hover { background: #fbbf24; }

.outlook-card {
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-5);
  border-left: 3px solid #f59e0b;
  display: none; /* JS sets display:block when data arrives */
}
.outlook-card.is-visible { display: block; }

.outlook-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.outlook-card__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: #f59e0b;
  font-weight: var(--weight-semibold);
}

.outlook-card__date {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.outlook-card__divider {
  padding-top: var(--space-4);
  border-top: 2px solid #f59e0b;
}
.outlook-card__divider--subtle {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}
.outlook-card__divider--subtle-top {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
}

.outlook-card__scan-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.outlook-card__methodology {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Outlook subsection (Conflict/Food/Economic/Humanitarian/etc) */
.outlook-sub {
  margin-bottom: var(--space-4);
}

.outlook-sub__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  letter-spacing: var(--tracking-tight);
}
.outlook-sub__title--conflict      { color: var(--accent-red); }
.outlook-sub__title--food          { color: #f59e0b; }
.outlook-sub__title--economic      { color: #60a5fa; }
.outlook-sub__title--humanitarian  { color: var(--accent-teal); }
.outlook-sub__title--amber         { color: #f59e0b; }
.outlook-sub__title--neutral       { color: var(--text-primary); }
.outlook-sub__title--escalation    { color: var(--accent-red); }

.outlook-sub__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}
.outlook-sub__text--multiline {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  white-space: pre-line;
}

/* ============================================================
   NOWCAST (Intelligence › 90-day ML forecast)
   ============================================================ */
.nowcast-container {
  margin-bottom: var(--space-6);
}

.nowcast-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.nowcast-status {
  font-size: var(--text-xs);
}

.nowcast-confidence-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.nowcast-brief {
  display: none;
  margin-bottom: var(--space-4);
}
.nowcast-brief.is-visible { display: block; }

.nowcast-brief__card {
  padding: var(--space-4) var(--space-4);
  border-left: 3px solid var(--accent-teal);
}

.nowcast-brief__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--accent-teal);
  font-weight: var(--weight-semibold);
}

.nowcast-brief__headline {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin: var(--space-2) 0 var(--space-2);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.nowcast-brief__body {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.nowcast-brief__body p              { margin-bottom: var(--space-2); }
.nowcast-brief__body p:last-child   { margin: 0; }

.nowcast-table-wrap {
  overflow-x: auto;
}

.nowcast-table {
  width: 100%;
  font-size: var(--text-sm);
}

.nowcast-table__loading {
  text-align: center;
  padding: var(--space-6);
  color: var(--text-tertiary);
}

/* ============================================================
   TOPIC REPORT OUTPUT (Intelligence › Generated brief)
   ============================================================ */
.topic-report-output {
  display: none;
  margin-top: var(--space-5);
}
.topic-report-output.is-visible { display: block; }

/* Btn-loading inline spinner toggle */
.btn-loading { display: none; }
.btn-text    { display: inline; }
.is-loading .btn-loading { display: inline; }
.is-loading .btn-text    { display: none; }

/* ============================================================
   REPORT COMMUNITY (reactions bar under a generated report)
   ============================================================ */
.report-community {
  margin-top: var(--space-4);
}

.reactions-bar {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-color);
}

.reaction-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.reaction-btn:hover {
  border-color: var(--border-strong, color-mix(in oklab, var(--text-primary) 20%, transparent));
  color: var(--text-primary);
}
.reaction-btn.is-active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-strong, color-mix(in oklab, var(--text-primary) 20%, transparent));
}

/* ============================================================
   RECENT SOURCES CARD (Intelligence › ReliefWeb feed at bottom)
   ============================================================ */
.sources-card {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
}

.sources-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.sources-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.sources-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sources-card__source-name {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.sources-card__link {
  font-size: var(--text-xs);
}

.sources-card__loading {
  font-size: var(--text-sm);
}

/* ============================================================
   MARKETS SECTION (experimental commodity signals)
   ============================================================ */
.markets-header {
  margin-bottom: var(--space-3);
}

.badge--experimental {
  font-size: var(--text-xs);
  background: color-mix(in oklab, var(--accent-orange) 15%, transparent);
  color: #f59e0b;
}

.markets-headline {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-4);
  border-left: 3px solid #f59e0b;
}

.markets-headline__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

.markets-loading {
  text-align: center;
  padding: var(--space-7);
  color: var(--text-tertiary);
}

/* ============================================================
   REPORT NARRATIVE (hidden until JS populates)
   ============================================================ */
.report-narrative-hidden {
  display: none;
}
.report-narrative-hidden.is-visible {
  display: block;
}

/* ============================================================
   NAVBAR AUTH (top-right sign-in + user menu)
   ============================================================ */
.lang-selector-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.auth-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  z-index: var(--z-dropdown, 100);
}

.auth-login-btn {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.auth-login-btn:hover { background: var(--bg-tertiary); }

.auth-user-info {
  display: none;
  align-items: center;
  gap: var(--space-2);
}
/* JS toggles via style.display = 'flex'; keep BEM state for parity */
.auth-user-info.is-visible { display: flex; }

/* Wraps photo + name into a single clickable link to /me */
.auth-profile-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.auth-profile-link:hover {
  background: var(--bg-tertiary);
}

.auth-user-photo {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}

.auth-user-name {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-logout-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.auth-logout-btn:hover { color: var(--text-secondary); }

/* ============================================================
   TAB NAV MODIFIER (wrap)
   ============================================================ */
.tab-nav--wrap {
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   HAZARDS HEADER (slightly smaller h2 inside section-header-bar)
   ============================================================ */
.section-header-bar--compact h2 {
  font-size: var(--text-base);
  letter-spacing: var(--tracking-tight);
}

/* ============================================================
   COUNTRY BRIEF (modal: AI modal inner panels)
   ============================================================ */
.cb-scores {
  display: none;
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}
.cb-scores.is-visible { display: block; }

.cb-scores__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.cb-scores__country-name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.cb-scores__badge {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.cb-scores__metrics {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.cb-scores__metric--conflict strong { color: var(--accent-red); }
.cb-scores__metric--food strong     { color: var(--accent-orange); }
.cb-scores__metric--climate strong  { color: var(--accent-teal); }
.cb-scores__metric--economic strong { color: var(--text-secondary); }

.cb-content {
  display: none;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.cb-content.is-visible { display: block; }

.cb-content__loading {
  text-align: center;
  padding: var(--space-5);
  color: var(--text-tertiary);
}

.cb-content__sections {
  display: none;
}
.cb-content__sections.is-visible { display: block; }

/* ============================================================
   ARGUS CHAT (modal conversational panel)
   ============================================================ */
.argus-chat {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.argus-chat.is-visible { display: flex; }

.argus-chat__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-2);
}

.argus-chat__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--accent-purple);
  font-weight: var(--weight-semibold);
}

.argus-chat__header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.argus-chat__history-btn {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  color: var(--text-secondary, var(--text-tertiary));
  background: var(--bg-canvas);
  border: 1px solid color-mix(in oklab, var(--text-primary) 12%, transparent);
  border-radius: 9999px;
  padding: 6px 12px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.argus-chat__history-btn:hover {
  background: color-mix(in oklab, var(--accent-teal) 8%, transparent);
  color: var(--accent-teal);
  border-color: color-mix(in oklab, var(--accent-teal) 35%, transparent);
  transform: translateY(-1px);
}
.argus-chat__history-btn:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}
.argus-chat__history-btn svg { display: block; }

.argus-chat__body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  position: relative;
}
.argus-chat__body > .argus-chat__messages { flex: 1 1 auto; }

/* Conversations history sidebar — overlay style, slides from left
   over the messages area without pushing layout. Mobile: full
   takeover so the user always has room to read titles. */
.argus-history-sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(300px, 80%);
  background: var(--bg-canvas);
  border-right: 1px solid color-mix(in oklab, var(--text-primary) 10%, transparent);
  z-index: 5;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 16px color-mix(in oklab, var(--text-primary) 4%, transparent);
}
.argus-history-sidebar[hidden] { display: none; }

.argus-history-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid color-mix(in oklab, var(--text-primary) 8%, transparent);
}
.argus-history-sidebar__title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug, -0.005em);
  color: var(--text-primary);
}
.argus-history-sidebar__close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 18px;
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.argus-history-sidebar__close:hover {
  background: color-mix(in oklab, var(--text-primary) 6%, transparent);
  color: var(--text-primary);
}

.argus-history-sidebar__list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.argus-history-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  width: 100%;
}
.argus-history-item:hover {
  background: color-mix(in oklab, var(--accent-teal) 6%, transparent);
  border-color: color-mix(in oklab, var(--accent-teal) 25%, transparent);
}
.argus-history-item:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}
.argus-history-item__title {
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.argus-history-item__meta {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}

.argus-history-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .argus-history-sidebar { width: 100%; }
}

.argus-chat__new-btn {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  color: var(--text-secondary, var(--text-tertiary));
  background: var(--bg-canvas);
  border: 1px solid color-mix(in oklab, var(--text-primary) 12%, transparent);
  border-radius: 9999px;
  padding: 6px 14px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.argus-chat__new-btn:hover {
  background: color-mix(in oklab, var(--accent-teal) 8%, transparent);
  color: var(--accent-teal);
  border-color: color-mix(in oklab, var(--accent-teal) 35%, transparent);
  transform: translateY(-1px);
}
.argus-chat__new-btn:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}

.argus-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Argus chat input — same Perplexity-grade box as the side panel.
   Field + send button live inside one bordered container with visible
   contour, generous padding, and subtle elevation. */
.argus-chat__input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  padding: 8px 8px 8px 18px;
  border: 1.5px solid color-mix(in oklab, var(--text-primary) 18%, transparent);
  border-radius: 16px;
  background: var(--bg-canvas, #fffbf0);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.02),
    0 4px 16px rgba(0,0,0,0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  min-height: 60px;
}
.argus-chat__input-bar:focus-within {
  border-color: color-mix(in oklab, var(--text-primary) 32%, transparent);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.03),
    0 6px 24px rgba(0,0,0,0.08);
}

.argus-chat__input {
  flex: 1;
  padding: 6px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-primary);
  font-size: 1rem;
  outline: none;
}
.argus-chat__input::placeholder {
  color: color-mix(in oklab, var(--text-primary) 40%, transparent);
}

.argus-chat__send {
  /* Circular icon-style send button (Perplexity / ChatGPT pattern).
     Minimal text; on hover/focus the accent fills. Sized to match the
     inner padding of the wrapping input-bar so it sits flush right. */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--accent-red, #b33a3a);
  color: white;
  border: none;
  border-radius: 50%;
  font-weight: var(--weight-semibold);
  font-size: 0;            /* hide text label, render via CSS arrow */
  cursor: pointer;
  white-space: nowrap;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.argus-chat__send::before {
  content: "→";
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
}
.argus-chat__send:hover { filter: brightness(0.94); transform: translateY(-1px); }
.argus-chat__send-text {
  /* Visually hidden — screen readers read "Send"; visual is arrow glyph. */
  position: absolute;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* ============================================================
   MODAL CONTENT WIDTH MODIFIERS
   ============================================================ */
.ai-modal-content--md { max-width: 820px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-sep {
  margin: 0 var(--space-2);
  color: var(--text-tertiary);
}
.footer-email {
  color: var(--text-tertiary);
}

/* ============================================================
   PROFILE PAGE (/u/{handle})
   ------------------------------------------------------------
   Server-rendered public profile. Strato 2 of the social stack:
   identity + reputation + (future) ancored activity feed.
   ============================================================ */
.profile-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
}

.profile-back-link {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.profile-back-link:hover { color: var(--text-primary); }

.profile-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
}

.profile-header {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
  object-fit: cover;
}

.profile-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.profile-identity {
  flex: 1;
  min-width: 0;
}

.profile-identity__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.profile-name {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.profile-verified {
  font-size: var(--text-xs);
  color: var(--accent-teal);
  border: 1px solid var(--accent-teal);
  background: var(--accent-muted, color-mix(in oklab, var(--accent-teal) 8%, transparent));
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-semibold);
}

.profile-tier {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.profile-tier--pro {
  color: #f59e0b;
  background: color-mix(in oklab, var(--accent-orange) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent-orange) 30%, transparent);
}
.profile-tier--admin {
  color: var(--accent-purple, var(--accent-purple));
  background: color-mix(in oklab, var(--accent-purple) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent-purple) 30%, transparent);
}

.profile-handle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: var(--space-1);
}

.profile-bio {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: var(--space-3) 0 0;
  max-width: 50ch;
}

.profile-stats {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin: 0 0 var(--space-5);
}

.profile-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.profile-stat dt {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-medium);
}

.profile-stat dd {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin: 0;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.profile-activity {
  /* Activity feed slot — Strato 3 (annotations / forecasts / lists)
     plugs in here once those features ship. */
}

.profile-activity__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-tight);
}

.profile-activity--empty .profile-activity__empty-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-tertiary);
  margin: 0;
  max-width: 60ch;
}

/* Not-found variant */
.profile-card--empty {
  text-align: center;
  padding: var(--space-7) var(--space-5);
}

.profile-empty-title {
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-tight);
}

.profile-empty-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-5);
}

.profile-empty-cta {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.profile-empty-cta:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-strong, color-mix(in oklab, var(--text-primary) 20%, transparent));
}

/* ============================================================
   PROFILE EDIT AFFORDANCE + FORM
   ------------------------------------------------------------
   The "Edit profile" button is rendered into the header and kept
   .is-hidden server-side; client JS reveals it only when the
   authenticated user owns the profile.
   ============================================================ */
.profile-edit-btn {
  align-self: flex-start;
  margin-left: auto;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.profile-edit-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-strong, color-mix(in oklab, var(--text-primary) 20%, transparent));
}

.profile-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-color);
  margin-top: var(--space-5);
}

.profile-edit-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-edit-form__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
}

.profile-edit-form__optional {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-tertiary);
  font-weight: var(--weight-normal);
}

.profile-edit-form__handle-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.profile-edit-form__handle-wrap:focus-within {
  border-color: var(--accent-teal);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-teal) 10%, transparent);
}

.profile-edit-form__handle-prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  background: var(--bg-muted, var(--bg-elevated));
  border-right: 1px solid var(--border-color);
}

.profile-edit-form__input,
.profile-edit-form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: none;
  outline: none;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}

.profile-edit-form__input {
  background: transparent;
}

.profile-edit-form__textarea {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  resize: vertical;
  min-height: 84px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.profile-edit-form__textarea:focus,
.profile-edit-form__textarea:focus-visible {
  border-color: var(--accent-teal);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-teal) 10%, transparent);
}

.profile-edit-form__hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.profile-edit-form__hint code {
  font-family: var(--font-mono);
  background: var(--bg-tertiary);
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
}

.profile-edit-form__error {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--status-critical) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--status-critical) 30%, transparent);
  color: var(--status-critical);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.profile-edit-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.profile-edit-form__btn {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
.profile-edit-form__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.profile-edit-form__btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-color);
}
.profile-edit-form__btn--ghost:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--border-strong, color-mix(in oklab, var(--text-primary) 20%, transparent));
}

.profile-edit-form__btn--primary {
  background: var(--accent-teal);
  color: var(--bg-primary);
}
.profile-edit-form__btn--primary:hover:not(:disabled) {
  opacity: 0.9;
}

/* ============================================================
   ANNOTATIONS (Strato 3)
   ------------------------------------------------------------
   Anchored community notes. Rendered inside the country detail
   modal AND on /u/{handle} profile activity feed.
   ============================================================ */
.annotations-section {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-color);
}

.annotations-section__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.annotations-section__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.annotations-section__count {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
}

/* Form */
.annotation-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.annotation-form__textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  resize: vertical;
  min-height: 56px;
  outline: none;
  transition: border-color var(--transition-fast);
}
.annotation-form__textarea:focus,
.annotation-form__textarea:focus-visible {
  border-color: var(--accent-teal);
}

.annotation-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.annotation-form__hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.annotation-form__hint a {
  color: var(--accent-teal);
  text-decoration: none;
}
.annotation-form__hint a:hover { text-decoration: underline; }

.annotation-form__submit {
  padding: var(--space-2) var(--space-4);
  background: var(--accent-teal);
  color: var(--bg-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.annotation-form__submit:hover:not(:disabled) { opacity: 0.9; }
.annotation-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.annotation-form__error {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--status-critical) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--status-critical) 30%, transparent);
  color: var(--status-critical);
  font-size: var(--text-xs);
}

/* Gate (not signed in, or no handle) */
.annotations-form-gate {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}
.annotations-form-gate a,
.annotation-gate-link {
  color: var(--accent-teal);
  text-decoration: none;
}
.annotations-form-gate a:hover,
.annotation-gate-link:hover { text-decoration: underline; }

/* List */
.annotations-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.annotation-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  align-items: flex-start;
}

.annotation-item--profile {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  padding: var(--space-3) 0;
}
.annotation-item--profile:last-child { border-bottom: none; }

/* Optimistic-UI state: dimmed while server is confirming. */
.annotation-item--pending {
  opacity: 0.55;
  position: relative;
}
.annotation-item--pending::after {
  content: 'sending…';
  position: absolute;
  top: var(--space-1);
  right: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: italic;
  letter-spacing: var(--tracking-wide);
}

.annotation-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
  object-fit: cover;
}
.annotation-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.annotation-body {
  flex: 1;
  min-width: 0;
}

.annotation-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  flex-wrap: wrap;
}

.annotation-handle {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}
.annotation-handle:hover { color: var(--accent-teal); }

.annotation-handle-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.annotation-time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.annotation-target {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--accent-teal);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
}
.annotation-target:hover { text-decoration: underline; }

.annotation-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.annotation-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.annotation-item:hover .annotation-actions,
.annotation-item:focus-within .annotation-actions { opacity: 1; }

.annotation-delete,
.annotation-share {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  line-height: 1;
}
.annotation-share:hover {
  color: var(--accent-teal);
  background: color-mix(in oklab, var(--accent-teal) 8%, transparent);
}
.annotation-delete:hover {
  color: var(--status-critical);
  background: color-mix(in oklab, var(--status-critical) 8%, transparent);
}

/* Deep-link highlight (triggered by /u/{handle}#note-{id}) */
@keyframes annotation-highlight-pulse {
  0%, 100% { background-color: transparent; }
  10%, 60% { background-color: color-mix(in oklab, var(--accent-teal) 14%, transparent); }
}
.annotation-item--highlight {
  animation: annotation-highlight-pulse 2400ms ease-in-out;
  border-color: var(--accent-teal);
}

/* ============================================================
   COMMAND PALETTE (⌘K) — Linear / GitHub / Stripe pattern
   ============================================================ */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: var(--z-command, 800);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh var(--space-4) var(--space-4);
  pointer-events: none;
}
.cmd-palette.is-open { display: flex; pointer-events: auto; }

.cmd-palette__backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay, rgba(0,0,0,0.55));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cmd-palette__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.cmd-palette__input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color);
}
.cmd-palette__input-icon {
  font-size: var(--text-md);
  color: var(--text-tertiary);
  line-height: 1;
}
.cmd-palette__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-family: var(--font-body);
}
.cmd-palette__input::placeholder { color: var(--text-tertiary); }

.cmd-palette__esc {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  background: var(--bg-secondary);
}

.cmd-palette__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

.cmd-palette__group {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-tertiary);
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-weight: var(--weight-semibold);
}

.cmd-palette__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-left: 2px solid transparent;
  transition: background var(--transition-fast);
}
.cmd-palette__row:hover,
.cmd-palette__row.is-selected {
  background: var(--bg-surface);
  border-left-color: var(--accent-teal);
}

.cmd-palette__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmd-palette__hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
}
.cmd-palette__tag {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  font-weight: var(--weight-semibold);
}
.cmd-palette__tag--critical { color: var(--accent-red); background: color-mix(in oklab, var(--status-critical) 10%, transparent); }
.cmd-palette__tag--alert    { color: var(--status-high);           background: color-mix(in oklab, var(--status-high) 10%, transparent); }
.cmd-palette__tag--warning  { color: var(--accent-yellow);           background: color-mix(in oklab, var(--accent-yellow) 8%, transparent); }
.cmd-palette__tag--watch,
.cmd-palette__tag--stable   { color: var(--text-secondary); background: color-mix(in oklab, var(--text-primary) 4%, transparent); }

.cmd-palette__empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.cmd-palette__footer {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.cmd-palette__footer kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0 var(--space-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  margin-right: var(--space-1);
}

/* Navbar trigger button for ⌘K */
.cmd-palette-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  min-width: 160px;
  justify-content: space-between;
}
.cmd-palette-trigger:hover {
  color: var(--text-primary);
  border-color: var(--border-strong, color-mix(in oklab, var(--text-primary) 20%, transparent));
  background: var(--bg-tertiary);
}
.cmd-palette-trigger__label {
  flex: 1;
  text-align: left;
  letter-spacing: var(--tracking-wide);
}
.cmd-palette-trigger__kbd {
  display: inline-flex;
  gap: 2px;
}
.cmd-palette-trigger__kbd kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px var(--space-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  line-height: 1;
}

@media (max-width: 680px) {
  .cmd-palette-trigger__label,
  .cmd-palette-trigger__kbd { display: none; }
  .cmd-palette-trigger { min-width: 0; padding: var(--space-2); }
}

/* ============================================================
   LIQUID GLASS — iOS 26 pattern, applied selectively.
   Only on floating/temporary surfaces (overlays, toasts, primary
   CTAs). NEVER on cards/list items (glass hurts body-text contrast).
   @supports-gated so unsupported browsers get the flat fallback.
   ============================================================ */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {

  /* Command palette panel — floating glass pane over content */
  .cmd-palette__panel {
    background: color-mix(in oklab, var(--bg-elevated) 82%, transparent);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.22),
      0 16px 48px rgb(26 24 21 / 0.14),
      0 2px 4px rgb(26 24 21 / 0.06);
  }

  /* Toast tiles — float above the page */
  .toast {
    background: color-mix(in oklab, var(--bg-elevated) 78%, transparent);
    backdrop-filter: blur(20px) saturate(1.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.2),
      0 12px 32px rgb(26 24 21 / 0.12),
      0 1px 2px rgb(26 24 21 / 0.04);
  }

  /* Country modal content — sticky header appears over scrolling body */
  .cp-quote .cp-quote-header {
    background: color-mix(in oklab, var(--bg-surface) 88%, transparent);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    position: sticky;
    top: 0;
    z-index: 2;
  }

  /* Primary action buttons — subtle bevel, no full glass (these are
     on top of solid page, not overlay — just the highlight gives
     depth without hurting readability). */
  .annotation-form__submit,
  .profile-edit-form__btn--primary,
  .outlook-empty__cta,
  .me-claim-form button[type="submit"] {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.22),
      0 2px 6px rgb(26 24 21 / 0.14);
  }
  .annotation-form__submit:hover,
  .profile-edit-form__btn--primary:hover {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.28),
      0 4px 10px rgb(26 24 21 / 0.18);
  }
}

/* ============================================================
   PERPLEXITY-STYLE FOCUS GLOW — warmed for Paper palette.
   Applied to primary text inputs so focus state has a soft claret
   halo (instead of flat outline). Matches the 2026 AI-knowledge-
   product vocabulary (Perplexity / Claude.ai / Arc search bar).
   ============================================================ */
.rankings-search__input:focus,
.rankings-search__input:focus-visible {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-primary) 14%, transparent);
}

.cmd-palette__input-wrap:focus-within {
  /* Palette input sits in a wrapper — tint the whole row */
  background: color-mix(in oklab, var(--accent-primary) 4%, transparent);
}

.annotation-form__textarea:focus,
.annotation-form__textarea:focus-visible,
.profile-edit-form__textarea:focus,
.profile-edit-form__textarea:focus-visible,
.profile-edit-form__input:focus,
.profile-edit-form__input:focus-visible {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-primary) 12%, transparent);
}

.profile-edit-form__handle-wrap:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-primary) 12%, transparent);
}

/* ============================================================
   PREMIUM PASS — 2026 typographic upscale + glass + table polish
   ------------------------------------------------------------
   Override layer on top of the legacy style.css monolith to bring
   every section (Countries / News / Intelligence / Markets) to
   "WOW professional" under the Paper palette.
   Referenced patterns: Anthropic warm paper (type scale + ink),
   iOS 26 liquid glass (navbar + section headers), Perplexity
   (focus halos + pill chips), Bloomberg (tab underline + tabular
   numerals on data).
   ============================================================ */

/* Body text bump — default reading size 14→16 */
html { font-size: 16px; }
body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

/* Navbar — glass top-bar */
.navbar {
  background: color-mix(in oklab, var(--bg-canvas) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 200);
}

/* Section header — confident hierarchy */
.section-header-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0 var(--space-3);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-5);
}
.section-header-bar h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}

/* Data tables — generous rows, sticky header, hover, tabular */
.ranking-table-container,
.data-table-wrap {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
}
/* Mobile (≤768px) — convert ranking tables to vertical card stack.
   Each row becomes a self-contained card with country name as header
   and metrics stacked label-right. Horizontal scroll on cramped
   tables (10+ columns) is bad UX on phones — analyst-grade tools
   serve the data, not force users to swipe to find it. */
@media (max-width: 768px) {
  .ranking-table-container,
  .data-table-wrap {
    border: none;
    background: transparent;
  }
  .ranking-table-container table,
  .ranking-table-container .ranking-table {
    display: block;
  }
  .ranking-table-container thead {
    display: none;  /* headers are inferred from data-label per cell */
  }
  .ranking-table-container tbody {
    display: block;
  }
  .ranking-table-container tbody tr {
    display: block;
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  }
  .ranking-table-container tbody tr:hover {
    background: var(--bg-surface);  /* no hover bg change on mobile */
    transform: translateY(-1px);
  }
  .ranking-table-container td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: none;
    text-align: right;
  }
  .ranking-table-container td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: var(--space-3);
    white-space: nowrap;
    text-align: left;
  }
  /* Country name = card header — bigger, no label, full-width */
  .ranking-table-container td.col-country,
  .ranking-table-container td:first-child {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    padding: 4px 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .ranking-table-container td.col-country::before,
  .ranking-table-container td:first-child::before {
    display: none;
  }
}
@media (min-width: 769px) and (max-width: 900px) {
  /* Tablet portrait — keep table layout but allow horizontal scroll
     (we have icon-only sidebar + 2 vertical cards may waste space) */
  .ranking-table-container,
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.ranking-table-container table,
table.data-table,
.ranking-table-container .ranking-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.ranking-table-container th,
table.data-table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
  text-align: left;
  position: sticky;
  top: 0;
  background: color-mix(in oklab, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-default);
  z-index: 1;
}
.ranking-table-container td,
table.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  color: var(--text-primary);
}
.ranking-table-container tr:last-child td,
table.data-table tr:last-child td { border-bottom: none; }
.ranking-table-container tbody tr,
table.data-table tbody tr {
  transition: background var(--transition-fast);
  cursor: pointer;
}
.ranking-table-container tbody tr:hover,
table.data-table tbody tr:hover {
  background: color-mix(in oklab, var(--accent-primary) 5%, transparent);
}
/* Tabular-nums on numeric cells */
.ranking-table-container td.num,
table.data-table td.num,
.ranking-table-container td[data-score],
.ranking-table-container td[data-num] {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
}

/* News cards (main grid + live grid) — generous + hover lift */
.news-cards-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.news-card,
.news-item {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-fast);
  cursor: pointer;
}
.news-card:hover,
.news-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.news-card h3,
.news-card .news-title,
.news-item h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  letter-spacing: var(--tracking-tight);
}

.live-news-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.live-news-card,
a.live-news-card {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  display: block;
  text-decoration: none;
  color: inherit;
}
.live-news-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.live-news-title {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

/* Glass card — generous padding */
.glass-card {
  padding: var(--space-5) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Stats banner — WOW numbers */
.stats-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}
.stat-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.stat-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.stat-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-medium);
}
.stat-sep { color: var(--border-default); }
.stat-updated {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* Priority / hazard cards — lift on hover */
.priority-card,
.hazard-card,
.crisis-mini-card,
.top-crisis-card {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  cursor: pointer;
}
.priority-card:hover,
.hazard-card:hover,
.crisis-mini-card:hover,
.top-crisis-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* Tab nav — Bloomberg underline */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}
.tab-btn,
.tab-dim-select {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  font-family: inherit;
}
.tab-btn:hover,
.tab-dim-select:hover { color: var(--text-primary); }
.tab-btn.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-primary);
  font-weight: var(--weight-semibold);
}
.tab-pane { padding-top: var(--space-3); }

/* Form select — paper-styled, Perplexity-grade focus */
select.form-select,
.form-select {
  padding: var(--space-2) var(--space-7) var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-family: inherit;
}
.form-select:hover { border-color: var(--border-strong); }
.form-select:focus,
.form-select:focus-visible {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-primary) 14%, transparent);
}

/* Topic chips — Perplexity-style pill */
.topic-chip {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}
.topic-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.topic-chip.active {
  background: var(--accent-muted);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  font-weight: var(--weight-semibold);
}

.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Badges — paper-polished */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid transparent;
}
.badge.critical { color: var(--accent-red, #B5321A); background: color-mix(in oklab, var(--accent-red) 8%, transparent); border-color: color-mix(in oklab, var(--accent-red) 20%, transparent); }
.badge.high     { color: #C97B1F; background: color-mix(in oklab, var(--accent-orange) 8%, transparent); border-color: color-mix(in oklab, var(--accent-orange) 20%, transparent); }
.badge.medium   { color: #8E8A84; background: color-mix(in oklab, var(--text-tertiary) 8%, transparent); border-color: color-mix(in oklab, var(--text-tertiary) 20%, transparent); }

/* Regional pulse — lift cards */
.regional-pulse-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Sidebar — paper refined */
.sidebar {
  background: color-mix(in oklab, var(--bg-canvas) 94%, transparent);
  border-right: 1px solid var(--border-color);
}
.sidebar-item {
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
  transition: background var(--transition-fast), color var(--transition-fast);
  border-left: 2px solid transparent;
}
.sidebar-item:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}
.sidebar-item.active {
  background: var(--bg-muted);
  color: var(--text-primary);
  border-left-color: var(--accent-primary);
  font-weight: var(--weight-semibold);
}
.sidebar-label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-tight);
}

/* Block link (View all, View rankings) */
.block-link {
  font-size: var(--text-xs);
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: opacity var(--transition-fast);
}
.block-link:hover { opacity: 0.8; }

/* Today featured card — hero element, WOW */
.today-featured-card {
  display: block;
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: color-mix(in oklab, var(--accent-primary) 6%, var(--bg-surface));
  border: 1px solid color-mix(in oklab, var(--accent-primary) 25%, var(--border-color));
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  margin-bottom: var(--space-5);
  font-family: inherit;
  color: inherit;
}
.today-featured-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.today-featured-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--accent-primary);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-3);
}
.today-featured-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-tight);
}
.today-featured-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  max-width: 72ch;
}
.today-featured-cta {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Description paragraph below section header */
.section-description {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
  max-width: 72ch;
}

/* Empty + loading states */
.annotation-empty,
.annotation-loading {
  padding: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  list-style: none;
}

/* ============================================================
   LEGACY-PORTED — cluster-1 (skeleton · gs · cluster)
   ------------------------------------------------------------
   Ported from style.css (pruned) with paper-token conversion.
   Hex/rgba → color-mix(var(--accent-*)) where relevant.
   SKIPPED from the original extract:
     · cyberpunk gs-* overrides (monofont + 2px radius) — paper wins
     · ew-cluster-card.cluster-* → moves with the ew-* cluster later
   ============================================================ */

/* Skeleton loaders */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-muted) 0%,
    var(--bg-elevated) 50%,
    var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.skeleton-text { height: 1em; margin-bottom: 0.5em; }
.skeleton-text.short  { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.long   { width: 100%; }
.skeleton-card    { height: 80px; margin-bottom: var(--space-sm); }
.skeleton-avatar  { width: 32px; height: 32px; border-radius: var(--radius-full); }
.skeleton-container { padding: var(--space-md); }
.skeleton-row    { display: flex; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.skeleton-row .skeleton { flex: 1; }
.skeleton-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.skeleton-body   { display: flex; flex-direction: column; }
.skeleton-title  { height: 1.2em; }
.skeleton-icon   { width: 24px; height: 24px; border-radius: var(--radius-sm); flex-shrink: 0; }
.skeleton-badge  { width: 60px; height: 20px; border-radius: var(--radius-sm); flex-shrink: 0; }
.skeleton-list-item {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-sm); border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}
.skeleton-content { flex: 1; display: flex; flex-direction: column; }
.skeleton-meta    { display: flex; gap: var(--space-sm); margin-top: var(--space-xs); }

/* Cluster alerts strip (Early-warning section) */
.cluster-alerts-strip { margin-bottom: var(--space-xl); }
.cluster-alerts-title {
  font-size: 1rem; font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}
.cluster-alerts-list {
  display: flex; gap: var(--space-md);
  overflow-x: auto; padding-bottom: var(--space-sm);
}
.cluster-alerts-list::-webkit-scrollbar { height: 8px; }
.cluster-alerts-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.cluster-alerts-list:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
.cluster-alert {
  flex: 0 0 auto;
  min-width: 260px; max-width: 320px;
  padding: var(--space-md);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  border-left: 4px solid;
  transition: border-color var(--transition-fast);
}
.cluster-alert:hover { border-color: var(--accent-teal); }
.cluster-alert.cluster-critical { border-left-color: var(--status-critical); }
.cluster-alert.cluster-high     { border-left-color: var(--status-high); }
.cluster-alert.cluster-warning  { border-left-color: var(--accent-yellow); }
.cluster-header {
  display: flex; align-items: center; gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.cluster-icon   { font-size: 0.9rem; }
.cluster-name   { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
.cluster-status {
  font-size: 0.65rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-secondary);
  margin-left: auto;
}
.cluster-body   { display: flex; flex-direction: column; gap: 2px; }
.cluster-desc   { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.3; }
.cluster-drivers{ font-size: 0.7rem; color: var(--text-tertiary); font-style: italic; }
.cluster-countries { font-size: 0.7rem; color: var(--text-muted); margin-top: var(--space-xs); }

@media (max-width: 768px) {
  .cluster-alerts-list { flex-direction: column; }
  .cluster-alert { min-width: 100%; max-width: 100%; }
}

/* Global Summary (gs-*) — dashboard 3-col layout */
.gs-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-2);
}
.gs-title {
  font-size: 0.88rem; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.gs-avg  { font-size: 0.72rem; color: var(--text-tertiary); }
.gs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 768px) {
  .gs-grid { grid-template-columns: 1fr; gap: var(--space-sm); }
}
.gs-col-label {
  display: block;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.65rem; font-weight: 600;
  color: var(--accent-teal);
  margin-bottom: var(--space-2);
}
.gs-stat      { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 3px; }
.gs-stat-num  { font-weight: 700; font-size: 0.88rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.gs-detail    { font-size: 0.68rem; color: var(--text-tertiary); margin-bottom: 6px; }
.gs-funding-num { color: var(--accent-teal); }
.gs-movers-list { margin-top: 8px; font-size: 0.72rem; line-height: 1.7; }
.gs-pills    { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-pill {
  font-size: 0.68rem; font-weight: 600;
  padding: 3px 10px; border-radius: 4px;
  letter-spacing: 0.02em;
}
.gs-pill.gs-critical { background: color-mix(in oklab, var(--status-critical) 15%, transparent); color: var(--status-critical); }
.gs-pill.gs-alert    { background: color-mix(in oklab, var(--status-high) 15%, transparent);     color: var(--status-high); }
.gs-pill.gs-warning  { background: color-mix(in oklab, var(--accent-yellow) 15%, transparent);   color: var(--accent-yellow); }
.gs-pill.gs-watch    { background: color-mix(in oklab, var(--accent-teal) 15%, transparent);     color: var(--accent-teal); }
.gs-pill.gs-stable   { background: color-mix(in oklab, var(--status-low) 15%, transparent);      color: var(--status-low); }

/* Column-level accents — warmed from cyberpunk neon rails */
.gs-col-status  { border-top: 3px solid var(--cp-critical); padding-top: var(--space-3); }
.gs-col-weekly  { border-top: 3px solid var(--cp-accent);   padding-top: var(--space-3); }
.gs-col-outlook { border-top: 3px solid var(--cp-purple);   padding-top: var(--space-3); }
.gs-col-status  .gs-col-label { color: var(--cp-critical); }
.gs-col-weekly  .gs-col-label { color: var(--cp-accent); }
.gs-col-outlook .gs-col-label { color: var(--cp-purple); }

/* ============================================================
   LEGACY-PORTED — cluster-2 (cp-* country panel internals)
   ------------------------------------------------------------
   Ported from style.css (pruned). Paper-converted.
   SKIPPED:
     · cp-brand-* (ui-components already has paper brand in
       APP SHELL section — no neon text-shadow for Paper)
     · [data-theme="light"] selectors — rewritten without scope
       since Paper is the only theme.
   ============================================================ */

.cp-header {
  display: flex; align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.cp-score-badge {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.cp-score-badge.critical { background: color-mix(in oklab, var(--status-critical) 15%, transparent); color: var(--status-critical); }
.cp-score-badge.high     { background: color-mix(in oklab, var(--status-high) 15%, transparent);     color: var(--status-high); }
.cp-score-badge.medium   { background: color-mix(in oklab, var(--accent-teal) 15%, transparent);     color: var(--status-medium); }
.cp-score-badge.low      { background: color-mix(in oklab, var(--status-low) 15%, transparent);      color: var(--status-low); }

.cp-score-num { font-size: 1.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cp-score-label {
  font-size: 0.6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}

.cp-header-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cp-region      { font-size: 0.8rem; color: var(--text-tertiary); }
.cp-trend       { font-size: 0.85rem; font-weight: 600; }
.cp-trend.trend-up     { color: var(--status-critical); }
.cp-trend.trend-down   { color: var(--status-low); }

/* Country detail modal — compact header on small phones.
   Shrinks the score badge and tightens padding so the header sits
   comfortably on a 375px iPhone width without truncating country
   name or trend text. */
@media (max-width: 640px) {
  .cp-header {
    gap: var(--space-sm);
    padding: var(--space-sm);
  }
  .cp-score-badge { width: 44px; height: 44px; }
  .cp-score-num   { font-size: 1.15rem; }
  .cp-score-label { font-size: 0.55rem; }
}
.cp-trend.trend-stable { color: var(--text-secondary); }

.cp-drivers { display: flex; flex-direction: column; gap: var(--space-2); }
.cp-driver-row {
  display: flex; align-items: center; gap: var(--space-2);
}
.cp-driver-label {
  width: 110px; font-size: 0.8rem;
  color: var(--text-secondary); flex-shrink: 0;
}
.cp-driver-bar-bg {
  flex: 1; height: 8px;
  background: var(--bg-primary);
  border-radius: 4px; overflow: hidden;
}
.cp-driver-bar {
  height: 100%; border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.cp-driver-score {
  width: 28px; text-align: right;
  font-size: 0.85rem; font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.cp-sparkline {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}
.cp-sparkline svg { width: 280px; height: 44px; flex-shrink: 0; }
.cp-sparkline-range {
  font-size: 0.65rem; color: var(--text-tertiary); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cp-freshness {
  display: flex; align-items: center; gap: var(--space-1);
  padding: 6px var(--space-3);
  justify-content: center;
}
.cp-freshness-dot { width: 6px; height: 6px; border-radius: var(--radius-full); flex-shrink: 0; }
.cp-freshness-dot.fresh   { background: var(--status-low); }
.cp-freshness-dot.recent  { background: var(--status-medium); }
.cp-freshness-dot.stale   { background: var(--status-high); }
.cp-freshness-dot.unavail { background: var(--text-tertiary); }
.cp-freshness-label       { font-size: 0.7rem; color: var(--text-tertiary); margin-left: var(--space-1); }

/* Tabbed panel shell (base) — .cp-quote overrides still apply
   in the Bloomberg country modal.                          */
.cp-tabbed { display: flex; flex-direction: column; gap: 0; }
.cp-sticky {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  margin: 0 calc(-1 * var(--space-5));
  padding: 0 var(--space-5);
}
.cp-tab-bar { display: flex; gap: 6px; padding: var(--space-2) 0 var(--space-3); }
.cp-tab {
  padding: var(--space-2) var(--space-4);
  font-size: 0.7rem; font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-tertiary);
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  transition: all 0.15s ease;
}
.cp-tab:hover {
  color: var(--text-secondary);
  border-color: color-mix(in oklab, var(--accent-teal) 30%, transparent);
  background: color-mix(in oklab, var(--accent-teal) 4%, transparent);
}
.cp-tab.active {
  color: var(--accent-teal);
  border-color: color-mix(in oklab, var(--accent-teal) 50%, transparent);
  background: color-mix(in oklab, var(--accent-teal) 8%, transparent);
}
.cp-tab-content { display: none; padding: var(--space-3) 0 0; }
.cp-tab-content.active { display: block; }
.cp-section-sep { border-top: 1px dashed var(--border-color); margin: var(--space-3) 0; }

/* Chip grid (data metrics panel) */
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.cp-chip {
  display: flex; flex-direction: column;
  padding: 7px 10px 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  min-width: 90px;
}
.cp-chip-label {
  font-size: 0.56rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-tertiary);
  font-weight: 600; margin-bottom: 2px;
}
.cp-chip-value {
  font-family: var(--font-mono);
  font-size: 0.88rem; font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cp-chip-value.critical { color: var(--status-critical); }
.cp-chip-value.high     { color: var(--status-high); }
.cp-chip-value.flood    { color: var(--accent-teal); }
.cp-chip-value.drought  { color: var(--status-high); }
.cp-chip-value.positive { color: var(--accent-green); }

/* Driver bars (base — .cp-bars--overview modifier overrides in the Bloomberg modal) */
.cp-bars { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-2); }
.cp-bar-row {
  display: grid;
  grid-template-columns: 38px 1fr 40px 28px;
  align-items: center;
  gap: 6px; height: 22px;
}
.cp-bar-code {
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.cp-bar-track {
  height: 6px;
  background: rgba(26, 24, 21, 0.06);
  border-radius: 3px; overflow: hidden;
}
.cp-bar-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.3s ease;
}
.cp-bar-score {
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-primary); text-align: right;
  font-variant-numeric: tabular-nums;
}
.cp-bar-weight {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: var(--text-muted);
  text-align: right;
}
@media (max-width: 640px) {
  .cp-bar-row { grid-template-columns: 32px 1fr 34px 24px; }
}

/* Peer pills */
.cp-peer-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.cp-peer-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-size: 0.74rem;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.cp-peer-pill:hover {
  border-color: color-mix(in oklab, var(--accent-teal) 35%, transparent);
}
.cp-peer-pill.active {
  border-color: var(--accent-teal);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-teal) 12%, transparent);
}
.cp-peer-pill-name  { font-weight: 600; color: var(--text-primary); }
.cp-peer-pill-score {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.cp-peer-pill-score.critical { color: var(--status-critical); }
.cp-peer-pill-score.high     { color: var(--status-high); }
.cp-peer-pill-score.medium   { color: var(--accent-yellow); }
.cp-peer-pill-score.low      { color: var(--accent-green); }

.cp-peer-detail {
  padding: var(--space-3);
  background: var(--bg-tertiary);
  border-radius: 6px;
  border-left: 3px solid var(--accent-teal);
  margin-bottom: var(--space-2);
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: none;
}
.cp-peer-detail.active { display: block; }

/* Report rows (country intel feed) */
.cp-report-row {
  display: grid;
  grid-template-columns: 62px 52px 1fr 20px;
  gap: 6px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  font-size: 0.72rem;
  transition: background 0.1s;
}
.cp-report-row:hover { background: var(--bg-hover); }
.cp-report-date {
  font-family: var(--font-mono);
  font-size: 0.64rem; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.cp-report-source {
  font-size: 0.6rem; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-report-title-text {
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-report-arrow { color: var(--text-tertiary); font-size: 0.68rem; }

/* Expand/collapse disclosure (<details>) */
.cp-expand { border: none; background: none; padding: 0; margin: 0; font-family: var(--font-body); }
.cp-expand > summary {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 6px 0;
  font-weight: 500;
  list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.cp-expand > summary::before {
  content: '\25b8';
  font-size: 0.68rem;
  transition: transform 0.15s ease;
  display: inline-block;
}
.cp-expand[open] > summary::before { transform: rotate(90deg); }
.cp-expand > summary::-webkit-details-marker { display: none; }
.cp-expand-body {
  padding: var(--space-2) 0 var(--space-1) var(--space-4);
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Tooltip (cp-tt) — paper-converted from cyberpunk dark */
.cp-tt {
  position: relative;
  display: inline-flex; align-items: center;
  cursor: help;
}
.cp-tt__i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 11px; height: 11px;
  margin-left: 3px;
  border-radius: var(--radius-full);
  border: 1px solid currentColor;
  font-family: var(--cp-mono);
  font-size: 7px; font-weight: 700; line-height: 1;
  opacity: 0.5;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
  user-select: none;
}
.cp-tt:hover .cp-tt__i,
.cp-tt:focus-visible .cp-tt__i { opacity: 1; }
.cp-tt__b {
  position: fixed;
  top: 0; left: 0;
  min-width: 240px; max-width: 360px;
  padding: var(--space-3) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid color-mix(in oklab, var(--accent-teal) 35%, var(--border-color));
  border-radius: var(--radius-md);
  box-shadow:
    0 16px 36px rgb(26 24 21 / 0.14),
    inset 0 1px 0 rgb(255 255 255 / 0.2);
  font-family: var(--cp-mono);
  font-size: 0.72rem; line-height: 1.55;
  color: var(--text-primary);
  text-transform: none; letter-spacing: normal;
  text-align: left; white-space: normal;
  z-index: var(--z-tooltip, 700);
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.cp-tt:hover .cp-tt__b,
.cp-tt:focus-visible .cp-tt__b {
  opacity: 1; visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}
.cp-tt__t {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-teal);
  margin-bottom: 9px;
  font-weight: 700;
}
.cp-tt__r {
  display: flex; justify-content: space-between;
  gap: 16px; padding: 3px 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.cp-tt__r:last-child { border-bottom: none; }
.cp-tt__k { color: var(--text-tertiary); font-size: 0.72rem; }
.cp-tt__v {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 0.74rem;
}
.cp-tt__body { color: var(--text-primary); font-size: 0.74rem; line-height: 1.6; }
.cp-tt__hint {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in oklab, var(--accent-teal) 25%, transparent);
  font-size: 0.64rem;
  color: var(--accent-teal);
  text-align: center;
  letter-spacing: 0.06em;
}
.cp-tt--left .cp-tt__b {
  left: auto; right: 0;
  transform: translateX(0) translateY(4px);
}
.cp-tt--left:hover .cp-tt__b,
.cp-tt--left:focus-visible .cp-tt__b {
  transform: translateX(0) translateY(0);
}
.cp-tt--left .cp-tt__b::after {
  left: auto; right: 14px;
  transform: translateX(0);
}
@media (hover: none) {
  .cp-tt:active .cp-tt__b {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
  }
  .cp-tt--left:active .cp-tt__b { transform: translateX(0) translateY(0); }
}

/* Sticky tab-bar responsive tweak */
@media (max-width: 640px) {
  .cp-sticky { margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }
  .cp-tab { padding: var(--space-2) var(--space-3); font-size: 0.64rem; }
  .cp-tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cp-tab-bar::-webkit-scrollbar { display: none; }
}

/* ============================================================
   LEGACY-PORTED — cluster-3 (news-* cards/filters/signals/badges)
   ------------------------------------------------------------
   Ported from style.css with paper-token conversion. Skipped:
     · cyberpunk news-source-tab variants (4 rules, cyan neon glow)
       — ui-components already provides the base in Premium Pass.
   rgba(255,255,255,α) surfaces remapped to paper (--bg-tertiary or
   color-mix(var(--text-primary) α%, transparent)) since white-on-
   paper is invisible.
   ============================================================ */

/* Skeleton for news loading state */
.news-skeleton {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  margin-bottom: var(--space-xs);
}

/* Signal section — convergence highlight panel */
.news-signal-section {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.news-signal-section.hidden { display: none; }

.news-signal-header {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.news-signal-title {
  font-size: 0.93rem; font-weight: 500;
  color: var(--text-secondary);
}
.news-signal-country {
  font-weight: 500; font-size: 1.14rem;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.news-signal-level {
  font-size: 0.86rem; font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-full);
}
.news-signal-level.news-critical {
  background: color-mix(in oklab, var(--status-critical) 20%, transparent);
  color: var(--status-critical);
}
.news-signal-level.news-high {
  background: color-mix(in oklab, var(--status-high) 20%, transparent);
  color: var(--status-high);
}
.news-signal-level.news-medium {
  background: color-mix(in oklab, var(--accent-yellow) 20%, transparent);
  color: var(--accent-yellow);
}
.news-signal-level.news-low {
  background: color-mix(in oklab, var(--text-primary) 6%, transparent);
  color: var(--text-tertiary);
}

.news-convergence-badge {
  font-size: 0.65rem; font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: auto;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.news-convergence-badge.convergent {
  background: color-mix(in oklab, var(--status-critical) 15%, transparent);
  color: var(--status-critical);
  border: 1px solid color-mix(in oklab, var(--status-critical) 30%, transparent);
}
.news-convergence-badge.investigate {
  background: color-mix(in oklab, var(--accent-yellow) 15%, transparent);
  color: var(--accent-yellow);
  border: 1px solid color-mix(in oklab, var(--accent-yellow) 30%, transparent);
}

.news-signal-stat {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Headlines list inside the signal panel */
.news-headlines-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm) 0;
}
.news-headlines-list li {
  display: flex; align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.8rem;
}
.news-headlines-list li:last-child { border-bottom: none; }
.news-headline-link {
  color: var(--accent-blue);
  text-decoration: none;
  flex: 1;
}
.news-headline-link:hover { text-decoration: underline; }
.news-headline-text {
  color: var(--text-primary);
  flex: 1;
}

.news-source {
  font-size: 0.65rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Insight / editorial call-out */
.news-insight {
  padding: var(--space-sm);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}
.news-insight-label {
  font-size: 0.7rem; font-weight: 600;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.news-insight-text {
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.4;
  font-style: italic;
}

.news-disclaimer {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: right;
}

/* News filters bar (between section header and card grid) */
.news-filters-bar {
  display: flex; align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.news-dropdowns {
  display: flex;
  gap: var(--space-sm);
  margin-left: auto;
}
.news-dropdowns .form-select {
  min-width: 120px;
  font-size: 0.8rem;
  padding: 6px 10px;
}
@media (max-width: 600px) {
  .news-filters-bar { flex-direction: column; align-items: stretch; }
  .news-dropdowns { margin-left: 0; }
}

/* Region + topic + card badges */
.news-region-badge {
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-teal);
  color: var(--bg-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.news-topic-badge {
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--accent-indigo) 20%, transparent);
  color: var(--text-secondary);
  text-transform: capitalize;
}

/* News card sub-parts (thumb / top / title / bottom / tags) */
.news-card-thumb {
  flex-shrink: 0;
  width: 90px; height: 70px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-tertiary);
}
.news-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 600px) {
  .news-card-thumb { width: 100%; height: 120px; }
}
.news-card-top {
  display: flex; align-items: center;
  gap: var(--space-xs);
}
.news-card-source {
  font-size: 0.6rem; font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.news-card-source.reliefweb {
  background: color-mix(in oklab, var(--accent-green) 15%, transparent);
  color: var(--accent-green);
}
.news-card-source.gdelt {
  background: color-mix(in oklab, var(--accent-teal) 15%, transparent);
  color: var(--accent-teal);
}
.news-card-source.rss {
  background: color-mix(in oklab, var(--accent-indigo) 15%, transparent);
  color: var(--accent-indigo);
}
.news-card-country {
  font-size: 0.7rem; font-weight: 500;
  color: var(--accent-teal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-card-time {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.news-card-title {
  font-size: 0.85rem; font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-bottom {
  display: flex; align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: auto;
}
.news-card-outlet {
  font-size: 0.65rem;
  color: var(--text-muted);
}
.news-card-tag {
  font-size: 0.6rem;
  padding: 1px 6px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--text-primary) 6%, transparent);
  color: var(--text-tertiary);
  text-transform: capitalize;
}
.news-card-format {
  font-size: 0.6rem;
  padding: 1px 6px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--accent-green) 10%, transparent);
  color: var(--accent-green);
}

/* Source tabs (paper base — cyberpunk variant intentionally skipped) */
.news-source-tabs {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.news-source-tab {
  font-size: 0.75rem; font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.news-source-tab:hover {
  border-color: var(--accent-teal);
  color: var(--text-primary);
}
.news-source-tab.active {
  background: var(--accent-teal);
  color: var(--bg-primary);
  border-color: var(--accent-teal);
}

/* Regional pulse collapsible — disclosure pattern, hidden by default
   so the Countries section gets to the rankings tabs faster. */
.regional-pulse-collapse {
  border: 1px solid color-mix(in oklab, var(--text-primary) 8%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--text-primary) 2%, transparent);
}
.regional-pulse-collapse__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: background 0.15s ease;
  user-select: none;
}
.regional-pulse-collapse__summary::-webkit-details-marker { display: none; }
.regional-pulse-collapse__summary:hover {
  background: color-mix(in oklab, var(--text-primary) 4%, transparent);
}
.regional-pulse-collapse__hint {
  font-size: 0.74rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.regional-pulse-collapse[open] .regional-pulse-collapse__hint::after {
  content: " (hide)";
}
.regional-pulse-collapse > .regional-pulse-block {
  padding: 0 16px 16px;
}

/* Answer card actions row — Download PDF / (future) Copy / Share / Save.
   Sits between the source grid and the tools-used badges. Buttons are
   tertiary action style (icon + label, neutral by default, accent on
   hover). Loading state replaces label text in-place ("Generating PDF…")
   and disables the button to prevent double-fire. */
.argus-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  border-top: 1px solid color-mix(in oklab, var(--text-primary) 6%, transparent);
}
.argus-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--text-primary) 14%, transparent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 36px;
}
.argus-action-btn:hover {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 6%, transparent);
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 30%, transparent);
  color: var(--accent-red, #b33a3a);
  transform: translateY(-1px);
}
.argus-action-btn:active { transform: scale(0.97); transition-duration: 80ms; }
.argus-action-btn:disabled {
  opacity: 0.85;
  cursor: progress;
  transform: none;
}
.argus-action-btn.is-loading {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 8%, transparent);
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 30%, transparent);
  color: var(--accent-red, #b33a3a);
}
.argus-action-btn svg { flex-shrink: 0; }
.argus-action-btn__spinner {
  animation: argus-action-spin 0.9s linear infinite;
  transform-origin: center;
}
@keyframes argus-action-spin {
  to { transform: rotate(360deg); }
}

/* Workspace coming-soon sections — intentional teasers for features
   shipping later. Centered card with eyebrow + title + body + ETA.
   Mirrors the editorial-card pattern used in Analysis section so
   the design language stays coherent. */
.coming-soon-section {
  display: none;
  padding: clamp(48px, 10vh, 120px) var(--space-4) var(--space-6);
  align-items: center;
  justify-content: center;
}
.coming-soon-section.active { display: flex; }
.coming-soon-card {
  max-width: 560px;
  text-align: left;
  background: color-mix(in oklab, var(--text-primary) 3%, transparent);
  border: 1px solid color-mix(in oklab, var(--text-primary) 10%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.coming-soon-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-red, #b33a3a);
  margin-bottom: var(--space-2);
}
.coming-soon-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}
.coming-soon-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}
.coming-soon-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-tertiary);
  padding-top: var(--space-3);
  border-top: 1px dashed color-mix(in oklab, var(--text-primary) 12%, transparent);
}

/* ============================================================
   MY BRIEFS — workspace listing of persisted PDF briefs.
   Editorial layout: section header (eyebrow + title + lede),
   a thin toolbar (count + refresh), and a vertical list of
   brief rows. Each row carries title, preview snippet, format/
   language/size/age chips, and Download/Delete actions. Reads
   like a Perplexity threads list — analyst-grade density, not
   a dashboard. Empty state is intentional, not "broken".
   ============================================================ */
.my-briefs-section {
  display: none;
  padding: clamp(32px, 6vh, 64px) clamp(16px, 4vw, 48px) var(--space-8);
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}
.my-briefs-section.active { display: block; }
.my-briefs__head {
  margin-bottom: var(--space-6);
}
.my-briefs__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-red, #b33a3a);
  margin-bottom: var(--space-2);
}
.my-briefs__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}
.my-briefs__lede {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 64ch;
}
.my-briefs__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 0 var(--space-3);
  border-bottom: 1px solid color-mix(in oklab, var(--text-primary) 8%, transparent);
  margin-bottom: var(--space-3);
}
.my-briefs__count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.my-briefs__refresh {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--text-primary) 14%, transparent);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.my-briefs__refresh:hover {
  background: color-mix(in oklab, var(--text-primary) 4%, transparent);
  color: var(--text-primary);
  border-color: color-mix(in oklab, var(--text-primary) 22%, transparent);
}
.my-briefs__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.my-briefs__loading,
.my-briefs__empty {
  text-align: left;
  padding: var(--space-5) var(--space-4);
  color: var(--text-tertiary);
  font-size: 0.92rem;
  line-height: 1.5;
  background: color-mix(in oklab, var(--text-primary) 2%, transparent);
  border: 1px dashed color-mix(in oklab, var(--text-primary) 12%, transparent);
  border-radius: var(--radius-md);
}
.my-briefs__empty-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.my-briefs__empty-body {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
}
.my-brief-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4);
  background: var(--bg-secondary, #fbf9f3);
  border: 1px solid color-mix(in oklab, var(--text-primary) 8%, transparent);
  border-radius: var(--radius-md);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.my-brief-row:hover {
  border-color: color-mix(in oklab, var(--text-primary) 18%, transparent);
  background: color-mix(in oklab, var(--text-primary) 3%, var(--bg-secondary, #fbf9f3));
}
.my-brief-row__main {
  flex: 1 1 auto;
  min-width: 0;
}
.my-brief-row__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 4px;
  word-wrap: break-word;
}
.my-brief-row__preview {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.my-brief-row__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.my-brief-row__chip {
  display: inline-block;
  padding: 1px 6px;
  background: color-mix(in oklab, var(--text-primary) 6%, transparent);
  border-radius: 3px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}
.my-brief-row__dot {
  color: color-mix(in oklab, var(--text-primary) 18%, transparent);
}
.my-brief-row__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.my-brief-row__btn {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.my-brief-row__btn--primary {
  background: var(--text-primary);
  color: var(--bg-primary, #fdfaf2);
}
.my-brief-row__btn--primary:hover {
  background: color-mix(in oklab, var(--text-primary) 88%, var(--accent-red, #b33a3a));
}
.my-brief-row__btn--ghost {
  background: transparent;
  color: var(--text-tertiary);
  border-color: color-mix(in oklab, var(--text-primary) 12%, transparent);
}
.my-brief-row__btn--ghost:hover {
  color: var(--accent-red, #b33a3a);
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 40%, transparent);
}
.my-brief-row__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .my-brief-row {
    flex-direction: column;
    align-items: stretch;
  }
  .my-brief-row__actions {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* Empty state across full card grid — designed, not bare text.
   Adds a soft framing (dashed border + bg) so the empty state reads
   intentional rather than "broken". Glyph indicator hints at what's
   missing. Same pattern reused via .empty-state-card class for
   other surfaces. */
.news-empty-state,
.empty-state-card {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--text-tertiary);
  font-size: 0.92rem;
  line-height: 1.5;
  background: color-mix(in oklab, var(--text-primary) 2%, transparent);
  border: 1px dashed color-mix(in oklab, var(--text-primary) 12%, transparent);
  border-radius: var(--radius-md);
}
.news-empty-state::before,
.empty-state-card::before {
  content: "—";
  display: block;
  margin-bottom: 6px;
  font-size: 1.4rem;
  color: color-mix(in oklab, var(--text-primary) 24%, transparent);
  line-height: 1;
  letter-spacing: -0.05em;
}

/* ============================================================
   LEGACY-PORTED — cluster-4 (argus-* chat subsystem)
   PALETTE FULLY CONVERTED from Tailwind dark (sky-400 / slate-400-
   -900 / red-500 / etc) to Paper warm. Argus keeps the "rich AI
   panel" visual identity but sits comfortably on cream paper.
   ============================================================ */

/* Chat bubble (assistant reply) */
.argus-bubble {
  background: var(--bg-tertiary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 2px;
  max-width: 90%;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-primary);
  border: 1px solid color-mix(in oklab, var(--text-primary) 6%, transparent);
}

/* "Tools used" footer — which functions Argus invoked this turn */
.argus-tools-used {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in oklab, var(--text-primary) 8%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.argus-tools-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-right: 6px;
  width: 100%;
  margin-bottom: 4px;
}
.argus-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--accent-teal) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent-teal) 25%, transparent);
  color: var(--accent-teal);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.15s ease;
}
.argus-tool-badge:hover {
  background: color-mix(in oklab, var(--accent-teal) 18%, transparent);
  border-color: color-mix(in oklab, var(--accent-teal) 40%, transparent);
}

.argus-loading-text { transition: opacity 0.25s ease; }

/* ============================================================
   ARGUS ANSWER CARD — Perplexity-style answer surface.
   Generous typography for long-form analyst prose, citation
   pills inline, source cards grid below, follow-up chips.
   Sits on the paper canvas; uses paper accents (teal for
   citations, no synthetic/cyberpunk colors).
   ============================================================ */
.argus-answer-card {
  width: 100%;
  /* 760px = ~80 characters per line at Inter 17px — Perplexity / ChatGPT
     / Claude.ai converge on this band. Wider feels "spacious" but
     reading research is conclusive: above 90ch the eye fatigues
     tracking line returns. We keep the same width on user messages
     (rendered below as a heading) so question + answer share a single
     unified column — the 2026 chat-document pattern. */
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.argus-answer-body {
  font-family: var(--font-body);
  font-size: 1.0625rem;       /* 17px — tuned for prose readability */
  line-height: var(--leading-prose, 1.68);
  color: var(--text-primary);
  word-wrap: break-word;
}
.argus-answer-body p {
  margin: 0 0 var(--space-3) 0;
}
.argus-answer-body p:last-child { margin-bottom: 0; }
.argus-answer-body h1,
.argus-answer-body h2,
.argus-answer-body h3 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-4) 0 var(--space-2);
  font-weight: var(--weight-semibold);
}
.argus-answer-body h1 { font-size: 1.625rem; }   /* 26px — was 24px */
.argus-answer-body h2 { font-size: 1.375rem; }   /* 22px — was 20px, more visible section break */
.argus-answer-body h3 { font-size: 1.125rem; }   /* 18px — was 17px (matching body), now 1px above for hierarchy */
.argus-answer-body strong { font-weight: var(--weight-semibold); }
.argus-answer-body ul,
.argus-answer-body ol {
  margin: 0 0 var(--space-3) var(--space-5);
  padding: 0;
}
.argus-answer-body li { margin-bottom: var(--space-2); }
.argus-answer-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: color-mix(in oklab, var(--text-primary) 8%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
}
.argus-answer-body blockquote {
  margin: var(--space-3) 0;
  padding: 8px 16px;
  border-left: 3px solid var(--accent-red, #b33a3a);
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 5%, transparent);
  border-radius: 0 6px 6px 0;
  color: var(--text-secondary);
  font-style: italic;
}
.argus-answer-body blockquote p { margin: 0; }
.argus-answer-body hr {
  border: none;
  height: 1px;
  background: var(--border-subtle, rgba(0,0,0,0.08));
  margin: var(--space-4) 0;
}

/* Tables — Argus emits these for comparisons, ranking shortlists,
   indicator panels. They need to be readable at the answer column
   width AND not break on narrow viewports. Pattern: scroll-x on the
   wrapper if the table is wider than the column. */
.argus-answer-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.argus-answer-body table thead { background: color-mix(in oklab, var(--text-primary) 5%, transparent); }
.argus-answer-body table th,
.argus-answer-body table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  vertical-align: top;
}
.argus-answer-body table th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color, rgba(0,0,0,0.16));
  white-space: nowrap;
}
.argus-answer-body table tr:last-child td { border-bottom: none; }
.argus-answer-body table tr:hover { background: color-mix(in oklab, var(--text-primary) 3%, transparent); }
/* Numeric columns — right-align by convention. The orchestrator can
   emit `<td align="right">` (GFM doesn't support but markdown emit is
   quasi-html-aware) but the simpler convention is to use mono where
   numbers matter. Keep tabular-nums on by default. */

/* User message rendered as a question heading (Perplexity 2026 pattern).
   No avatar, no bubble — just large display text in the same column as
   the answer below. Subtle bottom border separates question from answer
   visually without needing two distinct backgrounds. */
/* Premium microinteractions — applied to interactive elements
   that benefit from hover-lift + active-press feedback. Cubic-bezier
   matches Apple/Linear/Notion tactile feel. Active state simulates
   physical press without needing haptics. */
.argus-followup-chip,
.sidebar-new-chat,
.argus-panel__act,
.argus-chat__new-btn,
.today-ask-argus__chip,
.editorial-card__ask {
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.15s ease !important;
}
.argus-followup-chip:active,
.sidebar-new-chat:active,
.argus-panel__act:active,
.argus-chat__new-btn:active,
.today-ask-argus__chip:active,
.editorial-card__ask:active {
  transform: scale(0.97) !important;
  transition-duration: 80ms !important;
}

/* User message — chat bubble pattern (right-aligned, tinted, defined).
   Reverted from heading-style after analyst feedback that multi-line
   questions rendered as huge display text dominated the screen. The
   bubble is more familiar (ChatGPT/Claude pattern) and keeps the
   question visually contained. Background tint and border are
   stronger than the legacy CSS layer below so the bubble reads
   clearly against the cream paper canvas. */
.argus-msg--user {
  flex-direction: row-reverse;
  max-width: 760px;
}
.argus-msg--user .argus-msg__body {
  /* Neutral text-primary tint instead of accent-red — questions read
     as user-input not "alert". Accent-red was visually loud, evoking
     warning/critical states which is wrong semantic. Neutral grey
     mix matches ChatGPT/Claude conventions for user message. */
  background: color-mix(in oklab, var(--text-primary) 8%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--text-primary) 14%, transparent) !important;
  padding: 12px 16px !important;
  max-width: 80% !important;
  border-radius: 16px 16px 4px 16px !important;
  margin-left: auto !important;
  margin-bottom: 6px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.argus-msg--user .argus-msg__text {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ============================================================
   ARGUS STREAMING — live SSE card replaced by canonical answer
   card on `final` event. Stack of accumulating activity pills
   above a plain-text incremental body. Designed to feel
   intentional during the 5-30s window the orchestrator works,
   not a placeholder/skeleton.
   ============================================================ */
.argus-streaming {
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-body);
  color: var(--text-primary);
}
.argus-streaming__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-3);
}
.argus-streaming__pills:empty {
  display: none;
}
.argus-streaming__text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-height: 1.5em;  /* avoids vertical jump when first chunk arrives */
}
.argus-streaming__text:empty::after {
  content: 'Reasoning…';
  color: var(--text-tertiary);
  font-style: italic;
  animation: argus-pulse 1.4s ease-in-out infinite;
}
@keyframes argus-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Activity pill — one per tool call. Pending state pulses;
   ok turns green-ish (analyst-grade muted), fail goes accent-red. */
.argus-activity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: color-mix(in oklab, var(--text-primary) 4%, transparent);
  border: 1px solid color-mix(in oklab, var(--text-primary) 10%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.argus-activity-pill--pending {
  animation: argus-pulse 1.4s ease-in-out infinite;
}
.argus-activity-pill--ok {
  background: color-mix(in oklab, #2d6a4f 8%, transparent);
  border-color: color-mix(in oklab, #2d6a4f 30%, transparent);
  color: color-mix(in oklab, #2d6a4f 80%, var(--text-primary));
}
.argus-activity-pill--fail {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 8%, transparent);
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 30%, transparent);
  color: var(--accent-red, #b33a3a);
}
.argus-activity-pill__icon {
  font-size: 0.85rem;
  line-height: 1;
}
.argus-activity-pill__label {
  text-transform: lowercase;
  font-weight: 500;
}
.argus-activity-pill__status {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}

/* Inline citation pill [1], [2], ... — clickable, scrolls to source */
.argus-citation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin: 0 2px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--accent-teal);
  background: color-mix(in oklab, var(--accent-teal) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent-teal) 22%, transparent);
  border-radius: 9999px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  vertical-align: baseline;
  position: relative;
  top: -1px;
}
.argus-citation:hover {
  background: color-mix(in oklab, var(--accent-teal) 20%, transparent);
  border-color: color-mix(in oklab, var(--accent-teal) 38%, transparent);
  transform: translateY(-1px);
}
.argus-citation:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}

/* Source cards grid — favicon-less, content-first */
.argus-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in oklab, var(--text-primary) 8%, transparent);
}
/* Stagger fade-in of source cards on render — premium reveal.
   Each card starts at opacity 0 + translateY(8px) and animates to
   visible. Delays cascade via :nth-child so the cards appear one
   after another (50ms each). Capped at 8 children to avoid huge
   total lag if a query returns 20+ sources. */
.argus-source-grid .argus-source-card {
  animation: argus-source-reveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.argus-source-grid .argus-source-card:nth-child(1) { animation-delay: 0ms; }
.argus-source-grid .argus-source-card:nth-child(2) { animation-delay: 50ms; }
.argus-source-grid .argus-source-card:nth-child(3) { animation-delay: 100ms; }
.argus-source-grid .argus-source-card:nth-child(4) { animation-delay: 150ms; }
.argus-source-grid .argus-source-card:nth-child(5) { animation-delay: 200ms; }
.argus-source-grid .argus-source-card:nth-child(6) { animation-delay: 250ms; }
.argus-source-grid .argus-source-card:nth-child(7) { animation-delay: 300ms; }
.argus-source-grid .argus-source-card:nth-child(n+8) { animation-delay: 350ms; }
@keyframes argus-source-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.argus-source-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--text-primary) 3%, transparent);
  border: 1px solid color-mix(in oklab, var(--text-primary) 8%, transparent);
  border-radius: var(--radius-md);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  scroll-margin-top: var(--space-5);
}
.argus-source-card:hover {
  transform: translateY(-1px);  /* subtle lift on hover, premium feel */
}
.argus-source-card:hover {
  background: color-mix(in oklab, var(--text-primary) 5%, transparent);
  border-color: color-mix(in oklab, var(--accent-teal) 25%, transparent);
}
.argus-source-card--highlight {
  background: color-mix(in oklab, var(--accent-teal) 12%, transparent);
  border-color: var(--accent-teal);
  animation: argus-source-pulse 1.4s ease-out;
}
@keyframes argus-source-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-teal) 40%, transparent); }
  60%  { box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent-teal) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-teal) 0%, transparent); }
}
.argus-source-num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: var(--weight-medium);
  color: var(--accent-teal);
  background: color-mix(in oklab, var(--accent-teal) 12%, transparent);
  border-radius: 9999px;
}
.argus-source-favicon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  margin-top: 2px;  /* visually align with first line of title */
  object-fit: contain;
  background: color-mix(in oklab, var(--text-primary) 4%, transparent);
}
.argus-source-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.argus-source-title {
  font-size: 0.92rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.argus-source-meta {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}

/* Follow-up question chips */
.argus-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in oklab, var(--text-primary) 8%, transparent);
}
.argus-followups-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
  width: 100%;
  margin-bottom: 2px;
}
.argus-followup-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: var(--weight-normal);
  line-height: 1.3;
  color: var(--text-primary);
  background: var(--bg-canvas);
  border: 1px solid color-mix(in oklab, var(--text-primary) 12%, transparent);
  border-radius: 9999px;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.argus-followup-chip:hover {
  background: color-mix(in oklab, var(--accent-teal) 8%, transparent);
  border-color: color-mix(in oklab, var(--accent-teal) 32%, transparent);
  color: var(--accent-teal);
  transform: translateY(-1px);
}
.argus-followup-chip:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}

/* ============================================================
   TODAY — ASK ARGUS HERO
   Centered Perplexity-style entry to the Argus chat. Sits at
   the top of the Today section above the world-status hero.
   ============================================================ */
/* Today landing — Perplexity-inspired hero. Massive whitespace,
   centered single focal point, subtle on-load entrance. The "wow"
   comes from restraint: one input bar + a few suggestion chips, with
   ~40vh of breathing room above. Everything else (today-hero score,
   daily brief, crisis cards, news) lives below the fold so the user
   discovers them by scrolling, not by being hit with them on entry. */
.today-ask-argus {
  /* Above-fold focus: Ask Argus hero owns the first viewport height.
     Other Today blocks (score, brief, crisis cards, news) live below
     fold, scroll-discovered. Mirrors Perplexity / ChatGPT focal-input
     pattern — single decision point on entry, no cognitive overload.
     Hint at the "more below" via subtle scroll affordance at bottom. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  padding: clamp(48px, 10vh, 120px) var(--space-4) var(--space-6);
  margin-bottom: var(--space-8);
  min-height: min(72vh, 640px);
  position: relative;
  animation: askArgusEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Subtle "more below" affordance — chevron pulse at bottom of hero
   that says "scroll for today's intelligence". Disappears once user
   scrolls (via scroll-driven CSS would be ideal but JS would also work
   later — for now CSS-only static). */
.today-ask-argus::after {
  content: "↓ today's intelligence";
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--text-primary) 38%, transparent);
  opacity: 0.6;
  animation: askArgusScrollHint 2.4s ease-in-out infinite;
}
@keyframes askArgusScrollHint {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50%      { transform: translateX(-50%) translateY(4px); opacity: 0.85; }
}
@keyframes askArgusEntry {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.today-ask-argus__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--text-primary);
  background: linear-gradient(
    180deg,
    var(--text-primary) 0%,
    color-mix(in oklab, var(--text-primary) 78%, transparent) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.today-ask-argus__sub {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.0625rem);
  line-height: 1.55;
  color: var(--text-tertiary);
  margin: 0;
  max-width: 560px;
  font-weight: 400;
}

.today-ask-argus__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-width: 720px;
  min-height: 64px;
  padding: 0 22px;
  background: var(--bg-canvas);
  color: var(--text-tertiary);
  border: 1px solid color-mix(in oklab, var(--text-primary) 14%, transparent);
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.02),
    0 4px 16px rgba(0,0,0,0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  margin-top: var(--space-4);
}
.today-ask-argus__input:hover {
  border-color: color-mix(in oklab, var(--text-primary) 24%, transparent);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.03),
    0 8px 28px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.today-ask-argus__input:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}
.today-ask-argus__placeholder {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.today-ask-argus__cmd {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-teal);
  background: color-mix(in oklab, var(--accent-teal) 10%, transparent);
  border-radius: 6px;
}

.today-ask-argus__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  max-width: 760px;
  margin-top: var(--space-2);
}
.today-ask-argus__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--text-primary);
  background: color-mix(in oklab, var(--text-primary) 4%, transparent);
  border: 1px solid color-mix(in oklab, var(--text-primary) 10%, transparent);
  border-radius: 9999px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.today-ask-argus__chip:hover {
  background: color-mix(in oklab, var(--accent-teal) 8%, transparent);
  border-color: color-mix(in oklab, var(--accent-teal) 35%, transparent);
  color: var(--accent-teal);
  transform: translateY(-1px);
}
.today-ask-argus__chip:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .today-ask-argus { padding: var(--space-5) var(--space-3) var(--space-4); }
  .today-ask-argus__title { font-size: 1.6rem; }
  .today-ask-argus__sub { font-size: 0.875rem; }
  .today-ask-argus__input { min-height: 48px; font-size: 0.9375rem; }
  .today-ask-argus__placeholder { font-size: 0.875rem; }
}

/* Rich bubble — structured multi-block response (briefing/crisis/news cards) */
.argus-rich {
  max-width: 96%;
  padding: var(--space-4);
  background: linear-gradient(135deg,
    var(--bg-surface) 0%,
    var(--bg-elevated) 100%);
  border: 1px solid color-mix(in oklab, var(--accent-teal) 18%, var(--border-color));
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18);
}
.argus-rich-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-teal);
  font-weight: 700;
  margin-bottom: 10px;
}
.argus-rich-sublabel {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  font-weight: 600;
  margin: 10px 0 6px;
}

/* Greeting block */
.argus-greet {
  background: transparent;
  border: none;
  padding: 4px 2px var(--space-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.argus-greet-date {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.argus-greet-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

/* Stats 4-col grid (Today: critical / alert / warning / watch) */
.argus-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.argus-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 6px;
  background: color-mix(in oklab, var(--text-primary) 4%, transparent);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.argus-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.argus-stat-num.critical { color: var(--status-critical); }
.argus-stat-num.alert    { color: var(--accent-orange); }
.argus-stat-num.warning  { color: var(--accent-yellow); }
.argus-stat-num.watch    { color: var(--accent-teal); }
.argus-stat-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-top: 4px;
  font-weight: 600;
}
.argus-stats-trend {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 0.76rem;
  font-weight: 500;
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in oklab, var(--text-primary) 8%, transparent);
}
.argus-stats-trend .trend-worse  { color: var(--accent-red); }
.argus-stats-trend .trend-better { color: var(--accent-green); }

/* Daily briefing headline/paragraph/watch list */
.argus-brief-headline {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0 0 10px;
  letter-spacing: var(--tracking-tight);
}
.argus-brief-p {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 10px;
}
.argus-brief-watch {
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--text-primary) 8%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.argus-watch-chip {
  display: inline-block;
  padding: 6px 10px;
  background: color-mix(in oklab, var(--status-critical) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--status-critical) 20%, transparent);
  border-radius: 6px;
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Crisis cards grid (country chips inside chat) */
.argus-crisis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.argus-crisis-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid color-mix(in oklab, var(--text-primary) 8%, var(--border-color));
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  color: inherit;
  text-align: left;
}
.argus-crisis-card:hover {
  background: color-mix(in oklab, var(--accent-teal) 6%, var(--bg-surface));
  border-color: color-mix(in oklab, var(--accent-teal) 35%, transparent);
  transform: translateY(-1px);
}
.argus-crisis-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.argus-crisis-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.argus-crisis-score {
  font-size: 0.92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.argus-crisis-score.level-critical { color: var(--status-critical); }
.argus-crisis-score.level-alert    { color: var(--accent-orange); }
.argus-crisis-score.level-warning  { color: var(--accent-yellow); }
.argus-crisis-score.level-watch    { color: var(--accent-teal); }
.argus-crisis-score.level-stable   { color: var(--accent-green); }
.argus-crisis-meta {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* News items (compact feed inside chat) */
.argus-news-item {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid color-mix(in oklab, var(--text-primary) 6%, transparent);
  transition: background 0.15s ease;
}
.argus-news-item:last-child { border-bottom: none; }
.argus-news-item:hover {
  background: color-mix(in oklab, var(--accent-teal) 5%, transparent);
  margin: 0 -10px;
  padding: 10px;
  border-radius: 6px;
}
.argus-news-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.argus-news-meta {
  display: block;
  font-size: 0.68rem;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Suggestion chips (quick-ask follow-ups) */
.argus-suggestions-wrap { padding: 4px 2px; }
.argus-suggestions       { background: transparent; }
.argus-suggestions-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  font-weight: 500;
}
.argus-suggestions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.argus-suggestion-chip {
  padding: 7px 12px;
  background: var(--bg-secondary);
  border: 1px solid color-mix(in oklab, var(--text-primary) 10%, var(--border-color));
  border-radius: 16px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.argus-suggestion-chip:hover {
  background: color-mix(in oklab, var(--accent-teal) 12%, transparent);
  border-color: color-mix(in oklab, var(--accent-teal) 40%, transparent);
  color: var(--text-primary);
}

/* Responsive */
@media (max-width: 640px) {
  .argus-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .argus-stat-num   { font-size: 1.2rem; }
  .argus-stat       { padding: 8px 4px; }
  .argus-crisis-grid { grid-template-columns: 1fr; }
  .argus-brief-headline { font-size: 0.88rem; }
  .argus-greet-title    { font-size: 1rem; }
}

/* ============================================================
   COUNTRY QUOTE (Bloomberg-style country detail modal)
   ------------------------------------------------------------
   Replaces the cyberpunk sticky-header patchwork with a clean
   ticker / quote line / meta strip + tabs pattern familiar to
   any analyst or journalist who has seen a Bloomberg security
   page or Investing.com equity page.
   Applied as .cp-quote modifier on the existing .cp-tabbed wrap.
   ============================================================ */
.cp-quote .cp-quote-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-4) var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Row 1: ticker line — ISO3 prominent + country name + region tag */
.cp-quote-ticker {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.cp-quote-iso3 {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-widest);
}

.cp-quote-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.cp-quote-region {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  margin-left: auto;
}

/* Row 2: the quote line — huge score + delta + risk label */
.cp-quote-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.cp-quote-score {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--text-primary);
}

.cp-quote-delta {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.cp-quote-delta.delta-up   { color: var(--accent-red); }     /* rising risk = bad = red */
.cp-quote-delta.delta-down { color: var(--signal-positive); } /* falling risk = good = green */
.cp-quote-delta.delta-flat { color: var(--text-tertiary); }

.cp-quote-delta-unit {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}

.cp-quote-risk {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--weight-bold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  margin-left: auto;
}
/* _riskClass() emits: critical | high | medium | low */
.cp-quote-risk.critical { color: var(--accent-red); background: color-mix(in oklab, var(--status-critical) 8%, transparent); }
.cp-quote-risk.high     { color: var(--status-high);           background: color-mix(in oklab, var(--status-high) 8%, transparent); }
.cp-quote-risk.medium   { color: var(--accent-yellow);           background: color-mix(in oklab, var(--accent-yellow) 6%, transparent); }
.cp-quote-risk.low      { color: var(--text-secondary); background: color-mix(in oklab, var(--text-primary) 4%, transparent); }

/* Huge score number — tint by risk class */
.cp-quote-score.critical { color: var(--accent-red); }
.cp-quote-score.high     { color: var(--status-high); }
.cp-quote-score.medium   { color: var(--accent-yellow); }
.cp-quote-score.low      { color: var(--text-secondary); }

/* Row 3: meta — dot separators, subtle, hugs the baseline */
.cp-quote-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding-bottom: var(--space-3);
  flex-wrap: wrap;
}

.cp-quote-meta-item {
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
}
.cp-quote-meta-item + .cp-quote-meta-item::before {
  content: '·';
  margin-right: var(--space-3);
  color: var(--border-color);
}

.cp-quote-meta-item--ai {
  color: var(--accent-teal);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
}

.cp-quote-sparkline {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
.cp-quote-sparkline svg { display: block; }

/* Tab bar sits flush below the meta row — Bloomberg/Investing pattern */
.cp-quote .cp-tab-bar {
  display: flex;
  gap: 0;
  margin: 0 calc(-1 * var(--space-5));
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border-color);
}
.cp-quote .cp-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.cp-quote .cp-tab:hover { color: var(--text-primary); }
.cp-quote .cp-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-teal);
  font-weight: var(--weight-semibold);
}

/* Overview tab content wrapper */
.cp-quote .cp-tab-content {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

/* Dimension bars — horizontal, full labels */
.cp-bars--overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.cp-bars--overview .cp-bar-row {
  display: grid;
  grid-template-columns: 88px 1fr 48px;
  align-items: center;
  gap: var(--space-3);
}
.cp-bar-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}
.cp-bars--overview .cp-bar-track {
  height: 8px;
  background: var(--bg-elevated);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.cp-bars--overview .cp-bar-fill {
  height: 100%;
  border-radius: var(--radius-xs);
  transition: width var(--transition-base);
}
.cp-bars--overview .cp-bar-score {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-align: right;
}
.cp-bar-score--none {
  color: var(--text-tertiary);
  font-weight: var(--weight-normal);
}
.cp-bar-score-amp {
  font-size: var(--text-xs);
  color: var(--signal-positive);
  margin-left: var(--space-1);
}

/* Section labels */
.cp-section-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  margin: var(--space-5) 0 var(--space-2);
}
.cp-section-label:first-child { margin-top: 0; }
.cp-section-label--with-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.cp-section-meta {
  text-transform: none;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-normal);
  color: var(--text-tertiary);
}

/* Outlook lead */
.cp-lead {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}
.cp-lead-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--weight-semibold);
  color: var(--accent-teal);
  flex-shrink: 0;
}
.cp-lead-text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

/* Trajectory alert box */
.cp-alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.cp-alert.urg-red    { background: color-mix(in oklab, var(--status-critical) 8%, transparent);  border-left: 3px solid var(--accent-red); }
.cp-alert.urg-orange { background: color-mix(in oklab, var(--status-high) 8%, transparent); border-left: 3px solid var(--status-high); }
.cp-alert.urg-yellow { background: color-mix(in oklab, var(--accent-yellow) 6%, transparent); border-left: 3px solid var(--accent-yellow); }

.cp-alert-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: color-mix(in oklab, var(--text-primary) 6%, transparent);
  text-transform: uppercase;
}
.cp-alert.urg-red    .cp-alert-badge { color: var(--accent-red); }
.cp-alert.urg-orange .cp-alert-badge { color: var(--status-high); }
.cp-alert.urg-yellow .cp-alert-badge { color: var(--accent-yellow); }

.cp-alert-text {
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  min-width: 200px;
}
.cp-alert-window {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: inherit;
  white-space: nowrap;
}

/* Driver tag row */
.cp-driver-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.cp-driver-tag {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
}
.cp-driver-tag--ml {
  color: var(--signal-positive);
  background: color-mix(in oklab, var(--accent-green) 8%, transparent);
}

/* Narrative body — reading-optimized paragraph */
.cp-narrative {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  max-width: 72ch;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ------------------------------------------------------------
   Fixed bottom-right stack. Replaces alert() and silent-success
   patterns across the app. Borrowed from Stripe / Linear / Vercel.
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast, 600);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  pointer-events: none;
  max-width: 420px;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  min-width: 240px;
  max-width: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
  cursor: pointer;
}
.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
}

.toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--bg-primary);
}

.toast__text {
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
}

.toast__action {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.toast__action:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-strong, color-mix(in oklab, var(--text-primary) 20%, transparent));
}

.toast__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--text-md);
  line-height: 1;
  padding: 0 0 0 var(--space-2);
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.toast__close:hover { opacity: 1; }

/* Variant colors */
.toast--success {
  border-left-color: var(--signal-positive);
}
.toast--success .toast__icon {
  background: var(--signal-positive);
}

.toast--error {
  border-left-color: var(--accent-red);
}
.toast--error .toast__icon {
  background: var(--accent-red);
}

.toast--warning {
  border-left-color: var(--status-high);
}
.toast--warning .toast__icon {
  background: var(--status-high);
}

.toast--info {
  border-left-color: var(--accent-teal);
}
.toast--info .toast__icon {
  background: var(--accent-teal);
}

@media (max-width: 600px) {
  .toast-container {
    bottom: var(--space-3);
    right: var(--space-3);
    left: var(--space-3);
    max-width: none;
  }
  .toast { min-width: 0; }
}

/* ============================================================
   LEGACY-PORTED — cluster-5a (intelligence + analysis blocks)
   ------------------------------------------------------------
   ew-* deep-* priority-* topic-* report-* pulse-* focus-*
   regional-* who-* qa-* trend-* narrative-* intel-*
   Ported verbatim from legacy-to-port/cluster-5a.css.
   Color conversions applied via batch sed (dark palette →
   Paper tokens). Residual dark tones to be iterated on
   feedback — Simone flags what looks off, we patch.
   ============================================================ */
/*  ============================================================
   LEGACY-PORTED — cluster-5a
   mode: list /tmp/cluster5a.txt
   extracted from: style.css + cyberpunk-2027.css (pruned)
   Review: token-map hex -> var(--accent-*), inline reference comments.
   ============================================================  */
/*   source: style.css   */

.trend-value {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/*   source: style.css   */

.focus-advisor-popup {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  min-width: 280px;
  max-width: 360px;
  animation: popupSlideIn 0.2s ease;
}
/*   source: style.css   */

.focus-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 0.9rem;
}
/*   source: style.css   */

.focus-popup-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 4px;
}
/*   source: style.css   */

.focus-popup-close:hover {
  color: var(--text-primary);
}
/*   source: style.css   */

.focus-popup-content {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/*   source: style.css   */

.focus-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
/*   source: style.css   */

.focus-item:hover {
  background: var(--bg-secondary);
}
/*   source: style.css   */

.focus-rank {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}
/*   source: style.css   */

.focus-country {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}
/*   source: style.css   */

.focus-reason {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
  display: block;
  width: 100%;
}
/*   source: style.css   */

.focus-popup-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
}
/*   source: style.css   */

.focus-popup-footer .btn-secondary {
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
/*   source: style.css   */

.focus-popup-footer .btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--accent);
}
/*   source: style.css   */

.trend-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100px;
  gap: var(--space-sm);
  padding: var(--space-md);
}
/*   source: style.css   */

.trend-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}
/*   source: style.css   */

.trend-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--accent-teal), var(--accent-blue));
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 10px;
  transition: height var(--transition-slow);
}
/*   source: style.css   */

.trend-value {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
}
/*   source: style.css   */

.trend-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
}
/*   source: style.css   */

.trend-stable {
  color: var(--text-tertiary);
}
/*   source: style.css   */

.priority-card-large {
  grid-row: span 2;
  padding: var(--space-lg);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  border-left: 5px solid var(--status-critical);
  display: flex;
  flex-direction: column;
}
/*   source: style.css   */

.priority-card-large.priority-critical {
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent-red) 10%, transparent) 0%, var(--bg-primary) 100%);
}
/*   source: style.css   */

.priority-rank-large {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-tertiary);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: var(--space-xs);
}
/*   source: style.css   */

.priority-content-large {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/*   source: style.css   */

.priority-country-large {
  font-size: 1.71rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}
/*   source: style.css   */

.priority-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
/*   source: style.css   */

.priority-stat {
  font-size: 0.93rem;
  color: var(--text-secondary);
  padding-left: var(--space-md);
  border-left: 2px solid var(--status-critical);
}
/*   source: style.css   */

.priority-drivers {
  font-size: 0.86rem;
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in oklab, var(--text-primary) 3%, transparent);
  border-radius: var(--radius-sm);
}
/*   source: style.css   */

.priority-action-large {
  margin-top: auto;
  font-size: 1rem;
  color: var(--accent-blue);
  font-weight: 500;
}
/*   source: style.css   */

.priority-small-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
/*   source: style.css   */

.priority-card-small {
  padding: var(--space-lg);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  border: 1px solid var(--border-color);
}
/*   source: style.css   */

.priority-card-small.priority-high {
  border-left: 4px solid var(--status-high);
}
/*   source: style.css   */

.priority-card-small.priority-warning {
  border-left: 4px solid var(--accent-blue);
}
/*   source: style.css   */

.priority-rank-small {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-tertiary);
  opacity: 0.5;
  line-height: 1;
}
/*   source: style.css   */

.priority-content-small {
  flex: 1;
}
/*   source: style.css   */

.priority-country-small {
  font-size: 1.14rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}
/*   source: style.css   */

.priority-reason-small {
  font-size: 0.93rem;
  color: var(--text-secondary);
}
/*   source: style.css   */

.cp-trend.trend-stable { color: var(--text-secondary); }
/*   source: style.css   */

.narrative-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}
/*   source: style.css   */

.narrative-country {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/*   source: style.css   */

.narrative-score {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}
/*   source: style.css   */

.qa-suggestion {
  padding: 5px 12px;
  font-size: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
/*   source: style.css   */

.qa-suggestion:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/*   source: style.css   */

.intel-card {
  margin: 0;
}
/*   source: style.css   */

.intel-card .card-header {
  padding: var(--space-sm) var(--space-md);
}
/*   source: style.css   */

.intel-card .card-header h3 {
  font-size: 0.85rem;
}
/*   source: style.css   */

.intel-report-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
/*   source: style.css   */

.intel-report-controls .topic-chips {
  margin-bottom: var(--space-sm);
}
/*   source: style.css   */

.intel-report-row {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}
/*   source: style.css   */

.intel-select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 0.78rem;
}
/*   source: style.css   */

.qa-answer {
  line-height: 1.7;
  color: var(--text-primary);
  font-size: 0.93rem;
}
/*   source: style.css   */

.narrative-section {
  margin-bottom: var(--space-md);
}
/*   source: style.css   */

.narrative-section:first-child {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
}
/*   source: style.css   */

.narrative-section-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 4px;
  text-transform: uppercase;
}
/*   source: style.css   */

.narrative-section:first-child .narrative-section-label {
  color: var(--warning);
}
/*   source: style.css   */

.narrative-section p {
  margin: 0;
}
/*   source: style.css   */

.qa-answer .qa-cite {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent-indigo) 12%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: super;
  line-height: 1;
  transition: background 0.15s;
  text-decoration: none;
}
/*   source: style.css   */

.qa-answer .qa-cite:hover {
  background: color-mix(in oklab, var(--accent-indigo) 25%, transparent);
}
/*   source: style.css   */

.qa-sources {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}
/*   source: style.css   */

.qa-sources-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
/*   source: style.css   */

.qa-source-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.85rem;
}
/*   source: style.css   */

.qa-source-idx {
  font-weight: 700;
  color: var(--accent);
  min-width: 20px;
  flex-shrink: 0;
}
/*   source: style.css   */

.qa-source-link {
  color: var(--text-primary);
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*   source: style.css   */

.qa-source-link:hover {
  color: var(--accent);
}
/*   source: style.css   */

.qa-source-meta {
  color: var(--text-secondary);
  font-size: 0.8rem;
  flex-shrink: 0;
}
/*   source: style.css   */

.qa-loading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
/*   source: style.css   */

.qa-loading .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
/*   source: style.css   */

.who-outbreak-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/*   source: style.css   */

.who-outbreak-item {
  padding: 10px 12px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--danger);
}
/*   source: style.css   */

.who-outbreak-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/*   source: style.css   */

.who-outbreak-disease {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}
/*   source: style.css   */

.who-outbreak-country {
  font-size: 0.75rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}
/*   source: style.css   */

.who-outbreak-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
/*   source: style.css   */

.who-outbreak-date {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}
/*   source: style.css   */

.who-outbreak-link {
  font-size: 0.7rem;
  color: var(--accent);
  text-decoration: none;
}
/*   source: style.css   */

.who-outbreak-link:hover {
  text-decoration: underline;
}
/*   source: style.css   */

.rd-trend.trend-stable { color: var(--text-tertiary); }
/*   source: style.css   */

.ew-forecast-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--status-critical);
}
/*   source: style.css   */

.ew-forecast-card.alert-level {
  border-left-color: var(--status-high);
}
/*   source: style.css   */

.ew-forecast-card.warning-level {
  border-left-color: var(--accent-blue);
}
/*   source: style.css   */

.ew-forecast-score {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 40px;
  text-align: center;
  font-feature-settings: "tnum";
}
/*   source: style.css   */

.ew-forecast-content {
  flex: 1;
  min-width: 0;
}
/*   source: style.css   */

.ew-forecast-country {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
/*   source: style.css   */

.ew-forecast-drivers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
/*   source: style.css   */

.ew-forecast-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
/*   source: style.css   */

.ew-score-big {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  font-feature-settings: "tnum";
  min-width: 42px;
  display: inline-block;
}
/*   source: style.css   */

.ew-score-big.score-critical {
  color: var(--status-critical);
}
/*   source: style.css   */

.ew-score-big.score-alert {
  color: var(--status-high);
}
/*   source: style.css   */

.ew-score-big.score-warning {
  color: var(--accent-blue);
}
/*   source: style.css   */

.ew-cluster-card {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--border-color);
  transition: all 0.2s ease;
  cursor: pointer;
}
/*   source: style.css   */

.ew-cluster-card:hover {
  transform: scale(1.01) translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/*   source: style.css   */

.ew-cluster-card.cluster-critical {
  border-left-color: var(--status-critical);
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent-red) 8%, transparent) 0%, var(--bg-primary) 100%);
}
/*   source: style.css   */

.ew-cluster-card.cluster-critical:hover {
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent-red) 25%, transparent);
}
/*   source: style.css   */

.ew-cluster-card.cluster-high {
  border-left-color: var(--status-high);
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent-orange) 8%, transparent) 0%, var(--bg-primary) 100%);
}
/*   source: style.css   */

.ew-cluster-card.cluster-high:hover {
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent-orange) 25%, transparent);
}
/*   source: style.css   */

.ew-cluster-card.cluster-warning {
  border-left-color: var(--accent-blue);
}
/*   source: style.css   */

.ew-cluster-card.cluster-warning:hover {
  box-shadow: 0 4px 16px color-mix(in oklab, var(--accent-teal) 25%, transparent);
}
/*   source: style.css   */

.ew-cluster-icon {
  font-size: 1.14rem;
  flex-shrink: 0;
}
/*   source: style.css   */

.ew-cluster-content {
  flex: 1;
  min-width: 0;
}
/*   source: style.css   */

.ew-cluster-name {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}
/*   source: style.css   */

.ew-cluster-desc {
  font-size: 0.79rem;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
/*   source: style.css   */

.ew-cluster-countries {
  font-size: 0.71rem;
  color: var(--text-tertiary);
}
/*   source: style.css   */

.ew-cluster-sync {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 6px;
  background: color-mix(in oklab, var(--accent-orange) 12%, transparent);
  border-radius: var(--radius-xs);
  font-size: 0.64rem;
  color: var(--status-high);
  font-weight: 500;
}
/*   source: style.css   */

.topic-stat {
  text-align: center;
}
/*   source: style.css   */

.topic-stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}
/*   source: style.css   */

.topic-stat-label {
  font-size: 0.71rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
/*   source: style.css   */

.topic-headline-item,
.topic-report-item {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-subtle);
}
/*   source: style.css   */

.topic-headline-item:last-child,
.topic-report-item:last-child {
  border-bottom: none;
}
/*   source: style.css   */

.topic-headline-title,
.topic-report-title {
  font-size: 0.79rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}
/*   source: style.css   */

.topic-headline-title a,
.topic-report-title a {
  color: inherit;
  text-decoration: none;
}
/*   source: style.css   */

.topic-headline-title a:hover,
.topic-report-title a:hover {
  color: var(--accent-blue);
}
/*   source: style.css   */

.topic-headline-meta,
.topic-report-meta {
  font-size: 0.64rem;
  color: var(--text-tertiary);
  display: flex;
  gap: var(--space-xs);
}
/*   source: style.css   */

.topic-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.71rem;
}
/*   source: style.css   */

.topic-country-chip .country-name {
  color: var(--text-primary);
  font-weight: 500;
}
/*   source: style.css   */

.topic-country-chip .article-count {
  color: var(--text-tertiary);
}
/*   source: style.css   */

.topic-country-chip.spike-critical {
  border-left: 3px solid var(--status-critical);
}
/*   source: style.css   */

.topic-country-chip.spike-high {
  border-left: 3px solid var(--status-high);
}
/*   source: style.css @media (max-width: 1024px)   */

@media (max-width: 1024px) {

  .priority-card-large {
    grid-row: span 1;
  }
}
/*   source: style.css @media (max-width: 1024px)   */

@media (max-width: 1024px) {

  .priority-small-grid {
    flex-direction: row;
    gap: var(--space-md);
  }
}
/*   source: style.css @media (max-width: 1024px)   */

@media (max-width: 1024px) {

  .priority-card-small {
    flex: 1;
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .priority-card-large {
    padding: var(--space-lg);
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .priority-rank-large {
    font-size: 2rem;
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .priority-country-large {
    font-size: 1.43rem;
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .priority-small-grid {
    flex-direction: column;
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .priority-card-small {
    flex: none;
  }
}
/*   source: style.css @media (max-width: 480px)   */

@media (max-width: 480px) {

  .priority-card-large {
    border-left-width: 4px;
    padding: var(--space-md);
  }
}
/*   source: style.css @media (max-width: 480px)   */

@media (max-width: 480px) {

  .priority-card-small {
    padding: var(--space-md);
    border-left-width: 3px;
  }
}
/*   source: style.css   */

.topic-report-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
/*   source: style.css   */

.report-actions {
  display: flex;
  gap: var(--space-xs);
}
/*   source: style.css   */

.report-section {
  margin-bottom: var(--space-lg);
}
/*   source: style.css   */

.report-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
/*   source: style.css   */

.report-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}
/*   source: style.css   */

.report-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}
/*   source: style.css   */

.report-title-row h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
/*   source: style.css   */

.report-trend-badge {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}
/*   source: style.css   */

.report-trend-badge.trend-up {
  background: color-mix(in oklab, var(--status-critical) 15%, transparent);
  color: var(--status-critical);
}
/*   source: style.css   */

.report-trend-badge.trend-down {
  background: color-mix(in oklab, var(--accent-green) 15%, transparent);
  color: var(--status-low);
}
/*   source: style.css   */

.report-trend-badge.trend-stable {
  background: color-mix(in oklab, var(--text-primary) 10%, transparent);
  color: var(--text-secondary);
}
/*   source: style.css   */

.report-trend-badge.trend-insufficient {
  background: color-mix(in oklab, var(--status-high) 15%, transparent);
  color: var(--status-high);
  font-size: 0.6rem;
}
/*   source: style.css   */

.report-trend-badge.trend-signal {
  background: color-mix(in oklab, var(--accent-teal) 15%, transparent);
  color: var(--accent-teal);
  font-size: 0.65rem;
}
/*   source: style.css   */

.report-meta-row {
  display: flex;
  gap: var(--space-md);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}
/*   source: style.css   */

.report-actions {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}
/*   source: style.css   */

.report-actions button {
  padding: 6px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-fast);
}
/*   source: style.css   */

.report-actions button:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
/*   source: style.css   */

.report-stats {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
/*   source: style.css   */

.report-developments {
  list-style: none;
  padding: 0;
  margin: 0;
}
/*   source: style.css   */

.dev-trend.trend-stable { color: var(--text-muted); }
/*   source: style.css   */

.report-section.collapsible .section-toggle {
  cursor: pointer;
  user-select: none;
}
/*   source: style.css   */

.report-section.collapsible .toggle-icon {
  margin-left: auto;
  font-size: 0.7rem;
  transition: transform 0.2s;
}
/*   source: style.css   */

.report-section.collapsible.collapsed .toggle-icon {
  transform: rotate(-90deg);
}
/*   source: style.css   */

.report-section.collapsible.collapsed .report-sources {
  display: none;
}
/*   source: style.css   */

.report-sources {
  max-height: 300px;
  overflow-y: auto;
}
/*   source: style.css   */

.pulse-count {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  font-feature-settings: "tnum";
}
/*   source: style.css   */

.pulse-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}
/*   source: style.css   */

.pulse-card:hover {
  border-color: var(--accent-teal);
  background: var(--bg-highlight);
  transform: scale(1.02) translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
/*   source: style.css   */

.pulse-card.selected {
  border-color: var(--accent-teal);
  background: var(--bg-highlight);
  box-shadow: 0 0 0 2px var(--accent-teal);
}
/*   source: style.css   */

.pulse-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
/*   source: style.css   */

.pulse-region-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
/*   source: style.css   */

.pulse-counts {
  display: flex;
  gap: 4px;
}
/*   source: style.css   */

.pulse-counts .pulse-count {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
}
/*   source: style.css   */

.pulse-counts .pulse-count.critical {
  background: var(--status-critical);
  color: white;
}
/*   source: style.css   */

.pulse-counts .pulse-count.high {
  background: var(--status-high);
  color: white;
}
/*   source: style.css   */

.pulse-hotspot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-subtle);
}
/*   source: style.css   */

.pulse-hotspot.secondary {
  opacity: 0.7;
  border-bottom: none;
}
/*   source: style.css   */

.pulse-hotspot-name {
  font-size: 0.8rem;
  color: var(--text-primary);
}
/*   source: style.css   */

.pulse-hotspot-score {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
/*   source: style.css   */

.pulse-hotspot-score.critical {
  background: color-mix(in oklab, var(--status-critical) 20%, transparent);
  color: var(--status-critical);
}
/*   source: style.css   */

.pulse-hotspot-score.alert,
.pulse-hotspot-score.high {
  background: color-mix(in oklab, var(--accent-orange) 20%, transparent);
  color: var(--status-high);
}
/*   source: style.css   */

.pulse-driver {
  font-size: 0.65rem;
  color: var(--accent-teal);
  margin-top: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/*   source: style.css   */

.pulse-no-data {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-xs) 0;
}
/*   source: style.css   */

.regional-brief-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-lg);
}
/*   source: style.css   */

.regional-brief-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
/*   source: style.css   */

.regional-brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
}
/*   source: style.css   */

.regional-brief-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
/*   source: style.css   */

.regional-brief-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
/*   source: style.css   */

.regional-brief-close:hover {
  color: var(--text-primary);
}
/*   source: style.css   */

.regional-brief-body {
  padding: var(--space-lg);
  max-height: 60vh;
  overflow-y: auto;
}
/*   source: style.css   */

.regional-brief-body .loading-spinner {
  margin: var(--space-lg) auto;
}
/*   source: style.css   */

.regional-brief-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
}
/*   source: style.css   */

.regional-brief-meta {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  color: var(--text-muted);
}
/*   source: style.css   */

.regional-brief-error {
  color: var(--status-critical);
  text-align: center;
  padding: var(--space-lg);
}
/*   source: style.css   */

.deep-analysis-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}
/*   source: style.css   */

.deep-analysis-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
/*   source: style.css   */

.deep-analysis-title h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
/*   source: style.css   */

.deep-analysis-country {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
/*   source: style.css   */

.deep-analysis-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/*   source: style.css   */

.deep-score-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  font-feature-settings: "tnum";
}
/*   source: style.css   */

.deep-score-value.critical { color: var(--status-critical); }
/*   source: style.css   */

.deep-score-value.alert { color: var(--status-high); }
/*   source: style.css   */

.deep-score-value.warning { color: var(--status-medium); }
/*   source: style.css   */

.deep-score-value.watch { color: var(--text-secondary); }
/*   source: style.css   */

.deep-score-value.stable { color: var(--status-stable); }
/*   source: style.css   */

.deep-score-level {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
/*   source: style.css   */

.deep-analysis-weights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
/*   source: style.css   */

.deep-analysis-section {
  margin-bottom: var(--space-lg);
}
/*   source: style.css   */

.deep-analysis-section h5 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
/*   source: style.css   */

.deep-analysis-section p {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}
/*   source: style.css   */

.deep-drivers-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/*   source: style.css   */

.deep-drivers-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: 0.85rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
/*   source: style.css   */

.deep-drivers-list li:last-child {
  border-bottom: none;
}
/*   source: style.css   */

.deep-drivers-list li::before {
  content: "→";
  color: var(--accent-teal);
  font-weight: 600;
}
/*   source: style.css   */

.deep-trajectory {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
/*   source: style.css   */

.deep-trajectory.deteriorating {
  background: color-mix(in oklab, var(--status-critical) 15%, transparent);
  color: var(--status-critical);
}
/*   source: style.css   */

.deep-trajectory.stable {
  background: color-mix(in oklab, var(--accent-yellow) 15%, transparent);
  color: var(--accent-yellow);
}
/*   source: style.css   */

.deep-trajectory.improving {
  background: color-mix(in oklab, var(--accent-green) 15%, transparent);
  color: var(--status-stable);
}
/*   source: style.css   */

.deep-hotspots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
/*   source: style.css   */

.deep-confidence {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
}
/*   source: style.css   */

.deep-analysis-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
}
/*   source: style.css   */

.deep-analysis-error {
  padding: var(--space-lg);
  text-align: center;
  color: var(--status-critical);
}
/*   source: style.css   */

.deep-analysis-error svg {
  margin-bottom: var(--space-sm);
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {
  .deep-analysis-weights {
    grid-template-columns: repeat(2, 1fr);
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .deep-analysis-header {
    flex-direction: column;
    gap: var(--space-md);
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .deep-analysis-score {
    align-items: flex-start;
  }
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .pulse-card {
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-secondary) 90%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 95%, transparent) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 12%, transparent) !important;
  border-radius: 3px !important;
  position: relative;
  overflow: hidden;
  transition: all 0.18s ease-out;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .pulse-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cp-accent) 50%, transparent 100%);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .pulse-card:hover {
  border-color: var(--cp-accent) !important;
  box-shadow: 0 0 20px color-mix(in oklab, var(--accent-teal) 18%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .pulse-card .pulse-region-name {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: var(--cp-accent);
  font-weight: 600;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .pulse-card .pulse-hotspot-score {
  font-family: var(--cp-mono);
  font-variant-numeric: tabular-nums;
}
/*   source: cyberpunk-2027.css   */

.topic-report-output .report-title-row h3 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--text-primary);
}
/*   source: cyberpunk-2027.css   */

.topic-report-output .report-trend-badge {
  font-family: var(--cp-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.4) !important;
  font-size: 0.62rem;
  padding: 2px 8px;
  border-radius: 2px;
}
/* ============================================================
   LEGACY-PORTED — cluster-5b (mop-up: ai-modal + rd/live/
   humanitarian/weight/sidebar/driver/wc/source/hazard/footer/
   country/navbar residues + singletons)
   ============================================================ */
/*  ============================================================
   LEGACY-PORTED — cluster-5b
   mode: list /tmp/cluster5b.txt
   extracted from: style.css + cyberpunk-2027.css (pruned)
   Review: token-map hex -> var(--accent-*), inline reference comments.
   ============================================================  */
/*   source: style.css   */

.value-cell,
.data-table td:nth-child(n+2) {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/*   source: style.css   */

.navbar-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/*   source: style.css   */

.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1.29rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
}
/*   source: style.css   */

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
/*   source: style.css   */

.card-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/*   source: style.css   */

.card-header h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: normal;
}
/*   source: style.css   */

.card-body {
  padding: var(--space-lg);
}
/*   source: style.css   */

.driver-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-lg);
  gap: 6px;
  min-height: 180px;
}
/*   source: style.css   */

.driver-empty-icon {
  font-size: 1.8rem;
  opacity: 0.4;
}
/*   source: style.css   */

.driver-empty-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}
/*   source: style.css   */

.driver-empty-desc {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  text-align: center;
  max-width: 280px;
  line-height: 1.5;
}
/*   source: style.css   */

.data-table {
  width: 100%;
  border-collapse: collapse;
}
/*   source: style.css   */

.data-table th {
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  padding: var(--space-md);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  z-index: 10;
}
/*   source: style.css   */

.data-table td {
  padding: var(--space-md);
  font-size: 1rem;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}
/*   source: style.css   */

.data-table tbody tr:hover {
  background: var(--bg-hover);
}
/*   source: style.css   */

.data-table .critical-row {
  border-left: 3px solid var(--status-critical);
}
/*   source: style.css   */

.data-table .high-row {
  border-left: 3px solid var(--status-high);
}
/*   source: style.css   */

.data-table .value-cell {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/*   source: style.css   */

.data-table.compact th,
.data-table.compact td {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.93rem;
}
/*   source: style.css   */

.data-table.compact th {
  font-size: 0.86rem;
}
/*   source: style.css   */

.hazard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-md);
}
/*   source: style.css   */

.hazard-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}
/*   source: style.css   */

.hazard-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--space-xs);
}
/*   source: style.css   */

.hazard-meta {
  display: flex;
  gap: var(--space-sm);
}
/*   source: style.css   */

.app-footer {
  margin-top: var(--space-3xl);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  border-top: 1px solid var(--border-subtle);
}
/*   source: style.css   */

.footer-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}
/*   source: style.css   */

.footer-tagline {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/*   source: style.css   */

.footer-contact {
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  justify-content: center;
}
/*   source: style.css   */

.footer-tagline {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
}
/*   source: style.css   */

.footer-legal {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}
/*   source: style.css   */

.animate-in {
  animation: fadeIn 0.15s ease-out forwards;
}
/*   source: style.css   */

.text-secondary { color: var(--text-secondary); }
/*   source: style.css   */

.text-muted { color: var(--text-muted); }
/*   source: style.css   */

.hidden { display: none; }
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .navbar-brand {
    font-size: 1rem;
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .data-table th,
  .data-table td {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8rem;
  }
}
/*   source: style.css   */

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: var(--space-sm);
  border: 2px solid var(--text-tertiary);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
/*   source: style.css   */

.loading-dots::after {
  content: '';
  animation: loadingDots 1.5s infinite;
}
/*   source: style.css   */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 25%,
    var(--bg-secondary) 50%,
    var(--bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
/*   source: style.css   */

.skeleton-row .skeleton {
  flex: 1;
}
/*   source: style.css   */

.alert-skeleton {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  margin-bottom: var(--space-xs);
}
/*   source: style.css   */

.alert-skeleton {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}
/*   source: style.css   */

.country-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
/*   source: style.css   */

.headline-chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/*   source: style.css   */

.headline-chip {
  display: block;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95%;
  padding: 2px 0;
  border-left: 2px solid var(--accent);
  padding-left: var(--space-xs);
  opacity: 0.85;
}
/*   source: style.css   */

.headline-chip:hover {
  color: var(--text-secondary);
  opacity: 1;
}
/*   source: style.css   */

.critical-row .headline-chip {
  border-left-color: var(--danger);
}
/*   source: style.css   */

.high-row .headline-chip {
  border-left-color: var(--warning);
}
/*   source: style.css   */

.tab-content {
  position: relative;
}
/*   source: style.css   */

.drivers-list {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: var(--space-xs);
}
/*   source: style.css   */

.driver-chip {
  font-size: 0.65rem;
  padding: 2px 6px;
  background: color-mix(in oklab, var(--text-primary) 5%, transparent);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
}
/*   source: style.css   */

.confirmed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: var(--accent-green);
}
/*   source: style.css   */

.confirmed-badge::before {
  content: "✓";
}
/*   source: style.css   */

.ai-fab {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--accent-blue);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: var(--shadow-lg);
  transition: background var(--transition-fast), transform var(--transition-fast);
  z-index: 500;
}
/*   source: style.css   */

.ai-fab:hover {
  background: #5cb3ff;
  transform: scale(1.05);
}
/*   source: style.css   */

.ai-fab:active {
  transform: scale(0.95);
}
/*   source: style.css   */

.ai-fab svg {
  width: 24px;
  height: 24px;
}
/*   source: style.css   */

.fab-label {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {
  .ai-fab {
    bottom: var(--space-lg);
    right: var(--space-lg);
    width: 48px;
    height: 48px;
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .ai-fab svg {
    width: 20px;
    height: 20px;
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .fab-label {
    display: none;
  }
}
/*   source: style.css   */

.ai-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
/*   source: style.css   */

.ai-modal.hidden {
  display: none;
}
/*   source: style.css   */

.ai-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
}
/*   source: style.css   */

.ai-modal-content {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: modalFadeIn 0.15s ease-out;
}
/*   source: style.css   */

.ai-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}
/*   source: style.css   */

.ai-modal-header h2 {
  font-size: 1.29rem;
  font-weight: 500;
}
/*   source: style.css   */

.ai-modal-close {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.43rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
/*   source: style.css   */

.ai-modal-close:hover {
  background: var(--bg-hover);
}
/*   source: style.css   */

.ai-modal-body {
  padding: var(--space-lg);
  max-height: calc(85vh - 80px);
  overflow-y: auto;
}
/*   source: style.css   */

.ai-country-selector {
  margin-bottom: var(--space-lg);
}
/*   source: style.css   */

.ai-country-selector select {
  width: 100%;
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
/*   source: style.css   */

.ai-country-selector select:focus {
  outline: none;
  border-color: var(--accent-indigo);
}
/*   source: style.css   */

.ai-results {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}
/*   source: style.css   */

.ai-result-section {
  margin-bottom: var(--space-lg);
}
/*   source: style.css   */

.ai-result-section h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}
/*   source: style.css   */

.ai-result-section ul {
  list-style: none;
}
/*   source: style.css   */

.ai-result-section li {
  position: relative;
  padding-left: var(--space-md);
  margin-bottom: var(--space-sm);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary);
}
/*   source: style.css   */

.ai-result-section li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-indigo);
  font-weight: bold;
}
/*   source: style.css   */

.ai-custom-answer {
  padding: var(--space-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-primary);
}
/*   source: style.css   */

.ai-result-meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.7rem;
  color: var(--text-muted);
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {
  .ai-modal {
    padding: 0;
    align-items: flex-end;
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .ai-modal-content {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}
/*   source: style.css   */

.data-table .value-cell {
  font-weight: 600;
  font-feature-settings: "tnum";
}
/*   source: style.css   */

.data-table tbody tr:first-child {
  background: color-mix(in oklab, var(--status-critical) 8%, transparent);
}
/*   source: style.css   */

.data-table tbody tr:first-child td {
  font-weight: 600;
}
/*   source: style.css   */

.news-signal-section.hidden {
  display: none;
}
/*   source: style.css   */

.humanitarian-reports-section {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
}
/*   source: style.css   */

.humanitarian-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent-teal);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-xs);
}
/*   source: style.css   */

.humanitarian-reports-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/*   source: style.css   */

.humanitarian-reports-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  font-size: 0.8rem;
}
/*   source: style.css   */

.humanitarian-link {
  color: var(--accent-teal);
  text-decoration: none;
  flex: 1;
}
/*   source: style.css   */

.humanitarian-link:hover {
  text-decoration: underline;
}
/*   source: style.css   */

.humanitarian-source {
  font-size: 0.6rem;
  color: var(--accent-teal);
  background: color-mix(in oklab, var(--accent-teal) 15%, transparent);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-weight: 600;
}
/*   source: style.css   */

.app-layout {
  display: flex;
  min-height: calc(100vh - 56px);
}
/*   source: style.css   */

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-md);
}
/*   source: style.css   */

.sidebar-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.9;
}
/*   source: style.css   */

.sidebar-icon svg {
  width: 24px;
  height: 24px;
}
/*   source: style.css   */

.sidebar-item.active .sidebar-icon {
  opacity: 1;
}
/*   source: style.css   */

.sidebar-item:hover .sidebar-icon {
  opacity: 1;
}
/*   source: style.css   */

.sidebar-footer {
  padding: var(--space-lg) var(--space-md);
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
}
/*   source: style.css   */

.sidebar-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/*   source: style.css   */

.sidebar-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
/*   source: style.css   */

.sidebar-toggle:hover {
  background: var(--bg-hover);
}
/*   source: style.css   */

.main-content {
  flex: 1;
  padding: var(--space-lg) var(--space-xl);
  max-width: min(95vw, 1400px);
  margin: 0 auto;
  overflow-x: hidden;
}
/*   source: style.css   */

.content-section {
  display: none !important;
  opacity: 0;
  transform: translateY(10px);
  overflow: hidden;
  height: 0;
  pointer-events: none;
}
/*   source: style.css   */

.content-section.active {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
  height: auto;
  pointer-events: auto;
  animation: pageSlideIn 0.3s ease-out;
}
/*   source: style.css   */

.section-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
/*   source: style.css   */

.export-buttons {
  display: flex;
  gap: 4px;
}
/*   source: style.css   */

.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}
/*   source: style.css   */

.export-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
  border-color: var(--accent);
}
/*   source: style.css   */

.nowcast-table-panel .card-body {
  max-height: 70vh;
  overflow-y: auto;
}
/*   source: style.css   */

.country-detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
/*   source: style.css   */

.country-section {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}
/*   source: style.css   */

.country-section h4 {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/*   source: style.css   */

.country-narrative-container {
  margin-bottom: var(--space-md);
}
/*   source: style.css   */

.qa-response.hidden { display: none; }
/*   source: style.css   */

.intel-card .card-header {
  padding: var(--space-sm) var(--space-md);
}
/*   source: style.css   */

.intel-card .card-header h3 {
  font-size: 0.85rem;
}
/*   source: style.css   */

.rd-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/*   source: style.css   */

.rd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
/*   source: style.css   */

.rd-row:hover {
  background: var(--bg-hover);
}
/*   source: style.css   */

.rd-score {
  width: 32px;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 2px 0;
  border-radius: 4px;
  flex-shrink: 0;
}
/*   source: style.css   */

.rd-score.critical { background: color-mix(in oklab, var(--status-critical) 15%, transparent); color: var(--status-critical); }
/*   source: style.css   */

.rd-score.high { background: color-mix(in oklab, var(--status-high) 15%, transparent); color: var(--status-high); }
/*   source: style.css   */

.rd-score.medium { background: color-mix(in oklab, var(--accent-teal) 15%, transparent); color: var(--status-medium); }
/*   source: style.css   */

.rd-score.low { background: color-mix(in oklab, var(--accent-green) 15%, transparent); color: var(--status-low); }
/*   source: style.css   */

.rd-name {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 500;
}
/*   source: style.css   */

.rd-trend {
  font-size: 0.8rem;
  font-weight: 600;
  width: 50px;
  text-align: right;
  flex-shrink: 0;
}
/*   source: style.css   */

.rd-trend.trend-up { color: var(--status-critical); }
/*   source: style.css   */

.rd-trend.trend-down { color: var(--status-low); }
/*   source: style.css   */

.rd-trend.trend-stable { color: var(--text-tertiary); }
/*   source: style.css   */

.rd-driver {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  width: 90px;
  text-align: right;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*   source: style.css   */

.horizon-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.71rem;
  font-weight: 600;
}
/*   source: style.css   */

.horizon-badge.urgent {
  background: color-mix(in oklab, var(--accent-red) 15%, transparent);
  color: var(--status-critical);
}
/*   source: style.css   */

.horizon-badge.soon {
  background: color-mix(in oklab, var(--accent-orange) 15%, transparent);
  color: var(--status-high);
}
/*   source: style.css   */

.horizon-badge.extended {
  background: color-mix(in oklab, var(--accent-green) 15%, transparent);
  color: var(--status-low);
}
/*   source: style.css @media (min-width: 1441px)   */

@media (min-width: 1441px) {
  .main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-2xl);
  }
}
/*   source: style.css @media (max-width: 1440px) and (min-width: 1025px)   */

@media (max-width: 1440px) and (min-width: 1025px) {
  .main-content {
    padding: var(--space-lg) var(--space-xl);
    max-width: min(90vw, 1200px);
  }
}
/*   source: style.css @media (max-width: 1024px)   */

@media (max-width: 1024px) {

  .sidebar-nav {
    padding: 0 var(--space-md);
  }
}
/*   source: style.css @media (max-width: 1024px)   */

@media (max-width: 1024px) {

  .sidebar-footer {
    display: block;
  }
}
/*   source: style.css @media (max-width: 1024px)   */

@media (max-width: 1024px) {

  .sidebar-toggle {
    display: flex;
  }
}
/*   source: style.css @media (max-width: 1024px)   */

@media (max-width: 1024px) {

  .main-content {
    padding: var(--space-md);
    max-width: 100%;
  }
}
/*   source: style.css @media (max-width: 1024px)   */

@media (max-width: 1024px) {

  .nowcast-table-panel .card-body {
    max-height: none;
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {

  .navbar-brand {
    font-size: 1.14rem;
  }
}
/*   source: style.css   */

.app-footer {
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}
/*   source: style.css   */

.daily-briefing-card .card-header h3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
/*   source: style.css   */

.daily-briefing-card .card-header h3::before {
  content: "📰";
}
/*   source: style.css   */

.btn-generate-report {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent-teal);
  color: var(--bg-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  transition: var(--transition-fast);
}
/*   source: style.css   */

.btn-generate-report:hover {
  filter: brightness(1.1);
}
/*   source: style.css   */

.btn-generate-report:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/*   source: style.css   */

.btn-generate-report.loading {
  position: relative;
  color: transparent;
}
/*   source: style.css   */

.btn-generate-report.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: var(--bg-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
/*   source: style.css   */

.development-item {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-teal);
}
/*   source: style.css   */

.source-item {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-subtle);
}
/*   source: style.css   */

.source-item:last-child {
  border-bottom: none;
}
/*   source: style.css   */

.source-link {
  font-size: 0.8rem;
  color: var(--text-primary);
  text-decoration: none;
  display: block;
  margin-bottom: 2px;
  line-height: 1.3;
}
/*   source: style.css   */

.source-link:hover {
  color: var(--accent-teal);
}
/*   source: style.css   */

.coverage-quality {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  margin-left: auto;
}
/*   source: style.css   */

.coverage-quality .quality-label {
  color: var(--text-muted);
}
/*   source: style.css   */

.coverage-quality .quality-value {
  font-weight: 600;
}
/*   source: style.css   */

.development-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-teal);
}
/*   source: style.css   */

.development-item.increasing {
  border-left-color: var(--status-critical);
}
/*   source: style.css   */

.development-item.decreasing {
  border-left-color: var(--status-low);
}
/*   source: style.css   */

.dev-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}
/*   source: style.css   */

.dev-text {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
/*   source: style.css   */

.dev-trend {
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}
/*   source: style.css   */

.dev-trend.trend-stable { color: var(--text-muted); }
/*   source: style.css   */

.conf-badge {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
}
/*   source: style.css   */

.conf-badge.conf-high {
  background: color-mix(in oklab, var(--accent-green) 15%, transparent);
  color: var(--status-low);
}
/*   source: style.css   */

.conf-badge.conf-med {
  background: color-mix(in oklab, var(--status-high) 15%, transparent);
  color: var(--status-high);
}
/*   source: style.css   */

.conf-badge.conf-low {
  background: color-mix(in oklab, var(--text-primary) 10%, transparent);
  color: var(--text-muted);
}
/*   source: style.css   */

.conf-badge.conf-signal {
  background: color-mix(in oklab, var(--accent-teal) 15%, transparent);
  color: var(--accent-teal);
}
/*   source: style.css   */

.source-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid color-mix(in oklab, var(--text-primary) 3%, transparent);
}
/*   source: style.css   */

.source-item:last-child {
  border-bottom: none;
}
/*   source: style.css   */

.source-badge {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}
/*   source: style.css   */

.source-badge.gdelt {
  background: color-mix(in oklab, var(--accent-teal) 15%, transparent);
  color: var(--accent-teal);
}
/*   source: style.css   */

.source-badge.reliefweb {
  background: color-mix(in oklab, var(--status-high) 15%, transparent);
  color: var(--status-high);
}
/*   source: style.css   */

.source-link {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*   source: style.css   */

.source-link:hover {
  color: var(--accent-teal);
}
/*   source: style.css   */

.source-date {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
/*   source: style.css   */

.overview-brief {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
/*   source: style.css   */

.brief-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}
/*   source: style.css   */

.brief-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
/*   source: style.css   */

.brief-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
/*   source: style.css   */

.refresh-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  min-height: 32px;
}
.refresh-btn::after {
  content: "Refresh";
  /* Inline label — discoverability boost. Hidden on tiny screens
     to save space. */
}
@media (max-width: 480px) {
  .refresh-btn::after { display: none; }
}
/*   source: style.css   */

.refresh-btn:hover {
  color: var(--accent-teal);
  border-color: var(--accent-teal);
}
/*   source: style.css   */

.refresh-btn.spinning svg {
  animation: spin 1s linear infinite;
}
/*   source: style.css   */

.global-summary-card {
  padding: 18px 22px;
  border-left: 3px solid var(--accent-teal);
}
/*   source: style.css   */

.wc-item {
  cursor: pointer;
  transition: color var(--transition-base);
}
/*   source: style.css   */

.wc-item:hover {
  color: var(--accent-teal);
}
/*   source: style.css   */

.wc-worsened { color: var(--status-critical); }
/*   source: style.css   */

.wc-improved { color: var(--status-low); }
/*   source: style.css   */

.wc-alert { color: var(--status-high); }
/*   source: style.css   */

.top-crisis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}
/*   source: style.css @media (max-width: 1024px)   */

@media (max-width: 1024px) {
  .top-crisis-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/*   source: style.css @media (max-width: 600px)   */

@media (max-width: 600px) {
  .top-crisis-grid {
    grid-template-columns: 1fr;
  }
}
/*   source: style.css   */

.crisis-card-excerpt {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.crisis-card-readmore {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent-red, #b33a3a);
  letter-spacing: 0.02em;
}
.crisis-mini-card:hover .crisis-card-readmore {
  text-decoration: underline;
}
/*   source: style.css   */

.live-news-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 56px;
  border-radius: var(--radius-xs, 4px);
  overflow: hidden;
  background: var(--bg-tertiary);
}
/*   source: style.css   */

.live-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/*   source: style.css   */

.live-news-badges {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
/*   source: style.css   */

.live-news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: 0.7rem;
  color: var(--text-muted);
}
/*   source: style.css   */

.live-news-country {
  color: var(--accent-teal);
  font-weight: 500;
}
/*   source: style.css   */

.live-news-sources {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*   source: style.css   */

.live-news-volume {
  color: var(--text-muted);
}
/*   source: style.css   */

.overview-block {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
/*   source: style.css   */

.overview-block:hover {
  border-color: var(--accent-teal);
}
/*   source: style.css   */

.humanitarian-updates-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/*   source: style.css   */

.hu-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: background var(--transition-fast);
}
/*   source: style.css   */

.hu-item:hover {
  background: var(--bg-highlight);
}
/*   source: style.css   */

.hu-region {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-teal);
  white-space: nowrap;
  min-width: 50px;
}
/*   source: style.css   */

.hu-title {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*   source: style.css   */

.hu-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
}
/*   source: style.css   */

.hu-source {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
/*   source: style.css   */

.hu-time {
  font-size: 0.65rem;
  color: var(--text-tertiary);
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {
  .hu-item {
    flex-wrap: wrap;
    gap: 4px;
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {
  .hu-title {
    white-space: normal;
    order: 3;
    flex-basis: 100%;
  }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {
  .hu-meta {
    order: 2;
  }
}
/*   source: style.css   */

.regional-brief-body .loading-spinner {
  margin: var(--space-lg) auto;
}
/*   source: style.css   */

.deep-analysis-results.hidden {
  display: none;
}
/*   source: style.css   */

.weight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}
/*   source: style.css   */

.weight-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
/*   source: style.css   */

.weight-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-teal);
  font-feature-settings: "tnum";
}
/*   source: style.css   */

.weight-default {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 2px;
}
/*   source: style.css   */

.weight-reasoning {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-elevated);
  border-left: 3px solid var(--accent-teal);
  margin-bottom: var(--space-lg);
}
/*   source: style.css   */

.trajectory-reason {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: var(--space-sm);
}
/*   source: style.css   */

.hotspot-tag {
  font-size: 0.75rem;
  padding: 4px 10px;
  background: color-mix(in oklab, var(--status-critical) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--status-critical) 20%, transparent);
  border-radius: var(--radius-sm);
  color: var(--status-high);
}
/*   source: style.css   */

.confidence-badge {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
}
/*   source: style.css   */

.confidence-badge.high {
  background: color-mix(in oklab, var(--accent-green) 15%, transparent);
  color: var(--status-stable);
}
/*   source: style.css   */

.confidence-badge.medium {
  background: color-mix(in oklab, var(--accent-yellow) 15%, transparent);
  color: var(--accent-yellow);
}
/*   source: style.css   */

.confidence-badge.low {
  background: color-mix(in oklab, var(--status-critical) 15%, transparent);
  color: var(--status-critical);
}
/*   source: style.css   */

.confidence-reason {
  color: var(--text-secondary);
}
/*   source: style.css   */

.ipc-inline-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/*   source: style.css   */

.ipc-inline-badge.ipc-chip-famine {
  background: rgba(255, 50, 50, 0.2);
  color: #ff4d4d;
  border: 1px solid rgba(255, 50, 50, 0.35);
}
/*   source: style.css   */

.ipc-inline-badge.ipc-chip-critical {
  background: color-mix(in oklab, var(--accent-orange) 15%, transparent);
  color: var(--accent-orange);
  border: 1px solid color-mix(in oklab, var(--accent-orange) 30%, transparent);
}
/*   source: style.css   */

.ipc-inline-badge.ipc-chip-high {
  background: color-mix(in oklab, var(--accent-yellow) 12%, transparent);
  color: var(--accent-yellow);
  border: 1px solid color-mix(in oklab, var(--accent-yellow) 25%, transparent);
}
/*   source: style.css   */

.lang-select {
    font-size: 0.75rem;
    padding: 4px 20px 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%23888"/></svg>');
    background-repeat: no-repeat;
    background-position: right 5px center;
    min-height: 28px;
}
/*   source: style.css   */

.lang-select:focus {
    outline: 1px solid var(--accent-teal);
    border-color: var(--accent-teal);
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {
    .lang-select {
        font-size: 0.82rem;
        padding: 8px 24px 8px 10px;
        min-height: 36px;
        border-radius: 8px;
    }
}
/*   source: style.css   */

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: 6px 0;
    padding-bottom: env(safe-area-inset-bottom, 6px);
    justify-content: space-around;
    align-items: center;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
/*   source: style.css   */

.bottom-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
/*   source: style.css   */

.bottom-nav-item svg {
    width: 22px;
    height: 22px;
    stroke: var(--text-tertiary);
    transition: stroke 0.15s;
}
/*   source: style.css   */

.bottom-nav-item.active svg {
    stroke: var(--accent-teal);
}
/*   source: style.css   */

.bottom-nav-item:active {
    transform: scale(0.92);
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {
    .sidebar-toggle {
        display: none !important;
    }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {
    .main-content {
        padding-bottom: 80px !important;
    }
}
/*   source: style.css @media (max-width: 768px)   */

@media (max-width: 768px) {
    .ai-fab {
        bottom: 76px;
    }
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .section-header-bar h2 {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  font-weight: 700;
  position: relative;
  padding-left: 16px;
  margin: 0;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .section-header-bar h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 75%;
  background: var(--cp-accent);
  box-shadow: 0 0 10px var(--cp-accent), 0 0 20px color-mix(in oklab, var(--accent-teal) 40%, transparent);
  border-radius: 1px;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .tab-nav {
  border-bottom: 1px solid color-mix(in oklab, var(--accent-teal) 12%, transparent);
  padding-bottom: 0;
  margin-bottom: 16px;
  gap: 4px;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .tab-nav .tab-btn {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem !important;
  font-weight: 600;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 15%, transparent) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  color: var(--text-secondary) !important;
  border-radius: 3px 3px 0 0 !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  transition: all 0.18s ease-out !important;
  position: relative;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .tab-nav .tab-btn:hover:not(.active) {
  border-color: color-mix(in oklab, var(--accent-teal) 40%, transparent) !important;
  color: var(--cp-accent) !important;
  background: color-mix(in oklab, var(--accent-teal) 5%, transparent) !important;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .tab-nav .tab-btn.active {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent-teal) 18%, transparent) 0%, color-mix(in oklab, var(--accent-teal) 4%, transparent) 100%) !important;
  color: var(--cp-accent) !important;
  border-color: var(--cp-accent) !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent-teal) 25%, transparent), inset 0 0 12px color-mix(in oklab, var(--accent-teal) 8%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .tab-nav .tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cp-accent);
  box-shadow: 0 0 8px var(--cp-accent);
}
/*   source: cyberpunk-2027.css   */

.ranking-compact-list .ranking-row {
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-secondary) 85%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 95%, transparent) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 12%, transparent) !important;
  border-radius: 3px !important;
  position: relative;
  overflow: hidden;
  transition: all 0.18s ease-out !important;
}
/*   source: cyberpunk-2027.css   */

.ranking-compact-list .ranking-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: color-mix(in oklab, var(--accent-teal) 35%, transparent);
  transition: all 0.18s ease-out;
}
/*   source: cyberpunk-2027.css   */

.ranking-compact-list .ranking-row:hover {
  border-color: var(--cp-accent) !important;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent-teal) 6%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 95%, transparent) 100%) !important;
  transform: translateX(3px);
  box-shadow: 0 0 24px color-mix(in oklab, var(--accent-teal) 18%, transparent), -2px 0 10px color-mix(in oklab, var(--accent-teal) 15%, transparent);
}
/*   source: cyberpunk-2027.css   */

.ranking-compact-list .ranking-row:hover::before {
  background: var(--cp-accent);
  width: 4px;
  box-shadow: 0 0 12px var(--cp-accent);
}
/*   source: cyberpunk-2027.css   */

.ranking-compact-list .risk-badge {
  font-family: var(--cp-mono) !important;
  font-variant-numeric: tabular-nums !important;
  border: 1.5px solid currentColor !important;
  background: rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 0 10px currentColor;
  letter-spacing: 0.02em;
}
/*   source: cyberpunk-2027.css   */

.ranking-compact-list .risk-badge.critical {
  color: var(--cp-critical) !important;
  border-color: var(--cp-critical) !important;
}
/*   source: cyberpunk-2027.css   */

.ranking-compact-list .risk-badge.alert,
.ranking-compact-list .risk-badge.high {
  color: var(--cp-alert) !important;
  border-color: var(--cp-alert) !important;
}
/*   source: cyberpunk-2027.css   */

.ranking-compact-list .risk-badge.warning,
.ranking-compact-list .risk-badge.medium {
  color: var(--cp-warning) !important;
  border-color: var(--cp-warning) !important;
}
/*   source: cyberpunk-2027.css   */

.ranking-compact-list .risk-badge.watch,
.ranking-compact-list .risk-badge.low {
  color: var(--cp-watch) !important;
  border-color: var(--cp-watch) !important;
}
/*   source: cyberpunk-2027.css   */

.ranking-compact-list .risk-badge.stable {
  color: var(--cp-stable) !important;
  border-color: var(--cp-stable) !important;
}
/*   source: cyberpunk-2027.css   */

.ranking-compact-list .risk-badge.critical {
  animation: cp-critical-pulse 2.4s ease-in-out infinite;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .pulse-card {
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-secondary) 90%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 95%, transparent) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 12%, transparent) !important;
  border-radius: 3px !important;
  position: relative;
  overflow: hidden;
  transition: all 0.18s ease-out;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .pulse-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cp-accent) 50%, transparent 100%);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .pulse-card:hover {
  border-color: var(--cp-accent) !important;
  box-shadow: 0 0 20px color-mix(in oklab, var(--accent-teal) 18%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .pulse-card .pulse-region-name {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: var(--cp-accent);
  font-weight: 600;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .pulse-card .pulse-hotspot-score {
  font-family: var(--cp-mono);
  font-variant-numeric: tabular-nums;
}
/*   source: cyberpunk-2027.css   */

.score-dim-card {
  border: 1px solid color-mix(in oklab, var(--accent-teal) 15%, transparent) !important;
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-secondary) 95%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 98%, transparent) 100%) !important;
  border-radius: 3px !important;
  position: relative;
  transition: all 0.18s;
  overflow: hidden;
}
/*   source: cyberpunk-2027.css   */

.score-dim-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cp-accent) 0%, transparent 100%);
  opacity: 0.5;
}
/*   source: cyberpunk-2027.css   */

.score-dim-card:hover {
  border-color: var(--cp-accent) !important;
  box-shadow: 0 0 18px color-mix(in oklab, var(--accent-teal) 18%, transparent);
}
/*   source: cyberpunk-2027.css   */

.score-dim-card[open] {
  border-color: var(--cp-accent) !important;
  box-shadow: 0 0 24px color-mix(in oklab, var(--accent-teal) 22%, transparent), inset 0 0 20px color-mix(in oklab, var(--accent-teal) 4%, transparent);
}
/*   source: cyberpunk-2027.css   */

.score-dim-card[open]::after {
  opacity: 1;
  background: var(--cp-accent);
  box-shadow: 0 0 8px var(--cp-accent);
}
/*   source: cyberpunk-2027.css   */

.score-dim-card summary > div > div:nth-child(2) {
  font-family: var(--cp-mono) !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 0 12px color-mix(in oklab, var(--accent-teal) 30%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="rankings"] .ranking-row [class*="score"],
.content-section[data-section="rankings"] [class*="risk-badge"] {
  font-family: var(--cp-mono);
  font-variant-numeric: tabular-nums;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="intelligence"] .section-header-bar h2,
.content-section[data-section="news-feed"] .section-header-bar h2,
.content-section[data-section="nowcast"] .section-header-bar h2,
.content-section[data-section="market-signals"] .section-header-bar h2 {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  font-weight: 700;
  position: relative;
  padding-left: 16px;
  margin: 0;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="intelligence"] .section-header-bar h2::before,
.content-section[data-section="news-feed"] .section-header-bar h2::before,
.content-section[data-section="nowcast"] .section-header-bar h2::before,
.content-section[data-section="market-signals"] .section-header-bar h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 75%;
  background: var(--cp-accent);
  box-shadow: 0 0 10px var(--cp-accent), 0 0 20px color-mix(in oklab, var(--accent-teal) 40%, transparent);
  border-radius: 1px;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="intelligence"] .glass-card,
.content-section[data-section="news-feed"] .glass-card {
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-secondary) 92%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 96%, transparent) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 15%, transparent) !important;
  border-radius: 4px !important;
  position: relative;
  overflow: hidden;
  transition: all 0.18s ease-out;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="intelligence"] .glass-card::before,
.content-section[data-section="news-feed"] .glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cp-accent) 30%, var(--cp-accent) 70%, transparent 100%);
  opacity: 0.6;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="intelligence"] .glass-card:hover,
.content-section[data-section="news-feed"] .glass-card:hover {
  border-color: color-mix(in oklab, var(--accent-teal) 35%, transparent) !important;
  box-shadow: 0 0 24px color-mix(in oklab, var(--accent-teal) 12%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="intelligence"] .card-header h3,
.content-section[data-section="intelligence"] .glass-card h4,
.content-section[data-section="news-feed"] .card-header h3 {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem !important;
  font-weight: 700;
  color: var(--cp-accent) !important;
  margin: 0 !important;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="intelligence"] .form-select,
.content-section[data-section="news-feed"] .form-select {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 20%, transparent) !important;
  color: var(--text-primary) !important;
  border-radius: 3px !important;
  padding: 7px 30px 7px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.18s ease-out;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cp-accent) 50%),
                    linear-gradient(135deg, var(--cp-accent) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="intelligence"] .form-select:hover,
.content-section[data-section="news-feed"] .form-select:hover {
  border-color: var(--cp-accent) !important;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent-teal) 20%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="intelligence"] .form-select:focus,
.content-section[data-section="news-feed"] .form-select:focus {
  outline: none !important;
  border-color: var(--cp-accent) !important;
  box-shadow: 0 0 16px color-mix(in oklab, var(--accent-teal) 35%, transparent), inset 0 0 8px color-mix(in oklab, var(--accent-teal) 5%, transparent);
}
/*   source: cyberpunk-2027.css   */

.btn-generate-report {
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent-teal) 20%, transparent) 0%, color-mix(in oklab, var(--accent-teal) 6%, transparent) 100%) !important;
  border: 1.5px solid var(--cp-accent) !important;
  color: var(--cp-accent) !important;
  border-radius: 3px !important;
  padding: 9px 22px !important;
  cursor: pointer;
  transition: all 0.18s ease-out !important;
  text-shadow: 0 0 8px var(--cp-accent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent-teal) 25%, transparent), inset 0 0 12px color-mix(in oklab, var(--accent-teal) 8%, transparent);
  position: relative;
  overflow: hidden;
}
/*   source: cyberpunk-2027.css   */

.btn-generate-report::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--accent-teal) 20%, transparent) 50%, transparent 100%);
  transition: left 0.5s ease-out;
}
/*   source: cyberpunk-2027.css   */

.btn-generate-report:hover {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent-teal) 30%, transparent) 0%, color-mix(in oklab, var(--accent-teal) 10%, transparent) 100%) !important;
  box-shadow: 0 0 24px color-mix(in oklab, var(--accent-teal) 50%, transparent), inset 0 0 16px color-mix(in oklab, var(--accent-teal) 15%, transparent);
  transform: translateY(-1px);
}
/*   source: cyberpunk-2027.css   */

.btn-generate-report:hover::before {
  left: 100%;
}
/*   source: cyberpunk-2027.css   */

.humanitarian-updates-list > * {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 10%, transparent) !important;
  border-left: 3px solid color-mix(in oklab, var(--accent-teal) 40%, transparent) !important;
  border-radius: 3px !important;
  margin-bottom: 6px;
  padding: 10px 14px;
  transition: all 0.15s ease-out;
}
/*   source: cyberpunk-2027.css   */

.humanitarian-updates-list > *:hover {
  border-color: var(--cp-accent) !important;
  border-left-color: var(--cp-accent) !important;
  background: color-mix(in oklab, var(--accent-teal) 4%, transparent) !important;
  transform: translateX(2px);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="intelligence"] .badge,
.content-section[data-section="news-feed"] .badge {
  font-family: var(--cp-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.35) !important;
  font-weight: 600;
  font-size: 0.62rem;
  padding: 2px 8px;
  border-radius: 2px;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="news-feed"] .section-header-bar .badge {
  color: var(--cp-stable) !important;
  border-color: var(--cp-stable) !important;
  text-shadow: 0 0 6px var(--cp-stable);
  position: relative;
  padding-left: 16px;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="news-feed"] .section-header-bar .badge::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: var(--cp-stable);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--cp-stable);
  animation: cp-live-blink 1.6s ease-in-out infinite;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="intelligence"] #report-status {
  color: var(--cp-stable) !important;
  border-color: var(--cp-stable) !important;
  text-shadow: 0 0 6px var(--cp-stable);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="news-feed"] .section-description,
.content-section[data-section="intelligence"] p.section-description {
  color: var(--text-tertiary) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em;
  border-left: 2px solid color-mix(in oklab, var(--accent-teal) 20%, transparent);
  padding-left: 12px;
  margin-bottom: 18px;
}
/*   source: cyberpunk-2027.css   */

.navbar-brand.cp-brand {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 3px;
  position: relative;
  transition: all 0.2s ease-out;
}
/*   source: cyberpunk-2027.css   */

.navbar-brand.cp-brand::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 70%;
  background: var(--cp-accent);
  box-shadow: 0 0 8px var(--cp-accent), 0 0 16px color-mix(in oklab, var(--accent-teal) 40%, transparent);
  border-radius: 1px;
}
/*   source: cyberpunk-2027.css   */

.navbar-brand.cp-brand:hover {
  background: color-mix(in oklab, var(--accent-teal) 4%, transparent);
}
/*   source: cyberpunk-2027.css   */

.navbar-brand.cp-brand:hover .cp-brand-name {
  text-shadow: 0 0 14px color-mix(in oklab, var(--accent-teal) 60%, transparent), 0 0 28px color-mix(in oklab, var(--accent-teal) 30%, transparent);
}
/*   source: cyberpunk-2027.css   */

.navbar-brand.cp-brand:hover .cp-brand-accent {
  text-shadow: 0 0 16px var(--cp-accent), 0 0 32px color-mix(in oklab, var(--accent-teal) 80%, transparent);
}
/*   source: cyberpunk-2027.css   */

.navbar-brand.cp-brand:hover .cp-brand-tag {
  opacity: 1;
  color: var(--cp-accent) !important;
}
/*   source: cyberpunk-2027.css   */

.navbar-brand.cp-brand:hover::before {
  height: 85%;
  box-shadow: 0 0 12px var(--cp-accent), 0 0 24px color-mix(in oklab, var(--accent-teal) 60%, transparent);
}
/*   source: cyberpunk-2027.css   */

.navbar-brand .status-indicator {
  display: none !important;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .brief-header h2 {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  font-weight: 700;
  position: relative;
  padding-left: 16px;
  margin: 0;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .brief-header h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 75%;
  background: var(--cp-accent);
  box-shadow: 0 0 10px var(--cp-accent), 0 0 20px color-mix(in oklab, var(--accent-teal) 40%, transparent);
  border-radius: 1px;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .brief-header {
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--accent-teal) 12%, transparent);
  margin-bottom: 14px;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .brief-header-right .block-link {
  color: var(--cp-accent) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 25%, transparent);
  border-radius: 3px;
  transition: all 0.18s ease-out;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .brief-header-right .block-link:hover {
  background: color-mix(in oklab, var(--accent-teal) 10%, transparent) !important;
  border-color: var(--cp-accent) !important;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent-teal) 30%, transparent);
  text-shadow: 0 0 6px var(--cp-accent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .live-news-grid > * {
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-secondary) 92%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 96%, transparent) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 12%, transparent) !important;
  border-left: 3px solid color-mix(in oklab, var(--accent-teal) 40%, transparent) !important;
  border-radius: 3px !important;
  position: relative;
  transition: all 0.18s ease-out;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .live-news-grid > *:hover {
  border-color: var(--cp-accent) !important;
  border-left-color: var(--cp-accent) !important;
  box-shadow: 0 0 18px color-mix(in oklab, var(--accent-teal) 18%, transparent), -2px 0 8px color-mix(in oklab, var(--accent-teal) 12%, transparent);
  transform: translateX(2px);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] #daily-brief-container .glass-card {
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent-teal) 5%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 92%, transparent) 50%, color-mix(in oklab, var(--accent-purple) 4%, transparent) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 20%, transparent) !important;
  border-left: 3px solid var(--cp-accent) !important;
  border-radius: 4px !important;
  position: relative;
  overflow: hidden;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] #daily-brief-container .glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cp-accent) 50%, transparent 100%);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] #daily-brief-container .glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, transparent 50%, color-mix(in oklab, var(--accent-teal) 8%, transparent) 100%);
  pointer-events: none;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] #daily-brief-label {
  text-shadow: 0 0 6px var(--cp-accent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] #daily-brief-headline {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] #editorial-columns .glass-card {
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-secondary) 92%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 96%, transparent) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 15%, transparent) !important;
  border-top: 2px solid var(--cp-accent) !important;
  border-radius: 3px !important;
  position: relative;
  transition: all 0.18s ease-out;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] #editorial-columns .glass-card:hover {
  border-color: color-mix(in oklab, var(--accent-teal) 40%, transparent) !important;
  box-shadow: 0 0 18px color-mix(in oklab, var(--accent-teal) 18%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] #editorial-columns .glass-card:nth-child(2) {
  border-top-color: var(--cp-alert) !important;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] #editorial-columns .glass-card:nth-child(2):hover {
  border-color: color-mix(in oklab, var(--status-high) 40%, transparent) !important;
  box-shadow: 0 0 18px color-mix(in oklab, var(--status-high) 18%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] #editorial-columns h4 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.88rem !important;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .refresh-btn,
.content-section[data-section="rankings"] .refresh-btn {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 20%, transparent) !important;
  color: var(--cp-accent) !important;
  border-radius: 3px !important;
  transition: all 0.18s ease-out;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .refresh-btn:hover,
.content-section[data-section="rankings"] .refresh-btn:hover {
  border-color: var(--cp-accent) !important;
  background: color-mix(in oklab, var(--accent-teal) 8%, transparent) !important;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent-teal) 30%, transparent);
  transform: rotate(180deg);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] #daily-brief-watch-items > * {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 25%, transparent) !important;
  color: var(--cp-accent) !important;
  font-family: var(--cp-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 2px;
  transition: all 0.15s;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] #daily-brief-watch-items > *:hover {
  background: color-mix(in oklab, var(--accent-teal) 10%, transparent) !important;
  box-shadow: 0 0 8px color-mix(in oklab, var(--accent-teal) 30%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] .glass-card {
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-secondary) 92%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 96%, transparent) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 15%, transparent) !important;
  border-radius: 4px !important;
  position: relative;
  overflow: hidden;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] .glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cp-accent) 50%, transparent 100%);
  opacity: 0.6;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] #nowcast-brief-container {
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent-teal) 5%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 92%, transparent) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 20%, transparent) !important;
  border-left: 3px solid var(--cp-accent) !important;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] #nowcast-brief-headline {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] #nowcast-status {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--cp-stable) !important;
  color: var(--cp-stable) !important;
  font-family: var(--cp-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.64rem !important;
  padding: 3px 8px !important;
  border-radius: 2px !important;
  text-shadow: 0 0 6px var(--cp-stable);
  position: relative;
  padding-left: 16px !important;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] #nowcast-status::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: var(--cp-stable);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--cp-stable);
  animation: cp-live-blink 1.6s ease-in-out infinite;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] .glass-card:first-of-type > div {
  font-family: var(--cp-mono);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] .glass-card:first-of-type span[style*="var(--accent-teal)"] {
  text-shadow: 0 0 6px var(--cp-accent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] table {
  font-family: var(--cp-mono);
  font-variant-numeric: tabular-nums;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] table thead tr {
  border-bottom: 1px solid color-mix(in oklab, var(--accent-teal) 30%, transparent) !important;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] table thead th {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.66rem !important;
  color: var(--cp-accent) !important;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] table tbody tr {
  transition: all 0.12s;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] table tbody tr:hover {
  background: color-mix(in oklab, var(--accent-teal) 4%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--cp-accent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] .nowcast-filter-btn {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  border: 1px solid color-mix(in oklab, var(--accent-teal) 15%, transparent) !important;
  background: rgba(0, 0, 0, 0.3) !important;
  color: var(--text-secondary) !important;
  border-radius: 3px !important;
  padding: 5px 12px !important;
  transition: all 0.15s !important;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] .nowcast-filter-btn:hover:not(.active) {
  border-color: color-mix(in oklab, var(--accent-teal) 40%, transparent) !important;
  color: var(--cp-accent) !important;
  background: color-mix(in oklab, var(--accent-teal) 5%, transparent) !important;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="nowcast"] .nowcast-filter-btn.active {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent-teal) 20%, transparent) 0%, color-mix(in oklab, var(--accent-teal) 5%, transparent) 100%) !important;
  color: var(--cp-accent) !important;
  border-color: var(--cp-accent) !important;
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent-teal) 25%, transparent), inset 0 0 8px color-mix(in oklab, var(--accent-teal) 8%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="market-signals"] .glass-card {
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-secondary) 92%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 96%, transparent) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--status-high) 15%, transparent) !important;
  border-left: 3px solid var(--cp-alert) !important;
  border-radius: 3px !important;
  position: relative;
  overflow: hidden;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="market-signals"] .glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cp-alert) 50%, transparent 100%);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="market-signals"] .section-header-bar .badge {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--cp-alert) !important;
  color: var(--cp-alert) !important;
  font-family: var(--cp-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 0 6px var(--cp-alert);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="market-signals"] .section-header-bar h2::before {
  background: var(--cp-alert) !important;
  box-shadow: 0 0 10px var(--cp-alert), 0 0 20px color-mix(in oklab, var(--status-high) 40%, transparent) !important;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="market-signals"] #market-signals-container > * {
  transition: all 0.18s ease-out;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="market-signals"] #market-signals-container .glass-card:hover {
  border-color: var(--cp-alert) !important;
  box-shadow: 0 0 18px color-mix(in oklab, var(--status-high) 18%, transparent);
}
/*   source: cyberpunk-2027.css   */

.global-summary-card {
  border-radius: 3px !important;
  border-left: 3px solid var(--cp-accent) !important;
  box-shadow: -2px 0 12px color-mix(in oklab, var(--accent-teal) 15%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-secondary) 90%, transparent) 0%, color-mix(in oklab, var(--bg-secondary) 95%, transparent) 100%) !important;
}
/*   source: cyberpunk-2027.css   */

.gs-col-status { border-top: 3px solid var(--cp-critical); padding-top: 12px; }
/*   source: cyberpunk-2027.css   */

.gs-col-weekly { border-top: 3px solid var(--cp-accent); padding-top: 12px; }
/*   source: cyberpunk-2027.css   */

.gs-col-outlook { border-top: 3px solid var(--cp-purple); padding-top: 12px; }
/*   source: cyberpunk-2027.css   */

.gs-col-status .gs-col-label { color: var(--cp-critical); }
/*   source: cyberpunk-2027.css   */

.gs-col-weekly .gs-col-label { color: var(--cp-accent); }
/*   source: cyberpunk-2027.css   */

.gs-col-outlook .gs-col-label { color: var(--cp-purple); }
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .brief-header h2 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.88rem;
  font-weight: 700;
  position: relative;
  padding-left: 14px;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .brief-header h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 90%;
  background: var(--cp-accent);
  box-shadow: 0 0 12px var(--cp-accent), 0 0 24px color-mix(in oklab, var(--accent-teal) 30%, transparent);
  border-radius: 1px;
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .overview-brief {
  border-radius: 3px;
  border-color: color-mix(in oklab, var(--accent-teal) 12%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .live-news-card {
  border-radius: 3px;
  border-color: color-mix(in oklab, var(--accent-teal) 10%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .live-news-card:hover {
  border-color: var(--cp-accent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent-teal) 15%, transparent);
}
/*   source: cyberpunk-2027.css   */

.content-section[data-section="overview"] .overview-brief {
  margin-bottom: var(--space-md);
}
/*   source: cyberpunk-2027.css   */

.today-featured-badge {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--status-critical) 20%, transparent);
  color: #fca5a5;
  font-weight: 700;
}
/* ============================================================
   FINAL OVERRIDE — APP SHELL restore (last-wins over cluster-5b)
   ------------------------------------------------------------
   Cluster-5b legacy-ported blocks contained dark-palette versions
   of body / .app-layout / .main-content / .sidebar-icon /
   .mobile-bottom-nav / .bottom-nav-item that shadowed the
   Paper-tokenized defaults from APP SHELL (top of file). This
   block re-asserts them so the cascade picks Paper.
   ============================================================ */
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-family: var(--font-body);
}

.app-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100vh - 120px);
}

.main-content {
  padding: var(--space-5) var(--space-6);
  min-width: 0;
  background: transparent;
  color: var(--text-primary);
}

.sidebar-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  flex-shrink: 0;
  opacity: 0.8;
}
.sidebar-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}
.sidebar-item.active .sidebar-icon,
.sidebar-item:hover .sidebar-icon { opacity: 1; }

.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0));
  background: color-mix(in oklab, var(--bg-canvas) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-top: 1px solid var(--border-color);
  justify-content: space-around;
  z-index: var(--z-sticky, 200);
}
.bottom-nav-item {
  background: transparent;
  border: none;
  /* Stack icon + label vertically. Touch target ≥44×44 per Apple HIG /
     Material guidelines — using min-height instead of fixed so the label
     line never gets cropped on smaller font-scale settings. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 6px 8px;
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  /* Strip the default tap highlight on iOS — we encode the active state
     via the .active class on click rather than letting the OS paint a
     translucent grey rectangle that clashes with Paper. */
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  /* Slight opacity dampens the icon stroke so the label has equal weight
     instead of the icon stealing all the visual attention. Active state
     reverts to full opacity. */
  opacity: 0.85;
}
/* Section label rendered from the existing aria-label attribute — keeps
   a11y and visual in sync without duplicating strings into a span. The
   label appears under the icon at 10px so 5 × ~62px buttons fit into
   any phone viewport ≥320px wide without truncation. */
.bottom-nav-item::after {
  content: attr(aria-label);
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  color: currentColor;
  opacity: 0.85;
  white-space: nowrap;
}
.bottom-nav-item.active {
  color: var(--accent-primary);
}
.bottom-nav-item.active svg {
  stroke: var(--accent-primary);
  opacity: 1;
}
.bottom-nav-item.active::after {
  font-weight: 600;
  opacity: 1;
}

/* Navbar — ensure glass paper in cascade final */
.navbar {
  background: color-mix(in oklab, var(--bg-canvas) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 200);
}

/* Sidebar base surface (override any dark residue) */
.sidebar {
  background: color-mix(in oklab, var(--bg-canvas) 94%, transparent);
  border-right: 1px solid var(--border-color);
  color: var(--text-primary);
}

/* TABLET (769-1279px) — icon-only sidebar in grid, no drawer, no bottom-nav.
   The drawer + bottom-nav pattern is phone-only. iPad portrait/landscape
   gets a persistent 64px icon column with hover/focus tooltip. */
@media (min-width: 769px) and (max-width: 1279px) {
  .app-layout { grid-template-columns: 64px 1fr; max-width: none; }
  .sidebar {
    position: relative;
    width: 64px;
    transform: none;
    border-right: 1px solid var(--border-subtle);
  }
  .sidebar-nav { padding: var(--space-3) var(--space-2); }
  .sidebar-item {
    justify-content: center;
    padding: 14px 12px;
    border-left: none;
    border-radius: var(--radius-md);
    min-height: 48px;
    position: relative;
  }
  .sidebar-item.active {
    background: color-mix(in oklab, var(--accent-primary) 10%, transparent);
    border-left: none;
  }
  .sidebar-icon { width: 22px; height: 22px; }
  .sidebar-label { display: none; }
  .sidebar-divider__label { display: none; }
  .sidebar-divider { padding: var(--space-2) 0; text-align: center; }
  .sidebar-toggle { display: none; }
  .mobile-bottom-nav { display: none; }
  .main-content { padding: var(--space-4) var(--space-5); max-width: none; }
  .navbar-content { padding: 0 var(--space-4); }

  /* Tooltip for icon-only sidebar — hover/focus reveals the label.
     Uses aria-label as the source so a11y and visual stay in sync. */
  .sidebar-item[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--text-primary);
    color: var(--bg-canvas, #faf6ec);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  .sidebar-item:hover[aria-label]::after,
  .sidebar-item:focus-visible[aria-label]::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* MOBILE (≤768px) — drawer + bottom-nav. Phone-only layout. */
@media (max-width: 768px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; bottom: 0;
    left: 0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    z-index: var(--z-modal, 500);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; }
  /* Reserve space at the bottom of main-content equal to the fixed
     bottom-nav height (padding 8 + svg 22 + padding 8 ≈ 38px) plus the
     iPhone home-indicator safe-area inset. Without this, the inline
     "Ask Argus" chat bar and the bottom of the main content disappear
     under the bottom-nav. 72px is a conservative ceiling that handles
     every current device. */
  .main-content {
    padding: var(--space-4);
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }
  .mobile-bottom-nav { display: flex; }
}
/*  ============================================================
   LEGACY-PORTED — Level 1 recovery (from pre-purge style.css)
   source: /tmp/pre_purge_style.css
   classes: 27
   Rules killed during initial purge that JS still references.
   ============================================================  */

.focus-popup-footer .btn-secondary {
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.focus-popup-footer .btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-teal);
}

.command-palette {
  width: 100%;
  max-width: 640px;
  background: var(--bg-secondary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: paletteSlideIn 0.15s ease-out;
}

.command-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.command-search-icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.command-input-wrapper input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1.1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
}

.command-input-wrapper input::placeholder {
  color: var(--text-tertiary);
}

.command-shortcut {
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
}

.command-results {
  max-height: 400px;
  overflow-y: auto;
  padding: var(--space-sm);
}

.command-category {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

.command-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.command-item:hover,
.command-item.selected {
  background: var(--bg-hover);
}

.command-item.selected {
  background: rgba(124, 74, 143, 0.15);
}

.command-icon {
  font-size: 1.2rem;
  width: 28px;
  text-align: center;
}

.command-label {
  flex: 1;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.command-label mark {
  background: rgba(124, 74, 143, 0.3);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

.command-item.command-ai {
  background: linear-gradient(135deg, rgba(124, 74, 143, 0.1), rgba(124, 74, 143, 0.1));
  border: 1px solid rgba(124, 74, 143, 0.2);
}

.command-item.command-ai:hover,
.command-item.command-ai.selected {
  background: linear-gradient(135deg, rgba(124, 74, 143, 0.2), rgba(124, 74, 143, 0.2));
}

.command-empty {
  padding: var(--space-lg);
  text-align: center;
  color: var(--text-tertiary);
}

.command-footer {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.command-footer kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  margin: 0 2px;
}

.qa-loading .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.situation-evidence-toggle .toggle-icon {
  transition: transform var(--transition-fast);
}

.situation-evidence.open .toggle-icon {
  transform: rotate(180deg);
}

.coverage-quality .quality-label {
  color: var(--text-muted);
}

.coverage-quality .quality-value {
  font-weight: 600;
}

.quality-high .quality-value { color: var(--status-low); }

.quality-med .quality-value { color: var(--status-high); }

.quality-low .quality-value { color: var(--status-critical); }

.report-section.collapsible .section-toggle {
  cursor: pointer;
  user-select: none;
}

.report-section.collapsible .toggle-icon {
  margin-left: auto;
  font-size: 0.7rem;
  transition: transform 0.2s;
}

.report-section.collapsible.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.report-section.collapsible.collapsed .report-sources {
  display: none;
}/* LEGACY-PORTED — L3 baseline design pass
   ---------------------------------------------------------------
   Baseline CSS for classes that appeared in templates/app.js but
   never had a rule in the pre-purge style.css. Minimal, token-
   driven, paper-palette. Keep terse — one responsibility per rule.
   =============================================================== */

/* === Humanitarian block (ReliefWeb / OCHA FTS feed) === */
.humanitarian-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-wide);
}
.humanitarian-country {
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-size: 11px;
}
.humanitarian-date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

/* === Rankings table / list === */
.ranking-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease,
              transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.ranking-row:hover {
  border-color: var(--accent-teal);
  background: var(--bg-hover);
  transform: translateY(-1px);  /* tactile lift on hover */
}
/* Mobile (≤768px) — wrap children to multi-line so 8+ inline elements
   don't overflow / require horizontal scroll. Country name + rank on
   first line, badges + score wrap below. Touch-friendly tap area. */
@media (max-width: 768px) {
  .ranking-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    align-items: baseline;
  }
  .ranking-row > * {
    flex-shrink: 1;
  }
  /* Score badge anchors at right with wider hit area */
  .ranking-row .risk-badge {
    margin-left: auto;
    min-height: 36px;
    min-width: 48px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
.rankings-urgency-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
}
.compare-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--accent-teal);
  color: var(--text-inverse);
  border: 1px solid var(--accent-teal);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: filter var(--transition-fast);
}
.compare-trigger-btn:hover { filter: brightness(1.05); }

/* === Button variants: copy / export (ghost-secondary) === */
.btn-copy,
.btn-export {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.btn-copy:hover,
.btn-export:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* === Cell utilities (country detail table: signal / stock / flow / confidence) === */
.conf-cell,
.stock-cell,
.flow-delta-cell,
.signal-cell {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}
.signal-cell  { color: var(--text-primary); font-weight: var(--weight-semibold); }
.stock-cell   { color: var(--text-secondary); }
.flow-delta-cell {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.conf-cell { text-align: center; }

/* === Country name display (table cell, modal row) === */
td.country-name,
.country-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  padding: var(--space-2) var(--space-3);
}

/* === News signals (extended variants) === */
.news-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
  flex: 1;
}
.live-news-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  min-width: 0;
  flex: 1;
}
.news-signal-score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wide);
}
.news-signal-drivers {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-snug);
}

/* === Q&A source attribution === */
.qa-cite {
  display: inline-block;
  padding: 0 var(--space-1);
  margin: 0 1px;
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: var(--weight-semibold);
  color: var(--accent-teal);
  background: rgba(13, 118, 128, 0.08);
  border-radius: var(--radius-xs);
  vertical-align: baseline;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.qa-cite:hover { background: rgba(13, 118, 128, 0.16); }
.qa-source-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* === Report sections (intelligence / topic report) === */
.report-period {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  text-transform: uppercase;
}
.report-summary {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-wide);
}
.report-summary::before {
  content: "·";
  margin: 0 var(--space-2);
  color: var(--border-default);
}

/* === Loading / skeleton states ===
   Same shimmer treatment as .loading-row. Text content kept for
   screen readers; visually invisible. Replaces the dashed-border
   "Loading…" panel that felt placeholder-grade. */
.loading-placeholder {
  position: relative;
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(90deg,
      color-mix(in oklab, var(--text-primary) 5%, transparent) 0%,
      color-mix(in oklab, var(--text-primary) 9%, transparent) 50%,
      color-mix(in oklab, var(--text-primary) 5%, transparent) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
  color: transparent;
  min-height: 80px;
  user-select: none;
}
.deep-analysis-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* === Misc blocks === */
.trajectory-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.trajectory-row:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.regional-pulse-block {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}
.risk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
}
.risk-badge.critical { color: var(--accent-red);    background: rgba(181, 50, 26, 0.08); }
.risk-badge.high,
.risk-badge.alert    { color: var(--accent-orange); background: rgba(201, 123, 31, 0.08); }
.risk-badge.medium,
.risk-badge.warning  { color: var(--accent-yellow); background: rgba(201, 123, 31, 0.05); }
.risk-badge.low,
.risk-badge.stable   { color: var(--status-low);    background: rgba(13, 118, 128, 0.06); }

/* Standalone layout modifier — caps width, centers in a flow column.
   Applied on cards promoted to first-class content (e.g. today-featured-card). */
.standalone {
  display: block;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* === Responsive tweaks === */
@media (max-width: 768px) {
  .ranking-row { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .regional-pulse-block { padding: var(--space-3) var(--space-4); }
  .humanitarian-meta { gap: var(--space-1); font-size: 11px; }
  .conf-cell,
  .stock-cell,
  .flow-delta-cell,
  .signal-cell { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
  .standalone { max-width: 100%; }
}

/* ============================================================
   TODAY HERO — human-first landing 2027 (2026-04-18)
   Card-style with subtle elevation, warm gradient, editorial type.
   ============================================================ */
.today-hero {
  display: flex !important;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
  padding: clamp(24px, 3.4vw, 44px) clamp(24px, 3.4vw, 48px) clamp(24px, 3vw, 36px);
  margin-bottom: var(--space-6, 32px);
  background:
    radial-gradient(1200px 400px at 0% 0%, color-mix(in oklab, var(--accent-red, #b33a3a) 4%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-primary, #faf6ec) 0%, var(--bg-secondary, #f5efe3) 100%);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 2px 6px rgba(26,22,18,0.04),
    0 12px 28px -14px rgba(26,22,18,0.08);
  position: relative;
  overflow: hidden;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}
/* Belt-and-braces: ensure the outer overview content-section cannot be
   animated into invisibility by a re-toggle of the .active class. */
.content-section[data-section="overview"].active,
.content-section[data-section="overview"] { animation: none !important; opacity: 1 !important; }
.today-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent-red, #b33a3a) 0%, color-mix(in oklab, var(--accent-red, #b33a3a) 60%, var(--accent-orange, #c27a2e)) 100%);
  border-radius: 18px 0 0 18px;
}

.today-hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary, #8a7d6b);
  font-weight: 600;
}
.today-hero__date { font-variant-numeric: tabular-nums; }
.today-hero__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary, #8a7d6b);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}
.today-hero__live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-green, #5a8f3a);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-green, #5a8f3a) 22%, transparent);
  animation: todayHeroPulse 2.4s ease-in-out infinite;
}
@keyframes todayHeroPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

.today-hero__headline {
  /* Was flex-row with the retired 48/100 score; now a single child (axis).
     Block layout avoids dead gap/baseline rules. */
  padding-top: var(--space-2);
}
.today-hero__score {
  /* Retired 2026-04-21 — the absolute "48/100" composite number
     communicated nothing without a baseline (48 of what? vs what?).
     Delta framing in the narrative/trend below is the better signal.
     DOM retained so existing JS (data-counter="avgScore") keeps
     updating without errors; just not rendered. */
  display: none;
}
/* Hide the "One place to watch" featured banner — redundant with the
   Top Crisis Countries grid that already surfaces the highest-severity
   country. Also fought with the Daily Brief's own "Watch today" list,
   producing two inconsistent "watch" sets on the same page. */
#today-hero-lede,
.today-hero__lede {
  display: none !important;
}
.today-hero__score--legacy {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.today-hero__score-num {
  font-family: var(--font-display, Georgia, 'Times New Roman', serif);
  font-size: clamp(4.2rem, 8.2vw, 6.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary, #1a1612);
  line-height: 0.92;
}
.today-hero__score-max {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--text-tertiary, #8a7d6b);
  font-weight: 500;
  margin-left: 2px;
}
.today-hero__axis {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.today-hero__axis-label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-red, #b33a3a);
  font-weight: 700;
}
.today-hero__axis-sub {
  font-size: 0.92rem;
  color: var(--text-secondary, #3a322a);
  line-height: 1.35;
}
.today-hero__axis-sub b {
  color: var(--text-primary, #1a1612);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.today-hero__axis-trend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 0.84rem;
  color: var(--text-secondary, #3a322a);
}
.today-hero__trend-item b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.today-hero__trend-item.trend-worsened b { color: var(--accent-red, #b33a3a); }
.today-hero__trend-item.trend-improved b { color: var(--accent-green, #5a8f3a); }
.today-hero__trend-item.trend-alerts   b { color: var(--accent-orange, #c27a2e); }
.today-hero__trend-sep { color: var(--text-tertiary, #8a7d6b); opacity: 0.55; }

.today-hero__lede {
  appearance: none;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-left: 2px solid var(--accent-red, #b33a3a);
  padding: 14px 18px 16px;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  font: inherit;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.today-hero__lede:hover {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 5%, var(--bg-primary, #faf6ec));
  border-left-color: var(--accent-red, #b33a3a);
  transform: translateX(1px);
}
.today-hero__lede-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.today-hero__lede-badge {
  display: inline-block;
  padding: 2px 8px;
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 14%, transparent);
  color: var(--accent-red, #b33a3a);
  border-radius: 2px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
}
.today-hero__lede-badge[data-risk="alert"]    { background: color-mix(in oklab, var(--accent-orange, #c27a2e) 16%, transparent); color: var(--accent-orange, #c27a2e); }
.today-hero__lede-badge[data-risk="warning"]  { background: color-mix(in oklab, var(--accent-yellow, #c9a22c) 20%, transparent); color: var(--accent-yellow, #c9a22c); }
.today-hero__lede-badge[data-risk="watch"]    { background: color-mix(in oklab, var(--accent-blue, #4a6fa5) 18%, transparent); color: var(--accent-blue, #4a6fa5); }
.today-hero__lede-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary, #8a7d6b);
  font-weight: 600;
}
.today-hero__lede-label b {
  color: var(--text-primary, #1a1612);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.today-hero__lede-text {
  margin: 0;
  font-family: var(--font-display, Georgia, 'Times New Roman', serif);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-primary, #1a1612);
}
.today-hero__lede-cta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-red, #b33a3a);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.today-hero__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  font-size: 0.74rem;
  color: var(--text-tertiary, #8a7d6b);
}
.today-hero__footer-item b {
  color: var(--text-secondary, #3a322a);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.today-hero__footer-sep { opacity: 0.5; }

/* Narrative headline (replaces "Global Risk Index" label) */
.today-hero__narrative {
  /* Primary anchor after the 48/100 score was retired — bumped up so it
     carries the visual weight the old numeral used to. */
  font-family: var(--font-display, Georgia, 'Times New Roman', serif);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-primary, #1a1612);
  margin: 0 0 8px;
  max-width: 38ch;
}

/* Methodology link — ghost button in footer */
.today-hero__methodology-link {
  appearance: none;
  background: transparent;
  border: none;
  padding: 4px 10px 4px 2px;
  color: var(--accent-red, #b33a3a);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s ease, color .15s ease;
}
.today-hero__methodology-link:hover {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 8%, transparent);
  color: var(--text-primary, #1a1612);
}

@media (max-width: 640px) {
  .today-hero {
    padding: 22px 18px 22px;
    border-radius: 14px;
  }
  .today-hero::before { width: 3px; border-radius: 14px 0 0 14px; }
  .today-hero__score-num { font-size: 3.6rem; }
  .today-hero__narrative { font-size: 1.5rem; }
  .today-hero__lede-text { font-size: 0.95rem; }
}

/* ============================================================
   METHODOLOGY MODAL — transparency artifact
   ============================================================ */
.methodology-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}
.methodology-modal.is-hidden { display: none; }
.methodology-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--text-primary, #1a1612) 45%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.methodology-modal__panel {
  position: relative;
  max-width: 640px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 20px 60px -20px rgba(26,22,18,0.3);
  animation: methFadeIn .22s ease;
}
@keyframes methFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.methodology-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}
.methodology-modal__head h2 {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1a1612);
}
.methodology-modal__close {
  appearance: none;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-tertiary, #8a7d6b);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.methodology-modal__close:hover {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 10%, transparent);
  color: var(--accent-red, #b33a3a);
}
.methodology-modal__body {
  padding: 18px 24px 24px;
  color: var(--text-secondary, #3a322a);
  font-size: 0.94rem;
  line-height: 1.6;
}
.methodology-modal__body h3 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-red, #b33a3a);
  margin: 22px 0 8px;
}
.methodology-modal__body p { margin: 0 0 10px; }
.methodology-modal__lead {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.04rem;
  color: var(--text-primary, #1a1612);
  line-height: 1.5;
  margin: 0 0 8px;
}
.methodology-modal__sources {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.methodology-modal__sources li {
  padding: 10px 12px;
  background: var(--bg-secondary, #f5efe3);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 10px;
  font-size: 0.84rem;
  color: var(--text-secondary, #3a322a);
}
.methodology-modal__sources li b {
  display: block;
  color: var(--text-primary, #1a1612);
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}

/* ============================================================
   CHIP SYSTEM — reusable chips/tags (2027)
   Use: <span class="chip chip--accent">Label</span>
   Variants: accent | muted | soft | live | severity-{critical|alert|warning|watch|stable}
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  border-radius: 999px;
  background: var(--bg-secondary, #f5efe3);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  color: var(--text-secondary, #3a322a);
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip--muted    { background: transparent; color: var(--text-tertiary, #8a7d6b); }
.chip--soft     { background: color-mix(in oklab, var(--accent-red, #b33a3a) 8%, transparent); border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 18%, transparent); color: var(--accent-red, #b33a3a); }
.chip--accent   { background: var(--accent-red, #b33a3a); border-color: transparent; color: #fff; }
.chip--live     { background: color-mix(in oklab, var(--accent-green, #5a8f3a) 10%, transparent); border-color: color-mix(in oklab, var(--accent-green, #5a8f3a) 22%, transparent); color: var(--accent-green, #5a8f3a); }
.chip--live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-green, #5a8f3a);
  animation: chipPulse 2s ease-in-out infinite;
}
@keyframes chipPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.chip--severity-critical { background: color-mix(in oklab, #b33a3a 14%, transparent); border-color: color-mix(in oklab, #b33a3a 22%, transparent); color: #b33a3a; }
.chip--severity-alert    { background: color-mix(in oklab, #c27a2e 14%, transparent); border-color: color-mix(in oklab, #c27a2e 22%, transparent); color: #c27a2e; }
.chip--severity-warning  { background: color-mix(in oklab, #c9a22c 16%, transparent); border-color: color-mix(in oklab, #c9a22c 26%, transparent); color: #8c6e1d; }
.chip--severity-watch    { background: color-mix(in oklab, #4a6fa5 14%, transparent); border-color: color-mix(in oklab, #4a6fa5 22%, transparent); color: #4a6fa5; }
.chip--severity-stable   { background: color-mix(in oklab, #5a8f3a 12%, transparent); border-color: color-mix(in oklab, #5a8f3a 22%, transparent); color: #5a8f3a; }
button.chip, a.chip { cursor: pointer; text-decoration: none; }
button.chip:hover, a.chip:hover {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 10%, var(--bg-primary, #faf6ec));
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 28%, transparent);
  color: var(--accent-red, #b33a3a);
}

/* ============================================================
   CARD SYSTEM — 2027 soft-card refresh
   Opt-in via .card-2027 — applied to redesigned sections.
   ============================================================ */
.card-2027 {
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 14px;
  padding: clamp(18px, 2vw, 22px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 3px rgba(26,22,18,0.03),
    0 8px 20px -12px rgba(26,22,18,0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-2027:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 18%, var(--border-subtle, rgba(0,0,0,0.08)));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 2px 6px rgba(26,22,18,0.04),
    0 18px 36px -16px rgba(26,22,18,0.1);
}

/* ============================================================
   TRAJECTORY — Moody's + Bloomberg + ICU hybrid (2026-04-18)
   Editorial cards with narrative lede, driver chips, action CTA.
   ============================================================ */
.traj-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 6px 2px 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}
.traj-section-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.traj-section-title__label {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1a1612);
}
.traj-section-title__sub {
  font-size: 0.78rem;
  color: var(--text-tertiary, #8a7d6b);
}
.traj-method-link {
  appearance: none;
  background: transparent;
  border: none;
  padding: 4px 8px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent-red, #b33a3a);
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s ease, color .15s ease;
}
.traj-method-link:hover {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 10%, transparent);
  color: var(--text-primary, #1a1612);
}

.traj-empty {
  padding: 40px 24px;
  text-align: center;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 14px;
}
.traj-empty__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-green, #5a8f3a);
  margin-bottom: 6px;
}
.traj-empty__body {
  font-size: 0.88rem;
  color: var(--text-tertiary, #8a7d6b);
}

.traj-group {
  margin-bottom: 24px;
}
.traj-group__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}
.traj-group__dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.traj-group--red .traj-group__dot    { background: var(--accent-red, #b33a3a);    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-red, #b33a3a) 18%, transparent); }
.traj-group--orange .traj-group__dot { background: var(--accent-orange, #c27a2e); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-orange, #c27a2e) 18%, transparent); }
.traj-group--yellow .traj-group__dot { background: var(--accent-yellow, #c9a22c); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-yellow, #c9a22c) 18%, transparent); }
.traj-group__label {
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-primary, #1a1612);
}
.traj-group__count {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-tertiary, #8a7d6b);
  font-variant-numeric: tabular-nums;
}
.traj-group__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.traj-card {
  position: relative;
  padding: 18px 20px 16px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 3px rgba(26,22,18,0.03);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.traj-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  border-radius: 12px 0 0 12px;
}
.traj-card--red::before    { background: var(--accent-red, #b33a3a); }
.traj-card--orange::before { background: var(--accent-orange, #c27a2e); }
.traj-card--yellow::before { background: var(--accent-yellow, #c9a22c); }
.traj-card:hover, .traj-card:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 20%, var(--border-subtle, rgba(0,0,0,0.08)));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 2px 6px rgba(26,22,18,0.04),
    0 18px 36px -16px rgba(26,22,18,0.1);
  outline: none;
}
.traj-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.traj-card__ident {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.traj-card__country {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1a1612);
  line-height: 1.15;
}
.traj-card__outlook {
  font-size: 0.74rem;
  color: var(--text-tertiary, #8a7d6b);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.traj-card--red .traj-card__outlook    { color: var(--accent-red, #b33a3a); }
.traj-card--orange .traj-card__outlook { color: var(--accent-orange, #c27a2e); }
.traj-card--yellow .traj-card__outlook { color: color-mix(in oklab, var(--accent-yellow, #c9a22c) 70%, var(--text-primary, #1a1612)); }

.traj-card__metrics {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.traj-card__score {
  font-family: var(--font-display, Georgia, serif);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary, #1a1612);
  line-height: 1;
}
.traj-card__delta {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}
.traj-card__delta.is-worse {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 12%, transparent);
  color: var(--accent-red, #b33a3a);
}
.traj-card__delta.is-better {
  background: color-mix(in oklab, var(--accent-green, #5a8f3a) 12%, transparent);
  color: var(--accent-green, #5a8f3a);
}
.traj-card__delta-unit {
  font-size: 0.66rem;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 2px;
}

.traj-card__narrative {
  margin: 4px 0 12px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-primary, #1a1612);
  transition: opacity .3s ease, color .3s ease;
}
.traj-card__narrative.is-loading {
  color: var(--text-tertiary, #8a7d6b);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent-red, #b33a3a) 8%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: trajNarrShimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes trajNarrShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.traj-card__drivers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.traj-card__drivers-label {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary, #8a7d6b);
  font-weight: 700;
}
.traj-card__drivers-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.traj-driver-chip.is-accelerating {
  font-weight: 700;
}
.traj-driver-chip__arrow {
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 1px;
}

.traj-card__action {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 6%, var(--bg-secondary, #f5efe3));
  border: 1px solid color-mix(in oklab, var(--accent-red, #b33a3a) 18%, transparent);
  border-radius: 8px;
  margin-bottom: 10px;
}
.traj-card__action-label {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-red, #b33a3a);
  font-weight: 700;
}
.traj-card__action-body {
  font-size: 0.92rem;
  color: var(--text-primary, #1a1612);
  font-weight: 500;
  line-height: 1.4;
}
.traj-card--orange .traj-card__action {
  background: color-mix(in oklab, var(--accent-orange, #c27a2e) 6%, var(--bg-secondary, #f5efe3));
  border-color: color-mix(in oklab, var(--accent-orange, #c27a2e) 18%, transparent);
}
.traj-card--orange .traj-card__action-label { color: var(--accent-orange, #c27a2e); }
.traj-card--yellow .traj-card__action {
  background: color-mix(in oklab, var(--accent-yellow, #c9a22c) 8%, var(--bg-secondary, #f5efe3));
  border-color: color-mix(in oklab, var(--accent-yellow, #c9a22c) 22%, transparent);
}
.traj-card--yellow .traj-card__action-label {
  color: color-mix(in oklab, var(--accent-yellow, #c9a22c) 60%, var(--text-primary, #1a1612));
}

.traj-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  font-size: 0.78rem;
}
.traj-card__more,
.traj-card__signals {
  margin: 0;
}
.traj-card__more summary,
.traj-card__signals summary {
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-tertiary, #8a7d6b);
  padding: 2px 0;
  list-style: none;
  transition: color .15s ease;
}
.traj-card__more summary::before,
.traj-card__signals summary::before {
  content: '▸ ';
  font-size: 0.7em;
  margin-right: 2px;
}
.traj-card__more[open] summary::before,
.traj-card__signals[open] summary::before {
  content: '▾ ';
}
.traj-card__more summary:hover,
.traj-card__signals summary:hover {
  color: var(--accent-red, #b33a3a);
}
.traj-card__more-list {
  list-style: none;
  padding: 10px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.traj-card__more-list li {
  padding: 7px 10px;
  background: var(--bg-secondary, #f5efe3);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary, #3a322a);
}
.traj-card__signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  padding: 10px 0 0;
}
.traj-signal {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  background: var(--bg-secondary, #f5efe3);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 6px;
}
.traj-signal__k {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary, #8a7d6b);
  font-weight: 600;
}
.traj-signal__v {
  font-size: 0.88rem;
  color: var(--text-primary, #1a1612);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .traj-card__header { flex-direction: column; gap: 8px; }
  .traj-card__metrics { align-self: flex-start; }
  .traj-card__score { font-size: 1.8rem; }
  .traj-card__narrative { font-size: 0.92rem; }
}

/* ============================================================
   TAB BAR refresh — chip-style active underline (2027)
   Opt-in via .tab-nav--chips (kept legacy .tab-nav as fallback).
   Trajectory tab bar auto-upgraded below.
   ============================================================ */
.tab-nav .tab-btn,
.tab-nav--chips .tab-btn {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px 10px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-tertiary, #8a7d6b);
  cursor: pointer;
  border-radius: 0;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.tab-nav .tab-btn:hover,
.tab-nav--chips .tab-btn:hover {
  color: var(--text-primary, #1a1612);
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 4%, transparent);
}
.tab-nav .tab-btn.active,
.tab-nav--chips .tab-btn.active {
  color: var(--accent-red, #b33a3a);
  border-bottom-color: var(--accent-red, #b33a3a);
  background: transparent;
}
.tab-nav .tab-dim-select {
  height: auto;
  padding: 8px 28px 10px 14px;
  font-size: 0.82rem;
  color: var(--text-tertiary, #8a7d6b);
  border-bottom: 2px solid transparent;
  background:
    linear-gradient(45deg, transparent 50%, var(--text-tertiary, #8a7d6b) 50%) no-repeat calc(100% - 14px) 55%/5px 5px,
    linear-gradient(135deg, var(--text-tertiary, #8a7d6b) 50%, transparent 50%) no-repeat calc(100% - 9px) 55%/5px 5px,
    transparent;
}

/* ============================================================
   INTELLIGENCE — Feed layout (2026-04-19, Phase 2)
   Single feed of AI-generated insight cards + right sidebar.
   Reddit + LinkedIn + Perplexity hybrid.
   ============================================================ */
.intel-feed__topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: clamp(14px, 2vw, 20px) 0 12px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, var(--bg-primary, #faf6ec) 0%, color-mix(in oklab, var(--bg-primary, #faf6ec) 90%, transparent) 100%);
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.intel-feed__topbar-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.intel-feed__title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.intel-feed__eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-red, #b33a3a);
  font-weight: 700;
}
.intel-feed__title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-primary, #1a1612);
}
.intel-feed__search {
  flex: 1;
  min-width: 280px;
  max-width: 520px;
  display: flex;
  gap: 6px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.1));
  border-radius: 12px;
  padding: 5px 5px 5px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.intel-feed__search:focus-within {
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-red, #b33a3a) 10%, transparent);
}
.intel-feed__search-input {
  flex: 1;
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  padding: 8px 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text-primary, #1a1612);
}
.intel-feed__search-input::placeholder {
  color: var(--text-tertiary, #8a7d6b);
  font-style: italic;
}
.intel-feed__search-cta {
  appearance: none;
  background: var(--accent-red, #b33a3a);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.intel-feed__search-cta:hover { background: color-mix(in oklab, var(--accent-red, #b33a3a) 88%, #000); }
.intel-feed__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.intel-feed__filter {
  background: var(--bg-primary, #faf6ec);
  color: var(--text-secondary, #3a322a);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.1));
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.intel-feed__filter--active,
.intel-feed__filter[aria-selected="true"] {
  background: var(--accent-red, #b33a3a);
  color: #fff;
  border-color: var(--accent-red, #b33a3a);
}

/* Layout: main feed + right sidebar */
.intel-feed__layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(18px, 2vw, 28px);
  align-items: flex-start;
}
.intel-feed__main {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
  min-width: 0;
}
.intel-feed__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 130px;
}

/* Insight card — unified style for all feed items */
.insight-card {
  padding: clamp(18px, 2vw, 24px);
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px rgba(26,22,18,0.03);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.insight-card:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 2px 6px rgba(26,22,18,0.04),
    0 12px 26px -14px rgba(26,22,18,0.08);
}
.insight-card--xt {
  border-left: 3px solid var(--accent-red, #b33a3a);
}
.insight-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.insight-card__header-left { min-width: 0; flex: 1; }
.insight-card__kind {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-red, #b33a3a);
  display: block;
  margin-bottom: 2px;
}
.insight-card__title {
  margin: 0 0 4px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1a1612);
}
.insight-card__dek {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-tertiary, #8a7d6b);
  line-height: 1.4;
}
.insight-card__action {
  appearance: none;
  background: transparent;
  color: var(--accent-red, #b33a3a);
  border: 1px solid color-mix(in oklab, var(--accent-red, #b33a3a) 30%, transparent);
  padding: 6px 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.insight-card__action:hover {
  background: var(--accent-red, #b33a3a);
  color: #fff;
}
.insight-card__body { margin-top: 4px; }
.insight-card__body .glass-card { background: transparent; border: none; padding: 0; box-shadow: none; }

/* Sidebar cards */
.intel-aside-card {
  padding: 14px 16px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 12px;
}
.intel-aside-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.intel-aside-card__title {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, #8a7d6b);
}
.intel-aside-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.intel-aside-card__list li {
  font-size: 0.84rem;
  color: var(--text-secondary, #3a322a);
  line-height: 1.4;
}
.intel-aside-card__loading {
  font-style: italic;
  color: var(--text-tertiary, #8a7d6b);
  font-size: 0.8rem !important;
}
.intel-aside-card__mover {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease;
}
.intel-aside-card__mover:hover { background: var(--bg-secondary, #f5efe3); }
.intel-aside-card__mover-country {
  flex: 1;
  font-weight: 600;
  color: var(--text-primary, #1a1612);
  font-size: 0.86rem;
}
.intel-aside-card__mover-delta {
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.intel-aside-card__mover-delta.is-worse { color: var(--accent-red, #b33a3a); }
.intel-aside-card__mover-delta.is-better { color: var(--accent-green, #5a8f3a); }
.intel-aside-card--method { background: color-mix(in oklab, var(--accent-red, #b33a3a) 4%, var(--bg-primary, #faf6ec)); }
.intel-aside-card--method p {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary, #3a322a);
}
.intel-aside-card__link {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-red, #b33a3a);
  cursor: pointer;
}
.intel-aside-card__link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .intel-feed__layout { grid-template-columns: 1fr; }
  .intel-feed__aside { position: static; }
}
@media (max-width: 640px) {
  .intel-feed__topbar { padding: 12px 0 10px; }
  .intel-feed__title { font-size: 1.3rem; }
  .intel-feed__search { max-width: 100%; }
}

/* Legacy intel-hero backward-compat — replaced by intel-feed__topbar but
   kept until all references are migrated. */
.intel-hero {
  position: relative;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 3.4vw, 48px);
  margin-bottom: var(--space-6, 32px);
  background:
    radial-gradient(1200px 400px at 100% 0%, color-mix(in oklab, var(--accent-red, #b33a3a) 6%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-primary, #faf6ec) 0%, var(--bg-secondary, #f5efe3) 100%);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 2px 6px rgba(26,22,18,0.04),
    0 14px 32px -18px rgba(26,22,18,0.1);
}
.intel-hero__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-red, #b33a3a);
  font-weight: 700;
  margin-bottom: 10px;
}
.intel-hero__title {
  margin: 0 0 6px;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary, #1a1612);
}
.intel-hero__sub {
  margin: 0 0 22px;
  font-size: 0.98rem;
  color: var(--text-secondary, #3a322a);
  line-height: 1.5;
  max-width: 58ch;
}
.intel-hero__form {
  display: flex;
  gap: 8px;
  max-width: 720px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.1));
  border-radius: 14px;
  padding: 6px 6px 6px 14px;
  box-shadow: 0 1px 2px rgba(26,22,18,0.04) inset;
  margin-bottom: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.intel-hero__form:focus-within {
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 40%, transparent);
  box-shadow:
    0 1px 2px rgba(26,22,18,0.04) inset,
    0 0 0 3px color-mix(in oklab, var(--accent-red, #b33a3a) 10%, transparent);
}
.intel-hero__input {
  flex: 1;
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 0;
  font: inherit;
  font-size: 1rem;
  color: var(--text-primary, #1a1612);
}
.intel-hero__input::placeholder {
  color: var(--text-tertiary, #8a7d6b);
  font-style: italic;
}
.intel-hero__cta {
  appearance: none;
  background: var(--accent-red, #b33a3a);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.intel-hero__cta:hover {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 88%, #000);
  transform: translateY(-1px);
}
.intel-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.intel-hero__chip {
  appearance: none;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.1));
  color: var(--text-secondary, #3a322a);
  padding: 6px 12px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.intel-hero__chip:hover {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 10%, var(--bg-primary, #faf6ec));
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 30%, transparent);
  color: var(--accent-red, #b33a3a);
  transform: translateY(-1px);
}

/* Biggest shifts grid */
.intel-shifts {
  margin-bottom: var(--space-6, 32px);
}
.intel-shifts__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 6px 2px 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}
.intel-shifts__title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1a1612);
}
.intel-shifts__sub {
  font-size: 0.78rem;
  color: var(--text-tertiary, #8a7d6b);
}
.intel-shifts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.intel-shifts__loading,
.intel-shifts__empty {
  grid-column: 1 / -1;
  padding: 28px 16px;
  text-align: center;
  color: var(--text-tertiary, #8a7d6b);
  font-size: 0.9rem;
  font-style: italic;
  background: var(--bg-secondary, #f5efe3);
  border: 1px dashed var(--border-subtle, rgba(0,0,0,0.1));
  border-radius: 12px;
}
.intel-shift-card {
  position: relative;
  padding: 16px 18px 14px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 12px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.intel-shift-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  border-radius: 12px 0 0 12px;
}
.intel-shift-card--up::before   { background: var(--accent-red, #b33a3a); }
.intel-shift-card--down::before { background: var(--accent-green, #5a8f3a); }
.intel-shift-card:hover, .intel-shift-card:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 18%, var(--border-subtle, rgba(0,0,0,0.1)));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 2px 6px rgba(26,22,18,0.04),
    0 16px 32px -16px rgba(26,22,18,0.1);
  outline: none;
}
.intel-shift-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.intel-shift-card__country {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary, #1a1612);
  letter-spacing: -0.005em;
}
.intel-shift-card__metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.intel-shift-card__delta {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.intel-shift-card__delta--up   { color: var(--accent-red, #b33a3a); }
.intel-shift-card__delta--down { color: var(--accent-green, #5a8f3a); }
.intel-shift-card__delta-unit {
  font-size: 0.74rem;
  color: var(--text-tertiary, #8a7d6b);
  font-weight: 500;
}
.intel-shift-card__line {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary, #3a322a);
}
.intel-shift-card__line b {
  color: var(--text-primary, #1a1612);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.intel-shift-card__cta {
  margin-top: 2px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent-red, #b33a3a);
  letter-spacing: 0.01em;
}

/* Outlook collapsed wrap + Nowcast section wrapper */
.intel-outlook-wrap {
  margin-bottom: var(--space-5, 24px);
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 12px;
  overflow: hidden;
}
.intel-outlook-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #1a1612);
  list-style: none;
  transition: background .15s ease;
}
.intel-outlook-summary::-webkit-details-marker { display: none; }
.intel-outlook-summary:hover {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 4%, transparent);
}
.intel-outlook-summary__sub {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-tertiary, #8a7d6b);
}
.intel-outlook-wrap[open] .intel-outlook-summary {
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}
.intel-outlook-wrap > :not(.intel-outlook-summary) {
  padding: 14px 16px;
}

.intel-nowcast {
  margin-bottom: var(--space-6, 32px);
}
.intel-nowcast__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 6px 2px 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}
.intel-nowcast__title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1a1612);
}
.intel-nowcast__sub {
  font-size: 0.78rem;
  color: var(--text-tertiary, #8a7d6b);
}

.intel-explorer {
  margin-top: 14px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 10px;
  overflow: hidden;
}
.intel-explorer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #3a322a);
  list-style: none;
  transition: background .15s ease;
}
.intel-explorer__summary::-webkit-details-marker { display: none; }
.intel-explorer__summary:hover {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 4%, transparent);
  color: var(--accent-red, #b33a3a);
}
.intel-explorer__hint {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-tertiary, #8a7d6b);
  font-style: italic;
}
.intel-explorer[open] .intel-explorer__summary {
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}

@media (max-width: 640px) {
  .intel-hero { padding: 22px 18px 26px; border-radius: 14px; }
  .intel-hero__title { font-size: 1.4rem; }
  .intel-hero__sub { font-size: 0.9rem; }
  .intel-hero__form { padding: 4px 4px 4px 12px; }
  .intel-hero__cta { padding: 8px 12px; font-size: 0.82rem; }
  .intel-shifts__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CROSS-THEATRE CONVERGENCE ANALYZER (2026-04-19)
   Flagship hackathon surface inside the Intelligence section.
   ============================================================ */
.intel-crosstheatre {
  padding: clamp(22px, 3vw, 32px);
  margin-bottom: var(--space-6, 32px);
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 6px rgba(26,22,18,0.04);
  position: relative;
  overflow: hidden;
}
.intel-crosstheatre::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--accent-red, #b33a3a) 0%,
    var(--accent-orange, #c27a2e) 50%,
    var(--accent-yellow, #c9a22c) 100%);
}
.intel-crosstheatre__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}
.intel-crosstheatre__title {
  margin: 0 0 4px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #1a1612);
}
.intel-crosstheatre__sub {
  font-size: 0.82rem;
  color: var(--text-tertiary, #8a7d6b);
}
.intel-crosstheatre__badge { font-size: 0.66rem; }

.intel-crosstheatre__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
.intel-crosstheatre__controls > .intel-crosstheatre__select {
  flex: 1 1 240px;
  min-width: 0;
}
.intel-crosstheatre__controls > .intel-crosstheatre__run {
  flex: 0 0 auto;
}
.intel-crosstheatre__label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary, #8a7d6b);
  font-weight: 700;
}
.intel-crosstheatre__select {
  appearance: none;
  background: var(--bg-secondary, #f5efe3);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.1));
  border-radius: 10px;
  padding: 10px 30px 10px 14px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-primary, #1a1612);
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-tertiary, #8a7d6b) 50%),
    linear-gradient(135deg, var(--text-tertiary, #8a7d6b) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.intel-crosstheatre__select:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 40%, transparent);
}
.intel-crosstheatre__run {
  appearance: none;
  background: var(--accent-red, #b33a3a);
  color: #fff;
  border: none;
  padding: 7px 13px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.intel-crosstheatre__run:hover {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 88%, #000);
  transform: translateY(-1px);
}
.intel-crosstheatre__run:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.intel-crosstheatre__empty {
  padding: 22px 20px;
  background: var(--bg-secondary, #f5efe3);
  border: 1px dashed var(--border-subtle, rgba(0,0,0,0.12));
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary, #3a322a);
}
.intel-crosstheatre__empty p { margin: 0; }
.intel-crosstheatre__empty.is-hidden { display: none; }

.intel-crosstheatre__result {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.intel-crosstheatre__result.is-hidden { display: none; }

.intel-crosstheatre__result-header {
  padding: 12px 14px;
  background: var(--bg-secondary, #f5efe3);
  border-radius: 10px;
}
.intel-crosstheatre__result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.intel-crosstheatre__result-region {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary, #1a1612);
}
.intel-crosstheatre__result-horizon {
  font-size: 0.8rem;
  color: var(--text-tertiary, #8a7d6b);
}
.intel-crosstheatre__progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.intel-crosstheatre__progress-bar {
  position: relative;
  height: 4px;
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 8%, transparent);
  border-radius: 2px;
  overflow: hidden;
}
.intel-crosstheatre__progress-bar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent-red, #b33a3a), transparent);
  animation: xtProg 1.6s ease-in-out infinite;
}
@keyframes xtProg {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.intel-crosstheatre__progress-text {
  font-size: 0.84rem;
  color: var(--text-secondary, #3a322a);
  font-style: italic;
}
.intel-crosstheatre__skel {
  height: 120px;
  background: var(--bg-secondary, #f5efe3);
  border-radius: 10px;
  background-image: linear-gradient(90deg, transparent, rgba(179,58,58,0.08), transparent);
  background-size: 200% 100%;
  animation: xtProg 1.6s ease-in-out infinite;
}

.intel-crosstheatre__clusters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.intel-crosstheatre__cluster {
  padding: 16px 18px;
  background: var(--bg-secondary, #f5efe3);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-left: 3px solid var(--accent-red, #b33a3a);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intel-crosstheatre__cluster-head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  align-items: center;
}
.intel-crosstheatre__cluster-rank {
  grid-row: 1 / 3;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-red, #b33a3a);
  line-height: 1;
}
.intel-crosstheatre__cluster-theatres {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary, #1a1612);
  letter-spacing: -0.005em;
}
.intel-crosstheatre__cluster-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.intel-crosstheatre__cluster-narr {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-primary, #1a1612);
}
.intel-crosstheatre__drivers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.intel-crosstheatre__drivers-label {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary, #8a7d6b);
  font-weight: 700;
}
.intel-crosstheatre__drivers > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.intel-crosstheatre__acc { font-weight: 700; margin-left: 2px; }

.intel-crosstheatre__chain {
  padding: 10px 12px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 8px;
}
.intel-crosstheatre__chain-label {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary, #8a7d6b);
  font-weight: 700;
  margin-bottom: 6px;
}
.intel-crosstheatre__chain ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intel-crosstheatre__chain li {
  font-size: 0.84rem;
  color: var(--text-secondary, #3a322a);
  line-height: 1.4;
}
.intel-crosstheatre__chain li b {
  color: var(--text-primary, #1a1612);
  font-weight: 700;
}

.intel-crosstheatre__reco,
.intel-crosstheatre__forecast {
  padding: 10px 12px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-left: 2px solid var(--accent-red, #b33a3a);
  border-radius: 8px;
}
.intel-crosstheatre__forecast {
  border-left-color: var(--accent-orange, #c27a2e);
}
.intel-crosstheatre__reco span,
.intel-crosstheatre__forecast span {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-red, #b33a3a);
  font-weight: 700;
  margin-right: 8px;
}
.intel-crosstheatre__forecast span { color: var(--accent-orange, #c27a2e); }
.intel-crosstheatre__reco p,
.intel-crosstheatre__forecast p {
  margin: 4px 0 0;
  font-size: 0.92rem;
  color: var(--text-primary, #1a1612);
  line-height: 1.45;
}

.intel-crosstheatre__alts summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-tertiary, #8a7d6b);
  list-style: none;
  padding: 4px 0;
}
.intel-crosstheatre__alts summary::before { content: '▸ '; font-size: 0.7em; }
.intel-crosstheatre__alts[open] summary::before { content: '▾ '; }
.intel-crosstheatre__alts ul {
  list-style: none;
  padding: 8px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intel-crosstheatre__alts li {
  padding: 6px 10px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 6px;
  font-size: 0.84rem;
  color: var(--text-secondary, #3a322a);
}

.intel-crosstheatre__gaps-card {
  padding: 14px 16px;
  background: color-mix(in oklab, var(--accent-yellow, #c9a22c) 8%, var(--bg-primary, #faf6ec));
  border: 1px solid color-mix(in oklab, var(--accent-yellow, #c9a22c) 22%, transparent);
  border-radius: 10px;
}
.intel-crosstheatre__gaps-card h4 {
  margin: 0 0 6px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: color-mix(in oklab, var(--accent-yellow, #c9a22c) 60%, var(--text-primary, #1a1612));
}
.intel-crosstheatre__gaps-card ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.86rem;
  color: var(--text-secondary, #3a322a);
  line-height: 1.5;
}

.intel-crosstheatre__methodology-card {
  margin-top: 4px;
}
.intel-crosstheatre__methodology-card summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-tertiary, #8a7d6b);
  background: var(--bg-secondary, #f5efe3);
  border-radius: 8px;
  list-style: none;
}
.intel-crosstheatre__methodology-card summary::-webkit-details-marker { display: none; }
.intel-crosstheatre__methodology-card[open] summary { border-radius: 8px 8px 0 0; }
.intel-crosstheatre__methodology-card p {
  margin: 10px 12px 0;
  font-size: 0.84rem;
  color: var(--text-secondary, #3a322a);
  line-height: 1.5;
}
.intel-crosstheatre__methodology-card code {
  font-size: 0.8rem;
  background: var(--bg-secondary, #f5efe3);
  padding: 2px 6px;
  border-radius: 4px;
}

.intel-crosstheatre__upgrade,
.intel-crosstheatre__error,
.intel-crosstheatre__noclusters {
  padding: 18px 20px;
  background: var(--bg-secondary, #f5efe3);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.1));
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--text-secondary, #3a322a);
  line-height: 1.55;
}
.intel-crosstheatre__upgrade h4 {
  margin: 0 0 8px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1rem;
  color: var(--accent-red, #b33a3a);
}
.intel-crosstheatre__upgrade p { margin: 0 0 6px; }
.intel-crosstheatre__error {
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 25%, transparent);
  color: var(--accent-red, #b33a3a);
}

@media (max-width: 640px) {
  .intel-crosstheatre { padding: 20px 16px; }
  .intel-crosstheatre__controls { grid-template-columns: 1fr; }
  .intel-crosstheatre__label { margin-bottom: -4px; }
  .intel-crosstheatre__cluster-head { grid-template-columns: 1fr; }
  .intel-crosstheatre__cluster-rank { grid-row: auto; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Streaming reasoning trace — the flagship live view on Cross-Theatre runs.
   The thinking block mirrors Claude.ai's expandable thinking UI: visible
   monospaced stream of Opus's reasoning, fading at the bottom to signal
   more is flowing. Swaps out for the parsed result when the terminal
   "result" SSE frame lands.
   ────────────────────────────────────────────────────────────────────── */
.intel-crosstheatre__thinking {
  padding: 16px 18px;
  background: color-mix(in oklab, var(--bg-secondary, #f5efe3) 70%, var(--bg-primary, #faf6ec) 30%);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  border-left: 3px solid color-mix(in oklab, var(--accent-red, #b33a3a) 65%, transparent);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.intel-crosstheatre__thinking-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.intel-crosstheatre__thinking-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-tertiary, #6b5d4c);
}
.intel-crosstheatre__thinking-banner {
  font-size: 0.8rem;
  color: var(--accent-red, #b33a3a);
  font-style: italic;
  position: relative;
  padding-left: 14px;
}
.intel-crosstheatre__thinking-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-red, #b33a3a);
  animation: xtPulse 1.2s ease-in-out infinite;
}
@keyframes xtPulse {
  0%, 100% { opacity: 0.4; transform: translateY(-50%) scale(0.85); }
  50%      { opacity: 1;   transform: translateY(-50%) scale(1.15); }
}
.intel-crosstheatre__thinking-stream {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-secondary, #3a322a);
  background: transparent;
  max-height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 0;
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.intel-crosstheatre__thinking-stream:empty::before {
  content: "Loading model context…";
  color: var(--text-tertiary, #6b5d4c);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════
   SHELL 2027 — 3-column grid, Argus bar, artifact panel, sidebar zones.
   Adds to the existing .app-layout (sidebar + main) a collapsible right
   column for agent-produced artifacts.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   SHELL 2027 v2.1 (2026-04-20) — Argus becomes a viewport-fixed right
   column (Claude.ai / ChatGPT pattern): thread scrolls inside, input
   stays pinned to the bottom of the viewport regardless of page scroll.
   The main grid reserves right-margin to keep content out from under.
   ══════════════════════════════════════════════════════════════════ */
.app-layout {
  grid-template-columns: 240px minmax(0, 1fr);
  max-width: calc(1720px - 380px);
  margin-right: 380px;
}
.app-layout.is-argus-collapsed {
  margin-right: 0;
}
.app-layout.is-argus-collapsed .argus-panel {
  display: none;
}

/* Legacy 2-col + on-demand artifact open — kept as fallback for any
   code path that hasn't migrated yet. Currently unused at shell level. */
.app-layout.is-artifact-open {
  grid-template-columns: 240px 1fr 420px;
  max-width: 1680px;
}

/* ─── Argus bar (sticky top, universal input) ──────────────────────── */
.argus-bar {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  margin: 0 16px;
  padding: 6px 10px;
  background: color-mix(in oklab, var(--bg-secondary, #f5efe3) 70%, transparent);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  border-radius: 999px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.argus-bar:focus-within {
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 40%, transparent);
  background: var(--bg-primary, #faf6ec);
}
.argus-bar__icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary, #6b5d4c);
  flex-shrink: 0;
}
.argus-bar__input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text-primary);
  min-width: 0;
}
.argus-bar__input::placeholder {
  color: var(--text-tertiary, #6b5d4c);
  opacity: 0.7;
}
.argus-bar__mic {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary, #6b5d4c);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.argus-bar__mic:hover {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 12%, transparent);
  color: var(--accent-red, #b33a3a);
}
.argus-bar__mic.is-recording {
  color: var(--accent-red, #b33a3a);
  animation: argusMicPulse 1.2s ease-in-out infinite;
}
@keyframes argusMicPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.argus-bar__kbd {
  display: inline-flex;
  gap: 2px;
  color: var(--text-tertiary, #6b5d4c);
  font-size: 0.7rem;
  flex-shrink: 0;
}
.argus-bar__kbd kbd {
  font-family: inherit;
  padding: 1px 5px;
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.1));
  border-radius: 3px;
  background: var(--bg-secondary, #f5efe3);
  font-size: 0.7rem;
  line-height: 1;
}

/* Hide the legacy ⌘K trigger button — Argus bar replaces it. */
.cmd-palette-trigger.is-hidden { display: none !important; }

/* ─── Sidebar zone dividers ────────────────────────────────────────── */
.sidebar-divider {
  margin: 16px 12px 8px;
  padding: 4px 8px;
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  position: relative;
}
.sidebar-divider__label {
  display: block;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-tertiary, #6b5d4c);
  opacity: 0.7;
}

/* ─── Artifact panel (right column) ────────────────────────────────── */
.artifact-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  background: color-mix(in oklab, var(--bg-primary, #faf6ec) 80%, var(--bg-secondary, #f5efe3) 20%);
  max-height: calc(100vh - 120px);
  position: sticky;
  top: 56px;
}
.artifact-panel[hidden] { display: none !important; }

.artifact-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}
.artifact-panel__meta { min-width: 0; flex: 1; }
.artifact-panel__eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-tertiary, #6b5d4c);
  margin-bottom: 4px;
}
.artifact-panel__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.artifact-panel__actions { display: flex; gap: 4px; flex-shrink: 0; }
.artifact-panel__action {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary, #6b5d4c);
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.artifact-panel__action:hover {
  background: var(--bg-secondary, #f5efe3);
  color: var(--text-primary);
}

.artifact-panel__tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  flex-shrink: 0;
}
.artifact-tab {
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--text-tertiary, #6b5d4c);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.artifact-tab:hover { color: var(--text-primary); }
.artifact-tab.is-active {
  background: var(--bg-secondary, #f5efe3);
  color: var(--text-primary);
  font-weight: 600;
}

.artifact-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 18px;
  min-height: 0;
}
.artifact-pane { display: none; }
.artifact-pane.is-active { display: block; }
.artifact-pane__empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--text-tertiary, #6b5d4c);
  font-size: 0.86rem;
  line-height: 1.5;
}

.artifact-panel__deliver {
  display: flex;
  gap: 4px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  background: color-mix(in oklab, var(--bg-secondary, #f5efe3) 60%, transparent);
  flex-shrink: 0;
  overflow-x: auto;
}
.artifact-deliver__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  background: var(--bg-primary, #faf6ec);
  color: var(--text-secondary, #3a322a);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 999px;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.artifact-deliver__btn:hover {
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 30%, transparent);
  color: var(--accent-red, #b33a3a);
}

/* ─── Expanded mode — artifact takes over the main column ─────────── */
.app-layout.is-artifact-expanded {
  grid-template-columns: 240px 0 1fr;
}
.app-layout.is-artifact-expanded .main-content { display: none; }

/* ─── Mobile: artifact panel becomes full-screen overlay ──────────── */
@media (max-width: 900px) {
  .app-layout.is-artifact-open { grid-template-columns: 1fr; }
  .artifact-panel {
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 100;
    max-height: none;
    border-left: none;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
  }
  .argus-bar {
    margin: 0 8px;
    max-width: none;
  }
  .argus-bar__kbd { display: none; }
  .sidebar-divider { margin: 12px 8px 4px; }
}

@media (max-width: 640px) {
  .argus-bar {
    padding: 4px 8px;
  }
  .argus-bar__input { font-size: 0.82rem; }
}

/* ─── Argus response rendering inside the artifact panel ──────────── */
.argus-response {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.argus-response p { margin: 0 0 12px; }
.argus-response p:last-child { margin-bottom: 0; }
.argus-response em { color: var(--text-tertiary, #6b5d4c); font-style: italic; }
.argus-response code {
  background: var(--bg-secondary, #f5efe3);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.85em;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
.argus-pending {
  text-align: center;
  padding: 32px 12px;
  color: var(--text-tertiary, #6b5d4c);
  font-style: italic;
  font-size: 0.88rem;
}
.argus-pending::before {
  content: "◦ ◦ ◦";
  display: block;
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  margin-bottom: 10px;
  animation: argusPending 1.6s ease-in-out infinite;
}
@keyframes argusPending {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.argus-error {
  padding: 16px;
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 8%, transparent);
  border-left: 3px solid var(--accent-red, #b33a3a);
  border-radius: 8px;
  color: var(--accent-red, #b33a3a);
  font-size: 0.88rem;
}
.argus-trace {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.argus-trace li {
  padding: 10px 12px;
  background: var(--bg-secondary, #f5efe3);
  border-radius: 8px;
  font-size: 0.84rem;
  color: var(--text-secondary, #3a322a);
  line-height: 1.5;
}
.argus-trace__call {
  border-left: 3px solid color-mix(in oklab, var(--accent-red, #b33a3a) 60%, transparent);
}
.argus-trace__tool {
  border-left: 3px solid color-mix(in oklab, var(--text-tertiary, #6b5d4c) 40%, transparent);
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
}

/* ══════════════════════════════════════════════════════════════════════
   MAXWELL TIMELINE GRID (2026-04-20)
   Visual reference: Maxwell et al. 2026, Food Policy 140, Figs 3/5/6/8.
   Rows are grouped by the five Maxwell factor categories; each indicator
   is one row with a colour-coded severity cell. V1 shows current only;
   V2 adds 24-month history when SnapshotService is in place.
   ════════════════════════════════════════════════════════════════════ */

.tscan {
  padding: 18px 20px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.tscan__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tscan__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.tscan__country {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.2rem;
  font-weight: 600;
}
.tscan__iso {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--text-tertiary, #6b5d4c);
  padding: 2px 6px;
  background: var(--bg-secondary, #f5efe3);
  border-radius: 4px;
}
.tscan__confidence {
  font-size: 0.72rem;
  color: var(--text-tertiary, #6b5d4c);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tscan__asof {
  font-size: 0.72rem;
  color: var(--text-tertiary, #6b5d4c);
}

/* Phase pill — primary classification marker */
.tscan-phase {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}
.tscan-phase--neutral {
  background: color-mix(in oklab, var(--text-tertiary, #6b5d4c) 12%, transparent);
  color: var(--text-secondary, #3a322a);
}
.tscan-phase--watch {
  background: color-mix(in oklab, #d6a330 18%, transparent);
  color: #7a5a0e;
}
.tscan-phase--alert {
  background: color-mix(in oklab, #d97436 22%, transparent);
  color: #8a3a0d;
}
.tscan-phase--critical {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 22%, transparent);
  color: var(--accent-red, #b33a3a);
  font-weight: 700;
}
.tscan-phase--recovering {
  background: color-mix(in oklab, var(--accent-green, #5a8f3a) 18%, transparent);
  color: #2f5a1c;
}

.tscan__narrative {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary, #3a322a);
}

.tscan__evidence {
  list-style: none;
  padding: 10px 14px;
  margin: 0;
  background: color-mix(in oklab, var(--bg-secondary, #f5efe3) 70%, transparent);
  border-radius: 8px;
  border-left: 3px solid color-mix(in oklab, var(--accent-red, #b33a3a) 40%, transparent);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text-secondary, #3a322a);
}
.tscan__evidence li::before {
  content: "▸ ";
  color: var(--accent-red, #b33a3a);
  font-weight: 700;
}

/* Grid — one section per Maxwell category, stacked */
.tscan__grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tscan-cat {
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--bg-primary, #faf6ec);
}
.tscan-cat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-subtle, rgba(0,0,0,0.08));
}
.tscan-cat__name {
  flex: 1;
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #3a322a);
}
.tscan-cat__overall {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.08);
}
.tscan-cat__empty {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-tertiary, #6b5d4c);
  font-style: italic;
}
.tscan-cat--empty { opacity: 0.6; }

.tscan-cat__indicators {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tscan-ind {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.tscan-ind__label {
  font-size: 0.86rem;
  color: var(--text-primary);
}
.tscan-ind__cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 6px;
  min-width: 100px;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: help;
}
.tscan-ind__sev-text {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Severity palette — matches paper legend */
.tscan-sev--good {
  background: color-mix(in oklab, var(--accent-green, #5a8f3a) 28%, transparent);
  color: #2f5a1c;
}
.tscan-sev--moderate {
  background: color-mix(in oklab, #a9c45f 35%, transparent);
  color: #49601a;
}
.tscan-sev--bad {
  background: color-mix(in oklab, #d6a330 35%, transparent);
  color: #7a5a0e;
}
.tscan-sev--verybad {
  background: color-mix(in oklab, #d97436 40%, transparent);
  color: #8a3a0d;
}
.tscan-sev--catastrophe {
  background: var(--accent-red, #b33a3a);
  color: #ffffff;
  border-color: var(--accent-red, #b33a3a);
}
.tscan-sev--na {
  background: color-mix(in oklab, var(--text-tertiary, #6b5d4c) 10%, transparent);
  color: var(--text-tertiary, #6b5d4c);
}

/* Legend */
.tscan-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle, rgba(0,0,0,0.08));
  font-size: 0.72rem;
  color: var(--text-tertiary, #6b5d4c);
}
.tscan-legend__swatch {
  width: 16px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.1);
  display: inline-block;
}

/* Loading + empty */
.tscan__loading {
  padding: 32px;
  text-align: center;
  color: var(--text-tertiary, #6b5d4c);
  font-size: 0.88rem;
}
.tscan__loading p { margin: 12px 0 0; }
.tscan-loading-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 3px;
  border-radius: 50%;
  background: var(--accent-red, #b33a3a);
  animation: tscanLoadingDot 1.4s ease-in-out infinite;
}
.tscan-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.tscan-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes tscanLoadingDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1.1); }
}

.tscan__empty {
  padding: 28px;
  text-align: center;
  color: var(--text-tertiary, #6b5d4c);
  font-size: 0.88rem;
  font-style: italic;
  border: 1px dashed var(--border-subtle, rgba(0,0,0,0.12));
  border-radius: 10px;
}
.tscan__empty p { margin: 0; }

@media (max-width: 640px) {
  .tscan { padding: 14px; }
  .tscan-ind { grid-template-columns: 1fr; gap: 4px; }
  .tscan-ind__cell { justify-self: start; min-width: 80px; }
}

/* Medium Trajectory Scan — for Today page. Between compact (1-row)
   and full (17 indicators). Phase + country + narrative + 5 category
   cells + CTA. ~5 rows of content. */
.tscan-medium {
  padding: 16px 18px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  border-left: 3px solid var(--accent-red, #b33a3a);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tscan-medium__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.tscan-medium__country {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.tscan-medium__iso {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  color: var(--text-tertiary, #6b5d4c);
  padding: 1px 6px;
  background: var(--bg-secondary, #f5efe3);
  border-radius: 4px;
}
.tscan-medium__confidence {
  font-size: 0.7rem;
  color: var(--text-tertiary, #6b5d4c);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: auto;
}
.tscan-medium__narr {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary, #3a322a);
}
.tscan-medium__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin-top: 2px;
}
.tscan-medium__cat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg-secondary, #f5efe3);
  border-radius: 6px;
}
.tscan-medium__cat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-tertiary, #6b5d4c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tscan-medium__cat-cell {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.08);
}
.tscan-medium__cat-sev {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tscan-medium__cta {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle, rgba(0,0,0,0.08));
}
.tscan-medium__cta-btn {
  padding: 5px 12px;
  border: 1px solid var(--accent-red, #b33a3a);
  background: var(--accent-red, #b33a3a);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: filter var(--transition-fast);
}
.tscan-medium__cta-btn:hover { filter: brightness(0.95); }
.tscan-medium__cta-btn--soft {
  background: transparent;
  color: var(--accent-red, #b33a3a);
  border-color: var(--border-subtle, rgba(0,0,0,0.15));
}
.tscan-medium__cta-btn--soft:hover {
  border-color: var(--accent-red, #b33a3a);
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 8%, transparent);
}

/* Compact Trajectory Scan — phase pill + 5 coloured squares.
   Used in Cross-Theatre cluster rows and any tight list context. */
.tscan-compact {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg-secondary, #f5efe3);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 8px;
  font-size: 0.82rem;
}
.tscan-compact__country {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tscan-compact__phase {
  font-size: 0.7rem;
  padding: 2px 8px;
}
.tscan-compact__squares {
  display: inline-flex;
  gap: 3px;
}
.tscan-compact__sq {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: help;
}

/* Cross-Theatre cluster — per-country scan list */
.intel-crosstheatre__scans {
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px dashed var(--border-subtle, rgba(0,0,0,0.08));
}
.intel-crosstheatre__scans-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-tertiary, #6b5d4c);
  margin-bottom: 8px;
}
.intel-crosstheatre__scans-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intel-crosstheatre__scan-row:empty::before {
  content: "loading…";
  color: var(--text-tertiary, #6b5d4c);
  font-size: 0.75rem;
  font-style: italic;
  padding: 6px 10px;
  display: block;
}

/* Global Pulse compact — one-card stacked layout replaces 3-col grid.
   Pills row + weekly inline + outlook inline. Same data, 50% less scroll. */
.global-summary-card.gs-compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
}
.gs-compact .gs-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.gs-compact .gs-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}
.gs-compact .gs-avg {
  font-size: 0.78rem;
  color: var(--text-tertiary, #6b5d4c);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gs-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--text-secondary);
  padding: 6px 0;
}
.gs-row-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-tertiary, #6b5d4c);
  min-width: 70px;
}
.gs-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.gs-inline-num {
  font-weight: 700;
  font-size: 0.94rem;
}
.gs-inline-sub {
  color: var(--text-tertiary, #6b5d4c);
  font-size: 0.78rem;
}
.gs-inline-sep {
  color: var(--text-tertiary, #6b5d4c);
  opacity: 0.5;
}

/* Today-hero Trajectory Scan of the day — section wrapper */
.today-scan-section {
  margin: 32px 0;
  padding: 20px 0;
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}
.today-scan-section[hidden] { display: none; }
.today-scan-section__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.today-scan-section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-red, #b33a3a);
}
.today-scan-section__sub {
  font-size: 0.82rem;
  color: var(--text-tertiary, #6b5d4c);
  font-style: italic;
}

/* Country-modal header strip for the Trajectory Scan section */
.cp-tscan-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}
.cp-tscan-section__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.cp-tscan-section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-red, #b33a3a);
}
.cp-tscan-section__sub {
  font-size: 0.78rem;
  color: var(--text-tertiary, #6b5d4c);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════
   ARGUS CHAT PANEL — persistent right column
   Thread scrollable + sticky input at bottom. Agent messages render
   as inline cards that can embed Trajectory Scans, sources, etc.
   ══════════════════════════════════════════════════════════════════ */
.argus-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Fixed to the viewport so the input bar stays pinned regardless
     of page scroll — matches Claude.ai / ChatGPT behaviour. */
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  width: 380px;
  z-index: 20;
  background: color-mix(in oklab, var(--bg-primary, #faf6ec) 85%, var(--bg-secondary, #f5efe3) 15%);
  border-left: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

.argus-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* More breathing room between the viewport top and the "Argus / CRISIS
     CO-PILOT" label on both desktop and mobile overlay. The older 14px
     felt pinched against the Cloudflare top banner / device status bar. */
  padding: 22px 16px 16px;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  flex-shrink: 0;
}
.argus-panel__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.argus-panel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-red, #b33a3a);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-red, #b33a3a) 30%, transparent);
  animation: argusDotPulse 2s ease-in-out infinite;
  align-self: center;
}
@keyframes argusDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-red, #b33a3a) 30%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent-red, #b33a3a) 0%, transparent); }
}
.argus-panel__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.argus-panel__sub {
  font-size: 0.72rem;
  color: var(--text-tertiary, #6b5d4c);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.argus-panel__actions {
  display: flex;
  gap: 4px;
}
.argus-panel__act {
  /* Auto-size when a label is visible (Argus modal); shrinks to a
     32x32 square when overview-section CSS hides the label (compact
     header). gap separates icon from label cleanly. */
  height: 32px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid color-mix(in oklab, var(--text-primary) 10%, transparent);
  background: transparent;
  color: var(--text-secondary, var(--text-tertiary, #6b5d4c));
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug, -0.005em);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.argus-panel__act:hover {
  background: color-mix(in oklab, var(--accent-teal) 8%, transparent);
  border-color: color-mix(in oklab, var(--accent-teal) 30%, transparent);
  color: var(--accent-teal);
}
.argus-panel__act:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}
/* Close button is icon-only — restore the original tight square. */
.argus-panel__act--close {
  padding: 0;
  width: 32px;
}

.argus-panel__thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* Welcome state — shown when thread is empty. */
.argus-welcome {
  padding: 24px 8px;
  text-align: center;
  color: var(--text-secondary, #3a322a);
}
.argus-welcome h3 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text-primary);
}
.argus-welcome p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-tertiary, #6b5d4c);
  margin: 0 0 16px;
}
.argus-welcome__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.argus-welcome__chip {
  padding: 6px 12px;
  background: var(--bg-secondary, #f5efe3);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text-secondary, #3a322a);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.argus-welcome__chip:hover {
  background: var(--bg-primary, #faf6ec);
  border-color: var(--accent-red, #b33a3a);
  color: var(--accent-red, #b33a3a);
}

/* Message cards — user, argus, argus-error, pending */
.argus-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.argus-msg--user {
  flex-direction: row-reverse;
}
.argus-msg__avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-red, #b33a3a);
  color: white;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 50%;
}
.argus-msg--user .argus-msg__avatar {
  background: var(--text-primary);
}
.argus-msg--argus-error .argus-msg__avatar {
  background: #8a3a0d;
}
.argus-msg__body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 38px);
  padding: 10px 14px;
  background: var(--bg-primary, #faf6ec);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.55;
}
.argus-msg--user .argus-msg__body {
  background: color-mix(in oklab, var(--accent-red, #b33a3a) 12%, transparent);
  border-color: color-mix(in oklab, var(--accent-red, #b33a3a) 22%, transparent);
}
.argus-msg--argus-error .argus-msg__body {
  background: color-mix(in oklab, #8a3a0d 10%, transparent);
  border-color: color-mix(in oklab, #8a3a0d 22%, transparent);
  color: #8a3a0d;
}
.argus-msg__text {
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.argus-msg__prose p {
  margin: 0 0 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.argus-msg__prose p:last-child { margin-bottom: 0; }

/* Rendered markdown inside Argus responses — LLMs emit **bold**, ## heads,
   - lists, tables, code. Keep visual hierarchy tight (chat context, not
   a full article) with compact spacing + the same paper palette. */
.argus-msg__prose strong { font-weight: 600; color: var(--text-primary); }
.argus-msg__prose em { font-style: italic; }
.argus-msg__prose h1,
.argus-msg__prose h2,
.argus-msg__prose h3,
.argus-msg__prose h4,
.argus-msg__prose h5 {
  font-family: var(--font-display, inherit);
  font-weight: 600;
  color: var(--text-primary);
  margin: 14px 0 6px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.argus-msg__prose h1 { font-size: 1.15rem; }
.argus-msg__prose h2 { font-size: 1.05rem; }
.argus-msg__prose h3 { font-size: 0.98rem; }
.argus-msg__prose h4 { font-size: 0.92rem; }
.argus-msg__prose h5 { font-size: 0.88rem; color: var(--accent-red, #B5321A); letter-spacing: 0.06em; text-transform: uppercase; }
.argus-msg__prose > *:first-child { margin-top: 0; }

.argus-msg__prose ul,
.argus-msg__prose ol {
  margin: 4px 0 10px;
  padding-left: 22px;
}
.argus-msg__prose li {
  margin: 2px 0;
  line-height: 1.5;
}
.argus-msg__prose li > p { margin: 0; }
.argus-msg__prose li::marker { color: var(--text-tertiary, #6b5d4c); }

.argus-msg__prose a {
  color: var(--accent-red, #B5321A);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.argus-msg__prose a:hover { text-decoration-thickness: 2px; }

.argus-msg__prose code {
  font-family: var(--font-mono, 'SF Mono', ui-monospace, monospace);
  font-size: 0.88em;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
}
.argus-msg__prose pre {
  font-family: var(--font-mono, 'SF Mono', ui-monospace, monospace);
  background: rgba(0, 0, 0, 0.05);
  padding: 10px 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 8px 0;
}
.argus-msg__prose pre code { background: none; padding: 0; }

.argus-msg__prose blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 2px solid var(--accent-red, #B5321A);
  color: var(--text-secondary);
  font-style: italic;
}

.argus-msg__prose hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 14px 0;
}

.argus-msg__prose table {
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 0.88rem;
  width: 100%;
}
.argus-msg__prose th,
.argus-msg__prose td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
  vertical-align: top;
}
.argus-msg__prose th {
  font-weight: 600;
  background: rgba(0, 0, 0, 0.03);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* Source provenance strip — clickable pills under each Argus message
   listing the canonical data sources referenced in the response. One
   chip per unique source; click to open the official homepage in a
   new tab. Provides visible, verifiable grounding at a glance. */
.argus-msg__source-strip {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.argus-msg__source-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary, #6b5d4c);
  font-weight: 600;
  margin-right: 4px;
}
.argus-msg__source-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--text-secondary, #3a322a);
  text-decoration: none;
  line-height: 1.3;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.argus-msg__source-chip:hover {
  background: color-mix(in oklab, var(--accent-red, #B5321A) 10%, transparent);
  color: var(--accent-red, #B5321A);
  border-color: color-mix(in oklab, var(--accent-red, #B5321A) 35%, transparent);
  text-decoration: none;
}

/* Embedded Trajectory Scan inside a message */
.argus-msg__scan {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-subtle, rgba(0,0,0,0.1));
}
.argus-msg__scan .tscan {
  padding: 10px;
  font-size: 0.82rem;
}
.argus-msg__scan .tscan-cat {
  padding: 8px 10px;
}
.argus-msg__scan .tscan-cat__name {
  font-size: 0.78rem;
}

.argus-msg__sources {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-tertiary, #6b5d4c);
}
.argus-msg__sources summary {
  cursor: pointer;
  padding: 4px 0;
  font-weight: 600;
}
.argus-msg__sources ul {
  list-style: none;
  padding: 6px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.argus-msg__sources li {
  padding: 3px 8px;
  background: var(--bg-secondary, #f5efe3);
  border-radius: 4px;
  font-size: 0.74rem;
}
.argus-msg__sources li code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
}

/* Pending state — animated dots while Argus is thinking */
.argus-msg--pending .argus-msg__body {
  padding: 12px 14px;
}
.argus-pending-dots {
  display: inline-flex;
  gap: 4px;
}
.argus-pending-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-red, #b33a3a);
  animation: argusPendingDot 1.2s ease-in-out infinite;
  display: block;
}
.argus-pending-dots i:nth-child(2) { animation-delay: 0.15s; }
.argus-pending-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes argusPendingDot {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* Thinking widget — replaces static dots while waiting for the first SSE
   event. Spinner + analyst-grade rotating label (every 6s) + live elapsed
   counter. Conveys what Argus is doing under the hood and proves the
   system is alive when server-side SSE buffering delays the first
   incremental byte by 60-150s. */
.argus-thinking {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.85rem;
  color: var(--ink-muted, #666);
  line-height: 1.4;
  max-width: 100%;
}
.argus-thinking__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--rule-soft, rgba(0, 0, 0, 0.08));
  border-top-color: var(--accent-red, #b33a3a);
  border-radius: 50%;
  animation: argusThinkingSpin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes argusThinkingSpin {
  to { transform: rotate(360deg); }
}
.argus-thinking__label {
  flex: 1 1 auto;
  min-width: 0;
  transition: opacity 200ms ease-out;
  opacity: 1;
}
.argus-thinking__elapsed {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--ink-muted, #666);
  opacity: 0.55;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* Input form — Perplexity-grade box. Visible border, generous padding,
   subtle shadow for depth, white-ish background that contrasts with the
   cream paper canvas. The whole bar is the "input box" — input field +
   buttons live inside one bordered container so it reads as a single
   composable affordance, not three separate UI elements. */
.argus-panel__input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 14px 18px;
  padding: 8px 8px 8px 16px;
  border: 1.5px solid color-mix(in oklab, var(--text-primary) 18%, transparent);
  border-radius: 16px;
  background: var(--bg-canvas, #fffbf0);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.02),
    0 4px 16px rgba(0,0,0,0.05);
  flex-shrink: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  min-height: 56px;
}
.argus-panel__input:focus-within {
  border-color: color-mix(in oklab, var(--text-primary) 32%, transparent);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.03),
    0 6px 24px rgba(0,0,0,0.08);
}
.argus-panel__input-field {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text-primary);
  padding: 6px 0;
}
.argus-panel__input-field::placeholder {
  color: color-mix(in oklab, var(--text-primary) 40%, transparent);
}
.argus-panel__input-btn {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.1));
  background: var(--bg-secondary, #f5efe3);
  color: var(--text-tertiary, #6b5d4c);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.argus-panel__input-btn:hover {
  background: var(--bg-primary, #faf6ec);
  color: var(--accent-red, #b33a3a);
  border-color: var(--accent-red, #b33a3a);
}
.argus-panel__input-btn--send {
  background: var(--accent-red, #b33a3a);
  color: white;
  border-color: var(--accent-red, #b33a3a);
}
.argus-panel__input-btn--send:hover {
  filter: brightness(0.95);
  color: white;
}

/* Navbar toggle button */
.argus-panel-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.12));
  border-radius: 6px;
  color: var(--text-secondary, #3a322a);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.argus-panel-toggle-btn:hover {
  border-color: var(--accent-red, #b33a3a);
  color: var(--accent-red, #b33a3a);
}
.argus-panel-toggle-btn__kbd {
  display: inline-flex;
  gap: 2px;
  color: var(--text-tertiary, #6b5d4c);
  font-size: 0.68rem;
}
.argus-panel-toggle-btn__kbd kbd {
  font-family: inherit;
  padding: 1px 4px;
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.12));
  border-radius: 3px;
  background: var(--bg-secondary, #f5efe3);
  font-size: 0.68rem;
  line-height: 1;
}

/* TABLET (769-1279px) — Argus collapses to a slide-out overlay panel.
   Default closed (the toggle exists in the navbar); when opened, it
   slides in from the right at 400px width with a soft shadow + backdrop
   dim. Doesn't fullscreen so the user keeps context of the underlying
   page. The same .is-mobile-overlay flag the JS sets on toggle is
   reused — semantically it now means "panel is open in overlay mode",
   independent of viewport. */
@media (min-width: 769px) and (max-width: 1279px) {
  .argus-panel {
    display: flex;
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 400px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -8px 0 24px rgba(0,0,0,0.1);
    z-index: 90;
    border-left: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  }
  .argus-panel.is-mobile-overlay { transform: translateX(0); }
  .argus-panel-toggle-btn__kbd { display: none; }
}

/* MOBILE (≤768px) — Argus becomes full-screen overlay. Phone-only. */
@media (max-width: 768px) {
  .app-layout,
  .app-layout.is-argus-collapsed {
    grid-template-columns: 1fr;
  }
  .argus-panel {
    display: none;
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 100;
    height: calc(100vh - 56px);
    border-left: none;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
    width: auto;
    transform: none;
  }
  .argus-panel.is-mobile-overlay { display: flex; }
  .argus-panel-toggle-btn__kbd { display: none; }
}

/* ============================================
   DISASTER IMPACT MAP — Wave A.8.5
   Fullscreen modal with MapLibre map + metrics sidebar
   ============================================ */

.dim-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.dim-modal.hidden { display: none; }

.dim-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 14, 0.72);
  backdrop-filter: blur(2px);
}

.dim-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--surface-paper, #F5EFE0);
}

.dim-modal__map {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  background: #14130f;
}

.dim-modal__sidebar {
  flex: 0 0 360px;
  display: flex;
  flex-direction: column;
  background: var(--surface-paper, #F5EFE0);
  border-left: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  overflow-y: auto;
}

.dim-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

.dim-modal__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-red, #B5321A);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.dim-modal__heading {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary, #1a1714);
  margin: 0;
}

.dim-modal__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.12));
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-tertiary, #5e574e);
  transition: background 0.15s, color 0.15s;
}
.dim-modal__close:hover {
  background: var(--accent-red, #B5321A);
  color: #fff;
  border-color: var(--accent-red, #B5321A);
}

.dim-metrics {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dim-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dim-metric__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary, #5e574e);
}
.dim-metric__value {
  font-size: 1.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #1a1714);
  line-height: 1.05;
}
.dim-metric__sub {
  font-size: 0.74rem;
  color: var(--text-tertiary, #5e574e);
}

.dim-metric--primary .dim-metric__value {
  color: var(--accent-red, #B5321A);
  font-size: 2.1rem;
}

.dim-metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.dim-metric--small .dim-metric__value {
  font-size: 1.15rem;
}

.dim-method {
  margin: 0 24px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(13, 118, 128, 0.06);
  border-left: 3px solid var(--accent-teal, #0D7680);
}
.dim-method__title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--accent-teal, #0D7680);
  margin-bottom: 6px;
}
.dim-method__body {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary, #3a342f);
  margin: 0;
}

.dim-attribution {
  margin: 18px 24px 22px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-subtle, rgba(0,0,0,0.12));
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dim-attribution__line {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--text-tertiary, #5e574e);
}
.dim-attribution__line span:first-child { font-weight: 600; }

/* "View on map" button injected into Argus answer cards */
.argus-action-btn[data-dim-trigger="1"] {
  border-color: var(--accent-red, #B5321A);
  color: var(--accent-red, #B5321A);
}
.argus-action-btn[data-dim-trigger="1"]:hover {
  background: var(--accent-red, #B5321A);
  color: #fff;
}

@media (max-width: 720px) {
  .dim-modal__panel { flex-direction: column; }
  .dim-modal__sidebar {
    flex: 0 0 auto;
    max-height: 50vh;
    border-left: none;
    border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
  }
}

/* ============================================
   DISASTER IMPACT MAP V2 — toolbar + tooltip styles
   ============================================ */

.dim-toolbar {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dim-toolbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(20,18,14,0.85);
  color: #F5EFE0;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: background 0.15s;
}
.dim-toolbar__chip:hover {
  background: rgba(20,18,14,0.95);
}
.dim-toolbar__chip[aria-pressed="false"] {
  opacity: 0.45;
}
.dim-toolbar__chip[aria-pressed="false"] .dim-toolbar__swatch {
  filter: grayscale(0.8);
}

.dim-toolbar__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.dim-toolbar__swatch--zone {
  background: #B5321A;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}
.dim-toolbar__swatch--buildings {
  background: #F5EFE0;
}

/* Hover popup over building polygon */
.maplibregl-popup-content .dim-popup {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-primary, #1a1714);
  padding: 2px 4px;
}
.maplibregl-popup-content .dim-popup__sub {
  font-size: 0.68rem;
  color: var(--text-tertiary, #5e574e);
  margin-top: 2px;
}
.maplibregl-popup-content {
  padding: 8px 12px !important;
  border-radius: 8px !important;
}