/* panels.css: the live tab's own panel. The archive's panel is not on this page. */
:root{--panel-width:560px;--rail:360px}
.panel > :not(#lv):not(.foot){display:none !important}
#lv{display:block}
#lv-rail,#lv-keys{display:none}
.lv-now{margin:0 0 var(--s3);font:400 var(--fs-crumb)/1.3 var(--face);color:var(--ink2)}
.lv-now b{display:inline-block;margin-right:6px;padding:0 var(--stamp-pad);height:20px;line-height:20px;background:var(--label);color:var(--paper);font-weight:600}
.lv-title{margin:0;font:600 var(--fs-title)/var(--lh-title) var(--face);color:var(--ink)}

.lv-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
.lv-head .lv-title{min-width:0}
.lv-head .lv-place{font-size:26px;line-height:1.15}
.lv-in{flex:none;margin:0;font:400 var(--fs-fact)/1 var(--face);color:var(--ink);font-feature-settings:"lnum" 1}
.lv-in b{font:600 32px/1 var(--face)}

/* the race as two tickets (the party tickets of the 1880s and 1890s, the owner's approved vision): double rules, each party's own; the needle between them */
.lv-tks{display:grid;grid-template-columns:minmax(0,1fr) 172px minmax(0,1fr);column-gap:var(--s3);margin-top:var(--s3)}
.lv-tk{min-width:0;padding:var(--s2) 0;border-top:3px double var(--ink);border-bottom:3px double var(--ink)}
.lv-tk-h{display:flex;justify-content:space-between;align-items:center;min-height:16px;margin:0;font:600 var(--fs-label)/1.2 var(--face);color:var(--ink)}
.lv-tk-h b{padding:0 var(--s1);line-height:16px;font-weight:600;background:var(--label);color:var(--paper)}
.lv-tk-n{margin:var(--s2) 0 0;font:600 26px/1.1 var(--face);overflow-wrap:anywhere}
.lv-tk-s{margin:var(--s2) 0 0;font:600 44px/1 var(--face);color:var(--ink);font-feature-settings:"lnum" 1;white-space:nowrap}
.lv-back{margin-top:var(--s2);margin-left:calc(-1 * var(--stamp-pull))}

/* the race as one bar: Gannett's "Electoral Vote" (Scribner's atlas, 1883), each party on one scale, the majority ruled heavy; what is still to come ruled in diagonal ink, as his key rules the undecided */
.lv-bar{--h:28px;position:relative;display:block;height:var(--h);background:repeating-linear-gradient(135deg,var(--ink) 0 1px,transparent 1px 6px);outline:1px solid var(--ink);outline-offset:-1px;
  font:600 15px/var(--h) var(--face);font-feature-settings:"lnum" 1;color:var(--ink);text-align:left}
.lv-bar.s{--h:19px;font-size:13px}
.lv-bar.xs{--h:15px;font-size:11px}
.lv-bar i{position:absolute;top:0;bottom:0;overflow:hidden;font-style:normal}
.lv-bar .lv-fr{left:0}
.lv-bar .lv-fd{right:0}
.lv-bt{position:absolute;top:0;white-space:nowrap}
.lv-bt.l{left:5px}
.lv-bt.e{right:5px}
.lv-bar > .lv-bt{top:2px;bottom:2px;padding:0 3px;line-height:calc(var(--h) - 4px);background:var(--paper)}
.lv-bar > .lv-bt.l{left:2px}
.lv-bar > .lv-bt.e{right:2px}
.lv-bm{position:absolute;top:2px;bottom:2px;padding:0 5px;transform:translateX(-50%);font-weight:400;line-height:calc(var(--h) - 4px);white-space:nowrap;background:var(--paper)}
.lv-bar b{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1.5px;background:var(--ink)}
.lv-bar u{position:absolute;width:0;height:0;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent}
.lv-bar u.t{top:-6px;border-top:7px solid var(--ink)}
.lv-bar u.n{bottom:-6px;border-bottom:7px solid var(--ink)}
.lv-bar:is(.s,.xs) b{top:0;bottom:0;width:2px;margin-left:-1px}
.lv-bar:is(.s,.xs) u{margin-left:-3px;border-left-width:3px;border-right-width:3px}
.lv-bar:is(.s,.xs) u.t{top:-4px;border-top-width:4px}
.lv-bar:is(.s,.xs) u.n{bottom:-4px;border-bottom-width:4px}
.lv-bar.s u.n{display:none}
.lv-hero{margin-top:var(--s2)}
.lv-cap{position:relative;display:block;height:18px;font:400 var(--fs-label)/18px var(--face);color:var(--ink2);font-feature-settings:"lnum" 1}
.lv-c{position:absolute;white-space:nowrap}
.lv-c.l{transform:translateX(-100%);padding-right:9px}
.lv-c.r{padding-left:9px}
.lv-c0{position:absolute;left:0;display:flex;align-items:center;gap:var(--s1);white-space:nowrap}
.lv-c0 i{display:block;width:10px;height:10px}

/* the needle */
.lv-needle{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.lv-dial{display:block;width:172px;height:94px}
.lv-big{margin:0;font:600 28px/1.1 var(--face);color:var(--ink);font-feature-settings:"lnum" 1}
.lv-needle .lv-big{margin-top:var(--s1);font-size:22px;white-space:nowrap}
.lv-f{margin:var(--s1) 0 0;font:400 var(--fs-label)/1.3 var(--face);color:var(--ink2)}
.lv-off{margin-top:var(--s4)}
/* the count now and where the needle says it ends, small: the tick is now, the dot the final */
.lv-rng{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s1);margin:var(--s1) 0 0;font:600 var(--fs-chip)/18px var(--face);font-feature-settings:"lnum" 1;white-space:nowrap}
.lv-rng em{font-style:normal}
.lv-rng > span:not(.lv-rs){font-weight:400;color:var(--ink2)}
.lv-rng em + span:not(.lv-rs){margin-left:var(--s2)}
.lv-rng em + em{margin-left:var(--s3)}
.lv-rs{position:relative;display:block;flex:1 1 40px;height:12px}
.lv-rs i{position:absolute;top:5px;height:2px;background:var(--ink)}
.lv-rs b{position:absolute;top:0;bottom:0;width:1px;background:var(--ink)}
.lv-rs s{position:absolute;top:1px;bottom:1px;width:3px;margin-left:-1.5px;background:var(--ink)}
.lv-rs u{position:absolute;top:2px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--ink)}

