/* DAYLIGHT theme — "daylight is the best disinfectant". A warm LIGHT treatment, color-
   adjacent to readuncut.com (warm paper, hot-pink accent, Instrument Serif + DM Sans).
   Colour roles are tokens; party colours are set from /api/meta at boot (main.js). */
:root {
  color-scheme: light;
  /* surfaces */
  --bg:#f4efe3; --bg-deep:#eadfce; --surface:#fdfaf3; --surface-2:#ece4d4; --surface-3:#f1eadd;
  --border:#ddd3c0; --border-2:#c9bda6;
  /* ink (on light) */
  --ink:#2a2318; --ink-1:#3f382c; --ink-2:#574e3f; --ink-3:#857b69; --muted:#6c6353;
  --label:#6f6757; --label-2:#5c5345; --faint:#9a9080;
  /* brand — readuncut hot-pink */
  --accent:#d10f5e; --accent-bright:#ff1a75; --accent-deep:var(--accent-deep); --accent-tint:#f6cbdd;
  --accent-ink:#f4dde8; --accent-line:var(--accent-line); --on-accent:#ffffff;
  /* money semantics, deepened for paper; orange = outside spending / organized */
  --received:#0e9d68; --given:#d33b2b; --orange:#c98a1f;
  /* party colours — defaults, overwritten from /api/meta.party_colors */
  --party-d:#2f6fb0; --party-r:#cc3b3b; --party-i:#8a7a52;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink); overflow:hidden;
            font-family:var(--sans); -webkit-font-smoothing:antialiased; letter-spacing:-0.005em; }
#map { position:fixed; inset:0; }
#hud { position:fixed; top:0; left:0; right:0; padding:14px 18px; z-index:5;
       display:flex; gap:16px; align-items:flex-start; pointer-events:none;
       background:linear-gradient(rgba(244,239,227,.92),rgba(244,239,227,0)); }
#hud h1 { font-family:var(--serif); font-size:21px; margin:0; font-weight:400; white-space:nowrap; letter-spacing:-.01em; }
#hud h1 small { color:var(--muted); font-weight:400; }
#viewtype { pointer-events:none; font-size:12px; color:var(--accent-deep); background:var(--accent-ink);
            border:1px solid var(--accent-line); border-radius:999px; padding:7px 13px; white-space:nowrap;
            font-weight:600; align-self:center; }
#search { pointer-events:auto; position:relative; }
#search input { width:300px; padding:9px 13px; border-radius:9px; border:1px solid var(--border);
                background:var(--surface); color:var(--ink); font-size:13px; outline:none; }
#results { position:absolute; top:40px; left:0; width:326px; background:var(--surface);
           border:1px solid var(--border); border-radius:9px; overflow:hidden; display:none; max-height:60vh; overflow-y:auto; }
#results div { padding:9px 13px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--surface-2); }
#results div:hover { background:var(--surface-2); }
#results .meta { color:var(--muted); font-size:11px; }
#back { pointer-events:auto; margin-left:auto; display:none; cursor:pointer; font-size:12px;
        color:var(--ink-1); background:var(--surface); border:1px solid var(--border); border-radius:8px;
        padding:8px 12px; } #back:hover { background:var(--surface-2); }
#crumbs { pointer-events:auto; font-size:12px; color:var(--muted);
          background:rgba(253,250,243,.86); padding:8px 12px; border-radius:8px; border:1px solid var(--border);
          max-width:46vw; text-align:right; }
#crumbs b { color:var(--ink-1); font-weight:600; }
#crumbs span { cursor:pointer; } #crumbs span:hover { color:var(--accent); }
#crumbs .sep { color:#574f43; margin:0 5px; cursor:default; }
#legend { position:fixed; bottom:12px; left:18px; right:230px; z-index:5; display:flex; flex-wrap:wrap;
          gap:5px 14px; font-size:11px; color:#b4ab99; pointer-events:none; }
