/* Latest polls on a phone (owner, 13 Oct 2026: "We need the latest poll page to be much better laid out on mobile. It is a
   mess right now"). The UK list (/uk/polls) and the US races list (/us/polls) keep their full tables on wider screens; below
   760px each poll becomes one compact row: who and when, a bar of the shares, the lead. Days get a heading so the date is
   not repeated. Long lists show 30 at a time (js/poll-list.js); without the script every row shows. */
/* the parts of a poll row, at every width (the phone list, and the cards on a wide screen) */
.pl-list { list-style: none; margin: 0 0 16px; padding: 0; }
.pl-list.pl-cards { display: block; }
.pl-bar { display: flex; height: 26px; margin: 8px 0 6px; border-radius: 5px; overflow: hidden; background: var(--b2, #eceef1); }
.pl-bar > span { flex: var(--w) 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 2px; background: var(--pc);
    color: #fff; font: 700 12px/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; box-shadow: inset -1px 0 0 rgba(255,255,255,.55); }
.pl-bar > span small { font: 600 10.5px/1 var(--font-ui); color: inherit; opacity: .85; }
.pl-bar > span.pl-narrow small { display: none; }
.pl-bar > span.pl-tiny, .pl-bar > span.pl-tiny small { color: transparent; }
.pl-bar > span.pl-light { color: #1b1f24; }
.pl-vs, .pl-pill, .pl-kick, .pl-when, .pl-oth-note { display: none; }
@media (max-width: 760px) {
    .pl-wide { display: none !important; }
    .pl-view { display: none; }
    .pl-list { display: block; }
    .pl-day { margin: 0; padding: 8px 2px 6px; background: var(--b2, #f4f5f7);
        font: 700 12px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hair); }
    .pl-item { padding: 11px 0 12px; border-bottom: 1px solid var(--hair); }
    .pl-item[hidden] { display: none; }
    .pl-head { display: flex; align-items: center; gap: 8px; min-width: 0; font: 650 15px/1.25 var(--font-ui); }
    .pl-head a { color: var(--ink); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pl-head a:hover { text-decoration: underline; }
    .pl-head .grade { flex: none; transform: scale(.88); }
    .pl-head .pl-side { flex: none; margin-left: auto; font: 600 12px/1 var(--font-ui); color: var(--muted); white-space: nowrap; }
    .pl-sub { margin: 2px 0 0; font: 500 12.5px/1.3 var(--font-ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pl-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font: 500 13px/1.35 var(--font-ui); color: var(--ink-2, #3a3f47); }
    .pl-foot b { font-weight: 750; font-variant-numeric: tabular-nums; }
    .pl-foot .pl-lead { margin-left: auto; font-weight: 700; }
    .pl-foot .pl-lead.d { color: #2E6DB4; } .pl-foot .pl-lead.r { color: #C8312F; } .pl-foot .pl-lead.lab { color: #c4002f; } .pl-foot .pl-lead.con { color: #0068aa; }
    .pl-names { font-size: 12.5px; color: var(--muted); }
    .pl-more { display: block; width: 100%; margin: 6px 0 18px; padding: 12px; border-radius: 10px; border: 1px solid var(--hair); background: var(--b1, #fff);
        font: 650 14px/1.2 var(--font-ui); color: var(--ink); cursor: pointer; }
    /* the filters fold into one line on a phone */
    .pl-filters > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; margin: 0 0 12px;
        border: 1px solid var(--hair); border-radius: 10px; font: 650 14px/1.2 var(--font-ui); background: var(--b1, #fff); }
    .pl-filters > summary::-webkit-details-marker { display: none; }
    .pl-filters > summary::after { content: "Change"; font-weight: 600; color: var(--muted); font-size: 13px; }
    .pl-filters[open] > summary::after { content: "Close"; }
    .pl-filters .controls { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 14px; }
    .pl-filters .controls select, .pl-filters .controls button, .pl-filters .controls .button { width: 100%; }
}
@media (min-width: 761px) {
    .pl-filters > summary { display: none; }
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pl-bar > span.pl-light { color: #111; }
}
.pl-day[hidden] { display: none; }
@media (min-width: 761px) { .pl-list:not(.pl-cards) { display: none; } .pl-list-note:not(.pl-note-all) { display: none; } }
/* on a phone the poll list starts sooner: the page's own lead repeats the intro above it. Only on the "every poll" pages (the
   list is a tab of its own); a page with a short list in it (a race, the battleground, a pollster) keeps its lead. */
@media (max-width: 760px) { body:has(.tab-panel[data-panel="list"] > ol.pl-list, .tab-panel[data-panel="races"] > ol.pl-list) .page-head .lead { display: none; } }

/* ---------- the cards on a wide screen (owner, 15 Oct 2026: "Make the desktop one look just as flashy") ----------
   Each poll is a card: what and who, the contenders facing each other with their photos (the party's logo where we hold
   no photo), the share bar and the lead. Two or three to a row; the day headings run across. */
.pl-view { display: flex; justify-content: flex-end; gap: 2px; margin: -6px 0 10px; font: 650 13px/1 var(--font-ui); }
.pl-view a { padding: 7px 12px; border-radius: 999px; color: var(--muted); text-decoration: none; border: 1px solid transparent; }
.pl-view a:hover { color: var(--ink); border-color: var(--hair); }
.pl-view a[aria-current="page"] { background: var(--ink); color: var(--surface, #fff); }
/* a phone has the cards only (a table layout's table is hidden there), so no switch */
@media (max-width: 760px) { .pl-view { display: none; } }
@media (min-width: 761px) {
    .pl-list.pl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(470px, 100%), 1fr)); gap: 16px; margin: 6px 0 22px; align-items: start; }
    .pl-cards .pl-day { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 10px 0 -2px; padding: 0;
        font: 750 12px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
    .pl-cards .pl-day::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
    .pl-cards .pl-day:first-child { margin-top: 0; }
    .pl-cards .pl-day[hidden], .pl-cards .pl-item[hidden] { display: none; }
    .pl-cards .pl-item { position: relative; display: flex; flex-direction: column; padding: 14px 16px 14px; border: 1px solid var(--hair); border-radius: 14px;
        background: var(--surface, #fff); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px -12px rgba(16,24,40,.18); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; overflow: hidden; }
    .pl-cards .pl-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--lc, var(--hair)); }
    .pl-cards .pl-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink) 18%, var(--hair)); box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 14px 30px -16px rgba(16,24,40,.32); }
    .pl-cards .pl-head { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "kick pill" "race pill"; align-items: center; column-gap: 10px; }
    .pl-cards .pl-kick { grid-area: kick; display: block; font: 700 11px/1.3 var(--font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
    .pl-cards .pl-head > a:not(.desk-note-link) { grid-area: race; font: 750 18px/1.2 var(--font-display, var(--font-ui)); color: var(--ink); text-decoration: none; letter-spacing: -.01em;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pl-cards .pl-head > a:not(.desk-note-link):hover { text-decoration: underline; }
    .pl-cards .pl-head > .desk-note-link { grid-area: kick; justify-self: end; margin: 0; }
    .pl-cards .pl-head .pl-side { display: none; }
    .pl-cards .pl-pill { grid-area: pill; display: inline-block; padding: 7px 12px; border-radius: 999px; background: var(--pc, var(--ink)); color: #fff;
        font: 750 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 6px 14px -8px var(--pc, #000); }
    .pl-cards .pl-sub { margin: 4px 0 0; font: 500 13px/1.35 var(--font-ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pl-cards .pl-sub a { color: var(--ink-2, #3a3f47); }
    .pl-cards .pl-when { display: inline; }
    .pl-cards .pl-vs { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
    .pl-cards .pl-vs--duo .pl-c { flex: 1 1 0; }
    .pl-cards .pl-vs--many { flex-wrap: wrap; gap: 10px 14px; }
    .pl-cards .pl-vs--many .pl-c { flex: 1 1 calc(50% - 14px); }
    .pl-cards .pl-c { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .pl-cards .pl-c--r { flex-direction: row-reverse; text-align: right; }
    .pl-cards .pl-c__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .pl-cards .pl-c__who b { font: 700 14px/1.2 var(--font-ui); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pl-cards .pl-c__who small { font: 600 11.5px/1.3 var(--font-ui); color: var(--pc); text-transform: capitalize; }
    .pl-cards .pl-c__n { font: 800 30px/1 var(--font-display, var(--font-ui)); font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -.02em; }
    .pl-cards .pl-vs--many .pl-c__n { font-size: 22px; }
    .pl-cards .pl-c:not(.pl-c--top) .pl-c__n { color: var(--muted); }
    .pl-cards .pl-c--top .pl-c__n { color: var(--pc); }
    .pl-cards .pl-vs__v { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--b2, #eceef1);
        font: 800 11px/1 var(--font-ui); color: var(--muted); text-transform: uppercase; }
    .pl-cards .pl-bar { height: 12px; margin: 12px 0 10px; border-radius: 999px; }
    /* a gap between the share bar and the party chips (owner, 16 Oct 2026: the bar sat right on the coloured blocks) */
    .pl-cards .pl-bar + .pl-chips { margin-top: 0; }
    .pl-cards .pl-bar > span { font-size: 0; box-shadow: inset -2px 0 0 var(--surface, #fff); }
    .pl-cards .pl-bar > span small { display: none; }
    .pl-cards .pl-foot { display: none; }
    .pl-cards .pl-oth-note { display: block; margin: 4px 0 0; text-align: center; font: 600 12px/1.2 var(--font-ui); color: var(--muted); }
    ol.pl-list:not(.pl-cards) + .pl-more { display: none; }
    .pl-cards + .pl-more { display: block; width: 100%; max-width: 360px; margin: 0 auto 22px; padding: 12px; border-radius: 999px; border: 1px solid var(--hair);
        background: var(--surface, #fff); font: 650 14px/1.2 var(--font-ui); color: var(--ink); cursor: pointer; }
    .pl-cards + .pl-more[hidden] { display: none; }
}
/* a party logo standing in for a photo: shown whole on white inside the ring */
.avatar.pl-mark .frame { background: #fff; display: grid; place-items: center; }
.avatar.pl-mark .frame img { width: 74%; height: 74%; object-fit: contain; transform: none; }
.avatar.pl-mark:hover .frame img { transform: none; }
.avatar.pl-oth .frame { font: 800 18px/1 var(--font-ui); color: #777; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pl-cards .pl-item { box-shadow: none; }
}
:root[data-theme="dark"] .pl-cards .pl-item { box-shadow: none; }

/* ---------- the national poll cards (Services/PollCards.cs): every party as a chip with its logo, the top two facing ---------- */
.pl-bar--thin { height: 10px; margin: 12px 0 0; border-radius: 999px; }
.pl-bar--thin > span { box-shadow: inset -2px 0 0 var(--surface, #fff); }
.pl-chips { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 6px; }
.pl-chips li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 8px; border-radius: 8px;
    background: color-mix(in srgb, var(--pc) 7%, var(--surface, #fff)); border: 1px solid color-mix(in srgb, var(--pc) 24%, transparent); font: 600 12.5px/1.2 var(--font-ui); }
.pl-chips li > span:not(.party-logo):not(.avatar) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2, #3a3f47); }
.pl-chips li b { flex: none; font: 800 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink); }
.pl-chips li.pl-chip--top { background: var(--pc); border-color: var(--pc); }
.pl-chips li.pl-chip--top > span:not(.party-logo):not(.avatar), .pl-chips li.pl-chip--top b { color: #fff; }
.pl-chips .party-logo { flex: none; display: inline-grid; place-items: center; padding: 1px 3px; border-radius: 4px; background: #fff; line-height: 0; }
.pl-chips .party-logo img { max-height: 15px; width: auto !important; height: auto !important; max-width: 40px; }
.pl-chips .avatar { --s: 22px; }
.pl-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pl-extra { margin: 8px 0 0; font: 500 12.5px/1.4 var(--font-ui); color: var(--muted); }
.pl-multi .pl-head .grade { flex: none; }
.avatar.pl-dotmark .frame { display: grid; place-items: center; }
.avatar.pl-dotmark .frame i { width: 46%; height: 46%; border-radius: 50%; }
@media (max-width: 760px) {
    .pl-multi .pl-pill { display: inline-block; flex: none; margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--pc, var(--ink)); color: #fff;
        font: 750 12.5px/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .pl-multi .pl-head .pl-side { display: none; }
    .pl-chips { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
@media (min-width: 761px) {
    .pl-cards .pl-multi .pl-head { grid-template-areas: "kick pill" "race pill"; }
    .pl-cards .pl-kick .grade { transform: scale(.85); transform-origin: left center; }
}
@media (max-width: 760px) { .pl-multi .pl-kick:not(:empty) { display: inline-flex; flex: none; order: 2; } .pl-multi .pl-pill { order: 3; } .pl-multi .pl-head > a { order: 1; } }
.pl-kick:empty { display: none !important; }

/* ---------- tags: what a page adds to a card (owner, 15 Oct 2026: "All the polling listings need to be like the /us/polls version")
   The battleground's effect on the forecast and the race's chance now, a race page's adjusted margin and weight, the area of a
   regional poll: one small pill each under the card, the same on the US and the national cards, on a phone and a wide screen. */
.pl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.pl-tag { display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--hair);
    background: var(--b2, #f4f5f7); font: 600 12.5px/1.25 var(--font-ui); color: var(--ink-2, #3a3f47); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tag small { font: 600 11px/1.25 var(--font-ui); color: var(--muted); letter-spacing: .01em; }
.pl-tag b { font-weight: 750; font-variant-numeric: tabular-nums; }
.pl-tag--side { background: color-mix(in srgb, var(--tc) 8%, var(--surface, #fff)); border-color: color-mix(in srgb, var(--tc) 30%, transparent); }
.pl-tag--side b { color: var(--tc); }
a.pl-tag--link { text-decoration: none; color: var(--ink-2, #3a3f47); }
a.pl-tag--link:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--hair)); color: var(--ink); }
@media (max-width: 760px) { .pl-tags { margin-top: 8px; } .pl-tag { font-size: 12px; } }
/* the US party marks are discs themselves (DNC "D", RNC disc, since 15 Oct 2026): they fill the frame instead of sitting inside
   a second ring */
.avatar.pl-mark--disc .frame { background: transparent; border-color: transparent; }
.avatar.pl-mark--disc .frame img { width: 100%; height: 100%; object-fit: contain; }

/* the fronts' latest-polls bands (Snippets/_LatestPolls): three cards to a row on a wide screen, the country and date in
   the badge (owner, 16 Oct 2026: the colourful latest polls high up on the fronts) */
@media (min-width: 761px) {
    .pl-list.pl-cards.pl-cards--band { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); margin-bottom: 0; }
}
.pl-cards--band .pl-kick .sn-flag { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.pl-cards--band .pl-kick .sn-flag img { width: 18px; height: 12px; display: block; }
@media (max-width: 760px) {
    .pl-list.pl-cards--band { display: grid; gap: 12px; }
}
/* three to a row the face row has no room for the names (they are in the chips below): faces and figures only */
@media (min-width: 761px) {
    .pl-cards--band .pl-vs--duo .pl-c__who { display: none; }
    .pl-cards--band .pl-c__n { font-size: 28px; }
    .pl-cards--band .pl-vs__v { flex: none; }
}
/* phones: the newest four, the rest a tap away on the poll pages */
@media (max-width: 760px) { .pl-cards--band > .pl-item:nth-child(n+5) { display: none; } }