/* Self-hosted so no visitor's IP is sent to Google's font servers.
   Run tools/fetch-fonts.sh to populate /fonts. Without it the stack below
   falls back to system faces and the app still looks fine. */
@font-face{font-family:Overpass;src:url(fonts/overpass-800.woff2) format("woff2");font-weight:800 900;font-display:swap}
@font-face{font-family:Overpass;src:url(fonts/overpass-400.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Overpass Mono";src:url(fonts/overpass-mono-400.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/plex-400.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/plex-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --sign-green:#04553C;
  --sign-green-lo:#03412E;
  --asphalt:#17191A;
  --asphalt-lo:#101213;
  --panel:#1F2325;
  --reflective:#F2F5F0;
  --centerline:#F4C430;
  --shoulder:#8A918C;
  --rule:#2E3436;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--asphalt-lo);
  color:var(--reflective);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit;color:inherit}

/* ---------- guide sign header ---------- */
.sign{
  background:var(--sign-green);
  padding:10px;
  border-bottom:1px solid #000;
}
.sign-inner{
  border:3px solid var(--reflective);
  border-radius:10px;
  padding:14px 18px;
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:20px;row-gap:12px;
  align-items:center;
}
.sign h1{grid-area:1/1}
.account{grid-area:1/2;justify-self:end}
.road{grid-area:2/1}
.tally{grid-area:2/2;justify-self:end}
.sign h1{
  margin:0;
  font-family:Overpass,"Arial Narrow",system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(22px,3.4vw,38px);
  letter-spacing:-.02em;
  text-transform:uppercase;
  line-height:.95;
}
.sign h1 small{
  display:block;
  font-family:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:400;
  font-size:12px;
  letter-spacing:.16em;
  opacity:.8;
  margin-top:6px;
}
.tally{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.tally b{font-size:34px;font-weight:600;line-height:1}
.tally span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}

/* road-stripe progress */
.road{
  position:relative;height:14px;border-radius:7px;overflow:hidden;
  background:var(--asphalt);width:100%;margin-top:2px;
}
.road-fill{
  height:100%;width:0;background:#0B7A57;transition:width .3s ease;
}
.road::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);
  background:repeating-linear-gradient(to right,var(--centerline) 0 14px,transparent 14px 28px);
  opacity:.55;
}

/* ---------- layout ---------- */
.wrap{display:flex;height:calc(100% - var(--head,0px));min-height:0}
main{display:flex;flex-direction:column;height:100vh;height:100dvh}
.body{display:flex;flex:1;min-height:0}
aside{
  width:380px;flex:0 0 380px;display:flex;flex-direction:column;
  background:var(--panel);border-right:1px solid #000;min-height:0;
}
#map{flex:1;min-width:0;background:#0d0f10}

