/* =========================================================
   qiboo.ai — TCM News Hub
   Design system: editorial × clinical × calm
   ========================================================= */

:root {
  /* Primary — Calming Green (TCM Wood/Nature) */
  --primary-darker: #1e3610;
  --primary-dark: #2d5016;
  --primary: #4a7c2f;
  --primary-light: #7cb342;
  --primary-pale: #e8f0e1;

  /* Secondary — Earth Gold (TCM Earth) */
  --secondary-dark: #b8860b;
  --secondary: #d4af37;
  --secondary-light: #f0e68c;
  --secondary-pale: #faf3d9;

  /* Accent — Healing Red (TCM Fire) */
  --accent: #c62828;
  --accent-light: #ef5350;

  /* FILL tokens for green/gold BACKGROUNDS & gradients. In light these equal the
     brand tokens above (so fills look identical); in dark they go DEEP (see the
     dark block) so white/gold text on a green/gold fill stays legible — while the
     plain --primary-dark/-darker brighten for TEXT use. Background declarations
     reference these instead of the raw brand tokens. */
  --gfill-1: #1e3610;   /* = --primary-darker */
  --gfill-2: #2d5016;   /* = --primary-dark */
  --gfill-3: #4a7c2f;   /* = --primary */
  --gfill-gd: #b8860b;  /* = --secondary-dark */
  --gfill-g: #d4af37;   /* = --secondary */

  /* AI accent — the ONE 'AI / live / Pro / tech' accent (forest green stays primary brand) */
  --accent-ai: #2563eb;       /* electric blue: Live badge, AI/Pro labels, Pro-feature accents */
  --accent-ai-soft: #eaf1ff;  /* its pale background tint */

  /* HAZINE gold — treasure accent. Allowed ONLY on: mode-switcher active border, treasure
     badges, PDF-Studio "NEW" tags, first-treasure onboarding progress. Nowhere else. */
  --q-gold: #c9a227;
  --q-gold-soft: #f7edd2;

  /* Neutrals */
  --white: #ffffff;
  --cream: #faf8f3;
  --cream-warm: #f4efe4;
  --sage: #e8f5e9;
  --ink: #1a1f1a;
  --ink-soft: #2c3528;
  --slate-700: #3d4540;
  --slate-500: #6b7268;
  --slate-400: #8a9088;
  --slate-300: #c4c8c0;
  --slate-200: #e2e4dd;
  --slate-100: #eef0ea;
  --slate-50: #f7f8f4;

  /* Evidence levels — clinical blue spectrum */
  --ev-meta: #1a237e;       /* meta-analysis */
  --ev-rct: #0277bd;         /* RCT */
  --ev-cohort: #0288d1;      /* cohort */
  --ev-case: #039be5;        /* case series */
  --ev-expert: #4fc3f7;      /* expert opinion */

  /* Status */
  --success: #2e7d32;
  --warning: #ef6c00;
  --error: #c62828;
  --info: #0277bd;
  --live: #e53935;

  /* Type */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Monaco, Consolas, monospace;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(20, 30, 15, 0.04);
  --shadow-sm: 0 2px 8px rgba(20, 30, 15, 0.06);
  --shadow-md: 0 6px 20px rgba(20, 30, 15, 0.08);
  --shadow-lg: 0 14px 40px rgba(20, 30, 15, 0.12);
  --shadow-xl: 0 24px 60px rgba(20, 30, 15, 0.18);

  /* Layout */
  --container: 1280px;
  --container-wide: 1440px;
  --nav-h: 68px;
}

/* Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Typography utilities ------------------------------------ */
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; }
.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); letter-spacing: -0.01em; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary);
  font-weight: 500;
}

/* Container ----------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* Section heads ------------------------------------------- */
.section { padding-block: clamp(56px, 8vw, 96px); }
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--slate-200);
  padding-bottom: var(--space-4);
}
.section-head__left { display: flex; flex-direction: column; gap: 6px; }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 40px);
  color: var(--ink);
}
.section-head__sub { color: var(--slate-500); font-size: 15px; max-width: 60ch; }
.section-head__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--slate-200);
  background: var(--white);
  transition: all .2s ease;
}
.section-head__link:hover { background: var(--gfill-2); color: var(--white); border-color: var(--primary-dark); }
.section-head__link svg { transition: transform .2s ease; }
.section-head__link:hover svg { transform: translateX(3px); }
/* on phones the nowrap "Browse →" link can't sit beside the heading — let it wrap below */
@media (max-width: 640px){
  .section-head { flex-wrap: wrap; align-items: flex-start; }
  .section-head__left { min-width: 0; }
}

