/* ─── Design tokens ─────────────────────────────────────────────── */

/* The "instrument" direction (D020): light "paper" is the default — it reads
   faster for long-form and is the news convention; dark is offered as an option.
   The accent is a restrained ink blue, not an electric SaaS blue, and the
   fact-check palette is a muted, defined scale rather than emoji. */

:root {
  --header-h: 56px;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-display: var(--font-body);
  --radius: 5px;
  --radius-sm: 3px;

  /* Light "paper" — default */
  --bg: #f7f5ef;
  --surface: #ffffff;
  --surface-raised: #fbfaf5;
  --surface-2: #f1ede3;
  --border: #e2ddd0;
  --border-subtle: #ece8dd;
  --text: #1a1a18;
  --text-2: #565249;
  --text-muted: #8c877a;
  --accent: #1c5280;
  --accent-bg: rgba(28, 82, 128, 0.07);
  --sel-bg: rgba(28, 82, 128, 0.13);
  --header-bg: rgba(247, 245, 239, 0.9);
  --filter-bg: rgba(247, 245, 239, 0.95);
  --shadow: 0 1px 3px rgba(40, 33, 20, 0.08);

  /* Fact-check label palette (muted, defined scale) */
  --fc-verified: #2f7d55;
  --fc-questionable: #a8741a;
  --fc-inaccurate: #b3402f;
  --fc-speculation: #6b5bb5;
  --fc-ai: #6c6a64;
  --fc-verified-bg: rgba(47, 125, 85, 0.10);
  --fc-questionable-bg: rgba(168, 116, 26, 0.10);
  --fc-inaccurate-bg: rgba(179, 64, 47, 0.10);
  --fc-speculation-bg: rgba(107, 91, 181, 0.10);
  --fc-ai-bg: rgba(108, 106, 100, 0.10);

  /* Impact band tints */
  --impact-severe: #b3402f;
  --impact-high: #b06a1e;
  --impact-mid: #8c877a;
  --impact-low: var(--accent);

  /* People-affected severity ramp (D030): a single-hue blue scale, darkest for
     the gravest tier (fatal) and lightening down to marginal. On "paper" darkest
     reads as strongest. */
  --sev-fatal:    #0f3052;
  --sev-severe:   #1c5280;
  --sev-moderate: #4179a6;
  --sev-minor:    #79a4c8;
  --sev-marginal: #b0cbe1;
}

/* Dark token set, shared by the system-dark default and the explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121316;
    --surface: #1a1b1f;
    --surface-raised: #212329;
    --surface-2: #23252b;
    --border: #2d2f36;
    --border-subtle: #232429;
    --text: #e7e5df;
    --text-2: #a7a49b;
    --text-muted: #6b6962;
    --accent: #6fa8dc;
    --accent-bg: rgba(111, 168, 220, 0.12);
    --sel-bg: rgba(111, 168, 220, 0.20);
    --header-bg: rgba(18, 19, 22, 0.9);
    --filter-bg: rgba(18, 19, 22, 0.95);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --fc-verified: #5ea87f;
    --fc-questionable: #c79a4e;
    --fc-inaccurate: #d77a68;
    --fc-speculation: #9b8fd6;
    --fc-ai: #8a8880;
    --fc-verified-bg: rgba(94, 168, 127, 0.14);
    --fc-questionable-bg: rgba(199, 154, 78, 0.14);
    --fc-inaccurate-bg: rgba(215, 122, 104, 0.14);
    --fc-speculation-bg: rgba(155, 143, 214, 0.14);
    --fc-ai-bg: rgba(138, 136, 128, 0.14);
    --impact-severe: #d77a68;
    --impact-high: #c79a4e;
    --impact-mid: #8a8880;
    /* Dark: the ramp inverts — the gravest tier is the brightest blue so it
       stands out against the dark surface, dimming down to marginal. */
    --sev-fatal:    #9cc8f0;
    --sev-severe:   #6fa8dc;
    --sev-moderate: #4f7caf;
    --sev-minor:    #3b5d80;
    --sev-marginal: #2d4255;
  }
}

:root[data-theme="dark"] {
  --bg: #121316;
  --surface: #1a1b1f;
  --surface-raised: #212329;
  --surface-2: #23252b;
  --border: #2d2f36;
  --border-subtle: #232429;
  --text: #e7e5df;
  --text-2: #a7a49b;
  --text-muted: #6b6962;
  --accent: #6fa8dc;
  --accent-bg: rgba(111, 168, 220, 0.12);
    --sel-bg: rgba(111, 168, 220, 0.20);
  --header-bg: rgba(18, 19, 22, 0.9);
  --filter-bg: rgba(18, 19, 22, 0.95);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --fc-verified: #5ea87f;
  --fc-questionable: #c79a4e;
  --fc-inaccurate: #d77a68;
  --fc-speculation: #9b8fd6;
  --fc-ai: #8a8880;
  --fc-verified-bg: rgba(94, 168, 127, 0.14);
  --fc-questionable-bg: rgba(199, 154, 78, 0.14);
  --fc-inaccurate-bg: rgba(215, 122, 104, 0.14);
  --fc-speculation-bg: rgba(155, 143, 214, 0.14);
  --fc-ai-bg: rgba(138, 136, 128, 0.14);
  --impact-severe: #d77a68;
  --impact-high: #c79a4e;
  --impact-mid: #8a8880;
  --sev-fatal:    #9cc8f0;
  --sev-severe:   #6fa8dc;
  --sev-moderate: #4f7caf;
  --sev-minor:    #3b5d80;
  --sev-marginal: #2d4255;
}

/* ─── Reset ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Header ────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo:hover { text-decoration: none; }
.site-logo:hover .logo-name { color: var(--accent); }

.logo-name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0;
  transition: color 0.12s;
}

/* Dedicated Home button */
.home-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s;
}
.home-btn:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Filters toggle button (list view only — sits in .list-toolbar) */
.filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 32px;
  padding: 0 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: none;
  color: var(--text-2);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.filter-toggle-btn:hover { color: var(--text); border-color: var(--accent); }
.filter-toggle-btn[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg);
}
.filter-toggle-label { line-height: 1; }
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.2rem;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.filter-count[hidden] {
  display: none;
}

