/* ==========================================================================
   Tick — design B "Intelligence". The ONE shared stylesheet for every
   server-rendered page on every Tick (TamilTick, TeluguTick, …).

   Served from /cdn/css/tick-b.css?v=<content-hash> with a one-year immutable
   cache; render.layout() computes the hash, so editing this file busts it.

   Rules of the system
   - Light is the default theme; :root[data-theme="dark"] is an opt-in toggle.
   - One container language: hairline rules, no boxed cards, no shadows.
   - Six type sizes (13/13/15/17/20/28; 13px is the floor for any secondary
     text), 8px spacing grid. Brand orange is ONLY the wordmark, kickers and
     the ticker dot; rises and falls use --delta-up / --delta-down.
   - Numbers are tabular (.num, time, [data-countup]).
   - Motion is small and functional, and all of it stops under
     prefers-reduced-motion.
   - Page families add backend/static/css/b/<family>.css and link it through
     layout(page_css=["<family>"]). Do not put page CSS here.
   ========================================================================== */

/* ---------- fonts ---------- */
/* Inter is self-hosted (OFL). The region's native script comes from Google
   Fonts (linked in <head>, display=swap, unicode-range subset), and only for
   the one script the region needs. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/cdn/fonts/inter-var.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  --bg: #ffffff;
  --bg-2: #f5f6f8;        /* sub-bar, footer, tracks, hover */
  --track: #eceef2;
  --line: #e3e6eb;
  --line-strong: #c9cfd8;

  --ink: #111827;         /* 17.7:1 on white */
  --ink-2: #374151;       /* 10.3:1: native-script meta */
  --ink-3: #465062;       /* muted text: 8.0:1 on white, 7.4:1 on --bg-2, 6.9:1 on --track (AA) */
  --bg-elev: #f5f6f8;     /* one elevated step: panels, popovers, footer */

  /* Brand accent: steel navy (colorize 2026-10-02). It belongs to no party:
     the old orange was BJP's colour, and in a political product colour reads
     as affiliation. Party hues live ONLY on party marks (dots, bars). */
  --accent: #33608f;      /* 6.4:1 on white */
  --accent-text: #2c5480; /* 7.6:1 on white: accent used as text */
  --accent-soft: #edf2f8;
  --focus: #2563eb;
  --ink-4: #8a93a2;       /* stale status dot, disabled marks (non-text) */
  --rest: #b8bfca;        /* "others" bars */
  /* status dot: graded by the age of the newest item (render.fresh_dot) */
  --fresh-live: #33608f;  /* ≤ 15 min (no green: the dot sits beside the party dots) */
  --fresh-recent: #6f87a6;/* ≤ 60 min */
  --fresh-stale: var(--ink-4);
  /* charts: places, topics and stories draw in neutral ink; today is the
     darkest ink (never brand orange). Entity pages set --bar to the entity
     colour. A topic never borrows a party hue. */
  --chart-ink: #5b6474;
  --chart-ink-soft: #c9cfd8;
  --chart-today: var(--ink);
  /* movement: the ONE pair for every rise/fall (story cards, hero tiles,
     leaderboards, Trends chips). Text-safe (AA) on --bg and --bg-2. */
  /* CHANGE (review loop 2): attention and rank movement ("+23 கட்டுரைகள் ▲",
     "▲ 1 இடம்") is not good or bad news, so it is drawn in ONE neutral ink
     with the arrow carrying the direction. Green/red are reserved for a
     defined tone or a yes/no (--pos/--neg). The comparison basis ("vs
     previous 24h") is always written next to the number (render.change_token). */
  --change: #334766;      /* 9.3:1 on white */
  --change-bg: #eef2f8;
  --delta-up: var(--change);
  --delta-down: var(--change);
  --delta-up-bg: var(--change-bg); --delta-down-bg: var(--change-bg);
  --pos: #34618f;         /* 6.3:1: a defined positive (tone, yes) — steel, not ADMK green */
  --neg: #7a5b45;         /* 6.4:1: a defined negative — taupe, not DMK red */
  /* partial (still-filling) day: one band + dashed edge, and its legend key */
  --chart-partial-bg: rgba(234, 140, 0, .10);
  --chart-partial-stroke: #b45309;
  --hatch-opacity: .5;
  --warn: #a16207;

  /* single-hue attention ramp for choropleths and heat cells (b0 = none) */
  --heat-0: #eceef2;
  /* one neutral steel intensity scale for every map, heat cell and ramp */
  --heat-1: #dde6f0;
  --heat-2: #b9cbe0;
  --heat-3: #84a3c6;
  --heat-4: #4f76a3;
  --heat-5: #23426a;

  /* type scale: six sizes only */
  --fs-1: 13px;  /* Latin meta, numerals, notes (13px floor: no 11-12px text) */
  --fs-2: 13px;  /* meta, nav, labels */
  --fs-3: 15px;  /* body, compact headlines, section heads */
  --fs-4: 17px;  /* story headlines */
  --fs-5: 20px;  /* page titles, stat values */
  --fs-6: 28px;  /* lead headline, H1 */

  --lh-latin: 1.4;
  --lh-native: 1.6;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 6px;
  --gutter: 24px;
  --maxw: 1296px;

  --font-native: "Nirmala UI", system-ui;
  --font: "Inter", var(--font-native), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 150ms;
  --t-med: 280ms;

  color-scheme: light;

  /* ---- legacy bridge: old dark-shell variable names → B tokens ----------
     Un-ported page bodies (profile/exchange/trends/news CSS) still read these.
     Mapping them here keeps them legible on the light page until each family
     is ported. New code must use the B names above. */
  --canvas: var(--bg); --surface: var(--bg); --elev: var(--bg-2); --panel: var(--bg);
  --bd: var(--line); --bd2: var(--line-strong);
  --fg: var(--ink); --text: var(--ink); --fg-secondary: var(--ink-2);
  --mut: var(--ink-2); --dim: var(--ink-3);
  --acc: var(--accent); --orange: var(--accent);
  --red: #dc2626; --green: #16a34a; --purple: #7c3aed; --cyan: #0891b2;
  --color-canvas: var(--bg); --color-surface: var(--bg); --color-elevated: var(--bg-2);
  --color-overlay: rgba(17, 24, 39, .45);
  --color-border-subtle: var(--line); --color-border-default: var(--line-strong); --color-border-strong: var(--line-strong);
  --color-fg-primary: var(--ink); --color-fg-secondary: var(--ink-2);
  --color-fg-muted: var(--ink-3); --color-fg-dim: var(--ink-3);
  --color-success: var(--green); --color-info: var(--focus); --color-warning: #ca8a04; --color-danger: var(--red);
  --brand-red: var(--red); --brand-orange: var(--accent); --brand-accent: var(--accent); --brand-periwinkle: #6366f1;
  --live-dot: var(--red);
  --tt-orange: var(--accent); --tt-red: var(--red); --tt-green: var(--green); --tt-purple: var(--purple);
  --font-sans: var(--font); --font-mono: var(--font); --mono: var(--font);
  --font-tamil: var(--font); --font-telugu: var(--font);
  --motion-fast: 160ms; --motion-normal: 280ms; --motion-slow: 900ms; --pulse-live: 1800ms;
}
:root[data-theme="dark"] {
  --bg: #0f141b; --bg-2: #151b24; --track: #222b37; --line: #252e3b; --line-strong: #394556;
  --ink: #edf1f6; --ink-2: #d0d7e0; --ink-3: #b3bdca; --ink-4: #6b7789;   /* ink-3: 9.6:1 on --bg, 8.5:1 on --bg-elev, 7.4:1 on --track */
  --bg-elev: #19202b;     /* cards, panels, popovers, footer: one step above --bg */
  --fresh-live: #8fb2db; --fresh-recent: #5f7a9c;
  --chart-ink: #9aa6b6; --chart-ink-soft: #3a4556;
  --accent: #7fa2cd; --accent-text: #9dbde3; --accent-soft: #18222f; --focus: #7aa7ff; --rest: #4a5566;
  --change: #c7d3e6; --change-bg: #1c2533;   /* 11.6:1 on --bg */
  --pos: #8fb2db; --neg: #c9aa92; --warn: #facc15;
  --chart-partial-bg: rgba(255, 179, 71, .14);
  --chart-partial-stroke: #ffb347;
  --hatch-opacity: .3;
  --chart-today: #edf1f6;
  /* dark is composed, not inverted: more coverage = BRIGHTER */
  --heat-0: #222b37; --heat-1: #2b3d56; --heat-2: #2f4b70; --heat-3: #4a6e9e; --heat-4: #7fa2cd; --heat-5: #c4d6ee;
  --red: #f87171; --green: #4ade80; --purple: #a78bfa; --cyan: #22d3ee;
  --color-overlay: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* Native scripts: the right face, size and line height, on ANY element that
   carries the language, not just the root. A custom property inherits its
   computed value, so redefining only --font-native on a lang="ta" span would
   never reach font-family (--font was already resolved on :root). Each rule
   therefore restates the whole stack and applies it. Tamil chrome inside an
   English /news page is then pixel-identical to Tamil chrome on a Tamil page. */
:lang(ta) { --font-native: "Noto Sans Tamil", "Nirmala UI", "Latha", "Tamil Sangam MN", sans-serif; }
:lang(te) { --font-native: "Noto Sans Telugu", "Nirmala UI", "Gautami", "Telugu Sangam MN", sans-serif; }
:lang(kn) { --font-native: "Noto Sans Kannada", "Nirmala UI", "Tunga", "Kannada Sangam MN", sans-serif; }
:lang(ml) { --font-native: "Noto Sans Malayalam", "Nirmala UI", "Kartika", "Malayalam Sangam MN", sans-serif; }
:lang(pa) { --font-native: "Noto Sans Gurmukhi", "Nirmala UI", "Raavi", "Gurmukhi Sangam MN", sans-serif; }
:lang(gu) { --font-native: "Noto Sans Gujarati", "Nirmala UI", "Shruti", "Gujarati Sangam MN", sans-serif; }
:lang(bn), :lang(as) { --font-native: "Noto Sans Bengali", "Nirmala UI", "Vrinda", "Bangla Sangam MN", sans-serif; }
:lang(hi), :lang(mr) { --font-native: "Noto Sans Devanagari", "Nirmala UI", "Mangal", "Devanagari Sangam MN", sans-serif; }
:is(:lang(ta), :lang(te), :lang(kn), :lang(ml), :lang(pa), :lang(gu), :lang(bn), :lang(as), :lang(hi), :lang(mr)) {
  --font: "Inter", var(--font-native), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--font);
  /* Indic glyphs sit small next to Latin at the same px: the two meta sizes
     step up one notch (still six sizes per page). */
  --fs-1: 13px; --fs-2: 14px;
}
/* Telugu and Kannada read ~2px smaller than Tamil at the same px, and stacked
   conjuncts need more leading. */
