/* ==========================================================================
   site.css - 4progressives.com's own styles. Loads after app.css and
   sitekit.css (sk_css_once), so it only adds and adjusts.

   1. Tokens (light) and the dark mode, keyed on html[data-fs-theme="dark"]
      (the engine's switch, app.css section 14) and reading its --fs-* tokens
   2. Shared pieces: tiles, notes, sources, chips, tables, meters, bars,
      the small SVG charts, the stacked wealth chart
   3. Services: take action, lookups, representatives, state grids
   4. Home strip, service cards, topic card
   politics.pg.css styles the Politics views; it reads the same tokens.
   ========================================================================== */

/* ---------------------------------------------------------- 1. tokens -- */
:root{
  --pg-ink:#14231f; --pg-ink-2:#3f514c; --pg-ink-3:#61736e;
  --pg-surface:#ffffff; --pg-surface-2:#f3f7f5; --pg-surface-3:#e6efeb;
  --pg-line:#dce6e2; --pg-line-2:#c6d5cf;
  --pg-link:#0a5f8c; --pg-accent:#0b6e4f; --pg-accent-bg:#e2f2ea; --pg-accent-2:#3b3fb6; --pg-accent-2-bg:#e7e8f8;
  --pg-good:#127a4a; --pg-bad:#b02a3f; --pg-bad-bg:#fbe9ec; --pg-warn:#8a5a00; --pg-warn-bg:#fff4dc;
  --pg-k1:#3b3fb6; --pg-k2:#6b7fd7; --pg-k3:#7fc4a4; --pg-k4:#0b6e4f;
  --pg-radius:var(--radius,12px);
  --pg-shadow:var(--shadow-1,0 1px 2px rgba(16,24,40,.05));
}
html[data-fs-theme="dark"]{
  --pg-ink:var(--fs-heading,#dde5ef); --pg-ink-2:var(--fs-ink-2,#b4bfcd); --pg-ink-3:var(--fs-ink-3,#8fa2b8);
  --pg-surface:var(--fs-surface,#161d26); --pg-surface-2:var(--fs-surface-2,#1d2631); --pg-surface-3:var(--fs-surface-3,#232e3c);
  --pg-line:var(--fs-line,#232e3b); --pg-line-2:var(--fs-line-2,#2f3c4c);
  --pg-link:var(--fs-link,#79b8ff); --pg-accent:#5fd0a6; --pg-accent-bg:rgba(95,208,166,.12); --pg-accent-2:#a3a6f5; --pg-accent-2-bg:rgba(163,166,245,.12);
  --pg-good:#4fd194; --pg-bad:#f08a9a; --pg-bad-bg:rgba(240,138,154,.12); --pg-warn:#f0c46a; --pg-warn-bg:rgba(240,196,106,.12);
  --pg-k1:#8f93f0; --pg-k2:#6b7fd7; --pg-k3:#4f9c7c; --pg-k4:#5fd0a6;
}
html[data-fs-theme="dark"] .form-control, html[data-fs-theme="dark"] .form-select{ background-color:var(--fs-field-bg,#141b24); border-color:var(--fs-line-3,#2a3542); color:var(--pg-ink); }
html[data-fs-theme="dark"] .sk-page .table{ --bs-table-bg:transparent; --bs-table-color:var(--pg-ink-2); color:var(--pg-ink-2); border-color:var(--pg-line); }

/* ---------------------------------------------------------- 2. shared -- */
.sk-page a{ color:var(--pg-link); }
.pg-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap:10px; margin:4px 2px 18px; }
.pg-tiles .sk-tile, .sk-tiles .sk-tile{ display:flex; flex-direction:column; gap:3px; padding:12px 14px; background:var(--pg-surface); border:1px solid var(--pg-line); border-radius:var(--pg-radius); box-shadow:var(--pg-shadow); min-width:0; }
.sk-tile-label{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pg-ink-3); }
.sk-tile-value{ font-size:22px; font-weight:700; color:var(--pg-ink); line-height:1.25; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.pg-meta{ font-size:13px; color:var(--pg-ink-3); }
.pg-small{ font-size:13px; }
.pg-mono{ font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:12.5px; }
.pg-h3{ font-size:15px; font-weight:700; margin:16px 0 6px; color:var(--pg-ink); }
.pg-note{ margin:8px 2px 16px; padding:12px 16px; border-left:4px solid var(--pg-accent-2); background:var(--pg-accent-2-bg); border-radius:0 8px 8px 0; color:var(--pg-ink); }
.pg-note-warn{ border-left-color:var(--pg-warn); background:var(--pg-warn-bg); }
.pg-source{ margin:10px 2px 4px; font-size:12.5px; color:var(--pg-ink-3); }
.pg-fineprint{ margin:8px 2px; font-size:12.5px; color:var(--pg-ink-3); }
.pg-good{ color:var(--pg-good); }
.pg-bad{ color:var(--pg-bad); }
.pg-soon{ color:var(--pg-bad); }
.pg-tag{ display:inline-block; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--pg-accent-bg); color:var(--pg-accent); }
.pg-cpc{ display:inline-block; padding:0 6px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.05em; background:var(--pg-accent-bg); color:var(--pg-accent); vertical-align:middle; }
.pg-kicker{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--pg-accent); }

.pg-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 2px 16px; }
.pg-chips a{ display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border:1px solid var(--pg-line-2); border-radius:999px; font-size:13.5px; text-decoration:none; color:var(--pg-ink-2); background:var(--pg-surface); }
.pg-chips a.is-active{ background:var(--pg-accent); border-color:var(--pg-accent); color:#fff; }
html[data-fs-theme="dark"] .pg-chips a.is-active{ color:#0d1716; }
.pg-chips a.is-active .sk-count{ background:rgba(255,255,255,.25); color:inherit; }

.pg-doclist{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.pg-doclist li{ padding:12px 14px; background:var(--pg-surface); border:1px solid var(--pg-line); border-radius:var(--pg-radius); min-width:0; }
.pg-doclist a{ font-weight:600; text-decoration:none; }
.pg-doclist .pg-meta{ display:block; margin-top:3px; }
.pg-abstract{ margin:6px 0 2px; font-size:14px; color:var(--pg-ink-2); }

.pg-num-table td, .pg-num-table th{ font-variant-numeric:tabular-nums; vertical-align:top; }
.pg-row-alert th, .pg-row-alert td{ background:var(--pg-bad-bg) !important; }
.pg-meter{ display:inline-block; width:64px; height:8px; margin-right:6px; vertical-align:middle; background:var(--pg-surface-3); border-radius:4px; overflow:hidden; }
.pg-meter span{ display:block; height:100%; background:var(--pg-accent); }

.pg-bars{ list-style:none; margin:4px 0 8px; padding:0; display:grid; gap:6px; }
.pg-bars li{ display:grid; grid-template-columns:minmax(120px, 34%) 1fr auto; align-items:center; gap:10px; font-size:14px; }
.pg-bar-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--pg-ink-2); }
.pg-bar-track{ height:12px; background:var(--pg-surface-3); border-radius:6px; overflow:hidden; }
.pg-bar-fill{ display:block; height:100%; background:var(--pg-accent); border-radius:6px; }
.pg-bar-value{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--pg-ink); min-width:48px; text-align:right; }

.pg-spark{ display:block; width:100%; height:auto; max-height:220px; margin:6px 0; color:var(--pg-accent); }
.pg-spark-line{ fill:none; stroke:var(--pg-accent); stroke-width:2; vector-effect:non-scaling-stroke; }
.pg-spark-area{ fill:var(--pg-accent-bg); stroke:none; }
.pg-spark-dot{ fill:var(--pg-accent); }
.pg-spark-grid{ stroke:var(--pg-line); stroke-width:1; vector-effect:non-scaling-stroke; }
.pg-spark-zero{ stroke:var(--pg-ink-3); stroke-dasharray:4 3; stroke-width:1; vector-effect:non-scaling-stroke; }
.pg-spark-label{ fill:var(--pg-ink-3); font-size:11px; }

.pg-legend{ display:flex; flex-wrap:wrap; gap:14px; margin:4px 0 8px; font-size:13px; color:var(--pg-ink-2); }
.pg-key::before{ content:""; display:inline-block; width:11px; height:11px; margin-right:5px; border-radius:2px; vertical-align:-1px; }
.pg-key.k1::before{ background:var(--pg-k1); } .pg-key.k2::before{ background:var(--pg-k2); } .pg-key.k3::before{ background:var(--pg-k3); } .pg-key.k4::before{ background:var(--pg-k4); }
.pg-stack{ display:flex; align-items:stretch; gap:2px; height:220px; padding-bottom:18px; overflow-x:auto; }
.pg-stack-col{ position:relative; flex:1 0 14px; display:flex; flex-direction:column; min-width:14px; }
.pg-stack-col span{ display:block; }
.pg-stack-col .k1{ background:var(--pg-k1); } .pg-stack-col .k2{ background:var(--pg-k2); } .pg-stack-col .k3{ background:var(--pg-k3); } .pg-stack-col .k4{ background:var(--pg-k4); }
.pg-stack-col em{ position:absolute; bottom:-17px; left:0; right:0; text-align:center; font-style:normal; font-size:10px; color:var(--pg-ink-3); }

.pg-inline-list{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 0 8px; padding-left:20px; }
.pg-two{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:0 24px; }
.pg-two > *{ min-width:0; }
.pg-next ul{ margin:0; padding-left:20px; display:grid; gap:4px; }
.pg-howto ol{ margin:0; padding-left:22px; display:grid; gap:8px; max-width:72ch; }
.pg-sources{ margin-top:8px; font-size:13px; }
.pg-sources ul{ margin:6px 0 0; padding-left:20px; overflow-wrap:anywhere; }

/* -------------------------------------------------------- 3. services -- */
.pg-act-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.pg-act-card{ display:flex; flex-direction:column; gap:6px; padding:16px 18px; background:var(--pg-surface); border:1px solid var(--pg-line); border-radius:var(--pg-radius); box-shadow:var(--pg-shadow); text-decoration:none; color:var(--pg-ink); min-width:0; transition:border-color .15s; }
.pg-act-card:hover{ border-color:var(--pg-accent); }
.pg-act-icon{ display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:9px; background:var(--pg-accent-bg); color:var(--pg-accent); }
.pg-act-icon svg{ width:18px; height:18px; }
.pg-act-title{ font-weight:700; font-size:16px; color:var(--pg-ink); }
.pg-act-text{ font-size:14px; color:var(--pg-ink-2); }
.pg-act-go{ margin-top:auto; font-weight:700; font-size:14px; color:var(--pg-accent); }

.pg-lookup{ display:flex; flex-wrap:wrap; gap:8px; max-width:640px; margin-top:12px; }
.pg-lookup .form-control{ flex:1 1 260px; min-width:0; }
.pg-lookup .pg-zip{ flex:0 1 140px; }
.pg-filter{ max-width:280px; margin:4px 0 10px; }
.pg-matched{ font-size:14px; color:var(--pg-ink-2); }

.pg-reps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:12px; }
.pg-rep{ padding:14px 16px; background:var(--pg-surface); border:1px solid var(--pg-line); border-radius:var(--pg-radius); min-width:0; }
.pg-rep-head{ display:flex; gap:12px; align-items:flex-start; }
.pg-rep-head > div{ min-width:0; }
.pg-rep-photo{ width:72px; height:88px; object-fit:cover; border-radius:8px; background:var(--pg-surface-3); flex:0 0 auto; }
.pg-rep-name{ font-size:17px; margin:0; }
.pg-rep-name a{ text-decoration:none; }
.pg-rep-contact{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; }
.pg-rep-votes{ margin:10px 0 0; font-size:13px; }
.pg-rep-votes caption{ caption-side:top; padding:0 0 4px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pg-ink-3); }
.pg-rep-votes td:first-child{ white-space:nowrap; color:var(--pg-ink-3); }
.pg-legislators{ padding-left:20px; display:grid; gap:4px; }

