/* ============================================================
   FEEDS — Styles
   Brand:
     Charcoal  #26272B  (background)
     Yellow    #F3C11B  (accent)
     Off-white #EDEDED  (body text)
     White     #FFFFFF  (select UI)
   Fonts:
     Pirata One  -> wordmark/logo
     Switzer     -> body & UI
   ============================================================ */

:root {
  --charcoal: #26272B;
  --charcoal-soft: #2F3035;   /* cards / panels */
  --charcoal-line: #3A3B41;   /* borders */
  --yellow: #F3C11B;
  --editorial-cream: #E8DCC4;   /* newsprint cream — editorial moments only */
  --offwhite: #EDEDED;
  --white: #FFFFFF;
  --muted: #9A9BA1;           /* secondary text */
  --live-red: #E0453A;        /* LIVE only — a broadcast happening right now */
  --radius: 14px;
  --maxw: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--charcoal);
  color: var(--offwhite);
  font-family: "Switzer", "General Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ===================== TOP NAV ===================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(38, 39, 43, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--charcoal-line);
}

/* Row 1: centered wordmark, icons top-right, empty left (item 8) */
.nav-row1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 0 10px;
}

.logo {
  font-family: "Pirata One", serif;
  font-size: clamp(44px, 5.5vw, 58px);
  line-height: 1;
  color: var(--yellow);
  letter-spacing: 0.5px;
  justify-self: center;
}
.logo span { color: var(--yellow); }
.nav-row1 .nav-icons { justify-self: end; }
.nav-left { width: 1px; }

/* wordmark + tagline stack */
.brand { display: flex; flex-direction: column; gap: 1px; }
.tagline {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-left: 2px;
}

.nav-icons { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--charcoal-line);
  border-radius: 50%;
  color: var(--offwhite);
  transition: all .15s ease;
}
.icon-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.icon-btn svg { width: 19px; height: 19px; }

/* Row 2: category links */
.nav-row2 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-row2::-webkit-scrollbar { display: none; }

/* Rabbit Hole — a feature destination, not a category */
.cat-link.rabbit-hole {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--yellow);
  font-weight: 600;
}
.cat-link.rabbit-hole .rabbit-ico { display: inline-grid; place-items: center; }
.cat-link.rabbit-hole .rabbit-ico svg { width: 18px; height: 18px; }
.cat-link.rabbit-hole:hover { color: var(--yellow); filter: brightness(1.15); }
.cat-link.rabbit-hole.active::after { background: var(--yellow); }
.nav-divider {
  flex: none;
  width: 1px; height: 20px;
  background: var(--charcoal-line);
  margin: 0 8px 4px;
}

.cat-link {
  position: relative;
  white-space: nowrap;
  padding: 10px 14px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  transition: color .15s ease;
}
.cat-link:hover { color: var(--offwhite); }
.cat-link.active { color: var(--white); font-weight: 600; }
.cat-link.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--yellow);
}

/* ===================== PAGE LAYOUT ===================== */
.layout {
  display: grid;
  grid-template-columns: 1fr 340px;   /* feed + right rail */
  gap: 28px;
  padding: 28px 0 80px;
}
/* Responsive behaviour is defined in the UI/LAYOUT FIX ROUND section
   (≤860px stacks to one column). */

/* ===================== HERO CAROUSEL ===================== */
.carousel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 32px;
  border: 1px solid var(--charcoal-line);
  background: #1d1e21;
}
.hero-track { position: relative; aspect-ratio: 16 / 7; }
@media (max-width: 620px) { .hero-track { aspect-ratio: 4 / 5; } }

.hero-slide {
  position: absolute; inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease;
}
.hero-slide.active { opacity: 1; visibility: visible; }

.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38,39,43,0) 25%, rgba(38,39,43,0.96) 100%);
}
.hero-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(243, 193, 27, 0.92);
  display: grid; place-items: center;
  z-index: 2;
  transition: transform .15s ease;
}
.hero-slide:hover .hero-play { transform: translate(-50%, -50%) scale(1.07); }
.hero-play svg { width: 28px; height: 28px; color: var(--charcoal); margin-left: 3px; }

.hero-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 28px 28px 56px;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 12px;
}
.hero-kicker .kicker-sep { opacity: .6; }
.hero-slide h1 {
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.12;
  font-weight: 600;
  color: var(--white);
  max-width: 760px;
  letter-spacing: -0.01em;
  transition: color .2s ease;
}
.hero-slide:hover h1 { color: var(--yellow); }
.hero-dek {
  margin-top: 10px;
  font-size: 16px;
  color: var(--offwhite);
  max-width: 640px;
}
.hero-meta {
  margin-top: 14px;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}

/* carousel controls */
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(20,21,23,0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--white);
  opacity: 0; transition: opacity .2s ease, background .15s ease;
}
.carousel:hover .carousel-btn { opacity: 1; }
.carousel-btn:hover { background: var(--yellow); color: var(--charcoal); border-color: var(--yellow); }
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-btn.prev { left: 16px; }
.carousel-btn.next { right: 16px; }

.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 18px;
  z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.hero-dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: none; padding: 0;
  background: rgba(255,255,255,0.35);
  transition: all .2s ease;
}
.hero-dot.active { background: var(--yellow); width: 26px; border-radius: 5px; }

/* ===== POLITICAL-LEAN BADGE — solid colour by lean, white text ===== */
/* background colour is set inline per-lean (see biasPill in icons.js) */
.bias-pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .02em;
  color: #FFFFFF;
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.bias-pill.compact { min-width: 22px; height: 16px; padding: 0 5px; }

/* ===================== SECTION TITLES ===================== */
.section-head {
  display: flex; align-items: baseline; gap: 16px;
  margin: 4px 0 18px;
}
.section-head h2 {
  font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.section-head .accent-bar {
  display:inline-block; width: 26px; height: 3px; background: var(--yellow);
  border-radius: 3px; margin-right: 10px; vertical-align: middle;
}
.section-sub { font-size: 13px; color: var(--muted); }

/* ===================== STORY GRID (masonry, item 5) ===================== */
/* CSS columns let each column flow independently, so a short card doesn't
   leave an empty band waiting for the tallest card in its row. */
.grid {
  column-count: 2;
  column-gap: 22px;
}
.grid > * {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 22px;
}
@media (max-width: 620px) { .grid { column-count: 1; } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--charcoal-soft);
  border: 1px solid var(--charcoal-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-3px); border-color: #4a4b52; }

.card-media { position: relative; aspect-ratio: 16 / 9; background: #1d1e21; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }

/* format icon (top-left of media) */
.format-chip {
  position: absolute; top: 12px; left: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(20,21,23,0.78);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  color: var(--white);
}
.format-chip svg { width: 16px; height: 16px; }
.format-chip { transition: background .18s ease, color .18s ease; }
/* hover -> editorial gold (item 3) */
.card:hover .format-chip { background: var(--yellow); color: var(--charcoal); }

/* developing indicator (top-right of media) */
.dev-badge {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(20,21,23,0.78);
  backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--white);
}
.dev-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 0 0 rgba(255,77,77,0.7);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,77,77,0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(255,77,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); }
}

.card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.card-cat { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
.card-headline h3 {
  font-size: 17px; line-height: 1.28; font-weight: 600; color: var(--white);
  letter-spacing: -0.005em;
  transition: color .18s ease;
}
.card-headline:hover h3 { color: var(--yellow); }
.card-dek { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

/* source badge row (primary source of the card) */
.card-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.source-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
}
.source-dot.legacy { background: var(--white); }
.source-dot.new { background: var(--yellow); }
.source-name { color: var(--offwhite); font-weight: 500; }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); flex: none; }

/* ---- multi-source preview ("single story, many angles") ---- */
.src-list-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--charcoal-line);
}
.src-list { display: flex; flex-direction: column; gap: 2px; }
.src-row {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 8px; margin: 0 -8px;
  border-radius: 9px;
  transition: background .15s ease;
}
.src-row:hover { background: rgba(255,255,255,0.04); }
.fmt-inline {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--charcoal-line); color: var(--white);
  transition: background .15s ease, color .15s ease;
}
.fmt-inline svg { width: 13px; height: 13px; }
.src-row:hover .fmt-inline { background: var(--yellow); color: var(--charcoal); }
.src-row-body { min-width: 0; }
.src-row-meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.src-row-head { font-size: 13.5px; line-height: 1.3; color: var(--offwhite); font-weight: 500; transition: color .15s ease; }
.src-row:hover .src-row-head { color: var(--white); }