@media (max-width: 900px){
  #hud h1 small { display:none; }
  #viewtype { display:none; }
  #search input { width:min(300px, 40vw); }
  #legend { right:18px; bottom:34px; }
}
#legend span { display:inline-flex; align-items:center; gap:5px; }
#legend i { width:9px; height:9px; border-radius:2px; display:inline-block; }
#panel { position:fixed; top:64px; right:14px; width:320px; max-height:calc(100vh - 150px);
         background:rgba(253,250,243,.97); border:1px solid var(--border); border-radius:12px; padding:16px 18px;
         overflow:auto; z-index:6; transform:translateX(120%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
         box-shadow:0 16px 50px #000a; }
#panel.open { transform:translateX(0); }
#panel .close { float:right; cursor:pointer; color:var(--muted); font-size:18px; line-height:1; }
#panel h2 { font-family:var(--serif); font-size:24px; font-weight:400; margin:0 28px 1px 0; letter-spacing:-.01em; line-height:1.08; text-wrap:balance; }
#panel .sub { color:var(--muted); font-size:12px; }
#panel .big { font-size:25px; font-weight:700; margin-top:8px; letter-spacing:-.5px; }
#bar { display:flex; height:9px; border-radius:5px; overflow:hidden; margin:12px 0 4px; background:var(--surface-2); }
#bar i { height:100%; display:block; }
#barkey { display:flex; flex-wrap:wrap; gap:4px 11px; font-size:10.5px; color:var(--label-2); margin-bottom:6px; }
#barkey span { display:inline-flex; align-items:center; gap:4px; } #barkey i{width:8px;height:8px;border-radius:2px;}
#panel ul { list-style:none; padding:0; margin:10px 0 0; }
#panel li { display:flex; justify-content:space-between; gap:8px; padding:7px 0;
            border-bottom:1px solid var(--surface-2); font-size:13px; cursor:pointer; align-items:center; }
#panel li:hover { color:var(--ink); } #panel li:hover .name{ text-decoration:underline; }
#panel li .amt { color:var(--received); font-variant-numeric:tabular-nums; white-space:nowrap; }
#panel li .dot { width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:7px;flex:none; }
#panel .row { display:flex; align-items:center; min-width:0; }
#panel .name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wikibox { font-size:12.5px; color:var(--ink-2); line-height:1.5; margin:2px 0 9px; }
.wikibox a { color:var(--accent); text-decoration:none; } .wikibox a:hover { text-decoration:underline; }
.wikibox .wdim { color:var(--ink-3); font-style:italic; }
.platlinks { display:flex; flex-wrap:wrap; gap:7px 15px; font-size:12px; }
.platlinks a { color:var(--accent); text-decoration:none; } .platlinks a:hover { text-decoration:underline; }
.posbox { font-size:12.5px; color:var(--ink-2); line-height:1.5; margin:2px 0 9px; }
.poslist { margin:4px 0; padding-left:16px; } .poslist li { margin:3px 0; } .poslist b { color:var(--ink-1); }
.posissues { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.posissues span { background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:2px 8px; font-size:11px; color:var(--ink-2); }
.aitag { margin-top:6px; font-size:11px; color:#8b7fb0; font-style:italic; }
.star { color:#f0c050; }
/* the money headline — the one thing the panel leads with */
.headline { margin:14px 0 4px; }
.headline .nums { display:flex; gap:26px; }
.headline .lbl { font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--label); }
.headline .big { font-size:27px; font-weight:700; letter-spacing:-.5px; line-height:1.05; }
.srcnote { margin-top:5px; font-size:11px; color:var(--ink-3); line-height:1.4; }
/* progressive-disclosure sections: summary on top, content folds away */
.psec { border-top:1px solid #2a241b; }
.psec > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
                  padding:14px 0 13px; font-size:11px; letter-spacing:.5px; text-transform:uppercase;
                  font-weight:600; color:var(--label-2); transition:color .15s; }
.psec > summary::-webkit-details-marker { display:none; }
.psec > summary:hover { color:var(--ink); }
.psec .pright { margin-left:auto; display:flex; align-items:center; gap:9px; }
.psec .pstease { text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-3); font-size:11.5px; }
.psec .chev { font-size:16px; color:var(--faint); transition:transform .2s ease; line-height:1; }
.psec[open] > summary .chev { transform:rotate(90deg); color:var(--label-2); }
.psec[open] > summary { color:var(--ink); }
.psbody { padding-bottom:8px; animation:psopen .22s ease; }
@keyframes psopen { from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce){ .psbody{animation:none} .psec .chev{transition:none} }
/* funding fingerprint — what the organized money is */
.fpbar { display:flex; height:11px; border-radius:5px; overflow:hidden; margin:11px 0 9px; background:var(--surface-2); }
.fpbar i { height:100%; display:block; min-width:2px; }
.fprow { margin:8px 0; }
.fphdr { display:flex; align-items:center; gap:7px; font-size:12px; }
.fphdr .dot { width:9px; height:9px; border-radius:3px; flex:none; }
.fphdr .fplabel { color:var(--ink-1); font-weight:600; }
.fphdr .fpamt { margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums; }
.fpchips { display:flex; flex-wrap:wrap; gap:5px; margin:5px 0 0 16px; }
.fpchip { background:var(--surface-3); border:1px solid var(--border); border-radius:6px; padding:2px 8px;
          font-size:10.5px; color:var(--ink-2); cursor:pointer; max-width:100%; }
.fpchip:hover { border-color:var(--border-2); color:var(--ink); background:var(--surface-2); }
.fpchip b { color:var(--ink-1); font-weight:500; }
#tip { position:fixed; z-index:7; pointer-events:none; background:rgba(253,250,243,.97); color:var(--ink);
       border:1px solid var(--border); border-radius:7px; padding:7px 10px; font-size:12px;
       display:none; max-width:260px; box-shadow:0 8px 24px #0008; }
.sidehdr { position:fixed; top:84px; z-index:5; pointer-events:none; font-size:11.5px;
           font-weight:700; letter-spacing:1.4px; color:var(--label); }
#sideL { left:13%; } #sideR { right:13%; text-align:right; }
#hint { position:fixed; bottom:40px; left:50%; transform:translateX(-50%); z-index:5;
        font-size:12px; color:var(--ink-3); pointer-events:none; }