/* =========================================================
   1. NAVIGATION
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 243, 0.85);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--slate-200);
}
.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--primary-darker);
  letter-spacing: -0.02em;
}
.nav__brand-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--gfill-2), var(--gfill-3));
  display: grid; place-items: center;
  color: white;
  position: relative;
}
.nav__brand-mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  border-top-color: transparent;
  border-right-color: transparent;
  transform: rotate(-45deg);
}
.nav__brand-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-left: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--slate-300);
}
.nav__links {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.nav__link {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .15s ease;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { background: var(--slate-100); color: var(--primary-darker); }
.nav__link svg { opacity: .55; }
.nav__spacer { flex: 1; }
.nav__search {
  position: relative;
  flex: 0 1 280px;
  min-width: 180px;
}
.nav__search input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--slate-200);
  background: var(--white);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nav__search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(74, 124, 47, 0.12);
}
.nav__search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-400);
}
.nav__search kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-400);
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-sm);
  padding: 2px 6px;
}
.nav__icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-soft);
  position: relative;
  transition: background .15s ease;
}
.nav__icon-btn:hover { background: var(--slate-100); }
.nav__icon-btn .dot {
  position: absolute;
  top: 7px; right: 8px;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--cream);
}
.nav__lang {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--slate-100);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Mega dropdown ------------------------------------------- */
.mega {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 720px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: none;
  grid-template-columns: 220px 1fr;
  gap: 24px;
}
.nav__link[aria-expanded="true"] + .mega { display: grid; }
.mega__col h4 {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate-500);
  margin-bottom: 12px;
  font-weight: 500;
}
.mega__col ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink-soft);
  transition: background .12s ease;
}
.mega__col ul li a:hover { background: var(--slate-50); color: var(--primary-dark); }
.mega__col ul li a .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-400);
}
.mega__featured {
  display: grid;
  gap: 12px;
}
.mega__article {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 10px;
  border-radius: var(--r-md);
  transition: background .12s ease;
}
.mega__article:hover { background: var(--slate-50); }
.mega__article-thumb {
  width: 80px; height: 80px;
  border-radius: var(--r-md);
  background-size: cover;
  background-position: center;
}
.mega__article h5 { font-size: 14px; font-weight: 600; line-height: 1.35; }
.mega__article .meta { font-family: var(--font-mono); font-size: 11px; color: var(--slate-400); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

/* =========================================================
   2. HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(212, 175, 55, 0.12), transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(124, 179, 66, 0.15), transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--sage) 100%);
  padding-block: clamp(56px, 9vw, 112px);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(45, 80, 22, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(74, 124, 47, 0.18);
  color: var(--primary-darker);
  font-size: 13px;
  font-weight: 500;
  width: max-content;
  margin-bottom: var(--space-5);
}
.hero__eyebrow-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gfill-3);
  position: relative;
  display: grid; place-items: center;
  color: white;
  font-size: 11px;
}
.hero__eyebrow-dot::before {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; background: var(--gfill-3);
  opacity: 0.3; animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.6); opacity: 0; }
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--primary-darker);
  margin-bottom: var(--space-5);
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--primary);
  font-family: var(--font-display);
}
.hero__lede {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--slate-700);
  max-width: 52ch;
  margin-bottom: var(--space-5);
  line-height: 1.55;
}
.hero__sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate-500);
}
.hero__sources span { font-weight: 500; color: var(--ink-soft); }
.hero__sources i { font-style: normal; opacity: 0.4; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero__stats {
  position: relative;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(74,124,47,0.15);
  border-radius: var(--r-xl);
  padding: 28px;
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.hero__stats::before {
  content: "LIVE METRICS";
  position: absolute;
  top: -10px; left: 24px;
  background: var(--gfill-2);
  color: white;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.hero__stat { padding: 16px 12px; }
.hero__stat:nth-child(odd) { border-right: 1px solid var(--slate-200); }
.hero__stat:nth-child(-n+2) { border-bottom: 1px solid var(--slate-200); }
.hero__stat-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 3vw, 40px);
  font-weight: 500;
  color: var(--primary-darker);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero__stat-num small {
  font-size: 18px;
  color: var(--primary);
  margin-left: 2px;
}
.hero__stat-label {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.hero__stat-trend {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--success);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Buttons -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 15px;
  transition: all .2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn--primary {
  background: var(--gfill-1);
  color: white;
}
.btn--primary:hover { background: var(--gfill-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost {
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--slate-200);
  color: var(--ink-soft);
}
.btn--ghost:hover { background: var(--white); border-color: var(--primary); color: var(--primary-darker); }
.btn--gold {
  background: linear-gradient(135deg, var(--gfill-g), var(--gfill-gd));
  color: var(--primary-darker);
  font-weight: 600;
}
.btn--gold:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212,175,55,0.4); }

/* =========================================================
   3. QUICK ACCESS HUB
   ========================================================= */
.quick {
  background: var(--white);
  border-top: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
}
.quick__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-left: 1px solid var(--slate-200);
}
.quick__card {
  padding: 28px 24px;
  border-right: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: background .2s ease;
  cursor: pointer;
}
.quick__card:hover { background: var(--slate-50); }
.quick__card:hover .quick__icon { transform: translateY(-2px); }
.quick__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--primary-pale);
  color: var(--primary-dark);
  display: grid; place-items: center;
  transition: transform .25s ease;
}
.quick__card:nth-child(2) .quick__icon { background: var(--dk-surface,#fce4ec); color: #c2185b; }
.quick__card:nth-child(3) .quick__icon { background: #e3f2fd; color: var(--ev-rct); }
.quick__card:nth-child(4) .quick__icon { background: var(--secondary-pale); color: var(--secondary-dark); }
.quick__card:nth-child(5) .quick__icon { background: #ede7f6; color: #5e35b1; }

.quick__title { font-size: 17px; font-weight: 600; color: var(--ink); }
.quick__desc { font-size: 13px; color: var(--slate-500); line-height: 1.5; }
.quick__meta {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-400);
  letter-spacing: 0.05em;
}
.quick__count { color: var(--primary); font-weight: 600; }

/* =========================================================
   4. ADVANCED SEARCH & FILTERS
   ========================================================= */
.search-pane {
  background: var(--cream-warm);
  background-image:
    linear-gradient(135deg, var(--cream-warm) 0%, var(--cream) 100%);
}
.search-pane__inner {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 2px solid var(--primary);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: 0 0 0 6px rgba(74,124,47,0.08);
}
.search-bar input {
  flex: 1;
  min-width: 0; /* allow the input to shrink below its intrinsic size so the bar fits phones */
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 17px;
  background: transparent;
  color: var(--ink);
}
.search-bar input::placeholder { color: var(--slate-400); }
.search-bar__mic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--slate-500);
  display: grid; place-items: center;
}
.search-bar__mic:hover { background: var(--primary-pale); color: var(--primary-dark); }
.search-bar__go {
  background: var(--gfill-1);
  color: white;
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 14px;
}

.search-examples {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.search-examples__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 500;
  margin-right: 2px;
}
.search-pane__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--slate-200);
}
.search-count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--slate-500);
}
.search-count__num { color: var(--primary-dark); font-weight: 700; }

.filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--slate-200);
}
.filter-group { display: flex; flex-direction: column; gap: 10px; }
.filter-group__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 500;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-pill);
  background: var(--slate-100);
  color: var(--slate-700);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
}
.chip:hover { background: var(--slate-200); }
.chip.is-active {
  background: var(--gfill-1);
  color: white;
}
.chip--ev { display: inline-flex; align-items: center; gap: 6px; }
.chip--ev::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ev-meta);
}
.chip--ev[data-level="rct"]::before { background: var(--ev-rct); }
.chip--ev[data-level="cohort"]::before { background: var(--ev-cohort); }
.chip--ev[data-level="case"]::before { background: var(--ev-case); }

.search-active {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--slate-200);
}
.search-active__label {
  font-size: 13px;
  color: var(--slate-500);
  font-weight: 500;
}
.search-active__result {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--primary-dark);
  font-weight: 600;
}
.active-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  background: var(--primary-pale);
  color: var(--primary-darker);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
}
.active-pill button {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(45,80,22,0.15);
  color: var(--primary-darker);
  display: grid; place-items: center;
  font-size: 14px;
  line-height: 1;
}
.active-pill button:hover { background: var(--gfill-1); color: white; }

/* =========================================================
   5. FEATURED STORIES
   ========================================================= */
.featured-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
}
.featured-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-5);
}

.feature-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
  cursor: pointer;
  min-height: 320px;
}
.feature-card--hero { min-height: 560px; }
.feature-card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.feature-card:hover .feature-card__img { transform: scale(1.04); }
/* generated topic-banner cover (QibooBanner) keeps the absolute fill layer */
.feature-card__img.qb-banner { position: absolute; inset: 0; }
/* the badge bar sits inside the painted article cover — keep it overlaid */
.article-card .article-card__img.qb-banner > .article-card__top { position: absolute; }
/* generated-banner caption: topic title + short subtitle, bottom-left of the cover */
.article-card__img.qb-banner { display: flex; align-items: flex-end; padding: 16px; }
.article-card__img.qb-banner > .qb-cap { position: relative; z-index: 2; }
.qb-cap-topic {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}
.qb-cap-sub {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 4px;
}
.feature-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 30%);
}
.feature-card__content {
  position: relative;
  z-index: 2;
  padding: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: white;
}
.feature-card--hero .feature-card__content { padding: 40px; }
/* quiet specialty eyebrow (replaces the oversized ghost word on generated covers) */
.feature-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--secondary, #d4af37);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.feature-card__eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.feature-card__top {
  position: absolute;
  top: 20px; left: 20px; right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
}
.feature-card--hero .feature-card__top { top: 28px; left: 32px; right: 32px; }

