/*
 ╔══════════════════════════════════════════════════════════════════════╗
 ║  BHARAT PULSE — VISUAL MANIFESTO                                    ║
 ║                                                                      ║
 ║  Ink before ornament. One white page, hard contrast, civic          ║
 ║  restraint. Colour names systems, never parties. Serif authority,   ║
 ║  sans utility. No glow, no emoji in chrome, no gradients —          ║
 ║  publish like India's public record.                                ║
 ║                                                                      ║
 ║  Evidence-backed reset (NYT / FT / Hindu / Frontline / ProPublica): ║
 ║   1. Pure white background — every serious newsroom does this       ║
 ║   2. Near-black ink (#1A1A1A) — universal, not pure black           ║
 ║   3. Maroon accent (#B01220) — Hindu/Express/Caravan/EPW heritage   ║
 ║   4. Serif headlines + sans UI — never reversed                     ║
 ║   5. Accent on ≤5% of surface — masthead + section rules only       ║
 ║   6. Status pills are TYPOGRAPHIC (ALL-CAPS), never coloured fills  ║
 ║   7. Zero emoji in editorial chrome                                 ║
 ║   8. Images rectangular — border-radius: 0 always                   ║
 ║   9. Flat-colour masthead, never gradient                           ║
 ║  10. Single-mode publication — no dark-light toggle                 ║
 ╚══════════════════════════════════════════════════════════════════════╝
*/

/* ====================== TOKENS — NEWSROOM RESET ====================== */
:root {
  /* Surface — pure white, no cream */
  --bg:           #ffffff;
  --bg-alt:       #F8F8F8;        /* hover only, not a card fill */
  --card:         #ffffff;
  --card-alt:     #FAFAF7;        /* very subtle differentiation when needed */
  /* Ink */
  --text:         #1A1A1A;        /* near-black, ~18:1 contrast */
  --muted:        #6B6B6B;        /* bylines, datelines, captions */
  --muted-strong: #4A4A4A;        /* darker secondary */
  /* Rules */
  --border:       #DEDEDE;        /* 1px primary divider */
  --border-soft:  #EFEFEF;        /* card separators, weak dividers */
  /* Brand — single Indian-institutional maroon */
  --brand:        #B01220;        /* The Hindu lineage; institutional, not party */
  --brand-strong: #8E0F1A;        /* hover */
  --brand-soft:   #F8E7E9;        /* faintest tint for the rare wash */
  /* Severity — ONLY for Breaking/Live + Crisis/Accountability rule */
  --live:         #CC0000;
  /* Civic verdict ink for Verify/Vote actions */
  --civic:        #1A3D7C;
  /* Legacy semantic colours preserved (deprecated, slowly migrating) */
  --saffron:      #B01220;        /* aliased to brand so old refs don't shout */
  --green:        #1A4D34;
  --outrage:      #B01220;
  --hope:         #6B5320;
  --good:         #1A4D34;
  --bad:          #6B5320;
  --ugly:         #B01220;
  --ink-on-acc:   #ffffff;
  /* Type — The Hindu's validated production stack */
  --display: 'Playfair Display', 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', Georgia, serif;
  --serif:   'Merriweather', 'Noto Serif Devanagari', Georgia, serif;
  --sans:    'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    ui-monospace, 'SF Mono', Menlo, monospace;
  --serif-deva: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', 'Playfair Display', Georgia, serif;
  /* No shadows — newsrooms don't drop-shadow */
  --shadow-1: none;
  --shadow-2: none;
  /* Layout */
  --maxw: 1180px;
  --gutter: 22px;
  /* Radius — newsrooms square corners. Editorial chrome only gets 0–2px. */
  --radius:    2px;
  --radius-lg: 2px;
}
/* Dark-mode block intentionally deleted — single-mode publication. */

@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { font-size: 16px; line-height: 1.55; padding-bottom: 80px; /* room for mobile bottom nav */ }
img { border-radius: 0 !important; }   /* newsrooms square corners on photographs */
/* CRITICAL: many sections below use display:grid/flex which would override the
   browser's default [hidden] { display: none } rule. Restore the contract. */
[hidden] { display: none !important; }
a { color: inherit; }
a:hover { color: var(--saffron); }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; border-radius: 6px; }
.skip-link { position: absolute; left: -9999px; top: -9999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--text); color: var(--bg); padding: 8px 12px; z-index: 1000; border-radius: 6px; }

/* ====================== TOPBAR (slimmed, newsroom-flat) ====================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 26px;
  background: #ffffff;
  border-bottom: 2px solid var(--text);  /* heavy newsroom rule under masthead */
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
/* Flag mark in brand row: real Indian flag SVG (3:2), with a hairline border
   and faint drop so it reads like an actual flag, not just a coloured rectangle */
.brand .flag, .brand .lamp {
  width: 36px; height: 24px;
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  display: inline-block; vertical-align: middle;
  background: #fff;
}
header .flag {
  width: 28px; height: 18px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
  display: inline-block; vertical-align: middle;
  background: #fff;
}
.brand h1 { font-family: var(--display); font-size: 30px; line-height: 1; margin: 0; font-weight: 900; letter-spacing: -0.015em; color: var(--text); }
.brand h1 a { text-decoration: none; }
.brand .motto { font-family: var(--serif); font-size: 12px; color: var(--muted); margin-left: 10px; letter-spacing: 0.01em; font-weight: 400; font-style: italic; }
.brand .tag { display: none; }
.controls { display: flex; align-items: center; gap: 8px; }
.search { position: relative; display: inline-flex; align-items: center; }
.search-ico { position: absolute; left: 10px; color: var(--muted); font-size: 14px; }
.search input { background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 8px 12px 8px 30px; border-radius: 0; font-size: 13px; width: 200px; transition: width .2s, border-color .2s; font-family: var(--sans); }
.search input:focus { width: 280px; border-color: var(--brand); outline: none; }
.select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 7px 10px; border-radius: 0; font-size: 12px; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.04em; }
.iconbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  background: transparent; border: 1px solid var(--border); border-radius: 0;
  color: var(--text); font-size: 11px; font-weight: 700; transition: .15s; text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.iconbtn:hover { border-color: var(--brand); color: var(--brand); }