/* headline: the question this view answers + a one-line takeaway */
#headline { position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:5;
            text-align:center; pointer-events:none; max-width:62vw; display:none; }
#headline .q { font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.2px; }
#headline .insight { font-size:13px; color:var(--muted); margin-top:3px; }
#headline .insight b { color:var(--accent-deep); font-weight:600; }
/* in/out colour key */
#keylegend { position:fixed; top:74px; right:18px; z-index:5; display:none; gap:14px; font-size:11.5px;
             color:var(--label-2); pointer-events:none; }
#keylegend span { display:inline-flex; align-items:center; gap:5px; }
#keylegend i { width:9px; height:9px; border-radius:50%; display:inline-block; }
/* provenance footer */
#prov { position:fixed; bottom:12px; right:16px; z-index:6; font-size:11px; color:var(--ink-3); }
#prov b { color:var(--label); font-weight:500; }
#prov .info { cursor:pointer; color:var(--accent); } #prov .info:hover { text-decoration:underline; }
#about { position:fixed; inset:0; z-index:40; background:rgba(38,30,18,.45); display:none; align-items:center; justify-content:center; }
.aboutbox { width:min(620px,92vw); max-height:84vh; overflow:auto; background:var(--surface); border:1px solid var(--border);
            border-radius:14px; padding:24px 26px; box-shadow:0 24px 70px #000a; }
.aboutbox h2 { margin:0 0 4px; font-size:20px; } .aboutbox .x { float:right; cursor:pointer; color:var(--muted); font-size:20px; }
.aboutbox h3 { font-size:12px; letter-spacing:.5px; color:var(--label); margin:18px 0 6px; }
.aboutbox p, .aboutbox li { font-size:13px; color:var(--ink-2); line-height:1.55; }
.aboutbox ul { margin:4px 0 0; padding-left:18px; } .aboutbox .warn { color:var(--orange); }
.aboutbox .gl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:12.5px; }
.aboutbox .gl b { color:var(--accent-deep); }
#coach { position:fixed; inset:0; z-index:45; background:rgba(38,30,18,.45); display:none; align-items:center; justify-content:center; }
.coachbox { width:min(440px,90vw); background:var(--surface); border:1px solid var(--accent-line); border-radius:14px; padding:24px; text-align:center; }
.coachbox h2 { margin:0 0 12px; font-size:19px; }
.coachbox .tip { display:flex; align-items:center; gap:11px; text-align:left; font-size:13.5px; color:var(--ink-2); margin:11px 0; }
.coachbox .tip i { width:24px; text-align:center; font-size:17px; flex:none; }
.coachbox button { margin-top:16px; padding:10px 22px; border-radius:9px; border:none; cursor:pointer;
                   background:#cc2160; color:#fff; font-size:14px; font-family:inherit; }
#status { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
          color:var(--muted); font-size:14px; z-index:4; pointer-events:none; }