:is(:lang(te), :lang(kn)) { --fs-1: 14px; --fs-2: 15px; --fs-3: 16px; --fs-4: 18px; --lh-native: 1.6; }
/* English inside a native page keeps the region's face as its fallback, so
   untagged native text in an English block still renders in Noto, not in the
   OS fallback. The region default comes from <html data-region>. */
:lang(en) { --font: "Inter", var(--font-native), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: var(--font); }
html[data-region="tamil_nadu"] { --font-native: "Noto Sans Tamil", "Nirmala UI", "Latha", "Tamil Sangam MN", sans-serif; }
html[data-region="andhra_telangana"] { --font-native: "Noto Sans Telugu", "Nirmala UI", "Gautami", "Telugu Sangam MN", sans-serif; }
html[data-region="karnataka"] { --font-native: "Noto Sans Kannada", "Nirmala UI", "Tunga", "Kannada Sangam MN", sans-serif; }
html[data-region="kerala"] { --font-native: "Noto Sans Malayalam", "Nirmala UI", "Kartika", "Malayalam Sangam MN", sans-serif; }
html[data-region="punjab"] { --font-native: "Noto Sans Gurmukhi", "Nirmala UI", "Raavi", "Gurmukhi Sangam MN", sans-serif; }
html[data-region="gujarat"] { --font-native: "Noto Sans Gujarati", "Nirmala UI", "Shruti", "Gujarati Sangam MN", sans-serif; }
html:is([data-region="west_bengal"], [data-region="assam"]) { --font-native: "Noto Sans Bengali", "Nirmala UI", "Vrinda", "Bangla Sangam MN", sans-serif; }
html:is([data-region="delhi"], [data-region="bihar"]) { --font-native: "Noto Sans Devanagari", "Nirmala UI", "Mangal", "Devanagari Sangam MN", sans-serif; }
:where([lang]) { font-family: var(--font); }
:where(:lang(ta), :lang(te), :lang(kn), :lang(ml), :lang(pa), :lang(gu), :lang(bn), :lang(as), :lang(hi), :lang(mr)) { line-height: var(--lh-native); letter-spacing: 0; }
@media (max-width: 720px) {
  :is(:lang(te), :lang(kn)) { --fs-4: 17px; }
}
/* Secondary text in an Indic script keeps native leading: the component
   rules below set Latin line heights (1.4–1.5) that clip stacked conjuncts
   and vowel signs at 13–14px. */
:is(.meta, .evidence, .note, .ev p, .src, .vm, .vc, .sub, .empty, .legend, .b-legend, .since, .dbars-x, .tile .sub, .facts dd.sub, .lb .rl):is(:lang(ta), :lang(ml)) { line-height: 1.6; }
:is(.meta, .evidence, .note, .ev p, .src, .vm, .vc, .sub, .empty, .legend, .b-legend, .since, .dbars-x, .tile .sub, .facts dd.sub, .lb .rl):is(:lang(te), :lang(kn)) { line-height: 1.6; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-3); line-height: var(--lh-latin);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
html:not(:lang(en)) body { line-height: var(--lh-native); }
body:lang(en) { line-height: var(--lh-latin); }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }
.num, time, [data-countup] { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 4px; }
.skip:focus { left: 16px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--pc, var(--rest)); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.accent { color: var(--accent-text); }
.nowrap { white-space: nowrap; }
.clamp-1, .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; } .clamp-2 { -webkit-line-clamp: 2; } .clamp-3 { -webkit-line-clamp: 3; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.page-body { min-height: 50vh; padding-bottom: var(--s5); }
/* full-bleed band inside the centred main column */
.bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s5); align-items: start; }
/* Two-column shells: columns take their own height (no equal-height stretch,
   no min-heights), so the footer follows the content. On a wide screen the
   rail stays in view while the main column scrolls (tick-b.js sets --rail-top
   so a rail taller than the window scrolls to its end first); under 1081px
   the rail reflows under the main column. */
@media (min-width: 1081px) {
  .grid > .rail.rail-stick { position: sticky; top: var(--rail-top, var(--s4)); }
  .grid:not(.hm-front) > .rail.rail-under { grid-column: 1 / -1; columns: 3 300px; column-gap: calc(var(--gutter) * 2); }
  .grid:not(.hm-front) > .rail.rail-under::before { display: none; }
  .grid:not(.hm-front) > .rail.rail-under > * { break-inside: avoid; margin-top: 0; margin-bottom: var(--s6); }
  /* guard (review loop 2, P1): the home front grid never reflows its rail
     under — it keeps its own span and stays in rows 1-2 beside .hm-cont */
  .home .hm-front > .rail.rail-under { columns: auto !important; }   /* beats the inline column-count */
  .home .hm-front.has-cont > .rail.rail-under { grid-row: 1 / span 2; }
}
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; } .span-12 { grid-column: 1 / -1; }
.col-rule { position: relative; }
.col-rule::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) / -2); border-left: 1px solid var(--line); }
.page-body :is(.grid, .rail, .col-main, [class*="span-"]) { min-height: 0; }
.rail > * + * { margin-top: var(--s6); }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.section { margin-top: var(--s7); }
.section:first-child { margin-top: var(--s5); }
.section > .sec-h { margin-bottom: var(--s3); }