.iconbtn.contribute { background: var(--brand); color: #ffffff; border-color: var(--brand); }
.iconbtn.contribute:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #ffffff; }
.iconbtn.bebaak { font-family: var(--display); font-size: 14px; padding: 0 14px; text-transform: none; letter-spacing: 0; font-weight: 700; }
/* Hide the dark/light theme toggle — single-mode publication. */
#theme-toggle { display: none !important; }
.ln.masala-toggle { opacity: .65; }
.ln.masala-toggle.active { opacity: 1; border-color: var(--brand); color: var(--brand); }

/* ====================== LIVE TICKER (now a thin meta-strip) ====================== */
.ticker {
  display: none; /* radically simplified — replaced by metabar */
}

/* ====================== MOOD-OVER-TIME STRIP (homepage) ====================== */
/* Thin newsroom strip under the metabar. 7-day mood sparkline + one-line
   interpretation. Pure typography — ink ticks for substance days, brand
   maroon for high-bad days. No animation. Hidden until ≥3 days of data. */
.moodstrip {
  display: flex; align-items: center; gap: 16px;
  max-width: var(--maxw); margin: 0 auto; padding: 8px var(--gutter);
  font-family: var(--sans); font-size: 11px;
  color: var(--muted); border-bottom: 1px solid var(--border-soft);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.moodstrip-kicker { color: var(--text); font-weight: 700; white-space: nowrap; }
.moodstrip-spark {
  display: inline-grid; grid-template-columns: repeat(7, 8px); gap: 3px;
  align-items: end; height: 22px; flex-shrink: 0;
}
.moodstrip-spark .col {
  width: 8px; min-height: 2px; background: var(--text); transition: opacity .15s;
}
.moodstrip-spark .col[data-tone="bad"] { background: var(--brand); }
.moodstrip-spark .col[data-tone="ugly"] { background: var(--brand-strong); }
.moodstrip-spark .col[data-today="1"] { outline: 1px solid var(--brand); outline-offset: 1px; }
.moodstrip-line { flex: 1; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 500; font-family: var(--serif); font-size: 13px; font-style: italic; }
.moodstrip-line b { font-style: normal; font-weight: 700; color: var(--brand); }
.moodstrip-cta { color: var(--brand); border-bottom: 1px solid var(--brand); text-decoration: none; white-space: nowrap; font-size: 10.5px; font-weight: 700; }
.moodstrip-cta:hover { color: var(--brand-strong); border-color: var(--brand-strong); }
@media (max-width: 700px) {
  .moodstrip { padding: 6px 14px; font-size: 10.5px; gap: 10px; flex-wrap: wrap; }
  .moodstrip-cta { display: none; }
  .moodstrip-line { font-size: 12px; }
}

/* ====================== TICKER (newsroom-chyron LATEST scroller) ====================== */
.ticker {
  background: #1A1A1A; color: #ffffff;
  display: flex; align-items: stretch; gap: 0;
  border-bottom: 1px solid #000;
  position: relative; overflow: hidden;
}
.ticker-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #ffffff;
  padding: 0 16px;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative; z-index: 2;
  white-space: nowrap;
  /* faux 'flag tail' notch on the right edge */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  padding-right: 22px;
}
.ticker-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  animation: tickerpulse 1.1s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
}
@keyframes tickerpulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.ticker-viewport {
  flex: 1; overflow: hidden;
  padding: 0; height: 38px;
  display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 32px), transparent 100%);
}
.ticker-track {
  display: inline-flex; align-items: center; gap: 0;
  white-space: nowrap;
  animation: tickerscroll 80s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tickerscroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }   /* track contains content twice */
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 18px;
  color: #fff; text-decoration: none;
  font-family: var(--serif, 'Merriweather', Georgia, serif);
  font-size: 13.5px; font-weight: 400; line-height: 1;
  border-right: 1px solid rgba(255,255,255,0.10);
}
.ticker-item:hover { text-decoration: underline; text-underline-offset: 3px; }
.ticker-item .ti-time {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 10.5px; font-weight: 700;
  color: #FF9F45;       /* tricolor saffron — small brand wink */
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ticker-item .ti-source {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 10.5px; font-weight: 600;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 720px) {
  .ticker-kicker { padding: 0 12px; padding-right: 18px; font-size: 10.5px; }
  .ticker-viewport { height: 34px; }
  .ticker-item { font-size: 12.5px; padding: 0 14px; }
  .ticker-track { animation-duration: 60s; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ====================== METABAR (single thin status row) ====================== */
.metabar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--maxw); margin: 0 auto; padding: 10px var(--gutter);
  font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--border-soft);
}
.metabar .left, .metabar .right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.metabar .livepulse { display: inline-block; width: 8px; height: 8px; background: var(--green); border-radius: 50%; margin-right: 6px;
  box-shadow: 0 0 0 0 var(--green); animation: lp 1.6s ease-out infinite; }
