/* Design tokens — Apple-style. One palette, one radius, one shadow, semantic pill colors. */
:root {
  /* Background */
  --bg:           #F8F9FC;
  --surface:      #FFFFFF;
  --surface-hover:#F5F6FA;

  /* Text */
  --ink:          #111827;
  --ink-2:        #6B7280;
  --ink-3:        #9CA3AF;
  --ink-faint:    #94A3B8;
  --ink-disabled: #D1D5DB;

  /* Dividers */
  --border:       #ECEEF3;

  /* Primary blue (Apple uses sparingly) */
  --accent:       #2563EB;
  --accent-hover: #1D4ED8;
  --accent-bg:    #EFF6FF;
  --accent-border:#BFDBFE;

  /* Reliability palette */
  --reli-hvh-bg:    #ECFDF5;  /* High + Very High */
  --reli-hvh-bd:    #A7F3D0;
  --reli-hvh-fg:    #047857;
  --reli-vh-bg:     #EFF6FF;  /* Very High */
  --reli-vh-bd:     #BFDBFE;
  --reli-vh-fg:     #2563EB;
  --reli-h-bg:      #EEF2FF;  /* High */
  --reli-h-bd:      #C7D2FE;
  --reli-h-fg:      #4338CA;
  --reli-mixed-bg:  #FFFBEB;
  --reli-mixed-bd:  #FDE68A;
  --reli-mixed-fg:  #B45309;
  --reli-low-bg:    #FFF7ED;
  --reli-low-bd:    #FDBA74;
  --reli-low-fg:    #C2410C;
  --reli-unknown-bg:#F3F4F6;
  --reli-unknown-bd:#D1D5DB;
  --reli-unknown-fg:#6B7280;

  /* Audience semantic colors */
  --aud-local:    #6B7280;
  --aud-regional: #3B82F6;
  --aud-national: #6366F1;
  --aud-global:   #2563EB;
  --aud-custom:   #9333EA;

  /* Freshness semantic colors */
  --fr-today:  #16A34A;
  --fr-week:   #2563EB;
  --fr-month:  #7C3AED;
  --fr-custom: #D97706;

  /* Neutral / muted */
  --success:   #34C759;
  --warn:      #FF9500;

  /* One radius, one shadow */
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 22px;
  --shadow:    0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-handle: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04);

  /* Six spacing steps */
  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   48px;
  --space-6:   64px;

  /* Type scale */
  --t-page:    42px;
  --t-section: 24px;
  --t-card:    18px;
  --t-body:    16px;
  --t-caption: 13px;
  --t-meta:    12px;
  --t-eyebrow: 12px;

  /* Motion */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --t-fast:    180ms;
  --t-med:     220ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
               "Segoe UI", system-ui, sans-serif !important;
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Keep platform-native pointer and text caret. No custom cursor overlay:
     text selection, resize handles, touch and assistive pointer settings
     retain their familiar behavior. */
}

html {
  background: var(--bg);
}
body {
  background:
    radial-gradient(ellipse 1100px 720px at 8% -6%, rgba(37, 99, 235, 0.06), transparent 60%),
    radial-gradient(ellipse 900px 600px at 96% 6%, rgba(147, 51, 234, 0.04), transparent 60%),
    radial-gradient(ellipse 1000px 700px at 50% 110%, rgba(22, 163, 74, 0.03), transparent 60%),
    linear-gradient(180deg, #F8F9FC 0%, #FFFFFF 100%) !important;
  background-attachment: fixed !important;
  background-color: #F8F9FC !important;
  animation: nn-bg-breath 32s ease-in-out infinite alternate;
}
@keyframes nn-bg-breath {
  0%   { background-position: 0%   0%,   100% 0%, 50% 100%, 0% 0%; }
  50%  { background-position: 10%  20%,  90% 30%, 60% 90%, 0% 50%; }
  100% { background-position: 5%   40%,  95% 60%, 40% 80%, 0% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; }
}

/* Page shell */
#container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3) var(--space-5);
  background: transparent !important;
  background-color: transparent !important;
}

/* Search mode: on submit, homepage chrome collapses and a compact
   sticky search bar takes its place at the top. */
.nn-home > .nn-hero,
.nn-home > .nn-search,
.nn-home > .nn-questions,
.nn-home > .nn-stats-line {
  transition: opacity 280ms ease, transform 320ms cubic-bezier(.2,.7,.2,1),
              height 280ms ease, margin 280ms ease;
}
body.is-search-mode .nn-home > .nn-hero,
body.is-search-mode .nn-home > .nn-search,
body.is-search-mode .nn-home > .nn-questions,
body.is-search-mode .nn-home > .nn-stats-line {
  opacity: 0;
  transform: translateY(-12px) scale(.99);
  pointer-events: none;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}
body.is-search-mode #container { padding-top: 0; }

/* Compact sticky search bar — premium, animated, Apple-style. */
.nn-compact-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: translateY(-100%);
  opacity: 0;
  transition:
    transform 480ms cubic-bezier(.16,1,.3,1),
    opacity 320ms ease;
}
body.is-search-mode .nn-compact-bar {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}
.nn-compact-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 12px 9px 14px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(248,250,253,0.86) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 2px 6px rgba(15, 23, 42, 0.05),
    0 14px 36px -10px rgba(15, 23, 42, 0.12);
  animation: nn-compact-inner-in 600ms cubic-bezier(.16,1,.3,1) 60ms both;
}
@keyframes nn-compact-inner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Brand mark — gradient monogram with pulse + live tag */
.nn-compact-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.015em;
  flex-shrink: 0;
  padding: 4px 8px 4px 4px;
  border-radius: 10px;
  transition: background 200ms ease;
}
.nn-compact-brand:hover { background: rgba(15, 23, 42, 0.04); }
.nn-compact-brand-mark {
  position: relative;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: visible;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 4px 12px -3px rgba(96, 165, 250, 0.4);
  transition: transform 280ms cubic-bezier(.16,1,.3,1);
}
.nn-compact-brand:hover .nn-compact-brand-mark { transform: rotate(-6deg) scale(1.06); }
.nn-compact-brand-mark svg {
  width: 100%; height: 100%;
  display: block;
}
.nn-compact-brand-pulse {
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
}
.nn-compact-brand.is-live .nn-compact-brand-pulse {
  opacity: 1;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.45), transparent 65%);
  animation: nn-compact-pulse 2.4s ease-in-out infinite;
}
@keyframes nn-compact-pulse {
  0%, 100% { transform: scale(1); opacity: .55; }
  50%      { transform: scale(1.35); opacity: 0; }
}
.nn-compact-brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.nn-compact-brand-name { font-weight: 700; }
.nn-compact-brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 5px 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.nn-compact-brand-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 999px;
  background: #10B981;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.18);
  animation: nn-compact-tag-blink 1.8s ease-in-out infinite;
}
@keyframes nn-compact-tag-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
body:not(.is-search-mode-pipeline) .nn-compact-brand-tag::before {
  background: #94A3B8;
  box-shadow: none;
  animation: none;
}
body:not(.is-search-mode-pipeline) .nn-compact-brand-tag {
  color: #64748B;
  background: rgba(100, 116, 139, 0.10);
}

/* Search pill — the centerpiece of the bar */
.nn-compact-input-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  color: var(--ink-2);
  transition:
    border-color 200ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
  max-width: 720px;
  margin: 0 auto;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.nn-compact-input-wrap:hover {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.95);
}
.nn-compact-input-wrap:focus-within {
  border-color: rgba(96, 165, 250, 0.55);
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(96, 165, 250, 0.10),
    0 4px 16px -4px rgba(96, 165, 250, 0.20);
}
.nn-compact-input-icon {
  flex-shrink: 0;
  color: var(--ink-3);
  transition: color 200ms ease;
}
.nn-compact-input-wrap:focus-within .nn-compact-input-icon {
  color: var(--accent);
}
.nn-compact-input-wrap input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: -0.005em;
  min-width: 0;
  padding: 4px 0;
}
.nn-compact-input-wrap input::placeholder {
  color: var(--ink-3);
  font-weight: 400;
}
.nn-compact-kbd {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom-width: 2px;
  border-radius: 5px;
  line-height: 1;
  transition: opacity 200ms ease;
}
.nn-compact-input-wrap:focus-within .nn-compact-kbd { opacity: 0; }
.nn-compact-input-wrap button {
  border: 0;
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 4px 12px -3px rgba(37, 99, 235, 0.45);
  transition:
    transform 160ms cubic-bezier(.16,1,.3,1),
    box-shadow 200ms ease,
    opacity 200ms ease;
}
.nn-compact-input-wrap button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  background: rgba(15, 23, 42, 0.10);
  color: var(--ink-2);
  box-shadow: none;
}
.nn-compact-input-wrap button:not(:disabled):hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 6px 18px -4px rgba(37, 99, 235, 0.55);
}
.nn-compact-input-wrap button:not(:disabled):active {
  transform: translateY(0) scale(0.96);
}

/* Animated progress line — sweeps when the pipeline is running */
.nn-compact-progress {
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 2px;
  background: rgba(15, 23, 42, 0.04);
  overflow: hidden;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 280ms ease;
}
.nn-compact-progress::before {
  content: '';
  position: absolute;
  top: 0; left: -35%;
  width: 35%; height: 100%;
  background: linear-gradient(90deg, transparent, #60A5FA, #7C3AED, transparent);
  opacity: 0;
}
body.is-search-mode-pipeline .nn-compact-progress { opacity: 1; }
body.is-search-mode-pipeline .nn-compact-progress::before {
  opacity: 1;
  animation: nn-compact-sweep 2.6s ease-in-out infinite;
}
@keyframes nn-compact-sweep {
  0%   { left: -35%; }
  100% { left: 100%; }
}

@media (max-width: 640px) {
  .nn-compact-bar-inner { padding: 9px 14px; gap: 10px; }
  .nn-compact-brand-text .nn-compact-brand-tag { display: none; }
  .nn-compact-brand { padding: 2px; }
  .nn-compact-kbd { display: none; }
  .nn-compact-nav { display: none; }
}

/* Inline nav integrated into the compact bar in search mode */
.nn-compact-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.nn-compact-nav-link {
  position: relative;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  letter-spacing: -0.005em;
  transition: background 200ms ease, color 200ms ease;
}
.nn-compact-nav-link:hover { color: var(--ink); background: rgba(15, 23, 42, 0.04); }
.nn-compact-nav-link.is-active {
  color: var(--ink);
  background: rgba(96, 165, 250, 0.10);
  font-weight: 600;
}
.nn-compact-nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, #60A5FA, #7C3AED);
  border-radius: 999px;
}

/* Hide the home navigation in search mode — its links live inside the
   compact bar so the user always sees them at the top. */
body.is-search-mode .nn-home > .nn-nav,
body.is-search-mode .nn-nav { display: none; }

/* Refine Search: in search mode becomes a centered scrollable modal under the
   compact bar, so the strategy modal and any expanded controls have room
   without overflowing the viewport.
   ONLY when the refine section is actually expanded — otherwise the page
   would dim and freeze behind a phantom modal. */
.nn-refine {
  transition: all 320ms cubic-bezier(.2,.7,.2,1);
}
/* Backdrop dim behind the modal in search mode (only when refine is open).
   Rendered as a child of <body> via class so it lives in the BODY's
   stacking context — well below the modal panel (.nn-refine, z-index: 40)
   but above the page content. Pointer events are ON so clicks anywhere
   outside the modal are absorbed by the backdrop (and ignored) instead
   of dismissing the modal — the user must commit via Run Search or Escape. */
body.is-search-mode.nn-refine-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 35;
  animation: nn-backdrop-in 240ms ease both;
  /* The system cursor is already hidden globally; this stops any
     individual rule from setting a different one (e.g. the browser
     might briefly fall back to a built-in cursor for the backdrop). */
  cursor: none;
}
@keyframes nn-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.is-search-mode .nn-refine[aria-expanded="true"],
body.is-search-mode .nn-refine.is-open {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  right: auto;
  bottom: auto;
  z-index: 40;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28), 0 4px 12px rgba(15, 23, 42, 0.12);
  animation: nn-modal-in 320ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes nn-modal-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.985); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
body.is-search-mode .nn-refine-toggle { display: none; }
body.is-search-mode .nn-refine[aria-expanded="true"] .nn-refine-body,
body.is-search-mode .nn-refine.is-open .nn-refine-body { display: block !important; }

/* Keep the dynamic "Refine Search" pill available in search mode so the
   reader can always reopen filters — especially useful when an answer
   fails or needs another pass. */
.nn-refine-pill-wrap {
  transition: opacity 240ms ease;
}
body.is-search-mode .nn-refine-pill-wrap {
  display: flex;
}

/* Navigation */
.nn-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-1);
  margin-bottom: var(--space-3);
}
.nn-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-card);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.nn-brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #4DA3FF);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 14px;
}
.nn-links {
  display: flex; align-items: center; gap: var(--space-3);
}
.nn-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nn-links a:hover { color: var(--ink); }
.nn-links a.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.nn-github {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--ink-2);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nn-github:hover {
  background: var(--border);
  color: var(--ink);
  transform: translateY(-2px);
}
.nn-github svg { width: 18px; height: 18px; }

@media (max-width: 600px) {
  .nn-nav { flex-wrap: wrap; gap: var(--space-2); }
  .nn-links { order: 3; width: 100%; justify-content: center; }
}

/* Hero (glass panel on top of the gradient background) */
.nn-hero {
  text-align: center;
  padding: var(--space-3) var(--space-2) var(--space-3);
  max-width: 820px;
  margin: 0 auto;
}
.nn-hero-glass {
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4) var(--space-4);
  box-shadow:
    0 1px 2px rgba(20, 24, 40, 0.04),
    0 12px 40px rgba(20, 24, 40, 0.06);
}
.nn-hero .nn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 6px 12px;
  border: 1px solid rgba(20, 24, 40, 0.08);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  margin-bottom: var(--space-3);
}
.nn-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6);
  animation: nn-pulse-dot 2.4s ease-out infinite;
}
@keyframes nn-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}
.nn-hero h1 {
  font-size: 64px;
  font-weight: 800;
  margin: 0 0 var(--space-1) 0;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1.04;
  background: linear-gradient(180deg, #1D1D1F 0%, #2A2A30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nn-hero .nn-lede {
  font-size: calc(20px * var(--font-scale, 1));
  color: var(--ink);
  margin: 0 0 var(--space-3) 0;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.nn-rotator {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: var(--t-caption);
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: -0.005em;
  user-select: none;
  pointer-events: none;
  min-height: 18px;
}
.nn-rotator-prefix { opacity: 0.85; }
.nn-rotator-track {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
  min-width: 14ch;
}
.nn-rotator-stage {
  position: relative;
  display: inline-grid;
  align-items: baseline;
  grid-template-columns: 1fr;
}
.nn-rotator-stage > .nn-rotator-word {
  grid-column: 1;
  grid-row: 1;
  display: inline-block;
  white-space: pre;
}
.nn-rotator-word {
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), filter 320ms var(--ease);
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  will-change: transform, opacity;
}
.nn-rotator-word.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(2px);
  pointer-events: none;
}
.nn-rotator-word.is-entering {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
}
.nn-rotator-word.is-stagger {
  transition-delay: calc(var(--i, 0) * 22ms);
}
.nn-rotator-caret {
  display: inline-block;
  width: 1px;
  height: 14px;
  margin-left: 2px;
  background: var(--accent);
  border-radius: 1px;
  align-self: center;
  animation: nn-caret-blink 1.1s steps(1) infinite;
  transform: translateY(0);
  grid-column: 2;
}
@keyframes nn-caret-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes nn-rotator-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Search box */
.nn-search {
  max-width: 720px;
  margin: 0 auto var(--space-4);
  padding: 0 var(--space-2);
}
.nn-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid rgba(20, 24, 40, 0.06);
  border-radius: 24px;
  padding: 8px 8px 8px 20px;
  box-shadow:
    0 1px 2px rgba(20, 24, 40, 0.04),
    0 12px 40px rgba(20, 24, 40, 0.10),
    0 24px 60px rgba(0, 113, 227, 0.08);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nn-input-wrap:hover {
  transform: translateY(-1px);
}
.nn-input-wrap:focus-within {
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow:
    0 1px 2px rgba(20, 24, 40, 0.04),
    0 16px 48px rgba(20, 24, 40, 0.12),
    0 0 0 4px rgba(0, 113, 227, 0.18);
  transform: translateY(-2px);
}
.nn-search-ico { width: 18px; height: 18px; color: var(--ink-2); flex-shrink: 0; transition: color var(--t-fast) var(--ease); }
.nn-input-wrap:focus-within .nn-search-ico { color: var(--accent); }
.nn-input-wrap input[type="text"] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: calc(16.5px * var(--font-scale, 1));
  color: var(--ink);
  height: 48px;
  padding: 0;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.nn-input-wrap input[type="text"]::placeholder {
  color: rgba(15, 23, 42, 0.48);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: opacity 320ms ease;
}
.nn-input-wrap.is-rotating input[type="text"]::placeholder {
  animation: nn-placeholder-fade 360ms cubic-bezier(.16,1,.3,1);
}
@keyframes nn-placeholder-fade {
  0%   { opacity: 0.20; transform: translateY(3px); }
  100% { opacity: 1;    transform: translateY(0);   }
}
.nn-input-wrap input[type="text"]::-webkit-search-cancel-button { display: none; }

.nn-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 22px;
  height: 48px;
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.005em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 12px rgba(37, 99, 235, 0.18);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.nn-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #60A5FA 0%, #2563EB 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 22px rgba(37, 99, 235, 0.32),
    0 0 0 6px rgba(59, 130, 246, 0.10);
}
.nn-submit:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
  background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(15, 23, 42, 0.08);
}
.nn-submit:disabled {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.42) 0%, rgba(59, 130, 246, 0.32) 100%);
  color: #FFFFFF;
  cursor: not-allowed;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 1px 2px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
}
.nn-submit:disabled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-110%);
  animation: nn-submit-shimmer 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes nn-submit-shimmer {
  0%, 20% { transform: translateX(-110%); }
  60%, 100% { transform: translateX(110%); }
}
.nn-submit.is-loading svg { animation: nn-spin 0.9s linear infinite; }
@keyframes nn-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* CTA one-shot pulse: pulses once when results are about to load. */
.nn-submit.pulse-once {
  animation: nn-cta-pulse 0.6s var(--ease);
}
@keyframes nn-cta-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Suggestion stack (legacy, kept for backwards compat). */
.nn-suggest {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Recently explored questions — calm 3-row viewport that auto-scrolls circularly. */
.nn-questions {
  max-width: 640px;
  margin: var(--space-6) auto 0;
  padding: 0 var(--space-3);
  text-align: left;
}
.nn-questions-eyebrow {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.nn-questions-viewport {
  position: relative;
  height: 168px; /* exactly 3 rows (3 × 56px) */
  overflow: hidden;
  /* Soft fade at top + bottom so scrolling rows feel like they fade off. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.nn-questions-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.nn-questions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.nn-questions-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 4px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: color 200ms var(--ease), transform 200ms var(--ease);
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}
.nn-questions-item:last-child { border-bottom: none; }
.nn-questions-item:hover {
  color: #020617;
  transform: translateX(6px);
}
.nn-questions-item:active { transform: translateX(6px) scale(0.998); }
.nn-questions-prefix {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: 28px;
  transition: color 200ms var(--ease);
}
.nn-questions-item:hover .nn-questions-prefix { color: var(--accent); }
.nn-questions-text {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Slow, calming infinite scroll. JS sets --nn-questions-duration based on
   the actual list height so the rhythm feels consistent across lists. */
.nn-questions-track.is-scrolling {
  animation: nn-questions-marquee linear infinite;
  animation-duration: var(--nn-questions-duration, 60s);
}
.nn-questions-viewport:hover .nn-questions-track.is-scrolling {
  animation-play-state: paused;
}
@keyframes nn-questions-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nn-questions-track.is-scrolling { animation: none; }
}

/* Quiet proof — single muted stats line below the question list. */
.nn-stats-line {
  max-width: 640px;
  margin: var(--space-6) auto var(--space-6);
  padding: 0 var(--space-3);
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-align: center;
  line-height: 1.5;
}
.nn-stats-line .nn-stats-num {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nn-stats-line .nn-stats-sep {
  display: inline-block;
  margin: 0 10px;
  color: var(--ink-faint);
  opacity: 0.6;
}
@media (max-width: 540px) {
  .nn-stats-line .nn-stats-sep { margin: 0 6px; }
}

/* Searching-across stats panel (shown while a query is in flight) */
.nn-searching {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--space-4);
  padding: 0 var(--space-2);
}
.nn-searching-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(20, 24, 40, 0.06);
  border-radius: 100px;
  font-size: var(--t-caption);
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: -0.005em;
  flex-wrap: wrap;
  justify-content: center;
}
.nn-searching-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.55);
  animation: nn-searching-pulse 1.5s ease-out infinite;
  flex-shrink: 0;
}
@keyframes nn-searching-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(0, 113, 227, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0); }
}
.nn-searching-label { color: var(--ink); font-weight: 600; }
.nn-searching-stat b {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.nn-searching-sep { opacity: 0.4; }
.nn-refine {
  max-width: 760px;
  margin: 0 auto var(--space-5);
  padding: 0 var(--space-5);
}
.nn-refine-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid rgba(20, 24, 40, 0.08);
  color: var(--ink);
  font-size: var(--t-caption);
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  position: relative;
}
.nn-refine-toggle:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 24, 40, 0.08);
}
.nn-refine-toggle-text {
  font-size: calc(14px * var(--font-scale, 1));
  font-weight: 600;
  color: var(--ink);
}
.nn-refine-toggle-sub {
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ink-2);
  margin-left: 4px;
  border-left: 1px solid var(--border);
  padding-left: 10px;
}
.nn-refine-toggle .nn-caret {
  transition: transform var(--t-fast) var(--ease);
  display: inline-block;
  margin-left: 2px;
  color: var(--ink-2);
  font-size: 13px;
}
.nn-refine[aria-expanded="true"] .nn-refine-toggle .nn-caret { transform: rotate(180deg); }
@media (max-width: 540px) {
  .nn-refine-toggle-sub { display: none; }
  .nn-refine-toggle { width: 100%; justify-content: center; }
}
.nn-refine-body {
  margin-top: var(--space-3);
  display: none;
  /* Smooth expand/collapse for the refine body. */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--t-med, 240ms) var(--ease),
              opacity var(--t-med, 240ms) var(--ease),
              margin-top var(--t-med, 240ms) var(--ease);
}
.nn-refine[aria-expanded="true"] .nn-refine-body {
  display: block;
  max-height: 4000px;
  opacity: 1;
}

