/* ═══════════════════════════════════════════════════════════════
   design-v2.css — Clarrus redesign overlay
   ───────────────────────────────────────────────────────────────
   Activated only when body carries class="v2".
   Set by the ?preview=v2 URL parameter — zero impact on production.
   Font family is injected as --font-v2-display by the activation
   script, based on ?font=instrument (default) | playfair | dm
   ═══════════════════════════════════════════════════════════════ */


/* ── 0. BASE HEADER / NAV LAYOUT (shared across all V2 pages) ────────────── */

/* Sticky positioning lives here so pages that don't carry home.html's inline CSS
   (saved, myfeed, preferences, etc.) still get a fixed header. */
body.v2 .header {
  position: sticky;
  top: 0;
  z-index: 100;
}

body.v2 .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  gap: 12px;
}

body.v2 .logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: 'Lexend Exa', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3em;
  flex-shrink: 0;
}

body.v2 .nav {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Nav link base — colour overrides are in section 2 */
body.v2 .nav-link {
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 150ms;
}

body.v2 .user-section {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

body.v2 .btn-primary {
  background: var(--primary, #1A4FA3);
  color: white;
  padding: 8px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: background 150ms;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

body.v2 .btn-primary:hover { background: var(--primary-hover, #143E87); }

body.v2 .hamburger-btn {
  display: none;
  padding: 8px;
  border: none;
  background: transparent;
  color: rgba(232,237,245,0.7);
  cursor: pointer;
}

@media (max-width: 768px), (max-width: 1024px) and (hover: none) {
  body.v2 .hamburger-btn { display: flex !important; align-items: center; margin-left: auto; }
  body.v2 .nav,
  body.v2 .nav-pills,
  body.v2 .user-section,
  body.v2 .search-container { display: none !important; }
}

/* ── 1. COLOR + GLOBAL TOKENS ─────────────────────────────────────────────── */

body.v2 {
  --bg:              #FDFAF5;
  --surface:         #FFFFFF;
  --ink:             #16120D;
  --muted:           #7A7268;
  --stroke:          #D5CFC5;
  --stroke-light:    #E4DFD7;
  --section-divider: #C5BEB5;
  --primary:         #1A4FA3;
  --primary-hover:   #143E87;
  --success:         #1A7A52;
  --border-radius:   2px;

  /* v2-only tokens */
  --v2-hbg:     #0B1929;   /* header background */
  --v2-hink:    #E8EDF5;   /* header text */
  --v2-hmuted:  rgba(232,237,245,0.48);
  --v2-crimson: #B83030;   /* breaking/signal red */
  --v2-crimsonsurface: #FFF2F2;

  /* Bias palette — more intentional */
  --bias-left:   #3D72A8;
  --bias-center: #7A7268;
  --bias-right:  #A84040;

  background: var(--bg);
  letter-spacing: 0;
}

/* Grain texture — very subtle, adds print quality */
body.v2::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.02;
}


/* ── 2. HEADER — dark publication bar ─────────────────────────────────────── */

body.v2 .header {
  background: var(--v2-hbg);
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}

/* Logo — white on dark header */
body.v2 .logo span {
  background: #FFFFFF;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Guest nav links */
body.v2 .nav-link {
  color: var(--v2-hmuted);
}
body.v2 .nav-link:hover,
body.v2 .nav-link.active {
  background: rgba(255,255,255,0.07);
  color: var(--v2-hink);
}

/* Category filter pills */
body.v2 .pill-btn {
  color: var(--v2-hmuted);
}

/* ── Nav pills base (needed on all V2 pages, not just home) ──── */
body.v2 .nav-pills {
  display: flex;
  gap: 4px;
  align-items: center;
}
body.v2 .pill-btn {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms;
  white-space: nowrap;
}
body.v2 .pill-btn:hover,
body.v2 .pill-btn.active {
  background: rgba(255,255,255,0.07);
  color: var(--v2-hink);
}

/* Search field */
body.v2 .search-container {
  position: relative;
  display: flex;
  align-items: center;
}
body.v2 .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--v2-hmuted);
  pointer-events: none;
  z-index: 1;
}
body.v2 .search-input {
  padding: 8px 12px 8px 36px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--v2-hink);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  width: 240px;
  transition: border-color 150ms, background 150ms;
}
body.v2 .search-input::placeholder {
  color: var(--v2-hmuted);
}
body.v2 .search-input:focus {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.22);
  box-shadow: none;
}

/* Icon buttons (bell, settings) — base reset so non-home pages render correctly */
body.v2 .icon-btn {
  padding: 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms, background 150ms;
}
body.v2 .header .icon-btn {
  color: var(--v2-hmuted);
}
body.v2 .header .icon-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--v2-hink);
}

