/* Every booth a dot (15 Oct 2026, owner picked design A). One block for the main home (inside the navy by-election card) and the by-election page.
   The grid is drawn by dots.js from assets/booths/dots.json; the legend counts, the links and the reserved height are in the HTML (no jump, links work without the script). */
.bdots { --bd-ink: #1b1a2e; --bd-navy: #22235a; --bd-mute: #4a453c; display: grid; gap: 10px; min-width: 0; font-family: inherit; }
.bdots * { box-sizing: border-box; }
.bd-head { display: grid; gap: 4px; }
.bd-h { margin: 0; font-size: clamp(20px, 5.4vw, 26px); line-height: 1.15; font-weight: 800; text-wrap: balance; }
.bd-h { color: var(--bd-navy); }
.bdots-sec { padding: 6px 0 26px; }
.bd-cards { display: grid; gap: 12px; }
.bd-card { background: #fffaf0; color: var(--bd-ink); border: 1px solid #e6cf9a; border-radius: 16px; padding: 12px; display: grid; gap: 8px; min-width: 0; }
.bd-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.bd-top b { font-size: 20px; line-height: 1.1; font-weight: 800; color: var(--bd-navy); }
.bd-top small { font-size: 12.5px; font-weight: 700; color: var(--bd-mute); }
.bd-sub { font-size: 12.5px; font-weight: 800; color: #4b2fb3; display: flex; align-items: center; gap: 6px; min-height: 18px; }
.bd-sub::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: #4b2fb3; flex: none; }
.bd-sub.apr { color: #6b5b45; }
.bd-sub.apr::before { background: repeating-linear-gradient(45deg, #9a8b6f 0 3px, #d9c9a8 3px 6px); }
.bd-sub.chg { color: #8a2a12; }
.bd-sub.chg::before { background: #8a2a12; }
.bd-svg { display: block; width: 100%; height: auto; touch-action: manipulation; cursor: pointer; border-radius: 6px; }
.bd-svg:focus-visible { outline: 3px solid #4b2fb3; outline-offset: 2px; }
.bd-svg rect { transition: fill .42s ease, opacity .42s ease; transform-box: fill-box; transform-origin: center; }
@media (hover: hover) { .bd-svg rect:hover { stroke: #1b1a2e; stroke-width: 1.2; } }
.bd-ring { fill: none; stroke: #1b1a2e; stroke-width: 1.6; pointer-events: none; }
.bd-mode { display: flex; gap: 4px; background: #f3ead8; border-radius: 10px; padding: 2px; }
.bd-mode button { flex: 1 1 0; min-height: 44px; border: 0; border-radius: 8px; background: transparent; font: 700 13px/1.15 inherit; font-family: inherit; color: var(--bd-ink); cursor: pointer; padding: 2px 4px; }
.bd-mode button[aria-pressed="true"] { background: var(--bd-navy); color: #fff; }
.bd-mode:not(.on) { visibility: hidden; }
.bd-leg { display: flex; flex-wrap: wrap; gap: 5px 6px; margin: 0; padding: 0; list-style: none; }
.bd-leg li { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; padding: 2px 8px 2px 6px; border-radius: 999px; background: #f3ead8; }
.bd-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.bd-note { margin: 0; font-size: 13px; font-weight: 700; color: var(--bd-mute); }
.bd-pick { min-height: 58px; font-size: 13.5px; line-height: 1.35; color: var(--bd-ink); background: #f3ead8; border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; align-content: center; }
.bd-pick b { font-weight: 800; }
.bd-pick .bd-hint { color: var(--bd-mute); font-weight: 600; }
.bd-pick a { color: #4b2fb3; font-weight: 800; text-decoration: underline; }
.bd-pick a:hover, .bd-pick a:focus-visible { color: #2b1a86; }
.bdots a.bd-go { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; background: var(--bd-navy); color: #fff; font-weight: 800; font-size: 14px; text-align: center; padding: 6px 10px; text-decoration: none; line-height: 1.2; }
.bdots a.bd-go:hover, .bdots a.bd-go:focus-visible { background: #30327a; color: #fff; }
.bdots a.bd-go:focus-visible { outline: 3px solid #4b2fb3; outline-offset: 2px; }
/* the by-election card on the home: its seat tiles turned their text orange (the site's link hover colour) on the navy tile; keep them white */
.bypoll a.bp-seat:hover, .bypoll a.bp-seat:focus-visible { color: #fff; }
.bypoll a.bp-seat:hover .bp-seat-s, .bypoll a.bp-seat:hover .bp-won, .bypoll a.bp-seat:hover .bp-won * { color: inherit; }
.bd-res { margin: 0; font-size: 14px; font-weight: 700; }
.bd-res a { color: var(--bd-navy); text-decoration: underline; text-underline-offset: 3px; }
.bd-res a:hover, .bd-res a:focus-visible { color: #4b2fb3; }
.bdots .stk { display: flex; flex-direction: column; }
.bdots .stk > .s { font-size: .86em; font-weight: 600; opacity: .92; }
@media (min-width: 720px) { .bd-cards { grid-template-columns: 1fr 1fr; gap: 16px; } .bd-card { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .bd-svg rect { transition: none !important; } }