/* ==========================================================================
   Design B, page family "exchange": the six index pages (/leaders, /parties,
   /constituencies, /districts, /topics, /channels) and /trends.
   Linked by layout(page_css=["exchange"]). B tokens only; no hard-coded
   surfaces, so both themes work. Components come from tick-b.css (.tiles,
   .b-table, .b-bar, .av, .chip, .dot, .seg, .stackbar, .legend, .sec-h,
   .evidence, .fade-in); this sheet only lays them out.

   Windows: every switchable number is rendered once per window
   (<span data-w="a">7 days</span><span data-w="b">24 hours</span>); the page
   root carries data-win and CSS shows the active one. Bars take their width
   from --wa / --wb, so a range switch glides instead of jumping.
   ========================================================================== */

.dx { --chart-ink: var(--ink-3); --dx-top: 0px; padding-bottom: var(--s5); }
/* phones: the foundation pins a 56px masthead bar (tick-b.css, <=720px); every
   sticky element here sits under it */
@media (max-width: 720px) { .dx { --dx-top: 56px; } }
.dx [hidden] { display: none !important; }
.dx[data-win="a"] [data-w="b"], .dx[data-win="b"] [data-w="a"] { display: none !important; }

/* one null token: regular weight, --ink-3 */
.dx-null { color: var(--ink-3); font-weight: 400; }