#start { position:fixed; inset:0; z-index:20; background:radial-gradient(75% 55% at 50% 30%,#f6dfe9,var(--bg-deep));
         display:flex; align-items:center; justify-content:center; }
.startbox { width:min(500px,90vw); text-align:center; }
.brand { font-family:var(--serif); font-size:62px; font-weight:400; letter-spacing:-.02em; line-height:1.02;
         text-wrap:balance; }
.tag { color:var(--muted); font-size:14px; margin:14px 0 34px; }
.herosearch { position:relative; }
.herosearch input { width:100%; box-sizing:border-box; padding:17px 20px; border-radius:14px; text-align:center;
                    border:1px solid var(--border); background:rgba(253,250,243,.86); color:var(--ink); font-size:16px; outline:none; transition:.15s; }
.herosearch input:focus { border-color:#c01055; background:var(--surface); }
#startresults { position:absolute; top:60px; left:0; right:0; background:var(--surface); z-index:5; text-align:left;
                border:1px solid var(--border); border-radius:12px; overflow:hidden; display:none; max-height:46vh; overflow-y:auto; }
#startresults div { padding:11px 15px; font-size:14px; cursor:pointer; border-bottom:1px solid var(--surface-2); }
#startresults div:hover { background:var(--surface-2); } #startresults .meta { color:var(--muted); font-size:12px; }
.entries { display:flex; gap:14px; margin-top:20px; }
.entry { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; font-family:inherit;
         background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px 12px; color:var(--ink); transition:.15s; }
.entry:hover { background:var(--surface-2); border-color:#b05068; transform:translateY(-2px); }
.entry .ei { font-size:23px; } .entry .et { font-size:14.5px; font-weight:600; }
.entry .ed { font-size:11.5px; color:var(--muted); }
.startmore { margin-top:30px; font-size:12.5px; color:var(--ink-3); }
.startmore span { cursor:pointer; } .startmore span:hover { color:var(--muted); text-decoration:underline; }
#hud h1 { cursor:pointer; }
/* geographic / district picker */
#geo { position:fixed; inset:0; z-index:30; background:var(--bg-deep); display:none; flex-direction:column; }
.geohead { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--surface-2); }
.geohead button { cursor:pointer; background:var(--surface); border:1px solid var(--border); color:var(--ink-1);
                  border-radius:8px; padding:7px 12px; font-size:14px; }
.geohead h2 { margin:0; font-size:17px; flex:1; } .geohead .x { cursor:pointer; color:var(--muted); font-size:20px; }
.geobody { flex:1; display:flex; min-height:0; }
/* size the map from this flex box, not viewport units — vh collapses inside embedded previews */
.geomapwrap { flex:1; min-width:0; min-height:0; position:relative; }
.geomaphint { position:absolute; bottom:14px; left:18px; font-size:11.5px; color:var(--faint); pointer-events:none; z-index:1; }
/* fill the frame (not intrinsic SVG height) so the wide map sits CENTERED, not top-aligned */
#nemap { position:absolute; top:18px; left:18px; width:calc(100% - 36px); height:calc(100% - 36px); }
#nemap .state { fill:#e8dec9; stroke:#cdbfa6; stroke-width:0.8; cursor:pointer; transition:fill .15s,opacity .45s; }
#nemap .state.money { fill:#e29ec0; }      /* state-level $ loaded — stands out */
#nemap .state.nodata { fill:#efe7d7; }     /* no data yet — dimmed but still clickable (federal) */
#nemap .state:hover { fill:#d579a5; }
#nemap .state.sel { fill:#c6588f; }
#nemap .state.dim { opacity:.18; }
#nemap .stlabel { fill:var(--ink); font-size:14px; font-weight:700; text-anchor:middle; pointer-events:none;
                  font-family:var(--sans); transition:opacity .4s; }