.see-more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding-top: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--yellow);
  transition: gap .15s ease;
}
.see-more span { transition: transform .15s ease; }
.see-more:hover span { transform: translateX(3px); }

/* ===================== SIDEBAR ===================== */
.sidebar { display: flex; flex-direction: column; gap: 24px; }
.module {
  background: var(--charcoal-soft);
  border: 1px solid var(--charcoal-line);
  border-radius: var(--radius);
  padding: 20px;
}
.module-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
}
.module-title .accent-bar { width: 22px; height: 3px; background: var(--yellow); border-radius: 3px; }

/* Daily Digest */
.digest-date { font-size: 12px; color: var(--yellow); font-weight: 600; margin-bottom: 8px; }
.digest p { font-size: 14px; color: var(--offwhite); line-height: 1.5; }
.digest ul { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.digest li { display: flex; gap: 10px; font-size: 13.5px; color: var(--offwhite); }
.digest li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--yellow); }

/* Trending Now */
.trend-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--charcoal-line);
}
.trend-item:first-of-type { border-top: none; padding-top: 2px; }
.trend-num {
  font-family: "Pirata One", serif;
  font-size: 26px; line-height: 1;
  color: var(--yellow);
  width: 26px; flex: none;
}
.trend-text h4 { font-size: 14px; font-weight: 600; color: var(--white); line-height: 1.3; transition: color .15s ease; }
.trend-item:hover h4 { color: var(--yellow); }
.trend-item:hover .trend-num { filter: brightness(1.1); }
.trend-text .trend-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; display:flex; align-items:center; gap:6px; }

/* New Voices */
.voice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--charcoal-line);
}
.voice:first-of-type { border-top: none; padding-top: 2px; }
.voice:hover .voice-latest { color: var(--offwhite); }
.voice-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: var(--charcoal);
  background: var(--yellow);
}
.voice-info { flex: 1; min-width: 0; }
.voice-info h4 { font-size: 14px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 7px; transition: color .15s ease; }
.voice:hover .voice-info h4 { color: var(--yellow); }
.voice-platform {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--yellow);
  margin-top: 4px;
}
.voice-platform .bias-pill { text-transform: none; letter-spacing: 0; }
.voice-latest {
  font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.voice .follow-btn { align-self: center; }
.follow-btn {
  flex: none;
  padding: 7px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--charcoal);
  background: var(--yellow);
  border: none;
  border-radius: 999px;
  transition: opacity .15s ease;
}
.follow-btn:hover { opacity: .85; }
.follow-btn.following {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--charcoal-line);
}

/* ===================== ARTICLE PAGE ===================== */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 36px 24px 90px; }
/* single-line breadcrumb back affordance (item 3, round 8) */
.back-link { display: inline-flex; align-items: center; white-space: nowrap; font-size: 15px; margin-bottom: 22px; line-height: 1; }
.back-link .bl-arrow { display: inline-flex; align-items: center; color: var(--yellow); margin-right: 8px; }
.back-link .bl-arrow svg { width: 16px; height: 16px; }
.back-link .bl-feeds { color: var(--offwhite); opacity: .7; font-weight: 400; transition: opacity .15s ease; }
.back-link .bl-sep { color: var(--offwhite); opacity: .5; padding: 0 8px; }
.back-link .bl-cat { color: var(--yellow); font-weight: 600; }
.back-link:hover .bl-feeds { opacity: 1; }
.article-headline { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; font-weight: 600; color: var(--white); margin: 14px 0 16px; letter-spacing: -0.015em; }
.article-dek { font-size: 19px; color: var(--muted); line-height: 1.5; margin-bottom: 22px; }
.byline { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid var(--charcoal-line); border-bottom: 1px solid var(--charcoal-line); }
.byline .voice-avatar { width: 46px; height: 46px; }
.byline-info { flex: 1; }
.byline-info .by-name { font-size: 15px; font-weight: 600; color: var(--white); }
.byline-info .by-meta { font-size: 13px; color: var(--muted); display:flex; align-items:center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.article-hero { border-radius: var(--radius); overflow: hidden; margin: 26px 0; border: 1px solid var(--charcoal-line); position: relative; }
.article-hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-body p { font-size: 18px; line-height: 1.72; color: var(--offwhite); margin-bottom: 22px; }
.article-body p:first-of-type::first-letter {
  font-family: "Pirata One", serif;
  font-size: 58px; line-height: 0.8; float: left;
  color: var(--yellow); margin: 6px 12px 0 0;
}
/* editorial pull quote (item 3a) — newsprint cream block, serif italic */
.pull-quote {
  clear: both;
  background: var(--editorial-cream);
  color: var(--charcoal);
  border-left: 3px solid var(--yellow);
  border-radius: 0;
  margin: 30px 0;
  padding: 22px 26px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 22px; line-height: 1.4;
}
.pull-quote cite {
  display: block;
  margin-top: 14px;
  font-family: "Switzer", system-ui, sans-serif;
  font-style: normal; font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(38, 39, 43, 0.7);
}
/* font-size control (action bar) */
.article-body.fs-s p { font-size: 16px; }
.article-body.fs-l p { font-size: 20.5px; line-height: 1.78; }

/* ----- action bar (item 11) ----- */
.action-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 18px;
}
.action-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--charcoal-line);
  border-radius: 999px;
  color: var(--offwhite);
  font-size: 13px; font-weight: 500;
  transition: all .15s ease;
}
.action-btn svg { width: 16px; height: 16px; }
.action-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.action-btn.active { background: var(--yellow); border-color: var(--yellow); color: var(--charcoal); }

/* ----- toast ----- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  z-index: 100;
  padding: 11px 20px;
  background: var(--white); color: var(--charcoal);
  font-size: 13.5px; font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Tabs */