.badge-source {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.badge-source--lancet { background: #00305e; color: white; }
.badge-source--nejm { background: #c4302b; color: white; }
.badge-source--nature { background: #232f3e; color: white; }
.badge-source--bmj { background: #2a6ebb; color: white; }
.badge-source--jama { background: #b73239; color: white; }
.badge-source--nyt { background: var(--white); color: black; }
.badge-source--whoa { background: #0093d5; color: white; }

.badge-evidence {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.badge-evidence::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.badge-evidence[data-level="meta"] { background: rgba(26,35,126,0.95); color: white; }
.badge-evidence[data-level="rct"] { background: rgba(2,119,189,0.95); color: white; }
.badge-evidence[data-level="cohort"] { background: rgba(2,136,209,0.95); color: white; }
.badge-evidence[data-level="case"] { background: rgba(3,155,229,0.95); color: white; }
.badge-evidence[data-level="news"] { background: rgba(255,255,255,0.95); color: var(--ink); }

.feature-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.feature-card--hero .feature-card__title {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08;
  max-width: 22ch;
}
.feature-card__title-sm {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 24ch;
}
.feature-card__desc {
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  line-height: 1.5;
  margin-top: 12px;
  max-width: 60ch;
}
.feature-card__meta {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.feature-card__meta-item { display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================
   6. TOPIC COLLECTIONS
   ========================================================= */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: 28px;
  overflow-x: auto;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--slate-500);
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: color .15s ease;
}
.tab__count {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--slate-100);
  color: var(--slate-500);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.tab:hover { color: var(--ink); }
.tab.is-active {
  color: var(--primary-darker);
  font-weight: 600;
}
.tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--gfill-1);
}
.tab.is-active .tab__count {
  background: var(--gfill-1);
  color: white;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.article-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  transition: all .25s ease;
  cursor: pointer;
}
.article-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.article-card__img {
  position: relative;
  height: 180px;
  background-size: cover;
  background-position: center;
}
.article-card__top {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.article-card__bookmark {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--ink-soft);
  display: grid; place-items: center;
  transition: all .15s ease;
}
.article-card__bookmark:hover { background: var(--gfill-1); color: white; }
.article-card__bookmark.is-saved { background: var(--gfill-g); color: var(--primary-darker); }

.article-card__body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.article-card__title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.article-card__desc { font-size: 13px; color: var(--slate-500); line-height: 1.5; }
.article-card__foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-400);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stars { display: inline-flex; gap: 2px; color: var(--secondary-dark); font-size: 12px; }
.stars .off { color: var(--slate-200); }

/* =========================================================
   7. MERIDIAN MAP (PLACEHOLDER)
   ========================================================= */
.meridian {
  background: linear-gradient(135deg, var(--gfill-1) 0%, var(--gfill-2) 50%, #3d6a1e 100%);
  color: white;
  border-radius: var(--r-xl);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.meridian::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 40%, rgba(212,175,55,0.18), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(124,179,66,0.15), transparent 40%);
}
.meridian__content { position: relative; }
.meridian__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 16px;
}
.meridian h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.meridian p {
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 44ch;
}
.meridian__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--gfill-g);
  color: var(--primary-darker);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14px;
}
.meridian__cta:hover { transform: translateY(-1px); }

.meridian__viz {
  position: relative;
  aspect-ratio: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-xl);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.meridian__viz::after {
  content: "Q3 2026";
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--secondary);
  background: rgba(0,0,0,0.3);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.meridian__body {
  width: 60%;
  height: 80%;
  position: relative;
}
.meridian__body svg { width: 100%; height: 100%; }
.meridian__point {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--gfill-g);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.25);
}
.meridian__point::before {
  content: ""; position: absolute; inset: -8px;
  border-radius: 50%; border: 1px solid var(--secondary);
  opacity: 0.4;
  animation: meridianPulse 3s ease-out infinite;
}
@keyframes meridianPulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* =========================================================
   8. LATEST RESEARCH
   ========================================================= */
.research-list { display: flex; flex-direction: column; gap: 20px; }
.research-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 32px;
  transition: border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.research-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-sm); }
.research-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.research-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 12px;
}
.research-card__authors {
  font-size: 14px;
  color: var(--slate-500);
  margin-bottom: 14px;
  font-style: italic;
}
.research-card__authors strong { color: var(--ink-soft); font-style: normal; font-weight: 600; }
.research-card__abstract {
  font-size: 14px;
  color: var(--slate-700);
  line-height: 1.65;
  margin-bottom: 16px;
}
.research-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}
.action-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: var(--r-md);
  background: var(--slate-100);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  transition: background .15s ease;
}
.action-btn:hover { background: var(--slate-200); }
.action-btn--primary { background: var(--gfill-1); color: white; }
.action-btn--primary:hover { background: var(--gfill-2); }

.research-card__data {
  background: var(--slate-50);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-mono);
}
.data-stat { display: flex; flex-direction: column; gap: 2px; }
.data-stat__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate-500);
}
.data-stat__value {
  font-size: 22px;
  font-weight: 600;
  color: var(--ev-meta);
  letter-spacing: -0.01em;
}
.data-stat__value.positive { color: var(--success); }
.data-stat__hint { font-size: 11px; color: var(--slate-500); }

/* =========================================================
   9. MULTIMEDIA
   ========================================================= */
.multimedia-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
}

.video-feature {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #111;
  aspect-ratio: 16 / 10;
  cursor: pointer;
}
.video-feature__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.75);
  transition: transform 0.4s ease;
}
.video-feature:hover .video-feature__img { transform: scale(1.03); filter: brightness(0.65); }
.video-feature__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--primary-darker);
  z-index: 2;
  transition: transform .25s ease;
}
.video-feature:hover .video-feature__play { transform: translate(-50%, -50%) scale(1.08); }
.video-feature__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 28px;
  color: white;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  z-index: 2;
}
.video-feature__series {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 8px;
}
.video-feature__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.video-feature__meta {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  display: flex;
  gap: 18px;
}

