/* Elections 2027 hub — neutral design (no party colours) */
.el-wrap { max-width: 980px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.el-hero { border-radius: 22px; padding: 26px 24px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #13a374 0%, rgba(19,163,116,0) 55%), linear-gradient(135deg, #0B6E4F, #063D2C); box-shadow: 0 10px 30px rgba(8,82,59,.2); }
.el-hero h1 { margin: 6px 0 8px; font: 800 30px/1.15 var(--display); color: #fff; }
.el-hero-sm h1 { font-size: 26px; }
.el-kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #CFF3E2; }
.el-lead { margin: 0 0 14px; color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.5; }
.el-lead a, .el-lead b { color: #fff; }
.el-count { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; background: rgba(0,0,0,.2); border-radius: 16px; padding: 12px 16px; }
.el-count-label { font-weight: 700; font-size: 14px; }
.el-count-nums { display: flex; align-items: baseline; gap: 4px 6px; }
.el-count-nums b { font: 800 26px/1 var(--display); color: var(--gold, #F2B84B); min-width: 1.4em; text-align: right; }
.el-count-nums small { font-size: 12px; color: #CFF3E2; margin-right: 8px; }
.el-sec { padding: 20px; }
.el-h2 { margin: 0 0 6px; font: 800 20px/1.25 var(--display); } .el-h2 small { font-size: 14px; color: var(--muted); font-weight: 600; }
.el-sub, .el-note { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.5; } .el-note { margin: 12px 0 0; font-size: 12.5px; }
.el-dates { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.el-dates li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.el-dates li:first-child { border-top: 0; }
.el-dates time { font-weight: 700; color: var(--green-text); }
.el-dates li.is-done { opacity: .55; } .el-dates li.is-done time::before { content: '✓ '; }
.el-dates li.is-big span { font-weight: 800; }
.el-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.el-cands-sm { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.el-cand { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "p n" "p m"; align-items: center; gap: 2px 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink) !important; text-decoration: none !important; }
a.el-cand:hover { border-color: var(--green); }
.el-cand b { grid-area: n; font-size: 15px; line-height: 1.3; } .el-cand small { grid-area: m; color: var(--muted); font-size: 12.5px; }
.el-party { grid-area: p; display: inline-grid; place-items: center; min-width: 46px; height: 36px; padding: 0 6px; border-radius: 10px; background: var(--soft); color: var(--ink); font: 800 12.5px/1 var(--body); letter-spacing: .03em; border: 1px solid var(--line); }
.el-party-lg { display: inline-grid; min-width: 52px; height: 30px; margin-right: 8px; background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); vertical-align: middle; }
.el-states { display: flex; flex-wrap: wrap; gap: 8px; }
.el-states a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft-2); font-weight: 600; font-size: 14px; color: var(--ink) !important; }
.el-states a:hover { border-color: var(--green); color: var(--green) !important; }
.el-poll { display: flex !important; align-items: center; gap: 14px; padding: 16px 18px; color: var(--ink) !important; text-decoration: none !important; border: 2px solid var(--gold, #F2B84B); }
.el-poll-ic { font-size: 30px; } .el-poll > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 3px; } .el-poll small { color: var(--muted); font-size: 13px; }
.el-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.el-guide { display: flex; flex-direction: column; gap: 8px; color: var(--ink) !important; font-size: 14px; line-height: 1.35; text-decoration: none !important; }
.el-guide img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 12px; }
.el-news { list-style: none; margin: 4px 0 0; padding: 0; }
.el-news li + li { border-top: 1px solid var(--line); }
.el-news a { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; color: var(--ink) !important; text-decoration: none !important; }
.el-news small { color: var(--muted); font-size: 12.5px; }
.el-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0 0 14px; }
.el-facts div { background: var(--soft-2); border-radius: 12px; padding: 10px 12px; } .el-facts dt { font-size: 12px; color: var(--muted); } .el-facts dd { margin: 2px 0 0; font-weight: 700; }
.el-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.el-crumbs { font-size: 13.5px; color: var(--muted); } .el-crumbs a { color: var(--green-text); }
.el-neutral { margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--soft); color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
/* Homepage strip */
.el-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; background: #0F1A14; color: #fff; font-size: 14px; }
.el-strip a.el-strip-go { color: #F2B84B !important; font-weight: 700; white-space: nowrap; }
.el-strip b { color: #F2B84B; }
.el-strip-x { border: 0; background: transparent; color: rgba(255,255,255,.7); font-size: 20px; cursor: pointer; }
@media (max-width: 640px) { .el-hero { padding: 20px 18px; } .el-hero h1 { font-size: 24px; } .el-dates li { grid-template-columns: 92px 1fr; font-size: 14px; } .el-count-nums b { font-size: 22px; } .el-strip { font-size: 13px; } }
html[data-theme="dark"] .el-party { background: rgba(255,255,255,.06); }
/* Flyer (sidebar + feed) and "I will vote" */
.el-flyer { border-radius: 18px; padding: 16px; color: #fff; background: radial-gradient(130% 120% at 100% 0%, #16a374 0%, rgba(22,163,116,0) 55%), linear-gradient(150deg, #0B6E4F, #052E22); box-shadow: 0 8px 24px rgba(8,82,59,.22); display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.el-flyer-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.el-flyer-tag { background: #F2B84B; color: #10201A; font: 800 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; }
.el-flyer-days { font-size: 12.5px; color: #CFF3E2; } .el-flyer-days b { font: 800 20px/1 var(--display); color: #F2B84B; }
.el-flyer h3 { margin: 0; font: 800 18px/1.25 var(--display); color: #fff; }
.el-flyer-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: rgba(255,255,255,.9); }
.el-flyer-btns { display: flex; flex-direction: column; gap: 8px; }
.el-flyer-btns .btn { width: 100%; justify-content: center; }
.el-flyer .btn-dark { background: #fff; color: #10201A; } .el-flyer .btn-dark:hover { background: #F2B84B; }
.el-flyer-wide { margin: 0; }
@media (min-width: 640px) { .el-flyer-wide { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-areas: "top top" "h btns" "f btns"; gap: 10px 20px; padding: 20px 22px; }
  .el-flyer-wide .el-flyer-top { grid-area: top; } .el-flyer-wide h3 { grid-area: h; font-size: 21px; } .el-flyer-wide .el-flyer-facts { grid-area: f; } .el-flyer-wide .el-flyer-btns { grid-area: btns; align-self: center; } }
.el-pledge { display: flex; flex-direction: column; gap: 4px; }
.el-pledge-btn { width: 100%; justify-content: center; font-weight: 800; }
.el-pledge-n { font-size: 12px; opacity: .85; text-align: center; }
.el-pledge-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border: 2px solid #F2B84B; }
.el-pledge-card > div:first-child { flex: 1; min-width: 220px; } .el-pledge-card h2 { margin: 0 0 4px; } .el-pledge-card p { margin: 0; color: var(--muted); font-size: 14px; }
.el-pledge-card .el-pledge { min-width: 230px; } .el-pledge-card .el-pledge-n { color: var(--muted); opacity: 1; }
/* Keep the flyer green inside the bento sidebar (its tiles are white) */
.bx-side .home-side--bare > .el-flyer, html[data-theme="dark"] .bx-side .home-side--bare > .el-flyer { background: radial-gradient(130% 120% at 100% 0%, #16a374 0%, rgba(22,163,116,0) 55%), linear-gradient(150deg, #0B6E4F, #052E22); border-radius: 18px; padding: 16px; color: #fff; }
/* Election Day room */
.el-hero-p { margin: 0 0 6px; color: rgba(255,255,255,.88); font-size: 15px; max-width: 640px; }
.el-live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #FF4D3A; margin-right: 4px; vertical-align: 1px; box-shadow: 0 0 0 0 rgba(255,77,58,.7); animation: elPulse 1.6s infinite; }
@keyframes elPulse { 70% { box-shadow: 0 0 0 9px rgba(255,77,58,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,58,0); } }
@media (prefers-reduced-motion: reduce) { .el-live-dot { animation: none; } }
.el-rep-state { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); max-width: 320px; margin: 8px 0 12px; }
.el-rep-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.el-rep-b { position: relative; display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line, #E3E8E1); background: var(--card, #fff); color: inherit; font: 600 14.5px/1.3 var(--body); cursor: pointer; min-height: 52px; }
.el-rep-b span { font-size: 20px; } .el-rep-b i { margin-left: auto; font-style: normal; font-weight: 800; }
.el-rep-b:hover { border-color: #0B6E4F; } .el-rep-b:disabled { opacity: .6; }
.el-rep-b.on.el-rep-good { background: #E6F5EE; border-color: #0B6E4F; } .el-rep-b.on.el-rep-warn { background: #FFF4DB; border-color: #C98A00; } .el-rep-b.on.el-rep-bad { background: #FDECEA; border-color: #B4361F; }
.el-rep-msg { margin: 10px 0 0; font-weight: 700; color: #0B6E4F; }
.el-safe { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: #FDECEA; color: #7A2414; border: 1px solid #F3C3B8; font-size: 14px; }
.el-safe b { font-size: 15.5px; }
.el-tot { list-style: none; padding: 0; margin: 8px 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.el-tot li { padding: 7px 11px; border-radius: 999px; font-size: 13.5px; background: #F1F3EF; }
.el-tot li.el-rep-good { background: #E6F5EE; color: #08523B; } .el-tot li.el-rep-warn { background: #FFF4DB; color: #7A5200; } .el-tot li.el-rep-bad { background: #FDECEA; color: #8F2A17; }
.el-states-live { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.el-st { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line, #E3E8E1); display: flex; flex-direction: column; gap: 6px; }
.el-st-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .el-st-top a { color: inherit; } .el-st-top small, .el-st-k { color: var(--muted); font-size: 12.5px; }
.el-st-bar { height: 8px; border-radius: 99px; background: #F3D9A4; overflow: hidden; } .el-st-bar span { display: block; height: 100%; background: #0B6E4F; border-radius: 99px; }
.el-res { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border: 2px solid #0B6E4F; } .el-res > div { flex: 1; min-width: 240px; } .el-res p { margin: 0; color: var(--muted); font-size: 14px; }
.el-h2-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
html[data-theme="dark"] .el-safe { background: rgba(180,54,31,.16); color: #FFB4A3; border-color: rgba(180,54,31,.4); }
html[data-theme="dark"] .el-tot li { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .el-rep-b.on { background: rgba(255,255,255,.06) !important; }
.el-live-btn { margin-top: 12px; } .el-live-link { display: inline-block; margin-top: 10px; color: #CFF3E2; font-weight: 700; font-size: 14px; }
.el-strip .el-live-dot { margin-right: 6px; }