.nn-run {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--space-3);
  padding: 12px 22px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.nn-run:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,113,227,.30); }
.nn-run:active { transform: scale(.98); }
.nn-run svg { width: 16px; height: 16px; }

/* Refine Search pill (shown after results) */
.nn-refine-pill-wrap {
  display: flex; justify-content: center; margin-top: var(--space-4);
  flex: 0 0 100%;
  order: 99;
  padding: 0 4px;
}
.nn-refine-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 100px;
  font-size: var(--t-caption);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.nn-refine-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 113, 227, 0.04);
  transform: translateY(-1px);
}

/* Cards (one style) */
.nn-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
}

/* Legacy / shared selectors */
.hidden { display: none !important; }

/* Legacy #question / #submit — kept compatible with the new shell. */
#question {
  flex: 1;
  height: 44px;
  border: none;
  outline: none;
  padding: 0;
  font-size: var(--t-body);
  background: transparent;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.5;
  min-height: 44px;
  letter-spacing: -0.01em;
}
#question::placeholder { color: var(--ink-2); font-weight: 400; }
#question:focus::placeholder { color: var(--border-strong); }

#submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  height: 40px;
  background: var(--border);
  color: var(--ink-3);
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

/* Animated gradient sheen that travels across the button when active. */
#submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    var(--accent) 0%,
    #4F7BF7 35%,
    var(--accent-hover) 65%,
    #4F7BF7 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  z-index: 0;
  pointer-events: none;
}

/* Soft outer glow that breathes while enabled. */
#submit::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: radial-gradient(
    ellipse at center,
    rgba(37, 99, 235, 0.32) 0%,
    rgba(37, 99, 235, 0.18) 40%,
    rgba(37, 99, 235, 0) 75%
  );
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  filter: blur(6px);
  transition: opacity var(--t-med) var(--ease);
}

/* Make sure visible content sits above the gradient sheen. */
#submit > * { position: relative; z-index: 1; }

/* ENABLED — input has text: gradient comes alive, glow breathes. */
#submit:not(:disabled) {
  background: var(--accent);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: nn-search-breath 2.6s ease-in-out infinite;
}
#submit:not(:disabled)::before {
  opacity: 1;
  background-size: 220% 100%;
  animation: nn-search-sheen 4s linear infinite;
}
#submit:not(:disabled)::after {
  opacity: 1;
}

/* Tiny horizontal nudge on the arrow to hint motion. */
#submit:not(:disabled) svg {
  animation: nn-search-arrow-pulse 1.8s ease-in-out infinite;
}

#submit:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--accent-hover);
  box-shadow:
    0 10px 24px rgba(37, 99, 235, 0.34),
    0 4px 10px rgba(37, 99, 235, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  animation: none;
}
#submit:hover:not(:disabled)::after {
  opacity: 1;
  background: radial-gradient(
    ellipse at center,
    rgba(37, 99, 235, 0.45) 0%,
    rgba(37, 99, 235, 0.22) 45%,
    rgba(37, 99, 235, 0) 75%
  );
}
#submit:hover:not(:disabled) svg {
  animation: nn-search-arrow-shift 0.6s ease forwards;
  transform: translateX(3px);
}

#submit:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  transition-duration: 80ms;
  box-shadow:
    0 3px 8px rgba(37, 99, 235, 0.28),
    inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

#submit:disabled {
  background: var(--border);
  color: var(--ink-3);
  cursor: not-allowed;
  box-shadow: none;
  animation: none;
}
#submit:disabled::before,
#submit:disabled::after { display: none; }

#submit:focus-visible:not(:disabled) {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.20),
    0 4px 12px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: none;
}

#submit.submitting svg { animation: nn-spin 0.9s linear infinite; }

/* Animations */
@keyframes nn-search-breath {
  0%, 100% {
    box-shadow:
      0 4px 12px rgba(37, 99, 235, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  50% {
    box-shadow:
      0 6px 18px rgba(37, 99, 235, 0.34),
      0 2px 6px rgba(37, 99, 235, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
}
@keyframes nn-search-sheen {
  0%   { background-position: 100% 0; }
  100% { background-position: -120% 0; }
}
@keyframes nn-search-arrow-pulse {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(2px); }
}
@keyframes nn-search-arrow-shift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(4px); }
}

/* Legacy search-strategy-container — index.js still creates it. */
.search-strategy-container {
  max-width: 720px;
  margin: var(--space-3) auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Results section */
#results {
  display: none;
  margin-top: var(--space-3);
  position: relative;
}
/* Below 1101px, stack the article above the sources (no side-by-side). */
@media (max-width: 1100px) {
  #results { flex-direction: column; }
}
.results-content {
  display: flex; justify-content: space-between; gap: var(--space-2);
  min-height: 540px;
  margin-bottom: var(--space-2);
}
#output, #references {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: inherit;
  text-align: left;
  min-width: 0;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#output:hover, #references:hover { transform: translateY(-1px); }
#output { flex: 1.5; }
#output textarea, #references textarea {
  width: 100%; height: 100%;
  border: none; resize: none;
  font-size: var(--t-body);
  background: transparent;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  outline: none;
  font-family: inherit;
}
#output textarea::placeholder, #references textarea::placeholder {
  color: var(--ink-2);
  opacity: 0.6;
  font-style: italic;
}

.resize-handle {
  width: 100%; height: 8px; background: transparent;
  border: none; cursor: ns-resize;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-1);
  position: relative; user-select: none;
  opacity: 0; transition: opacity 200ms var(--ease);
}
.resize-handle:hover { opacity: 0.3; background: rgba(0,0,0,0.04); }
.resize-handle-bar, .resize-handle-text { display: none; }

/* Answer document — single document with sticky sources sidebar */
.nn-doc {
  display: none;
  margin-top: var(--space-4);
  position: relative;
}
/* On wider viewports, render the article + sources sidebar as a flex row
   so the sidebar can `position: sticky` and float alongside the answer. */
@media (min-width: 1101px) {
  .nn-doc.is-visible {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    justify-content: flex-start;
  }
  /* `#results` (the same element) also sets `flex-direction: column` for the
     small/legacy layout — keep them consistent here so the sources sidebar
     actually appears in a side column. */
  #results.nn-doc.is-visible { flex-direction: row; }
}
.nn-doc.is-visible { display: block; }
.nn-doc-progress {
  position: sticky; top: 0; z-index: 20;
  height: 2px; width: 100%;
  background: rgba(15, 23, 42, 0.04);
  margin-bottom: var(--space-3);
  border-radius: 2px;
  overflow: hidden;
  flex: 0 0 100%;
}
.nn-doc-progress-bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%);
  transition: width 80ms linear;
}
.nn-doc-article {
  max-width: 880px;
  flex: 1 1 600px;
  margin: 0;
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-4) var(--space-5);
  box-shadow: var(--shadow);
  position: relative;
  min-width: 0;
  animation: nn-doc-enter 380ms var(--ease) both;
}
@keyframes nn-doc-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nn-doc-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}
.nn-doc-question {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.18; color: var(--ink); margin: 0 0 var(--space-2) 0;
}
.nn-doc-stats {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px;
  color: var(--ink-2);
}
.nn-doc-stats-hero {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 14px; line-height: 1.45;
}
.nn-doc-stats-line { color: var(--ink-2); font-weight: 500; letter-spacing: -0.005em; }
.nn-doc-trust-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0;
  border: 1px solid transparent;
}
.nn-doc-trust-pill--very-high {
  background: #ECFDF5; color: #047857; border-color: #A7F3D0;
}
.nn-doc-trust-pill--high {
  background: #EFF6FF; color: #2563EB; border-color: #BFDBFE;
}
.nn-doc-trust-pill--mixed {
  background: #FFFBEB; color: #B45309; border-color: #FDE68A;
}
.nn-doc-stats-advanced {
  font-size: 12px;
  color: var(--ink-2);
}
.nn-doc-stats-advanced summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-2); font-weight: 500;
  padding: 2px 0;
  user-select: none;
}
.nn-doc-stats-advanced summary::-webkit-details-marker { display: none; }
.nn-doc-stats-advanced summary::before {
  content: "›";
  display: inline-block; width: 12px; height: 12px; line-height: 12px;
  text-align: center; font-size: 13px; font-weight: 700;
  transition: transform 160ms var(--ease);
  color: var(--ink-2);
}
.nn-doc-stats-advanced[open] summary::before { transform: rotate(90deg); }
.nn-doc-stats-grid {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 6px 16px; margin: 8px 0 0;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.025);
  border-radius: 10px;
  font-size: 12px;
}
.nn-doc-stats-grid dt { color: var(--ink-2); font-weight: 500; }
.nn-doc-stats-grid dd { margin: 0; color: var(--ink); font-weight: 600; }
.nn-doc-header-actions { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; }
.nn-doc-refine-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; height: 36px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: var(--t-caption); font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.nn-doc-refine-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 113, 227, 0.04);
}
.nn-doc-refine-btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 113, 227, 0.06);
}
.nn-doc-export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; height: 36px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: var(--t-caption); font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nn-doc-export-btn:hover { border-color: var(--border-strong); background: rgba(15, 23, 42, 0.02); }
.nn-doc-caret { transition: transform var(--t-fast) var(--ease); }
.nn-doc-export-btn[aria-expanded="true"] .nn-doc-caret { transform: rotate(180deg); }
.nn-doc-export-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16);
  z-index: 50;
  animation: nn-doc-menu-in 160ms var(--ease) both;
}
@keyframes nn-doc-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nn-doc-export-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; background: transparent; border: none;
  font-size: var(--t-body); color: var(--ink); text-align: left;
  cursor: pointer; border-radius: 8px;
  transition: background var(--t-fast) var(--ease);
}
.nn-doc-export-item:hover { background: rgba(15, 23, 42, 0.04); }
.nn-doc-export-divider { height: 1px; margin: 6px 4px; background: var(--border); }
.nn-doc-export-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; cursor: pointer; font-size: var(--t-caption); color: var(--ink-2);
  border-radius: 8px;
}
.nn-doc-export-toggle:hover { background: rgba(15, 23, 42, 0.04); }
.nn-doc-export-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.nn-doc-export-switch {
  position: relative; display: inline-block; width: 30px; height: 18px;
  background: rgba(15, 23, 42, 0.15); border-radius: 999px; transition: background var(--t-fast) var(--ease);
}
.nn-doc-export-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; background: #fff; border-radius: 50%;
  transition: transform var(--t-fast) var(--ease);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.nn-doc-export-toggle input:checked ~ .nn-doc-export-switch { background: var(--accent); }
.nn-doc-export-toggle input:checked ~ .nn-doc-export-switch::after { transform: translateX(12px); }

/* Hero — compact, 16:9, ~300px tall */
.nn-doc-hero { margin-bottom: var(--space-3); }
.nn-doc-hero-inner .article-visual-hero-media { min-height: 0; }
.nn-doc-hero-inner .article-visual-hero-image { max-height: 300px; aspect-ratio: 16 / 9; }
.nn-doc-hero-inner .article-visual-hero-overlay {
  padding: 14px 18px;
}
.nn-doc-hero-inner .article-visual-hero-title {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 700;
}

/* Floating TOC */
.nn-doc-toc {
  position: sticky; top: 72px; z-index: 5;
  margin: 0 0 24px 0;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.nn-doc-toc-tabs {
  display: flex; align-items: center; gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.nn-doc-toc-tabs::-webkit-scrollbar { display: none; }
.nn-doc-toc-tab {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 14px 14px;
  color: var(--ink-2); text-decoration: none;
  font-weight: 500; letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 160ms var(--ease);
}
.nn-doc-toc-tab:hover { color: var(--ink); }
.nn-doc-toc-tab.is-active { color: var(--ink); font-weight: 600; }
.nn-doc-toc-tab.is-active::after {
  /* Underline animation */
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: #2563EB;
  border-radius: 2px 2px 0 0;
  animation: nn-toc-underline 200ms var(--ease) both;
}
@keyframes nn-toc-underline {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Document body sections */
.nn-doc-body { display: flex; flex-direction: column; gap: var(--space-4); }
.nn-doc-section {
  padding: var(--space-3) 0 0 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 80px;
  opacity: 0; transform: translateY(8px);
  animation: nn-section-in 360ms var(--ease) forwards;
}
.nn-doc-section:nth-child(1) { animation-delay: 60ms; }
.nn-doc-section:nth-child(2) { animation-delay: 120ms; }
.nn-doc-section:nth-child(3) { animation-delay: 180ms; }
.nn-doc-section:nth-child(4) { animation-delay: 240ms; }
.nn-doc-section:nth-child(5) { animation-delay: 300ms; }
@keyframes nn-section-in { to { opacity: 1; transform: translateY(0); } }
.nn-doc-section {
  padding: 0;
  border-top: 1px solid var(--border);
  margin-top: 32px;
  padding-top: 32px;
  scroll-margin-top: 80px;
}
.nn-doc-section:first-of-type { border-top: none; margin-top: 24px; padding-top: 0; }
.nn-doc-section--alt { background: transparent; }
.nn-doc-section-title {
  /* Calmer, smaller section heading — feels more like a page subhead than a
     "shouting" button. Apple Settings style: uppercase, muted, well-tracked. */
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94A3B8;
  margin: 0 0 18px 0;
  display: flex; align-items: center; gap: 10px;
}
.nn-doc-section-title::before {
  content: ""; display: inline-block; width: 2px; height: 12px;
  background: #2563EB;
  border-radius: 2px; flex-shrink: 0;
}
.nn-doc-paragraph {
  font-size: 17px; line-height: 1.7; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 var(--space-2) 0;
}
.nn-doc-paragraph:last-child { margin-bottom: 0; }
.nn-doc-h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--ink); margin: var(--space-3) 0 var(--space-1) 0;
}
.nn-doc-h3 {
  font-size: 17px; font-weight: 600; color: var(--ink);
  margin: var(--space-3) 0 var(--space-1) 0;
}

/* Evidence cards — one card per top citation, scannable, supports tap to open.
   Apple-style: white surface, hairline border, no shadow until hover. */
.nn-doc-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.nn-doc-evidence-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  transition: border-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.nn-doc-evidence-card:hover {
  border-color: rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.nn-doc-evidence-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.nn-doc-evidence-card-source {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-2, #475569);
}
.nn-doc-evidence-card-title {
  margin: 0;
  font-size: 15px; font-weight: 600; line-height: 1.4;
  color: var(--ink, #0f172a);
  letter-spacing: -0.01em;
}
.nn-doc-evidence-card-title a {
  color: inherit;
  text-decoration: none;
}
.nn-doc-evidence-card-title a:hover {
  color: var(--accent, #2563EB);
}
.nn-doc-evidence-card-snippet {
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-2, #475569);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nn-doc-evidence-card-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  font-size: 12px;
  color: var(--ink-2, #475569);
}
.nn-doc-evidence-card-open {
  margin-left: auto;
  font-weight: 600;
  color: var(--accent, #2563EB);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 160ms var(--ease);
}
.nn-doc-evidence-card:hover .nn-doc-evidence-card-open { opacity: 1; }

.nn-doc-empty { color: var(--ink-2); font-size: var(--t-body); }

/* Empty-state when the pipeline returned zero usable articles.
   Apple-style: no big boxes, no shouting. Just a calm panel with the
   reasons and one-tap suggestions. */
.nn-doc-empty-state {
  text-align: left;
  padding: 28px 0 8px;
  background: transparent;
  border-radius: 0;
  border: none;
  max-width: 720px;
}
.nn-doc-empty-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink, #0f172a);
}
.nn-doc-empty-lede {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2, #475569);
}
.nn-doc-empty-lede em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink, #0f172a);
}
.nn-doc-empty-subtitle {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: #94A3B8;
}
.nn-doc-empty-reasons {
  margin-bottom: 24px;
}
.nn-doc-empty-reasons ul,
.nn-doc-empty-suggestion-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.nn-doc-empty-reasons li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2, #475569);
}
.nn-doc-empty-reasons li::before {
  content: "";
  position: absolute; left: 4px; top: 10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #94A3B8;
}
.nn-doc-empty-suggestions { margin-bottom: 24px; }
.nn-doc-empty-suggestion {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.10));
  border-radius: 10px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.nn-doc-empty-suggestion:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background: #EFF6FF;
}
.nn-doc-empty-suggestion-text {
  font-size: 14px; font-weight: 500;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
}
.nn-doc-empty-suggestion-arrow {
  font-size: 14px; color: var(--ink-2, #94a3b8);
  font-weight: 500;
  transition: transform 160ms var(--ease), color 160ms var(--ease);
}
.nn-doc-empty-suggestion:hover .nn-doc-empty-suggestion-arrow {
  transform: translateX(3px);
  color: var(--accent, #2563EB);
}
.nn-doc-empty-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--border, rgba(15, 23, 42, 0.06));
}
.nn-doc-empty-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.10));
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.nn-doc-empty-action:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.04);
}
.nn-doc-empty-action-label {
  font-size: 13px; font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
}
.nn-doc-empty-refine {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  color: var(--ink, #0f172a);
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.10));
  border-radius: 10px;
  padding: 9px 14px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.nn-doc-empty-refine:hover {
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
  transform: translateY(-1px);
}
.nn-doc-empty-refine svg { opacity: 0.8; }

/* Knowledge-fallback button in the empty state. Visually distinct from
   the "Try again" and "Refine search" buttons: amber accent + a hint
   icon (info circle) so the user knows this is a different mode. Per
   Prof. Shasha's 2026-08-31 feedback: when the news search returns
   "no relevant evidence", the user needs a way out. The knowledge
   fallback is that way out. */
.nn-doc-empty-knowledge {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  color: #92400E;
  background: rgba(254, 243, 199, 0.55);
  border: 1px solid rgba(217, 119, 6, 0.30);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  transition:
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.nn-doc-empty-knowledge:hover {
  background: rgba(254, 243, 199, 0.85);
  border-color: rgba(217, 119, 6, 0.55);
  transform: translateY(-1px);
}
.nn-doc-empty-knowledge svg { opacity: 0.85; }
.nn-doc-empty-knowledge:disabled,
.nn-doc-empty-knowledge.is-loading {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

/* Knowledge-based answer surface — used when the news pipeline returns
   no relevant articles and the user clicks "Get a knowledge-based
   answer". Visually distinct from the source-backed SUMMARY: amber
   pill, italic caveat, distinct "Suggested sources" footer. */
.nn-doc-knowledge {
  padding: 4px 0 8px;
  text-align: left;
}
.nn-doc-knowledge-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  margin-bottom: 12px;
}
.nn-doc-knowledge-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #92400E;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.85), rgba(253, 230, 138, 0.75));
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 999px;
  padding: 4px 10px 4px 10px;
}
.nn-doc-knowledge-pill::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #D97706;
  margin-right: 6px;
  vertical-align: middle;
}
.nn-doc-knowledge-query {
  font-size: 13px; color: var(--ink-2, #475569);
  font-style: italic;
}
.nn-doc-knowledge-caveat {
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-2, #475569);
  font-style: italic;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: rgba(254, 243, 199, 0.30);
  border-left: 3px solid #D97706;
  border-radius: 4px;
}
.nn-doc-knowledge-body {
  font-size: 15px; line-height: 1.7;
  color: var(--ink, #0F172A);
  margin: 0 0 20px;
}
.nn-doc-knowledge-body p { margin: 0 0 12px; }
.nn-doc-knowledge-body h2 {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-2, #475569);
  margin: 18px 0 8px;
}
.nn-doc-knowledge-body ul {
  margin: 8px 0 14px; padding-left: 20px;
  list-style: disc;
}
.nn-doc-knowledge-body li { margin: 4px 0; }
.nn-doc-knowledge-sources {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border, rgba(15, 23, 42, 0.08));
}
.nn-doc-knowledge-sources-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2, #475569);
  margin: 0 0 10px;
}
.nn-doc-knowledge-sources-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.nn-doc-knowledge-source-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px;
  background: rgba(241, 245, 249, 0.5);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 8px;
}
.nn-doc-knowledge-source-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; font-weight: 600;
  color: var(--accent, #2563EB);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.nn-doc-knowledge-source-link:hover { text-decoration: underline; }
.nn-doc-knowledge-source-link svg { opacity: 0.7; }
.nn-doc-knowledge-source-why {
  font-size: 12px; color: var(--ink-2, #475569);
  line-height: 1.45;
}

/* Loading-state layout: pipeline on the left only (the right-side
   live-sources panel was removed — sources now live exclusively in the
   sticky Sources sidebar). */
.nn-pipeline-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 880px) {
  .nn-pipeline-shell { grid-template-columns: minmax(0, 1fr); }
}

/* Live pipeline skeleton. Compact rows; the pipeline itself never scrolls —
   smart-collapse in pipeline.js hides the oldest completed stages when the
   container height is exceeded, keeping the active stage anchored in view. */
.nn-pipeline {
  margin: 0;
  padding: 4px 0 2px;
  max-height: min(58vh, 460px);
  overflow: hidden;
  position: relative;
}
.nn-pipeline-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: nnstage;
}
/* Tiny "● ● ●" indicator shown at the top of the pipeline when
   pipeline.js has collapsed earlier stages away. */