@keyframes lp { 0% { box-shadow: 0 0 0 0 rgba(31,138,91,0.6); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.metabar b { color: var(--text); font-weight: 600; }
.metabar .flip-pill { padding: 3px 9px; background: rgba(231,111,36,0.10); color: var(--saffron); border-radius: 999px; font-weight: 600; }

/* ====================== SECTIONS NAV (horizontal scroll) ====================== */
.sections {
  display: flex; gap: 4px; padding: 14px var(--gutter) 6px;
  max-width: var(--maxw); margin: 0 auto; overflow-x: auto; scrollbar-width: none;
}
.sections::-webkit-scrollbar { display: none; }
.sec {
  background: transparent; border: 0; padding: 8px 14px; border-radius: 999px;
  color: var(--muted); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: .15s;
}
.sec:hover { color: var(--text); background: var(--bg-alt); }
.sec.active { color: var(--text); background: var(--card); border: 1px solid var(--border); }
.sec-div { width: 1px; height: 22px; background: var(--border); margin: 6px 6px; align-self: center; flex-shrink: 0; }

/* ====================== SUBNAV (lens + masala + chips) ====================== */
.subnav { display: flex; gap: 12px; padding: 4px var(--gutter) 14px; max-width: var(--maxw); margin: 0 auto; flex-wrap: wrap; align-items: center; }
.lens { display: inline-flex; gap: 4px; padding: 3px; background: var(--bg-alt); border-radius: 999px; border: 1px solid var(--border-soft); }
.ln { background: transparent; border: 0; padding: 6px 12px; border-radius: 999px; color: var(--muted); font-size: 12.5px; font-weight: 500; transition: .15s; }
.ln:hover { color: var(--text); }
.ln.active { background: var(--card); color: var(--text); box-shadow: var(--shadow-1); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.chip { background: transparent; border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 10px; color: var(--muted); font-size: 12px; transition: .15s; }
.chip:hover { color: var(--text); border-color: var(--saffron); }
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip b { font-weight: 600; color: inherit; margin-left: 6px; opacity: .7; }

/* ====================== MAIN ====================== */
main { max-width: var(--maxw); margin: 0 auto; padding: 8px var(--gutter) 40px; }

/* ====================== MAST: MANIFESTO TAGLINE STRIP ====================== */
/* A newspaper's tagline area. Ink on white, ALL-CAPS, restrained. The
   publication's standing position, visible always, never decorative. */
.manifesto {
  background: #ffffff;
  color: var(--muted);
  padding: 10px 26px;
  font-size: 11.5px; line-height: 1.5;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.manifesto .m-stamp {
  font-family: var(--display); font-size: 11px;
  border-left: 3px solid var(--brand); padding: 0 0 0 10px;
  white-space: nowrap; color: var(--text); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.manifesto .m-body { flex: 1; font-weight: 500; color: var(--text); text-transform: none; letter-spacing: 0; font-size: 13px; }
.manifesto .m-body b { color: var(--brand); font-weight: 700; }
.manifesto .m-link {
  color: var(--brand); opacity: .9; font-size: 11px; text-decoration: none;
  border-bottom: 1px solid currentColor; white-space: nowrap; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.manifesto .m-link:hover { opacity: 1; color: var(--brand-strong); border-color: var(--brand-strong); }

/* ====================== MAST: बेबाक EDITORIAL QUOTE STRIP ====================== */
/* Editorial column brand. Flat off-white, heavy maroon top rule, bilingual
   lockup. No gradient. No emoji. The lockup IS the brand. */
.bebaak-mast {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: start;
  padding: 22px 28px 22px; margin: 22px 0 28px;
  background: var(--card-alt);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand);
  border-radius: 0;
  position: relative;
}
.bebaak-mast .bm-name {
  font-family: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', var(--display);
  font-size: 30px; line-height: 1.05; color: var(--text); font-weight: 400;
  letter-spacing: -0.005em; align-self: start; padding: 4px 18px 0 0; border-right: 1px solid var(--border);
}
.bebaak-mast .bm-name::after {
  content: 'BEBAAK · EDITORIAL';
  display: block; font-family: var(--sans); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; margin-top: 6px;
}
.bebaak-mast .bm-body {
  font-family: var(--serif); font-size: clamp(16px, 1.9vw, 19px); line-height: 1.5;
  color: var(--text); margin: 0; font-weight: 400; letter-spacing: 0;
}
.bebaak-mast .bm-body em {
  font-style: normal; color: var(--brand); font-weight: 700;
  font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  border: 0; padding: 0; margin-right: 10px; white-space: nowrap; display: inline-block; vertical-align: 2px;
  border-bottom: 2px solid var(--brand);
}
.bebaak-mast .bm-cta {
  font-size: 11px; color: var(--brand); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--brand); padding: 8px 14px; border-radius: 0; transition: .15s;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.bebaak-mast .bm-cta:hover { background: var(--brand); color: #ffffff; }
.bebaak-mast::before { display: none; }   /* drop the decorative fist watermark */

/* Carousel inner: holds the rotating slide content (verdict + body + foot).
   Transitions opacity on .bm-fading for the cross-fade between slides. */
.bebaak-mast .bm-inner {
  grid-column: 2 / 3;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  transition: opacity .18s ease-out;
}
.bebaak-mast .bm-inner.bm-fading { opacity: 0; }
.bebaak-mast .bm-foot {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.bebaak-mast .bm-headline { font-style: italic; }
.bebaak-mast .bm-headline i { color: var(--text); font-style: italic; }
.bebaak-mast .bm-foot .bm-cta { margin-left: auto; }

/* ====================== BHARAT PULSE RADIO (browser TTS dock) ====================== */
/* Trigger pill in the masthead controls */
.iconbtn.radio-trigger,
#radio-trigger {
  background: #1A1A1A; color: #fff; border-color: #1A1A1A;
  font-weight: 800; letter-spacing: 0.06em; padding: 6px 12px;
}
.iconbtn.radio-trigger:hover,
#radio-trigger:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Floating dock — bottom-right, fixed, always above content */
.radio-dock {
  position: fixed; right: 18px; bottom: 18px; z-index: 1000;
  width: min(420px, calc(100vw - 36px));
  background: #1A1A1A; color: #fff;
  border: 1px solid #000;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
  border-left: 4px solid var(--brand);
  font-family: var(--sans);
}
.radio-dock .radio-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px; padding: 12px 14px;
}
.radio-dock .radio-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background .2s, box-shadow .2s;
}
.radio-dock .radio-dot.on {
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(176,18,32,0.7);
  animation: radio-pulse 1.4s ease-out infinite;
}
@keyframes radio-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(176,18,32,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(176,18,32,0); }
  100% { box-shadow: 0 0 0 0 rgba(176,18,32,0); }
}
.radio-dock .radio-info { min-width: 0; }
.radio-dock .radio-kicker {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); font-weight: 600; margin-bottom: 4px;
}
.radio-dock .radio-kicker b { color: var(--brand); font-weight: 800; }
.radio-dock .radio-now {
  font-family: var(--serif); font-size: 14px; line-height: 1.3;
  color: #fff; font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.radio-dock .radio-meta {
  font-size: 10.5px; color: rgba(255,255,255,0.50);
  margin-top: 4px; font-weight: 500;
}
.radio-dock .radio-controls { display: flex; align-items: center; gap: 4px; }
.radio-dock .radio-btn {
  background: transparent; color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.18); padding: 6px 9px;
  font-size: 13px; line-height: 1; cursor: pointer; border-radius: 0;
  transition: .15s;
}
.radio-dock .radio-btn:hover { color: #fff; border-color: var(--brand); background: var(--brand); }
.radio-dock .radio-play { color: var(--brand); border-color: var(--brand); font-weight: 700; }
.radio-dock .radio-play:hover { background: var(--brand); color: #fff; }
.radio-dock .radio-close { font-size: 11px; }

@media (max-width: 540px) {
  .radio-dock { right: 10px; left: 10px; bottom: 10px; width: auto; }
  .radio-dock .radio-now { font-size: 13px; }
}
/* Rotation indicator: small typographic dots under the body */
.bebaak-mast .bm-dots {
  grid-column: 2 / 3; display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border-soft);
}
.bebaak-mast .bm-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); border: 0; padding: 0; cursor: pointer;
  transition: background .15s;
}
.bebaak-mast .bm-dot:hover { background: var(--muted); }
.bebaak-mast .bm-dot.on { background: var(--brand); }
.bebaak-mast .bm-counter {
  margin-left: auto; font-family: var(--sans); font-size: 10.5px;
  color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
}

