:root {
  --fg: #1a1a1a;
  --muted: #6a6a6a;
  --bg: #fafafa;
  --line: #e5e5e5;
  --accent: #0a5ea8;
  --fail: #b03030;
  --ok: #2a7d3a;

  /* Surface tokens used by the dark-mode override block below.
   * Light-mode values are tuned to current visuals so callers that
   * adopt these vars get the same look. */
  --surface: #ffffff;            /* card backgrounds */
  --surface-alt: #f7f9fc;        /* aggregate strips, chips */
  --surface-warm: #fff7d6;       /* saved searches, primary highlight */
  --surface-amber: #fff4e0;      /* propaganda possible tier */
  --surface-amber-strong: #ffd9a1;/* propaganda definite tier */
  --text-primary: #1a2332;       /* headlines, body */
  --text-secondary: #2a3344;     /* secondary text */
  --text-muted: #6b7280;         /* metadata */
  --border-soft: #eef0f3;
  --border-medium: #e1e5eb;
  --link: #2c4ea8;
  --link-hover: #1a3577;
}

/* Dark mode — applied via html.dark-mode class (set by the inline
 * bootstrap script in base.html). The class fires when:
 *   1. user picked "dark" via the header toggle, OR
 *   2. user is on "auto" AND prefers-color-scheme: dark is true.
 * Header toggle is a 3-way cycle: auto → light → dark → auto.
 * Preserves the intelligence-blue + amber brand identity at lower
 * saturation so badges read well against a near-black canvas. */
