:root{
  /* burnt red - earthy, not a warning red. Light enough to stay
     legible on the dark panel background. */
  --accent:#C4593F; --accent-dim:#8C3B2A; --accent-ink:#E8917B;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 -apple-system,system-ui,Segoe UI,Roboto,sans-serif;
  background:#17100E;color:#F2E9E5;-webkit-text-size-adjust:100%}
header{position:sticky;top:0;background:#241813;padding:14px 16px;border-bottom:1px solid #3A2721;z-index:5}
h1{margin:0;font-size:18px}
.sub{font-size:13px;opacity:.7;margin-top:3px}
.wrap{padding:12px 16px 90px}
a{color:var(--accent-ink);text-decoration:none}
.card{display:block;background:#241813;border:1px solid #3A2721;border-radius:12px;
  padding:13px 15px;margin-bottom:9px}
.card b{font-size:17px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.meta{font-size:13px;opacity:.75;margin-top:3px}
.bar{height:5px;background:#3A2721;border-radius:3px;margin-top:9px;overflow:hidden}
.bar i{display:block;height:100%;background:#4fb477}
.door{background:#241813;border:1px solid #3A2721;border-radius:12px;padding:12px 14px;margin-bottom:9px}
.door.done{opacity:.5}
.door.done .lab{text-decoration:line-through}
.lab{font-weight:600;font-size:16px}
.pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
button{font:inherit;border:1px solid #4C332A;border-radius:9px;padding:9px 13px;
  background:#33221C;color:#F2E9E5;border-color:#4C332A;min-height:42px}
button:active{background:#432D25}
button.sel{background:#2d6b4a;border-color:#3f8d63}
.tag{display:inline-block;font-size:12px;padding:2px 7px;border-radius:20px;background:#3A2721;margin-left:6px}
.r{color:#ff9d7a}.d{color:#7fb6ff}.n{color:#c8b6ff}
.done-note{font-size:12.5px;opacity:.8;margin-top:7px}
.people{margin:9px 0 2px;padding:0;list-style:none}
.people li{display:flex;align-items:baseline;gap:8px;padding:4px 0;border-top:1px solid #33221C}
.people li:first-child{border-top:0}
.nm{font-weight:600;font-size:15.5px}
.pty{font-size:12px;font-weight:700;padding:1px 6px;border-radius:20px}
.pty.Rep{background:#4a2018;color:#ffb199}
.pty.Dem{background:#15304f;color:#9ec8ff}
.pty.oth{background:#2b2545;color:#cdbcff}
.age{font-size:12.5px;opacity:.65}
.flag{font-size:11.5px;padding:1px 6px;border-radius:20px;background:#3a3410;color:#f0dd8a}

/* ---- shared result palette: one colour per outcome, used by pins,
   buttons and the list, so a door reads the same on every screen ---- */
:root{
  --r-none:#8A756D; --r-not_home:#E0A526; --r-supporter:#3FA268;
  --r-undecided:#4F8BD6; --r-opposed:#D2593F; --r-refused:#8C5BC4; --r-moved:#6A7683;
}
/* bottom tab bar, the Pulsar/Sidekick pattern */
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:#241813;
  border-top:1px solid #3A2721;padding-bottom:env(safe-area-inset-bottom);z-index:40}
.tabs a{flex:1;text-align:center;padding:11px 4px 9px;font-size:11.5px;color:#A89189;text-decoration:none}
.tabs a.on{color:var(--accent-ink)}
.tabs .ti{display:block;font-size:19px;line-height:1.1}
/* map */
#map{position:fixed;left:0;right:0;top:0;bottom:0}
.pin{width:26px;height:26px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.5);display:grid;place-items:center;
  font:700 11px/1 -apple-system,system-ui,sans-serif;color:#fff}
.maphead{position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(23,16,14,.94);
  padding:10px 14px;border-bottom:1px solid #3A2721;display:flex;align-items:center;gap:10px}
.maphead a{color:var(--accent-ink);text-decoration:none;font-size:13px}
.maphead b{font-size:15px}
.locbtn{position:fixed;right:12px;bottom:74px;z-index:35;width:44px;height:44px;border-radius:50%;
  background:#241813;border:1px solid #4C332A;color:#F2E9E5;font-size:19px}
/* slide-up door sheet */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#241813;
  border-top:1px solid #4C332A;border-radius:16px 16px 0 0;padding:14px 16px 20px;
  transform:translateY(102%);transition:transform .22s ease;max-height:76vh;overflow:auto}
.sheet.up{transform:translateY(0)}
.sheet-x{float:right;background:none;border:0;color:#A89189;font-size:21px;min-height:auto;padding:0 4px}
.sheet h3{margin:0 0 2px;font-size:17px}
.bigbtns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.bigbtns button{min-height:52px;font-size:15px;font-weight:600;border:0;color:#fff;border-radius:11px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:45;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.net{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.net.on{background:#1d3a2a;color:#7fd8a4}
.net.off{background:#4a2018;color:#ffb199}
.net.syncing{background:#3a3410;color:#f0dd8a}
.dlbtn{font-size:12px;padding:6px 11px;min-height:auto}
.candrow{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:14.5px}
.candrow input{width:20px;height:20px}
.pin.prospect{border-style:dashed}
.addbtn{width:100%;margin-top:10px;min-height:46px;background:#3A2721;border:1px dashed #6B4A3E;
  color:#E8917B;border-radius:11px;font-size:14.5px}
.pin.gap{background:transparent!important;border:2px dashed #22B8CF;color:#22B8CF;font-size:14px}
.legend{position:fixed;left:10px;bottom:74px;z-index:35;background:rgba(23,16,14,.93);
  border:1px solid #3A2721;border-radius:10px;padding:8px 10px;font-size:11.5px;line-height:1.7}
.legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.legend .g{background:transparent;border:2px dashed #22B8CF}
.pin.other{width:15px;height:15px;background:#6B5850!important;border-width:1px;opacity:.75;font-size:0}
.togglebtn{position:fixed;left:10px;bottom:170px;z-index:35;font-size:11.5px;padding:7px 10px;
  background:#241813;border:1px solid #4C332A;color:#E2D3CC;border-radius:9px;min-height:auto}
.togglebtn.on{background:#5A3A2E;border-color:#8C5B47;color:#fff}
.cnote{font-size:11px;opacity:.8;margin-left:4px}
.cnote.warn{color:#f0c674;opacity:1;font-weight:600}
.areaname{color:#E2D3CC;font-weight:600}

/* Primary action - used for the organizer entry point, which was an
   easily-missed 12px link before. */
.btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:10px;min-height:46px;border-radius:11px;
  background:var(--accent);border:1px solid var(--accent);color:#fff;
  font-size:15px;font-weight:600;text-decoration:none}
.btn-primary:active{background:var(--accent-dim)}
.btn-primary .ic{font-size:17px;line-height:1}
.section-lab{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#A89189;margin:16px 0 8px}
/* Signals that change how a canvasser works the door. */
.vm-badge{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:20px;letter-spacing:.02em}
.vm-mail{background:#3a2a10;color:#f0c674}
.vm-early{background:#16303a;color:#8fd3e8}
.vm-eday{background:#2a3a18;color:#bcd98a}
.vm-assist{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:20px;background:#3a1f2c;color:#f0a3c0}
.vm-away{font-size:10.5px;padding:1px 6px;border-radius:20px;background:#33221C;color:#A89189}
.vm-new{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:20px;background:#2b2545;color:#cdbcff}
.vm-phone{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;background:#1d3a2a;color:#7fd8a4;text-decoration:none}

/* Race picker: races are the unit an organizer thinks in, so each race gets a
   header row with its own checkbox and its candidates indented underneath. */
.scopehdr{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#8b97a6);
  margin:16px 0 6px;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.10)}
.scopehdr:first-child{margin-top:4px}
.racehdr{display:flex;align-items:center;gap:8px;padding:7px 8px;margin-top:6px;border-radius:7px;
  background:rgba(255,255,255,.045);cursor:pointer}
.racehdr .rname{font-weight:600;font-size:13.5px;flex:1}
.racehdr .relig{font-size:11px;color:var(--muted,#8b97a6);white-space:nowrap}
.racehdr input{width:16px;height:16px;flex:none}
.candrow[data-contest]{padding-left:26px}
.racedone{font-size:12.5px;color:var(--muted,#8b97a6);padding:4px 8px;opacity:.75}
.racedone:before{content:"\2713\00a0\00a0"}

/* Unregistered homes: a door worth knocking, but a registration conversation
   rather than a vote ask, so it reads differently in the list. */
.door.gap{border-left:3px solid #9C6ADE}
.gapchip{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  background:#2f2447;color:#c9a9ff;padding:1px 6px;border-radius:20px;margin-left:6px;vertical-align:1px}

/* dropdowns on the door screens */
details.dd{margin-top:9px;border:1px solid #4C332A;border-radius:10px;background:#2A1C17}
details.dd>summary{cursor:pointer;padding:9px 12px;font-size:14px;list-style:none;color:#E8917B}
details.dd>summary::-webkit-details-marker{display:none}
details.dd>summary::after{content:"\25BE";float:right}
details.dd[open]>summary::after{content:"\25B4"}
details.dd .ddbody,details.dd>textarea,details.dd>div,details.dd>button{margin:0 12px 10px}
details.dd>textarea{width:calc(100% - 24px);min-height:60px;font:inherit;font-size:15px}
.ddbody .bl-h{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:#A89189;margin:10px 0 4px}
.ddbody .bl-m{font-size:14px;margin-bottom:9px}
.ddbody .bl-m b{display:block}

.oldnote{font-size:14px;margin-bottom:6px;white-space:pre-wrap}

.aptchip{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;background:#3A2A12;color:#E0A526;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle}

/* app shell on list pages: the tab bar is the last row of a flex column, not position:fixed,
   because iPad Safari leaves fixed bars floating mid-page after a pinch-zoom or the keyboard.
   Only the .wrap right before .tabs scrolls. The map page (no .wrap) keeps its own layout. */
body:has(> .wrap):has(> .tabs){display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
body:has(> .wrap):has(> .tabs) > header{flex:0 0 auto;position:static}
body:has(> .wrap):has(> .tabs) > .wrap{flex:0 0 auto}
body:has(> .wrap):has(> .tabs) > .wrap:has(+ .tabs){flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:24px}
body:has(> .wrap):has(> .tabs) > .tabs{position:static;flex:0 0 auto}