@media (max-width: 700px) {
  .manifesto { padding: 8px 14px; font-size: 10.5px; flex-wrap: wrap; gap: 8px; }
  .manifesto .m-stamp { display: none; }
  .manifesto .m-body { font-size: 12px; }
  .bebaak-mast { grid-template-columns: 1fr; gap: 12px; padding: 16px 16px 16px; margin: 14px 0 18px; }
  .bebaak-mast .bm-name { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 10px; font-size: 24px; }
  .bebaak-mast .bm-body { font-size: 15.5px; }
  .bebaak-mast .bm-cta { justify-self: start; }
  .bebaak-mast .bm-inner, .bebaak-mast .bm-dots { grid-column: 1 / 2; }
}

/* ====================== ACTION CHIPS — newsroom flat ====================== */
/* Cardvotebar + action chips are unified visually: same flat ALL-CAPS Inter
   buttons in one tight row separated by 1px dividers. No emoji, no rounded
   chrome, no colour-coded categories. */
.card-actions {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
}
.action-chip {
  display: inline-flex; align-items: center; gap: 0; padding: 4px 0;
  background: transparent; border: 0; color: var(--muted);
  border-radius: 0; font-family: var(--sans);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer; transition: color .15s; text-decoration: none;
}
.action-chip:hover { color: var(--brand); }
/* Drop the per-action colour coding — newsroom restraint */
.action-chip[data-act="vote"], .action-chip[data-act="verify"], .action-chip[data-act="share"], .action-chip[data-act="whatsapp"] {
  color: var(--muted); border-color: transparent;
}
.action-chip:hover { color: var(--text); }
/* WhatsApp: brand-recognisable green hover so the reader sees the channel */
.action-chip[data-act="whatsapp"]:hover { color: #25D366; }
.action-chip[data-act="whatsapp"]::before {
  content: ''; display: inline-block; width: 12px; height: 12px;
  margin-right: 5px; vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 2.1.55 4.16 1.6 5.97L2 22l4.27-1.12a9.86 9.86 0 0 0 4.77 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm5.4 14.21c-.23.64-1.35 1.23-1.86 1.31-.47.07-1.07.1-1.73-.11-.4-.13-.91-.3-1.57-.58-2.76-1.19-4.57-3.97-4.71-4.16-.14-.18-1.12-1.49-1.12-2.84 0-1.35.71-2.01.96-2.29.25-.27.55-.34.74-.34.18 0 .37 0 .53.01.17.01.4-.06.62.47.23.55.78 1.9.85 2.04.07.14.12.3.02.49-.09.18-.14.3-.27.46-.14.16-.29.36-.41.48-.14.14-.28.29-.12.57.16.27.71 1.17 1.52 1.9 1.04.93 1.92 1.21 2.19 1.35.27.14.43.12.59-.07.16-.18.68-.79.86-1.07.18-.27.36-.23.61-.14.25.09 1.61.76 1.88.9.27.14.46.21.53.32.07.11.07.64-.16 1.27z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 2.1.55 4.16 1.6 5.97L2 22l4.27-1.12a9.86 9.86 0 0 0 4.77 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm5.4 14.21c-.23.64-1.35 1.23-1.86 1.31-.47.07-1.07.1-1.73-.11-.4-.13-.91-.3-1.57-.58-2.76-1.19-4.57-3.97-4.71-4.16-.14-.18-1.12-1.49-1.12-2.84 0-1.35.71-2.01.96-2.29.25-.27.55-.34.74-.34.18 0 .37 0 .53.01.17.01.4-.06.62.47.23.55.78 1.9.85 2.04.07.14.12.3.02.49-.09.18-.14.3-.27.46-.14.16-.29.36-.41.48-.14.14-.28.29-.12.57.16.27.71 1.17 1.52 1.9 1.04.93 1.92 1.21 2.19 1.35.27.14.43.12.59-.07.16-.18.68-.79.86-1.07.18-.27.36-.23.61-.14.25.09 1.61.76 1.88.9.27.14.46.21.53.32.07.11.07.64-.16 1.27z'/></svg>") no-repeat center / contain;
}

/* ====================== WEEKLY USE-THIS-WEEK COLUMN ====================== */
.use-week {
  background: linear-gradient(135deg, var(--card) 0%, var(--card-alt) 100%);
  border: 1px solid var(--border); border-left: 4px solid var(--saffron);
  border-radius: var(--radius-lg); padding: 22px 26px; margin: 28px 0;
}
.use-week-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.use-week-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--saffron); font-weight: 700; }
.use-week-head h2 { font-family: var(--display); font-size: 22px; margin: 0; font-weight: 400; letter-spacing: -0.005em; }
.use-week-tag { font-size: 12px; color: var(--muted); }
.use-week-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.use-week-item { padding: 14px 16px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; transition: .15s; }
.use-week-item:hover { border-color: var(--saffron); transform: translateY(-1px); }
.use-week-item .uw-verb { font-family: var(--serif); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--saffron); font-weight: 600; margin-bottom: 5px; }
.use-week-item .uw-act { font-size: 14.5px; line-height: 1.4; color: var(--text); margin: 0 0 8px; font-weight: 500; }
.use-week-item .uw-by { font-size: 11.5px; color: var(--muted); }
.use-week-item a { color: inherit; text-decoration: none; }
@media (max-width: 700px) {
  .use-week { padding: 16px 18px; }
  .use-week-grid { grid-template-columns: 1fr; gap: 10px; }
  .use-week-item { padding: 12px 14px; }
}