.podcast-list {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.podcast-list__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--slate-200);
}
.podcast-list__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
}
.podcast-list__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-500);
  letter-spacing: 0.08em;
}
.podcast-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 6px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s ease;
}
.podcast-item:hover { background: var(--slate-50); }
.podcast-item__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate-400);
  letter-spacing: 0.05em;
  font-weight: 600;
}
.podcast-item__title { font-size: 14px; font-weight: 500; line-height: 1.35; }
.podcast-item__meta { font-size: 12px; color: var(--slate-500); margin-top: 2px; }
.podcast-item__play {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary-pale);
  color: var(--primary-darker);
  display: grid; place-items: center;
  transition: all .15s ease;
}
.podcast-item:hover .podcast-item__play { background: var(--gfill-1); color: white; }

/* =========================================================
   11. PATIENT STORIES
   ========================================================= */
.stories-section { background: var(--cream-warm); }
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.story-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
  border-left: 4px solid var(--secondary);
  display: flex;
  flex-direction: column;
}
.story-card__quote {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--secondary);
  opacity: 0.5;
  margin-bottom: -16px;
}
.story-card__rating { color: var(--secondary-dark); margin-bottom: 12px; font-size: 14px; }
.story-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.story-card__body {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 20px;
  flex: 1;
}
.story-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  padding-top: 16px;
  border-top: 1px solid var(--slate-200);
  font-size: 12px;
}
.story-meta { display: flex; flex-direction: column; }
.story-meta__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-400);
}
.story-meta__val { font-weight: 500; color: var(--ink-soft); margin-top: 2px; }

.stories-disclaimer {
  margin-top: 24px;
  padding: 14px 18px;
  background: rgba(245, 124, 0, 0.06);
  border-left: 3px solid var(--warning);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--slate-700);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =========================================================
   12. EDUCATION
   ========================================================= */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.edu-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all .2s ease;
  position: relative;
}
.edu-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.edu-card__num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--slate-200);
  letter-spacing: -0.02em;
  line-height: 1;
}
.edu-card__title { font-size: 16px; font-weight: 600; color: var(--ink); }
.edu-card__sub { font-size: 12px; color: var(--slate-500); margin-top: -8px; }
.edu-card__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--slate-700);
}
.edu-card__list li { display: flex; align-items: center; gap: 6px; }
.edu-card__list li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gfill-3); flex-shrink: 0;
}
.edu-card__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--primary-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* =========================================================
   13. GLOBAL NEWS FEED
   ========================================================= */
.feed-section {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
}
.feed-container {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.feed-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--slate-50);
}
.feed-head__title { font-family: var(--font-display); font-size: 18px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.feed-head__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--live);
  background: rgba(229,57,53,0.08);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.feed-head__live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse { 50% { opacity: 0.3; } }

.feed-list { display: flex; flex-direction: column; }
.feed-row {
  display: grid;
  grid-template-columns: 90px 30px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--slate-100);
  transition: background .15s ease;
  cursor: pointer;
}
.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: var(--slate-50); }
.feed-row__time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate-500);
  display: flex;
  align-items: center;
  gap: 6px;
}
.feed-row__time .pip {
  width: 8px; height: 8px; border-radius: 50%; background: var(--slate-300);
}
.feed-row.is-live .feed-row__time .pip {
  background: var(--live);
  animation: livePulse 1.6s ease-in-out infinite;
}
.feed-row.is-live .feed-row__time { color: var(--live); font-weight: 600; }
.feed-row__flag {
  width: 28px; height: 20px;
  border-radius: 3px;
  display: grid; place-items: center;
  font-size: 16px;
  background: var(--slate-100);
}
.feed-row__title { font-size: 15px; color: var(--ink); font-weight: 500; }
.feed-row__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
  padding: 4px 10px;
  background: var(--slate-100);
  border-radius: var(--r-pill);
}

/* =========================================================
   14. NEWSLETTER
   ========================================================= */
.newsletter {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(212,175,55,0.18), transparent 50%),
    linear-gradient(135deg, var(--gfill-1), var(--gfill-2));
  color: white;
  border-radius: var(--r-xl);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(212,175,55,0.15), transparent 60%);
  pointer-events: none;
}
.newsletter__left { position: relative; }
.newsletter__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 16px;
}
.newsletter h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 16px;
}
.newsletter h2 em { font-style: italic; color: var(--secondary); }
.newsletter__lede {
  color: rgba(255,255,255,0.75);
  font-size: 16px;
  line-height: 1.6;
  max-width: 42ch;
  margin-bottom: 22px;
}
.newsletter__social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.avatar-stack { display: flex; }
.avatar-stack > * {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--primary-dark);
  margin-left: -8px;
  background-size: cover;
  background-position: center;
}
.avatar-stack > *:first-child { margin-left: 0; }

.newsletter__form {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  border-radius: var(--r-xl);
  padding: 28px;
}
.newsletter__input {
  display: flex;
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 4px;
  margin-bottom: 20px;
}
.newsletter__input input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0 18px;
  font: inherit;
  font-size: 15px;
  background: transparent;
  color: var(--ink);
}
.newsletter__input button {
  background: var(--gfill-1);
  color: white;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.newsletter__row {
  margin-bottom: 18px;
}
.newsletter__row-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.newsletter__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nl-chip {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: all .15s ease;
}
.nl-chip.is-active {
  background: var(--gfill-g);
  color: var(--primary-darker);
  border-color: var(--secondary);
  font-weight: 600;
}

/* =========================================================
   15. FOOTER
   ========================================================= */
.footer {
  background: var(--ink);
  color: var(--slate-300);
  padding-block: 64px 32px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__brand h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: white;
  margin-bottom: 8px;
}
.footer__brand p { font-size: 14px; line-height: 1.6; max-width: 32ch; color: var(--slate-400); }
.footer__brand-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 12px;
}
.footer__col h4 {
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: white;
  margin-bottom: 18px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 14px; color: var(--slate-400); transition: color .15s ease; }
.footer__col a:hover { color: white; }

.footer__mid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: center;
  padding-block: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__lang { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--slate-400); }
.footer__lang strong { color: white; margin-right: 6px; font-weight: 500; }
.footer__lang button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.06);
  color: var(--slate-300);
}
.footer__lang button.is-active { background: var(--gfill-g); color: var(--primary-darker); font-weight: 600; }
.footer__social { display: flex; gap: 8px; }
.footer__social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: grid; place-items: center;
  color: var(--slate-300);
  transition: all .15s ease;
}
.footer__social a:hover { background: var(--gfill-g); color: var(--primary-darker); }

.footer__disclaimer {
  margin-top: 28px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--secondary);
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate-400);
  display: flex;
  gap: 12px;
}
.footer__disclaimer strong { color: white; }

.footer__base {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--slate-400);
}
.footer__base .mono { font-family: var(--font-mono); font-size: 11px; }
.footer__base-stats {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
}
.footer__base-stats em { font-style: normal; color: white; }