/* Theme picker */
.theme-picker {
  position: relative;
}

.theme-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, background 0.12s;
}
.theme-icon-btn:hover { color: var(--text); background: var(--surface-2); }

.theme-icon-sun  { display: block; }
.theme-icon-moon { display: none; }
.theme-icon-btn.is-dark .theme-icon-sun  { display: none; }
.theme-icon-btn.is-dark .theme-icon-moon { display: block; }

.theme-popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 120px;
  z-index: 100;
  overflow: hidden;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
  font-family: var(--font-ui);
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.theme-option:hover { background: var(--surface-2); }
.theme-option .check-icon { opacity: 0; flex-shrink: 0; color: var(--accent); }
.theme-option.active .check-icon { opacity: 1; }

/* Profile button */
.profile-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s;
}
.profile-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── Page body ──────────────────────────────────────────────────── */

.page-body {
  flex: 1;
}

/* ─── App layout (SPA shell) ─────────────────────────────────────── */

.app-layout {
  display: flex;
  min-height: calc(100vh - var(--header-h));
}

.sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: var(--bg);
  transition: width 0.2s ease;
}

.sidebar-inner {
  padding: 1rem 0.75rem;
}

.app-layout.sidebar-hidden .sidebar,
.app-layout.detail-open .sidebar {
  width: 0;
  overflow: hidden;
  padding: 0;
}

.app-main {
  flex: 1;
  min-width: 0;
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem;
}

.sidebar-overlay {
  display: none; /* desktop */
}

/* ─── Sidebar sections ───────────────────────────────────────────── */

.sidebar-section {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}
.sidebar-section:last-child { border-bottom: none; }

.sidebar-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}

/* ─── Date picker (calendar) ─────────────────────────────────────── */

.date-picker { display: block; }

.cal-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.55rem;
}
.cal-nav {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-sm);
  transition: background 0.1s, color 0.1s;
}
.cal-nav:hover:not(:disabled) { background: var(--surface-raised); color: var(--text); }
.cal-nav:disabled { opacity: 0.3; cursor: default; }

.cal-selects { display: flex; gap: 0.25rem; flex: 1; min-width: 0; }
.cal-select {
  flex: 1;
  min-width: 0;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 0.35rem center;
  background-size: 0.55rem;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.25rem 1.05rem 0.25rem 0.4rem;
  font-size: 0.78rem;
  font-family: var(--font-ui);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}
.cal-month { flex: 1.5; }
.cal-year  { flex: 0 0 auto; min-width: 3.6rem; }

.cal-dow, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-dow { margin-bottom: 2px; }
.cal-dow-cell {
  text-align: center;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.2rem 0;
}

.cal-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  border-radius: var(--radius-sm);
}
.cal-empty { visibility: hidden; }
.cal-day {
  background: none;
  border: none;
  width: 100%;
  padding: 0;
  font-family: var(--font-ui);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
button.cal-day:hover { background: var(--surface-raised); color: var(--text); }
.cal-day.active,
button.cal-day.active:hover { background: var(--accent); color: #fff; font-weight: 600; }
.cal-disabled { color: var(--text-muted); opacity: 0.4; cursor: default; }

.cal-quick { display: flex; gap: 0.35rem; margin-top: 0.65rem; }
.cal-quick-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.25rem;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.cal-quick-label { font-size: 0.75rem; font-weight: 600; }
.cal-quick-date { font-size: 0.62rem; color: var(--text-muted); }
.cal-quick-btn:hover:not(:disabled) { background: var(--surface-raised); color: var(--text); }
.cal-quick-btn.active { border-color: var(--accent); color: var(--accent); }
.cal-quick-btn.active .cal-quick-date { color: var(--accent); }
.cal-quick-btn:disabled { opacity: 0.35; cursor: default; }

/* ─── Filter groups (shared base) ───────────────────────────────── */

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.filter-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  white-space: nowrap;
  margin-right: 0.1rem;
}

.filter-pill {
  background: none;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-family: var(--font-ui);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.filter-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.filter-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 0.2rem;
}

/* Vertical filter layout for the digest sidebar (full-width list pills). */
.sidebar .filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0.75rem;
  align-items: stretch;
}
/* Feed filter popover/sheet: label on its own line, then chips wrapping below. */
.rail-pop .filter-group,
.sheet-body .filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}
.rail-pop .filter-group .filter-label,
.sheet-body .filter-group .filter-label { flex-basis: 100%; }
.rail-pop .filter-group .range,
.sheet-body .filter-group .range { flex-basis: 100%; }
.sidebar .filter-label,
.rail-pop .filter-label,
.sheet-body .filter-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  padding: 0 0.25rem;
  margin-right: 0;
}

/* Per-facet reset, right-aligned in the label row; revealed only while the
   facet is narrowed off its default (see refreshResets in app.js). */
.filter-reset {
  display: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
}
.filter-reset:hover { text-decoration: underline; }
.filter-reset.visible { display: inline; }
.sidebar .filter-pill {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  font-size: 0.82rem;
  font-family: var(--font-ui);
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  width: 100%;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.sidebar .filter-pill:hover { background: var(--surface-raised); color: var(--text); }
.sidebar .filter-pill.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }

/* ─── Range slider with histogram ───────────────────────────────── */

.range { padding: 0 7px; user-select: none; -webkit-user-select: none; }

/* Distribution histogram */
.range-hist {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 34px;
  margin-bottom: 6px;
}
.range-bin { position: relative; flex: 1; height: 100%; }
/* Gray base = the full day's distribution; blue fill = the slice that survives
   every other active filter, so co-dependent filtering reads off the bars. */
.range-bin-base,
.range-bin-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 1.5px 1.5px 0 0;
}
.range-bin-base {
  background: var(--border);
  opacity: 0.7;
}
.range-bin-fill {
  background: var(--accent);
  opacity: 0.9;
  transition: height 0.12s, opacity 0.1s;
}
.range-bin.out .range-bin-base { opacity: 0.28; }  /* outside selected window → faded */
.range-bin.out .range-bin-fill { opacity: 0.22; }

/* ─── Disabled facet pill (no matches under the other filters) ───── */
.filter-pill.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Synthesis → article links ─────────────────────────────────── */
/* Internal "go to that article" link: a solid underline marks it as a navigation
   link, distinct from the dotted underline + book of a Wikipedia reference (D045). */
