/* Tick Trends: components layered on the "Intelligence" system (styles.css).
   Same tokens, same hairline language, same six type sizes. New tokens only
   for the jobs the base system never had: direction, modelled tone, a
   sequential ramp for heat, and a hatch for partial data. */

:root {
  /* change is NEUTRAL (colorize 2026-10-02): ▲ / ▼ carry the direction;
     green / red read as AIADMK / DMK here ("▼ 5.5" in red read twice for DMK) */
  --up: var(--change);   --up-bg: var(--change-bg);
  --down: var(--change); --down-bg: var(--change-bg);
  --pos: #34618f;  --neg: #7a5b45;       /* modelled tone: steel / taupe, no party hue */
  --neu: #c3c9d3;
  /* sequential ramp for heat: ΔL* >= 6 between steps, zero cell outlined */
  --seq-0: #eef1f4; --seq-1: #dbe4ef; --seq-2: #b9cbe0; --seq-3: #84a3c6; --seq-4: #4f76a3; --seq-5: #23426a;   /* the site's one steel scale (was AIADMK green) */
  /* categorical series (dataviz validator: adjacent + all-pairs for 1-3, both modes) */
  --sr1: #4a3aa7; --sr2: #1baf7a; --sr3: #eda100; --sr4: #2a78d6; --sr5: #e87ba4;
  --hatch: #6b7483;
  --today: rgba(51, 96, 143, .10);
  --tip-bg: #111827; --tip-ink: #f3f4f6;
}
:root[data-theme="dark"] {
  --up: var(--change);   --up-bg: var(--change-bg);
  --down: var(--change); --down-bg: var(--change-bg);
  --pos: #8fb2db;  --neg: #c9aa92;
  --neu: #4a5566;
  --seq-0: #1a212b; --seq-1: #2b3d56; --seq-2: #2f4b70; --seq-3: #4a6e9e; --seq-4: #7fa2cd; --seq-5: #c4d6ee;
  --sr1: #9085e9; --sr2: #199e70; --sr3: #c98500; --sr4: #3987e5; --sr5: #d55181;
  --hatch: #97a3b5;
  --today: rgba(127, 162, 205, .14);
  --tip-bg: #edf1f6; --tip-ink: #111827;
}

/* ---------- toolbar: window chips ---------- */
.tbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); padding: var(--s3) 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; flex: none; }
.seg button { font: inherit; font-size: var(--fs-2); font-weight: 500; color: var(--ink-2); background: transparent; border: 0; height: 34px; padding: 0 var(--s3); cursor: pointer; white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover:not(:disabled) { background: var(--bg-2); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg button:disabled { color: var(--ink-3); cursor: not-allowed; background: repeating-linear-gradient(135deg, transparent 0 5px, var(--bg-2) 5px 7px); }
.seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.seg.sm button { height: 30px; font-size: var(--fs-1); padding: 0 10px; }
.tbar .meta { font-size: var(--fs-2); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 2px var(--s4); }
.tbar .meta span { white-space: nowrap; }
.tbar .meta .lock { color: var(--ink-3); }
.tbar .meta .lock::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--hatch) 0 1.5px, transparent 1.5px 4px); }
.tbar .right { margin-left: auto; font-size: var(--fs-2); }
.tbar .right a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- delta chips: direction + window, never a naked % ---------- */
.dchip { display: inline-flex; align-items: baseline; gap: 3px; padding: 1px 6px; border-radius: 4px; font-size: var(--fs-1); font-weight: 700; white-space: nowrap; line-height: 1.5; font-variant-numeric: tabular-nums; }
.dchip.up { color: var(--up); background: var(--up-bg); }
.dchip.down { color: var(--down); background: var(--down-bg); }
.dchip.flat { color: var(--ink-2); background: var(--bg-2); }
.dchip.new { color: var(--ink); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.dchip small { font-size: 12px; font-weight: 500; opacity: .85; }
a.inl { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; white-space: nowrap; }
a.inl:hover { border-bottom-color: var(--ink); }
a.inl .dot { width: 7px; height: 7px; align-self: center; }

/* lifecycle pill */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: var(--fs-2); font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.surging { color: var(--up); background: var(--up-bg); }
.pill.cooling { color: var(--down); background: var(--down-bg); }
.pill.steady { color: var(--ink-2); background: var(--bg-2); }
.pill.low { color: var(--ink-2); background: var(--bg-2); }
.pill.low::before { background: repeating-linear-gradient(135deg, var(--hatch) 0 1.5px, transparent 1.5px 3px); width: 10px; height: 10px; border-radius: 2px; }
.mtag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 3px; font-size: 12px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; cursor: help; vertical-align: 1px; }

/* ---------- "what moved" brief ---------- */
.brief { margin-top: var(--s4); }
.brief .prose { font-size: 16px; line-height: 1.95; color: var(--ink); max-width: 120ch; }
.brief .prose .dchip { margin-left: 2px; }
.brief .prose .sep { color: var(--ink-3); }
.scards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: var(--s3); }
.scard { display: flex; flex-direction: column; gap: 6px; padding: var(--s3) 0; border-top: 1px solid var(--line-strong); min-width: 0; }
.scard .k { font-size: var(--fs-1); color: var(--ink-3); display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.scard .k .live { color: var(--accent-text); font-weight: 700; }
.scard h3 { font-size: var(--fs-3); font-weight: 600; line-height: 1.5; }
.scard h3.clamp-3 { -webkit-line-clamp: 2; }
.scard h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.scard .chips { gap: 4px 8px; margin-top: auto; padding-top: 4px; }
.scard .n { font-size: var(--fs-2); color: var(--ink-2); }

/* ---------- movers ---------- */
.movers { margin-top: var(--s5); }
.covblk { margin-top: var(--s5); }
.covblk .mv-sub small { max-width: 70%; text-align: right; }
.mv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gutter) * 2); row-gap: var(--s6); }
.mv-col { min-width: 0; }
.mv-col > .sec-h h2 { font-size: var(--fs-4); }
.mv-sub { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); padding-bottom: 4px; font-size: var(--fs-2); font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.mv-sub small { font-size: var(--fs-1); font-weight: 400; color: var(--ink-3); }
.mv-sub .ar { font-size: 11px; }
.mv-sub.up .ar { color: var(--up); } .mv-sub.down .ar { color: var(--down); }
.mv li + li { border-top: 1px solid var(--line); }
.mv a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 9px 0; }
.mv a:hover .nm { text-decoration: underline; text-underline-offset: 3px; }
.mv .mb { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mv .r1, .mv .r2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.mv .nm { font-size: var(--fs-3); font-weight: 600; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mv .mt { font-size: var(--fs-1); color: var(--ink-3); white-space: normal; overflow-wrap: anywhere; line-height: 1.4; min-width: 0; }
.mv .spark { width: 64px; height: 20px; display: block; overflow: visible; flex: none; }
.mv .dchip { flex: none; }
.mv .empty { padding: 10px 0; font-size: var(--fs-2); color: var(--ink-3); white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.mk { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--bg-2); color: var(--ink-2); font-size: 12px; font-weight: 700; overflow: hidden; box-shadow: 0 0 0 1.5px var(--ring, transparent); }
.mk img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.mk.party::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 18%, transparent); }
.mk svg { width: 14px; height: 14px; }
.spark .prev { stroke: var(--rest); } .spark .cur { stroke: var(--ink); }
.spark .band { fill: var(--bg-2); }
.spark .end { fill: var(--ink); }
.unavail { padding: var(--s4); margin-top: var(--s3); background: var(--bg-2); border-radius: var(--radius); font-size: var(--fs-3); color: var(--ink-2); line-height: 1.7; }
.unavail b { color: var(--ink); }