.nn-pipeline-hidden-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  padding: 2px 8px 4px;
  margin-bottom: 2px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 220ms ease, max-height 240ms ease, margin-bottom 240ms ease;
}
.nn-pipeline-hidden-count.is-visible {
  opacity: 1;
  max-height: 22px;
}
.nn-pipeline-hidden-count-dots {
  display: inline-flex;
  gap: 2px;
}
.nn-pipeline-hidden-count-dots i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-2);
  display: inline-block;
  opacity: 0.55;
}
.nn-pipeline-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: nnstage;
}
.nn-pipeline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px 10px 6px 12px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-faint);
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  min-width: 0;
  transition:
    color 220ms ease,
    background 220ms ease,
    border-color 220ms ease,
    opacity 320ms ease,
    max-height 320ms ease,
    padding 320ms ease,
    margin 320ms ease;
  opacity: 0.65;
  max-height: 200px;
  overflow: hidden;
}
/* 3px colored edge stripe on the left of each stage card. */
.nn-pipeline-step::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2.5px;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.14);
  transition: background 240ms ease;
}
.nn-pipeline-step.is-done::before {
  background: rgba(15, 23, 42, 0.45);
}
.nn-pipeline-step.is-active::before {
  background: var(--accent);
}
.nn-pipeline-step + .nn-pipeline-step {
  border-top: 1px solid rgba(15, 23, 42, 0.04);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.nn-pipeline-step.is-active {
  opacity: 1;
  color: var(--ink);
  background: rgba(37, 99, 235, 0.04);
  border-color: rgba(37, 99, 235, 0.12);
}
.nn-pipeline-step.is-done {
  opacity: 0.78;
  color: var(--ink-2);
}
/* Collapsed state — pipeline.js adds this to the oldest done stages when
   the pipeline container would overflow. */
.nn-pipeline-step.is-collapsed {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  border: 0;
  pointer-events: none;
}

.nn-pipeline-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 4px;
}
.nn-pipeline-glyph {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  position: relative;
  flex-shrink: 0;
  transition: background 280ms ease, border-color 280ms ease, transform 280ms ease;
}
.nn-pipeline-step.is-done .nn-pipeline-glyph {
  background: var(--ink);
  border-color: var(--ink);
  transform: scale(1);
}
.nn-pipeline-step.is-done .nn-pipeline-glyph::after {
  content: "";
  position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 7px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}
.nn-pipeline-step:not(.is-done):not(.is-active) .nn-pipeline-glyph {
  border-color: rgba(15, 23, 42, 0.18);
}
.nn-pipeline-step.is-active .nn-pipeline-glyph {
  border-color: var(--accent);
}
.nn-pipeline-step.is-active .nn-pipeline-glyph::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--accent);
  animation: nn-pipeline-pulse 1.4s ease-in-out infinite;
}
@keyframes nn-pipeline-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.7); }
  50%      { opacity: 1; transform: scale(1); }
}

.nn-pipeline-title {
  flex: 1 1 auto;
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: 12px;
  color: inherit;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
}
.nn-pipeline-tag {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  transition: background 200ms ease, color 200ms ease;
}
.nn-pipeline-step.is-active .nn-pipeline-tag {
  background: rgba(37, 99, 235, 0.12);
  color: var(--accent);
}
.nn-pipeline-step.is-done .nn-pipeline-tag {
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
}

/* Detail row is hidden by default — only shows when a stage is active.
   When visible, it stays compact under the title. */
.nn-pipeline-detail {
  margin: 1px 0 0 18px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-2);
  min-height: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 240ms ease, max-height 240ms ease, margin-top 240ms ease;
}
.nn-pipeline-step.has-detail .nn-pipeline-detail {
  opacity: 1;
  /* Fits up to two short lines (~16px each) so multi-line details like
     "Reaching out to trusted publishers / Filtering duplicate coverage"
     render fully instead of being clipped. */
  max-height: 38px;
  margin-top: 2px;
}
/* Done stages show subdued detail but still preserve the full text. */
.nn-pipeline-step.is-done.has-detail .nn-pipeline-detail {
  opacity: 0.55;
  max-height: 38px;
}
.nn-pipeline-dots { display: inline-flex; gap: 2px; margin-left: 3px; }
.nn-pipeline-dots span {
  animation: nn-pipeline-dot 1.2s ease-in-out infinite;
  opacity: 0.4;
}
.nn-pipeline-dots span:nth-child(2) { animation-delay: 0.15s; }
.nn-pipeline-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes nn-pipeline-dot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 0.9; transform: translateY(-1px); }
}

/* Inline metric tray — sits on the same row as the tag.
   When the row wraps, this aligns with the title (not the bullet). */
.nn-pipeline-metrics {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 16px;
  transition: opacity 280ms ease, max-height 280ms ease;
}
.nn-pipeline-step.has-metrics .nn-pipeline-metrics {
  opacity: 1;
  max-height: 36px;
}
.nn-pipeline-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 0px 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  font-size: 9.5px;
  line-height: 1.35;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(15, 23, 42, 0.04);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.nn-pipeline-metric-value {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.nn-pipeline-metric-label {
  color: var(--ink-2);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.005em;
}
.nn-pipeline-metric--accent {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.18);
}
.nn-pipeline-metric--accent .nn-pipeline-metric-value { color: var(--accent); }
.nn-pipeline-metric--positive {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.20);
}
.nn-pipeline-metric--positive .nn-pipeline-metric-value { color: #047857; }
.nn-pipeline-metric--warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.20);
}
.nn-pipeline-metric--warning .nn-pipeline-metric-value { color: #b45309; }


/* (Live sources panel removed — sources appear only in the right sidebar.) */

/* Live sources skeleton (shown in the sticky sidebar while loading).
   We give the OL itself horizontal padding (matching the head's 18px) so the
   check-glyphs line up with the header's text and sit *inside* the card
   instead of clinging to the rounded border. A faint top divider makes the
   list feel like its own panel nested within the card. */
.nn-sources-progress {
  position: relative;
  list-style: none;
  padding: 12px 16px 8px 18px;
  margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%);
}
.nn-sources-progress:first-of-type { border-top: none; }
/* Subtle vertical timeline rail that visually connects the progress bar to
   the first few publishers — feels like data is "flowing in" from above.
   Positioned to sit dead-centre on the glyph (left:18 [pad] + 4 [item pad] +
   8 [half glyph] = 30; nudged to 25 so it visually runs *behind* the glyphs
   rather than crossing through them). */
.nn-sources-progress::before {
  content: "";
  position: absolute;
  left: 25px; top: 6px; bottom: 14px;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.32) 0%,
    rgba(16, 185, 129, 0.18) 18%,
    rgba(15, 23, 42, 0.06) 70%,
    rgba(15, 23, 42, 0.02) 100%
  );
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 240ms ease;
  pointer-events: none;
  z-index: 0;
}
.nn-doc-sources:not(.is-finalized) .nn-sources-progress::before {
  opacity: 1;
  animation: nn-source-rail-grow 700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes nn-source-rail-grow {
  0%   { transform: scaleY(0); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}
/* The `[hidden]` attribute should win over the flex display above so
   pipeline.start() can hide the bottom "Sources" box cleanly when the
   right-side live sources panel takes over. */
.nn-sources-progress[hidden] { display: none; }
.nn-source-progress-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 6px;
  margin: 0 -4px;
  font-size: 13px;
  color: var(--ink-2);
  border-radius: 8px;
  background: transparent;
  transition: color 240ms ease, opacity 320ms ease,
              transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 240ms ease, box-shadow 240ms ease;
  z-index: 1;
}
.nn-source-progress-item:hover {
  background: rgba(15, 23, 42, 0.035);
  color: var(--ink);
}
.nn-source-progress-item.is-pending { opacity: 0.5; }
.nn-source-progress-item.is-done    { opacity: 1; color: var(--ink); }

/* Skeleton rows (rendered before real publishers arrive). */
.nn-source-progress-item.is-skeleton {
  opacity: 0.85;
}
.nn-source-progress-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}
.nn-source-progress-meta {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nn-source-progress-skel {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.06) 0%,
    rgba(15, 23, 42, 0.10) 40%,
    rgba(15, 23, 42, 0.06) 80%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: nn-source-skel-shimmer 1.6s ease-in-out infinite;
}
.nn-source-progress-skel--sm {
  width: 36px;
  height: 6px;
}
@keyframes nn-source-skel-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Stagger the skeleton rows so they feel "in motion" while we wait. */
.nn-sources-progress > .nn-source-progress-item.is-skeleton:nth-child(1) .nn-source-progress-skel,
.nn-sources-progress > .nn-source-progress-item.is-skeleton:nth-child(1) .nn-source-progress-glyph {
  animation-delay: 0ms;
}
.nn-sources-progress > .nn-source-progress-item.is-skeleton:nth-child(2) .nn-source-progress-skel,
.nn-sources-progress > .nn-source-progress-item.is-skeleton:nth-child(2) .nn-source-progress-glyph {
  animation-delay: 120ms;
}
.nn-sources-progress > .nn-source-progress-item.is-skeleton:nth-child(3) .nn-source-progress-skel,
.nn-sources-progress > .nn-source-progress-item.is-skeleton:nth-child(3) .nn-source-progress-glyph {
  animation-delay: 240ms;
}
.nn-sources-progress > .nn-source-progress-item.is-skeleton:nth-child(4) .nn-source-progress-skel,
.nn-sources-progress > .nn-source-progress-item.is-skeleton:nth-child(4) .nn-source-progress-glyph {
  animation-delay: 360ms;
}
.nn-sources-progress > .nn-source-progress-item.is-skeleton:nth-child(5) .nn-source-progress-skel,
.nn-sources-progress > .nn-source-progress-item.is-skeleton:nth-child(5) .nn-source-progress-glyph {
  animation-delay: 480ms;
}

.nn-source-progress-glyph {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.6);
  position: relative;
  flex-shrink: 0;
  transition: background 280ms ease, border-color 280ms ease, transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 280ms ease;
}
.nn-source-progress-item.is-active .nn-source-progress-glyph {
  border-color: var(--accent);
  background: rgba(0, 113, 227, 0.08);
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.10);
}
.nn-source-progress-item.is-active .nn-source-progress-glyph::before {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: var(--accent);
  animation: nn-pip-pulse 1.4s ease-in-out infinite;
}
.nn-source-progress-item.is-done .nn-source-progress-glyph {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.18);
}
.nn-source-progress-item.is-done .nn-source-progress-glyph::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 2.5px;
  width: 4px; height: 7px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}

/* Live publishers that come in one-by-one get a satisfying entrance.
   Slides in from the left, settles with a subtle scale snap. The check-glyph
   below does a tiny scale-bounce one beat later so the "approval" feels
   punctuated, then a soft accent highlight sweeps across the row to mark
   its arrival. */
.nn-source-progress-item.is-entering {
  opacity: 0;
  transform: translateX(-14px) scale(0.97);
  animation: nn-source-item-in 520ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes nn-source-item-in {
  0%   { opacity: 0; transform: translateX(-14px) scale(0.97); }
  55%  { opacity: 1; transform: translateX(3px)  scale(1.012); }
  100% { opacity: 1; transform: translateX(0)    scale(1); }
}
/* Once the row lands, gently flash a translucent accent that fades away —
   reads as "this publisher just got verified". */
.nn-source-progress-item.is-entering::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(90deg,
    rgba(16, 185, 129, 0) 0%,
    rgba(16, 185, 129, 0.10) 35%,
    rgba(16, 185, 129, 0.18) 55%,
    rgba(16, 185, 129, 0.10) 75%,
    rgba(16, 185, 129, 0) 100%);
  opacity: 0;
  pointer-events: none;
  animation: nn-source-sweep 720ms cubic-bezier(0.22, 0.61, 0.36, 1) 260ms forwards;
  z-index: 0;
}
@keyframes nn-source-sweep {
  0%   { opacity: 0; transform: translateX(-12%); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(12%); }
}
/* The glyph inside an entering row gets a tiny scale-bounce once the row
   settles, so the "approval" feels punctuated. */