/* ---------- page head ---------- */
.dx-head { padding: var(--s3) 0 var(--s4); }
.dx-head h1 { font-size: var(--fs-6); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.dx-lede { margin-top: var(--s2); max-width: 72ch; font-size: var(--fs-3); line-height: 1.6; color: var(--ink-2); }

/* ---------- KPI tiles ---------- */
.dx-tiles { margin-bottom: var(--s4); }
@media (min-width: 1081px) { .dx-tiles.n2 { --cols: 2; } .dx-tiles.n3 { --cols: 3; } .dx-tiles.n4 { --cols: 4; } .dx-tiles.n5 { --cols: 5; } }
/* labels and subtitles wrap to two lines (tick-b clamps .tile dt/.sub at 2);
   our subtitles are written to fit in two */
/* entity KPI: 28px face + name as the value, count in the subtitle (home's tile) */
.dx-tiles .t-who .v { font-size: var(--fs-5); line-height: 1.4; white-space: normal; overflow: visible; }
.dx-tiles .t-who .who { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; max-width: 100%; color: var(--ink); }
.dx-tiles .t-who .who > span[lang], .dx-tiles .t-who .who > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.dx-tiles .t-who a.who:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.dx-tiles .t-who .av, .dx-tiles .t-who .dx-mark, .dx-tiles .t-who .dx-glyph { flex: none; width: 28px; height: 28px; }
.dx-tiles .t-who .dx-mark::after { left: 9px; top: 9px; width: 10px; height: 10px; }
.dx-tiles .t-who .dx-glyph svg { width: 18px; height: 18px; }

/* ---------- toolbar: chips + window + sort ---------- */
.dx-tools { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s5); margin: var(--s5) 0 var(--s2); }
.dx-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dx-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-2); font-weight: 500; color: var(--ink-2); background: var(--bg); white-space: nowrap; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.dx-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.dx-chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.dx-chip[aria-current="true"] .faint { color: inherit; opacity: .7; }
.dx-segs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s4); flex: none; margin-left: auto; justify-content: flex-end; }
.dx-segs .seg[hidden] { display: none; }
/* labelled control groups (loop-1 review): மண்டலம் / காலவரம்பு / வரிசைப்படுத்து */
.dx-ctl { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dx-ctl[hidden] { display: none; }
.dx-cl { font-size: var(--fs-1); font-weight: 600; line-height: 1.4; color: var(--ink-3); }
.dx-sarr { display: none; margin-left: 5px; font-weight: 700; }
.dx-sort [aria-pressed="true"] .dx-sarr { display: inline; }

/* ---------- the table ---------- */
.dx-wrap { margin-top: var(--s2); overflow: visible; }
/* what the # means, above the table (the bar's scale is in its own column head) */
.dx-cap { margin-top: var(--s2); font-size: var(--fs-1); line-height: 1.5; color: var(--ink-3); }
.dx-t { width: 100%; font-size: var(--fs-2); }
@media (min-width: 640px) { .dx-t { table-layout: fixed; } }
.dx-t thead th { white-space: normal; line-height: 1.35; font-size: var(--fs-1); font-weight: 600; color: var(--ink-2); border-bottom: 0; box-shadow: inset 0 -2px 0 var(--ink); padding-top: var(--s2); padding-bottom: var(--s2); vertical-align: bottom;
  position: sticky; top: 0; z-index: 2; background: var(--bg); }
/* the active sort's column carries the arrow (the script sets aria-sort) */
.dx-t th[aria-sort="descending"] > span:first-child::after,
.dx-t th[aria-sort="ascending"] > span:first-child::after { content: " ↓"; color: var(--ink); }
.dx-t thead th small { display: block; font-weight: 400; color: var(--ink-3); }
/* heads wrap (a nowrap cell's unit line overflowed under the next sticky head) */
.dx-t thead th.dx-n, .dx-t thead th.dx-lt, .dx-t thead th.dx-c { white-space: normal; }
.dx-ix th.dx-n { width: 100px; }
.dx-ix th.dx-bar { width: 108px; }
.dx-ix td.dx-n { font-size: var(--fs-3); font-weight: 700; color: var(--ink); }
.dx-ix td.dx-n .dx-v { min-width: 0; }
.dx-ix td.dx-bar { padding-left: var(--s2); }
.dx-ix .dx-bar .dx-b { display: block; width: 100%; }
.dx-ix th.dx-s { width: 108px; }
.dx-t .dx-lift { margin-left: 2px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dx-t .dx-tsn { margin-left: 4px; font-weight: 600; color: var(--ink-3); }
.dx-t thead th a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.dx-t td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.dx-t tbody tr:hover { background: var(--bg-2); }
.dx-t .r { text-align: right; }
.dx-t .dx-rk { width: 36px; color: var(--ink-3); font-size: var(--fs-1); text-align: left; font-variant-numeric: tabular-nums; }
.dx-t td.dx-c, .dx-t td.dx-c2, .dx-t td.dx-s { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dx-t td.dx-c .dx-null, .dx-t td.dx-c2 .dx-null, .dx-t td.dx-s .dx-null { display: inline-block; min-width: 1.5em; text-align: center; }

/* name cell: face + two-line name (wraps; never an ellipsis) */
.dx-ent { display: flex; align-items: center; gap: var(--s3); min-width: 0; color: var(--ink); }
.dx-ent .av { width: 34px; height: 34px; }
.dx-ent .av img { position: absolute; inset: 0; }
.dx-ent .av .ini { font-size: 11px; }
.dx-nt { display: flex; flex-direction: column; min-width: 0; }
.dx-nt b { font-size: var(--fs-3); font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.dx-nt small { font-size: var(--fs-1); line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }
.dx-mo { display: none; }
/* key fields of hidden columns, labelled, for narrow screens (.m9 <=900px, .m6 <640px) */
.dx-mx { display: none; }
.dx-kv .k { color: var(--ink-3); }
.dx-kv .v { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.dx-kv .chip { height: auto; padding: 0; border: 0; background: none; font-size: inherit; font-weight: 600; gap: 4px; }
.dx-kv .dx-null { font-weight: 400; }
/* a meta segment never breaks inside; its "· " travels with it (/trends rows) */
.dx-i { white-space: nowrap; }
/* Index-row subtitle (.dx-sub): every item is a flex item that carries its
   own "·" (a painted dot, as tick-b's .meta does); the box is shifted left by
   one separator and clipped there, so an item that starts a wrapped line hides
   its dot and no phone line begins with "·" (VERIFY P3). A long name item
   still wraps inside itself; counts and times (.nw) never break. */
.dx-nt .dx-sub { --sep: 14px; display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0;
  margin-left: calc(var(--sep) * -1); clip-path: inset(-3px -3px -3px var(--sep)); }
.dx-sub .dx-m { min-width: 0; 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%; }
.dx-sub .dx-m.nw { white-space: nowrap; }
.dx-sub .dx-mo { display: none; }
.dx-org { display: inline-block; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 3px; font-size: var(--fs-1); line-height: 1.5; color: var(--ink-2); }
a.dx-ent:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dx-mark { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 14%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 30%, transparent); }
.dx-mark::after { content: ""; position: absolute; left: 11px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--pc); }
.dx-glyph { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.dx-glyph svg { width: 22px; height: 22px; color: var(--ink-2); }
.dx-glyph svg [pathLength="1"] { stroke-dasharray: 1; animation: b-draw .9s var(--ease) both .15s; }
.dx-glyph.xs { width: 26px; height: 26px; }
.dx-glyph.xs svg { width: 16px; height: 16px; }
a.dx-ent:hover .dx-glyph svg { color: var(--accent-text); }

/* count + tiny bar (the null token sits centred on the numeric column) */
.dx-t .dx-n { width: 160px; white-space: nowrap; }
.dx-nb { display: inline-flex; align-items: center; gap: var(--s3); }
.dx-v { display: inline-block; min-width: 36px; font-size: var(--fs-3); font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.dx-nb > .dx-null, .dx-nb > [data-w] > .dx-null { display: inline-block; min-width: 36px; text-align: center; }
.dx-b { display: inline-block; vertical-align: middle; width: 88px; height: 4px; }
.dx .dx-b > i { background: var(--pc, var(--chart-ink)); width: var(--wa, 0%); transition: width var(--t-med) var(--ease); }
.dx[data-win="b"] .dx-b > i { width: var(--wb, 0%); }
.dx-lt { color: var(--ink-3); font-size: var(--fs-1); }
.dx-t .dx-lt { width: 156px; padding-left: var(--s4); white-space: nowrap; }
.dx-t th.dx-c, .dx-t th.dx-c2, .dx-t th.dx-s { width: 96px; }
.dx-t th.dx-cp, .dx-t th.dx-w, .dx-t th.dx-ln { width: 200px; }
.dx-t th.dx-ts, .dx-t th.dx-cov { width: 230px; }
.dx-ts a { color: var(--ink); font-weight: 500; }
.dx-ts a:hover, .dx-t .chip:hover { text-decoration: underline; text-underline-offset: 3px; }
.dx-t .chip { font-size: var(--fs-2); white-space: normal; }
.dx-t .chip .dot { width: 7px; height: 7px; flex: none; }
/* channels: the parties its videos named, as a stacked bar + labels */
.dx-mini { display: inline-flex; gap: 1px; width: 72px; height: 6px; vertical-align: middle; margin-right: var(--s2); border-radius: 2px; overflow: hidden; background: var(--track); }
.dx-mini > i { display: block; flex: 1 1 0; min-width: 2px; height: 100%; background: var(--pc, var(--rest)); }
.dx-mini > i.rest { background: var(--rest); }
.dx-covl { font-size: var(--fs-1); color: var(--ink-2); vertical-align: middle; }

/* zero-signal rows: one disclosure after the ranked rows */
.dx-zero { margin-top: var(--s3); border-bottom: 1px solid var(--line); }
.dx-zero > summary { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 0; cursor: pointer; list-style: none; font-size: var(--fs-2); font-weight: 500; color: var(--ink-2); }
.dx-zero > summary::-webkit-details-marker { display: none; }
.dx-zero > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-fast); }
.dx-zero[open] > summary::before { transform: rotate(45deg); }
.dx-zero > summary:hover { color: var(--ink); }
.dx-zl { columns: 4; column-gap: var(--gutter); padding: 0 0 var(--s4); font-size: var(--fs-2); }
.dx-zl li { break-inside: avoid; padding: 3px 0; }
.dx-zl a { color: var(--ink-2); }
.dx-zl a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.dx-zero[open] .dx-zl { animation: b-fade .25s ease both; }

/* ---------- parties: share bar ---------- */
.dx-share { margin: var(--s5) 0 var(--s2); }
.dx-share .sec-h { margin-bottom: var(--s1); }
.dx-share-sub { font-size: var(--fs-1); color: var(--ink-3); margin-bottom: var(--s3); }
.dx-share .sharebar .stackbar { height: 12px; }

/* ---------- constituencies: directory by district ---------- */
.dx-sec { margin-top: var(--s6); }
.dx-sec > .sec-h { margin-bottom: var(--s2); }
.dx-sec > .dx-tools { margin-top: var(--s2); }
.dx-jump { display: flex; flex-wrap: wrap; gap: 2px var(--s3); margin: var(--s2) 0 var(--s4); font-size: var(--fs-2); line-height: 1.9; }
.dx-jump a { color: var(--ink-2); white-space: nowrap; }
.dx-jump a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* a grid, not newspaper columns: districts read A–Z left to right (review) */
.dx-dirs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.dx-dist { min-width: 0; break-inside: avoid; border-top: 1px solid var(--line-strong); padding-top: var(--s2); margin-bottom: var(--s5); }
.dx-secsub { margin: 0 0 var(--s2); max-width: 90ch; font-size: var(--fs-2); line-height: 1.55; color: var(--ink-3); }
.dx-legend { display: flex; align-items: baseline; gap: var(--s2); max-width: 96ch; margin: var(--s2) 0 var(--s3); font-size: var(--fs-2); line-height: 1.55; color: var(--ink-2); }
.dx-legend .dx-sw { display: inline-block; flex: none; width: 22px; height: 14px; transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--accent-text); }
.dx-dist h3 { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--fs-3); font-weight: 700; line-height: 1.5; margin-bottom: 2px; }
/* name + "8 seats" wrap between them; the count stays on the first line */
.dx-dh { flex: 1 1 auto; min-width: 0; }
.dx-dh .dx-gs { white-space: nowrap; }
.dx-dist h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dx-gs { font-size: var(--fs-1); font-weight: 400; color: var(--ink-3); }
.dx-dn { margin-left: auto; font-size: var(--fs-1); font-weight: 700; color: var(--accent-text); white-space: nowrap; }
/* multi-state Ticks: one disclosure per member state */
.dx-state { border-top: 2px solid var(--ink); margin-top: var(--s4); }
.dx-state > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); padding: var(--s3) 0; cursor: pointer; list-style: none; font-size: var(--fs-4); }
.dx-state > summary::-webkit-details-marker { display: none; }
.dx-state > summary::before { content: ""; align-self: center; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-fast); }
.dx-state[open] > summary::before { transform: rotate(45deg); }
.dx-state > summary b { font-weight: 700; }
.dx-state > summary:hover b { text-decoration: underline; text-underline-offset: 3px; }
.dx-state > .dx-dirs { padding-top: var(--s2); }
.dx-dist ul { font-size: var(--fs-2); }
.dx-dist li a { display: flex; justify-content: space-between; gap: var(--s2); padding: 3px 0; color: var(--ink-2); }
.dx-dist li a:hover { color: var(--ink); }
.dx-dist li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dx-dist li a .dx-sn { text-decoration: none; }
.dx-sn { flex: none; min-width: 20px; padding: 0 5px; border-radius: 3px; background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-1); font-weight: 700; text-align: center; }