/* =========================================================
   MODAL
   ========================================================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 15, 0.6);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-backdrop.is-open { display: flex; opacity: 1; }
.modal {
  background: var(--white);
  border-radius: var(--r-xl);
  max-width: 880px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-xl);
  transform: translateY(8px);
  transition: transform .25s ease;
}
.modal-backdrop.is-open .modal { transform: translateY(0); }
.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  display: grid; place-items: center;
  z-index: 3;
  box-shadow: var(--shadow-sm);
}
.modal__close:hover { background: var(--slate-100); }
.modal__hero {
  height: 280px;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  position: relative;
}
.modal__hero-badges {
  position: absolute;
  bottom: 20px; left: 28px;
  display: flex;
  gap: 8px;
}
.modal__body { padding: 32px 40px 40px; }
.modal__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-bottom: 16px;
}
.modal__meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--slate-200);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.modal__ai {
  background: linear-gradient(135deg, #f3f0ff, #e8f0e1);
  border: 1px solid rgba(74,124,47,0.15);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 24px;
}
.modal__ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-darker);
}
.modal__ai-head .beta {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--gfill-1);
  color: white;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  letter-spacing: 0.1em;
}
.modal__ai h5 {
  font-size: 12px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate-500);
  margin: 14px 0 6px;
}
.modal__ai ul { padding-left: 0; }
.modal__ai ul li {
  font-size: 14px;
  line-height: 1.6;
  padding: 4px 0 4px 24px;
  position: relative;
}
.modal__ai ul li::before {
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gfill-3);
}
.modal__abstract {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.modal__data-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: var(--slate-50);
  padding: 20px;
  border-radius: var(--r-md);
  margin-bottom: 24px;
}
.modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--slate-200);
}

/* =========================================================
   TWEAKS panel
   ========================================================= */
.tweaks {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 90;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 280px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
}
.tweaks.is-open { display: flex; }
.tweaks__head {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}
.tweaks__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-500); }
.tweaks__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.tweak-row { display: flex; flex-direction: column; gap: 6px; }
.tweak-row__label { font-size: 11px; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.tweak-swatches { display: flex; gap: 6px; }
.tweak-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--slate-200);
  cursor: pointer;
  position: relative;
}
.tweak-swatch.is-active { border-color: var(--ink); }
.tweak-segments {
  display: flex;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  padding: 2px;
  background: var(--slate-50);
}
.tweak-segments button {
  flex: 1;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 6px;
  color: var(--slate-500);
}
.tweak-segments button.is-active { background: var(--white); color: var(--ink); box-shadow: var(--shadow-xs); font-weight: 500; }

.tweaks-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 89;
  width: 44px; height: 44px;
  background: var(--ink);
  color: white;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform .2s ease;
}
.tweaks-toggle:hover { transform: scale(1.06); }

/* Density variant */
body[data-density="compact"] .section { padding-block: clamp(40px, 5vw, 64px); }
body[data-density="compact"] .article-card__img { height: 140px; }
body[data-density="compact"] .article-card__body { padding: 14px 14px 16px; }
body[data-density="compact"] .research-card { padding: 20px; }
body[data-density="compact"] .quick__card { padding: 20px 18px; }

/* Palette variant: aurum (more gold-forward) */
body[data-palette="aurum"] {
  --primary-darker: #3d2e0f;
  --primary-dark: #5c451a;
  --primary: #8b6f2f;
  --primary-light: #c9a44a;
  --primary-pale: #f6efd9;
  --sage: #f5efe0;
  --cream: #fbf8ee;
}
/* Palette variant: indigo (clinical) */
body[data-palette="indigo"] {
  --primary-darker: #1a237e;
  --primary-dark: #283593;
  --primary: #3949ab;
  --primary-light: #7986cb;
  --primary-pale: #e8eaf6;
  --secondary: #ffa726;
  --secondary-dark: #ef6c00;
  --sage: #eef0fa;
  --cream: #f8f9fd;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__search { flex: 0 1 220px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__stats { max-width: 520px; }
  .quick__grid { grid-template-columns: repeat(2, 1fr); }
  .quick__card:nth-child(odd) { border-right: 1px solid var(--slate-200); }
  .quick__card:nth-child(-n+2) { border-bottom: 1px solid var(--slate-200); }
  .filters { grid-template-columns: repeat(2, 1fr); }
  .featured-grid { grid-template-columns: 1fr; }
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .research-card { grid-template-columns: 1fr; }
  .research-card__data { grid-template-columns: repeat(2, 1fr); }
  .multimedia-grid { grid-template-columns: 1fr; }
  .experts-grid { grid-template-columns: 1fr; }
  .stories-grid { grid-template-columns: 1fr; }
  .edu-grid { grid-template-columns: repeat(2, 1fr); }
  .meridian { grid-template-columns: 1fr; padding: 36px; }
  .newsletter { grid-template-columns: 1fr; padding: 36px; gap: 32px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav__search { display: none; }
  /* keep the wordmark whole on phones — the "TCM News Hub" tag was squeezing it to "qibo…" */
  .nav__brand-tag { display: none; }
  .nav__brand { flex-shrink: 0; white-space: nowrap; font-size: 20px; }
  .quick__grid { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr; }
  .collection-grid { grid-template-columns: 1fr; }
  .feature-card--hero { min-height: 420px; }
  .feed-row { grid-template-columns: 60px 1fr; }
  .feed-row__flag, .feed-row__tag { display: none; }
  .footer__top { grid-template-columns: 1fr; }
  /* Card action buttons (Read / Cite / Save / View data / Explain …): on narrow
     phones let the row wrap and let each button grow to share the width so none
     overflow or get clipped; keep a comfortable ~36px tap target. */
  .research-card__actions { gap: 8px; }
  .research-card__actions .action-btn {
    flex: 1 1 auto;
    padding-left: 10px;
    padding-right: 10px;
  }
  /* trim the generous 28px card padding on phones and let mono/DOI strings wrap so
     the card never forces the page wider than a ~360px viewport */
  .research-card { padding: 18px; }
  .research-card__data { padding: 14px; min-width: 0; }
  .research-card__head, .research-card__title, .research-card__data,
  .research-card__main { min-width: 0; overflow-wrap: anywhere; }
}

/* =========================================================
   Archive-style filter bar (shared: archive + editors' picks)
   ========================================================= */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; align-items: center; min-width: 0; }
/* A <select> sizes itself to its widest <option>; with long source/facet labels that
   blows past the phone viewport. Cap to the container so it can never cause page overflow. */