.tabs { margin-top: 44px; }
.tab-bar { display: flex; gap: 6px; border-bottom: 1px solid var(--charcoal-line); margin-bottom: 24px; }
.tab {
  position: relative;
  padding: 14px 18px;
  background: transparent; border: none;
  font-size: 15px; font-weight: 600; color: var(--muted);
  transition: color .15s;
}
.tab:hover { color: var(--offwhite); }
.tab.active { color: var(--white); }
.tab.active::after { content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:3px; background: var(--yellow); border-radius: 3px 3px 0 0; }
.tab-count { display:inline-grid; place-items:center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; font-size: 11px; border-radius: 999px; background: var(--charcoal-line); color: var(--offwhite); }
.tab.active .tab-count { background: var(--yellow); color: var(--charcoal); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Counterpoint / similar list items */
.cp-list { display: flex; flex-direction: column; gap: 14px; }
.cp-item {
  display: flex; gap: 16px; align-items: center;
  background: var(--charcoal-soft);
  border: 1px solid var(--charcoal-line);
  border-left-width: 4px;
  border-radius: 12px;
  padding: 14px;
  transition: transform .15s, border-color .15s;
}
.cp-item:hover { transform: translateX(3px); }
.cp-item.lean-left   { border-left-color: #5b9bd5; }
.cp-item.lean-center { border-left-color: #b9bcc4; }
.cp-item.lean-right  { border-left-color: #d56b5b; }
.cp-thumb { width: 96px; height: 64px; border-radius: 8px; overflow: hidden; flex: none; }
.cp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cp-info { flex: 1; min-width: 0; }
.cp-info h4 { font-size: 15.5px; font-weight: 600; color: var(--white); line-height: 1.3; margin-bottom: 6px; }
.cp-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.lean-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.lean-tag.left   { background: rgba(91,155,213,0.18); color: #8cc0f0; }
.lean-tag.center { background: rgba(185,188,196,0.16); color: #d4d6db; }
.lean-tag.right  { background: rgba(213,107,91,0.18); color: #f0998c; }

.cp-intro { font-size: 14px; color: var(--muted); margin-bottom: 18px; line-height: 1.5; }

/* small format icon inline */
.fmt-inline { display:inline-grid; place-items:center; width: 22px; height: 22px; border-radius: 50%; background: var(--charcoal-line); color: var(--white); }
.fmt-inline svg { width: 12px; height: 12px; }

/* footer */
.foot { border-top: 1px solid var(--charcoal-line); padding: 28px 0; text-align: center; color: var(--muted); font-size: 13px; }
.foot .logo { font-size: 24px; margin-bottom: 6px; }

/* ============================================================
   COVERAGE TRANSPARENCY ("Every Source Counts")
   Lean triad: Left #3D6FA8 · Center #777 · Right #A8453D (no gold)
   ============================================================ */

/* #1 bias bar */
.bias-bar-wrap { display: flex; flex-direction: column; gap: 6px; }
.bias-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--charcoal-line); }
.bb-seg { height: 100%; }
.bias-bar-label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.bias-bar-label strong { color: var(--offwhite); font-weight: 600; }
/* "of N rated" — the denominator when a cluster mixes rated and unrated
   sources, so the percentage cannot be misread as a share of all coverage. */
.bias-bar-label .bb-of { color: var(--muted); font-weight: 400; }
.article-dek + .bias-bar-wrap { margin: 2px 0 22px; }

/* #6 feed card: bias bar + expand */
.card-coverage { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 11px; }
.coverage-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: 1px solid var(--charcoal-line); border-radius: 9px;
  padding: 9px 12px; color: var(--offwhite); font-size: 12.5px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.coverage-toggle:hover { border-color: #4a4b52; background: rgba(255,255,255,0.03); }
.coverage-toggle .ct-label { font-weight: 600; }
.coverage-toggle .ct-caret { margin-left: auto; display: inline-grid; place-items: center; transition: transform .2s ease; color: var(--muted); }
.coverage-toggle .ct-caret svg { width: 16px; height: 16px; }
.coverage-card.cov-open .ct-caret { transform: rotate(90deg); color: var(--yellow); }
.coverage-panel { display: none; flex-direction: column; gap: 14px; }
.coverage-card.cov-open .coverage-panel { display: flex; }
.cov-panel-foot { font-size: 11.5px; color: var(--muted); }

/* #3 coverage spectrum — bias bar v2 */
.cov-spectrum { padding: 4px 0 2px; }
.spec-positions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.spec-pos { display: flex; flex-direction: column; align-items: center; }
.spec-circles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 28px; }
.spec-circle {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--charcoal); border: 2px solid var(--muted);
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 600; color: var(--offwhite);
}
.spec-overflow { font-size: 10.5px; font-weight: 600; color: var(--muted); align-self: center; }
.spec-pos-label { margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-align: center; white-space: nowrap; }
.spec-more-toggle {
  display: block; margin: 10px auto 0; padding: 5px 16px; border: 1px solid var(--charcoal-line);
  border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px;
  font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s;
}
.spec-more-toggle:hover { color: var(--yellow); border-color: var(--yellow); }
.spec-expanded { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--charcoal-line); }
.spec-exp-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.spec-exp-label { font-size: 11px; font-weight: 700; letter-spacing: .03em; min-width: 80px; white-space: nowrap; }
.spec-exp-circles { display: flex; flex-wrap: wrap; gap: 4px; }

/* #2/#5 source landscape rows (link out) */
.cov-list { display: flex; flex-direction: column; gap: 8px; }
.cov-src {
  display: block; padding: 11px 13px; border: 1px solid var(--charcoal-line); border-radius: 10px;
  background: rgba(255,255,255,0.02); transition: border-color .15s ease, background .15s ease;
}
.cov-src:hover { border-color: #4a4b52; background: rgba(255,255,255,0.045); }
.cov-src-top { display: flex; align-items: center; gap: 8px; }
.cov-src-name { font-size: 13.5px; font-weight: 600; color: var(--white); }
.cov-ext { margin-left: auto; color: var(--muted); font-size: 14px; }
.cov-src:hover .cov-ext { color: var(--yellow); }
.cov-src-head { font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 6px; }
.cov-src-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.reporting-label { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.reporting-label.original { color: #cfcfc7; }
.meta-badge { font-size: 10.5px; color: var(--muted); border: 1px solid var(--charcoal-line); border-radius: 4px; padding: 2px 7px; }

/* #6 / #4 Coverage Map section on the story detail view */
.coverage-map { margin-top: 44px; }
.coverage-map .cov-spectrum { margin: 6px 0 4px; }
.cov-grid { display: grid; grid-template-columns: 1fr 240px; gap: 20px; margin-top: 18px; align-items: start; }
@media (max-width: 680px) { .cov-grid { grid-template-columns: 1fr; } }
.cov-details { background: var(--charcoal-soft); border: 1px solid var(--charcoal-line); border-radius: 12px; padding: 18px; }
.cov-details-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
.cd-total { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.cd-total-num { display: block; font-size: 28px; font-weight: 700; color: var(--white); line-height: 1; margin-bottom: 3px; }
.cd-breakdown { display: flex; flex-direction: column; gap: 9px; padding: 14px 0; border-top: 1px solid var(--charcoal-line); border-bottom: 1px solid var(--charcoal-line); }
.cd-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--offwhite); }
.cd-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cd-num { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.cd-foot { font-size: 12px; color: var(--muted); margin-top: 13px; }
.cd-orig { color: var(--offwhite); font-weight: 600; }
.cd-updated { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

/* ============================================================
   ROUND 7 — article two-column + homepage density
   ============================================================ */

/* (Round 10 item 3) the media-type filter row (.nav-row3 / .fmt-chip) is
   removed — every format flows into the one feed. */

/* #8 timestamp + #7a card counterpoint chip */
.card-foot .ts { white-space: nowrap; }
.cp-chip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--yellow);
  background: rgba(243,193,27,0.10); border: 1px solid rgba(243,193,27,0.30);
  border-radius: 999px; padding: 3px 10px;
}
.feed-empty { padding: 50px 24px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; }
.feed-empty strong { color: var(--offwhite); font-size: 16px; }
.feed-empty code { background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: .92em; color: var(--offwhite); }

/* ====== (Round 9 item 1) INLINE SEARCH PILL + wordmark bump ======
   The icon morphs into a yellow pill in place — no page transition, and the
   pill is the ONLY search input on the page (item 1). Collapsing the grid's
   left column is what moves the centred wordmark aside as the pill grows.
   (Round 10 item 2) That move now reads as a BUMP, not a glide: the layout
   snaps across in a short ease-out and the wordmark takes a small overshoot
   kick on top of it, so it looks shoved out of the way by the pill. */
/* The wordmark never actually travelled: `1fr` → `0px` is not an interpolable
   pair, so grid-template-columns flipped DISCRETELY and the wordmark cut 536px
   across in a single frame. No duration on that transition could slow it down.
   So the column collapse now happens instantly and invisibly, and the wordmark
   is carried across by a transform instead — --logo-shift is the distance the
   collapse just moved it (measured in openInlineSearch), so this stays exact at
   any viewport. It holds at its old spot while the pill grows toward it, then
   the hit sends it off: high initial velocity, long deceleration. */
.nav-row1 { grid-template-columns: 1fr auto 1fr; }
.nav.search-open .nav-row1 { grid-template-columns: 0px auto 1fr; }
.logo { --logo-shift: 0px; }
@media (prefers-reduced-motion: no-preference) {
  /* the .21s delay is the measured moment the pill's leading edge reaches the
     wordmark at this scale — the wordmark launches on contact, not before it */
  .nav.search-open .logo { animation: logo-shoved .46s cubic-bezier(.14, .82, .33, 1) .21s both; }
  @keyframes logo-shoved {
    0%   { transform: translateX(var(--logo-shift)); }   /* held: still centred */
    100% { transform: translateX(0); }                   /* landed at the left */
  }
  /* closing: the pill retreats first, then the wordmark comes back to centre */
  .nav.logo-return .logo { animation: logo-shoved .34s cubic-bezier(.25, .8, .35, 1) .06s both; }
}
.nav-search-pill {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  height: 42px; width: 0; padding: 0; overflow: hidden; opacity: 0;
  background: var(--yellow); border-radius: 999px;
  transition: width .5s cubic-bezier(.2, .8, .3, 1), padding .5s cubic-bezier(.2, .8, .3, 1), opacity .28s ease;
}
.nav.search-open .nav-search-pill { width: min(430px, 46vw); padding: 0 6px 0 15px; opacity: 1; }
.nsp-ico { width: 17px; height: 17px; flex: 0 0 auto; border: 2px solid #1c1d20; border-radius: 50%; position: relative; opacity: .85; }
.nsp-ico::after { content: ""; position: absolute; right: -5px; bottom: -3px; width: 7px; height: 2px; background: #1c1d20; transform: rotate(45deg); border-radius: 2px; }
#navSearchInput {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-family: inherit; font-size: 15px; font-weight: 500; color: #1c1d20;
}
#navSearchInput::placeholder { color: rgba(28, 29, 32, .55); }
#navSearchInput::-webkit-search-cancel-button { -webkit-appearance: none; }
.nsp-x {
  flex: 0 0 auto; width: 30px; height: 30px; border: none; border-radius: 50%;
  background: transparent; color: #1c1d20; font-size: 21px; line-height: 1; cursor: pointer;
  transition: background .15s ease;
}
.nsp-x:hover { background: rgba(28, 29, 32, .12); }
/* the icon shrinks away as the pill takes its place */
#searchBtn { transition: width .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, margin .3s ease; }
/* border-width goes too, or a 2px ring survives at width:0; the negative margin
   swallows one of the flex gaps the collapsed button would otherwise leave. */
.nav.search-open #searchBtn {
  width: 0; opacity: 0; margin: 0 0 0 -8px; padding: 0;
  border-width: 0; pointer-events: none;
}
/* Narrow viewports: the pill needs the whole icon row, so the remaining icons
   step aside while it is open rather than pushing the nav into overflow. */
@media (max-width: 720px) {
  .nav.search-open #bellBtn,
  .nav.search-open #userBtn,
  .nav.search-open #settingsBtn {
    width: 0; opacity: 0; margin: 0 0 0 -8px; padding: 0;
    border-width: 0; pointer-events: none;
    transition: width .22s cubic-bezier(.2, .85, .3, 1), opacity .16s ease, margin .22s ease;
  }
  /* sized off the space actually left beside the wordmark (≈92px + the wrap's
     24px gutters), not raw vw — 76vw overran the row on a 375px screen. */
  .nav.search-open .nav-search-pill { width: min(430px, calc(100vw - 150px)); }
}

/* ====== (Round 9 item 1, direction) tasteful micro-interactions ======
   Motion only on hover/enter, all short and transform/opacity based so nothing
   reflows or costs frames. No colour or type changes — brand system untouched. */
@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform .22s cubic-bezier(.22, 1, .36, 1), border-color .22s ease; }
  .card:hover { transform: translateY(-2px); border-color: var(--muted); }
  .card h3, .cr-head, .rst-head { transition: color .16s ease; }
  .cov-row { transition: background .16s ease; }
  .cov-row:hover { background: rgba(255, 255, 255, .035); }
  .cat-link, .stream-tab, .sv-chip { transition: color .16s ease, background .16s ease, border-color .16s ease; }
  .icon-btn { transition: transform .18s cubic-bezier(.22, 1, .36, 1), color .16s ease, border-color .16s ease; }
  .icon-btn:hover { transform: translateY(-1px); }
  .rail-story, .rst-thumb { transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
  .rail-story:hover .rst-thumb { transform: scale(1.04); }
  .sv-hero-link .sv-arrow { transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
  .sv-hero-link:hover .sv-arrow { transform: translateX(4px); }
  /* story view + search results settle in instead of snapping */
  .story-view.open .sv-panel { animation: sv-rise .26s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes sv-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ============ TWO-STREAM FEED (Breaking / In-depth) ============
   (Round 10 item 4) The two streams are the product's core split, so the
   toggle is a first-class control: horizontally centred in its own row and
   carried in brand gold rather than a muted grey pill. */
.nav-row4 {
  display: flex; justify-content: center;
  padding: 10px 0 8px; border-top: 1px solid var(--charcoal-line);
}
.stream-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 999px;
  background: rgba(243, 193, 27, .09);
  border: 1px solid rgba(243, 193, 27, .38);
}
.stream-tab {
  background: none; border: none; border-radius: 999px;
  padding: 8px 26px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  color: rgba(243, 193, 27, .72); cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.stream-tab:hover { color: var(--yellow); }
.stream-tab.active {
  background: var(--yellow); color: var(--charcoal);
  box-shadow: 0 1px 10px rgba(243, 193, 27, .22);
}
@media (max-width: 560px) { .stream-tab { padding: 7px 18px; font-size: 13.5px; } }

/* Sector selector — the orthogonal axis, sitting beside the stream toggle.
   Deliberately QUIETER than the toggle: Breaking/In-depth is the product's core
   split and stays the loudest control in the row; sector is a scope applied to
   whichever stream is showing. Outlined rather than filled so it reads as a
   modifier, not a third stream. */
.nav-row4 { gap: 10px; align-items: center; }
.sector-select {
  appearance: none;
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23f3c11b' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 9px 6px;
  border: 1px solid rgba(243, 193, 27, .30);
  border-radius: 999px;
  padding: 8px 30px 8px 16px;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: rgba(243, 193, 27, .82);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.sector-select:hover { color: var(--yellow); border-color: rgba(243, 193, 27, .55); }
.sector-select:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
/* The native dropdown list is drawn by the OS, so its options need explicit
   colours or they inherit a transparent background and become unreadable. */
.sector-select option { background: var(--charcoal); color: #e9e6df; }
@media (max-width: 560px) {
  .nav-row4 { flex-wrap: wrap; }
  .sector-select { padding: 7px 26px 7px 13px; font-size: 12.5px; }
}
/* In-depth entry card: the depth source leads, citations nest underneath */
.depth-badge { background: rgba(243,193,27,.92); color: #1c1d20; }
.depth-coverage { display: block; }
.depth-more { border-top: 1px solid var(--charcoal-line); }
.depth-cites { border-top: 1px solid var(--charcoal-line); }
.depth-cites summary {
  cursor: pointer; list-style: none; padding: 10px 2px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.depth-cites summary::-webkit-details-marker { display: none; }
.depth-cites summary::after { content: " ▾"; }
.depth-cites[open] summary::after { content: " ▴"; }
.depth-cites summary:hover { color: var(--yellow); }
.depth-cite-list { padding-bottom: 6px; }
.depth-nocite {
  border-top: 1px solid var(--charcoal-line); padding: 10px 2px;
  font-size: 12.5px; color: var(--muted); font-style: italic;
}

/* ===================== SEARCH (Feature Brief: Search) =====================
   (Round 10 item 1) The results header carries NO input — the nav pill is the
   single search entry point, so this is a heading + result count only. */
.search-head { margin: 2px 0 20px; }
.search-q { color: var(--yellow); }
.search-q::before { content: " · \201C"; color: var(--muted); }
.search-q::after { content: "\201D"; color: var(--muted); }
.search-meta {
  margin-top: 6px; min-height: 15px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.search-prompt { color: var(--muted); }

/* Supabase flat-feed cards (Rabbit Hole is the only bucket that still renders
   one outlet on its own — everything else must clear the breadth gate) */
.flat-card { color: inherit; }
.flat-card:hover h3 { color: var(--yellow); }
.rabbit-card { border-color: rgba(243, 193, 27, .28); }
.rabbit-card .rh-badge { background: rgba(20, 21, 23, .82); font-weight: 700; letter-spacing: .06em; }
.card-noimg { width: 100%; height: 100%; background: linear-gradient(135deg, #2f3035, #232428); }
.sidebar-note p { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* #7b "Same story, different angles" sidebar module */
.angle-item { display: block; padding: 13px 0; border-top: 1px solid var(--charcoal-line); }
.angle-item:first-of-type { border-top: none; padding-top: 2px; }
.angle-item h4 { font-size: 13.5px; font-weight: 600; color: var(--white); line-height: 1.32; margin-bottom: 9px; transition: color .15s ease; }
.angle-item:hover h4 { color: var(--yellow); }
.angle-item .bias-bar-wrap { gap: 5px; }

/* #1 article two-column layout */
.article-shell { padding: 30px 0 80px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 40px; align-items: start; }
.article-main { min-width: 0; }
.article-single { max-width: 760px; margin: 0 auto; }
.article-side { position: sticky; top: 130px; align-self: start; }
@media (max-width: 880px) {
  .article-layout { grid-template-columns: 1fr; gap: 28px; }
  .article-side { position: static; }
}
.by-fmt { display: inline-flex; align-items: center; gap: 5px; }
.by-fmt svg { width: 13px; height: 13px; }

/* perspective stats card (right column) */
.perspective-card { background: var(--charcoal-soft); border: 1px solid var(--charcoal-line); border-radius: var(--radius); padding: 20px; }
.pc-title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
.pc-title .accent-bar { width: 22px; height: 3px; background: var(--yellow); border-radius: 3px; }
.pc-total { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.pc-total-num { font-size: 30px; font-weight: 700; color: var(--white); margin-right: 6px; }
.pc-section { margin-bottom: 20px; }
.pc-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pc-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--charcoal-line); padding-top: 14px; }
.pc-foot strong { color: var(--offwhite); font-weight: 600; }

/* #2a bias by source type */
.coverage-by-type { display: flex; flex-direction: column; gap: 13px; }
.cbt-head { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--offwhite); margin-bottom: 7px; }
.cbt-head .cbt-n { margin-left: auto; color: var(--muted); }
.cbt-empty { font-size: 11.5px; color: var(--muted); font-style: italic; }
.bias-bar.mini { height: 7px; }

/* #2b legacy vs new ratio (white = legacy, yellow = new) */
.li-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--charcoal-line); margin-bottom: 9px; }
.li-leg { background: var(--offwhite); }
.li-ind { background: var(--yellow); }
.li-readout { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.li-key { display: flex; align-items: center; gap: 6px; }
.li-dot { width: 8px; height: 8px; border-radius: 50%; }
.li-dot.leg { background: var(--offwhite); }
.li-dot.ind { background: var(--yellow); }

/* #4 expanded "Also covered by" source rows */
.also-covered, .recs { margin-top: 42px; }
.ex-list { display: flex; flex-direction: column; gap: 12px; }
.see-more-btn {
  margin-top: 12px; padding: 10px 24px; border: 1px solid var(--charcoal-line);
  border-radius: 8px; background: var(--charcoal-soft); color: var(--yellow);
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.see-more-btn:hover { background: rgba(243,193,27,0.08); }
.ex-src {
  display: flex; gap: 14px; padding: 12px; border: 1px solid var(--charcoal-line);
  border-radius: 12px; background: var(--charcoal-soft);
  transition: border-color .15s ease, transform .15s ease;
}
.ex-src:hover { border-color: #4a4b52; transform: translateX(2px); }
.ex-thumb { position: relative; width: 150px; flex: none; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #1d1e21; }
.ex-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ex-fmt-chip { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(20,21,23,0.78); display: grid; place-items: center; color: #fff; }
.ex-fmt-chip svg { width: 13px; height: 13px; }
.ex-body { min-width: 0; flex: 1; }
.ex-top { display: flex; align-items: center; gap: 8px; }
.ex-name { font-size: 13.5px; font-weight: 600; color: var(--white); }
.ex-fact { font-size: 10.5px; color: var(--muted); border: 1px solid var(--charcoal-line); border-radius: 4px; padding: 2px 6px; }
.ex-ext { margin-left: auto; color: var(--muted); }
.ex-src:hover .ex-ext { color: var(--yellow); }
.ex-head { font-size: 15.5px; font-weight: 600; color: var(--white); line-height: 1.3; margin: 9px 0 5px; transition: color .15s ease; }
.ex-src:hover .ex-head { color: var(--yellow); }
.ex-dek { font-size: 13px; color: var(--muted); line-height: 1.45; }
.ex-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.ex-fmt { display: inline-flex; align-items: center; gap: 5px; }
.ex-fmt svg { width: 13px; height: 13px; }
.ex-reporting { margin-top: 8px; }
@media (max-width: 520px) {
  .ex-src { flex-direction: column; }
  .ex-thumb { width: 100%; aspect-ratio: 16 / 9; }
}

/* ============================================================
   ROUND 8 — story view + adaptive spectrum
   ============================================================ */

/* perspective card total now links to the story view */
a.pc-total { display: block; color: inherit; text-decoration: none; }
a.pc-total:hover .pc-total-link { color: var(--yellow); }
.pc-total-link { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--muted); transition: color .15s ease; }

/* source-view: link up to the full story + read-original */
.story-link { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--yellow); margin: 0 0 16px; }
.story-link:hover { text-decoration: underline; }
.read-original {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 16px 0 4px; padding: 10px 16px;
  background: var(--yellow); color: var(--charcoal);
  font-size: 13.5px; font-weight: 600; border-radius: 999px;
  transition: opacity .15s ease;
}
.read-original:hover { opacity: .88; }


/* ============================================================
   ROUND 3 ADDITIONS
   ============================================================ */

/* ---- hero: top-left label pills (item 5) ---- */
.hero-toplabels {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(20,21,23,0.8);
  backdrop-filter: blur(4px);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.hero-pill.cat { color: var(--yellow); }
.hero-pill.count { color: var(--offwhite); }

/* ---- media badges (shared): video / rabbit-hole ---- */
.media-badge {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(20,21,23,0.82);
  backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--white);
}
.media-badge .vb-ico { display: inline-grid; place-items: center; }
.media-badge .vb-ico svg { width: 12px; height: 12px; color: var(--offwhite); }
/* hero top-right container holds video + developing, stacked */
.media-badges { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.media-badges .media-badge, .media-badges .dev-badge { position: static; }
.rh-badge { top: 12px; right: 12px; color: var(--yellow); }

/* ---- card structure (single click target, item 1) ---- */
.card-hit { display: block; color: inherit; }
a.card-hit { cursor: pointer; }
.card-top { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 9px; }
.card-sources { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.card h3, .slide-card h3 {
  font-size: 17px; line-height: 1.28; font-weight: 600; color: var(--white);
  letter-spacing: -0.005em; transition: color .18s ease;
}
.card-hit:hover h3, .slide-card:hover h3 { color: var(--yellow); }

/* Daily Digest — thin cream rule at the top (item 3c) */
.digest-module { border-top: 2px solid rgba(232, 220, 196, 0.55); }

/* ---- article sliders (item 8) ---- */
.slider-section { margin-top: 46px; display: flex; flex-direction: column; gap: 34px; }
.slider-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.slider-head h3 { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white); }
.slider-nav { display: flex; gap: 6px; }
.slider-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: transparent; border: 1px solid var(--charcoal-line); color: var(--offwhite);
  transition: all .15s ease;
}
.slider-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.slider-btn svg { width: 16px; height: 16px; }
.slider-track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slide-card {
  flex: 0 0 300px; scroll-snap-align: start;
  background: var(--charcoal-soft); border: 1px solid var(--charcoal-line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s ease, border-color .15s ease;
}
@media (max-width: 620px) { .slide-card { flex-basis: 260px; } }
.slide-card:hover { transform: translateY(-3px); border-color: #4a4b52; }
.slide-card:hover .format-chip { background: var(--yellow); color: var(--charcoal); }
.mini-src { display: flex; gap: 9px; align-items: flex-start; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; transition: background .15s ease; }
.mini-src:hover { background: rgba(255,255,255,0.04); }
.mini-src-body { min-width: 0; }
.mini-src-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.mini-src-head { font-size: 12.5px; color: var(--offwhite); line-height: 1.3; }

/* ===== Settings modal (language filter) ===== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-card {
  width: 100%; max-width: 420px;
  background: var(--charcoal-soft);
  border: 1px solid var(--charcoal-line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--charcoal-line);
}
.modal-head h3 { font-size: 16px; font-weight: 600; color: var(--white); }
.modal-x {
  background: none; border: none; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.modal-x:hover { color: var(--white); }
.modal-body { padding: 18px; }
.set-group-title { font-size: 13px; font-weight: 600; color: var(--offwhite); text-transform: uppercase; letter-spacing: 0.04em; }
.set-hint { font-size: 12.5px; color: var(--muted); margin: 4px 0 12px; }
.set-langs { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.set-lang {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--offwhite); cursor: pointer;
  padding: 6px 8px; border-radius: 8px;
}
.set-lang:hover { background: rgba(255,255,255,0.04); }
.set-lang input { accent-color: var(--yellow); width: 15px; height: 15px; cursor: pointer; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--charcoal-line);
}
.btn-ghost, .btn-primary {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 16px; border-radius: 9px; cursor: pointer; border: 1px solid transparent;
}
.btn-ghost { background: none; border-color: var(--charcoal-line); color: var(--offwhite); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-primary { background: var(--yellow); color: #1c1d20; }
.btn-primary:hover { filter: brightness(1.06); }

/* ============================================================
   UI / LAYOUT FIX ROUND — 3-column layout, full-page story view,
   shared coverage row, brand bias bar, publisher monograms, video.
   ============================================================ */

/* ---- item 4: three-column layout + sticky rails ---- */
.layout { grid-template-columns: 1fr 336px; align-items: start; }
.feed-col { min-width: 0; }
/* (Round 7 item 11) smaller staggered multi-card layout — two masonry
   columns in the centre so more stories fit per viewport. */
.feed-col .grid { column-count: 2; column-gap: 18px; }
.feed-col .grid > * { margin-bottom: 18px; }
@media (max-width: 620px) { .feed-col .grid { column-count: 1; } }

/* (Round 7 item 8) smaller hero image on cards; (item 11) tighter card type */
.coverage-card .card-media { aspect-ratio: 16 / 10; }
.coverage-card .card-top { padding: 12px 13px 12px; gap: 7px; }
.coverage-card .card-top h3 { font-size: 15px; line-height: 1.25; }
.coverage-card .card-dek { font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.coverage-card .card-foot { font-size: 11.5px; gap: 6px; }
.coverage-card .card-foot img, .coverage-card .card-foot .src-mono { width: 15px; height: 15px; }
.card-coverage { padding: 0 13px 13px; }
.src-count-badge { position: absolute; right: 10px; bottom: 10px; background: rgba(20,21,23,.82); backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }

/* (Round 7 item 12) data-bar blocks, shared by both sizes of the composition
   panel. `.dual-bars` is GONE with the card's old two-bare-bars treatment —
   see Brief E item 3 and compositionPanel() in js/membership.js. */
.db-block { display: flex; flex-direction: column; gap: 4px; }
.db-label { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.db-block .bias-bar-wrap, .db-block .li-ratio { gap: 4px; }
.db-block--type { margin-top: 14px; }

/* ---- (Brief E item 3) THE COMPOSITION PANEL, CARD SIZE ----
   The card renders the SAME component as the detail rail, so everything here
   is type scale and spacing ONLY. Not one number, base sentence or row is
   added or removed by these rules — if a figure is missing on the card it is
   missing on the detail too, which is the point. */
.comp-panel--card { display: flex; flex-direction: column; }
.comp-panel--card .sv-h { font-size: 9.5px; letter-spacing: .06em; margin-bottom: 6px; }
.comp-panel--card .cd-total { margin: 0 0 9px; font-size: 11px; }
.comp-panel--card .cd-total-num { font-size: 17px; margin-right: 4px; }
.comp-panel--card .sv-bar { height: 7px; border-radius: 4px; }
/* the lean legend goes horizontal on a card: five stacked rows would be taller
   than the headline above them */
.comp-panel--card .cd-breakdown { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.comp-panel--card .cd-row { font-size: 10.5px; gap: 5px; }
.comp-panel--card .cd-dot { width: 7px; height: 7px; border-radius: 2px; }
.comp-panel--card .cd-num { margin-left: 3px; }
.comp-panel--card .cd-row-unrated { padding-top: 0; margin-top: 0; border-top: none;
  border-left: 1px dashed var(--charcoal-line); padding-left: 10px; }
.comp-panel--card .cd-base { font-size: 9.5px; line-height: 1.4; margin-top: 6px; }
.comp-panel--card .sv-lg-wrap { margin-top: 10px; }
.comp-panel--card .sv-lg-label { font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.comp-panel--card .sv-lg-logos { gap: 4px; margin-top: 4px; }
.comp-panel--card .sv-lg-logos img, .comp-panel--card .sv-lg-logos .src-mono {
  width: 17px; height: 17px; border-radius: 4px; }
.comp-panel--card .cd-updated { font-size: 9.5px; margin-top: 8px; }
/* "+243" — the rest of the roster the preview could not fit. It is a count of
   outlets the reader is NOT seeing, so it is muted rather than a chip that
   reads as another outlet. */
.comp-more { display: inline-flex; align-items: center; height: 17px; padding: 0 5px;
  font-size: 9.5px; font-weight: 700; color: var(--muted); }
.comp-panel--detail .comp-more { height: 24px; font-size: 11px; }
.comp-panel--unresolved .cd-base { margin-top: 0; }
/* (Round 8 item 4) anchor the sticky rails BELOW the full sticky header
   (--nav-h is measured in JS from the actual nav height, which has 3 rows)
   so their top content isn't clipped behind it on scroll. */
.rail { align-self: start; position: sticky; top: calc(var(--nav-h, 150px) + 14px);
  max-height: calc(100vh - var(--nav-h, 150px) - 28px);
  overflow-y: auto; overflow-x: hidden; }
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--charcoal-line); border-radius: 3px; }
/* Narrow-viewport behaviour (stated): ≤1100px a slightly narrower right
   rail; ≤860px everything is one column and the rails un-stick and stack
   below the feed rather than crushing it. */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr 320px; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .rail { position: static; max-height: none; overflow: visible; }
  .rail-right { order: 3; }
}

/* ---- item 4: right rail story rows ---- */
.rail-stories { display: flex; flex-direction: column; }
.rail-story { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid var(--charcoal-line); color: inherit; cursor: pointer; }
.rail-story:first-child { border-top: none; }
.rail-story:hover .rst-head { color: var(--yellow); }
.rst-thumb { width: 60px; height: 60px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; background: #1d1e21; }
.rst-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.rst-head { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--offwhite); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.rst-meta { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
/* (Round 7 item 10) ranking numeral in the Feeds wordmark font */
.rank-num { font-family: "Pirata One", cursive; font-size: 27px; line-height: 1; color: var(--yellow); flex: 0 0 auto; width: 22px; text-align: center; align-self: flex-start; margin-top: 1px; }

/* ---- item 6: publisher monogram (never a platform logo) ---- */
.src-mono { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 4px;
  background: var(--charcoal-line); color: var(--yellow); font-weight: 700; line-height: 1; }

/* ---- items 1/2: shared coverage row (card siblings + story list) ---- */
.card-siblings { padding: 0 16px 4px; }
.cov-row { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--charcoal-line); color: inherit; text-decoration: none; }
.cov-row:hover .cr-head { color: var(--yellow); }
a.cov-row { cursor: pointer; }
.cr-thumb { width: 68px; height: 68px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; background: #1d1e21; }
.cr-noimg { background: linear-gradient(135deg,#2f3035,#232428); }
.cr-body { min-width: 0; flex: 1; }
.cr-top { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.cr-top img, .cr-top .src-mono { width: 18px; height: 18px; }
.cr-name { color: var(--offwhite); font-weight: 500; }
.cr-head { font-size: 13.5px; line-height: 1.35; color: var(--offwhite); margin: 3px 0; transition: color .15s; }
.cr-meta { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* ---- item 3: bias pill — brand palette, readable, never white ---- */
.bias-pill { padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.bias-pill.compact { padding: 1px 5px; }

/* ---- item 5: video card == article card (only the play chip differs) ---- */
.card .card-media { aspect-ratio: 16 / 9; }   /* video never renders larger than an article card */

/* ---- item 1: full-page story view ---- */
.story-view { position: fixed; inset: 0; z-index: 200; }
.sv-backdrop { position: absolute; inset: 0; background: rgba(10,10,12,.6); opacity: 0; transition: opacity .2s ease; }
.sv-panel { position: absolute; inset: 0; background: var(--charcoal); overflow: hidden; transform: scale(.975); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
.story-view.open .sv-backdrop { opacity: 1; }
.story-view.open .sv-panel { transform: none; opacity: 1; }
.sv-scroll { height: 100%; overflow-y: auto; }
.sv-topbar { position: sticky; top: 0; z-index: 2; background: rgba(38,39,43,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--charcoal-line); padding: 12px 24px; }
.sv-close { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--charcoal-line); color: var(--offwhite); padding: 7px 14px 7px 10px; border-radius: 9px; font-weight: 600; font-size: 13.5px; }
.sv-close:hover { border-color: var(--muted); }
.sv-close svg { width: 18px; height: 18px; }
.sv-inner { max-width: 920px; margin: 0 auto; padding: 26px 24px 90px; }
.sv-title { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: var(--white); margin: 6px 0 8px; }
.sv-headmeta { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sv-hero-link { display: block; margin-top: 16px; border: 1px solid var(--charcoal-line); border-radius: var(--radius); overflow: hidden; background: var(--charcoal-soft); }
.sv-hero-link:hover { border-color: #4a4b52; }
.sv-hero-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.sv-hero-cta { display: flex; align-items: center; gap: 9px; padding: 13px 16px; font-weight: 600; color: var(--offwhite); }
.sv-hero-cta img, .sv-hero-cta .src-mono { width: 20px; height: 20px; }
/* (Round 13 item 2) the byline is the span directly after the separator dot —
   adjacent-sibling, not `~`, so the arrow further along is not caught. Muted
   and lighter so it reads as attribution rather than part of the CTA label. */
.sv-hero-cta .dot-sep + span { color: var(--muted); font-weight: 500; }
.sv-hero-cta .sv-arrow { margin-left: auto; color: var(--yellow); }
.sv-cols { display: grid; grid-template-columns: 1fr 260px; gap: 22px; margin: 26px 0; align-items: start; }
@media (max-width: 720px) { .sv-cols { grid-template-columns: 1fr; } .sv-title { font-size: 24px; } }
.sv-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 10px; }
.sv-dist, .sv-details { background: var(--charcoal-soft); border: 1px solid var(--charcoal-line); border-radius: var(--radius); padding: 16px; }
.sv-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--charcoal-line); }
.sv-seg { height: 100%; }
.sv-lg-wrap { margin-top: 14px; display: flex; flex-direction: column; gap: 11px; }
.sv-lg-label { font-size: 11.5px; font-weight: 700; }
.sv-lg-logos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.sv-lg-logos img, .sv-lg-logos .src-mono { width: 24px; height: 24px; border-radius: 5px; }
.cd-total { margin: 2px 0 12px; color: var(--muted); font-size: 13px; }
.cd-total-num { font-size: 26px; font-weight: 700; color: var(--offwhite); margin-right: 5px; }
.cd-breakdown { display: flex; flex-direction: column; gap: 7px; }
.cd-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cd-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.cd-num { margin-left: auto; color: var(--muted); }
/* (Brief B item 6) The Unrated row is an absence, not a lean position: it is
   set apart from the rated rows above it and carries a count, never a share. */
.cd-row-unrated { color: var(--muted); padding-top: 7px; margin-top: 2px; border-top: 1px dashed var(--charcoal-line); }
/* the stated base for a bar's percentages — always visible, never a tooltip */
.cd-base { font-size: 11px; line-height: 1.45; color: var(--muted); margin-top: 8px; }
.sv-legnew { display: flex; align-items: center; gap: 7px; margin: 13px 0 6px; font-size: 12.5px; color: var(--muted); }
.ln-dot { width: 9px; height: 9px; border-radius: 50%; }
.ln-dot.legacy { background: var(--white); }
.ln-dot.new { background: var(--yellow); }
.cd-updated { font-size: 11.5px; color: var(--muted); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.sv-chip { background: none; border: 1px solid var(--charcoal-line); color: var(--muted); padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.sv-chip.active { background: var(--yellow); color: #1c1d20; border-color: var(--yellow); }
.sv-list .cov-row:first-child { border-top: none; }

/* (Round 7 items 2/3/4/5/7) story-view layout: main column + stats rail */
.sv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; max-width: 1300px; margin: 0 auto; padding: 24px 24px 90px; align-items: start; }
.sv-rail { position: sticky; top: 74px; align-self: start; display: flex; flex-direction: column; gap: 18px; max-height: calc(100vh - 92px); overflow-y: auto; overflow-x: hidden; }
.sv-rail::-webkit-scrollbar { width: 6px; }
.sv-rail::-webkit-scrollbar-thumb { background: var(--charcoal-line); border-radius: 3px; }
.sv-main { min-width: 0; }
.sv-dek { font-size: 15px; color: var(--muted); line-height: 1.5; margin: 4px 0 10px; }   /* item 5: deck under headline */
.sv-similar { margin-top: 28px; }
.sv-similar .rail-story { cursor: pointer; }
/* narrow-viewport (stated): ≤1080px one column, stats rail hidden. */
@media (max-width: 1080px) {
  .sv-layout { grid-template-columns: 1fr; }
  .sv-rail-right { display: none; }
}

/* ============================================================
   LIVE (YouTube news channels) — standalone /live destination.
   Scoped entirely to .live-* classes and the one nav link, so nothing here
   can reach the feed, the category pages or the story views.
   ============================================================ */

/* Nav item — sits immediately right of Rabbit Hole, before the divider that
   separates the feature destinations from the real categories. Red is the
   only non-brand colour on the page and it is doing the one job red does:
   marking a broadcast that is happening now. */
.cat-link.live-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--offwhite);
  font-weight: 600;
}
.cat-link.live-link:hover { color: var(--white); }
.cat-link.live-link.active { color: var(--white); }
.cat-link.live-link.active::after { background: var(--live-red); }
.live-ico {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--live-red);
  box-shadow: 0 0 0 0 rgba(224, 69, 58, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .live-ico, .live-dot { animation: live-pulse 2s ease-out infinite; }
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 69, 58, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(224, 69, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 69, 58, 0); }
}

/* .live-shell shares its element with .wrap, so only the VERTICAL padding is
   set here — a `padding:` shorthand would win the cascade and take the wrap's
   24px side gutter with it, letting the grid run to the viewport edge. */
.live-shell { padding-top: 28px; padding-bottom: 80px; }

/* Two players per row on desktop, one on narrow viewports. Not the feed's
   masonry .grid: a video card has a fixed aspect ratio, so column flow buys
   nothing and a plain grid keeps the players aligned. */
/* (Round 17 item 7) Rows by category, and SMALLER players.
   Two columns made every stream a hero — the page could show four broadcasts
   above the fold and each one dominated the screen. Rows of three (four on a
   wide viewport) fit a scannable page while keeping the player large enough to
   actually watch, which is what a live page is for. */
.live-grid { display: block; }
.live-row { margin-bottom: 34px; }
.live-row-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; margin-bottom: 12px;
}
.live-row-count {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-left: auto;
}
/* One row per category, scrolling sideways when it holds more than fits.
   Cards keep the grid's old width — 3 across a standard desktop — so the
   change is what happens to the 4th card, not how big the first three are.
   The negative margin + matching padding let a scrolled card bleed to the
   page edge instead of stopping at an arbitrary inset. */
.live-row-grid {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  padding: 2px 2px 10px;
  margin: -2px -2px 0;
  scrollbar-width: none;              /* the arrows are the affordance */
  -ms-overflow-style: none;
}
.live-row-grid::-webkit-scrollbar { display: none; }
.live-row-grid > .live-card {
  flex: 0 0 calc((100% - 36px) / 3);
  scroll-snap-align: start;
}
@media (min-width: 1400px) { .live-row-grid > .live-card { flex-basis: calc((100% - 54px) / 4); } }
@media (max-width: 1040px) { .live-row-grid > .live-card { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 680px)  { .live-row-grid > .live-card { flex-basis: 88%; } }

.live-row-nav { display: flex; gap: 6px; margin-left: 12px; }
.live-arrow {
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  color: var(--text);
  background: var(--charcoal-soft);
  border: 1px solid var(--charcoal-line);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.live-arrow:hover:not(:disabled) { background: var(--charcoal-line); }
.live-arrow:disabled { opacity: .3; cursor: default; }

.live-card {
  background: var(--charcoal-soft);
  border: 1px solid var(--charcoal-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* ------------------------------------------------------------
   THE TILE  (Live Phase 1, item 5)

   Fixed 16:9, sized by aspect-ratio and never by its contents, so swapping
   between thumbnail tiers - or from a tier to the placeholder, or to a
   player - moves nothing on the page. That is the whole of "no layout shift
   between tiers": nothing inside the box can influence the box.
   ------------------------------------------------------------ */
.live-player { position: relative; aspect-ratio: 16 / 9; background: #14151a; overflow: hidden; }
.live-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* The placeholder is ALWAYS present, underneath everything. It is an inline
   SVG data URI, so it cannot 404 and costs no request - a placeholder that can
   itself fail is not a placeholder. Tier 7 is a rendered state, not an error. */
.live-ph {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
}

/* The resolved frame sits on top and is INVISIBLE until it loads. That is what
   makes "a broken <img> must never render" true by construction rather than by
   handler timing: an image that 404s is never painted at any point, because it
   only becomes visible on its own load event.

   object-fit: cover with a defined centre crop - hqdefault and mqdefault are
   served 4:3 with the frame letterboxed inside, so `contain` would letterbox a
   letterbox and `fill` would stretch faces. Cover crops the black bars off. */
.live-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity .18s ease-out;
  z-index: 1;
}
.live-thumb.loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .live-thumb { transition: none; } }

/* Play affordance. The player is mounted on click rather than at page load -
   the page used to boot one third-party iframe per card. */
.live-play {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.live-play::after {
  content: "";
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(20, 21, 23, .72) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
  backdrop-filter: blur(4px);
  transition: transform .15s ease-out, background-color .15s ease-out;
}
.live-play:hover::after { transform: scale(1.08); }
.live-play:focus-visible { outline: 2px solid var(--live-red); outline-offset: -3px; }

/* An embed this reader cannot play (a per-country block is invisible to the
   Data API and only shows up in the player). The card is not hidden - the
   outlet IS live, and the reader can still get there. */
.live-offsite {
  position: absolute; inset: auto 0 0 0; z-index: 4;
  padding: 9px 12px;
  background: rgba(20, 21, 23, .88);
  font-size: 11.5px; font-weight: 600; color: var(--white);
  text-align: center; text-decoration: none;
}
.live-offsite:hover { text-decoration: underline; }

/* ---- offline (item 6) ----
   Visually distinct and quiet: a registered source that is not broadcasting is
   a normal, expected state, not a failure. It is dimmed and desaturated rather
   than hidden, so the reader can see the stream is carried and simply is not
   on right now. It renders NO frame - the poller retires live_video_id on the
   way offline, so there is no previous broadcast's image to show. */
.live-card.offline { opacity: .62; }
.live-card.offline .live-ph { filter: grayscale(1); }
.live-card.offline:hover { opacity: .82; }
.live-badge.off {
  background: rgba(20, 21, 23, .78);
  color: var(--muted);
  letter-spacing: .04em;
}

/* Institutional streams carry no lean pill - they are primary source, not
   coverage (D4). This marks that positively rather than leaving a gap. */
.live-primary {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--charcoal-line);
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--muted); white-space: nowrap;
}

/* Reuses the .dev-badge treatment (same corner, same pill) in live red. */
.live-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(20, 21, 23, 0.78);
  backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--white);
  pointer-events: none;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live-red); flex: none; }

/* Text scales with the smaller player, or a three-up row reads as three
   oversized captions under three small videos. */
.live-body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 5px; }
.live-outlet { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.live-logo { width: 22px; height: 22px; border-radius: 4px; object-fit: contain; background: var(--charcoal-line); flex: none; }
.live-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--offwhite); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.live-meta { font-size: 11.5px; color: var(--muted); }

.live-empty { border: 1px dashed var(--charcoal-line); border-radius: var(--radius); }
.live-grid:has(.live-empty) { display: block; }

/* ============================================================
   (Brief B item 3) SURFACE SWITCHER — shared shell chrome.
   News and Intelligence are peer surfaces; this sits in the left cell of
   nav-row1 on both, so each is one click from the other. It is shell, not
   category navigation: the two surfaces share nothing below this row.
   ============================================================ */
.surface-nav { display: flex; gap: 4px; align-items: center; justify-self: start; width: auto; }
.surface-link {
  padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--muted); border: 1px solid transparent;
  transition: color .15s ease;
}
.surface-link:hover { color: var(--offwhite); }
.surface-link.active { color: var(--yellow); background: var(--charcoal-soft); border-color: var(--charcoal-line); }
/* the left grid cell collapses to 0 while the search pill is open */
.nav.search-open .surface-nav { display: none; }

/* ============================================================
   (Brief B item 3) INTELLIGENCE — scaffold surface.
   Layout regions only; every state below is an honest empty state driven by
   live counts. No lean badge, bar, or filter styling exists on this surface.
   ============================================================ */
.intel-shell { padding: 28px 0 80px; display: flex; flex-direction: column; gap: 26px; }
.intel-intro { max-width: 720px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.intel-region {
  background: var(--charcoal-soft);
  border: 1px solid var(--charcoal-line);
  border-radius: var(--radius);
  padding: 24px;
}
.intel-region .section-head { margin-bottom: 6px; }
.intel-region-sub { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 720px; margin-bottom: 18px; }
.intel-empty {
  border: 1px dashed var(--charcoal-line); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
}
.intel-count-row { display: flex; align-items: baseline; gap: 10px; }
.intel-count { font-family: "Pirata One", cursive; font-size: 40px; line-height: 1; color: var(--yellow); }
.intel-count-label { font-size: 14px; font-weight: 600; color: var(--white); }
.intel-empty-why { font-size: 13px; color: var(--offwhite); line-height: 1.5; max-width: 640px; }
.intel-checked { font-size: 11.5px; color: var(--muted); }

/* ============================================================
   (Brief B items 4 + 5) PUBLISHER PAGE and PUBLISHER DIRECTORY.
   Every value rendered by these rules comes from a source-table row.
   ============================================================ */
.pub-shell { padding: 28px 0 80px; display: flex; flex-direction: column; gap: 26px; }

/* an outlet mark or source row that links to its publisher page */
.pub-link { color: inherit; cursor: pointer; }
.pub-link:hover { color: var(--yellow); }

.pub-head {
  background: var(--charcoal-soft); border: 1px solid var(--charcoal-line);
  border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.pub-identity { display: flex; gap: 16px; align-items: center; }
.pub-mark { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--charcoal-line); flex: 0 0 auto; }
.pub-id-body { min-width: 0; }
.pub-id-body h1 { font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--white); letter-spacing: -0.01em; }
.pub-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.pub-type { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--offwhite); }
.pub-site { font-size: 12.5px; color: var(--muted); }
.pub-site:hover { color: var(--yellow); }

.pub-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.pub-stat { display: flex; flex-direction: column; gap: 2px; }
.pub-stat-n { font-family: "Pirata One", cursive; font-size: 34px; line-height: 1; color: var(--yellow); }
.pub-stat-l { font-size: 12px; color: var(--muted); }

.pub-chips { display: flex; flex-direction: column; gap: 8px; }
.pub-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pub-chip {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--charcoal-line); background: transparent;
  font-size: 12.5px; font-weight: 600; color: var(--offwhite); text-transform: capitalize;
}
.pub-chip-sector { border-color: rgba(232, 220, 196, 0.35); color: var(--editorial-cream); }
.pub-chip-none { color: var(--muted); font-weight: 500; font-style: italic; text-transform: none; }

/* The shared coverage row is a flex row with a fixed thumb and a fluid body,
   sized for the story view's centre column. Give it the same measure here so
   headlines wrap at a readable line length instead of the full page width. */
.pub-list { max-width: 860px; }
.pub-list .ex-list { margin-top: 4px; gap: 0; }
.pub-list .cov-row:first-child { border-top: none; }
.pub-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.pub-pager-at { font-size: 12.5px; color: var(--muted); }
.see-more-btn[disabled] { opacity: .4; pointer-events: none; }

/* ---- directory (item 5) ---- */
.dir-shell { padding: 28px 0 80px; display: flex; flex-direction: column; gap: 20px; }
.dir-controls {
  background: var(--charcoal-soft); border: 1px solid var(--charcoal-line);
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.dir-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dir-filter-label { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); width: 74px; flex: 0 0 auto; }
.dir-chip {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--charcoal-line); background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 600;
}
.dir-chip:hover { color: var(--offwhite); }
.dir-chip.active { background: var(--yellow); color: #1c1d20; border-color: var(--yellow); }
.dir-chip .dir-chip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.dir-search {
  flex: 1; min-width: 180px;
  background: var(--charcoal); border: 1px solid var(--charcoal-line);
  border-radius: 999px; padding: 7px 14px;
  color: var(--white); font-size: 13px; font-family: inherit;
}
.dir-search::placeholder { color: var(--muted); }
.dir-search:focus { outline: none; border-color: var(--yellow); }
.dir-summary { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; }
.dir-summary strong { color: var(--white); font-size: 15px; }
.dir-summary-note { color: var(--muted); }

.dir-table { display: flex; flex-direction: column; }
.dir-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 132px 92px 78px;
  gap: 12px; align-items: center;
  padding: 11px 8px; border-top: 1px solid var(--charcoal-line);
  color: inherit;
}
.dir-row:first-child { border-top: none; }
.dir-row:hover { background: rgba(255,255,255,0.03); }
.dir-row:hover .dir-name { color: var(--yellow); }
.dir-head {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 132px 92px 78px;
  gap: 12px; padding: 0 8px 9px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.dir-sort { text-align: left; color: var(--muted); font: inherit; letter-spacing: inherit; text-transform: inherit; }
.dir-sort:hover { color: var(--offwhite); }
.dir-sort.active { color: var(--yellow); }
.dir-num { text-align: right; }
.dir-name { font-size: 13.5px; font-weight: 600; color: var(--offwhite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
.dir-type { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dir-count { text-align: right; font-size: 13px; color: var(--offwhite); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .dir-row, .dir-head { grid-template-columns: 28px minmax(0, 1fr) 84px; }
  .dir-row .dir-type, .dir-head .dir-col-type { display: none; }
}