/* PoliTrak dashboard stylesheet — dark glass look shared with Save Our Homes. */

:root {
  --bg: #070b11; --panel: #121822; --panel2: #1b2330; --line: #283344;
  --ink: #eef3fa; --mut: #9fb0c3; --mut2: #6c7c90;
  --blue: #46a6ff; --teal: #2dd4bf; --green: #59d39a; --red: #ef6b6b;
  --amber: #f5b342; --violet: #8b7cff;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink); min-height: 100vh; overflow-x: hidden;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }

/* ---- atmospheric backdrop ---- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg .glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.g1 { width: 620px; height: 620px; top: -220px; left: -120px; background: radial-gradient(circle, #1d6fd0, transparent 70%); }
.g2 { width: 560px; height: 560px; top: -160px; right: -120px; background: radial-gradient(circle, #1bbf9c, transparent 70%); opacity: .4; }
.g3 { width: 700px; height: 500px; bottom: -260px; left: 30%; background: radial-gradient(circle, #2a4d8f, transparent 70%); opacity: .35; }
.grid { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); }

/* ---- layout ---- */
.wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 22px 80px; }

/* ---- top nav ---- */
.topnav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 6px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .2px; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--teal)); box-shadow: 0 0 13px rgba(45,212,191,.7); }
.brand small { color: var(--mut); font-weight: 500; }
.navlink { color: var(--mut); font-size: 13px; }
.navlink:hover { color: var(--ink); }

/* ---- hero ---- */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; background: rgba(45,212,191,.08);
  border: 1px solid rgba(45,212,191,.28); color: #bdeede; padding: 6px 14px; border-radius: 999px;
  font-size: 13px; letter-spacing: .3px; }
.eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 0 rgba(45,212,191,.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(45,212,191,.6)} 70%{box-shadow:0 0 0 9px rgba(45,212,191,0)} 100%{box-shadow:0 0 0 0 rgba(45,212,191,0)} }

h1 { font-size: clamp(28px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -1px; margin: 22px 0 0;
  font-weight: 800;
  background: linear-gradient(105deg, #ffffff 0%, #cfe6ff 42%, #b9f3df 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- CTAs ---- */
.cta { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 18px;
  color: #04121d; padding: 16px 28px; border-radius: 13px;
  background: linear-gradient(100deg, #46a6ff, #2dd4bf 60%, #59d39a);
  box-shadow: 0 10px 34px rgba(45,160,230,.4); transition: transform .14s, box-shadow .14s; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 46px rgba(45,160,230,.55); }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; flex: none;
  background: linear-gradient(100deg, #46a6ff, #2dd4bf 60%, #59d39a); color: #04121d;
  font-weight: 800; font-size: 14px; padding: 9px 17px; border-radius: 10px;
  box-shadow: 0 6px 22px rgba(45,160,230,.35); transition: transform .12s, box-shadow .12s; white-space: nowrap; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(45,160,230,.5); }

/* ---- stats ---- */
.stats { margin-top: 38px; display: flex; gap: 30px; flex-wrap: wrap; }
.stat .v { font-size: 27px; font-weight: 800; letter-spacing: -.5px;
  background: linear-gradient(120deg,#eaf4ff,#bfe9da); -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent; }
.stat .k { font-size: 12px; color: var(--mut); text-transform: uppercase; letter-spacing: .6px; margin-top: 1px; }
.stat + .stat { padding-left: 30px; border-left: 1px solid var(--line); }

/* ---- glass card / tile ---- */
.card { position: relative; background: linear-gradient(180deg, rgba(28,38,54,.72), rgba(16,22,32,.72));
  border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0,0,0,.34); }
.tile { position: relative; background: linear-gradient(180deg, rgba(28,38,54,.72), rgba(16,22,32,.72));
  border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 14px 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tile b { display: block; font-size: 26px; font-weight: 800; color: var(--teal); }
.tile span { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .6px; }

/* ---- chips / pills ---- */
.chip { background: var(--panel2); border: 1px solid var(--line); color: var(--mut);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: var(--blue); color: var(--ink); }
.chip.on { background: linear-gradient(100deg, rgba(70,166,255,.22), rgba(45,212,191,.22)); border-color: rgba(45,212,191,.6); color: var(--ink); }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; border: 1px solid transparent; }
.pill.official { background: rgba(70,166,255,.14); border-color: rgba(70,166,255,.45); color: var(--blue); }
.pill.candidate { background: rgba(45,212,191,.14); border-color: rgba(45,212,191,.45); color: var(--teal); }
.pill.staff { background: rgba(89,211,154,.14); border-color: rgba(89,211,154,.45); color: var(--green); }
.pill.limited { background: rgba(159,176,195,.12); border-color: rgba(159,176,195,.35); color: var(--mut); }

/* ---- table ---- */
.tbl { width: 100%; max-width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto; }
.tbl th, .tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
/* Headers stay on one line; cells wrap, and a long unbroken string (a URL, a company name)
   breaks rather than pushing the table out from under the rails. */
.tbl th { white-space: nowrap; }
.tbl td { white-space: normal; overflow-wrap: break-word; }
.tbl td .pill { white-space: nowrap; }
.tbl td.nw { white-space: nowrap; }
/* A source title can be long; in a table it truncates (the full title is in the tooltip). */
.tbl td .src { display: inline-block; max-width: 140px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; vertical-align: bottom; }
.tbl th { position: sticky; top: 0; background: var(--panel); color: var(--mut); font-weight: 600;
  text-transform: uppercase; font-size: 11px; letter-spacing: .4px; z-index: 1; }
.tbl tbody tr:hover { background: rgba(255,255,255,.03); }

/* ---- sources / confidence ---- */
.src { font-size: 11px; color: var(--mut2); }
.src:hover { color: var(--blue); }
.src::after { content: ' \2197'; }
.conf-documented { border-left: 3px solid var(--teal); padding-left: 8px; }
.conf-reported { border-left: 3px dashed var(--amber); padding-left: 8px; }
.conf-inferred { border-left: 3px dotted var(--mut2); padding-left: 8px; }

/* ---- tooltip ---- */
.tooltip { position: absolute; pointer-events: none; z-index: 40; padding: 8px 12px;
  background: rgba(9,14,22,.94); border: 1px solid rgba(45,212,191,.5); border-radius: 10px;
  color: var(--ink); font-size: 12px; line-height: 1.4;
  box-shadow: 0 12px 32px rgba(0,0,0,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  max-width: 280px; }

/* ---- rails / tabs ---- */
.rail { width: 260px; flex: none; max-height: calc(100vh - 120px); overflow-y: auto; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tab { padding: 8px 12px; font-size: 13px; color: var(--mut); cursor: pointer; border-bottom: 2px solid transparent; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--teal); }

.empty { color: var(--mut); text-align: center; padding: 40px 20px; font-size: 14px; }

/* ---- leaflet dark theme ---- */
.leaflet-container { background: #070b11; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: rgba(9,14,22,.96); color: var(--ink); border: 1px solid rgba(45,212,191,.5); }
/* The Esri Dark Gray base (and its labels overlay) reads flat against the navy
   palette at full brightness; darken and desaturate it slightly so the subject
   pins (full color, no filter) pop against it. */
.leaflet-tile-pane { filter: brightness(.82) saturate(.7); }