/* ---------- evidence + note ---------- */
.dx .evidence { margin-top: var(--s4); }
/* the lead item ("5,682 கட்டுரைகள், 8,909 வீடியோக்களின் அடிப்படையில்") is wider
   than a phone: it may wrap inside itself (its dot is clipped anyway; a flex
   item's second line keeps the item's padding, so no line starts with "·") */
.dx .evidence > .ev-i:first-child { white-space: normal; min-width: 0; }
.dx .dx-cov { margin-top: var(--s1); font-size: var(--fs-1); color: var(--ink-3); max-width: 80ch; }
.dx-note { max-width: 80ch; }
/* the method: a titled, full-width panel of bullets (review: not a grey paragraph) */
.dx-method { margin-top: var(--s5); padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.dx-method h2 { margin: 0 0 var(--s2); font-size: var(--fs-3); font-weight: 700; line-height: 1.45; color: var(--ink); }
.dx-method ul { columns: 2; column-gap: var(--s6); padding-left: 1.15em; list-style: disc; font-size: var(--fs-2); line-height: 1.6; color: var(--ink-2); }
.dx-method li { break-inside: avoid; margin-bottom: 6px; }
.dx-method li::marker { color: var(--ink-3); }

/* ---------- /trends ---------- */
.tr-views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.tr-seg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }
.tr-views .lbl { font-size: var(--fs-1); color: var(--ink-3); }
.tr-movers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: var(--s5); }
.tr-movers > section { min-width: 0; }
.tr-movers .sec-h { margin-bottom: 0; }
.tr-mv li a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: 9px 0; color: var(--ink); }
.tr-mv li + li a { border-top: 1px solid var(--line); }
.tr-mv .lbm { display: block; min-width: 0; }
.tr-mv .lbm .b-bar { display: block; width: 100%; max-width: 160px; height: 3px; margin: 5px 0 0; }
.tr-mv .rk { font-size: var(--fs-1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tr-mv .nm { display: block; font-size: var(--fs-3); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.tr-mv .v { text-align: right; font-size: var(--fs-4); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tr-mv .v small { display: block; font-size: var(--fs-1); font-weight: 500; color: var(--ink-3); }
.tr-mv li a:hover .nm { text-decoration: underline; text-underline-offset: 3px; }
.tr-t th.tr-type, .tr-t td.tr-type { width: 158px; }
.tr-t .dx-type { height: auto; min-height: 20px; padding: 3px 6px; white-space: nowrap; line-height: 1.3; }
.tr-t:not(.tr-pulse) th.dx-n { width: 118px; }
.tr-t th.dx-lt { width: 150px; }
.tr-t th.dx-c, .tr-t th.dx-c2 { width: 84px; }
.tr-t .dx-b { width: 56px; }
.tr-t .dx-type { font-weight: 500; background: transparent; }
.tr-t .tr-hl { font-size: var(--fs-2); color: var(--ink-2); line-height: 1.5; }
.tr-t td.tr-hl > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-pulse th.tr-hl { width: 46%; }
.tr-hl-mo { display: none; }
.tr-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--gutter); margin-top: var(--s6); align-items: start; }
.tr-grid > .tr-side { position: relative; }
.tr-main .dx-tools { margin-top: var(--s3); }
.tr-grid > .tr-side::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) / -2); border-left: 1px solid var(--line); }
.tr-wire { margin-top: var(--s1); }
.tr-wire li { padding: 10px 0; }
.tr-wire li + li { border-top: 1px solid var(--line); }
.tr-wire .t { font-size: var(--fs-3); line-height: 1.5; color: var(--ink); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tr-wire .src { margin-top: 2px; font-size: var(--fs-1); color: var(--ink-3); }
.tr-warm { padding: var(--s6) 0; text-align: center; color: var(--ink-2); }
.tr-warm .live { margin-right: 6px; vertical-align: 1px; background: var(--accent); }
.tr-pulse + .note, .dx > .note#method, .dx > .dx-method { margin-bottom: var(--s3); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .dx-zl { columns: 3; }
  .dx-dirs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dx-ix th.dx-bar { width: 72px; }
  .dx-t th.dx-cov, .dx-t th.dx-ts { width: 170px; }
  .dx-b { width: 56px; }
  .dx-t .dx-n { width: 120px; }
  .tr-grid { grid-template-columns: minmax(0, 1fr); }
  .tr-grid > .tr-side::before { display: none; }
  .tr-grid > .tr-side { margin-top: var(--s6); }
}
@media (max-width: 900px) {
  .dx-t .dx-c2, .dx-t .dx-ln, .dx-t .dx-cp, .dx-t .dx-w { display: none; }
  .dx-sub .dx-mx, .dx-sub .dx-mx > [data-w] { display: contents; }
  .dx-sub .dx-kv.m6 { display: none; }
  .dx-method ul { columns: 1; }
  .tr-movers { grid-template-columns: 1fr; row-gap: var(--s5); }
}
@media (max-width: 720px) {
  .dx-tools { flex-direction: column; align-items: stretch; margin-top: var(--s4); }
  .dx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent);
    scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
  .dx-chips::-webkit-scrollbar { display: none; }
  /* end padding: the last chip scrolls clear of the fade */
  .dx-chips::after { content: ""; flex: 0 0 calc(var(--gutter) + 24px); }
  .dx-chip { scroll-snap-align: start; }
  /* scroll affordance: the group label says the row scrolls */
  .dx-ctl-f .dx-cl::after { content: "  →"; font-weight: 400; }
  .dx-segs { margin-left: 0; justify-content: flex-start; }
  .dx-zl { columns: 2; column-gap: var(--s4); }
  .dx-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
  .dx-tiles .t-who .v { font-size: var(--fs-4); }
}