/* ---------- entity header ---------- */
.ehead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s4) var(--s5); align-items: center; padding: var(--s5) 0; margin-top: var(--s3); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.ehead h1 { font-size: var(--fs-6); font-weight: 700; line-height: 1.3; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.ehead .role { margin-top: 4px; font-size: var(--fs-3); color: var(--ink-2); }
.ehead .role a { display: inline-flex; align-items: center; gap: 6px; }
.ehead .role a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ehead .en { margin-top: 2px; font-size: var(--fs-1); color: var(--ink-3); }
.ehead .side { text-align: right; font-size: var(--fs-2); color: var(--ink-2); line-height: 1.7; }
.ehead .side a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.emark { width: 104px; height: 104px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-2); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ring, var(--line-strong)); overflow: hidden; flex: none; }
.emark img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.emark .pbig { width: 44px; height: 44px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 10px color-mix(in srgb, var(--pc) 16%, transparent); }
.emark svg { width: 44px; height: 44px; color: var(--ink-2); }
.emark .glyph { font-size: 44px; font-weight: 700; color: var(--ink-2); line-height: 1; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tile { padding: var(--s4) var(--s5); min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tile + .tile { border-left: 1px solid var(--line); }
.tile:first-child { padding-left: 0; }
.tile .tl { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-size: var(--fs-2); color: var(--ink-2); font-weight: 600; }
.tile .tl small { font-weight: 400; color: var(--ink-3); font-size: var(--fs-1); }
.tile .row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); min-height: 64px; }
.tile .big { font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.tile .big small { font-size: var(--fs-3); font-weight: 600; color: var(--ink-2); margin-left: 4px; letter-spacing: 0; }
.tile .sub { font-size: var(--fs-2); color: var(--ink-2); line-height: 1.5; }
.tile .ev { font-size: var(--fs-1); color: var(--ink-3); line-height: 1.55; border-top: 1px dotted var(--line-strong); padding-top: 6px; margin-top: auto; }
.tile .ev b { color: var(--ink-2); font-weight: 600; }
.tile svg { display: block; flex: none; overflow: visible; }
.tonebar { display: flex; height: 10px; gap: 2px; border-radius: 2px; overflow: hidden; margin-top: 4px; }
.tonebar i { display: block; height: 100%; }
.tonebar .p { background: var(--pos); } .tonebar .u { background: var(--neu); } .tonebar .n { background: var(--neg); }
.tonelg { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--fs-1); color: var(--ink-2); }
.tonelg span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tonelg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.minicols .prev { fill: var(--rest); } .minicols .cur { fill: var(--ring, var(--ink)); }
.minicols .v { fill: var(--ink-3); }