/* ---------- masthead ---------- */
.masthead { background: var(--bg); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.masthead .bar { display: flex; align-items: center; gap: var(--s5); height: 60px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-5); font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1; white-space: nowrap; flex: none; font-family: "Inter", system-ui, sans-serif; }
.wordmark svg { width: 26px; height: 26px; flex: none; color: var(--ink); overflow: visible; }
.wordmark svg .ring { stroke: var(--brand, var(--accent)); }
.wordmark b { color: var(--brand, var(--accent)); font-weight: 700; }
.wordmark:hover svg .ring { animation: b-spin .9s var(--ease) 1; transform-origin: 14px 14px; }
.brandbox { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: none; }
.stamp-m { display: none; }
.masthead .nav { display: flex; gap: 2px; min-width: 0; }
.masthead .nav a { display: flex; align-items: center; height: 40px; padding: 0 var(--s3); color: var(--ink-2); font-size: var(--fs-3); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); }
.masthead .nav a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.masthead .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.bar-tools { margin-left: auto; padding-left: var(--s4); display: flex; align-items: center; gap: var(--s2); flex: none; }
.search { position: relative; margin: 0; }
.search input { width: 200px; height: 36px; padding: 0 var(--s3) 0 34px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); font-size: var(--fs-2); transition: border-color var(--t-fast), background var(--t-fast), width var(--t-med) var(--ease); -webkit-appearance: none; appearance: none; }
.search input { text-overflow: ellipsis; }
.search input::placeholder { color: var(--ink-3); text-overflow: ellipsis; }
.search input:focus { outline: none; background: var(--bg); border-color: var(--focus); width: 240px; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search svg { position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.icon-btn { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--ink-2); background: transparent; border: 0; padding: 0; flex: none; transition: background var(--t-fast), color var(--t-fast); }
.icon-btn:hover { background: var(--bg-2); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }
.theme .i-sun { display: none; }
:root[data-theme="dark"] .theme .i-sun { display: block; }
:root[data-theme="dark"] .theme .i-moon { display: none; }
.search-m { display: none; }
.lang { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; flex: none; }
.lang a { display: flex; align-items: center; height: 34px; padding: 0 var(--s3); font-size: var(--fs-2); color: var(--ink-2); font-weight: 500; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); }
.lang a:hover { background: var(--bg-2); color: var(--ink); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.lang .ls { display: none; }
.subbar { background: var(--bg-2); border-top: 1px solid var(--line); }
.subbar .container { display: flex; align-items: center; gap: var(--s5); height: 38px; font-size: var(--fs-1); color: var(--ink-3); overflow: hidden; }
.subbar .parties { display: flex; flex-wrap: wrap; gap: 0 var(--s5); min-width: 0; height: 38px; overflow: hidden; align-items: center; }
.subbar .parties a { display: inline-flex; align-items: center; gap: 6px; line-height: 38px; color: var(--ink-2); font-size: var(--fs-2); white-space: nowrap; }
.subbar .parties a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.subbar .parties .pl { font-size: var(--fs-1); color: var(--ink-3); white-space: nowrap; margin-right: calc(var(--s3) - var(--s5)); }
.subbar .parties .pl::after { content: ":"; }
.nav-more { display: none; }
.subbar .stamp { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.navrow { display: none; }
.stamp-row { display: none; }

/* live dot: the only looping motion on the site */
/* graded by the newest item's age: green ≤ 15 min (pulses), amber ≤ 60 min,
   grey beyond. A bare .live (legacy markup) is treated as unknown: no pulse. */
.live { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--fresh-stale); flex: none; }
.live.is-live { background: var(--fresh-live); }
.live.is-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: b-ping 1.8s var(--ease) infinite; }
.live.is-recent { background: var(--fresh-recent); }
.live.is-stale, .live.stale { background: var(--fresh-stale); }
.stamp .fresh { display: inline-flex; align-items: center; gap: 6px; }
abbr[title] { text-decoration: none; cursor: help; }
.stamp .fresh .ago { color: var(--ink-3); }
.stamp .fresh .ago::before { content: "·"; margin-right: 6px; }

/* ---------- page head / breadcrumb ---------- */
.pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); padding: 20px 0 12px; flex-wrap: wrap; }
.pagehead h1 { font-size: var(--fs-5); font-weight: 700; line-height: 1.35; }
.pagehead p { font-size: var(--fs-2); color: var(--ink-2); }
.col-main { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.breadcrumb { padding-top: var(--s5); font-size: min(var(--fs-2), 14px); line-height: 1.5; color: var(--ink-3); min-width: 0; }
.breadcrumb ol { display: flex; flex-wrap: nowrap; gap: var(--s2); min-width: 0; overflow: hidden; }
.breadcrumb li { white-space: nowrap; flex: none; }
.breadcrumb li:last-child { flex: 0 1 auto; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--s2); color: var(--ink-3); }
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb + h1, .breadcrumb + .pagehead { margin-top: var(--s2); }

/* ---------- headings & text ---------- */
.page-body > h1, .h1 { font-size: var(--fs-6); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: var(--s5) 0 var(--s2); }
.page-body > h2, .h2 { font-size: var(--fs-3); font-weight: 700; line-height: 1.45; padding: var(--s2) 0; margin: var(--s7) 0 var(--s3); border-top: 2px solid var(--ink); }
.lede { font-size: var(--fs-4); color: var(--ink-2); line-height: 1.55; max-width: 72ch; margin: 0 0 var(--s4); }
.prose { max-width: 72ch; font-size: var(--fs-3); line-height: 1.7; color: var(--ink); }
.prose p + p { margin-top: var(--s3); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.prose a:hover { text-decoration-color: var(--ink); }
.note { margin-top: var(--s2); font-size: var(--fs-1); color: var(--ink-3); line-height: 1.55; }
.empty { color: var(--ink-3); font-size: var(--fs-2); padding: var(--s3) 0; }
.kicker { font-size: var(--fs-2); font-weight: 700; color: var(--accent-text); }
.eyebrow { font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.cta { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--s4); border-radius: var(--radius); background: var(--ink); color: var(--bg); font-size: var(--fs-2); font-weight: 600; }
.cta:hover { color: var(--bg); opacity: .9; }

/* ---------- section heads ---------- */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-top: 2px solid var(--ink); }
.sec-h h2 { font-size: var(--fs-3); font-weight: 700; color: var(--ink); line-height: 1.45; min-width: 0; margin: 0; }
.sec-h .sub { font-size: var(--fs-1); color: var(--ink-3); font-weight: 400; margin-left: var(--s2); }
.sec-h a { font-size: var(--fs-2); color: var(--ink-2); font-weight: 500; white-space: nowrap; flex: none; }
.sec-h a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sec-h a.arr { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -4px -8px -4px 0; border-radius: var(--radius); align-self: center; }
.sec-h a.arr svg { width: 13px; height: 13px; transition: transform var(--t-fast) var(--ease); }
.sec-h a.arr:hover { background: var(--bg-2); }
.sec-h a.arr:hover svg { transform: translate(2px, -2px); }
.sec-h.thin { border-top-width: 1px; border-top-color: var(--line-strong); }

/* ---------- evidence: quiet provenance under every aggregate ---------- */
/* Meta and evidence lines WRAP; they are never cut mid-word. Each item is
   nowrap and carries its own leading "·" (painted as a background dot, so it
   never collides with an item's own ::before/::after); the line box is
   shifted left by one separator width and clipped there, so a separator that
   would begin a wrapped line is hidden and no line ever starts with "·". */
.ev p:has(> *), p.ev:has(> *), .evidence, .meta:has(> *), .pagehead p:has(> span), .lb .rl {
  --sep: 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px;
  margin-left: calc(var(--sep) * -1); clip-path: inset(-3px -3px -3px var(--sep));
  min-width: 0;
}
.ev p:has(> *) > *, p.ev:has(> *) > *, .evidence > *, .meta:has(> *) > *, .pagehead p:has(> span) > *, .lb .rl > :not(.dot) {
  white-space: nowrap; padding-left: var(--sep);
  background-image: radial-gradient(circle, var(--ink-3) 0 1.2px, transparent 1.7px);
  background-repeat: no-repeat; background-size: var(--sep) 1em; background-position: 0 55%;
}
/* VERIFY-2a: a lone item has no separator to protect — let a long sentence
   wrap (the empty /search evidence line pushed the 390px page to 531px). */
.evidence > :only-child, .meta:has(> *) > :only-child { white-space: normal; }
.ev p, p.ev { font-size: var(--fs-2); line-height: 1.5; color: var(--ink-2); }
.ev .ev2 { color: var(--ink-3); }
.ev .ev2 time { color: var(--ink-2); }
.ev .o { font-size: var(--fs-1); color: var(--ink-3); }
.ev .d24 { color: var(--ink-3); }
.ev .d24.hot { color: var(--delta-up); font-weight: 600; }
.ev .d24.hot::after { content: ""; display: inline-block; margin-left: 5px; vertical-align: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--delta-up); }
.delta-up { color: var(--delta-up); }
.delta-down { color: var(--delta-down); }
.meta { font-size: var(--fs-1); color: var(--ink-3); line-height: 1.5; }
/* "Based on N articles · M outlets · updated T" */
.evidence { margin-top: var(--s3); font-size: var(--fs-1); color: var(--ink-3); line-height: 1.6; }
.evidence b { color: var(--ink-2); font-weight: 600; }
.evidence.modeled::before { content: attr(data-label); margin-left: var(--sep); margin-right: 8px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 3px; font-size: var(--fs-1); color: var(--ink-2); }
/* on a phone, the lowest-priority segment (the 24h delta) drops before
   anything is cut */
@media (max-width: 399px) { .ev .d24, .meta .ev-lo, .evidence .ev-lo { display: none; } }
/* Review loop 1 (P1): one long item ("Based on 43 articles and 104 videos in
   the last 24 hours…") pushed the 390px page to 481px. On a phone an item
   longer than the line WRAPS inside itself; its separator dot stays on the
   item's FIRST line (positioned from the top, not centred on the block). */
@media (max-width: 640px) {
  .evidence > .ev-i, .ev p:has(> *) > *, p.ev:has(> *) > *, .meta:has(> *) > *, .pagehead p:has(> span) > *, .lb .rl > :not(.dot) {
    white-space: normal; min-width: 0; max-width: 100%; overflow-wrap: break-word;
    background-position: 0 calc((1lh - 1em) / 2 + .05em);
  }
}
@supports not (height: 1lh) {
  @media (max-width: 640px) {
    .evidence > .ev-i, .ev p:has(> *) > *, p.ev:has(> *) > *, .meta:has(> *) > *, .pagehead p:has(> span) > *, .lb .rl > :not(.dot) { background-position: 0 .35em; }
  }
}

/* ---------- avatars, marks, chips ---------- */
/* ONE avatar (render.avatar / render.party_mark). The party tint and the
   monogram are painted first; the photo covers them when it loads. A missing,
   slow or broken photo therefore shows the monogram, never an empty ring. */