/* Phones: every table row becomes a grid, not a table row.
   24px rank · 40px face · name (1fr, wraps to two lines) · count over a 64px bar.
   Sources and recency are folded into the subtitle (.dx-mo). */
@media (max-width: 639px) {
  .dx-wrap { overflow: visible; }
  .dx-t, .dx-t tbody, .dx-t tr, .dx-t td { display: block; }
  .dx-t { table-layout: auto; }
  .dx-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dx-t tbody tr { display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .dx-t tbody tr.nf { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .dx-t tbody tr[hidden] { display: none; }
  .dx-t td { padding: 0; border: 0; }
  .dx-t td.dx-rk { grid-column: 1; width: auto; }
  .dx-t td.dx-name, .dx-t td.dx-name > .dx-ent { display: contents; }
  .dx-t td.dx-name .av, .dx-t td.dx-name .dx-mark, .dx-t td.dx-name .dx-glyph { grid-column: 2; width: 36px; height: 36px; }
  .dx-t td.dx-name .dx-mark::after { left: 12px; top: 12px; }
  .dx-t td.dx-name .dx-nt { grid-column: 3; min-width: 0; }
  .dx-t tr.nf td.dx-name .dx-nt { grid-column: 2; }
  .dx-t td.dx-n { grid-column: -2; width: auto; text-align: right; }
  .dx-t .dx-nb { flex-direction: column; align-items: flex-end; gap: 5px; }
  .dx-t .dx-v, .dx-nb > .dx-null, .dx-nb > [data-w] > .dx-null { min-width: 0; }
  .dx-t .dx-b { display: block; width: 64px; }
  .dx-t td.dx-c, .dx-t td.dx-c2, .dx-t td.dx-s, .dx-t td.dx-lt, .dx-t td.dx-cov, .dx-t td.dx-ln,
  .dx-t td.dx-cp, .dx-t td.dx-w, .dx-t td.dx-ts, .dx-t td.tr-type, .dx-t td.tr-hl { display: none; }
  .dx-mo { display: inline; }
  /* the fold's items join the subtitle's flex line (their dots clip at a wrap) */
  .dx-sub .dx-mo, .dx-sub .dx-mo > [data-w] { display: contents; }
  .tr-hl-mo { display: block; margin-top: 2px; font-size: var(--fs-1); line-height: 1.5; color: var(--ink-2); }
  .tr-pulse tbody tr { grid-template-columns: 24px 40px minmax(0, 1fr); }
  .tr-pulse tbody tr.nf { grid-template-columns: 24px minmax(0, 1fr); }
  .dx-t td.empty { grid-column: 1 / -1; }
  .dx-nt b { line-height: 1.45; }
  .dx-mark::after { left: 9px; top: 9px; }
}

/* segmented controls wrap onto a second row instead of clipping */
@media (max-width: 479px) {
  .dx .seg { flex-wrap: wrap; max-width: 100%; }
  .dx .seg > * { flex: 1 1 auto; justify-content: center; }
  .tr-seg { width: 100%; }
  .tr-seg .seg { flex: 1 1 auto; }
  .dx-zl { columns: 1; }
  .dx-dirs { grid-template-columns: minmax(0, 1fr); }
}

/* the role line is desktop detail; phones keep name · party · sources · time */
@media (max-width: 639px) {
  .dx-t .dx-role { display: none; }
  .tr-t .tr-nat::before { content: " · "; }
}
.tr-t .tr-nat { color: var(--ink-3); }
@media (min-width: 640px) { .tr-t .tr-nat { display: block; } }

/* topic glyphs line up with avatars and party marks in the name column */
.dx-t .dx-ent .dx-glyph.xs { width: 34px; height: 34px; }
.dx-t .dx-ent .dx-glyph.xs svg { width: 20px; height: 20px; }
.tr-wire .src time { white-space: nowrap; }

/* ---------- 2026-09-28 (review loop 1): phones ---------- */
@media (max-width: 639px) {
  /* a compact sticky head: rank · name · the count's unit */
  .dx-t.dx-ix thead { position: sticky; top: 0; z-index: 3; display: block; width: auto; height: auto; overflow: visible;
    clip: auto; white-space: normal; background: var(--bg); }
  .dx-t.dx-ix thead tr { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; align-items: end;
    border-bottom: 1px solid var(--line-strong); }
  .dx-t.dx-ix thead th { display: none; position: static; box-shadow: none; background: transparent; padding: 6px 0; width: auto; }
  .dx-t.dx-ix thead th.dx-rk, .dx-t.dx-ix thead th.dx-name, .dx-t.dx-ix thead th.dx-n { display: block; }
  .dx-t.dx-ix thead th.dx-n small { white-space: nowrap; }
  /* count on the first line, its bar under it; rank, face and name span both */
  .dx-t.dx-ix tbody tr { grid-template-columns: 24px 40px minmax(0, 1fr) auto; row-gap: 5px; }
  .dx-t.dx-ix tbody tr.nf { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .dx-t.dx-ix td.dx-rk, .dx-t.dx-ix td.dx-name .av, .dx-t.dx-ix td.dx-name .dx-mark,
  .dx-t.dx-ix td.dx-name .dx-glyph, .dx-t.dx-ix td.dx-name .dx-nt { grid-row: 1 / span 2; }
  .dx-t.dx-ix td.dx-n { grid-column: -2; grid-row: 1; align-self: end; width: auto; text-align: right; }
  .dx-t.dx-ix td.dx-bar { display: block; grid-column: -2; grid-row: 2; align-self: start; width: 64px; padding: 0; }
  .dx-t.dx-ix .dx-bar .dx-b { width: 64px; }
  .dx-sub .dx-kv.m6 { display: inline; }
  /* the section head rule: a hairline under the tiles, not a stray 2px bar */
  .dx-sec { margin-top: var(--s5); }
  .dx-sec > .sec-h { border-top: 1px solid var(--line-strong); padding-top: var(--s3); }
  .dx-method { padding: var(--s3) var(--s4); }
  .dx-cap { margin-top: var(--s3); }
}
/* /topics: the share head names its denominator ("share of 3,785 items naming any topic") */
.dx-topics th.dx-s { width: 136px; }
.dx-topics th.dx-bar { width: 88px; }
@media (max-width: 1080px) { .dx-topics th.dx-s { width: 112px; } .dx-topics th.dx-bar { width: 64px; } }

/* ==========================================================================
   2026-09-28 review loop 2
   ========================================================================== */

/* KPI labels and definitions wrap in full: never an ellipsis (tick-b clamps
   .tile dt / .sub at two lines; "ஒரு பதிவு பல விவகாரங்களைத்…" was cut) */
.dx-tiles .tile > dt, .dx-tiles .tile .sub { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* degraded read: a delayed stamp over last-good counts, or the gap pill */
.dx-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); margin: 0 0 var(--s4); padding: var(--s2) var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-2); font-size: var(--fs-2); line-height: 1.55; color: var(--ink-2); }
.dx-pill { display: inline-flex; align-items: center; max-width: 100%; min-height: 22px; padding: 1px 9px; border-radius: 11px; font-size: var(--fs-1); font-weight: 700; line-height: 1.4; white-space: normal; background: var(--ink); color: var(--bg); }
.dx-status-last_good { background: var(--change-bg); border-color: color-mix(in srgb, var(--change) 35%, transparent); }
.dx-status-last_good .dx-pill { background: var(--change); color: var(--bg); }

/* ---------- one toolbar directly above the column heads ---------- */
.dx-tbl { position: relative; margin-top: var(--s5); }
.dx-tbl > .dx-tools { flex-wrap: wrap; margin: 0; padding: 0 0 var(--s2); }
.dx-tbl > .dx-wrap { margin-top: 0; }
.dx-res { flex: 1 1 100%; order: 9; margin: 2px 0 0; font-size: var(--fs-2); line-height: 1.5; color: var(--ink-2); }
.dx-res .dx-rs { white-space: nowrap; }
.dx-res b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dx-rsep { color: var(--ink-3); }
/* equal-width segments, the same terms as the column heads */
.dx .seg.dx-eq { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 15rem; }
.dx .seg.dx-eq > button { justify-content: center; text-align: center; min-width: 0; }
.dx-sort [aria-pressed="true"] .dx-sarr { display: inline; }
/* desktop: on a long table (20+ rows) the toolbar and the heads stay in view */
@media (min-width: 640px) {
  .dx[data-js] .dx-tbl.dx-long > .dx-tools { position: sticky; top: var(--dx-top); z-index: 4; background: var(--bg); padding-top: var(--s2); box-shadow: 0 1px 0 var(--line); }
  .dx[data-js] .dx-tbl.dx-long .dx-t thead th { top: calc(var(--dx-top) + var(--dx-tb, 0px)); }
}

/* ---------- column heads: one short label, the definition behind "?" ---------- */
.dx-t.dx-ix thead th { white-space: normal; vertical-align: bottom; }
.dx-t.dx-ix thead th.r { text-align: right; }
.dx-q { position: relative; display: inline-block; margin-left: 5px; vertical-align: 1px; text-align: left; font-weight: 400; }
.dx-q > summary { list-style: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border: 1px solid var(--line-strong); border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; color: var(--ink-3); cursor: pointer; }
.dx-q > summary::-webkit-details-marker { display: none; }
.dx-q > summary::after { content: ""; position: absolute; inset: -12px; }       /* a 40px tap target */
.dx-q > summary:hover, .dx-q[open] > summary { color: var(--ink); border-color: var(--ink-3); }
.dx-q > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-qp { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 8; width: 260px; max-width: calc(100vw - 32px);
  padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-elev, var(--bg));
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14); font-size: var(--fs-2); font-weight: 400; line-height: 1.55; color: var(--ink-2); white-space: normal; }
.dx-t th.r .dx-qp, .dx-t th:last-child .dx-qp, .dx-t th.dx-lt .dx-qp { left: auto; right: -6px; transform: none; }
.dx-t th.dx-rk .dx-qp, .dx-t th.dx-name .dx-qp { left: -6px; transform: none; }
.dx-t th a { white-space: normal; }
.dx-mleg { display: none; }
.dx-mf, .dx-ml { display: none; }