.filter-select { padding: 8px 14px; border: 1.5px solid var(--slate-200); border-radius: 8px; font-size: 0.85rem; color: var(--slate-700); font-family: var(--font-sans); background: var(--white); cursor: pointer; max-width: 100%; min-width: 0; }
.filter-select:focus { outline: none; border-color: var(--primary); }
.tier-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tier-chip { padding: 9px 16px; border: 1.5px solid var(--slate-200); border-radius: 999px; background: var(--white); color: var(--slate-700); font-size: 0.85rem; font-weight: 600; font-family: var(--font-sans); cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 7px; }
.tier-chip:hover { border-color: var(--primary); color: var(--primary); }
.tier-chip.is-active { background: var(--gfill-3); border-color: var(--primary); color: #fff; }
.tier-chip .tier-count { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; opacity: .7; }
.tier-chip.is-active .tier-count { opacity: .9; }
.filter-spacer { flex: 1 1 auto; }
.sort-label { font-size: 0.85rem; font-weight: 600; color: var(--slate-600); }
.filter-count { font-size: 0.85rem; color: var(--slate-500); white-space: nowrap; }
.filter-count strong { color: var(--slate-900); }


/* PERF-3: clip stray decorative-SVG horizontal overflow on mobile (reliable; does not break position:sticky) */
html{overflow-x:hidden}
html,body{max-width:100%}

/* P0.4: skeleton loaders (replace raw "Loading…" text) */
.qb-skel{position:relative;overflow:hidden;background:#eef1ee;border-radius:12px}
.qb-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-100%);animation:qb-shimmer 1.5s infinite}
@keyframes qb-shimmer{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.qb-skel::after{animation:none}}
.qb-skel-card{height:150px;min-width:240px;flex:0 0 240px;border:1px solid var(--slate-200)}
.qb-skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.qb-skel-grid .qb-skel-card{flex:none;min-width:0;height:190px}

/* A11Y-1: WCAG 1.4.3 color-contrast fixes — faint muted text ON LIGHT backgrounds only.
   Raises ONLY these specific classes/elements to >=4.5:1 (#5d635a vs #f3f4ee/#fff/#faf8f3 = 5.6-6.2:1).
   The --slate-400/--slate-500 tokens are intentionally NOT darkened (also used on dark bgs/borders). */