#nemap .distpoly { fill:rgba(255,214,230,0.05); stroke:#b6a78c; stroke-width:0.4; cursor:pointer; transition:fill .15s; }
#nemap .distpoly:hover { fill:rgba(255,26,117,0.28); }
#nemap .distpoly.sel { fill:rgba(255,26,117,0.52); stroke:var(--accent-bright); }
#nemap .distlabel { fill:var(--ink); font-weight:700; text-anchor:middle; pointer-events:none;
                    paint-order:stroke; stroke:var(--bg-deep); stroke-width:3px; vector-effect:non-scaling-stroke;
                    font-family:-apple-system,system-ui,sans-serif; }
#geopanel { animation:fadein .4s; } @keyframes fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.geozoom { cursor:pointer; color:var(--label); font-size:12.5px; margin-bottom:12px; }
.geozoom:hover { color:var(--ink-1); }
#geopanel { width:380px; border-left:1px solid var(--surface-2); padding:18px 20px; overflow:auto; }
/* "Pick a state" overview: no panel content yet, so give the whole frame to the map */
#geo.overview #geopanel { display:none; }
.geohint { color:var(--label); font-size:13px; } .geosub { font-size:11px; letter-spacing:.6px; color:var(--label);
           font-weight:700; margin:2px 0 10px; } .geonote { margin-top:14px; font-size:12px; color:var(--ink-3); }
.drow,.crow { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 8px;
              margin:0 -4px; border-radius:7px; border-bottom:1px solid var(--surface-2); cursor:pointer; font-size:14px; }
.drow:hover,.crow:hover{ background:var(--surface-2); color:var(--ink); }
.drow .meta,.crow .meta { color:var(--muted); font-size:11.5px; }
.crow .pdot { width:10px;height:10px;border-radius:3px;flex:none; }
.crow .cn { flex:1; min-width:0; } .crow .amt { color:var(--received); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* head-to-head matchup: the two party nominees as the race marquee */
.h2h { border:1px solid var(--border-2); border-radius:12px; overflow:hidden; margin:6px 0 2px; background:var(--surface); }
.h2h-slot { display:flex; align-items:center; gap:11px; padding:13px 14px; cursor:pointer; }
.h2h-slot:hover { background:var(--surface-2); }
.h2h-slot.empty, .h2h-slot.empty:hover { cursor:default; background:transparent; }
.h2h-slot .pdot { width:13px; height:13px; border-radius:3px; flex:none; }
.h2h-body { flex:1; min-width:0; }
.h2h-name { font-family:var(--serif); font-size:19px; line-height:1.12; color:var(--ink);
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.h2h-name.muted { color:var(--faint); font-size:16px; }
.h2h-slot .meta { color:var(--muted); font-size:11.5px; margin-top:3px; }
.h2h-amt { color:var(--received); font-variant-numeric:tabular-nums; font-weight:600; font-size:14px; white-space:nowrap; }
.h2h-vs { text-align:center; font-size:10px; letter-spacing:2px; color:var(--faint); font-weight:700;
          padding:3px 0; background:var(--surface-3); border-top:1px solid var(--surface-2); border-bottom:1px solid var(--surface-2); }
/* shared bits used by the JS templates (no inline hex in js/) */
.muted { color:var(--muted); }
.sechd { margin:16px 0 4px; color:var(--label); letter-spacing:.4px; }
.note { color:var(--label-2); line-height:1.5; letter-spacing:0; }
.won { color:var(--received); font-weight:600; }
.pdot { width:10px; height:10px; border-radius:3px; flex:none; display:inline-block; }
.badge { background:#2e7d52; color:#eafff3; border-radius:4px; padding:1px 6px; font-size:9.5px;
         letter-spacing:.5px; margin-right:6px; vertical-align:middle; }
.aitag.plain { color:var(--ink-3); font-style:normal; }
.aligned { font-size:11px; margin-top:2px; white-space:normal; line-height:1.3; color:var(--ink-3); }
.aligned.strong { color:#b06a35; }
.lp-dot { background:#8b7fb0; }