/* ---------- controls ---------- */
.tabs{display:none;background:var(--asphalt);border-bottom:1px solid #000}
.tab{
  flex:1;padding:13px 6px;background:none;border:0;border-bottom:3px solid transparent;
  cursor:pointer;color:var(--shoulder);
  font-family:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
.tab[aria-selected="true"]{color:var(--reflective);border-bottom-color:var(--centerline)}
.tab:focus-visible{outline:2px solid var(--centerline);outline-offset:-3px}
.controls{padding:12px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:10px}
.segmented{display:flex;gap:6px}
.seg{
  flex:1;padding:7px 4px;border-radius:6px;cursor:pointer;
  border:1px solid var(--rule);background:transparent;color:var(--shoulder);
  font-family:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.seg:hover{color:var(--reflective);border-color:#48524d}
.seg[aria-pressed="true"]{background:var(--sign-green);border-color:#0B7A57;color:#fff}
.reset{
  align-self:flex-start;background:none;border:0;padding:2px 0;cursor:pointer;
  color:var(--shoulder);font-size:12px;text-decoration:underline;text-underline-offset:3px;
}
.reset:hover{color:var(--centerline)}

/* ---------- list ---------- */
.list{overflow-y:auto;flex:1;padding-bottom:24px}
.verse{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;gap:10px;
  background:var(--sign-green-lo);border-top:1px solid #000;border-bottom:1px solid #000;
  padding:7px 12px;
  font-family:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.verse em{margin-left:auto;font-style:normal;opacity:.75}
.row{
  display:flex;align-items:center;gap:11px;padding:8px 12px;
  border-bottom:1px solid var(--rule);cursor:pointer;
}
.row:hover{background:#262b2d}
.row input{
  appearance:none;width:17px;height:17px;flex:0 0 17px;border-radius:4px;
  border:2px solid var(--shoulder);background:transparent;cursor:pointer;position:relative;
}
.row input:checked{background:#0B7A57;border-color:#0B7A57}
.row input:checked::after{
  content:"";position:absolute;left:4.5px;top:1px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.row input:focus-visible,.seg:focus-visible,.find:focus-visible{
  outline:2px solid var(--centerline);outline-offset:2px;
}
.name{font-weight:500;font-size:14.5px}
.region{font-family:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--shoulder);margin-top:1px}
.row.done .name{color:var(--shoulder);text-decoration:line-through;text-decoration-color:#0B7A57}
.find{
  margin-left:auto;opacity:0;background:none;border:1px solid var(--rule);border-radius:5px;
  color:var(--shoulder);cursor:pointer;padding:3px 8px;font-size:11px;
  font-family:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;
}
.row:hover .find,.find:focus-visible{opacity:1}
@media (hover:none){.find{opacity:1}}
.find:hover{color:var(--centerline);border-color:var(--centerline)}
.empty{padding:26px 16px;color:var(--shoulder);font-size:14px;text-align:center}

/* ---------- map markers ---------- */
.pin{display:grid;place-items:center}
.pin svg{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.no-map .find{display:none}
.map-note{
  max-width:34ch;margin:auto;padding:24px;text-align:center;line-height:1.6;
  color:var(--shoulder);font-size:14px;
}
#map:has(.map-note){display:grid;place-items:center}
.leaflet-container{font-family:"IBM Plex Sans",sans-serif;background:#0d0f10}
.leaflet-popup-content-wrapper{background:var(--panel);color:var(--reflective);border-radius:8px}
.leaflet-popup-tip{background:var(--panel)}
.leaflet-popup-content{margin:11px 14px;font-size:13.5px}
.pop-name{font-family:Overpass,"Arial Narrow",system-ui,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.pop-region{font-family:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--shoulder);margin:2px 0 8px}
.pop-btn{
  width:100%;padding:6px 10px;border-radius:5px;cursor:pointer;border:1px solid #0B7A57;
  background:var(--sign-green);color:#fff;font-family:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.pop-btn.undo{background:transparent;border-color:var(--rule);color:var(--shoulder)}
.leaflet-bar a{background:var(--panel);color:var(--reflective);border-bottom-color:var(--rule)}
.leaflet-bar a:hover{background:#2b3134;color:#fff}
.leaflet-control-attribution{background:rgba(16,18,19,.8)!important;color:var(--shoulder)!important}
.leaflet-control-attribution a{color:var(--shoulder)!important}

@media (max-width:900px){
  .tabs{display:flex}
  .body{flex-direction:column}
  aside{width:100%;flex:1 1 auto;border-right:0;min-height:0}
  #map{flex:1 1 auto;min-height:0}
  body.view-list #map{display:none}
  body.view-map aside{display:none}

  /* slimmer sign so the list gets the screen */
  .sign{padding:7px}
  .sign-inner{padding:11px 13px;gap:9px 14px;border-width:2px}
  .sign h1 small{margin-top:4px;font-size:11px}
  .tally b{font-size:26px}
  .tally span{font-size:11px}

  /* thumb-sized targets */
  .controls{padding:10px;gap:8px}
  .seg{padding:11px 4px}
  .reset{padding:4px 0}
  .row{padding:13px 14px;min-height:54px;gap:13px}
  .row input{width:22px;height:22px;flex-basis:22px;border-radius:5px}
  .row input:checked::after{left:6px;top:2px;width:5px;height:11px;border-width:0 2.5px 2.5px 0}
  .name{font-size:16px}
  .region{font-size:11.5px}
  .find{padding:7px 11px;font-size:11.5px}
  .verse{padding:9px 14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- account / sync ---------- */
.account{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.who{display:flex;align-items:center;gap:8px}
.avatar{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--reflective);background:var(--asphalt)}
.who-name{font-size:13px;font-weight:600;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbtn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--reflective);color:#1F1F1F;border:0;border-radius:6px;
  padding:9px 14px;font-weight:600;font-size:13.5px;white-space:nowrap;
}
.gbtn:hover{background:#fff}
.gbtn:disabled{opacity:.5;cursor:default}
.gbtn svg{width:17px;height:17px;flex:0 0 17px}
.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;color:var(--reflective);
  font-family:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:3px;opacity:.85;
}
.linkbtn:hover{opacity:1;color:var(--centerline)}
.sync{
  font-family:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;opacity:.75;
}
.sync.warn{color:var(--centerline);opacity:1}
.gbtn:focus-visible,.linkbtn:focus-visible,.tab:focus-visible{outline:2px solid var(--centerline);outline-offset:3px}

/* ---------- setup notice (config not filled in yet) ---------- */
.setup{
  margin:0;padding:11px 16px;background:#4A2E05;border-bottom:1px solid #000;
  font-size:13px;line-height:1.5;color:#F6E2BD;
}
.setup code{font-family:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:rgba(0,0,0,.35);padding:1px 5px;border-radius:3px}
.hidden{display:none!important}

@media (max-width:900px){
  .sign-inner{column-gap:12px}
  .who-name{display:none}
  .gbtn{padding:8px 11px;font-size:12.5px;gap:7px}
  .account{gap:4px}
}


/* ---------- initials avatar (no remote profile image) ---------- */
.avatar{
  width:26px;height:26px;border-radius:50%;border:1.5px solid var(--reflective);
  background:var(--sign-green-lo);display:grid;place-items:center;
  font-family:"Overpass Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.02em;
}

/* ---------- footer ---------- */
.foot{
  padding:14px 14px 22px;border-top:1px solid var(--rule);
  font-size:12px;color:var(--shoulder);text-align:center;
}
.foot a{color:var(--shoulder);text-underline-offset:3px}
.foot a:hover{color:var(--centerline)}

/* ---------- data dialog ---------- */
dialog{
  border:0;border-radius:12px;padding:0;max-width:440px;width:calc(100% - 32px);
  background:var(--panel);color:var(--reflective);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
dialog::backdrop{background:rgba(0,0,0,.66)}
dialog h2{
  margin:0;padding:16px 20px;background:var(--sign-green);
  font-family:Overpass,sans-serif;font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.01em;
}
.dlg-copy{margin:0;padding:16px 20px 4px;font-size:13.5px;line-height:1.6;color:#C9D2CC}
.dlg-copy a{color:var(--centerline)}
.dlg-actions{display:flex;flex-direction:column;gap:9px;padding:14px 20px 4px}
.dlg-btn{
  padding:12px 14px;border-radius:7px;cursor:pointer;text-align:left;
  background:var(--asphalt);border:1px solid var(--rule);color:var(--reflective);font-size:14px;
}
.dlg-btn:hover{border-color:#4c5754}
.dlg-btn.danger{border-color:#7A2E2E;color:#FFB4A8}
.dlg-btn.danger:hover{background:#3A1A1A}
.dlg-btn.quiet{background:none;border-color:transparent;color:var(--shoulder);text-align:center}
.dlg-btn:focus-visible{outline:2px solid var(--centerline);outline-offset:2px}
.dlg-status{
  margin:0;padding:6px 20px 18px;min-height:18px;
  font-family:"Overpass Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--centerline);
}

/* ---------- consent banner ---------- */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:2000;
  background:var(--panel);border-top:3px solid var(--centerline);
  box-shadow:0 -12px 40px rgba(0,0,0,.5);
}
.consent-inner{
  max-width:1000px;margin:0 auto;padding:16px 20px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.consent-copy{flex:1 1 340px;min-width:0}
.consent-copy strong{
  display:block;font-family:Overpass,sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;font-size:14px;margin-bottom:5px;
}
.consent-copy p{margin:0;font-size:13.5px;line-height:1.55;color:#C9D2CC}
.consent-copy a{color:var(--centerline)}
.consent-current{
  margin-top:6px!important;font-family:"Overpass Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--shoulder)!important;
}
.consent-current:empty{display:none}

/* Both choices get identical weight — no dark pattern where "allow" is a
   bright button and "no" is a grey link. */
.consent-buttons{display:flex;gap:10px;flex:0 0 auto}
.consent-btn{
  min-width:130px;padding:12px 18px;border-radius:7px;cursor:pointer;
  background:var(--asphalt);border:1.5px solid var(--reflective);color:var(--reflective);
  font-family:"Overpass Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
}
.consent-btn:hover{background:var(--sign-green-lo);border-color:var(--centerline)}
.consent-btn:focus-visible{outline:2px solid var(--centerline);outline-offset:3px}

@media (max-width:900px){
  .consent-inner{padding:14px;gap:14px}
  .consent-buttons{width:100%}
  .consent-btn{flex:1;min-width:0;padding:13px 8px}
}