/* On the bubble: close-race meters, recap chip tug bars, the live-wire crawl and site-wide motion. */
.close-races{margin:34px 0 8px;scroll-margin-top:90px}
.close-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;font:11px/1.3 var(--mono);color:var(--muted);text-align:right}
.close-meta small{flex-basis:100%;font-size:11px;letter-spacing:.06em}
.close-live{width:9px;height:9px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 0 color-mix(in srgb,var(--acid) 60%,transparent);animation:ctc-ping 1.8s ease-out infinite}
#close-clock{font-variant-numeric:tabular-nums;color:var(--ink)}
.close-explain{max-width:860px;margin:0 0 14px;color:var(--muted);font-size:13px}
.close-explain b{color:var(--ink);font-weight:600}
.close-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:10px}
.close-foot{display:flex;justify-content:center;margin-top:10px}
#close-more{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:7px 14px;font:11px var(--mono);letter-spacing:.06em;color:var(--acid)}
#close-more:hover{border-color:var(--acid)}

/* one meter */
.ctc{position:relative;display:grid;gap:9px;padding:13px 14px 12px;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;cursor:pointer;isolation:isolate;transition:border-color .25s,transform .25s}
.ctc:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--acid) 9%,transparent) 50%,transparent 70%) no-repeat;background-size:60% 100%;background-position:-150% 0;animation:ctc-sheen 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * .6s)}
.ctc:hover,.ctc:focus-visible{border-color:var(--acid);transform:translateY(-2px)}
.ctc.ctc-enter{animation:ctc-enter .6s cubic-bezier(.2,.8,.2,1) both}
.ctc.ctc-bump{animation:ctc-bump 1.6s ease-out}
.ctc-in-detail{cursor:default;margin-top:10px;padding:10px 11px}
.ctc-in-detail:hover{transform:none}
.ctc-in-detail .ctc-head,.ctc-in-detail .ctc-tug{display:none}
.ctc-head{display:flex;justify-content:space-between;gap:10px;align-items:start}
.ctc-title{display:grid;gap:1px;min-width:0}
.ctc-kind{color:var(--acid);font-size:10.5px}
.ctc-name{font:400 22px/1.05 var(--serif);letter-spacing:-.03em}
.ctc-ring{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center;align-content:center;font:700 11px/1 var(--mono)}
.ctc-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ctc-ring circle{fill:none;stroke-width:3.4}
.ctc-ring-bg{stroke:var(--line)}
.ctc-ring-fg{stroke:var(--acid);stroke-linecap:round;transition:stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1)}
.ctc-ring small{font-size:9px;color:var(--muted);letter-spacing:.1em;margin-top:1px}

/* tug of war */
.ctc-tug{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px}
.ctc-side{display:grid;min-width:0}
.ctc-b{text-align:right}
.ctc-cand{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.ctc-votes{font:700 17px/1.15 var(--mono);color:var(--tone);font-variant-numeric:tabular-nums}
.ctc-bar{grid-column:1/-1;position:relative;height:12px;border-radius:99px;background:var(--line);overflow:hidden;display:flex}
.ctc-bar i{display:block;height:100%;background:var(--tone);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.ctc-fill-a{width:var(--share,50%)}
.ctc-fill-b{flex:1;opacity:.55}
.ctc-mid{position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--ink);opacity:.85}
.ctc-spark{position:absolute;top:0;bottom:0;left:var(--share,50%);width:16px;margin-left:-8px;background:radial-gradient(closest-side,#fff,transparent);mix-blend-mode:overlay;animation:ctc-throb 1.4s ease-in-out infinite;transition:left 1.4s cubic-bezier(.2,.8,.2,1)}
.ctc-lead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font:12px/1.3 var(--mono);color:var(--ink)}
.ctc-badge{font:700 10.5px/1 var(--mono);letter-spacing:.12em;padding:4px 6px;border-radius:3px;color:var(--bg);background:var(--acid);animation:ctc-blink 1.6s steps(2,jump-none) infinite}

/* stats */
.ctc-stats{display:grid;grid-template-columns:auto 1fr;gap:12px;border-top:1px dashed var(--line);padding-top:8px}
.ctc-stat{display:grid;gap:2px;align-content:start;min-width:0}
.ctc-stat small{font:10.5px var(--mono);letter-spacing:.12em;color:var(--muted)}
.ctc-stat b{font:600 13px/1.25 var(--sans)}
.ctc-left b{font:700 18px/1.1 var(--mono);color:var(--acid)}
.ctc-need-bar{position:relative;height:6px;margin-top:3px;border-radius:99px;background:var(--line);overflow:visible}
.ctc-need-bar[hidden]{display:none}
.ctc-need-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--need,50%);max-width:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--acid) 30%,transparent),var(--acid));transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.ctc-need-bar em{position:absolute;top:-3px;bottom:-3px;left:var(--now,50%);width:2px;background:var(--ink);transition:left 1.2s}