/* ====================== PULSE BOARD (hero) ====================== */
.pulseboard {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px;
  /* Don't force the rail to stretch to the lead's height — let each card
     be its natural size. Prevents the editorial-desk void below the take. */
  align-items: start;
  padding: 0 0 26px; border-bottom: 1px solid var(--border-soft); margin-bottom: 30px;
}
.pb-lead {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--card); border: 1px solid var(--border); border-radius: 0;
  overflow: hidden; cursor: pointer; transition: border-color .15s;
}
.pb-lead:hover { border-color: var(--text); }
.pb-lead-media {
  /* Wider/shorter ratio so the image doesn't dominate desktop viewports. */
  aspect-ratio: 16/8.5; max-height: 380px; overflow: hidden; background: var(--bg-alt);
}
.pb-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pb-lead:hover .pb-lead-media img { transform: scale(1.02); }
.pb-lead-body { padding: 22px 24px 24px; display: grid; gap: 12px; align-content: start; }
.pb-strip { display: flex; gap: 10px; align-items: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--muted); }
.pb-strip .verdict-tag { padding: 2px 8px; border-radius: 4px; color: var(--bg); font-weight: 700; letter-spacing: 0.06em; }
.verdict-tag.good { background: var(--good); }
.verdict-tag.bad  { background: var(--bad); }
.verdict-tag.ugly { background: var(--ugly); }

/* ====================== CIVIC STATUS PILL — TYPOGRAPHIC ====================== */
/* No coloured fills, no emoji, no rounded chrome. ALL-CAPS Inter Bold kicker
   in ink, like Guardian / NYT / Hindu section labels. Severity (Crisis +
   Accountability) earns a 4px maroon top rule on the CARD, not on the pill. */
.status-pill {
  display: inline-flex; align-items: center; gap: 0;
  padding: 0; border-radius: 0;
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 0; background: transparent;
  white-space: nowrap;
  color: var(--text);
}
.status-pill .ic { display: none; }   /* emojis off in editorial chrome */
.status-pill[data-s="noise"] { color: var(--muted); font-weight: 600; }
.status-pill[data-s="crisis"],
.status-pill[data-s="accountability"] { color: var(--brand); }
.status-pill[data-s="strategic"],
.status-pill[data-s="milestone"] { color: var(--text); }

/* Card-level severity rule — applied via card.cat-crisis / .cat-accountability
   in the rendering layer. Maroon 4px top stripe like Guardian's section rule. */
.card.cat-crisis, .card.cat-accountability,
.pb-side-card.cat-crisis, .pb-side-card.cat-accountability {
  border-top: 4px solid var(--brand);
}

/* Confidence — small italic kicker after the status, ink only */
.confidence-chip {
  display: inline-flex; align-items: center; gap: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: 11px; font-weight: 400; font-style: italic;
  letter-spacing: 0;
  background: transparent; border: 0;
  color: var(--muted);
  text-transform: none;
}
.confidence-chip::before { content: '·'; margin: 0 6px 0 0; opacity: .5; }
.confidence-chip[data-c="developing"] { color: var(--muted-strong); }
.confidence-chip[data-c="alleged"]    { color: var(--brand); font-weight: 700; }
.confidence-chip[data-c="confirmed"]  { display: none; }
.pb-lead-title {
  font-family: var(--display); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08;
  margin: 0; font-weight: 400; letter-spacing: -0.015em; color: var(--text);
}
.pb-lead-sum { font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0; }
.pb-receipts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* बेबाक rail (DEPRECATED in homepage — moved to bebaak-mast above the
   Pulse Board). The .pb-bebaak class is kept for the desk page's hero. */
.pb-bebaak-stack { display: grid; gap: 14px; }
.pb-bebaak {
  display: grid; grid-template-rows: auto auto 1fr auto;
  background: linear-gradient(180deg, var(--card) 0%, var(--card-alt) 100%);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px 16px;
  position: relative; overflow: hidden;
}
.pb-bebaak.compact { padding: 14px 20px 14px; background: var(--card); }
.pb-bebaak.compact .pb-bebaak-head { display: none; }
.pb-bebaak.compact .pb-bebaak-body { font-size: 14px; line-height: 1.55; }
.pb-bebaak.compact::before { display: none; }
.pb-bebaak::before {
  content: '✊'; position: absolute; right: -8px; bottom: -22px; font-size: 110px; opacity: 0.045;
}

/* SIDE-STACK: 4 secondary headlines in the right rail of the Pulse Board.
   Fills the rail naturally to match the lead height. Classic magazine front-
   page pattern (Frontline, NYT, Guardian). */