/* ---------- chart card ---------- */
.ccard { margin-top: var(--s6); }
.cbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s2) 0 var(--s3); }
.cbar .lbl { font-size: var(--fs-2); color: var(--ink-2); }
.cmp { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cmp button { font: inherit; font-size: var(--fs-2); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); cursor: pointer; white-space: nowrap; }
.cmp button .sw { width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.cmp button[aria-pressed="false"] { color: var(--ink-3); border-style: dashed; }
.cmp button[aria-pressed="false"] .sw { background: var(--line-strong); }
.cmp button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cbar .push { margin-left: auto; }
.lc { position: relative; }
.lc:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.lc svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.viz-m, .only-m { display: none; }
svg .g { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
svg .g0 { stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges; }
svg .ax { font-size: 12px; fill: var(--ink-3); font-family: var(--font); }
svg .axn { font-size: 12px; fill: var(--ink-2); font-family: var(--font); }
svg .lab { font-size: 13px; font-weight: 600; fill: var(--ink); font-family: var(--font); }
svg .labs { font-size: 12px; fill: var(--ink-2); font-family: var(--font); }
svg .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg .ln.pri { stroke-width: 2.5; }
svg .ln.sec { stroke-width: 1.75; }
svg .area { stroke: none; opacity: .1; }
svg .pband { fill: url(#hatch); }
svg .gapband { fill: var(--bg-2); }
svg .endd { stroke: var(--bg); stroke-width: 2; }
svg .pk circle.b { fill: var(--ink); }
svg .pk text { font-size: 11px; font-weight: 700; fill: var(--bg); font-family: var(--font); }
svg .pk .stem { stroke: var(--ink); stroke-width: 1; }
svg .pk .ring { fill: var(--bg); stroke: var(--ink); stroke-width: 2; }
svg .pkl { font-size: 12px; font-weight: 600; fill: var(--ink); font-family: var(--font); }
svg .xh line { stroke: var(--ink-3); stroke-width: 1; }
svg .xh circle { stroke: var(--bg); stroke-width: 2; }
svg .leader { stroke: var(--line-strong); stroke-width: 1; }
.hatchdef line { stroke: var(--hatch); stroke-width: 1.6; }
.clegend { display: flex; flex-wrap: wrap; gap: 4px var(--s5); margin-top: var(--s2); font-size: var(--fs-2); color: var(--ink-2); }
.clegend li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.clegend .k { width: 16px; height: 3px; border-radius: 2px; background: var(--c); }
.clegend .k.pri { height: 4px; }
.clegend .hk { width: 14px; height: 12px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--hatch) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--line); }
.clegend .gk { width: 14px; height: 12px; border-radius: 2px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.clegend .pos { width: 10px; height: 10px; border-radius: 2px; background: var(--pos); }
.clegend .neg { width: 10px; height: 10px; border-radius: 2px; background: var(--neg); }
.lc.off-1 .s-1, .lc.off-2 .s-2, .lc.off-3 .s-3 { display: none; }
svg .bp { fill: var(--pos); } svg .bn { fill: var(--neg); }
svg .bthin { opacity: .35; }
svg .zero { stroke: var(--ink-2); stroke-width: 1; shape-rendering: crispEdges; }

/* tooltip */
.tip { position: absolute; z-index: 20; pointer-events: none; background: var(--tip-bg); color: var(--tip-ink); border-radius: 6px; padding: 8px 10px; font-size: var(--fs-1); line-height: 1.5; box-shadow: 0 6px 20px rgba(0,0,0,.18); min-width: 150px; max-width: 280px; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.tip.on { opacity: 1; transform: none; }
.tip b { font-weight: 700; display: block; margin-bottom: 2px; font-size: var(--fs-2); }
.tip .r { display: flex; align-items: center; gap: 6px; justify-content: space-between; white-space: nowrap; }
.tip .r i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.tip .r span { display: inline-flex; align-items: center; gap: 6px; }
.tip .hl { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(127,127,127,.35); white-space: normal; }
.tip .fl { margin-top: 4px; opacity: .8; font-style: normal; }
#gtip { position: fixed; }

/* ---------- peaks ---------- */
.peaks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: var(--s4); }
.peak { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-strong); min-width: 0; }
.peak .no { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.peak .when { font-size: var(--fs-2); font-weight: 700; }
.peak .when span { font-weight: 400; color: var(--ink-2); }
.peak h3 { margin-top: 4px; font-size: var(--fs-3); font-weight: 600; line-height: 1.55; }
.peak h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.peak .src { margin-top: 2px; font-size: var(--fs-1); color: var(--ink-3); }
.peak .more { margin-top: 6px; font-size: var(--fs-2); color: var(--ink-2); }
.peak .more li { padding: 2px 0 2px 12px; position: relative; line-height: 1.5; }
.peak .more li::before { content: ""; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }
.peak .st { display: inline-flex; margin-top: 6px; font-size: var(--fs-2); font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-strong); }

/* ---------- calendar / week heatmaps ---------- */
.s0 { fill: var(--seq-0); } .s1 { fill: var(--seq-1); } .s2 { fill: var(--seq-2); }
.s3 { fill: var(--seq-3); } .s4 { fill: var(--seq-4); } .s5 { fill: var(--seq-5); }
svg .cell { rx: 2px; }
svg .cell:hover, svg .cell:focus { stroke: var(--ink); stroke-width: 1.5; outline: none; }
svg .phatch { fill: url(#hatch); pointer-events: none; }
svg .gapc { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1; }
svg .rowl { font-size: 13px; font-weight: 600; fill: var(--ink); font-family: var(--font); }
svg .rowt { font-size: 12px; fill: var(--ink-3); font-family: var(--font); }
.seqlg { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-1); color: var(--ink-3); }
.seqlg i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.seqlg i:nth-of-type(1) { background: var(--seq-0); } .seqlg i:nth-of-type(2) { background: var(--seq-1); }
.seqlg i:nth-of-type(3) { background: var(--seq-2); } .seqlg i:nth-of-type(4) { background: var(--seq-3); }
.seqlg i:nth-of-type(5) { background: var(--seq-4); } .seqlg i:nth-of-type(6) { background: var(--seq-5); }
.seqlg span { margin: 0 4px; }
.vizlegend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-top: var(--s2); font-size: var(--fs-1); color: var(--ink-3); }

/* ---------- lists on entity pages ---------- */
.co li + li { border-top: 1px solid var(--line); }
.co a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; }
.co a:hover .nm { text-decoration: underline; text-underline-offset: 3px; }
.co .nm { font-size: var(--fs-3); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.co .bar { margin-top: 4px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.co .bar i { display: block; height: 100%; background: var(--c, var(--ink-2)); }
.co .v { min-width: 48px; text-align: right; font-size: var(--fs-2); font-weight: 600; color: var(--ink); }
.co .v small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.cotabs { margin-top: var(--s3); }
.topics li { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-2); }
.topics .ix { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.topics .ix.hi { color: var(--up); } .topics .ix.lo { color: var(--ink-3); }
.topics .tb { display: block; position: relative; height: 6px; margin-top: 4px; background: var(--track); border-radius: 2px; }
.topics .tb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--c, var(--ink)); }
.topics .tb b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-2); }

.stl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.stl h3 { font-size: var(--fs-4); font-weight: 600; line-height: 1.5; }
.stl h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.stl .m { font-size: var(--fs-2); color: var(--ink-2); white-space: nowrap; text-align: right; }
.stl .m small { display: block; font-size: var(--fs-1); color: var(--ink-3); }

/* ---------- low-data state ---------- */
.lowbox { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); padding: var(--s5); margin-top: var(--s5); background: var(--bg-2); border-radius: var(--radius); border-left: 3px solid var(--line-strong); }
.lowbox .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.lowbox .ic svg { width: 22px; height: 22px; }
.lowbox h2 { font-size: var(--fs-4); font-weight: 700; line-height: 1.5; }
.lowbox p { margin-top: 4px; font-size: var(--fs-3); color: var(--ink-2); line-height: 1.7; max-width: 90ch; }
.lowbox .acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius); font-size: var(--fs-2); font-weight: 600; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); white-space: nowrap; }
.btn:hover { background: var(--bg-2); }
.btn.pri { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.evlist .day { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.evlist .day > time { font-size: var(--fs-2); font-weight: 700; }
.evlist .day > time small { display: block; font-size: var(--fs-1); font-weight: 400; color: var(--ink-3); }
.evlist .it { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 2px 0 6px; }
.evlist .it + .it { border-top: 1px dotted var(--line); padding-top: 8px; }
.evlist .kind svg { width: 12px; height: 12px; color: var(--ink-3); margin-top: 6px; }
.evlist .t { font-size: var(--fs-3); line-height: 1.55; }
.evlist .s { font-size: var(--fs-1); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 2px; }
.flag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 3px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.flag.seat { color: var(--up); background: var(--up-bg); }
.flag.ad { color: var(--down); background: var(--down-bg); }
.flag.area { color: var(--ink-2); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.greyed { position: relative; }
.greyed .veil { padding: var(--s5); border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--ink-2); font-size: var(--fs-3); line-height: 1.7; }
.greyed .veil b { color: var(--ink); }
.facts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }

/* ---------- coverage ledger & method ---------- */
.ledger rect.ok { fill: var(--seq-3); } .ledger rect.partial { fill: url(#hatch); stroke: var(--hatch); stroke-width: .5; } .ledger rect.gap { fill: var(--bg); stroke: var(--line-strong); }
.method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.method h3 { font-size: var(--fs-3); font-weight: 700; margin-bottom: 4px; }
.method p { font-size: var(--fs-2); color: var(--ink-2); line-height: 1.7; }
.method > div { padding: var(--s3) 0; border-top: 1px solid var(--line); }
details.tbl { margin-top: var(--s3); font-size: var(--fs-2); color: var(--ink-2); }
details.tbl summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--ink-2); }
details.tbl .tw { overflow-x: auto; }
details.tbl table { margin-top: var(--s2); border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
details.tbl th, details.tbl td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--line); font-size: var(--fs-1); }
details.tbl th:first-child, details.tbl td:first-child { text-align: left; }
.sechint { font-size: var(--fs-1); color: var(--ink-3); font-weight: 400; }


