/* Races at a glance (js/glance.js): one compact row per race, above the map.
   Its own file so the strip's rules sit in one place. Tokens from style.css. */

.glance{margin:0 0 12px; padding:8px 14px 10px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow)}
.glance .g-head{display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin-bottom:8px}
.glance h2{font-size:17px; margin:0; letter-spacing:-.01em}
.glance .g-links{margin:0; display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13.5px}
.glance .g-links a{color:var(--highlight); font-weight:600; text-decoration:none}
.glance .g-links a:hover{text-decoration:underline}
.glance .g-sub{margin:-4px 0 8px; font-size:12px; color:var(--subink)}

/* Rows: three columns on a wide screen, two mid-width, one on a phone. */
.g-rows{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:6px 10px}
.g-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 10px; align-items:baseline;
  padding:7px 10px; border:1px solid var(--line); border-radius:9px; cursor:pointer;
  font-size:13px; line-height:1.4; min-width:0; background:var(--panel)}
.g-row:hover{background:var(--soft)}
.g-row:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.g-row.is-current{border-color:var(--highlight); background:rgba(109,40,217,.06)}
.g-office{grid-column:1 / -1; font-weight:700; font-size:13px; color:var(--ink);
  overflow-wrap:anywhere}
.g-body{grid-column:1; color:var(--ink); overflow-wrap:anywhere; min-width:0}
.g-body .badge{margin-left:4px}
.g-margin{grid-column:2; text-align:right; white-space:nowrap; color:var(--ink); font-weight:600}
.g-mp{color:var(--subink); font-weight:400; margin-left:3px}
.g-note{color:var(--subink); font-size:12px}
.g-cand{display:inline; margin-right:6px}
.g-cand .party-chip{margin-left:4px}

/* "nominee" (the strip) / "Democratic nominee" (the panel)
   (the ballot panel): another election's certified result, small and quiet. */
.glance-primary{font-size:12px; color:var(--subink); font-weight:400}
.glance-primary a{color:var(--highlight)}
.g-cand .glance-primary{margin-left:1px}
.ballot-cand .glance-primary{margin-left:auto; text-align:right}

/* Collapsed (glance.js CAP_ROWS): only the in-play rows plus the shown
   contest; "Show all N" sits in the heading line so it costs no extra row. */
.g-more{font:inherit; font-size:13px; font-weight:600; padding:1px 12px; min-height:26px;
  border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--highlight); cursor:pointer}
.g-more:hover{background:var(--soft)}
.g-rows:not(.expanded) .g-cap{display:none}
.glance .g-head .g-sub{margin:0}

/* Phone (single-column explorer): the strip folds to ONE disclosure row,
   "Races at a glance (N)", so the results panel stays near the top. */
.g-toggle{display:none}
@media (max-width:900px){
  .glance{padding:0; margin-bottom:12px; box-shadow:none}
  .glance .g-title{display:none}
  .g-toggle{display:flex; align-items:center; gap:6px; width:100%; min-height:44px; margin:0;
    padding:8px 14px; font:inherit; font-size:15px; font-weight:700; color:var(--ink);
    background:none; border:0; border-radius:12px; cursor:pointer; text-align:left}
  .g-toggle .g-count{color:var(--subink); font-weight:600}
  .g-toggle::after{content:"\25BE"; margin-left:auto; color:var(--highlight); transition:transform .15s}
  .glance.open .g-toggle::after{transform:rotate(180deg)}
  .g-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
  .glance .g-head{margin:0; gap:6px 16px}
  .glance:not(.open) .g-links,.glance:not(.open) .g-sub,.glance:not(.open) .g-rows{display:none}
  .glance.open .g-links,.glance.open .g-sub{padding:0 12px}
  .glance.open .g-rows{padding:0 12px 12px}
  .g-more{min-height:44px; padding:4px 14px}
}
.g-topic{grid-column:1 / -1; font-size:12px; color:var(--subink); margin-top:-2px}