/* Daily Maverick · Elections Hub 2026, post-elections v26 — stylesheet for the custom page (CMS build). Pair with elections-hub-post-v26.js and elections-hub-post-v26.html (one markup: the page picks its phase itself). v4's rules ("phases"), v5's ("coalition mode"), v6's ("hover"), v7's ("Results across South Africa, redesigned"), v8's ("the ward map"), v10's (the ward map's views), v11's (the two ward maps) and v13's (the councils by boundary) are at the end. Everything is scoped to #dm-eh (the wrapper in elections-hub.html), so nothing here restyles the rest of the site. Fonts: Charis SIL, Geist, Barlow and Archivo (v27, for the coalition builder) load from Google Fonts (delete the @import if the site already loads them); DM Custom loads from the Daily Maverick server (www.dailymaverick.co.za/fonts/dmcustom/), nothing is embedded. */ @import url("https://fonts.googleapis.com/css2?family=Charis+SIL:ital,wght@0,400;0,700;1,400&family=Geist:wght@100..900&family=Barlow:wght@400;600&family=Archivo:wdth,wght@87.5,700;100,500&display=swap"); @font-face { font-family: "DM Custom"; src: url("https://www.dailymaverick.co.za/fonts/dmcustom/DMCustomMar2026-V2-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } #dm-eh{--dm-red:#D33D3D;--dm-red-cta:#CA2828;--dm-blue:#1E71AF;--dm-green:#567B43;--dm-orange:#F37421;--dm-ink-1:#171717;--dm-ink-2:#292929;--dm-ink-3:#414343;--dm-ink-4:#6B6C6D;--dm-ink-5:#8F9193;--dm-grey-1:#E9E9E9;--dm-grey-2:#D4D4D4;--dm-grey-3:#F2F2F2;--dm-surface:#FFFFFF;--dm-cream:#F9F5EA;--font-display:"DM Custom", Georgia, serif;--font-serif:"Charis SIL", Georgia, "Times New Roman", serif;--font-ui:"Geist", "Helvetica Neue", Arial, sans-serif;--font-utility:"Helvetica Neue", Helvetica, Arial, sans-serif;margin:0;padding:0;background:var(--dm-surface);font-family:var(--font-ui);color:var(--dm-ink-1);-webkit-font-smoothing:antialiased;text-wrap:pretty} #dm-eh,#dm-eh *{box-sizing:border-box} #dm-eh a{color:inherit;text-decoration:none} #dm-eh .eh-mast-inner{margin:0 auto;padding:28px 64px 30px;display:grid;align-items:end} #dm-eh .eh-mast .count{text-align:right;border-left:1px solid rgba(255,255,255,0.18);padding:6px 0 6px 36px} #dm-eh .eh-mast .count .lbl{display:block;font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:6px} #dm-eh .eh-mast .count .n{font-family:var(--font-display);font-weight:700;line-height:0.9;letter-spacing:-0.01em} #dm-eh .eh-mast .count .when{font-family:var(--font-ui);font-size:13px;margin-top:6px;letter-spacing:0.04em} #dm-eh .eh-wrap{margin:0 auto;padding:0 64px} #dm-eh .eh-section{padding:60px 0 56px;border-bottom:1px solid var(--dm-grey-1)} #dm-eh .eh-sec-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;margin-bottom:28px;border-top:2px solid var(--dm-ink-1);padding-top:16px} #dm-eh .eh-sec-head.eh-sec-head-mb{border-top:none;margin-bottom:36px} #dm-eh .eh-sec-head-mb h2{font-size:40px} #dm-eh .eh-sec-head h2{margin:0;font-family:var(--font-display);font-size:36px;font-weight:700;letter-spacing:0.005em;line-height:1.06;color:var(--dm-ink-1)} #dm-eh .eh-hero{padding:64px 0 40px;background:#fff} #dm-eh .eh-hero-inner{margin:0 auto;padding:0 64px;display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:start} #dm-eh .eh-practical{background:#fff} #dm-eh .eh-prac-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:0} #dm-eh .eh-prac-card{padding:30px 28px 28px;border-right:1px solid var(--dm-grey-1);position:relative;cursor:pointer;transition:background 0.15s;display:flex;flex-direction:column;min-height:280px} #dm-eh .eh-prac-card:last-child{border-right:none} #dm-eh .eh-prac-card:hover{background:var(--dm-cream)} #dm-eh .eh-prac-card h3{margin:0 0 12px;font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.05;letter-spacing:0.005em;color:var(--dm-ink-1)} #dm-eh .eh-prac-card .q{font-family:var(--font-serif);font-style:italic;font-size:15px;line-height:1.4;color:var(--dm-ink-3);margin:0 0 14px} #dm-eh .eh-prac-card .q::before{content:"“"} #dm-eh .eh-prac-card .q::after{content:"”"} #dm-eh .eh-prac-card p{font-family:var(--font-serif);font-size:16px;line-height:1.55;color:var(--dm-ink-2);margin:0 0 18px} #dm-eh .eh-btn-ghost{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;border:1px solid;cursor:pointer;transition:transform 0.12s, box-shadow 0.12s, background 0.12s;background:#fff;border-color:var(--dm-ink-1);color:var(--dm-ink-1)} #dm-eh .eh-btn-ghost:hover{background:var(--dm-ink-1);color:#fff} #dm-eh .eh-feed-grid{display:grid;grid-template-columns:1fr 1fr} #dm-eh .eh-feed-card{display:flex;gap:16px;padding:13px 26px 13px 0;text-decoration:none;color:inherit} #dm-eh .eh-feed-card:nth-child(even){padding:13px 0 13px 26px} #dm-eh .eh-feed-card .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} #dm-eh .eh-feed-card .hl{font-family:var(--font-serif);font-size:16px;line-height:1.3;letter-spacing:-0.012em;color:var(--dm-ink-1)} #dm-eh .eh-feed-card .by{font-family:var(--font-utility);font-size:12.5px;color:var(--dm-ink-2);margin-top:7px} #dm-eh .eh-feed-card .thumb{flex:none;width:76px;height:76px;border-radius:2px;background:var(--dm-grey-1) center/cover no-repeat;transition:transform 0.16s ease, box-shadow 0.16s ease} #dm-eh .eh-feed-card:hover .thumb{transform:scale(1.12);box-shadow:0 6px 16px rgba(0,0,0,0.2)} #dm-eh .eh-vid-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px} #dm-eh .eh-vid{aspect-ratio:16 / 9;background:var(--dm-ink-1);border-radius:2px;overflow:hidden} #dm-eh .eh-vid iframe{display:block;width:100%;height:100%;border:0} @media (max-width: 860px){ #dm-eh .eh-feed-grid{grid-template-columns:1fr} #dm-eh .eh-feed-card,#dm-eh .eh-feed-card:nth-child(even){padding:13px 0;border-left:0} #dm-eh .eh-vid-grid{grid-template-columns:1fr} } #dm-eh .eh-practical .eh-prac-card{transition:transform 0.16s ease, box-shadow 0.16s ease;min-height:0;text-align:center} #dm-eh .eh-practical .eh-prac-card .q{margin-bottom:0} #dm-eh .eh-practical .eh-prac-card:hover{background:#fff;transform:scale(1.025);box-shadow:0 10px 30px rgba(0,0,0,0.12);position:relative;z-index:2} #dm-eh .mf-widget{border:1px solid var(--dm-ink-1);background:#fff;max-width:1180px} #dm-eh .mf-search{background:#f1f1f0;padding:30px 34px 28px} #dm-eh .mf-widget.is-result .mf-search{padding-bottom:22px;border-bottom:1px solid var(--dm-grey-1)} #dm-eh .mf-search-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:20px} #dm-eh .mf-search h3{margin:0 0 4px;font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--dm-ink-1);letter-spacing:0.005em} #dm-eh .mf-hint{display:none;margin:14px 0 0;font-family:var(--font-ui);font-size:12.5px;color:var(--dm-ink-3);line-height:1.5} #dm-eh .mf-hint b{color:var(--dm-ink-1);font-weight:700} #dm-eh .mf-widget.is-result .mf-hint{display:block} #dm-eh .mf-combo{position:relative;max-width:640px} #dm-eh .mf-input-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;border:1px solid var(--dm-ink-1);background:#fff;transition:box-shadow 0.12s} #dm-eh .mf-input-row.is-open{box-shadow:0 4px 12px rgba(0,0,0,0.08)} #dm-eh .mf-input-row:focus-within{box-shadow:0 0 0 3px rgba(31,31,31,0.10)} #dm-eh .mf-search-icon{display:flex;align-items:center;justify-content:center;padding-left:16px;color:var(--dm-ink-4);pointer-events:none;transition:color 0.12s} #dm-eh .mf-input-row:focus-within .mf-search-icon{color:var(--dm-ink-1)} #dm-eh .mf-input{height:54px;border:0;background:transparent;padding:0 12px;font-family:var(--font-ui);font-size:16px;color:var(--dm-ink-1);outline:none;min-width:0} #dm-eh .mf-input::placeholder{color:var(--dm-ink-5)} #dm-eh .mf-clear{height:54px;width:50px;border:0;background:transparent;color:var(--dm-ink-4);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color 0.12s} #dm-eh .mf-clear:hover{color:var(--dm-red-cta)} #dm-eh .mf-clear[hidden]{display:none} #dm-eh .mf-suggest{position:absolute;top:calc(100% - 1px);left:0;right:0;background:#fff;border:1px solid var(--dm-ink-1);border-top:0;max-height:360px;overflow-y:auto;z-index:30;box-shadow:0 8px 18px rgba(0,0,0,0.10);display:none} #dm-eh .mf-suggest.is-open{display:block} #dm-eh .mf-suggest-item{display:grid;grid-template-columns:1fr auto;gap:12px;padding:11px 16px 12px;cursor:pointer;border-bottom:1px solid var(--dm-grey-1);align-items:center} #dm-eh .mf-suggest-item:last-child{border-bottom:0} #dm-eh .mf-suggest-item:hover,#dm-eh .mf-suggest-item.is-active{background:#f1f1f0} #dm-eh .mf-suggest-item .name{font-family:var(--font-ui);font-size:16px;color:var(--dm-ink-1);line-height:normal} #dm-eh .mf-suggest-item .name mark{background:transparent;color:var(--dm-ink-1);font-weight:700;text-decoration:underline;text-decoration-color:var(--dm-red-cta);text-decoration-thickness:2px;text-underline-offset:1px;padding:0;line-height:normal} #dm-eh .mf-suggest-item .meta{font-family:var(--font-ui);font-size:11.5px;color:var(--dm-ink-2);letter-spacing:0.02em;margin-top:8px} #dm-eh .mf-suggest-item .muni{font-family:var(--font-ui);font-size:11px;font-weight:700;color:var(--dm-ink-3);letter-spacing:0.06em;text-transform:uppercase;text-align:right;max-width:190px;line-height:1.35} #dm-eh .mf-empty{padding:16px;font-family:var(--font-ui);font-size:13px;color:var(--dm-ink-3);line-height:1.5;background:#fff} #dm-eh .mf-empty b{color:var(--dm-ink-1)} #dm-eh .mf-empty p{margin:0 0 4px} #dm-eh .mf-file{display:none} #dm-eh .mf-widget.is-result .mf-file{display:block} #dm-eh .mf-file-inner-body{padding:36px 34px 42px} #dm-eh .mf-file-banner{background:var(--dm-ink-1);color:#fff;padding:28px 34px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start} #dm-eh .mf-file-banner > div:first-child{min-width:0;align-self:center} #dm-eh .mf-file-banner h2{margin:0;min-height:52px;font-family:var(--font-display);font-size:50px;font-weight:700;color:#fff;line-height:1.06;letter-spacing:0.005em;white-space:nowrap;overflow:hidden;padding-bottom:0.1em} #dm-eh .mf-file-banner .type{font-family:var(--font-ui);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:10px;padding-bottom:10px} #dm-eh .mf-file-banner .type strong{font-weight:700;color:rgba(255,255,255,0.9)} #dm-eh .mf-type-link{color:rgba(255,255,255,0.9);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,0.45);transition:text-decoration-color 0.12s ease, color 0.12s ease} #dm-eh .mf-type-link:hover{color:#fff;text-decoration-color:#fff} #dm-eh .mf-type-link strong{color:inherit} #dm-eh .mf-banner-facts{margin-top:14px;padding-top:0;display:grid;grid-template-columns:1fr 2fr} #dm-eh .mf-banner-facts:empty{display:none} #dm-eh .mf-banner-facts .bf{padding:0 30px;border-left:1px solid rgba(255,255,255,0.14);line-height:1.25;min-width:0} #dm-eh .mf-banner-facts .bf:first-child{padding-left:0;border-left:0} #dm-eh .mf-banner-facts .bf .lbl{display:block;font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.48);margin-bottom:7px} #dm-eh .mf-banner-facts .bf .v{font-family:var(--font-ui);font-size:15px;font-weight:400;color:#fff;letter-spacing:-0.015em} #dm-eh .mf-banner-facts .bf .v b{font-weight:700} #dm-eh .mf-banner-facts .bf .v .nb{white-space:nowrap} #dm-eh .mf-banner-facts .bf-count .v{font-size:31px;font-weight:300;letter-spacing:-0.02em} #dm-eh .mf-banner-facts .bf .v .sub{display:block;margin-top:4px;font-size:12.5px;font-weight:400;line-height:1.45;color:rgba(255,255,255,0.62);letter-spacing:-0.01em} @media (max-width: 600px){ #dm-eh .mf-banner-facts{grid-template-columns:1fr;gap:16px} #dm-eh .mf-banner-facts .bf{padding:0;border-left:0} } #dm-eh .mf-file-map{align-self:center;width:158px;flex-shrink:0} #dm-eh .mf-map-svg{width:158px;height:134px;display:block} #dm-eh .mf-map-cap{font-family:var(--font-ui);font-size:7.5px;font-weight:400;letter-spacing:0.83px;text-transform:uppercase;color:rgba(255,255,255,0.5);text-align:center;margin-top:7px} @media (max-width: 600px){ #dm-eh .mf-file-map{display:none} } #dm-eh .mf-file-body{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start} #dm-eh .mf-file-body h3{font-family:var(--font-display);font-size:22px;font-weight:700;margin:0 0 12px;color:var(--dm-ink-1);letter-spacing:0.005em} #dm-eh .mf-file-body p{font-family:var(--font-serif);font-size:17px;line-height:1.55;color:var(--dm-ink-2);margin:0 0 14px} #dm-eh .mf-file-card{background:#f1f1f0;border:1px solid var(--dm-grey-1);padding:24px} #dm-eh .mf-file-body p.mf-ballot-intro{font-size:13.5px;line-height:1.4;color:#131313;margin:0} #dm-eh .mf-ballot-list{margin:18px 0 20px} #dm-eh .mf-ballot-row{display:grid;grid-template-columns:42px 1fr;gap:18px;align-items:center;padding:16px 0;border-top:1px solid var(--dm-grey-1)} #dm-eh .mf-ballot-row:first-child{border-top:0;padding-top:2px} #dm-eh .mf-ballot-row.is-district{border-top-color:var(--dm-grey-2);padding-top:24px} #dm-eh .mf-ballot-row:last-child{padding-bottom:2px} #dm-eh .mf-ballot-row[data-ballot]{cursor:pointer} #dm-eh .mf-ballot-row[data-ballot]:focus-visible{outline:2px solid var(--dm-blue);outline-offset:2px} #dm-eh .mf-ballot-paper{transition:transform 0.1s ease, box-shadow 0.1s ease} #dm-eh .mf-ballot-row[data-ballot]:hover .mf-ballot-paper{transform:translateY(-3px) scale(1.04);box-shadow:0 5px 11px rgba(0,0,0,0.28)} #dm-eh .mf-ballot-modal-head{display:flex;align-items:center;gap:20px;padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--dm-grey-1)} #dm-eh .mf-ballot-modal-head .mf-ballot-paper{width:62px;height:76px;flex-shrink:0;box-shadow:0 6px 15px rgba(0,0,0,0.16)} #dm-eh .mf-ballot-modal-head .mf-ballot-hd{height:12px} #dm-eh .mf-ballot-modal-cap .mf-ballot-k{display:block;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:6px} #dm-eh .mf-ballot-modal-cap .t{display:block;font-family:var(--font-display);font-size:27px;font-weight:700;color:var(--dm-ink-1);line-height:1.12;letter-spacing:0.005em;margin-bottom:7px} #dm-eh .mf-ballot-paper{width:42px;height:52px;background:#fff;border:1px solid var(--dm-ink-1);display:flex;flex-direction:column} #dm-eh .mf-ballot-hd{height:9px;flex-shrink:0} #dm-eh .mf-ballot-body{flex:1;padding:7px 6px;display:flex;flex-direction:column;justify-content:center;gap:7px} #dm-eh .mf-ballot-line{display:flex;align-items:center;gap:6px} #dm-eh .mf-ballot-line .nm{flex:1;height:3px;background:var(--dm-grey-2)} #dm-eh .mf-ballot-line .bx{width:11px;height:11px;border:1px solid var(--dm-ink-3);flex-shrink:0;position:relative;background:#fff} #dm-eh .mf-ballot-line.marked .bx{border-color:var(--dm-red-cta)} #dm-eh .mf-ballot-line.marked .bx::before,#dm-eh .mf-ballot-line.marked .bx::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1.8px;margin-top:-0.9px;background:var(--dm-red-cta)} #dm-eh .mf-ballot-line.marked .bx::before{transform:rotate(45deg)} #dm-eh .mf-ballot-line.marked .bx::after{transform:rotate(-45deg)} #dm-eh .mf-ballot-k{display:block;font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;margin-bottom:5px} #dm-eh .mf-ballot-cap b{display:block;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--dm-ink-1);line-height:1.15;margin-bottom:5px;letter-spacing:0.005em} #dm-eh .mf-ballot-d{display:block;font-family:var(--font-ui);font-size:12px;line-height:1.45;color:#000} #dm-eh .mf-ballot-cap .mf-ballot-d b{display:inline;font-family:var(--font-ui);font-size:inherit;font-weight:700;color:inherit;line-height:inherit;margin:0;letter-spacing:inherit} #dm-eh .mf-actions{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap;justify-content:center} #dm-eh .mf-action-ghost{background:var(--dm-ink-1);color:#fff;border:1px solid var(--dm-ink-1);padding:12px 22px;font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;cursor:pointer;border-radius:5px;transition:transform 0.06s ease, box-shadow 0.06s ease} #dm-eh .mf-action-ghost:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 5px rgba(0,0,0,0.45)} #dm-eh .mf-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-start;justify-content:center;padding:48px 20px;overflow-y:auto} #dm-eh .mf-modal[hidden]{display:none} #dm-eh .mf-modal-backdrop{position:fixed;inset:0;background:rgba(20,18,16,0.55)} #dm-eh .mf-modal-dialog{position:relative;z-index:1;width:100%;max-width:720px;background:#fff;border:1px solid var(--dm-grey-1);box-shadow:0 24px 60px rgba(0,0,0,0.28);padding:40px 44px 44px;margin:auto} #dm-eh .mf-modal-x{position:absolute;top:16px;right:18px;width:34px;height:34px;border:0;background:transparent;font-size:26px;line-height:1;color:var(--dm-ink-4);cursor:pointer;border-radius:50%} #dm-eh .mf-modal-x:hover{background:var(--dm-grey-2);color:var(--dm-ink-1)} #dm-eh .mf-modal-title{font-family:var(--font-display);font-size:26px;line-height:1.15;color:var(--dm-ink-1);margin:0 36px 18px 0;letter-spacing:-0.01em} #dm-eh .mf-resp-intro{font-family:var(--font-ui);font-size:15px;line-height:1.6;color:var(--dm-ink-2);margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--dm-grey-1)} #dm-eh .mf-resp-intro b{color:var(--dm-ink-1);font-weight:700} #dm-eh .mf-resp-sec{margin:0 0 26px} #dm-eh .mf-resp-h{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;margin:0 0 14px} #dm-eh .mf-resp-list{list-style:none;margin:0;padding:0;display:grid;gap:14px} #dm-eh .mf-resp-list li{display:grid;grid-template-columns:10px 1fr;gap:13px;align-items:start} #dm-eh .mf-resp-dot{width:8px;height:8px;border-radius:50%;margin-top:7px} #dm-eh .mf-resp-txt{font-family:var(--font-ui);font-size:13.5px;line-height:1.5;color:var(--dm-ink-3)} #dm-eh .eh-prac-ballots{display:grid;gap:20px} #dm-eh .eh-prac-ballots li{grid-template-columns:50px 1fr;gap:18px;align-items:start} #dm-eh .eh-prac-ballots li:nth-child(2){padding-bottom:20px;border-bottom:1px solid var(--dm-rule, rgba(0,0,0,0.12))} #dm-eh .eh-prac-ballots .eh-prac-bp{width:50px;height:62px;box-shadow:0 5px 12px rgba(0,0,0,0.15)} #dm-eh .eh-prac-ballots .eh-prac-bp .mf-ballot-hd{height:11px} #dm-eh .eh-prac-ballots .mf-resp-txt b:first-child{display:block;margin-bottom:3px;font-family:var(--font-display)} #dm-eh #eh-prac-body .mf-resp-txt b:first-child{margin:-3px 0 3px !important} #dm-eh #eh-prac-body .mf-resp-sec{margin:0 0 30px} #dm-eh #eh-prac-body .mf-resp-sec > h3.mf-resp-h{padding:7px 0 0;margin:0 0 17px} #dm-eh #eh-prac-body .mf-resp-note{font-family:var(--font-serif);color:var(--dm-ink-1)} #dm-eh .mf-resp-txt a{color:var(--dm-blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;font-weight:600} #dm-eh .mf-resp-txt b{display:block;font-size:14.5px;color:var(--dm-ink-1);font-weight:700;margin-bottom:2px} #dm-eh .mf-resp-note,#dm-eh .mf-resp-caveat{font-family:var(--font-ui);font-size:13px;line-height:1.55;color:var(--dm-ink-3);margin:0 0 26px} #dm-eh .mf-resp-caveat{background:#fdf6e3;border:1px solid #e4d9b8;padding:12px 14px;font-size:12.5px;color:var(--dm-ink-2)} #dm-eh .mf-resp-src{font-family:var(--font-ui);font-size:12px;line-height:1.55;color:var(--dm-ink-4);margin:0;padding-top:20px;border-top:1px solid var(--dm-grey-1)} @media (max-width: 600px){ #dm-eh .mf-modal-dialog{padding:36px 22px 30px} } #dm-eh .ag-none{background:#ececec;color:#5a5a5a;border:1px solid #d2d2d2} #dm-eh .ag-chip{display:inline-block;font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:6px 12px;border-radius:2px} #dm-eh .ag-chip[data-ag]{cursor:pointer;transition:transform 0.1s ease, box-shadow 0.1s ease} #dm-eh .ag-chip[data-ag]:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 5px 11px rgba(0,0,0,0.22)} #dm-eh .ag-chip[data-ag]:focus-visible{transform:translateY(-3px) scale(1.04);box-shadow:0 5px 11px rgba(0,0,0,0.22);outline:2px solid var(--dm-blue);outline-offset:3px} #dm-eh .mf-file-body--single{grid-template-columns:1fr} #dm-eh .mf-file-body--single .mf-file-left{max-width:470px;margin:0 auto;text-align:center} #dm-eh .mf-file-body--single .mf-actions{justify-content:center} #dm-eh .mf-v4-stats.mf-dist-stats{min-height:0;margin-bottom:34px} #dm-eh .mf-dist-list-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;margin-bottom:4px} #dm-eh .mf-dist-h{font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:0;color:var(--dm-ink-2);margin:0} #dm-eh .mf-dist-munis{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--dm-grey-1);margin-top:16px} #dm-eh .mf-dist-muni{position:relative;display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;background:var(--dm-paper, #fff);border:0;border-bottom:1px solid var(--dm-grey-1);padding:12px 14px;cursor:pointer;font:inherit;transition:transform 0.12s ease, box-shadow 0.12s ease} #dm-eh .mf-dist-muni:hover,#dm-eh .mf-dist-muni:focus-visible{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.12);z-index:1;outline:none} #dm-eh .mf-dist-rt,#dm-eh .mf-dist-rb{display:flex;align-items:baseline;justify-content:space-between;gap:12px} #dm-eh .mf-dist-rb{align-items:center} #dm-eh .mf-dist-muni .nm{font-family:var(--font-serif);font-size:17px;color:var(--dm-ink-1);line-height:1.2} #dm-eh .mf-dist-muni .pop{flex-shrink:0;font-family:var(--font-ui);font-size:12px;letter-spacing:0.01em;color:var(--dm-ink-4)} #dm-eh .mf-mini-chip{flex-shrink:0;font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:4px 9px;border-radius:2px} #dm-eh .mf-mini-na{background:var(--dm-grey-1);color:var(--dm-ink-4)} #dm-eh .mf-dist-foot{font-size:12.5px;color:var(--dm-ink-4);line-height:1.5;margin:30px 0 0;padding-top:0;border-top:0} #dm-eh .mf-ag-hero{padding-bottom:40px;margin-bottom:32px;border-bottom:1px solid #000} #dm-eh .mf-ag-modal-chip{display:inline-flex;font-size:12px;padding:10px 18px;border-radius:11px;align-self:flex-start} #dm-eh .mf-ag-title{display:block;font-family:var(--font-display);font-size:38px;line-height:1.04;color:var(--dm-ink-1);letter-spacing:-0.018em;margin:15px 0 7px} #dm-eh .mf-ag-lead{font-family:var(--font-serif);font-size:19px;line-height:1.5;color:var(--dm-ink-2);margin:0} #dm-eh .mf-ag-lead b{color:var(--dm-ink-1)} #dm-eh #mf-resp-body .mf-ag-scale-sec{margin:0 0 30px} #dm-eh #mf-resp-body .mf-ag-scale-sec > h3.mf-resp-h{padding:12px 0 11px;margin:0 0 17px;font-size:21px !important;letter-spacing:-0.5px !important;text-transform:none !important} #dm-eh .mf-ag-scale li{grid-template-columns:122px 1fr;gap:16px;align-items:start} #dm-eh .mf-ag-scale .mf-resp-txt{font-family:var(--font-serif);color:var(--dm-ink-1)} #dm-eh .mf-ag-scale .ag-chip{font-size:11px;padding:7px 10px;border-radius:9px;justify-self:stretch;text-align:center;pointer-events:none;white-space:nowrap;opacity:1 !important;outline:0;box-shadow:none} #dm-eh .mf-stories{margin-top:48px} #dm-eh .mf-stories[hidden]{display:none} #dm-eh .mf-stories-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:16px;margin-bottom:28px;border-bottom:2px solid var(--dm-ink-1)} #dm-eh .mf-stories-head h3{margin:0;font-family:var(--font-display);font-size:25px;font-weight:700;color:var(--dm-ink-1);letter-spacing:0.005em;line-height:1.05} #dm-eh .mf-stories-all{flex-shrink:0;font-family:var(--font-ui);font-size:11.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--dm-ink-1);border:1px solid var(--dm-ink-1);padding:10px 16px;background:#fff;white-space:nowrap;cursor:pointer;text-decoration:none;display:inline-block;transition:background 0.12s, color 0.12s} #dm-eh .mf-stories-all:hover{background:var(--dm-ink-1);color:#fff} #dm-eh .mf-stories-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:32px 26px} #dm-eh .mf-story{display:flex;flex-direction:column;text-decoration:none;cursor:pointer} #dm-eh .mf-story .thumb{width:100%;aspect-ratio:16 / 10;position:relative;overflow:hidden;margin-bottom:13px} #dm-eh .mf-story h4{color:var(--dm-ink-1);transition:color 0.12s} #dm-eh .mf-story .thumb{transition:transform 0.1s ease, box-shadow 0.1s ease} #dm-eh .mf-story:hover .thumb{transform:scale(1.03);box-shadow:0 5px 11px rgba(0,0,0,0.22)} #dm-eh .mf-story .byline{font-family:var(--font-utility);font-size:12px;color:var(--dm-ink-2);letter-spacing:0.01em;text-align:center} @media (max-width: 980px){ #dm-eh .mf-file-body,#dm-eh .mf-file-body.mf-file-body--single{grid-template-columns:minmax(0, 1fr)} #dm-eh .mf-file-body > *{min-width:0;max-width:100%} #dm-eh .mf-file-banner h2{font-size:34px} #dm-eh .mf-stories-grid{grid-template-columns:1fr 1fr} } @media (max-width: 600px){ #dm-eh .mf-stories-grid{grid-template-columns:1fr} #dm-eh .mf-stories-head{flex-direction:column;align-items:flex-start} } #dm-eh #mf-resp-body .mf-ballot-k{font-size:calc(var(--pop-eyebrow-size)*var(--pop-scale))!important;letter-spacing:var(--pop-eyebrow-ls)!important} #dm-eh #mf-resp-modal .mf-modal-title,#dm-eh #mf-resp-body .mf-ballot-modal-cap .t{font-size:calc(var(--pop-title-size)*var(--pop-scale))!important;letter-spacing:var(--pop-title-ls)!important;line-height:var(--pop-title-lh)!important} #dm-eh #mf-resp-body .mf-ag-title{font-size:calc(var(--pop-title-size)*var(--pop-scale)*1.5)!important;letter-spacing:var(--pop-title-ls)!important;line-height:var(--pop-title-lh)!important} #dm-eh #mf-resp-body .mf-resp-intro{font-size:calc(var(--pop-lead-size)*var(--pop-scale))!important;letter-spacing:var(--pop-lead-ls)!important;line-height:var(--pop-lead-lh)!important} #dm-eh #mf-resp-body .mf-ag-lead{font-size:calc(var(--pop-lead-size)*var(--pop-scale)*1.25)!important;letter-spacing:var(--pop-lead-ls)!important;line-height:var(--pop-lead-lh)!important} #dm-eh #eh-prac-body .mf-resp-h,#dm-eh #mf-resp-body .mf-resp-h{font-size:calc(var(--pop-head-size)*var(--pop-scale))!important;letter-spacing:var(--pop-head-ls)!important} #dm-eh #eh-prac-body h3.mf-resp-h{font-family:var(--font-display)!important;letter-spacing:0!important;text-transform:none!important;font-size:calc(var(--pop-head-size)*var(--pop-scale)*1.3)!important} #dm-eh #mf-resp-body h4.mf-resp-h{font-family:var(--font-display)!important;font-weight:700!important;text-transform:none!important;color:var(--dm-ink-1)!important;font-size:calc(var(--pop-title-size)*var(--pop-scale))!important;letter-spacing:var(--pop-title-ls)!important;line-height:var(--pop-title-lh)!important} #dm-eh #eh-prac-body .mf-resp-txt b:first-child,#dm-eh #mf-resp-body .mf-resp-txt b:first-child{display:block;font-family:var(--font-display);font-size:calc(var(--pop-label-size)*var(--pop-scale))!important;letter-spacing:var(--pop-label-ls)!important} #dm-eh #eh-prac-body .mf-resp-txt,#dm-eh #mf-resp-body .mf-resp-txt,#dm-eh #eh-prac-body .mf-resp-note,#dm-eh #mf-resp-body .mf-resp-note{font-size:calc(var(--pop-body-size)*var(--pop-scale))!important;letter-spacing:var(--pop-body-ls)!important;line-height:var(--pop-body-lh)!important} #dm-eh #eh-prac-body .mf-resp-caveat,#dm-eh #mf-resp-body .mf-resp-caveat,#dm-eh #mf-resp-body .mf-resp-src{font-size:calc(var(--pop-note-size)*var(--pop-scale))!important;letter-spacing:var(--pop-note-ls)!important} #dm-eh .mf-v4-ag-head .lbl{display:block} #dm-eh .mf-v4-ag{padding-top:0} #dm-eh .mf-v4-ag-head{display:flex;justify-content:center;align-items:baseline;gap:18px} #dm-eh .mf-v4-ag-head .lbl{margin-bottom:0;font-family:var(--font-display);font-size:29px;font-weight:700;line-height:0.95;letter-spacing:0;text-transform:none;text-align:center;color:var(--dm-ink-1)} #dm-eh .mf-v4-ag-src{display:block;margin-top:13px;text-align:center;font-family:var(--font-ui);font-size:12.5px;color:var(--dm-blue);text-decoration:none} #dm-eh .mf-v4-ag-src:hover{text-decoration:underline} #dm-eh .mf-v4-assess{text-align:center} #dm-eh .mf-v4-assess-top{display:flex;justify-content:center;gap:35px;flex-wrap:wrap} #dm-eh .rc-wm{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:0.95;font-family:var(--font-display);text-transform:none;color:var(--dm-ink-1)} #dm-eh .rc-wm em{font-family:var(--font-ui);font-weight:700;font-style:italic;text-transform:uppercase} #dm-eh .rc-rating{display:inline-flex;flex-direction:column;align-items:flex-end;cursor:pointer;transition:transform 0.1s ease} #dm-eh .rc-rating:hover{transform:translateY(-2px)} #dm-eh .rc-rating:focus-visible{outline:2px solid var(--dm-blue);outline-offset:3px} #dm-eh .rc-stars{position:relative;display:inline-block;line-height:1;color:var(--dm-grey-2)} #dm-eh .rc-stars .base,#dm-eh .rc-stars .fill{display:flex;gap:0.11em} #dm-eh .rc-stars .fill{position:absolute;left:0;top:0;overflow:hidden;color:var(--dm-ink-1)} #dm-eh .rc-star{flex:none;width:1em;height:1em;fill:currentColor;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round} #dm-eh .rc-na{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#5a5a5a;background:#ececec;border:1px solid #d2d2d2;padding:5px 11px;border-radius:2px} #dm-eh #mf-file-body .mf-actions-top{display:flex;margin:0 0 18px;padding:0} #dm-eh #mf-file-body .mf-actions-top .mf-action-ghost{width:100%;white-space:normal;text-align:center;padding:14px 20px;line-height:1.3} #dm-eh .mf-v4-stats{min-height:342px} #dm-eh .mf-v4-ag-src{padding:8px 0 14px} #dm-eh .mf-v4-assess{margin-top:20px;padding:39px 20px 8px;border-top:1px solid #000} #dm-eh .mf-v4-assess-top{align-items:flex-end} #dm-eh .rc-wm em{font-size:20px;letter-spacing:-0.45px} #dm-eh .rc-rating{gap:5px} #dm-eh .rc-stars{font-size:20px} #dm-eh #eh-live-grid{grid-template-columns:repeat(3, 1fr)} @media (max-width: 600px){ #dm-eh #eh-live-grid{grid-template-columns:1fr} } #dm-eh .mf-story h4{font-family:var(--font-serif);font-weight:400;font-size:16px;line-height:21px;letter-spacing:-0.32px} #dm-eh .eh-mast-inner,#dm-eh .eh-hero-inner,#dm-eh .eh-wrap{max-width:900px} #dm-eh .eh-mast-logo{display:block;width:100%;max-width:640px;height:auto} #dm-eh .eh-mast-inner{grid-template-columns:1fr auto;gap:48px} #dm-eh .eh-mast .count{min-width:0;padding-left:28px} #dm-eh .eh-mast .count .n{font-size:64px} #dm-eh .eh-mast{background:#fff;color:var(--dm-ink-1);border-bottom:none} #dm-eh .eh-mast .count{border-left-color:var(--dm-grey-1)} #dm-eh .eh-mast .count .lbl{color:var(--dm-ink-4)} #dm-eh .eh-mast .count .n{color:var(--dm-ink-1)} #dm-eh .eh-mast .count .when{color:var(--dm-ink-2)} #dm-eh .mf-ward{max-width:none;margin:0;padding:26px 0 4px;border-top:0} #dm-eh .mf-widget:not(.is-result) .mf-ward{display:none} #dm-eh .mf-ward-sub{font-family:var(--font-serif);font-size:19px;line-height:1.5;color:var(--dm-ink-2);margin:0 0 12px;max-width:none} #dm-eh .mf-ward-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;background:#fff;border:1px solid #6b6b6b;border-radius:4px;transition:box-shadow 0.12s} #dm-eh .mf-ward-row:focus-within{box-shadow:0 0 0 3px rgba(31,31,31,0.10)} #dm-eh .mf-ward-row.is-set{border-color:#6b6b6b} #dm-eh .mf-ward-ic{display:flex;align-items:center;justify-content:center;padding-left:16px;color:var(--dm-ink-4)} #dm-eh .mf-ward-row.is-set .mf-ward-ic,#dm-eh .mf-ward-row:focus-within .mf-ward-ic{color:var(--dm-ink-1)} #dm-eh .mf-ward-select{appearance:none;-webkit-appearance:none;width:100%;height:54px;border:0;background:transparent;padding:0 14px;font-family:var(--font-serif);font-size:17px;color:var(--dm-ink-1);cursor:pointer} #dm-eh .mf-ward-select:focus{outline:none} #dm-eh .mf-ward-row{position:relative} #dm-eh .mf-ward-select.is-native{display:none} #dm-eh .mf-wd-btn{appearance:none;-webkit-appearance:none;flex:1 1 auto;min-width:0;width:100%;height:54px;border:0;background:transparent;padding:0 14px;margin:0;font-family:var(--font-serif);font-size:17px;font-weight:400;color:var(--dm-ink-1);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dm-eh .mf-wd-btn:focus{outline:none} #dm-eh .mf-wd-btn b,#dm-eh .mf-wd-list b{font-weight:700} #dm-eh .mf-wd-btn .wd-ph{color:var(--dm-ink-3)} #dm-eh .mf-wd-list{position:absolute;left:-1px;right:-1px;top:100%;z-index:30;max-height:320px;overflow-y:auto;margin:4px 0 0;padding:6px 0;list-style:none;background:#fff;border:1px solid var(--dm-ink-1);box-shadow:0 8px 24px rgba(0,0,0,0.12)} #dm-eh .mf-wd-list[hidden]{display:none} #dm-eh .mf-wd-list li{margin:0;padding:10px 16px;font-family:var(--font-serif);font-size:16px;line-height:1.3;color:var(--dm-ink-1);cursor:pointer} #dm-eh .mf-wd-list li.is-hi,#dm-eh .mf-wd-list li:hover{background:#f1f1f0} #dm-eh .mf-wd-list li[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--dm-ink-1)} #dm-eh .mf-ward-chev{padding:0 18px;color:var(--dm-ink-3);font-size:12px;pointer-events:none} #dm-eh .mf-ward-help{font-family:var(--font-ui);font-size:12px;line-height:1.5;color:var(--dm-ink-1);margin:11px 0 0} #dm-eh .mf-ward-help a{color:var(--dm-blue);font-weight:700;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} #dm-eh .mf-wardpanel{padding:17px 0 4px;margin-top:22px;border-top:1px solid var(--dm-grey-1)} #dm-eh .mf-wardpanel:has( > .wp-cands:first-child){border-top:0;padding-top:0;margin-top:8px} #dm-eh .mf-wardpanel .wp-sub{font-family:var(--font-serif);font-size:16px;line-height:1.5;color:var(--dm-ink-2);margin:0 0 22px;max-width:620px} #dm-eh .mf-wardpanel .wp-stamp{font-family:var(--font-ui);font-size:11.5px;line-height:1.5;color:var(--dm-ink-4);margin:20px 0 0} #dm-eh .mf-wardpanel .wp-cands{border-top:0} #dm-eh .mf-wardpanel .wp-cand{display:grid;grid-template-columns:1fr minmax(0, 42%);gap:4px 18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--dm-grey-1)} #dm-eh .mf-wardpanel .wp-cand .nm{font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.2;color:var(--dm-ink-1);padding-left:20px} #dm-eh .mf-wardpanel .wp-cand .pt{font-family:var(--font-ui);font-size:12.5px;line-height:1.35;color:var(--dm-ink-2)} #dm-eh .mf-wardpanel .wp-cand .pt .ab{font-weight:700;color:var(--dm-ink-1)} @media (max-width: 560px){ #dm-eh .mf-wardpanel .wp-cand{grid-template-columns:1fr} } #dm-eh .ag-clean{background:#00B050;color:#111;border:1px solid #00B050} #dm-eh .ag-unqualified{background:#C8D035;color:#111;border:1px solid #C8D035} #dm-eh .ag-qualified{background:#FFC000;color:#111;border:1px solid #FFC000} #dm-eh .ag-adverse{background:#FF8A00;color:#111;border:1px solid #FF8A00} #dm-eh .ag-disclaimer{background:#FF0000;color:#111;border:1px solid #FF0000} #dm-eh .ag-outstanding{background:#111;color:#fff;border:1px solid #111} #dm-eh .mf-ag5{container-type:inline-size;max-width:540px;margin:14px auto 0;position:relative} #dm-eh .mf-ag5 .mf-ag5-pop{top:calc(100% + 10px);text-align:left;white-space:normal} #dm-eh .mf-ag5 .mf-ag5-pop .cs-def > b.cs-def-h{white-space:normal} #dm-eh .mf-ag5-pop-scale{padding-top:14px;border-top:1px solid rgba(255,255,255,.25)} #dm-eh .mf-ag5-pop-scale ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} #dm-eh .mf-ag5-pop-scale li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start;opacity:.7} #dm-eh .mf-ag5-pop-scale li.is-current{opacity:1} #dm-eh .mf-ag5-pop-scale li.is-current .mf-ag5-pop-txt{font-weight:700} #dm-eh .mf-ag5-pop-scale .ag-chip{font-size:10px;padding:5px 4px;border-radius:6px;text-align:center;letter-spacing:0.04em;white-space:nowrap} #dm-eh .mf-ag5-pop-txt{font-size:13px;line-height:1.35} #dm-eh .mf-ag5-chip[aria-expanded="true"]{transform:translateY(-3px) scale(1.04);box-shadow:0 5px 11px rgba(0,0,0,0.22)} #dm-eh .mf-ag5-row{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:clamp(3px,1.2cqi,6px)} #dm-eh .mf-ag5-cell{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:0} #dm-eh .mf-ag5-cell .yr{font-family:var(--font-ui);font-size:clamp(10px,3cqi,13px);font-weight:400;letter-spacing:0;line-height:1.2;color:var(--dm-ink-4);text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap} #dm-eh .mf-ag5-cell.is-latest .yr{color:var(--dm-ink-1)} #dm-eh .mf-ag5 .mf-ag5-chip{display:block;box-sizing:border-box;width:100%;padding:9px 1px;border-radius:8px;font-size:clamp(8px,2.2cqi,10.5px);letter-spacing:0.03em;line-height:1.15;text-align:center;white-space:nowrap;overflow:hidden} @container (max-width:420px){ #dm-eh .mf-ag5 .mf-ag5-chip{letter-spacing:0;padding:8px 0;border-radius:6px} } #dm-eh .mf-v4-uifw,#dm-eh .mf-v4-loss{margin-top:18px} #dm-eh .mf-v4-uifw{border-top:0;padding-top:7px} #dm-eh .mf-v4-loss{border-top:0;padding-top:3px;margin-bottom:0;padding-bottom:0} #dm-eh .mf-v4-uifw .cs-h{display:block;max-width:400px;margin:0 auto;text-align:center;font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.15;color:var(--dm-ink-1);text-wrap:balance} #dm-eh .mf-v4-uifw .mf-ag5{margin-top:8px} #dm-eh .mf-uifw-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:17px auto -6px;font-family:var(--font-ui);font-size:14px;color:var(--dm-ink-1)} #dm-eh .mf-uifw-key{display:inline-flex;align-items:center;gap:7px} #dm-eh .mf-uifw-key i{display:block;width:18px;height:3px;border-radius:2px} #dm-eh .mf-uifw-chart{margin-top:12px} #dm-eh .mf-uifw-chart svg{display:block;width:100%;height:auto;overflow:visible} #dm-eh .mf-uifw-chart .mf-ag5-row{margin-top:8px} #dm-eh .mf-uifw-grid{stroke:var(--dm-grey-1);stroke-width:1} #dm-eh .mf-uifw-tick{font-family:var(--font-ui);font-size:13px;font-weight:700;fill:#000;font-variant-numeric:tabular-nums} #dm-eh .mf-v4-loss .cs-list{list-style:none;margin:12px auto 0;padding:0;max-width:340px;display:grid;gap:8px} #dm-eh .mf-v4-loss li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--font-ui);font-size:15px;color:var(--dm-ink-1)} #dm-eh .mf-v4-loss .cs-v{font-family:var(--font-display);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums} #dm-eh .mf-v4-loss .cs-v.is-txt{font-family:var(--font-ui);font-size:15px;font-weight:400;color:var(--dm-ink-4);text-align:right} #dm-eh .mf-v4-loss .cs-q{margin-left:1px;font-size:.7em;vertical-align:.45em;line-height:0} #dm-eh .mf-v4-loss .cs-fn{margin:10px auto 0;font-family:var(--font-ui);font-size:12.5px;line-height:1.4;color:var(--dm-ink-4);text-wrap:pretty} #dm-eh .mf-v4-loss ul.cs-list{margin:0 auto} #dm-eh .mf-v4-loss .cs-fn{text-align:left;max-width:none} #dm-eh .mf-v4-loss .cs-l{font-family:"DM Custom",var(--font-display);font-weight:700;position:relative} #dm-eh .cs-info{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:6px;padding:0;border:0;border-radius:50%;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20680%20680%22%3E%3Ccircle%20cx%3D%22340%22%20cy%3D%22340%22%20r%3D%22340%22%20fill%3D%22%23191919%22%2F%3E%3Cpath%20d%3D%22M444.477%20192.245C455.367%20209.185%20460.812%20229.15%20460.812%20252.745C460.812%20273.315%20456.577%20290.86%20448.712%20305.38C440.847%20320.505%20430.562%20332.605%20419.067%20342.89C406.967%20352.57%20394.867%20360.435%20383.372%20365.88C371.272%20371.93%20357.357%20377.375%20341.627%20382.215V433.64H303.512V353.175C314.402%20349.545%20324.082%20345.915%20331.947%20341.075C339.812%20336.84%20347.677%20330.79%20355.542%20323.53C363.407%20315.665%20370.062%20305.985%20375.507%20293.885C380.952%20282.39%20383.372%20267.87%20383.372%20251.535C383.372%20228.545%20377.322%20210.395%20365.827%20195.875C353.727%20181.96%20335.577%20174.7%20311.377%20174.7L286.572%20247.3C285.362%20248.51%20282.942%20248.51%20279.917%20248.51C275.077%20248.51%20269.027%20247.905%20261.767%20246.695C253.902%20245.485%20247.247%20241.855%20241.197%20236.41C235.752%20231.57%20232.727%20222.495%20232.727%20209.79C232.727%20197.085%20235.752%20185.59%20242.407%20176.515C248.457%20167.44%20256.927%20160.18%20267.212%20154.13C277.497%20148.685%20288.992%20144.45%20301.092%20142.03C313.192%20139.005%20324.687%20137.795%20335.577%20137.795C359.172%20137.795%20380.952%20142.635%20399.707%20152.315C418.462%20161.39%20433.587%20174.7%20444.477%20192.245ZM367.642%20514.105C367.642%20526.81%20363.407%20538.305%20354.332%20547.38C345.257%20555.85%20334.972%20560.69%20322.267%20560.69C310.772%20560.69%20300.487%20555.85%20292.622%20545.565C284.757%20535.885%20280.522%20524.39%20280.522%20511.685C280.522%20498.375%20284.757%20486.88%20292.622%20477.2C301.092%20468.125%20311.377%20463.285%20322.872%20463.285C336.182%20463.285%20347.072%20468.125%20355.542%20478.41C363.407%20488.695%20367.642%20500.19%20367.642%20514.105Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;color:transparent;font-size:inherit;line-height:1;overflow:hidden;cursor:pointer;vertical-align:middle;position:relative;top:-0.1em;flex-shrink:0;transition:opacity .15s} #dm-eh .mf-v4-loss .cs-name{white-space:nowrap} #dm-eh .cs-info:hover,#dm-eh .cs-info[aria-expanded="true"]{opacity:.75} #dm-eh .cs-info-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:min(300px,80vw);padding:12px 14px;background:#000;border:1px solid #000;box-shadow:0 4px 14px rgba(0,0,0,.12);font:400 14px/1.45 Geist,sans-serif;color:#fff;text-align:left;white-space:normal} #dm-eh .cs-info-pop[hidden]{display:none} #dm-eh .cs-info-wrap{position:relative;display:inline-block;vertical-align:middle;line-height:1} #dm-eh .cs-info-wrap .cs-info-pop{left:50%;transform:translateX(-50%);width:min(340px,86vw);letter-spacing:normal;text-transform:none} #dm-eh .mf-v4-uifw .cs-info-pop{border-radius:10px;width:min(440px,86vw);height:auto;font-size:14px;padding:16px 21px 18px} #dm-eh .mf-v4-stats .cs-info-wrap,#dm-eh .mf-v4-stats .mf-v4-loss .cs-l{position:static} #dm-eh .mf-v4-stats .mf-v4-ag-head,#dm-eh .mf-v4-stats .mf-v4-uifw .cs-h,#dm-eh .mf-v4-stats .mf-v4-loss li{position:relative} #dm-eh .mf-v4-stats .cs-info-pop{left:50%;right:auto;transform:translateX(-50%);border-radius:10px;width:min(440px,86vw);font-size:14px;padding:16px 21px 18px;box-sizing:border-box;letter-spacing:normal;text-transform:none} #dm-eh .cs-info-pop b{font-weight:700;font-family:var(--font-display) !important;font-size:1.25em !important;line-height:1.1;letter-spacing:0 !important} #dm-eh .cs-info-pop .cs-def{display:block} #dm-eh .cs-info-pop .cs-def + .cs-def{margin-top:14px} #dm-eh .cs-info-pop .cs-def > b.cs-def-h{display:block;white-space:nowrap;margin-bottom:6px;letter-spacing:0 !important;word-spacing:0 !important;font-kerning:normal} #dm-eh .cs-info-pop .cs-def > .cs-def-txt{display:block;letter-spacing:0 !important;word-spacing:0 !important} #dm-eh .mf-v4-mfma-src{padding:0 0 4px;margin-top:15px} #dm-eh .mf-v4-loss .cs-l .cs-norm{font-family:Geist,sans-serif;font-weight:400;font-size:12px;color:inherit;white-space:nowrap} #dm-eh #mf-file-body p:nth-child(3){text-align:center !important;padding:13px 0px 0px !important} #dm-eh #mf-file-body :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,label,span,a,em,strong,small,td,th,caption) a{font-weight:700 !important;letter-spacing:-0.2px !important;padding:0px !important;margin:0px !important} #dm-eh #mf-file-body p:nth-child(3){line-height:1.3 !important} #dm-eh #mf-file-body :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,label,span,a,em,strong,small,td,th,caption) > b:nth-child(1){font-family:"Charis SIL" !important} #dm-eh #mf-resp-modal > [role="dialog"] .mf-ag-hero{padding:0px 0px 48px !important} #dm-eh #mf-resp-body li:nth-child(1){margin:0px 0px 3px !important} #dm-eh #mf-resp-body li:nth-child(2){margin:0px 0px 5px !important} #dm-eh #mf-resp-body li:nth-child(3){margin:0px 0px 5px !important} #dm-eh #mf-resp-body li:nth-child(4){margin:0px 0px 5px !important} #dm-eh #mf-resp-body li:nth-child(5){margin:0px 0px 5px !important} #dm-eh #mf-resp-modal > [role="dialog"] .mf-resp-sec{margin:0px 0px 16px !important} #dm-eh #mf-file-body .mf-dist-foot{margin:14px 0px !important;padding:13px 0px 0px !important} #dm-eh #mf-file-body .lbl{font-weight:700 !important;letter-spacing:0.7px !important} #dm-eh #mf-file-body .mf-v4-stats .mf-v4-ag-head .lbl{letter-spacing:0 !important} #dm-eh #mf-file-body .lbl{color:rgb(46, 46, 46) !important} #dm-eh #mf-file-body .mf-actions{margin:24px 0px 0px !important;padding:10px 0px 0px !important} #dm-eh #mf-resp-body > :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,label,span,a,em,strong,small,td,th,caption){font-family:"Charis SIL" !important;color:rgb(38, 38, 38) !important} #dm-eh #mf-file-body .mf-ballot-cap .mf-ballot-d > b:nth-child(1),#dm-eh #mf-file-body .mf-ballot-cap .mf-ballot-d > b{font-family:var(--font-ui) !important;font-size:inherit !important;display:inline !important} #dm-eh #mf-file-body aside .mf-actions{margin:22px 0px 0px !important;padding:0px !important} #dm-eh #mf-file-body aside .mf-actions-top{margin:2px 0px 20px !important;padding:0px !important;border-bottom:0 !important} #dm-eh #mf-file-body .mf-file-left .mf-actions-top{margin:0 0 20px !important;padding:0 !important;border-bottom:0 !important} #dm-eh #mf-file-body aside .mf-file-card{padding-bottom:15px !important} #dm-eh #mf-file-body aside .mf-ballot-list{margin-bottom:4px !important} #dm-eh .mf-wa{container-type:inline-size;margin-top:16px;padding-top:12px} #dm-eh .mf-wa-btn{display:flex;align-items:center;max-width:100%;margin:0 auto;text-align:left;height:40px;padding:0 14.12px;border-radius:17.65px;background:rgb(0,157,32);box-shadow:inset 0 0 0 0.88px rgb(8,130,33);color:#fff;font-family:Barlow, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-weight:600;line-height:1;letter-spacing:-0.01em;white-space:nowrap;text-shadow:0 0 1px rgb(6,117,28);transition:transform .15s, box-shadow .15s} #dm-eh .mf-wa-btn .on{font-weight:400} #dm-eh .mf-wa-btn{justify-content:space-between;padding-right:4.71px;font-size:17.57px;width:204px} #dm-eh .mf-wa-btn::after{content:"";flex:none;width:35.29px;aspect-ratio:1;border-radius:50%;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAQAElEQVR4AdRcCWBVxdX+5r73su87ZF8gIayCoLjhjuAuBS2KqFCoorba6q+2trGtdcWtbqggohVFsQpWRdksmwJhJwQICQlJgJA9Iet79/7fuS8bkOS9YOhymfPuvTNntm/OnDlz5gYN/6lrIiyYF5eEeQljMTfxdtKTfF6CuQm7SVmkvSSjhey8Z5OYFr+U9zfwTsJU8o/Fu0mDMWeE7T/VjX8fgBkXW/FKSgDmxQ/HvMSlGJeQC0PLhIHFgDGH9FsYahyBSCOlkvqRnEFB2invTDN5pgGYA8mr62tgLSvC3MTXSNfhA9YhdZHh3xGkYWeungx2fG6qP96Nn4zYg3Pha/8BhvoXDGMsDMSy4iCSL8mL5EEQrbxLm4QUn53BgDxLnJCFkTbGePIueQN5D4Ohz2D+hWi0f4fY/PmYl3Az3k0IQgakTJypSxrUu2VLZ2VKLUiOQFzSeKjGJdDV26xkCmkASTpt411A4a1XgoJSApQPSxtFIG/h/V3o2IPY+KkEMgEZ6R4cNMX4Xg29CaBCBqfp+5E+8Ci7B82OHykVn7DRY9hi6VivN57ldhUsrNebiVGAeovPaxFTNwufpPua+lIGGb1z9RaAig2zcurchGafLzjys9m8BJJMzX8ncKzylKARwGgovICauo3Ul7/BizFejOuVdv10AGU030mMg6WM09R4j9PnYnZB9BRv/3UhlcBlIMj6JubGD4PoaPy0S/tJ2V9J8cRcKmtlrOEIT2ZZotj/W8Fj87ioKYgu/DmUWob4+FuwKMaboJ62NGpSao9JRu61hCj4Ns+CwmvMH0Pq7YWBRZ6RIGDZ2O4wyOJWbX0H85NSIH1Cz6+eAygVxSVHwwvzAfVXACEkaRRv/0NBVA/gA6UmQXe8DunTIhr3PexCzwCUSpOSOXL6QtZzOUmmLG+9E5Q5lwxohk6Se0diXEu68PVOjVKKQfNHXQLD8QWqE2OQYdqNbguE+wAaUHgrKRZ2x6dQxrlAz0eLeToEg+uNDo4+aO7A2+qFKJ9IpAQmYXDYIAwPH4KRkWeZNCJ8KIaGDUZqUD/E+kXD38MfmlJw5nUABssiuB0K7+mj6O2h7NcqxMbfjAz3++YegBnQ8H5yOGz6B9Qbowmle/nQ2aUzO+Bj9YGAMSRsIMb0HY3r46/A5OTrMa3/JMwaMAX3D7oDvx50Fx4YNI3Pd+Le9NsxI20ypqRMwISE8bgi+kIMjxiK5MBEBHsFwaJZWZlOchm6YhBzJx5Qf0ZMYjTcnM6ugRDw4qjzmvTPOMjncW6JkcrhR48uyeCh2RDmFYq04GRcEn0upqfdjD+PeBBvjv4LXhz1OB4Zcjdmpk7GLYnX4Ma4sbgm5jJcHXMpboi7EhMTrsadKT/DgwPvwtNnP4xXR/8Jz456FL8iyAL+sNB0SnAEvC2e5gBRLHvUPpNZUVCAeEri16hOToT0Hd1frgGMT4igfniHhZ7Lok4LPJtmQaCHP9JD+uH2/hPw9MhH8NfhD+OufjfjkqjR6M9pG+UdjjDPYAR5BMDf5gc/qy/Jp438bb5mGSGeQYjgICT5x2F0+FmYRGAF+KcI6t3pU3AOp32YVzA8NQ8CKcPGVvcsaGRPhdLfQHxSMgwWw4iugjB3lQYsMvePvybDJSQLqUdBCpeOJLCzE5OvwUODZ+IX/W/BlX0vxODgVMT4RJlgKaVB58LhMBxo1u1o0pvR6Gg6gSSumfF28givQONj8UakVxj6ByRhTOQ5uCN5Ah5mHTMG3EqdORC+Nm9TpHrUaCezxtvF0PUn8LcUfz53GYSx80RBvqb+Bo6AOAFsnTN1Hauxh5G+ERgffwnuGzjVnJrXxV6GVHbWS/OE4j+DhQsY9Y4GFNeXYEfFXnx/9AcsPbQCiw5+ifdz/4H3D3yGj/KW4ouCb/Fd8VpsKt2B/ONFOG6vh4OgGy0LiAfVQ5xvNC7vcz7uSpmIX3Oq35J8HeID4ggiazP5um7vqSmyOuMm2rq/704fdgWgwlxuz2A8z4L7kHoUbFTosmJOSrwa9w64Hbcn3YSzgtM5HX0JmyJsBmrsx7G/Og+rjmzAwtwv8M6+j/B69vt4JWs+Xto9D7N3vYPnd72F53a9bT6/sGsuXs56F6/teQ9zsj/EgpzF+LpwNbZX7EFZQ4UJpjTSRiAT/WOpQ680F6Op/SZgVOQwBHgFQGPtwtMD8gTUXaiKH8NGK3RyaZ3EARmsSRkZAKJInWZkfKfBy+qJAUH9cEe/nxG8qbgwYhQCPPygKY1tMFBrr8M+Are8eB1B+xhPbHsZj2U+j6e3v4H39n2CrwtWYcPRTOws34v9lXnIqcrD7op92HRsO1YWrcei3C/xIsF9bPNzzPcsXt4zH58f+g47K7JR2VwDkWjF5ntaPDA4KBX3pN4KWc3PjxqJQM8ApqhO291NZBAb/1RXDohTARRDMjb+HBZ4C8lKcjv4UOcMCmGj02/DzZS+eE4pG6VRCmh0NOJIfSlWHF6H53e/jd9teR7vErDNJTtQWl9Gfddo6j87dZzoQp13ndPOSTolzAG7YTd5mhzNqG6qwd7KXPwj7xs8uf1VPLNrDqf+chyoLUBN83GahgYsyoJQLkxj+1yEWam34QKCGOIVCI0wSpvcIkV2YBgCLQ/QHXaKKtPQ8TJYclKkiK24yz2Y5PZwieQNCR1gTptraX7E+vSBgKcbOmrZoZ2V+8wp+uzOOfgi71vsqzhA4MpRb2+g1BgtVUl1HYnRbaFDPI1oydHEhaaqsRoF1YVYdmg1Xto1Dy/snotVRzegtLHcBFyj5MvKfl7ECEzvfzPOjzqbkujPjrYV3P2DYbJSkNS9qGiIQoYJKFqvEwF8It2GJu8ZTBzMbCemMbKrYGEjU2mKTOs3CVdFj0EfnwhIw3VKUBWn1XdH1uFFdmxBzmf4sWQrjlHiHAQWBMKkrgp2Fd+SXydfRUMVtpXtxqd5X+GV3fPxd+rVorqjHBxJBQJpHl0YORJ39JuIs7nL8bH5QDGfm0Gw6AOb8SQCYjw75pGE9vf4ur7Q8Jv2CNdPiiAlB8RjYuJ4jI2+CBGeoWyYc6Eoqj+CRflf4S0q/S8LVlBSDsGhs0PScddF94yDZcqAldaVYu2RjZi//1PM278IWVX7ISpBwBJJvChyFG5LuQkjwgbBZrH1rA7duBrB1lRmkuJ4A+Eyb/zJ4CZaNy6jpnd71VXMFkidcmnf87m9Goco2mQieQYLKWkowz+LVmHO3g+xuvgH1DTWApRUnOmLdYgNmVW+3wRxYe5SZFflmtNZcWiDbQEYH30xboi/EikBCbAwzu1di0IQR+NWfJUi6g1ytUtgbKo3I8aQ2uP40l2w0WQYyekwNuYiJPnFwapZzSlT3VyLb4r/hYUHliCrbC9EVxnq5JIMRgjx1utBETAHimuP4uO8L0lLUXC82FyAZICDPQIxLuZijI0ZAx/ucFQHOUL3F3uhpqG4Ob2VrR0so+kqQN0ENy8rt2d9/aJwFRtybvgw2BT1LPPW0r4T224RzY3MYzsIXjPlkQktgS2AjUD7WLy4b/WCVYkMSGwLQ6e304u0cyUvqCmiEf4dPj34NY5xVjioewVEGfBL+pyLYWHp8LJQoKiK3KtFcQXSbkXLYuIEMIOnaQrXA/AiuREMBNj8MJ7gXdJnNEy9pxQaaKpkVeWYjZXFoq65Dh1lTON0CeCeuH9QElfDUTgnYjh3CjGmK8uNSk+LRbZ/eysPYEn+cnxfshHVXNRkuGQQR4QOxg1xVyDEMxBKSawbVShzhzK0dTHRzCwphT6AISf/FvPdxY+NUzfWj9sm6r5U/0TIiIreO8zt2D/yl+Ffh39EeUMlwWtvlMYG+nv648qYC/HQ4BmQPevDvM9Km4L0oBS0c7qovMfJCo32JuziNnFJwXfIqzkEu+5gfcrU2aM5iAND0jiIosE6Dnd3FRlnw5udIYsTwEbHxXweRHIdOAXEWzKcq1haQDJ8rFIxzB2GbKtWFq9H8fGjBK9jUQZkZ3B+5AiugDeaHpTL+p5nrtqy3RtJh6kfdytnDEQOnkhe5rGd2HBsC8qbKs3GycCLsT+mzzk0uIMoQ+4CCG/Y7PdJIU4AoV/AFyvJrSDuovNpmEZ6h7XxH6k/htVHfkRBbREcur0tXh6syoY4SuyN8WNxQcRI6hxPUwKkA8FU6MNCByKJ+9czBiAbYegGjnIntJJ774PHC7nYOcES99g5YUMR5UvblXqdrO4EDyg1ExnpHhomciUHD1YAtwC0WTwQ49sHw0LSEegRYFbWzC1WTnW+OXUruDOA0sx484cSG+DhiwujRmEkGxrMPArKTJIfUQdnU5rPIknZ7SmS2oukFHdEddhauhs7y7NR2VzFWWJAZkaCX6ypRgKonymG7lQqzbQhsjpcw7i4eOYIJHXoNd86C1ypQr2CMSQ0DeFeIbAQKIPNOFxXgsyynSiqPUxTofmUnP40Fc4OG4IYnnmoDuAJo6zmKf7xGMX0hIBYyLvEnwmS/XVZfQXWl2Qil7qQ3WFrFIII3OjI4Yj2jSJ+Tsl0o34bPGwDCZomi4fNjQxkMUzgBtEZ6mfz5bvUZ+BgbSEyS3eijj464mnGt/8Y8Kb/T0AKovS1xzufBFA/qy+Ghw7COeHD4Kl5SKHOxDPwK3vvtUc3Y2/VAej8J1VIX0aEDEI0HbxKKYlyh6yg6tNYRhQ7zRc38nBwgrnkJ9PD7M2zB8khElhUdwTZNBXEa8whlegTSHSdN+0+C22+ExJaXpRSSPFPwHB2wlOTsWRFLWm9e1MQdSO2ofgiq5qr2XUDHqwzhs6PWL8+XI193K1ShC9JY4fPJWnu5FJUsiEeQejrHWlWKuCJ7Vd4/AiKOY3FPAALw0mX7EWrmqohNtlJSW2vTXoTPTP17FBb1Bl6MOCgOyyvphD5suBRRyu22YsCEUMJDPEK4ptbVRMzI0YjdwQMioAbeeTsNoy6L4grp0iTQSVyjG4jkcAGuqwE0FOLUaingZ1HN3wljdiT03V2oLyxiiv4D1hOX2E93ftgo3AGLx0GimhqHaLOlvqlKumPHGzJqqwkwjVpgIrW6HmMgzJc5hEGP7qAQj2DYGuZitKQCq66lZQuARNdXHUEJbsyx3S9n8zSoDdi5ZH1dNGLq2sbGnlwBPfG8+Si3HwXTxFQ1lhJn2EFzRl6h5jTwgUxnKd9QTZ/vrkVCImRLChKDr64ymSYJ2gyQqLThFtAK2+sRAVB7FJrEYxabum2lO9Ccf1Rjn07p+xLSxsrsPLweq6MW3CcUqxTqqXsM001dHhUN9W2tUf6FEhjXoTEDTBam0fYAdlHucyjoMwVUhYDjaBICTJlZVVrsDfytR0YvgBtPwrizs+pOog9XPmq6IqXfJKs+GOhNEtOnRt/vv5bgtTXwFlR56DOlRfWqtg/L1oAYpcSVca4FzSyWZhB8e4yWIi3RZMs7ew6dZh0vqUdnZZhUKpqAw2RUAAAEABJREFUKKUritZhW3lW27SRUQ+if+6CiLMxlIa5vHdawBmIrKdelsEHOy/Fi0xY6WC1cqGUd3dJ0HCXl1WJ7AhUQm5nA9i6Buq2tUc3caFYi8Pc9sn0BS9Z/S6KHInr4i9Hf3ppbGYHelg+y+lp0Dmo0pv2fIrNVOAPWkHlg8sgADrg1Ksume2cZk0OO4FsZ5URs7DTrLo9spMnaXA5dwHLKYXL6GyVzb10QKQ6mjbYDXFX4uaka9DHN5I7HEsnJXQWJUALdZbWfZwP7VIfizeZnC2XWdJM88ZBTw0ICNy8BMAcIuKyFcJQT71x3EEfH0dPylesSPaSQqCUSVx3JKv2jvI9WMyDH/GKVFOJC7+AmOgbi+vpm7shYSxiuKWSuK4kQYPiIb0Pwj1DEGjzg40OWvTgUuSVNov0tzZbBrOJAAqILJ4c7gWNbA6SW6GOR5DSaZ16TzIopcxDc9nrSqMkrjsyB4FlbOQh+Yd092dXHzBtRMkjIIh7bErSjZiQNB5x/tHw4g5BO6k3Uk8AD8gvojf5noG349qEK5DKqS/7WQ8CqZRwSIndky9NMj+Sailf+iTmWC0tBmln97nbU6V9BwDlNIbQ9SWFyvlueWMlmo1mk1Ey96X1HuUdASUMZqyrH0VnaxVWHd6ABQf+YX6l0KzbzUwiEYOC+mNq8gTcmz4VF/YdjRDvYMiEltM/RS4rQT2PTtA7+0/E1JQJuD/9Tjw69B5MS7sFZ0cMRSD9nCY/eTsPhglZhHcoonzC0bpwCYClDeWo5Pau83wnxYraM6BrMNROThWXAEr2BkqPVFJOw1m2Z1J5uGcworzDoFllDytdFM7uyYCBI3XH8OWhFeYHRLur9qEjiAOD+mFy0nUE5w7c0W8CRvMwPNQnBJ5WT9MTdCOn+aU8SkjwjcHI0CGYED/O/HhJwJyR+nNcEn0+grhnVyZUp7ZFBl62bTF0y0kfhEP0u/g0K7grMiTCFRn0IiisYVl6HXndy0MFW84KxH1l7hiY0aIsiCCAkRxNK80cRrkVZMSLao/gIx47fsSTMzm/beJKLZmlzEgekcoh/X0Dpppfd01Ovh7XxV2Oqf1ugoAXRPNHKSXspn2a4hePCXFj8dtBMzCdIKbxmMDDIoNqsnT4UdA41cV1FeMTCY3/pPNN3IsX8iBedijyDpeXOecqNOK4jbzu6UG2t7KpCnm1h8wDJObjGCvE09s8LCQdnnS2cmso0W6RrHhHa0vwMU/w3stZbNqIMoV0NkqxZCsHJ5or9LUxl+Pxoffj6ZH/h1sTb0C8bzS0FvBaK1JK0ZdoRZhHMESCE6hDzfZQ2lt5ONNgVRoifcPp/YlHKHmlHHFyFHGXdIhHn3IQ1s7f3ZMsBMZ+DYZ2iGxOJcSH7oPGo8FyyJdQog+FVykF8eiOCBsM2aVIXE9Ipk4hN/UfHViKZ3e+aX4DKJ6dRkqElGNhh6Vc2YPH+0RD3GkWAitpnZICdz5Npvu+0dF0IgtFS8qSTzzSqSY0li0MNdxCbqY/s5BeJUNwkUjX1AylVnAKNxdyZKrJz+L5210gWBXcUeypyEFJQylEDyoo9PEOh3z/Jx9UijXfXRGdpdn1ZohaWF60Fi/vfhdz9y9CVuV+SMdENxo0m6Qe6bDcOyujNa6mudZcmAqPHyaQjYxWJGdQBCyAi4x83tE/MBFKyUoAiE36Q8k2FHMKM9LJ7PrXDoV8DdMLy6E0mcZ213k4ulxICmqL2cEcVlxrZvHgyijfOcvplpgTcH8UzfxgS8CrqrEGG9mR93M+w3M738L8nE+RWb4b1Tysd7BM44TpyAwdgqQ1cSC2V2TzIP1bHK0r7ZDKRw6Cr80bQ0PTMYTHmMEegaxVcfFqQj6n7h4OWCWFA4yF60uEjRl9cjUnr/5H3ptIbgSD07jM9J6U1Je18UdTIV/R9wLE+PXheFja4nv0oKRDduRW5dPY/hqv7nkfb2Z/gEVcZOTM5RjNDJH6k8s0CKyolB9Kt2Jh3hKsKt5A6ZXBbZc+sGxZ7C7te56pchSUWUw5F8XNpdvNo1i9xZwyE7r/obCpJcjIanICWGvLIX8ByXVQGqroUZFvlffVHGwzhOV8eHBQGkaFD4PoK3DEXRfWOYc5vJSmnMpcfJL7T8ze/Q5e27OA4CzlXnodtlIqs6sOmJ8Iyz2zdBdNopXmh0yL876BfPKrn1C/AT+eDA7hYZg4LkJpeknNOqX6EKVvDffo5Y08KybIEu8GVcNue0T4nACWx9TxZRNJ2s5b90G2O0U1xdjEkTtcX8LxNzieCuIrlD9b6OMTwQLcMi3J13XQWXI9D6pEIj87+A2e3PY3/OrHP+GRzc+aC84LWfPw9I438Fjmc/jDlhew5OB35kebMt07lmqjikkLSjbNIDnPsdGMMcgg3vSNpTuwvSwbx+0CgVMqmeQq7ANqJQOcAGastkMzljFXPcmNYJgKWlziVU3VbfwyvWrstdQrlHBC2pbwEx6ko7KQ1DYdNz/M3F+Zh7VHNmFJ/nIszv0aSwtWYB1P2eSYUnh0w9FWm8Bh0yyml+e62CtwaeR5kOMIYRDTZRsleWnhcoJeBl3XJdo1GUo69y2CixuF2QmgPOleS9nnTHl0hyxsWDjPR3yt7adYx7mPzKLrvsJ9ZexOVU4ec3opyLQTW62M+vAY3WLlvMu7xKOFx5kBsPA9KTABNyVchYkJ4yAzw0oTSCRUjmJXcju5qWQH1VADnHnh+tKMGkBtwSSYI9UO4KG99dRb7wGcN/zpPige/3kjNTAZEdwxKCiTvYarpZy3VtLYboky43v9h8CAuridnPW31UOxtTK9r19fyOckExPGmx9TenAqi1qoZTuX8xhhWdEaVHMRMcFvy9zNgyI2BpbBv/m7Vq52ADNgh6YyyUJt2prc+V2kL8QrmKtZtPmZm3DJNCupLzVXM3Hh4wQE2SMqbA4QzvjFemwWK1ICEzEpcTwmEbz0wH7cgVjYNZir8wqC93n+Muyp2A+7udgo95pFzUX5eguTCimyziztAMp7hX0vQfynPHZNhvlFlijjcE5hTTkrr6QXQ9xT1TJ92QlWxKCbMHpbvRFMwP09/M2OMKHr4k87xWDTFQLoRBgaOgCTuXf+ZepkDAlO41R2dlMkT6yHOdl/px7dDFkMe1hdHmwNG5mHEsFfBmfJfDBDdSEVo/YYe72b7zrp1MAR87f5YWBwfyrkgLb0isZKGtf7Uc9jSh/62cJoKshJf1pwCi6KGgX5CH183BgMDOmPYI8Ac9/qzNzWFudrj34lrwGNDRZdnBQQj2vjL8PDg39JL87PEMc9s4U6T4oU8MSWfGPv37HpGPUeV3fJLWlukMHZU8qKJiP3aGNHfq3jCzK4i28OOkL1+CQA7vVMqefjiSHA5osB1H+BHc5Qj3OHUtpUQUUdiTF0NU1NnYg/jngQr577BP464iE8MHAafjfkXvxu2L2YmHwtkgPjTG+yJ0/CLC1S7KzFcN46/W1P0wiaB3WaH6U7wieMLqzz8JvBv8Ajg+/G5TToo70j6am2cbupmzsmMbJfo1G+5vBGVFLvdVp8l5HKwaTPUWPdgwyqOrRfWvtjy9PMTDv00E/5tp3w6byfEDTNAnFyyt+jiVe3NTGSDsqJCVfjMTo3pRMz+v8cP6Of7uKo0RgeOghpBFw+SpIv5O9Jm4JHh8zCHQR5lPx5KvN60DazEh8LC7SwYq0TsjDdyngbF4hAeqXTOQtuSByH3xK4BwdNM+sbGNQPwZRwpRTBc/DwvBxfF38PAW8lz2NK68tZAitxP+j0Fteh2nE/7stpOjnbqQCC5c8QEI1HAVXBgWaz0XIZENDifPsizDOkRZ85kyK8wjCu78WQw6ELo0aif0AiJcwfGjvi5ACLUpCpNiQ4lZ29ynSCyl9VPjBoOn454DZMTLkOl8pfoocPw6CQAUgn3wCS3IeGDcIFfUdjfPyVmEpv9K8G3oEHCZr5x4z0YF8UMYptCjbr4HyjndqErKocfJi7xPw7FTlSFTUjaejZVcnpexce4MIhq/BJeTsDEGyFgcD874n8C4SzCq0X9Z/sNtJo1ftRz7VGy91KXePDky6rsjK7kiiSAXFLVdCsKWksow+xgXEw0wXItIBkXE8D9346TR8bOsv8i3X5E/9Z6VPwy7RbTYBnciGYwee7B0yBgPYQpe2RIXfjwYHTMTnpeowMHYowLlAW1g9e4lAorDuCFUfWQ7w6b+9dCJm2tY21xIEMJwUXrzJ1N8M//3M22uiMt3MAhXMSNaGf/SUY6kvAtL4hl0heOqeJL3WPvJ9M0gE5nCmia2g3PRxrj27EkkPLzS/315RsRgH3nnK6J5KglDJXSPHRRXiGYiDLvazP+bg54RpzEZiWejOmC/WfhClJN2B8zCU4J+wsJPjFwo96WEDTWAZ4Sb3ikt/MrdlCSt2zO97Egn2LsY/7aTGxOu0983UTdKathbfHra1GM99PCV0DKKwTKbYW9Sc+ribpYGNltFMC4uFFaRMDtIEn/FXczpU0lEGs+8yyXVhauAKv7JmPRzKfxQMb/4IntryEZ7e/gUf5LvFrSjaZvMcay809qN2wAxRaC6XIgwuDHC4JqB1J4jy54NioKy1K447EMHcQMljix9tctsOUuMe5J35193vYzJVW3FOODls79OyqhkN7CPv2lXeXrXsAZc7n5x6Aod3NQvZ6Wb10+bA8xBYEOeIUN/gmNnxxwTK8yI39/2U+g0c2P4PndszB33M+x6qi9dhVvhd51QXIrynEttIs86+XntjyMn6/ZbbpPVl15Efk1OSjrLEC1XSGyt8Ty5euIqUyOK0kn2Ecp+lRQ++xgCYO0x+ObcXHB7/EX3a8it9nzsbcvR9h/dFMFFLKpQyRcsjIoMdXJXT1CwR5bUcGdHRzdQ+gZJQCAg7keRlqHKUgnyaA/lnBN3hm5xt4nCA8tf11vJq1AAv2L8bnB7/FGvridhKootpiyN6YahOgxAjJGUgx3fcbuPkX3nn7FmE2HacZW1/CH7a+SLfV23SifoJP8r/CV4dWYzk91CsPrzPd/Et5gidT803acU/ueA2Pb51temJez3rfPFP5nvXKQDXw8N8wQaNIo8eXwRxNzP4UrMaXmJTVxPdug2sAJTv1YUNhfBHPZh/fXp7dNCf7Q9M/t2Dfp/ia3pCtnC7FPGFr4hmEIWDR1BHAoDrpBNMNKEpwPfKqCrC6eD0+zlmCt7MXciDew9+yhOZD/vRfpvsrnI7mc1ZLHNNfp6P1g/2f4VuCvKMsCxX1VU4xYdlg2Tj9q5lGyBNoDn0Rdx50rnguynIPQCkkY7Wj4kDox0ft5Wn7qvKy6TrSDWks9Rak4aoTsCRfdyR5zLwa5PNg+Zvf/ZUHsfXYbqzl4rOyeB2WF6+hh3kdNpRkYjfVQREluK65HifW3V0lbqdVsjuPwx72HMSMczOb+wByaJCx2t5g21No6M3XUjThSE4AAAIxSURBVL+sRIfVGb1wGSyD5VKaDHORcHD+OwydBrFhvosnxSB0ZOvNoLMwp85TeAUzM5sJpDSF0a5DTwB0lsbpjMLCXDgssxjxPamuJxWSv4fhNCTb/RoErH/BoV2JQO8l7k7bjsX3HEDJnUEhKc7Nga3uegqm/BcBstTLSErq/wJJW2sA9QUa9JtQnJvpzoKBTq7TA1AKEhBvP3qcVvpHNPFnUgprGd1Mksbx9l8ZDJhqR9XBULPgn3cL7imoQAYFAqd3nT6ArfXJlL4r/zNU2qMY9QfSXtJ/ayjh9vRtKMc5mJb3QXc7DHc78NMBlJoUDHOzbQ+dDcMyiW+PMVqmtcH7fzrIulPBRmQBaixqrQ+goCCbM6ZX2tY7AIKXgDiTK1jhgSxU21+Cpl3M2CdIR0guDVLyuBvc45PTMwMVVC+zYcGlsNWPwqG83bg/pxEZpz9lcdKlnfT+01+lcQ8W1uPO3J045PMU3THpMPAkC95AKiOJR9fgvbeDlCllVwJqOSXsZS5wl6Gv7fdcXbdD9HXGic5Q9MLV+wB2bFQGt0KipAMOPgl70+WkNHbsGbKUksRNdpx36XQz7+I6EhD46DLo5JA8Itl1fJaySiltz6HJkoqq5usobQ9jev5WjKfEEUnynJFwZgFsbfIkusZmFtdhZnEp7jr4R0pmDDScC13dCKj7SIsArAXUAbjurIC3l1L9CQz1HNlvg0M/3yxzev7juPtACWQGZED4WNyZDf8PAAD///Dax7YAAAAGSURBVAMAQllxBaJcUt8AAAAASUVORK5CYII=") center / cover no-repeat} #dm-eh .mf-wa-btn:hover{color:#fff;text-decoration:none;transform:translateY(-3px) scale(1.02);box-shadow:inset 0 0 0 0.88px rgb(8,130,33), 0 0 5px rgba(0,0,0,0.45)} #dm-eh .mf-wa-btn:focus-visible{outline:2px solid var(--dm-ink-1);outline-offset:3px} #dm-eh{--pop-scale:1;--pop-eyebrow-size:11px;--pop-eyebrow-ls:1.5px;--pop-title-size:26.5px;--pop-title-ls:-0.3px;--pop-title-lh:1.12;--pop-lead-size:15px;--pop-lead-ls:-0.3px;--pop-lead-lh:1.45;--pop-head-size:20px;--pop-head-ls:-0.4px;--pop-label-size:18px;--pop-label-ls:-0.2px;--pop-body-size:15px;--pop-body-ls:-0.1px;--pop-body-lh:1.5;--pop-note-size:13px;--pop-note-ls:0px} #dm-eh .eh-section.eh-feed{border-bottom:0} #dm-eh .eh-vid{position:relative} #dm-eh .eh-vid-link{position:absolute;inset:0;display:block;cursor:pointer;background:var(--dm-ink-1)} #dm-eh .eh-vid-link img{display:block;width:100%;height:100%;object-fit:cover;margin:0;max-width:none;border:0} #dm-eh .eh-vid-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px;background:rgba(23,23,23,0.82);transition:background 0.12s} #dm-eh .eh-vid-play::after{content:"";position:absolute;left:27px;top:14px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff} #dm-eh .eh-vid-link:hover .eh-vid-play,#dm-eh .eh-vid-link:focus-visible .eh-vid-play{background:#e00} #dm-eh .eh-vid iframe{position:absolute;inset:0} #dm-eh .eh-feed-card .hl,#dm-eh .mf-story h4{text-transform:none} #dm-eh .eh-feed-card .by,#dm-eh .mf-story .byline{display:block} #dm-eh .eh-live-more{display:flex;justify-content:center;margin-top:40px} #dm-eh .eh-live-more[hidden]{display:none} #dm-eh .eh-live-more .eh-btn-ghost{justify-content:center;min-width:160px;margin:0;border-radius:6px;line-height:1;box-shadow:none} #dm-eh .eh-live-more .eh-btn-ghost[aria-busy="true"]{opacity:0.55;cursor:progress} #dm-eh .mf-dm-link{color:var(--dm-blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:currentColor} #dm-eh .mf-dm-link:hover{color:var(--dm-blue)} #dm-eh #mf-resp-body .mf-resp-list .mf-resp-txt{font-family:var(--font-serif);color:#000} #dm-eh #mf-resp-body .mf-resp-list li:not(.is-off) .mf-resp-txt b{color:#000} #dm-eh #mf-resp-body .mf-resp-list .mf-resp-txt > b:first-child{font-size:calc(var(--pop-label-size)*var(--pop-scale)*1.1)!important} #dm-eh #mf-resp-body .mf-resp-sec + .mf-resp-sec > h4.mf-resp-h{padding-top:28px} #dm-eh #mf-resp-body .mf-resp-caveat,#dm-eh #eh-prac-body .mf-resp-caveat{background:none;border:0;padding:0} #dm-eh #eh-prac-body .mf-resp-caveat{padding-top:16px} #dm-eh #eh-prac-body .mf-resp-list .mf-resp-txt{font-family:"Charis SIL", var(--font-serif)!important;color:#000!important} #dm-eh #eh-prac-body .mf-resp-sec > h3.mf-resp-h.eh-yn-h{font-size:calc(var(--pop-head-size)*var(--pop-scale)*1.5)!important;margin-bottom:24px!important} #dm-eh #eh-prac-body .mf-resp-list .mf-resp-txt > b:first-child{font-size:calc(var(--pop-label-size)*var(--pop-scale)*1.2)!important} #dm-eh #mf-resp-body .mf-resp-src{border-top:0} #dm-eh #mf-resp-modal .mf-modal-dialog,#dm-eh #eh-prac-modal .mf-modal-dialog{border-radius:10px} #dm-eh .mf-resp-src a{color:var(--dm-blue);text-decoration:none} #dm-eh .mf-resp-src a:hover{text-decoration:underline} #dm-eh .mf-stories-grid{align-items:stretch} #dm-eh .mf-story .thumb.thumb-op{display:flex;align-items:center;justify-content:center;background:none;overflow:visible} #dm-eh .mf-story .thumb-op .op-face{display:block;height:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--dm-ink-1);box-sizing:border-box;transition:transform 0.1s ease, box-shadow 0.1s ease} #dm-eh .mf-story:hover .thumb.thumb-op{transform:none;box-shadow:none} #dm-eh .mf-story:hover .thumb-op .op-face{transform:scale(1.03);box-shadow:0 5px 11px rgba(0,0,0,0.22)} @media (hover: none){ #dm-eh .mf-story:hover .thumb-op .op-face{transform:none;box-shadow:none} } #dm-eh .mf-story h4{flex:1 1 auto;display:flex;align-items:center;justify-content:center;margin:4px 0 0;text-align:center;text-wrap:balance} #dm-eh .mf-story .byline{margin:14px 0 0} #dm-eh .eh-feed-grid,#dm-eh .eh-feed-card,#dm-eh .eh-feed-card:nth-child(even){border:0} #dm-eh .mf-stories-all{border-radius:6px} #dm-eh #mf-resp-body .mf-resp-note{font-family:"Charis SIL", var(--font-serif) !important;color:#000 !important} #dm-eh #mf-resp-body .mf-resp-note b{color:#000 !important} #dm-eh #mf-resp-body .mf-resp-sec > h3.mf-resp-h{font-family:var(--font-display) !important;text-transform:none !important;letter-spacing:-0.3px !important;font-size:25px !important;line-height:1.15} #dm-eh #mf-resp-modal > [role="dialog"] .mf-resp-sec + .mf-resp-sec{margin-top:44px !important} #dm-eh #mf-resp-body p.mf-resp-intro,#dm-eh #mf-resp-body p.mf-resp-intro b{font-size:calc(var(--pop-body-size)*var(--pop-scale)) !important} #dm-eh #mf-resp-body p.mf-resp-intro{border-bottom:0 !important} #dm-eh #mf-file-body .mf-actions + .mf-dist-list{margin-top:32px} #dm-eh #mf-file-body.mf-file-body--single .mf-file-left > .mf-actions:first-child{margin-top:0 !important;padding-top:4px !important} #dm-eh #mf-file-body .mf-file-left > .mf-dist-list:first-child{margin-top:-20px}#dm-eh #mf-file-body .mf-file-left > .mf-dist-list:first-child .mf-dist-munis{margin-top:0} #dm-eh #mf-file-body .mf-dist-munis{border-top:0}#dm-eh #mf-file-body .mf-dist-munis > .mf-dist-muni:last-child{border-bottom:0} #dm-eh .mf-dist-stars{display:inline-flex;flex-shrink:0}#dm-eh .mf-dist-stars .rc-stars{font-size:16px} #dm-eh #mf-file-body .mf-dist-list + .mf-dist-stats{margin-top:40px !important} #dm-eh #mf-file-body .mf-dist-list + .mf-actions{padding-bottom:34px !important} @keyframes eh-sheet-up{from { transform: translateY(56px); opacity: 0; } to { transform: none; opacity: 1; }} @media (max-width: 980px){ #dm-eh .eh-mast-inner{height:auto !important;padding:12px 32px 26px !important;gap:32px !important} #dm-eh .eh-hero-inner,#dm-eh .eh-wrap{padding-left:32px;padding-right:32px} #dm-eh .mf-search{padding:26px 26px 26px !important} #dm-eh .mf-file-banner,#dm-eh .mf-file-inner-body{padding-left:26px;padding-right:26px} #dm-eh #mf-resp-modal .mf-modal-dialog{padding:36px 34px 38px !important} } @media (max-width: 720px){ #dm-eh .eh-practical{padding:0 0 4px !important} #dm-eh .eh-prac-grid{grid-template-columns:1fr;gap:12px} #dm-eh .eh-practical .eh-prac-card{display:block;text-align:center;border-radius:14px;background:#fff;-webkit-tap-highlight-color:transparent;transition:background 0.12s ease} #dm-eh .eh-practical .eh-prac-card:hover{transform:none;box-shadow:none;background:#fff} #dm-eh .eh-practical .eh-prac-card:active{background:var(--dm-grey-3)} #dm-eh .eh-prac-card h3{grid-column:1;line-height:1.05} #dm-eh .eh-practical .eh-prac-card .q{display:none} #dm-eh .eh-prac-grid{justify-items:center;padding-top:14px} #dm-eh .eh-practical .eh-prac-card{width:88%;max-width:340px;box-sizing:border-box;padding:14px 18px;border:1.5px solid var(--dm-grey-2, #c8c8c8)} #dm-eh .eh-prac-card h3{margin:0;font-size:26px} } @media (max-width: 640px){ #dm-eh{--eh-g:18px;overflow-x:clip} #dm-eh .eh-wrap{padding-left:var(--eh-g);padding-right:var(--eh-g)} #dm-eh .eh-mast-inner{display:block !important;height:auto !important;padding:4px 6px 0 !important} #dm-eh .eh-mast-logo{width:calc(100% + 12px) !important;max-width:none !important;margin:0 -6px} #dm-eh .eh-mast .count{width:auto !important;display:grid;grid-template-columns:50% auto minmax(0, 1fr);grid-template-areas:"when n lbl";align-items:center;column-gap:0;max-width:420px;margin:6px auto 0;padding:8px 0 12px !important;border:0 !important;text-align:left !important} #dm-eh .eh-mast .count .n{grid-area:n;font-size:52px;line-height:0.82} #dm-eh .eh-mast .count .lbl{grid-area:lbl;align-self:center;margin:0;line-height:1.35;transform:translateY(-4px)} #dm-eh .eh-mast .count .lbl .l2{display:block} #dm-eh .eh-mast .count .when{grid-area:when;margin:0;font-size:14px;line-height:1.35;text-align:right !important;padding:4px 16px 4px 0;border-right:1px solid var(--dm-grey-1)} #dm-eh .eh-mast .count .n{padding-left:16px} #dm-eh .eh-mast .count .lbl{padding-left:10px} #dm-eh .eh-mast .count .when b{display:block} #dm-eh .eh-hero{padding:18px 0 30px !important} #dm-eh .eh-hero-inner{padding:0 6px !important} #dm-eh .mf-widget{border:1px solid var(--dm-ink-1)} #dm-eh .mf-search{padding:28px var(--eh-g) 28px !important} #dm-eh .mf-search-head{margin-bottom:14px} #dm-eh .mf-search h3{font-size:min(26px, calc((100vw - 65px) / 13.6)) !important;line-height:1.1} #dm-eh .mf-combo{max-width:none} #dm-eh .mf-input,#dm-eh .mf-clear{height:52px} #dm-eh .mf-search-icon{padding-left:14px} #dm-eh .mf-input{padding:0 10px;font-size:16px} #dm-eh .mf-hint{margin-top:12px;font-size:11px;line-height:1.4} #dm-eh .mf-widget.is-result .mf-search{padding-bottom:20px !important} #dm-eh .mf-suggest{max-height:316px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} #dm-eh .mf-suggest-item{gap:12px;padding:11px 14px 12px} #dm-eh .mf-suggest-item .meta{margin-top:5px;line-height:1.35} #dm-eh .mf-suggest-item .muni{max-width:34vw;font-size:10.5px} #dm-eh .mf-file-banner{grid-template-columns:minmax(0, 1fr) 116px;column-gap:14px;row-gap:0;padding:22px var(--eh-g) 20px} #dm-eh .mf-file-banner > div:first-child{display:contents} #dm-eh .mf-file-banner h2{grid-column:1;grid-row:1;min-height:0;font-size:38px;line-height:1.04;white-space:normal;overflow:visible;overflow-wrap:break-word;text-wrap:balance;padding-bottom:0} #dm-eh .mf-file-banner .type{grid-column:1;grid-row:2;margin-top:9px;padding-bottom:0;font-size:11px;line-height:1.55} #dm-eh .mf-file-map{display:block;grid-column:2;grid-row:1 / span 2;align-self:start;width:116px;margin-top:2px} #dm-eh .mf-map-svg{width:116px;height:98px} #dm-eh .mf-map-cap{display:block;margin-top:4px;font-size:7px;letter-spacing:0.6px} #dm-eh .mf-type-dm{display:block} #dm-eh .mf-type-dm .sep{display:none} #dm-eh .mf-banner-facts{grid-column:1 / -1;grid-row:3;grid-template-columns:auto minmax(0, 1fr) minmax(0, 1.25fr);gap:0;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.16)} #dm-eh .mf-banner-facts .bf{padding:0 0 0 18px;border-left:1px solid rgba(255,255,255,0.16)} #dm-eh .mf-banner-facts .bf:first-child{padding:0 18px 0 0;border-left:0} #dm-eh .mf-banner-facts .bf:nth-child(3){padding-right:0} #dm-eh .mf-banner-facts .bf .lbl{margin-bottom:6px;font-size:9.5px;letter-spacing:0.1em} #dm-eh .mf-banner-facts.is-district .bf.wide{grid-column:2 / -1} #dm-eh .mf-file-inner-body{padding:24px var(--eh-g) 30px} #dm-eh .mf-file-body{gap:30px} #dm-eh #mf-file-body .mf-v4-ag-head .lbl{font-size:24px !important} #dm-eh .mf-v4-uifw{padding-top:14px} #dm-eh .mf-v4-uifw .cs-h{height:auto !important;max-width:320px;font-size:19px} #dm-eh .mf-uifw-legend{gap:4px 14px;margin:10px auto 0;font-size:13px} #dm-eh .mf-uifw-tick{font-size:16px} #dm-eh .mf-v4-loss .cs-list{max-width:none;padding:0 52px} #dm-eh .mf-v4-loss .cs-l{font-size:18px !important} #dm-eh .mf-v4-loss .cs-l .cs-norm{display:block;margin-top:4px;font-size:12.5px;color:var(--dm-ink-4)} #dm-eh .mf-v4-loss .cs-fn{font-size:12px} #dm-eh .mf-v4-assess{margin:24px 0;padding:36px 0;border-top:1px solid #000;border-bottom:1px solid #000} #dm-eh .mf-v4-assess-top{gap:10px 22px} #dm-eh .mf-v4-assess-top .rc-wm em{font-size:24px} #dm-eh .mf-v4-assess-top .rc-stars{font-size:23px} #dm-eh #mf-file-body .mf-actions-top{justify-content:center} #dm-eh #mf-file-body .mf-v4-assess .mf-actions-top{margin:26px 0 0 !important} #dm-eh #mf-file-body .mf-actions-top .mf-action-ghost{width:auto;max-width:88%;min-height:50px;padding:14px 24px;font-size:13px} #dm-eh .mf-file-card{padding:18px 16px 14px} #dm-eh .mf-ballot-row{gap:14px} #dm-eh .mf-wa{margin:0;padding-top:44px;padding-bottom:32px} #dm-eh .mf-file-body p.mf-ballot-intro{font-size:15.5px;line-height:1.45} #dm-eh .mf-file-card .mf-ballot-k{font-size:11.5px} #dm-eh .mf-file-card .mf-ballot-cap > b{font-size:19px} #dm-eh .mf-file-card .mf-ballot-d{font-size:14px;line-height:1.45} #dm-eh .mf-wa-btn{height:50px;width:256px;font-size:19.5px;padding-left:24px;padding-right:8px;border-radius:25px} #dm-eh .mf-wa-btn::after{width:40px} #dm-eh .cs-info{width:32px;height:32px;margin:-6px -6px -6px 0;background-size:20px 20px} #dm-eh .mf-file-body--single .mf-file-left{max-width:100%;min-width:0} #dm-eh .mf-file-body--single .mf-actions .mf-action-ghost{width:100%;min-height:50px} #dm-eh .mf-v4-mfma-src{text-wrap:balance} #dm-eh .mf-ward{padding-top:4px !important} #dm-eh .mf-ward-sub{font-size:18px !important;line-height:1.45;padding:0 22px;text-wrap:balance} #dm-eh .mf-ward-select{height:52px;font-size:16px;padding:0 10px} #dm-eh .mf-ward-help,#dm-eh .mf-ward-help a{font-family:Geist, sans-serif !important} #dm-eh .mf-ward-help{font-size:14.5px !important} #dm-eh .mf-wardpanel{margin-top:18px} #dm-eh .mf-wardpanel .wp-cand{grid-template-columns:1fr;gap:3px;padding:12px 0} #dm-eh .mf-wardpanel .wp-cand .nm{padding-left:0;font-size:17px} #dm-eh .mf-wardpanel .wp-stamp{font-size:11.5px} #dm-eh .mf-stories{margin-top:36px} #dm-eh .mf-stories-head{gap:12px;margin-bottom:6px;padding-bottom:12px} #dm-eh .mf-stories-head h3{font-size:22px} #dm-eh .mf-stories-grid,#dm-eh #eh-live-grid{grid-template-columns:1fr;gap:0} #dm-eh .mf-story{display:grid;grid-template-columns:minmax(0, 1fr) 100px;grid-template-rows:1fr auto auto 1fr;grid-template-areas:". t" "h t" "b t" ". t";column-gap:16px;align-items:start;padding:13px 0} #dm-eh .mf-story .thumb{grid-area:t;width:100px;height:100px;aspect-ratio:auto;margin:0;border-radius:2px} #dm-eh .mf-story h4{grid-area:h;display:block;margin:0;text-align:left;font-size:16px;line-height:1.3;text-wrap:pretty} #dm-eh .mf-story .byline{grid-area:b;margin:10px 0 0;text-align:left;font-size:12.5px} #dm-eh .mf-story:first-child{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"t" "h" "b";padding:6px 0 16px} #dm-eh .mf-story:first-child .thumb{width:100%;height:auto;aspect-ratio:16 / 10;margin-bottom:12px} #dm-eh .mf-story:first-child h4{font-size:20px;line-height:1.22} #dm-eh .eh-live-more{margin-top:22px} #dm-eh .eh-live-more .eh-btn-ghost{width:auto;height:48px} #dm-eh .eh-section{padding-bottom:44px} #dm-eh .eh-sec-head{display:block;margin-bottom:10px;padding-top:14px} #dm-eh .eh-sec-head h2{font-size:28px;padding-top:0 !important} #dm-eh .eh-feed .eh-sec-head:not(:first-child){margin-top:38px !important} #dm-eh .eh-sec-head.eh-sec-head-mb{margin-bottom:18px} #dm-eh .eh-sec-head-mb h2,#dm-eh .eh-sec-head-lc h2{font-size:32px} #dm-eh .eh-sec-head.eh-sec-head-lc{border-top:none;margin-bottom:18px} #dm-eh .eh-feed-card,#dm-eh .eh-feed-card:nth-child(even){padding:12px 0} #dm-eh .eh-feed-card .thumb{width:100px;height:100px} #dm-eh .eh-feed-card .txt{justify-content:center} #dm-eh .eh-feed-card .by{margin-top:10px} #dm-eh .eh-vid-grid{gap:14px;margin-top:22px} #dm-eh .mf-modal{align-items:flex-start;padding:28px 0 0;overscroll-behavior:contain} #dm-eh .mf-modal-dialog,#dm-eh #mf-resp-modal .mf-modal-dialog,#dm-eh #eh-prac-modal .mf-modal-dialog{max-width:none;margin:auto 0 0;padding:22px 20px 36px !important;border:0;border-radius:14px 14px 0 0 !important;box-shadow:0 -10px 30px rgba(0,0,0,0.22);animation:eh-sheet-up 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards} #dm-eh .mf-modal-x{position:sticky;top:10px;z-index:5;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:-10px -8px 4px auto;background:rgba(255,255,255,0.94);color:var(--dm-ink-1);box-shadow:0 1px 6px rgba(0,0,0,0.18)} #dm-eh .mf-modal-title{margin:0 0 14px} #dm-eh #mf-resp-body p.mf-resp-intro{margin-bottom:8px;padding-bottom:0} #dm-eh #mf-resp-modal > [role="dialog"] .mf-ag-hero{padding:0 0 28px !important;margin-bottom:24px} #dm-eh #mf-resp-body .mf-ag-title{font-size:calc(var(--pop-title-size) * 1.2) !important} #dm-eh #mf-resp-modal > [role="dialog"] .mf-resp-sec + .mf-resp-sec{margin-top:30px !important} #dm-eh .mf-ag-scale li{grid-template-columns:104px 1fr;gap:12px} #dm-eh .mf-ballot-modal-head{gap:16px;padding-bottom:18px;margin-bottom:18px} @container (max-width: 460px){ #dm-eh .mf-v4-ag .mf-ag5-row{grid-template-columns:max-content minmax(0, 150px);justify-content:center;column-gap:16px;row-gap:5px} #dm-eh .mf-v4-ag .mf-ag5-cell{display:contents} #dm-eh .mf-v4-ag .mf-ag5-cell .yr{align-self:center;font-size:13px;text-align:left} #dm-eh .mf-v4-ag .mf-ag5-cell.is-latest .yr{font-weight:700} #dm-eh .mf-v4-ag .mf-ag5 .mf-ag5-chip{padding:8px 10px;border-radius:7px;font-size:11px;letter-spacing:0.06em} } } @media (max-width: 360px){ #dm-eh{--eh-g:15px} #dm-eh .mf-file-banner h2{font-size:30px} #dm-eh .eh-mast .count .n{font-size:46px} #dm-eh .mf-file-banner{grid-template-columns:minmax(0, 1fr) 70px} #dm-eh .mf-file-map,#dm-eh .mf-map-svg{width:70px} #dm-eh .mf-map-svg{height:60px} #dm-eh .mf-v4-loss .cs-list{padding:0 12px} #dm-eh .mf-wa-btn{max-width:100%} } @media (hover: none){ #dm-eh .mf-ballot-row[data-ballot]:hover .mf-ballot-paper,#dm-eh .ag-chip[data-ag]:hover,#dm-eh .mf-dist-muni:hover,#dm-eh .mf-story:hover .thumb,#dm-eh .eh-feed-card:hover .thumb,#dm-eh .mf-action-ghost:hover,#dm-eh .rc-rating:hover{transform:none;box-shadow:none} #dm-eh .mf-wa-btn:hover{transform:none;box-shadow:inset 0 0 0 0.88px rgb(8,130,33)} #dm-eh .eh-practical .eh-prac-card:hover{transform:none;box-shadow:none} #dm-eh .mf-action-ghost,#dm-eh .mf-wa-btn,#dm-eh .ag-chip[data-ag],#dm-eh .mf-ballot-row[data-ballot],#dm-eh .mf-dist-muni,#dm-eh .rc-rating,#dm-eh .eh-prac-card{-webkit-tap-highlight-color:transparent} #dm-eh .mf-action-ghost:active,#dm-eh .mf-wa-btn:active,#dm-eh .ag-chip[data-ag]:active,#dm-eh .rc-rating:active,#dm-eh .mf-ballot-row[data-ballot]:active .mf-ballot-paper{transform:scale(0.97)} #dm-eh .mf-dist-muni:active{background:var(--dm-grey-3)} } @media (prefers-reduced-motion: reduce){ #dm-eh .mf-modal-dialog{animation:none !important} } #dm-eh .eh-dm-top{max-width:900px;margin:0 auto;padding:77px 64px 30px;display:flex;justify-content:center} #dm-eh .eh-dm-top a{display:block} #dm-eh .eh-dm-top img{display:block;width:510px;max-width:100%;height:auto;margin:0} @media (max-width: 980px){ #dm-eh .eh-dm-top{padding:72px 32px 24px} } @media (max-width: 640px){ #dm-eh .eh-dm-top{padding:40px 18px 12px} #dm-eh .eh-dm-top img{width:360px} } /* v15: "More questions?" ask card */ .eh-ask-card{text-align:center!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;transition:transform 0.16s ease,box-shadow 0.16s ease!important}#dm-eh .eh-ask-card:hover{background:#fff!important;transform:scale(1.025);box-shadow:0 10px 30px rgba(0,0,0,0.12);position:relative;z-index:2}@media (hover:none){#dm-eh .eh-ask-card:hover{transform:none;box-shadow:none}}#dm-eh .eh-ask-card h3,#dm-eh .eh-ask-card .q{font-family:var(--font-display);font-size:34px;font-weight:700;font-style:normal;line-height:1.05;letter-spacing:0.005em;color:var(--dm-ink-1);margin:0}#dm-eh .eh-ask-card h3{margin-bottom:6px}#dm-eh .eh-ask-card{border:1.5px solid var(--dm-ink-1)!important;border-radius:14px;background:#fff;cursor:pointer}.eh-ask-card .q::before,.eh-ask-card .q::after{content:none!important}@media (max-width:600px){#dm-eh .eh-ask-card{width:100%!important;padding:18px 20px!important;border-radius:12px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}#dm-eh .eh-ask-card h3{font-size:26px;padding:0!important;margin-bottom:6px}#dm-eh .eh-ask-card .q{font-size:19px!important;line-height:1.2;padding:0!important;text-wrap:balance}#dm-eh .eh-ask-card:active{background:var(--dm-ink-1)!important;transform:scale(0.98)}#dm-eh .eh-ask-card:active h3,#dm-eh .eh-ask-card:active .q{color:#fff}} /* ask card: black button, uniform text size matching .eh-prac-card h3 */ #dm-eh .eh-ask-card,#dm-eh .eh-ask-card:hover,#dm-eh .eh-ask-card:active{background:var(--dm-ink-1)!important;border-color:var(--dm-ink-1)!important}#dm-eh .eh-ask-card h3,#dm-eh .eh-ask-card .q{font-size:28px!important;line-height:1.05!important;color:#fff!important}@media (max-width:600px){#dm-eh .eh-ask-card h3,#dm-eh .eh-ask-card .q{font-size:26px!important}} #dm-eh .mf-wa.mf-wa--m{display:none} @media (max-width: 640px){#dm-eh .mf-wa.mf-wa--m{display:block;margin:14px 0 0 !important;padding-top:12px !important;padding-bottom:24px !important}#dm-eh aside .mf-wa{display:none}} @media (min-width: 641px){#dm-eh .mf-v4-assess-top{flex-wrap:nowrap;align-items:center;gap:20px}#dm-eh .mf-v4-assess-top .rc-wm{flex:none;white-space:nowrap}#dm-eh .mf-v4-assess-top .rc-wm em{font-size:24px;white-space:nowrap}#dm-eh .mf-v4-assess-top .rc-rating{flex:none;flex-wrap:nowrap;white-space:nowrap}#dm-eh .mf-v4-assess-top .rc-stars{font-size:24px}} @media (min-width: 721px){#dm-eh .eh-practical .eh-prac-grid{gap:28px;padding-top:14px}#dm-eh .eh-practical .eh-prac-card{min-height:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px 22px;border:1.5px solid var(--dm-grey-2, #c8c8c8);border-radius:14px;background:#fff;box-sizing:border-box}#dm-eh .eh-practical .eh-prac-card:last-child{border-right:1.5px solid var(--dm-grey-2, #c8c8c8)}#dm-eh .eh-practical .eh-prac-card{transition:transform 0.16s ease,box-shadow 0.16s ease}#dm-eh .eh-practical .eh-prac-card:hover{background:#fff;transform:scale(1.025);box-shadow:0 10px 30px rgba(0,0,0,0.12);position:relative;z-index:2}#dm-eh .eh-practical .eh-prac-card:active{background:var(--dm-grey-3)}#dm-eh .eh-practical .eh-prac-card h3{margin:0;font-size:26px}} /* CTA row: newsletter + more questions */ #dm-eh .eh-prac-grid.eh-cta-row{grid-template-columns:repeat(2,minmax(0,571px));justify-content:center;align-items:stretch;gap:20px;margin:8px 0} #dm-eh .eh-ask-card.eh-nl-card,#dm-eh .eh-ask-card.eh-nl-card:hover,#dm-eh .eh-ask-card.eh-nl-card:active{background:#000 url("https://cdn.dailymaverick.co.za/i/dbn6N5NN7_zWJcwnufNh4TBI1XQ=/450x0/smart/file/attachments/orphans/democracy_627792.jpg") center/cover no-repeat!important;position:relative;overflow:hidden} #dm-eh .eh-nl-card::before{content:"";position:absolute;inset:0;background:#000;opacity:var(--nl-overlay,0.55);pointer-events:none} #dm-eh .eh-nl-card>*{position:relative} @media (max-width:600px){#dm-eh .eh-prac-grid.eh-cta-row{grid-template-columns:1fr;gap:12px}} @media (max-width:720px){#dm-eh .eh-prac-grid.eh-cta-row{grid-template-columns:1fr;gap:12px;justify-items:center}#dm-eh .eh-cta-row .eh-prac-card{width:88%!important;max-width:340px!important}} #dm-eh .eh-ask-card .q{font-family:"Geist",sans-serif!important;font-weight:400!important;font-size:15px!important;line-height:1.3!important;letter-spacing:0!important}#dm-eh .eh-cta-row .eh-ask-card{padding-top:14px!important;padding-bottom:14px!important}@media (max-width:600px){#dm-eh .eh-ask-card .q{font-size:14px!important}#dm-eh .eh-cta-row .eh-ask-card{padding-top:12px!important;padding-bottom:12px!important}} #dm-eh .eh-cta-row .eh-ask-card:not(.eh-nl-card),#dm-eh .eh-cta-row .eh-ask-card:not(.eh-nl-card):hover,#dm-eh .eh-cta-row .eh-ask-card:not(.eh-nl-card):active{background:#0A0A0A!important;border-color:#0A0A0A!important} /* v17: desktop file banner, shorter; type + province on one line, district below, larger type */ @media (min-width: 641px){#dm-eh .mf-file-banner{padding-top:22px;padding-bottom:22px}#dm-eh .mf-file-banner .type{font-size:14px;line-height:1.5;margin-top:8px;padding-bottom:6px}#dm-eh .mf-type-dm{display:block}#dm-eh .mf-type-dm .sep{display:none}#dm-eh .mf-file-map{width:140px}#dm-eh .mf-map-svg{width:140px;height:119px}#dm-eh .mf-map-cap{margin-top:5px}} /* v17: population to the left of the type line */ #dm-eh .mf-type-pop .lbl{display:block;font-size:10px;font-weight:700;letter-spacing:0.14em;color:rgba(255,255,255,0.48);line-height:1.2}#dm-eh .mf-type-pop .v{display:block;font-size:28px;font-weight:300;letter-spacing:-0.02em;line-height:1;color:#fff;text-transform:none} @media (min-width: 641px){#dm-eh .mf-file-banner .type.has-pop{display:flex;align-items:center}#dm-eh .mf-type-pop{flex:none;padding-right:20px;margin-right:20px;border-right:1px solid rgba(255,255,255,0.16)}#dm-eh .mf-type-pop .lbl{margin-bottom:6px}#dm-eh .mf-type-txt{min-width:0}} @media (max-width: 640px){#dm-eh .mf-file-banner .type.has-pop{display:flex;flex-direction:column}#dm-eh .mf-type-pop{order:2;display:flex;align-items:baseline;gap:8px;margin-top:8px}#dm-eh .mf-type-pop .v{font-size:20px}} /* v19 · banner facts on local and metro files: population, governed by, mayor (governed by and mayor from the elections API) */ #dm-eh .mf-banner-facts.is-gov{display:flex;align-items:flex-start;margin-top:12px;padding-top:8px;padding-bottom:8px;border-top:0} #dm-eh .mf-banner-facts.is-gov .bf{flex:1 1 0;min-width:0;padding:0 24px} #dm-eh .mf-banner-facts.is-gov .bf:first-child{padding-left:0;border-left:0} #dm-eh .mf-banner-facts.is-gov .bf:last-child{padding-right:0} #dm-eh .mf-banner-facts.is-gov .bf-count{flex:none} #dm-eh .mf-banner-facts.is-gov .bf-gov{flex:0 1 auto;max-width:300px} #dm-eh .mf-banner-facts.is-gov .bf .lbl{margin-bottom:8px} #dm-eh .mf-banner-facts.is-gov .bf .v{display:block} #dm-eh .mf-banner-facts.is-gov .bf-count .v{font-size:24px;font-weight:400;letter-spacing:-0.02em;line-height:1} #dm-eh .mf-banner-facts.is-gov .bf:not(.bf-count) .v{font-size:17px;font-weight:400;line-height:1.22;letter-spacing:-0.015em;text-wrap:pretty} #dm-eh .mf-banner-facts.is-gov .bf .v b{font-weight:600} #dm-eh .bf-wait{display:block;width:72%;max-width:180px;height:16px;margin-top:3px;border-radius:2px;background:rgba(255,255,255,0.14);animation:dm-eh-wait 1.1s ease-in-out infinite} @keyframes dm-eh-wait{50%{opacity:0.35}} @media (max-width: 640px){ #dm-eh .mf-banner-facts.is-gov{margin-top:10px;padding-top:8px} #dm-eh .mf-banner-facts.is-gov .bf{padding:0 12px 0 13px} #dm-eh .mf-banner-facts.is-gov .bf:first-child{padding:0 13px 0 0} #dm-eh .mf-banner-facts.is-gov .bf:last-child{padding-right:0} #dm-eh .mf-banner-facts.is-gov .bf .lbl{margin-bottom:6px} #dm-eh .mf-banner-facts.is-gov .bf-count .v{font-size:21px} #dm-eh .mf-banner-facts.is-gov .bf:not(.bf-count) .v{font-size:14.5px;line-height:1.25;letter-spacing:-0.01em} } /* v19 · Use my location, beside the search box (under it on phones) */ #dm-eh .mf-find{display:flex;align-items:flex-start;gap:12px} #dm-eh .mf-find .mf-combo{flex:1 1 auto;min-width:0} #dm-eh .mf-locate{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:56px;margin:0;padding:0 12px 0 10px;border:1px solid var(--dm-ink-1);border-radius:6px;background:var(--dm-ink-1);color:#fff;font-family:var(--font-ui);font-size:13.5px;font-weight:600;line-height:1;letter-spacing:-0.01em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 0 rgba(0,0,0,0.12);transition:transform 0.14s ease,box-shadow 0.14s ease,background 0.12s} #dm-eh .mf-locate svg{flex:none;width:15px;height:15px} #dm-eh .mf-locate:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,0.22),0 2px 4px rgba(0,0,0,0.12)} #dm-eh .mf-locate:active{transform:translateY(1px) scale(0.98);box-shadow:0 1px 2px rgba(0,0,0,0.25);background:#000;transition-duration:0.05s} #dm-eh .mf-locate:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(31,31,31,0.25)} #dm-eh .mf-locate[disabled]{cursor:progress;transform:none;box-shadow:none;opacity:0.85} #dm-eh .mf-locate.is-busy svg{animation:dm-eh-wait 0.9s ease-in-out infinite} #dm-eh .mf-locate[hidden]{display:none} #dm-eh .mf-loc-msg{margin:12px 0 0;max-width:640px;font-family:var(--font-ui);font-size:13.5px;line-height:1.45;color:var(--dm-ink-2)} #dm-eh .mf-loc-msg[hidden]{display:none} @media (max-width: 640px){ #dm-eh .mf-find{flex-direction:column;align-items:stretch;gap:10px} #dm-eh .mf-find .mf-combo{max-width:none} #dm-eh .mf-locate{width:100%;height:50px} } @media (hover: none){#dm-eh .mf-locate:hover{transform:none;box-shadow:0 1px 0 rgba(0,0,0,0.12)}#dm-eh .mf-locate:active{transform:translateY(1px) scale(0.98);background:#000}} /* v19 · ward Governed by box, under the ward selector; label over the ward's candidate list */ #dm-eh .mf-wardgov{margin-top:20px;padding:22px 24px 20px;background:var(--dm-cream);border:1px solid var(--dm-grey-1)} #dm-eh .mf-wardgov[hidden]{display:none} #dm-eh .wg-grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr);gap:18px 32px;align-items:start} #dm-eh .wg-grid.is-single{grid-template-columns:minmax(0, 1fr)} #dm-eh .wg-lbl,#dm-eh .mf-wardpanel .wp-lbl{display:block;margin:0;font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:0.14em;line-height:1.3;text-transform:uppercase;color:var(--dm-ink-3)} #dm-eh .wg-party{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:12px} #dm-eh .wg-sw{flex:none;align-self:center;width:18px;height:18px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12)} #dm-eh .wg-ab{font-family:var(--font-display);font-size:34px;font-weight:700;line-height:1;letter-spacing:0.005em;color:var(--dm-ink-1)} #dm-eh .wg-full{font-family:var(--font-ui);font-size:15px;line-height:1.3;color:var(--dm-ink-2)} #dm-eh .wg-break{min-width:0;padding-left:32px;border-left:1px solid var(--dm-grey-2)} #dm-eh .wg-bar{display:flex;gap:2px;height:14px;margin-top:14px} #dm-eh .wg-bar span{display:block;min-width:3px} #dm-eh .wg-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;padding:0;list-style:none;font-family:var(--font-ui);font-size:13px;line-height:1.3;color:var(--dm-ink-2)} #dm-eh .wg-legend li{display:flex;align-items:center;gap:6px;margin:0;padding:0} #dm-eh .wg-legend i{flex:none;width:10px;height:10px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12)} #dm-eh .wg-legend b{font-weight:700;color:var(--dm-ink-1)} #dm-eh .wg-wait{width:46%;max-width:220px;height:30px;margin-top:12px;background:rgba(23,23,23,0.08)} #dm-eh .wg-src{margin:16px 0 0;font-family:var(--font-ui);font-size:11.5px;line-height:1.5;color:var(--dm-ink-4)} #dm-eh .wg-src strong{font-weight:700;color:var(--dm-red-cta)} #dm-eh .mf-wardpanel .wp-cands > .wp-lbl{margin:32px 0 10px;padding-left:20px;font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:0;line-height:1.15;text-transform:none;color:#000} @media (min-width: 641px){#dm-eh .mf-wardpanel .wp-cand{margin:0 20px}#dm-eh .mf-wardpanel .wp-cand .nm{padding-left:0}} /* ward box sits on the page's white with black text; the council box (.mf-munigov, in the black banner) keeps white text */ #dm-eh .mf-wardgov{background:#fff;border:0;color:var(--dm-ink-1);padding:4px 0 0} @media (min-width: 641px){#dm-eh .mf-wardgov{margin-left:20px;margin-right:20px}} #dm-eh .mf-wardgov .wg-lbl,#dm-eh .mf-wardgov .wg-ab,#dm-eh .mf-wardgov .wg-full,#dm-eh .mf-wardgov .wg-legend,#dm-eh .mf-wardgov .wg-legend b{color:var(--dm-ink-1)} #dm-eh .mf-munigov{color:#fff} #dm-eh .mf-munigov .wg-lbl,#dm-eh .mf-munigov .wg-ab,#dm-eh .mf-munigov .wg-full,#dm-eh .mf-munigov .wg-legend,#dm-eh .mf-munigov .wg-legend b,#dm-eh .mf-munigov .wg-src,#dm-eh .mf-munigov .wg-src strong{color:#fff} #dm-eh .mf-munigov .wg-break{border-color:rgba(255,255,255,0.3)} #dm-eh .mf-munigov .wg-wait{background:rgba(255,255,255,0.15)} #dm-eh .mf-munigov .wg-sw,#dm-eh .mf-munigov .wg-legend i{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.25)} @media (max-width: 640px){ #dm-eh .mf-wardgov{margin-top:18px;padding:4px 0 0} #dm-eh .wg-grid{grid-template-columns:minmax(0, 1fr);gap:16px} #dm-eh .wg-break{padding:16px 0 0;border-left:0;border-top:1px solid var(--dm-grey-2)} #dm-eh .wg-ab{font-size:30px} #dm-eh .mf-wardpanel .wp-cands > .wp-lbl{margin-top:26px;padding-left:0;font-size:23px} } @media (max-width: 640px){#dm-eh #mf-file-body .mf-v4-assess{border-bottom:0 !important;padding-bottom:0 !important;margin-bottom:14px !important}#dm-eh #mf-file-body .mf-file-left .mf-actions-top{margin:0 !important;padding:12px 0 32px !important}} /* v19 · council Governed by box in the black banner, below population and mayor (data: municipality API) */ #dm-eh .mf-munigov{margin:18px 0 4px;padding:17px 0 9px;background:transparent;border:0;border-top:1px solid rgba(255,255,255,0.14);border-bottom:0} #dm-eh .mf-munigov[hidden]{display:none} @media (min-width: 641px){#dm-eh .mf-munigov{margin-left:0;margin-right:0}} #dm-eh .mf-munigov .wg-lbl{font-size:10px;letter-spacing:0.14em;line-height:1.25;color:rgba(255,255,255,0.48)} @media (max-width: 640px){#dm-eh .mf-munigov .wg-lbl{font-size:9.5px;letter-spacing:0.1em}} #dm-eh .wg-lbl .wg-yr{font-weight:900;color:var(--dm-ink-1)}#dm-eh .mf-munigov .wg-lbl .wg-yr{color:#fff} #dm-eh .mf-munigov .wg-break{border-color:rgba(255,255,255,0.14)} #dm-eh .mf-munigov .wg-full{color:rgba(255,255,255,0.72);font-size:11px;line-height:14px} #dm-eh .wg-note{margin:10px 0 0;font-family:var(--font-ui);font-size:14px;line-height:1.35;color:rgba(255,255,255,0.72);text-wrap:pretty} #dm-eh .wg-note b{font-weight:600;color:#fff} #dm-eh .wg-note .nb{white-space:nowrap} @media (max-width: 640px){#dm-eh .mf-munigov{margin-top:14px;padding:14px 0}#dm-eh .mf-munigov .wg-break{border-color:rgba(255,255,255,0.14)}} @media (max-width: 640px){#dm-eh .mf-munigov{grid-column:1 / -1;grid-row:4}} #dm-eh .mf-munigov .wg-grid{width:573px;max-width:100%} #dm-eh .mf-munigov .wg-grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr)} #dm-eh .mf-munigov .wg-main{order:1;padding-left:0;border-left:0} #dm-eh .mf-munigov .wg-break{order:2;padding-left:32px;border-left:1px solid rgba(255,255,255,0.14)} @media (max-width: 640px){#dm-eh .mf-munigov .wg-grid{grid-template-columns:minmax(0, 1fr)}#dm-eh .mf-munigov .wg-main{padding:0;border-top:0}#dm-eh .mf-munigov .wg-break{padding:16px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,0.14)}} /* v19 · larger locator map, anchored top right of the banner and filling its height */ @media (min-width: 641px){#dm-eh .mf-file-banner{grid-template-columns:minmax(0, 1fr) clamp(260px, 38%, 400px);column-gap:24px} #dm-eh .mf-file-map{align-self:start;width:auto;display:flex;flex-direction:column;align-items:flex-end;margin:-6px -10px 0 0} #dm-eh .mf-map-svg{width:100%;height:auto;aspect-ratio:260 / 235} #dm-eh .mf-map-svg svg{display:block;width:100%;height:100%} #dm-eh .mf-map-cap{align-self:stretch;text-align:right;font-size:9px;letter-spacing:0.12em;margin-top:6px;padding-right:8px}} /* v20 · locator map: the red light breathes, barely (its ring is in the script) */ #dm-eh .sal-light{animation:dm-eh-sal-breathe 3.2s ease-in-out infinite alternate} @keyframes dm-eh-sal-breathe{from{opacity:0.8}to{opacity:1}} @media (prefers-reduced-motion: reduce){#dm-eh .sal-light{animation:none}} /* v20 · phones: larger locator map, filling the banner's top-right corner (extra height goes under the type line, not between name and type) */ @media (max-width: 640px){#dm-eh .mf-file-banner{grid-template-columns:minmax(0, 1fr) clamp(112px, 42%, 180px);grid-template-rows:auto 1fr;column-gap:12px} #dm-eh .mf-file-map{width:auto;margin:-6px -8px -6px 0} #dm-eh .mf-map-svg{width:100%;height:auto;aspect-ratio:260 / 234} #dm-eh .mf-map-svg svg{display:block;width:100%;height:100%}} @media (max-width: 360px){#dm-eh .mf-file-banner{grid-template-columns:minmax(0, 1fr) clamp(100px, 38%, 140px);column-gap:10px}} /* v20 · Reality Check as a black button: white wordmark and stars; the whole button opens the rating explainer */ #dm-eh .mf-v4-assess-top{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;max-width:100%;padding:14px 26px;background:var(--dm-ink-1);border-radius:6px;color:#fff;vertical-align:top} #dm-eh .mf-v4-assess-top .rc-wm{color:#fff} #dm-eh .mf-v4-assess-top .rc-stars{color:rgba(255,255,255,0.2)} #dm-eh .mf-v4-assess-top .rc-stars .fill{color:#f2b821} #dm-eh .mf-v4-assess-top .rc-na{color:rgba(255,255,255,0.85);background:transparent;border-color:rgba(255,255,255,0.35)} #dm-eh .mf-v4-assess-top.is-btn{cursor:pointer;transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;-webkit-tap-highlight-color:transparent} #dm-eh .mf-v4-assess-top.is-btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,0.22),0 2px 4px rgba(0,0,0,0.12)} #dm-eh .mf-v4-assess-top.is-btn:active{transform:translateY(1px) scale(0.98);box-shadow:0 1px 2px rgba(0,0,0,0.25);background:#000;transition-duration:0.05s} #dm-eh .mf-v4-assess-top.is-btn:focus-visible{outline:2px solid var(--dm-blue);outline-offset:3px} #dm-eh .mf-v4-assess-top .rc-rating,#dm-eh .mf-v4-assess-top .rc-rating:hover,#dm-eh .mf-v4-assess-top .rc-rating:active{cursor:inherit;transform:none} @media (min-width: 641px){#dm-eh .mf-v4-assess-top{flex-wrap:nowrap;gap:20px;padding:15px 28px}} @media (max-width: 640px){#dm-eh .mf-v4-assess-top{gap:6px 14px;padding:14px 20px}#dm-eh .mf-v4-assess-top .rc-wm em{font-size:19px}#dm-eh .mf-v4-assess-top .rc-stars{font-size:19px}} @media (hover: none){#dm-eh .mf-v4-assess-top.is-btn:hover{transform:none;box-shadow:none}} /* v21 · Reality Check explainer: a black header like the button that opens it; the working as a ledger (scores in the left column, each measure's figures beside them, the rating under a rule); the rules in a grey panel at the foot. The dialog drops its padding and each band carries its own. */ #dm-eh #mf-resp-modal.is-rc .mf-modal-dialog{padding:0 !important;border:0} #dm-eh #mf-resp-modal.is-rc .mf-modal-x{top:23px;right:22px;z-index:2;color:rgba(255,255,255,0.8)} #dm-eh #mf-resp-modal.is-rc .mf-modal-x:hover{background:rgba(255,255,255,0.14);color:#fff} #dm-eh #mf-resp-modal.is-rc .mf-modal-x:focus-visible{outline:2px solid #fff;outline-offset:2px} #dm-eh .rcx{font-family:var(--font-ui);color:var(--dm-ink-1)} #dm-eh .rcx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} #dm-eh .rcx-hero{padding:32px 44px 34px;background:var(--dm-ink-1);color:#fff;border-radius:10px 10px 0 0} #dm-eh .rcx-wm{display:block;margin:0 56px 0 0;font-family:var(--font-ui);font-size:14px;font-style:italic;font-weight:700;line-height:1.2;letter-spacing:0.01em;text-transform:uppercase;color:#fff} #dm-eh .rcx-title{margin:12px 56px 0 0;padding:0;font-family:var(--font-display);font-size:48px;font-weight:700;line-height:1.02;letter-spacing:-0.015em;text-transform:none;color:#fff;overflow-wrap:break-word;text-wrap:balance} #dm-eh .rcx-rating{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:20px} #dm-eh .rcx-rating .rc-stars{font-size:28px;color:rgba(255,255,255,0.2)} #dm-eh .rcx-rating .rc-stars .fill{color:#f2b821} #dm-eh .rcx-of{font-family:var(--font-ui);font-size:15px;font-weight:600;line-height:1;color:rgba(255,255,255,0.86);font-variant-numeric:tabular-nums} #dm-eh .rcx-main{padding:30px 44px 40px} #dm-eh .rcx-h{margin:0;padding:0 0 12px;font-family:var(--font-ui);font-size:11.5px;font-weight:700;line-height:1.3;letter-spacing:0.1em;text-transform:uppercase;color:var(--dm-ink-2)} #dm-eh .rcx-ledger{border-top:1px solid var(--dm-ink-1)} #dm-eh .rcx-row{display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-areas:"sc name" ". body";align-items:baseline;column-gap:24px;row-gap:14px;padding:22px 0 26px;border-top:1px solid var(--dm-grey-1)} #dm-eh .rcx-row:first-child{border-top:0} #dm-eh .rcx-name{grid-area:name;margin:0;padding:0;font-family:var(--font-display);font-size:21px;font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--dm-ink-1);text-wrap:balance} #dm-eh .rcx-sc{grid-area:sc;font-family:var(--font-display);font-size:34px;font-weight:700;line-height:1;letter-spacing:-0.01em;color:var(--dm-ink-1);white-space:nowrap} #dm-eh .rcx-body{grid-area:body;display:flex;flex-direction:column;gap:14px;min-width:0} #dm-eh .rcx-row.is-off .rcx-name,#dm-eh .rcx-row.is-off .rcx-sc{color:var(--dm-ink-5)} #dm-eh .rcx-row.rcx-total{padding-bottom:0;border-top:2px solid var(--dm-ink-1)} #dm-eh .rcx-fig,#dm-eh .rcx-adj,#dm-eh .rcx-note{margin:0;padding:0;font-family:var(--font-ui);font-size:14.5px;line-height:1.5;color:var(--dm-ink-2);font-variant-numeric:tabular-nums} #dm-eh .rcx-fig strong{font-weight:700;color:var(--dm-ink-1)} #dm-eh .rcx-note{margin-top:-4px;font-size:12.5px;color:var(--dm-ink-4)} #dm-eh .rcx-adj{display:flex;align-items:baseline;gap:10px} #dm-eh .rcx-adj-v{flex:none;min-width:30px;padding:2px 7px;border-radius:3px;background:var(--dm-grey-3);font-size:12.5px;font-weight:700;line-height:1.4;text-align:center;white-space:nowrap;color:var(--dm-ink-2)} #dm-eh .rcx-adj-v.is-up{background:#E9F0E5;color:#3F5F30} #dm-eh .rcx-adj-v.is-down{background:#FBE9E7;color:#A61212} #dm-eh .rcx-adj-t{min-width:0} #dm-eh .rcx-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px} #dm-eh .rcx-band{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:9px;border-top:5px solid var(--dm-grey-2);font-family:var(--font-ui);line-height:1.25;text-align:center;color:var(--dm-ink-4)} #dm-eh .rcx-band .sc{font-size:13px;font-weight:700;color:var(--dm-ink-3)} #dm-eh .rcx-band .rg{font-size:11.5px;font-variant-numeric:tabular-nums} #dm-eh .rcx-band.is-on{border-top-color:var(--dm-ink-1);color:var(--dm-ink-1)} #dm-eh .rcx-band.is-on .sc{color:var(--dm-ink-1)} #dm-eh .rcx-band.is-on .rg{font-weight:600} #dm-eh .rcx-years{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:3px} #dm-eh .rcx-yr{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:0;text-align:center} #dm-eh .rcx-yr .y{font-family:var(--font-ui);font-size:11.5px;font-weight:600;line-height:1.2;color:var(--dm-ink-4);font-variant-numeric:tabular-nums} #dm-eh .rcx-yr .rcx-ag{display:block;min-width:0;padding:7px 4px;border-radius:5px;font-size:10px;letter-spacing:0.05em;line-height:1.1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #dm-eh .rcx-yr .pt{font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1;color:var(--dm-ink-1)} #dm-eh .rcx-rules{padding:30px 44px 34px;background:var(--dm-grey-3);border-radius:0 0 10px 10px} #dm-eh .rcx-rules .rcx-h{border-bottom:1px solid var(--dm-grey-2)} #dm-eh .rcx-rl{margin:0;padding:0;list-style:none} #dm-eh .rcx-rl li{display:grid;grid-template-columns:60px minmax(0,1fr);column-gap:24px;margin:0;padding:14px 0 0;list-style:none} #dm-eh .rcx-rl .n{font-family:var(--font-ui);font-size:12px;font-weight:700;line-height:24px;color:var(--dm-ink-4);font-variant-numeric:tabular-nums} #dm-eh .rcx-rl .t{font-family:var(--font-serif);font-size:15.5px;line-height:1.55;color:var(--dm-ink-2)} #dm-eh .rcx-src{margin:24px 0 0;padding:14px 0 0;border-top:1px solid var(--dm-grey-2);font-family:var(--font-ui);font-size:12.5px;line-height:1.5;color:var(--dm-ink-4)} #dm-eh .rcx-src a{color:var(--dm-blue);text-decoration:none} #dm-eh .rcx-src a:hover{color:var(--dm-blue);text-decoration:underline;text-underline-offset:2px} @media (max-width: 980px){#dm-eh .rcx-hero,#dm-eh .rcx-main,#dm-eh .rcx-rules{padding-left:34px;padding-right:34px}} @media (max-width: 640px){ #dm-eh #mf-resp-modal.is-rc .mf-modal-x{top:10px;right:auto;margin:12px 12px -48px auto;color:var(--dm-ink-1)} #dm-eh #mf-resp-modal.is-rc .mf-modal-x:hover{background:rgba(255,255,255,0.94);color:var(--dm-ink-1)} #dm-eh .rcx-hero{padding:22px 20px 26px;border-radius:14px 14px 0 0} #dm-eh .rcx-wm{margin-right:52px;font-size:13px} #dm-eh .rcx-title{margin:10px 0 0;font-size:36px} #dm-eh .rcx-rating{margin-top:16px} #dm-eh .rcx-rating .rc-stars{font-size:24px} #dm-eh .rcx-main{padding:24px 20px 32px} #dm-eh .rcx-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name sc" "body body";column-gap:16px;row-gap:12px;padding:18px 0 22px} #dm-eh .rcx-name{font-size:19px} #dm-eh .rcx-sc{font-size:28px;text-align:right} #dm-eh .rcx-fig,#dm-eh .rcx-adj{font-size:14px} #dm-eh .rcx-years{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--dm-grey-1)} #dm-eh .rcx-yr{display:grid;grid-template-columns:60px minmax(0,1fr) 24px;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--dm-grey-1);text-align:left} #dm-eh .rcx-yr .y{font-size:12.5px} #dm-eh .rcx-yr .rcx-ag{justify-self:start;padding:6px 10px;font-size:10.5px} #dm-eh .rcx-yr .pt{font-size:18px;text-align:right} #dm-eh .rcx-scale{gap:2px} #dm-eh .rcx-band .rg{font-size:10.5px} #dm-eh .rcx-rules{padding:24px 20px calc(32px + env(safe-area-inset-bottom));border-radius:0} #dm-eh .rcx-rl li{grid-template-columns:20px minmax(0,1fr);column-gap:8px} #dm-eh .rcx-rl .t{font-size:15px} } /* v22 · hung council: the governing arrangement as text in the Governed by box; a box with only a vote breakdown */ #dm-eh .wg-txt{margin:12px 0 0;font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.15;letter-spacing:0.005em;color:var(--dm-ink-1);text-wrap:balance} #dm-eh .wg-txt .nb{white-space:nowrap} #dm-eh .mf-munigov .wg-txt{color:#fff} #dm-eh .mf-munigov .wg-grid.is-single{grid-template-columns:minmax(0, 1fr)} /* v22 · council box: the Governed by column only as wide as its text; the vote breakdown takes the rest */ @media (min-width: 641px){#dm-eh .mf-munigov .wg-grid:not(.is-single){grid-template-columns:minmax(0, max-content) minmax(0, 1fr);column-gap:6px}#dm-eh .mf-munigov .wg-main{width:137px;max-width:260px;padding-right:0}#dm-eh .mf-munigov .wg-full{flex-basis:100%}#dm-eh .mf-munigov .wg-break{padding-left:28px}} #dm-eh .wg-grid.is-single > .wg-break{padding:0;border:0} /* v25 · coalition builder: the four-metro embed (coalition-embed/) in a frame 840px high, below the newsletter and questions buttons, as wide as the Check your municipality box at every width (6px in from the screen's edges on phones, as that box is) */ #dm-eh .eh-coalition{padding:18px 0 20px;background:#fff} #dm-eh .eh-coalition-frame{display:block;width:100%;height:840px;margin:0;border:0;background:#fff} @media (max-width: 640px){#dm-eh .eh-coalition{padding:8px 0 16px}#dm-eh .eh-coalition-frame{width:calc(100% + 2 * (var(--eh-g) - 6px));margin:0 calc(6px - var(--eh-g))}} /* v25 · newsletter and questions buttons moved above the coalition builder, with a divider under them (as wide as the coalition frame) */ #dm-eh .eh-coalition .eh-cta-row{margin:8px 0 0;padding:0 0 28px;border-bottom:0} @media (max-width: 640px){#dm-eh .eh-coalition .eh-cta-row{margin:8px calc(6px - var(--eh-g)) 0;padding:0 calc(var(--eh-g) - 6px) 41px}#dm-eh .eh-feed .eh-sec-head:first-child{margin-top:20px}} /* v25 · desktop: Manifesto Breakdowns and the coalition builder get the Latest Election Coverage divider (2px line, 46px below the content above it, 16px above the heading). The embed's headline sits 27px down inside its frame, so the frame tucks 11px under the line. */ @media (min-width: 641px){#dm-eh .eh-sec-head.eh-sec-head-mb{margin-top:15px;border-top:2px solid var(--dm-ink-1)}#dm-eh .eh-coalition .eh-cta-row{position:relative;z-index:1;padding-bottom:46px;border-bottom:0}#dm-eh .eh-coalition-frame{margin-top:-11px}} /* post-elections v2 · seat board: v27's coalition builder rules (the AllMetrosEmbedV5 embed's own), scoped to .ehb, the class the board's host gets (#eh-cb, the coalition builder). */ /* v27 · coalition builder, built into the page: #eh-cb (the .eh-coalition-frame box above keeps its size and place) is drawn by the script's "coalition builder" block. The rules after the first two are the AllMetrosEmbedV5 embed's own, scoped to #eh-cb. The first gives #eh-cb what a frame's page starts with; the second clears whatever the hub or the site sets on the builder's parts (its own rules and inline styles still win), so it draws as it did in its frame. */ #dm-eh .ehb{position:relative;overflow:hidden;background:#fff;color:#171717;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:16px;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:normal;font-feature-settings:normal;font-variation-settings:normal;font-kerning:auto;letter-spacing:normal;word-spacing:normal;text-align:left;text-indent:0;text-transform:none;text-shadow:none;white-space:normal;word-break:normal;overflow-wrap:normal;hyphens:manual;visibility:visible;cursor:auto;direction:ltr;text-rendering:auto;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto} #dm-eh .ehb *:not(svg,svg *){all:revert} #dm-eh .ehb{background:#ffffff} #dm-eh .ehb a{color:#a61212} #dm-eh .ehb a:hover{color:#171717} #dm-eh .ehb{-webkit-text-size-adjust:100%;text-size-adjust:100%} #dm-eh .ehb button{font-family:inherit;-webkit-tap-highlight-color:transparent} #dm-eh .ehb button:focus-visible{outline:2px solid #d33d3d;outline-offset:-2px} #dm-eh .ehb .e-eye:focus-visible,#dm-eh .ehb .e-reset:focus-visible{outline:none} #dm-eh .ehb .e-eye:focus-visible span,#dm-eh .ehb .e-reset:focus-visible span{outline:2px solid #d33d3d;outline-offset:2px} #dm-eh .ehb .chip,#dm-eh .ehb .tab{transition:background-color .15s ease,opacity .3s ease} @media (hover: hover){ #dm-eh .ehb .tab.is-idle:hover{background-color:#e9e9e9 !important} #dm-eh .ehb .chip:hover .mark:not(.is-on) .mark-art{background-color:#ffffff;transform:translateY(calc(-1 * var(--pop,4px))) scale(1.03);box-shadow:0 0 0 1px rgba(40,32,24,.08),0 1px 2px rgba(40,32,24,calc(.1 * var(--lsh,1))),0 calc(var(--pop,4px) * .75 + 2px) 10px rgba(40,32,24,calc(.14 * var(--lsh,1)));transition-timing-function:cubic-bezier(.2,1.6,.4,1),ease,ease,ease;transition-timing-function:linear(0, 0.095 2%, 0.269 4.8%, 0.659 10.7%, 0.835 13.7%, 0.958 16.3%, 1.052 18.9%, 1.118 21.5%, 1.16 24.3%, 1.176 27.6%, 1.161 31.7%, 1.083 39.6%, 1.01 47.4%, 0.978 54.1%, 0.973 62.8%, 1.004 85.7%, 1),ease,ease,ease} #dm-eh .ehb .chip.is-faded:hover{opacity:.75 !important} #dm-eh .ehb .e-eye.is-closed:hover span{background:#3d3d3d !important;border-color:#3d3d3d !important} #dm-eh .ehb .e-reset:hover span{background:#e9e9e9 !important} #dm-eh .ehb .e-info a:hover{color:#d4d4d4 !important} #dm-eh .ehb .chip.is-picked:hover .cnt-n{opacity:0} #dm-eh .ehb .chip.is-picked:hover .cnt-x{opacity:1} #dm-eh .ehb .chip.is-picked:hover .cnt-x svg{transform:scale(1)} } #dm-eh .ehb .chip.is-faded:focus-visible{opacity:1 !important} #dm-eh .ehb button{touch-action:manipulation} #dm-eh .ehb .chip:active .mark-art{scale:.94} #dm-eh .ehb .tab.is-idle:active{background-color:#d4d4d4 !important;transition-duration:0s !important} #dm-eh .ehb .e-reset:active span{background:#d4d4d4 !important;transition-duration:0s !important} #dm-eh .ehb .e-maj{transition:opacity .12s ease,transform .46s cubic-bezier(.2,1.6,.4,1),visibility .46s;transition-delay:var(--majd,0ms);transition-timing-function:ease,linear(0, 0.095 2%, 0.269 4.8%, 0.659 10.7%, 0.835 13.7%, 0.958 16.3%, 1.052 18.9%, 1.118 21.5%, 1.16 24.3%, 1.176 27.6%, 1.161 31.7%, 1.083 39.6%, 1.01 47.4%, 0.978 54.1%, 0.973 62.8%, 1.004 85.7%, 1),ease} #dm-eh .ehb .e-maj::after{content:"";position:absolute;left:50%;top:100%;width:2px;margin-left:-1px;height:calc(14px + var(--stick));background:#181818} #dm-eh .ehb .e-info{animation:ehcb-e-drop .28s cubic-bezier(.2,.7,.2,1) both} @keyframes ehcb-e-drop{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}} #dm-eh .ehb .e-box{--chin:35px} #dm-eh .ehb .e-chart{max-height:325px} #dm-eh .ehb .e-parties{--rowmin:46px;min-height:calc(var(--nrows,6) * var(--rowmin))} #dm-eh .ehb .e-rows{--name:96px;--g:8px;--count:42px;--dg:4px;--dv:4px;--rows:var(--fit-rows,4);--cols:var(--fit-cols,29);--dmax:9px;--rp:12px;--air:8px;--dot:var(--fit-dot,min(var(--dmax),calc((100cqw - 2 * var(--rp) - var(--name) - 2 * var(--g) - var(--count) - (var(--cols) - 1) * var(--dg)) / var(--cols)),calc((100cqh / var(--nrows,6) - var(--air) - (var(--rows) - 1) * var(--dv)) / (var(--rows) + 1.8 * var(--hk,.174)))))} @supports (width:round(down,1.5px,1px)){ #dm-eh .ehb .e-rows{--dot:var(--fit-dot,round(down,min(var(--dmax),calc((100cqw - 2 * var(--rp) - var(--name) - 2 * var(--g) - var(--count) - (var(--cols) - 1) * var(--dg)) / var(--cols)),calc((100cqh / var(--nrows,6) - var(--air) - (var(--rows) - 1) * var(--dv)) / (var(--rows) + 1.8 * var(--hk,.174)))),1px))} } #dm-eh .ehb .pdots{flex:none;position:relative;display:block;width:max(0px,calc(var(--pc,0) * var(--dot) + (var(--pc,0) - 1) * var(--dg)));height:calc(var(--rows) * var(--dot) + (var(--rows) - 1) * var(--dv) + var(--dot) * 1.8 * var(--hk,.174))} #dm-eh .ehb .e-pegs,#dm-eh .ehb .pdots canvas{display:block;pointer-events:none} #dm-eh .ehb .mark-art{background-color:rgba(255,255,255,0);transform:translateY(0) scale(1);box-shadow:0 0 0 0 rgba(40,32,24,0),0 0 0 0 rgba(40,32,24,0),0 0 0 0 rgba(40,32,24,0);transition:transform .46s cubic-bezier(.2,1.25,.4,1),box-shadow .3s ease,translate .15s ease,background-color .15s ease;transition-timing-function:linear(0, 0.069 1.3%, 0.195 3%, 0.591 7.8%, 0.746 10%, 0.859 12%, 0.945 13.9%, 1.012 16.1%, 1.055 18.5%, 1.075 21.5%, 1.065 25.9%, 1.007 36.7%, 0.994 46.1%, 1),ease,ease,ease;transition-delay:var(--pd,0ms),var(--pd,0ms),0ms,var(--pd,0ms)} #dm-eh .ehb .mark.is-on .mark-art{background-color:#181818;transform:translateY(calc(-1 * var(--pop,4px))) scale(1.03);box-shadow:0 0 0 1px rgba(40,32,24,.08),0 1px 2px rgba(40,32,24,calc(.1 * var(--lsh,1))),0 calc(var(--pop,4px) * .75 + 2px) 10px rgba(40,32,24,calc(.14 * var(--lsh,1)));transition-timing-function:cubic-bezier(.2,1.6,.4,1),ease,ease,ease;transition-timing-function:linear(0, 0.095 2%, 0.269 4.8%, 0.659 10.7%, 0.835 13.7%, 0.958 16.3%, 1.052 18.9%, 1.118 21.5%, 1.16 24.3%, 1.176 27.6%, 1.161 31.7%, 1.083 39.6%, 1.01 47.4%, 0.978 54.1%, 0.973 62.8%, 1.004 85.7%, 1),ease,ease,ease} #dm-eh .ehb .e-box.is-snap .mark-art,#dm-eh .ehb .e-box.is-snap .mark-name,#dm-eh .ehb .e-box.is-snap .e-tally-in,#dm-eh .ehb .e-box.is-snap .chip{transition:none !important} #dm-eh .ehb .e-tally-in{transform:translateY(0);transition:transform var(--tlt,700ms) cubic-bezier(.16,1,.3,1) var(--tld,140ms)} #dm-eh .ehb .e-tally-in.is-hidden{transform:translateY(115%)} #dm-eh .ehb .mark{font-size:var(--fs,17px)} #dm-eh .ehb .mark-art{height:calc((var(--llh,1.2) + .74) * 1em)} #dm-eh .ehb .mark-name{font-size:min(1em,calc((var(--name) - 8px - var(--tn,0) * var(--lls,0px)) / var(--tw,1)));font-weight:var(--lfw,400);letter-spacing:var(--lls,0px);line-height:var(--llh,1.2);margin-right:calc(-1 * var(--lls,0px))} #dm-eh .ehb .mark-name{transition:color .15s ease var(--pd,0ms)} #dm-eh .ehb .cnt-n{display:inline-block;transition:opacity .12s ease} #dm-eh .ehb .cnt-x{opacity:0;pointer-events:none;transition:opacity .12s ease} #dm-eh .ehb .cnt-x svg{transform:scale(.5);transition:transform .46s cubic-bezier(.2,1.6,.4,1);transition-timing-function:linear(0, 0.095 2%, 0.269 4.8%, 0.659 10.7%, 0.835 13.7%, 0.958 16.3%, 1.052 18.9%, 1.118 21.5%, 1.16 24.3%, 1.176 27.6%, 1.161 31.7%, 1.083 39.6%, 1.01 47.4%, 0.978 54.1%, 0.973 62.8%, 1.004 85.7%, 1)} #dm-eh .ehb .chip.is-picked:focus-visible .cnt-n{opacity:0} #dm-eh .ehb .chip.is-picked:focus-visible .cnt-x{opacity:1} #dm-eh .ehb .chip.is-picked:focus-visible .cnt-x svg{transform:scale(1)} #dm-eh .ehb .e-rows{--stw:76px;--ocw:54px} #dm-eh .ehb .oth-step{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} #dm-eh .ehb .step{transition:opacity .15s ease} #dm-eh .ehb .step-face{transition:background-color .15s ease} #dm-eh .ehb .step.is-off{opacity:.28;cursor:default !important} #dm-eh .ehb .step:focus-visible{outline:none} #dm-eh .ehb .step:focus-visible .step-face{outline:2px solid #d33d3d;outline-offset:2px} @media (hover: hover){ #dm-eh .ehb .step:not(.is-off):hover .step-face{background-color:#e9e9e9 !important} } #dm-eh .ehb .step:not(.is-off):active .step-face{background-color:#d4d4d4 !important;scale:.92;transition-duration:0s} #dm-eh .ehb .e-head{--mbw:214px;--mgap:8px} #dm-eh .ehb .e-room{display:inline-block;width:calc(var(--mbw) + var(--mgap));height:1px} #dm-eh .ehb .vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} #dm-eh .ehb .m-face{transition:background-color .15s ease,color .15s ease} #dm-eh .ehb .m-chev{transition:transform .46s cubic-bezier(.2,1.25,.4,1);transition-timing-function:linear(0, 0.069 1.3%, 0.195 3%, 0.591 7.8%, 0.746 10%, 0.859 12%, 0.945 13.9%, 1.012 16.1%, 1.055 18.5%, 1.075 21.5%, 1.065 25.9%, 1.007 36.7%, 0.994 46.1%, 1)} #dm-eh .ehb .m-btn.is-open .m-chev{transform:rotate(180deg);transition-timing-function:cubic-bezier(.2,1.6,.4,1);transition-timing-function:linear(0, 0.095 2%, 0.269 4.8%, 0.659 10.7%, 0.835 13.7%, 0.958 16.3%, 1.052 18.9%, 1.118 21.5%, 1.16 24.3%, 1.176 27.6%, 1.161 31.7%, 1.083 39.6%, 1.01 47.4%, 0.978 54.1%, 0.973 62.8%, 1.004 85.7%, 1)} #dm-eh .ehb .m-opt{transition:background-color .15s ease} @media (hover: hover){ #dm-eh .ehb .m-btn:not(.is-open):hover .m-face{background-color:#e9e9e9 !important} #dm-eh .ehb .m-opt:not(.is-on):hover{background-color:#e9e9e9 !important} } #dm-eh .ehb .m-btn:not(.is-open):active .m-face,#dm-eh .ehb .m-opt:not(.is-on):active{background-color:#d4d4d4 !important;transition-duration:0s !important} #dm-eh .ehb .m-btn:focus-visible{outline:none} #dm-eh .ehb .m-btn:focus-visible .m-face{outline:2px solid #d33d3d;outline-offset:2px} #dm-eh .ehb .m-opt:focus-visible{outline:2px solid #d33d3d;outline-offset:-2px} #dm-eh .ehb .m-menu{animation:ehcb-m-drop .26s cubic-bezier(.2,.7,.2,1) both} @keyframes ehcb-m-drop{from{clip-path:inset(0 -40px 100% -40px)}to{clip-path:inset(0 -40px -48px -40px)}} @container ehcb (max-width: 639.98px){ #dm-eh .ehb .e-pad{padding:18px 0 8px !important} #dm-eh .ehb .e-kicker{font-size:10.5px !important;letter-spacing:.08em !important} #dm-eh .ehb .e-head{display:flex;align-items:center;column-gap:10px;margin-top:10px !important} #dm-eh .ehb .e-title{flex:1 1 auto;min-width:0;font-size:min(32px,calc((100cqw - 168px) / 6.62)) !important} #dm-eh .ehb .t1{display:block} #dm-eh .ehb .e-room{display:none} #dm-eh .ehb .e-metro{position:relative !important;right:auto !important;bottom:auto !important;flex:none} #dm-eh .ehb .m-face{height:38px !important;gap:8px !important;padding:0 11px 0 14px !important} #dm-eh .ehb .m-name{font-size:19px !important} #dm-eh .ehb .m-chev{width:12px !important;height:12px !important} #dm-eh .ehb .m-menu{top:calc(100% + 3px) !important} #dm-eh .ehb .e-tabs{margin-top:16px !important} #dm-eh .ehb .tab{height:52px !important;padding:0 8px !important} #dm-eh .ehb .tab-name{white-space:normal !important;font-size:11px !important;letter-spacing:.03em !important} #dm-eh .ehb .tab-when{font-size:11px !important} #dm-eh .ehb .e-box{padding:8px 14px 12px !important;--chin:31px} #dm-eh .ehb .e-chart{max-height:none} #dm-eh .ehb .e-maj{font-size:11.5px !important;padding:4px 8px 3px calc(8px + 0.12em) !important} #dm-eh .ehb .e-parties{--rowmin:52px} #dm-eh .ehb .e-rows{--name:76px;--g:6px;--count:37px;--dg:2px;--dv:2px;--rows:var(--fit-rows,7);--cols:var(--fit-cols,17);--dmax:10px;--rp:8px;--stw:62px;--ocw:46px} #dm-eh .ehb .step{width:28px !important} #dm-eh .ehb .step-face{width:24px !important;height:24px !important} #dm-eh .ehb .cnt{font-size:16px !important} #dm-eh .ehb .chip-nr-note{font-size:12px !important} #dm-eh .ehb .e-info{padding:12px 14px 14px !important} #dm-eh .ehb .e-info-title{font-size:16px !important} #dm-eh .ehb .e-info-body{font-size:13px !important} #dm-eh .ehb .e-info-foot{font-size:12px !important} #dm-eh .ehb .e-facts{column-gap:20px !important} #dm-eh .ehb .e-fact dd{font-size:13px !important} } @container ehcb (max-width: 348px){ #dm-eh .ehb .e-title{font-size:min(26px,calc((100cqw - 168px) / 6.62)) !important} } @media (prefers-reduced-motion: reduce){ #dm-eh .ehb .e-box,#dm-eh .ehb .chip,#dm-eh .ehb .tab,#dm-eh .ehb .mark-art,#dm-eh .ehb .e-maj,#dm-eh .ehb .e-tally-in,#dm-eh .ehb .cnt-n,#dm-eh .ehb .cnt-x,#dm-eh .ehb .cnt-x svg,#dm-eh .ehb .e-reset span,#dm-eh .ehb .step,#dm-eh .ehb .step-face,#dm-eh .ehb .m-face,#dm-eh .ehb .m-chev,#dm-eh .ehb .m-opt{transition:none !important} #dm-eh .ehb .e-info,#dm-eh .ehb .m-menu{animation:none !important} } /* event banner: last item of the newsletter/questions row, so it sits above the divider */ #dm-eh .eh-cta-row .eh-event-banner{grid-column:1 / -1;width:100%;padding:8px 0 0}#dm-eh .eh-event-banner a{display:block;max-width:1000px;margin:0 auto}#dm-eh .eh-event-banner img{display:block;width:100%;height:auto} @media (max-width: 720px){#dm-eh .eh-cta-row .eh-event-banner{padding:12px 0 0}}@media (max-width: 640px){#dm-eh .eh-event-banner a{max-width:600px}} /* v27 · phones: tighter black file banner */ @media (max-width: 640px){#dm-eh .mf-file-banner{padding:16px var(--eh-g) 14px;column-gap:10px;grid-template-columns:minmax(0, 1fr) clamp(100px, 34%, 140px)}#dm-eh .mf-file-banner .type{margin-top:6px;line-height:1.45}#dm-eh .mf-type-pop{margin-top:5px}#dm-eh .mf-file-map{margin:-4px -6px -4px 0}#dm-eh .mf-map-cap{margin-top:2px}#dm-eh .mf-banner-facts.is-gov{margin-top:8px;padding-top:4px;padding-bottom:0}#dm-eh .mf-banner-facts.is-gov .bf .lbl{margin-bottom:4px}} @media (max-width: 360px){#dm-eh .mf-file-banner{grid-template-columns:minmax(0, 1fr) clamp(92px, 32%, 120px)}} /* v27 · source line: smaller, links to the IEC results site; less space under the council box */ #dm-eh .wg-src{font-size:10.5px}#dm-eh .wg-src-link{color:inherit;text-decoration:none}#dm-eh .wg-src-link:hover{text-decoration:underline;text-underline-offset:2px}#dm-eh .mf-munigov .wg-src{color:rgba(255,255,255,0.55)} #dm-eh .mf-munigov{margin-bottom:0;padding-bottom:4px}#dm-eh .mf-munigov .wg-src{margin-top:12px} @media (max-width: 640px){#dm-eh .mf-munigov{padding-bottom:4px}#dm-eh .mf-file-body p.wg-src,#dm-eh .mf-file-body p.wg-src .wg-src-link{font-family:var(--font-ui) !important;font-size:10.5px !important;line-height:1.5 !important;font-weight:400 !important}#dm-eh .mf-file-body p.wg-src{margin:12px 0 4px !important}#dm-eh .mf-file-body p.wg-src,#dm-eh .mf-file-body p.wg-src .wg-src-link{color:var(--dm-ink-4) !important}} /* v27 · one standard gap between the type line and the banner facts (population, governed by, mayor) on every file */ @media (min-width: 641px){#dm-eh .mf-banner-facts.is-gov,#dm-eh .mf-banner-facts.is-district{margin-top:0 !important;padding-top:14px}} /* v27 · phones: the locator map no longer pushes the facts row down; the same gap under the type line on every file */ @media (max-width: 640px){#dm-eh .mf-file-banner{grid-template-rows:auto auto 1fr}#dm-eh .mf-file-map{grid-row:1 / span 3}#dm-eh .mf-banner-facts.is-gov,#dm-eh .mf-banner-facts.is-district{grid-column:1;grid-row:3;align-self:start;margin-top:0 !important;padding-top:14px;border-top:0}#dm-eh .mf-banner-facts.is-district{grid-template-columns:minmax(0, 1fr);row-gap:12px}#dm-eh .mf-banner-facts.is-district .bf,#dm-eh .mf-banner-facts.is-district .bf:first-child,#dm-eh .mf-banner-facts.is-district .bf.wide{grid-column:1 / -1;padding:0;border-left:0}} @media (max-width: 640px){#dm-eh #mf-file-body aside .mf-file-card + .mf-actions-top{margin:35px 0 0 !important}#dm-eh .mf-file-inner-body:has(aside .mf-file-card + .mf-actions-top){padding-bottom:35px !important}} /* ==== post-elections v2 ==== results in the coalition builder's look: the municipal file, the ward box, Results across South Africa, the coalition builder's note and the explainer. Values from the AllMetrosEmbedV5 widget: ink #181818, 1.5px black rings with 8px and 10px corners, a 3px rule over every box, Archivo small capitals in warm grey (#5e574e), Geist figures, DM Custom names. */ #dm-eh .eh-mast .count .n{white-space:nowrap} /* black banner: two figures, then the council box */ #dm-eh .mf-banner-facts.is-res .bf-count .v{white-space:nowrap} #dm-eh .mf-munigov .wg-note{margin:12px 0 0;font-size:14px;line-height:1.4;color:rgba(255,255,255,0.72)} #dm-eh .mf-munigov .wg-note b{color:#fff;font-weight:600} #dm-eh .mf-munigov .wg-note-solo{margin:0;font-size:15px} #dm-eh .wg-bar.has-mark{position:relative} #dm-eh .wg-mark{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--dm-ink-1)} #dm-eh .mf-munigov .wg-mark{background:#fff;box-shadow:0 0 0 1px var(--dm-ink-1)} #dm-eh .wg-legend i,#dm-eh .wg-sw{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.16)} /* file body */ #dm-eh .mf-file-body--res{display:block} #dm-eh .mf-file-body--res .mf-file-left{max-width:772px;margin:0 auto;text-align:center} #dm-eh .mf-res{min-height:120px} #dm-eh .mf-res-sec{text-align:center} #dm-eh .mf-res-sec + .mf-res-sec,#dm-eh .mf-res-msg + .mf-res-sec{margin-top:40px;padding-top:36px;border-top:1px solid var(--dm-grey-1)} #dm-eh .mf-res-prog + .mf-res-sec{margin-top:0;padding-top:0;border-top:0} #dm-eh .mf-res-seats + .mf-res-tbl{margin-top:28px;padding-top:0;border-top:0} #dm-eh .mf-res + .mf-res-members{margin-top:34px;padding-top:34px;border-top:1px solid var(--dm-grey-1)} #dm-eh .mf-res:empty + .mf-res-members{margin-top:0;padding-top:0;border-top:0} /* council seats: the half circle (EH_BOARD.arc, "the half circle" in the seat board's script) */ #dm-eh .mf-file-body p.mf-board-cap{max-width:540px;margin:12px auto 0;font-family:var(--font-ui);font-size:15px;line-height:1.45;color:#4a443c;text-wrap:balance;text-align:center} #dm-eh .mf-board-cap strong{color:var(--dm-ink-1);font-weight:600} #dm-eh .mf-res-board{display:grid;justify-items:center;margin:28px auto 0;padding:0 6px;overflow-x:clip} #dm-eh .mf-res-seats > .mf-res-board:first-child,#dm-eh .mf-file-body .mf-res-seats > p.mf-board-cap:first-child{margin-top:0} #dm-eh .mf-board-wait{width:min(100%,600px);aspect-ratio:2 / 1.04;border-radius:50% 50% 0 0 / 100% 100% 0 0;background:rgba(23,23,23,0.06);animation:dm-eh-wait 1.1s ease-in-out infinite} #dm-eh .mf-res-rows{max-width:620px;margin:18px auto 0;text-align:left} #dm-eh .ehh-tog{margin:0 0 24px} #dm-eh .ehh-stage{position:relative} #dm-eh .ehh-stage canvas{position:absolute;display:block;pointer-events:none} #dm-eh .ehh-host.has-maj{padding-top:44px} #dm-eh .ehh-fig{position:relative;container-type:inline-size} #dm-eh .ehh-fig:has(.cs-info-pop:not([hidden])){z-index:30} #dm-eh .ehh-maj{position:absolute;left:50%;bottom:calc(100% + 18px);transform:translate(-50%,8px) scale(.85);transform-origin:50% 100%;opacity:0;visibility:hidden;padding:5px 10px 4px calc(10px + .12em);border-radius:5px;background:#181818;color:#fff;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-weight:700;font-size:13px;line-height:1;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none;transition:opacity .12s ease,transform .46s cubic-bezier(.2,1.6,.4,1),visibility .46s} #dm-eh .ehh-maj.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)} #dm-eh .ehh-maj::after{content:"";position:absolute;left:50%;top:100%;width:2px;margin-left:-1px;height:18px;background:#181818} #dm-eh .ehh-mid{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-family:Geist,"Helvetica Neue",Arial,sans-serif;line-height:.8;color:#171717;pointer-events:none} #dm-eh .ehh-num{display:block;padding-right:.04em;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap} #dm-eh .ehh-num.is-pop{animation:dm-eh-num-pop .42s cubic-bezier(.2,1.6,.4,1)} @keyframes dm-eh-num-pop{0%{transform:scale(.72);opacity:0}100%{transform:scale(1);opacity:1}} @media (prefers-reduced-motion: reduce){#dm-eh .ehh-num.is-pop{animation:none}} /* v11.4: the party picked out, over the number: its colour in a box and its name, as in the votes table (v22.9: one of the half circle's pegs for the box, drawn by the script) */ #dm-eh .ehh-who{display:flex;align-items:center;gap:.5em;margin-bottom:.55em;font-size:max(12px,.31em);font-weight:600;line-height:1;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s} #dm-eh .ehh-who.is-on{opacity:1;visibility:visible;transition:opacity .15s ease} #dm-eh .ehh-who.is-pop{animation:dm-eh-num-pop .42s cubic-bezier(.2,1.6,.4,1)} #dm-eh .ehh-who i{position:relative;flex:none;width:16px;height:17px} #dm-eh .ehh-who b{max-width:6.5em;overflow:hidden;text-overflow:ellipsis;font-weight:600} @media (prefers-reduced-motion: reduce){#dm-eh .ehh-who,#dm-eh .ehh-who.is-on{transition:none}#dm-eh .ehh-who.is-pop{animation:none}} /* the caption under the number ("Council seats"): a button that opens the explainer below it */ #dm-eh .ehh-mid .ehh-cap{display:block;margin-top:.2em;line-height:1;pointer-events:auto} #dm-eh .ehh-cap-btn{display:block;margin:-8px -12px;padding:8px 12px;background:none;border:0;border-radius:6px;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:max(12px,.27em);font-weight:600;line-height:1.15;letter-spacing:.01em;text-transform:uppercase;color:#171717;text-align:center;white-space:nowrap;-webkit-tap-highlight-color:transparent} #dm-eh .ehh-cap-btn span{display:block} #dm-eh button.ehh-cap-btn{cursor:pointer;transition:transform .16s cubic-bezier(.2,.9,.3,1.5),text-shadow .16s ease} @media (hover: hover){#dm-eh button.ehh-cap-btn:hover{transform:scale(1.06);text-shadow:0 1.5px 3px rgba(23,23,23,.2)}} #dm-eh button.ehh-cap-btn[aria-expanded="true"]{transform:scale(1.06);text-shadow:0 1.5px 3px rgba(23,23,23,.2)} #dm-eh button.ehh-cap-btn:active{transform:scale(1);text-shadow:0 0 0 rgba(23,23,23,0);transition-duration:.04s} @media (prefers-reduced-motion: reduce){#dm-eh button.ehh-cap-btn{transition:none}} #dm-eh button.ehh-cap-btn:focus-visible{outline:2px solid #d33d3d;outline-offset:-3px} @media (prefers-reduced-motion: reduce){#dm-eh .ehh-maj{transition:none}} /* post-elections v23: coalition mode with no party in it yet: in the hole, in place of the number and its caption, how to build a coalition (its size and width set by the script) */ #dm-eh .ehh-tip{position:absolute;left:50%;z-index:1;width:max-content;transform:translate(-50%,.6em);font-family:Geist,"Helvetica Neue",Arial,sans-serif;line-height:1.2;letter-spacing:-.005em;color:#171717;text-align:center;text-wrap:balance;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,transform 0s linear .15s,visibility 0s linear .15s} #dm-eh .ehh-tip .ehh-tip-a,#dm-eh .ehh-tip .ehh-tip-b{display:block;font-family:Geist,"Helvetica Neue",Arial,sans-serif !important} #dm-eh .ehh-tip .ehh-tip-a{font-weight:600} #dm-eh .ehh-tip .ehh-tip-b{font-weight:400;color:#4a443c} /* v23.2: the number and its caption go up and out, and the line comes up into their place a moment later */ #dm-eh .ehh-host.is-coal0 .ehh-tip{opacity:1;visibility:visible;transform:translateX(-50%);transition:opacity .3s ease .15s,transform .5s cubic-bezier(.2,1.25,.4,1) .15s} #dm-eh .ehh-mid .ehh-num,#dm-eh .ehh-mid .ehh-cap{transition:opacity .25s ease .08s} #dm-eh .ehh-host.is-coal0 .ehh-mid .ehh-num,#dm-eh .ehh-host.is-coal0 .ehh-mid .ehh-cap{opacity:0;visibility:hidden;transform:translateY(-.35em);transition:opacity .25s ease,transform .35s cubic-bezier(.5,0,.75,0),visibility 0s linear .35s} @media (prefers-reduced-motion: reduce){#dm-eh .ehh-tip,#dm-eh .ehh-host.is-coal0 .ehh-tip,#dm-eh .ehh-mid .ehh-num,#dm-eh .ehh-mid .ehh-cap,#dm-eh .ehh-host.is-coal0 .ehh-mid .ehh-num,#dm-eh .ehh-host.is-coal0 .ehh-mid .ehh-cap{transition:none}} #dm-eh .ehh-key{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;max-width:600px;margin:26px 0 0;padding:0;list-style:none;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.2;color:#171717} #dm-eh .ehh-key:empty{display:none} #dm-eh .mf-res-board .ehh-key{display:none} #dm-eh .ehh-key li{display:flex;align-items:center;gap:7px;margin:0;padding:0} #dm-eh .ehh-key i{flex:none;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2)} #dm-eh .ehh-key span{font-weight:500} #dm-eh .ehh-key b{font-weight:700;font-variant-numeric:tabular-nums} /* plain rows of pegs (EH_BOARD.rows): the board's party rows, with nothing to pick */ #dm-eh .ehr{display:grid;padding:0 12px} #dm-eh .ehr-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;column-gap:8px;min-height:46px} #dm-eh .ehr-name{display:flex;justify-content:center;min-width:0;margin-left:-8px;padding:0 8px;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:min(17px,calc((88px + var(--tn,0) * 0.5px) / var(--tw,1)));letter-spacing:-0.5px;line-height:1.2;color:#171717;white-space:nowrap} #dm-eh .ehr-bar{display:flex;align-items:center;min-width:0} #dm-eh .ehr-dots{flex:none;position:relative;display:block} #dm-eh .ehr-dots canvas{position:absolute;left:-4px;top:-4px;display:block;width:calc(100% + 8px);height:calc(100% + 8px);pointer-events:none} #dm-eh .ehr-lead{flex:1 1 0;min-width:0;height:4px;margin-left:8px;background:radial-gradient(circle,#a3978a 0.9px,transparent 1.3px) 0 50% / 5px 4px repeat-x} #dm-eh .ehr-val{min-width:42px;padding-left:6px;text-align:right;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:18px;line-height:1;font-variant-numeric:tabular-nums;color:#171717;white-space:nowrap} /* votes and seats */ #dm-eh .mf-res-tw{overflow-x:auto;padding:6px 12px 20px;margin:-6px -12px -20px} #dm-eh .mf-res-table,#dm-eh .res-table{width:100%;border-collapse:collapse;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:14.5px;line-height:1.3;color:#171717;text-align:left;font-variant-numeric:tabular-nums} #dm-eh .mf-res-table thead th,#dm-eh .res-table thead th{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:0.08em;text-transform:uppercase;color:#5e574e;white-space:nowrap} #dm-eh .mf-res-table tbody th,#dm-eh .mf-res-table tbody td{padding:10px 8px;border-bottom:1px solid var(--dm-grey-1);vertical-align:middle;font-weight:400} #dm-eh .mf-res-table .n,#dm-eh .res-table .n{text-align:right;white-space:nowrap} #dm-eh .mf-res-table .pc{display:flex;align-items:center;gap:10px;min-width:0} #dm-eh .mf-res-table .sw{flex:none;width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.16)} #dm-eh .mf-res-table .pn{display:flex;flex-direction:column;min-width:0} #dm-eh .mf-res-table .pn strong{font-weight:600} #dm-eh .mf-res-table .pn span{margin-top:2px;font-size:12px;color:#5e574e;overflow:hidden;text-overflow:ellipsis} #dm-eh .mf-res-table td.v,#dm-eh .mf-res-table td.sw-c{color:#4a443c} #dm-eh .mf-res-table td strong{font-weight:600} #dm-eh .mf-res-table tr[hidden]{display:none} #dm-eh .mf-res-table .na{color:#5e574e} /* a party with seats picks its seats out on the half circle: grey on hover; once picked (here or on a peg) its row lifts off the table and the rest fade */ #dm-eh .mf-res-table tr.is-pick{cursor:pointer;-webkit-tap-highlight-color:transparent} #dm-eh .mf-res-table tbody tr{transition:transform .34s cubic-bezier(.2,.9,.3,1.3),box-shadow .34s ease} #dm-eh .mf-res-table tbody tr > *,#dm-eh .mf-res-table tr.is-pick > *{transition:background-color .12s ease,color .12s ease,opacity .22s ease} @media (hover: hover){#dm-eh .mf-res-table tr.is-pick:not(.is-sel):hover > *{background:#f2f2f2}} #dm-eh .mf-res-table tr.is-pick:not(.is-sel):active > *{background:#e9e9e9;transition-duration:0s} #dm-eh .mf-res-table tr.is-sel{position:relative;z-index:1;transform:translateY(-4px) scale(1.018);box-shadow:0 16px 26px -12px rgba(23,23,23,.34),0 3px 8px -2px rgba(23,23,23,.12),0 0 0 1px rgba(23,23,23,.07)} #dm-eh .mf-res-table tr.is-sel > *{background:#fff;border-bottom-color:transparent} #dm-eh .mf-res-table.has-sel tbody tr:not(.is-sel) > *{opacity:.6} @media (hover: hover){#dm-eh .mf-res-table.has-sel tbody tr.is-pick:not(.is-sel):hover > *{opacity:1}} @media (prefers-reduced-motion: reduce){#dm-eh .mf-res-table tbody tr{transition:none}} #dm-eh .mf-res-table button.pc{width:100%;margin:0;padding:0;background:none;border:0;border-radius:0;font:inherit;color:inherit;text-align:left;cursor:pointer} #dm-eh .mf-res-table button.pc:focus-visible{outline:2px solid #d33d3d;outline-offset:4px} #dm-eh .res-refresh{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;background:#fff;border:1.5px solid #181818;border-radius:10px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#181818;cursor:pointer;transition:background-color .15s ease} @media (hover: hover){#dm-eh .res-refresh:hover{background:#e9e9e9}} #dm-eh .res-refresh:active{background:#d4d4d4} #dm-eh .res-refresh:focus-visible{outline:2px solid #d33d3d;outline-offset:2px} /* "Show all parties": the DM button (Geist Bold 11px on #181818, 3px corners); grows with a shadow on hover, dips for 80ms when pressed */ #dm-eh .mf-res-more{display:inline-flex;align-items:center;justify-content:center;margin:16px auto 0;padding:9px 18px;background:#181818;border:1px solid #181818;border-radius:3px;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;line-height:normal;text-transform:uppercase;color:#fff;cursor:pointer;transform:scale(1);box-shadow:none;transition:transform 80ms cubic-bezier(.34,1.56,.64,1),box-shadow 80ms ease;-webkit-font-smoothing:antialiased} #dm-eh .mf-res-tbl .mf-res-more{margin-top:36px} @media (hover: hover){#dm-eh .mf-res-more:hover{transform:scale(1.05);box-shadow:2px 3px 7px rgba(0,0,0,.32)}} #dm-eh .mf-res-more.is-dip{transform:scale(.96);box-shadow:none} #dm-eh .mf-res-more:focus-visible{outline:2px solid #d33d3d;outline-offset:2px} /* turnout and the count */ #dm-eh .mf-res-figs{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));margin:20px 0 0;padding:0;list-style:none} #dm-eh .mf-res-figs li{display:flex;flex-direction:column;align-items:center;gap:9px;margin:0;padding:2px 10px;border-left:1px solid var(--dm-grey-1)} #dm-eh .mf-res-figs li:first-child{border-left:0} #dm-eh .mf-res-figs .k,#dm-eh .mf-res-prog .k,#dm-eh .res-meter .lbl{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:11px;font-weight:700;letter-spacing:0.1em;line-height:1.3;text-transform:uppercase;color:#5e574e;white-space:nowrap} #dm-eh .mf-res-figs b{font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:26px;font-weight:600;line-height:1;letter-spacing:-0.02em;color:#171717;font-variant-numeric:tabular-nums;white-space:nowrap} #dm-eh .mf-res-prog{display:grid;grid-template-columns:auto minmax(60px, 1fr) auto;align-items:center;gap:6px 14px;max-width:560px;margin:0 auto 34px;padding:16px 20px;background:var(--dm-ink-1);border:1.5px solid var(--dm-ink-1);border-radius:8px;color:#fff;font-family:Geist,"Helvetica Neue",Arial,sans-serif;text-align:left} #dm-eh .mf-res-prog .trk,#dm-eh .res-meter .trk{display:block;height:8px;border-radius:4px;background:#e9e9e9;overflow:hidden} #dm-eh .mf-res-prog .trk i,#dm-eh .res-meter .trk i{display:block;height:100%;background:#181818} #dm-eh .mf-res-prog b,#dm-eh .res-meter b{font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:20px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums} #dm-eh .mf-res-prog .sub,#dm-eh .res-meter .sub{grid-column:1 / -1;font-size:12.5px;color:#5e574e} /* the file's count box: black, with white type and bar */ #dm-eh .mf-res-prog .k,#dm-eh .mf-res-prog b,#dm-eh .mf-res-prog .sub{color:#fff}#dm-eh .mf-res-prog .trk{background:rgba(255,255,255,0.24)}#dm-eh .mf-res-prog .trk i{background:#fff} #dm-eh .mf-file-body p.mf-res-src{margin:30px 0 0;font-family:var(--font-ui);font-size:10.5px;line-height:1.5;color:#5e574e;text-align:center} #dm-eh .mf-res-src strong,#dm-eh #mf-wardgov .wg-src strong{color:var(--dm-red-cta);font-weight:700} #dm-eh .mf-file-body p.mf-res-msg{margin:10px auto 0;max-width:520px;font-family:var(--font-serif);font-size:17px;line-height:1.5;color:var(--dm-ink-3);text-align:center} #dm-eh .mf-res-wait{display:grid;gap:12px;justify-items:center;padding:20px 0} #dm-eh .mf-res-wait span{display:block;width:60%;height:18px;border-radius:2px;background:rgba(23,23,23,0.07);animation:dm-eh-wait 1.1s ease-in-out infinite} #dm-eh .mf-res-wait span:first-child{width:36%;height:26px} #dm-eh .mf-res-wait span:last-child{width:72%;height:120px} #dm-eh .mf-res-chip{display:inline-flex;align-items:center;gap:6px;flex:none;padding:5px 9px;border:1.5px solid var(--dm-grey-2);border-radius:5px;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:12px;line-height:1.2;color:var(--dm-ink-2);white-space:nowrap} #dm-eh .mf-res-chip i{flex:none;width:9px;height:9px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.16)} #dm-eh .mf-res-chip b{font-weight:600;color:var(--dm-ink-1)} #dm-eh .mf-res-chip.is-hung{border-color:#181818} #dm-eh .mf-res-chip.is-count{border-style:dashed} #dm-eh .mf-res-chip.is-na{color:#5e574e} #dm-eh .mf-chip-wait{width:120px;height:14px;margin:0;background:rgba(23,23,23,0.08)} #dm-eh .mf-file-body--dist .mf-dist-list{margin-top:14px} #dm-eh .mf-file-body--dist .mf-dist-munis{text-align:left} #dm-eh .mf-file-body--res .mf-actions-top{margin-top:36px !important} #dm-eh .mf-file-body--res .mf-wa{padding-top:30px} /* ward result */ #dm-eh #mf-wardgov .wg-note{margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--dm-ink-2)} #dm-eh #mf-wardgov .wg-note b{color:var(--dm-ink-1);font-weight:700} #dm-eh .wg-cand{margin:10px 0 2px;font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.15;color:var(--dm-ink-1)} #dm-eh #mf-wardgov .wg-cand + .wg-party{margin-top:6px} #dm-eh #mf-wardgov .wg-cand + .wg-party .wg-ab{font-size:22px} /* v11.7 · the ward's turnout and registered voters stand in the box's right column, in the vote breakdown's place (.mf-wm-kv, as beside the Your ward map); the column's rule is the figures' first divider */ #dm-eh #mf-wardgov .wg-kv{margin-top:0} #dm-eh #mf-wardgov .wg-break > .wg-kv > div:first-child{padding-right:18px} @media (max-width: 640px){#dm-eh #mf-wardgov .wg-break{padding-top:10px;border-top:0}} #dm-eh .mf-wardpanel .wp-wait{margin:6px 0 0} #dm-eh .wr-list > .wp-lbl{margin:30px 0 8px;font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:0;line-height:1.15;text-transform:none;color:#000} #dm-eh .wr-row{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:3px 16px;padding:12px 0;border-bottom:1px solid var(--dm-grey-1)} #dm-eh .wr-nm{font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.2;color:var(--dm-ink-1)} #dm-eh .wr-pt{grid-column:1;font-family:var(--font-ui);font-size:12.5px;line-height:1.35;color:var(--dm-ink-2)} #dm-eh .wr-pt:empty{display:none} #dm-eh .wr-pt .ab{font-weight:700;color:var(--dm-ink-1)} #dm-eh .wr-v{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-variant-numeric:tabular-nums} #dm-eh .wr-v b{font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:18px;font-weight:600;line-height:1;color:var(--dm-ink-1)} #dm-eh .wr-v span{font-family:var(--font-ui);font-size:12px;color:#5e574e;white-space:nowrap} #dm-eh .wr-bar{grid-column:1 / -1;height:6px;margin-top:6px;border-radius:3px;background:var(--dm-grey-3);overflow:hidden} #dm-eh .wr-bar i{display:block;height:100%} #dm-eh .wr-row.is-top .wr-nm{font-size:19px} #dm-eh .wr-row[hidden]{display:none} #dm-eh .wr-list .mf-res-more{display:flex} @media (min-width: 641px){#dm-eh .wr-list > .wp-lbl{padding-left:20px}#dm-eh .wr-row{margin:0 20px}} /* Results across South Africa */ #dm-eh .eh-res{border-bottom:0;padding:24px 0 30px} #dm-eh .eh-res .eh-sec-head{margin-bottom:20px} @media (min-width: 641px){#dm-eh .eh-res .eh-sec-head.eh-sec-head-mb{margin-top:0;border-top:0;padding-top:0}} #dm-eh .res-h{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:10px} #dm-eh .res-h h2{margin:0} #dm-eh .vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* the area dropdown: the coalition builder's metro button and menu */ #dm-eh .res-pick{position:relative;flex:none;z-index:6;margin-left:auto} #dm-eh .res-pbtn{display:flex;align-items:center;height:50px;margin:0;padding:0;background:transparent;border:0;color:#181818;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #dm-eh .res-pface{display:flex;align-items:center;gap:12px;height:50px;box-sizing:border-box;padding:0 19px 0 24px;border:1px solid #181818;border-radius:10px;background:#fff;color:#181818;transition:background-color .15s ease,color .15s ease} #dm-eh .res-pname{display:block;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:27px;line-height:1;letter-spacing:-0.2px} #dm-eh .res-pchev{display:block;flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .46s cubic-bezier(.2,1.25,.4,1)} #dm-eh .res-pbtn.is-open .res-pface{background:#181818;color:#fff} #dm-eh .res-pbtn.is-open .res-pchev{transform:rotate(180deg);transition-timing-function:cubic-bezier(.2,1.6,.4,1)} @media (hover: hover){#dm-eh .res-pbtn:not(.is-open):hover .res-pface{background:#e9e9e9}#dm-eh .res-opt:not(.is-on):hover{background:#e9e9e9}} #dm-eh .res-pbtn:not(.is-open):active .res-pface,#dm-eh .res-opt:not(.is-on):active{background:#d4d4d4;transition-duration:0s} #dm-eh .res-pbtn:focus-visible{outline:none}#dm-eh .res-pbtn:focus-visible .res-pface{outline:2px solid #d33d3d;outline-offset:2px} #dm-eh .res-pmenu{position:absolute;right:0;top:calc(100% + 6px);width:290px;box-sizing:border-box;padding:5px;background:#fff;border:1.5px solid #181818;border-radius:8px;box-shadow:0 14px 28px -12px rgba(40,32,24,0.45),0 2px 6px rgba(40,32,24,0.08);animation:eh-res-drop .26s cubic-bezier(.2,.7,.2,1) both} #dm-eh .res-pmenu[hidden]{display:none} @keyframes eh-res-drop{from{clip-path:inset(0 -40px 100% -40px)}to{clip-path:inset(0 -40px -48px -40px)}} #dm-eh .res-pm-h{margin:0;padding:8px 9px 7px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-weight:700;font-size:11px;line-height:1;letter-spacing:0.1em;text-transform:uppercase;color:#5e574e} #dm-eh .res-opt{width:100%;height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:0 12px;background:transparent;border:0;border-radius:5px;color:#171717;cursor:pointer;text-align:left;transition:background-color .15s ease} #dm-eh .res-opt .nm{min-width:0;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1;letter-spacing:-0.2px} #dm-eh .res-opt .sub{flex:none;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:12.5px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;color:#5e574e} #dm-eh .res-opt.is-on{background:#181818;color:#fff;cursor:default} #dm-eh .res-opt.is-on .sub{color:#cdbfa7} #dm-eh .res-opt:focus-visible{outline:2px solid #d33d3d;outline-offset:-2px} /* status */ #dm-eh .res-state{margin-bottom:22px} #dm-eh .res-state-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px} #dm-eh .res-pill{display:inline-flex;align-items:center;gap:7px;flex:none;padding:7px 10px 6px;border:1.5px solid #181818;border-radius:5px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:11px;font-weight:700;letter-spacing:0.1em;line-height:1;text-transform:uppercase;color:#181818} #dm-eh .res-pill.is-final{background:#181818;color:#fff} #dm-eh .res-pill.is-live{border-color:#d33d3d;color:#d33d3d} #dm-eh .res-pill.is-live i{width:8px;height:8px;border-radius:50%;background:#d33d3d;animation:dm-eh-wait 1.4s ease-in-out infinite} #dm-eh .res-msg{flex:1 1 260px;margin:0;font-family:var(--font-serif);font-size:16px;line-height:1.45;color:var(--dm-ink-2)} #dm-eh .res-refresh{flex:none;margin-left:auto} #dm-eh .res-refresh:disabled{opacity:0.5;cursor:default} #dm-eh .res-waiting{margin:10px 0 0;font-family:var(--font-ui);font-size:14px;color:#4a443c} #dm-eh .res-preview{margin:12px 0 0;padding:9px 12px;background:#fdf6e3;border:1px solid #e4d9b8;border-radius:5px;font-family:var(--font-ui);font-size:12.5px;line-height:1.45;color:var(--dm-ink-2)} #dm-eh .res-preview b{font-weight:700;color:var(--dm-ink-1)} /* the councils map, on the page under the counting bar; its SVG is pulled up 14px into the drawing's own top margin */ #dm-eh .res-map{position:relative;margin:0 0 28px;min-width:0} /* the box: party support, hung from a 3px rule as the builder's box hangs from its tabs */ #dm-eh .res-board{border:1.5px solid #181818;border-top:3px solid #181818;border-radius:0 0 8px 8px;background:#fff;color:#171717} #dm-eh .res-stand{padding:20px 20px 22px;min-width:0} #dm-eh .res-lbl{display:block;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:11px;font-weight:700;letter-spacing:0.1em;line-height:1.3;text-transform:uppercase;color:#5e574e} #dm-eh .res-sub{margin:6px 0 0;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:13px;line-height:1.4;color:#4a443c} #dm-eh .res-stand .mf-res-wait{justify-items:start} /* party support: one bar a party, its share of the vote, scaled to the largest */ #dm-eh .res-bars{display:grid;grid-template-columns:fit-content(160px) minmax(0,1fr);column-gap:14px;margin:14px 0 0;padding:0;list-style:none} #dm-eh .res-bars li{display:grid;grid-column:1 / -1;grid-template-columns:96px minmax(0,1fr);grid-template-columns:subgrid;align-items:center;margin:0;padding:0} #dm-eh .res-bars .nm{min-width:0;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:15.5px;font-weight:500;line-height:1.2;color:#171717;overflow-wrap:anywhere} #dm-eh .res-bars .bar{display:flex;align-items:center;gap:8px;min-width:0;padding:5px 0;border-left:1.5px solid #181818} #dm-eh .res-bars i{flex:none;display:block;width:max(3px, (100% - 62px) * var(--f));height:22px;border-radius:0 3px 3px 0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.16)} #dm-eh .res-bars b{flex:none;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:16px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:#171717;white-space:nowrap} #dm-eh .res-bars.is-grow i{transform-origin:0 50%;animation:eh-res-grow .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 45ms) both} @keyframes eh-res-grow{from{transform:scaleX(0)}} @media (prefers-reduced-motion: reduce){#dm-eh .res-bars.is-grow i{animation:none}} #dm-eh .res-facts{display:flex;margin-top:16px;padding-top:14px;border-top:1px solid var(--dm-grey-1)} #dm-eh .res-facts .bf{flex:1 1 0;min-width:0;padding:0 14px;border-left:1px solid var(--dm-grey-1)} #dm-eh .res-facts .bf:first-child{padding-left:0;border-left:0} #dm-eh .res-facts .lbl{display:block;margin-bottom:8px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:10.5px;font-weight:700;letter-spacing:0.1em;line-height:1.3;text-transform:uppercase;color:#5e574e} #dm-eh .res-facts .v{display:block;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:24px;font-weight:600;line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:#171717;white-space:nowrap} #dm-eh .res-map-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px} #dm-eh .res-tog{display:inline-grid;grid-auto-flow:column;gap:4px;flex:none} #dm-eh .res-tog button{height:34px;margin:0;padding:0 14px;background:#f2f2f2;border:0;border-radius:6px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:11.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#171717;cursor:pointer;transition:background-color .15s ease} #dm-eh .res-tog button[aria-pressed="true"]{background:#181818;color:#fff;cursor:default} @media (hover: hover){#dm-eh .res-tog button[aria-pressed="false"]:hover{background:#e9e9e9}} #dm-eh .res-tog button:focus-visible{outline:2px solid #d33d3d;outline-offset:2px} #dm-eh .res-map-svg{position:relative;max-width:620px;margin:-14px auto 0} #dm-eh .res-map-svg svg{display:block;width:100%;height:auto} #dm-eh .res-map-svg circle[data-k]{cursor:pointer} #dm-eh .res-map-svg circle[data-k]:hover{stroke-opacity:1} #dm-eh .res-tip{position:absolute;left:0;top:0;z-index:5;padding:6px 9px;background:rgba(24,24,24,.85);border-radius:5px;box-shadow:0 6px 16px -6px rgba(40,32,24,0.5);font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:12.5px;line-height:1.3;color:#fff;white-space:nowrap;pointer-events:none} #dm-eh .res-tip[hidden]{display:none} #dm-eh .res-loading{position:absolute;right:0;top:0;font-family:var(--font-ui);font-size:12px;color:#5e574e;animation:dm-eh-wait 1.1s ease-in-out infinite} #dm-eh .res-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;padding:0;list-style:none;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:12.5px;line-height:1.3;color:#292929} #dm-eh .res-legend li{display:flex;align-items:center;gap:6px;margin:0} #dm-eh .res-legend i{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2)} #dm-eh .res-legend b{font-weight:600;color:#171717} #dm-eh .res-note{margin:12px 0 0;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:12px;line-height:1.45;color:#5e574e} /* provinces and councils */ #dm-eh .res-h3{margin:36px 0 12px;font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.1;color:#171717} #dm-eh .res-tw{overflow-x:auto} #dm-eh .res-table tbody th,#dm-eh .res-table tbody td{padding:11px 8px;border-bottom:1px solid var(--dm-grey-1);vertical-align:middle;font-weight:400} #dm-eh .res-table tbody tr{cursor:pointer;transition:background-color .12s} #dm-eh .res-table tbody tr:hover,#dm-eh .res-table tbody tr:focus-visible{background:#f2f2f2;outline:none} #dm-eh .res-table tbody th .nm{font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:15.5px;font-weight:500} #dm-eh .res-table .ty{margin-left:8px;padding:2px 5px 1px;border:1.5px solid var(--dm-grey-2);border-radius:4px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:9.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#5e574e;vertical-align:2px} #dm-eh .res-table .of{color:#5e574e} #dm-eh .res-table .go{width:24px;padding-left:0;padding-right:4px;text-align:right;font-size:20px;line-height:1;color:#a3978a} #dm-eh .res-lead{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} #dm-eh .res-lead i{flex:none;width:11px;height:11px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.16)} #dm-eh .res-lead b{font-weight:600} #dm-eh .res-oc{display:inline-block;padding:4px 7px 3px;border:1.5px solid var(--dm-grey-2);border-radius:5px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:10.5px;font-weight:700;letter-spacing:0.08em;line-height:1.1;text-transform:uppercase;color:var(--dm-ink-2);white-space:nowrap} #dm-eh .res-oc.is-maj{background:#181818;border-color:#181818;color:#fff} #dm-eh .res-oc.is-hung{background:var(--dm-red-cta);border-color:var(--dm-red-cta);color:#fff} #dm-eh .res-oc.is-chg{border-color:#181818;color:#181818} #dm-eh .res-oc.is-count{border-style:dashed;color:#d33d3d;border-color:#d33d3d} #dm-eh .res-oc.is-na{border:0;padding:0;color:#5e574e} #dm-eh .res-dash{display:inline-block;width:64px;height:12px;background:rgba(23,23,23,0.07);animation:dm-eh-wait 1.1s ease-in-out infinite;vertical-align:middle} /* coalition builder: the note while counting */ #dm-eh .eh-cb-note{margin:14px 0 0;padding:11px 14px;border:1.5px solid #181818;border-radius:8px;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.45;color:#292929} #dm-eh .eh-cb-note[hidden]{display:none} #dm-eh .eh-cb-note b{font-weight:600;color:#171717} /* coalition builder: the metro button as wide as the longest metro name (Nelson Mandela Bay Metro), the menu as wide as the button */ #dm-eh .ehb .e-head{--mbw:356px} #dm-eh .ehb .m-face{min-width:var(--mbw);justify-content:space-between} #dm-eh .ehb .m-menu{width:min(var(--mbw),100cqw) !important} @container ehcb (max-width: 639.98px){#dm-eh .ehb .m-face{min-width:0}} @container ehcb (min-width: 640px) and (max-width: 759.98px){#dm-eh .ehb .e-head{display:flex;align-items:flex-end;column-gap:10px}#dm-eh .ehb .e-title{flex:1 1 auto;min-width:0}#dm-eh .ehb .t1{display:block}#dm-eh .ehb .e-room{display:none}#dm-eh .ehb .e-metro{position:relative !important;right:auto !important;bottom:auto !important;flex:none}} /* explainer */ #dm-eh .eh-explain{padding:56px 0 60px} #dm-eh .ex-intro{max-width:780px;margin:0 0 34px;font-family:var(--font-serif);font-size:19px;line-height:1.55;color:var(--dm-ink-1)} #dm-eh .ex-steps{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));margin:0;padding:0;list-style:none;border-top:3px solid #181818} #dm-eh .ex-steps li{margin:0;padding:22px 26px 6px 0} #dm-eh .ex-steps li + li{padding-left:26px;border-left:1px solid var(--dm-grey-1)} #dm-eh .ex-n{display:block;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:44px;font-weight:600;line-height:0.9;letter-spacing:-0.04em;color:var(--dm-ink-1)} #dm-eh .ex-steps p{margin:14px 0 0;font-family:var(--font-serif);font-size:16px;line-height:1.55;color:var(--dm-ink-2)} #dm-eh .ex-steps p b{display:block;margin-bottom:6px;font-family:var(--font-display);font-size:21px;font-weight:700;line-height:1.15;color:var(--dm-ink-1)} #dm-eh .ex-lists{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px;margin-top:36px} #dm-eh .ex-col{padding:24px 26px 26px;border:1.5px solid #181818;border-radius:8px;background:#fff} #dm-eh .ex-col h3{margin:0 0 16px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:11.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#5e574e} #dm-eh .ex-list{display:grid;gap:11px;margin:0;padding:0;list-style:none} #dm-eh .ex-list li{display:grid;grid-template-columns:10px minmax(0, 1fr);gap:12px;margin:0;font-family:var(--font-ui);font-size:15px;line-height:1.45;color:var(--dm-ink-2)} #dm-eh .ex-list li::before{content:"";width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--dm-green)} #dm-eh .ex-col.is-not .ex-list li::before{background:var(--dm-red)} #dm-eh .ex-why{display:grid;grid-template-columns:minmax(0, 260px) minmax(0, 1fr);gap:16px 36px;margin-top:36px;padding-top:28px;border-top:1px solid var(--dm-grey-2)} #dm-eh .ex-why h3{margin:0;font-family:var(--font-display);font-size:30px;font-weight:700;line-height:1.08;color:var(--dm-ink-1)} #dm-eh .ex-why p{margin:0 0 14px;max-width:720px;font-family:var(--font-serif);font-size:17px;line-height:1.55;color:var(--dm-ink-2)} @media (max-width: 860px){ #dm-eh .ex-steps{grid-template-columns:minmax(0, 1fr)} #dm-eh .ex-steps li,#dm-eh .ex-steps li + li{padding:20px 0 4px;border-left:0} #dm-eh .ex-steps li + li{border-top:1px solid var(--dm-grey-1)} #dm-eh .ex-lists,#dm-eh .ex-why{grid-template-columns:minmax(0, 1fr)} } @media (max-width: 640px){ #dm-eh .eh-res{padding:38px 0 20px} #dm-eh .res-pface{height:40px;gap:8px;padding:0 11px 0 14px} #dm-eh .res-pbtn{height:40px} #dm-eh .res-pname{font-size:19px} #dm-eh .res-pmenu{width:min(290px,calc(100vw - 2 * var(--eh-g)))} #dm-eh .res-stand{padding:18px 14px 18px} #dm-eh .res-bars{grid-template-columns:fit-content(112px) minmax(0,1fr);column-gap:10px;margin-top:12px} #dm-eh .res-bars .nm{font-size:14.5px} #dm-eh .res-bars i{width:max(3px, (100% - 56px) * var(--f));height:20px} #dm-eh .res-bars b{font-size:15px} #dm-eh .ehr{padding:0 8px} #dm-eh .ehr-row{grid-template-columns:76px minmax(0,1fr) auto;column-gap:6px;min-height:44px} #dm-eh .ehr-name{font-size:min(17px,calc((68px + var(--tn,0) * 0.5px) / var(--tw,1)))} #dm-eh .ehr-lead{margin-left:6px} #dm-eh .ehr-val{min-width:37px;font-size:16px} #dm-eh .res-facts .v{font-size:20px} #dm-eh .res-facts .bf{padding:0 10px} #dm-eh .res-table .hide-s{display:none} #dm-eh .res-table tbody th .nm{font-size:15px} #dm-eh .res-table .ty{display:none} #dm-eh .res-table tbody th,#dm-eh .res-table tbody td,#dm-eh .res-table thead th{padding-left:5px;padding-right:5px} #dm-eh .mf-res-figs{grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:20px} #dm-eh .mf-res-figs li:nth-child(3){border-left:0} #dm-eh .mf-res-figs b{font-size:22px} #dm-eh .mf-res-table .sw-c{display:none} #dm-eh .mf-res-tw{padding:0} #dm-eh .mf-res-table tbody th,#dm-eh .mf-res-table tbody td,#dm-eh .mf-res-table thead th{padding-left:5px;padding-right:5px} #dm-eh .mf-res-table .pn span{display:none} #dm-eh .mf-res-prog{grid-template-columns:minmax(0, 1fr) auto} #dm-eh .mf-res-prog .trk{grid-column:1 / -1;grid-row:2} #dm-eh .mf-file-body p.mf-board-cap{font-size:14px} #dm-eh .mf-res-board{margin-top:20px} #dm-eh .ehh-key{gap:8px 18px;margin-top:22px;font-size:14px} #dm-eh .ex-intro{font-size:17px} #dm-eh .ex-col{padding:20px 18px 22px} #dm-eh .ex-why h3{font-size:26px} } /* votes and seats table: share as a bar (scaled to the leading party) with the percentage beside it; tighter rows, inset on desktop */ #dm-eh .mf-res-table th.sh,#dm-eh .mf-res-table td.sh{width:58%} #dm-eh .mf-res-table th.p{white-space:nowrap} #dm-eh .mf-res-table .shb{display:flex;align-items:center;gap:8px} #dm-eh .mf-res-table .shb i{flex:none;display:block;height:10px;border-radius:2px} #dm-eh .mf-res-table .shb strong{flex:none;font-variant-numeric:tabular-nums} @media (min-width: 641px){#dm-eh .mf-res-tw{padding:0 64px}#dm-eh .mf-res-table tbody th,#dm-eh .mf-res-table tbody td{padding-top:9px;padding-bottom:9px}} @media (max-width: 640px){#dm-eh .mf-res-table td.v{font-size:13px}} @media (max-width: 480px){ #dm-eh .res-table .res-share{display:none} } /* ward results and party support: the same table with party, share and votes */ #dm-eh .mf-res-table.is-3 th.sh,#dm-eh .mf-res-table.is-3 td.sh{width:62%} #dm-eh .mf-res-table .pn span.cd{display:block} /* ward results with the candidates' names: the party, its candidate under it; a shorter share bar leaves the names room to wrap */ #dm-eh .wr-list.has-names .mf-res-table.is-3 th.sh,#dm-eh .wr-list.has-names .mf-res-table.is-3 td.sh{width:44%} #dm-eh .wr-list.has-names .mf-res-table tbody th.p{white-space:normal} #dm-eh .wr-list.has-names .mf-res-table .pc{align-items:flex-start} #dm-eh .wr-list.has-names .mf-res-table .sw{margin-top:3px} #dm-eh .wr-list.has-names .mf-res-table .pn strong{line-height:1.2} #dm-eh .wr-list.has-names .mf-res-table .pn span.cd{margin-top:2px;font-size:13px;line-height:1.15;color:#4a443c} #dm-eh .wr-list .mf-res-tw{margin:0;padding:0} #dm-eh .wr-list .mf-res-more{margin-top:36px} #dm-eh .res-stand .mf-res-tw{margin:16px 0 0;padding:0} #dm-eh .mf-res-table.is-grow .shb i{transform-origin:0 50%;animation:eh-res-grow .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 45ms) both} @media (min-width: 641px){#dm-eh .wr-list .mf-res-tw{padding:0 20px}} @media (prefers-reduced-motion: reduce){#dm-eh .mf-res-table.is-grow .shb i{animation:none}} @media (prefers-reduced-motion: reduce){#dm-eh .mf-res-table tr.is-pick > *,#dm-eh .res-pface,#dm-eh .res-pchev,#dm-eh .res-opt,#dm-eh .res-tog button{transition:none !important}#dm-eh .res-pmenu{animation:none !important}} /* post-elections v3 · area declaration box (the count tracker): red while counting, green at 100%. v20: in the black banner's council box (see the end) */ #dm-eh .mf-decl{display:grid;gap:7px;padding:10px 18px 9px;border-radius:6px;background:var(--dm-red-cta);color:#fff;font-family:Geist,"Helvetica Neue",Arial,sans-serif;text-align:left;transition:background-color .5s ease} #dm-eh .mf-decl.is-done{background:#17843A} #dm-eh .mf-decl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0} #dm-eh .mf-decl .k,#dm-eh .mf-decl .st{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:10.5px;font-weight:700;letter-spacing:0.1em;line-height:1.2;text-transform:uppercase;white-space:nowrap;color:#fff} #dm-eh .mf-decl b{font-size:20px;font-weight:600;line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:#fff} #dm-eh .mf-decl .trk{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,0.3);overflow:hidden} #dm-eh .mf-decl .trk i{display:block;height:100%;border-radius:inherit;background:#fff;transition:width .6s ease} #dm-eh .mf-decl .sub{text-align:center;font-size:11.5px;line-height:1.3;color:#fff;font-variant-numeric:tabular-nums;min-width:0} #dm-eh .mf-decl .st{display:inline-flex;align-items:center;gap:6px;flex:none} #dm-eh .mf-decl .st i{width:7px;height:7px;border-radius:50%;background:#fff} #dm-eh .mf-decl.is-live .st i{animation:mfDeclPulse 1.6s ease-in-out infinite} @keyframes mfDeclPulse{0%,100%{opacity:1}50%{opacity:.3}} @media (prefers-reduced-motion: reduce){#dm-eh .mf-decl.is-live .st i{animation:none}#dm-eh .mf-decl,#dm-eh .mf-decl .trk i{transition:none}} @media (min-width: 641px){#dm-eh .mf-file-banner > div:first-child{grid-column:1;grid-row:1 / span 2;align-self:stretch;display:flex;flex-direction:column}#dm-eh .mf-file-banner > div:first-child > .mf-banner-facts{margin-bottom:auto}#dm-eh .mf-file-map{grid-column:2;grid-row:1}} /* post-elections v3 · masthead: the declaration box under the share declared, red while counting, green at 100% */ #dm-eh .eh-mast .count .eh-mast-decl{margin-top:10px;padding:8px 11px 10px;gap:6px} #dm-eh .eh-mast-decl .sub{font-size:11px;white-space:nowrap} #dm-eh .eh-mast-decl .sub b{font-size:inherit;font-weight:700;line-height:inherit;letter-spacing:0} @media (max-width: 640px){#dm-eh .eh-mast .count .eh-mast-decl{grid-area:when;align-self:center;margin:0}#dm-eh .eh-mast-decl .sub{white-space:normal;text-wrap:balance}} /* post-elections v3 · Results across South Africa: the area in view's declaration box, full width. Wider screens: Counting, the bar with the voting districts under it, then the share; phones: stacked as in the black banner */ #dm-eh .res-state-top + .res-decl{margin-top:12px} #dm-eh .res-decl .sub{display:none} #dm-eh .res-decl .trk{height:10px;border-radius:5px} @media (min-width: 641px){#dm-eh .res-decl .mf-decl{grid-template-columns:auto minmax(0, 1fr) auto;grid-template-areas:"st trk pct";align-items:center;gap:7px 18px}#dm-eh .res-decl .mf-decl-row{display:contents}#dm-eh .res-decl .st{grid-area:st}#dm-eh .res-decl .trk{grid-area:trk}#dm-eh .res-decl .mf-decl-row > b{grid-area:pct;justify-self:end}} /* ==== post-elections v4 · phases (see "seats by phase", "the first sitting", "coalition builder, by phase" and "hung councils" in the script) ==== */ /* election night: no coalition builder */ #dm-eh[data-phase="count"] .eh-coalition-frame,#dm-eh[data-phase="count"] .eh-cb-note{display:none} #dm-eh .eh-hung[hidden],#dm-eh .eh-coalition-frame[hidden]{display:none} /* the label over a provisional or declared half circle: a chip and a note; v16: provisional seats' outline is dashed */ #dm-eh .mf-file-body .mf-seat-tag{display:inline-flex;align-items:stretch;margin:0 auto 6px;border:1.5px solid #181818;border-radius:4px;overflow:hidden;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:11.5px;font-weight:700;line-height:1;letter-spacing:.09em;text-transform:uppercase;color:#181818} #dm-eh .mf-file-body .mf-seat-tag strong,#dm-eh .mf-file-body .mf-seat-tag span{display:flex;align-items:center;padding:8px 11px 7px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:11.5px;font-weight:700;letter-spacing:.09em} #dm-eh .mf-file-body .mf-seat-tag strong{padding:8px 10px 7px;background:#181818;color:#fff} #dm-eh .mf-seat-tag.is-prov{border-style:dashed} /* v8: the half circle stands in a white box, thin black border; a head row holds the status tag in its top-left corner and, for a hung council, "Build a coalition" in its top-right (v16: the box dashed for provisional seats, like its tag) */ #dm-eh .mf-seat-box{margin:14px 0 0;padding:12px 12px 14px;background:#fff;border:1px solid #181818;border-radius:8px} #dm-eh .mf-seat-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-height:calc(13px * 1.35 * 2)} #dm-eh .mf-seat-head .mf-seat-tag{display:inline-flex;width:max-content;max-width:100%;margin:0} #dm-eh .mf-res-seats > .mf-seat-box:first-child{margin-top:0} /* v11: the status tag is a button; its note (what the seats are) drops down from it, in the ? buttons' black panel */ #dm-eh .mf-seat-tag-wrap{display:inline-flex;max-width:100%;line-height:1} #dm-eh .mf-file-body button.mf-seat-tag{margin:0;padding:0;background:#fff;cursor:pointer;-webkit-appearance:none;appearance:none;text-align:left;-webkit-tap-highlight-color:transparent;transition:box-shadow .16s ease,transform .16s ease} @media (hover: hover){#dm-eh .mf-file-body button.mf-seat-tag:hover{box-shadow:0 2px 6px rgba(0,0,0,.18)}} #dm-eh .mf-file-body button.mf-seat-tag[aria-expanded="true"]{box-shadow:0 2px 6px rgba(0,0,0,.18)} #dm-eh .mf-file-body button.mf-seat-tag:focus-visible{outline:2px solid #d33d3d;outline-offset:2px} #dm-eh .mf-seat-tag-caret{display:inline-block;width:5px;height:5px;margin:-3px 1px 0 9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .16s ease} #dm-eh button.mf-seat-tag[aria-expanded="true"] .mf-seat-tag-caret{margin-top:3px;transform:rotate(225deg)} #dm-eh .mf-seat-tag-wrap .cs-info-pop{left:0;transform:none;width:min(380px,80vw);padding:14px 18px 16px;font-size:14px;letter-spacing:normal;text-transform:none} #dm-eh .mf-seat-tag-pop strong{font-weight:700;color:#fff} #dm-eh .mf-seat-tag-pop .cs-def-txt{margin-top:2px} @media (prefers-reduced-motion: reduce){#dm-eh .mf-file-body button.mf-seat-tag,#dm-eh .mf-seat-tag-caret{transition:none}} #dm-eh .mf-res-seats.is-provisional .mf-seat-box{border-style:dashed} #dm-eh .mf-seat-box .mf-res-board{margin:10px auto 0} /* v23: the box as wide as the column, so as wide as the Hung council banner over it (inset a little from the column's sides in v20 to v22); while counting, a small two-line note in its top-left corner (no caption over the box); the half circle sits close under it */ #dm-eh .mf-file-body p.mf-seat-note{margin:0;font-family:var(--font-ui);font-size:13px;line-height:1.35;color:#4a443c;text-wrap:pretty} /* v20: the box as tall in every phase as while counting: the head row as tall as the note's two lines (min-height on .mf-seat-head), the half circle 6px under it with no room over it, and no list of parties under it. The Majority flag rises into the head row, between the tag and the button; in a narrow box, where it would meet them, the half circle keeps the flag's room (queried on the half circle's width) */ #dm-eh .mf-res-seats .mf-seat-head + .mf-res-board{margin-top:6px;padding-top:0} @container (max-width: 479.98px){#dm-eh .mf-seat-box .mf-res-board.can-coal .ehh-stage{margin-top:44px}} @container (max-width: 359.98px){#dm-eh .mf-seat-box .ehh-host.has-maj .ehh-stage{margin-top:44px}} /* the box, the tag's outline and its chip: red for provisional seats (v16: the projection's red; orange until v15), green for declared seats */ #dm-eh .mf-res-seats.is-provisional .mf-seat-box,#dm-eh .mf-file-body .mf-seat-tag.is-prov{border-color:#d33d3d} #dm-eh .mf-file-body .mf-seat-tag.is-prov strong{background:#d33d3d} #dm-eh .mf-res-seats.is-final .mf-seat-box,#dm-eh .mf-file-body .mf-seat-tag.is-final{border-color:#17843A} #dm-eh .mf-file-body .mf-seat-tag.is-final strong{background:#17843A} /* "Build a coalition in ...": a solid black button with an arrow, in the box's top-right corner (set apart from the outlined status tag on the left); on a narrow screen it drops under the tag, still to the right */ #dm-eh .mf-cb-go{display:inline-flex;align-items:center;gap:9px;margin:0 0 0 auto;padding:9px 14px 8px;background:#181818;border:1.5px solid #181818;border-radius:4px;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;color:#fff;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease} #dm-eh .mf-cb-go .arr{font-size:15px;line-height:1;margin-top:-2px} @media (hover: hover){#dm-eh .mf-cb-go:hover{transform:scale(1.04);box-shadow:2px 3px 7px rgba(0,0,0,.28)}} @media (max-width: 640px){#dm-eh .mf-seat-box{padding:10px 10px 12px}#dm-eh .mf-cb-go{padding:8px 12px 7px;font-size:11px}} #dm-eh .mf-cb-go:focus-visible,#dm-eh .eh-hung-go:focus-visible,#dm-eh .eh-hung-nm:focus-visible{outline:2px solid #d33d3d;outline-offset:2px} /* the countdown to a hung council's first sitting: the note on the left (Hung council in DM Custom), the day card on the right */ #dm-eh .eh-dl{display:flex;align-items:center;gap:22px;max-width:580px;margin:26px auto 0;padding:16px 22px;border-radius:6px;background:#181818;color:#fff;text-align:left} #dm-eh .eh-dl.is-due{background:var(--dm-red-cta)} #dm-eh .eh-dl.is-past{background:#5e574e} #dm-eh .eh-dl-n{display:grid;justify-items:center;flex:none;min-width:66px;padding-left:22px;border-left:1px solid rgba(255,255,255,.32)} #dm-eh .eh-dl-n strong{font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:38px;font-weight:700;line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums} #dm-eh .eh-dl-n.is-past strong{font-size:20px;letter-spacing:0} #dm-eh .eh-dl-n span{margin-top:5px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:10px;font-weight:700;letter-spacing:.1em;line-height:1;text-transform:uppercase;white-space:nowrap} #dm-eh .eh-dl p{flex:1 1 auto;min-width:0;margin:0;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:14.5px;line-height:1.45;color:#fff;text-wrap:pretty} #dm-eh .eh-dl p b{font-weight:600} #dm-eh .eh-dl-k{display:block;margin-bottom:6px;font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:.005em;line-height:1.05;text-transform:none} /* v13: Hung council over two lines on the left, a rule, the explanation; with final seats, a rule and the countdown on the right (under the text on phones) */ #dm-eh .eh-dl{display:grid;grid-template-columns:auto 1px minmax(0,1fr);grid-auto-columns:auto;align-items:center} #dm-eh .eh-dl::before{content:"";grid-area:1/2;align-self:stretch;background:rgba(255,255,255,.32)} #dm-eh .eh-dl .eh-dl-k{grid-area:1/1;margin:0;text-align:center} #dm-eh #mf-file-body .eh-dl p > b,#dm-eh .eh-dl p > b{font-family:Geist,"Helvetica Neue",Arial,sans-serif !important;font-weight:700} #dm-eh .eh-dl p{grid-area:1/3} #dm-eh .eh-dl .eh-dl-n{grid-area:1/4;align-self:stretch;align-content:center} @media (max-width: 640px){#dm-eh .eh-dl .eh-dl-n{grid-area:2/1/3/-1;display:flex;align-items:baseline;justify-content:center;gap:8px;min-width:0;padding:12px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.32)}#dm-eh .eh-dl .eh-dl-n span{margin-top:0}} /* the coalition builder's note: provisional or projected seats, or the countdown */ #dm-eh .eh-cb-note p{margin:0} #dm-eh .eh-cb-note.has-dl{padding:0;border:0} #dm-eh .eh-cb-note .eh-dl{max-width:none;margin:0} #dm-eh .eh-dl .eh-dl-n strong{font-family:Geist,"Helvetica Neue",Arial,sans-serif;color:#fff} #dm-eh .eh-dl p b{color:#fff} /* Results across South Africa: the time of the last update, and the provisional note */ #dm-eh .res-upd{font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:13px;color:#4a443c;font-variant-numeric:tabular-nums} #dm-eh .res-prov{margin:12px 0 0;padding:10px 14px;border:1.5px solid #181818;border-radius:6px;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.45;color:#292929} #dm-eh .res-prov b{font-weight:600;color:#171717} #dm-eh .res-stand td.v.is-ticking{color:var(--dm-red-cta)} /* hung councils */ #dm-eh .eh-hung{margin:0 0 64px} /* v13: the banner is the municipal file's Hung council banner (red, see "always red"), as wide as the list: Hung councils, a rule, the explanation, a rule, the days left */ #dm-eh .eh-hung .eh-dl{max-width:none;margin:0 0 26px;border-radius:8px} #dm-eh .eh-hung-list{margin:0;padding:0;list-style:none;border-top:3px solid #181818} #dm-eh .eh-hung-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr) 148px;align-items:center;gap:14px;margin:0;padding:12px 4px;border-bottom:1px solid var(--dm-grey-1);font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.3;color:#171717} #dm-eh .eh-hung-row[hidden]{display:none} #dm-eh .eh-hung-hd{padding:10px 4px 9px;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} #dm-eh .eh-hung-nm{display:grid;justify-items:start;gap:2px;min-width:0;margin:0;padding:0;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer} #dm-eh .eh-hung-nm b{max-width:100%;font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.15} #dm-eh .eh-hung-nm span{font-size:12.5px;color:#5e574e} #dm-eh .eh-hung-lead{display:flex;align-items:center;gap:7px;min-width:0} #dm-eh .eh-hung-lead i{flex:none;width:11px;height:11px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)} #dm-eh .eh-hung-lead span{color:#5e574e;font-variant-numeric:tabular-nums;white-space:nowrap} #dm-eh .eh-hung-need .k{display:none} #dm-eh .eh-hung-need b{font-weight:700;font-variant-numeric:tabular-nums} #dm-eh .eh-hung-go{justify-self:end;margin:0;padding:9px 12px 8px;background:#181818;border:1px solid #181818;border-radius:3px;color:#fff;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease} @media (hover: hover){#dm-eh .eh-hung-go:hover{transform:scale(1.05);box-shadow:2px 3px 7px rgba(0,0,0,.28)}} #dm-eh .eh-hung .eh-hung-more{display:flex;margin:26px auto 0} /* v14: the councils declared so far, in the banner's figure slot */ #dm-eh .eh-dl-n.eh-dl-dec span{white-space:nowrap} #dm-eh .eh-hung-none,#dm-eh .eh-hung-load{margin:16px 0 0;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:14px;color:#4a443c} @media (max-width: 640px){ #dm-eh .mf-seat-box{padding:10px 8px 14px} #dm-eh .eh-dl{gap:16px;padding:14px 16px} #dm-eh .eh-dl-n{min-width:54px;padding-left:16px} #dm-eh .eh-dl-n strong{font-size:32px} #dm-eh .eh-dl-k{font-size:21px} #dm-eh .eh-hung-hd{display:none} #dm-eh .eh-hung-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 0} #dm-eh .eh-hung-nm{grid-column:1;grid-row:1} #dm-eh .eh-hung-go{grid-column:2;grid-row:1} #dm-eh .eh-hung-lead,#dm-eh .eh-hung-need{grid-column:1 / -1} #dm-eh .eh-hung-need .k{display:inline;color:#5e574e} } /* ==== post-elections v5 · a hung council's countdown over its half circle, and the municipal file's coalition mode (see "coalition mode in the municipal file" in the script) ==== */ /* the countdown to a hung council's first sitting stands over the half circle, in place of the caption, as wide as the half circle's box */ #dm-eh .mf-res-seats > .eh-dl{max-width:none;border-radius:8px} #dm-eh .mf-res-seats > .eh-dl:first-child{margin-top:0} /* a half circle that builds a coalition keeps the Majority flag's room over it in both modes, so it never moves */ #dm-eh .mf-res-board.can-coal{padding-top:44px} #dm-eh .mf-res-seats > .eh-dl + .mf-res-board.can-coal,#dm-eh .mf-file-body .mf-res-seats > p.mf-board-cap + .mf-res-board.can-coal{margin-top:6px} /* coalition mode on the half circle: the button that clears the coalition (as on the builder's board). Post-elections v23: no dashed line down the middle */ #dm-eh .ehh-clear{position:absolute;top:-8px;right:-8px;z-index:3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;background:transparent;border:0;border-radius:50%;color:#181818;cursor:pointer;-webkit-tap-highlight-color:transparent} #dm-eh .ehh-clear[hidden]{display:none} #dm-eh .ehh-clear > span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#fff;transition:background-color .15s ease} @media (hover: hover){#dm-eh .ehh-clear:hover > span{background:#e9e9e9}} #dm-eh .ehh-clear:active > span{background:#d4d4d4;transition-duration:0s} #dm-eh .ehh-clear:focus-visible{outline:none} #dm-eh .ehh-clear:focus-visible > span{outline:2px solid #d33d3d;outline-offset:2px} /* v11: in coalition mode "Back to results" (solid black, no arrow, the go button's size, so the half circle never moves) stands where "Who can build a coalition?" stood; nothing under the box */ #dm-eh .mf-res-seats.is-coal .mf-cb-go:not(.mf-coal-back){display:none} @keyframes mf-coal-in{from{opacity:0;transform:translateY(5px) scale(.97)}} #dm-eh .mf-coal-back{display:none} #dm-eh .mf-res-seats.is-coal .mf-coal-back{display:inline-flex;animation:mf-coal-in .32s cubic-bezier(.2,.9,.3,1.2) both} /* post-elections v23: coalition mode leaves the table under the box as it is (the results stay, as before the switch) */ #dm-eh .mf-res-table td.sh{position:relative} #dm-eh .mf-res-table .shb i{transform-origin:0 50%;transition:opacity .25s ease,transform .45s cubic-bezier(.2,.7,.2,1)} #dm-eh .mf-res-table .shb strong{transition:opacity .2s ease} #dm-eh .mf-res-table thead th.sh,#dm-eh .mf-res-table thead th.v{transition:color .2s ease} /* a live update puts the file back in coalition mode at once */ #dm-eh .mf-res.is-coal-jump *{transition:none !important;animation:none !important} @media (prefers-reduced-motion: reduce){#dm-eh .mf-res-table .shb i,#dm-eh .mf-res-table .shb strong{transition:none}#dm-eh .mf-res-seats.is-coal .mf-coal-back{animation:none}} @media (max-width: 640px){#dm-eh .ehh-clear{top:-12px;right:-12px}} /* post-elections v23: the head row of a hung council's box. Top right, no button: Who can build a coalition in ? in DM Custom, kept clear of the Majority flag over the middle; it lifts under the pointer, presses in on a click, pops up as coalition mode opens and stays up there. Top left, the status tag. In coalition mode, once a party is in, the button that clears the coalition hangs under Back to results (v23.37; v23.23 to v23.36 under the status tag), out of the flow, so the box never changes height */ #dm-eh .mf-seat-head.has-cb{align-items:flex-start;container:mf-hd / inline-size} #dm-eh .mf-seat-l{position:relative;display:flex;flex:none;max-width:100%} /* v23.4: the status tag alone at the top left; in coalition mode "Back to results" hangs under the question, so the half circle never moves */ #dm-eh .mf-cb-side .mf-coal-back{position:absolute;right:0;top:calc(100% + 6px);z-index:2;gap:6px;margin:0;padding:6px 10px 5px;font-size:10.5px;white-space:nowrap} #dm-eh .mf-cb-side .mf-coal-back .arr{font-size:13px} /* where the box is too narrow for it to hang clear of the Majority flag and the half circle, it stands under the question, its room kept while hidden; the button that clears the coalition hangs under it */ @container mf-hd (max-width: 599.98px){#dm-eh .mf-cb-side .mf-coal-back{position:static;display:inline-flex;visibility:hidden;margin-top:6px;animation:none}#dm-eh .mf-res-seats.is-coal .mf-cb-side .mf-coal-back{visibility:visible;animation:mf-coal-in .32s cubic-bezier(.2,.9,.3,1.2) both}#dm-eh .mf-cb-side .mf-cb-clr{top:calc(100% - 1px)}} #dm-eh .mf-cb-side{position:relative;display:flex;flex-direction:column;align-items:flex-end;flex:1 1 0;min-width:0;max-width:clamp(calc(50% - 60px),(500px - 100%) * 999,100%)} /* v23.22: on a phone the question never drops under the status tag: it keeps the top-right corner on two lines, its type a little smaller where it has to be (--mf-ask-fs, set by askFit in the script) */ #dm-eh .mf-cb-ask{display:block;max-width:100%;margin:0;padding:2px 0 3px;background:none;border:0;border-radius:0;font-family:"DM Custom",var(--font-display);font-size:21px;font-weight:700;line-height:1.1;letter-spacing:-.005em;color:#181818;text-align:right;text-wrap:balance;cursor:pointer;transform-origin:100% 50%;-webkit-tap-highlight-color:transparent;transition:transform .24s cubic-bezier(.3,1.6,.5,1),text-shadow .24s ease} @media (hover: hover){#dm-eh .mf-res-seats:not(.is-coal) .mf-cb-ask:hover{transform:translateY(-2px);text-shadow:0 4px 8px rgba(24,24,24,.2)}} #dm-eh .mf-res-seats:not(.is-coal) .mf-cb-ask:active{transform:translateY(1px) scale(.98);text-shadow:none;transition-duration:.06s} #dm-eh .mf-res-seats.is-coal .mf-cb-ask{cursor:default;pointer-events:none;transform:translateY(-2px);text-shadow:0 4px 8px rgba(24,24,24,.2);animation:mf-cb-ask-pop .5s cubic-bezier(.3,1.3,.5,1) both} @keyframes mf-cb-ask-pop{0%{transform:translateY(1px) scale(.98);text-shadow:none}55%{transform:translateY(-4px) scale(1.03)}100%{transform:translateY(-2px);text-shadow:0 4px 8px rgba(24,24,24,.2)}} #dm-eh .mf-cb-ask:focus-visible{outline:2px solid #d33d3d;outline-offset:3px} /* v23.37: the button that clears the coalition, under Back to results (v23.23 to v23.36 under the status tag, top left; v23.4 to v23.22 in the half circle's hole, over the number): a 44px target round a 30px circle, its right edge on the back button's, 6px under it (the back button 26.6px tall: its padding, border and a 12.6px line); on phones the back button's tap target, which reaches 10px under it, takes the clicks where the two meet. Its circle shows only under the pointer or pressed */ #dm-eh .mf-cb-clr{position:absolute;right:-7px;top:calc(100% + 31.6px);z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;background:transparent;border:0;border-radius:50%;color:#181818;cursor:pointer;-webkit-tap-highlight-color:transparent} #dm-eh .mf-cb-clr[hidden]{display:none} #dm-eh .mf-cb-clr > span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#fff;transition:background-color .15s ease} @media (hover: hover){#dm-eh .mf-cb-clr:hover > span{background:#e9e9e9}} #dm-eh .mf-cb-clr:active > span{background:#d4d4d4;transition-duration:0s} #dm-eh .mf-cb-clr:focus-visible{outline:none} #dm-eh .mf-cb-clr:focus-visible > span{outline:2px solid #d33d3d;outline-offset:2px} #dm-eh .mf-res-seats.is-coal .mf-cb-clr:not([hidden]){animation:mf-coal-in .32s cubic-bezier(.2,.9,.3,1.2) both} @media (max-width: 640px){#dm-eh .mf-cb-ask{font-size:var(--mf-ask-fs,17px)}#dm-eh .mf-cb-side .mf-coal-back{padding:6px 9px 5px;font-size:10px}} @media (prefers-reduced-motion: reduce){#dm-eh .mf-cb-ask{transition:none}#dm-eh .mf-res-seats.is-coal .mf-cb-ask,#dm-eh .mf-res-seats.is-coal .mf-cb-clr:not([hidden]){animation:none}} /* ==== post-elections v6 · hover: on the half circle and in the table under it, a party is picked out while the pointer is over it (see "a party's row" in the script); a projection's pegs are ghosts, drawn by the script ==== */ /* rows pick their party out on hover, so they keep the arrow (coalition mode, where a click puts a party in or out, keeps the hand) */ #dm-eh .mf-res-table:not(.is-coal) tr.is-pick,#dm-eh .mf-res-table:not(.is-coal) button.pc{cursor:default} /* a row lifted off the table keeps the strip it lifted from, so a pointer at its foot doesn't drop it; the table never scrolls up and down for it */ #dm-eh .mf-res-table tr.is-sel > *{position:relative} #dm-eh .mf-res-table tr.is-sel > *::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px} #dm-eh .mf-res-tbl .mf-res-tw{overflow-y:hidden} /* the parties listed under a projection's half circle: the one picked out stays, the rest fade */ #dm-eh .ehh-key li{transition:opacity .2s ease} #dm-eh .ehh-key.has-hl li:not(.is-hl){opacity:.4} @media (prefers-reduced-motion: reduce){#dm-eh .ehh-key li{transition:none}} /* ==== post-elections v7 · Results across South Africa, redesigned: lighter, with more air. The councils map beside party support, each hung from a 3px rule; the map's dots sized by council seats; a party under the pointer lights up on the map and in the table; a province opens from the map; turnout colouring (see "map (v7)" in the script) ==== */ #dm-eh .eh-res{--res-hair:#e7e3db;padding:24px 0 40px} /* the status row: the declaration bar, slimmer */ #dm-eh .res-state{margin-bottom:26px} #dm-eh .res-decl .mf-decl{padding:8px 14px 8px;border-radius:5px} #dm-eh .res-decl .mf-decl b{font-size:16px} #dm-eh .res-decl .trk{height:6px;border-radius:3px} /* the two columns: the councils map, and party support */ #dm-eh .res-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:36px} @media (min-width: 861px){#dm-eh .res-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);column-gap:56px;align-items:start}} #dm-eh .res-map,#dm-eh .res-board{margin:0;padding-top:14px;border:0;border-top:3px solid #181818;border-radius:0;background:transparent} #dm-eh .res-stand{padding:0} #dm-eh .res-map-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;min-height:32px} #dm-eh .res-map-head .res-lbl{flex:1 1 auto} #dm-eh .res-stand > .res-lbl{display:flex;align-items:center;min-height:32px} /* leading party or turnout: a light segmented pill */ #dm-eh .res-tog{display:inline-flex;gap:0;padding:3px;background:#f1efea;border-radius:999px} #dm-eh .res-tog button{height:26px;padding:0 12px;background:transparent;border:0;border-radius:999px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4a443c;cursor:pointer;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease} #dm-eh .res-tog button[aria-pressed="true"]{background:#fff;color:#181818;box-shadow:0 1px 3px rgba(23,23,23,.18);cursor:default} @media (hover: hover){#dm-eh .res-tog button[aria-pressed="false"]:hover{color:#181818;background:rgba(255,255,255,.6)}} /* from a province, back to the whole country */ #dm-eh .res-back{display:inline-flex;align-items:center;gap:5px;height:28px;margin:0;padding:0 11px 0 8px;background:#fff;border:1.5px solid #181818;border-radius:999px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#181818;cursor:pointer;transition:background-color .15s ease,color .15s ease} #dm-eh .res-back svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media (hover: hover){#dm-eh .res-back:hover{background:#181818;color:#fff}} #dm-eh .res-back:focus-visible{outline:2px solid #d33d3d;outline-offset:2px} /* the map: a province opens on a click; a dot a council, sized by council seats (v13.8: a party under the pointer fades nothing) */ #dm-eh .res-map-svg{max-width:none;margin:6px 0 0} #dm-eh .res-map-svg path[data-prov]{cursor:pointer;transition:fill .15s ease} @media (hover: hover){#dm-eh .res-map-svg path[data-prov]:hover{fill:#e4e1da}} #dm-eh .res-map-svg g[data-k]{cursor:pointer;transition:opacity .18s ease} #dm-eh .res-map-svg g[data-k]:hover .dot{stroke-opacity:1;fill-opacity:1} /* over the whole country the dots take no clicks: a click anywhere in a province opens it, and its councils open from there */ #dm-eh .res-map-svg.is-nat g[data-k]{pointer-events:none;cursor:default} #dm-eh .res-tip{display:grid;gap:2px;padding:7px 10px 8px;border-radius:6px;line-height:1.3} #dm-eh .res-tip[hidden]{display:none} #dm-eh .res-tip .nm{font-weight:600;font-size:13px} #dm-eh .res-tip span:not(.nm){font-size:12px;color:rgba(255,255,255,.82)} #dm-eh .res-legend{margin-top:16px;gap:7px 16px;font-size:13px} #dm-eh .res-legend li{transition:opacity .18s ease} #dm-eh .res-legend li[data-p]{cursor:default} #dm-eh .res-sizes{display:inline-flex;align-items:center;gap:5px;margin:0 1px;vertical-align:middle;white-space:nowrap} #dm-eh .res-sizes i{display:inline-block;width:var(--d);height:var(--d);border-radius:50%;background:#e6e3dd;box-shadow:inset 0 0 0 1px rgba(24,24,24,.5)} #dm-eh .res-sizes i:not(:first-child){margin-left:5px} #dm-eh .res-note{margin-top:10px;line-height:1.7} /* party support: the table, lighter (v13.8: a party under the pointer fades nothing) */ #dm-eh .res-stand .mf-res-tw{margin:12px 0 0;padding:0} #dm-eh .res-stand .mf-res-table thead th{padding-bottom:8px;border-bottom:1px solid #181818} #dm-eh .res-stand .mf-res-table tbody th,#dm-eh .res-stand .mf-res-table tbody td{padding:10px 6px;border-bottom:1px solid var(--res-hair)} #dm-eh .res-stand .mf-res-table tbody th:first-child,#dm-eh .res-stand .mf-res-table thead th:first-child{padding-left:0} #dm-eh .res-stand .mf-res-table tbody td:last-child,#dm-eh .res-stand .mf-res-table thead th:last-child{padding-right:0} #dm-eh .res-stand .mf-res-table tbody tr > *{transition:opacity .18s ease,background-color .18s ease} #dm-eh .res-stand .mf-res-table tbody tr[data-party]{cursor:default} #dm-eh .res-facts{margin-top:18px;padding-top:16px;border-top:1px solid var(--res-hair)} #dm-eh .res-facts .bf{border-left-color:var(--res-hair)} /* provinces and councils: hairlines, a share bar in the Share column, the arrow darkens on hover */ #dm-eh .res-h3{margin:44px 0 10px;font-size:22px} #dm-eh .res-table thead th{border-bottom:1px solid #181818} #dm-eh .res-table tbody th,#dm-eh .res-table tbody td{padding:12px 8px;border-bottom:1px solid var(--res-hair)} #dm-eh .res-table tbody th:first-child,#dm-eh .res-table thead th:first-child{padding-left:0} #dm-eh .res-table tbody tr:hover,#dm-eh .res-table tbody tr:focus-visible{background:#f6f4ef} #dm-eh .res-table .go{transition:color .12s ease} #dm-eh .res-table tbody tr:hover .go,#dm-eh .res-table tbody tr:focus-visible .go{color:#181818} #dm-eh .res-sb{display:inline-flex;align-items:center;justify-content:flex-end;gap:9px} #dm-eh .res-sb i{display:block;width:56px;height:6px;border-radius:3px;background:#ece9e2;overflow:hidden} #dm-eh .res-sb i b{display:block;height:100%;border-radius:inherit} @media (max-width: 860px){#dm-eh .res-map-svg{max-width:560px;margin-left:auto;margin-right:auto}} @media (max-width: 640px){#dm-eh .eh-res{padding:38px 0 24px}#dm-eh .res-grid{gap:30px}#dm-eh .res-sb i{width:36px}#dm-eh .res-h3{margin-top:36px;font-size:20px}} @media (max-width: 480px){#dm-eh .res-sb i{display:none}} @media (prefers-reduced-motion: reduce){#dm-eh .res-map-svg g[data-k],#dm-eh .res-legend li,#dm-eh .res-stand .mf-res-table tbody tr > *,#dm-eh .res-map-svg path[data-prov]{transition:none}} /* ==== post-elections v8 · the ward map: the council's 2026 wards in the colours and lines of the South Africa map; the chosen ward stands up out of the map, on sides that grow as it rises, with its shadow on the wards around it. v10: the wards by leading party or by turnout, a black pill that names the view. v11: two maps (see "the ward maps" in the script): Results by ward under the council's seats and votes (v11.2; before, under the black banner), the wards by leading party or by turnout, the chosen ward raised in the colour of the view and no picking; Your ward over the ward dropdown, the plain wards to pick from, the chosen ward raised in charcoal. Beside each, its facts in the style of the council box in the banner (Won by, Council seats), stacked ==== */ #dm-eh .mf-wmap{margin:0 0 18px} #dm-eh .mf-wmap[hidden]{display:none} #dm-eh .mf-wmap--res{margin:48px 0 0} #dm-eh .mf-wm-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;margin:0 0 14px;min-height:32px} #dm-eh .mf-wm-tog[hidden]{display:none} #dm-eh .mf-wm-title{display:block;margin:0;font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.1;letter-spacing:.005em;color:#171717} /* the pill is black: the pressed view white on it, the other in a lighter grey; the fills turn quickly during the run */ #dm-eh .mf-wm-tog{background:#181818;box-shadow:inset 0 0 0 1.5px #4a4744} #dm-eh .mf-wm-tog button{color:#b5b1aa;white-space:nowrap;transition:background .15s ease,color .15s ease} #dm-eh .mf-wm-tog button[aria-pressed="true"]{background:#fff;color:#181818;box-shadow:none} @media (hover: hover){#dm-eh .mf-wm-tog button[aria-pressed="false"]:hover{color:#fff;background:rgba(255,255,255,.12)}} #dm-eh .mf-wm-tog button:focus-visible{outline:2px solid #fff;outline-offset:2px} #dm-eh .mf-wmap.is-loop .wm-base path,#dm-eh .mf-wmap.is-loop .wm-up path{transition-duration:.35s} #dm-eh .mf-wm-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 0} #dm-eh .mf-wm-grid.has-side{grid-template-columns:minmax(0,1fr) var(--wm-side,240px);column-gap:32px;align-items:center} #dm-eh .mf-wm-src{display:block;margin:12px 0 0;font-family:var(--font-ui);font-size:11.5px;line-height:1.4;color:var(--dm-ink-4)} #dm-eh .mf-wm-read{color:var(--dm-ink-3);font-variant-numeric:tabular-nums;animation:dm-eh-wait 1.1s ease-in-out infinite} #dm-eh .mf-wm-box{position:relative} #dm-eh .mf-wm-box.is-wait{display:flex;align-items:center;justify-content:center;height:280px;background:var(--dm-grey-3);border-radius:4px} #dm-eh .mf-wm-wait{font-family:var(--font-ui);font-size:12px;color:var(--dm-ink-4);animation:dm-eh-wait 1.1s ease-in-out infinite} #dm-eh .mf-wm-box svg{display:block;width:100%;height:100%;overflow:visible} #dm-eh .mf-wm-box.is-in svg{animation:dm-eh-wm-in .4s ease both} @keyframes dm-eh-wm-in{from{opacity:0}} #dm-eh .mf-wm-box path{fill-rule:evenodd;stroke-linejoin:round} #dm-eh .wm-base path{fill:#f6f5f2;stroke:#a8a39a;stroke-width:.55;transition:fill .55s ease,stroke .55s ease} /* Your ward: a click on a ward chooses it, and under a mouse a ward darkens a shade; Results by ward takes no clicks */ #dm-eh .mf-wmap--pick .wm-base path{cursor:pointer} @media (hover: hover){#dm-eh .mf-wmap--pick .wm-base path:hover{fill:#dfdbd2}} #dm-eh .wm-base path.is-off{fill:#faf9f7;stroke:#dcd8d0;cursor:default} #dm-eh .wm-base path.is-sel{cursor:default} /* Results by ward: a ward's party colour (--c1) and turnout shade (--c2) sit on its outline, set by the script; no result yet, plain */ #dm-eh .mf-wmap[data-view="win"] .wm-base path{fill:var(--c1,#f6f5f2);stroke:rgba(23,23,23,.42)} #dm-eh .mf-wmap[data-view="turn"] .wm-base path{fill:var(--c2,#f6f5f2);stroke:rgba(23,23,23,.42)} #dm-eh .mf-wmap[data-view] .wm-base path.is-off{fill:#faf9f7;stroke:#dcd8d0} #dm-eh .wm-lifts{pointer-events:none} #dm-eh .wm-up path{transition:transform .5s cubic-bezier(.3,1.5,.55,1),opacity .3s ease,fill .55s ease} #dm-eh .wm-up.is-now path{transition:transform 0s,opacity 0s,fill .55s ease} #dm-eh .wm-wall,#dm-eh .wm-top{transform:translateY(0)} #dm-eh .wm-up.is-up .wm-wall,#dm-eh .wm-up.is-up .wm-top{transform:translateY(calc(var(--k) * -1px))} #dm-eh .wm-wall{stroke-width:.75} #dm-eh .wm-foot{stroke:#1c1b19} #dm-eh .wm-top{fill:#3a3835;stroke:#252321;stroke-width:.55} #dm-eh .mf-wmap[data-view="win"] .wm-top{fill:var(--c1,#f6f5f2)} #dm-eh .mf-wmap[data-view="turn"] .wm-top{fill:var(--c2,#f6f5f2)} #dm-eh .mf-wmap[data-view="win"] .wm-top,#dm-eh .mf-wmap[data-view="turn"] .wm-top{stroke:#1c1b19;stroke-width:.8} #dm-eh .wm-sh{fill:#000;stroke:none;opacity:0;pointer-events:none} #dm-eh .wm-up.is-up .wm-sh{opacity:.3;transform:translate(1px,2.5px)} /* v11 · the facts beside each map, in the style of the council box in the black banner (Won by, Council seats), stacked, in ink on white: a small-caps label with the year in bold, the party in the display face on its swatch, the bar with its legend; a rule between blocks */ #dm-eh .mf-wm-side{display:grid;min-width:0} #dm-eh .mf-wm-side.is-in{animation:dm-eh-wm-side .4s ease both} @keyframes dm-eh-wm-side{from{opacity:0;transform:translateY(5px)}} /* Results by ward: both views' facts in one cell, so the cell is as tall as the taller and the page holds still as the view turns */ #dm-eh .mf-wm-pane{grid-area:1 / 1;min-width:0;transition:opacity .35s ease,visibility 0s linear .35s} #dm-eh .mf-wm-pane:not(.is-on){opacity:0;visibility:hidden} #dm-eh .mf-wm-pane.is-on{transition:opacity .35s ease,visibility 0s} #dm-eh .mf-wm-blk{min-width:0;margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--dm-grey-2)} #dm-eh .mf-wm-blk:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0} #dm-eh .mf-wm-side .wg-lbl{font-size:10px;letter-spacing:.14em;line-height:1.25;color:var(--dm-ink-4)} #dm-eh .mf-wm-side .wg-party{margin-top:12px} #dm-eh .mf-wm-side .wg-full{flex-basis:100%;font-size:12.5px;line-height:1.3;color:var(--dm-ink-3)} #dm-eh .mf-wm-side .wg-bar{margin-top:14px} #dm-eh .mf-wm-side .wg-bar .is-nr,#dm-eh .mf-wm-side .wg-legend .is-nr i{background:#f6f5f2;box-shadow:inset 0 0 0 1px #a8a39a} #dm-eh .mf-wm-side .wg-legend .is-nr{color:var(--dm-ink-4)} #dm-eh .mf-wm-side .wg-wait{margin-top:12px} #dm-eh .mf-wm-note{margin:10px 0 0;font-family:var(--font-ui);font-size:14px;line-height:1.4;color:var(--dm-ink-2);text-wrap:pretty} #dm-eh .mf-wm-note b{font-weight:700;color:var(--dm-ink-1);font-variant-numeric:tabular-nums} #dm-eh .mf-wm-blk > .mf-wm-note:first-child{margin-top:0} #dm-eh .mf-wm-big{display:block;margin-top:10px;font-family:var(--font-ui);font-size:31px;font-weight:300;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--dm-ink-1)} #dm-eh .mf-wm-big + .mf-wm-note{margin-top:8px} #dm-eh .mf-wm-ward{display:block;font-family:var(--font-display);font-size:34px;font-weight:700;line-height:1.05;letter-spacing:.005em;color:var(--dm-ink-1)} #dm-eh .mf-wm-id{display:block;margin-top:8px;font-family:var(--font-ui);font-size:12px;letter-spacing:.08em;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--dm-ink-4)} /* Your ward: turnout and registered voters side by side, as turnout and registered voters at the top of the banner */ #dm-eh .mf-wm-kv{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start} #dm-eh .mf-wm-kv > div{min-width:0;padding:0 0 0 18px;border-left:1px solid var(--dm-grey-2)} #dm-eh .mf-wm-kv > div:first-child{padding:0 18px 0 0;border-left:0} #dm-eh .mf-wm-kv b{display:block;margin-top:8px;font-family:var(--font-ui);font-size:26px;font-weight:300;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--dm-ink-1)} #dm-eh .mf-wm-kv + .mf-wm-note{margin-top:14px} /* Results by ward: the reader's ward, its swatch raised as the ward stands on the map */ #dm-eh .mf-wm-you{display:flex;align-items:center;gap:9px;margin:12px 0 0;font-family:var(--font-ui);font-size:14px;line-height:1.3;color:var(--dm-ink-2)} #dm-eh .mf-wm-you i{flex:none;width:14px;height:11px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 2.5px 0 #252321,1px 4px 4px rgba(0,0,0,.25);transform:translateY(-1.5px)} #dm-eh .mf-wm-you span{min-width:0} #dm-eh .mf-wm-you b{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--dm-ink-1);white-space:nowrap} /* narrow: the facts under the map, the blocks still stacked */ #dm-eh .mf-wm-grid:not(.has-side) .mf-wm-blk{margin-bottom:16px;padding-bottom:16px} #dm-eh .mf-wm-grid:not(.has-side) .mf-wm-blk:last-child{margin-bottom:0;padding-bottom:0} @media (max-width: 640px){#dm-eh .mf-wmap{margin-bottom:14px}#dm-eh .mf-wmap--res{margin:36px 0 0}#dm-eh .mf-wm-title{font-size:21px}#dm-eh .mf-wm-box.is-wait{height:220px}#dm-eh .mf-wm-ward{font-size:30px}} @media (prefers-reduced-motion: reduce){#dm-eh .wm-up path,#dm-eh .wm-base path{transition:none}#dm-eh .mf-wm-box.is-in svg,#dm-eh .mf-wm-side.is-in{animation:none}#dm-eh .mf-wm-pane{transition:none}} /* the countdown to a hung council's first sitting: always red */ #dm-eh .eh-dl,#dm-eh .eh-dl.is-due,#dm-eh .eh-dl.is-past{background:var(--dm-red-cta)} /* "Show all parties" / "Collapse": outlined, black on white */ #dm-eh .mf-res-more{background:#fff;color:#181818;border:1px solid #181818} /* ==== post-elections v9 · votes and seats in the municipal file: taller rows, a 16px share bar split by ballot (ward solid, PR hatched, a local council's district ballot dotted) with the figures under it and the key in the head; the row picked out on the half circle pops up as a charcoal slab (v11.3: an open row pops up white, see below) ==== */ #dm-eh .mf-res-tbl .mf-res-table tbody th,#dm-eh .mf-res-tbl .mf-res-table tbody td{padding-top:11px;padding-bottom:11px} #dm-eh .mf-res-tbl .mf-res-table tbody .pn strong{font-size:15px} #dm-eh .mf-res-tbl .mf-res-table .shb{gap:10px} #dm-eh .mf-res-tbl .mf-res-table .shb .bar{flex:none;display:flex;gap:2px;height:22px;border-radius:6px;overflow:hidden;transform-origin:0 50%;box-shadow:0 1.5px 1px rgba(23,23,23,.24);transition:opacity .25s ease,transform .45s cubic-bezier(.2,.7,.2,1),transform-origin .45s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease} #dm-eh .mf-res-tbl .mf-res-table .shb .bar i{flex:0 1 0%;min-width:0;height:100%;border-radius:0;transition:none} #dm-eh .mf-res-tbl .mf-res-table .shb strong{font-size:15px} #dm-eh .mf-res-tbl .mf-res-table .bar i.w,#dm-eh .mf-res-tbl .mf-res-table .shk i.w{background:var(--c)} #dm-eh .mf-res-tbl .mf-res-table .bar i.l,#dm-eh .mf-res-tbl .mf-res-table .shk 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)} #dm-eh .mf-res-tbl .mf-res-table .bar i.d,#dm-eh .mf-res-tbl .mf-res-table .shk 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)} #dm-eh .mf-res-tbl .mf-res-table .shs{display:flex;flex-wrap:wrap;gap:2px 0;margin-top:5px;font-size:11.5px;line-height:1.3;color:#5e574e;white-space:nowrap;transition:opacity .2s ease,color .12s ease} #dm-eh .mf-res-tbl .mf-res-table .shs span + span::before{content:"\00b7";margin:0 7px;color:#b8b2a9} #dm-eh .mf-res-tbl .mf-res-table .sht{display:inline-flex;align-items:center;gap:18px} #dm-eh .mf-res-tbl .mf-res-table .shk{display:inline-flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.06em;transition:opacity .2s ease} #dm-eh .mf-res-tbl .mf-res-table .shk span{display:inline-flex;align-items:center;gap:5px} #dm-eh .mf-res-tbl .mf-res-table .shk i{--c:#181818;display:block;width:10px;height:10px;border-radius:2px} @media (max-width: 480px){#dm-eh .mf-res-tbl .mf-res-table .shk{display:none}} /* v11.3 · the share bar shows the party's whole tally, one solid bar. An open row (the pointer over it, a tap on a touch screen, the keyboard's focus on its button, or its seats picked out on the half circle) pops up, still white, and its bar splits into ward and PR votes, the figures under it and the key in the head; the bar and the figures move up together, so the row never changes height and the other rows stay as they are */ #dm-eh .mf-res-tbl .mf-res-table .shb .bar{position:relative} #dm-eh .mf-res-tbl .mf-res-table .shb .bar::after{content:"";position:absolute;inset:0;background:var(--c,#181818);transition:opacity .22s ease} #dm-eh .mf-res-tbl .mf-res-table .shw{display:block;transform:translateY(calc(50% - 12px));transition:transform .34s cubic-bezier(.2,.8,.2,1)} #dm-eh .mf-res-tbl .mf-res-table .shw .shb{height:24px} #dm-eh .mf-res-tbl .mf-res-table .shs{position:relative;opacity:0;pointer-events:none} #dm-eh .mf-res-tbl .mf-res-table .shk{opacity:0} #dm-eh .mf-res-tbl .mf-res-table.can-open tbody tr.is-open{position:relative;z-index:1} #dm-eh .mf-res-tbl .mf-res-table:not(.is-coal) tr:is(.is-open,.is-sel) .shs{opacity:1;pointer-events:auto} #dm-eh .mf-res-tbl .mf-res-table:not(.is-coal) tr:is(.is-open,.is-sel) .bar::after{opacity:0} /* v22.5 · an open row stays put (no lift, no card); only its bar pops towards the reader: it grows a little and its sharp shadow drops further and softens. The ward and PR figures show under the bar where it sits */ #dm-eh .mf-res-tbl .mf-res-table.can-open:not(.is-coal) tbody tr.is-open .shb .bar{transform-origin:50% 50%;transform:scale(1.04);box-shadow:0 6px 7px -2px rgba(23,23,23,.3)} @media (prefers-reduced-motion: reduce){#dm-eh .mf-res-tbl .mf-res-table.can-open:not(.is-coal) tbody tr.is-open .shb .bar{transform:none}} /* v23 · a row whose seats are picked out on the half circle does the same as an open row: it stays put (no lift, no card, no white slab) and only its bar pops */ #dm-eh .mf-res-tbl .mf-res-table tr.is-sel{transform:none;box-shadow:none} #dm-eh .mf-res-tbl .mf-res-table tr.is-sel > *{background:transparent;border-bottom-color:var(--dm-grey-1)} #dm-eh .mf-res-tbl .mf-res-table tr.is-sel > *::after{content:none} #dm-eh .mf-res-tbl .mf-res-table tbody tr.is-sel .shb .bar{transform-origin:50% 50%;transform:scale(1.04);box-shadow:0 6px 7px -2px rgba(23,23,23,.3)} @media (prefers-reduced-motion: reduce){#dm-eh .mf-res-tbl .mf-res-table tbody tr.is-sel .shb .bar{transform:none}} #dm-eh .mf-res-tbl .mf-res-table:is(.has-open,.has-sel):not(.is-coal) .shk{opacity:1} #dm-eh .mf-res-tbl .mf-res-table.has-sel tbody tr:not(.is-sel) > *{opacity:1} @media (prefers-reduced-motion: reduce){#dm-eh .mf-res-tbl .mf-res-table .shw,#dm-eh .mf-res-tbl .mf-res-table .shb .bar::after{transition:none}} /* post-elections v23: the table as wide as the seats box over it, at every width (on desktop it sat 52px in from the box's sides); 12px either side of it is kept for the bars' pop */ #dm-eh .mf-res-tbl .mf-res-tw{padding-left:12px;padding-right:12px} @media (min-width: 641px){#dm-eh .mf-res-tbl .mf-res-tw{padding:0 12px 34px;margin:-6px -12px -34px}} /* v23.6 · desktop: the table 13px in from the seats box's sides (the box's border and padding), level with the tag and the button inside it; phones keep the full width */ @media (min-width: 641px){#dm-eh .mf-res-tbl .mf-res-tw{padding-left:25px;padding-right:25px}} @media (prefers-reduced-motion: reduce){#dm-eh .mf-res-tbl .mf-res-table .shb .bar,#dm-eh .mf-res-tbl .mf-res-table .shs{transition:none}} /* black banner: larger turnout and registered-voter figures; the council box a fixed gap under them on every file, no longer pushed to the banner's foot by a tall locator map */ #dm-eh .mf-banner-facts.is-gov .bf-count .v{font-size:34px} #dm-eh .mf-banner-facts.is-res .bf-count .bf-wait{height:26px;margin-top:4px} @media (max-width: 640px){#dm-eh .mf-banner-facts.is-gov .bf-count .v{font-size:28px}} @media (min-width: 641px){#dm-eh .mf-file-banner > div:first-child{justify-content:flex-start}#dm-eh .mf-file-banner > div:first-child > .mf-banner-facts{margin-bottom:0}#dm-eh .mf-munigov{margin-top:22px}} /* v11.5 · the ward finder holds still (#mf-ward: Results by ward, Your ward, the dropdown, the ward box and the ward's votes): no fades, rises, pulses or eased colour changes; the script runs no loop (wmCalm) */ #dm-eh #mf-ward *,#dm-eh #mf-ward *::before,#dm-eh #mf-ward *::after{animation:none !important;transition:none !important} /* ==== post-elections v14 · the councils by boundary: in Results across South Africa every metro and local council is drawn as its 2026 boundary (Municipal Demarcation Board), in the colour of the party leading it or in the blues of its turnout, set on the shape by the script; over the whole country the province borders in a heavier line. Under the pointer a council darkens with a black outline (an overlay the script moves); the neighbouring provinces' councils in a province's view are faint and lighten. Lines keep their width at every zoom (see "the councils by boundary" in the script) ==== */ #dm-eh .res-map-svg path.rc{fill:#ecebe6;stroke:rgba(23,23,23,.42);stroke-width:.5px;vector-effect:non-scaling-stroke;stroke-linejoin:round;fill-rule:evenodd;cursor:pointer;transition:opacity .18s ease} #dm-eh .res-map-svg:not(.is-nat) path.rc{stroke-width:.75px} #dm-eh .res-map-svg path.rc.is-nb{fill:#faf9f7;stroke:#e2ded6;stroke-width:.6px;transition:fill .15s ease} @media (hover: hover){#dm-eh .res-map-svg path.rc.is-nb:hover{fill:#efede8}} #dm-eh .res-map-svg path.rp{fill:none;stroke:#181818;stroke-opacity:.6;stroke-width:.9px;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:none;transition:stroke-opacity .18s ease} /* v22.9 · the province and country outlines on every map finer and lighter (were 1.2px at .8) */ #dm-eh .res-map-svg path.rc-hov{fill:rgba(0,0,0,.16);stroke:#181818;stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-linejoin:round;fill-rule:evenodd;pointer-events:none} /* the legend: square swatches for shapes; the councils without a result in the plain of the map */ #dm-eh .res-legend.is-shapes i{border-radius:2px} #dm-eh .res-legend li.is-nr{color:#5e574e} #dm-eh .res-legend li.is-nr i{background:#ecebe6;box-shadow:inset 0 0 0 1px #a8a39a} /* v13.1 · over the whole country the province under the pointer stands up with its councils on it: shadow, dark sides that grow as it rises (with a slight bounce), its outline over its top */ #dm-eh .res-map-svg .rl-sh{fill:#000;stroke:none;opacity:0;pointer-events:none;transition:opacity .3s ease} #dm-eh .res-map-svg .rl.is-up .rl-sh{opacity:.32} #dm-eh .res-map-svg .rl-wall{fill:#2a2826;stroke:#2a2826;stroke-width:.75px;vector-effect:non-scaling-stroke;stroke-linejoin:round;fill-rule:evenodd;cursor:pointer} #dm-eh .res-map-svg .rl-foot .rl-wall{stroke:#1c1b19} #dm-eh .res-map-svg .rl-step,#dm-eh .res-map-svg .rl-top{transform:translateY(0);transition:transform .45s cubic-bezier(.3,1.5,.55,1)} #dm-eh .res-map-svg .rl.is-up .rl-step,#dm-eh .res-map-svg .rl.is-up .rl-top{transform:translateY(calc(var(--k) * -1px))} @media (prefers-reduced-motion: reduce){#dm-eh .res-map-svg path.rc,#dm-eh .res-map-svg path.rp,#dm-eh .res-map-svg .rl-sh,#dm-eh .res-map-svg .rl-step,#dm-eh .res-map-svg .rl-top{transition:none}} /* ==== post-elections v14.3 · Results across South Africa: the head. The heading names the area in view; under it, the area's declaration box on the left, the size of the black banner's (red while counting, green at 100%), and the area dropdown on the right. Phones: the heading and the dropdown as before (the dropdown names the area), the box full width under them ==== */ #dm-eh .eh-res .eh-sec-head{margin-bottom:14px} #dm-eh .res-dslot[hidden]{display:none} #dm-eh .res-h .res-pface{border-radius:6px} @media (min-width: 561px){#dm-eh .res-h{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px 28px}#dm-eh .res-h .res-pick{order:-1;flex:none;display:flex;margin-left:0}#dm-eh .res-dslot{flex:1 1 300px;min-width:0;display:flex}#dm-eh .res-dslot > .mf-decl{flex:1 1 auto;min-width:0;align-content:center}#dm-eh .res-h .res-pbtn{height:auto;min-height:74px;align-items:stretch}#dm-eh .res-h .res-pface{height:auto;gap:18px;padding:0 24px 0 31px;border-width:1px}#dm-eh .res-h .res-pname{font-size:30px;letter-spacing:-0.2px}#dm-eh .res-h .res-pchev{width:20px;height:20px}#dm-eh .res-h .res-pmenu{left:0;right:auto}} @media (max-width: 560px){#dm-eh .res-dslot{order:3;flex:0 0 100%;margin-top:4px}#dm-eh .res-hn{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}} /* v13.4 · Results across South Africa: no status row under the head and no rules over the map and party support; the map comes up under the head */ #dm-eh .res-state{display:none} #dm-eh .res-map,#dm-eh .res-board{padding-top:0;border-top:0} /* v13.4 · the councils map's head: no label; the leading party / turnout pill on the left, black like the ward map's, in the same place over a province (v13.5: no button back to South Africa; the area dropdown has it) */ #dm-eh .res-map-head{justify-content:flex-start} #dm-eh .res-map-head .res-tog{background:#181818;box-shadow:inset 0 0 0 1.5px #4a4744} #dm-eh .res-map-head .res-tog button{color:#b5b1aa;white-space:nowrap;transition:background .15s ease,color .15s ease} #dm-eh .res-map-head .res-tog button[aria-pressed="true"]{background:#fff;color:#181818;box-shadow:none} @media (hover: hover){#dm-eh .res-map-head .res-tog button[aria-pressed="false"]:hover{color:#fff;background:rgba(255,255,255,.12)}} #dm-eh .res-map-head .res-tog button:focus-visible{outline:2px solid #fff;outline-offset:2px} /* v13.5 · beside party support, the pill's top on the cap height of its PARTY / SHARE / VOTES header (the table 12px down, its caps 3px more); the map stays put, the head over the top of the drawing's own margin */ @media (min-width: 861px){#dm-eh .res-map > .res-map-head{position:relative;z-index:1;margin-top:15px}#dm-eh .res-map > .res-map-head + .res-map-svg{margin-top:-9px}} /* v13.6 · the head's declaration box on one line over its bar: Counting on the left, the voting districts in the middle, the share on the right. The area dropdown takes the box's height (60px) */ @media (min-width: 561px){#dm-eh .res-dslot{flex-basis:440px}#dm-eh .res-dslot > .mf-decl{grid-template-columns:1fr auto 1fr;grid-template-areas:"st sub pct" "trk trk trk";align-items:center;gap:9px 16px;padding:12px 20px 13px}#dm-eh .res-dslot .mf-decl-row{display:contents}#dm-eh .res-dslot .st{grid-area:st;justify-self:start;white-space:nowrap}#dm-eh .res-dslot .mf-decl-row > b{grid-area:pct;justify-self:end}#dm-eh .res-dslot .sub{grid-area:sub;text-wrap:balance}#dm-eh .res-dslot .trk{grid-area:trk}#dm-eh .res-h .res-pbtn{min-height:60px}} /* v13.7 · turnout and registered voters over the party support table, a hairline under them; their labels' caps where the table header's were, level with the map's pill */ #dm-eh .res-stand > .res-facts{margin-top:12px;padding:0 0 16px;border-top:0;border-bottom:1px solid var(--res-hair)} #dm-eh .res-stand > .res-facts + .mf-res-tw{margin-top:18px} /* v13.8 · desktop: Latest Election Coverage's divider over Results across South Africa (2px line, 46px below the municipality finder, 16px above the declaration box and the area dropdown). Phones as before: Latest Election Coverage has no divider there */ @media (min-width: 641px){#dm-eh .eh-res{padding-top:30px}#dm-eh .eh-res .eh-sec-head.eh-sec-head-mb{border-top:2px solid var(--dm-ink-1);padding-top:16px}} /* v13.9 · the area dropdown's button is black with a white name and chevron; hover and press go a shade lighter */ #dm-eh .res-h .res-pface{background:#181818;color:#fff} @media (hover: hover){#dm-eh .res-h .res-pbtn:not(.is-open):hover .res-pface{background:#2e2e2e}} #dm-eh .res-h .res-pbtn:not(.is-open):active .res-pface{background:#444} /* v13.10 · Hung councils: the heading out of the red banner and over it, as Latest Election Coverage's (its size and, on desktop, its divider: 2px line, 46px below the newsletter and questions buttons, 16px above the heading), and 46px from the list to Manifesto Breakdowns' line (phones: 38px, as between Manifesto Breakdowns and Latest Election Coverage). The banner: the explanation on the left, a rule, the days left on the right (phones: under the explanation, as before) */ #dm-eh .eh-hung{margin:10px 0} #dm-eh .eh-hung .eh-dl{grid-template-columns:minmax(0,1fr) auto} #dm-eh .eh-hung .eh-dl::before{content:none} #dm-eh .eh-hung .eh-dl p{grid-area:1/1} @media (min-width: 641px){#dm-eh .eh-hung .eh-dl .eh-dl-n{grid-area:1/2}} @media (max-width: 640px){#dm-eh .eh-hung{margin:2px 0 1px}#dm-eh .eh-hung .eh-dl{grid-template-columns:minmax(0,1fr)}} /* v13.11 · Hung councils: no rule over the list */ #dm-eh .eh-hung-list{border-top:0} /* v13.12 · Hung councils: the banner closer to the heading, with less padding */ #dm-eh .eh-hung .eh-sec-head{margin-bottom:18px} #dm-eh .eh-hung .eh-dl{padding:12px 18px} @media (max-width: 640px){#dm-eh .eh-hung .eh-sec-head{margin-bottom:12px}#dm-eh .eh-hung .eh-dl{padding:11px 14px}} /* v13.13 · Hung councils: the whole row is the way into the council's file (no underline on the name). Over it, the row rises as a white card, as a picked row in the results tables; a click anywhere on it opens the file, Build a coalition keeps its own button. Phones: the row greys while pressed */ #dm-eh .eh-hung-row:not(.eh-hung-hd){position:relative;z-index:0;transition:transform .14s ease} #dm-eh .eh-hung-row:not(.eh-hung-hd)::before{content:"";position:absolute;inset:0 -10px -1px;z-index:-1;border-radius:8px;background:#fff;opacity:0;transition:opacity .14s ease,box-shadow .14s ease} #dm-eh .eh-hung-nm{-webkit-tap-highlight-color:transparent} #dm-eh .eh-hung-nm::after{content:"";position:absolute;inset:0 -10px -1px;border-radius:8px} #dm-eh .eh-hung-go{position:relative;z-index:1} #dm-eh .eh-hung-nm:focus-visible{outline:none} #dm-eh .eh-hung-nm:focus-visible::after{outline:2px solid #d33d3d;outline-offset:2px} @media (hover: hover){#dm-eh .eh-hung-row:not(.eh-hung-hd):hover{z-index:1;transform:translateY(-3px) scale(1.01)}#dm-eh .eh-hung-row:not(.eh-hung-hd):hover::before{opacity:1;box-shadow:0 16px 26px -12px rgba(23,23,23,.34),0 3px 8px -2px rgba(23,23,23,.12),0 0 0 1px rgba(23,23,23,.07)}} #dm-eh .eh-hung-row:has(.eh-hung-nm:focus-visible){z-index:1;transform:translateY(-3px) scale(1.01)} #dm-eh .eh-hung-row:has(.eh-hung-nm:focus-visible)::before{opacity:1;box-shadow:0 16px 26px -12px rgba(23,23,23,.34),0 3px 8px -2px rgba(23,23,23,.12),0 0 0 1px rgba(23,23,23,.07)} @media (hover: hover){#dm-eh .eh-hung-row:has(.eh-hung-nm:active){transform:translateY(-1px) scale(1.004);transition-duration:.05s}} @media (hover: none){#dm-eh .eh-hung-row:has(.eh-hung-nm:active)::before{opacity:1;background:var(--dm-grey-3);transition-duration:0s}} /* v13.14 · Hung councils: a taller banner, with more room left and right and a bigger countdown (the explanation keeps its size) */ #dm-eh .eh-hung .eh-dl{gap:28px;padding:18px 30px} #dm-eh .eh-hung .eh-dl-n{padding-left:28px} #dm-eh .eh-hung .eh-dl-n strong{font-size:48px} #dm-eh .eh-hung .eh-dl-n span{margin-top:6px;font-size:11px} @media (max-width: 640px){#dm-eh .eh-hung .eh-dl{gap:16px;padding:15px 18px}#dm-eh .eh-hung .eh-dl-n{padding-left:0}#dm-eh .eh-hung .eh-dl-n strong{font-size:38px}#dm-eh .eh-hung .eh-dl-n span{margin-top:0}} /* v13.15 · beside the councils map: by leading party, party support alone; by turnout, the area's turnout and registered voters over the map's key, which leaves the map for here: a bar for each band of turnout in its colour on the map and the councils in it, then the councils with no result yet. A hairline round each bar, so the palest band shows on white */ #dm-eh .res-tkey .shb i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)} #dm-eh .res-tkey tr.is-nr .sw,#dm-eh .res-tkey tr.is-nr .shb i{box-shadow:inset 0 0 0 1px #a8a39a} #dm-eh .res-tkey tr.is-nr .pn strong{font-weight:400;color:#5e574e} /* v13.16 · provinces and councils: over a row, the row rises as a white card, as the hung councils' rows do, where it tinted; the arrow still darkens. The card is the first cell's (Safari takes no position on a table row): the table's width, 14px past it on the left and 10px on the right, so the name and the arrow sit 14px in, as in the hung councils' card. The table's box gives the card and its shadow room; a strip under the risen row keeps the pointer on it. Phones: the row greys while pressed */ #dm-eh .res-tw{container-type:inline-size;isolation:isolate;padding:0 32px 30px;margin:0 -32px -30px} @media (max-width: 640px){#dm-eh .res-tw{padding:0 var(--eh-g) 30px;margin:0 calc(-1 * var(--eh-g)) -30px}} #dm-eh .res-table tbody tr{position:relative;z-index:0;transition:transform .14s ease;-webkit-tap-highlight-color:transparent} #dm-eh .res-table tbody tr:hover,#dm-eh .res-table tbody tr:focus-visible{background:transparent} #dm-eh .res-table tbody tr > *{position:relative} #dm-eh .res-table tbody tr > :first-child::before{content:"";position:absolute;top:0;bottom:-1px;left:-14px;width:calc(100cqw + 24px);z-index:-1;border-radius:8px;background:#fff;opacity:0;transition:opacity .14s ease,box-shadow .14s ease} @media (hover: hover){#dm-eh .res-table tbody tr:hover{z-index:1;transform:translateY(-3px) scale(1.01)}#dm-eh .res-table tbody tr:hover > *{border-bottom-color:transparent}#dm-eh .res-table tbody tr:hover > :first-child::before{opacity:1;box-shadow:0 16px 26px -12px rgba(23,23,23,.34),0 3px 8px -2px rgba(23,23,23,.12),0 0 0 1px rgba(23,23,23,.07)}#dm-eh .res-table tbody tr:hover > *::after{content:"";position:absolute;left:0;right:0;top:100%;height:4px}} #dm-eh .res-table tbody tr:focus-visible{z-index:1;transform:translateY(-3px) scale(1.01)} #dm-eh .res-table tbody tr:focus-visible > *{border-bottom-color:transparent} #dm-eh .res-table tbody tr:focus-visible > :first-child::before{opacity:1;box-shadow:0 16px 26px -12px rgba(23,23,23,.34),0 3px 8px -2px rgba(23,23,23,.12),0 0 0 1px rgba(23,23,23,.07);outline:2px solid #d33d3d;outline-offset:2px} @media (hover: hover){#dm-eh .res-table tbody tr:active{transform:translateY(-1px) scale(1.004);transition-duration:.05s}} @media (hover: none){#dm-eh .res-table tbody tr:active > *{border-bottom-color:transparent}#dm-eh .res-table tbody tr:active > :first-child::before{opacity:1;background:var(--dm-grey-3);transition-duration:0s}} /* v13.17 · the newsletter and questions buttons under Hung councils. Final phase: Hung councils' divider 46px below the results (phones: its heading 38px), 46px from the list to the buttons and 46px from the buttons to Manifesto Breakdowns' line (phones: 38px and 38px), as between the blocks before. Before the final phase the buttons stand alone, as before */ #dm-eh .eh-coalition .eh-hung{margin:-12px 0 0} #dm-eh .eh-coalition .eh-hung:not([hidden]) + .eh-cta-row{margin-top:46px;padding-bottom:10px !important} @media (max-width: 640px){#dm-eh .eh-coalition .eh-hung{margin:6px 0 0}#dm-eh .eh-coalition .eh-hung:not([hidden]) + .eh-cta-row{margin-top:38px;padding-bottom:1px !important}} /* v13.18 · the councils map: in a province the council under the pointer stands up out of the map as the province does over the whole country (the script raises it). The tooltip says what the map shows: by leading party, the three leading parties, each with a swatch in its colour and its share (a council: whether the leader has a majority, with its seats); by turnout, the turnout with a swatch in its colour on the map, the registered voters and the ballots cast. The figures right-aligned in a column; under a hairline, the share of voting districts declared while counting */ #dm-eh .res-tip{grid-template-columns:auto minmax(0,1fr) auto;column-gap:0;row-gap:3px;min-width:148px;padding:8px 11px 9px} #dm-eh .res-tip > span{grid-column:1/-1} #dm-eh .res-tip .nm{margin-bottom:2px} #dm-eh .res-tip .tr{display:contents} #dm-eh .res-tip .tr > i{grid-column:1;width:9px;height:9px;margin-right:7px;border-radius:2px;align-self:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)} #dm-eh .res-tip .tr > .l{grid-column:2} #dm-eh .res-tip .tr.is-ns > .l{grid-column:1/3} #dm-eh .res-tip .tr > b{grid-column:3;padding-left:18px;font-size:12px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:#fff} #dm-eh .res-tip .tr.is-key > .l{color:#fff} #dm-eh .res-tip span.ft{margin-top:3px;padding-top:5px;border-top:1px solid rgba(255,255,255,.16);font-size:11.5px;color:rgba(255,255,255,.68)} /* v13.19 · in a province the map shows the province alone, its councils centred; the way back to the whole country is a black magnifying glass with a minus on the white (its handle to the left, no circle round it), at the right of the map's head, level with the leading party / turnout pill and its height */ #dm-eh .res-zoom{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin:0 -6px 0 auto;padding:0;background:transparent;color:#181818;border:0;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .15s ease} #dm-eh .res-zoom svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} @media (hover: hover){#dm-eh .res-zoom:hover{opacity:.65}} #dm-eh .res-zoom:active{opacity:.5} #dm-eh .res-zoom:focus-visible{outline:2px solid #d33d3d;outline-offset:2px} /* v13.20 · Results by ward takes the pointer: the ward under it rises halfway (the chosen ward stands all the way), its name in a black box over the pointer, as on the councils map; a click or a tap chooses it, as the dropdown does, and it goes on up. The raised wards' sides and tops take the pointer, so it is on the ward it is seen to be on */ #dm-eh .mf-wmap--res .mf-wm-box svg{-webkit-tap-highlight-color:transparent} #dm-eh .mf-wmap--res .wm-base path,#dm-eh .mf-wmap--res .wm-up .wm-wall,#dm-eh .mf-wmap--res .wm-up .wm-top{cursor:pointer} #dm-eh .mf-wmap--res .wm-up .wm-wall,#dm-eh .mf-wmap--res .wm-up .wm-top{pointer-events:visiblePainted} #dm-eh .mf-wmap--res .wm-base path.is-off,#dm-eh .mf-wmap--res .wm-base path.is-sel,#dm-eh .mf-wmap--res .wm-up.is-up path{cursor:default} #dm-eh .wm-up.is-half .wm-wall,#dm-eh .wm-up.is-half .wm-top{transform:translateY(calc(var(--k) * -.5px))} #dm-eh .wm-up.is-half .wm-sh{opacity:.2;transform:translate(.5px,1.5px)} #dm-eh .mf-wm-tip{min-width:0;padding:6px 10px 7px} #dm-eh .mf-wm-tip .nm{margin:0} /* v13.21 · the ward box: Contact your ward councillor under the turnout and registered voters, the DM button (Geist Bold 11px on #181818, 3px corners) with an arrow out to the IEC's Who is my ward councillor?; black on white under the pointer, at once, as the ward finder holds still. Full width on phones */ #dm-eh #mf-wardgov .wg-rep{display:inline-flex;align-items:center;gap:8px;margin:20px 0 0;padding:10px 14px 10px 16px;background:#181818;border:1px solid #181818;border-radius:3px;font-family:Geist,"Helvetica Neue",Arial,sans-serif !important;font-size:11px !important;font-weight:700;letter-spacing:.05em;line-height:1.2;text-transform:uppercase;color:#fff !important;text-decoration:none !important;cursor:pointer;-webkit-font-smoothing:antialiased} #dm-eh #mf-wardgov .wg-rep svg{flex:none;width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #dm-eh #mf-wardgov .wg-rep:hover{background:#fff;color:#181818 !important} #dm-eh #mf-wardgov .wg-rep:focus-visible{outline:2px solid #d33d3d;outline-offset:2px} #dm-eh #mf-wardgov .wg-break > .wg-rep:first-child{margin-top:0} @media (max-width: 640px){#dm-eh #mf-wardgov .wg-rep{display:flex;justify-content:center;min-height:44px;margin-top:18px}} /* ==== post-elections v15 · the tabs under the municipality finder: All results, Hung councils, Change since 2021. One row on a 1px baseline, the area dropdown (black pill) at its right end, over the baseline; the tab in view stands up out of the baseline as a white folder tab with a black outline and no bottom edge, the others sit lower, outlined in a hairline on a warm grey. Hung councils carries the count of hung councils in the area in a red badge. Phones: the dropdown over the tabs, the tabs scrolling sideways edge to edge. ==== */ #dm-eh .eh-tabs-sec{border-bottom:0;padding:24px 0 40px} @media (min-width: 641px){#dm-eh .eh-tabs-sec{padding-top:14px}} #dm-eh .eh-tabs-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;border-bottom:1px solid #181818} #dm-eh .eh-tabs-head .res-h{flex:1 1 auto;order:2;justify-content:flex-end;padding-bottom:12px} /* while the Commission counts the declaration box stands with the dropdown, too wide for the tabs' row: that row goes over the tabs, full width, so the tabs keep the baseline */ #dm-eh .eh-tabs-head:has(.res-dslot:not([hidden])) .res-h{order:0;flex:1 0 100%;padding-bottom:4px} #dm-eh .eh-tabs-head.has-dslot .res-h{order:0;flex:1 0 100%;padding-bottom:4px} #dm-eh .eh-tabs{display:flex;align-items:flex-end;gap:5px;flex:0 1 auto;order:1;min-width:0} #dm-eh .eh-tab{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:9px;height:46px;margin:0 0 -1px;padding:2px 18px 0;box-sizing:border-box;background:#e4e1db;border:1px solid #cdc7bd;border-bottom:1px solid #181818;border-radius:7px 7px 0 0;font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1;letter-spacing:-.1px;color:#5e574e;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .14s ease,color .14s ease,border-color .14s ease,height .14s ease} @media (hover: hover){#dm-eh .eh-tab:not(.is-on):hover{background:#edeae4;color:#181818;border-color:#a8a39a;border-bottom-color:#181818}} #dm-eh .eh-tab.is-on{height:50px;background:#fff;color:#181818;border-color:#181818;border-bottom-color:#fff;cursor:default} #dm-eh .eh-tab:focus-visible{outline:2px solid #d33d3d;outline-offset:-5px} #dm-eh .eh-tab-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;background:#d33d3d;color:#fff;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:12.5px;font-weight:700;letter-spacing:.02em;line-height:1} #dm-eh .eh-tab-n[hidden]{display:none} #dm-eh .eh-tab-panel[hidden]{display:none} #dm-eh .eh-tab-panel.eh-res{padding:26px 0 0;border:0} #dm-eh .eh-tab-panel.eh-hung{margin:0;padding:26px 0 0} #dm-eh .eh-tab-panel.eh-cmp{padding:26px 0 0} #dm-eh .eh-hung-body > .eh-hung-none{margin:0;max-width:640px;font-size:15px;line-height:1.5} /* Change since 2021 */ #dm-eh .cmp-facts{margin-top:30px} #dm-eh .cmp-facts .v small,#dm-eh .cmp-d small{display:inline-block;margin-left:5px;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:400;letter-spacing:0;color:#5e574e;white-space:nowrap} #dm-eh .cmp-arr{display:inline-block;margin:0 7px;color:#a3978a;font-weight:400} /* v17 · the two maps on top, in Results' two columns (.res-grid, each a .res-map with its head): 2021 where Results has its map, the same size in the same place, 2026 where it has party support; each with its key under it */ #dm-eh .eh-cmp{--res-hair:#e7e3db} #dm-eh .cmp-yr{flex:1 1 auto;font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1;letter-spacing:-.1px;color:#181818} #dm-eh .cmp-map-svg path.rc{cursor:default} #dm-eh .cmp-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;padding:0;list-style:none;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:12.5px;line-height:1.3;color:#4a443c} #dm-eh .cmp-legend li{display:flex;align-items:center;gap:6px;white-space:nowrap} #dm-eh .cmp-legend i{flex:none;width:10px;height:10px;border-radius:2px;background:#ecebe6;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)} #dm-eh .cmp-legend b{font-weight:600;color:#171717} #dm-eh .cmp-mnote{margin-top:14px} #dm-eh .cmp-share tbody th,#dm-eh .cmp-share thead th:first-child{padding-left:0} #dm-eh .cmp-share tbody td,#dm-eh .cmp-share thead th{padding-left:6px;padding-right:6px} #dm-eh .cmp-share tbody td:last-child,#dm-eh .cmp-share thead th:last-child{padding-right:0} #dm-eh .cmp-share .res-sb{gap:6px} #dm-eh .cmp-share .res-sb i{width:110px} #dm-eh .cmp-d{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} #dm-eh .cmp-d.is-flat{font-weight:400;color:#8a8279} #dm-eh .cmp-sh{display:block;margin-top:3px;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:12px;color:#5e574e} #dm-eh .cmp-table .res-oc.is-na{color:#a3978a} #dm-eh .cmp-empty{margin:0;max-width:640px;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.5;color:#4a443c} #dm-eh .cmp-note{margin:14px 0 0} #dm-eh .eh-cmp .res-preview{margin-top:14px} @media (max-width: 640px){ #dm-eh .eh-tabs-sec{padding:6px 0 20px} #dm-eh .eh-tabs-head{display:block;border-bottom:0} #dm-eh .eh-tabs-head .res-h{padding-bottom:14px} #dm-eh .eh-tabs{display:flex;margin:0 calc(-1 * var(--eh-g));padding:0 var(--eh-g) 1px;overflow-x:auto;scrollbar-width:none;background:linear-gradient(#181818,#181818) left bottom/100% 1px no-repeat} #dm-eh .eh-tabs::-webkit-scrollbar{display:none} #dm-eh .eh-tab{flex:none;height:42px;padding:1px 13px 0;gap:7px;font-size:16px} #dm-eh .eh-tab.is-on{height:46px} #dm-eh .eh-tab-n{min-width:19px;height:19px;padding:0 5px;font-size:11.5px} #dm-eh .eh-tab-panel.eh-res,#dm-eh .eh-tab-panel.eh-hung,#dm-eh .eh-tab-panel.eh-cmp{padding-top:18px} #dm-eh .cmp-facts{flex-wrap:wrap;row-gap:14px} #dm-eh .cmp-facts .bf{flex:1 1 40%} #dm-eh .cmp-facts .bf:nth-child(3){padding-left:0;border-left:0} #dm-eh .cmp-table .hide-s{display:none} } /* ==== post-elections v17 · the tabs, the full width of the column, in the order Results, Turnout, Change since 2021, Hung councils (the markup's). Desktop: the area dropdown has the row over the tabs to itself, on the left (while counting with the declaration box beside it, as before); the tabs share their row equally, none narrower than its name. Phones: the four share the width, the longer names on two lines. ==== */ @media (min-width: 641px){#dm-eh .eh-tabs-head .res-h{order:0;flex:1 0 100%;justify-content:flex-start;padding-bottom:4px}#dm-eh .eh-tabs{flex:1 0 100%}#dm-eh .eh-tab{flex:1 1 0;min-width:max-content;justify-content:center}} @media (max-width: 640px){#dm-eh .eh-tabs{gap:4px}#dm-eh .eh-tab{flex:1 1 auto;justify-content:center;gap:5px;padding:1px 6px 0;font-size:14.5px;line-height:1.08;text-align:center;white-space:normal;text-wrap:balance}#dm-eh .cmp-share .res-sb i{width:36px}} @media (max-width: 359px){#dm-eh .eh-tabs{gap:3px}#dm-eh .eh-tab{padding:1px 4px 0;font-size:13px}} /* ==== post-elections v18 · the tabs: the tab in view white, standing 4px out of the baseline and open to the panel under it; the others warm grey, outlined in a hairline, lighter under the pointer. A switch moves nothing around the tabs: the tab's name holds still as it rises or sinks (its top padding grows with it), the row keeps the height of a tab in view, and the section glides to the new tab's height (the script's "glide"; clipped while it moves). The wrap holds its children's margins, so the section's height is the wrap's and its padding. ==== */ #dm-eh .eh-tabs-sec > .eh-wrap{display:flow-root} #dm-eh .eh-tabs-sec.is-gliding{overflow:hidden} @supports (overflow:clip){#dm-eh .eh-tabs-sec.is-gliding{overflow:clip}} #dm-eh .eh-tabs{min-height:49px} #dm-eh .eh-tab{background:#e4e1db;transition:background-color .18s ease,color .18s ease,border-color .18s ease,height .24s cubic-bezier(.4,0,.2,1),padding-top .24s cubic-bezier(.4,0,.2,1)} @media (hover: hover){#dm-eh .eh-tab:not(.is-on):hover{background:#edeae4;color:#181818;border-color:#a8a39a;border-bottom-color:#181818}} #dm-eh .eh-tab.is-on{padding-top:6px;background:#fff;color:#181818;border-color:#181818;border-bottom-color:#fff} @media (max-width: 640px){#dm-eh .eh-tabs{min-height:46px}#dm-eh .eh-tab.is-on{padding-top:5px}} @media (prefers-reduced-motion: reduce){#dm-eh .eh-tab{transition:none}} /* ==== post-elections v18 · the tabs in the order Results, Turnout, Hung councils, Change since 2021 (the markup's). Change since 2021: the 2021 map and this election's the same size, each half the width of the column (Results' grid gives its map the wider column). ==== */ @media (min-width: 861px){#dm-eh .res-grid.cmp-maps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} /* ==== post-elections v18 · Results by ward: beside the map, each view's key as a table, as the Turnout tab's beside the councils map (the script's wmPaneWin, wmPaneTurn and wmKey): a row for each party the map names, then Others, or for each band of turnout, the highest first, with the wards in it and a bar scaled to the largest, then the wards with no result yet. Over the map and its key, the title stands centred over the map, the pill over the key. v18.1: the rows take no pointer (they raised their wards on the map). ==== */ #dm-eh .mf-wm-key{--res-hair:#e7e3db} #dm-eh .mf-wm-key .mf-res-tw{margin:0;padding:0} #dm-eh .mf-wm-key .mf-res-table thead th{padding:0 6px 8px;border-bottom:1px solid #181818} #dm-eh .mf-wm-key .mf-res-table tbody th,#dm-eh .mf-wm-key .mf-res-table tbody td{padding:10px 6px;border-bottom:1px solid var(--res-hair)} #dm-eh .mf-wm-key .mf-res-table thead th:first-child,#dm-eh .mf-wm-key .mf-res-table tbody th:first-child{padding-left:0} #dm-eh .mf-wm-key .mf-res-table thead th:last-child,#dm-eh .mf-wm-key .mf-res-table tbody td:last-child{padding-right:0} #dm-eh .mf-wmap.has-side .mf-wm-head{display:grid;grid-template-columns:minmax(0,1fr) var(--wm-side,240px);column-gap:32px;justify-items:center} #dm-eh .mf-wmap.has-side .mf-wm-title{text-align:center} /* post-elections v19 · masthead: once every voting district is in, a green Count complete box sits under the red declared counter (which counts the councils still to be declared) */ #dm-eh .eh-mast .eh-mast-done{display:inline-grid;justify-self:end;margin:6px 0 0 auto;padding:7px 11px 7px 10px;gap:0;width:auto} #dm-eh .eh-mast .eh-mast-done[hidden]{display:none} #dm-eh .eh-mast .count .eh-mast-decl{margin-top:6px} #dm-eh .eh-mast .count{display:grid;justify-items:end} #dm-eh .eh-mast .count .lbl,#dm-eh .eh-mast .count .n{justify-self:end} #dm-eh .eh-mast .count .eh-mast-decl{width:100%} @media (max-width: 980px){#dm-eh .eh-mast .count{justify-items:stretch}#dm-eh .eh-mast .count .lbl,#dm-eh .eh-mast .count .n{justify-self:auto}} @media (max-width: 640px){#dm-eh .eh-mast .count .eh-mast-done{grid-area:done;justify-self:end;margin:6px 0 0}#dm-eh .eh-mast .count:has(.eh-mast-done:not([hidden])){grid-template-areas:"when n lbl" "done done done"}} /* post-elections v19 · Latest Election Coverage in its own section, under the results tabs and over the newsletter and questions buttons: on desktop its divider 46px under the tabs; the buttons as far under it as they sat under the tabs */ #dm-eh .eh-section.eh-live-sec{padding:6px 0 40px} @media (max-width: 640px){#dm-eh .eh-section.eh-live-sec{padding:1px 0 20px}} /* ==== post-elections v20 · the count tracker in the black banner's council box, beside the leading or largest party, in the vote breakdown's place (the script's councilBox); nothing stands under the locator map. The box keeps its look, red while the count runs, green once every voting district is in, and starts level with the party's label. On phones it stands under the party, over the source line. ==== */ #dm-eh .mf-munigov .wg-trk .mf-decl{box-sizing:border-box;width:100%;max-width:300px} #dm-eh .mf-munigov .wg-trk .mf-decl-row{flex-wrap:wrap;row-gap:4px} @media (max-width: 640px){#dm-eh .mf-munigov .wg-trk .mf-decl{max-width:none}} /* v20.1 · desktop banner: smaller turnout and registered voters with less space under them; the source line under the locator map (the map fits the height the left column leaves it), its foot level with the foot of the count tracker */ @media (min-width: 641px){#dm-eh .mf-banner-facts.is-gov .bf-count .v{font-size:28px}#dm-eh .mf-banner-facts.is-res .bf-count .bf-wait{height:22px;margin-top:4px}#dm-eh .mf-banner-facts.is-gov{padding-bottom:0}#dm-eh .mf-munigov{margin-top:18px;padding-bottom:0}#dm-eh .mf-munigov .wg-src{display:none} #dm-eh .mf-file-banner{grid-template-rows:minmax(0, 1fr) auto;row-gap:0} #dm-eh .mf-file-map{grid-row:1;align-self:stretch;contain:size;min-height:120px;margin-bottom:-6px} #dm-eh .mf-map-svg{height:100%;aspect-ratio:auto} #dm-eh .mf-file-src{display:block;grid-column:2;grid-row:2;align-self:end;margin:0 0 -2px;color:rgba(255,255,255,0.55);text-align:right} #dm-eh .mf-file-src strong{color:#fff}} #dm-eh .mf-file-src[hidden]{display:none !important} @media (max-width: 640px){#dm-eh .mf-file-src{display:none}} /* v20.2 · desktop council box: the count tracker on the left, the rule, then the leading or largest party on the right (phones keep the party over the tracker) */ @media (min-width: 641px){#dm-eh .mf-munigov .wg-grid.has-trk{grid-template-columns:minmax(0, 1fr) max-content;column-gap:24px}#dm-eh .mf-munigov .wg-grid.has-trk > .wg-trk{order:1;padding-left:0;border-left:0}#dm-eh .mf-munigov .wg-grid.has-trk > .wg-main{order:2;width:162px;padding-left:24px;border-left:1px solid rgba(255,255,255,0.14)}#dm-eh .mf-munigov .wg-grid.has-trk.is-done{width:calc(min(573px, 100%) + 18px);max-width:none}#dm-eh .mf-munigov .wg-grid.has-trk.is-done > .wg-main{width:180px}} /* ==== post-elections v21 · the ward box: Share on WhatsApp in the right column and the source line under it, in the place of the ward's turnout and registered voters (the script's wardBox); the button no longer stands under the council's results, and Contact your ward councillor goes. On desktop the button keeps its own width (204px, as under the results), centred across the column (from its rule to the box's edge) and down the space over the source line; the source line stands at the column's foot, level with the leading party (the column's rule runs the height of the box). On phones the button is the width of the box. In the ward box the WhatsApp button doesn't rise on hover (the ward finder holds still, v11.5). The ward's vote breakdown stands 24px under the box (was 8px). The ward dropdown stands closer to the council's results: 40px under them on desktop (#mf-ward's padding in the markup), 32px on phones. ==== */ #dm-eh #mf-wardgov .wg-acts{display:flex;flex-direction:column;align-items:flex-start;width:-moz-fit-content;width:fit-content;max-width:100%} #dm-eh #mf-wardgov .wg-acts .mf-wa-btn{margin:0} #dm-eh #mf-wardgov .wg-acts .mf-wa-btn:hover{transform:none} #dm-eh .mf-wardpanel:has( > .wp-cands:first-child){margin-top:24px} @media (min-width: 641px){#dm-eh #mf-wardgov .wg-break{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}#dm-eh #mf-wardgov .wg-acts{flex:1 1 auto;justify-content:center;align-items:center;width:auto;max-width:none;margin-left:-32px;padding:0}#dm-eh #mf-wardgov .wg-break > .wg-src{margin-top:0}} @media (max-width: 640px){#dm-eh #mf-wardgov .wg-acts{align-items:stretch;width:auto}#dm-eh #mf-wardgov .wg-acts .mf-wa-btn{width:auto}#dm-eh .mf-ward{padding-top:32px !important}} /* v21 · the ward box: the candidate's name a little larger (26px, was 24px), with more room under it: 10px to the party (was 6px) */ #dm-eh #mf-wardgov .wg-cand{font-size:26px} #dm-eh #mf-wardgov .wg-cand + .wg-party{margin-top:10px} /* ==== post-elections v21.1 · Results and Turnout: the councils map higher in its column. Its head (in a province only the zoom out to South Africa) stands over the drawing's top right corner, out of the flow; over the whole country it is empty and goes. A province wider than the map is no longer heightened to it, so no band of white stands over it (the script's cmFit and viewBox). (v22.12: no leading party over party support on Results; the table stands at the top of its column.) ==== */ #dm-eh #res-map > .res-map-head{position:absolute;top:3px;right:0;z-index:2;min-height:0;margin:0} #dm-eh #res-map > .res-map-head:empty{display:none} #dm-eh #res-map > .res-map-head + .res-map-svg{margin-top:0} #dm-eh #res-map > .res-map-head:not(:empty) + .res-map-svg .res-loading{right:40px} /* ==== post-elections v22 · Hung councils: the councils map on top, where Results and Turnout have theirs (.res-grid and .res-map: the same size in the same place, its head out of the flow), and beside it the hung metros and the share of registered voters in hung councils over the map's key, as the Turnout tab has turnout over its key; the list under them (v22.3: no banner, no note under the map). On the map the councils lie flat in warm greys, a majority a shade darker than no result yet, and a hung council stands raised: 3px in charcoal while its seats are provisional, 7px in red once the Commission declares it (--lift, in pixels on screen; --u, the map's units to a pixel, from the script). The sides are copies of the council's outline lifted in steps (--f), a shade darker than the top; the step from provisional to declared pops, with the slight bounce of a council rising under the pointer on Results, as the colour turns. Under the pointer a council lightens or darkens a shade. ==== */ #dm-eh .eh-hung{--res-hair:#e7e3db} #dm-eh .hm-grid[hidden]{display:none} #dm-eh .hm-grid:not([hidden]) + .hm-rest{margin-top:32px} #dm-eh .hm-rest > .eh-hung-none{margin:0;max-width:640px;font-size:15px;line-height:1.5} #dm-eh .hm-map > .res-map-head{position:absolute;top:3px;right:0;z-index:2;min-height:0;margin:0} #dm-eh .hm-map > .res-map-head:empty{display:none} #dm-eh .hm-map > .res-map-head + .res-map-svg{margin-top:0} #dm-eh .hm-map > .res-map-head:not(:empty) + .res-map-svg .res-loading{right:40px} #dm-eh .hm-wait{margin:0;padding:4px 0 0} #dm-eh .hm-svg use{fill-rule:evenodd;stroke-linejoin:round} #dm-eh .hm-svg .hm-c{fill:#f4f3ef;stroke:#c8c7c4;stroke-width:.5px;cursor:pointer;transition:fill .3s ease} #dm-eh .hm-svg:not(.is-nat) .hm-c{stroke-width:.75px} #dm-eh .hm-svg .hm-c.is-m{fill:#e3e0d9;stroke:#a3a09b} #dm-eh .hm-svg .hm-c.is-p{fill:#3a3835;stroke:#1c1b19} #dm-eh .hm-svg .hm-c.is-d{fill:#ca2828;stroke:#6e1616} #dm-eh .hm-svg .is-l0{--lift:0} #dm-eh .hm-svg .is-l1{--lift:3} #dm-eh .hm-svg .is-l2{--lift:7} #dm-eh .hm-svg .hm-w,#dm-eh .hm-svg .hm-t{stroke-width:.75px;transform:translateY(calc(var(--lift,0) * var(--f,1) * var(--u,.45) * -1px));transition:transform .45s cubic-bezier(.3,1.5,.55,1),fill .3s ease,stroke .3s ease;cursor:pointer} #dm-eh .hm-svg .is-cp .hm-w{fill:#070706;stroke:#070706} #dm-eh .hm-svg .is-cp .hm-ft{stroke:#111} #dm-eh .hm-svg .is-cp .hm-t{fill:#3a3835;stroke:#141312} #dm-eh .hm-svg .is-cd .hm-w{fill:#3f0606;stroke:#3f0606} #dm-eh .hm-svg .is-cd .hm-ft{stroke:#5c1212} #dm-eh .hm-svg .is-cd .hm-t{fill:#ca2828;stroke:#6e1616} #dm-eh .hm-svg .is-cm .hm-w,#dm-eh .hm-svg .is-cm .hm-t{fill:#e3e0d9;stroke:#a3a09b;stroke-width:.5px} #dm-eh .hm-svg .is-cn .hm-w,#dm-eh .hm-svg .is-cn .hm-t{fill:#f4f3ef;stroke:#c8c7c4;stroke-width:.5px} #dm-eh .hm-svg .hm-shs{pointer-events:none} #dm-eh .hm-svg .hm-sh{fill:#000;stroke:none;opacity:0;transform:translate(calc(var(--lift,0) * var(--u,.45) * .2px),calc(var(--lift,0) * var(--u,.45) * .5px));transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.5,.55,1)} #dm-eh .hm-svg .hm-sh.is-l1{opacity:.2} #dm-eh .hm-svg .hm-sh.is-l2{opacity:.32} @media (hover: hover){#dm-eh .hm-svg:not(.is-nat) .hm-c.is-m:hover{fill:#d4d0c7}#dm-eh .hm-svg:not(.is-nat) .hm-c.is-n:hover{fill:#e7e5df}#dm-eh .hm-svg:not(.is-nat) .hm-l.is-cp:hover .hm-t{fill:#524e49}#dm-eh .hm-svg:not(.is-nat) .hm-l.is-cd:hover .hm-t{fill:#dd3636}} /* v22.1 · over the whole country a council takes no hover of its own (above): the province under the pointer stands up as one, as on Results: its shadow, dark sides that grow as it rises (with the slight bounce), its councils on its top at the height of a declared hung council (--lift), its outline over them */ #dm-eh .hm-svg .hm-pl{--lift:0;cursor:pointer} #dm-eh .hm-svg .hm-pl.is-up{--lift:7} #dm-eh .hm-svg .hm-psh{fill:#000;stroke:none;opacity:0;pointer-events:none;transform:translate(calc(var(--lift) * var(--u,.45) * .2px),calc(var(--lift) * var(--u,.45) * .5px));transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.5,.55,1)} #dm-eh .hm-svg .hm-pl.is-up .hm-psh{opacity:.32} /* v22.4 · the province stands on its councils' sides, each in its council's colour a shade darker (the foot darker), its councils on its top outlined as on the flat map; the flat councils' outlines are their greys a shade darker */ #dm-eh .hm-svg .hm-pw{fill:#2a2826;stroke:#2a2826;stroke-width:.75px} #dm-eh .hm-svg .hm-pw.is-d{fill:#3f0606;stroke:#3f0606}#dm-eh .hm-svg .hm-pw.is-p{fill:#070706;stroke:#070706}#dm-eh .hm-svg .hm-pw.is-m{fill:#504f4c;stroke:#504f4c}#dm-eh .hm-svg .hm-pw.is-n{fill:#565654;stroke:#565654} #dm-eh .hm-svg .hm-pft .hm-pw{stroke:#1c1b19}#dm-eh .hm-svg .hm-pft .hm-pw.is-d{stroke:#6e1616}#dm-eh .hm-svg .hm-pft .hm-pw.is-p{stroke:#1c1b19}#dm-eh .hm-svg .hm-pft .hm-pw.is-m{stroke:#a3a09b}#dm-eh .hm-svg .hm-pft .hm-pw.is-n{stroke:#c8c7c4} #dm-eh .hm-svg .hm-ps,#dm-eh .hm-svg .hm-ptop{transform:translateY(calc(var(--lift) * var(--f,1) * var(--u,.45) * -1px));transition:transform .45s cubic-bezier(.3,1.5,.55,1)} @media (prefers-reduced-motion: reduce){#dm-eh .hm-svg use,#dm-eh .hm-svg .hm-ps,#dm-eh .hm-svg .hm-ptop{transition:none}} #dm-eh .hm-facts .v small{display:inline-block;margin-left:6px;font-family:Geist,"Helvetica Neue",Arial,sans-serif;font-size:12.5px;font-weight:400;letter-spacing:0;color:#5e574e} #dm-eh .hm-key tr.is-m .sw,#dm-eh .hm-key tr.is-m .shb i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)} @media (max-width: 640px){#dm-eh .hm-grid:not([hidden]) + .hm-rest{margin-top:36px}} /* v22.2 · the list holds every hung council, provisional or declared: a Result column after the council with its tag, in the map's colours, charcoal while its seats are provisional and red once declared; a tag that turns pops as it reddens. On phones the tag stands before the largest party, under the council's name */ #dm-eh .eh-hung-row{grid-template-columns:minmax(0,1.3fr) 96px minmax(0,1fr) minmax(0,.8fr) 148px} #dm-eh .eh-hung-st{justify-self:start;display:inline-flex;align-items:center;padding:5px 7px 4px;border-radius:3px;background:#3a3835;color:#fff;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap} #dm-eh .eh-hung-st.is-d{background:#ca2828} #dm-eh .eh-hung-st.is-turn{animation:eh-hung-turn .9s ease both} @keyframes eh-hung-turn{0%{background-color:#3a3835;transform:scale(1)}35%{transform:scale(1.16)}60%{background-color:#ca2828}100%{background-color:#ca2828;transform:scale(1)}} @media (prefers-reduced-motion: reduce){#dm-eh .eh-hung-st.is-turn{animation:none}} @media (max-width: 640px){#dm-eh .eh-hung-row{grid-template-columns:auto minmax(0,1fr) auto}#dm-eh .eh-hung-nm{grid-column:1 / 3}#dm-eh .eh-hung-go{grid-column:3}#dm-eh .eh-hung-st{grid-column:1;grid-row:2}#dm-eh .eh-hung-lead{grid-column:2 / -1;grid-row:2}#dm-eh .eh-hung-need{grid-column:1 / -1}} /* v22.8 · the list by province: over each province's councils its label, the province and its count, in the head row of the columns, on a black line; on phones the label alone */ #dm-eh .eh-hung-pv + .eh-hung-pv{margin-top:26px} #dm-eh .eh-hung-hd.is-pv{align-items:baseline;border-bottom-color:#181818} #dm-eh .eh-hung-pl{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:13px;letter-spacing:.07em;color:#171717} #dm-eh .eh-hung-pl i{font-style:normal;color:#5e574e;font-variant-numeric:tabular-nums} @media (max-width: 640px){#dm-eh .eh-hung-hd.is-pv{display:block;padding:0 0 8px}#dm-eh .eh-hung-hd.is-pv > span:not(.eh-hung-pl){display:none}#dm-eh .eh-hung-pv + .eh-hung-pv{margin-top:28px}} /* ==== post-elections v22.1 · the ward map's tabs, in the look of the results tabs under the municipality finder (v18): Results by ward, Turnout by ward, Change since 2021. Change since 2021: 2021's wards beside this election's, half the width each, each with its key under it ==== */ #dm-eh .mf-wm-tabs{display:flex;align-items:flex-end;gap:5px;min-height:49px;margin:0 0 26px;padding:0 0 1px;background:linear-gradient(#181818,#181818) left bottom/100% 1px no-repeat} #dm-eh .mf-wm-tab{appearance:none;-webkit-appearance:none;flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;height:46px;margin:0 0 -1px;padding:2px 18px 0;box-sizing:border-box;background:#e4e1db;border:1px solid #cdc7bd;border-bottom:1px solid #181818;border-radius:7px 7px 0 0;font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.05;letter-spacing:-.1px;color:#5e574e;text-align:center;text-wrap:balance;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .18s ease,color .18s ease,border-color .18s ease,height .24s cubic-bezier(.4,0,.2,1),padding-top .24s cubic-bezier(.4,0,.2,1)} @media (hover: hover){#dm-eh .mf-wm-tab:not(.is-on):hover{background:#edeae4;color:#181818;border-color:#a8a39a;border-bottom-color:#181818}} #dm-eh .mf-wm-tab.is-on{height:50px;padding-top:6px;background:#fff;color:#181818;border-color:#181818;border-bottom-color:#fff;cursor:default} #dm-eh .mf-wm-tab:focus-visible{outline:2px solid #d33d3d;outline-offset:-5px} @media (max-width: 860px){#dm-eh .mf-wm-tab{padding:2px 10px 0;font-size:17px}} @media (max-width: 640px){#dm-eh .mf-wm-tabs{gap:4px;min-height:46px;margin-bottom:18px}#dm-eh .mf-wm-tab{height:42px;padding:1px 6px 0;font-size:14.5px;line-height:1.08}#dm-eh .mf-wm-tab.is-on{height:46px;padding-top:5px}} @media (max-width: 359px){#dm-eh .mf-wm-tabs{gap:3px}#dm-eh .mf-wm-tab{padding:1px 4px 0;font-size:13px}} @media (prefers-reduced-motion: reduce){#dm-eh .mf-wm-tab{transition:none}} #dm-eh .mf-wmap[data-view="cmp"] .mf-wm-grid,#dm-eh .mf-wmap:not([data-view="cmp"]) .mf-wm-cmp{display:none} #dm-eh .mf-wc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:start} #dm-eh .mf-wc-map{min-width:0} #dm-eh .mf-wc-head{display:flex;align-items:center;min-height:32px;margin:0 0 10px} #dm-eh .mf-wc-box{position:relative} #dm-eh .mf-wc-box svg{display:block;width:100%;height:100%;overflow:visible} #dm-eh .mf-wc-box path{fill:#f6f5f2;stroke:rgba(23,23,23,.42);stroke-width:.5;fill-rule:evenodd;stroke-linejoin:round;transition:fill .3s ease} #dm-eh .mf-wc-box path.is-off{fill:#faf9f7;stroke:#dcd8d0} #dm-eh .mf-wc-box path.wc-hl{fill:rgba(0,0,0,.16);stroke:#181818;stroke-width:1.5;pointer-events:none;visibility:hidden;transition:none} #dm-eh .mf-wc-box path.wc-hl.is-on{visibility:visible} #dm-eh .mf-wc-box.is-wait{display:flex;align-items:center;justify-content:center;padding:0 12px;background:var(--dm-grey-3);border-radius:4px;text-align:center} #dm-eh .mf-wc-box.is-fail .mf-wm-wait{animation:none} #dm-eh .mf-wc-box .res-loading{top:-34px} #dm-eh .mf-wc-map .cmp-legend{margin-top:14px} #dm-eh .mf-wc-note{margin:18px 0 0} @media (max-width: 640px){#dm-eh .mf-wc-head{min-height:0;margin-bottom:8px}#dm-eh .mf-wc-box .res-loading{top:-27px}#dm-eh .mf-wc-map .cmp-legend{gap:5px 12px;font-size:12px}} @media (prefers-reduced-motion: reduce){#dm-eh .mf-wc-box path{transition:none}} /* ==== post-elections v22.4 · the maps' lines and sides in the shapes' own colours. A council's or ward's outline is its fill a shade darker (the script puts the fill in --fc; Results by ward's views have theirs in --c1 and --c2), and a council or ward standing up out of a map stands on sides in its own colour a shade darker, its outline as it is on the flat map (v22.4.1: the same colour and width). Over the whole country the province under the pointer stands on its councils' sides, each in its council's colour. The hung councils map has its shades set with its colours (above). Browsers without color-mix keep the lines and sides they had. ==== */ @supports (color:color-mix(in oklab,#000 50%,#fff)){ #dm-eh .res-map-svg path.rc{stroke:color-mix(in oklab,var(--fc,#ecebe6) 65%,#000)} #dm-eh .res-map-svg .rl-wall{fill:color-mix(in oklab,var(--fc,#ecebe6) 44%,#000);stroke:color-mix(in oklab,var(--fc,#ecebe6) 44%,#000)} #dm-eh .res-map-svg .rl-foot .rl-wall{stroke:color-mix(in oklab,var(--fc,#ecebe6) 65%,#000)} #dm-eh .mf-wmap[data-view="win"] .wm-base path:not(.is-off){stroke:color-mix(in oklab,var(--c1,#f6f5f2) 65%,#000)} #dm-eh .mf-wmap[data-view="turn"] .wm-base path:not(.is-off){stroke:color-mix(in oklab,var(--c2,#f6f5f2) 65%,#000)} #dm-eh .mf-wmap[data-view="win"] .wm-wall{fill:color-mix(in oklab,var(--c1,#f6f5f2) 44%,#000);stroke:color-mix(in oklab,var(--c1,#f6f5f2) 44%,#000)} #dm-eh .mf-wmap[data-view="turn"] .wm-wall{fill:color-mix(in oklab,var(--c2,#f6f5f2) 44%,#000);stroke:color-mix(in oklab,var(--c2,#f6f5f2) 44%,#000)} #dm-eh .mf-wmap[data-view="win"] .wm-foot{stroke:color-mix(in oklab,var(--c1,#f6f5f2) 65%,#000)} #dm-eh .mf-wmap[data-view="turn"] .wm-foot{stroke:color-mix(in oklab,var(--c2,#f6f5f2) 65%,#000)} #dm-eh .mf-wmap[data-view="win"] .wm-top{stroke:color-mix(in oklab,var(--c1,#f6f5f2) 65%,#000);stroke-width:.55} #dm-eh .mf-wmap[data-view="turn"] .wm-top{stroke:color-mix(in oklab,var(--c2,#f6f5f2) 65%,#000);stroke-width:.55} #dm-eh .mf-wc-box path:not(.is-off){stroke:color-mix(in oklab,var(--fc,#f6f5f2) 65%,#000)} #dm-eh .mf-wc-box path.wc-hl{stroke:color-mix(in oklab,var(--fc,#f6f5f2) 50%,#000)} } /* ==== post-elections v22.5 · Change since 2021: the two maps answer each other (the script's cmpHov and wcHov). The council under the pointer is outlined on both maps, each with its tooltip for its year; on the ward maps, the ward at the same spot on the other map (the wards were redrawn, so it can be another ward). A dot marks the spot on the other map. ==== */ #dm-eh .cmp-map-svg path.rc-hov{visibility:hidden} #dm-eh .cmp-map-svg path.rc-hov.is-on{visibility:visible} #dm-eh .cmp-map-svg .res-tip,#dm-eh .mf-wc-box .mf-wm-tip{pointer-events:none} #dm-eh .cmp-pt{position:absolute;left:0;top:0;z-index:4;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#181818;box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.4);pointer-events:none} #dm-eh .cmp-pt[hidden]{display:none} @supports (color:color-mix(in oklab,#000 50%,#fff)){#dm-eh .cmp-map-svg path.rc-hov{stroke:color-mix(in oklab,var(--fc,#ecebe6) 50%,#000)}} /* ==== post-elections v22.6 · Change since 2021: a label over each pair of maps (Leading parties, then Hung councils), as the headings under them. The hung councils pair is the councils map in the Hung councils tab's colours, a hung council raised over the flat greys: 3px in charcoal while its seats are provisional, 7px in red once declared (--lift, in pixels on screen; --u, the map's units to a pixel, from the script's cmhScale), without the motion. The outline under the pointer stands on a raised council's top. ==== */ #dm-eh .res-h3.cmp-sec{margin:0 0 14px} #dm-eh .res-h3.cmp-sec.is-h{margin-top:48px} #dm-eh .cmp-hsvg path.hc{fill:#f4f3ef;stroke:#c8c7c4;stroke-width:.5px;vector-effect:non-scaling-stroke;fill-rule:evenodd;stroke-linejoin:round} #dm-eh .cmp-hsvg:not(.is-nat) path.hc{stroke-width:.75px} #dm-eh .cmp-hsvg path.hc.is-m{fill:#e3e0d9;stroke:#a3a09b} #dm-eh .cmp-hsvg path.hc.is-p{fill:#3a3835;stroke:#1c1b19} #dm-eh .cmp-hsvg path.hc.is-d{fill:#ca2828;stroke:#6e1616} #dm-eh .cmp-hsvg use{fill-rule:evenodd;stroke-linejoin:round} #dm-eh .cmp-hsvg .is-l1{--lift:3} #dm-eh .cmp-hsvg .is-l2{--lift:7} #dm-eh .cmp-hsvg .hm-w,#dm-eh .cmp-hsvg .hm-t{stroke-width:.75px;transform:translateY(calc(var(--lift,0) * var(--f,1) * var(--u,.45) * -1px))} #dm-eh .cmp-hsvg .is-cp .hm-w{fill:#070706;stroke:#070706} #dm-eh .cmp-hsvg .is-cp .hm-ft{stroke:#111} #dm-eh .cmp-hsvg .is-cp .hm-t{fill:#3a3835;stroke:#141312} #dm-eh .cmp-hsvg .is-cd .hm-w{fill:#3f0606;stroke:#3f0606} #dm-eh .cmp-hsvg .is-cd .hm-ft{stroke:#5c1212} #dm-eh .cmp-hsvg .is-cd .hm-t{fill:#ca2828;stroke:#6e1616} #dm-eh .cmp-hsvg .hm-shs{pointer-events:none} #dm-eh .cmp-hsvg .hm-sh{fill:#000;stroke:none;opacity:.32;transform:translate(calc(var(--lift,0) * var(--u,.45) * .2px),calc(var(--lift,0) * var(--u,.45) * .5px))} #dm-eh .cmp-hsvg .hm-sh.is-l1{opacity:.2} #dm-eh .cmp-hsvg path.rc-hov{transform:translateY(calc(var(--lift,0) * var(--u,.45) * -1px))} @media (max-width: 640px){#dm-eh .res-h3.cmp-sec.is-h{margin-top:40px}} /* ==== post-elections v22.7 · the ward map in a box: the tab in view opens onto a page under it, outlined in the black line the other tabs stand on, its foot rounded as the tabs' tops are; what is on it sits in from the line (--wm-in: the line and the padding, a side; the script draws the maps to the width inside it). The tab in view has no line at its foot, so its sides run on into the page's. ==== */ #dm-eh .mf-wmap--res{--wm-in:23px} #dm-eh .mf-wm-tabs{margin:0} #dm-eh .mf-wm-tab.is-on{border-bottom-width:0} #dm-eh .mf-wm-panel{padding:22px calc(var(--wm-in) - 1px) 24px;border:1px solid #181818;border-top:0;border-radius:0 0 7px 7px;background:#fff} @media (max-width: 640px){#dm-eh .mf-wmap--res{--wm-in:13px}#dm-eh .mf-wm-panel{padding-top:14px;padding-bottom:16px}} /* ==== post-elections v22.8 · the foot of a hung council's seats box, on the results and in coalition mode, for provisional and declared seats: every party with seats in a row, largest first (coalPick in the script), each a little unit with no box: its name, under it one peg hopping (EH_BOARD.peg) and its seats beside the peg. A click puts the party in the coalition or takes it out (on the results it starts one): its name turns into a black chip, as in the table, and once the coalition has a party the parties out of it fade. The units come in one after another the first time the row is on screen (is-wait, then is-pop). v22.10: the row shows in coalition mode only, its units coming in one after another as the mode opens (is-pop). Nothing fades: the pegs stand still until the pointer is over their party (they stand up) or it goes in (they hop; pickSync in the script), and the black chip pops up a little. ==== */ #dm-eh .mf-coal-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin:26px 0 0;padding:0 2px 12px} #dm-eh .mf-cp{display:flex;flex-direction:column;align-items:center;gap:3px;margin:0;padding:3px 3px 2px;background:none;border:0;border-radius:6px;color:#171717;font-family:Geist,"Helvetica Neue",Arial,sans-serif;line-height:1;text-align:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent} #dm-eh .mf-res-seats:not(.is-coal) .mf-coal-row{display:none} #dm-eh .mf-coal-row.is-pop .mf-cp{animation:mf-cp-in .36s cubic-bezier(.2,.9,.3,1.2) backwards;animation-delay:calc(min(var(--i,0),16) * 30ms)} @keyframes mf-cp-in{from{opacity:0;transform:translateY(6px) scale(.9)}} #dm-eh .mf-cp-nm{display:block;max-width:8em;padding:4px 6px 3px;border-radius:4px;font-size:14px;font-weight:400;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s ease,color .15s ease,box-shadow .2s ease,transform .34s cubic-bezier(.3,1.7,.5,1)} #dm-eh .mf-cp-st{display:flex;align-items:center;gap:5px} #dm-eh .mf-cp-peg{position:relative;flex:none;width:19px;height:21px} #dm-eh .mf-cp-st b{font-size:16px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.01em} #dm-eh .mf-cp:focus-visible{outline:2px solid #d33d3d;outline-offset:1px} #dm-eh .mf-cp.is-in .mf-cp-nm{background:#181818;color:#fff;box-shadow:0 4px 10px -4px rgba(23,23,23,.45);transform:translateY(-3px)} @media (max-width: 640px){#dm-eh .mf-coal-row{gap:10px 13px;margin-top:20px}} @media (prefers-reduced-motion: reduce){#dm-eh .mf-cp-nm{transition:none}#dm-eh .mf-coal-row.is-pop .mf-cp{animation:none}} /* ==== post-elections v22.11 · Change since 2021 over the whole country: a council answers for its province, which stands up as one on both maps of the pair as on Results (the script's cmpProv, with Results' rules for the province standing up), and a click opens it; in a province the magnifying glass with a minus at the top right of each map goes back to South Africa (the loading note steps aside for it) ==== */ #dm-eh .cmp-map-svg.is-nat path.rc,#dm-eh .cmp-map-svg.is-nat path.hc,#dm-eh .cmp-map-svg.is-nat .hm-l{cursor:pointer} #dm-eh .cmp-map-svg:not(.is-nat) .res-loading{right:40px} /* post-elections v23: "could not be loaded" with Refresh results (errMsg in "results"): the message, the button under it */ #dm-eh .eh-res-err{display:flex;flex-direction:column;align-items:flex-start;gap:16px} #dm-eh .eh-res-err > p{margin:0} #dm-eh .eh-res-err.is-c{align-items:center;text-align:center} #dm-eh .eh-res-err .res-refresh{margin-left:0} #dm-eh .hm-rest > .eh-res-err > .eh-hung-none{max-width:640px;font-size:15px;line-height:1.5} /* post-elections v23: Results and Turnout have no note under the map; on desktop the province's councils table (headed with the province's name) sits closer under it */ @media (min-width: 861px){#dm-eh .res-tbl > .res-h3:first-child{margin-top:28px}} /* post-elections v23: the province's name over its councils table a size up */ #dm-eh .res-tbl > .res-h3:first-child{font-size:28px} @media (max-width: 640px){#dm-eh .res-tbl > .res-h3:first-child{font-size:24px}} /* post-elections v23: Hung councils in the look of the province's councils table on Results: each province headed with its name, a size up, its count of hung councils beside it in a grey badge (the list as close under the map as the table is); the columns' heads under it on the black line (phones: the line alone); hairline rows, the council's name in the table's type with Metro as its tag and its own first sitting, where it has one, under it; the result in the table's outcome tags; Build a coalition outlined, black under the pointer */ @media (min-width: 861px){#dm-eh .hm-grid:not([hidden]) + .hm-rest{margin-top:28px}} @media (min-width: 641px) and (max-width: 860px){#dm-eh .hm-grid:not([hidden]) + .hm-rest{margin-top:44px}} #dm-eh .eh-hung-pv + .eh-hung-pv{margin-top:0} #dm-eh .eh-hung-h3{display:flex;align-items:center;gap:10px;margin:44px 0 10px;font-size:28px} #dm-eh .eh-hung-pv:first-child > .eh-hung-h3{margin-top:0} #dm-eh .eh-hung-c{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;box-sizing:border-box;border-radius:12px;background:#e4e1db;color:#181818;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:13px;font-weight:700;letter-spacing:.02em;line-height:1;font-variant-numeric:tabular-nums} #dm-eh .eh-hung-row{gap:0 16px;padding:12px 0;border-bottom-color:var(--res-hair);font-size:14.5px} #dm-eh .eh-hung-hd{padding:0 0 9px;border-bottom-color:#181818;font-size:11px;white-space:nowrap} #dm-eh .eh-hung-row:not(.eh-hung-hd)::before,#dm-eh .eh-hung-nm::after{inset:0 -10px -1px -14px} #dm-eh .eh-hung-nm{display:block} #dm-eh .eh-hung-nm .nm{font-size:15.5px;font-weight:500;color:#171717} #dm-eh .eh-hung-nm .ty{display:inline-block;margin-left:8px;padding:2px 5px 1px;border:1.5px solid var(--dm-grey-2);border-radius:4px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:9.5px;font-weight:700;letter-spacing:.1em;line-height:1.2;text-transform:uppercase;color:#5e574e;vertical-align:2px} #dm-eh .eh-hung-nm .dt{display:block;margin-top:2px;font-size:12.5px;color:#5e574e} #dm-eh .eh-hung-st{padding:4px 7px 3px;border:1.5px solid transparent;border-radius:5px;letter-spacing:.08em;line-height:1.1} #dm-eh .eh-hung-lead i{border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)} #dm-eh .eh-hung-lead b,#dm-eh .eh-hung-need b{font-weight:600} #dm-eh .eh-hung-go{display:inline-flex;align-items:center;height:28px;padding:0 12px;background:#fff;border:1.5px solid #181818;border-radius:3px;color:#181818;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:10.5px;letter-spacing:.08em;line-height:1;transition:background-color .15s ease,color .15s ease} #dm-eh .eh-hung-go::after{content:"";position:absolute;inset:-8px -6px} @media (hover: hover){#dm-eh .eh-hung-go:hover{transform:none;box-shadow:none;background:#181818;color:#fff}} #dm-eh .eh-hung-go:active{background:#181818;color:#fff} @media (max-width: 640px){#dm-eh .eh-hung-h3{margin-top:36px;font-size:24px}#dm-eh .eh-hung-c{min-width:22px;height:22px;padding:0 6px;font-size:12px}#dm-eh .eh-hung-list{border-top:1px solid #181818}#dm-eh .eh-hung-row{gap:6px 12px;padding:13px 0}#dm-eh .eh-hung-nm .nm{font-size:15px}} @media (prefers-reduced-motion: reduce){#dm-eh .eh-hung-go{transition:none}} /* post-elections v23: the bars in the ward's votes (under the ward dropdown) and in the key beside Results by ward and Turnout by ward in the look of the council's votes table: 22px high, rounded 6px, on a sharp shadow, the figure beside them and the name 15px, the rows as tall. The row under the pointer pops its bar towards the reader as an open row does there (it grows a little and its shadow drops further and softens), eased, though the ward finder otherwise holds still. The key's bars keep their faint outline, for the palest turnout band and the wards with no result yet */ #dm-eh :is(.wr-list,.mf-wm-key) .mf-res-table tbody :is(th,td){padding-top:11px;padding-bottom:11px} #dm-eh :is(.wr-list,.mf-wm-key) .mf-res-table tbody .pn strong,#dm-eh :is(.wr-list,.mf-wm-key) .mf-res-table .shb strong{font-size:15px} #dm-eh :is(.wr-list,.mf-wm-key) .mf-res-table .shb{gap:10px} #dm-eh :is(.wr-list,.mf-wm-key) .mf-res-table .shb i{height:22px;border-radius:6px;transform-origin:50% 50%;box-shadow:0 1.5px 1px rgba(23,23,23,.24)} #dm-eh .mf-wm-key .mf-res-table .shb i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 1.5px 1px rgba(23,23,23,.24)} #dm-eh .mf-wm-key .mf-res-table tr.is-nr .shb i{box-shadow:inset 0 0 0 1px #a8a39a,0 1.5px 1px rgba(23,23,23,.24)} #dm-eh #mf-ward :is(.wr-list,.mf-wm-key) .mf-res-table .shb i{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease !important} #dm-eh :is(.wr-list,.mf-wm-key) .mf-res-tw{padding-bottom:12px;margin-bottom:-12px} /* v23.7 · no hover on the ward results or the by-ward keys under them: their rows do nothing when picked */ @media (prefers-reduced-motion: reduce){#dm-eh #mf-ward :is(.wr-list,.mf-wm-key) .mf-res-table .shb i{transition:none !important}#dm-eh :is(.wr-list,.mf-wm-key) .mf-res-table tbody tr:hover .shb i{transform:none}} /* v23.8 · the bars in the results tabs in the ward results' look: party support, the turnout and hung councils keys beside the map, and Change since 2021's party support. 22px high, rounded 6px, on a sharp shadow, the figures and names 15px, the rows as tall; the keys' bars keep their faint outline. None of these rows does anything, so they hold still under the pointer (Change since 2021's party rows no longer rise as a card or take the pointer's hand); the provinces' and councils' rows, which open, keep theirs */ #dm-eh .res-stand .mf-res-table tbody :is(th,td){padding-top:11px;padding-bottom:11px} #dm-eh .res-stand .mf-res-table tbody .pn strong,#dm-eh .res-stand .mf-res-table .shb strong{font-size:15px} #dm-eh .res-stand .mf-res-table .shb{gap:10px} #dm-eh .res-stand .mf-res-table .shb i{height:22px;border-radius:6px;box-shadow:0 1.5px 1px rgba(23,23,23,.24)} #dm-eh .res-stand .res-tkey .shb i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 1.5px 1px rgba(23,23,23,.24)} #dm-eh .res-stand .res-tkey tr.is-nr .shb i{box-shadow:inset 0 0 0 1px #a8a39a,0 1.5px 1px rgba(23,23,23,.24)} #dm-eh .res-stand .hm-key tr.is-m .shb i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),0 1.5px 1px rgba(23,23,23,.24)} #dm-eh .cmp-share .res-sb{display:inline-grid;grid-template-columns:minmax(0,110px) 3.2em;align-items:center;gap:10px;font-size:15px;text-align:right} @media (max-width: 480px){#dm-eh .cmp-share .res-sb{display:inline-flex;grid-template-columns:none}#dm-eh .res-table.cmp-share .res-share{display:table-cell}} #dm-eh .cmp-share .res-sb i{width:auto;height:22px;border-radius:0;background:none;overflow:visible} #dm-eh .cmp-share .res-sb i b{border-radius:6px;box-shadow:0 1.5px 1px rgba(23,23,23,.24)} #dm-eh .cmp-share .res-sb i b[style^="width:0%"]{box-shadow:none} #dm-eh .res-table.cmp-share tbody tr{cursor:default;transform:none;transition:none} #dm-eh .res-table.cmp-share tbody tr > *{border-bottom-color:var(--res-hair)} #dm-eh .res-table.cmp-share tbody tr > :first-child::before,#dm-eh .res-table.cmp-share tbody tr > *::after{content:none} /* v23.9 · party support beside the councils map: the five largest parties, then Others (the rest together) as a button, a chevron after its name. Over it the row rises as a white card, as a province's or a council's row does; a click lists the parties under it, 14px in, their bars on the same scale, growing in; another click folds them away. Folded, they stay in the table at no height, so the party column is as wide either way and the bars over them hold still. The table's box gives the card and its shadow room */ #dm-eh .res-stand .mf-res-tw:has(> .res-ps){container-type:inline-size;isolation:isolate;overflow:visible;padding:0 14px 14px;margin-left:-14px;margin-right:-14px;margin-bottom:-14px} #dm-eh .res-stand .res-ps tbody tr.is-grp{position:relative;z-index:0;cursor:pointer;transition:transform .14s ease;-webkit-tap-highlight-color:transparent} #dm-eh .res-ps tbody tr.is-grp > *{position:relative} #dm-eh .res-ps tbody tr.is-grp > :first-child::before{content:"";position:absolute;top:0;bottom:-1px;left:-14px;width:calc(100cqw + 28px);z-index:-1;border-radius:8px;background:#fff;opacity:0;transition:opacity .14s ease,box-shadow .14s ease,background-color .14s ease} @media (hover: hover){#dm-eh .res-ps tbody tr.is-grp:hover{z-index:1;transform:translateY(-3px) scale(1.01)}#dm-eh .res-ps tbody tr.is-grp:hover > *{border-bottom-color:transparent}#dm-eh .res-ps tbody tr.is-grp:hover > :first-child::before{opacity:1;box-shadow:0 16px 26px -12px rgba(23,23,23,.34),0 3px 8px -2px rgba(23,23,23,.12),0 0 0 1px rgba(23,23,23,.07)}#dm-eh .res-ps tbody tr.is-grp:hover > *::after{content:"";position:absolute;left:0;right:0;top:100%;height:4px}#dm-eh .res-ps tbody tr.is-grp:active{transform:translateY(-1px) scale(1.004);transition-duration:.05s}} @media (hover: none){#dm-eh .res-ps tbody tr.is-grp:active > *{border-bottom-color:transparent}#dm-eh .res-ps tbody tr.is-grp:active > :first-child::before{opacity:1;background:var(--dm-grey-3);transition-duration:0s}} #dm-eh .res-ps tbody tr.is-grp:has(button:focus-visible){z-index:1;transform:translateY(-3px) scale(1.01)} #dm-eh .res-ps tbody tr.is-grp:has(button:focus-visible) > *{border-bottom-color:transparent} #dm-eh .res-ps tbody tr.is-grp:has(button:focus-visible) > :first-child::before{opacity:1;box-shadow:0 16px 26px -12px rgba(23,23,23,.34),0 3px 8px -2px rgba(23,23,23,.12),0 0 0 1px rgba(23,23,23,.07);outline:2px solid #d33d3d;outline-offset:2px} #dm-eh .res-ps tbody tr.is-grp button.pc:focus-visible{outline:0} #dm-eh .res-ps .oth-chev{flex:none;width:11px;height:11px;margin-left:-3px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease} #dm-eh .res-ps tr.is-open .oth-chev{transform:rotate(180deg)} #dm-eh .res-stand .res-ps tbody tr.is-oth > th{position:relative;padding-left:20px} /* v23.10 · the table's box no longer scrolls, so the card's rise never brings up a scrollbar. Open, Others is a black card in white type; a 2px black line runs from under it to the foot of the last party it lists, those parties 20px in, on white */ #dm-eh .res-ps tbody tr.is-grp.is-open > *{color:#fff;border-bottom-color:transparent} #dm-eh .res-ps tbody tr.is-grp.is-open > :first-child::before{opacity:1;background:#181818} @media (hover: none){#dm-eh .res-ps tbody tr.is-grp.is-open:active > :first-child::before{background:var(--dm-ink-3)}} #dm-eh .res-stand .res-ps tbody tr.is-oth > th::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:#181818} @media (hover: hover){#dm-eh .res-stand .res-ps tbody tr.is-grp + tr.is-oth > th::before{top:-5px}} @keyframes eh-oth-in{from{opacity:0;transform:translateY(-4px)}} #dm-eh .res-stand .res-ps tbody tr.is-shut > *{padding-top:0;padding-bottom:0;border-bottom-width:0;line-height:0;visibility:hidden} #dm-eh .res-ps tbody tr.is-shut :is(.pc,.shb){height:0;overflow:hidden} @keyframes eh-oth-grow{from{transform:scaleX(0)}} #dm-eh .res-ps.is-reveal tbody tr.is-oth:not(.is-shut) > *{animation:eh-oth-in .24s ease both} #dm-eh .res-ps.is-reveal tbody tr.is-oth:not(.is-shut) .shb i{transform-origin:0 50%;animation:eh-oth-grow .5s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 35ms) both} @media (prefers-reduced-motion: reduce){#dm-eh .res-ps tbody tr.is-grp,#dm-eh .res-ps tbody tr.is-grp > :first-child::before,#dm-eh .res-ps .oth-chev{transition:none}#dm-eh .res-ps.is-reveal tbody tr.is-oth:not(.is-shut) > *,#dm-eh .res-ps.is-reveal tbody tr.is-oth:not(.is-shut) .shb i{animation:none}} /* v23.11 · Results by ward is a flat map: no ward stands up on it and none is chosen there (the dropdown chooses). The ward under the pointer, or tapped, is outlined as on Change since 2021, in its colour a shade darker; the tooltip names it with its votes by party or its turnout */ #dm-eh .mf-wmap--res .wm-hl{fill:rgba(0,0,0,.16);stroke:#181818;stroke-width:1.5;pointer-events:none} @supports (color:color-mix(in oklab,#000 50%,#fff)){#dm-eh .mf-wmap[data-view="win"] .wm-hl{stroke:color-mix(in oklab,var(--c1,#f6f5f2) 50%,#000)}#dm-eh .mf-wmap[data-view="turn"] .wm-hl{stroke:color-mix(in oklab,var(--c2,#f6f5f2) 50%,#000)}} /* v23.12 · a ward picked out: a click or a tap raises it (the v13.20 lift, at once) with its box over it, and it stays so on all three tabs; the wards, the raised ward and the wards on Change since 2021 take clicks again */ #dm-eh .mf-wmap--res .wm-up.is-up .wm-wall,#dm-eh .mf-wmap--res .wm-up.is-up .wm-top{cursor:pointer} #dm-eh .mf-wc-box path[data-n]:not(.is-off){cursor:pointer} /* v23.13 · Change since 2021: the labels over the pairs of maps (Leading parties, Turnout from v23.14, Hung councils) a size up, a little lower, nearer their maps; each map's year a little larger and lower, nearer its drawing, which holds its place (the head lets the pointer through to the map, but for the zoom out) */ #dm-eh .res-h3.cmp-sec{margin:8px 0 10px;font-size:28px} #dm-eh .res-h3.cmp-sec:is(.is-h,.is-t){margin-top:56px} #dm-eh .cmp-map > .res-map-head{position:relative;z-index:1;pointer-events:none} #dm-eh .cmp-map > .res-map-head .res-zoom{pointer-events:auto} #dm-eh .cmp-map .cmp-yr{position:relative;top:8px;font-size:28px} @media (min-width: 861px){#dm-eh .cmp-map > .res-map-head{margin-top:31px}#dm-eh .cmp-map > .res-map-head + .res-map-svg{margin-top:-25px}} @media (max-width: 860px){#dm-eh .cmp-map > .res-map-head{margin-top:12px}#dm-eh .cmp-map > .res-map-head + .res-map-svg{margin-top:-6px}} @media (max-width: 640px){#dm-eh .res-h3.cmp-sec{font-size:24px}#dm-eh .res-h3.cmp-sec:is(.is-h,.is-t){margin-top:46px}#dm-eh .cmp-map .cmp-yr{font-size:25px}} /* post-elections v23 · Manifesto Breakdowns under Latest Election Coverage, over the newsletter and questions buttons: on desktop its divider 46px under Latest Election Coverage, as that one's under the tabs (phones: its heading 41px under it, as that one's under the tabs); the buttons as far under it as they sat under Latest Election Coverage */ #dm-eh #eh-feed.eh-section{padding-bottom:40px} @media (min-width: 641px){#dm-eh #eh-feed .eh-sec-head-mb{margin-top:5px}} @media (max-width: 640px){#dm-eh #eh-feed.eh-section{padding-bottom:20px}} /* post-elections v23 · phones, while counting: the area dropdown and the declaration box side by side, as on desktop: the dropdown on the left, the box on the right, the same width and height. In the box the status on top, the bar with the share under it, then the voting districts */ @media (max-width: 640px){#dm-eh .eh-tabs-head.has-dslot .res-h{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}#dm-eh .eh-tabs-head.has-dslot .res-pick{order:-1;display:flex;min-width:0;margin-left:0}#dm-eh .eh-tabs-head.has-dslot .res-pbtn{flex:1 1 auto;min-width:0;height:auto;align-items:stretch}#dm-eh .eh-tabs-head.has-dslot .res-pface{flex:1 1 auto;min-width:0;height:auto;justify-content:space-between;gap:8px;padding:0 12px 0 14px}#dm-eh .eh-tabs-head.has-dslot .res-pname{min-width:0;font-size:20px;line-height:1.05;white-space:normal;text-wrap:balance}#dm-eh .eh-tabs-head.has-dslot .res-pmenu{left:0;right:auto}#dm-eh .eh-tabs-head.has-dslot .res-dslot{order:0;display:flex;min-width:0;margin-top:0}#dm-eh .eh-tabs-head.has-dslot .res-dslot > .mf-decl{flex:1 1 auto;min-width:0;align-content:center;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"st st" "trk pct" "sub sub";align-items:center;gap:6px 10px;padding:10px 12px}#dm-eh .eh-tabs-head.has-dslot .res-dslot .mf-decl-row{display:contents}#dm-eh .eh-tabs-head.has-dslot .res-dslot .st{grid-area:st}#dm-eh .eh-tabs-head.has-dslot .res-dslot .mf-decl-row > b{grid-area:pct;font-size:17px}#dm-eh .eh-tabs-head.has-dslot .res-dslot .trk{grid-area:trk}#dm-eh .eh-tabs-head.has-dslot .res-dslot .sub{grid-area:sub;text-align:left;font-size:11px;line-height:1.25;text-wrap:balance}} @media (max-width: 359px){#dm-eh .eh-tabs-head.has-dslot .res-h{gap:8px}#dm-eh .eh-tabs-head.has-dslot .res-dslot > .mf-decl{padding:10px}#dm-eh .eh-tabs-head.has-dslot .res-dslot .st{letter-spacing:.06em}} /* post-elections v23.17 · phones, while counting: the declaration box in two rows, the status and the share over the bar (no voting districts); its height sets the row's, and the area dropdown beside it takes it, the area's name on one line as large as fits (sized by the script: fitName) */ @media (max-width: 640px){#dm-eh .eh-tabs-head.has-dslot .res-dslot > .mf-decl{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"st pct" "trk trk"}#dm-eh .eh-tabs-head.has-dslot .res-dslot .sub{display:none}#dm-eh .eh-tabs-head.has-dslot .res-pname{white-space:nowrap}} /* post-elections v23.15 · masthead: once the count is complete one box stands in the count box's place: Count complete in charcoal (the results provisional until declared), then Results declared in green, with the day */ #dm-eh .eh-mast .eh-mast-decl[hidden]{display:none} #dm-eh .eh-mast .count .eh-mast-done{display:grid;justify-self:stretch;justify-items:center;width:100%;margin:6px 0 0;padding:8px 11px 9px;gap:5px} #dm-eh .eh-mast .count .eh-mast-done[hidden]{display:none} #dm-eh .eh-mast .eh-mast-done.is-prov{background:#181818} #dm-eh .eh-mast-done .sub{font-size:11px;white-space:nowrap} @media (max-width: 640px){#dm-eh .eh-mast .count .eh-mast-done{grid-area:when;align-self:center;margin:0}#dm-eh .eh-mast .count:has(.eh-mast-done:not([hidden])){grid-template-areas:"when n lbl"}#dm-eh .eh-mast-done .sub{white-space:normal;text-wrap:balance}} /* post-elections v23.16 · masthead on phones: Districts counted over the share on the left, the count box beside them as tall as the pair, filling the rest of the row (v23.15's three columns squeezed the label off the screen) */ @media (max-width: 640px){#dm-eh .eh-mast .count,#dm-eh .eh-mast .count:has(.eh-mast-done:not([hidden])){grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"lbl when" "n when";column-gap:14px;row-gap:12px;align-items:end;max-width:none;margin:10px 0 0;padding:0 0 16px !important}#dm-eh .eh-mast .count .lbl{grid-area:lbl;justify-self:end;text-align:right;margin:0;padding:0;transform:none;line-height:1;white-space:nowrap}#dm-eh .eh-mast .count .lbl .l2{display:inline}#dm-eh .eh-mast .count .n{grid-area:n;justify-self:end;text-align:right;padding:0;font-size:50px;line-height:0.8}#dm-eh .eh-mast .count .eh-mast-decl,#dm-eh .eh-mast .count .eh-mast-done{grid-area:when;align-self:stretch;align-content:center;justify-self:stretch;width:auto;min-width:0;margin:0}} @media (max-width: 360px){#dm-eh .eh-mast .count,#dm-eh .eh-mast .count:has(.eh-mast-done:not([hidden])){column-gap:12px}#dm-eh .eh-mast .count .n{font-size:44px}} /* post-elections v23.18 · phones: the four tabs the same width, their names a size up (16px, was 14.5px; 14px under 360px, was 13px), Hung councils and Change since 2021 on two lines, centred; no count of hung councils on the tab */ @media (max-width: 640px){#dm-eh .eh-tab{flex:1 1 0;min-width:0;padding-left:3px;padding-right:3px;font-size:16px}#dm-eh .eh-tab .eh-tab-n{display:none}} @media (max-width: 359px){#dm-eh .eh-tab{font-size:14px}} /* post-elections v23.19 · phones: the tabs 8px taller (50px, the tab in view 54px; were 42px and 46px), more room round their names */ @media (max-width: 640px){#dm-eh .eh-tabs{min-height:54px}#dm-eh .eh-tab{height:50px}#dm-eh .eh-tab.is-on{height:54px}} /* post-elections v23.20 · phones: a province's councils and its district councils fit the screen, no sideways scroll. Under a council's name its leading party and that party's share (.res-meta, written by the script); on the right its outcome, right-aligned under the heading, with the party's seats under it (.res-ms); their columns stay on wider screens. A district: its largest party under its name, its district ballot seats on the right */ #dm-eh .res-meta,#dm-eh .res-ms{display:none} @media (max-width: 640px){#dm-eh .res-tbl .res-table thead th{white-space:normal}#dm-eh .res-tbl .res-table tbody th,#dm-eh .res-tbl .res-table tbody td{padding-top:9px;padding-bottom:9px}#dm-eh .res-tbl .res-table tbody th .nm{overflow-wrap:anywhere}#dm-eh .res-tbl .res-meta{display:flex;flex-wrap:wrap;align-items:center;margin-top:3px;font-size:13.5px;line-height:1.3;color:#5e574e}#dm-eh .res-tbl .res-meta .res-lead{gap:6px;color:#171717}#dm-eh .res-tbl .res-meta .res-lead i{width:10px;height:10px}#dm-eh .res-tbl .res-mv{margin-left:7px;white-space:nowrap}#dm-eh .res-tbl .res-out{padding-left:10px;padding-right:4px;text-align:right}#dm-eh .res-tbl td.res-out{white-space:nowrap}#dm-eh .res-tbl .res-ms{display:block;margin-top:5px;font-size:13px;line-height:1.3;color:#5e574e}#dm-eh .res-tbl .res-ms .of{color:inherit}#dm-eh .res-tbl .res-table .go{width:18px}} /* post-elections v23.21 · phones: Count complete in the declaration box a little smaller, as large as fits on one line beside the share (sized to the box, 8.5px to 10.5px); on the narrowest screens it goes onto two lines rather than over the share */ @media (max-width: 640px){#dm-eh .eh-tabs-head.has-dslot .res-dslot > .mf-decl.is-done{container-type:inline-size;column-gap:6px}#dm-eh .eh-tabs-head.has-dslot .res-dslot .mf-decl.is-done .st{min-width:0;gap:4px;font-size:clamp(8.5px,calc((100cqw - 64px) / 8.9),10.5px);letter-spacing:.02em;line-height:1.15;white-space:normal}} /* post-elections v23.22 · phones: the council box in the black banner on one row, as on desktop (v20.2): the count tracker on the left, the rule, then the leading or largest party on the right (Results appear here as voting districts declare, before the first is in), the two halves the same width and as tall as each other. In the tracker the status on top (as large as fits on one line, 8.5px to 10.5px), the bar with the share beside it, then the voting districts. The party's name stays on one line beside its colour; a long one is made smaller by the script (fitParty). Boxes without the tracker (a district council's seats) keep the party over the seats */ @media (max-width: 640px){#dm-eh .mf-munigov .wg-grid.has-trk{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;align-items:stretch}#dm-eh .mf-munigov .wg-grid.has-trk > .wg-trk{order:1;display:flex;min-width:0;padding:0;border:0}#dm-eh .mf-munigov .wg-grid.has-trk > .wg-main{order:2;min-width:0;padding:0 0 0 14px;border-left:1px solid rgba(255,255,255,0.14)}#dm-eh .mf-munigov .wg-grid.has-trk .wg-lbl{text-wrap:balance}#dm-eh .mf-munigov .wg-grid.has-trk .wg-party{column-gap:10px}#dm-eh .mf-munigov .wg-grid.has-trk .wg-ab{flex:1 1 0;min-width:0;overflow-wrap:break-word}#dm-eh .mf-munigov .wg-grid.has-trk .wg-full{flex-basis:100%}#dm-eh .mf-munigov .wg-grid.has-trk .wg-note-solo{font-size:14px;line-height:1.35}#dm-eh .mf-munigov .wg-trk .mf-decl{flex:1 1 auto;min-width:0;align-content:center;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"st st" "trk pct" "sub sub";align-items:center;gap:7px 8px;padding:10px 12px 11px;container-type:inline-size}#dm-eh .mf-munigov .wg-trk .mf-decl-row{display:contents}#dm-eh .mf-munigov .wg-trk .st{grid-area:st;min-width:0;font-size:clamp(8.5px,calc((100cqw - 16px) / 10.2),10.5px);white-space:normal}#dm-eh .mf-munigov .wg-trk .mf-decl-row > b{grid-area:pct;font-size:17px}#dm-eh .mf-munigov .wg-trk .trk{grid-area:trk}#dm-eh .mf-munigov .wg-trk .sub{grid-area:sub;text-align:left;font-size:11px;line-height:1.3;text-wrap:balance}} @media (max-width: 360px){#dm-eh .mf-munigov .wg-grid.has-trk{column-gap:12px}#dm-eh .mf-munigov .wg-grid.has-trk > .wg-main{padding-left:12px}#dm-eh .mf-munigov .wg-trk .mf-decl{padding-left:10px;padding-right:10px}} /* post-elections v23.24 · phones: Share on WhatsApp stands over the ward dropdown, 16px above it, as wide as its text and icon (was the width of the ward box); the script puts it in #mf-ward-share as the ward box fills. Desktop keeps it in the ward box (v21) */ #dm-eh .mf-ward-share{display:none} @media (max-width: 640px){#dm-eh .mf-ward-share:not([hidden]){display:flex;justify-content:center;margin:0 0 16px}#dm-eh .mf-ward-share .mf-wa-btn{width:auto;margin:0;gap:16px}#dm-eh .mf-ward-share .mf-wa-btn:hover{transform:none}#dm-eh #mf-wardgov .wg-acts{display:none}#dm-eh #mf-wardgov .wg-acts + .wg-src{margin-top:0}} /* post-elections v23.25 · the Hung council banner's explanation a little smaller and tighter: 14px on 1.4 (was 14.5px on 1.45); on phones 13px on 1.33 */ #dm-eh .eh-dl p{font-size:14px;line-height:1.4} @media (max-width: 640px){#dm-eh .eh-dl p{font-size:13px;line-height:1.33}} /* post-elections v23.26 · phones: the ward map's box as tall as the tab in view needs. Under the map only the facts of the view in view take room (the other view's lie over them, out of the flow, as they fade), so a council one party swept stands on its one row; as the tab turns the box eases to the new height (wgTo in the script), clipped while it moves. Wider screens keep both views' facts in one cell, as tall as the taller (v11) */ @media (max-width: 640px){#dm-eh .mf-wm-grid:not(.has-side) .mf-wm-side{position:relative}#dm-eh .mf-wm-grid:not(.has-side) .mf-wm-pane:not(.is-on){position:absolute;top:0;left:0;right:0}#dm-eh .mf-wm-cmp{display:flow-root}#dm-eh .mf-wm-panel.is-gliding{overflow:hidden}} @supports (overflow:clip){@media (max-width: 640px){#dm-eh .mf-wm-panel.is-gliding{overflow:clip}}} /* post-elections v23.27 · phones: Share on WhatsApp 32px above the ward dropdown (was 16px, v23.24) */ @media (max-width: 640px){#dm-eh .mf-ward-share:not([hidden]){margin-bottom:32px}} /* post-elections v23.28 · Change since 2021: a 1px black rule under each label over a pair of maps (Leading parties, Turnout, Hung councils), 10px under the label; the maps nearer it: each map's head 12px under the rule at every width (desktop was 31px under the label), so the year stands 22px under the rule */ #dm-eh .res-h3.cmp-sec{margin-bottom:0;padding-bottom:10px;border-bottom:1px solid #181818} #dm-eh .cmp-map > .res-map-head{margin-top:12px} /* post-elections v23.29 · no count of hung councils on the Hung councils tab at any width (v23.18 hid it on phones only) */ #dm-eh .eh-tab .eh-tab-n{display:none} /* post-elections v23.30 · Change since 2021 on phones: the tables fit the screen, with no sideways scroll. The column heads wrap and stand on the rule (at every width); a province's name holds its line; in a province the Change column gives way to the Changed hands flag under the council's name (.cmp-chg-s), and a long council name may break; the › narrower. Under 341px the province names wrap too, the cells and party support's names closer */ #dm-eh .cmp-table thead th{vertical-align:bottom} #dm-eh .cmp-chg-s{display:none} @media (max-width: 640px){#dm-eh .res-table.cmp-table thead th{white-space:normal}#dm-eh .cmp-table tbody tr[data-prov] th .nm{white-space:nowrap}#dm-eh .cmp-table tbody tr[data-open] th .nm{overflow-wrap:anywhere}#dm-eh .cmp-chg-s{display:block;margin-top:6px}#dm-eh .cmp-table .go{width:14px}} @media (max-width: 340px){#dm-eh .cmp-table tbody tr[data-prov] th .nm{white-space:normal}#dm-eh .cmp-table tbody th,#dm-eh .cmp-table tbody td,#dm-eh .cmp-table thead th{padding-left:3px;padding-right:3px}#dm-eh .cmp-share .res-lead{white-space:normal}} /* post-elections v23.31 · phones: in coalition mode the back button reads Back. Where the half circle drops for the Majority flag's room (under 480px), the button hangs under the question, out of the flow, at the right of that room, so the head row is only as tall as the question and the half circle stands 30px higher in both modes; the flag comes up to its left and the button that clears the coalition hangs under it (v23.37; v23.31 to v23.36 level with it on the left). Its tap target 44px tall */ @media (max-width: 640px){#dm-eh .mf-coal-back .mf-back-to{display:none}} @media (max-width: 640px){@container mf-hd (max-width: 491.98px){#dm-eh .mf-cb-side .mf-coal-back{position:absolute;top:calc(100% + 6px);right:0;margin:0}#dm-eh .mf-cb-side .mf-coal-back::before{content:"";position:absolute;top:-10px;right:-6px;bottom:-10px;left:-6px}#dm-eh .mf-cb-side .mf-cb-clr{top:calc(100% + 31px)}}} /* post-elections v23.32 · party support beside the councils map: a long party name wraps in the Party column (Community Solidarity Association among Gauteng's Others) instead of widening the table past the box. The rows shut under Others size the columns too (v23.9), so the long name pushed the table out even with Others closed, and squeezed the share bars to nothing */ #dm-eh .res-ps th.p{white-space:normal} #dm-eh .res-ps th.p .pn strong{overflow-wrap:break-word} /* post-elections v23.35 · a district's file: its local councils with no heading and no rule over them, 28px under the district's results (was a rule 34px under them and the heading 34px under the rule). Each council a row as in Hung councils and a province's table of councils: its name larger (DM Custom 22px, was Charis 17px) with its residents under it; on the right the leading party and the outcome tag (render.chip) in two columns, so the tags line up, then the ›; hairlines between the rows; under the pointer the row rises as a white card. Desktop: the rows 13px in from the sides, level with the votes table over them. Phones: the party and the tag under the residents, the name 20px */ #dm-eh .mf-res + .mf-res-members{margin-top:28px;padding-top:0;border-top:0} #dm-eh .mf-file-body--dist .mf-res-members .mf-dist-list{margin-top:0} #dm-eh .mf-res-members .mf-dist-munis{margin-top:0;border-top:0} #dm-eh .mf-res-members .mf-dist-muni{display:grid;grid-template-columns:minmax(0,1fr) auto 14px;align-items:center;gap:10px 22px;z-index:0;padding:15px 0;background:none;border-bottom:1px solid #e7e3db;color:#171717;transition:transform .14s ease} #dm-eh .mf-res-members .mf-dist-muni::before{content:"";position:absolute;inset:0 -14px -1px;z-index:-1;border-radius:8px;background:#fff;opacity:0;transition:opacity .14s ease,box-shadow .14s ease} #dm-eh .mf-res-members .mf-dist-muni:hover,#dm-eh .mf-res-members .mf-dist-muni:focus-visible{transform:none;box-shadow:none} @media (hover: hover){#dm-eh .mf-res-members .mf-dist-muni:hover{z-index:1;transform:translateY(-3px) scale(1.01);border-bottom-color:transparent}#dm-eh .mf-res-members .mf-dist-muni:hover::before{opacity:1;box-shadow:0 16px 26px -12px rgba(23,23,23,.34),0 3px 8px -2px rgba(23,23,23,.12),0 0 0 1px rgba(23,23,23,.07)}} #dm-eh .mf-res-members .mf-dist-muni:focus-visible{z-index:1;transform:translateY(-3px) scale(1.01);border-bottom-color:transparent} #dm-eh .mf-res-members .mf-dist-muni:focus-visible::before{opacity:1;box-shadow:0 16px 26px -12px rgba(23,23,23,.34),0 3px 8px -2px rgba(23,23,23,.12),0 0 0 1px rgba(23,23,23,.07);outline:2px solid #181818;outline-offset:2px} @media (hover: none){#dm-eh .mf-res-members .mf-dist-muni:active{background:none}#dm-eh .mf-res-members .mf-dist-muni:active::before{opacity:1;background:var(--dm-grey-3);transition-duration:0s}} #dm-eh .mf-res-members .mf-dist-rt{display:grid;justify-items:start;gap:4px;min-width:0} #dm-eh .mf-res-members .mf-dist-muni .nm{max-width:100%;font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.1;letter-spacing:-.1px;color:#181818} #dm-eh .mf-res-members .mf-dist-muni .pop{font-family:var(--font-ui);font-size:13px;letter-spacing:0;color:#5e574e} #dm-eh .mf-res-members .mf-dist-rb{display:grid;grid-template-columns:minmax(104px,max-content) 136px;align-items:center;gap:0 16px;font-family:var(--font-ui);font-size:14.5px;line-height:1.2;color:#171717} #dm-eh .mf-res-members .mf-dist-rb .res-oc{justify-self:start} #dm-eh .mf-res-members .mf-dist-rb > .mf-chip-wait{grid-column:1 / -1;width:100%;height:14px} #dm-eh .mf-dist-na{grid-column:1 / -1;font-size:13.5px;color:#5e574e} #dm-eh .mf-dist-go{font-family:var(--font-ui);font-size:20px;line-height:1;text-align:right;color:#a3978a;transition:color .12s ease} #dm-eh .mf-res-members .mf-dist-muni:hover .mf-dist-go,#dm-eh .mf-res-members .mf-dist-muni:focus-visible .mf-dist-go{color:#181818} @media (max-width: 640px){#dm-eh .mf-res + .mf-res-members{margin-top:24px}#dm-eh .mf-res-members .mf-dist-muni{grid-template-columns:minmax(0,1fr) 14px;gap:10px 12px;padding:14px 0}#dm-eh .mf-res-members .mf-dist-muni::before{inset:0 -10px -1px}#dm-eh .mf-res-members .mf-dist-rt{grid-column:1;grid-row:1}#dm-eh .mf-res-members .mf-dist-rb{grid-column:1;grid-row:2;grid-template-columns:minmax(84px,max-content) auto;justify-content:start;gap:0 14px;font-size:14px}#dm-eh .mf-res-members .mf-dist-go{grid-column:2;grid-row:1 / span 2}#dm-eh .mf-res-members .mf-dist-muni .nm{font-size:20px}} @media (min-width: 641px){#dm-eh .mf-res-members .mf-dist-munis{padding:0 13px}} /* post-elections v23.36 · phones: a district's banner shorter. Local municipalities and District council side by side, the rule between them, as on desktop (were one over the other); Local municipalities as large as Turnout on a local council's banner (28px), its label on two lines where one leaves District council too little room. Under 530px they run across the banner, under the name, the type line and the locator map (the map beside the name and the type line only; any height it has over them goes under the type line); from 530px they stay beside the map. The council box's halves side by side too, as with the count tracker (v23.22): the largest party on the left, the district ballot seats past the rule on the right; a long party name is made smaller by the script (fitParty) */ @media (max-width: 640px){#dm-eh .mf-file-banner:has(.mf-banner-facts.is-district) .mf-banner-facts{grid-template-columns:fit-content(42%) minmax(0,1fr);gap:0;padding-top:12px}#dm-eh .mf-file-banner:has(.mf-banner-facts.is-district) .mf-banner-facts .bf{grid-column:auto;min-width:0;padding:0 13px 0 0;border-left:0}#dm-eh .mf-file-banner:has(.mf-banner-facts.is-district) .mf-banner-facts .bf + .bf{padding:0 0 0 13px;border-left:1px solid rgba(255,255,255,0.14)}#dm-eh .mf-file-banner:has(.mf-banner-facts.is-district) .mf-banner-facts .bf-count .v{display:block;font-size:28px;line-height:1}#dm-eh .mf-file-banner:has(.mf-banner-facts.is-district) .mf-banner-facts .bf .v .sub{font-size:12px;line-height:1.4}#dm-eh .mf-munigov .wg-grid:not(.has-trk):not(.is-single){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:0;align-items:stretch}#dm-eh .mf-munigov .wg-grid:not(.has-trk):not(.is-single) > .wg-main{min-width:0;padding:0}#dm-eh .mf-munigov .wg-grid:not(.has-trk):not(.is-single) > .wg-break{min-width:0;padding:0 0 0 14px;border-top:0;border-left:1px solid rgba(255,255,255,0.14)}#dm-eh .mf-munigov .wg-grid:not(.has-trk):not(.is-single) .wg-party{column-gap:10px}#dm-eh .mf-munigov .wg-grid:not(.has-trk):not(.is-single) .wg-ab{flex:1 1 0;min-width:0;overflow-wrap:break-word}#dm-eh .mf-munigov .wg-grid:not(.has-trk):not(.is-single) .wg-full{flex-basis:100%}#dm-eh .mf-munigov .wg-grid:not(.has-trk):not(.is-single) .wg-legend{gap:6px 14px}} @media (max-width: 529px){#dm-eh .mf-file-banner:has(.mf-banner-facts.is-district){grid-template-rows:auto 1fr auto auto}#dm-eh .mf-file-banner:has(.mf-banner-facts.is-district) .mf-file-map{grid-row:1 / span 2}#dm-eh .mf-file-banner:has(.mf-banner-facts.is-district) .mf-banner-facts{grid-column:1 / -1}} /* post-elections v23.38 · touch screens: a council tapped on the Results, Turnout, Hung councils or Change since 2021 maps keeps its tooltip up (is-pin, set by the script), with Go to municipality under its figures: Build a coalition's type (the Hung councils list), black on white on the tooltip's charcoal, 34px tall and pressed over 48px (::after). On Hung councils the council tapped is outlined at the height it stands, as under the pointer on Change since 2021's maps (hm-tap) */ #dm-eh .res-map-svg .res-tip.is-pin{pointer-events:auto} #dm-eh .res-tip .res-tip-go{grid-column:1/-1;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:34px;margin:8px 0 0;padding:0 12px;background:#fff;border:0;border-radius:3px;color:#181818;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:87.5%;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1;text-transform:uppercase;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .12s ease} #dm-eh .res-tip .res-tip-go::after{content:"";position:absolute;inset:-7px -8px} @media (hover: hover){#dm-eh .res-tip .res-tip-go:hover{background:#e9e9e9}} #dm-eh .res-tip .res-tip-go:active{background:#d4d4d4;transition-duration:0s} #dm-eh .res-tip .res-tip-go:focus-visible{outline:2px solid #fff;outline-offset:2px} #dm-eh .hm-svg .hm-tap{visibility:hidden;fill:rgba(0,0,0,.16);stroke:#181818;stroke-width:1.5px;pointer-events:none;transform:translateY(calc(var(--lift,0) * var(--u,.45) * -1px))} #dm-eh .hm-svg .hm-tap.is-on{visibility:visible} @supports (color:color-mix(in oklab,#000 50%,#fff)){#dm-eh .hm-svg .hm-tap{stroke:color-mix(in oklab,var(--fc,#ecebe6) 50%,#000)}} /* post-elections v23.39 · Change since 2021: a council clicked or tapped in a province stands up a little on both maps of the pair (the script's cmpPop: from where it stood, --k0, to 5px over it, --k), its top outlined as the council under the pointer is (rl-hl); the councils there take a pointer. Phones and narrow screens, where a pair's maps stand one over the other: the 2026 map closer under the 2021 map's key (the gap 6px, was 30px; the key 8px under its map, was 12px; the 2026 map's year at the top of its cell, was 12px down), 78px from map to map at 390px wide (was 118px) */ #dm-eh .cmp-map-svg:not(.is-nat) :is(path.rc,path.hc,.hm-l){cursor:pointer} #dm-eh .cmp-map-svg .rl:not(.is-up) :is(.rl-step,.rl-top){transform:translateY(calc(var(--k0,0) * -1px))} #dm-eh .cmp-map-svg .rl-hl{fill:rgba(0,0,0,.16);stroke:#181818;stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-linejoin:round;fill-rule:evenodd;pointer-events:none} @supports (color:color-mix(in oklab,#000 50%,#fff)){#dm-eh .cmp-map-svg .rl-hl{stroke:color-mix(in oklab,var(--fc,#ecebe6) 50%,#000)}} @media (max-width: 860px){#dm-eh .res-grid.cmp-maps{row-gap:6px}#dm-eh .cmp-maps .cmp-legend{margin-top:8px}#dm-eh .cmp-maps > .cmp-map + .cmp-map > .res-map-head{margin-top:0}} /* post-elections v26.1 · desktop ward box: more room. Share on WhatsApp keeps at least 18px over the source line under it (was as little as 5px when the candidate's name fits one line), and the candidate's name has more air: 14px under the label (was 10px) and 14px over the party (was 10px). The box grows a little and the ward's vote breakdown moves down with it; phones unchanged. */ @media (min-width: 641px){#dm-eh #mf-wardgov .wg-acts{padding:4px 0 18px}#dm-eh #mf-wardgov .wg-cand{margin:14px 0 4px}#dm-eh #mf-wardgov .wg-cand + .wg-party{margin-top:14px}}