.pb-side-stack { display: flex; flex-direction: column; gap: 12px; }
.pb-side-card {
  padding: 13px 16px; background: var(--card);
  border: 1px solid var(--border-soft); border-radius: 10px;
  cursor: pointer; transition: .15s; display: grid; gap: 6px;
}
.pb-side-card:hover { border-color: var(--saffron); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.pb-side-top { display: flex; align-items: center; gap: 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.pb-side-headline {
  font-family: var(--serif); font-size: 16px; line-height: 1.25; margin: 0; font-weight: 400; letter-spacing: -0.005em; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pb-side-headline a { color: inherit; text-decoration: none; }
.pb-side-meta { font-size: 11px; color: var(--muted); }
.pb-side-meta b { color: var(--text); font-weight: 600; }
@media (max-width: 700px) {
  .pb-side-card { padding: 11px 13px; }
  .pb-side-headline { font-size: 14.5px; -webkit-line-clamp: 2; }
}
.pb-bebaak-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pb-bebaak-head h2 {
  /* Devanagari first — Tiro Devanagari Hindi has properly placed matras,
     unlike serif fallbacks that clip them under tight line-heights. */
  font-family: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', var(--serif);
  font-size: 34px; margin: 0; font-weight: 400; letter-spacing: -0.005em;
  /* Solid saffron — gradient + -webkit-background-clip:text was clipping
     the matras above the headline. Cleaner and more dignified. */
  color: var(--saffron);
  /* Devanagari needs line-height ≥ 1.1 or matras get clipped. */
  line-height: 1.15;
}
.pb-bebaak-head .kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; }
.pb-bebaak-verdict { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; align-self: start; width: fit-content; margin: 10px 0 12px; }
.pb-bebaak-verdict[data-v="hope"]    { color: var(--good); }
.pb-bebaak-verdict[data-v="concern"] { color: var(--bad); }
.pb-bebaak-verdict[data-v="outrage"] { color: var(--ugly); }
.pb-bebaak-verdict[data-v="question"]{ color: var(--civic); }
.pb-bebaak-verdict[data-v="idea"]    { color: var(--civic); }
.pb-bebaak-verdict[data-v="shame"]   { color: var(--ugly); }
.pb-bebaak-verdict[data-v="pride"]   { color: var(--green); }
.pb-bebaak-verdict[data-v="reform"]  { color: var(--civic); }
.pb-bebaak-body { font-size: 15.5px; line-height: 1.6; color: var(--text); margin: 0 0 14px; }
.pb-bebaak-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--border); }
.pb-bebaak-meta a { color: var(--saffron); font-weight: 600; text-decoration: none; }
.pb-bebaak-meta a:hover { text-decoration: underline; }
.pb-bebaak-empty { font-size: 13px; color: var(--muted); padding: 18px 0; line-height: 1.5; }
.pb-bebaak-empty a { color: var(--saffron); font-weight: 600; }

/* ====================== TRUST RECEIPTS — TYPOGRAPHIC ====================== */
/* No filled chips, no rounded chrome, no tinted backgrounds. Plain ALL-CAPS
   Inter small caps separated by interpuncts — newsroom dateline style. */
.card-receipts {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0;
  font-family: var(--sans); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  color: var(--muted); line-height: 1.5;
}
.card-receipts .receipt + .receipt::before {
  content: '·'; margin: 0 8px; opacity: .55;
}
.receipt {
  display: inline; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--muted); font-weight: 600;
  white-space: nowrap;
}
.receipt b { color: var(--text); font-weight: 700; }
.receipt.r-newsrooms b { color: var(--text); }
.receipt.r-flipped   { color: var(--brand); font-weight: 700; }
.receipt.r-flipped b { color: var(--brand); }
.receipt.r-single    { color: var(--brand); font-weight: 700; }
.receipt.r-translated{ color: var(--text); }
.receipt.r-region    { color: var(--text); }