.synth-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.synth-link:hover {
  text-decoration-thickness: 2px;
}

/* Track */
.range-track { position: relative; height: 20px; }
.range-rail {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--border);
  border-radius: 2px;
}
.range-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--accent);
  border-radius: 2px;
  cursor: grab;
  touch-action: none;
}
/* Transparent vertical hit-expander: the visible window is only 4px tall, far
   below a usable touch target, so stretch the grabbable area to ~28px without
   changing how it looks. */
.range-fill::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 28px;
  transform: translateY(-50%);
}
.range-fill:active { cursor: grabbing; }

/* Grip (three hairlines) on the draggable window */
.range-grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 1.5px;
  height: 13px;
  padding: 0 3px;
  background: var(--accent);
  border-radius: 3px;
  cursor: grab;
}
.range-grip:active { cursor: grabbing; }
.range-grip span { width: 1px; height: 7px; background: rgba(255, 255, 255, 0.75); }

/* End handles */
.range-handle {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
/* The knob stays a 14px dot visually, but its hit area is widened to ~32×44px
   so it clears the WCAG 2.5.8 (AA) 24px minimum and is comfortable on touch. */
.range-handle::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 32px; height: 44px;
  transform: translate(-50%, -50%);
}
.range-handle:active { cursor: grabbing; }

/* Value readout */
.range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 0.7rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ─── Synthesis section ─────────────────────────────────────────── */

.synthesis-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-ui);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.synthesis-section {
  margin-bottom: 2rem;
}
.synthesis-section h2 {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.synthesis-section p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 1rem;
}

/* ─── List-view toolbar (filter button row above synthesis + articles) ─── */

.list-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

/* ─── Article row (compact list) ─────────────────────────────────── */

.article-list {
  margin-top: 0.5rem;
}

.article-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border-subtle);
}
.article-row:last-child { border-bottom: none; }
.article-row:hover { background: var(--surface); }
@media (hover: none) {
  .article-row:hover { background: none; }
  .article-row:active { background: var(--surface); }
}

.article-row-left { flex: 1; min-width: 0; }
.article-row-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  padding-top: 0.1rem;
}

.article-row-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin: 0.2rem 0 0.3rem;
}

.article-row-summary {
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Article detail panel ───────────────────────────────────────── */

/* In detail mode app-main expands to fill space left by hidden sidebar */
.app-layout.detail-open .app-main {
  max-width: none;
  padding: 0;
}

.detail-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem;
  min-width: 0;
}

/* Nav row: back link on left, prev/next on right */
.detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.detail-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 30px;
  padding: 0 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-ui);
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.detail-back-btn:hover { border-color: var(--accent); background: var(--accent-bg); text-decoration: none; }

.detail-nav-arrows {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail-nav-counter {
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 3rem;
  text-align: center;
}

.detail-nav-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
  line-height: 1;
}
.detail-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.detail-nav-btn:disabled { opacity: 0.3; cursor: default; }

.detail-meta { margin-bottom: 0.5rem; }

.detail-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1.25rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* Title row: the headline paired with a quiet "copy link" affordance to the
   story's /a/<uid> permalink. The title carries the shared bottom margin so the
   row stays flush whether or not the share button is present. */
.detail-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}
.detail-title-row .detail-title { margin: 0; flex: 1 1 auto; min-width: 0; }

.detail-title-link { color: inherit; text-decoration: none; }
.detail-title-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.detail-share-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 0.15rem;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.detail-share-btn:hover { border-color: var(--accent); color: var(--accent); }
.detail-share-btn.is-copied {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}
.detail-share-icon { width: 15px; height: 15px; }

/* Score panel — sits at the bottom of the article, centered in the column */
.detail-score-sidebar {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-ui);
}

.score-impact-header {
  text-align: center;
  padding-bottom: 0.75rem;
}
.score-impact-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.score-impact-value {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.score-sidebar-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.75rem 0;
}

.score-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem 1.5rem;
}

.score-metric {
  margin-bottom: 0;
}

.score-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
}
.score-metric-label {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.67rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.score-metric-value {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text);
}
.score-metric-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.score-metric-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ─── Impact icons + people-affected bar (D030) ─────────────────────
   The inline-SVG glyph set sizes to its label's em-box and shares one
   colour and one stroke weight with the text beside it, so icon and label
   read as a single typographic unit (same thickness and style). */
.iicon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  vertical-align: -0.14em;
  stroke-width: 1.5;
  color: var(--text-muted);
}

/* People affected: one log-scaled bar, the gravest tier darkest, with a
   hover/tap breakdown — see pheathrPeopleBar() in app.js. */
.people-affected {
  margin-bottom: 1rem;
}
.people-affected-head {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  margin-bottom: 0.25rem;
  /* Same type size as a metric row's header, so the icon (1.05em) and label
     match the metric icons and labels in size, weight, and colour. */
  font-size: 0.67rem;
}
.people-affected-label {
  flex: 1;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}
.people-affected-total {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text);
}
.people-bar-wrap {
  position: relative;
}
.people-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--border);
  cursor: default;
}
.people-bar-seg {
  height: 100%;
  min-width: 2px;
}
.people-bar-seg + .people-bar-seg {
  border-left: 1px solid var(--surface);
}
.sev-fatal    { background: var(--sev-fatal); }
.sev-severe   { background: var(--sev-severe); }
.sev-moderate { background: var(--sev-moderate); }
.sev-minor    { background: var(--sev-minor); }
.sev-marginal { background: var(--sev-marginal); }

.people-bar-tip {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 100;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  font-size: 0.68rem;
}
.people-bar-wrap:hover .people-bar-tip,
.people-bar-wrap.tip-open .people-bar-tip {
  display: block;
}
.people-tip-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.people-tip-row + .people-tip-row {
  margin-top: 0.28rem;
}
.people-tip-sw {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.people-tip-label {
  flex: 1;
  color: var(--text-muted);
}
.people-tip-val {
  font-weight: 600;
  color: var(--text);
}

/* ─── Content body (for digest detail page) ─────────────────────── */

.content-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─── Index: archive listing ────────────────────────────────────── */

.archive-header {
  padding: 1.75rem 0 0.5rem;
}
.archive-header h1 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--text);
}
.archive-header p {
  font-size: 0.8125rem;
  color: var(--text-2);
  margin: 0;
}