.av { --av: 40px; position: relative; flex: none; display: inline-block; width: var(--av); height: var(--av); border-radius: 50%;
  background: color-mix(in srgb, var(--pc, var(--ring, var(--ink-3))) 12%, var(--bg));
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ring, var(--line-strong)); overflow: hidden; vertical-align: middle; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.av img[hidden] { display: none; }
.av .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: max(11px, calc(var(--av) * .42)); font-weight: 700; line-height: 1; letter-spacing: 0;
  color: color-mix(in srgb, var(--pc, var(--ring, var(--ink-2))) 55%, var(--ink)); background: transparent; }
/* no photo and no monogram: nothing at all (never an empty ring); the box
   keeps its width so a row's text edge stays straight */
.av.noini:has(> img[hidden]), .av.noini:not(:has(> img)) { visibility: hidden; }
.av.xs { --av: 26px; box-shadow: 0 0 0 2px var(--bg); }
.av.sm { --av: 32px; }
.av.lg { --av: 64px; }
.av.xl { --av: 104px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ring, var(--line-strong)); }
/* party marks: the full short name ("திமுக"), font fitted server-side
   (--mk, never below 11px); a name that still will not fit becomes a pill */
.av.pmk .ini { font-size: var(--mk, 13px); white-space: nowrap; }
.av.pmk.wide { width: auto; min-width: var(--av); padding: 0 8px; border-radius: 999px; }
.av.pmk.wide .ini { position: static; height: 100%; }
:root[data-theme="dark"] .av { background: color-mix(in srgb, var(--pc, var(--ring, var(--ink-3))) 18%, var(--bg)); }
:root[data-theme="dark"] .av .ini { color: color-mix(in srgb, var(--pc, var(--ring, var(--ink-2))) 70%, #fff); }
.faces { display: inline-flex; flex: none; }
.faces .av + .av { margin-left: -7px; }
.pmark { display: block; width: 40px; height: 26px; position: relative; }
.pmark::after { content: ""; position: absolute; left: 14px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 16%, transparent); }
/* Story-row marker rule (review loop 1): a face only for the leader the H1
   names; else the dots of the parties the H1 names; else NO glyph, with the
   40px column kept so every title starts on the same edge. Never an empty
   or grey placeholder circle. */
.pmark.empty::after, .pmark:not([style*="--pc"])::after { content: none; }
/* Review loop 2: the hollow placeholder circle some families painted on
   .pmark.empty read as a radio button. The one rule is enforced for every
   family: a party-colour dot, a face only for the story's subject, or no
   glyph at all. */
:root .pmark.empty::after, :root .pmark:not([style*="--pc"]):not(.multi)::after { content: none !important; }
.pmark.multi { display: flex; gap: 4px; align-items: center; justify-content: flex-start; padding: 6px 0 0 8px; height: auto; }
.pmark.multi::after { content: none; }
.pmark.multi > i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--pc); }
/* the small key under a list whose rows carry party dots */
.mk-legend { display: flex; flex-wrap: wrap; gap: 2px var(--s4); margin-top: var(--s2); font-size: var(--fs-1); color: var(--ink-3); }
.mk-legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mk-legend .dot { width: 8px; height: 8px; }
.mk-legend .lbl { color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 4px var(--s4); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--ink-2); font-weight: 500; white-space: nowrap; }
a.chip:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 3px; font-size: var(--fs-1); font-weight: 600; color: var(--ink-2); white-space: nowrap; line-height: 1; vertical-align: 1px; }
:is(:lang(ta), :lang(te), :lang(kn), :lang(ml)) .tag, .tag:is(:lang(ta), :lang(te), :lang(kn), :lang(ml)) { font-size: var(--fs-1); height: 22px; padding: 0 8px; }
.tag.accent { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-text); background: var(--accent-soft); }
.tag.modeled { border-style: dashed; }
.ev-how a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.ev-how a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* legacy pill row (link_pills) */
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-2); color: var(--ink-2); background: var(--bg); transition: border-color var(--t-fast), color var(--t-fast); }
.pill:hover { border-color: var(--ink-3); color: var(--ink); }

/* ---------- lists ---------- */
/* generic linked list with a hairline between rows */
.list > li + li { border-top: 1px solid var(--line); }
.list > li > a, .list > li > .li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 7px 0; min-width: 0; }
.list .t { font-size: var(--fs-3); font-weight: 500; color: var(--ink); min-width: 0; }
.list a:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.list .m { font-size: var(--fs-1); color: var(--ink-3); white-space: nowrap; flex: none; }
/* card_grid(): a hairline index of links, 3 → 2 → 1 columns */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.cards > li { border-bottom: 1px solid var(--line); min-width: 0; }
.cards > li > a { display: block; padding: var(--s2) 0; }
.cards b { font-size: var(--fs-3); font-weight: 600; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cards small { display: block; margin-top: 2px; font-size: var(--fs-2); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cards a:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* Names are never cut to "உதயநிதி ஸ்டா…" (review loop 2): a person, party,
   outlet or channel name in a rail or list wraps to at most two lines, and
   its count sits in its own right-aligned column (min 3ch). The selectors
   below cover the family lists that still clipped names; the specificity
   bump (:root .page-body) lets this one rule win over each family's own. */
:root .page-body :is(.chan .cn, .qe-outlets .on, .s-rail .outlets .on, .s-rail .ppl div span, .scard .nm2, .ttw .tt-pi-t) {
  white-space: normal; text-overflow: clip; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; line-height: 1.35;
}
:root .page-body :is(.chan .cv, .qe-outlets > li > :last-child, .s-rail .outlets li > :last-child) { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
/* news_list(): headline + source line */
.news > li { padding: 7px 0; }
.news > li + li { border-top: 1px solid var(--line); }
.news > li > a { font-size: var(--fs-3); font-weight: 500; line-height: 1.5; color: var(--ink); }
.news > li > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.news .src { margin-top: 2px; font-size: var(--fs-1); color: var(--ink-3); }

/* ---------- lead story & story rows ---------- */
.lead { padding: var(--s1) 0 var(--s4); border-bottom: 1px solid var(--line); }
.lead-top { display: flex; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s2); flex-wrap: wrap; font-size: var(--fs-2); }
.lead-top .chips { margin-left: auto; }
.since { color: var(--ink-3); }
.lead h2 { font-size: var(--fs-6); font-weight: 700; line-height: 1.4; }
.lead .en { margin-top: var(--s1); font-size: var(--fs-3); color: var(--ink-2); }
.lead-ev { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); min-width: 0; }
.lead-ev .ev { min-width: 0; }
.lead .dev { margin-top: var(--s3); }
.lead .dev li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s2); padding: 6px 0 0; font-size: var(--fs-3); line-height: 1.5; }
.lead .dev li span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lead .dev time { font-size: var(--fs-1); color: var(--ink-3); padding-top: 2px; }
.lead h2 a:hover, .story h3 a:hover, .vid h3 a:hover, .wire a.t:hover, .tl a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.stories > li + li { border-top: 1px solid var(--line); }
.story { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); padding: 10px 0; align-items: start; }
.story.nomark { grid-template-columns: minmax(0, 1fr); }
.story .sb { min-width: 0; }
.story-context { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 7px 0 8px; font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); }
.story-context .context-label { color: var(--ink-2); }
.story-context a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--ink-2); min-height: 28px; }
.story-context a span:not(.av):not(.ini):not(.dot) { min-width: 0; overflow-wrap: anywhere; }
.story-context a:hover, .story-context summary:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.story-context a:focus-visible, .story-context summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.story-context .av { vertical-align: middle; }
.story-place svg { flex: none; }
.story-context-more { max-width: 100%; }
.story-context-more summary { cursor: pointer; min-height: 28px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.story-context-more[open] { flex-basis: 100%; }
.story-context-more > div { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 0; }
.story h3 { font-size: var(--fs-4); font-weight: 600; line-height: 1.5; margin-bottom: var(--s1); }
.story.compact h3 { font-size: var(--fs-3); }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.cards3 > li { border-bottom: 1px solid var(--line); }

/* latest headlines ("wire") */
.wire li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--s2); padding: 7px 0; }
.wire li + li { border-top: 1px solid var(--line); }
.wire time { font-size: var(--fs-1); color: var(--ink-3); padding-top: 3px; }
.wire a.t { font-size: var(--fs-3); line-height: 1.5; color: var(--ink); font-weight: 500; }
.wire .src { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: var(--fs-1); color: var(--ink-3); }
.wire .vk svg { width: 10px; height: 10px; color: var(--ink-3); display: block; }