.nn-source-progress-item.is-entering .nn-source-progress-glyph {
  animation: nn-source-glyph-pop 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes nn-source-glyph-pop {
  0%   { transform: scale(0.5); }
  55%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
/* Staggered entrance: each subsequent row starts a touch later so the list
   feels like a stream arriving rather than all-at-once. */
.nn-source-progress-item.is-entering:nth-child(1) { animation-delay: 0ms; }
.nn-source-progress-item.is-entering:nth-child(2) { animation-delay: 60ms; }
.nn-source-progress-item.is-entering:nth-child(3) { animation-delay: 110ms; }
.nn-source-progress-item.is-entering:nth-child(4) { animation-delay: 160ms; }
.nn-source-progress-item.is-entering:nth-child(5) { animation-delay: 210ms; }
.nn-source-progress-item.is-entering:nth-child(n+6) { animation-delay: 260ms; }
.nn-source-progress-item.is-entering:nth-child(1)::after { animation-delay: 260ms; }
.nn-source-progress-item.is-entering:nth-child(2)::after { animation-delay: 320ms; }
.nn-source-progress-item.is-entering:nth-child(3)::after { animation-delay: 370ms; }
.nn-source-progress-item.is-entering:nth-child(4)::after { animation-delay: 420ms; }
.nn-source-progress-item.is-entering:nth-child(5)::after { animation-delay: 470ms; }
.nn-source-progress-item.is-entering:nth-child(n+6)::after { animation-delay: 520ms; }
.nn-source-progress-item.is-entering:nth-child(1) .nn-source-progress-glyph { animation-delay: 80ms; }
.nn-source-progress-item.is-entering:nth-child(2) .nn-source-progress-glyph { animation-delay: 140ms; }
.nn-source-progress-item.is-entering:nth-child(3) .nn-source-progress-glyph { animation-delay: 190ms; }
.nn-source-progress-item.is-entering:nth-child(4) .nn-source-progress-glyph { animation-delay: 240ms; }
.nn-source-progress-item.is-entering:nth-child(5) .nn-source-progress-glyph { animation-delay: 290ms; }
.nn-source-progress-item.is-entering:nth-child(n+6) .nn-source-progress-glyph { animation-delay: 340ms; }

/* Skeleton rows fade out smoothly when replaced by real publishers. */
.nn-source-progress-item.is-fading {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 280ms ease, transform 280ms ease;
}

/* Inline citation pills */
.nn-doc-cite {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px;
  padding: 0 6px; margin: 0 1px;
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  background: rgba(0, 113, 227, 0.08);
  border-radius: 6px;
  text-decoration: none;
  vertical-align: 1px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.nn-doc-cite:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.25);
}
.nn-doc-cite.is-hover {
  background: var(--accent);
  color: #fff;
}

.nn-doc-cite::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  padding: 7px 10px;
  border-radius: 8px;
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  z-index: 30;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}
.nn-doc-cite:hover::after,
.nn-doc-cite.is-hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Findings list */
.nn-doc-findings-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.nn-doc-finding {
  position: relative; padding: 12px 14px 12px 36px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  font-size: 15px; line-height: 1.55; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nn-doc-finding:hover { border-color: var(--border-strong); transform: translateX(2px); }
.nn-doc-finding::before {
  content: ""; position: absolute; left: 16px; top: 18px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* Timeline */
.nn-doc-timeline-list {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.nn-doc-timeline-list::before {
  content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px;
  width: 2px; background: linear-gradient(180deg, var(--accent) 0%, rgba(0,113,227,0.2) 100%);
}
.nn-doc-timeline-item {
  position: relative; padding: 6px 0 6px 28px;
  font-size: 15px; line-height: 1.55; color: var(--ink);
}
.nn-doc-timeline-dot {
  position: absolute; left: 2px; top: 14px;
  width: 12px; height: 12px;
  background: var(--surface);
  border: 2px solid var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
}
.nn-doc-timeline-date {
  display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent);
  margin-right: 8px;
}

/* Footer */
.nn-doc-footer { margin-top: var(--space-4); }
.nn-doc-related { margin-bottom: var(--space-4); }
.nn-doc-related-list { display: flex; flex-direction: column; gap: 8px; }
.nn-doc-related-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  font-size: 15px; color: var(--ink); text-align: left;
  cursor: pointer; font-family: inherit;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nn-doc-related-item:hover { border-color: var(--border-strong); transform: translateX(2px); }
.nn-doc-related-item svg { color: var(--ink-2); transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.nn-doc-related-item:hover svg { color: var(--accent); transform: translateX(2px); }
.nn-doc-disclaimer {
  color: var(--ink-2); font-size: var(--t-caption); line-height: 1.6;
  margin: 0; padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* Sticky sources sidebar — premium "publisher passport" cards.
   Supporting evidence, but treated like a well-designed reference index. */
.nn-doc-sources {
  position: sticky; top: 96px;
  align-self: stretch;
  flex: 0 0 340px;
  width: 340px;
  max-height: calc(100vh - 120px);
  background: linear-gradient(180deg, #FCFCFD 0%, #F8F9FB 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 32px -12px rgba(15, 23, 42, 0.08);
  padding: 0;
  display: flex; flex-direction: column;
  /* Container scrolls internally. Reserve ~4px on right so the custom
     scrollbar doesn't sit on top of the cards. */
  overflow: hidden;
  z-index: 5;
  animation: nn-sources-enter 520ms cubic-bezier(.16,1,.3,1) both;
  animation-delay: 120ms;
}
@keyframes nn-sources-enter {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nn-doc-sources-head {
  display: flex; flex-direction: column; gap: 6px;
  /* Keep header pinned to the top of the sidebar so it's always visible
     even while the source list scrolls internally. */
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 16px 18px 12px;
  margin: 0;
  background: linear-gradient(180deg,
    #FCFCFD 0%,
    #FCFCFD 70%,
    rgba(252, 252, 253, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
}
.nn-doc-sources-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.nn-doc-sources-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.nn-doc-sources-eyebrow svg { color: var(--accent); opacity: 0.85; }
.nn-doc-sources-eyebrow-label { line-height: 1; }

/* Live "discovering" pulse — sits to the left of the eyebrow text. */
.nn-doc-sources-pulse {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #34D399, #059669);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18);
  flex-shrink: 0;
  display: inline-block;
}
.nn-doc-sources-pulse::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 2px solid rgba(52, 211, 153, 0.55);
  animation: nn-source-pulse-ring 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  opacity: 0;
}
@keyframes nn-source-pulse-ring {
  0%   { transform: scale(0.6); opacity: 0.7; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
/* Soft flicker on the dot itself so it feels "alive". */
.nn-doc-sources-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: inherit;
  animation: nn-source-pulse-blink 1.8s ease-in-out infinite;
}
@keyframes nn-source-pulse-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* When the live phase is done, swap to a softer static dot. */
.nn-doc-sources.is-finalized .nn-doc-sources-pulse {
  background: rgba(15, 23, 42, 0.45);
  box-shadow: none;
  animation: none;
}
.nn-doc-sources.is-finalized .nn-doc-sources-pulse::before,
.nn-doc-sources.is-finalized .nn-doc-sources-pulse::after {
  animation: none;
  opacity: 0;
}

/* Tiny progress bar at the bottom of the head — fills while discovering
   and stops on its final value once the answer arrives. */
.nn-doc-sources-progressbar {
  position: relative;
  height: 2px;
  width: 100%;
  margin-top: 8px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  overflow: visible;
}
/* Glowing dot at the leading edge of the fill — feels like it's "writing"
   the timeline into existence. */
.nn-doc-sources-progressbar-fill::after {
  content: "";
  position: absolute;
  right: -4px; top: 50%;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, #10B981 0%, rgba(16, 185, 129, 0) 70%);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.nn-doc-sources-progressbar:not(.is-finalized) .nn-doc-sources-progressbar-fill::after {
  opacity: 1;
  animation: nn-source-fill-glow 1.6s ease-in-out infinite;
}
@keyframes nn-source-fill-glow {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.85; }
  50%      { transform: translateY(-50%) scale(1.4); opacity: 1; }
}
.nn-doc-sources-progressbar-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, #34D399 0%, #10B981 50%, #2563EB 100%);
  background-size: 200% 100%;
  border-radius: 999px;
  animation:
    nn-source-bar-fill 5.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
    nn-source-bar-shine 2.4s linear infinite;
}
@keyframes nn-source-bar-fill {
  0%   { right: 100%; }
  100% { right: 0%; }
}
@keyframes nn-source-bar-shine {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
.nn-doc-sources.is-finalized .nn-doc-sources-progressbar-fill {
  animation: none;
  right: 0;
  background: linear-gradient(90deg, #34D399 0%, #10B981 100%);
}
.nn-doc-sources-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 22px;
  padding: 0 8px;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.nn-doc-sources-sub {
  margin: 0;
  font-size: 12px; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: 0.005em;
}
.nn-doc-sources-sub-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--ink);
}
.nn-doc-sources-sub-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: linear-gradient(135deg, #34D399, #059669);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
.nn-doc-sources-sub-sep { color: var(--ink-3); font-weight: 400; }

/* Three animated dots used inside the live "Discovering" pill. */
.nn-doc-sources-sub-ellipsis {
  display: inline-flex;
  gap: 1px;
  margin-left: 2px;
}
.nn-doc-sources-sub-ellipsis span {
  display: inline-block;
  width: 3px;
  animation: nn-source-ellipsis 1.2s ease-in-out infinite;
  opacity: 0.4;
}
.nn-doc-sources-sub-ellipsis span:nth-child(1) { animation-delay: 0ms; }
.nn-doc-sources-sub-ellipsis span:nth-child(2) { animation-delay: 160ms; }
.nn-doc-sources-sub-ellipsis span:nth-child(3) { animation-delay: 320ms; }
@keyframes nn-source-ellipsis {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}

.nn-doc-sources-list {
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  /* Slightly more padding on right to make room for the scrollbar so cards
     never sit underneath it. */
  margin: 0;
  padding: 4px 14px 18px 14px;
  list-style: none;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  /* Fade top/bottom so content visually bleeds under the sticky head.
     36px headroom for the sticky header fade. */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0,
    #000 28px,
    #000 calc(100% - 12px),
    transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0,
    #000 28px,
    #000 calc(100% - 12px),
    transparent 100%);
}
.nn-doc-sources-list::-webkit-scrollbar { width: 6px; }
.nn-doc-sources-list::-webkit-scrollbar-track { background: transparent; }
.nn-doc-sources-list::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 999px;
  transition: background 200ms ease;
}
.nn-doc-sources-list:hover::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.32);
}

/* Publisher card (group) — left accent rail by tier, soft elevation. */
.nn-doc-source-group {
  position: relative;
  display: flex; flex-direction: column;
  /* flex-shrink:0 keeps each card at its natural height. Without this, when
     one card expands (e.g. Google News with 20+ refs) the scrollable list
     above us constrains the column-flex layout and shrinks *all* cards,
     clipping their heads and slicing the title text in half. */
  flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  /* Stagger-in animation when sources arrive. */
  animation: nn-source-group-in 380ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes nn-source-group-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Stagger children that arrive together for a calmer cascade. */
.nn-doc-source-group:nth-child(1) { animation-delay: 0ms; }
.nn-doc-source-group:nth-child(2) { animation-delay: 40ms; }
.nn-doc-source-group:nth-child(3) { animation-delay: 80ms; }
.nn-doc-source-group:nth-child(4) { animation-delay: 120ms; }
.nn-doc-source-group:nth-child(5) { animation-delay: 160ms; }
.nn-doc-source-group:nth-child(6) { animation-delay: 200ms; }
.nn-doc-source-group:nth-child(n+7) { animation-delay: 240ms; }
.nn-doc-source-group::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--group-rail, rgba(15, 23, 42, 0.18));
  transition: width var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nn-doc-source-group[data-tier="very-high"] { --group-rail: linear-gradient(180deg, #34D399, #059669); }
.nn-doc-source-group[data-tier="high"]      { --group-rail: linear-gradient(180deg, #60A5FA, #2563EB); }
.nn-doc-source-group[data-tier="mixed"]     { --group-rail: linear-gradient(180deg, #FBBF24, #D97706); }
.nn-doc-source-group[data-tier="unknown"]   { --group-rail: linear-gradient(180deg, #CBD5E1, #64748B); }
.nn-doc-source-group:hover {
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px -8px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}
.nn-doc-source-group:hover::before { width: 4px; }

.nn-doc-source-group-head {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  width: 100%;
  padding: 12px 12px 12px 14px;
  background: transparent;
  border: none;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast) var(--ease);
}
.nn-doc-source-group-head:hover { background: rgba(15, 23, 42, 0.025); }
.nn-doc-source-group.is-expanded .nn-doc-source-group-head {
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

/* Publisher avatar — neutral plate with initials. Calm, editorial feel —
   the tier itself is shown by the left rail so the avatar doesn't need
   to compete for color. */
.nn-doc-source-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F5F8 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
  font-family: var(--font-display, 'Inter'), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Tiny inner sheen highlight — adds depth without color noise. */
.nn-doc-source-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0.7;
}
/* Avatar tone variants — restrained. The tier is shown by the left rail. */
.nn-doc-source-avatar--emerald { background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%); color: #047857; border-color: rgba(16, 185, 129, 0.22); }
.nn-doc-source-avatar--sky     { background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%); color: #1D4ED8; border-color: rgba(59, 130, 246, 0.22); }
.nn-doc-source-avatar--violet  { background: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 100%); color: #6D28D9; border-color: rgba(139, 92, 246, 0.22); }
.nn-doc-source-avatar--amber   { background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%); color: #B45309; border-color: rgba(245, 158, 11, 0.24); }
.nn-doc-source-avatar--slate   { background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%); color: #475569; border-color: rgba(100, 116, 139, 0.18); }

.nn-doc-source-group-text {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.nn-doc-source-group-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-width: 0;
}
.nn-doc-source-group-name {
  font-weight: 650; font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--ink);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.nn-doc-source-group-caret {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--ink-2);
  background: rgba(15, 23, 42, 0.04);
  transition: transform 200ms var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.nn-doc-source-group-caret svg { display: block; }
.nn-doc-source-group.is-expanded .nn-doc-source-group-caret {
  transform: rotate(180deg);
  background: rgba(0, 113, 227, 0.10);
  color: var(--accent);
}
.nn-doc-source-group-meta {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-width: 0;
}
.nn-doc-source-group-count {
  font-size: 10.5px; color: var(--ink-2); font-weight: 500;
  letter-spacing: 0.01em;
}
/* Reference chips — wrap so multi-ref publishers (e.g. Google News) don't
   overflow. The "+N" chip toggles `is-expanded` to reveal the rest. */
.nn-doc-source-group-refs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  width: 100%;
  margin-top: 5px;
  min-width: 0;
}
.nn-doc-ref-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: rgba(0, 113, 227, 0.08);
  border-radius: 4px;
  letter-spacing: 0.02em;
  line-height: 1;
  flex-shrink: 0;
}
.nn-doc-ref-chip--overflow {
  background: rgba(15, 23, 42, 0.06);
  color: var(--ink-2);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  border: 1px solid transparent;
}
.nn-doc-ref-chip--overflow:hover {
  background: var(--accent, #0071E3);
  color: #fff;
}
.nn-doc-ref-chip--hidden {
  display: none;
}
.nn-doc-source-group-refs.is-expanded .nn-doc-ref-chip--hidden {
  display: inline-flex;
}

/* Tier badge — small dot + label, calmer than a fat pill. */
.nn-doc-source-tier {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
  background: rgba(15, 23, 42, 0.04);
  color: var(--ink-2);
}
.nn-doc-source-tier-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}
.nn-doc-source-tier--very-high { color: #047857; background: rgba(16, 185, 129, 0.10); }
.nn-doc-source-tier--high      { color: #2563EB; background: rgba(37, 99, 235, 0.10); }
.nn-doc-source-tier--mixed     { color: #B45309; background: rgba(245, 158, 11, 0.12); }
.nn-doc-source-tier--unknown   { color: #475569; background: rgba(100, 116, 139, 0.12); }

.nn-doc-source-group-body {
  display: none;
  flex-direction: column;
  padding: 4px 10px 10px 14px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.015), transparent 20px),
    rgba(15, 23, 42, 0.012);
}
.nn-doc-source-group.is-expanded .nn-doc-source-group-body {
  display: flex;
  animation: nn-source-group-open 240ms var(--ease);
}
@keyframes nn-source-group-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Individual source card inside an expanded group. */
.nn-doc-source {
  display: flex; gap: 9px; align-items: flex-start;
  width: 100%;
  padding: 10px 6px 10px 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
  transition: background var(--t-fast) var(--ease);
  position: relative;
}
.nn-doc-source + .nn-doc-source {
  margin-top: 0;
  border-top: 1px dashed rgba(15, 23, 42, 0.06);
}
.nn-doc-source:hover { background: rgba(15, 23, 42, 0.03); }
.nn-doc-source.is-hover {
  background: rgba(0, 113, 227, 0.06);
}
.nn-doc-source.is-pulse {
  animation: nn-doc-source-pulse 2.2s ease-out;
  border-radius: 8px;
}
@keyframes nn-doc-source-pulse {
  0%   { background: rgba(0, 113, 227, 0.30); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.30); }
  40%  { background: rgba(0, 113, 227, 0.16); box-shadow: 0 0 0 5px rgba(0, 113, 227, 0.18); }
  100% { background: transparent;             box-shadow: 0 0 0 0 rgba(0, 113, 227, 0); }
}
.nn-doc-source-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.nn-doc-source-title {
  font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.4;
  letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nn-doc-source-ref {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  margin-top: 1px;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  border-radius: 6px;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 2px 6px -2px rgba(37, 99, 235, 0.45);
}
.nn-doc-source-foot {
  display: flex; gap: 8px; align-items: center;
  font-size: 11px; color: var(--ink-2);
  margin-top: 1px;
}
.nn-doc-source-date {
  display: inline-flex; align-items: center; gap: 4px;
}
.nn-doc-source-date svg { color: var(--ink-3); }
.nn-doc-source-relevance {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 500;
  color: var(--ink-3);
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.03);
}
.nn-doc-source-open {
  margin-left: auto;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--ink-3);
  opacity: 0;
  background: transparent;
  flex-shrink: 0;
  transition: opacity var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.nn-doc-source:hover .nn-doc-source-open {
  opacity: 1;
  color: var(--accent);
  background: rgba(0, 113, 227, 0.08);
}
.nn-doc-source.is-expanded .nn-doc-source-open {
  opacity: 1;
  color: var(--accent);
}

.nn-doc-empty {
  font-size: 12px; color: var(--ink-2);
  margin: 0; padding: 12px 4px;
  text-align: center;
}

/* Export toast */
.nn-doc-export-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(15, 23, 42, 0.92); color: #fff;
  padding: 10px 18px; border-radius: 100px;
  font-size: 13px; font-weight: 500;
  opacity: 0; pointer-events: none;
  z-index: 9999;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.nn-doc-export-toast.is-visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Responsive */
@media (max-width: 1100px) {
  .nn-doc-sources {
    position: static; width: auto; max-height: none;
    margin-top: var(--space-3); right: auto; top: auto;
  }
}
@media (max-width: 640px) {
  .nn-doc-article { padding: var(--space-3) var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
  .nn-doc-question { font-size: 22px; }
  .nn-doc-header { flex-direction: column; align-items: flex-start; }
  .nn-doc-toc { top: 64px; }
  .nn-doc-toc-tab { padding: 12px 10px; font-size: 12px; }
  .nn-doc-stat-value { font-size: 12px; }
  .nn-doc-export-btn { width: 100%; justify-content: center; }
  .nn-doc-refine-btn { width: 100%; justify-content: center; }
  .nn-doc-paragraph { font-size: 16px; }
  .nn-doc-stats-hero { font-size: 13px; }
}

/* Hidden legacy containers (kept for back-compat with index.js) */
#google-news-results[hidden],
#timing-metrics[hidden],
#output[hidden],
#references[hidden],
#google-output[hidden],
#google-references[hidden],
#generate-pdf-button[hidden],
#similarQuestions[hidden],
#similar-questions[hidden],
#nn-doc-sources-list[hidden] {
  display: none !important;
}

/* Developer-mode timing block must always break onto its own row inside the
   `.nn-doc` flex container. Without this, it sits next to the sticky Sources
   sidebar and forces overlap (regression seen in the answer page). */
#timing-metrics,
#google-news-results,
#similarQuestions {
  flex: 0 0 100%;
  min-width: 0;
  order: 99;
}

/* Google News synthesis block (legacy, kept for the inline #nn-doc-google fallback) */
#google-news-results {
  margin-top: var(--space-2);
  width: 100%;
}
.google-news-divider {
  width: 100%; border-top: 1px solid var(--border);
  margin: var(--space-3) 0;
}
.google-news-shell {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
}
.google-news-heading {
  font-size: var(--t-section);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
  text-align: left;
}
.google-results-content {
  display: flex; gap: var(--space-2);
  min-height: 380px;
}
#google-output, #google-references {
  flex: 1; overflow-y: auto;
  padding: var(--space-2);
  background: var(--bg);
  border-radius: 14px;
  min-height: 380px;
  font-family: inherit;
  text-align: left;
  min-width: 0;
}
#google-output { flex: 1.5; }
#google-output textarea, #google-references textarea {
  width: 100%; height: 100%;
  border: none; resize: none;
  font-size: var(--t-body);
  background: transparent;
  color: var(--ink);
  font-weight: 400; line-height: 1.6;
  letter-spacing: -0.01em;
  outline: none; font-family: inherit;
}

/* Timing metrics */
.timing-metrics {
  margin-top: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.timing-title { font-size: var(--t-section); font-weight: 600; margin-bottom: var(--space-1); }
.timing-total-line { font-size: var(--t-body); font-weight: 600; margin-bottom: var(--space-2); }
.timing-common { padding: var(--space-2); border-radius: 14px; background: var(--bg); margin-bottom: var(--space-2); }
.timing-results-content { display: flex; gap: var(--space-2); }
.timing-panel {
  flex: 1; min-width: 0; overflow-y: auto;
  padding: var(--space-2);
  background: var(--bg);
  border-radius: 14px;
}
.timing-panel-heading { font-size: var(--t-card); font-weight: 600; margin-bottom: var(--space-1); }
.timing-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--space-1); }
.timing-mini {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: 10px;
  background: var(--surface); font-size: var(--t-caption);
}
.timing-empty { font-size: var(--t-caption); opacity: 0.75; padding: 4px 0; }
.timing-subtitle { font-size: var(--t-caption); font-weight: 700; margin: var(--space-1) 0 6px 0; }
.timing-inline { font-size: var(--t-caption); line-height: 1.45; }
.timing-grid {
  display: grid; grid-template-columns: minmax(200px, 1fr) auto;
  gap: 5px 12px; font-size: var(--t-caption); line-height: 1.4;
}
.timing-stage { opacity: 0.95; }
.timing-value { font-weight: 700; text-align: right; }

@media (max-width: 900px) {
  .timing-results-content, .google-results-content, .results-content {
    flex-direction: column;
  }
  .timing-mini-grid { grid-template-columns: 1fr; }
  .timing-grid { grid-template-columns: 1fr; gap: 4px 0; }
  .timing-value { text-align: left; }
}

/* Similar suggestions */
#recent-questions {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; align-items: center;
  max-width: 720px; margin: var(--space-2) auto 0;
}
.recent-question-chip {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 14px;
  font-size: var(--t-caption);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.recent-question-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

#similar-suggestions {
  max-width: 720px;
  margin: var(--space-2) auto 0;
  display: flex; flex-direction: column; gap: 8px;
}
.similar-chip, .similar-generate {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 14px;
  padding: var(--space-2);
  font-size: var(--t-caption);
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.similar-generate { color: var(--accent); border-color: var(--border); }
.similar-chip:hover, .similar-generate:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* Article visuals (used by index.js answer renderer) */
.article-visual-hero { width: 100%; margin-bottom: var(--space-2); }
.article-visual-hero-link { display: block; text-decoration: none; color: inherit; }
.article-visual-hero-media {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, rgba(30,41,59,.08), rgba(248,250,252,.96));
  min-height: 220px;
}
.article-visual-hero-image {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; max-height: 360px;
  object-fit: cover; transform: scale(1.01);
  transition: transform 280ms var(--ease), filter 280ms var(--ease);
  filter: saturate(1.03) contrast(1.02);
}
.article-visual-hero-link:hover .article-visual-hero-image {
  transform: scale(1.04); filter: saturate(1.08) contrast(1.05);
}
.article-visual-hero-overlay {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-2);
  color: #fff;
  background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.36) 24%, rgba(15,23,42,.82) 100%);
}
.article-visual-hero-kicker {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 100px;
  background: rgba(255,255,255,.16);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.article-visual-hero-title { font-size: clamp(18px, 2.2vw, 28px); font-weight: 800; line-height: 1.18; max-width: 95%; text-shadow: 0 2px 10px rgba(0,0,0,.24); }
.article-visual-hero-source { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: rgba(255,255,255,.92); }
.article-visual-empty-shell { margin-bottom: var(--space-2); }
.article-visual-empty {
  border-radius: var(--radius);
  border: 1px dashed rgba(107,114,128,.28);
  padding: var(--space-2);
  background: radial-gradient(circle at top left, rgba(96,165,250,.12), transparent 32%), var(--surface);
}
.article-visual-empty-title { font-size: var(--t-body); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.article-visual-empty-copy { font-size: var(--t-caption); color: var(--ink-2); line-height: 1.55; }
/* Single-line, no-border fallback for when there's no image. */
.article-visual-empty-line {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--t-caption);
  color: var(--ink-2);
}

/* Headline word cloud + similar questions */
.headline-wordcloud-container { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.headline-wordcloud-title { font-size: var(--t-caption); font-weight: 700; margin-bottom: var(--space-1); }
.headline-wordcloud { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.headline-wordcloud-word { display: inline-block; line-height: 1; color: var(--accent); text-transform: lowercase; letter-spacing: .01em; }
.headline-wordcloud-line { font-size: var(--t-body); color: var(--accent); line-height: 1.5; }

.similar-questions {
  margin-top: var(--space-3);
  display: flex; flex-direction: column; align-items: center;
}
.similar-questions button {
  background-color: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-4);
  margin-bottom: var(--space-1);
  cursor: pointer;
  font-size: var(--t-caption);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.similar-questions button:hover { border-color: var(--accent); transform: translateY(-2px); }
.similar-questions button:last-child { background-color: rgba(255, 59, 48, 0.08); color: #FF3B30; border-color: rgba(255, 59, 48, 0.20); }

/* Misc (PDF button, hint, disclaimer) */
.button-container { display: flex; justify-content: center; margin-top: var(--space-2); margin-bottom: var(--space-1); }
.button-container button {
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--t-body);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.button-container button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,113,227,.30); }

#generate-pdf-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 14px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#generate-pdf-button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,113,227,.30); }

.disclaimer { color: var(--ink-2); font-size: var(--t-caption); margin: var(--space-1) 0 var(--space-3); opacity: 0.8; }
.hint { font-size: var(--t-caption); color: var(--ink-2); margin-top: -7px; opacity: 0.8; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}

/* Missing-modules warning */
.missing-modules-warning {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  width: auto; max-width: 600px; min-width: 320px;
  background: rgba(255, 243, 205, 0.5);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #856404;
  padding: 10px 16px;
  z-index: 10000;
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
  from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}
.warning-content { display: flex; align-items: flex-start; gap: 10px; }
.warning-icon { font-size: 16px; flex-shrink: 0; color: #ffc107; margin-top: 2px; opacity: 0.9; }
.warning-text { flex: 1; text-align: left; min-width: 0; }
.warning-text strong { display: block; font-size: var(--t-caption); margin-bottom: 4px; font-weight: 500; color: #856404; letter-spacing: 0.01em; }
.warning-details { font-size: 12px; margin-top: 0; line-height: 1.5; color: #856404; opacity: 0.9; }
.warning-details ul { margin: 4px 0 0 0; padding-left: 16px; list-style-type: disc; }
.warning-details li { margin: 2px 0; }
.warning-details code { background: rgba(255, 193, 7, 0.2); padding: 2px 6px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 11px; color: #856404; border: 1px solid rgba(255, 193, 7, 0.3); }
.close-warning-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(133, 100, 4, 0.2);
  color: #856404;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: transform var(--t-fast) var(--ease);
  flex-shrink: 0;
  line-height: 1; margin-top: 2px;
}
.close-warning-btn:hover { background: rgba(255, 193, 7, 0.2); transform: scale(1.05); }
.close-warning-btn:active { transform: scale(0.95); }
@media (max-width: 768px) {
  .missing-modules-warning { max-width: 90%; min-width: 280px; top: 10px; padding: 8px 12px; }
  .warning-text strong { font-size: 12px; }
  .warning-details { font-size: 11px; }
}

/* Site logo override — neutralise the old framed look */
#site-logo {
  max-width: 220px;
  height: auto;
  margin: var(--space-1) auto var(--space-2);
  display: block;
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0.9;
  transition: opacity var(--t-fast) var(--ease);
}
#site-logo:hover { opacity: 1; }

/* Hide the now-redundant h2 tagline — the hero block already carries it */
#site-tagline { display: none !important; }

/* ------------------------------------------------------------------------- */
/*  Incremental UI — live source panel (Phase 3 styling)                    */
/*  The HTML comes from pushLiveSource() in pipeline.js. The classes are    */
/*  .nn-pipeline-live-source, .nn-pipeline-live-source-snippet,              */
/*  .nn-pipeline-live-source-pills, and .nn-pill-* variants.                 */
/* ------------------------------------------------------------------------- */

/* Panel container — the hero card that holds the streaming source list.
   Hidden by default (home page), shown only when body has .is-search-mode
   (after the user submits a query). A previous version of this rule had
   no `display: none` here, which made the panel show on the home page
   with the stepper + skeleton cards + radar hero — looking like the
   search was already running. Fix: hide by default, show on search. */
.nn-pipeline-live-sources {
  display: none;
  margin: 14px 0 18px;
  padding: 16px 18px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.85));
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02),
              0 12px 32px -16px rgba(15, 23, 42, 0.12);
  transition: opacity 240ms var(--ease, ease),
              max-height 240ms var(--ease, ease),
              padding 240ms var(--ease, ease),
              margin 240ms var(--ease, ease);
}
/* On the home page (no search yet) the panel must stay hidden. We also
   support the `body.is-search-mode-pipeline` flag (set by pipeline.js
   `start()`) as a slightly later signal that the SSE stream has started. */
body.is-search-mode .nn-pipeline-live-sources,
body.is-search-mode-pipeline .nn-pipeline-live-sources {
  display: block;
}
.nn-pipeline-live-sources.is-empty {
  opacity: 0.55;
}
.nn-pipeline-live-sources.is-finalized {
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.85), rgba(220, 252, 231, 0.55));
  border-color: rgba(22, 163, 74, 0.18);
}
.nn-pipeline-live-sources-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.nn-pipeline-live-sources-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 9px;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-1, #111);
  text-transform: uppercase;
}
.nn-pipeline-live-sources.is-finalized .nn-pipeline-live-sources-eyebrow {
  background: rgba(22, 163, 74, 0.12);
  color: #047857;
}
.nn-pipeline-live-sources-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2563EB;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55);
  animation: nn-live-pulse 1.6s ease-out infinite;
}
.nn-pipeline-live-sources.is-finalized .nn-pipeline-live-sources-pulse {
  background: #16A34A;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
  animation: none;
}
@keyframes nn-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.nn-pipeline-live-sources-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, #444);
  font-variant-numeric: tabular-nums;
}
.nn-pipeline-live-sources-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* No overflow:hidden / overflow-y:auto here — the hover preview is
     a position:absolute child that anchors above the card, and we want
     it to overflow the list bounds so it doesn't get clipped. The list
     just flows naturally inside the panel. */
}