.feed {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 0 3rem;
}

.digest-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s;
  text-decoration: none;
}
.digest-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  text-decoration: none;
}

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

.digest-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.digest-card-meta {
  font-size: 0.75rem;
  color: var(--text-2);
  margin-top: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

.digest-card-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
}

.empty {
  color: var(--text-2);
  text-align: center;
  padding: 4rem 0;
  font-size: 0.9rem;
}

/* ─── Digest masthead ───────────────────────────────────────────── */

.digest-masthead {
  padding: 1.75rem 0 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--text);
}
.digest-masthead h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.25rem;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
}

/* Dated edition masthead (rendered by digest.templ from frontmatter). */
.digest-kicker {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.2rem;
}
/* Back-link kicker on a single-article permalink (/a/{uid}, D042). */
.digest-backlink {
  display: inline-block;
  text-decoration: none;
}
.digest-backlink:hover {
  text-decoration: underline;
}
.digest-title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.digest-edition {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}
.digest-edition-sep {
  color: var(--text-muted);
  font-weight: 400;
  margin: 0 0.35rem;
}

/* ── List-view globe (09_globe.md) ─────────────────────────────────
   A spinning MapLibre globe that aggregates the day's geography, sat as a
   banner between the masthead and the prose. Sized here so MapLibre has a
   measurable container the moment it initialises; the shimmer mirrors the
   per-article map's loading state until the style paints. */
.globe-container {
  position: relative;
  width: 100%;
  height: clamp(200px, 38vw, 340px);
  margin: 1rem 0 0.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-raised);
}
.globe-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface) 50%, var(--surface-raised) 75%);
  background-size: 200% 100%;
  animation: map-shimmer 1.4s infinite;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s;
}
.globe-container.maplibregl-map::before {
  opacity: 0;
}
.digest-sources {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-2);
}
.digest-meta {
  font-size: 0.78rem;
  color: var(--text-2);
}

/* ─── Badge legend ──────────────────────────────────────────────── */

.digest-legend {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 1.5rem;
  font-size: 0.75rem;
  color: var(--text-2);
}
.legend-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.07em;
}
.legend-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.legend-item { white-space: nowrap; }

/* ─── News item cards ───────────────────────────────────────────── */

.news-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.12s;
}
.news-item:hover { border-color: #3a3a3a; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .news-item:hover { border-color: #cacaca; }
}
:root[data-theme="light"] .news-item:hover { border-color: #cacaca; }

/* Single-article permalink (/a/{uid}, FE-SHELL-215): the lone story is the page,
   not one card in a list, so it drops the card framing — surface background,
   border, radius, and inner padding — to read as a flush single column matching
   the SPA reader's .detail-main, rather than a padded card on the page ground. */
.digest-article--single .news-item,
.digest-article--single .news-item:hover {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

/* The single-article masthead (FE-SHELL-216, D046) carries the back-link only —
   no headline — so it reads as a quiet nav row, not the edition's heavy
   border-under-title masthead. The story's title is the in-body <h1> below. */
.digest-article--single .digest-masthead {
  padding: 1.25rem 0 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: none;
}

/* Top row: category · badge · impact */
.news-item-top {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.category-tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
}

.meta-dot {
  font-size: 0.6rem;
  color: var(--text-muted);
}

/* Legacy emoji badge (no-JS fallback only; JS replaces these with .fc-badge). */
.badge-tag {
  font-size: 0.82rem;
  line-height: 1;
}

/* Fact-check status as a typographic label on a defined scale, not an emoji. */
.fc-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1;
  padding: 0.18rem 0.42rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.fc-badge.fc-verified     { color: var(--fc-verified);     background: var(--fc-verified-bg);     border-color: var(--fc-verified-bg); }
.fc-badge.fc-questionable { color: var(--fc-questionable); background: var(--fc-questionable-bg); border-color: var(--fc-questionable-bg); }
.fc-badge.fc-inaccurate   { color: var(--fc-inaccurate);   background: var(--fc-inaccurate-bg);   border-color: var(--fc-inaccurate-bg); }
.fc-badge.fc-speculation  { color: var(--fc-speculation);  background: var(--fc-speculation-bg);  border-color: var(--fc-speculation-bg); }
.fc-badge.fc-ai           { color: var(--fc-ai);           background: var(--fc-ai-bg);           border-color: var(--fc-ai-bg); }

/* Fact-check panel in the article detail view — claims as first-class rows
   (status label + the sentence it attaches to). */
.detail-factcheck {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-ui);
}
.detail-factcheck-title {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.fc-claim {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin: 0.5rem 0;
}
.fc-claim .fc-badge { flex: none; }
.fc-claim-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
}

/* Inline variant: the same capsule standing in for a per-claim emoji inside
   running synthesis and article text. Vertically centred against the prose and
   given breathing room so it reads as a quiet leading marker, not punctuation.
   The spacing is deliberately asymmetric, mirroring how the content is authored:
   a badge run sits *immediately before* its claim with no separating space
   (CM-PROSE-040, CM-BADGE-030 — the run after the badge starts the claim text
   directly), so the right margin must carry the whole word-gap on its own; the
   left side, when the badge falls mid-paragraph, already has the previous
   sentence's trailing space, so it needs only a hair of insurance. A capsule
   that opens its block has no preceding space and aligns flush with the body
   (the :first-child rule below). rem, not em: the badge's own font-size is
   0.6rem, so an em-based gap collapses to ~3px and the capsule glues to its
   neighbours. */
.fc-badge-inline {
  vertical-align: middle;
  margin: 0 0.3rem 0.1em 0.1rem;
  transform: translateY(-0.05em);
}
/* A capsule that opens its block — a claim leading a paragraph or list item —
   aligns its left edge with the body text's left margin rather than sitting a
   margin's width in from it; there is no preceding sentence space to balance. */
.fc-badge-inline:first-child {
  margin-left: 0;
}

/* Tooltip: show the description on hover (web) and long-press (touch). */
.fc-badge[data-tooltip] {
  position: relative;
  cursor: help;
}
.fc-badge[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  padding: 0.22rem 0.5rem;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 200;
}
.fc-badge[data-tooltip]:hover::after { opacity: 1; }

/* Jargon gloss (D040): a quiet in-prose marker for a defined term. A dotted
   underline in the muted accent signals "there's a definition here" without the
   weight of a link or a fact-check capsule. The definition itself shows in the
   shared interactive tooltip (.pheathr-tip below), the same bubble the Wikipedia
   reference links use (D045). */
.gloss {
  text-decoration: underline dotted var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  cursor: help;
}

/* Shared interactive tooltip (D045): one floating bubble drives both the jargon
   glosses and the Wikipedia reference-link previews. A single element is positioned
   by JS (server/static/app.js) next to whatever term is hovered or focused; the
   Wikipedia variant additionally carries a clickable "View on Wikipedia" link, so —
   unlike a CSS ::after or a native title — the bubble is interactive while shown. */
.pheathr-tip {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 18rem;
  background: var(--text);
  color: var(--bg);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.12s, transform 0.12s;
  z-index: 300;
}
.pheathr-tip.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.pheathr-tip-link {
  display: block;
  margin-top: 0.4rem;
  color: var(--bg);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.pheathr-tip-link:hover { opacity: 0.85; }

/* Coarse band label — under the big impact number in the detail rail, and
   inline in the article meta chip. */
.impact-band,
.score-impact-band {
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.score-impact-band {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}
.impact-band.impact-severe,
.score-impact-band.impact-severe { color: var(--impact-severe); }
.impact-band.impact-high,
.score-impact-band.impact-high   { color: var(--impact-high); }
.impact-band.impact-mid,
.score-impact-band.impact-mid    { color: var(--text-2); }
.impact-band.impact-low,
.score-impact-band.impact-low    { color: var(--accent); }

/* Article title */
.news-item h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.2rem;
  line-height: 1.35;
}

/* Body text */
.news-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--text);
}
.news-body p { margin: 0 0 0.8rem; }
.news-body p:last-of-type { margin-bottom: 0; }
/* Ordinary source links: solid underline, the "go to the source" counterpart to a
   Wikipedia reference link's dotted underline + book (D045). `:not(.ref-link)` keeps
   the reference style intact regardless of rule order. */