/* ====================== FEED ====================== */
.feed { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.feed-foot { text-align: center; margin: 26px 0; }
.load-more { background: transparent; border: 1px solid var(--border); padding: 10px 22px; border-radius: 999px; color: var(--text); font-size: 13.5px; font-weight: 500; }
.load-more:hover { border-color: var(--saffron); color: var(--saffron); }
.feed-end { color: var(--muted); font-size: 13px; font-style: italic; }

/* ====================== CARD v2 (newsroom-flat) ====================== */
.card {
  display: grid; grid-template-rows: auto 1fr; background: var(--card);
  border: 1px solid var(--border); border-radius: 0; overflow: hidden;
  transition: border-color .15s; position: relative; animation: fade-in .35s ease both;
}
.card:hover { border-color: var(--text); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none;} }
.card-media { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); cursor: pointer; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card-media img { transform: scale(1.03); }
.card-body { padding: 16px 18px 16px; display: grid; gap: 10px; align-content: start; }
.card-top { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.card-top .verdict-tag { padding: 1px 7px; border-radius: 3px; color: var(--bg); font-weight: 700; }
.card-title {
  font-family: var(--display); font-size: 22px; line-height: 1.18; margin: 0; font-weight: 400;
  letter-spacing: -0.005em; cursor: pointer; color: var(--text);
}
.card-title:hover { color: var(--saffron); }
.card-sum { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.no-img { padding-top: 6px; }
.card.no-img .card-title { font-size: 20px; }
.card-receipts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.bookmark { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; background: rgba(255,253,248,0.88);
  border: 1px solid var(--border); border-radius: 50%; color: var(--text); font-size: 14px;
  transition: .15s; backdrop-filter: blur(4px); }
.bookmark:hover { color: var(--saffron); border-color: var(--saffron); }
.bookmark.on { color: var(--saffron); background: var(--card); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--border-soft); margin-top: 4px; }
.card-foot .read-link { font-size: 12px; color: var(--muted); font-weight: 600; text-decoration: none; }
.card-foot .read-link:hover { color: var(--saffron); }
.card-foot .src { font-size: 11.5px; color: var(--muted); font-weight: 500; }

/* ====================== VOTE BAR (newsroom-flat) ====================== */
/* No more rounded toggle pills. Three flat ALL-CAPS Inter buttons sharing a
   1px border, like an old typesetter's quoin. The selected vote inverts. */
.votebar {
  display: flex; gap: 0; margin-top: 8px;
  border: 1px solid var(--border);
}
.votebar.err { animation: shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-3px);} 75%{transform:translateX(3px);} }
.votebtn {
  flex: 1; background: transparent; border: 0;
  border-right: 1px solid var(--border);
  padding: 7px 4px; border-radius: 0;
  color: var(--muted); font-family: var(--sans);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 30px; cursor: pointer;
}
.votebtn:last-child { border-right: 0; }
.votebtn:hover { color: var(--text); background: var(--bg-alt); }
.votebtn .vc {
  font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums;
  font-weight: 600; letter-spacing: 0;
}
.votebtn.picked { background: var(--text); color: #ffffff; }
.votebtn.picked .vc { color: #ffffff; opacity: .75; }
.votebtn.lead .vc { color: var(--brand); font-weight: 700; }
.votebtn.picked.lead .vc { color: #ffffff; }

/* ====================== SECTIONS UNDER FEED ====================== */
.spotlight, .factcheck, .citizen, .bebaak-rail, .pageone {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 24px; margin: 28px 0;
}
.spotlight-head, .factcheck-head, .citizen-head, .bebaak-rail-head, .pageone-head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.spotlight-kicker, .factcheck-kicker, .bebaak-rail-kicker, .pageone-kicker {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600;
}
.spotlight-head h2, .factcheck-head h2, .citizen-head h2, .bebaak-rail-head h2, .pageone-head h2 {
  font-family: var(--display); font-size: 24px; margin: 0; font-weight: 400; letter-spacing: -0.01em;
}
.spotlight-name { background: transparent; border: 0; font-family: var(--display); font-size: 24px; padding: 0; cursor: pointer; color: var(--text); letter-spacing: -0.01em; }
.spotlight-name:hover { color: var(--saffron); }
.spotlight-sub, .factcheck-sub { color: var(--muted); font-size: 13px; }
.spotlight-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spot-item { display: block; padding: 12px 14px; background: var(--bg); border-radius: 8px; text-decoration: none; color: var(--text); transition: .15s; border: 1px solid transparent; }
.spot-item:hover { border-color: var(--border); }
.spot-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; }
.spot-meta .dot { width: 6px; height: 6px; border-radius: 50%; align-self: center; }
.dot.good { background: var(--good); } .dot.bad { background: var(--bad); } .dot.ugly { background: var(--ugly); }

/* On Page One Today — print-edition rail (newsroom feel) */
.pageone-sub { color: var(--muted); font-size: 13px; }
.pageone-sub em { font-style: italic; color: var(--text); }
.pageone-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border-top: 2px solid var(--ink); /* the bold print-page rule */
}
.po-item {
  display: block; padding: 14px 16px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none; color: var(--text);
  transition: background .15s;
  background: var(--card);
}
.po-item:hover { background: var(--brand-soft); }
.po-item .po-kicker {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--brand); font-weight: 700; margin-bottom: 6px; display: block;
}
.po-item .po-title {
  font-family: var(--display); font-size: 16.5px; line-height: 1.28; font-weight: 600;
  letter-spacing: -0.005em; color: var(--text);
}
.po-item .po-meta {
  font-size: 11.5px; color: var(--muted); margin-top: 8px;
  display: flex; gap: 10px; align-items: center;
}
.po-item .po-meta .po-region { font-weight: 600; color: var(--text); }
.po-item.po-lead {
  grid-column: 1 / -1;
  padding: 22px 24px;
  border-bottom: 2px solid var(--ink);
}
.po-item.po-lead .po-title { font-size: 28px; line-height: 1.15; font-weight: 700; }
.po-item.po-lead .po-kicker { font-size: 11.5px; }
@media (max-width: 720px) {
  .pageone-list { grid-template-columns: 1fr; }
  .po-item.po-lead .po-title { font-size: 22px; }
}

/* Fact-check */
.factcheck-list { display: grid; gap: 8px; }
.fc-item { display: block; padding: 14px 16px; background: var(--bg); border-radius: 8px; text-decoration: none; color: var(--text); border: 1px solid transparent; transition: .15s; }
.fc-item:hover { border-color: var(--border); }
.fc-tag { display: inline-block; padding: 1px 7px; background: var(--ugly); color: var(--bg); border-radius: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 8px; }
.fc-meta { font-size: 11.5px; color: var(--muted); margin-top: 6px; display: flex; gap: 10px; }

/* Citizen */
.cz-card { background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; }
.cz-flag { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ugly); font-weight: 700; margin-bottom: 8px; }
.cz-title { font-family: var(--display); font-size: 20px; margin: 0 0 10px; font-weight: 400; }
.cz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; }
.cz-label { display: block; font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.cz-col p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.cz-col a { color: var(--civic); word-break: break-all; }
.cz-meta { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-soft); }
/* Citizen Desk empty state — three concrete civic-action examples so the
   desk page looks alive even before any reader has submitted. */
.cz-empty { padding: 6px 0 0; }
.cz-empty-h { font-family: var(--display); font-size: 24px; margin: 0 0 8px; font-weight: 400; letter-spacing: -0.01em; color: var(--text); }
.cz-empty-lede { font-family: var(--serif); font-size: 14.5px; color: var(--muted); margin: 0 0 18px; max-width: 60ch; line-height: 1.5; }
.cz-empty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 18px; }
.cz-empty-card { padding: 14px 16px; background: var(--bg); border: 1px solid var(--border-soft); border-left: 3px solid var(--brand); }
.cz-empty-kicker { font-family: var(--sans); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); font-weight: 700; margin-bottom: 6px; }
.cz-empty-card h4 { font-family: var(--display); font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--text); }
.cz-empty-card p { font-family: var(--serif); font-size: 13px; line-height: 1.5; color: var(--text); margin: 0; }
.cz-empty-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 6px; }