/* Mockup "browser window" title bar, demo tabs, body-map labels, disclaimer micro-text */
.win-bar .t{color:var(--dk-muted,#5d635a) !important}            /* "qiboo.ai · …" window titles (12.5px) */
.ap-tab:not(.on){color:var(--dk-muted,#5d635a) !important}       /* inactive Patient/Practitioner tabs on #f3f4ee */
.bm-card h6{color:var(--dk-muted,#5d635a) !important}            /* uppercase Location/Functions labels (9.5px) */
.disc{color:var(--dk-muted,#5d635a) !important}                  /* footer disclaimer text on #faf8f3 */
/* Homepage hero "study appraisal" demo: spans carry inline color:var(--slate-500); */
/* a stylesheet !important still beats an inline non-!important declaration. */

/* ===========================================================
   AI / Pro design tokens (wave1 redesign — ADDITIVE ONLY)
   The ONE 'AI / live / Pro / tech' accent is var(--accent-ai).
   Forest green (--primary) stays the primary brand colour.
   =========================================================== */

/* Premium PRO / NEW pill — replaces the old mustard #caa43a badges */
.q-pro {
  display: inline-block;
  background: var(--accent-ai-soft);
  color: var(--accent-ai);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 2px 7px;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

/* Evidence-TYPE badges for study cards (small / pill / uppercase / bold) */
.evi-rct,
.evi-meta,
.evi-sr,
.evi-cohort,
.evi-news {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.5;
  white-space: nowrap;
}
.evi-rct    { background: #e6f0ff; color: #1d4ed8; }
.evi-meta   { background: var(--dk-surface,#f3e8ff); color:var(--dk-purple,#7c3aed); }
.evi-sr     { background: #e7f3e0; color: #2f5d1d; }
.evi-cohort { background: var(--dk-surface,#fef3c7); color:var(--dk-brown,#92400e); }
.evi-news   { background: #eef2f6; color: #475569; }

/* Mono utility for numbers / GRADE scores / DOIs (additive; falls back gracefully) */
.mono { font-family: var(--font-mono, ui-monospace, monospace); }
.sa-band span[style*="--slate-500"]{color:var(--dk-muted,#5d635a) !important}

/* =========================================================
   DARK (NIGHT) MODE — OPTIONAL, opt-in.
   SAFETY: every rule below is gated behind html[data-theme="dark"]
   (explicit opt-in) OR the OS preference WHEN the user has not
   explicitly chosen light. The DEFAULT light site is 100% unchanged.
   Palette: calm deep night-blue / anthracite (not pure black).
   --primary (green) and --accent-ai (blue) are KEPT as accents.
   ========================================================= */

/* Smooth theme transition (no-op for a static light page) */
html { transition: background-color .2s ease, color .2s ease; }

/* --- Token redefinition: explicit opt-in via data-theme="dark" --- */
html[data-theme="dark"] {
  /* Neutrals → deep slate-blue */
  --white: #1b2433;        /* cards / surfaces */
  --cream: #0f1722;        /* page background */
  --cream-warm: #141d2b;   /* warm surface */
  --sage: #16241a;         /* green-tinted surface */
  --ink: #e8ecf1;          /* main text */
  --ink-soft: #aeb6c2;     /* muted text */
  --slate-700: #c2cad6;    /* dark grey → light (text-ish) */
  --slate-500: #93a0b0;
  --slate-400: #8a98a9;
  --slate-300: #3a465a;    /* borders / dividers */
  --slate-200: #2b3647;    /* borders */
  --slate-100: #1f2937;    /* subtle fills */
  --slate-50:  #18212e;    /* subtlest fill */

  /* Brand green: keep, brighten a touch for contrast on dark.
     --primary-dark/-darker are used as HEADING text on dark cards, so at night
     they must become LIGHTER than --primary (the emphasis order inverts) or the
     dark-green headings vanish on the dark surface. */
  --primary: #6fae46;
  --primary-light: #8bd05a;
  --primary-dark: #8bd05a;     /* was #2d5016 — headings (.sec, h1) read on dark */
  --primary-darker: #a3d977;   /* was #1e3610 — strongest green emphasis */
  --primary-pale: #16241a;

  /* AI/secondary accents */
  --accent-ai: #6ea8ff;       /* AI blue brightened so it reads on dark surfaces */
  --accent-ai-soft: #16233f;
  --secondary: #e6c463;        /* gold brightened/desaturated for dark (was #d4af37) */
  --secondary-dark: #d8b24a;   /* was #b8860b (too dark on dark) */
  --secondary-light: #b89a3a;  /* was #f0e68c (too pale → glares) */
  --secondary-pale: #2a2412;
  --accent: #f06a6a;           /* red brightened for dark — live badges/errors (was #c62828) */
  --accent-light: #ff8785;

  /* Dark-only FLIP tokens. Undefined in light → every caller written as
     var(--dk-*, #originalHex) falls back to its exact light value (light mode
     stays pixel-identical); defined here so the same declarations flip at night. */
  --dk-green: var(--primary-light);  /* hardcoded dark-green headings → light green */
  --dk-ink: var(--ink);              /* hardcoded near-black text → light */
  --dk-muted: var(--ink-soft);       /* hardcoded mid-grey text → muted light */
  --dk-amber: #d8b24a;               /* dark amber/gold text → light amber */
  --dk-orange: #f08a4b;              /* hardcoded rust/orange category text → readable */
  --dk-purple: #b89cf5;              /* evidence-tier purple text → readable on dark */
  --dk-brown: #d6a067;               /* evidence-tier brown/amber text → readable on dark */
  --dk-surface: var(--white);        /* hardcoded light-tint card → dark card */
  --dk-soft: var(--cream-warm);      /* hardcoded soft/cream fill → warm dark */
  --dk-goldfill: #6e5a1c;            /* hardcoded gold badge FILLS → deep gold (white reads) */

  /* Green/gold FILLS go DEEP at night so white/gold text on them stays legible. */
  --gfill-1: #143019;
  --gfill-2: #1a3a1f;
  --gfill-3: #235c30;
  --gfill-gd: #6e5a1c;
  --gfill-g: #8a6f24;

  /* Shadows: deeper/darker so elevation still reads on dark bg */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* --- OS-auto dark DISABLED — dark mode is strictly opt-in (toggle only), so the
   default day/light site never auto-flips for system-dark visitors and there is no
   dark→light flash on load. The never-matching guard keeps these rules dormant;
   remove `and (min-width: 99999px)` to restore OS-following. --- */
@media (prefers-color-scheme: dark) and (min-width: 99999px) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --white: #1b2433;
    --cream: #0f1722;
    --cream-warm: #141d2b;
    --sage: #16241a;
    --ink: #e8ecf1;
    --ink-soft: #aeb6c2;
    --slate-700: #c2cad6;
    --slate-500: #93a0b0;
    --slate-400: #8a98a9;
    --slate-300: #3a465a;
    --slate-200: #2b3647;
    --slate-100: #1f2937;
    --slate-50:  #18212e;

    --primary: #6fae46;
    --primary-light: #8bd05a;
    --primary-dark: #8bd05a;
    --primary-darker: #a3d977;
    --primary-pale: #16241a;

    --accent-ai: #6ea8ff;
    --accent-ai-soft: #16233f;
    --secondary: #e6c463;
    --secondary-dark: #d8b24a;
    --secondary-light: #b89a3a;
    --secondary-pale: #2a2412;
    --accent: #f06a6a;
    --accent-light: #ff8785;

    --dk-green: var(--primary-light);
    --dk-ink: var(--ink);
    --dk-muted: var(--ink-soft);
    --dk-amber: #d8b24a;
    --dk-orange: #f08a4b;
    --dk-purple: #b89cf5;
    --dk-brown: #d6a067;
    --dk-surface: var(--white);
    --dk-soft: var(--cream-warm);
    --dk-goldfill: #6e5a1c;

    --gfill-1: #143019;
    --gfill-2: #1a3a1f;
    --gfill-3: #235c30;
    --gfill-gd: #6e5a1c;
    --gfill-g: #8a6f24;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

/* --- Surfaces that should follow the tokens explicitly --- */
html[data-theme="dark"] body,
html:not([data-theme="light"])[data-theme="dark"] body {
  background: var(--cream);
  color: var(--ink);
}

/* =========================================================
   Targeted safety overrides for COMMON hardcoded LIGHT spots so
   they don't glare white on the dark page. Conservative: only
   pure-white / very-light inline backgrounds are softened to a
   dark surface, and their text is forced readable. These selectors
   are dark-gated, so light mode is untouched.
   ========================================================= */
html[data-theme="dark"] [style*="background:var(--white)"],
html[data-theme="dark"] [style*="background: var(--white)"],
html[data-theme="dark"] [style*="background:var(--white)"],
html[data-theme="dark"] [style*="background: var(--white)"],
html[data-theme="dark"] [style*="background:var(--white)"],
html[data-theme="dark"] [style*="background:var(--white)"],
html[data-theme="dark"] [style*="background-color:var(--white)"],
html[data-theme="dark"] [style*="background-color: var(--white)"],
html[data-theme="dark"] [style*="background-color:var(--white)"],
html[data-theme="dark"] [style*="background-color:var(--white)"] {
  background: var(--white) !important;
  background-color: var(--white) !important;
  color: var(--ink);
}

/* Very-light cream/grey inline fills (#fa…, #f4…, #f7…, #ee… etc.) → warm dark surface */
html[data-theme="dark"] [style*="background:#fa"],
html[data-theme="dark"] [style*="background: #fa"],
html[data-theme="dark"] [style*="background:#f4"],
html[data-theme="dark"] [style*="background: #f4"],
html[data-theme="dark"] [style*="background:#f7"],
html[data-theme="dark"] [style*="background: #f7"],
html[data-theme="dark"] [style*="background:#f8"],
html[data-theme="dark"] [style*="background:#f9"],
html[data-theme="dark"] [style*="background:#ee"],
html[data-theme="dark"] [style*="background:#ef"],
html[data-theme="dark"] [style*="background-color:#fa"],
html[data-theme="dark"] [style*="background-color:#f4"],
html[data-theme="dark"] [style*="background-color:#f7"] {
  background: var(--cream-warm) !important;
  background-color: var(--cream-warm) !important;
  color: var(--ink);
}

/* Inline-styled cards keep their token-driven surface on dark */
html[data-theme="dark"] .card[style],
html[data-theme="dark"] .card {
  background: var(--white);
  color: var(--ink);
}

/* Hardcoded near-black inline text on now-dark surfaces → light text */
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#111"],
html[data-theme="dark"] [style*="color:#1a"],
html[data-theme="dark"] [style*="color:#222"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color:#2d2000"],
html[data-theme="dark"] [style*="color: #2d2000"],
html[data-theme="dark"] [style*="color:black"] {
  color: var(--ink) !important;
}

/* Hardcoded dark BRAND-GREEN serif headings (e.g. #2d5016, #2f6b3a) stay dark
   on the now-dark cards → flip to the dark-mode light green so headings keep
   the brand feel and become readable. Dark-gated, so light mode is untouched. */
html[data-theme="dark"] [style*="color:var(--dk-green,#2d5016)"],
html[data-theme="dark"] [style*="color:var(--dk-green,#2d5016)"],
html[data-theme="dark"] [style*="color:var(--dk-green,#2f6b3a)"],
html[data-theme="dark"] [style*="color:var(--dk-green,#2f6b3a)"],
html[data-theme="dark"] [style*="color:#3a5f1f"],
html[data-theme="dark"] [style*="color:#4a7c2f"] {
  color: var(--primary-light) !important;
}

/* Images: gentle dim so bright photos don't blow out the night UI */
html[data-theme="dark"] img:not([src*=".svg"]) { filter: brightness(.92); }

/* =========================================================
   Component-level dark fixes (dark-gated → light mode untouched).
   Mirrored under the OS-preference twin below so system-dark works too.
   ========================================================= */
/* Footer uses var(--ink) as bg → it would invert to a light panel at night.
   Keep it a deep panel with light text (a dark footer reads fine in dark too). */
html[data-theme="dark"] .footer { background: #0b121c; color: var(--slate-500); }
html[data-theme="dark"] .footer a { color: var(--slate-400); }
html[data-theme="dark"] .footer a:hover { color: var(--primary-light); }

/* Green/gold FILLS (buttons, active chips, headers, saved states). The brand
   greens brighten for TEXT use at night, so as a FILL they wash out white text.
   Re-deepen the fill and keep white text → the brand's white-on-green identity
   is preserved, just at a night-appropriate depth (white on #2e6b39 ≈ 5:1). */
html[data-theme="dark"] .q-btn.primary,
html[data-theme="dark"] .q-btn.primary:hover,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn--primary,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .q-chip.on,
html[data-theme="dark"] .chip.on,
html[data-theme="dark"] .bt.on,
html[data-theme="dark"] .rbtn.active,
html[data-theme="dark"] .cat.active,
html[data-theme="dark"] .chan.active,
html[data-theme="dark"] .chbtn.active,
html[data-theme="dark"] .ch-chip.on,
html[data-theme="dark"] .pchip.hot,
html[data-theme="dark"] .tier-chip.is-active,
html[data-theme="dark"] .tab.active,
html[data-theme="dark"] button.is-active,
html[data-theme="dark"] .cta,
html[data-theme="dark"] .d-go,
html[data-theme="dark"] .fp-cta--free,
html[data-theme="dark"] .t-head,
html[data-theme="dark"] .action-btn--primary,
html[data-theme="dark"] .active-pill button:hover,
html[data-theme="dark"] .article-card__bookmark:hover,
html[data-theme="dark"] .podcast-item:hover .podcast-item__play {
  background: #2e6b39 !important;
  border-color: #2e6b39 !important;
  color: #fff !important;
}
/* Solid-green section heads (study-appraisal .sa-head) use a --primary-dark→
   --primary gradient that now brightens; re-deepen so white text reads.
   NOTE: the homepage .hero is a DIFFERENT design (cream→sage, already dark) so it
   is intentionally NOT touched here; pricing/tools .hero is fixed in-page. */
html[data-theme="dark"] .sa-head {
  background: linear-gradient(165deg, #20492a, #142b1a) !important;
}

/* Homepage inversions: components that use a DARK token (var(--ink)) as their
   BACKGROUND flip to a light panel at night (same trap as the footer). Pin dark. */
html[data-theme="dark"] .feature-card { background: #141d2b; }
html[data-theme="dark"] .tweaks-toggle { background: #2b3647; }
/* Newsletter CTA: green gradient brightens → re-deepen, keep white/gold text. */
html[data-theme="dark"] .newsletter {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(212,175,55,0.10), transparent 50%),
    linear-gradient(135deg, #1d3a16, #16241a) !important;
}

/* The .doc-page is a printed-handout / branded-PDF PREVIEW. A PDF is white paper,
   so keep it a self-contained LIGHT island on the dark page (premium, truthful to
   the product) instead of inverting it. Pin its original light-mode colors. */
html[data-theme="dark"] .doc-page { background: #fff !important; color: #333 !important; }
html[data-theme="dark"] .doc-page .doc-clinic,
html[data-theme="dark"] .doc-page h1,
html[data-theme="dark"] .doc-page h3 { color: #2d5016 !important; }
html[data-theme="dark"] .doc-page small { color:var(--dk-muted,#6b7280) !important; }
html[data-theme="dark"] .doc-page strong { color: #1a1a1a !important; }
html[data-theme="dark"] .doc-page blockquote { color: #666 !important; }
html[data-theme="dark"] .doc-page::after { background: linear-gradient(transparent, #fff) !important; }

/* Light-tint semantic badges → desaturated dark fills with light text */
html[data-theme="dark"] .q-badge.verified { background: #16314d; color: #8fc2f5; }
html[data-theme="dark"] .q-badge.vip { background: #3a2f12; color: #e3c069; }
html[data-theme="dark"] .q-badge.role { background: #243027; color: var(--ink-soft); }
/* Auth pages: replace the light radial wash so login/signup aren't a white sheet */
html[data-theme="dark"] .q-auth-wrap { background: radial-gradient(1200px 500px at 50% -10%, #16241a, #0f1722); }
@media (prefers-color-scheme: dark) and (min-width: 99999px) { /* DISABLED — dark is opt-in only */
  html:not([data-theme="light"]):not([data-theme="dark"]) .doc-page { background: #fff !important; color: #333 !important; }
  html:not([data-theme="light"]):not([data-theme="dark"]) :is(.doc-page .doc-clinic, .doc-page h1, .doc-page h3) { color: #2d5016 !important; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .doc-page strong { color: #1a1a1a !important; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .doc-page small { color:var(--dk-muted,#6b7280) !important; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .doc-page blockquote { color: #666 !important; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .doc-page::after { background: linear-gradient(transparent, #fff) !important; }
}

/* OS-preference twin: the same component fixes for system-dark users who never
   toggled (data-theme stays unset by design, to avoid a light flash at paint). */
@media (prefers-color-scheme: dark) and (min-width: 99999px) { /* DISABLED — dark is opt-in only */
  html:not([data-theme="light"]):not([data-theme="dark"]) .footer { background: #0b121c; color: var(--slate-500); }
  html:not([data-theme="light"]):not([data-theme="dark"]) .footer a { color: var(--slate-400); }
  html:not([data-theme="light"]):not([data-theme="dark"]) .footer a:hover { color: var(--primary-light); }
  html:not([data-theme="light"]):not([data-theme="dark"]) :is(.q-btn.primary, .q-btn.primary:hover, .btn.primary, .btn--primary, .btn-primary, .q-chip.on, .chip.on, .bt.on, .rbtn.active, .cat.active, .chan.active, .chbtn.active, .ch-chip.on, .pchip.hot, .tier-chip.is-active, .tab.active, button.is-active, .cta, .d-go, .fp-cta--free, .t-head, .action-btn--primary, .active-pill button:hover, .article-card__bookmark:hover, .podcast-item:hover .podcast-item__play) {
    background: #2e6b39 !important; border-color: #2e6b39 !important; color: #fff !important;
  }
  html:not([data-theme="light"]):not([data-theme="dark"]) .sa-head { background: linear-gradient(165deg, #20492a, #142b1a) !important; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .feature-card { background: #141d2b; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .tweaks-toggle { background: #2b3647; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .newsletter { background: radial-gradient(ellipse at 70% 30%, rgba(212,175,55,0.10), transparent 50%), linear-gradient(135deg, #1d3a16, #16241a) !important; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .q-badge.verified { background: #16314d; color: #8fc2f5; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .q-badge.vip { background: #3a2f12; color: #e3c069; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .q-badge.role { background: #243027; color: var(--ink-soft); }
  html:not([data-theme="light"]):not([data-theme="dark"]) .q-auth-wrap { background: radial-gradient(1200px 500px at 50% -10%, #16241a, #0f1722); }
}