.news-body a:not(.ref-link) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.news-overflow.hidden { display: none; }

.read-more-btn {
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-family: var(--font-ui);
  color: var(--accent);
  cursor: pointer;
}
.read-more-btn:hover { text-decoration: underline; }

/* ─── Reference links (Wikipedia terms, D037) ───────────────────── */

/* Distinguish a term linked to background reference (Wikipedia) from an ordinary
   source link: a dotted underline and a small book affordance, so it reads as
   "look this up" rather than "go to the source". */
a.ref-link {
  color: var(--accent);
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
/* The book affordance sits on the text baseline beside the term — a small marker,
   not a raised superscript (the old `vertical-align: super` made it float off the
   word, D045). The slight negative nudge counters the emoji's high internal metrics. */
a.ref-link::after {
  content: "📖";
  font-size: 0.7em;
  margin-left: 0.15em;
  vertical-align: -0.05em;
  opacity: 0.7;
}
a.ref-link:hover { text-decoration-style: solid; }

/* ─── "Sources" panel (per-outlet article list, FE-SRCLIST) ──────── */

.sources-panel {
  margin-top: 1rem;
}
.sources-panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.sources-panel-toggle:hover .sources-panel-label { text-decoration: underline; }
.sources-panel-count {
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 1.1em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  text-align: center;
}
.sources-panel-caret {
  display: block;
  transition: transform 0.15s;
}
.sources-panel.open .sources-panel-caret { transform: rotate(180deg); }

.sources-panel-body {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.sources-panel-body.hidden { display: none; }

.sources-panel-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.sources-panel-row + .sources-panel-row {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-subtle);
}
.sources-panel-favicon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  border-radius: 4px;
  object-fit: contain;
  background: var(--surface);
}
.sources-panel-favicon--blank {
  display: inline-block;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
}
.sources-panel-main {
  flex: 1 1 auto;
  min-width: 0;
}
.sources-panel-headline {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.sources-panel-headline a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--text);
  text-decoration: none;
}
.sources-panel-headline a:hover { color: var(--accent); text-decoration: underline; }
.sources-panel-extlink { display: inline-block; opacity: 0.7; }
.sources-panel-outlet {
  margin-left: 0.5em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
}
.sources-panel-angle {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Self-hosted, license-attributed Wikimedia hero image in the detail view (D038). */
.detail-lead-image {
  margin: 0 0 1.25rem;
}
.detail-lead-image img {
  display: block;
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.detail-lead-caption {
  margin-top: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  color: var(--text-muted);
}
.detail-lead-caption a { color: var(--text-muted); text-decoration: underline; }
.detail-lead-caption a:hover { color: var(--accent); }

/* ─── Sources section ───────────────────────────────────────────── */

.sources-section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.sources-section h2 {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.sources-section p,
.sources-section li {
  font-size: 0.8125rem;
  color: var(--text-2);
}
.sources-section ul,
.sources-section ol {
  margin: 0.25rem 0 0.75rem 1.25rem;
}

/* Fallback: digest-body still works if JS hasn't run yet */
.digest-body h2 {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.digest-body h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 1.5rem 0 0.25rem;
}
.digest-body h3 + p > em:only-child {
  display: block;
  font-style: normal;
  font-size: 0.75rem;
  color: var(--text-2);
  margin-bottom: 0.6rem;
}
.digest-body p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 0.9rem;
}
.digest-body a:not(.ref-link) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.digest-body ul, .digest-body ol { margin: 0.5rem 0 0.9rem 1.5rem; }
.digest-body li { margin-bottom: 0.2rem; }
.digest-body hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.digest-body table { border-collapse: collapse; font-family: var(--font-ui); font-size: 0.82rem; margin-bottom: 0.9rem; }
.digest-body th, .digest-body td { padding: 4px 10px; border: 1px solid var(--border); }
.digest-body th { color: var(--text-2); font-weight: 600; }

/* Legacy impact block (pre-JS fallback) */
.article-impact {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  margin: 0.15rem 0 0.8rem;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Per-article metadata row (date · sources · impact) */
.article-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.15rem 0 1rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.meta-date {
  color: var(--text-muted);
}
.meta-sep {
  color: var(--text-muted);
  user-select: none;
}
.meta-chip {
  display: inline-flex;
  align-items: center;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.45em;
  cursor: default;
  color: var(--text-muted);
  font-size: inherit;
  transition: border-color 0.12s;
  white-space: nowrap;
}
.meta-chip:hover {
  border-color: var(--text-2);
}
.meta-popup,
.impact-popup {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text);
  white-space: nowrap;
}
.meta-chip:hover .meta-popup {
  display: block;
}
.meta-chip:hover .impact-popup {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 150px;
}
.popup-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.popup-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted);
  flex: 1;
  padding-right: 0.5rem;
}
.popup-gauge {
  display: inline-block;
  width: 36px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.popup-gauge-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.popup-val {
  color: var(--text);
  font-weight: 500;
  text-align: right;
}

/* ─── Footer ────────────────────────────────────────────────────── */

.site-footer {
  text-align: center;
  padding: 2rem 1.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 0;
}

/* ─── Responsive ────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    z-index: 80;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
    height: auto;
  }
  .app-layout.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
  }
  /* Override sidebar-hidden on desktop to not apply on mobile */
  .app-layout.sidebar-hidden .sidebar {
    width: 260px;
    overflow: visible;
  }
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    top: var(--header-h);
    background: rgba(0,0,0,0.4);
    z-index: 79;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  .app-layout.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .app-main {
    padding: 1rem;
  }
  .detail-main { padding: 1rem; }
  .site-header { padding: 0 1rem; }
  .logo-name { font-size: 0.9rem; }
}