/* ====================== CHARTER + FOOTER ====================== */
.charter { max-width: var(--maxw); margin: 30px auto 0; padding: 22px var(--gutter); color: var(--muted); font-size: 13.5px; line-height: 1.6; border-top: 1px solid var(--border-soft); }
.charter h3 { font-family: var(--serif); color: var(--text); font-weight: 400; font-size: 22px; margin: 0 0 8px; }
footer { max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter) 40px; color: var(--muted); font-size: 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border-soft); }
footer a { color: inherit; border-bottom: 1px dotted currentColor; text-decoration: none; }
footer a:hover { color: var(--saffron); border-color: var(--saffron); }

/* ====================== TO TOP + MODAL (now only for submissions) ====================== */
.totop {
  position: fixed; bottom: 96px; right: 22px; width: 42px; height: 42px;
  background: var(--text); color: var(--bg); border: 0; border-radius: 50%; font-size: 17px;
  opacity: 0; pointer-events: none; transition: .2s; box-shadow: var(--shadow-2); z-index: 20;
}
.totop.show { opacity: 1; pointer-events: auto; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 640px; max-height: 90vh; overflow: auto; position: relative; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: var(--bg); border: 1px solid var(--border); border-radius: 50%; font-size: 14px; z-index: 1; }
.modal-body { padding: 28px 30px 24px; }
.m-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.m-title { font-family: var(--display); font-size: 32px; line-height: 1.15; margin: 0 0 12px; font-weight: 400; }
.m-summary { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.m-note, .m-note2 { font-size: 13px; color: var(--muted); }
.badge { padding: 2px 9px; border-radius: 4px; color: var(--bg); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.badge.good { background: var(--good); } .badge.bad { background: var(--bad); } .badge.ugly { background: var(--ugly); }
.sub-form { display: grid; gap: 12px; }
.sub-form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 500; }
.sub-form input, .sub-form textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 14px; font-family: var(--sans); width: 100%; }
.sub-form textarea { min-height: 80px; resize: vertical; }
.sub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sub-actions { display: flex; gap: 10px; }
.btn-primary { background: var(--text); color: var(--bg); border: 0; padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.btn-primary:hover { background: var(--saffron); color: var(--ink-on-acc); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.sub-thanks { padding: 16px; background: rgba(31,138,91,0.10); color: var(--good); border-radius: 8px; font-weight: 500; }
.sub-msg.err { color: var(--ugly); font-size: 13px; }

/* ====================== MOBILE BOTTOM NAV ====================== */
.bottomnav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: var(--card); border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  justify-content: space-around;
}
.bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; background: transparent; border: 0; color: var(--muted);
  font-size: 10.5px; font-weight: 500; transition: .15s; text-decoration: none; min-height: 48px;
}
.bn-item .bn-icon { font-size: 19px; line-height: 1; }
.bn-item.active, .bn-item:hover { color: var(--saffron); }
.bn-item .bn-label.devanagari { font-family: var(--serif); font-size: 11px; }

/* Skeleton */
.skeleton { background: linear-gradient(90deg, var(--bg-alt) 0%, var(--card) 50%, var(--bg-alt) 100%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius); height: 220px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px; }
mark { background: rgba(231,111,36,0.25); color: var(--text); padding: 0 2px; border-radius: 2px; }

/* ====================== RESPONSIVE ====================== */
@media (max-width: 1100px) {
  .pulseboard { grid-template-columns: 1.4fr 1fr; gap: 18px; }
}
@media (max-width: 960px) {
  .pulseboard { grid-template-columns: 1fr; gap: 16px; }
  .pb-lead-title { font-size: clamp(24px, 5vw, 32px); }
  .feed { grid-template-columns: 1fr 1fr; gap: 14px; }
  .spotlight-list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .topbar { padding: 10px 14px; gap: 8px; }
  .brand h1 { font-size: 20px; }
  .brand .motto { display: none; }
  .controls { gap: 6px; }
  .controls .select, .controls #lang-mode, .controls #filters-toggle { display: none; }
  .topbar.filters-open .select, .topbar.filters-open #lang-mode { display: inline-flex; }
  .controls #filters-toggle { display: inline-flex; }
  .search input { width: 130px; }
  .search input:focus { width: 160px; }
  /* Hide non-essential topbar buttons on phone — bottom nav covers them */
  .iconbtn.contribute, .iconbtn.bebaak { display: none; }
  .metabar { font-size: 11px; padding: 8px 14px; }
  .sections { padding: 10px 14px 4px; }
  .subnav { padding: 0 14px 10px; gap: 8px; }
  main { padding: 6px 14px 30px; }
  .pb-lead-body { padding: 16px 18px 18px; }
  .pb-bebaak { padding: 16px 18px 16px; }
  .pb-bebaak-head h2 { font-size: 28px; }
  .pb-bebaak-body { font-size: 14.5px; }
  .feed { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-body { padding: 12px 14px 12px; }
  .card-title { font-size: 16px; }
  .card.no-img .card-title { font-size: 17px; }
  .card-sum { font-size: 12.5px; -webkit-line-clamp: 2; }
  .card-receipts .receipt { font-size: 11px; padding: 2px 7px; }
  .charter { padding: 16px 14px; font-size: 12.5px; }
  /* Modal full-screen on phone */
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal { max-width: 100%; min-height: 100vh; border-radius: 0; border-left: 0; border-right: 0; }
  .modal-body { padding: 22px 18px 100px; }
  /* Show bottom nav */
  .bottomnav { display: flex; }
  .totop { display: none; }
  body { padding-bottom: 70px; }
}
@media (max-width: 460px) {
  .feed { grid-template-columns: 1fr; gap: 14px; }
  .card-media { aspect-ratio: 16/10; }
  .pb-lead-media { aspect-ratio: 16/10; }
  .pb-lead-title { font-size: 24px; }
  .cz-grid { grid-template-columns: 1fr; }
  .sub-row { grid-template-columns: 1fr; }
}