/* estimate gauge */
.ctc-est{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center}
.ctc-est[hidden]{display:none}
.ctc-gauge{width:96px;height:53px;overflow:visible}
.ctc-gauge path{fill:none;stroke-width:9;stroke-linecap:butt}
.ctc-arc-b{stroke:var(--tone,var(--muted));opacity:.4}
.ctc-arc-a{stroke:var(--tone,var(--acid));transition:stroke-dasharray 1.4s cubic-bezier(.2,.8,.2,1)}
.ctc-needle{transform-origin:60px 60px;transform:rotate(calc((var(--hold,.5) - .5) * 180deg));transition:transform 1.6s cubic-bezier(.3,1.4,.4,1)}
.ctc-needle line{stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;animation:ctc-sway 2.8s ease-in-out infinite}
.ctc-needle line{transform-origin:60px 60px}
.ctc-needle circle{fill:var(--ink)}
.ctc-est-text{display:grid;gap:2px;min-width:0}
.ctc-est-text .micro{font-size:10.5px}
.ctc-est-text b{font:600 13px/1.25 var(--sans)}
.ctc-est-text span{font-size:11px;color:var(--muted);line-height:1.3}

/* trend */
.ctc-trend{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center}
.ctc-trend[hidden]{display:none}
.ctc-trend .micro{font-size:10.5px}
.ctc-trend svg{grid-row:1/3;grid-column:2;width:100%;height:40px;overflow:visible}
.ctc-trend-note{font:11px/1.2 var(--mono);color:var(--muted)}
.ctc-zero{stroke:var(--line);stroke-dasharray:3 3}
.ctc-line{fill:none;stroke:var(--tone,var(--acid));stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:600;stroke-dashoffset:0;animation:ctc-draw 1.6s ease-out}
.ctc-area{fill:var(--tone,var(--acid));opacity:.13}
.ctc-dot{fill:var(--acid);animation:ctc-dot 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* calls */
.ctc-calls{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font:11px/1.2 var(--mono)}
.ctc-call-us,.ctc-desk,.ctc-desk-link{padding:3px 6px;border:1px solid var(--line);border-radius:3px;color:var(--muted)}
.ctc-call-us.called,.ctc-desk.called{color:var(--bg);background:var(--acid);border-color:var(--acid)}
.ctc-call-desks{display:contents}
.ctc-desk-link{color:var(--acid);text-decoration:none}
.ctc-desk-link:hover{border-color:var(--acid)}

/* recap chips: a tiny tug bar + paging */
#recap-watch:not(.paged) .recap-race:nth-child(n+4){display:none}
#recap-watch.paged .recap-race{display:grid!important}
#recap-watch.paged .recap-race.chip-off{display:none!important}
.recap-race.chip-in{animation:chip-in .55s cubic-bezier(.2,.8,.2,1) both}
.recap-race:nth-child(2).chip-in{animation-delay:.07s}.recap-race:nth-child(3n).chip-in{animation-delay:.14s}
.chip-tug{grid-column:1/-1;display:flex;height:3px;border-radius:99px;overflow:hidden;background:var(--line);position:relative}
.chip-tug i{display:block;height:100%;background:var(--tone)}
.chip-tug i:first-child{width:var(--share,50%);transition:width 1.2s}
.chip-tug i:last-child{flex:1;opacity:.5}
.chip-tug:after{content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:1px;background:var(--ink)}

/* live wire crawl */
.crawl{grid-column:1/-1;display:flex;align-items:center;gap:0;height:24px;margin:0 -12px -8px;border-top:1px solid var(--line);overflow:hidden;font:11px/1 var(--mono);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.crawl[hidden]{display:none}
.crawl-label{flex:none;align-self:stretch;display:flex;align-items:center;gap:6px;padding:0 10px;font-weight:700;letter-spacing:.14em;color:var(--bg);background:var(--acid);z-index:1}
.crawl-label:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bg);animation:ctc-blink 1.2s steps(2,jump-none) infinite}
.crawl-track{display:flex;width:max-content;animation:crawl var(--crawl-dur,60s) linear infinite;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.crawl:hover .crawl-track{animation-play-state:paused}
.crawl-run{display:flex;flex:none}
.crawl-item{display:inline-flex;align-items:center;gap:6px;padding:0 22px 0 0;white-space:nowrap;color:var(--muted)}
.crawl-item b{font-size:10.5px;letter-spacing:.12em;padding:3px 5px;border-radius:2px;border:1px solid currentColor}
.crawl-close b{color:var(--acid)}
.crawl-call b{color:var(--ink)}
.crawl-item strong{color:var(--ink);font-weight:700}
.crawl-item:after{content:"◆";margin-left:22px;color:var(--line)}
@media(min-width:760px){
  .tv-mode:has(#crawl:not([hidden])){--recap-height:calc(clamp(67px,8.6vh,112px) + 24px)}
  .tv-mode .crawl{height:24px}
  .tv-mode #close-races{display:none}
  .tv-mode .ctc-in-detail{margin-top:6px;gap:6px;padding:8px 10px}
}
@media(max-width:1250px){.crawl{margin:0 -7px -8px}}
@media(max-width:759px){.crawl{grid-row:3}.close-races{margin-top:24px}.close-meta{justify-content:flex-start;text-align:left}.ctc-name{font-size:20px}}

/* explorer rows whose count just moved */
.race-row.tick-flash{animation:tick-flash 2.2s ease-out}
.roll-flash{animation:roll-flash 1.4s ease-out}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.reveal-in{opacity:1;transform:none;transition:opacity .8s ease-out,transform .9s cubic-bezier(.2,.8,.2,1)}

/* ambient drift behind everything */
body:before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(40% 35% at 20% 30%,color-mix(in srgb,var(--dem) 9%,transparent),transparent 70%),radial-gradient(35% 30% at 80% 70%,color-mix(in srgb,var(--rep) 8%,transparent),transparent 70%),radial-gradient(30% 30% at 60% 20%,color-mix(in srgb,var(--acid) 7%,transparent),transparent 70%);animation:drift 38s ease-in-out infinite alternate}

@keyframes ctc-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acid) 60%,transparent)}80%,100%{box-shadow:0 0 0 10px transparent}}
@keyframes ctc-sheen{0%,62%{background-position:-150% 0}100%{background-position:250% 0}}
@keyframes ctc-enter{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes ctc-bump{0%{box-shadow:inset 0 0 0 2px var(--acid),0 0 26px color-mix(in srgb,var(--acid) 40%,transparent)}100%{box-shadow:none}}
@keyframes ctc-throb{50%{opacity:.25}}
@keyframes ctc-blink{50%{opacity:.35}}
@keyframes ctc-sway{0%,100%{transform:rotate(calc(var(--sway,3deg) * -1))}50%{transform:rotate(var(--sway,3deg))}}
@keyframes ctc-draw{from{stroke-dashoffset:600}}
@keyframes ctc-dot{50%{transform:scale(1.7);opacity:.6}}
@keyframes chip-in{from{opacity:0;transform:translateY(8px)}}
@keyframes crawl{to{transform:translateX(-50%)}}
@keyframes tick-flash{0%{background:color-mix(in srgb,var(--acid) 22%,transparent)}100%{background:transparent}}
@keyframes roll-flash{0%{color:var(--acid);text-shadow:0 0 12px var(--acid)}100%{text-shadow:none}}
@keyframes drift{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(4%,-3%,0) rotate(4deg)}100%{transform:translate3d(-3%,4%,0) rotate(-3deg)}}

@media(prefers-reduced-motion:reduce){
  .ctc:before,.ctc-spark,.close-live,.ctc-badge,.crawl-label:before,body:before{animation:none!important}
  .crawl-track{animation:none!important;overflow-x:auto}
  .crawl{overflow-x:auto}
  .crawl-run[aria-hidden]{display:none}
  .reveal{opacity:1;transform:none}
}