/* Sign in CTA — inverted on dark header */
body.v2 .header .guest-only .btn-primary,
body.v2 #loginBtn {
  background: #FFFFFF;
  color: var(--v2-hbg);
  border-radius: 6px;
}
body.v2 .header .guest-only .btn-primary:hover,
body.v2 #loginBtn:hover {
  background: #E8EDF5;
  transform: none;
}

/* Logged-in user area in header */
body.v2 #userEmail { color: var(--v2-hmuted); }
body.v2 .header #userMenu .btn-primary {
  background: rgba(255,255,255,0.1);
  color: var(--v2-hink);
}

/* ── Hamburger button ────────────────────────────────────────────────────── */
body.v2 .header .hamburger-btn {
  color: rgba(232,237,245,0.65);
  transition: color 150ms, background 150ms;
  border-radius: 6px;
  padding: 8px;
}
body.v2 .header .hamburger-btn:hover {
  color: #E8EDF5;
  background: rgba(255,255,255,0.08);
}


/* ── 3. MOBILE NAV DRAWER ─────────────────────────────────────────────────── */

/* Base layout — these must live here so pages that don't load home.html's
   inline CSS (saved, myfeed, preferences, etc.) still get correct behaviour. */
body.v2 .mobile-nav {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 999;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.v2 .mobile-nav.show {
  display: flex;
  opacity: 1;
}
body.v2 .mobile-nav-content {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 85vw);
  border-left: 1px solid var(--stroke);
  padding: 24px 0;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
body.v2 .mobile-nav.show .mobile-nav-content {
  transform: translateX(0);
}
body.v2 .mobile-nav-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 20px;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 8px;
}
body.v2 .mobile-nav-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 600; font-size: 16px; flex-shrink: 0;
}
body.v2 .mobile-nav-section { padding: 8px 0; }
body.v2 .mobile-nav-item {
  display: flex; align-items: center;
  padding: 14px 24px;
  border: none; background: transparent;
  width: 100%; text-align: left;
  font-size: 15px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: all 150ms;
}
body.v2 .mobile-nav-logout {
  margin-top: 8px;
  border-top: 1px solid var(--stroke);
  padding-top: 16px;
}