/* bars: 6px, a visible track, a minimum length (set in the markup) */
.dx-ix .dx-b { height: 6px; }
.dx-ix th.dx-bar { width: 118px; }

/* /topics: the leader most tied to a topic, with its support */
/* chip + support wrap as two units; the support's "·" is painted and clipped
   at a line start (as .dx-sub), so a wrapped line never begins with a dot */
.dx-assoc { --sep: 12px; display: inline-flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; min-width: 0;
  margin-left: calc(var(--sep) * -1); clip-path: inset(-4px -4px -4px var(--sep)); }
.dx-assoc > .dx-lc { padding-left: var(--sep); }
.dx-assoc > .dx-sup { 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%; }
.dx-t .chip.dx-lc, .dx-kv .dx-lc { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.dx-lift { display: inline-block; min-width: 2.7em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dx-sup { white-space: nowrap; font-size: var(--fs-1); color: var(--ink-3); font-weight: 400; }
.dx-nst { cursor: help; }

/* /channels: documented ownership only */
.dx-own { display: inline-flex; flex-direction: column; min-width: 0; }
.dx-own-src { font-size: var(--fs-1); color: var(--ink-3); line-height: 1.45; }

/* ---------- /constituencies: two tabs ---------- */
.dx-tabs { display: flex; flex-wrap: wrap; margin: var(--s5) 0 0; border-bottom: 1px solid var(--line-strong); }
.dx-tabs a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 11px var(--s4) 9px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; font-size: var(--fs-3); font-weight: 600; color: var(--ink-2); }
.dx-tabs a b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dx-tabs a:hover { color: var(--ink); }
.dx-tabs a[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.dx[data-tab="news"] #seats-all, .dx[data-tab="all"] #seats-news { display: none; }
.dx-pane.dx-sec { margin-top: 0; }
.dx-pane .dx-tbl { margin-top: var(--s3); }
.dx-more-p { margin: var(--s3) 0 0; }
.dx-more { min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg);
  font-size: var(--fs-2); font-weight: 600; color: var(--ink); cursor: pointer; }
.dx-more:hover { background: var(--bg-2); }
.dx-more[hidden] { display: none; }

/* every seat: one disclosure per district (the five most mentioned open) */
.dx-dirsec { --dx-jump-h: 0px; }
.dx-dirsec > .sec-h { margin-top: var(--s4); }
.dx-dirsec .dx-dirs { display: block; }
.dx-dirsec .dx-dist { border-top: 1px solid var(--line); padding: 0; margin: 0; }
.dx-dirsec .dx-dist:last-child { border-bottom: 1px solid var(--line); }
.dx-dist > summary { display: flex; align-items: baseline; gap: var(--s2); padding: 10px 0; cursor: pointer; list-style: none; font-size: var(--fs-3); line-height: 1.45; }
.dx-dist > summary::-webkit-details-marker { display: none; }
.dx-dist > summary::before { content: ""; flex: none; align-self: center; width: 7px; height: 7px; margin: 0 4px 0 2px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); transition: transform var(--t-fast); }
.dx-dist[open] > summary::before { transform: rotate(45deg); }
.dx-dist > summary b { font-weight: 700; color: var(--ink); }
.dx-dist > summary:hover b { text-decoration: underline; text-underline-offset: 3px; }
.dx-dist[open] > summary { position: sticky; top: calc(var(--dx-top) + var(--dx-jump-h)); z-index: 2; background: var(--bg); }
.dx-dirsec .dx-dist ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); padding: 0 0 var(--s2) 21px; font-size: var(--fs-2); }
.dx-dirsec .dx-dist li a { padding: 4px 0; }
.dx-dlink { margin: 0 0 var(--s3) 21px; font-size: var(--fs-2); }
.dx-dlink a { color: var(--accent-text); font-weight: 600; }
.dx-dlink a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dx-state .dx-dist > summary { font-size: var(--fs-3); }
.dx-state[open] > .dx-dirs { padding-top: 0; }