/* ---------- leaderboard rows ---------- */
.lb li a, .lb li > .row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: 7px 0; }
.lb li + li a, .lb li + li > .row { border-top: 1px solid var(--line); }
.lb li a:hover .nm { text-decoration: underline; text-underline-offset: 3px; }
.lb .rk { font-size: var(--fs-1); color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.lb .lbm { min-width: 0; }
.lb .nm { font-size: var(--fs-3); font-weight: 600; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
/* leaderboard meta: wraps to a second line rather than clipping "14 ஊடகங்கள்";
   the row's own "·" spans give way to the shared separator */
.lb .rl { --sep: 12px; align-items: center; font-size: var(--fs-2); color: var(--ink-2); line-height: 1.5; }
.lb .rl > span[aria-hidden="true"]:not(.dot) { display: none; }
.lb .rl > .dot { margin-left: var(--sep); margin-right: 6px; }
.lb .rl > .dot + * { padding-left: 0; background-image: none; }
.lb .rl .dot { width: 6px; height: 6px; }
.lb .bar { margin-top: 5px; height: 3px; background: var(--track); border-radius: 2px; overflow: hidden; }
.lb .bar i { display: block; height: 100%; background: var(--pc, var(--ink-3)); }
.lb .v { min-width: 3ch; text-align: right; font-size: var(--fs-4); font-weight: 700; line-height: 1.2; align-self: start; padding-top: 1px; font-variant-numeric: tabular-nums; }
.lb .v small { display: block; font-size: var(--fs-1); font-weight: 500; color: var(--ink-3); }
.mv { font-size: var(--fs-1); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv.up { color: var(--delta-up); } .mv.down { color: var(--delta-down); } .mv.flat, .mv.new { color: var(--ink-3); }
.mv.up::before { content: "▲ "; font-size: .8em; } .mv.down::before { content: "▼ "; font-size: .8em; }

/* ---------- bars ---------- */
.b-bar { height: 6px; background: var(--track); border-radius: 2px; overflow: hidden; }
.b-bar > i { display: block; height: 100%; width: var(--w, 0%); background: var(--pc, var(--ink-3)); border-radius: 2px; }
.share li a, .share li .row { display: grid; grid-template-columns: 88px minmax(0, 1fr) 52px; gap: var(--s3); align-items: center; padding: 6px 0; }
.share .pn { font-size: var(--fs-2); font-weight: 600; color: var(--ink); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.share .rest .pn { color: var(--ink-2); font-weight: 500; }
.share .pv { min-width: 3ch; text-align: right; font-size: var(--fs-1); color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.share .track { height: 8px; background: var(--track); border-radius: 2px; overflow: hidden; }
.share .track i { display: block; height: 100%; border-radius: 2px; background: var(--pc, var(--ink-3)); }
.share .rest .track i { background: var(--rest); }
.share li a:hover .pn { text-decoration: underline; text-underline-offset: 3px; }
@supports (grid-template-columns: subgrid) {
  .share { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; column-gap: var(--s3); }
  .share > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
  .share li a, .share li .row { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .share .pn { overflow: visible; }
  .share .pv { min-width: 44px; }
}
/* Share bar (render.share_bar): full-saturation party colours, 2px surface
   gaps, focus = a segment 2px taller + a bold legend item. Nothing is ever
   desaturated to show focus. */
.stackbar { display: flex; align-items: center; height: 12px; gap: 2px; background: transparent; }
.stackbar i { display: block; height: 10px; min-width: 2px; flex: 1 1 0; background: var(--pc, var(--rest)); }
.stackbar i:first-child { border-radius: 2px 0 0 2px; }
.stackbar i:last-child { border-radius: 0 2px 2px 0; }
.stackbar i.rest { background: var(--rest); }
.stackbar i.on, .stackbar i.me { height: 12px; }
/* The spec, enforced for every family: focus is never shown by fading the
   other parties (two faded reds read as one party). */
.stackbar > i { opacity: 1 !important; filter: none !important; }
.legend { display: flex; flex-wrap: wrap; gap: 4px var(--s5); margin-top: var(--s2); font-size: var(--fs-2); color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend b { color: var(--ink); font-weight: 600; font-size: var(--fs-1); }
.legend li.on { color: var(--ink); font-weight: 700; }
.legend li.on b { font-weight: 700; }
.legend a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sharebar { margin: 0; }
.sharebar .note.low { color: var(--warn); }

/* ---------- video cards (render.video_card / video_grid) ---------- */
/* auto-fit: the cards present stretch to fill the row, never a partly empty
   grid. The fixed 16:9 crop always shows something: the channel logo on a
   neutral surface under the thumbnail (no pastel tints, no Latin monograms). */
.vids { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); }
.vid { min-width: 0; }
.vid .th { display: block; position: relative; aspect-ratio: 16 / 9; height: auto; border-radius: 4px; overflow: hidden;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.vid .th .thfb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vid .th .thfb .chlogo { position: static; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; transform: none; }
.vid .th img.yt, .vid .th > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform var(--t-med) var(--ease); }
.vid .th img[hidden] { display: none; }
.vid h3.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vid:hover .th img.yt { transform: scale(1.03); }
.vid .th .play { position: absolute; left: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(17, 24, 39, .8); display: flex; align-items: center; justify-content: center; }
.vid .th .play svg { width: 9px; height: 9px; color: #fff; margin-left: 2px; }
.vid .th .livebadge { position: absolute; right: 6px; top: 6px; background: #c81e1e; color: #fff; font-size: var(--fs-1); font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.vid .vb { min-width: 0; }
.vid h3 { margin-top: var(--s2); font-size: var(--fs-3); font-weight: 600; line-height: 1.5; }
.vid h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vid .vc, .vid .vm { font-size: var(--fs-1); color: var(--ink-3); line-height: 1.5; }
.vid .vc { margin-top: 2px; color: var(--ink-2); font-weight: 500; overflow-wrap: anywhere; }


/* ---------- day bars (render.day_bars) ---------- */
/* Neutral ink by default; entity pages pass the entity colour as --bar; the
   brand orange marks today only. */
.dbars { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 6px; align-items: end; height: var(--h, 72px); }
.dbars > i { display: block; height: var(--v, 0%); min-height: 2px; background: var(--bar, var(--chart-ink)); border-radius: 2px 2px 0 0; transform-origin: 50% 100%; animation: b-grow-y .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
.dbars > i.today { background: var(--chart-today); }
.dbars > i.gap { background: repeating-linear-gradient(45deg, var(--chart-ink-soft) 0 2px, transparent 2px 5px); height: 100%; opacity: .5; }
.dbars-x { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 6px; margin-top: 4px; font-size: var(--fs-1); color: var(--ink-3); text-align: center; }

/* ---------- KPI tiles ---------- */
/* <dl class="tiles"><div class="tile"><dt>Label</dt><dd class="v" data-countup>823</dd>
   <dd class="sub">from 43 outlets</dd></div>…</dl> */
.tiles { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0; }
.tile { position: relative; padding: var(--s3) var(--s4) var(--s4); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* ONE stat cell (review loop 2): label · value · sub on a shared baseline.
   The label row always reserves two label lines and its text sits on the
   row's bottom edge, so a label that wraps ("இடம்பெறும் தலைவர்கள் · 24 மணி")
   no longer drops its value below its neighbours'. Used by the KPI tiles
   (home hero, exchange indexes) and the profile header (.stats). Labels are
   clamped at two lines, so no label can outgrow the reserved row. */
.tile:has(> dt), .stats > div {
  --stat-lbl: calc(var(--fs-2) * 1.45 * 2);
  display: grid; grid-template-rows: minmax(var(--stat-lbl), auto) auto auto 1fr; grid-template-columns: minmax(0, 1fr);
  align-items: end; row-gap: 2px; align-content: start;
}
.tile:has(> dt) > :nth-child(n + 2), .stats > div > :nth-child(n + 2) { align-self: start; }
.tile:has(> dt) > :nth-child(n + 4) { align-self: end; }
:is(.tile > dt, .stats > div > dt) { line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tile + .tile { border-left: 1px solid var(--line); }
.tile:first-child { padding-left: 0; }
a.tile:hover .v { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tile dt, .tile .lbl { font-size: var(--fs-2); color: var(--ink-2); font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tile dd { margin: 0; }
.tile .v { font-size: var(--fs-6); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--t-fast); }
.tile .v small { font-size: var(--fs-3); font-weight: 600; color: var(--ink-2); margin-left: 2px; }
.tile .sub { font-size: var(--fs-1); color: var(--ink-3); line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tile .spark { margin-top: auto; padding-top: var(--s2); }
/* facts row (story/leader heads) */
.facts { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts > div { padding: var(--s3) var(--s4); min-width: 0; }
.facts > div + div { border-left: 1px solid var(--line); }
.facts > div:first-child { padding-left: 0; }
.facts dt { font-size: var(--fs-2); color: var(--ink-2); }
.facts dd { margin-top: 2px; font-size: var(--fs-5); font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; }
.facts dd.sub { margin-top: 0; font-size: var(--fs-1); color: var(--ink-3); font-weight: 400; }

/* ---------- sparkline ---------- */
/* <svg class="spark" viewBox="0 0 120 28"><path class="ln" pathLength="1" d="…"/></svg> */
.spark { display: block; width: 100%; height: 28px; overflow: visible; }
.spark .ln { fill: none; stroke: var(--pc, var(--ink-2)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark .area { fill: var(--pc, var(--ink-3)); opacity: .08; stroke: none; }
.spark .gap { stroke: var(--line-strong); stroke-dasharray: 2 3; fill: none; vector-effect: non-scaling-stroke; }
.spark .end { fill: var(--pc, var(--ink-2)); }

/* ---------- map (server-rendered SVG choropleth) ---------- */
/* <figure class="b-map"><svg viewBox="…"><a href="/district/x" style="--i:3"><path class="b3" d="…"/>
   <title>…</title></a>…</svg><figcaption class="b-legend">…</figcaption></figure> */
.b-map { position: relative; margin: 0; }
.b-map svg { display: block; width: 100%; height: auto; }
.b-map path { fill: var(--heat-0); stroke: var(--bg); stroke-width: .8; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill var(--t-fast), stroke var(--t-fast), stroke-width var(--t-fast), opacity var(--t-fast); }
.b-map .b1 { fill: var(--heat-1); } .b-map .b2 { fill: var(--heat-2); } .b-map .b3 { fill: var(--heat-3); }
.b-map .b4 { fill: var(--heat-4); } .b-map .b5 { fill: var(--heat-5); }
.b-map a { outline: none; }
.b-map a path { animation: b-fade .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
.b-map svg:hover a path { opacity: .72; }
.b-map a:hover path, .b-map a:focus-visible path, .b-map a.on path { opacity: 1; stroke: var(--ink); stroke-width: 1.6; }
.b-map a:focus-visible path { stroke: var(--focus); stroke-width: 2; }
.b-map .lbl { font-size: 11px; fill: var(--ink-2); pointer-events: none; font-weight: 600; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.b-legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); font-size: var(--fs-1); color: var(--ink-3); }
.b-legend .ramp { display: inline-flex; gap: 2px; align-items: center; }
.b-legend .ramp i { display: block; width: 22px; height: 8px; border-radius: 1px; background: var(--heat-0); }
.b-legend .ramp i:nth-child(2) { background: var(--heat-1); } .b-legend .ramp i:nth-child(3) { background: var(--heat-2); }
.b-legend .ramp i:nth-child(4) { background: var(--heat-3); } .b-legend .ramp i:nth-child(5) { background: var(--heat-4); }
.b-legend .ramp i:nth-child(6) { background: var(--heat-5); }
.b-tip { position: absolute; z-index: 5; min-width: 180px; max-width: 260px; padding: var(--s3); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(17, 24, 39, .12); font-size: var(--fs-2); pointer-events: auto; animation: b-rise .15s var(--ease) both; }
.b-tip b { display: block; font-size: var(--fs-3); }
.b-tip .m { color: var(--ink-2); margin-top: 2px; }
.b-tip a { display: inline-block; margin-top: var(--s2); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- tables ---------- */
.b-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.b-table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.b-table th { text-align: left; font-weight: 600; color: var(--ink-2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.b-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
.b-table th:first-child, .b-table td:first-child { padding-left: 0; }
.b-table th:last-child, .b-table td:last-child { padding-right: 0; }
.b-table .num, .b-table td.r, .b-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.b-table tbody tr { transition: background var(--t-fast); }
.b-table tbody tr:hover { background: var(--bg-2); }
.b-table a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- segmented control / tabs (smooth range switches) ---------- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.seg > a, .seg > button { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--s3); border: 0; background: transparent; font-size: var(--fs-2); font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); }
.seg > * + * { border-left: 1px solid var(--line); }
.seg > a:hover, .seg > button:hover { background: var(--bg-2); color: var(--ink); }
.seg > [aria-current="true"], .seg > [aria-selected="true"], .seg > [aria-pressed="true"] { background: var(--ink); color: var(--bg); }
[data-b-panel] { animation: b-fade .25s var(--ease) both; }
[data-b-panel][hidden] { display: none; }

/* ---------- buttons & form controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 var(--s4); border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font-size: var(--fs-2); font-weight: 600; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.btn:hover { border-color: var(--ink-3); background: var(--bg-2); color: var(--ink); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.primary:hover { opacity: .9; background: var(--ink); color: var(--bg); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { height: 30px; padding: 0 var(--s3); }
.btn svg { width: 13px; height: 13px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); }
.input, select.input, textarea.input { width: 100%; min-height: 38px; padding: 8px var(--s3); border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font-size: var(--fs-3); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.input::placeholder { color: var(--ink-3); }
.searchbox { display: flex; gap: var(--s2); max-width: 640px; }
.searchbox .input { flex: 1; }

/* ---------- skeletons ---------- */
.skel { position: relative; overflow: hidden; background: var(--track); border-radius: 3px; color: transparent !important; min-height: 1em; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg) 60%, transparent), transparent); animation: b-shimmer 1.4s ease-in-out infinite; }
.skel.line { height: 12px; margin: 6px 0; }
.skel.block { height: 120px; }

/* ---------- legacy components still emitted by un-ported bodies ---------- */
.crumb { font-size: var(--fs-2); color: var(--ink-3); padding-top: var(--s5); margin-bottom: var(--s2); }
.crumb a { color: var(--ink-2); }
.crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); }
.xc-card { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.xc-card:hover b, .xc-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.xc-linklist a, .nb-related a { color: var(--ink); }
.xc-linklist a:hover, .nb-related a:hover { text-decoration: underline; text-underline-offset: 3px; }
.promo { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s6); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--fs-2); color: var(--ink-2); }
.promo:hover { color: var(--ink); }
.promo svg { width: 13px; height: 13px; flex: none; }

/* ---------- footer ---------- */
/* Review loop 2: ~40% less padding, AA+ link and disclaimer ink, the same
   12-column grid and gutters as the body, light dividers only. */
.foot { margin-top: var(--s5); border-top: 1px solid var(--line-strong); background: var(--bg-elev); }
.foot .grid { padding: var(--s3) 0 var(--s2); row-gap: var(--s2); }
.foot .wordmark { font-size: var(--fs-4); }
.foot .wordmark svg { width: 22px; height: 22px; }
.foot h2 { font-size: var(--fs-2); font-weight: 700; color: var(--ink); margin: 0 0 var(--s1); border: 0; padding: 0; }
.foot li a { display: inline-block; padding: 2px 0; font-size: var(--fs-2); color: var(--ink); }
.foot li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot .about p { font-size: var(--fs-2); color: var(--ink-2); margin-top: var(--s1); max-width: 52ch; line-height: 1.55; }
.foot .about .note { margin-top: var(--s3); }
.foot .legal { border-top: 1px solid var(--line); padding: var(--s2) 0 var(--s3); font-size: var(--fs-1); color: var(--ink-2); display: flex; justify-content: space-between; gap: var(--s1) var(--s4); flex-wrap: wrap; }
.foot .legal a { color: var(--ink); }
.foot .legal a:hover { color: var(--ink); text-decoration: underline; }
.foot .sister { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }

/* ---------- dark theme party tokens ---------- */
/* Party colours arrive per element as --pc (taxonomy data). On the dark
   surface each one is re-projected to lightness ≈ 0.62 at its own hue and
   chroma, so segments stay distinct instead of going maroon/olive. */
@supports (color: oklch(from red l c h)) {
  :root[data-theme="dark"] :is(.stackbar i, .dot, .lb .bar i, .share .track i, .b-bar > i) {
    background-color: oklch(from var(--pc, var(--chart-ink)) clamp(.62, l, .78) clamp(0, c, .19) h);
  }
  :root[data-theme="dark"] .dbars > i:not(.today):not(.gap) {
    background-color: oklch(from var(--bar, var(--chart-ink)) clamp(.62, l, .78) clamp(0, c, .19) h);
  }
  :root[data-theme="dark"] .stackbar i.rest { background-color: var(--rest); }
  :root[data-theme="dark"] .av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px oklch(from var(--ring, var(--line-strong)) clamp(.6, l, .8) c h); }
}

/* ---------- navigation progress bar (tick-b.js) ---------- */
.b-navbar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 2147483646; background: var(--ink-2); opacity: 0; transition: width .2s ease, opacity .35s ease; pointer-events: none; }

/* ---------- motion primitives ---------- */
@keyframes b-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes b-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes b-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes b-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes b-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes b-ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes b-shimmer { to { transform: translateX(100%); } }
@keyframes b-spin { to { transform: rotate(360deg); } }

/* bars grow from the left on first paint */
.lb .bar i, .share .track i, .b-bar > i, .stackbar i, .grow > i, [data-grow] { transform-origin: 0 50%; animation: b-grow .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.cols-grow > i, [data-grow-y] { transform-origin: 50% 100%; animation: b-grow-y .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
/* sparklines draw in: opt-in by giving the path pathLength="1" */
.spark .ln[pathLength="1"], [data-draw][pathLength="1"] { stroke-dasharray: 1; stroke-dashoffset: 0; animation: b-draw 1s var(--ease) both .1s; }
.spark .area, .spark .end { animation: b-fade .6s ease both .7s; }
/* lists fade in, lightly staggered (first 12 rows) */
.fade-in > * { animation: b-rise .35s var(--ease) both; }
.fade-in > :nth-child(2) { animation-delay: 30ms; } .fade-in > :nth-child(3) { animation-delay: 60ms; }
.fade-in > :nth-child(4) { animation-delay: 90ms; } .fade-in > :nth-child(5) { animation-delay: 120ms; }
.fade-in > :nth-child(6) { animation-delay: 150ms; } .fade-in > :nth-child(7) { animation-delay: 180ms; }
.fade-in > :nth-child(8) { animation-delay: 210ms; } .fade-in > :nth-child(9) { animation-delay: 240ms; }
.fade-in > :nth-child(10) { animation-delay: 270ms; } .fade-in > :nth-child(11) { animation-delay: 300ms; }
.fade-in > :nth-child(n+12) { animation-delay: 330ms; }
/* rows that re-render (range switch) glide instead of jumping */
.b-swap { transition: opacity var(--t-med) var(--ease); }
.b-swap.is-out { opacity: 0; }
/* a changed number briefly tints */
.flash { animation: b-flash 1.2s ease 1; }
@keyframes b-flash { 0% { background: var(--bg-2); } 100% { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .live::after { display: none; }
}


/* ==========================================================================
   Review loop 2 — shared components and floors
   ========================================================================== */

/* ---------- change token (attention / rank movement) ---------- */
/* <span class="chg up">+23 கட்டுரைகள் <span class="basis">vs previous 24h</span></span>
   Neutral ink; the arrow carries the direction; the basis is always shown. */
.chg { display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; color: var(--change); font-weight: 600; font-variant-numeric: tabular-nums; }
.chg.up::after, .chg.down::after { content: "▲"; font-size: .75em; order: 1; }
.chg.down::after { content: "▼"; }
.chg .basis { order: 2; font-weight: 400; color: var(--ink-3); font-size: var(--fs-1); }
.chg.flat { color: var(--ink-3); font-weight: 500; }
:root .page-body .hm-tiles .t-rise .sub { color: var(--change); }

/* ---------- stacked share (render.share_bar) ---------- */
/* Segments are focusable (tab / tap) and show a tooltip with the full name,
   count and share; a direct label sits inside a segment only when it fits
   (tick-b.js hides the rest); the legend below repeats every segment in
   segment order. Two parties whose colours a colour-blind reader could
   confuse (BJP orange vs NTK ochre; the teal family) are told apart by a
   stripe texture on the smaller one, mirrored on its legend key — no party
   is ever recoloured. */
.stackbar i { position: relative; outline: none; }
.stackbar i.cb, .legend .dot.cb, .mk-legend .dot.cb {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 5px); }
:root[data-theme="dark"] :is(.stackbar i.cb, .legend .dot.cb) {
  background-image: repeating-linear-gradient(135deg, rgba(15, 20, 27, .55) 0 2px, transparent 2px 5px); }
:root .sharebar .stackbar.lab { height: 22px; }
:root .sharebar .stackbar.lab i { height: 20px; }
:root .sharebar .stackbar.lab i.on { height: 22px; }
.stackbar .sl { position: absolute; inset: 0 6px; display: flex; align-items: center; font-style: normal; font-size: var(--fs-1); font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; color: var(--lc, #fff); pointer-events: none; }
.stackbar .nofit, .stackbar .sl.nofit { visibility: hidden; }
:root[data-theme="dark"] .stackbar .sl { color: #0b0f19; }
.stackbar i.rest .sl { color: var(--ink); }
.stackbar i[data-tip]:is(:hover, :focus-visible, .tip)::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 6;
  padding: 4px 8px; border-radius: 4px; background: var(--ink); color: var(--bg); font-size: var(--fs-1); font-weight: 600; line-height: 1.4; white-space: nowrap; pointer-events: none; }
.stackbar i[data-tip]:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus); }
.stackbar i[data-tip]:first-child:is(:hover, :focus-visible, .tip)::after { left: 0; transform: none; }
.stackbar i[data-tip]:last-child:is(:hover, :focus-visible, .tip)::after { left: auto; right: 0; transform: none; }
.legend .lv { color: var(--ink-3); font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.legend.ordered { gap: 2px var(--s4); }

/* ---------- party-dot key (tick-b.js adds it under dotted lists) ---------- */
.mk-legend.auto { margin: var(--s2) 0 0; padding-top: var(--s2); border-top: 1px solid var(--line); }

/* ---------- one scroll row for tab and chip rows ---------- */
/* <div class="scrollrow"> … </div>, or any overflowing tab/chip row in a page
   body (tick-b.js adds .scrollrow). Whole items snap, the row has trailing
   padding so the last item scrolls fully clear of the fade, the fade shows
   only on the side that has more, and the selected item is underlined. */
.scrollrow { display: flex; flex-wrap: nowrap !important; gap: var(--s1) var(--s4); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 0 var(--s6); -webkit-overflow-scrolling: touch; }
.scrollrow::-webkit-scrollbar { display: none; }
.scrollrow::after { content: ""; flex: 0 0 var(--s5); }
.scrollrow > * { flex: none !important; scroll-snap-align: start; white-space: nowrap; }
.scrollrow.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.scrollrow.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.scrollrow.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.scrollrow:not(.seg) > :is([aria-current]:not([aria-current="false"]), [aria-selected="true"], [aria-pressed="true"], .on, .is-on, .active) {
  color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }

/* ---------- mixed-script headline badge (render.orig_badge) ---------- */
/* the /search language chip, reused on every headline row whose script
   differs from the page language */
.tag.orig, .lchip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; margin-left: 6px; border: 1px solid var(--line-strong); border-radius: 3px;
  font-size: var(--fs-1); font-weight: 500; line-height: 1; color: var(--ink-2); background: var(--bg-2); vertical-align: 2px; white-space: nowrap; }
.src .lchip, .src .tag.orig { margin: 0 6px 0 0; order: -1; }
.disp + .src-t { display: block; margin-top: 2px; font-size: var(--fs-2); color: var(--ink-3); font-weight: 400; }

/* ---------- monogram (render.monogram / avatar) ---------- */
/* one look for every missing photo: neutral party-tinted disc, 1px ring,
   bold native first grapheme */
.av .ini { font-weight: 700; }
:root .page-body :is(.chan .ini, .hm-chan .ini) { background: color-mix(in srgb, var(--ink-3) 10%, var(--bg)); border: 1px solid var(--line-strong); color: var(--ink-2); font-weight: 700; }

/* ---------- dark theme: elevated surfaces, partial-day band, hatches ---------- */
:root[data-theme="dark"] :is(.panel, .b-tip, .nav-sheet, .foot) { background: var(--bg-elev); }
:root[data-theme="dark"] :is(.panel, .b-tip, .nav-sheet) { border-color: var(--line-strong); }
:root[data-theme="dark"] svg .tband { fill: var(--chart-partial-bg); stroke: var(--chart-partial-stroke); stroke-width: .75; stroke-dasharray: 3 2; }
:root[data-theme="dark"] .clegend .tk { background: var(--chart-partial-bg); box-shadow: inset 0 0 0 1px var(--chart-partial-stroke); }
:root[data-theme="dark"] :is(svg .pband, svg .phatch, svg .pwk, .ledger rect.partial, .clegend .hk, .pill.low::before) { opacity: var(--hatch-opacity); }
.dbars > i.gap { opacity: var(--hatch-opacity); }
/* the day-bars partial day (today, still filling): band + dashed top edge */
.dbars > i.partial { background: var(--chart-partial-bg); box-shadow: inset 0 1px 0 var(--chart-partial-stroke); border-top: 1px dashed var(--chart-partial-stroke); }
.key-partial { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: var(--chart-partial-bg); border: 1px dashed var(--chart-partial-stroke); vertical-align: -1px; margin-right: 6px; }

/* ---------- desktop legibility floor (no re-scale) ---------- */
/* Metadata, sources, timestamps, chart and column sub-labels never drop
   under 13px (14–15px in Indic scripts via --fs-1). */
@media (min-width: 721px) {
  :root .page-body :is(.sec-h .sub, .spark-cap, .hm-legend .lab small, .hm-legend .steps span, .credit, .pr-days .d small,
    .tag.sr-lb, .tl .src .plat, .daybars .c, .daybars .dl, .dchip small, .mtag, .flag, .co .v small, small.fr, .topics li > span small,
    .smallbase small, .pill.sm, .b-legend, .legend b, .mk-legend, .pr-band .stackbar .sl) { font-size: var(--fs-1); }
  :root .page-body .tag.sr-lb { height: 20px; }
}

/* ---------- rules: heavy for top-level breaks only ---------- */
.rail > * + * .sec-h, .rail > * + .sec-h, .rail .sec-h ~ .sec-h { border-top-width: 1px; border-top-color: var(--line-strong); }

/* ---------- responsive ---------- */
@media (max-width: 1440px) {
  /* native nav labels are wide ("போக்குகள்"): the search box gives way first */
  html:not(:lang(en)) .search input { width: 168px; }
  html:not(:lang(en)) .search input:focus { width: 200px; }
  html:not(:lang(en)) .masthead .bar > .nav a { padding: 0 10px; }
}
@media (max-width: 1240px) {
  .search input { width: 150px; }
  .search input:focus { width: 190px; }
  .masthead .nav a { padding: 0 10px; }
}
@media (max-width: 1080px) {
  .span-8, .span-4, .span-7, .span-5, .span-9, .span-3 { grid-column: 1 / -1; }
  .col-rule::before { display: none; }
  .span-6 { grid-column: 1 / -1; }
  .cards, .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot .span-2 { grid-column: span 4; }
  .foot .span-4, .foot .span-6 { grid-column: 1 / -1; }
  .search { display: none; }
  .search-m { display: inline-flex; }
  .tiles { --cols: 3; }
  .tiles .tile:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .tiles .tile:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 1120px) {
  .masthead .bar > .nav { display: none; }
  .navrow { display: block; border-top: 1px solid var(--line); }
  /* A deliberate scroll rail: whole tabs snap to the left edge, the last tab
     can scroll fully clear of the fade (end padding), and the fade shows only
     while more tabs sit off to the right (tick-b.js toggles .at-end). */
  .navrow .container { padding-right: 0; }
  .navrow .nav { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    scroll-snap-type: x proximity; scroll-padding-inline: 0 var(--s6);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .navrow .nav.at-end { -webkit-mask-image: none; mask-image: none; }
  .navrow .nav::after { content: ""; flex: 0 0 var(--s6); }
  .navrow .nav::-webkit-scrollbar { display: none; }
  .navrow .nav a { flex: none; height: 40px; font-size: var(--fs-2); scroll-snap-align: start; }
  .navrow .nav a:first-child { padding-left: 0; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; --fs-6: 22px; --fs-5: 18px; }
  /* Phone chrome = two rows (~96px): the masthead (wordmark with the
     freshness line folded under it, search, a compact interface-language
     button, theme) and the nav rail (which ends with the dashboard link).
     The sub-bar is desktop-only. */
  /* Phone chrome (review loop 2): ONE sticky row of 56px — wordmark,
     search, the two-state language control and theme — pinned while the
     page scrolls. The nav rail and a labelled freshness line ("தரவு
     புதுப்பிப்பு: 08:32 IST · 25 நிமிடங்களுக்கு முன்") sit under it and
     scroll away. The sub-bar is desktop-only. */
  html { scroll-padding-top: 64px; }
  .masthead { padding-top: 56px; }
  .masthead .bar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 56px; gap: var(--s2); background: var(--bg); border-bottom: 1px solid var(--line); }
  .wordmark { font-size: var(--fs-4); }
  .wordmark svg { width: 24px; height: 24px; }
  .stamp-m { display: none; }
  .brandbox { flex: 0 1 auto; min-width: 0; }
  .bar-tools { padding-left: 0; gap: 4px; }
  .navrow { border-top: 0; }
  .stamp-row { display: block; border-top: 1px solid var(--line); }
  .stamp-row .container { display: flex; align-items: center; min-height: 32px; font-size: var(--fs-1); color: var(--ink-3); line-height: 1.4; }
  /* wraps like an evidence line: a separator never starts a line */
  .stamp-row .fresh { --sep: 14px; display: flex; align-items: center; flex-wrap: wrap; row-gap: 0; min-width: 0;
    margin-left: calc(var(--sep) * -1); clip-path: inset(-3px -3px -3px var(--sep)); }
  .stamp-row .fresh > .live { margin: 0 6px 0 var(--sep); }
  .stamp-row .fresh > span { white-space: nowrap; }
  .stamp-row .fresh > .ago { padding-left: var(--sep); background-image: radial-gradient(circle, var(--ink-3) 0 1.2px, transparent 1.7px);
    background-repeat: no-repeat; background-size: var(--sep) 1em; background-position: 0 55%; }
  .stamp-row .fresh > .live + span, .stamp-row .fresh > span:first-child { padding-left: 0; }
  .stamp-row .fresh > span:first-child { margin-left: var(--sep); }
  .stamp-row .lbl { color: var(--ink-2); font-weight: 500; }
  /* the language control: the same two-state segmented control as desktop,
     current language selected, short labels */
  .lang { border: 1px solid var(--line-strong); }
  .lang a { padding: 0 8px; height: 32px; min-width: 34px; justify-content: center; }
  .lang .lf { display: none; }
  .lang .ls { display: inline; font-weight: 600; }
  /* list density: non-lead headlines one step down, tighter rows, and the
     story's evidence on at most two lines (the lead keeps its size) */
  .story { padding: 8px 0; gap: var(--s2); }
  .story h3 { font-size: var(--fs-3); line-height: 1.5; margin-bottom: 2px; }
  .story .ev { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 0; --sep: 14px; margin-left: calc(var(--sep) * -1); clip-path: inset(-3px -3px -3px var(--sep)); }
  .story .ev > p { display: contents; }
  .story .ev > p > * { padding-left: var(--sep); white-space: nowrap;
    background-image: radial-gradient(circle, var(--ink-3) 0 1.2px, transparent 1.7px); background-repeat: no-repeat; background-size: var(--sep) 1em; background-position: 0 55%; }
  .story .ev { font-size: var(--fs-1); line-height: 1.5; color: var(--ink-2); }
  .wire li { padding: 6px 0; }
  .news > li, .list > li > a, .list > li > .li { padding-top: 6px; padding-bottom: 6px; }
  /* topic / entity chips flow in rows (never one chip per line) */
  .chips, .pills, :root .page-body :is(.pr-topics, .pr-chips, .tchips, .chiprow) { display: flex; flex-wrap: wrap; }
  :root .page-body :is(.chips, .pills, .pr-topics, .pr-chips, .tchips, .chiprow) > * { width: auto; flex: 0 1 auto; }
  .breadcrumb { padding-top: var(--s3); }
  .icon-btn { width: 34px; height: 34px; }
  .subbar { display: none; }
  /* phone: 3 tabs (the current one always among them) + a "More" sheet */
  .navrow .container { position: relative; display: flex; align-items: center; padding-right: var(--gutter); }
  .navrow .nav { flex: 1 1 auto; -webkit-mask-image: none; mask-image: none; }
  .navrow .nav::after { content: none; }
  .navrow .nav a.nx { display: none; }
  .navrow .nav a { padding: 0 10px; }
  .nav-more { display: block; flex: none; }
  .nav-more summary { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 0 0 var(--s2); font-size: var(--fs-2); font-weight: 500; color: var(--ink-2); cursor: pointer; list-style: none; white-space: nowrap; }
  .nav-more summary::-webkit-details-marker { display: none; }
  .nav-more summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fast); }
  .nav-more[open] summary { color: var(--ink); }
  .nav-more[open] summary::after { transform: translateY(1px) rotate(225deg); }
  .nav-sheet { position: absolute; right: var(--gutter); top: 100%; z-index: 45; min-width: 200px; padding: var(--s1) 0; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(17, 24, 39, .12); animation: b-rise .15s var(--ease) both; }
  .nav-sheet a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s4); font-size: var(--fs-3); color: var(--ink); }
  .nav-sheet a + a { border-top: 1px solid var(--line); }
  .nav-sheet a svg { width: 11px; height: 11px; color: var(--ink-3); }
  .pagehead { padding-top: var(--s4); }
  .pagehead h1 { font-size: var(--fs-4); }
  .page-body > h1, .h1 { font-size: var(--fs-6); margin-top: var(--s4); }
  .section { margin-top: var(--s6); }
  .cards, .cards3 { grid-template-columns: 1fr; }
  .foot .grid { row-gap: var(--s3); }
  /* a stat label may take a third line on a phone rather than lose words */
  :is(.tile > dt, .stats > div > dt) { -webkit-line-clamp: 3; }
  .foot .span-2 { grid-column: span 6; }
  .lead-top .chips { margin-left: 0; }
  .tiles { --cols: 2; }
  .tiles .tile { padding: var(--s3) var(--s3) var(--s3) var(--s4); }
  .tiles .tile:nth-child(3n + 1) { border-left: 1px solid var(--line); padding-left: var(--s4); }
  .tiles .tile:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .tiles .tile:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .tile .v { font-size: var(--fs-5); }
  /* KPI cards in one row are equal height (stretch), each card's label,
     value and sub on the shared baseline above */
  .tiles, .stats { align-items: stretch; }
  .facts { --cols: 2; }
  .facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .share li a, .share li .row { grid-template-columns: 76px minmax(0, 1fr) 48px; }
  .b-table { font-size: var(--fs-1); }
}
@media (max-width: 380px) {
  .lang a { padding: 0 6px; min-width: 30px; }
  .wordmark { font-size: var(--fs-3); }
}
@media print {
  .masthead .bar-tools, .subbar, .navrow, .foot .grid, .b-navbar { display: none !important; }
  body { background: #fff; color: #000; }
}