/* V2 colour overrides */
body.v2 .mobile-nav {
  background: rgba(3,8,16,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Slide-in panel — full dark navy, matches header */
body.v2 .mobile-nav-content {
  background: #0B1929;
  border-left: 1px solid rgba(255,255,255,0.07);
  border-right: none;
  box-shadow: -16px 0 48px rgba(0,0,0,0.5);
}

/* Grain overlay on the panel */
body.v2 .mobile-nav-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}

/* Profile section */
body.v2 .mobile-nav-profile {
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
body.v2 .mobile-nav-email {
  color: #E8EDF5 !important;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.04em;
}
body.v2 .mobile-nav-account-link {
  color: rgba(232,237,245,0.45) !important;
}
body.v2 .mobile-nav-account-link:hover {
  color: rgba(232,237,245,0.75) !important;
}
body.v2 .mobile-nav-avatar {
  background: linear-gradient(135deg, #3D72A8 0%, #1A4FA3 100%);
}

/* Section labels — Barlow Condensed, small caps feel */
body.v2 .mobile-nav-section-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(232,237,245,0.35) !important;
  padding-top: 20px !important;
}

/* Nav items — clear white text, generous hit targets */
body.v2 .mobile-nav-item {
  color: rgba(232,237,245,0.72) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  padding: 13px 24px !important;
  border-radius: 0;
  transition: background 120ms, color 120ms;
}
body.v2 .mobile-nav-item:hover,
body.v2 .mobile-nav-item:active {
  background: rgba(255,255,255,0.06) !important;
  color: #E8EDF5 !important;
}

/* Quick action buttons */
body.v2 .mobile-quick-action {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(232,237,245,0.65) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
}
body.v2 .mobile-quick-action:hover {
  background: rgba(255,255,255,0.09) !important;
  color: #E8EDF5 !important;
}

/* Search */
body.v2 #mobileNavSearch,
body.v2 .mobile-nav-search {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
body.v2 .mobile-nav-search input {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #E8EDF5 !important;
}
body.v2 .mobile-nav-search input::placeholder {
  color: rgba(232,237,245,0.35) !important;
}

/* Separators */
body.v2 .mobile-nav-divider,
body.v2 .mobile-nav-logout {
  border-top-color: rgba(255,255,255,0.08) !important;
}

/* Logout — coral red, readable on dark */
body.v2 .mobile-nav-logout .mobile-nav-item {
  color: #F87171 !important;
}
body.v2 .mobile-nav-logout .mobile-nav-item:hover {
  background: rgba(239,68,68,0.1) !important;
  color: #FCA5A5 !important;
}

/* Close / X button area */
body.v2 .mobile-nav-close {
  color: rgba(232,237,245,0.5) !important;
}
body.v2 .mobile-nav-close:hover {
  color: #E8EDF5 !important;
}


/* ── 4. BODY TYPOGRAPHY ───────────────────────────────────────────────────── */

/* Hero title — the main event, biggest type on the page */
body.v2 .hero-title {
  font-family: var(--font-v2-display, 'Instrument Serif', Georgia, serif);
  font-size: clamp(26px, 3.2vw, 48px);
  font-weight: 400;
  line-height: 1.11;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Story card headlines */
body.v2 .story-title {
  font-family: var(--font-v2-display, 'Instrument Serif', Georgia, serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.012em;
}

/* Story page h1 */
body.v2 h1.story-title {
  font-size: clamp(28px, 3.5vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 400;
}

/* Secondary h2/h3 headings */
body.v2 h2 {
  font-family: var(--font-v2-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400;
  letter-spacing: -0.018em;
}
body.v2 h3 {
  font-family: var(--font-v2-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Section kickers / labels → Barlow Condensed */
body.v2 h4,
body.v2 .analysis-kicker,
body.v2 .section-label,
body.v2 .lane-label,
body.v2 .story-kicker {
  font-family: 'Barlow Condensed', var(--font-sans);
  letter-spacing: 0.1em;
  font-size: 11px;
}

/* Story body and excerpts → Source Serif 4 for warmth */
body.v2 .hero-excerpt {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.65;
}
body.v2 .story-excerpt,
body.v2 .story-dek {
  font-family: var(--font-serif);
  font-size: 14px;
}


/* ── 5. HERO CARD ─────────────────────────────────────────────────────────── */

body.v2 .hero-card {
  background: #FFFFFF;
  border-radius: 0;
  border: none;
  box-shadow: 0 1px 3px rgba(22,18,13,0.06), 0 4px 16px rgba(22,18,13,0.04);
  padding: 32px 36px;
}

/* Bias bar in hero — taller, gradient treatment */
body.v2 .hero-card .bias-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--stroke);
}
body.v2 .hero-card .bias-bar-fill {
  background: linear-gradient(90deg,
    var(--bias-left)   0%,
    var(--bias-center) 50%,
    var(--bias-right)  100%);
}
body.v2 .hero-card .bias-label {
  font-family: 'Barlow Condensed', var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ── 6. STORY CARDS ────────────────────────────────────────────────────────── */

/* White card lifts off the warm paper background */
body.v2 .story-card {
  background: #FFFFFF;
  border-radius: 0;
  padding: 20px;
  margin-bottom: var(--space-l);
  box-shadow: 0 1px 2px rgba(22,18,13,0.05);
  transition: box-shadow 180ms;
}
body.v2 .story-card:hover {
  box-shadow: 0 2px 6px rgba(22,18,13,0.09), 0 8px 20px rgba(22,18,13,0.06);
}

/* Bias bar inside cards — move to top edge, full width */
body.v2 .story-card .bias-bar-container {
  order: -1;
  margin: -20px -20px 14px;
  height: 3px;
  gap: 0;
  padding: 0;
}
body.v2 .story-card .bias-bar {
  width: 100%;
  height: 3px;
  border-radius: 0;
  background: var(--stroke-light);
}
body.v2 .story-card .bias-bar-fill {
  background: linear-gradient(90deg,
    var(--bias-left)   0%,
    var(--bias-center) 50%,
    var(--bias-right)  100%);
}


/* ── 7. LEAN PILLS ─────────────────────────────────────────────────────────── */

body.v2 .lean-pill {
  border-radius: 3px;
  font-family: 'Barlow Condensed', var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 0;
  padding: 3px 7px;
}
body.v2 .lean-left,
body.v2 .lean-center-left    { background: rgba(61,114,168,0.1);   color: var(--bias-left); }
body.v2 .lean-center          { background: rgba(122,114,104,0.1); color: var(--bias-center); }
body.v2 .lean-center-right,
body.v2 .lean-right           { background: rgba(168,64,64,0.1);   color: var(--bias-right); }


/* ── 8. BREAKING NEWS ─────────────────────────────────────────────────────── */

body.v2 .breaking-card {
  background: var(--v2-crimsonsurface);
  border-left-color: var(--v2-crimson);
  border-radius: 2px;
}
body.v2 .breaking-card:hover { background: #FFE6E6; }
body.v2 .breaking-badge {
  background: var(--v2-crimson);
  font-family: 'Barlow Condensed', var(--font-sans);
  letter-spacing: 0.1em;
  border-radius: 2px;
}


/* ── 9. SECTION HEADERS ─────────────────────────────────────────────────────  */

body.v2 #sectionLabel,
body.v2 .feed-section-header,
body.v2 .section-header-label {
  font-family: 'Barlow Condensed', var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--stroke);
  padding-bottom: 8px;
}


/* ── 10. BUTTONS (non-header) ─────────────────────────────────────────────── */

body.v2 .btn-primary {
  border-radius: 6px;
}
body.v2 .btn-link { color: var(--primary); }
body.v2 .btn-link:hover { color: var(--primary-hover); }


/* ── 11. SEARCH RESULTS ────────────────────────────────────────────────────── */

body.v2 .search-results {
  background: #FFFFFF;
  border-color: var(--stroke);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(22,18,13,0.1);
}
body.v2 .search-result-item:hover { background: var(--bg); }


/* ── 12. NOTIFICATIONS PANEL ────────────────────────────────────────────────  */

body.v2 .notifications-panel {
  background: #FFFFFF;
  border-color: var(--stroke);
  border-radius: 4px;
}


/* ── 13. BADGES / PILLS ─────────────────────────────────────────────────────  */

body.v2 .badge {
  border-radius: 3px;
  font-family: 'Barlow Condensed', var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ── 14. STORY PAGE ─────────────────────────────────────────────────────────  */
/* story-clean.html rendered via JS — target the key generated classes */

/* The story hero area already has a dark bg via .story-header-bg or inline styles.
   We mainly need the headline font and sizing. */
body.v2 .story-header h1,
body.v2 .story-header .story-title {
  font-family: var(--font-v2-display, 'Instrument Serif', Georgia, serif);
  font-size: clamp(28px, 3.8vw, 56px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.022em;
}

/* Analysis text — Source Serif 4 */
body.v2 .analysis-text,
body.v2 .consensus-body,
body.v2 .framing-excerpt,
body.v2 .perspective-text {
  font-family: var(--font-serif);
  line-height: 1.7;
}

/* Lane labels */
body.v2 .bias-lane-header,
body.v2 .lane-header-label {
  font-family: 'Barlow Condensed', var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Sources chip refinement */
body.v2 .source-pill,
body.v2 .source-chip {
  background: var(--bg);
  border-radius: 3px;
  border: 1px solid var(--stroke-light);
}


/* ── 15. ONBOARDING MODAL ────────────────────────────────────────────────────  */

body.v2 #onboardingModal {
  background: rgba(11,25,41,0.6);
  backdrop-filter: blur(10px);
}
body.v2 #onboardingInner {
  background: #FFFFFF;
  border-color: var(--stroke);
}


/* ── 16. QUOTA BAR ───────────────────────────────────────────────────────────  */

body.v2 .quota-counter-bar {
  background: var(--bg);
  border-color: var(--stroke);
  font-family: 'Barlow Condensed', var(--font-sans);
  letter-spacing: 0.06em;
}


/* ── 17. FOOTER — force sans-serif regardless of page body font ──────────────
   Content pages (privacy, terms, copyright) set body { font-family: serif }
   for their readable long-form text, which causes the footer to inherit the
   wrong font. These rules pin the footer to the sans-serif system font and
   prevent per-page `p { font-size }` rules from bleeding into footer copy.
   ─────────────────────────────────────────────────────────────────────────── */

body.v2 .footer,
body.v2 .footer-content,
body.v2 .footer-logo,
body.v2 .footer-link,
body.v2 .footer-description,
body.v2 .footer-bottom {
  font-family: var(--font-sans);
}

body.v2 .footer-bottom p {
  font-size: var(--text-xs);
  margin: 0;
}