/* ---------- 7-stage animated stepper (replaces the legacy
   "Stage 1/2/3/4/5" skeleton with a horizontal animated bar) ---------- */
.nn-stage-tracker {
  list-style: none;
  margin: 14px 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  position: relative;
}
.nn-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3, #94a3b8);
  letter-spacing: 0.02em;
  transition: color 200ms var(--ease, ease);
}
.nn-stage + .nn-stage::before {
  /* connector line between dots, drawn from the previous stage's right
     to this stage's left */
  content: '';
  position: absolute;
  top: 13px;             /* centres on the 12px dot + 4px padding-top */
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--ink-3, #cbd5e1);
  z-index: 0;
  transition: background 320ms var(--ease, ease);
}
.nn-stage-dot {
  position: relative;
  z-index: 1;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--ink-3, #cbd5e1);
  transition: all 280ms var(--ease, ease);
  position: relative;
}
.nn-stage-label {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.nn-stage[data-status="active"] {
  color: var(--ink-1, #0F172A);
}
.nn-stage[data-status="active"] .nn-stage-dot {
  background: #2563EB;
  border-color: #2563EB;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.18),
              0 0 0 0 rgba(37, 99, 235, 0.45);
  animation: nn-stage-pulse 1.6s ease-out infinite;
}
.nn-stage[data-status="active"] + .nn-stage::before,
.nn-stage[data-status="done"] + .nn-stage::before {
  background: #16A34A;
}
.nn-stage[data-status="done"] {
  color: #047857;
}
.nn-stage[data-status="done"] .nn-stage-dot {
  background: #16A34A;
  border-color: #16A34A;
}
.nn-stage[data-status="done"] .nn-stage-dot::after {
  content: '';
  position: absolute;
  top: 2px; left: 3px;
  width: 4px; height: 7px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@keyframes nn-stage-pulse {
  0%   { box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.18), 0 0 0 0 rgba(37, 99, 235, 0.45); }
  70%  { box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.08), 0 0 0 10px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.18), 0 0 0 0 rgba(37, 99, 235, 0); }
}

.nn-stage-tracker-current {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, #475569);
  background: rgba(248, 250, 252, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: 8px;
  letter-spacing: -0.005em;
  transition: all 200ms var(--ease, ease);
}
.nn-stage-tracker-current.is-active {
  color: #1D4ED8;
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.18);
}
.nn-stage-tracker-current.is-done {
  color: #047857;
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.18);
}
.nn-stage-tracker-current-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  flex: 0 0 auto;
  transition: background 200ms var(--ease, ease);
}
.nn-stage-tracker-current.is-active .nn-stage-tracker-current-pulse {
  background: #2563EB;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
  animation: nn-stage-current-pulse 1.4s ease-out infinite;
}
.nn-stage-tracker-current.is-done .nn-stage-tracker-current-pulse {
  background: #16A34A;
}
@keyframes nn-stage-current-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
/* Empty-state placeholder: a centred spinner + caption. The list takes
   priority — once a real <li> is appended, JS sets the parent to
   .is-has-sources and the placeholder hides itself. */
.nn-pipeline-live-sources-empty {
  margin: 18px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 4px 6px;
  font-size: 12.5px;
  color: var(--ink-2, #475569);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.nn-pipeline-live-sources.is-has-sources .nn-pipeline-live-sources-empty {
  display: none;
}
.nn-pipeline-live-sources-empty-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.nn-pipeline-live-sources-empty-spinner {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.18);
  border-top-color: rgba(37, 99, 235, 1);
  animation: nn-live-empty-spin 0.9s linear infinite;
  flex: 0 0 auto;
}
@keyframes nn-live-empty-spin {
  to { transform: rotate(360deg); }
}
/* Animated "..." after the empty-state caption. */
.nn-pipeline-live-sources-empty-dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 2px;
}
.nn-pipeline-live-sources-empty-dots i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #2563EB;
  opacity: 0.3;
  animation: nn-empty-dot 1.2s infinite ease-in-out;
}
.nn-pipeline-live-sources-empty-dots i:nth-child(2) { animation-delay: 0.15s; }
.nn-pipeline-live-sources-empty-dots i:nth-child(3) { animation-delay: 0.30s; }
@keyframes nn-empty-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* Radar / hero illustration: a sweeping scanner that picks up source
   "blips" as the backend reports them. Provides a strong "live search"
   visual even when no card has arrived yet. */
.nn-pipeline-live-sources-hero {
  display: block;
  margin: 4px auto 0;
}
.nn-radar-sweep {
  transform-origin: 60px 40px;
  animation: nn-radar-sweep 2.4s linear infinite;
}
.nn-radar-sweep-tip {
  transform-origin: 60px 40px;
  animation: nn-radar-sweep 2.4s linear infinite;
}
.nn-radar-source-a { animation: nn-radar-ping 2.4s infinite ease-out; }
.nn-radar-source-b { animation: nn-radar-ping 2.4s infinite ease-out 0.8s; }
.nn-radar-source-c { animation: nn-radar-ping 2.4s infinite ease-out 1.6s; }
@keyframes nn-radar-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes nn-radar-ping {
  0%, 70%, 100% { transform: scale(1);   opacity: 1; }
  35%           { transform: scale(2.4); opacity: 0; }
}

/* The stepper dots should look "alive" even before any stage fires —
   each gets a subtle stagger pulse until the first stage lands. */
.nn-stage-tracker:not(.is-alive) .nn-stage[data-status="pending"] .nn-stage-dot {
  animation: nn-stage-pending-pulse 1.8s infinite ease-in-out;
}
.nn-stage-tracker:not(.is-alive) .nn-stage[data-status="pending"]:nth-child(1) .nn-stage-dot { animation-delay: 0s; }
.nn-stage-tracker:not(.is-alive) .nn-stage[data-status="pending"]:nth-child(2) .nn-stage-dot { animation-delay: 0.18s; }
.nn-stage-tracker:not(.is-alive) .nn-stage[data-status="pending"]:nth-child(3) .nn-stage-dot { animation-delay: 0.36s; }
.nn-stage-tracker:not(.is-alive) .nn-stage[data-status="pending"]:nth-child(4) .nn-stage-dot { animation-delay: 0.54s; }
.nn-stage-tracker:not(.is-alive) .nn-stage[data-status="pending"]:nth-child(5) .nn-stage-dot { animation-delay: 0.72s; }
.nn-stage-tracker:not(.is-alive) .nn-stage[data-status="pending"]:nth-child(6) .nn-stage-dot { animation-delay: 0.90s; }
.nn-stage-tracker:not(.is-alive) .nn-stage[data-status="pending"]:nth-child(7) .nn-stage-dot { animation-delay: 1.08s; }
@keyframes nn-stage-pending-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(148, 163, 184, 0); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18); }
}

/* Shimmer skeleton for the answer tab panes while synthesis is in
   progress. Gives a real "content is loading" feel instead of an empty
   section header. Toggled on by adding `.is-loading` to the body. */
.nn-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 12px;
}
.nn-skeleton-line,
.nn-skeleton-box,
.nn-skeleton-pill {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #E2E8F0;
}
.nn-skeleton-line::after,
.nn-skeleton-box::after,
.nn-skeleton-pill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: nn-skel-shimmer 1.4s infinite;
}
@keyframes nn-skel-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.nn-skeleton-line { height: 12px; }
.nn-skeleton-line.is-wide   { width: 100%; }
.nn-skeleton-line.is-medium { width: 80%; }
.nn-skeleton-line.is-narrow  { width: 55%; }
.nn-skeleton-box { height: 64px; border-radius: 10px; }
.nn-skeleton-pill { width: 90px; height: 22px; border-radius: 999px; }

body.is-search-mode .nn-doc-tab-pane.is-active .nn-doc-tab-content:not(.is-loaded) .nn-doc-skeleton,
body.is-search-mode .nn-doc-tab-pane.is-active .nn-doc-skeleton {
  display: flex;
}
.nn-doc-skeleton { display: none; }

/* Hide the legacy "Stage 1 / 2 / 3 / 4 / 5" progression list whenever
   the search-mode flag is on — the live panel is the new in-search
   indicator. Selector is anchored on body so it works regardless of
   which wrapper the live panel sits in. */
body.is-search-mode .nn-pipeline-steps,
body.is-search-mode .nn-pipeline-hidden-count {
  display: none !important;
}

/* Individual source card. */
.nn-pipeline-live-source {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
  transition: background var(--t-fast) var(--ease, ease),
              border-color var(--t-fast) var(--ease, ease),
              transform 200ms var(--ease, ease),
              opacity 240ms var(--ease, ease),
              box-shadow 200ms var(--ease, ease);
  opacity: 0;
  transform: translateY(4px);
}
.nn-pipeline-live-source.is-in {
  opacity: 1;
  transform: translateY(0);
}
.nn-pipeline-live-source:hover {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 6px 18px -10px rgba(37, 99, 235, 0.45);
  transform: translateY(-1px);
}
.nn-pipeline-live-source.is-irrelevant {
  opacity: 0.6;
  background: rgba(248, 250, 252, 0.7);
}
.nn-pipeline-live-source.is-irrelevant .nn-pipeline-live-source-title {
  text-decoration: line-through;
  text-decoration-color: rgba(15, 23, 42, 0.35);
}
.nn-pipeline-live-source.is-relevant {
  border-color: rgba(22, 163, 74, 0.35);
  background: linear-gradient(180deg, #ffffff, rgba(220, 252, 231, 0.55));
}

.nn-pipeline-live-source-avatar {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.nn-pipeline-live-source.is-irrelevant .nn-pipeline-live-source-avatar {
  filter: grayscale(0.6);
  opacity: 0.7;
}

.nn-pipeline-live-source-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nn-pipeline-live-source-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-3, #6b7280);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nn-pipeline-live-source-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nn-pipeline-live-source-num {
  color: var(--ink-3, #9ca3af);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.nn-pipeline-live-source-title {
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink-1, #111);
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nn-pipeline-live-source-snippet {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2, #475569);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nn-pipeline-live-source-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.nn-pipeline-live-source-relevance {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  margin-top: 7px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px dashed rgba(15, 23, 42, 0.18);
  position: relative;
}
.nn-pipeline-live-source.is-relevant .nn-pipeline-live-source-relevance {
  background: #16A34A;
  border-color: #16A34A;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}
.nn-pipeline-live-source.is-relevant .nn-pipeline-live-source-relevance::after {
  content: '';
  position: absolute;
  left: 6px; top: 3px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.nn-pipeline-live-source.is-irrelevant .nn-pipeline-live-source-relevance {
  background: transparent;
  border-color: rgba(15, 23, 42, 0.25);
}
.nn-pipeline-live-source.is-irrelevant .nn-pipeline-live-source-relevance::after {
  content: '';
  position: absolute;
  left: 5px; top: 9px;
  width: 10px; height: 1.5px;
  background: rgba(15, 23, 42, 0.5);
  transform: rotate(-45deg);
}

/* Skeleton source cards: shown only while the live panel is empty
   so the right column looks alive and structured instead of a blank
   void while the first source_discovered event is in flight. Each row
   mirrors the layout of a real card (avatar, name, title, snippet) but
   uses shimmer placeholders. The whole skeleton block fades out
   smoothly the moment the first real source lands. */
.nn-pipeline-live-sources-skeletons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 240ms var(--ease, ease),
              max-height 280ms var(--ease, ease),
              margin 240ms var(--ease, ease);
  overflow: hidden;
}
.nn-pipeline-live-sources.is-has-sources .nn-pipeline-live-sources-skeletons {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}
.nn-pipeline-live-source-skel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.05);
  /* Slight stagger so the shimmer rows feel like they're being filled in. */
  animation: nn-skel-stagger 1.6s ease-out infinite;
}
.nn-pipeline-live-source-skel:nth-child(2) { animation-delay: 0.18s; }
.nn-pipeline-live-source-skel:nth-child(3) { animation-delay: 0.36s; }
@keyframes nn-skel-stagger {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}
.nn-skel {
  display: block;
  background: linear-gradient(90deg,
    rgba(15, 23, 42, 0.05) 0%,
    rgba(15, 23, 42, 0.10) 50%,
    rgba(15, 23, 42, 0.05) 100%);
  background-size: 200% 100%;
  animation: nn-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.nn-skel-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.nn-skel-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.nn-skel-line {
  height: 10px;
  border-radius: 4px;
}
.nn-skel-line.is-wide   { width: 92%; }
.nn-skel-line.is-medium { width: 64%; }
.nn-skel-line.is-narrow { width: 32%; }
@keyframes nn-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ------------------------------------------------------------------------- */
/*  Summary / Evidence loading skeletons                                     */
/*  While the backend is still synthesizing the answer or extracting        */
/*  evidence, the section shows a pulsing header + skeleton lines so the    */
/*  user has visual feedback that work is in progress. The skeleton lives   */
/*  as a sibling of .nn-doc-section-body so the two can swap cleanly: the   */
/*  body stays `hidden` while the skeleton is visible, and revealSummary()  */
/*  / the evidence-setter hide the skeleton and unhide the body.            */
/* ------------------------------------------------------------------------- */
.nn-doc-loading-skel {
  margin: 4px 0 0;
  padding: 20px 22px 24px;
  border-radius: 18px;
  background:
    linear-gradient(180deg,
      rgba(96, 165, 250, 0.07) 0%,
      rgba(255, 255, 255, 0.94) 36px,
      rgba(255, 255, 255, 0.94) 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 24px 48px -24px rgba(15, 23, 42, 0.18),
    0 4px 12px -4px rgba(96, 165, 250, 0.10);
  position: relative;
  overflow: hidden;
  animation: nn-doc-loading-breath 4s ease-in-out infinite;
}
@keyframes nn-doc-loading-breath {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 24px 48px -24px rgba(15, 23, 42, 0.18),
      0 4px 12px -4px rgba(96, 165, 250, 0.10);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 28px 56px -20px rgba(15, 23, 42, 0.22),
      0 8px 20px -4px rgba(96, 165, 250, 0.18);
  }
}
/* Brand gradient top stripe — slightly taller than before, with a subtle
   glow on the right edge. */
.nn-doc-loading-skel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #60A5FA 0%, #7C3AED 50%, #EC4899 100%);
  border-radius: 18px 18px 0 0;
  opacity: 0.95;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.25);
}
/* Soft "scanning" gradient that sweeps across the skeleton while it
   pulses — gives the eye a sense of motion independent of the line
   shimmer, so the section feels alive. */
.nn-doc-loading-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 40%,
    rgba(96, 165, 250, 0.08) 50%,
    transparent 60%,
    transparent 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  animation: nn-doc-loading-scan 3.2s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes nn-doc-loading-scan {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/* Header — left: gradient icon + title + sublabel, right: pulse + step
   counter. The icon gives the section a visual identity beyond just a
   label. */
.nn-doc-loading-skel-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #0F172A;
  line-height: 1.3;
}
.nn-doc-loading-skel-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #60A5FA, #7C3AED);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow:
    0 4px 12px -2px rgba(96, 165, 250, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  position: relative;
}
.nn-doc-loading-skel-icon::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.4), rgba(124, 58, 237, 0.4));
  z-index: -1;
  opacity: 0.4;
  filter: blur(6px);
  animation: nn-doc-loading-pulse-glow 2.4s ease-in-out infinite;
}
@keyframes nn-doc-loading-pulse-glow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.08); }
}
.nn-doc-loading-skel-icon svg {
  width: 18px;
  height: 18px;
}
.nn-doc-loading-skel-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.nn-doc-loading-label {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.005em;
  line-height: 1.3;
  text-transform: none;
}
.nn-doc-loading-sublabel {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748B;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}
.nn-doc-loading-pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #60A5FA, #7C3AED);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
  animation: nn-doc-loading-pulse 1.4s ease-in-out infinite;
  flex: 0 0 auto;
  margin-left: auto;
}
@keyframes nn-doc-loading-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15); }
  50%      { opacity: 0.5; transform: scale(0.7); box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.08); }
}
.nn-doc-loading-step {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4F46E5;
  background: rgba(96, 165, 250, 0.10);
  border: 1px solid rgba(96, 165, 250, 0.18);
  padding: 4px 9px;
  border-radius: 999px;
  line-height: 1;
  flex: 0 0 auto;
}
.nn-doc-loading-skel-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 50px; /* indent under the icon for visual rhythm */
}
.nn-doc-loading-skel-body .nn-skel-line {
  height: 12px;
}
/* Override the default gray shimmer to a brand-tinted one — the lines
   should hint at the blue→purple palette instead of pure neutral gray. */
.nn-doc-loading-skel .nn-skel {
  background: linear-gradient(90deg,
    rgba(96, 165, 250, 0.08) 0%,
    rgba(124, 58, 237, 0.14) 50%,
    rgba(96, 165, 250, 0.08) 100%);
  background-size: 200% 100%;
  animation: nn-skel-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
  height: 12px;
}
.nn-doc-loading-skel-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 50px;
}
.nn-doc-loading-skel-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 18px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(241, 245, 249, 0.55) 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  position: relative;
}
.nn-doc-loading-skel-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #60A5FA, #7C3AED);
  border-radius: 0 2px 2px 0;
}
.nn-doc-loading-skel-card .nn-skel {
  background: linear-gradient(90deg,
    rgba(96, 165, 250, 0.10) 0%,
    rgba(124, 58, 237, 0.16) 50%,
    rgba(96, 165, 250, 0.10) 100%);
  background-size: 200% 100%;
  animation: nn-skel-shimmer 1.8s ease-in-out infinite;
  border-radius: 5px;
  height: 10px;
}

/* Hover preview popover for live source cards. The card itself stays
   compact; on hover/focus a small floating panel appears above the
   card with the full title, full snippet, groundnews pills, and a
   "Read full article" link. Pointer-driven so it doesn't fight with
   the relevance dot on the right edge of the card. */
.nn-pipeline-live-source {
  position: relative;
  z-index: 1;
}
.nn-pipeline-live-source:hover,
.nn-pipeline-live-source:focus-within {
  z-index: 30;
}
.nn-pipeline-live-source-preview {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 14px);
  z-index: 40;
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 4px 6px -2px rgba(15, 23, 42, 0.06),
    0 16px 32px -8px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(15, 23, 42, 0.04);
  padding: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(.2,.7,.2,1),
              transform 280ms cubic-bezier(.2,.7,.2,1);
  min-width: 340px;
  max-width: 440px;
  overflow: visible;
  font-family: Georgia, 'Times New Roman', 'Source Serif Pro', serif;
}
/* Editorial hairline rule — a single 1px black line at the top, like a
   print-magazine article opener. Replaces the AI-template gradient
   stripe that screams "designed by AI". */
.nn-pipeline-live-source-preview-rule {
  display: block;
  height: 1px;
  background: #0F172A;
  margin: 0 0 10px;
}
/* Small thin triangle pointer — uses a 1px black border instead of a
   soft shadow, keeps the editorial print aesthetic. */
.nn-pipeline-live-source-preview::after {
  content: '';
  position: absolute;
  left: 32px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  border-right: 1px solid #0F172A;
  border-bottom: 1px solid #0F172A;
  transform: rotate(45deg);
}
/* Meta row — type label on the left (small caps, with a thin colored
   vertical bar instead of a pill), domain link on the right (with
   external-link icon, no pill). Magazine style. */
.nn-pipeline-live-source-preview-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #64748B;
  font-weight: 600;
  line-height: 1;
}
.nn-pipeline-live-source-preview-type {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0F172A;
  padding-left: 8px;
  border-left: 2px solid #0F172A;
}
.nn-pipeline-live-source-preview-type-dot {
  display: none;  /* unused: the left border replaces a dot */
}
.nn-pipeline-live-source-preview-type-label {
  letter-spacing: 0.12em;
  font-weight: 700;
}
.nn-pipeline-live-source-preview-domain {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #475569;
  text-decoration: none;
  font-weight: 500;
  font-size: 10.5px;
  font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
  text-transform: lowercase;
  letter-spacing: 0;
}
.nn-pipeline-live-source-preview-domain svg {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  opacity: 0.55;
}
/* Title — large, editorial weight. Serif gives a long-form news feel
   instead of UI feel. 3-line clamp. */
.nn-pipeline-live-source-preview-title {
  font-family: Georgia, 'Times New Roman', 'Source Serif Pro', serif;
  font-size: 17px;
  line-height: 1.32;
  font-weight: 600;
  color: #0F172A;
  margin: 0 18px 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.012em;
}
/* Blockquote — the snippet as a pull-quote with a real quotation mark
   decoration. No lavender box, no left border accent bar. Just a big
   curly opening quote in brand color and tight typography. */
.nn-pipeline-live-source-preview-snippet {
  font-family: Georgia, 'Times New Roman', 'Source Serif Pro', serif;
  font-size: 13.5px;
  line-height: 1.55;
  font-style: italic;
  color: #334155;
  margin: 0 18px 14px;
  padding: 0;
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nn-pipeline-live-source-preview-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: normal;
  font-weight: 700;
  color: #7C3AED;
  font-size: 36px;
  line-height: 0;
  position: relative;
  top: 12px;
  margin-right: 3px;
  vertical-align: -8px;
}
/* Footer — italicized source citation (magazine style: "By the Associated
   Press · 1st of 1 source") with a refined text link CTA, not a pill. */