@media (max-width: 600px) {
  .content-body { padding: 0 1rem; }
  .filter-toggle-label { display: none; }
  .filter-toggle-btn { padding: 0 0.6rem; }
}

/* Wide viewports: lay the article's widgets — location map, source-dependency
   graph and impact panel — out on a two-column grid so each is capped at half
   the article body width and none ever spans full width. With three widgets
   the grid wraps (map | graph, then impact | empty); with two they pair side by
   side; a lone widget still occupies a single column. Below this threshold
   (e.g. mobile portrait) the grid collapses and every widget is full width,
   stacked vertically. */
@media (min-width: 768px) {
  .detail-media-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
    margin: 1.5rem 0;
  }
  /* Map fills its half-width column, staying square via its aspect-ratio. */
  .detail-media-row .article-map-wrapper {
    margin: 0;
  }
  /* Impact panel sits beside the map rather than below it: drop the divider
     and top spacing that only made sense when it followed the body text. */
  .detail-media-row .detail-score-sidebar {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  /* Keep the metrics compact so the impact panel reads as a square block
     next to the map; collapses to one column if the half-width is narrow. */
  .detail-media-row .score-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.7rem 1rem;
  }
}

/* ─── Map components ─────────────────────────────────────────── */

.article-map-wrapper {
  margin: 0.75rem 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

/* ── Source provenance graph ───────────────────────────────────────
   A small, map-sized preview of the story's source-dependency graph (who
   reported it first, who rewrote it) that opens a larger interactive graph on
   click. Node roles share one colour language across preview, modal, legend. */
.sg-node--origin      .sg-dot,
.sg-leg-dot.sg-node--origin      { fill: var(--text-muted);   background: var(--text-muted); }
.sg-node--original    .sg-dot,
.sg-leg-dot.sg-node--original    { fill: var(--fc-verified);  background: var(--fc-verified); }
.sg-node--republished .sg-dot,
.sg-leg-dot.sg-node--republished { fill: var(--fc-questionable); background: var(--fc-questionable); }
.sg-node--republished .sg-dot { fill-opacity: 0.55; }

.sg-link { stroke: var(--border); stroke-width: 1.2; }
.sg-arrow-head { fill: var(--text-muted); opacity: 0.6; }
.sg-label { fill: var(--text-muted); font-family: var(--font-ui); font-size: 8.5px; }
.source-graph-svg--modal .sg-label { font-size: 11px; fill: var(--text); }
.sg-dot { stroke: var(--surface); stroke-width: 1; }

/* Preview: same square footprint and framing as the article map. */
.source-graph-preview {
  position: relative;
  margin: 0.75rem 0 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  transition: border-color 0.12s;
}
.source-graph-preview:hover,
.source-graph-preview:focus-visible { border-color: var(--accent); outline: none; }
/* In the media row the preview is a column square beside the map, not capped. */
.detail-media-row .source-graph-preview { margin: 0; max-width: none; }
.source-graph-svg { display: block; width: 100%; height: 100%; }
.source-graph-cap {
  position: absolute;
  left: 10px; bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.source-graph-expand { font-size: 0.85rem; color: var(--accent); }

/* Modal: a larger interactive stage with tier bands and a legend. */
.source-graph-open { overflow: hidden; }
.source-graph-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(8, 9, 12, 0.62);
  backdrop-filter: blur(2px);
}
.source-graph-modal {
  display: flex;
  flex-direction: column;
  width: min(820px, 100%);
  max-height: 90vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.source-graph-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}
.source-graph-modal-title { font-weight: 700; font-size: 1rem; }
.source-graph-modal-sub { margin-top: 0.2rem; font-family: var(--font-ui); font-size: 0.72rem; color: var(--text-muted); }
.source-graph-modal-close {
  flex: none;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}
.source-graph-modal-close:hover { color: var(--text); }
.source-graph-stage { position: relative; flex: 1; min-height: 0; background: var(--surface-raised); }
.source-graph-svg--modal { width: 100%; height: 100%; max-height: 62vh; }
.sg-band { fill: rgba(127, 127, 127, 0.05); }
.sg-band-label {
  fill: var(--text-muted);
  opacity: 0.7;
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.source-graph-svg--modal .sg-node { cursor: grab; }
.source-graph-svg--modal .sg-node:active { cursor: grabbing; }
.source-graph-tip {
  position: absolute;
  z-index: 5;
  max-width: 200px;
  padding: 0.5rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.source-graph-tip.visible { opacity: 1; }
.sg-tip-name { font-weight: 700; margin-bottom: 0.15rem; }
.sg-tip-muted { color: var(--text-muted); }
.sg-tip-link { margin-top: 0.2rem; color: var(--accent); word-break: break-all; font-size: 0.66rem; }
.source-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.7rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.sg-leg { display: inline-flex; align-items: center; gap: 0.4em; }
.sg-leg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.article-map {
  /* Square on every platform: height tracks the full-width container */
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface-raised);
  position: relative;
}

/* Skeleton shimmer while the map tile loads */
.article-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface) 50%, var(--surface-raised) 75%);
  background-size: 200% 100%;
  animation: map-shimmer 1.4s infinite;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s;
}

