/* America: Unmuted - Election Night board (/election/). Builds on site.css tokens. */
:root { --dem: #3d7be0; --rep: var(--red); --card: rgba(255, 255, 255, 0.035); }

.el { display: block; }
.el-bar, .el-main { width: min(1240px, 100% - 40px); margin-inline: auto; }
.el-bar { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.el-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.el-brand img { border-radius: 50%; }
.el-word { font: 34px/0.9 var(--font-display); text-transform: uppercase; color: var(--white); }
.el-word b { font-weight: 400; color: var(--red); }
.el-nav { margin-left: auto; display: flex; gap: 22px; align-items: center; font: 13px var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; }
.el-nav a { color: var(--muted); text-decoration: none; }
.el-nav a:hover { color: var(--white); }
.el-nav .el-nav__yt { background: var(--red); color: var(--white); padding: 9px 14px; border-radius: 4px; }

.el-hero { padding: 34px 0 26px; }
.el-live { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; padding: 10px 14px; background: rgba(214, 32, 44, 0.14);
  border: 1px solid rgba(214, 32, 44, 0.5); border-radius: 4px; font-weight: 600; }
.el-pill { font: 12px var(--font-label); letter-spacing: 0.1em; background: var(--white); color: var(--navy); padding: 4px 8px; border-radius: 2px; flex: none; }
.el-pill.is-live { background: var(--red); color: var(--white); animation: el-pulse 1.6s infinite; }
@keyframes el-pulse { 50% { opacity: 0.55; } }
.el-title { font: clamp(3rem, 1.6rem + 6vw, 6.5rem)/0.9 var(--font-display); text-transform: uppercase; margin: 0 0 14px; color: var(--white); }
.el-title span { color: var(--red); }
.el-sub { max-width: 70ch; margin: 0 0 8px; color: #c9d0dc; }
.el-updated, .el-muted { color: var(--muted); font-size: 0.9rem; margin: 0; }

.el-power { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.el-card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; }
.el-card h2, .el-h { font: 13px var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.el-big { font: 44px/1 var(--font-display); color: var(--white); margin: 0 0 8px; }
.el-card--next { border-left: 4px solid var(--red); }
.el-flips { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: 0.85rem; color: var(--muted); }
.el-flips b { font: 13px var(--font-label); padding: 3px 8px; border-radius: 2px; color: var(--white); }
.el-flips .r { background: var(--rep); }
.el-flips .d { background: var(--dem); }

.el-cols { display: grid; grid-template-columns: 1fr 380px; gap: 36px; align-items: start; padding-bottom: 50px; }
.el-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.el-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.el-group { margin-bottom: 26px; }
.el-group__time { font: 22px/1 var(--font-display); text-transform: uppercase; color: var(--white); margin: 0 0 12px; }
.el-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }

.el-race { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; transition: border-color 0.2s; }
.el-race.is-called { border-color: rgba(255, 255, 255, 0.35); }
.el-race__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.el-race__state { font: 22px/1 var(--font-display); text-transform: uppercase; color: var(--white); }
.el-race__office { font-size: 0.78rem; color: var(--muted); text-align: right; }
.el-cands { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.el-cand { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 4px; background: rgba(0, 0, 0, 0.25); }
.el-cand__party { font: 11px var(--font-label); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 2px; color: var(--white); flex: none; }
.el-cand--r .el-cand__party { background: var(--rep); }
.el-cand--d .el-cand__party { background: var(--dem); }
.el-cand__name { font-weight: 600; color: var(--text); }
.el-cand__check { margin-left: auto; font-weight: 800; }
.el-cand--r.is-won { background: rgba(214, 32, 44, 0.28); }
.el-cand--d.is-won { background: rgba(61, 123, 224, 0.28); }
.el-race__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.8rem; }
.el-status { color: var(--muted); }
.el-status.counting { color: #ffd166; font-weight: 600; }
.el-status.called { color: var(--white); font: 12px var(--font-label); letter-spacing: 0.06em; }
.el-held { color: var(--muted); }
.el-flip { font: 11px var(--font-label); letter-spacing: 0.08em; background: #ffd166; color: #000; padding: 3px 7px; border-radius: 2px; }

.el-feed { list-style: none; margin: 0 0 22px; padding: 0; }
.el-feed__item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.el-feed__meta { display: flex; gap: 10px; align-items: center; font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.el-tag { font: 10px var(--font-label); letter-spacing: 0.12em; padding: 3px 6px; border-radius: 2px; }
.el-tag--r { background: var(--white); color: var(--navy); }
.el-tag--c { background: var(--red); color: var(--white); }
.el-tag--b { background: #ffd166; color: #000; }
.el-feed__text { margin: 0 0 6px; font-size: 0.97rem; color: var(--text); }
.el-feed__who { font-size: 0.82rem; color: var(--muted); }
a.el-feed__who { color: var(--white); }
.el-cta { padding: 18px; border-left: 4px solid var(--red); background: rgba(5, 8, 15, 0.6); border-radius: 6px; display: grid; gap: 10px; }
.el-cta p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.el-cta .btn { justify-content: center; }

@media (max-width: 960px) {
  .el-cols { grid-template-columns: 1fr; }
  .el-power { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .el-bar, .el-main { width: calc(100% - 32px); }
  .el-word { font-size: 24px; }
  .el-nav a:not(.el-nav__yt) { display: none; }
  .el-live { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .el-pill.is-live { animation: none; } }

/* Home-page copy of the board (owner 11-03: under the daily briefing, the top strip links to #election). */
.el-home { padding: 8px 0 56px; scroll-margin-top: 16px; }
.el-home .el-title { font-size: clamp(2.6rem, 1.4rem + 4vw, 4.6rem); }
.el-home .el-card h3 { font: 13px var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.el-home h3.el-h { font: 13px var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.el-home .el-updated a { color: var(--white); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Betting-market odds (owner 11-03: "I don't see any predictions"). Uncalled races only; source named on every line. */
.el-odds { margin: 0 0 12px; }
.el-odds__bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.el-odds__r { background: var(--rep); }
.el-odds__d { background: var(--dem); }
.el-odds__text { margin: 6px 0 0; font-size: 0.78rem; color: var(--muted); }
.el-odds-note { margin-top: 4px; font-size: 0.8rem; }
.el-odds-note a { color: var(--white); }