/* Leadership Now design system, matching the Midterm-Analysis site: Proxima Nova, paper page, white cards with hairline
   borders, square corners. Accents come from the LN mark: its red-to-blue gradient for thin rules only, its purple midpoint for fills.
   Light is the default; the jump nav has a dark-mode switch for a dim room. */
@font-face { font-family: "Proxima Nova"; src: url("/fonts/proxima-nova-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Proxima Nova"; src: url("/fonts/proxima-nova-600.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Proxima Nova"; src: url("/fonts/proxima-nova-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Proxima Nova"; src: url("/fonts/proxima-nova-800.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
:root {
  --mark: #85458C; --mark-dark: #6E3875; --mark-rule: linear-gradient(90deg, #EE202A, #85458C, #1B6AEF); --ink: #1F2024; --navy-deep: #092B5F; --navy-mid: #3260A9;
  --bg: #F7F6F2; --surface: #FFFFFF; --surface-2: #F3F3F3; --line: #D1D2D6;
  --fg: #1F2024; --fg-2: #565862; --fg-3: #565862;
  --accent: #092B5F; --accent-soft: #F3EEF6; --focus: #3260A9;
  --dem: #2468C5; --gop: #B8322A; --ind: #6A47A8; --und: #BFBFBF;
  --dem-soft: #E6EEF9; --gop-soft: #F7E6E4; --ind-soft: #EDE8F5;
  --good: #2F7D5B; --good-soft: #E3F0EA; --bad: #B33A3A; --bad-soft: #F7E6E6;
  --warn: #8A5F00; --warn-soft: #FFF1D6;
  --pressed-bg: #092B5F; --pressed-fg: #FFFFFF;
  --display: "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --body: "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --mono: "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #16171B; --surface: #1F2024; --surface-2: #2A2B31; --line: #3A3C44;
  --fg: #F3F3F3; --fg-2: #D1D2D6; --fg-3: #BFBFBF;
  --accent: #D3B5DA; --accent-soft: #33243A; --focus: #D3B5DA;
  --dem: #7AA7EE; --gop: #EF8278; --ind: #B39BE8; --und: #4A4C55;
  --dem-soft: #1B2A47; --gop-soft: #452320; --ind-soft: #2E2548;
  --good: #5FCF8F; --good-soft: #163626; --bad: #F08A82; --bad-soft: #4A1F1C;
  --warn: #F0C35A; --warn-soft: #3D3110;
  --pressed-bg: #D3B5DA; --pressed-fg: #1F2024;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 15px; line-height: 1.45; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Status bar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 16px; padding-block: 10px; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.brand .sub { color: var(--fg-3); font-size: 13px; }
.feed { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: 0; background: var(--und); flex: none; }
.dot.live { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.dot.stale { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.dot.off { background: var(--fg-3); }
.dot.down { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.feed.alert { color: var(--bad); font-weight: 600; }
.feed .num { font-size: 12.5px; }

main { padding-block: 20px 56px; display: grid; gap: 28px; }
main > section { min-width: 0; }
section > header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
section > header h2 { font-size: 17px; font-weight: 700; }
section > header .meta { color: var(--fg-3); font-size: 13px; }
.eyebrow { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }

/* Watch clock */
.clock { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.clockbox { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; display: grid; gap: 4px; }
.clockbox .big { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.clockbox .k { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); font-family: var(--display); font-weight: 700; }
.clockbox .s { font-size: 13px; color: var(--fg-2); }
.clockbox.next { border-color: var(--accent); }
.clockbox.next .big { color: var(--accent); }
.timeline { display: grid; gap: 4px; }
.tl { display: grid; grid-template-columns: 76px 84px 1fr auto; gap: 10px; align-items: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); font-size: 13px; min-width: 0; }
.tl .when { font-family: var(--mono); font-size: 12px; color: var(--fg-2); }
.tl .in { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); }
.tl .what { min-width: 0; } .tl .what b { font-family: var(--display); font-size: 13px; }
.tl .what small { color: var(--fg-3); display: block; }
.tl .val { font-family: var(--mono); font-size: 12px; white-space: nowrap; color: var(--fg-2); }
.tl.now { border-color: var(--accent); background: var(--accent-soft); }
.tl.now .in { color: var(--accent); font-weight: 600; }
.tl.yes { border-color: var(--good); } .tl.yes .val { color: var(--good); font-weight: 600; }
.tl.no { border-color: var(--bad); } .tl.no .val { color: var(--bad); font-weight: 600; }
.tl.past { opacity: 0.6; }
.tl[data-detail] { cursor: pointer; }
.tlmore { margin-top: 6px; }
@media (max-width: 600px) { .tl { grid-template-columns: 64px 1fr; row-gap: 3px; } .tl .in { grid-column: 2; } .tl .what, .tl .val { grid-column: 1 / -1; } .tl .val { white-space: normal; } }

/* Balance of power */
.bop { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.chamber { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 14px 16px; display: grid; gap: 10px; }
.chamber .row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chamber h3 { font-size: 15px; font-weight: 700; }
.chamber .towin { color: var(--fg-3); font-size: 12.5px; }
.bar { position: relative; height: 22px; background: var(--und); border-radius: 0; overflow: hidden; display: flex; }
.bar .seg { height: 100%; }
.bar .seg.dem { background: var(--dem); }
.bar .seg.gop { background: var(--gop); margin-left: auto; }
.bar .seg.ind { background: var(--ind); }
.bar .mid { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px; background: var(--surface); }
.tally { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tally .side { display: flex; flex-direction: column; }
.tally .big { font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tally .lbl { font-size: 12px; color: var(--fg-3); }
.tally .dem .big { color: var(--dem); }
.tally .gop .big { color: var(--gop); }
.tally .mid-lbl { text-align: center; font-size: 12.5px; color: var(--fg-2); }
.flips { font-size: 12.5px; color: var(--fg-2); display: flex; gap: 12px; flex-wrap: wrap; }

/* Environment */
.env { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .env { grid-template-columns: 1fr; } }
.envbox { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; display: grid; gap: 10px; }
.envbox .eyebrow { display: flex; justify-content: space-between; gap: 8px; }
.envbox .eyebrow small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; align-content: start; }
.stat .v.txt { font-size: 15px; line-height: 1.2; }
.stat { display: grid; gap: 2px; padding: 8px 10px; border-radius: 0; background: var(--surface-2); }
.stat .v { font-family: var(--display); font-size: 21px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat .v.dem { color: var(--dem); } .stat .v.gop { color: var(--gop); }
.stat .k { font-size: 11.5px; color: var(--fg-3); }
.stat .s { font-size: 11px; color: var(--fg-3); }
.envbox p { margin: 0; font-size: 13px; color: var(--fg-2); }
.desk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.desk .pm { font-family: var(--mono); }
.pill.called { background: var(--good-soft); color: var(--good); }
.pill.likely { background: var(--dem-soft); color: var(--dem); }
.pill.lean { background: var(--accent-soft); color: var(--accent); }
.pill.early { background: var(--surface-2); color: var(--fg-3); }
.pill.close { background: var(--surface-2); color: var(--fg); }
.pill.called.GOP, .pill.likely.GOP { background: var(--gop-soft); color: var(--gop); }
.pill.called.DEM, .pill.likely.DEM { background: var(--dem-soft); color: var(--dem); }
.pill.called.IND, .pill.likely.IND { background: var(--ind-soft); color: var(--ind); }
td.upd { font-family: var(--mono); font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.card .mech { font-size: 12px; color: var(--fg-3); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* Fixed box so every tag is the same height whatever its font weight or style */
.tag { display: inline-flex; align-items: center; box-sizing: border-box; height: 20px; line-height: 1; font-size: 11px; padding: 0 7px; border-radius: 0; background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--line); white-space: nowrap; }
.tag.lnp { font-weight: 600; background: var(--mark); color: #fff; border-color: var(--mark); }
/* Forecast tier: deep blue (Strongly favored) to deep red (Uphill fight) */
.tag.fc { font-weight: 600; border-color: transparent; }
.tag.fc-d3 { background: var(--dem); color: #fff; }
.tag.fc-d1 { background: var(--dem-soft); color: var(--dem); }
.tag.fc-tu { background: var(--surface-2); color: var(--fg); border-color: var(--line); }
.tag.fc-r1 { background: var(--gop-soft); color: var(--gop); }
.tag.fc-r3 { background: var(--gop); color: #fff; }
.tag.mech, .card .tag.mech { font-style: italic; font-size: 11px; }
.expect, .deskline { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12.5px; }
.expect .k, .deskline .k { color: var(--fg-3); }
.expect .s { color: var(--fg-3); font-size: 11.5px; }
.expect .num { font-weight: 600; }
.cardactions { display: flex; gap: 6px; flex-wrap: wrap; }
.legend { display: grid; gap: 4px; font-size: 12.5px; color: var(--fg-2); margin-bottom: 14px; max-width: 110ch; }
.legend b { color: var(--fg); }
.legend .pill { font-size: 10.5px; padding: 0 6px; }
tr[data-detail] { cursor: pointer; }
tr[data-detail]:hover td { background: var(--surface-2); }
/* Detail sheet */
.overlay { position: fixed; inset: 0; background: rgba(10,12,18,0.55); z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: auto; }
.overlay[hidden] { display: none; }
.sheet { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 0; width: min(960px, 100%); max-height: calc(100% - 8px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.sheethead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.sheethead h2 { font-size: 18px; }
.sheetbody { padding: 16px 18px 22px; display: grid; gap: 18px; }
.dsec { display: grid; gap: 8px; }
.dsec h3 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.dstat { background: var(--surface-2); border-radius: 0; padding: 8px 10px; display: grid; gap: 2px; }
.dstat .v { font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dstat .v.sm { font-size: 15px; }
.dstat .k { font-size: 11.5px; color: var(--fg-3); }
.dtab { min-width: 0; }
.dtab td, .dtab th { padding: 6px 8px; }
.dwhy { font-size: 13.5px; color: var(--fg-2); max-width: 80ch; }
.dmkt { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.dmkt .margin { font-weight: 800; font-variant-numeric: tabular-nums; }
.dmkt-bop { margin-top: 4px; }
.dmkt-bop .margin { font-weight: 700; font-variant-numeric: tabular-nums; }
.dsheet-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.small { font-size: 12px; padding: 4px 9px; }
.ctywrap { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 0; margin-top: 6px; }
.ctytab { min-width: 0; font-size: 12px; }
.ctytab th, .ctytab td { padding: 4px 7px; white-space: nowrap; }
.ctytab tr.bell td:first-child { color: var(--accent); font-weight: 600; }

/* Slate */
.scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; display: grid; gap: 2px; }
.tile .v { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tile .k { font-size: 12px; color: var(--fg-3); }
.tile.won .v { color: var(--good); } .tile.lost .v { color: var(--bad); }
.tile.leading .v { color: var(--dem); } .tile.trailing .v { color: var(--gop); }
.group { margin-top: 18px; }
.group .eyebrow { margin-bottom: 8px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; display: grid; gap: 8px; border-top-width: 3px; border-top-color: var(--und); min-width: 0; }
.cty { min-width: 0; }
.card.won { border-top-color: var(--good); } .card.lost { border-top-color: var(--bad); }
.card.leading { border-top-color: var(--dem); } .card.trailing { border-top-color: var(--gop); }
.card.runoff { border-top-color: var(--warn); }
.card .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card .who { display: grid; gap: 1px; min-width: 0; }
.card .name { font-family: var(--display); font-weight: 700; font-size: 15px; }
.card .race { font-size: 12.5px; color: var(--fg-3); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 0; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--fg-2); flex: none; }
.pill.won { background: var(--good-soft); color: var(--good); }
.pill.lost { background: var(--bad-soft); color: var(--bad); }
.pill.leading { background: var(--dem-soft); color: var(--dem); }
.pill.trailing { background: var(--gop-soft); color: var(--gop); }
.pill.runoff { background: var(--warn-soft); color: var(--warn); }
.pill.pending { background: var(--surface-2); color: var(--fg-3); }
.vs { display: grid; gap: 4px; font-size: 13px; }
.vs .c { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 8px; }
.vs .sw { width: 10px; height: 10px; border-radius: 0; background: var(--und); }
.sw.DEM { background: var(--dem); } .sw.GOP { background: var(--gop); } .sw.IND, .sw.NP, .sw.OTH, .sw.LIB, .sw.GRN { background: var(--ind); }
.vs .cn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs .cn.ours { font-weight: 600; }
.vs .pc { font-family: var(--mono); font-size: 13px; }
.vs .vt { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); }
.card .foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--fg-3); flex-wrap: wrap; }
.card .foot .note { font-style: italic; }
.rep { height: 4px; background: var(--surface-2); border-radius: 0; overflow: hidden; }
.rep i { display: block; height: 100%; background: var(--fg-3); }
.manual-ctl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.manual-ctl select { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--fg); }

/* Early tells */
.tellsgrid { display: grid; grid-template-columns: 90px repeat(4, 1fr); gap: 4px; min-width: 0; }
@media (max-width: 860px) { .tellsgrid { grid-template-columns: 70px repeat(4, minmax(120px, 1fr)); overflow-x: auto; } #tells { overflow-x: auto; } }
.tellhead { font-family: var(--display); font-weight: 700; font-size: 13px; padding: 8px 10px; border-radius: 0; display: grid; gap: 2px; }
.tellhead small { font-weight: 500; font-family: var(--body); font-size: 11px; opacity: 0.85; }
.tellhead.rip { background: var(--gop-soft); color: var(--gop); }
.tellhead.tide { background: var(--dem-soft); color: var(--dem); }
.tellhead.wave { background: var(--dem); color: #fff; }
.tellhead.tsu { background: var(--navy-deep); color: #fff; }
:root[data-theme="dark"] .tellhead.tsu { background: #2C4F8F; }
.tellt { padding: 8px 6px; display: grid; gap: 2px; align-content: start; border-top: 1px solid var(--line); }
.tellt b { font-family: var(--display); font-size: 13px; } .tellt small { font-size: 10.5px; color: var(--fg-3); line-height: 1.2; }
.tellcell { padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; border-top: 1px solid var(--line); background: var(--surface); }
.tellcell.rip { background: color-mix(in srgb, var(--gop-soft) 35%, var(--surface)); }
.tellcell.tide { background: color-mix(in srgb, var(--dem-soft) 35%, var(--surface)); }
.tellcell.wave { background: color-mix(in srgb, var(--dem-soft) 60%, var(--surface)); }
.tellcell.tsu { background: color-mix(in srgb, var(--dem-soft) 85%, var(--surface)); }
.tell { display: inline-grid; grid-template-columns: auto; gap: 0; padding: 3px 7px; border-radius: 0; border: 1px solid var(--line); background: var(--surface); font-size: 11.5px; line-height: 1.25; cursor: default; }
.tell[data-detail] { cursor: pointer; }
.tell b { font-family: var(--display); font-size: 11.5px; } .tell small { color: var(--fg-3); font-size: 10.5px; } .tell em { font-style: normal; font-family: var(--mono); font-size: 10.5px; }
.tell.dwin { border-color: var(--dem); background: var(--dem); color: #fff; } .tell.dwin small, .tell.dwin em { color: #fff; }
.tell.rwin { border-color: var(--gop); background: var(--gop); color: #fff; } .tell.rwin small, .tell.rwin em { color: #fff; }
.tell.dlead { border-color: var(--dem); } .tell.dlead em { color: var(--dem); }
.tell.rlead { border-color: var(--gop); } .tell.rlead em { color: var(--gop); }
#sentells td.sb { font-size: 12px; color: var(--fg-3); white-space: nowrap; }
#sentells td.on0 { background: var(--gop-soft); color: var(--gop); font-weight: 600; }
#sentells td.on1 { background: var(--dem-soft); color: var(--dem); font-weight: 600; }
#sentells td.on2 { background: var(--dem); color: #fff; font-weight: 600; }
#sentells td.on3 { background: var(--navy-deep); color: #fff; font-weight: 600; }
#sentells th small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 6px; }
.key[data-detail] { cursor: pointer; }
.key .kk b { font-family: var(--display); font-size: 12.5px; }
.key { display: grid; grid-template-columns: 62px 18px 1fr auto; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 6px 10px; font-size: 12.5px; }
.key .kt { font-family: var(--mono); font-size: 11px; color: var(--fg-3); } .key .ks { font-weight: 700; text-align: center; } .key .kk small { color: var(--fg-3); } .key .kv { font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.key.mccoy { grid-template-columns: 62px 18px 1fr; align-items: start; }
.key.mccoy .kv { grid-column: 3; white-space: normal; font-family: var(--mono); color: var(--fg); }
.key.good { border-color: var(--good); } .key.good .ks { color: var(--good); }
.key.bad { border-color: var(--bad); } .key.bad .ks { color: var(--bad); }
.key.warn .ks { color: var(--warn); }

/* Watchlist */
.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.chip { font: inherit; font-size: 13px; padding: 4px 11px; border-radius: 0; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 0; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 1060px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-family: var(--display); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; position: sticky; top: 0; background: var(--surface); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
.lead { display: flex; align-items: center; gap: 7px; }
.margin.DEM { color: var(--dem); } .margin.GOP { color: var(--gop); } .margin.IND { color: var(--ind); }
.rating { font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }
.lnp-mark { font-family: var(--display); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: var(--accent); background: var(--accent-soft); padding: 1px 5px; border-radius: 0; margin-left: 6px; vertical-align: middle; }
.more { margin-top: 8px; }
.btn { font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 13px; border-radius: 0; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn[disabled] { opacity: 0.55; cursor: default; }

/* Two-column lower band */
.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: 0; padding: 16px; color: var(--fg-2); font-size: 14px; }
.empty b { color: var(--fg); }
.closing { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.closing span { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 3px 8px; color: var(--fg-2); }
.closing span b { color: var(--fg); font-family: var(--mono); font-weight: 500; }
.closing span.done { opacity: 0.55; }
footer.note { color: var(--fg-3); font-size: 12.5px; line-height: 1.5; max-width: 72ch; }
@media (prefers-reduced-motion: no-preference) { .dot.live { animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 6px transparent; } } }

/* Collapsible sections and jump nav (app3.js) */
.sectoggle { font: inherit; color: inherit; background: none; border: 0; padding: 4px 6px 4px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.sectoggle:hover { color: var(--accent); }
.chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 3px 3px 2px; flex: none; }
.collapsed .chev { transform: rotate(-45deg); margin-bottom: 0; }
section > header { margin-bottom: 8px; }
section.collapsed > header { margin-bottom: 0; }
section.collapsed > .clock, section.collapsed > .scoreboard { margin-top: 8px; }
section[id] { scroll-margin-top: calc(var(--topbar-h, 96px) + 10px); }
.jump { border-top: 1px solid var(--line); }
.jump .wrap { display: flex; flex-wrap: nowrap; gap: 2px; padding-block: 3px; overflow-x: auto; scrollbar-width: none; }
.jump .wrap::-webkit-scrollbar { display: none; }
.jump button { font: inherit; font-size: 13px; font-weight: 600; color: var(--fg-2); background: none; border: 0; border-radius: 0; padding: 5px 9px; cursor: pointer; white-space: nowrap; flex: none; }
.jump button:hover { color: var(--fg); background: var(--surface-2); }
.jump button[aria-current="true"] { color: var(--fg); background: var(--surface-2); }
.jump .all { margin-left: auto; color: var(--fg-3); font-weight: 500; }
footer.note summary { cursor: pointer; font-weight: 600; color: var(--fg-2); padding-block: 6px; }
@media (max-width: 600px) {
  .brand .sub { display: none; }
  .topbar .wrap { gap: 8px; padding-block: 6px; flex-wrap: nowrap; }
  .brand h1 { font-size: 16px; white-space: nowrap; }
  .feed { font-size: 12px; gap: 6px; flex-wrap: nowrap; min-width: 0; white-space: nowrap; overflow: hidden; }
  .feed #feedtext { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .feed .num { font-size: 11.5px; flex: none; }
  .jump .wrap { padding-block: 2px; gap: 2px; }
  .jump button { padding: 8px 10px; min-height: 40px; }
  section.collapsed > header .meta { display: none; }
  .sectoggle { min-height: 40px; }
  .btn.small, .btn, .chip, .manual-ctl select { min-height: 40px; }
  #watch { min-width: 0; font-size: 13px; }
  #watch th, #watch td { padding: 7px 5px; }
  #watch .pill { font-size: 11px; padding: 2px 6px; white-space: normal; }
  #watch th:nth-child(2), #watch td:nth-child(2), #watch th:nth-child(5), #watch td:nth-child(5),
  #watch th:nth-child(6), #watch td:nth-child(6), #watch th:nth-child(9), #watch td:nth-child(9),
  #watch th:nth-child(10), #watch td:nth-child(10) { display: none; }
}

/* TV ribbon: five live streams under the jump nav, inside the sticky bar. --tvh is the stream height
   (half a balance-of-power card); width follows at 16:9. */
.tv { --tvh: 100px; border-top: 1px solid var(--line); background: var(--surface); }
.tv[hidden] { display: none; }
.tvrow { display: flex; gap: 10px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; }
.tvrow::-webkit-scrollbar { display: none; }
.tvcell { margin: 0; flex: none; width: calc(var(--tvh) * 16 / 9); }
.tvcell:first-child { margin-left: auto; }
.tvcell:last-child { margin-right: auto; }
.tvframe { height: var(--tvh); background: #000; border: 1px solid var(--line); }
.tvframe iframe { display: block; width: 100%; height: 100%; border: 0; }
.tvcell figcaption { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; line-height: 1.2; }
.tvname { font-weight: 700; color: var(--fg-2); margin-right: auto; white-space: nowrap; }
.tvbtn { font: inherit; font-size: 11px; font-weight: 600; color: var(--fg-2); background: none; border: 1px solid var(--line); border-radius: 0; padding: 1px 6px; cursor: pointer; white-space: nowrap; }
.tvbtn:hover { color: var(--fg); background: var(--surface-2); }
.tvbtn[aria-pressed="true"] { color: #fff; background: var(--mark); border-color: var(--mark); }
.tvbtn:disabled { opacity: .5; cursor: default; }
.jump .tvtoggle { color: var(--fg-3); font-weight: 500; }
@media (max-width: 600px) { .tv { --tvh: 72px; } .tvrow { padding: 6px 10px; } }

/* ---------- Leadership Now components ---------- */
body { font-variant-numeric: tabular-nums; }
.topbar { background: var(--surface); }
.brand { align-items: center; gap: 12px; }
.brand .logo { height: 34px; width: 34px; display: block; flex: none; }
.brand .wordmark { display: grid; font-size: 14px; line-height: 1.1; white-space: nowrap; }
.brand .wordmark b { font-weight: 700; }
.brand .wordmark span { font-weight: 400; color: var(--fg-2); }
.topbar::after { content: ""; display: block; height: 3px; background: var(--mark-rule); }
.jump { border-top: 1px solid var(--line); }
.brand .rule { width: 1px; height: 28px; background: var(--line); flex: none; }
.brand h1 { font-size: 15px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.dot.live, .dot.stale, .dot.down { box-shadow: none; }
section > header { display: flex; flex-wrap: wrap; gap: 0 12px; }
section > header h2 { font-size: 20px; font-weight: 700; flex: 0 0 100%; }
section > header::after { content: ""; order: 1; flex: 0 0 48px; height: 4px; background: var(--mark-rule); margin-top: 2px; }
section > header .meta { order: 2; flex: 0 0 100%; margin-top: 8px; font-size: 14px; }
section > header { margin-bottom: 14px; }
section.collapsed > header .meta { display: none; }
section.collapsed > header { margin-bottom: 0; }
main { gap: 32px; }
.jump button { border-bottom: 3px solid transparent; padding: 7px 10px 5px; color: var(--fg-2); }
.jump button:hover { background: none; color: var(--fg); border-bottom-color: var(--line); }
.jump button[aria-current="true"] { background: var(--mark-rule) bottom / 100% 3px no-repeat; color: var(--fg); font-weight: 700; border-bottom-color: transparent; }
.jump .wrap { padding-block: 0; }
.jump .all, .jump .theme { font-weight: 400; color: var(--fg-2); }
.jump .all { margin-left: auto; }
.sectoggle:hover { color: inherit; text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.eyebrow, .dsec h3, th, .clockbox .k { letter-spacing: .14em; }
.btn.primary { background: var(--mark); color: #fff; border-color: var(--mark); }
.btn.primary:hover { background: var(--mark-dark); border-color: var(--mark-dark); }
.chip[aria-pressed="true"] { background: var(--pressed-bg); color: var(--pressed-fg); border-color: var(--pressed-bg); }
.chip:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.clockbox.next, .tl.now { border-color: var(--mark); }
.tl.now .in { color: var(--fg); }
.lnp-mark { background: var(--mark); color: #fff; text-transform: uppercase; }
.card { box-shadow: none; }
.overlay .sheet { box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12); }

/* Signals: a plain list of timed tests, each with what it would mean and where it stands */
.sigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 0 32px; border-top: 1px solid var(--line); margin-top: 10px; }
.sig { display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sig .st { font-size: 13px; font-weight: 600; color: var(--fg-2); padding-top: 1px; }
.sig .sw b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.sig .sw small { display: block; font-size: 13px; color: var(--fg-2); margin-top: 2px; }
.sig .sv { font-size: 12px; font-weight: 600; padding: 2px 8px; border: 1px solid var(--line); color: var(--fg-2); white-space: nowrap; }
.sig.yes .sv { background: var(--pressed-bg); color: var(--pressed-fg); border-color: var(--pressed-bg); }
.sig.no .sv { color: var(--fg); border-color: var(--fg-2); }
.sig.manual .sv { background: var(--accent-soft); color: var(--fg); border-color: var(--mark); }
.sig.notyet .sv { color: var(--fg); }
@media (max-width: 600px) {
  .brand { gap: 8px; }
  .brand .wordmark, .brand .rule { display: none; }
  .brand .logo { height: 28px; width: 28px; }
  .brand h1 { font-size: 15px; }
  section > header h2 { font-size: 18px; }
  .jump button { padding: 8px 10px 5px; }
  .sig { grid-template-columns: 62px 1fr; gap: 4px 10px; }
  .sig .sv { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* Slate tag key: tiers always visible, the rest a click or a hover away */
.tagkey { background: var(--surface); border: 1px solid var(--line); padding: 12px 16px; margin-bottom: 16px; display: grid; gap: 8px; font-size: 13.5px; color: var(--fg-2); }
.tagrow { display: grid; gap: 6px; }
.tagrow > b { color: var(--fg); font-weight: 700; }
.tagrow .chips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.chipkey { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tagnote { margin: 0; line-height: 1.6; }
.tagnote .tag { vertical-align: 1px; }
.tagmore summary { cursor: pointer; font-weight: 600; color: var(--fg); padding-block: 2px; }
.tagmore ul { list-style: none; margin: 8px 0 2px; padding: 0; display: grid; gap: 6px; }
.tagmore li { line-height: 1.6; }
.tagmore li .tag { vertical-align: 1px; margin-right: 2px; }

/* Slate view switch and tile map */
.viewbar { display: flex; gap: 6px; margin-bottom: 12px; }
#slatemap { display: none; }
.slate-map #slatemap { display: block; }
.slate-map #slate, .slate-map .tagkey, .slate-map .legend { display: none; }
.mapkey { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mapscroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); padding: 12px; }
.mapgrid { display: grid; grid-template-columns: repeat(11, minmax(84px, 1fr)); grid-auto-rows: minmax(84px, auto); gap: 4px; min-width: 980px; }
.maptile { background: var(--surface-2); padding: 5px 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.maptile.has { background: var(--surface); outline: 1px solid var(--fg-3); outline-offset: -1px; }
.mapst { font-size: 12px; font-weight: 600; color: var(--fg-2); line-height: 1.2; }
.maptile.has .mapst { color: var(--fg); font-weight: 700; }
.mapchips { display: flex; flex-wrap: wrap; gap: 3px; }
.mapchip { font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.2; padding: 3px 5px; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg-2); white-space: nowrap; }
button.mapchip { cursor: pointer; }
button.mapchip:hover { text-decoration: underline; }
.mapchip.won { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.mapchip.lost { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.mapchip.leading { background: var(--dem-soft); color: var(--dem); border-color: var(--dem); }
.mapchip.trailing { background: var(--gop-soft); color: var(--gop); border-color: var(--gop); }
.mapchip.runoff { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.mapchip.static { padding: 2px 7px; }
#slatemap .mech { margin: 8px 0 0; font-size: 13px; }

/* Race sheet: what an indicator is testing */
.ind { background: var(--surface-2); padding: 10px 12px; margin-top: 8px; }
.indhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14.5px; }
.indhead span { font-size: 13px; color: var(--fg-2); white-space: nowrap; }
.ind dl { display: grid; grid-template-columns: 170px 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: 13.5px; }
.ind dt { font-weight: 600; color: var(--fg-2); }
.ind dd { margin: 0; }
.indsrc { margin: 8px 0 0; font-size: 12.5px; color: var(--fg-2); }
@media (max-width: 600px) { .ind dl { grid-template-columns: 1fr; gap: 0; } .ind dd { margin-bottom: 6px; } }

/* Live odds charts (rail.js): a right column on laptops, a sideways strip on tablets, hidden on phones */
.rail[hidden] { display: none; }
.railhead h2 { font-size: 15px; font-weight: 700; }
.railhead p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--fg-2); }
.railcards { display: grid; gap: 6px; margin-top: 8px; }
.railcard { font: inherit; color: inherit; text-align: left; background: var(--surface); border: 1px solid var(--line); padding: 7px 9px 6px; display: grid; gap: 1px; width: 100%; min-width: 0; }
button.railcard { cursor: pointer; }
button.railcard:hover { border-color: var(--fg-2); }
.railtitle { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.railread { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.railname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.railval { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.railcard svg { display: block; max-width: 100%; }
.railmid { stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }
.railcross { stroke: var(--fg-2); stroke-width: 1; }
.railline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.railarea { stroke: none; }
.railarea.DEM { fill: var(--dem-soft); } .railarea.GOP { fill: var(--gop-soft); } .railarea.IND { fill: var(--ind-soft); }
.railline.DEM { stroke: var(--dem); } .railline.GOP { stroke: var(--gop); } .railline.IND { stroke: var(--ind); }
.railend { stroke: var(--surface); stroke-width: 2; }
.railend.DEM { fill: var(--dem); } .railend.GOP { fill: var(--gop); } .railend.IND { fill: var(--ind); }
.railmove { font-size: 11.5px; color: var(--fg-2); }
@media (min-width: 1280px) {
  .wrap { max-width: 1440px; }
  main.wrap { grid-template-columns: minmax(0, 1fr) 240px; column-gap: 24px; }
  main.wrap > * { grid-column: 1; }
  .rail { grid-column: 2 !important; grid-row: 1 / span 8; align-self: start; position: sticky; top: calc(var(--topbar-h, 96px) + 12px); max-height: calc(100vh - var(--topbar-h, 96px) - var(--aboutbar-h, 0px) - 24px); overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 1279px) {
  .rail { order: -1; min-width: 0; }
  .railcards { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .railcard { flex: 0 0 236px; width: 236px; }
}
@media (max-width: 600px) { .rail { display: none; } }

/* About bar */
.aboutbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--navy-deep); color: #fff; font-size: 13.5px; line-height: 1.35; }
.aboutbar[hidden] { display: none; }
.aboutbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 7px; }
.aboutbar p { margin: 0; }
.aboutbar a { color: #fff; font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.aboutclose { font: inherit; font-weight: 600; color: #fff; background: none; border: 1px solid rgba(255, 255, 255, 0.55); padding: 4px 10px; cursor: pointer; flex: none; }
.aboutclose:hover { background: rgba(255, 255, 255, 0.12); }
.aboutclose:focus-visible, .aboutbar a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body { padding-bottom: var(--aboutbar-h, 0px); }
@media (max-width: 600px) { .aboutbar { font-size: 12.5px; } .aboutbar .wrap { gap: 10px; padding-block: 8px; } .aboutclose { min-height: 40px; } }

/* First-visit walkthrough (tour.js) */
.tour { position: fixed; inset: 0; z-index: 40; }
.tour.plain { background: rgba(15, 18, 28, 0.55); }
.tourspot { position: fixed; box-shadow: 0 0 0 200vmax rgba(15, 18, 28, 0.55); outline: 2px solid var(--mark); pointer-events: none; }
.tourcard { position: fixed; background: var(--surface); color: var(--fg); border: 1px solid var(--line); padding: 16px 18px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18); max-height: calc(100vh - 32px); overflow: auto; }
.tourtop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tourcount { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.tourskip { font: inherit; font-size: 13px; color: var(--fg-2); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tourcard h2 { font-size: 19px; font-weight: 700; line-height: 1.25; margin: 10px 0 0; }
.tourrule { display: block; width: 48px; height: 4px; background: var(--mark-rule); margin-top: 8px; }
.tourcard p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.tourbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.tourcard [hidden] { display: none; }
@media (max-width: 600px) { .tourbtns .btn { flex: 1; min-height: 44px; } .tourskip { min-height: 40px; } }

/* Edit password prompt */
.editpw { border: 1px solid var(--line); background: var(--surface); color: var(--fg); padding: 18px 20px; width: min(400px, calc(100vw - 32px)); }
.editpw::backdrop { background: rgba(15, 18, 28, 0.55); }
.editpw h2 { font-size: 18px; font-weight: 700; }
.editpw p { margin: 8px 0 12px; font-size: 14px; color: var(--fg-2); }
.editpw input { width: 100%; font: inherit; padding: 9px 10px; border: 1px solid var(--fg-3); background: var(--surface); color: var(--fg); }
.editbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* Status notices under the top bar, and the polling-error table */
.feednote { background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 600; }
.feednote[hidden] { display: none; }
.topbar .feednote .wrap { display: block; padding-block: 4px; }
#pollerr { min-width: 0; }
#pollerr tr[data-detail] { cursor: pointer; }
#pollerr tr[data-detail]:hover td { background: var(--surface-2); }