html.dark-mode {
  & {
    --fg: #e6e9ee;
    --muted: #8b94a3;
    --bg: #0e1116;
    --line: #2d3340;
    --accent: #6c93e0;             /* lighter blue, AAA on dark bg */
    --fail: #ff8a8a;
    --ok: #7ed99a;

    --surface: #1a1f26;
    --surface-alt: #1f242c;
    --surface-warm: #3a3318;
    --surface-amber: #3d2a17;
    --surface-amber-strong: #5a3d1a;
    --text-primary: #e6e9ee;
    --text-secondary: #c1c8d3;
    --text-muted: #8b94a3;
    --border-soft: #232831;
    --border-medium: #2d3340;
    --link: #8aa9e8;
    --link-hover: #b6c8f0;
  }

  /* The CSS file has many hardcoded hex backgrounds that don't go
   * through the variables above. Override the visible ones here so
   * dark mode is consistent across every page. */
  header { background: var(--surface); }
  .brand .version-pill { background: #1d2a4a; color: #b6c8f0; }
  .brand .version-pill:hover { background: #28396b; }
  .brand .freshness-pill { background: #1a2e1d; color: #7ed99a; }

  /* Tables + lists */
  table.list th { color: var(--text-muted); border-color: var(--border-medium); }
  table.list td { border-color: var(--border-soft); }
  .row-thumb, .news-thumbnail img { background: #2a3038; }
  .row-fail { background: #3a1f1f; }

  /* Badges + chips */
  .badge { background: #2a3038; color: var(--text-secondary); }
  .badge.cat { background: #1d2a4a; color: #b6c8f0; }
  .badge.loc { background: #1a2e1d; color: #b6e0c4; }
  .badge.lang { background: #2e1d3d; color: #e0b6f0; }
  .badge.dup { background: #3a2818; color: #f0c89a; }
  .badge.dup-cluster { background: #2a3038; color: var(--text-secondary); }
  .badge.curated-sent { background: #1a2e1d; color: #7ed99a; }
  .badge.stale { background: #3a2a18; color: #f0c89a; }

  /* Propaganda — keep the warm amber identity */
  .news-badges .badge.cat-propaganda,
  .cat-cluster .badge.cat-propaganda,
  .badge.cat-propaganda {
    background: var(--surface-amber); color: #f0b97b;
    border-color: #5a3d1a;
  }
  .news-badges .badge.cat-propaganda.cat-tier-definite,
  .cat-cluster .badge.cat-propaganda.cat-tier-definite,
  .badge.cat-propaganda.cat-tier-definite {
    background: var(--surface-amber-strong); color: #ffe1a8;
    border-color: #7a5a28;
  }

  /* News card layout — .news-item is the inner card with the white
   * background in light mode (line 1338); dark-mode override sets it
   * to var(--surface) so cards stop floating bright-white in a dark
   * page. .news-item-wrap is the outer container (transparent), kept
   * for hover-state styling. */
  .news-item { background: var(--surface); border-left-color: var(--border-medium); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
  .news-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.6); }
  .news-item-wrap { background: transparent; }
  .news-item-wrap:hover { background: transparent; }
  .news-title { color: var(--text-primary); }
  .news-subtitle { color: #8b94a3; }
  .news-summary { color: var(--text-secondary); }
  .news-source { color: var(--text-muted); }
  .news-time { color: var(--text-muted); }
  .news-thumbnail { background: var(--surface-alt); }
  .news-thumbnail.thumb-fallback { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
  .feed-day-header {
    color: var(--text-secondary);
    background: rgba(31, 36, 44, 0.95);
    border-left-color: var(--border-medium);
  }
  .day-count { color: var(--text-muted); }

  /* Sticky tops + filter chrome */
  .news-sticky-top, .feed-sticky-top, .runs-sticky-top, .sources-sticky-top {
    background: var(--bg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }
  .feed-filter-bar input, .feed-filter-bar select,
  .search-bar input, .map-filters select {
    background: var(--surface); color: var(--fg);
    border-color: var(--border-medium);
  }
  .filter-apply { background: #2c4ea8; color: #fff; border-color: #1a3577; }
  .filter-apply:hover { background: #3d62c0; }
  .feed-rss-link { background: #3a2818; color: #f0b97b; border-color: #7a5a28; }
  .feed-rss-link:hover { background: #4a3520; }

  /* Saved-search chips */
  .saved-chip { background: var(--surface-warm); border-color: #6b5418; }
  .saved-chip.has-new { background: #4a401e; }
  .saved-chip-name { color: #f0d96a; }
  .saved-chip-rss { background: #3a2818; color: #f0b97b; border-color: #7a5a28; }
  .save-search-form input[type="text"] {
    background: var(--surface); color: var(--fg); border-color: var(--border-medium);
  }
  .save-search-form button {
    background: var(--surface-warm); color: #f0d96a; border-color: #6b5418;
  }

  /* Article + incident + place pages */
  .article-body { color: var(--text-secondary); }
  .article-synopsis { background: #1d2a4a; border-left-color: #6c93e0; color: var(--text-primary); }
  .article-synopsis-label { color: #8aa9e8; }
  .cluster-panel { background: var(--surface); border-color: var(--border-medium); }
  .cluster-header { border-bottom-color: var(--border-soft); }
  .cluster-label, .incident-section-label, .incident-eyebrow,
  .place-eyebrow, .about-eyebrow { color: #8aa9e8; }
  .place-eyebrow { color: #7ed99a; }
  .cluster-item { border-bottom-color: var(--border-soft); }
  .cluster-item.is-primary { background: var(--surface-warm); }
  .cluster-source, .incident-primary-source { color: var(--text-primary); }
  .cluster-title, .incident-read-link, .cluster-meta a,
  .saved-chip-name { color: var(--link); }
  .incident-header, .place-header, .about-header h1 { color: var(--text-primary); }
  .incident-header, .place-header { border-bottom-color: var(--border-medium); }
  .incident-aggregate { background: #1d2a4a; border-left-color: #6c93e0; }
  .place-aggregate { background: #1a2e1d; border-left-color: #7ed99a; }
  .incident-primary-card { background: var(--surface); border-color: var(--border-medium); }
  .incident-primary-snippet { color: var(--text-secondary); }

  /* About pages */
  .about-section h2 { color: var(--text-primary); border-bottom-color: var(--border-medium); }
  .about-section p, .about-section ul { color: var(--text-secondary); }
  .about-section code { background: #232831; color: #c1c8d3; }
  .about-source-table th { color: var(--text-muted); border-bottom-color: var(--border-medium); }
  .about-source-table td { border-bottom-color: var(--border-soft); }
  .about-source-name { color: var(--text-primary); }
  .about-source-name:hover { color: var(--link); }
  .about-source-rss { background: #3a2818; color: #f0b97b; border-color: #7a5a28; }
  .cat-propaganda-pill {
    background: var(--surface-amber); color: #f0b97b; border-color: #5a3d1a;
  }
  .place-meta .mono { background: #232831; color: var(--text-secondary); }

  /* Map view */
  .map-filters { background: var(--surface-alt); border-color: var(--border-medium); }
  .map-filters label { color: var(--text-secondary); }
  .map-filters select { background: var(--surface); color: var(--fg); border-color: var(--border-medium); }
  #map { border-color: var(--border-medium); }
  /* Leaflet's own controls + tile attribution have inline styles —
   * leave alone; OSM tiles are still readable in dark mode. */

  /* Sources operator page */
  .health-bar .chip { background: #2a3038; color: var(--text-secondary); border-color: var(--border-medium); }
  .chip { background: #2a3038; color: var(--text-secondary); border-color: var(--border-medium); }
  .chip.active { background: var(--fg); color: var(--bg); }

  /* Runs page */
  .runs-kpi { background: var(--surface); border-color: var(--border-medium); }
  .runs-kpi-label { color: var(--text-muted); }
  .runs-kpi-value { color: var(--text-primary); }
  .bulk-poll-bar { background: var(--surface-alt); border-color: var(--border-medium); }
  .bulk-poll-bar button { background: var(--surface); color: var(--text-primary); border-color: var(--border-medium); }
  .bulk-poll-bar button.primary { background: #2c4ea8; color: #fff; }
  .bulk-poll-bar button.danger { background: #5a2828; color: #ffb6b6; }

  /* Snapshot stale banner */
  .snapshot-stale-banner { background: #3a2a18; color: #f0c89a; border-color: #5a3d1a; }
  .snapshot-stale-banner strong { color: #f0d96a; }

  /* Curated batch bar */
  .curated-batch-bar { background: var(--surface-warm); border-color: #6b5418; }
}

* { box-sizing: border-box; }
body {
  font-family: -apple-system, system-ui, 'Helvetica Neue', sans-serif;
  font-size: 14px;
  color: var(--fg);
  background: var(--bg);
  margin: 0;
  line-height: 1.5;
}
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.brand a { font-weight: 600; text-decoration: none; color: var(--fg); }
.brand .muted { margin-left: 6px; font-weight: normal; }
/* Version pill — subtle, sits next to the muted "/ news collection" label.
 * Clickable: links to /api/version JSON for scripted introspection. */
.brand .version-pill {
  margin-left: 8px; padding: 1px 7px; border-radius: 9px;
  background: #eef3ff; color: #2c4ea8; font-size: 11px;
  font-weight: 600; text-decoration: none; letter-spacing: 0.2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.brand .version-pill:hover { background: #dde6ff; }
/* Freshness pill — sits right of the version pill, surfaces the most-recent
 * successful poll timestamp so a customer can tell at a glance the pipeline
 * is alive. Visually distinct from the version pill (warmer tone, no link). */
.brand .freshness-pill {
  margin-left: 6px; padding: 1px 7px; border-radius: 9px;
  background: #f0f7ee; color: #2e7d32; font-size: 11px;
  font-weight: 600; letter-spacing: 0.2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
nav a {
  margin-left: 18px;
  text-decoration: none;
  color: var(--muted);
}
nav a:hover { color: var(--accent); }
/* Sign-out button — styled to match nav links so it looks like
   one and not a chunky form submit. Inside an inline <form> wrapper
   so a POST is still used for the logout action (CSRF-safe pattern). */
nav .link-button {
  margin-left: 18px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
}
nav .link-button:hover { color: var(--accent); }
/* Color-scheme cycle button — sits at the right edge of the nav.
 * Three icons (auto / light / dark) toggle visibility per the JS state;
 * only one is visible at a time. */
.scheme-toggle {
  margin-left: 18px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.2;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.scheme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(108, 147, 224, 0.08);
}
.scheme-toggle-icon { display: inline-block; }
.scheme-toggle-icon[hidden] { display: none; }
nav .alert-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--fail);
  color: #fff;
  margin-left: 4px;
}
.row-fail { background: #fff7f7; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

h1 { font-size: 22px; margin-top: 0; }
h2 { font-size: 16px; margin-top: 28px; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: SF Mono, Menlo, Monaco, monospace; }
.fail { color: var(--fail); }
.ok { color: var(--ok); }

table.list {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
table.list th, table.list td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
table.list th {
  font-weight: 600; font-size: 11px; text-transform: uppercase;
  color: var(--muted); background: #fff;
}
table.list a { color: var(--fg); text-decoration: none; }
table.list a:hover { color: var(--accent); }

button {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  border-radius: 3px;
}
button:hover { background: #f0f0f0; }

.article-title {
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.article-meta { margin-top: 0; margin-bottom: 14px; }

.article-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 18px;
}
@media (min-width: 900px) {
  .article-columns:has(.article-col + .article-col) {
    grid-template-columns: 1fr 1fr;
  }
}
.article-col h2.col-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 8px 0;
}
.article-body {
  background: #fff;
  border: 1px solid var(--line);
  padding: 16px 22px;
  border-radius: 4px;
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.6;
}
/* Burmese needs a font with Pyidaungsu coverage and more line-height */
.article-body.lang-my {
  font-family: 'Pyidaungsu', 'Padauk', 'Myanmar Text', 'Noto Sans Myanmar', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.85;
}
.article-body.lang-zh {
  font-family: 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  line-height: 1.7;
}
.more-from { margin-top: 24px; }
.more-from a { color: var(--accent); text-decoration: none; font-size: 13px; }

/* feed thumbnails */
table.list .thumb-cell {
  width: 56px;
  padding-right: 6px;
}
.row-thumb {
  display: block;
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 3px;
  background: #f0f0f0;
}

/* Propaganda transparency banner — sits above the AI synopsis on
 * articles flagged with the propaganda category. Two visual variants:
 *   .propaganda-definite — solid amber, ⚠ icon, "state-media source"
 *   .propaganda-possible — outlined yellow, "quotes junta talking points"
 * Both link to the methodology page so the customer can drill into how
 * the call was made. */
.propaganda-banner {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 6px 0 14px 0;
  padding: 12px 14px;
  border-radius: 5px;
  font-size: 13px; line-height: 1.5;
}
.propaganda-banner-icon {
  font-size: 22px; line-height: 1; flex-shrink: 0;
}
.propaganda-banner-body { flex: 1; color: #4a3a18; }
.propaganda-banner-body strong { color: #7a3a00; margin-right: 4px; }
.propaganda-banner-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; padding: 1px 5px; border-radius: 3px;
  background: #fff8e1; color: #7a3a00;
}
.propaganda-banner-more {
  display: inline-block; margin-left: 6px;
  color: #7a3a00; font-weight: 700; text-decoration: none;
  border-bottom: 1px dotted #7a3a00;
}
.propaganda-banner-more:hover { text-decoration: none; border-bottom-style: solid; }

.propaganda-banner.propaganda-definite {
  background: #ffe5b8; border: 1px solid #d99a4d;
}
.propaganda-banner.propaganda-definite .propaganda-banner-icon { color: #b35900; }

.propaganda-banner.propaganda-possible {
  background: #fff7d6; border: 1px solid #f0d96a;
}
.propaganda-banner.propaganda-possible .propaganda-banner-icon { color: #b35900; }

html.dark-mode {
  .propaganda-banner.propaganda-definite {
    background: #5a3d1a; border-color: #7a5a28; color: #ffe1a8;
  }
  .propaganda-banner.propaganda-possible {
    background: #4a401e; border-color: #6b5418; color: #f0e0a0;
  }
  .propaganda-banner-body { color: #ffe1a8; }
  .propaganda-banner-body strong { color: #ffd9a1; }
  .propaganda-banner-body code { background: #2a1f0d; color: #ffd9a1; }
  .propaganda-banner-more { color: #ffd9a1; border-bottom-color: #ffd9a1; }
}

/* AI synopsis callout — promoted from a buried <details> element to a
 * prominent customer-facing tl;dr above the article body. The synopsis is
 * cached on first curated.co send (synopsis_en column) so this is free. */
.article-synopsis {
  margin: 6px 0 18px 0;
  padding: 10px 14px;
  background: #f7f9fc;
  border-left: 3px solid #2c4ea8;
  border-radius: 0 4px 4px 0;
  color: #1a2332;
}
.article-synopsis-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #2c4ea8;
  margin-bottom: 4px;
}
.article-synopsis p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* About / methodology / source-catalogue pages — customer trust surface. */
.about-page { max-width: 760px; margin: 0 auto; }
.about-header { margin: 8px 0 24px 0; }
.about-eyebrow {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.7px; text-transform: uppercase;
  color: #2c4ea8;
  margin-bottom: 6px;
}
.about-header h1 { margin: 4px 0 8px 0; font-size: 28px; }
.about-lede {
  font-size: 15px; line-height: 1.55; color: #2a3344;
  margin: 0 0 8px 0;
}
.about-section { margin: 22px 0; }
.about-section h2 {
  font-size: 15px; color: #1a2332;
  margin: 0 0 8px 0;
  padding-bottom: 6px; border-bottom: 1px solid #e1e5eb;
}
.about-section p {
  font-size: 14px; line-height: 1.6; color: #2a3344;
  margin: 8px 0;
}
.about-section ul {
  font-size: 14px; line-height: 1.6; color: #2a3344;
  padding-left: 22px; margin: 8px 0;
}
.about-section ul li { margin: 4px 0; }
.about-section code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; padding: 1px 4px; border-radius: 3px;
  background: #eef2f5; color: #34495e;
}
.about-footer { margin-top: 32px; }

/* Inline propaganda pill for use inside the methodology body — same
 * amber + outline as the actual badge so the reader recognises it. */
.cat-propaganda-pill {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  background: #fff4e0; color: #b35900; border: 1px solid #f0b97b;
  font-weight: 700; font-size: 11px;
}

.about-source-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; margin-top: 4px;
}
.about-source-table th {
  text-align: left; font-weight: 600; color: #6b7280;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  border-bottom: 1px solid #e1e5eb; padding: 6px 8px;
}
.about-source-table th.right, .about-source-table td.right { text-align: right; }
.about-source-table td {
  padding: 6px 8px; border-bottom: 1px solid #f3f5f8;
}
.about-source-name {
  color: #1a2332; font-weight: 600; text-decoration: none;
}
.about-source-name:hover { color: #2c4ea8; text-decoration: underline; }
.about-source-rss {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  color: #c14d18; text-decoration: none;
  padding: 1px 6px; border-radius: 3px;
  background: #fff5eb; border: 1px solid #f4c39a;
}
.about-source-rss:hover { background: #ffe7d1; }

/* Article-detail mini-map — small Leaflet view showing only the
 * townships this article mentions, highlighted on a faded backdrop
 * of the rest of Myanmar. Lazy-loaded from the template; only
 * rendered when the article has 2+ township-level locations. */
.article-mini-map {
  height: 280px;
  margin: 12px 0 18px 0;
  border: 1px solid var(--border-medium, #e1e5eb);
  border-radius: 6px;
  background: var(--surface, #fff);
}
@media (max-width: 720px) {
  .article-mini-map { height: 220px; }
}

/* Map view — Leaflet choropleth of Myanmar townships. */
.map-page { max-width: 1100px; margin: 0 auto; }
.map-header { margin: 6px 0 8px 0; }
.map-header h1 { display: inline; margin-right: 12px; }
.map-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 12px;
  background: #f7f9fc; border: 1px solid #e1e5eb; border-radius: 5px;
  font-size: 12px;
}
.map-filters label { color: #2c3e50; font-weight: 600; }
.map-filters select {
  font-size: 12px; padding: 3px 6px;
  border: 1px solid #d0d7de; border-radius: 4px; background: #fff;
  margin-left: 4px;
}
.map-meta { margin-left: auto; }
#map {
  height: 640px;
  border: 1px solid #e1e5eb; border-radius: 6px;
}
.map-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 10px 0 0 0; font-size: 11px;
}
.map-legend-cell {
  display: inline-block;
  padding: 2px 9px; border-radius: 3px;
  font-weight: 700; color: #1a2332;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
@media (max-width: 720px) {
  #map { height: 480px; }
  .map-filters { flex-direction: column; align-items: stretch; }
  .map-meta { margin-left: 0; }
}

/* Place / township detail page — symmetric peer to /incident. */
.place-header {
  margin: 8px 0 18px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #e1e5eb;
}
.place-eyebrow {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.7px; text-transform: uppercase;
  color: #2e7d32;          /* green to differentiate from incident's blue */
  margin-bottom: 6px;
}
.place-title {
  margin: 4px 0 6px 0;
  font-size: 24px; line-height: 1.25; color: #1a2332;
}
.place-meta { margin: 0; }
.place-meta .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; padding: 1px 5px; border-radius: 3px;
  background: #eef2f5; color: #34495e;
}
.place-aggregate {
  margin: 0 0 18px 0; padding: 10px 14px;
  background: #f4faf5; border-left: 3px solid #2e7d32;
  border-radius: 0 4px 4px 0;
}
.place-articles { margin-top: 10px; }
.badge.place-outlet {
  background: #eef2f5; color: #34495e; font-weight: 600;
}

/* Incident detail page — stable bookmarkable URL per dedup cluster. */
.incident-header {
  margin: 8px 0 18px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #e1e5eb;
}
.incident-eyebrow {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.7px; text-transform: uppercase;
  color: #2c4ea8;
  margin-bottom: 6px;
}
.incident-title {
  margin: 4px 0 6px 0;
  font-size: 24px; line-height: 1.25; color: #1a2332;
}
.incident-subtitle { margin: 0 0 6px 0; font-style: italic; }
.incident-span { margin: 0; }

.incident-aggregate {
  margin: 0 0 18px 0; padding: 10px 14px;
  background: #f7f9fc; border-left: 3px solid #2c4ea8;
  border-radius: 0 4px 4px 0;
}
.incident-aggregate-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin: 4px 0;
}
.incident-aggregate-label {
  display: inline-block; min-width: 80px; font-weight: 600;
}
.incident-aggregate-row .badge {
  font-size: 11px; padding: 2px 6px; border-radius: 3px;
  background: #d6e4f5; color: #1f4e79; font-weight: 600;
  text-decoration: none; letter-spacing: 0.2px;
}
.incident-aggregate-row .badge.loc {
  background: #e8f5e9; color: #2e7d32;
}

.incident-section-header { margin: 14px 0 8px 0; }
.incident-section-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; color: #2c4ea8;
}
.incident-primary-card {
  padding: 14px 16px; margin-bottom: 18px;
  background: #fff; border: 1px solid #d6dce4; border-radius: 6px;
}
.incident-primary-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; color: #1a2332; margin-bottom: 8px;
}
.incident-primary-source { font-weight: 600; }
.incident-primary-snippet {
  font-size: 14px; line-height: 1.5; color: #2a3344;
  margin: 6px 0 10px 0;
}
.incident-read-link {
  font-size: 13px; font-weight: 600; color: #2c4ea8;
  text-decoration: none;
}
.incident-read-link:hover { text-decoration: underline; }

.incident-cluster-list { margin-top: 4px; }
.cluster-item.is-primary {
  background: #fff7d6; border-radius: 3px; padding-left: 6px;
}

/* "Related incidents in this location" — sibling of .cluster-panel
 * but green-themed to match the place pages, so the customer reads it
 * as "different stories, same place" rather than "more of this story". */
.related-panel {
  margin: 24px 0 18px 0;
  padding: 14px 18px;
  background: #f4faf5;
  border: 1px solid #d6ebda;
  border-radius: 6px;
}
.related-header {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 10px; margin-bottom: 10px;
  border-bottom: 1px solid #e0eee2; padding-bottom: 8px;
}
.related-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; color: #2e7d32;
}
.related-places { font-size: 13px; font-weight: 600; color: #1a2332; }
.related-places a { color: #2e7d32; text-decoration: none; }
.related-places a:hover { text-decoration: underline; }
.related-meta { margin-left: auto; }
.related-list .cluster-item { border-bottom-color: #e0eee2; }
.related-list .cluster-title { color: #2e7d32; }
.related-list .cluster-title:hover { color: #1c5b21; }

html.dark-mode {
  .related-panel { background: #15251a; border-color: #2a4030; }
  .related-header { border-bottom-color: #2a4030; }
  .related-label { color: #7ed99a; }
  .related-places { color: var(--text-primary); }
  .related-places a { color: #7ed99a; }
  .related-list .cluster-item { border-bottom-color: #1f3024; }
  .related-list .cluster-title { color: #7ed99a; }
  .related-list .cluster-title:hover { color: #b6e0c4; }
}

/* "Other reports of this incident" — cluster panel on the article page.
 * Surfaces dedup engine output: the other outlets that reported the
 * same incident. Sits between the article body and the
 * "More from {source}" link. */
.cluster-panel {
  margin: 28px 0 18px 0;
  padding: 14px 18px;
  background: #fafbfc;
  border: 1px solid #e1e5eb;
  border-radius: 6px;
}
.cluster-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
  border-bottom: 1px solid #eef0f3; padding-bottom: 8px;
}
.cluster-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; color: #2c4ea8;
}
.cluster-meta a { color: #2c4ea8; text-decoration: none; }
.cluster-meta a:hover { text-decoration: underline; }
.cluster-list {
  list-style: none; margin: 0; padding: 0;
}
.cluster-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: baseline; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f3f5f8;
  font-size: 13px; line-height: 1.4;
}
.cluster-item:last-child { border-bottom: none; }
.cluster-item .source-badge {
  font-size: 9px; font-weight: 600; padding: 1px 5px;
  color: #fff; border-radius: 2px; letter-spacing: 0.3px;
}
.cluster-source { color: #1a2332; font-weight: 600; }
.cluster-time { white-space: nowrap; }
.cluster-title {
  color: #2c4ea8; text-decoration: none;
  grid-column: 4 / 5;
  text-align: left;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* On narrow viewports, let the title wrap to its own row beneath the
 * source/badge/time line instead of clipping. */
@media (max-width: 720px) {
  .cluster-item {
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
  }
  .cluster-title {
    grid-column: 1 / 4;
    -webkit-line-clamp: 2;
  }
}

/* article-detail images */
.article-media {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 12px 0 18px 0;
}
.article-image {
  max-height: 240px;
  max-width: 100%;
  border-radius: 4px;
  background: #f0f0f0;
  object-fit: cover;
}

/* /compare */
section.compare-window {
  margin: 28px 0;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
section.compare-window h2 { margin-top: 12px; font-size: 18px; }
.compare-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.totals-cell {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
}
.totals-cell .big-num { font-size: 22px; font-weight: 600; }
details { margin: 8px 0; }
details summary { cursor: pointer; padding: 4px 0; }
details summary:hover { color: var(--accent); }
ul.cols {
  columns: 3;
  font-size: 12px;
  color: var(--muted);
  padding-left: 18px;
  margin: 8px 0;
}
table.list.compact th, table.list.compact td { padding: 4px 8px; }
code { background: #fff; padding: 1px 4px; border: 1px solid var(--line); border-radius: 3px; }

/* status dots */
.dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; vertical-align: middle;
}
.dot.green  { background: #2a7d3a; }
.dot.yellow { background: #d4a017; }
.dot.red    { background: #b03030; }
.dot.gray   { background: #c8c8c8; }

/* /sources extras */
table.list .right    { text-align: right; }
table.list .nowrap   { white-space: nowrap; }
form.inline          { display: inline-block; margin: 0 2px 0 0; }
.row-disabled td     { color: var(--muted); }
.row-disabled .src-name a { color: var(--muted); }
button[disabled] {
  opacity: 0.4; cursor: not-allowed;
}

.badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  text-decoration: none;
  margin-right: 3px;
}
a.badge:hover { color: var(--accent); border-color: var(--accent); }
.badge.loc { background: #f0f6ff; }

.row-tags { margin-top: 3px; }
p.enrichment, .enrichment { margin: 6px 0 14px 0; }
.enrich-row { margin-bottom: 6px; line-height: 1.7; }
.enrich-label { display: inline-block; min-width: 80px; }
.cat-cluster { display: inline-block; margin-right: 12px; }
.cat-cluster .matched { font-size: 11px; margin-left: 4px; font-style: italic; }

/* search bar */
.search-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.search-bar input[type=search] {
  flex: 1;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: inherit;
}
.search-bar input[type=search]:focus {
  outline: none;
  border-color: var(--accent);
}
.search-bar button {
  padding: 6px 14px;
  font-size: 13px;
}

/* filter chips */
.filter-chips { margin: 0 0 14px 0; line-height: 1.8; }
.chip {
  display: inline-block;
  font-size: 11px;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  margin-right: 4px;
}
.chip .x { color: var(--muted); padding: 0 4px; text-decoration: none; }
.chip .x:hover { color: var(--fail); }

/* date headers */
.date-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 24px 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.date-header:first-of-type { margin-top: 8px; }

/* health bar (sources page) */
.health-bar { line-height: 1.8; margin-bottom: 8px; }
.health-bar .chip { padding: 4px 10px; }

a.chip { text-decoration: none; color: var(--fg); }
.chip.active { background: var(--fg); color: #fff; }
.chip.active .muted { color: #ccc; }

/* feed table tweaks */
table.list .src-cell  { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
table.list .lang-cell { white-space: nowrap; }
a.article-link { color: var(--fg); text-decoration: none; font-weight: 500; }
a.article-link:hover { color: var(--accent); }

/* pager */
nav.pager {
  display: flex; justify-content: space-between; align-items: center;
  margin: 30px 0 10px 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
nav.pager a { text-decoration: none; color: var(--accent); padding: 4px 8px; }
nav.pager a:hover { background: #f0f0f0; border-radius: 3px; }

/* ────────────────────────────────────────────────────────────────
   News tab — MSSRP-style cards (port of MSSRP dashboard.css feed
   rules with hex values inlined; no token import dependency).
   ──────────────────────────────────────────────────────────────── */
.news-page { max-width: 920px; margin: 0 auto; }
.news-page-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.news-page-header h1 { margin: 0; }
.news-count { color: #6a6a6a; font-size: 12px; }

/* Sticky page-top: header + filter bar + active chips stay pinned while
   the article list scrolls. z-index above .feed-day-header (5) so the
   day stickies slide *under* the filter row instead of overlapping it. */
.news-sticky-top {
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  margin: 0 -8px 8px;
  padding: 4px 8px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.news-sticky-top .feed-filter-bar { margin-bottom: 6px; }
.news-sticky-top .filter-chips { margin-bottom: 0; }

/* Runs page KPI strip — same visual language as the rest of /sources +
   /compare summary rows. Tile-style, wraps on narrow screens. */
.runs-kpi-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 14px 0;
}
.runs-kpi {
  flex: 1 1 150px; min-width: 130px;
  background: #f7f9fb; border: 1px solid #e2e6ec;
  border-radius: 6px; padding: 8px 12px;
}
.runs-kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #7f8c8d; }
.runs-kpi-value { font-size: 20px; font-weight: 700; color: #1a2332; margin-top: 2px; }
.runs-kpi-sub { font-size: 11px; margin-top: 2px; }
.runs-kpi-sub .ok   { color: #27ae60; }
.runs-kpi-sub .fail { color: #c0392b; }
.apify-sev {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: #fff; background: #95a5a6;
}
.apify-sev.apify-ok       { background: #27ae60; }
.apify-sev.apify-watch    { background: #f39c12; }
.apify-sev.apify-warn     { background: #e67e22; }
.apify-sev.apify-critical { background: #c0392b; }
.apify-sev.apify-over     { background: #c0392b; }

/* /runs sticky top — h1 + KPI tile strip + status filter chips
   pinned while the runs table scrolls. Same recipe as the other
   three list pages (z-index 10, white background, faint shadow). */
.runs-sticky-top {
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  margin: 0 -8px 8px;
  padding: 4px 8px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.runs-sticky-top h1 { margin: 6px 0 10px; }
.runs-sticky-top .runs-kpi-strip { margin-bottom: 8px; }
.runs-sticky-top .filter-chips { margin-bottom: 0; }

/* /feed sticky top — search bar + h1 + active-filter chips pinned
   while the date-grouped article tables scroll. Matches the
   .news-sticky-top / .sources-sticky-top pattern (z-index 10, white
   background, faint shadow). The .date-header sub-stickies are not
   sticky themselves on this page, so no z-index conflict. */
.feed-sticky-top {
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  margin: 0 -8px 8px;
  padding: 4px 8px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.feed-sticky-top h1 { margin: 6px 0 8px; }
.feed-sticky-top .search-bar { margin-bottom: 6px; }
.feed-sticky-top .filter-chips { margin-bottom: 0; }

/* /raw operator stream — dense table layout, modernized to carry the
 * same row-decoration signals /news shows (translated title + snippet
 * + propaganda + dup badges + thumbnail fallback). Dense + content-rich. */
.raw-list .src-cell { white-space: nowrap; }
.raw-list .src-cell .source-badge {
  display: inline-block; vertical-align: baseline;
  font-size: 9px; font-weight: 700; padding: 1px 4px;
  border-radius: 2px; color: #fff; letter-spacing: 0.3px;
  margin-right: 4px;
}
.raw-list .article-link { font-weight: 600; color: var(--text-primary, #1a2332); text-decoration: none; }
.raw-list .article-link:hover { color: var(--link, #2c4ea8); text-decoration: underline; }
.raw-list .raw-subtitle {
  font-style: italic; font-size: 11px;
  margin: 1px 0 2px 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.raw-list .raw-snippet {
  margin: 2px 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Thumbnail fallback inside the dense table — same visual rhythm as
 * the news cards' colored-initial squares. */
.raw-list .thumb-cell .thumb-fallback {
  display: block; width: 48px; height: 48px;
  line-height: 48px; text-align: center;
  color: #fff; font-weight: 700; font-size: 18px;
  border-radius: 3px; text-decoration: none;
}
html.dark-mode {
  .raw-list .article-link { color: var(--text-primary); }
  .raw-list .raw-snippet, .raw-list .raw-subtitle { color: var(--text-muted); }
}

/* /compare/* stale-snapshot banner — friendlier than a red `.alert`
   spit-out; communicates "refresh failed but page still works" rather
   than "system on fire". Amber, left-bordered, low-noise. */
.snapshot-stale-banner {
  background: #fff8e1; border-left: 4px solid #f5a623;
  padding: 10px 14px; margin: 8px 0 12px;
  border-radius: 4px; color: #5d4e1e; font-size: 12px; line-height: 1.5;
}
.snapshot-stale-banner strong { color: #8a6d1a; }

/* /sources sticky top — h1 + bulk-poll bar + health bar + kind/lang
   chips stay pinned while the table scrolls. White background so list
   rows visually slide *under* the strip rather than blending through. */
.sources-sticky-top {
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  margin: 0 -8px 8px;
  padding: 4px 8px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.sources-sticky-top h1 { margin: 4px 0 8px; }

/* /sources bulk-poll bar */
.bulk-poll-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 12px 0; padding: 10px 12px;
  background: #f7f9fb; border: 1px solid #e2e6ec; border-radius: 6px;
}
.bulk-poll-bar form { display: inline; }
.bulk-poll-bar button {
  padding: 4px 10px; border: 1px solid #ccc; background: #fff;
  color: #2c3e50; border-radius: 4px; font-size: 11px; cursor: pointer;
}
.bulk-poll-bar button:hover { background: #ecf0f1; }
.bulk-poll-bar button.primary {
  background: #3498db; color: #fff; border-color: #2980b9; font-weight: 600;
}
.bulk-poll-bar button.primary:hover { background: #2980b9; }
.bulk-poll-bar button.danger {
  background: #fff; color: #c0392b; border-color: #e7b4ad;
}
.bulk-poll-bar button.danger:hover { background: #fdecea; }
.bulk-poll-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
.bulk-poll-bar .bulk-progress {
  font-size: 11px; color: #2c3e50; margin-left: auto;
}
.bulk-poll-bar .bulk-progress .bar-track {
  display: inline-block; width: 80px; height: 6px; background: #e2e6ec;
  border-radius: 3px; overflow: hidden; vertical-align: middle; margin: 0 6px;
}
.bulk-poll-bar .bulk-progress .bar-fill {
  display: block; height: 100%; background: #3498db; transition: width 0.4s;
}

/* Filter bar (MSSRP-style) — sits between page header and feed list. */
.feed-filter-bar {
  display: flex; gap: 6px; align-items: center;
  padding: 8px 10px; margin-bottom: 8px;
  background: #f0f2f5; border: 1px solid #e0e0e0; border-radius: 6px;
  flex-wrap: wrap;
}
.feed-search-input {
  flex: 1; min-width: 180px;
  padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px;
  font-size: 12px; background: #fff; color: #2c3e50; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.feed-search-input:focus { border-color: #3498db; box-shadow: 0 0 0 2px rgba(52,152,219,0.12); }
.feed-search-input::placeholder { color: #aab; }
.feed-filter-select {
  padding: 5px 6px; border: 1px solid #ccc; border-radius: 5px;
  font-size: 11px; background: #fff; color: #555; cursor: pointer;
  max-width: 160px; outline: none;
}
.feed-filter-select:focus { border-color: #3498db; }
.filter-apply {
  padding: 5px 12px; border: 1px solid #2980b9; background: #3498db;
  color: #fff; border-radius: 5px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.filter-apply:hover { background: #2980b9; }
.feed-filter-clear {
  text-decoration: none; font-size: 18px; color: #95a5a6;
  padding: 0 6px; line-height: 1; transition: color 0.15s;
}
.feed-filter-clear:hover { color: #d9534f; }
/* RSS subscribe link in the News filter bar — RSS-orange chip,
 * filter-aware (preserves current query params). Customers wire
 * any saved view into Slack/Teams/Mattermost/IFTTT via this link. */
.feed-rss-link {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 4px;
  background: #fff5eb;
  color: #c14d18;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  border: 1px solid #f4c39a;
}
.feed-rss-link:hover { background: #ffe7d1; border-color: #e89c63; }

/* Filter-bar mobile pass — secondary filters live in <details
 * class="filter-more"> so they collapse to a "More filters ▸"
 * disclosure on narrow viewports. On desktop, display: contents
 * removes the wrapper from layout so the selects render inline as
 * before. Form controls inside still submit regardless of state. */
.filter-more { display: contents; }
.filter-more > summary { display: none; }
@media (max-width: 720px) {
  .filter-more {
    display: block;
    flex-basis: 100%;
    margin: 0;
  }
  .filter-more[open] {
    padding: 6px 0;
    border-top: 1px solid var(--border-soft, #eef0f3);
  }
  .filter-more > summary {
    display: inline-block;
    cursor: pointer;
    font-size: 12px; font-weight: 600;
    color: var(--link, #2c4ea8);
    padding: 4px 0;
    list-style: none;
  }
  .filter-more > summary::before { content: "▸ "; }
  .filter-more[open] > summary::before { content: "▾ "; }
  .filter-more > summary::-webkit-details-marker { display: none; }
  .filter-more .feed-filter-select {
    display: block; width: 100%; margin: 4px 0;
  }
  /* Primary filter row stays compact on mobile: search full-width,
   * since/sort half-width side-by-side. */
  .feed-filter-bar { gap: 6px; }
  .feed-search-input { flex-basis: 100%; }
  .feed-filter-bar > .feed-filter-select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .filter-apply { flex: 1 1 100%; padding: 8px; font-size: 13px; }
  .feed-filter-clear, .feed-rss-link { font-size: 12px; }

  /* Sticky-tops are smaller on mobile so they don't eat the viewport. */
  .news-sticky-top, .feed-sticky-top, .runs-sticky-top, .sources-sticky-top {
    padding: 4px 6px 5px;
  }
  .news-page-header h1, .runs-sticky-top h1, .sources-sticky-top h1,
  .feed-sticky-top h1 { font-size: 18px; margin: 4px 0; }
  .news-page-header { flex-wrap: wrap; gap: 6px 12px; }
  .news-count { font-size: 11px; }

  /* Saved-search strip — chips wrap; the save form drops to its own row. */
  .saved-searches { gap: 4px; }
  .save-search-form {
    flex-basis: 100%; margin-left: 0;
  }
  .save-search-form input[type="text"] { flex: 1; min-width: 0; }

  /* News card mobile — thumbnail smaller, badges wrap freely. */
  .news-thumbnail { width: 56px; height: 56px; flex-shrink: 0; }
  .news-thumbnail.thumb-fallback { font-size: 22px; line-height: 56px; }
  .news-item-curated { display: none; }     /* hide bulk-send chrome on mobile */
  .news-item-cb-cell { display: none; }
  .news-title { font-size: 13px; -webkit-line-clamp: 3; }
  .news-summary { font-size: 11px; -webkit-line-clamp: 2; }

  /* Article body type scale tightens. */
  .article-title { font-size: 22px; line-height: 1.2; }
  .article-columns { gap: 16px; }
  .article-body { font-size: 14px; }

  /* Header chrome — make the brand wrap and hide the nav scrollbar. */
  header {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
  }
  nav {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  nav a { margin-left: 12px; font-size: 13px; }
  nav a:first-child { margin-left: 0; }
  .brand .freshness-pill { display: none; }
}

/* Saved searches strip — list of bookmarked filter sets, plus an
 * inline form for naming and saving the current view. Sits below the
 * active-filter chips inside the sticky-top so saving / restoring is
 * always one click from wherever the user is on /news. */
.saved-searches {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 4px 0 8px 0;
}
.saved-chip {
  display: inline-flex; align-items: center;
  background: #fff7d6; border: 1px solid #f0d96a;
  border-radius: 12px; padding: 2px 4px 2px 10px;
  font-size: 11px; line-height: 1.4;
}
/* Saved searches with unread matches get a slightly brighter chip
 * so the user's eye finds them in a long list. */
.saved-chip.has-new {
  background: #fff1a8; border-color: #e0c020;
}
.saved-chip-name {
  color: #6b4d00; font-weight: 600; text-decoration: none;
}
.saved-chip-name:hover { text-decoration: underline; }
/* "N new" badge — sits between the name and the RSS pill. Solid
 * accent (intelligence-blue) so it reads as an actionable count, not
 * decorative. */
.saved-chip-new {
  display: inline-block; min-width: 16px;
  margin-left: 6px; padding: 0 6px;
  border-radius: 10px;
  background: #2c4ea8; color: #fff;
  font-size: 10px; font-weight: 700; text-align: center;
  letter-spacing: 0.2px;
}
.saved-chip-rss {
  margin-left: 8px;
  padding: 0 6px; border-radius: 8px;
  background: #fff5eb; color: #c14d18;
  font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
  text-decoration: none; border: 1px solid #f4c39a;
}
.saved-chip-rss:hover { background: #ffe7d1; }
.saved-chip-delete { display: inline; margin: 0 0 0 4px; }
.saved-chip-delete .x {
  background: transparent; border: none; cursor: pointer;
  color: #888; font-size: 14px; line-height: 1; padding: 0 4px;
}
.saved-chip-delete .x:hover { color: #c0392b; }
.save-search-form {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.save-search-form input[type="text"] {
  font-size: 11px; padding: 3px 8px;
  border: 1px solid #d0d7de; border-radius: 4px;
  background: #fff; min-width: 140px;
}
.save-search-form input[type="text"]:focus {
  border-color: #f0b400; outline: none;
}
.save-search-form button {
  font-size: 11px; padding: 3px 9px;
  background: #fff7d6; color: #6b4d00; font-weight: 700;
  border: 1px solid #f0d96a; border-radius: 4px; cursor: pointer;
}
.save-search-form button:hover { background: #fff0a8; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.filter-chips .chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; background: #e9ecef; color: #2c3e50;
  border-radius: 12px; font-size: 11px;
}
.filter-chips .chip .x {
  text-decoration: none; color: #95a5a6; font-weight: 700;
  padding: 0 2px; line-height: 1;
}
.filter-chips .chip .x:hover { color: #d9534f; }

.news-feed-list { background: #eef1f5; padding: 8px; border-radius: 8px; }

.feed-day-header {
  position: sticky; top: 0; z-index: 5;
  padding: 6px 10px; margin: 6px 0;
  background: rgba(238, 241, 245, 0.95);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: #5a6577; border-radius: 4px;
  border-left: 3px solid #95a5a6;
}
.feed-day-header:first-child { margin-top: 0; }
.feed-day-header .day-count { font-weight: 500; opacity: 0.7; margin-left: 4px; }

.news-item {
  display: block; text-decoration: none; color: inherit;
  margin-bottom: 12px; padding: 14px 18px;
  background: #fff; border-radius: 8px;
  border-left: 4px solid #e6eaf0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s, transform 0.1s;
}
.news-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); transform: translateY(-1px); }

.news-item-body { display: flex; gap: 12px; }
.news-thumbnail {
  flex-shrink: 0; width: 52px; height: 52px;
  border-radius: 4px; overflow: hidden; background: #eee;
}
.news-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.news-thumbnail.thumb-fallback {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 22px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.news-item-content { flex: 1; min-width: 0; }
.news-item-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 4px;
}
.news-source {
  font-size: 10px; color: #7f8c8d; font-weight: 500;
  display: flex; align-items: center; gap: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news-time { font-size: 10px; color: #adb5bd; white-space: nowrap; font-weight: 500; }

.source-badge {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
  background: #95a5a6; color: #fff; flex-shrink: 0;
}
.source-badge.source-rss      { background: #f5a623; }
.source-badge.source-telegram { background: #0088cc; }
.source-badge.source-facebook { background: #1877f2; }

.news-title {
  font-size: 13px; font-weight: 700; line-height: 1.3;
  margin: 0 0 4px 0; color: #1a2332;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-subtitle {
  /* Burmese/Chinese/Thai original title shown muted below the English
     translation. Single-line clamp keeps cards tight. */
  font-size: 11px; line-height: 1.3; color: #8a95a8;
  margin: -2px 0 6px 0; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-summary {
  font-size: 11px; line-height: 1.45; color: #5a6577;
  margin: 0 0 6px 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-badges { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.news-badges .badge {
  font-size: 9px; padding: 2px 6px; border-radius: 3px;
  background: #ecf0f1; color: #34495e; font-weight: 600;
  letter-spacing: 0.2px; text-transform: lowercase;
}
.news-badges .badge.cat   { background: #d6e4f5; color: #1f4e79; }
.news-badges .badge.loc   { background: #e8f5e9; color: #2e7d32; }
.news-badges .badge.lang  { background: #f3e5f5; color: #6a1b9a; text-transform: none; }

/* Propaganda category — distinctive amber so the customer's eye locks
 * onto editorial-stance signals while skimming. Two tiers:
 *   .cat-tier-definite — source is on the curated state-media list
 *     (e.g., Global New Light Of Myanmar). Solid amber, ⚠ prefix.
 *   .cat-tier-possible — content matched junta talking-point markers
 *     but the source isn't flagged. Outline amber, label gets a
 *     trailing "?" from the template. */
.news-badges .badge.cat-propaganda,
.cat-cluster .badge.cat-propaganda {
  background: #fff4e0; color: #b35900; border: 1px solid #f0b97b;
  text-transform: none;
}
.news-badges .badge.cat-propaganda.cat-tier-definite,
.cat-cluster .badge.cat-propaganda.cat-tier-definite {
  background: #ffd9a1; color: #7a3a00; border-color: #d99a4d;
  font-weight: 800;
}
.news-badges .badge.cat-propaganda.cat-tier-definite::before,
.cat-cluster .badge.cat-propaganda.cat-tier-definite::before {
  content: "⚠ ";
}
/* Dedup signals — set on articles whose events DedupAnalyzer linked. */
.news-badges .badge.dup {
  background: #fff3e0; color: #b76e00; text-decoration: none;
  text-transform: none;
}
.news-badges .badge.dup:hover { background: #ffe0b2; }
.news-badges .badge.dup-cluster {
  background: #fffce7; color: #856404; text-transform: none;
}

/* Compare page — parity scoreboard */
.parity-scoreboard {
  margin: 14px 0 24px; padding: 14px 16px; border-radius: 6px;
  background: #f8f9fa; border: 1px solid var(--line);
}
.parity-axes {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.parity-axes th, .parity-axes td {
  padding: 9px 10px; vertical-align: top; border-bottom: 1px solid #ececec;
}
.parity-axes th { font-weight: 600; color: #1a2332; text-align: left; }
.parity-axes tbody tr:last-child td { border-bottom: none; }
.parity-axes td.right, .parity-axes th.right { text-align: right; }
.parity-axes .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.parity-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px;
}
.parity-badge.parity-ahead   { background: #e6f7ec; color: #0a7a3a; }
.parity-badge.parity-parity  { background: #eef3ff; color: #2c4ea8; }
.parity-badge.parity-gap     { background: #fdecea; color: #b32424; }
.parity-badge.parity-unknown { background: #f0f0f0; color: #666; }
.parity-legend { margin-top: 10px; }
.parity-legend .parity-badge { margin-right: 4px; }

.windows-intro {
  margin: 24px 0 8px; padding: 12px 16px;
  background: #fcfcfc; border: 1px solid var(--line); border-radius: 4px;
}
.windows-heading { margin: 0 0 8px; font-size: 16px; }
.windows-key { margin: 6px 0 8px 18px; padding: 0; line-height: 1.55; }
.windows-key li { margin: 2px 0; }

/* Risk-parity page: rows that match across both top-N lists get bolded
 * so the rank-agreement signal stands out at a glance. */
.row-bold { font-weight: 700; }

.overlap-heading {
  margin: 18px 0 10px; font-size: 14px; font-weight: 700; color: #1a2332;
  border-top: 1px dashed #e0e0e0; padding-top: 12px;
}
.big-num.ok   { color: #00B050; }
.big-num.fail { color: #E60000; }

/* Risk page — windowed township + state risk scoring */
.risk-page-header h1 { margin-bottom: 8px; }
.risk-window-tabs { display: flex; gap: 0; margin: 8px 0 12px; border-bottom: 1px solid #e0e0e0; }
.risk-window-tab {
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  color: #7f8c8d; text-decoration: none;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 4px 4px 0 0; margin-bottom: -1px;
}
.risk-window-tab:hover { color: #1a2332; background: #f8f9fa; }
.risk-window-tab.active {
  color: #1a2332; background: #fff;
  border-color: #e0e0e0;
}
.risk-methodology { margin: 8px 0 16px; }
.risk-methodology summary { cursor: pointer; padding: 4px 0; }
.risk-methodology .risk-method-body {
  margin: 8px 0 8px 12px; padding: 10px 14px;
  border-left: 3px solid #d0d7de; background: #f8f9fa;
  border-radius: 0 4px 4px 0;
}
.risk-methodology code { background: #ecf0f1; padding: 1px 4px; border-radius: 3px; font-size: 11px; }
.risk-methodology ul { margin: 4px 0 4px 18px; padding: 0; }
.risk-methodology li { margin-bottom: 4px; }

.risk-table { width: 100%; }
.risk-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: #7f8c8d; }
.risk-table td { padding: 6px 8px; vertical-align: middle; }
.risk-table tr:hover td { background: #fafbfc; }

.risk-pill {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; min-width: 48px; text-align: center;
}
.risk-pill.risk-risk-1 { background: #e8f5e9; color: #2e7d32; }
.risk-pill.risk-risk-2 { background: #fff9e0; color: #b8860b; }
.risk-pill.risk-risk-3 { background: #fdebd3; color: #c97515; }
.risk-pill.risk-risk-4 { background: #fdecea; color: #c0392b; }

/* curated.co export — per-article and batch controls */
.curated-export {
  margin: 12px 0 16px;
  padding: 10px 12px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.curated-send-btn {
  background: #1a73e8; color: white; border: none;
  padding: 6px 14px; border-radius: 4px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.curated-send-btn:hover { background: #1557b0; }
.curated-send-btn:disabled { background: #95a5a6; cursor: wait; }
.curated-send-btn.small-btn { padding: 3px 9px; font-size: 11px; font-weight: 500; }
.badge.curated-sent {
  background: #e8f5e9; color: #2e7d32;
  border: 1px solid #c8e6c9;
}
.curated-status.curated-error { color: #c0392b; }
.curated-synopsis { width: 100%; margin-top: 4px; }
.curated-synopsis summary { cursor: pointer; padding: 2px 0; }
.curated-synopsis p { margin: 6px 0 0; padding-left: 12px; border-left: 2px solid #d0d7de; color: #4b5563; }

/* Feed row — checkbox + send button + sent state */
.cb-cell { width: 18px; padding-right: 0; }
.curated-row-cb { cursor: pointer; }
.curated-cell { width: 1%; }
tr.row-sent td { opacity: 0.55; }
tr.row-sent td.curated-cell { opacity: 1; }

.curated-batch-bar {
  position: sticky; top: 0; z-index: 50;
  display: none;
  background: #1a2332; color: white;
  padding: 8px 14px; margin: 0 0 8px;
  border-radius: 4px;
  align-items: center; gap: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.curated-batch-bar.visible { display: flex; }
.curated-batch-bar strong { color: #fff; }
.curated-batch-bar button {
  background: #1a73e8; color: white; border: none;
  padding: 6px 14px; border-radius: 4px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.curated-batch-bar button:hover { background: #1557b0; }
.curated-batch-bar button:disabled { background: #7f8c8d; cursor: wait; }
.curated-batch-bar a { color: #aab2c0; }
.curated-batch-bar a:hover { color: #fff; }
.curated-batch-bar #curated-batch-status { color: #aab2c0; }
.curated-batch-bar #curated-batch-status.curated-result-success {
  color: #7ee08b; font-weight: 600;
}
.curated-batch-bar #curated-batch-status.curated-result-error {
  color: #ff8a8a; font-weight: 600;
}

/* News-tab card layout — wraps the link card with checkbox + Send column */
.news-item-wrap {
  display: flex; align-items: stretch; gap: 8px;
  margin-bottom: 12px;
}
.news-item-wrap > .news-item { flex: 1; margin-bottom: 0; }
.news-item-cb-cell {
  display: flex; align-items: flex-start; justify-content: center;
  width: 18px; padding-top: 18px; flex-shrink: 0;
}
.news-item-curated {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: flex-start; gap: 4px;
  padding-top: 14px; min-width: 64px;
}
.news-item-wrap.row-sent .news-item { opacity: 0.6; }

/* Weekly digest page */
.digest-page { max-width: 880px; margin: 0 auto; }
.digest-header { margin-bottom: 14px; }
.digest-header h1 { margin: 0 0 4px; }
.digest-error {
  background: #fff4f4; border: 1px solid #f3c2c2; color: #9c2c2c;
  padding: 14px 18px; border-radius: 6px; margin-bottom: 18px;
}
.digest-error code { background: #f7e0e0; padding: 1px 5px; border-radius: 3px; }
.digest-actions {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0;
}
.digest-actions .primary-btn {
  background: #1a73e8; color: #fff; border: none;
  padding: 8px 18px; border-radius: 4px; font-size: 14px;
  font-weight: 600; cursor: pointer;
}
.digest-actions .primary-btn:hover { background: #1557b0; }
.digest-actions .secondary-btn {
  background: #fff; color: #1a73e8; border: 1px solid #1a73e8;
  padding: 7px 14px; border-radius: 4px; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
.digest-actions .secondary-btn:hover { background: #f0f6ff; }
.digest-md {
  background: #f6f8fa; border: 1px solid #d0d7de;
  border-radius: 6px; padding: 14px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.55;
  white-space: pre-wrap; word-wrap: break-word;
  margin: 0 0 16px;
}
.digest-rendered {
  background: #fafbfc; border: 1px solid #e1e4e8;
  border-radius: 6px; padding: 6px 14px; margin-bottom: 16px;
}
.digest-rendered summary { cursor: pointer; padding: 4px 0; font-weight: 600; }
.digest-rendered ul { margin: 6px 0 10px; padding-left: 22px; }
.digest-rendered li { margin: 6px 0; }
.digest-source-list, .digest-unmatched {
  background: #fafbfc; border: 1px solid #e1e4e8;
  border-radius: 6px; padding: 6px 14px; margin-bottom: 12px;
}
.digest-source-list summary, .digest-unmatched summary {
  cursor: pointer; padding: 4px 0; font-weight: 600;
}
.digest-source-list ol { margin: 6px 0 10px; padding-left: 22px; }
.digest-source-list li { margin: 4px 0; }
.digest-unmatched ul { margin: 6px 0 10px; padding-left: 22px; }
.badge.stale { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }