/* embed.css — graphic.html?embed=…: one graphic of the hub in a white card, with its title, the count's box beside it and the credit.
   Nothing here applies to the page without ?embed= (html.ehx-on). The card's own white space: 20px (16px on phones) inside a hairline. */
html.ehx-on,html.ehx-on body{margin:0;padding:0;background:transparent}
html.ehx-on #dm-eh{background:#fff;border:1px solid #D4D4D4;border-radius:10px;padding:20px 22px 0;margin:0;max-width:none}
@media (max-width:480px){html.ehx-on #dm-eh{padding:16px 16px 0}}
/* opened on its own (the link in a browser tab): the card on the library's grey */
html.ehx-top body{background:#F2F2F2;padding:24px 16px 40px}
html.ehx-top #dm-eh{max-width:1100px;margin:0 auto}
html.ehx-on #dm-eh > :not(.eh-hero):not(.eh-tabs-sec):not(.mf-modal):not(.ehx-headrow):not(.ehx-coal):not(.ehx-note):not(.ehx-foot){display:none!important}
/* a map comes in once the hub has drawn it and its first redrawing is over (embed-boot.js: html.ehx-hold; embed.js adds html.ehx-in) */
html.ehx-hold #dm-eh > .eh-hero,html.ehx-hold #dm-eh > .eh-tabs-sec{transition:opacity .25s ease}
html.ehx-hold:not(.ehx-in) #dm-eh > .eh-hero,html.ehx-hold:not(.ehx-in) #dm-eh > .eh-tabs-sec{opacity:0}
html.is-snap #dm-eh > .eh-hero,html.is-snap #dm-eh > .eh-tabs-sec{opacity:1!important;transition:none!important}
@media (prefers-reduced-motion:reduce){html.ehx-hold #dm-eh > .eh-hero,html.ehx-hold #dm-eh > .eh-tabs-sec{transition:none}}

/* the head: the title on the left, the count's box on the right */
html.ehx-on #dm-eh .ehx-headrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);align-items:center;column-gap:24px;margin:0 0 20px}
html.ehx-on #dm-eh .ehx-head{min-width:0;margin:0}
html.ehx-on #dm-eh .ehx-head .k{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 5px;font:700 13px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:#414343}
html.ehx-on #dm-eh .ehx-head .t{display:block;margin:0;font:700 34px/1.12 var(--font-display);letter-spacing:.005em;color:#171717;text-wrap:balance}
@media (max-width:480px){html.ehx-on #dm-eh .ehx-head .t{font-size:28px}}
html.ehx-on #dm-eh .ehx-tag{display:inline-block;padding:2px 6px 1px;border-radius:3px;background:#171717;color:#fff;font:700 10px/1.4 var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
html.ehx-on #dm-eh .ehx-tag[hidden]{display:none}
html.ehx-on #dm-eh .ehx-head .k[hidden]{display:none}
/* v3.7 · the Coalition builder: its title is the hub's question, Who can build a coalition in <council>?, in DM Custom with no kicker */
html.ehx-on[data-embed="coalition"] #dm-eh .ehx-head .t{font-size:29px;line-height:1.1}
@media (max-width:480px){html.ehx-on[data-embed="coalition"] #dm-eh .ehx-head .t{font-size:21px;line-height:1.12}}

/* where the count stands, in the hub's count box (post-elections v30: its masthead's three states, its results tabs' box). Counting in red,
   with the share of voting districts counted, its bar and the voting districts; Count complete in charcoal, the results provisional until
   declared; Results declared in green, with the day. The box's look is the hub's own (.mf-decl in its stylesheet); here its size, and
   the states the hub has no box for, in grey: loading, no votes counted yet, no answer from the feed. Every state the same height. */
html.ehx-on #dm-eh .ehx-status{min-width:0;display:flex}
html.ehx-on #dm-eh .ehx-status > .mf-decl{flex:1 1 auto;min-width:0;min-height:74px;align-content:center}
html.ehx-on #dm-eh .ehx-status > .ehx-done{justify-items:center;gap:5px;padding:8px 11px 9px;text-align:center}
html.ehx-on #dm-eh .ehx-status > .ehx-done .sub{font-size:11px;text-wrap:balance}
html.ehx-on #dm-eh .ehx-status > .mf-decl.is-prov{background:#181818}
html.ehx-on #dm-eh .ehx-status > .mf-decl.is-idle{background:#F2F2F2}
html.ehx-on #dm-eh .ehx-status > .mf-decl.is-idle .st{color:#414343}
html.ehx-on #dm-eh .ehx-status > .mf-decl.is-idle .sub{color:#6B6C6D}
/* phones: the title and the box side by side, half each (the hub's area dropdown and count box, v23). In the red box, compact: the status
   and the share on one line, the bar the box's full width under them, then the voting districts. Narrow phones: the line's type smaller */
@media (max-width:480px){
html.ehx-on #dm-eh .ehx-headrow{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
html.ehx-on #dm-eh .ehx-status > .mf-decl{min-height:64px;container-type:inline-size}
html.ehx-on #dm-eh .ehx-status > .is-live{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"st pct" "trk trk" "sub sub";align-items:center;gap:5px 6px;padding:8px 10px}
html.ehx-on #dm-eh .ehx-status > .is-live .mf-decl-row{display:contents}
html.ehx-on #dm-eh .ehx-status > .is-live .st{grid-area:st;font-size:clamp(9px,calc(100cqw / 13),10.5px)}
html.ehx-on #dm-eh .ehx-status > .is-live .mf-decl-row > b{grid-area:pct;font-size:clamp(13px,calc(100cqw / 9.6),15px)}
html.ehx-on #dm-eh .ehx-status > .is-live .trk{grid-area:trk}
html.ehx-on #dm-eh .ehx-status > .is-live .sub{grid-area:sub;text-align:center;font-size:10.5px;line-height:1.25;text-wrap:balance}
html.ehx-on #dm-eh .ehx-status > .ehx-done{padding:9px 10px}
html.ehx-on #dm-eh .ehx-status > .ehx-done .st{min-width:0;font-size:clamp(9px,calc((100cqw - 13px) / 11),10.5px);white-space:normal;text-wrap:balance}
}

/* the credit: the link to the hub (its address in an image), the masthead on the right (the hub's 2026 masthead, the red line through the wings) */
html.ehx-on #dm-eh .ehx-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0 0;padding:12px 0 14px;border-top:1px solid #E9E9E9;font:400 11px/1.4 var(--font-ui);color:#6B6C6D}
html.ehx-on #dm-eh .ehx-foot .lnk{flex:0 1 auto;min-width:0}
html.ehx-on #dm-eh .ehx-foot a.more{color:#171717;font-weight:600;text-decoration:underline;text-decoration-color:#D4D4D4;text-underline-offset:3px}
html.ehx-on #dm-eh .ehx-foot a.more:hover{color:#CA2828;text-decoration-color:currentColor}
html.ehx-on #dm-eh .ehx-foot .logo{flex:none;display:block;line-height:0}
html.ehx-on #dm-eh .ehx-foot .logo img{display:block;height:28px;width:auto}
@media (max-width:600px){html.ehx-on #dm-eh .ehx-foot{gap:10px}html.ehx-on #dm-eh .ehx-foot .logo img{height:20px}}
@media (max-width:350px){html.ehx-on #dm-eh .ehx-foot .logo img{height:17px}}
html.ehx-on #dm-eh .ehx-foot .url{display:none}
html.is-snap #dm-eh .ehx-foot a.more{display:none}
html.is-snap #dm-eh .ehx-foot .url{display:inline}
/* v3.8 · the note on the ballots, over the credit, on the graphics of the full count (embed.js; a metro's names its two ballots) */
html.ehx-on #dm-eh .ehx-note{margin:16px 0 0;padding:0;font:400 11.5px/1.45 var(--font-ui);color:#5e574e;text-wrap:pretty}
html.ehx-on #dm-eh .ehx-note[hidden]{display:none}
html.ehx-on #dm-eh .ehx-note:not([hidden]) + .ehx-foot{margin-top:12px}
@media (max-width:480px){html.ehx-on #dm-eh .ehx-note{font-size:10.5px}}

/* ---- South Africa and the provinces: one tab's panel, without the tabs and the area dropdown over them ---- */
html.ehx-nat #dm-eh .eh-hero{display:none!important}
html.ehx-nat #dm-eh .eh-tabs-sec{padding:0!important;margin:0;border:0!important}
html.ehx-nat #dm-eh .eh-tabs-sec .eh-wrap{padding:0!important;max-width:none}
html.ehx-nat #dm-eh .eh-tabs-head,html.ehx-nat #dm-eh #res-state,html.ehx-nat #dm-eh .res-preview{display:none!important}
html[data-embed="map"] #dm-eh #res-tbl,html[data-embed="turnout"] #dm-eh #res-tbl{display:none!important}
html[data-embed="support"] #dm-eh #res-tbl,html[data-embed="support"] #dm-eh #res-map{display:none!important}
html[data-embed="support"] #dm-eh #eh-res .res-grid{display:block!important}
html[data-embed="table"] #dm-eh #eh-res .res-grid{display:none!important}
html[data-embed="table"] #dm-eh #res-tbl > .res-h3:first-child{display:none!important}
html[data-embed="hung"][data-view="map"] #dm-eh .hm-rest{display:none!important}
html[data-embed="hung"][data-view="list"] #dm-eh .hm-grid{display:none!important}
html[data-embed="cmp"] #dm-eh #eh-cmp-body > :not([data-ehx="1"]){display:none!important}
html[data-embed="cmp"] #dm-eh #eh-cmp-body > .cmp-sec{display:none!important}

/* ---- a council: the municipal file alone, without the search box ---- */
html.ehx-muni #dm-eh .eh-tabs-sec{display:none!important}
html.ehx-muni #dm-eh .eh-hero{padding:0!important;background:none}
html.ehx-muni #dm-eh .eh-hero-inner{display:block!important;padding:0!important;max-width:none}
html.ehx-muni #dm-eh .mf-widget{border:0!important;max-width:none;background:none}
html.ehx-muni #dm-eh .mf-search,html.ehx-muni #dm-eh .mf-stories,html.ehx-muni #dm-eh #mf-ward-share,html.ehx-muni #dm-eh .mf-ward-help,html.ehx-muni #dm-eh .wg-acts,html.ehx-muni #dm-eh .mf-wa{display:none!important}
/* v3.5 · Share on WhatsApp in the interactive ward graphics (Ward result, All ward results with finder): the hub's button in the ward box, to the right of the winner or the leader, as on the hub; on phones under them, over the source line (the hub has it over its ward dropdown there). embed.js points its link at the ward on the hub. Not in a still graphic. */
html.ehx-muni:not(.ehx-still)[data-embed="ward"] #dm-eh #mf-wardgov .wg-acts,html.ehx-muni:not(.ehx-still)[data-embed="wardpick"] #dm-eh #mf-wardgov .wg-acts{display:flex!important}
@media (max-width: 640px){html.ehx-muni[data-embed="ward"] #dm-eh #mf-wardgov .wg-acts,html.ehx-muni[data-embed="wardpick"] #dm-eh #mf-wardgov .wg-acts{align-items:flex-start;width:auto}html.ehx-muni[data-embed="ward"] #dm-eh #mf-wardgov .wg-acts .mf-wa-btn,html.ehx-muni[data-embed="wardpick"] #dm-eh #mf-wardgov .wg-acts .mf-wa-btn{width:auto;gap:16px}html.ehx-muni[data-embed="ward"] #dm-eh #mf-wardgov .wg-acts + .wg-src,html.ehx-muni[data-embed="wardpick"] #dm-eh #mf-wardgov .wg-acts + .wg-src{margin-top:14px}}
html.ehx-muni #dm-eh .mf-file-inner-body{padding:0!important}
html.ehx-muni #dm-eh .mf-file-body{display:block}
html.ehx-muni #dm-eh .mf-file-left{max-width:none;width:auto}
html.ehx-muni #dm-eh .mf-ward{padding-top:0!important;margin-top:0}
html.ehx-muni #dm-eh .mf-file-banner{display:none!important}
html[data-embed="seats"] #dm-eh .mf-res-tbl,html[data-embed="coalition"] #dm-eh .mf-res-tbl,html[data-embed="seats"] #dm-eh .mf-ward,html[data-embed="coalition"] #dm-eh .mf-ward{display:none!important}
html[data-embed="votes"] #dm-eh .mf-res-seats,html[data-embed="votes"] #dm-eh .mf-ward{display:none!important}
html[data-embed="wards"] #dm-eh #mf-file-body,html[data-embed="wards"] #dm-eh .mf-ward > :not(.mf-wmap--res),html[data-embed="wards"] #dm-eh .mf-wm-tabs{display:none!important}
html[data-embed="wards"] #dm-eh .mf-wm-panel{border:0;border-radius:0;padding:0 0 4px}
/* the key under the map at every width (embed-boot.js X.wmStack): the view is fixed, so only its own facts take room, as on a phone */
html[data-embed="wards"] #dm-eh .mf-wm-grid:not(.has-side) .mf-wm-side{position:relative}html[data-embed="wards"] #dm-eh .mf-wm-grid:not(.has-side) .mf-wm-pane:not(.is-on){position:absolute;top:0;left:0;right:0}
html[data-embed="ward"] #dm-eh #mf-file-body,html[data-embed="ward"] #dm-eh #mf-ward-row,html[data-embed="ward"] #dm-eh .mf-wmap{display:none!important}
/* Ward result with ward finder: the hub's ward dropdown with its Use my location beside it (embed.js moves the button here); phones: under it */
html[data-embed="wardpick"] #dm-eh #mf-file-body,html[data-embed="wardpick"] #dm-eh .mf-wmap{display:none!important}
html[data-embed="wardpick"] #dm-eh .ehx-wfind{display:flex;align-items:stretch;gap:10px;margin:0 0 18px}
html[data-embed="wardpick"] #dm-eh .ehx-wfind > .mf-ward-row{flex:1 1 auto;min-width:0}
html[data-embed="wardpick"] #dm-eh .ehx-wfind > .mf-locate{flex:none;width:auto;height:auto;min-height:56px;padding:0 18px 0 15px;border-radius:4px;font-size:14px}
html[data-embed="wardpick"] #dm-eh .ehx-wfind > .mf-locate[hidden]{display:none}
html[data-embed="wardpick"] #dm-eh .mf-loc-msg,html[data-embed="wardpick"] #dm-eh .ehx-wnote{max-width:none;margin:-8px 0 18px;font-family:var(--font-ui);font-size:13.5px;line-height:1.45;color:var(--dm-ink-2);text-wrap:pretty}
html[data-embed="wardpick"] #dm-eh .ehx-wnote b{color:var(--dm-ink-1)}
html[data-embed="wardpick"] #dm-eh .ehx-wnote a{color:var(--dm-blue);font-weight:700;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
@media (max-width:480px){html[data-embed="wardpick"] #dm-eh .ehx-wfind{flex-direction:column;gap:8px}html[data-embed="wardpick"] #dm-eh .ehx-wfind > .mf-locate{width:100%;min-height:48px}}

/* ---- Coalition builder (library v2.1): one line on what a coalition takes with Start again beside it, then the council's half circle, the
   tally in its middle, and the parties to pick. None of the municipal file's own parts around it: the Hung council banner, the box and its
   status tag (the count's box says it), Who can build a coalition in <council>? and Back to results ---- */
html.ehx-on #dm-eh .ehx-coal{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 4px}
html.ehx-on #dm-eh .ehx-coal[hidden]{display:none}
html.ehx-on #dm-eh .ehx-coal-t{flex:1 1 auto;min-width:0;max-width:640px;margin:0;font:400 15px/1.45 var(--font-ui);color:#414343;text-wrap:pretty}
html.ehx-on #dm-eh .ehx-coal-t b{font-weight:600;color:#171717}
html.ehx-on #dm-eh .ehx-coal-clr{flex:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-6px 0 0;padding:0;border:1px solid #171717;border-radius:4px;background:#fff;color:#171717;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
html.ehx-on #dm-eh .ehx-coal-clr::before{content:"";position:absolute;inset:-5px}
html.ehx-on #dm-eh .ehx-coal-clr[hidden]{display:none}
html.ehx-on #dm-eh .ehx-coal-clr svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
html.ehx-on #dm-eh .ehx-coal-clr:disabled{border-color:#D4D4D4;color:#9B9B9B;cursor:default}
@media (hover:hover){html.ehx-on #dm-eh .ehx-coal-clr:not(:disabled):hover{background:#171717;color:#fff}}
html.ehx-on #dm-eh .ehx-coal-clr:active:not(:disabled){background:#414343;border-color:#414343;color:#fff;transition-duration:0s}
html.ehx-on #dm-eh .ehx-coal-clr:focus-visible{outline:2px solid #D33D3D;outline-offset:2px}
/* v3.1 · a hung council: no line, Start again alone at the top right, in the Majority flag's room over the half circle, taking no room of its own */
html.ehx-on #dm-eh .ehx-coal.is-bare{position:relative;z-index:3;height:0;margin:0;justify-content:flex-end}
html.ehx-on #dm-eh .ehx-coal.is-bare .ehx-coal-clr{margin-top:0}
@media (max-width:480px){
html.ehx-on #dm-eh .ehx-coal{gap:12px}
html.ehx-on #dm-eh .ehx-coal-t{font-size:14px}
}
/* v3.1 · the half circle as large as the room allows at any council size (embed-fit.js: --ehx-fw its width, --ehx-kn and --ehx-kt the
   number's and the line in the hole's scale over the hub's, the line kept to 20px at most) */
html[data-embed="coalition"] #dm-eh .mf-res-board.ehx-sized .ehh-fig{width:min(100%,var(--ehx-fw))!important}
html[data-embed="coalition"] #dm-eh .mf-res-board.ehx-sized .ehh-mid{font-size:calc(48px * var(--ehx-kn))!important}
html[data-embed="coalition"] #dm-eh .mf-res-board.ehx-sized .ehh-tip{font-size:max(12px,calc(16px * var(--ehx-kt)))!important}
html[data-embed="coalition"] #dm-eh .eh-dl,html[data-embed="coalition"] #dm-eh .mf-seat-head,html[data-embed="coalition"] #dm-eh .mf-board-cap,html[data-embed="coalition"] #dm-eh .mf-v4-ag-head{display:none!important}
html[data-embed="coalition"] #dm-eh .mf-seat-box{margin:0;padding:0;border:0;border-radius:0;background:none}
/* the hub's rule over a section that follows its (hidden) note: no hairline and no room over the seats */
html[data-embed="coalition"] #dm-eh .mf-res-seats{margin-top:0!important;padding-top:0!important;border-top:0!important}
/* room over the half circle for the Majority flag, at every width and in every state, so nothing moves when a coalition reaches one */
html[data-embed="coalition"] #dm-eh .mf-seat-box .mf-res-board{margin:0 auto;padding-top:44px}
html[data-embed="coalition"] #dm-eh .mf-seat-box .mf-res-board .ehh-stage{margin-top:0!important}
/* the parties a little closer to each other than on the hub, 36px under the half circle (28px on a phone; v3.3), clear of the coalition's
   seats of the majority needed. v3.3: embed-fit.js breaks the rows (.ehx-br, a line of its own as tall as the gap between rows; --ehx-rg) */
html[data-embed="coalition"] #dm-eh .mf-coal-row{--ehx-rg:calc(10px * var(--ehx-kc,1));gap:var(--ehx-rg) calc(14px * var(--ehx-kc,1));margin-top:36px;padding-bottom:4px}
@media (max-width:640px){html[data-embed="coalition"] #dm-eh .mf-coal-row{--ehx-rg:calc(8px * var(--ehx-kc,1));gap:var(--ehx-rg) calc(12px * var(--ehx-kc,1));margin-top:28px;padding-bottom:2px}}
html[data-embed="coalition"] #dm-eh .mf-coal-row[data-ehx-bal]{row-gap:0}
html[data-embed="coalition"] #dm-eh .mf-coal-row > .ehx-br{flex:0 0 100%;height:var(--ehx-rg);margin:0;padding:0}
/* v3.2 · the parties' buttons as large as the room under the half circle allows (embed-fit.js: --ehx-kc, 1.8 times the hub's at most) */
html[data-embed="coalition"] #dm-eh .mf-coal-row .mf-cp{zoom:var(--ehx-kc,1)}
/* v3.7 · the article column: the parties beside the half circle, in as many columns as the room's height needs (embed-fit.js: .ehx-side on
   the seat box where that draws the half circle larger, --ehx-cc), under the Majority flag's room as the half circle is */
html[data-embed="coalition"] #dm-eh .mf-seat-box.ehx-side{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:28px}
html[data-embed="coalition"] #dm-eh .mf-seat-box.ehx-side > .mf-res-board{grid-column:1;grid-row:1;min-width:0;width:auto;margin:0}
html[data-embed="coalition"] #dm-eh .mf-seat-box.ehx-side > .mf-coal-row{grid-column:2;grid-row:1;display:grid!important;grid-template-columns:repeat(var(--ehx-cc,1),auto);align-content:center;justify-content:center;justify-items:center;gap:calc(12px * var(--ehx-kc,1)) calc(14px * var(--ehx-kc,1));width:auto;margin:0;padding:44px 0 0}
html[data-embed="coalition"] #dm-eh .mf-seat-box.ehx-side > .mf-coal-row > .ehx-br{display:none}

/* ---- no votes counted yet, or no answer from the feed: the count's box says so, the hub's own note under it would repeat it ---- */
html.ehx-on[data-k="waiting"] #dm-eh .mf-res-msg,html.ehx-on[data-k="error"] #dm-eh .mf-res-msg,html.ehx-on[data-k="waiting"] #dm-eh #res-stand > .res-sub{display:none!important}
/* Votes by party has nothing else to show before the count: the hub's note stays, so the card is not blank */
html.ehx-on[data-k="waiting"][data-embed="votes"] #dm-eh .mf-res-msg{display:block!important;margin:4px 0 0;color:#6B6C6D}
html.ehx-on[data-k="waiting"] #dm-eh #mf-res,html.ehx-on[data-k="error"] #dm-eh #mf-res{min-height:0!important}

/* ---- while an image is taken: no controls that do nothing on paper ---- */
html.is-snap #dm-eh .res-zoom,html.is-snap #dm-eh .eh-hung-go,html.is-snap #dm-eh .mf-cb-side,html.is-snap #dm-eh .ehx-coal-clr,html.ehx-still #dm-eh .res-zoom,html.ehx-still #dm-eh .eh-hung-go,html.ehx-still #dm-eh .mf-cb-side{visibility:hidden}
html.is-snap #dm-eh .res-tip,html.is-snap #dm-eh .res-refresh,html.is-snap #dm-eh .mf-res-more{display:none!important}

/* ---- Still graphics (&mode=still, the library's PNG images): the card as tall as everything in it, nothing that needs a pointer (no
   tooltips, no ? buttons, no rows that open), every party in every list; the time of the figures over the count's box, their source in the credit ---- */
html.ehx-still #dm-eh{pointer-events:none}
html.ehx-still #dm-eh .res-tip,html.ehx-still #dm-eh .res-refresh,html.ehx-still #dm-eh .mf-res-more,html.ehx-still #dm-eh .mf-wm-tip,html.ehx-still #dm-eh .cs-info,html.ehx-still #dm-eh .cs-info-pop{display:none!important}
/* v3.4 · party support as on the hub: the five largest parties, then Others (the rest together), shut */
html.ehx-still #dm-eh .res-stand .res-ps tbody tr.is-oth{display:none}
html.ehx-still #dm-eh .res-stand .res-ps .oth-chev{display:none}
html.ehx-still #dm-eh .ehx-foot{align-items:flex-end}
html.ehx-still #dm-eh .ehx-foot .lnk{display:flex;flex-direction:column;gap:3px}
html.ehx-still #dm-eh .ehx-foot a.more{display:none}
/* v3.9 · the time of the figures (or what they are: the sample, 2021) over the count's box and larger: Figures as at in small capitals, then
   the time and the day in bold. The box a little smaller under it (64px high, its figures smaller), as wide as the time and 220px at least, the
   two centred on each other at the card's right edge. Phones: the half of the head the box had, the time on two lines */
html.ehx-still #dm-eh .ehx-side{min-width:0;display:flex;flex-direction:column;gap:9px}
html.ehx-still #dm-eh .ehx-asat{margin:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;color:#171717}
html.ehx-still #dm-eh .ehx-asat:empty{display:none}
html.ehx-still #dm-eh .ehx-asat .l{font:700 11px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:#414343}
html.ehx-still #dm-eh .ehx-asat .v{font:700 17px/1.25 var(--font-ui);letter-spacing:-.005em;font-variant-numeric:tabular-nums;text-wrap:balance}
html.ehx-still #dm-eh .ehx-asat .v > span{white-space:nowrap}
html.ehx-still #dm-eh .ehx-asat .v.is-note{font-size:14px;line-height:1.3}
@media (min-width:481px){
html.ehx-still #dm-eh .ehx-headrow{grid-template-columns:minmax(0,1fr) fit-content(264px)}
html.ehx-still #dm-eh .ehx-status{min-width:220px}
html.ehx-still #dm-eh .ehx-status > .mf-decl{min-height:64px;padding:8px 14px;gap:6px}
html.ehx-still #dm-eh .ehx-status > .mf-decl b{font-size:18px}
html.ehx-still #dm-eh .ehx-status > .mf-decl .sub{font-size:11px}
html.ehx-still #dm-eh .ehx-status > .ehx-done{gap:4px;padding:8px 11px}
}
@media (max-width:480px){html.ehx-still #dm-eh .ehx-side{gap:8px}html.ehx-still #dm-eh .ehx-asat .l{font-size:10px}html.ehx-still #dm-eh .ehx-asat .v{font-size:14px}html.ehx-still #dm-eh .ehx-asat .v.is-note{font-size:12px}}
html.ehx-still #dm-eh .ehx-foot .url{display:inline}
/* ---- v3.4 · still graphics, shorter and never cut off ---- */
/* no list scrolls sideways in an image; the arrows that open a council (Results by council, Change since 2021: councils) do nothing on paper */
html.ehx-still #dm-eh :is(.mf-res-tw,.res-tw){overflow:visible}
/* the hub keeps room under a list's rows for a row that rises under the pointer and takes it back with a negative margin; an image's copy
   lays that out a little lower, and the credit's foot came out cut off. A still has neither (its rows never rise) */
html.ehx-still #dm-eh .mf-res-tw{margin-top:0;margin-bottom:0;padding-bottom:0}
html.ehx-still #dm-eh .mf-res-tbl .mf-res-tw{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
@media (min-width:641px){html.ehx-still #dm-eh .mf-res-tbl .mf-res-tw{padding-left:13px;padding-right:13px}}
html.ehx-still #dm-eh .res-table .go{display:none}
/* Votes by party: one line a party. The ward and PR split under a bar shows only on a row the pointer opens; unseen, it still took its
   room, widening the share column past the card (the bar to scroll it sideways, the seats cut off) and making every row taller */
html.ehx-still #dm-eh .mf-res-tbl .mf-res-table :is(.shs,.shk){display:none}
html.ehx-still #dm-eh .mf-res-tbl .mf-res-table .shw{transform:none}
html.ehx-still #dm-eh .mf-res-tbl .mf-res-table tbody th.p{white-space:normal}
/* the rows left out of a list (embed.js: Votes by party keeps every party with seats on the council, a ward's result the candidates of
   those parties and any other with 5% of the ward's votes), and the row that puts them together, Others, with how many it holds */
html.ehx-still #dm-eh .mf-res-table tbody tr.ehx-cut{display:none!important}
html.ehx-still #dm-eh .mf-res-table tbody tr.ehx-oth .pn{display:flex;flex-direction:column;min-width:0}
html.ehx-still #dm-eh .mf-res-table tbody tr.ehx-oth .pn span.ehx-n{display:block;margin-top:2px;font-size:12.5px;line-height:1.2;color:#5e574e;white-space:nowrap}
/* Hung councils, the list: one line a council (its name, the largest party, the seats it is short of a majority) under its province. The
   tag (Provisional, Declared) only where the list has both (embed.js: .ehx-hmix): otherwise the count's box says it for every council */
html.ehx-still #dm-eh .eh-hung-h3{margin:28px 0 8px;font-size:22px}
html.ehx-still #dm-eh .eh-hung-pv:first-child > .eh-hung-h3{margin-top:0}
html.ehx-still #dm-eh .eh-hung-list{border-top:0}
html.ehx-still[data-embed="hung"][data-view="list"] #dm-eh .hm-rest{margin-top:0}
html.ehx-still #dm-eh :is(.eh-hung-hd,.eh-hung-list > .eh-hung-row){display:grid;grid-template-columns:minmax(0,1fr) 112px 158px;align-items:baseline;gap:3px 12px}
html.ehx-still #dm-eh .eh-hung-hd{align-items:end;padding:0 0 8px;border-bottom:1px solid #181818;white-space:normal}
html.ehx-still #dm-eh .eh-hung-hd > span:nth-child(2),html.ehx-still #dm-eh .eh-hung-hd > span:nth-child(5){display:none}
html.ehx-still #dm-eh .eh-hung-hd > span:nth-child(4){text-align:right}
html.ehx-still #dm-eh .eh-hung-list > .eh-hung-row{padding:7px 0;font-size:14.5px}
html.ehx-still #dm-eh .eh-hung-row::before{content:none}
html.ehx-still #dm-eh .eh-hung-row > .eh-hung-nm{grid-column:1;grid-row:1;display:block}
html.ehx-still #dm-eh .eh-hung-row > .eh-hung-lead{grid-column:2;grid-row:1}
html.ehx-still #dm-eh .eh-hung-row > .eh-hung-need{grid-column:3;grid-row:1;text-align:right}
html.ehx-still #dm-eh .eh-hung-row .eh-hung-need .k{display:none}
html.ehx-still #dm-eh .eh-hung-row > :is(.eh-hung-go,.eh-hung-st){display:none}
html.ehx-still #dm-eh .eh-hung-body.ehx-hmix .eh-hung-row > .eh-hung-st{display:inline-flex;grid-column:1;grid-row:2;justify-self:start}
@media (max-width:480px){
html.ehx-still #dm-eh :is(.eh-hung-hd,.eh-hung-list > .eh-hung-row){grid-template-columns:minmax(0,1fr) 88px 62px;gap:3px 8px}
html.ehx-still #dm-eh .eh-hung-hd > span:nth-child(4){font-size:0}
html.ehx-still #dm-eh .eh-hung-hd > span:nth-child(4)::after{content:"Short";font-size:11px}
}
/* Change since 2021, the maps: 2021 and 2026 side by side from 480px wide, as in the embed (the hub stacks them under 861px) */
@media (min-width:480px){
html.ehx-still #dm-eh .eh-cmp-body > .res-grid.cmp-maps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:0;align-items:start}
html.ehx-still #dm-eh .cmp-maps > .cmp-map > .res-map-head{margin-top:2px!important}
}
/* ---- Council seats: the box with its status tag (Provisional, Declared) and the council's half circle, none of the coalition builder (Who
   can build a coalition in <council>?, the Hung council banner); under it every party with seats, its votes and its seats (embed.js), as
   wide as the half circle at its widest. The embed code is as tall as they need (library.js, v3.7); in a frame short of them they scroll under
   their headings (embed-fit.js); in a still graphic every row shows ---- */
html[data-embed="seats"] #dm-eh .mf-cb-side,html[data-embed="seats"] #dm-eh .eh-dl,html[data-embed="seats"] #dm-eh .mf-coal-row{display:none!important}
html[data-embed="seats"] #dm-eh .eh-dl + .mf-seat-box{margin-top:0}
/* the hub keeps room over a hung council's half circle on a phone for the Majority flag of a coalition; there is no coalition here */
html[data-embed="seats"] #dm-eh .mf-seat-box .mf-res-board.can-coal .ehh-stage{margin-top:0!important}
html[data-embed="seats"] #dm-eh .ehx-seats{--sx:154px;max-width:640px;margin:16px auto 0;text-align:left;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:14.5px;line-height:1.3;color:#171717;font-variant-numeric:tabular-nums}
/* v3.7 · four columns: the party, its votes as a bar split by ballot with the figures under it, its votes, its seats. The party, the votes
   and the seats stand on the bar's line; the figures run on under the votes and the seats where they need the room (--sx: those columns and
   their gaps), so a row is two lines at every width and the graphic about as tall on a phone as in the article column */
html[data-embed="seats"] #dm-eh .ehx-seats-r{display:grid;grid-template-columns:minmax(72px,120px) minmax(0,1fr) 78px 48px;column-gap:14px;align-items:start}
html[data-embed="seats"] #dm-eh .ehx-seats-h .ehx-seats-r{align-items:end;padding:0 8px 9px;border-bottom:3px solid #181818;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5e574e;white-space:nowrap}
html[data-embed="seats"] #dm-eh .ehx-seats-b .ehx-seats-r{padding:calc(10px + var(--ehx-rp,0px)) 8px calc(9px + var(--ehx-rp,0px));border-bottom:1px solid var(--dm-grey-1,#e3e3e3)}
html[data-embed="seats"] #dm-eh .ehx-seats-b .ehx-seats-r > :is(.p,.n){min-height:18px;line-height:18px}
html[data-embed="seats"] #dm-eh .ehx-seats .n{text-align:right;white-space:nowrap}
html[data-embed="seats"] #dm-eh .ehx-seats .p{display:flex;align-items:center;gap:10px;min-width:0}
html[data-embed="seats"] #dm-eh .ehx-seats .p i{flex:none;width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
html[data-embed="seats"] #dm-eh .ehx-seats .p b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
html[data-embed="seats"] #dm-eh .ehx-seats .v{color:#4a443c}
html[data-embed="seats"] #dm-eh .ehx-seats .s{font-weight:700}
/* the bar, the hub's: ward votes solid, PR hatched, district dotted, 2px apart; the figures under it */
html[data-embed="seats"] #dm-eh .ehx-seats .b{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
html[data-embed="seats"] #dm-eh .ehx-seats .bar{display:flex;gap:2px;height:18px;min-width:3px;border-radius:5px;overflow:hidden;box-shadow:0 1.5px 1px rgba(23,23,23,.24)}
html[data-embed="seats"] #dm-eh .ehx-seats .bar i{flex:0 1 0%;min-width:0;height:100%}
html[data-embed="seats"] #dm-eh .ehx-seats :is(.bar,.k) :is(i.w,i.a){background:var(--c)}
html[data-embed="seats"] #dm-eh .ehx-seats :is(.bar,.k) i.l{background:repeating-linear-gradient(-45deg,var(--c) 0 2.5px,transparent 2.5px 6.5px);box-shadow:inset 0 0 0 1px var(--c)}
html[data-embed="seats"] #dm-eh .ehx-seats :is(.bar,.k) i.d{background:radial-gradient(circle,var(--c) 1.4px,transparent 1.8px) 0 0/5px 5px;box-shadow:inset 0 0 0 1px var(--c)}
html[data-embed="seats"] #dm-eh .ehx-seats .sp{align-self:stretch;display:flex;flex-wrap:wrap;gap:2px 0;margin-right:calc(-1 * var(--sx));font-size:11.5px;line-height:1.3;color:#5e574e;white-space:nowrap}
html[data-embed="seats"] #dm-eh .ehx-seats .sp span + span::before{content:"\00b7";margin:0 7px;color:#b8b2a9}
/* the key, over the bars */
html[data-embed="seats"] #dm-eh .ehx-seats .k{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;letter-spacing:.06em}
html[data-embed="seats"] #dm-eh .ehx-seats .k span{display:inline-flex;align-items:center;gap:5px}
html[data-embed="seats"] #dm-eh .ehx-seats .k i{--c:#181818;display:block;flex:none;width:10px;height:10px;border-radius:2px}
/* the bar's gutter beside the rows (embed-fit.css): the headings keep over their columns */
html[data-embed="seats"] #dm-eh .ehx-seats:has(> .ehx-seats-b[data-ehx-sc]) > .ehx-seats-h{padding-right:22px}
@media (max-width:640px){
html[data-embed="seats"] #dm-eh .ehx-seats{--sx:124px;margin-top:14px;font-size:14px}
html[data-embed="seats"] #dm-eh .ehx-seats-r{grid-template-columns:minmax(60px,96px) minmax(0,1fr) 68px 36px;column-gap:10px}
html[data-embed="seats"] #dm-eh .ehx-seats-h .ehx-seats-r{padding:0 5px 8px}
html[data-embed="seats"] #dm-eh .ehx-seats-b .ehx-seats-r{padding:calc(9px + var(--ehx-rp,0px)) 5px calc(8px + var(--ehx-rp,0px))}
html[data-embed="seats"] #dm-eh .ehx-seats .v{font-size:13px}
}
/* a phone: the columns closer, the key on a line of its own over the headings */
@media (max-width:480px){
html[data-embed="seats"] #dm-eh .ehx-seats{--sx:98px}
html[data-embed="seats"] #dm-eh .ehx-seats-r{grid-template-columns:minmax(56px,92px) minmax(0,1fr) 56px 26px;column-gap:8px}
html[data-embed="seats"] #dm-eh .ehx-seats .p{gap:7px}
html[data-embed="seats"] #dm-eh .ehx-seats .p i{width:10px;height:10px}
html[data-embed="seats"] #dm-eh .ehx-seats .p b{font-size:13.5px}
html[data-embed="seats"] #dm-eh .ehx-seats .sp{font-size:11px}
html[data-embed="seats"] #dm-eh .ehx-seats-h .ehx-seats-r{row-gap:8px}
html[data-embed="seats"] #dm-eh .ehx-seats-h .ehx-seats-r > .k{grid-column:1/-1;grid-row:1}
html[data-embed="seats"] #dm-eh .ehx-seats-h .ehx-seats-r > :not(.k){grid-row:2}
html[data-embed="seats"] #dm-eh .ehx-seats-h .ehx-seats-r > .p{grid-column:1/3}
html[data-embed="seats"] #dm-eh .ehx-seats-h .ehx-seats-r > .k:empty{display:none}
html[data-embed="seats"] #dm-eh .ehx-seats-h .ehx-seats-r:has(> .k:empty) > *{grid-row:auto}
}