.nn-pipeline-live-source-preview-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  color: #64748B;
  line-height: 1.3;
}
.nn-pipeline-live-source-preview-source {
  font-weight: 400;
  color: #64748B;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-feature-settings: 'tnum';
}
.nn-pipeline-live-source-preview-source em {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  color: #0F172A;
  letter-spacing: -0.005em;
}
.nn-pipeline-live-source-preview-sep {
  color: #94A3B8;
}
.nn-pipeline-live-source-preview-ord {
  font-variant-numeric: tabular-nums;
  color: #94A3B8;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
/* CTA — underlined text link, not a pill. The arrow translates up-right
   on hover. No background, no border. */
.nn-pipeline-live-source-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  color: #0F172A;
  font-weight: 600;
  text-decoration: none;
  font-size: 11.5px;
  border: 0;
  border-bottom: 1px solid #0F172A;
  border-radius: 0;
  transition: color 180ms ease, border-color 180ms ease;
  line-height: 1.2;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
}
.nn-pipeline-live-source-preview-link:hover {
  color: #7C3AED;
  border-color: #7C3AED;
}
.nn-pipeline-live-source-preview-link.is-disabled {
  color: #94A3B8;
  border-bottom-color: transparent;
  cursor: not-allowed;
}
.nn-pipeline-live-source-preview-link-text {
  /* keep the text content as a baseline-aligned span */
}
.nn-pipeline-live-source-preview-link svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  transition: transform 180ms cubic-bezier(.2,.7,.2,1);
}
.nn-pipeline-live-source-preview-link:hover svg {
  transform: translate(2px, -2px);
}
.nn-pipeline-live-source:hover .nn-pipeline-live-source-preview,
.nn-pipeline-live-source:focus-within .nn-pipeline-live-source-preview {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Close (X) button on the Refine modal. The modal is `position: fixed`
   + `transform: translate(-50%, -50%)` for centering, which means
   absolute-positioned children of the modal get placed relative to the
   initial containing block (viewport), not the modal's transformed box.
   So we position the X with `position: fixed` and let JavaScript set
   its top/right to track the modal's bounding rect on open + resize. */
.nn-refine {
  scroll-margin-top: 60px;
}
.nn-refine-close {
  position: fixed;
  /* Default position; JS overrides these on open and on resize. */
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: none;  /* hidden by default; shown via .is-fixed-open */
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink-1, #111);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  transition: background var(--t-fast) var(--ease, ease),
              color var(--t-fast) var(--ease, ease),
              transform var(--t-fast) var(--ease, ease);
  z-index: 60;  /* above the modal (z-index: 40) AND above the compact bar (z-index: 50) */
}
/* When the modal is open, the compact bar (z-index: 50, height ~50px)
   covers the top of the viewport. The X at `top: 16px` would be hidden
   behind it. Push the X down to sit just below the compact bar by
   default; JS-tracked positioning in index.js can still override this
   for the modal's exact corner. */
body.nn-refine-modal-open .nn-refine-close {
  top: 60px;
}
.nn-refine-close:hover {
  background: #fff;
  color: #B91C1C;
  border-color: rgba(220, 38, 38, 0.30);
  transform: scale(1.06);
}
.nn-refine-close:active {
  transform: scale(0.96);
}
.nn-refine-close:focus-visible {
  outline: 2px solid var(--accent, #2563EB);
  outline-offset: 2px;
}
.nn-refine-close svg {
  display: block;
}
/* Only show the close X when the refine section is open. JS toggles
   the .is-fixed-open class on <body> when the modal opens so the X
   floats over the modal regardless of the modal's internal state. */
body.nn-refine-modal-open .nn-refine-close {
  display: inline-flex;
}

/* Backdrop: existing ::before dim is good, but make it clickable to
   close the modal. The existing CSS already shows the dim via
   body.is-search-mode.nn-refine-open::before; we just need the
   body class to be set when the modal opens. */
body.is-search-mode.nn-refine-open::before {
  cursor: pointer;  /* hint that clicking the backdrop dismisses */
}

.nn-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Bias pills: red (right-leaning), blue (left-leaning), gray (center). */
.nn-pill-bias--right,
.nn-pill-bias--lean-right,
.nn-pill-bias--far-right {
  background: #FEF2F2; color: #B91C1C; border-color: #FECACA;
}
.nn-pill-bias--left,
.nn-pill-bias--lean-left,
.nn-pill-bias--far-left {
  background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE;
}
.nn-pill-bias--center,
.nn-pill-bias {
  background: #F3F4F6; color: #374151; border-color: #E5E7EB;
}
/* Factuality pills: green / yellow / red palette. */
.nn-pill-factuality--very-high {
  background: #ECFDF5; color: #047857; border-color: #A7F3D0;
}
.nn-pill-factuality--high {
  background: #F0FDF4; color: #15803D; border-color: #BBF7D0;
}
.nn-pill-factuality--mixed {
  background: #FFFBEB; color: #B45309; border-color: #FDE68A;
}
.nn-pill-factuality--low,
.nn-pill-factuality--very-low {
  background: #FEF2F2; color: #B91C1C; border-color: #FECACA;
}
.nn-pill-factuality {
  background: #F3F4F6; color: #374151; border-color: #E5E7EB;
}


/* Mobile layout: allow complete hero title and preserve a full-width search action. */
@media(max-width:600px){
 .nn-hero{min-width:0;padding:16px 8px 20px}
 .nn-hero-glass{min-width:0;padding:26px 14px 22px;overflow:visible}
 .nn-hero h1{font-size:clamp(38px,11vw,56px);line-height:1.08;overflow:visible;overflow-wrap:normal;white-space:nowrap}
 .nn-search{min-width:0;padding:0 8px}
 .nn-input-wrap{min-width:0;gap:8px;padding:8px 8px 8px 12px}
 .nn-input-wrap input[type=text]{min-width:0;width:0;flex:1 1 auto;font-size:15px}
 .nn-input-wrap #submit{flex:0 0 auto;min-width:92px;justify-content:center;padding:0 12px}
}
@media(max-width:360px){.nn-hero h1{font-size:38px}.nn-input-wrap #submit{min-width:72px;padding:0 8px}}

/* Consolidation pass: restrained hover/arrival feedback, no ambient motion added. */
@keyframes nn-nav-rule-in { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
.nn-links a.active { position: relative; }
.nn-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); transform-origin: left center; animation: nn-nav-rule-in .38s cubic-bezier(.2,.75,.25,1) both; }
.nn-hero-glass { transition: border-color .24s ease, box-shadow .24s ease; }
@media(hover:hover) and (pointer:fine) {
 .nn-hero-glass:hover { border-color: rgba(37,99,235,.16); box-shadow: 0 2px 6px rgba(20,24,40,.04), 0 16px 42px rgba(20,24,40,.08); }
 .nn-questions-item:focus-visible { color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 7px; }
}
@media(prefers-reduced-motion:reduce) {
 .nn-links a.active::after { animation: none; }
 .nn-hero-glass { transition: none; }
}
/* The source count changes are data, not decoration; draw a single rule
   when a result section settles, leaving the text readable throughout. */
@keyframes nn-source-final-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.nn-pipeline-live-sources.is-finalized .nn-pipeline-live-sources-head::after {
 content: ''; position: absolute; bottom: -8px; left: 0; width: 56px; height: 2px;
 background: var(--accent); transform-origin: left; animation: nn-source-final-rule .42s ease-out both;
}
.nn-pipeline-live-sources-head { position: relative; }
@media(prefers-reduced-motion:reduce) { .nn-pipeline-live-sources.is-finalized .nn-pipeline-live-sources-head::after { animation: none; } }
/* Keep rotating copy inside the card at every text phase. */
.nn-rotator { max-width:100%; min-width:0; justify-content:center; flex-wrap:wrap; }
.nn-rotator-track { min-width:0; max-width:100%; }
.nn-rotator-stage { max-width:100%; min-width:0; }
.nn-rotator-stage > .nn-rotator-word { white-space:normal; overflow-wrap:anywhere; }
@media(max-width:600px) {
 .nn-rotator { display:flex; align-items:center; gap:5px; }
 .nn-rotator-prefix { flex:0 0 auto; }
 .nn-rotator-track { flex:1 1 130px; text-align:left; }
}
@media(max-width:600px) {
 .nn-rotator { display:grid; grid-template-columns:1fr; justify-items:center; }
 .nn-rotator-prefix, .nn-rotator-track { flex:none; width:100%; text-align:center; }
}

/* Temporary test design pass: restrained editorial shell, consistent brand. */
body {
  background: radial-gradient(ellipse 900px 460px at 50% -12%, rgba(37,99,235,.085), transparent 68%), #F7F9FC !important;
  background-attachment: fixed !important;
  animation: none !important;
}
.nn-nav { max-width: 1120px; margin: 0 auto 20px; padding: 14px 8px; border-bottom: 1px solid rgba(35,61,108,.09); }
.nn-brand { font-size: 16px; letter-spacing: -.025em; }
.nn-brand-mark { width: 27px; height: 27px; font-size: 16px; font-weight: 750; border-radius: 8px; box-shadow: 0 3px 8px rgba(37,99,235,.18); }
.nn-links { gap: 24px; }
.nn-links a { font-size: 13px; }
.nn-hero-glass { background: rgba(255,255,255,.94); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #E8EDF6; box-shadow: 0 20px 52px rgba(27,52,99,.06); }
.nn-hero h1 { letter-spacing: -.055em; }
.nn-input-wrap { border-color: #E5EAF4; box-shadow: 0 10px 30px rgba(34,65,116,.09); }
.nn-input-wrap:hover, .nn-input-wrap:focus-within { transform: none; }
.nn-input-wrap:focus-within { border-color: #8FB4FA; box-shadow: 0 0 0 4px rgba(37,99,235,.1), 0 10px 30px rgba(34,65,116,.09); }
.nn-questions-eyebrow { font-size: 12px; font-weight: 650; color: #64748B; }
.nn-questions-item { border-bottom-color: #EDF1F7; }
.nn-questions-text { font-size: 15.5px; }
.nn-questions-prefix { color: #6B8CCB; }
.nn-rotator-caret { animation-duration: 1.5s; }
body.is-search-mode .nn-compact-bar-inner { border-color: #E6ECF5; }
@media (max-width: 640px) {
 .nn-nav { padding: 10px 4px; gap: 10px; }
 .nn-links { gap: 18px; }
 .nn-hero-glass { box-shadow: 0 14px 34px rgba(27,52,99,.06); }
 .nn-questions-text { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
 .nn-brand-mark, .nn-hero-glass, .nn-input-wrap { transition: none !important; animation: none !important; }
}

/* DietChat-inspired research journey: a quiet progress path, never a cursor. */
.nn-evidence-route { max-width:680px; margin:0 auto 28px; padding:0 12px; text-align:left; }
.nn-route-label { display:block; margin-bottom:10px; color:#66758F; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.nn-route-steps { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; list-style:none; padding:0; margin:0; }
.nn-route-steps::before { content:""; position:absolute; left:14px; right:14px; top:11px; height:1px; background:#DAE4F1; }
.nn-route-steps li { position:relative; min-width:0; display:grid; gap:3px; color:#435474; }
.nn-route-num { display:grid; place-items:center; width:23px; height:23px; background:#EDF3FF; color:#3766BC; border:1px solid #CFDDF4; border-radius:50%; font-size:9px; font-weight:800; }
.nn-route-steps strong { margin-top:5px; color:#243B62; font-size:12px; font-weight:700; }
.nn-route-steps small { color:#72809A; font-size:11px; line-height:1.3; }
@media (prefers-reduced-motion:no-preference) {
 .nn-route-steps li { animation:nn-route-rise .5s ease-out both; }
 .nn-route-steps li:nth-child(2) { animation-delay:.09s; } .nn-route-steps li:nth-child(3) { animation-delay:.18s; } .nn-route-steps li:nth-child(4) { animation-delay:.27s; }
 .nn-route-steps::after { content:""; position:absolute; left:14px; top:11px; height:1px; width:calc(100% - 28px); background:#4D7DD2; transform:scaleX(0); transform-origin:left; animation:nn-route-line 1.1s .12s ease-out forwards; pointer-events:none; }
}
@keyframes nn-route-rise { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes nn-route-line { to { transform:scaleX(1); } }
@media(max-width:600px) { .nn-evidence-route { margin-bottom:20px; } .nn-route-steps { gap:5px; } .nn-route-steps small { font-size:10px; } .nn-route-steps strong { font-size:11px; } }

/* Live evidence/summary work cards: progress as a clearly active research surface. */
.nn-doc-loading-skel:not([hidden]) { background:linear-gradient(130deg,#F9FBFF 0%,#FFFFFF 53%,#F5F8FE 100%); border:1px solid #DCE6F5; box-shadow:0 16px 32px -18px rgba(31,65,132,.3),0 1px 3px rgba(31,65,132,.06); }
.nn-doc-loading-skel:not([hidden])::before { height:3px; background:linear-gradient(90deg,#3B82F6,#7468D9,#3B82F6); background-size:200% 100%; }
.nn-doc-loading-skel:not([hidden]) .nn-doc-loading-skel-icon { background:#EBF2FF; border:1px solid #CEDDF7; color:#3468C4; box-shadow:none; }
.nn-doc-loading-skel:not([hidden]) .nn-doc-loading-label { color:#1C3158; font-size:14px; }
.nn-doc-loading-skel:not([hidden]) .nn-doc-loading-step { background:#EAF1FF; color:#2B5EAE; border-color:#D6E3F7; }
.nn-doc-loading-skel:not([hidden]) .nn-skel { background:linear-gradient(95deg,#E9EFF9 18%,#F8FAFE 49%,#E9EFF9 80%); background-size:220% 100%; }
.nn-doc-loading-skel:not([hidden]) .nn-doc-loading-skel-card { background:#F9FBFE; border-color:#E4EBF6; }
@media(prefers-reduced-motion:no-preference) {
 .nn-doc-loading-skel:not([hidden]) { animation:nn-work-arrive .6s cubic-bezier(.16,.9,.25,1) both, nn-work-breathe 3.5s .6s ease-in-out infinite; }
 .nn-doc-loading-skel:not([hidden])::before { animation:nn-work-travel 2.7s linear infinite; }
 .nn-doc-loading-skel:not([hidden]) .nn-skel { animation:nn-work-travel 1.8s linear infinite; }
 .nn-doc-loading-skel:not([hidden]) .nn-doc-loading-skel-card:nth-child(2) { animation:nn-work-card .4s .14s ease-out both; }
 .nn-doc-loading-skel:not([hidden]) .nn-doc-loading-skel-header { animation:nn-work-card .36s ease-out both; }
}
@keyframes nn-work-arrive { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes nn-work-breathe { 50% { box-shadow:0 21px 38px -18px rgba(31,65,132,.35),0 0 0 3px rgba(73,120,215,.035); } }
@keyframes nn-work-travel { from { background-position:200% 0; } to { background-position:-100% 0; } }
@keyframes nn-work-card { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .nn-doc-loading-skel, .nn-doc-loading-skel::before, .nn-doc-loading-skel::after, .nn-doc-loading-skel *, .nn-doc-loading-skel *::before, .nn-doc-loading-skel *::after { animation:none!important; transition:none!important; } }

/* Sources as a readable bibliography, not tier-colored dashboard tiles. */
.nn-doc-source-group { border:0; border-bottom:1px solid #E5EAF2; border-radius:0; box-shadow:none; background:transparent; animation:none; transform:none; }
.nn-doc-source-group::before { display:none; }
.nn-doc-source-group:hover { border-color:#D3DEEC; box-shadow:none; transform:none; }
.nn-doc-source-group-head { display:block; padding:13px 12px; background:transparent; }
.nn-doc-source-group-head:hover { background:#F4F7FC; }
.nn-doc-source-group-name { color:#20334F; font-size:13px; font-weight:700; }
.nn-doc-source-group-caret { width:16px; height:16px; background:transparent; }
.nn-doc-source-tier, .nn-doc-source-tier[class*="--"] { display:inline; border:0; border-radius:0; background:none; box-shadow:none; color:#6B7890; padding:0; font-size:10px; font-weight:500; }
.nn-doc-source-tier-dot { display:none; }
.nn-doc-source-group-refs { gap:3px; }
.nn-doc-ref-chip { background:none; border:0; box-shadow:none; border-radius:0; padding:0 2px; color:#3268BD; font-size:10px; }
.nn-doc-ref-chip::before { content:"["; }.nn-doc-ref-chip::after { content:"]"; }
.nn-doc-source-group-count { color:#64748B; font-size:10px; }
@media(prefers-reduced-motion:reduce) { .nn-doc-source-group { animation:none!important; transition:none!important; } }
/* The filter panel is a dialog, above the compact search bar. */
body.is-search-mode .nn-refine[aria-expanded="true"], body.is-search-mode .nn-refine.is-open { z-index:70; }
body.is-search-mode.nn-refine-open::before { z-index:65; cursor:default; }
body.nn-refine-modal-open .nn-refine-close { z-index:75; }
@media(prefers-reduced-motion:reduce) { body.is-search-mode .nn-refine[aria-expanded="true"], body.is-search-mode.nn-refine-open::before { animation:none!important; } }
@media(max-width:640px) {
 body.is-search-mode .nn-compact-nav { display:none; }
 .nn-stage-tracker { min-width:0; width:100%; }
 .nn-stage { min-width:0; font-size:8px; letter-spacing:0; overflow-wrap:anywhere; }
 .nn-refine-body { margin-top:0; }
 body.is-search-mode .nn-refine[aria-expanded="true"] { width:min(370px,calc(100vw - 20px)); max-height:calc(100dvh - 24px); }
}

/* Sources expand like a publication index, with small feedback on use. */
.nn-doc-source-group { transition:background-color .2s ease, border-color .2s ease; }
.nn-doc-source-group:hover, .nn-doc-source-group:focus-within { background:#F7FAFE; }
.nn-doc-source-group.is-expanded { background:#FBFCFE; border-bottom-color:#CFDCEC; }
.nn-doc-source-group.is-expanded .nn-doc-source-group-body { background:transparent; border-top:1px solid #E6ECF4; padding:2px 11px 10px 11px; }
.nn-doc-source-group-caret { transition:transform .24s cubic-bezier(.2,.85,.25,1), color .2s ease; }
.nn-doc-source-group.is-expanded .nn-doc-source-group-caret { transform:rotate(180deg); background:none; color:#3268BD; }
.nn-doc-source-group-head:focus-visible, .nn-doc-source:focus-visible { outline:2px solid #3268BD; outline-offset:-2px; }
.nn-doc-source { padding:10px 8px; border-radius:5px; transition:background-color .18s ease, padding-left .18s ease; }
.nn-doc-source:hover { background:#EDF4FD; padding-left:13px; }
.nn-doc-source-ref { background:transparent!important; box-shadow:none!important; color:#3768AF!important; font-size:11px!important; border-radius:0!important; }
.nn-doc-source-title { font-size:12px; font-weight:550; color:#263B5A; }
@media(prefers-reduced-motion:reduce) { .nn-doc-source-group, .nn-doc-source-group *, .nn-doc-source-group *::before, .nn-doc-source-group *::after { animation:none!important; transition:none!important; transform:none!important; } }

/* Discovery is not evidence. Hide rejected articles behind a clear disclosure. */
.nn-pipeline-live-sources .nn-pipeline-live-source.is-irrelevant { display:none!important; }
.nn-pipeline-live-sources.show-rejected .nn-pipeline-live-source.is-irrelevant { display:flex!important; opacity:.6; }
.nn-rejected-toggle { margin:10px 0; padding:5px 0; background:none; border:0; color:#536887; font:600 11px inherit; cursor:pointer; text-align:left; }
.nn-rejected-toggle:hover { color:#245BB4; text-decoration:underline; text-underline-offset:3px; }
.nn-rejected-toggle:focus-visible { outline:2px solid #245BB4; outline-offset:2px; }

/* Dropdown portal room: allow menus to escape the expanding filter body. */
body.is-search-mode .nn-refine[aria-expanded="true"] .nn-refine-body { overflow:visible; max-height:none; }
.nn-search-cancel { border:1px solid #B8C9E2; border-radius:6px; padding:6px 9px; background:#F8FAFD; color:#244875; font:600 11px/1.2 inherit; cursor:pointer; white-space:nowrap; }
.nn-search-cancel:hover { background:#E9F1FC; border-color:#7EA3D7; }
.nn-search-cancel:focus-visible { outline:2px solid #2563EB; outline-offset:2px; }
.nn-search-cancel[hidden] { display:none; }
/* Source index: quiet hierarchy, legible bibliographic entries. */
.nn-doc-source-group-head { padding:15px 14px; }
.nn-doc-source-group-name { letter-spacing:-.015em; font-size:13px; }
.nn-doc-source-group-meta { gap:7px; margin-top:3px; }
.nn-doc-source-group-refs { width:auto; margin:0; gap:2px; }
.nn-doc-ref-chip { color:#285DA5; font-weight:650; font-size:10px; }
.nn-doc-source-group-count { color:#61718B; font-size:10px; }
.nn-doc-source-group.is-expanded { border-left:2px solid #3268BD; }
.nn-doc-source-group-body { background:#FAFCFF; }
.nn-doc-source-title { line-height:1.42; }
.nn-doc-source-group-head:hover, .nn-doc-source-group-head:focus-visible { background:#F2F7FF; }
/* Progress cards arrive independently and keep a slow, subtle motion while work is active. */
body.is-search-mode-pipeline .nn-doc-loading-skel:not([hidden]) { animation:nn-work-arrive .75s cubic-bezier(.16,.9,.25,1) both, nn-work-breathe 4.2s .75s ease-in-out infinite; }
body.is-search-mode-pipeline .nn-doc-loading-skel:nth-of-type(2) { animation-delay:.17s,.92s; }
body.is-search-mode-pipeline .nn-doc-loading-skel:nth-of-type(3) { animation-delay:.31s,1.06s; }
@media(prefers-reduced-motion:reduce) { body.is-search-mode-pipeline .nn-doc-loading-skel:not([hidden]) { animation:none!important; } }
.nn-terminal-back { display:block; margin:22px auto 0; padding:10px 17px; color:#2459A8; background:#F2F7FF; border:1px solid #BBD1F3; border-radius:8px; font:600 12px/1.2 inherit; cursor:pointer; }
.nn-terminal-back:hover { background:#E6F0FF; }
.nn-terminal-back:focus-visible { outline:2px solid #2563EB; outline-offset:2px; }
.nn-doc-source-analysis { font-size:10px; font-weight:700; color:#3268BD; margin-left:auto; }

/* Prevent long citation hover text from extending the mobile document. */
@media(max-width:640px) { .nn-doc-cite::after { max-width:min(250px,calc(100vw - 44px)); white-space:normal; overflow-wrap:anywhere; left:auto; right:-12px; transform:translateY(4px); } .nn-doc-cite:hover::after, .nn-doc-cite.is-hover::after { transform:translateY(0); } }
@media(max-width:640px) { .nn-doc-cite::after { display:none; } }

/* Source reading depth: a backend-reported access level, not claim support. */
.nn-doc-source-depth { display:inline-flex; align-items:center; padding:2px 6px; border:1px solid var(--line, #d6ded6); border-radius:4px; color:var(--ink-3, #52635b); font-size:10px; line-height:1.3; white-space:nowrap; }

.nn-doc-source-foot { flex-wrap:wrap; }
.nn-doc-source-date { flex:0 0 auto; white-space:nowrap; }
.nn-doc-source-depth { flex:0 0 auto; }

/* Keep factual pipeline counts readable on a narrow search panel. */
.nn-pipeline-live-sources-head { flex-wrap:wrap; }
.nn-pipeline-live-sources-count { flex:0 1 auto; line-height:1.35; text-align:right; }
@media(max-width:600px) { .nn-pipeline-live-sources-head { align-items:flex-start; gap:5px; } .nn-pipeline-live-sources-count { width:100%; text-align:left; font-size:11px; } }

.nn-doc-cite:focus-visible, .nn-doc-source:focus-visible, .nn-doc-source-group-head:focus-visible { outline:2px solid #2459b8; outline-offset:3px; }
@media(max-width:620px) { .nn-doc-source { min-height:44px; } .nn-doc-source-group-head { min-height:44px; } .nn-doc-cite { min-width:24px; min-height:28px; display:inline-flex; align-items:center; justify-content:center; } }
/* Empty-state filter actions remain legible when the answer column narrows. */
.nn-doc-empty-action { display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:3px; min-height:58px; max-width:100%; padding:10px 14px; text-align:left; }
.nn-doc-empty-action-label { display:block; line-height:1.3; }
.nn-doc-empty-action-sub { display:block; font-size:12px; color:var(--ink-muted,#64748b); line-height:1.35; }
@media(max-width:600px) {
  .nn-doc-empty-foot { gap:10px; }
  .nn-doc-empty-action { flex:1 1 100%; width:100%; }
}
.nn-doc-source-pool { display:inline-flex; align-items:center; color:#52657E; font-size:10px; font-weight:600; white-space:nowrap; }
@media(max-width:620px) { .nn-doc-source-foot { flex-wrap:wrap; } }

/* Catalog entry: secondary to the answer's actual article citations. */
.nn-source-catalog-link { align-self:flex-start; font-size:11px; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.nn-source-catalog-link:hover,.nn-source-catalog-link:focus-visible { color:var(--accent); }

/* Evidence-led publication chronology, never an inferred event timeline. */
.nn-chronology-caveat,.nn-chronology-languages { color:var(--ink-2); font-size:13px; line-height:1.55; max-width:72ch; }
.nn-chronology-caveat { border-left:2px solid #b7822f; padding-left:12px; }
.nn-chronology-languages { font-variant-numeric:tabular-nums; }
.nn-chronology-list { list-style:none; margin:18px 0; padding:0; display:grid; gap:0; }
.nn-chronology-list li { display:grid; grid-template-columns:110px minmax(0,1fr); gap:18px; padding:12px 0; border-top:1px solid var(--border); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.nn-chronology-list time { color:var(--ink-2); font-variant-numeric:tabular-nums; }
@media(max-width:600px){.nn-chronology-list li { grid-template-columns:1fr; gap:2px; }}

/* NewsNerd editorial type: serif for the research question, sans for UI. */
.nn-doc-question { font-family: Georgia,'Times New Roman',serif; font-weight:600; font-size:clamp(24px,2.7vw,36px); line-height:1.18; max-width:28ch; overflow-wrap:anywhere; }
.nn-doc-stats,.nn-doc-sources,.nn-doc-toc,.nn-refine { font-variant-numeric:tabular-nums; }
.nn-doc-summary-body p { max-width:72ch; }
.nn-strategy-modal .nn-modal-title { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',system-ui,sans-serif; }

.nn-doc-trust-pill--unknown { background:#f1f5f9; color:#475569; border-color:#cbd5e1; }
.nn-doc-source-group[data-tier="unknown"] { --group-rail:linear-gradient(180deg,#cbd5e1,#64748b); }

/* Keep expanded evidence-accounting text legible at narrow widths. */
@media (max-width:620px) {
  .nn-doc-stats-grid { grid-template-columns:minmax(0,1fr); gap:2px; padding:12px 14px; }
  .nn-doc-stats-grid dt { margin-top:9px; }
  .nn-doc-stats-grid dt:first-child { margin-top:0; }
  .nn-doc-stats-grid dd { min-width:0; overflow-wrap:anywhere; line-height:1.45; }
}

.nn-doc-single-publisher { max-width:68ch; margin:10px 0 8px; padding:9px 12px; border-left:2px solid #b45309; background:#fffbeb; color:#6b4f16; font-size:12px; line-height:1.5; }

/* Citations are navigable on touch and keyboard, not tiny superscript targets. */
@media(max-width:620px) { .nn-doc-cite { min-width:44px; min-height:44px; height:auto; padding:0 7px; vertical-align:middle; } }

/* Browser-local saved answers: open and delete are separate, full-size targets. */
#recent-questions {flex-direction:column;align-items:stretch;max-width:680px;padding:0 16px}
.nn-history-note {font-size:12px;color:var(--ink-2,#64748b);margin:0;text-align:center}
.nn-history-row {display:flex;gap:8px;align-items:stretch;width:100%}
.nn-history-row .recent-question-chip {flex:1;min-width:0;min-height:44px;text-align:left;overflow-wrap:anywhere;border-radius:8px}
.nn-history-delete,.nn-history-clear {min-height:44px;padding:8px 12px;background:transparent;border:1px solid var(--border,#cbd5e1);border-radius:8px;color:var(--ink,#172033);cursor:pointer}
.nn-history-delete:focus-visible,.nn-history-clear:focus-visible,.recent-question-chip:focus-visible {outline:2px solid #2459b8;outline-offset:2px}
.nn-history-clear {align-self:center;font-size:12px}
.nn-history-change {margin:-4px 0 8px;font-size:12px;color:#7c4b0e;line-height:1.5}

.nn-history-confirm {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;border:1px solid #e6b461;border-radius:8px;background:#fff9eb;font-size:12px}
.nn-history-confirm button {min-height:44px;padding:8px 12px;border:1px solid #a66b27;border-radius:8px;background:#fff;color:#624019;cursor:pointer}
.nn-history-confirm button:focus-visible {outline:2px solid #2459b8;outline-offset:2px}
.nn-doc-cross-publisher-caveat {max-width:72ch;padding:10px 12px;border-left:2px solid #b7822f;background:#fff9eb;color:#624019;font-size:12px;line-height:1.5}

/* Query workbench: quiet editorial states, not decorative achievement cards.
   No timed completion bars; labels are driven only by actual pipeline state. */
body.is-search-mode-pipeline .nn-pipeline-live-sources { background:#fff; border:1px solid #dce4ee; border-radius:12px; box-shadow:0 7px 24px -18px rgba(29,48,78,.28); padding:18px; }
body.is-search-mode-pipeline .nn-pipeline-live-sources.is-finalized { background:#fff; border-color:#dce4ee; }
.nn-pipeline-live-sources-eyebrow { background:#eef3f9; color:#2a466d; border-radius:5px; letter-spacing:.075em; font-size:10px; }
.nn-pipeline-live-sources.is-finalized .nn-pipeline-live-sources-eyebrow { background:#edf5f1; color:#255d4d; }
.nn-pipeline-live-sources-count { color:#52647c; font-size:11px; }
.nn-stage-tracker { gap:5px; margin:18px 0 12px; }
.nn-stage { align-items:flex-start; text-align:left; padding:15px 4px 0; color:#77869a; font-size:10px; }
.nn-stage + .nn-stage::before { display:none; }
.nn-stage::before { content:""; position:absolute; left:4px; right:4px; top:0; height:3px; border-radius:3px; background:#e4eaf1; }
.nn-stage[data-status="done"]::before { background:#769b90; }
.nn-stage[data-status="active"]::before { background:#315f9c; }
.nn-stage-dot { display:none; }
.nn-stage[data-status="done"] { color:#477061; }
.nn-stage[data-status="active"] { color:#214d88; }
.nn-stage-tracker-current, .nn-stage-tracker-current.is-active, .nn-stage-tracker-current.is-done { background:#f6f8fb; border:1px solid #e3e9f1; border-radius:6px; color:#344d6d; padding:10px 12px; box-shadow:none; }
.nn-stage-tracker-current-pulse { width:6px; height:6px; background:#426ca6!important; animation:none!important; box-shadow:none!important; }
.nn-pipeline-live-source { border:0; border-top:1px solid #e6ebf1; border-radius:0; box-shadow:none; padding:14px 6px; gap:12px; background:#fff; }
.nn-pipeline-live-source:hover { background:#f8fafc; border-color:#dce5f0; box-shadow:none; transform:none; }
.nn-pipeline-live-source.is-relevant { background:#fff; border-color:#e6ebf1; }
.nn-pipeline-live-source.is-relevant:hover { background:#f8fafc; }
.nn-pipeline-live-source-avatar { width:32px; height:32px; border-radius:6px; background:#eaf0f6!important; color:#375773!important; box-shadow:none; text-shadow:none; font-size:12px; }
.nn-pipeline-live-source-name { font-size:10px; letter-spacing:.08em; color:#61748d; }
.nn-pipeline-live-source-title { font-weight:600; color:#1c2e46; font-size:13px; }
.nn-pipeline-live-source-snippet { color:#617187; font-size:11px; }
.nn-pipeline-live-source-relevance { width:17px; height:17px; margin-top:9px; border:1px solid #cbd6e2; background:transparent; }
.nn-pipeline-live-source.is-relevant .nn-pipeline-live-source-relevance { background:#577f70; border-color:#577f70; box-shadow:none; }
.nn-pipeline-live-source.is-relevant .nn-pipeline-live-source-relevance::after { left:4px; top:2px; }
.nn-doc-loading-skel:not([hidden]) { padding:20px; background:#fff; border:1px solid #dfe6ef; border-radius:10px; box-shadow:0 5px 18px -16px rgba(25,47,76,.25); }
.nn-doc-loading-skel:not([hidden])::before, .nn-doc-loading-skel:not([hidden])::after { display:none; }
.nn-doc-loading-skel:not([hidden]) .nn-doc-loading-skel-icon { width:32px; height:32px; border-radius:6px; color:#3e607f; background:#edf2f7; border:0; }
.nn-doc-loading-skel-icon::after { display:none; }
.nn-doc-loading-skel:not([hidden]) .nn-doc-loading-label { color:#1e344f; font-size:14px; }
.nn-doc-loading-skel:not([hidden]) .nn-doc-loading-sublabel { color:#66778b; }
.nn-doc-loading-pulse { width:6px; height:6px; background:#416ca7; box-shadow:none; animation:none; }
.nn-doc-loading-skel:not([hidden]) .nn-doc-loading-step { border:0; background:#eef2f6; color:#51657c; border-radius:4px; font-size:10px; }
.nn-doc-loading-skel-body { padding-left:46px; gap:9px; }
.nn-doc-loading-skel .nn-skel, .nn-doc-loading-skel-card .nn-skel { height:9px; background:#e9eef4!important; animation:none!important; border-radius:3px; }
.nn-doc-loading-skel-cards { padding-left:46px; gap:0; }
.nn-doc-loading-skel-card, .nn-doc-loading-skel:not([hidden]) .nn-doc-loading-skel-card { border:0; border-top:1px solid #e9edf2; border-radius:0; background:transparent; box-shadow:none; padding:12px 0; }
.nn-doc-loading-skel-card::before { display:none; }
body.is-search-mode-pipeline .nn-doc-loading-skel:not([hidden]) { animation:none; }
.nn-doc-sources { background:#fff; border:1px solid #dfe6ef; border-radius:10px; box-shadow:0 8px 24px -18px rgba(25,47,76,.24); }
.nn-doc-sources-head { background:#fff; -webkit-mask-image:none; mask-image:none; border-bottom:1px solid #e8edf2; padding:17px 18px 13px; }
.nn-doc-sources-eyebrow { color:#435b76; }
.nn-doc-sources-pulse { width:6px; height:6px; background:#547b9b; box-shadow:none; }
.nn-doc-sources-pulse::before,.nn-doc-sources-pulse::after { display:none; }
.nn-doc-sources-sub-dot { background:#527699; box-shadow:none; }
.nn-doc-sources-progressbar { display:none; }
.nn-sources-progress { padding:8px 14px 18px; }
.nn-sources-progress::before { display:none; }
.nn-source-progress-item { margin:0; padding:9px 8px; border-bottom:1px solid #edf0f4; border-radius:3px; font-size:12px; }
.nn-source-progress-item.is-eligible .nn-source-progress-glyph { width:7px; height:7px; border:0; background:#8198af; box-shadow:none; }
.nn-source-progress-item.is-eligible .nn-source-progress-glyph::after { display:none; }
.nn-source-progress-item.is-entering::after { display:none; }
.nn-source-progress-item.is-entering .nn-source-progress-glyph { animation:none; }
.nn-source-progress-item.is-entering { animation:nn-quiet-row .25s ease-out forwards; transform:none; }
@keyframes nn-quiet-row { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
@media(max-width:620px) { .nn-stage-label { white-space:normal; overflow-wrap:anywhere; line-height:1.2; } .nn-stage { font-size:9px; } .nn-doc-loading-skel-body,.nn-doc-loading-skel-cards { padding-left:0; } .nn-doc-loading-skel-header { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .nn-source-progress-item.is-entering, .nn-pipeline-live-source, .nn-stage, .nn-doc-sources, .nn-doc-loading-skel { animation:none!important; transition:none!important; transform:none!important; } }

/* Saved answers are an optional disclosure, never a wall above the answer. */
body.is-search-mode .nn-evidence-route, body.is-search-mode-pipeline .nn-evidence-route { display:none!important; }
#recent-questions:not(.hidden) { max-width:1120px; width:calc(100% - 32px); margin:10px auto 0; padding:0; display:block; }
.nn-history-disclosure { border:1px solid #dfe6ee; background:#fff; border-radius:8px; color:#334c69; }
.nn-history-disclosure > summary { cursor:pointer; list-style:none; display:flex; align-items:center; min-height:42px; padding:9px 14px; font-size:12px; font-weight:650; }
.nn-history-disclosure > summary::-webkit-details-marker { display:none; }
.nn-history-disclosure > summary::after { content:"+"; margin-left:auto; color:#64809b; font-size:16px; line-height:1; }
.nn-history-disclosure[open] > summary::after { content:"−"; }
.nn-history-disclosure > summary:focus-visible { outline:2px solid #2459b8; outline-offset:2px; }
.nn-history-content { border-top:1px solid #e9edf3; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.nn-history-note { text-align:left; font-size:11px; color:#657589; }
.nn-history-row .recent-question-chip { background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; box-shadow:none; font-size:12px; }
.nn-history-row .recent-question-chip:hover { background:#f1f6fb; transform:none; }
.nn-history-delete, .nn-history-clear { border-radius:6px; font-size:11px; }
.nn-history-clear { align-self:flex-start; border:0; padding-left:0; color:#60768d; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:620px) { #recent-questions:not(.hidden) { width:calc(100% - 20px); } .nn-history-row { flex-wrap:nowrap; } }
/* Seven stages need readable labels on a phone; scroll within the workbench. */
@media(max-width:620px) {
  .nn-stage-tracker { display:flex; gap:6px; overflow-x:auto; padding-bottom:7px; scrollbar-width:thin; }
  .nn-stage { flex:0 0 72px; font-size:10px; }
  .nn-stage-label { white-space:nowrap; overflow:visible; overflow-wrap:normal; }
}
@media(hover:none) { .nn-pipeline-live-source:hover .nn-pipeline-live-source-preview { display:none!important; } }
@media(max-width:620px) { .nn-pipeline-live-source-preview { display:none!important; } }
/* Cited sources: compact article index, not tier-coloured scorecards. */
.nn-doc-sources-list { gap:0; padding:0 16px 18px; -webkit-mask-image:none; mask-image:none; }
.nn-doc-source-group { border-bottom:1px solid #e7ecf2; border-left:0!important; background:#fff!important; }
.nn-doc-source-group.is-expanded { border-bottom-color:#d7e1ec; }
.nn-doc-source-group-head { padding:14px 2px; border:0; background:transparent!important; min-height:52px; }
.nn-doc-source-group-head:hover { background:#f8fafc!important; }
.nn-doc-source-group-name { font-size:13px; font-weight:680; color:#243b55; }
.nn-doc-source-group-meta { color:#6b7b90; }
.nn-doc-source-tier,.nn-doc-source-tier[class*="--"] { color:#66778a; }
.nn-doc-source-group-caret,.nn-doc-source-group.is-expanded .nn-doc-source-group-caret { color:#58718c; background:none; }
.nn-doc-source-avatar { display:none; }
.nn-doc-source-group.is-expanded .nn-doc-source-group-body { padding:0 2px 8px; background:#fff; border-top:1px solid #e9eef3; }
.nn-doc-source { padding:12px 2px; min-height:58px; border-bottom:1px solid #edf1f5; border-radius:0; }
.nn-doc-source:last-child { border-bottom:0; }
.nn-doc-source:hover { padding-left:2px; background:#f7fafc; }
.nn-doc-source-title { font-size:12px; font-weight:600; color:#253b55; line-height:1.45; }
.nn-doc-source-ref { color:#38618e!important; min-width:18px; }
.nn-doc-source-foot { flex-wrap:wrap; gap:5px 10px; color:#6f8093; }
.nn-doc-source-depth { border:0; border-radius:3px; background:#f1f4f7; color:#677990; }
.nn-doc-source-analysis { color:#2d5d9a; font-weight:650; }
.nn-doc-source-group-head:focus-visible,.nn-doc-source:focus-visible { outline:2px solid #315f9c; outline-offset:-2px; }

/* Audit counts stay available on demand, with numbers and meaning separated. */
.nn-doc-stats-advanced { margin:12px 0 18px; }
.nn-doc-stats-advanced summary { min-height:38px; color:#426181; font-size:11px; font-weight:650; letter-spacing:.02em; }
.nn-doc-stats-advanced summary:focus-visible { outline:2px solid #315f9c; outline-offset:2px; }
.nn-doc-stats-grid { grid-template-columns:minmax(0,1fr) auto; gap:0 18px; border:1px solid #e5eaf0; border-radius:8px; padding:4px 14px; background:#fff; font-size:11px; }
.nn-doc-stats-grid dt,.nn-doc-stats-grid dd { border-bottom:1px solid #edf1f5; padding:10px 0; margin:0; line-height:1.4; }
.nn-doc-stats-grid dt { color:#596d83; }
.nn-doc-stats-grid dd { color:#233d59; font-weight:650; text-align:right; font-variant-numeric:tabular-nums; }
.nn-doc-stats-grid dt:last-of-type,.nn-doc-stats-grid dd:last-of-type { border-bottom:0; }
@media(max-width:620px) { .nn-doc-stats-grid { grid-template-columns:minmax(0,1fr) auto; gap:0 8px; } .nn-doc-stats-grid dt,.nn-doc-stats-grid dd { padding:9px 0; margin:0; font-size:10.5px; } .nn-doc-stats-grid dt { min-width:0; overflow-wrap:anywhere; } .nn-doc-stats-grid dd { max-width:100px; overflow-wrap:anywhere; } }
/* Saved library belongs to the toolbar, not between the question and answer. */
.nn-compact-bar-inner { position:relative; }
.nn-library-slot { position:relative; margin-left:auto; flex:0 0 auto; }
.nn-library-slot #recent-questions:not(.hidden) { width:auto; max-width:none; margin:0; padding:0; }
.nn-library-slot .nn-history-disclosure { position:relative; border:0; background:transparent; }
.nn-library-slot .nn-history-disclosure > summary { border:1px solid #dce5ee; background:#fff; min-height:36px; padding:6px 10px; gap:6px; border-radius:6px; color:#31516f; }
.nn-library-slot .nn-history-disclosure > summary svg { width:16px; height:16px; flex:none; }
.nn-library-count { min-width:18px; height:18px; display:grid; place-items:center; border-radius:3px; background:#e9eff5; color:#355575; font-size:10px; }
.nn-library-slot .nn-history-disclosure > summary::after { display:none; }
.nn-library-slot .nn-history-content { position:absolute; top:calc(100% + 8px); right:0; width:min(360px,calc(100vw - 32px)); padding:16px; border:1px solid #dce5ee; border-radius:8px; background:#fff; box-shadow:0 14px 35px rgba(26,43,65,.16); z-index:90; }
.nn-library-slot .nn-history-note { line-height:1.45; margin:0 0 8px; }
.nn-library-slot .nn-history-row { border-top:1px solid #ebeff3; padding-top:8px; }
.nn-library-slot .nn-history-row .recent-question-chip { border:0; background:transparent; padding:8px; font-size:12px; font-weight:600; }
.nn-library-slot .nn-history-row .recent-question-chip:hover { background:#f4f7fa; }
.nn-library-slot .nn-history-delete { border:0; color:#7d4f4f; font-size:11px; }
.nn-library-slot .nn-history-clear { margin-top:8px; }
@media(max-width:620px) {
 .nn-library-slot { margin-left:auto; }
 .nn-library-slot .nn-history-disclosure > summary { min-width:40px; justify-content:center; }
 .nn-library-slot .nn-history-disclosure > summary span:not(.nn-library-count) { display:none; }
 .nn-library-slot .nn-history-content { right:-2px; }
}
/* A reading surface with a clear masthead and the cited index as the quiet second column. */
.nn-doc-article { border:1px solid #e4eaf1; box-shadow:0 10px 30px -25px rgba(32,52,78,.3); border-radius:8px; padding:32px; }
.nn-doc-question { font-family:Georgia,serif; font-size:clamp(30px,3.2vw,42px); line-height:1.12; font-weight:600; letter-spacing:-.035em; color:#203750; }
.nn-doc-header { gap:24px; border-bottom:1px solid #e5ebf2; margin-bottom:24px; padding-bottom:24px; }
.nn-doc-stats-hero { font-size:13px; }
.nn-doc-single-publisher,.nn-doc-cross-publisher-caveat { max-width:68ch; border:0; border-left:2px solid #ad8748; background:#faf7ee; color:#675533; border-radius:0; padding:12px 16px; }
.nn-doc-hero { margin-bottom:32px; }
.nn-doc-toc { border-bottom:1px solid #e3e9f0; }
.nn-doc-toc-tab { font-size:13px; font-weight:600; }
.nn-doc-paragraph { max-width:72ch; line-height:1.72; color:#263c56; }
@media(max-width:640px) { .nn-doc-article { padding:24px 16px; } .nn-doc-question { font-size:30px; } .nn-doc-header { gap:16px; } }
/* Keep the saved library in the mobile viewport, including its privacy note. */
@media(max-width:620px) {
  .nn-library-slot .nn-history-content { position:fixed; top:72px; left:12px; right:12px; width:auto; max-height:min(70vh,480px); overflow:auto; }
}
/* NewsNerd / signal desk. Dark research cover, light evidence sheet, lime action. */
:root{--bg:#F8F9FC;--surface:#FFFFFF;--surface-hover:#F5F6FA;--ink:#111827;--ink-2:#6B7280;--ink-3:#94A3B8;--border:#E5EAF2;--accent:#2563EB;--accent-hover:#1D4ED8;--accent-bg:#EFF6FF;--accent-border:#BFDBFE;--radius:8px;--radius-sm:5px;--shadow:0 18px 45px -28px rgba(9,25,19,.32)}
html,body{font-family:'DM Sans',sans-serif!important;color:var(--ink);letter-spacing:-.012em}
html{background:#F8F9FC}
body{background:#F8F9FC!important;animation:none!important}
#container{max-width:1380px;padding:18px 34px 68px}
.nn-nav{max-width:none;margin:0;padding:15px 12px 22px;border-color:#E3E9F3}
.nn-brand,.nn-compact-brand{font-family:'DM Sans',sans-serif;font-weight:800;letter-spacing:-.055em}
.nn-brand-mark,.nn-compact-brand-mark{background:#2563EB!important;color:#111827!important;border-radius:5px!important;box-shadow:none!important}
.nn-links a{font-weight:700;color:#6B7280}
.nn-links a.active{color:#111827}
.nn-links a.active::after{background:#2563EB}
.nn-home{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);column-gap:34px;align-items:start;padding-top:26px}
.nn-hero{grid-column:1;grid-row:1;max-width:none;margin:0;padding:0;text-align:left}
.nn-hero-glass{position:relative;overflow:hidden;min-height:418px;padding:42px 52px 42px;background:#172641;border:1px solid #293D65;border-radius:11px;box-shadow:0 25px 50px -33px rgba(24,44,82,.65);backdrop-filter:none;-webkit-backdrop-filter:none}
.nn-hero-glass::before{content:'';position:absolute;inset:auto -22% -82% 29%;height:150%;border-radius:50%;border:1px solid rgba(92,149,238,.22);box-shadow:0 0 0 53px rgba(92,149,238,.025),0 0 0 106px rgba(92,149,238,.022),0 0 0 159px rgba(92,149,238,.018);pointer-events:none}
.nn-home-kicker{display:inline-flex;align-items:center;gap:10px;position:relative;color:#2563EB;font-size:10px;font-weight:800;letter-spacing:.19em}
.nn-kicker-dot{width:7px;height:7px;border-radius:50%;background:#2563EB;box-shadow:0 0 17px #2563EB}
.nn-hero h1{position:relative;margin:32px 0 20px;font:normal clamp(52px,5.35vw,88px)/.98 'Archivo Black',sans-serif!important;letter-spacing:-.07em;color:#F8FAFF;background:none!important;-webkit-text-fill-color:currentColor!important}
.nn-hero h1 em{font-style:normal;color:#2563EB}
.nn-hero .nn-lede{position:relative;max-width:440px;color:#C5D4EF;font-size:17px;line-height:1.6;font-weight:500;margin:0 0 26px}
.nn-rotator{display:none!important}
.nn-search{grid-column:1;grid-row:2;max-width:none;width:100%;padding:0;margin:-32px 0 0;z-index:3}
.nn-input-wrap{min-height:76px;border:1px solid #CDD9EE;border-radius:7px;background:#FFFFFF;padding:10px 10px 10px 20px;box-shadow:0 19px 38px -25px rgba(24,44,82,.65)}
.nn-input-wrap:hover,.nn-input-wrap:focus-within{transform:none}
.nn-input-wrap:focus-within{border-color:#75A7FF;box-shadow:0 0 0 4px rgba(92,149,238,.32),0 19px 38px -25px rgba(24,44,82,.65)}
.nn-input-wrap input[type=text]{font-family:'DM Sans',sans-serif;font-weight:600;color:#111827;min-width:0}
.nn-input-wrap #submit,.nn-submit{background:#2563EB;color:#FFFFFF;border-radius:4px;box-shadow:none;font-weight:800;min-height:52px;border:0}
.nn-input-wrap #submit:hover:not(:disabled),.nn-submit:hover:not(:disabled){background:#1D4ED8;color:#FFFFFF}
.nn-evidence-route{grid-column:2;grid-row:1/3;align-self:stretch;margin:0;padding:32px 28px;background:#EAF1FC;border:1px solid #C9D9F1;border-radius:8px}
.nn-route-label{font-weight:800;letter-spacing:.14em;color:#3E5A83}
.nn-route-steps{display:grid!important;grid-template-columns:1fr!important;gap:0!important;margin:20px 0 0!important}
.nn-route-steps li{min-width:0;padding:14px 0!important;border-top:1px solid #CCD8E9;display:grid;grid-template-columns:38px 1fr;gap:2px 12px;text-align:left}
.nn-route-steps li::after,.nn-route-steps::before,.nn-route-steps::after{display:none!important}
.nn-route-num{grid-row:1/3;display:grid;place-items:center;border:1px solid #A9BFE1;border-radius:50%;font-weight:800;color:#315A95;width:32px;height:32px}
.nn-route-steps strong{font-size:15px;color:#213652}
.nn-route-steps small{grid-column:2;color:#62758F;font-size:12px}
.nn-questions{grid-column:1;grid-row:3;max-width:none;margin:44px 0 0;padding:0 8px}
.nn-questions-eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:#536853}
.nn-questions-viewport{height:168px;mask-image:none;-webkit-mask-image:none;border-top:1px solid #CFDBEA}
.nn-questions-item{border-bottom:1px solid #E5EAF2;height:56px}
.nn-questions-prefix{color:#4F7FC4;font-weight:800}
.nn-questions-text{font-size:15px;font-weight:700;color:#253954}
.nn-stats-line{grid-column:2;grid-row:3;margin:47px 0 0;padding:16px;border-top:1px solid #CFDBEA;font-size:12px;color:#62748E;text-align:left}
body.is-search-mode .nn-home{display:block;padding:0}
body.is-search-mode .nn-evidence-route{display:none!important}
body.is-search-mode .nn-compact-bar{background:#172641;padding:8px 22px;border-bottom:1px solid #33476B}
body.is-search-mode .nn-compact-bar-inner{background:#FFFFFF;border:0;border-radius:5px;box-shadow:none;max-width:1320px}
body.is-search-mode .nn-compact-progress::before{background:#2563EB}
.nn-doc{margin-top:38px}
.nn-doc-article{border:1px solid #D6E1EE;border-radius:5px;background:#FFFFFF;box-shadow:0 30px 70px -55px rgba(24,44,82,.55);padding:42px 48px;max-width:940px}
.nn-doc-question{font:normal clamp(36px,4vw,58px)/1.08 'Archivo Black',sans-serif;letter-spacing:-.058em;color:#162C4A}
.nn-doc-header{border-color:#D5E0EC;padding-bottom:28px;margin-bottom:28px}
.nn-doc-stats-hero{color:#5D6F86}
.nn-doc-single-publisher,.nn-doc-cross-publisher-caveat{background:#EFF5FF;border-left:3px solid #6D94D7;color:#294773;max-width:68ch}
.nn-doc-stats-advanced summary{font-weight:800;color:#315B9A}
.nn-doc-stats-grid{background:#F6F9FD;border-color:#D2E1F4}
.nn-doc-hero-inner .article-visual-hero-image{max-height:335px}
.nn-doc-toc{background:#FFFFFF;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#D5E1EF}
.nn-doc-toc-tab.is-active{color:#285CB3;border-color:#72A0E9}
.nn-doc-paragraph{font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.8;color:#26394F}
.nn-doc-sources{border:1px solid #D5E1EF;border-radius:5px;background:#F0F5FC}
.nn-doc-sources-head{background:#203558;color:#EFF5FF}
.nn-doc-source-group,.nn-doc-source-group.is-expanded,.nn-doc-source-group-body{background:#F0F5FC!important}
.nn-doc-source-group-head:hover{background:#E6EFFB!important}
.nn-doc-source-group-name{color:#253E63}
.nn-doc-source-analysis{color:#2862B8}
.nn-library-slot .nn-history-disclosure>summary{border-radius:4px;background:#F1F6FD;color:#315C94}
.nn-library-slot .nn-history-content{border-radius:5px;background:#FFFFFF}
@media(max-width:950px){.nn-home{grid-template-columns:minmax(0,1fr) 240px;gap:18px}.nn-hero-glass{padding:38px 32px}.nn-evidence-route{padding:24px 18px}}
@media(max-width:700px){#container{padding:12px 18px 48px}.nn-home{display:flex;flex-direction:column;gap:0;padding-top:10px}.nn-hero,.nn-search,.nn-evidence-route,.nn-questions,.nn-stats-line{width:100%}.nn-hero-glass{min-height:350px;padding:34px 24px 55px}.nn-hero h1{font-size:clamp(45px,12vw,64px)!important;white-space:normal;line-height:1.03}.nn-hero .nn-lede{font-size:14px}.nn-search{margin:-34px 0 0}.nn-input-wrap{min-height:64px}.nn-input-wrap #submit{min-width:48px;min-height:46px}.nn-evidence-route{margin:25px 0 0;padding:20px}.nn-route-steps{grid-template-columns:repeat(2,1fr)!important;gap:3px 15px!important}.nn-route-steps li{grid-template-columns:32px 1fr;gap:2px 5px}.nn-route-steps small{font-size:10px}.nn-questions{margin-top:34px;padding:0}.nn-stats-line{margin:24px 0 0}.nn-doc-article{padding:28px 20px}.nn-doc-question{font-size:36px}body.is-search-mode .nn-compact-bar{padding:6px 12px}}
@media(prefers-reduced-motion:reduce){.nn-hero-glass,.nn-doc-article{animation:none!important}}
/* Final composition corrections after pixel review. */
.nn-input-wrap #submit{background:#2563EB!important;color:#FFFFFF!important;border:0!important;box-shadow:none!important}
.nn-input-wrap #submit:hover:not(:disabled){background:#1D4ED8!important}
@media(max-width:700px){.nn-home>.nn-hero{order:1}.nn-home>.nn-search{order:2;z-index:3;margin:-34px 0 0}.nn-home>.nn-evidence-route{order:3}.nn-home>.nn-questions{order:4}.nn-home>.nn-stats-line{order:5}}

/* Keep progressive work in one visual language. */
body.is-search-mode .nn-searching-inner{background:#E4EFFD!important;border-color:#BDD3F4!important;color:#294D80!important;border-radius:4px!important}
body.is-search-mode-pipeline .nn-pipeline-live-sources{background:#F8FAFF!important;border:1px solid #CFDCF0!important;border-radius:5px!important;box-shadow:none!important}
.nn-pipeline-live-sources-eyebrow{background:#DAE9FE!important;color:#295A9A!important;border-radius:3px!important}
.nn-pipeline-live-source{border-bottom-color:#D4DFEC!important}
.nn-pipeline-live-source:hover{background:#EFF5FD!important}
.nn-stage[data-status=active] .nn-stage-dot{background:#75A4F2!important;box-shadow:0 0 0 5px rgba(95,149,231,.16)!important}
.nn-stage[data-status=done] .nn-stage-dot{background:#477BBB!important}
.nn-doc-sources-head{background:#203453!important;color:#EFF5FF!important}
.nn-doc-sources-head *{color:inherit!important}
.nn-doc-source-group-head{background:#F0F5FC!important}
.nn-doc-source-title{color:#274975!important}
.nn-doc-toc-tab.is-active{color:#285CB3!important;border-color:#72A0E9!important}
/* Match the compact bar and run state to the cover; keep pending work honest. */
body.is-search-mode .nn-compact-brand-mark{background:#2563EB!important;box-shadow:none!important}
body.is-search-mode .nn-compact-brand-mark svg{filter:grayscale(1) brightness(.3)}
body.is-search-mode .nn-compact-nav-link.is-active{background:#E9F1FE;color:#2A5AA8}
body.is-search-mode .nn-compact-nav-link.is-active::after{background:#477FE4}
.nn-doc-section-title::before{background:#5589DC!important}
.nn-doc-toc-tab.is-active::after{background:#5589DC!important}
.nn-pipeline-live-sources-empty,.nn-pipeline-live-sources-hero{color:#436A9F}
.nn-pipeline-live-sources-empty svg .nn-radar-sweep,.nn-pipeline-live-sources-empty svg circle{stroke:#73A4ED}
body.is-search-mode-pipeline .nn-pipeline-live-sources.is-empty{min-height:0}

/* Let the reader distinguish cited publisher entries from the progress rail. */
.nn-doc-sources{background:#F0F5FC!important;border-color:#CBDCF0!important;border-radius:5px!important;box-shadow:none!important}
.nn-doc-sources .nn-doc-sources-head{background:#203558!important;color:#F2F6FF!important;border-radius:4px 4px 0 0!important}
.nn-doc-sources .nn-doc-sources-head a{color:#ABD0FF!important}
.nn-doc-sources-list{background:#F0F5FC!important}
/* Source-reading state: real events replace placeholders without layout jump. */
body.is-search-mode-pipeline .nn-pipeline-live-sources:not(.is-empty) .nn-pipeline-live-sources-empty,body.is-search-mode-pipeline .nn-pipeline-live-sources:not(.is-empty) .nn-pipeline-live-sources-skeletons{display:none!important}
body.is-search-mode .nn-compact-brand-mark{background:#2563EB!important}
body.is-search-mode .nn-compact-brand-mark svg{filter:none!important}
/* Reading states use the same blue identity as the prior NewsNerd palette. */
body.is-search-mode-pipeline .nn-pipeline-live-sources-pulse{background:#5A8FE5!important;box-shadow:0 0 0 0 rgba(92,144,227,.38)!important}
body.is-search-mode-pipeline .nn-stage-tracker-current,body.is-search-mode-pipeline .nn-stage-tracker-current.is-active,body.is-search-mode-pipeline .nn-stage-tracker-current.is-done{background:#E9F1FC!important;border-color:#BDD3F0!important;color:#315583!important}
body.is-search-mode-pipeline .nn-stage-tracker-current-pulse{background:#5A8FE5!important}
body.is-search-mode-pipeline .nn-stage::before{background:#DCE7F5!important}
body.is-search-mode-pipeline .nn-stage[data-status=done]::before{background:#477BBB!important}
body.is-search-mode-pipeline .nn-stage[data-status=active]::before{background:#79A8F3!important}
body.is-search-mode-pipeline .nn-stage[data-status=active]{color:#315F9F!important}
body.is-search-mode-pipeline .nn-stage[data-status=done]{color:#476F9D!important}
body.is-search-mode-pipeline .nn-pipeline-live-source{background:#F8FAFF!important;border-top-color:#D5E1F0!important}
body.is-search-mode-pipeline .nn-pipeline-live-source-title{color:#1D3659!important}
body.is-search-mode-pipeline .nn-pipeline-live-source-name,body.is-search-mode-pipeline .nn-pipeline-live-source-snippet{color:#62758F!important}
body.is-search-mode-pipeline .nn-pipeline-live-source-avatar{background:#E7F0FC!important;color:#395F99!important}
body.is-search-mode-pipeline .nn-pipeline-live-source.is-relevant .nn-pipeline-live-source-relevance{background:#5486DA!important;border-color:#5486DA!important}
/* Final palette pass: retain the prior light-blue NewsNerd identity, with accessible contrast on navy. */
.nn-home-kicker{color:#9DC3FF!important}
.nn-kicker-dot{background:#8AB6FF!important;box-shadow:0 0 16px rgba(138,182,255,.54)!important}
.nn-hero h1 em{color:#7FACFF!important}
.nn-questions-eyebrow{color:#526D95!important}
.nn-doc-cross-publisher-caveat,.nn-doc-single-publisher{border-left-color:#6794DC!important}
body.is-search-mode-pipeline .nn-pipeline-live-sources-count{color:#475E82!important}

/* Harsh-approved structure, without the heavy dark framing. */
html,body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif!important}
.nn-brand,.nn-compact-brand,.nn-home-kicker,.nn-route-label,.nn-questions-eyebrow,.nn-questions-text,.nn-input-wrap input[type=text],.nn-doc-paragraph{font-family:inherit!important}
.nn-hero-glass{background:linear-gradient(137deg,#FFFFFF 13%,#F0F5FE 67%,#E8F0FC 100%)!important;border:1px solid #D8E4F4!important;box-shadow:0 20px 48px -34px rgba(34,66,112,.22)!important;border-radius:18px!important}
.nn-hero-glass::before{border-color:rgba(74,129,220,.13)!important;box-shadow:0 0 0 53px rgba(74,129,220,.018),0 0 0 106px rgba(74,129,220,.015),0 0 0 159px rgba(74,129,220,.012)!important}
.nn-home-kicker{color:#416AA5!important}
.nn-kicker-dot{background:#5C89D9!important;box-shadow:none!important}
.nn-hero h1{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif!important;font-weight:760!important;letter-spacing:-.065em!important;color:#172B49!important}
.nn-hero h1 em{color:#2563EB!important}
.nn-hero .nn-lede{color:#526786!important}
.nn-input-wrap{border-color:#D4E1F1!important;box-shadow:0 12px 32px -24px rgba(24,54,97,.3)!important;border-radius:12px!important}
.nn-evidence-route{border-color:#DBE5F3!important;border-radius:16px!important;background:#F0F5FC!important}
body.is-search-mode .nn-compact-bar{background:rgba(248,250,254,.93)!important;border:0!important;border-bottom:1px solid #DDE7F5!important;box-shadow:none!important;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
body.is-search-mode .nn-compact-bar-inner{background:transparent!important;border:0!important;box-shadow:none!important}
body.is-search-mode .nn-compact-progress{box-shadow:none!important}
.nn-doc-article{border-radius:16px!important;border-color:#DBE5F2!important;box-shadow:0 15px 36px -30px rgba(31,60,98,.3)!important}
.nn-doc-question{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif!important;font-weight:750!important}
body.is-search-mode-pipeline .nn-pipeline-live-sources{border-radius:14px!important;background:#FFFFFF!important}
@media(max-width:700px){.nn-hero-glass{border-radius:16px!important}}
/* Source index and reader chrome stay light as well. */
.nn-doc-sources,.nn-doc-sources .nn-doc-sources-head,.nn-doc-sources-head{background:#F2F6FC!important;border-color:#D8E4F2!important;color:#233C5C!important}
.nn-doc-sources .nn-doc-sources-head{border-bottom:1px solid #D8E4F2!important;border-radius:14px 14px 0 0!important}
.nn-doc-sources-head *{color:inherit!important}
.nn-doc-sources .nn-doc-sources-head a{color:#255DB7!important}
.nn-doc-sources-list,.nn-doc-source-group,.nn-doc-source-group-body{background:#FFFFFF!important}
.nn-doc-source-group-head{background:#F6F9FD!important}
.nn-doc-article .nn-doc-paragraph{max-width:72ch}
.nn-pipeline-live-source,.nn-pipeline-live-source:hover{box-shadow:none!important}
/* Answer header: title, reading metadata, and citation caution form separate rows. */
.nn-doc-header-meta{min-width:0;flex:1 1 0}
.nn-doc-question{margin:0 0 18px!important;line-height:1.16!important;overflow-wrap:anywhere}
.nn-doc-stats{margin-top:0!important;gap:0!important;min-width:0}
.nn-doc-stats-hero{margin:0;min-height:20px}
.nn-doc-single-publisher,.nn-doc-cross-publisher-caveat{display:block;box-sizing:border-box;margin:20px 0 0!important;padding:14px 16px!important;border:1px solid #D7E5F6!important;border-left:3px solid #6794DC!important;border-radius:10px!important;background:#F1F6FD!important;color:#294773!important;line-height:1.55!important}
.nn-doc-stats-advanced{margin:16px 0 0!important}
@media(max-width:700px){.nn-doc-question{margin-bottom:18px!important}.nn-doc-single-publisher,.nn-doc-cross-publisher-caveat{margin-top:18px!important}}