/* ================= refinement round components ================= */
/* heatmap: global log scale by default (.g*), per-row as a toggle (.rn .r*) */
.hm .g0, .hm .r0 { fill: var(--seq-0); }
.hm .g1 { fill: var(--seq-1); } .hm .g2 { fill: var(--seq-2); } .hm .g3 { fill: var(--seq-3); } .hm .g4 { fill: var(--seq-4); } .hm .g5 { fill: var(--seq-5); }
.hm.rn .r1 { fill: var(--seq-1); } .hm.rn .r2 { fill: var(--seq-2); } .hm.rn .r3 { fill: var(--seq-3); } .hm.rn .r4 { fill: var(--seq-4); } .hm.rn .r5 { fill: var(--seq-5); }
svg .cell.s0, .hm .cell.g0 { stroke: var(--line-strong); stroke-width: .75; }
svg .gapc { fill: var(--bg); stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 2; }
svg .rowl.sm { font-size: 12.5px; }
.hm svg, .cal svg { width: 100%; height: auto; display: block; }
.lbl.tap { display: none; }
@media (hover: none) { .lbl.hov { display: none; } .lbl.tap { display: inline; } }

/* segmented rails that scroll with a fade edge (phones) */
.seg.rail { scroll-snap-type: x mandatory; }
.seg.rail button { scroll-snap-align: start; }