.article-map.maplibregl-map::before {
  opacity: 0;
}

@keyframes map-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Fallback image (noscript) */
.map-fallback-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 1rem 0;
}

/* Custom POI marker dots */
.map-marker {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
}

.map-marker--primary {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.35);
}

/* Secondary markers: a softer, muted blue — a lower tier than the primaries but
   still clearly blue rather than grey. Muted by colour (not opacity) so the
   always-on label stays fully legible. */
.map-marker--secondary {
  background: #5b87b3;
  border-color: #fff;
}

/* Tertiary markers: smaller and the most muted (a pale blue-grey) — drawn as
   context, not the story's focus, and excluded from the map's initial view
   rectangle. Muted by colour rather than opacity so its label stays readable. */
.map-marker--tertiary {
  width: 9px;
  height: 9px;
  background: #aab2bd;
  border-color: #e6e6e6;
}

/* Always-on POI name labels — POIs are labelled without hover. The pill is sized
   for the light Positron tiles: dark text on a near-opaque white background with
   a hairline border and drop shadow, so it stays legible over any basemap
   feature it crosses. pointer-events:none keeps the dot itself clickable. */
.map-marker-label {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 4px;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.25;
  color: #1b2733;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 35, 55, 0.18);
  border-radius: 4px;
  padding: 1px 5px;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(20, 35, 55, 0.22);
}

.map-marker--secondary .map-marker-label {
  font-weight: 500;
}

.map-marker--tertiary .map-marker-label {
  font-weight: 500;
  font-size: 0.62rem;
  color: #3a4654;
  background: rgba(255, 255, 255, 0.88);
}

@media (prefers-reduced-motion: reduce) {
  .article-map::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Feed SPA layout (home "/")  — master/detail.
   Left rail = date + filter controls, "At a glance" entry and the story
   list; the main pane shows whatever is selected (synthesis, an article,
   or an empty/error state). Component styles (calendar, filter pills,
   range sliders, badges, detail, score panel, maps) are shared with the
   digest page and defined above.
   ═══════════════════════════════════════════════════════════════════ */

.feed-shell { display: flex; align-items: flex-start; }

/* ── Rail (master / list pane) ── */
.feed-rail {
  width: 340px;
  flex-shrink: 0;
  align-self: flex-start;       /* size to content, don't stretch to the shell */
  border-right: 1px solid var(--border);
  position: sticky;
  top: var(--header-h);
  /* Cap at the viewport so a long story list scrolls internally, but let a short
     list keep the rail short — otherwise a fixed full-height rail leaves a tall
     empty bordered column below the list whenever the article body is taller
     than the list, down to the footer. */
  max-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.feed-rail-top {
  flex-shrink: 0;
  padding: 0.85rem 0.8rem 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;     /* anchor for the filter popover */
}
.feed-rail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ── Archive search field (sits above the Date/Filter toolbar) ── */
.rail-search { position: relative; display: flex; align-items: center; margin-bottom: 0.6rem; }
.rail-search-icon { position: absolute; left: 0.6rem; color: var(--text-muted); pointer-events: none; }
.rail-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 1.85rem 0 1.95rem;
  font-size: 0.85rem;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.12s, background 0.12s;
}
.rail-search-input::placeholder { color: var(--text-muted); }
.rail-search-input:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.rail-search-clear {
  position: absolute;
  right: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.rail-search-clear:hover { color: var(--text); }
.rail-search-clear[hidden] { display: none; }

/* ── Date + Filter toolbar: two equal-width buttons in one row ── */
.rail-anchor { position: relative; }
.rail-toolbar { display: flex; align-items: stretch; gap: 0.5rem; }
.rail-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 36px;
  padding: 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-ui);
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.rail-btn:hover { border-color: var(--accent); color: var(--accent); }
.rail-btn:disabled { opacity: 0.45; cursor: default; }
.rail-btn:disabled:hover { border-color: var(--border); color: var(--text-2); }
.rail-btn .rail-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-caret { color: var(--text-muted); margin-left: auto; flex-shrink: 0; display: block; transition: transform 0.15s; }
.rail-btn.is-open .rail-caret { transform: rotate(180deg); color: var(--accent); }
.rail-btn.is-open { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
#filter-btn.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
/* the count badge inside the filter button keeps its accent fill */
.rail-btn .filter-count { margin-left: 0; }

/* ── Filter popover (wide) — drops under the Filter button, over the main pane ── */
.rail-pop {
  position: absolute;
  top: 52px;
  right: 0;
  z-index: 60;
  width: 318px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(40, 33, 20, 0.18);
  padding: 1rem;
}
.rail-pop[hidden] { display: none; }
.rail-pop::before {
  content: "";
  position: absolute;
  top: -7px; right: 42px;
  width: 12px; height: 12px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.rail-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.rail-pop-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.rail-pop-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 0.2rem; }
.rail-pop-close:hover { color: var(--text); }
.rail-pop-hint { font-size: 0.68rem; color: var(--text-muted); margin: -0.1rem 0 0.85rem; font-style: italic; }

/* ── Inline calendar (wide) — blends into the rail, not a card ── */
.rail-date-inline {
  margin: 0.5rem 0.35rem 0.2rem;
  padding: 0.5rem 0.25rem 0.8rem;
  border-bottom: 1px solid var(--border-subtle);
}
.rail-date-inline[hidden] { display: none; }

/* ── Nav entry ("At a glance") ── */
/* No top padding here: the row's own symmetric padding (below) is what spaces
   it from the dividers above and below, so the briefing row sits evenly
   centred between them rather than hugging its lower border. */
.nav-list { padding: 0; }
.nav-entry {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.85rem;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  background: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--text);
}
.nav-entry:hover { background: var(--surface); }
.nav-entry::after {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-muted);
  border-top: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  opacity: 0.45;
}
.nav-entry.is-selected::after { border-color: var(--accent); opacity: 0.8; }
.nav-entry-icon { flex-shrink: 0; color: var(--accent); display: flex; }
.nav-entry-text { flex: 1; min-width: 0; }
.nav-entry-title { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; line-height: 1.2; display: block; text-transform: uppercase; letter-spacing: 0.03em; }
.nav-entry-sub { font-size: 0.72rem; color: var(--text-muted); display: block; }