.pg-state-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px; }
.pg-state-grid a, .pg-state-grid span{ display:block; padding:7px 10px; border:1px solid var(--pg-line); border-radius:8px; background:var(--pg-surface); text-decoration:none; font-size:14px; }
.pg-state-grid a:hover{ border-color:var(--pg-accent); }
.pg-state-grid .is-off{ color:var(--pg-ink-3); background:var(--pg-surface-2); }
.pg-cause-list{ columns:2 260px; padding-left:20px; }
.pg-rules th{ width:34%; font-weight:600; color:var(--pg-ink-2); }
.pg-vote-table td{ min-width:120px; }

/* ------------------------------------------------------------ 4. home -- */
/* The home feed column is narrow beside the topic sidebar: the three panels wrap as space allows, the main one widest. */
.pg-home-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px; margin:6px 0 18px; }
.pg-strip-main{ grid-column:1 / -1; }
@media (min-width: 1400px){ .pg-strip-main{ grid-column:auto / span 2; } }
.pg-strip-main, .pg-strip-side{ display:flex; flex-direction:column; gap:6px; padding:14px 16px; background:var(--pg-surface); border:1px solid var(--pg-line); border-radius:var(--pg-radius); box-shadow:var(--pg-shadow); min-width:0; }
.pg-strip-main{ border-top:3px solid var(--pg-accent); }
.pg-strip-head{ margin:0; font-size:18px; font-weight:700; line-height:1.3; color:var(--pg-ink); }
.pg-strip-text{ margin:0; font-size:14px; color:var(--pg-ink-2); }
.pg-strip-side ul{ margin:0; padding-left:18px; display:grid; gap:4px; font-size:13.5px; }
.pg-strip-num{ margin:0; font-size:28px; font-weight:700; color:var(--pg-ink); font-variant-numeric:tabular-nums; }
.pg-strip-num small{ font-size:14px; font-weight:600; color:var(--pg-ink-3); }
.pg-strip-link{ margin-top:auto; font-weight:700; font-size:14px; color:var(--pg-accent); text-decoration:none; }
.pg-services{ margin-top:24px; }
.pg-topic-card{ display:flex; flex-direction:column; gap:4px; margin:6px 0 14px; padding:12px 16px; border:1px solid var(--pg-line); border-left:4px solid var(--pg-accent); border-radius:0 var(--pg-radius) var(--pg-radius) 0; background:var(--pg-surface); text-decoration:none; color:var(--pg-ink); }
.pg-topic-card:hover{ border-color:var(--pg-accent); }

@media (prefers-reduced-motion: reduce){ .pg-act-card{ transition:none; } }