/* movers board: a linear bar per row, previous value as a tick */
.mv .hb { position: relative; flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--track); min-width: 40px; }
.mv .hb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--ink-2); }
.mv .hb b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); opacity: .55; }
.mv .hv { flex: none; min-width: 52px; text-align: right; font-size: var(--fs-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.mv a { padding: 5px 0; }
.mv .nm { line-height: 1.3; }
.mv .mt { line-height: 1.3; }
.mv .mb { gap: 2px; }
.smallbase { margin-top: var(--s2); padding-top: 6px; line-height: 1.7; border-top: 1px dotted var(--line-strong); font-size: var(--fs-2); line-height: 1.8; color: var(--ink-2); }
.smallbase b { color: var(--ink); }
.smallbase span:not(.num) { font-size: var(--fs-1); color: var(--ink-3); margin-left: 4px; }
.smallbase a { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.smallbase small { font-size: 12px; padding: 0 4px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.mtabs { display: none; margin-bottom: var(--s3); }
.mtabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* weekly brief: one sentence per category, plain numbers, underlined names */
.blist { margin-top: var(--s2); }
.blist li { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: var(--s4); padding: 5px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-3); line-height: 1.75; }
.blist .bk { white-space: nowrap; font-weight: 700; font-size: var(--fs-2); color: var(--ink-2); padding-top: 1px; }
.blist a.inl { display: inline; white-space: nowrap; border-bottom: 2px solid var(--u, var(--line-strong)); padding-bottom: 0; }
.scard .k .st { color: var(--ink-2); font-weight: 600; }
.scard .traj { font-size: var(--fs-2); color: var(--ink); }
.scard .traj span { color: var(--ink-3); font-size: var(--fs-1); white-space: nowrap; }
.scard .traj span.up { color: var(--up); } .scard .traj span.down { color: var(--down); }
.scard .nm2 { font-size: var(--fs-1); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.scard .k { min-width: 0; }
.scard { gap: 4px; }

/* KPI tiles: three, all on the page's one range */
.tiles.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile .sub b.up, .tile .sub .up b, .tile .sub .up { color: var(--up); }
.tile .sub b.down, .tile .sub .down b, .tile .sub .down { color: var(--down); }
.tile .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; color: var(--ink); }
.tile .clamp2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.minicols .cc { fill: var(--sr1); } .minicols .pp { fill: var(--sr1); opacity: .35; }
.dstrip .pd { fill: var(--ink-3); opacity: .55; } .dstrip .me { stroke: var(--bg); stroke-width: 2; }

/* sticky page range bar */
.tbar.sticky { position: sticky; top: 0; z-index: 15; background: var(--bg); }
.linkbtn { font: inherit; font-size: var(--fs-2); color: var(--ink-2); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* compare: chips, the subject tag, search-to-add */
.cmpme { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 15px; background: var(--bg-2); font-size: var(--fs-2); font-weight: 600; }
.cmpme .sw, .cmp button .sw { width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.cmp button .dot { width: 7px; height: 7px; }
.cmp button .x { margin-left: 2px; color: var(--ink-3); font-size: 14px; line-height: 1; }
.cmp button.loading { border-style: dashed; color: var(--ink-3); }
.addcmp { position: relative; }
.addbtn { font: inherit; font-size: var(--fs-2); font-weight: 600; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px dashed var(--ink-3); background: var(--bg); color: var(--ink); cursor: pointer; }
.addbtn:hover { background: var(--bg-2); }
.cpop { position: absolute; z-index: 30; top: 36px; left: 0; width: 300px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: var(--s2); }
.cpop input { width: 100%; height: 36px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 10px; font: inherit; background: var(--bg); color: var(--ink); }
.cpop ul { max-height: 220px; overflow-y: auto; margin-top: 6px; }
.cpop li button { width: 100%; display: flex; justify-content: space-between; gap: 8px; font: inherit; font-size: var(--fs-2); text-align: left; background: none; border: 0; padding: 7px 6px; border-radius: 4px; color: var(--ink); cursor: pointer; }
.cpop li button:hover, .cpop li button:focus-visible { background: var(--bg-2); }
.cpop li small { color: var(--ink-3); font-size: var(--fs-1); }
.cpop p { font-size: var(--fs-1); color: var(--ink-3); margin-top: 6px; }

/* export / cite */
.sec-h .xmenu { position: relative; align-self: center; }
.xbtn { width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; }
.xbtn:hover, .xbtn[aria-expanded="true"] { background: var(--bg-2); color: var(--ink); }
.xpop { position: absolute; right: 0; top: 38px; z-index: 30; width: 270px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 4px; }
.xpop button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; font: inherit; font-size: var(--fs-2); font-weight: 600; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 4px; color: var(--ink); cursor: pointer; }
.xpop button small { font-weight: 400; font-size: var(--fs-1); color: var(--ink-3); }
.xpop button:hover, .xpop button:focus-visible { background: var(--bg-2); }
.cite { margin-top: var(--s2); font-size: var(--fs-1); color: var(--ink-3); line-height: 1.55; }
.cite span[lang] { color: var(--ink-2); }
.xdlg { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--s4); background: var(--bg); color: var(--ink); width: min(560px, 92vw); }
.xdlg::backdrop { background: rgba(0,0,0,.35); }
.xdlg textarea { width: 100%; height: 96px; font: 12px/1.5 ui-monospace, Menlo, monospace; border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px; background: var(--bg-2); color: var(--ink); }
.xdlg .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: var(--s2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--radius); font-size: var(--fs-2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* follow */
.ehead .side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.follow { position: relative; }
.follow summary { list-style: none; cursor: pointer; }
.follow summary::-webkit-details-marker { display: none; }
.follow summary svg { width: 15px; height: 15px; }
.fpop { position: absolute; right: 0; top: 44px; z-index: 30; width: 330px; text-align: left; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: var(--s4); display: flex; flex-direction: column; gap: 8px; }
.fpop b { font-size: var(--fs-3); line-height: 1.5; }
.fpop p { font-size: var(--fs-2); color: var(--ink-2); line-height: 1.6; }
.fpop input[type=email] { height: 38px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 10px; font: inherit; background: var(--bg); color: var(--ink); }
.fpop .fopts { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-2); color: var(--ink-2); }
.fpop small { font-size: var(--fs-1); color: var(--ink-3); }

/* charts: new marks */
svg .pband.pv { opacity: .8; }
svg .seglab { font-size: 12px; font-weight: 600; fill: var(--ink); font-family: var(--font); }
svg .sseg { stroke: var(--bg); stroke-width: 1; }
svg .rk { font-size: 11px; font-weight: 700; fill: var(--ink-2); font-family: var(--font); }
svg .nodata { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 2; }
svg .calpk { fill: none; stroke: var(--bg); stroke-width: 2; }
svg .calpkt { font-size: 11px; font-weight: 700; fill: #fff; font-family: var(--font); pointer-events: none; }
svg .adot { fill: var(--bg); stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 2 1.5; }
svg .hit { cursor: crosshair; }
.clegend .nd { width: 12px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--ink-3); }
.clegend .k.sq { width: 10px; height: 10px; }
.clegend .k.ring { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.clegend .pkk { width: 18px; height: 18px; border-radius: 50%; background: var(--seq-5); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.clegend li.me { font-weight: 600; color: var(--ink); }
.clegend .dot { width: 7px; height: 7px; }
.tonebanner { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 12px; margin-bottom: var(--s2); background: var(--bg-2); border-radius: var(--radius); font-size: var(--fs-2); color: var(--ink-2); }
.lede2 { font-size: var(--fs-3); color: var(--ink-2); line-height: 1.7; margin: var(--s2) 0; }
.lede2 b { color: var(--ink); }
.co.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
.co.two li + li { border-top: 0; } .co.two li { border-bottom: 1px solid var(--line); }
.co .empty { padding: 10px 0; font-size: var(--fs-2); color: var(--ink-3); }
.co .bar i { background: var(--c, var(--ink-2)); }
small.fr { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.topics .tb { margin: 5px 0 3px; }
.topics .tb b { margin-left: -1px; }
.topics li > span small { display: block; font-size: 12px; color: var(--ink-3); }
.peaks.n1 { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.peak:target { background: var(--bg-2); outline: 6px solid var(--bg-2); border-radius: 2px; }
.evlist .it.isad .t { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
details.mdet { margin-top: var(--s3); }
details.mdet summary { cursor: pointer; font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); padding: 6px 0; }
details.mdet .method { margin-top: var(--s2); }
.loadingfrag { padding: var(--s5) 0; color: var(--ink-3); font-size: var(--fs-2); }

/* ---------- motion (opt-in, reduced-motion safe) ---------- */
@media (prefers-reduced-motion: no-preference) {
  svg .ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tr-draw 1.3s cubic-bezier(.3,.7,.2,1) forwards; }
  svg .ln.sec { animation-delay: .25s; }
  svg .area { animation: tr-fade .9s .5s both; }
  .spark polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tr-draw .9s ease-out forwards; }
  svg .grow { transform-box: fill-box; transform-origin: 50% 100%; animation: tr-grow .7s cubic-bezier(.3,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 22ms); }
  svg .grow.dn { transform-origin: 50% 0%; }
  svg .growx { transform-box: fill-box; transform-origin: 0 50%; animation: tr-growx .7s cubic-bezier(.3,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 30ms); }
  svg .cell, svg .fade { animation: tr-fade .5s ease-out both; animation-delay: calc(var(--i, 0) * 14ms); }
  svg .pk, svg .pkl, svg .calpk, svg .calpkt { animation: tr-pop .45s 1s both; }
  .co .bar i, .topics .tb i, .mv .hb i { transform-origin: 0 50%; animation: tr-growx .8s cubic-bezier(.3,.7,.2,1) both; }
  .mv li, .scard, .peak { animation: tr-rise .5s ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
}
@keyframes tr-draw { to { stroke-dashoffset: 0; } }
@keyframes tr-fade { from { opacity: 0; } }
@keyframes tr-grow { from { transform: scaleY(0); } }
@keyframes tr-growx { from { transform: scaleX(0); } }
@keyframes tr-pop { from { opacity: 0; transform: translateY(4px); } }
@keyframes tr-scale { from { transform: scale(.2); opacity: 0; } }
@keyframes tr-rise { from { opacity: 0; transform: translateY(6px); } }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s6); }
  .scards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(3) { border-left: 0; padding-left: 0; }
  .tile:nth-child(n+3) { border-top: 1px solid var(--line); }
  .peaks { grid-template-columns: 1fr; row-gap: var(--s3); }
  .method { grid-template-columns: 1fr; }
  .ehead { grid-template-columns: auto minmax(0, 1fr); }
  .ehead .side { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 1080px) {
  .tiles.t3 { grid-template-columns: 1fr 1fr; }
  .tiles.t3 .tile:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .mtabs { display: flex; }
  .mv-grid[data-m="leader"] .mv-col:not([data-type="leader"]), .mv-grid[data-m="party"] .mv-col:not([data-type="party"]),
  .mv-grid[data-m="place"] .mv-col:not([data-type="place"]), .mv-grid[data-m="topic"] .mv-col:not([data-type="topic"]) { display: none; }
  .mv-col > .sec-h { display: none; }
  .seg.rail { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
  .blist li { grid-template-columns: 1fr; gap: 0; }
  .scards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s4); padding-bottom: 4px; }
  .scard { flex: 0 0 78%; scroll-snap-align: start; }
  .tiles.t3 { grid-template-columns: 1fr; }
  .tiles.t3 .tile + .tile { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .tile .row { flex-wrap: wrap; }
  .tbar.sticky { position: static; }
  .co.two { grid-template-columns: 1fr; }
  .ehead .side { align-items: flex-start; }
  .fpop { left: 0; right: auto; width: min(330px, calc(100vw - 32px)); }
  .cpop { width: min(300px, calc(100vw - 32px)); }
  .xpop { width: min(270px, calc(100vw - 32px)); }
  .viz-d { display: none; }
  .viz-m, .only-m { display: block; }
  .mv-grid { grid-template-columns: 1fr; }
  .scards { grid-template-columns: 1fr; }
  .scard { padding: 10px 0; }
  .brief .prose { font-size: var(--fs-3); line-height: 2.1; }
  .tbar { gap: var(--s2) var(--s3); }
  .tbar .meta { min-width: 0; flex: 1 1 100%; }
  .tbar .meta span { white-space: normal; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg button { padding: 0 10px; }
  .seg button:disabled { display: none; }
  .tbar .right { margin-left: 0; }
  .tiles { grid-template-columns: 1fr; }
  .tile { padding: var(--s3) 0; }
  .tile + .tile { border-left: 0; border-top: 1px solid var(--line); }
  .tile .big { font-size: 30px; }
  .ehead { gap: var(--s3) var(--s4); padding: var(--s4) 0; }
  .emark { width: 72px; height: 72px; }
  .emark .pbig { width: 30px; height: 30px; }
  .emark svg, .emark .glyph { width: 30px; height: 30px; font-size: 30px; }
  .cbar .push { margin-left: 0; }
  .evlist .day { grid-template-columns: 1fr; gap: 4px; }
  .facts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lowbox { grid-template-columns: 1fr; padding: var(--s4); }
  .stl li { grid-template-columns: 1fr; gap: 2px; }
  .stl .m { text-align: left; white-space: normal; }
  .pagehead p { flex: 1 1 100%; min-width: 0; }
  .pagehead p span { white-space: normal; }
  .clegend li { white-space: normal; }
  .brief .prose a.inl { white-space: normal; }
  .stl .m small { display: inline; margin-left: 6px; }
}

svg .pwk { fill: url(#hatch); pointer-events: none; }

#heatmap.section { margin-top: var(--s6); }
.covblk .mv-sub small { font-size: 12px; }
svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 720px) {
  .brief .sec-h { flex-wrap: wrap; row-gap: 2px; }
  .brief .sec-h h2 { flex: 1 1 100%; }
  .sec-h h2 { flex: 1 1 auto; }
  .ccard .mv-sub small { display: none; }
  .covblk .mv-sub { flex-direction: column; align-items: flex-start; }
  .covblk .mv-sub small { max-width: none; text-align: left; }
}
.tiles.t3 .row { flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; }
.tiles.t3 .minicols { width: 100%; height: 34px; }
.tiles.t3 .dstrip { width: 100%; max-width: 360px; }
.tiles.t3 .big small { white-space: nowrap; }
.cal.viz-d svg { width: auto; max-width: 100%; height: auto; }
.co .bar { display: block; } .co .bar i { display: block; }
.seg button[aria-pressed="true"]:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.ccard, .xc, .section, .peak { scroll-margin-top: 72px; }

/* ================= live-site additions (server-rendered pages) ================= */
/* window chips are links (crawlable, work without JS) */
.seg.segl { border-color: var(--line-strong); }
.seg.segl > a { height: 34px; padding: 0 var(--s3); text-decoration: none; }
.seg.segl > a[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg.segl > button:disabled { height: 34px; padding: 0 var(--s3); color: var(--ink-3); cursor: not-allowed; background: repeating-linear-gradient(135deg, transparent 0 5px, var(--bg-2) 5px 7px); }
.tbar .meta .lock { white-space: nowrap; }
.pagehead p .sub { color: var(--ink-3); }
.pagehead p { display: flex; flex-wrap: wrap; gap: 2px var(--s3); }
[data-range-root].loading { opacity: .55; transition: opacity .2s; }

/* avatars from render.avatar() inside trend lists and headers */
.mv a > .av, .co a > .av { justify-self: center; }
.av.emark-av { flex: none; }
.co a > .mk, .co a > .av { width: 28px; height: 28px; }
.pill.sm { height: 22px; padding: 0 8px; font-size: 12px; margin-left: 6px; }

/* compare: chip + remove link */
.cmp .cmpx { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 30px; margin-left: -4px; color: var(--ink-3); font-size: 16px; text-decoration: none; }
.cmp .cmpx:hover { color: var(--ink); }
.cpop li a { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-2); padding: 7px 6px; border-radius: 4px; color: var(--ink); }
.cpop li a:hover, .cpop li a:focus-visible { background: var(--bg-2); }
.cpop li small { color: var(--ink-3); font-size: var(--fs-1); }

/* type navigation + type index */
.typenav { display: flex; flex-wrap: wrap; gap: 6px var(--s4); align-items: center; margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-2); color: var(--ink-2); }
.typenav a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line-strong); }
.typenav a[aria-current] { border-bottom-color: var(--ink); }
.typelist { max-width: 880px; margin-top: var(--s3); }
.typelist .nm { white-space: normal; }
.topics li > span a { font-weight: 600; color: var(--ink); }
.topics li > span a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tonelg { margin: 6px 0 var(--s3); }
.tonebar { max-width: 640px; }
.ehead .en[lang=""] { font-size: var(--fs-2); }
svg .gapband { fill: var(--bg-2); stroke: var(--line-strong); stroke-width: .5; stroke-dasharray: 2 2; }
.col-rule { min-width: 0; }
@media (max-width: 720px) {
  .seg.segl > button:disabled { display: none; }
  .pagehead p { font-size: var(--fs-1); }
  .typenav { gap: 6px var(--s3); }
}

/* Entrance motion runs once. trends.js adds .tr-done ~1.4s after load, so a
   later relayout (window resize, print, full-page capture) cannot restart it
   from opacity 0. */
.tr-done svg .ln, .tr-done .spark polyline { animation: none !important; stroke-dashoffset: 0 !important; }
.tr-done svg .area, .tr-done svg .grow, .tr-done svg .growx, .tr-done svg .cell, .tr-done svg .fade,
.tr-done svg .pk, .tr-done svg .pkl, .tr-done svg .calpk, .tr-done svg .calpkt,
.tr-done .co .bar i, .tr-done .topics .tb i, .tr-done .mv .hb i, .tr-done .mv li, .tr-done .scard, .tr-done .peak { animation: none !important; }
/* tick-b's sidebar .rail stacks children with a top margin; a tab rail must not */
.seg.rail > * + * { margin-top: 0; }

/* ================= review loop 1 ================= */
/* today: shaded as a partial day, everywhere it is drawn */
svg .tband { fill: var(--today); stroke: var(--hatch); stroke-width: .75; stroke-dasharray: 3 2; }
svg .tcell { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 2; pointer-events: none; }
.clegend .tk { width: 14px; height: 12px; border-radius: 2px; background: var(--today); box-shadow: inset 0 0 0 1px var(--hatch); }
.clegend .hk { box-shadow: inset 0 0 0 1px var(--line-strong); }
/* series swatches: the series colour only; a dashed same-party series shows its dash */
.sw { display: inline-block; flex: none; width: 16px; height: 3px; border-radius: 2px; background: var(--c); }
.sw.dash { height: 3px; background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px); }
.clegend .sw { width: 18px; }
.clegend li.me .sw { height: 4px; }
.cmpme .sw, .cmp button .sw { width: 16px; }
.cmpme .sw.dash, .cmp button .sw.dash { background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px); }
.cmpchip { display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--line-strong); border-radius: 15px; background: var(--bg); padding-right: 2px; }
.cmpchip button { border: 0 !important; height: 28px !important; background: transparent !important; padding: 0 4px 0 10px !important; }
.cmpchip .cmpx { width: 24px; height: 24px; margin: 0; border-radius: 50%; }
.cmpchip .cmpx:hover { background: var(--bg-2); }
.cmpchip:has(button[aria-pressed="false"]) { border-style: dashed; }
/* explicit export links instead of a kebab menu */
.xlinks { display: inline-flex; gap: 2px; align-self: center; flex: none; }
.xlinks button { font: inherit; font-size: var(--fs-1); font-weight: 600; height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink-2); cursor: pointer; }
.xlinks button:hover { background: var(--bg-2); color: var(--ink); }
.xlinks button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* permalink in the source line */
.cite .plink { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.cite .plink:hover { color: var(--ink); }
/* the auto-written summary is its own labelled module */
.automod { margin-top: var(--s2); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-2); }
.automod-h { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--fs-1); color: var(--ink-3); }
.automod .blist li { border-bottom-color: var(--line); }
.automod .blist li:last-child { border-bottom: 0; }
/* few-earlier-mentions rows */
.smallbase p { margin: 0 0 4px; }
.smallbase ul { display: flex; flex-direction: column; }
.smallbase li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; padding: 2px 0; }
.smallbase li .num { font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* party marks from render.party_mark in trend lists and headers */
.mv a > .av, .co a > .av, .typelist a > .av { width: 28px; height: 28px; }
.av.emark-pm { flex: none; }
/* issue mix: a named metric column */
.topics li.th { border-bottom: 1px solid var(--line-strong); padding: 2px 0 4px; font-size: var(--fs-1); color: var(--ink-3); }
.topics li.th .ix { font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.topics li { grid-template-columns: minmax(0, 1fr) 72px; }
/* status pill: focusable, carries its thresholds as a tooltip */
.pill[tabindex] { cursor: help; }
.pill[tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tnote { margin-top: 4px; }
.sechint .wcap { white-space: nowrap; }
.mv-col { min-width: 0; }
.tile .sub, .tile .ev { white-space: normal; overflow: visible; text-overflow: clip; display: block; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
.tile .sub.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; }
@media (max-width: 720px) {
  .mv-grid { grid-template-columns: 1fr; }
  .xlinks button { height: 26px; padding: 0 7px; }
  .sec-h { flex-wrap: wrap; row-gap: 4px; }
}

/* ================= review loop 2 ================= */
/* summary: one row per name (type / name / share / change), labelled + timestamped */
.brief .sec-h h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mtag.auto { height: auto; min-height: 22px; padding: 2px 8px; font-size: var(--fs-1); font-weight: 600; white-space: normal; line-height: 1.4; }
.mtag.auto time { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.brief .tw { overflow-x: auto; }
.stbl { width: 100%; max-width: 880px; border-collapse: collapse; margin-top: var(--s2); font-size: var(--fs-3); font-variant-numeric: tabular-nums; }
.stbl th, .stbl td { padding: 6px 10px 6px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--line); }
.stbl thead th { font-size: var(--fs-1); font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line-strong); }
.stbl tbody th { font-size: var(--fs-2); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.stbl tr.g0 > * { border-top: 1px solid var(--line-strong); }
.stbl td.v, .stbl td.c { white-space: nowrap; }
.stbl td.c .up { color: var(--up); font-weight: 700; } .stbl td.c .down { color: var(--down); font-weight: 700; }
.stbl small { font-size: var(--fs-1); color: var(--ink-3); font-weight: 400; }
.stbl a.inl { white-space: normal; }
.brief .note { max-width: 880px; }
/* movers: panel scale + legend */
.mv-sub small.bscale { cursor: help; text-align: right; }
.mvlg { margin-top: var(--s3); }
/* small-base block: a title, labelled columns, one-line explainer, badge key */
.smallbase .sbh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.smallbase .sbh .cols { font-size: var(--fs-1); color: var(--ink-3); margin: 0; white-space: nowrap; }
.smallbase .sbn { font-size: var(--fs-1); color: var(--ink-3); line-height: 1.5; margin: 0 0 4px; }
.smallbase li { grid-template-columns: minmax(0, 1fr) auto auto; }
.smallbase li small { cursor: help; }
/* stories: a plain list under the board, wraps at every width */
.related .scards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 0; }
.related .scard { border-top: 1px solid var(--line-strong); }
/* tab rows that fit: equal columns, never clipped */
.seg.tabs4 { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, auto); max-width: 100%; overflow: visible; }
.seg.tabs4 button { white-space: nowrap; }
.hmbar { row-gap: var(--s2); }
.seg.tabs4.mtabs { display: none; }
/* attention-trend badge */
.ehead h1 + .pill { margin-top: 6px; }
.pill.rising { color: var(--up); background: var(--up-bg); }
.pill.falling { color: var(--down); background: var(--down-bg); }
/* tiles: % joins its number; rank reads "N of M"; the peak tile flows */
.tile .big .rk, .tile .big.rk { font-size: 26px; }
.tile .big > small { margin-left: 8px; font-size: var(--fs-2); font-weight: 600; white-space: normal; }
.tile.tpeak { gap: 4px; }
.tile .pkrow { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.tile .pk7 { flex: none; overflow: visible; }
.tile .pk7 .cc { fill: var(--seq-2); } .tile .pk7 .pp { fill: var(--seq-2); opacity: .45; } .tile .pk7 .pkd { fill: var(--ink); }
.tiles.t3 .tile { max-height: none; }
.tiles.t3 .tile.tpeak .sub b { color: var(--ink); }
/* chart: lighter bands behind the grid, today apart, one-line end labels, point shapes */
svg .pband { opacity: .45; }
svg .pband.pv { opacity: .35; }
svg .gapband { fill: var(--bg-2); opacity: .7; stroke: none; }
svg .tdl { fill: var(--ink-2); font-weight: 600; }
svg .lab .labv { font-weight: 500; fill: var(--ink-2); }
svg .pts > * { stroke: var(--bg); stroke-width: 1; }
.sw { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.sw svg { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; overflow: visible; }
.sw svg > * { fill: var(--c); stroke: var(--bg); stroke-width: 1.2; }
/* chart / table toggle and the table itself */
.dtbl { width: 100%; border-collapse: collapse; margin-top: var(--s2); font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.dtbl caption { text-align: left; font-size: var(--fs-1); color: var(--ink-3); padding-bottom: 4px; }
.dtbl th, .dtbl td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dtbl th:first-child, .dtbl td:first-child { text-align: left; }
.dtbl thead th { font-size: var(--fs-1); color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--line-strong); }
.ccard .tw { overflow-x: auto; max-height: 560px; overflow-y: auto; }
/* export: a "Download" label with its scope, then the buttons */
.xlinks { align-items: center; }
.xlinks .xl { font-size: var(--fs-1); font-weight: 600; color: var(--ink-3); margin-right: 4px; cursor: help; border-bottom: 1px dotted var(--line-strong); }
/* 1y / 2y before the archive holds them: disabled, and say so */
.seg.segl > .dis { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 34px; padding: 0 var(--s3);
  font-size: var(--fs-2); color: var(--ink-3); cursor: not-allowed; line-height: 1.1; border-left: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--bg-2) 5px 7px); }
.seg.segl > .dis small { font-size: 12px; }
.seg.segl > * + * { border-left: 1px solid var(--line); }
/* tone: net line with the hand-label error band */
svg .netband { fill: var(--ink); opacity: .1; }
svg .netln { fill: none; stroke: var(--ink); stroke-width: 1.5; }
svg .netpt { fill: var(--ink); }
svg .netbar { stroke: var(--ink); stroke-width: 6; opacity: .15; stroke-linecap: round; }
.clegend .netk { width: 18px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); position: relative; }
.clegend .netk::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: var(--ink); }
.tonelg .netv { font-weight: 600; color: var(--ink); }
/* heatmap: focusable, keyboard cell */
figure.hm:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
svg .cell.kf { stroke: var(--ink); stroke-width: 2; }
.seqlg b { font-weight: 600; color: var(--ink-2); margin-right: 4px; }
/* gap state */
.gapstate { margin-top: var(--s4); }
@media (max-width: 1080px) {
  .related .scards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .related .scards { display: flex; flex-direction: column; overflow: visible; }
  .related .scard { flex: none; width: 100%; }
  /* four Indic tab names do not fit one 358px row: a 2 x 2 grid, nothing clipped */
  .seg.tabs4, .seg.tabs4.mtabs { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; -webkit-mask-image: none; mask-image: none; padding-right: 0; overflow: visible; }
  .seg.tabs4:has(> button:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seg.tabs4 button { padding: 0 6px; font-size: 13px; }
  .seg.tabs4 button + button { border-left: 0; }
  .seg.tabs4 button:nth-child(2n) { border-left: 1px solid var(--line); }
  .seg.tabs4 button:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hmbar > .seg { width: 100%; }
  .hmbar > .seg[data-scale] { display: grid; grid-template-columns: 1fr 1fr; }
  .hmbar > .seg[data-scale] button { white-space: normal; line-height: 1.25; height: auto; min-height: 30px; padding: 4px 6px; }
  .stbl { font-size: var(--fs-2); }
  .stbl thead { display: none; }
  .stbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; border-bottom: 1px solid var(--line); }
  .stbl tbody th { grid-column: 1 / -1; padding-top: 8px; border: 0; }
  .stbl td { border: 0; padding: 5px 0; }
  .stbl tr.g0 > * { border-top: 0; }
  .stbl tr.g0 { border-top: 1px solid var(--line-strong); }
  .tile .pkrow { flex-wrap: wrap; }
  .smallbase .sbh { flex-wrap: wrap; }
  .xlinks { flex-wrap: wrap; }
  .cbar { row-gap: var(--s2); }
}
.mv-sub > span { white-space: nowrap; }
@media (max-width: 720px) {
  .lbl.hov { display: none; } .lbl.tap { display: inline; }
  .mv-sub { flex-wrap: wrap; }
  .mv-sub small.bscale { flex: 1 1 auto; text-align: right; }
}
@media (max-width: 720px) {
  /* range chips with 1y / 2y locked: a 3-column grid, nothing scrolls out of view */
  .seg.segl:has(> .dis) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .seg.segl:has(> .dis) > * { justify-content: center; text-align: center; border-left: 0; }
  .seg.segl:has(> .dis) > :nth-child(3n+2), .seg.segl:has(> .dis) > :nth-child(3n+3) { border-left: 1px solid var(--line); }
  .seg.segl:has(> .dis) > :nth-child(n+4) { border-top: 1px solid var(--line); }
  .seg.segl:has(> .dis) > a { display: inline-flex; align-items: center; padding: 0 6px; }
  .seg.segl > .dis { padding: 0 6px; height: 38px; }
}
.tile.tpeak .ev { margin-top: 6px; }
svg .netband { opacity: .18; }
.tile .big.rk { font-size: 22px; line-height: 1.3; white-space: normal; }
@media (max-width: 720px) {
  .seg.segl > .dis { height: auto; min-height: 38px; padding: 3px 4px; }
  .seg.segl > .dis small { white-space: normal; font-size: 11px; line-height: 1.25; }
}

/* hierarchy (critique 2026-10-02): the hub H1 at the index pages' 28px and
   section heads one step above body, instead of h2 = h3 = body = 15px */
.trends .pagehead h1 { font-size: var(--fs-6); line-height: 1.3; }
.trends .sec-h h2 { font-size: var(--fs-4); }
@media (max-width: 767px) { .trends .pagehead h1 { font-size: 24px; } }