/* the key: the map's own chips, on one line */
.lv-key{margin-top:var(--s4)}
.lv-key .lv-f{margin:0}
.lv-ke,.lv-kc{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:2px}
.lv-ke i{font:400 var(--fs-edge)/18px var(--face);font-style:normal;text-align:center;white-space:nowrap;color:var(--muted);font-feature-settings:"lnum" 1}
.lv-kc .ch{display:flex;align-items:center;justify-content:center;height:24px;padding:0;border:0;font:600 var(--fs-chip)/1 var(--face);font-feature-settings:"lnum" 1}
.lv-kc button.ch{cursor:pointer}
.lv-kc .ch.pick{outline:2px solid var(--ink);outline-offset:-2px}

/* every race: a ladder of bars */
.lv-board{margin-top:var(--s4);display:grid;row-gap:6px}
.lv-b{display:grid;grid-template-columns:172px minmax(0,1fr);align-items:center;column-gap:var(--s2);width:100%;padding:0;margin:0;background:none;border:0;
  font:600 var(--fs-crumb)/20px var(--face);color:var(--ink);text-align:left;cursor:pointer}
.lv-b-o{justify-self:start;padding:0 var(--stamp-pad);margin-left:calc(-1 * var(--stamp-pad));white-space:nowrap}
.lv-b-o i{display:inline-block;width:10px;height:10px;margin-right:var(--s1)}
.lv-b.on .lv-b-o{background:var(--label);outline:1.2px solid var(--ink);outline-offset:1px;color:var(--paper)}
/* each row opens: what was expected and what is in, or the seats */
.lv-br{display:grid;grid-template-columns:minmax(0,1fr) 22px;align-items:center;column-gap:var(--s1)}
.lv-x{width:22px;height:22px;padding:0;background:none;border:0;font:600 19px/22px var(--face);color:var(--ink);text-align:center;cursor:pointer}
.lv-xp{display:grid;row-gap:6px;padding:0 calc(22px + var(--s1)) var(--s2) 0}
.lv-xr{display:grid;grid-template-columns:172px minmax(0,1fr);align-items:center;column-gap:var(--s2)}
.lv-xl{font:400 var(--fs-label)/19px var(--face);color:var(--ink2);text-align:right}
.lv-xp > :is(.lv-f,.lv-rng){margin:0 0 0 calc(172px + var(--s2))}
.lv-seats{padding:var(--s1) calc(22px + var(--s1)) var(--s3) 0}
/* local races, under courts and specials: a county's own ballot */
.lv-lc-f{margin:0}
.lv-lc-c{padding-left:var(--s2)}
.lv-lc-c .lv-b{font-weight:400}
.lv-lc{padding:var(--s1) calc(22px + var(--s1)) var(--s1) var(--s2)}
.lv-lc-t{margin:0 0 2px;font:600 var(--fs-label)/1.3 var(--face);color:var(--ink)}
.lv-lc-t span{font-weight:400;color:var(--ink2)}
.lv-lc-r{display:grid;grid-template-columns:minmax(0,1fr) 40px 62px;column-gap:var(--s1);margin-bottom:2px;font:400 var(--fs-label)/16px var(--face);color:var(--ink);font-feature-settings:"lnum" 1}
.lv-lc-r > span:not(.lv-lc-n){text-align:right}
.lv-lc-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-lc-n i{display:inline-block;width:8px;height:8px;margin-right:5px}
.lv-lc-r .lv-st{grid-column:1 / -1;display:flex;height:3px}
.lv-seat,.lv-seat-h{display:grid;grid-template-columns:44px minmax(0,1fr) 150px 76px 44px;align-items:center;column-gap:var(--s2);width:100%}
.lv-seat{padding:0;margin:0 0 7px;background:none;border:0;font:400 var(--fs-label)/16px var(--face);color:var(--ink);text-align:left;font-feature-settings:"lnum" 1;cursor:pointer}
.lv-seat-n{grid-column:1;font-weight:600;white-space:nowrap}
.lv-seat-w{grid-column:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-seat-e{grid-column:4;font-weight:600;text-align:right;white-space:nowrap}
.lv-seat-a{grid-column:5;font-weight:600;text-align:right;white-space:nowrap}
.lv-seat-h{margin-bottom:var(--s2);font:400 var(--fs-label)/16px var(--face);color:var(--ink2)}
.lv-seat-h > :first-child{grid-column:1 / span 3}
.lv-seat-h > :not(:first-child){text-align:right}
.lv-seats .lv-wr{margin-top:var(--s2)}

/* the words */
.lv-words{margin-top:var(--s4);display:grid;row-gap:var(--stamp-gap)}
.lv-wr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--stamp-gap);margin-left:calc(-1 * var(--stamp-pull))}
:is(#lv,#lv-rail,#lv-keys) .iw{position:relative;height:var(--stamp-h);padding:0 var(--stamp-pad);background:none;border:0;color:var(--ink2);font:400 var(--fs-index)/var(--stamp-h) var(--face);white-space:nowrap;cursor:pointer}
:is(#lv,#lv-rail,#lv-keys) .iw:hover{color:var(--ink)}
:is(#lv,#lv-rail,#lv-keys) .iw.on{background:var(--label);outline:1.2px solid var(--ink);outline-offset:2.2px;color:var(--paper)}

/* the small panels: ladders */
.lv-h{margin:var(--s6) 0 var(--s3);font:600 var(--fs-section)/1.15 var(--face);color:var(--ink);font-feature-settings:"lnum" 1}
.lv-h span{float:right}
.lv-l{margin:0 0 var(--s1);font:600 var(--fs-name)/1.2 var(--face);color:var(--ink)}
.lv-2{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}
.lv-cell{min-width:0}
.lv-lad{display:grid;grid-template-columns:128px minmax(0,1fr) 72px;align-items:center;column-gap:var(--s2);margin-bottom:var(--s3);font:400 var(--fs-crumb)/20px var(--face);color:var(--ink);font-feature-settings:"lnum" 1}
.lv-lad-o{grid-column:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-lad > :is(.lv-bar,.lv-st):first-of-type{grid-column:2}
.lv-lad-n{grid-column:3;font-weight:600;text-align:right;white-space:nowrap}
.lv-lad-v{grid-column:3;grid-row:2;justify-self:end;text-align:right;white-space:nowrap;font-size:var(--fs-label);line-height:14px;color:var(--ink2)}
.lv-lad .lv-st{grid-column:2;display:flex;height:6px}
.lv-lad-n + .lv-st{grid-row:2;margin-top:1px}
.lv-lad .lv-st.lv-dbl{height:14px}
.lv-st i{display:block;height:100%;background:var(--ink)}
.lv-st u{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--ink) 0 1px,transparent 1px 5px);outline:1px solid var(--ink);outline-offset:-1px}
.lv-lad-g{grid-column:2;grid-row:2;display:block;height:6px;margin-top:1px}
.lv-lad-g i{display:block;height:100%;background:var(--ink)}
.lv-lad.x{grid-template-columns:58px minmax(0,1fr) 36px 278px;margin-bottom:6px;font-size:var(--fs-label);line-height:15px}
.lv-lad.x .lv-lad-o{font-weight:400}
.lv-lad.x .lv-lad-v{grid-row:auto;line-height:15px}
.lv-go{width:100%;padding:0;background:none;border:0;text-align:left;cursor:pointer}
.lv-go .lv-lad-o{justify-self:start;max-width:none;overflow:visible;padding:0 var(--stamp-pad);margin-left:calc(-1 * var(--stamp-pad))}
.lv-go.on .lv-lad-o{background:var(--label);outline:1.2px solid var(--ink);outline-offset:1px;color:var(--paper)}
/* the years: the map's band colours on chips, in one line under the row, or beside it among the adults */
.lv-yrs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:2px;min-width:0;font:600 var(--fs-edge)/16px var(--face);font-feature-settings:"lnum" 1}
.lv-yrs.lv-y7{grid-template-columns:minmax(0,1.35fr) repeat(6,minmax(0,1fr))}
.lv-yrs i{display:block;height:16px;font-style:normal;text-align:center;white-space:nowrap;overflow:hidden}
.lv-yrs .lv-y0{background:repeating-linear-gradient(135deg,var(--ink) 0 1px,transparent 1px 5px);outline:1px solid var(--ink);outline-offset:-1px}
.lv-yh i{font-weight:400;color:var(--muted)}
.lv-lad > .lv-yrs{grid-column:2 / -1;margin-top:2px}
.lv-lad.x > .lv-yrs{grid-column:4;margin-top:0}
.lv-lad.lv-yl{margin-bottom:var(--s1)}
.lv-lad.x.lv-yl{align-items:end;margin-bottom:3px}
.lv-yl .lv-l{grid-column:1 / span 3;margin:0}
.lv-past{margin:0 0 var(--s3)}
.lv-lad.lv-lf{grid-template-columns:minmax(0,1fr) 40px 62px 46px 38px 42px 44px;column-gap:4px;row-gap:2px;margin-bottom:7px;font-size:var(--fs-label);line-height:16px}
.lv-lad.lv-lf .lv-lad-o{justify-self:stretch;max-width:none;overflow:hidden;padding:0;margin:0}
.lv-lf-n{text-align:right;white-space:nowrap}
.lv-lf-b{font-weight:600}
.lv-lad.lv-lf .lv-st.lv-dbl{grid-column:1 / -1;height:5px;margin-top:0}
.lv-lad.lv-lf.lv-lf-h{margin-bottom:var(--s1);color:var(--ink2)}
.lv-h .lv-x{margin-left:var(--s1);vertical-align:-1px}
.lv-more{margin-top:var(--s2)}
/* a wide screen: the ladder and the votes left stand left of the map, on the phone's stacked rows; the map keeps the middle */
@media (min-width:1280px){
  .main{grid-template-columns:var(--rail) minmax(0,1fr) var(--panel-width)}
  #lv-rail{display:block;overflow:auto;min-height:0;padding:var(--s6) var(--s4) var(--s7) var(--pad)}
  #lv-rail .lv-board{margin-top:0;row-gap:8px}
  #lv-rail .lv-b{grid-template-columns:minmax(0,1fr);row-gap:3px}
  #lv-rail .lv-br{align-items:end}
  #lv-rail .lv-xr{grid-template-columns:54px minmax(0,1fr)}
  #lv-rail .lv-xl{text-align:left}
  #lv-rail :is(.lv-xp,.lv-seats){padding-right:0}
  #lv-rail .lv-xp > :is(.lv-f,.lv-rng){margin-left:0}
  #lv-rail :is(.lv-seat,.lv-seat-h){grid-template-columns:44px minmax(0,1fr) 76px 44px}
  #lv-rail .lv-seat{margin-bottom:var(--s3);row-gap:3px}
  #lv-rail .lv-seat .lv-bar{grid-row:2;grid-column:1 / -1}
  #lv-rail .lv-seat-e{grid-column:3;grid-row:1}
  #lv-rail .lv-seat-a{grid-column:4;grid-row:1}
  #lv-rail .lv-seat-h > :first-child{grid-column:1 / span 2}
  /* the key and the words, smaller, in the map's bottom left corner on a ground of their own, as a printed map's legend */
  #lv-keys{display:block;position:absolute;left:calc(var(--s5) - 8px);bottom:calc(var(--s5) + 26px);z-index:3;width:364px;padding:8px;background:var(--paper);
    --stamp-h:19px;--stamp-pad:8px;--stamp-pull:4px;--stamp-gap:4px;--fs-index:11.5px;--fs-label:11px;--fs-edge:10.5px;--fs-chip:10.5px}
  #lv-keys .lv-key{margin-top:0}
  #lv-keys .lv-ke i{line-height:14px}
  #lv-keys .lv-kc .ch{height:18px}
  #lv-keys .lv-words{margin-top:var(--s2);row-gap:5px}
  .stage.dark #lv-keys{background:var(--dark-ground)}
  .stage.dark #lv-keys :is(.lv-f,.lv-ke i,.iw:not(.on)){color:var(--paper)}
  .stage.dark #lv-keys .iw.on{background:var(--paper);color:var(--ink);outline-color:var(--paper)}
}
@media (max-width:899.98px){
  .lv-tks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lv-needle{grid-column:1 / -1;grid-row:2;margin-top:var(--s3)}
  .lv-tk-s{font-size:34px}
  .lv-tk-n{font-size:22px}
  .lv-big{font-size:24px}
  .lv-b{grid-template-columns:minmax(0,1fr);row-gap:3px}
  .lv-br{align-items:end}
  .lv-board{row-gap:8px}
  .lv-xr{grid-template-columns:54px minmax(0,1fr)}
  .lv-xl{text-align:left}
  .lv-xp{padding-right:0}
  .lv-xp > :is(.lv-f,.lv-rng){margin-left:0}
  .lv-seats{padding-right:0}
  .lv-seat,.lv-seat-h{grid-template-columns:44px minmax(0,1fr) 76px 44px}
  .lv-seat{margin-bottom:var(--s3);row-gap:3px}
  .lv-seat .lv-bar{grid-row:2;grid-column:1 / -1}
  .lv-seat-e{grid-column:3;grid-row:1}
  .lv-seat-a{grid-column:4;grid-row:1}
  .lv-seat-h > :first-child{grid-column:1 / span 2}
  .lv-lad.x{grid-template-columns:62px minmax(0,1fr) 40px;margin-bottom:var(--s2)}
  .lv-lad.x > .lv-yrs{grid-column:1 / -1;margin-top:2px}
  .lv-lad.x.lv-yl{grid-template-columns:minmax(0,1fr);margin-bottom:var(--s1)}
  .lv-yl .lv-l{grid-column:1}
  .lv-lad{grid-template-columns:104px minmax(0,1fr) 62px}
  .lv-lad.lv-nd{grid-template-columns:118px minmax(0,1fr) 62px}
  .lv-2{grid-template-columns:minmax(0,1fr)}
  .lv-title{font-size:32px}
  .lv-head .lv-place{font-size:24px}
}
#tip .tn0 .ruled{display:none}
#tip .tb{display:block;margin:8px 0 9px}
#tip table+table{margin-top:9px}

/* the page's own size on a computer is what 85% in the browser shows */
/* the map keeps its true pixels, so a pointer lands where it should; everything around it takes the scale */
@media (min-width:900px){
  :root{--bar:96px;--tabs:31px}
  .bar,.tabs,#lv,#lv-rail,#lv-keys,#tip,#crumb{zoom:.85}
  .bar{height:calc(var(--bar) / .85)}
  .tabs{height:calc(var(--tabs) / .85)}
}
@media (min-width:900px) and (max-width:1439.98px){:root{--bar:128px}}
@media (min-width:1280px){:root{--rail:360px;--panel-width:476px}}
/* by share of the vote in */
.lv-ib{display:grid;grid-template-columns:34px 38px minmax(0,1fr) 42px 278px;column-gap:6px;align-items:center;margin-bottom:6px;font-size:var(--fs-label);line-height:16px}
.lv-ib-h{margin-bottom:var(--s1);color:var(--ink2)}
@media (max-width:899.98px){
  .lv-ib{grid-template-columns:38px 44px minmax(0,1fr) 46px}
  .lv-ib > .lv-yrs,.lv-ib-h > :last-child{grid-column:1 / -1;margin-top:2px}
}