/* =====================================================================
   Tables (owner, 10 Oct 2026). Loaded after the theme and css/phone.css.
   1. Banding, every width (setting "TableBands", html[data-bands=1]): alternate rows of every data table light grey and
      white. Zero specificity, so a cell's own colour (a heat map, a highlighted row) still wins.
   2. Phones (setting "PhoneTables" = stacked, js/tables.js marks the table .m-stack): each row is a banded block. The date
      and the row's name(s) are on the first line, and every other cell sits below under its column's name, three to a line,
      with long text full width.
   3. Party logos placed by js/tables.js (setting "PartyLogosMore").
   ===================================================================== */

:root { --tbl-band: #EFF1F4; --tbl-band-strong: #E5E8EC; }
/* on the dark bands (the front page's track record, the footer) a band is a faint lighter stripe, never a light row under white text */
.section-band--ink, .section-band--dark, .site-footer { --tbl-band: rgba(255, 255, 255, .05); --tbl-band-strong: rgba(255, 255, 255, .09); }

/* 1. banding: plain rows only (a row with a class is a highlight or a total), and never over a cell's own colour */
[data-bands="1"] main table:not(.no-band):not(.m-stack) > tbody > tr:is(:not([class]), [class=""]):nth-child(even) > :is(td, th):not([style*="background"]) { background-color: var(--tbl-band); }
[data-bands="1"] main table:not(.no-band):not(.m-stack) > tbody > tr:is(:not([class]), [class=""]):hover > :is(td, th):not([style*="background"]) { background-color: var(--tbl-band-strong); }
/* ranked lists: the band runs edge to edge with a little room either side of the text */
[data-bands="1"] main .table-module td:first-child { padding-left: 8px; }
[data-bands="1"] main .table-module td:last-child { padding-right: 8px; }

/* the map's seat box: one line per party, the figures in line */
.map-tooltip table { border-collapse: collapse; }
html .map-tooltip { max-width: min(340px, calc(100vw - 24px)); width: max-content; }
.map-tooltip td { white-space: nowrap; vertical-align: middle; }
.map-tooltip td .swatch { margin-right: 6px; vertical-align: -1px; }

/* 3. logos */
.pl-logo { display: inline-block; vertical-align: middle; object-fit: contain; }
.pl-logo--row { margin-left: 8px; position: relative; top: -1px; }
.pl-logo--head { display: block; margin: 0 0 4px auto; }
th:not(.num) > .pl-logo--head { margin-left: 0; }

/* 2. stacked rows on phones */
@media (max-width: 760px) {
    [data-mtables=stack] table.m-stack { display: block; width: 100% !important; min-width: 0 !important; max-width: 100%; border: 0 !important; border-collapse: separate; table-layout: auto; font-size: 14px; }
    [data-mtables=stack] table.m-stack > caption { display: block; text-align: left; }
    [data-mtables=stack] table.m-stack > thead, [data-mtables=stack] table.m-stack tr.m-headrow {
        position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    [data-mtables=stack] table.m-stack > tbody, [data-mtables=stack] table.m-stack > tfoot { display: block; }
    [data-mtables=stack] table.m-stack tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 8px;
        padding: 11px 12px 12px; margin: 0; border: 0 !important; border-radius: 12px; background: transparent; }
    [data-mtables=stack] table.m-stack tr[hidden] { display: none !important; }
    [data-mtables=stack] table.m-stack > tbody > tr.m-r:nth-child(even), [data-mtables=stack] table.m-stack > tfoot > tr.m-r:nth-child(even) { background: var(--tbl-band); }
    [data-mtables=stack] table.m-stack tr::before { content: ""; order: 2; flex: 0 0 100%; height: 0; }
    [data-mtables=stack] table.m-stack td, [data-mtables=stack] table.m-stack th {
        display: block; padding: 0 !important; border: 0 !important; width: auto !important; min-width: 0 !important; max-width: 100%;
        height: auto !important; text-align: left !important; white-space: normal !important; background: none !important; box-shadow: none !important;
        position: static; font-size: 14px; line-height: 1.35; }
    [data-mtables=stack] table.m-stack .nowrap { white-space: normal; }
    [data-mtables=stack] table.m-stack td :is(span, div)[class] { max-width: 100%; }
    [data-mtables=stack] table.m-stack .m-l * { white-space: normal; }

    /* line 1 */
    [data-mtables=stack] table.m-stack .m-d { order: 1; flex: 0 0 auto; max-width: 100%; font: 600 12.5px/1.35 var(--font-ui) !important; color: var(--muted); }
    [data-mtables=stack] table.m-stack .m-h { order: 1; flex: 0 1 auto; font-weight: 650; font-size: 15px; line-height: 1.3; color: var(--ink); }
    [data-mtables=stack] table.m-stack .m-h a, [data-mtables=stack] table.m-stack .m-h2 a { text-decoration: none; color: inherit; }
    /* a second name (the pollster under the race): its own line, quieter */
    [data-mtables=stack] table.m-stack .m-h2 { order: 1; flex: 0 0 100%; margin-top: -6px; font-size: 13.5px; color: var(--ink-2); }

    /* below: labelled values, three to a line; long text full width */
    /* each value under its label; labels of different heights (a logo, two lines) keep the values on one line */
    [data-mtables=stack] table.m-stack .m-c { order: 3; flex: 0 0 calc((100% - 24px) / 3); font-variant-numeric: tabular-nums; }
    [data-mtables=stack] table.m-stack .m-l { order: 3; flex: 0 0 100%; }
    [data-mtables=stack] table.m-stack :is(.m-c, .m-l) { align-self: flex-start; }
    [data-mtables=stack] table.m-stack [data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 2px; font: 600 11px/1.2 var(--font-ui); letter-spacing: .01em; color: var(--muted);
        height: 16px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* a party's column: its logo, then its name */
    [data-mtables=stack] table.m-stack .m-pl::before { padding-left: calc(var(--pl-w) + 5px);
        background: var(--pl-src) left center / var(--pl-w) var(--pl-h) no-repeat; }
    [data-mtables=stack] table.m-stack .m-pl--word::before { content: ""; display: block; width: min(var(--pl-w), 100%); height: 16px; padding-left: 0; background-size: contain; }
    [data-mtables=stack] table.m-stack.m-dense .m-c { flex-basis: calc((100% - 36px) / 4); }
    [data-mtables=stack] table.m-stack .m-e { display: none !important; }
    [data-mtables=stack] table.m-stack td small, [data-mtables=stack] table.m-stack td .muted { font-size: 12px; }
    [data-mtables=stack] table.m-stack td .bar, [data-mtables=stack] table.m-stack td [class*="bar"] { max-width: 100%; }

    /* a row that is only a heading (a group) */
    [data-mtables=stack] table.m-stack tr.m-group { background: none !important; padding: 16px 4px 4px; }
    [data-mtables=stack] table.m-stack tr.m-group::before { content: none; }
    [data-mtables=stack] table.m-stack tr.m-group > * { flex: 1 1 100%; font: 700 13px/1.3 var(--font-ui) !important; color: var(--ink); }

    /* two columns with no header: the label over its value */
    [data-mtables=stack] table.m-kv tr { flex-direction: column; row-gap: 2px; }
    [data-mtables=stack] table.m-kv tr::before { content: none; }
    [data-mtables=stack] table.m-kv .m-kvk { font: 600 12px/1.3 var(--font-ui) !important; color: var(--muted); }
    [data-mtables=stack] table.m-kv .m-kvv { font-size: 14.5px; font-weight: 400 !important; }
    [data-mtables=stack] table.m-kv .m-kvv b, [data-mtables=stack] table.m-kv .m-kvv strong { font-weight: 650; }

    /* the table no longer scrolls sideways: no scroll fade on its box */
    [data-mtables=stack] .table-wrap:has(> table.m-stack), [data-mtables=stack] .table-scroll:has(> table.m-stack) { overflow-x: visible; -webkit-mask-image: none !important; mask-image: none !important; padding-inline: 4px; }

    /* "Sort by" above a sortable table */
    .m-sortbar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 12.5px/1 var(--font-ui); color: var(--muted); }
    .m-sortbar label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
    .m-sortbar select { flex: 1; min-width: 0; min-height: 40px !important; font-size: 14px; }
    .m-sortbar .m-sortrev { flex: none; width: 40px; height: 40px; min-height: 40px !important; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--surface, #fff); color: var(--ink); font-size: 16px; }
    .m-sortbar .m-sortrev:disabled { opacity: .35; cursor: default; }
}
@media (min-width: 761px) { .m-sortbar { display: none; } }

/* long secondary tables (js/tables.js clip): the first 10 rows, then a button that opens the rest in place */
table.tbl-clip:not(.tbl-open) > tbody > tr:nth-child(n+11) { display: none !important; }
.tbl-more { display: block; margin: 6px 0 14px; padding: 7px 14px; font: 600 13px/1.2 var(--font-ui); color: var(--ink); background: var(--b1, #fff);
    border: 1px solid var(--hair); border-radius: 999px; cursor: pointer; }
.tbl-more:hover { border-color: var(--ink); }
.tbl-more::after { content: " ▾"; } .tbl-more[aria-expanded="true"]::after { content: " ▴"; }