/* Shared results styles (number tiles, tables, comparison chart). Pages override the color variables. */
:root {
  --bg:#f4f5f7; --card:#fff; --card-line:#e3e6ea; --head:#f7f8fa; --ink:#1f2933; --mute:#6b7785; --line:#eceef1;
  --track:#e6e9ed; --pill:#eef1f4; --bar:#2d7ff9; --ok:#1a8f4c; --err:#c0392b; --surface:#fff; --tipbg:#fff;
}
.meta { color:var(--mute); font-size:12px; }
.meta.err { color:var(--err); }

/* Number tiles */
.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-bottom:14px; }
.field { background:var(--card); border:1px solid var(--card-line); border-radius:16px; padding:12px 14px;
         box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.field label { display:block; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); }
.fv { font-size:22px; font-weight:650; letter-spacing:-.01em; margin:4px 0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fv span { font-size:13px; font-weight:500; color:var(--mute); }
.fp { display:flex; align-items:center; gap:8px; }
.fp small { color:var(--mute); font-size:12px; font-variant-numeric:tabular-nums; min-width:46px; text-align:right; }
.prog { flex:1; height:4px; background:var(--track); border-radius:4px; overflow:hidden; }
.prog i { display:block; height:100%; background:var(--ok); border-radius:4px; }

/* Grid tables */
.tablecard { background:var(--card); border:1px solid var(--card-line); border-radius:16px; overflow:auto; /* wide tables scroll on phones */ }
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mute);
          background:var(--head); padding:9px 12px; border-bottom:1px solid var(--line); }
.tbl td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:0; }
.tbl tbody tr:hover td { background:var(--head); }
.tbl td small { display:block; color:var(--mute); font-size:11px; margin-top:2px; }
.tbl .r { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.numpill { display:inline-block; min-width:28px; padding:2px 6px; border-radius:7px; text-align:center;
           font-weight:700; font-size:12px; color:#fff; background:var(--c, var(--mute)); }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600; background:var(--pill); color:var(--ink); margin-left:4px; }
.pill.ok { background:rgba(32,201,51,.18); }
.pc { min-width:84px; }
.mbar { display:block; height:4px; margin-top:5px; background:var(--track); border-radius:4px; overflow:hidden; }
.mbar i { display:block; height:100%; background:var(--c, var(--bar)); border-radius:4px; }

/* Comparison */
.cmp h3 { margin:0 0 10px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--mute); }
.cmp h3 small { text-transform:none; letter-spacing:0; margin-left:6px; }
.cmp-empty { color:var(--mute); font-size:12px; margin:10px 2px 0; }
.legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin:14px 2px 6px; font-size:12px; color:var(--mute); }
.lk { display:inline-block; width:16px; border-top:2px solid var(--c, var(--mute)); vertical-align:middle; margin-right:6px; }
.lk.dashed { border-top-style:dashed; }
.chart { position:relative; }
.chart svg { display:block; width:100%; height:auto; }
.chart svg text { fill:var(--mute); font-size:10px; font-variant-numeric:tabular-nums; }
.chart .grid { stroke:var(--line); stroke-width:1; }
.chart .ref { fill:none; stroke-width:1.5; stroke-dasharray:5 4; opacity:.85; }
.chart .line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart .dot { stroke:var(--surface); stroke-width:2; }
.chart .xhair { stroke:var(--mute); stroke-width:1; }
.chart .hit { fill:transparent; cursor:crosshair; }
.chart .tip { position:absolute; top:0; pointer-events:none; white-space:nowrap; font-size:12px; padding:7px 10px; border-radius:10px;
              background:var(--tipbg); border:1px solid var(--card-line); box-shadow:0 8px 24px rgba(0,0,0,.25); }
.chart .tip .th { color:var(--mute); margin-bottom:3px; }
.chart .tip small { color:var(--mute); }
.cmp details { margin-top:10px; font-size:12px; }
.cmp summary { cursor:pointer; color:var(--mute); }
.cmp details table { width:100%; border-collapse:collapse; margin-top:6px; font-variant-numeric:tabular-nums; }
.cmp details td, .cmp details th { padding:4px 6px; border-bottom:1px solid var(--line); text-align:right; }
.cmp details td:first-child, .cmp details th:first-child { text-align:left; }

/* Runoff meter (leader's share vs the 50% line) */
.meter { position:relative; height:12px; background:var(--track); border-radius:6px; overflow:hidden; }
.meter i { display:block; height:100%; background:var(--c, var(--bar)); border-radius:6px 0 0 6px; }
.meter .mark { position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--ink); }
.meter-text { margin:8px 2px 0; font-size:13px; }

/* State ranking */
.tbl.rank th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.tbl.rank th.on { color:var(--ink); }
.tbl.rank tbody tr { cursor:pointer; }
.spark { display:block; }
.spark line { stroke:var(--line); stroke-width:1; }
.spark polyline { fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linejoin:round; }

/* "Where the lead comes from": diverging bars around a centre line */
.contrib { display:grid; grid-template-columns:2.4rem 1fr 4.5rem; gap:4px 8px; align-items:center; font-size:12px; font-variant-numeric:tabular-nums; }
.contrib .cbar { position:relative; height:10px; background:linear-gradient(90deg, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)); }
.contrib .cbar i { position:absolute; top:0; bottom:0; border-radius:3px; }
.contrib .cbar i[style*="right"] { transform:none; }
.contrib .r { text-align:right; }
.pill.warn { background:rgba(235,180,0,.22); }
.chart svg circle + text { fill:var(--mute); font-size:9px; }

/* Preview notice (live election not published yet, showing its baseline) */
.meta.preview { color:var(--warn, #b7791f); }