/* TerraCivic homepage (build 135): "Politics, close to home." Light, warm paper; party red and blue only for party. */
:root {
  --paper:#fbf8f1; --paper-2:#f3eee2; --card:#ffffff; --ink:#15171c; --ink-2:#3b4049; --muted:#5f6670; --line:#15171c14;
  --dem:#2f55e8; --rep:#d23a46; --other:#7a4fa3;
  --spectral:linear-gradient(100deg,#5f93c9 0%,#6d7cf7 45%,#e2566a 100%);
  --sun:#ffd166; --mint:#c9f0dc; --sky:#dbe7ff; --blush:#ffe0e3; --lilac:#e9e4f5;
  --btn-bg:#15171c; --btn-fg:#ffffff; --shadow:#15171c; --edge:#15171c; --panel:#15171c; --panel-fg:#ffffff; --panel-chip:#ffffff14;
  color-scheme:light;
}
/* Night: follows the device unless the visitor chose day; the header toggle sets data-theme and remembers it. */
:root[data-theme="dark"] {
  --paper:#0e1117; --paper-2:#1a1f29; --card:#151a22; --ink:#f4f0df; --ink-2:#c9d0d9; --muted:#9aa4b0; --line:#ffffff1c;
  --dem:#6f8bff; --rep:#ff6b78; --other:#b48ad6;
  --mint:#1f4a3a; --sky:#23345a; --blush:#4a2329; --lilac:#33284a;
  --btn-bg:#f4f0df; --btn-fg:#11151c; --shadow:#000000; --edge:#f4f0df; --panel:#1b2130; --panel-fg:#f4f0df; --panel-chip:#ffffff12;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --paper:#0e1117; --paper-2:#1a1f29; --card:#151a22; --ink:#f4f0df; --ink-2:#c9d0d9; --muted:#9aa4b0; --line:#ffffff1c;
    --dem:#6f8bff; --rep:#ff6b78; --other:#b48ad6;
    --mint:#1f4a3a; --sky:#23345a; --blush:#4a2329; --lilac:#33284a;
    --btn-bg:#f4f0df; --btn-fg:#11151c; --shadow:#000000; --edge:#f4f0df; --panel:#1b2130; --panel-fg:#f4f0df; --panel-chip:#ffffff12;
    color-scheme:dark;
  }
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; font-family:Manrope,sans-serif; color:var(--ink); background:var(--paper) }
a { color:inherit; text-decoration:none }
:focus-visible { outline:3px solid var(--dem); outline-offset:2px; border-radius:6px }
.skip-link { position:absolute; left:-999px; top:8px; padding:10px 14px; background:var(--btn-bg); color:var(--btn-fg); border-radius:8px; z-index:99 }
.skip-link:focus { left:8px }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.wrap { width:min(1200px, 100% - 48px); margin:0 auto }

/* Header */
.head { display:flex; flex-direction:column; align-items:center; gap:16px; padding:26px 0 18px; border-bottom:1px solid var(--line) }
.logo { display:flex; justify-content:center; width:100% }
.logo img { height:96px; width:auto; display:block }
/* Day shows the logo with a black slogan; night shows the original with the light slogan. */
.logo-night { display:none !important }
:root[data-theme="dark"] .logo-day { display:none !important }
:root[data-theme="dark"] .logo-night { display:block !important }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .logo-day { display:none !important }
  :root:not([data-theme="light"]) .logo-night { display:block !important }
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; font-size:14px; font-weight:700; color:var(--ink-2) }
.nav .links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px }
/* Wide screens: day/night at the left, the links in the middle, Money Map at the right. */
.nav .tools { display:contents }
.nav .theme-toggle { order:-1 }
.nav .pill { order:1 }
.nav a:hover { color:var(--ink) }
.pill { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; background:var(--btn-bg); color:var(--btn-fg) !important; white-space:nowrap }
.theme-toggle { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; font-size:17px }
.theme-toggle:hover { border-color:var(--edge) }
.pill i { width:9px; height:9px; border-radius:50%; background:conic-gradient(var(--dem) 0 50%, var(--rep) 0) }