/* Shared selected-item treatment: identical for the "At a glance" entry and a
   selected story row — a tinted background plus an accent spine. */
.is-selected { background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--accent); border-radius: 0; }
.nav-entry.is-selected { background: var(--sel-bg); }
.nav-entry.is-selected .nav-entry-title { color: var(--accent); }

.list-divider {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem 0.3rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

/* ── Story rows in the rail (reuses .article-row markup from app.js) ── */
/* No trailing padding: the list runs flush to the rail's bottom edge, which
   itself butts against the site footer — so there is no stray gap between the
   last story row and the footer. */
.art-rows { padding: 0; }
.feed-rail .article-row {
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0;
}
.feed-rail .article-row-title { font-size: 0.94rem; margin: 0.05rem 0 0.25rem; }
.feed-rail .article-row-summary { -webkit-line-clamp: 2; font-size: 0.78rem; }
.feed-rail .article-row.is-selected:hover { background: var(--sel-bg); }

/* Archive-search result rows carry their edition's date (results span days). */
.article-row-edition {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}
.rail-search-empty { color: var(--text-muted); padding: 1.5rem 1rem; text-align: center; font-size: 0.82rem; }

/* ── Main (detail / reading pane) ── */
.feed-main { flex: 1; min-width: 0; min-height: calc(100vh - var(--header-h)); }
.feed-main-inner { max-width: 760px; margin: 0 auto; padding: 1.75rem 1.75rem 3rem; }
.feed-detailbar {
  display: none;       /* wide: rail is always visible, no back affordance */
}

/* "At a glance" masthead in the main pane */
.glance-view { max-width: 760px; margin: 0 auto; padding: 1.75rem 1.75rem 3rem; }
.glance-masthead { border-bottom: 1px solid var(--border); padding-bottom: 0.8rem; margin-bottom: 1.4rem; }
.glance-kicker { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.glance-title { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: 0.01em; margin: 0.2rem 0 0; text-transform: uppercase; }
.glance-date { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.2rem; }

/* Empty / error state */
.feed-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  color: var(--text-muted);
  gap: 0.6rem;
  padding: 2rem;
}
.feed-state svg { opacity: 0.4; }
.feed-state h3 { font-family: var(--font-display); color: var(--text-2); margin: 0.3rem 0 0; font-size: 1.15rem; }
.feed-state p { margin: 0; font-size: 0.88rem; max-width: 26rem; line-height: 1.6; }

/* ── Bottom-sheet overlays (narrow) ── */
.sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 190;
}
.sheet-scrim[hidden] { display: none; }
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 191;
  background: var(--surface);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}
.sheet[hidden] { display: none; }
.sheet-grabber { width: 38px; height: 4px; border-radius: 2px; background: var(--border); margin: 0.6rem auto 0.2rem; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 1.2rem 0.6rem; border-bottom: 1px solid var(--border-subtle); }
.sheet-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.sheet-close { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sheet-body { padding: 1rem 1.2rem; overflow-y: auto; }
.sheet-foot { display: flex; gap: 0.7rem; padding: 0.9rem 1.2rem; border-top: 1px solid var(--border-subtle); }
.sheet-btn { flex: 1; height: 44px; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; font-family: var(--font-ui); cursor: pointer; }
.sheet-btn-reset { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.sheet-btn-apply { background: var(--accent); border: 1px solid var(--accent); color: #fff; }

/* Date sheet: uniform 44px control heights for a tidy, touch-sized grid */
.sheet .cal-nav, .sheet .cal-select, .sheet .cal-quick-btn { height: 44px; }
.sheet .cal-nav { width: 44px; font-size: 1.3rem; }
.sheet .cal-quick-btn { flex-direction: row; align-items: center; justify-content: center; gap: 0.4rem; }
.sheet .fpill, .sheet .filter-pill { font-size: 0.85rem; }
.sheet .range-hist { height: 40px; }

/* ── Narrow (mobile portrait): single column, push navigation ── */
@media (max-width: 768px) {
  .feed-shell { display: block; }
  .feed-rail {
    width: 100%;
    position: static;
    height: auto;
    max-height: none;   /* narrow is a single full-height column, not a capped rail */
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .feed-rail-scroll { overflow: visible; }
  .rail-date-inline { display: none !important; }  /* narrow uses the date sheet */
  .feed-main { display: none; min-height: 0; }
  .feed-shell.detail-open .feed-rail { display: none; }
  .feed-shell.detail-open .feed-main { display: block; }
  /* One sticky bar pairs the "‹ Stories" back button with the prev/next pager,
     so the article view has a single navigation row instead of two stacked. */
  .feed-detailbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    position: sticky;
    top: calc(var(--header-h) + 0.6rem);
    z-index: 40;
    margin: 0.7rem 0.9rem 0;
    padding: 0.3rem 0.45rem 0.3rem 0.55rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .feed-detailbar[hidden] { display: none; }
  .feed-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 32px;
    padding: 0 0.4rem;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-ui);
    cursor: pointer;
  }
  .feed-back:hover { color: var(--accent-strong, var(--accent)); }
  .feed-pager { display: flex; align-items: center; gap: 0.4rem; }
  .feed-pager:empty { display: none; }
  .feed-main-inner, .glance-view { padding: 1.1rem 1.1rem 2.5rem; }
  .glance-title { font-size: 1.55rem; }
  /* The list and a detail are never on screen together here (the detail is a
     pushed full-screen state, not a side pane), so the master/detail "selected"
     cue has nothing to point at — drop the tint and accent spine on the rail. */
  .feed-rail .is-selected,
  .feed-rail .nav-entry.is-selected { background: none; box-shadow: none; }
  .feed-rail .nav-entry.is-selected .nav-entry-title { color: var(--text); }
}