@media (max-width: 1080px) { .dx-dirsec .dx-dist ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- phones ---------- */
@media (max-width: 720px) {
  .dx-tbl > .dx-tools { flex-wrap: nowrap; gap: var(--s3); }   /* column + wrap let the chip row set the width */
  .dx-tbl > .dx-tools > .dx-ctl { max-width: 100%; }
  .dx-segs { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: var(--s3); }
  .dx .seg.dx-eq { display: grid; width: 100%; min-width: 0; }
  .dx .seg.dx-eq > button { height: auto; min-height: 40px; padding: 6px 8px; white-space: normal; line-height: 1.3; }
  .dx-dirsec .dx-dist ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
  /* the district jump strip: one scrolling row, sticky over the list */
  .dx-dirsec { --dx-jump-h: 44px; }
  .dx-dirsec .dx-jump { position: sticky; top: var(--dx-top); z-index: 3; flex-wrap: nowrap; align-items: center; height: 44px; margin: var(--s2) calc(var(--gutter) * -1) 0;
    padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; background: var(--bg); box-shadow: 0 1px 0 var(--line); gap: 0 var(--s4); }
  .dx-dirsec .dx-jump::-webkit-scrollbar { display: none; }
  .dx-tabs a { flex: 1 1 0; justify-content: center; padding-left: var(--s2); padding-right: var(--s2); }
}
@media (max-width: 639px) {
  /* a fixed grid: rank · face · content · value (count over its bar) */
  .dx-t.dx-ix tbody tr { grid-template-columns: 22px 34px minmax(0, 1fr) 64px; column-gap: 8px; row-gap: 4px; padding: 9px 0; }
  .dx-t.dx-ix tbody tr.nf { grid-template-columns: 22px minmax(0, 1fr) 64px; }
  .dx-t.dx-ix thead tr { grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; }
  .dx-t.dx-ix td.dx-name .av, .dx-t.dx-ix td.dx-name .dx-mark, .dx-t.dx-ix td.dx-name .dx-glyph { width: 34px; height: 34px; align-self: start; margin-top: 1px; }
  .dx-t.dx-ix td.dx-name .dx-glyph svg { width: 18px; height: 18px; }
  .dx-t.dx-ix td.dx-name .dx-mark::after { left: 11px; top: 11px; }
  .dx-t.dx-ix td.dx-rk { align-self: start; padding-top: 3px; }
  .dx-t.dx-ix td.dx-n { align-self: start; }
  .dx-t.dx-ix td.dx-bar, .dx-t.dx-ix .dx-bar .dx-b { width: 64px; }
  .dx-t.dx-ix .dx-nt b { line-height: 1.35; }
  .dx-t.dx-ix .dx-nt small { line-height: 1.5; }
  /* the other script is desktop detail on the native view (review: "Law & Order" under "சட்டம் ஒழுங்கு") */
  .dx-sub .dx-alt { display: none; }
  /* line 1 (the subtitle): meta · sources · lead facts; line 2 (.dx-mf, a
     grid row of its own under face + name + value): recency · facts */
  .dx-t.dx-ix .dx-sub .dx-mx, .dx-t.dx-ix .dx-sub .dx-dsk { display: none; }
  .dx-t.dx-ix .dx-sub .dx-ml, .dx-t.dx-ix .dx-sub .dx-ml > [data-w] { display: contents; }
  .dx-t.dx-ix .dx-mf { --sep: 14px; display: flex; flex-wrap: wrap; align-items: baseline; grid-column: 2 / -1; grid-row: 3; min-width: 0;
    margin-left: calc(var(--sep) * -1); clip-path: inset(-3px -3px -3px var(--sep)); font-size: var(--fs-1); line-height: 1.5; color: var(--ink-3); }
  .dx-t.dx-ix .dx-mf > [data-w] { display: contents; }
  .dx-t.dx-ix .dx-mf .dx-m { min-width: 0; 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%; }
  .dx-t.dx-ix .dx-mf .dx-kv { display: inline; }
  /* the head: "# ?" spans the rank + face columns so the name head sits over the names */
  .dx-t.dx-ix:not(.dx-seats-news):not(.dx-districts) thead tr { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .dx-kv-lift .v { white-space: normal; }
  .dx-kv-cov .dx-mini { display: inline-flex; width: 56px; margin: 0 6px 0 2px; }
  .dx-kv-cov .v { white-space: normal; }
  .dx-mleg { display: block; margin-top: 1px; font-size: var(--fs-1); font-weight: 400; color: var(--ink-3); white-space: normal; }
  .dx-t.dx-ix thead th.dx-name { white-space: normal; }
  .dx-res { font-size: var(--fs-1); }
  .dx-tabs a { font-size: var(--fs-2); }
  .dx-dist > summary { padding: 11px 0; }
}
/* the foundation's .scrollrow (tick-b.js decorates the chip row) paints the
   selected item ink-on-underline; our selected chip is a filled pill */
.dx .dx-chips > .dx-chip.dx-chip[aria-current="true"] { color: var(--bg); box-shadow: none; }
/* heads: the label and its sort arrow never split; room for "label ↓ ?" */
/* the arrow is glued to the label's last word (a no-break space), labels still wrap */
.dx-t.dx-ix th[aria-sort="descending"] > span:first-child::after,
.dx-t.dx-ix th[aria-sort="ascending"] > span:first-child::after { content: "\a0↓"; }
.dx-topics th.dx-w { width: 236px; }
.dx-t thead th small.dx-mleg { display: none; }
@media (min-width: 640px) {
  .dx-ix th.dx-rk { width: 52px; white-space: nowrap; }
  .dx-ix th.dx-n { width: 136px; }
  .dx-ix th.dx-bar { width: 150px; }
  .dx-ix th.dx-s { width: 112px; }
  .dx-t.dx-ix th.dx-c, .dx-t.dx-ix th.dx-c2 { width: 118px; }
  .dx-topics th.dx-s { width: 118px; }
  .dx-topics th.dx-bar { width: 132px; }
}
@media (max-width: 1080px) and (min-width: 640px) {
  .dx-ix th.dx-bar, .dx-topics th.dx-bar { width: 96px; }
  .dx-ix th.dx-n { width: 120px; }
}
@media (max-width: 639px) {
  .dx-t thead th small.dx-mleg { display: block; }
}
/* phones: the compact sticky head sits under the pinned masthead bar */
@media (max-width: 639px) { .dx-t.dx-ix thead { top: var(--dx-top); } }
/* desktop: chips, period and sort on ONE row (the chips scroll sideways
   instead of wrapping), so the sticky toolbar stays ~100px tall */
@media (min-width: 721px) {
  .dx-tbl > .dx-tools { flex-wrap: wrap; align-items: flex-end; }
  .dx-tbl > .dx-tools > .dx-ctl-f { flex: 1 1 0; min-width: 0; }
  .dx-tbl > .dx-tools .dx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .dx-tbl > .dx-tools .dx-chips::-webkit-scrollbar { display: none; }
  .dx-tbl > .dx-tools .dx-chips:not(.scrollrow) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .dx-tbl > .dx-tools .dx-chips::after { content: ""; flex: 0 0 32px; }
}