/* Hero */
.hero { display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:start; padding:40px 0 64px }
.hero > *, .zip label, .lookup > * { min-width:0 }
.chip { display:inline-flex; gap:8px; align-items:center; padding:7px 12px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:12px; font-weight:800; color:var(--ink-2) }
.chip b { width:8px; height:8px; border-radius:50%; background:#22a06b }
h1 { font-family:Sora,sans-serif; font-weight:800; font-size:clamp(46px, 6vw, 84px); line-height:.98; letter-spacing:-.045em; margin:20px 0 0 }
h1 .mark { background:var(--spectral); -webkit-background-clip:text; background-clip:text; color:transparent }
.sub { font-size:19px; line-height:1.55; color:var(--ink-2); max-width:520px; margin:22px 0 0 }
.zip { margin-top:28px; display:flex; gap:10px; max-width:520px; padding:8px; border-radius:18px; background:var(--card); border:2px solid var(--edge); box-shadow:6px 6px 0 var(--shadow) }
.zip label { display:flex; align-items:center; gap:10px; flex:1; padding-left:12px; font-weight:800; font-size:13px; color:var(--muted) }
.zip input { flex:1; min-width:0; border:0; outline:0; font:inherit; font-family:Sora,sans-serif; font-size:24px; font-weight:700; letter-spacing:.04em; color:var(--ink); background:transparent }
.zip input::placeholder { color:#b8bcc4; font-size:18px; letter-spacing:0; font-weight:600 }
.zip button { border:0; border-radius:12px; padding:0 22px; min-height:54px; background:var(--btn-bg); color:var(--btn-fg); font:inherit; font-size:15px; font-weight:800; cursor:pointer; white-space:nowrap }
.zip-help { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font-size:13px; color:var(--muted) }
.zip-help a { font-weight:800; color:var(--ink); border-bottom:2px solid var(--sun) }

/* Local preview: the visitor's own state, filled in by assets/home.js. */
.local { display:grid; gap:16px }
.place { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--muted) }
.place-tag { padding:8px 14px; border-radius:999px; background:var(--sun); color:#15171c; font-weight:800; transform:rotate(-2deg) }
.place button { border:0; background:none; padding:4px 2px; font:inherit; font-weight:800; color:var(--ink); border-bottom:2px solid var(--sun); cursor:pointer }
.place select { font:inherit; font-weight:700; padding:6px 10px; border-radius:10px; border:1px solid var(--line); background:var(--card) }
.card { padding:20px 22px; border-radius:20px; background:var(--card); border:1px solid var(--line); box-shadow:0 14px 34px #15171c14 }
.card h2 { margin:0; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.card .big { font-family:Sora,sans-serif; font-size:21px; font-weight:700; letter-spacing:-.02em; margin:8px 0 10px }
.card .note { margin:10px 0 0; font-size:12px; color:var(--muted) }
.card .more { display:inline-block; margin-top:12px; font-weight:800; font-size:14px; border-bottom:2px solid var(--sun) }
.race { display:block; padding:10px 0; border-top:1px solid var(--line) }
.race:first-of-type { border-top:0 }
.race-name { display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.who { display:flex; align-items:center; gap:10px; padding:3px 0; font-size:15px; font-weight:700 }
.who em { margin-left:auto; font-style:normal; font-family:Sora,sans-serif; font-weight:700; white-space:nowrap }
.who small { font-size:11px; font-weight:800; color:var(--muted) }
.who .won { color:#127a4d }
.dot { width:10px; height:10px; border-radius:50%; flex:none; background:var(--other) }
.dot.dem { background:var(--dem) } .dot.rep { background:var(--rep) }
.faces { display:flex; flex-wrap:wrap; gap:8px }
.face { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:var(--paper-2); font-size:13px; font-weight:700 }
.face span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--lilac); font-size:10px; font-weight:800 }
.face.dem span { background:var(--sky) } .face.rep span { background:var(--blush) }
.minimap { position:relative; display:block; height:118px; border-radius:14px; background:
    radial-gradient(circle at 50% 55%, #6d7cf722, transparent 45%),
    repeating-linear-gradient(0deg, #15171c0a 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, #15171c0a 0 1px, transparent 1px 20px), var(--paper-2) }
.minimap .you { position:absolute; left:50%; top:55%; width:14px; height:14px; margin:-7px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 6px #15171c22 }
.minimap .m { position:absolute; width:12px; height:12px; margin:-6px; border-radius:50%; border:2px solid var(--card); box-shadow:0 2px 4px #0002 }
.minimap .m.dem { background:var(--dem) } .minimap .m.rep { background:var(--rep) } .minimap .m.even { background:var(--other) }
.skeleton { height:14px; margin:10px 0; border-radius:8px; background:linear-gradient(90deg, var(--paper-2), var(--card), var(--paper-2)); background-size:200% 100%; animation:shimmer 1.4s infinite }
@keyframes shimmer { to { background-position:-200% 0 } }
@media (prefers-reduced-motion:reduce) { .skeleton { animation:none } }

/* Three ways in */
.steps-head { text-align:center; padding:24px 0 6px }
.steps-head p { margin:0; font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.steps-head h2 { font-family:Sora,sans-serif; font-size:clamp(30px, 3.6vw, 48px); letter-spacing:-.035em; margin:10px 0 0 }
.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; padding:34px 0 80px }
.step { position:relative; padding:28px 26px 26px; border-radius:24px; border:2px solid var(--edge); background:var(--card); box-shadow:6px 6px 0 var(--shadow); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s }
.step:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--shadow) }
.step .n { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; font-family:Sora,sans-serif; font-weight:800; font-size:20px; border:2px solid var(--edge); color:var(--ink) }
.s1 .n { background:var(--sun); color:#15171c } .s2 .n { background:var(--mint) } .s3 .n { background:var(--sky) }
.step h3 { font-family:Sora,sans-serif; font-size:24px; letter-spacing:-.025em; margin:18px 0 0 }
.step p { color:var(--ink-2); line-height:1.6; margin:10px 0 18px }
.step .go { margin-top:auto; font-weight:800; font-size:15px }
.step .go::after { content:" →" }
.tag { position:absolute; top:22px; right:22px; padding:5px 10px; border-radius:999px; background:var(--btn-bg); color:var(--btn-fg); font-size:11px; font-weight:800 }

/* Look anyone up */
.lookup { display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; padding:52px 56px; border-radius:32px; background:var(--panel); color:var(--panel-fg); border:1px solid var(--line) }
.lookup h2 { font-family:Sora,sans-serif; font-size:clamp(28px, 3.2vw, 42px); letter-spacing:-.03em; margin:0 }
.lookup p { color:var(--panel-fg); opacity:.78; line-height:1.6 }
.lookup form { position:relative }
.search { display:flex; gap:10px; padding:8px; border-radius:16px; background:#fff }
.search input { flex:1; min-width:0; border:0; outline:0; font:inherit; font-size:17px; padding-left:12px; color:#15171c; background:transparent }
.search button { border:0; border-radius:10px; min-height:50px; padding:0 22px; background:var(--sun); color:#15171c; font:inherit; font-weight:800; cursor:pointer }
.lookup .site-search-results { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 8px); margin:0; padding:6px; list-style:none; max-height:min(420px, 60vh); overflow:auto; background:#fff; color:#15171c; border-radius:14px; box-shadow:0 24px 60px #0006 }
.lookup .site-search-results a { display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"kind name total" "kind detail total"; column-gap:12px; align-items:center; padding:10px 12px; border-radius:10px; min-height:44px }
.lookup .site-search-results a:hover, .lookup .site-search-results a:focus { background:#f3eee2; outline:none }
.site-search-kind { grid-area:kind; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#5f6670; border:1px solid #15171c1f; border-radius:6px; padding:3px 6px }
.lookup .list-name { grid-area:name; font-weight:800; font-size:14px }
.lookup .list-split { grid-area:detail; font-size:12px; color:#5f6670 }
.lookup .list-total { grid-area:total; font-size:12px; font-weight:800 }
.lookup .site-search-place, .lookup .site-search-more { display:block !important; font-weight:800; color:#2f55e8 }
.counts { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px }
.counts a { padding:8px 12px; border-radius:999px; background:var(--panel-chip); font-size:13px; font-weight:700 }
.counts a:hover { background:#ffffff26 }
.counts b { font-family:Sora,sans-serif }

/* Neutral by design */
.neutral { text-align:center; padding:90px 0 70px }
.neutral .one { font-family:Sora,sans-serif; font-size:clamp(26px, 3.4vw, 44px); line-height:1.18; letter-spacing:-.03em; max-width:900px; margin:0 auto }
.neutral .one em { font-style:normal; background:linear-gradient(transparent 62%, var(--sun) 62%) }
:root[data-theme="dark"] .neutral .one em { background:linear-gradient(transparent 62%, #8a6a1c 62%) }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .neutral .one em { background:linear-gradient(transparent 62%, #8a6a1c 62%) } }
.pillars { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px }
.pillars span { padding:12px 18px; border-radius:999px; border:2px solid var(--edge); background:var(--card); font-weight:800 }
.neutral p.small { margin:22px auto 0; max-width:720px; color:var(--muted); font-size:14px; line-height:1.6 }
.neutral p.small a { color:var(--ink); font-weight:800; border-bottom:2px solid var(--sun) }

.notice { max-width:900px; margin:0 auto 40px; text-align:center; font-size:12px; line-height:1.6; color:var(--muted) }
.foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding:30px 0 60px; border-top:1px solid var(--line); color:var(--muted); font-size:13px }
.foot nav { display:flex; flex-wrap:wrap; gap:8px 16px }
.foot a { font-weight:700; color:var(--ink-2) }

@media (max-width:900px) {
  .wrap { width:calc(100% - 32px) }
  .nav .hide-sm { display:none }
  /* Phones: the logo across the top, the header line under it, then day/night and Money Map side by side at the right. */
  .head { gap:0; padding:18px 0 0; border-bottom:0 }
  .logo { padding-bottom:14px; border-bottom:1px solid var(--line) }
  .logo img { width:85vw; height:auto }
  .nav { padding-top:10px }
  .nav .tools { display:flex; align-items:center; gap:10px; margin-left:auto }
  .theme-toggle, .pill { height:36px; box-sizing:border-box }
  .theme-toggle { width:36px; padding:0; font-size:16px }
  .pill { padding:0 14px; font-size:13px }
  .hero { grid-template-columns:1fr; gap:26px; padding:20px 0 40px }
  .sub { font-size:17px }
  .zip { box-shadow:4px 4px 0 var(--ink) }
  .zip input { font-size:20px }
  .zip button { padding:0 16px }
  .steps { grid-template-columns:1fr; padding-bottom:50px }
  .lookup { grid-template-columns:1fr; padding:30px 22px; border-radius:24px; gap:18px }
  .neutral { padding:60px 0 50px }
}