:root{
  --ink:#1d1a17; --muted:#7a726a; --line:#e2dccf; --paper:#fbf7ef;
  --red:#c0392b; --gold:#c79a2b; --link:#1f5e8c;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink)}
#map{position:absolute;inset:0}
.leaflet-container{background:#aadaff}

/* Star marker (always shown, replaces circle pin) */
.star-marker{display:flex;align-items:center;justify-content:center}
.star-marker svg{width:22px;height:22px;fill:#facc15;stroke:#a16207;stroke-width:1.2;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5))}
.star-marker.selected svg{stroke:#a16207;stroke-width:1.6;
  filter:drop-shadow(0 0 0 #facc15) drop-shadow(0 0 4px #facc15) drop-shadow(0 1px 1.5px rgba(0,0,0,.5))}

/* Stop accidental text selection on zoom +/- when double-clicking */
.leaflet-control-zoom a,
.leaflet-control-zoom a span{
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer
}

/* Marker hover tooltip */
.leaflet-tooltip{
  background:var(--paper);border:1px solid var(--line);color:var(--ink);
  font-size:12.5px;padding:3px 8px;border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.2)
}
.leaflet-tooltip-top:before{border-top-color:var(--line)}
/* Tooltip pinned to the selected marker */
.leaflet-tooltip.persistent-tip{
  font-weight:600;border-color:var(--gold);background:#fff6df
}
.leaflet-tooltip-top.persistent-tip:before{border-top-color:var(--gold)}

/* top-right search bar */
#bar{position:absolute;z-index:1000;top:12px;right:12px;
  display:flex;flex-direction:column;align-items:stretch;width:280px;max-width:calc(100vw - 24px)}
.barRow{display:flex;gap:8px;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:6px 8px;
  box-shadow:0 4px 18px rgba(0,0,0,.15)}
#search{border:none;outline:none;background:transparent;font-size:14px;flex:1;padding:4px 6px;min-width:0}
#bar .pill{font-size:12px;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:4px 9px;cursor:pointer;white-space:nowrap;color:var(--muted);line-height:1}
#bar .pill:hover{background:#f3ecd9;color:var(--ink)}
#count{font-size:11px;color:var(--muted);text-align:right;margin-top:4px;padding-right:4px}
#suggest{margin-top:6px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.15);max-height:50vh;overflow:auto;display:none}
#suggest.show{display:block}
.sg-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13px}
.sg-item:last-child{border-bottom:none}
.sg-item:hover,.sg-item.active{background:#f1ead8}
.sg-name{font-weight:600}
.sg-aka{color:var(--muted);font-size:11.5px;margin-left:4px}
.sg-verses{color:var(--muted);font-size:11.5px;margin-top:1px}

/* bottom-left layer swatch */
#layerSwatch{position:absolute;z-index:1000;left:12px;bottom:12px;width:62px;height:62px;
  border-radius:12px;overflow:hidden;border:2px solid #fff;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.3);background-size:cover;background-position:center}
#layerSwatch .lbl{position:absolute;left:0;right:0;bottom:0;background:#000a;color:#fff;
  font-size:10px;text-align:center;padding:2px;letter-spacing:.04em}
#panel.with-swatch{left:84px}

/* info button bottom-right */
#infoBtn{position:absolute;z-index:1000;right:12px;bottom:12px;width:36px;height:36px;
  border-radius:50%;border:none;background:var(--paper);color:var(--ink);
  font-family:'Spectral',Georgia,serif;font-style:italic;font-weight:600;font-size:18px;
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);border:1px solid var(--line)}
#infoBtn:hover{background:#fff}

/* place panel */
#panel{position:absolute;z-index:1000;left:12px;bottom:12px;width:330px;max-width:calc(100vw - 24px);
  max-height:62vh;background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);display:none;flex-direction:column;overflow:hidden}
#panel.show{display:flex}
.p-head{display:flex;align-items:flex-start;gap:8px;padding:14px 14px 8px}
.p-title{font-family:'Spectral',Georgia,serif;font-weight:600;font-size:22px;line-height:1.15;margin:0}
.p-sub{font-size:14px;color:var(--muted);font-weight:400;margin-left:6px}
.iconbtn{border:none;background:transparent;cursor:pointer;padding:3px;line-height:0;border-radius:8px}
.iconbtn:hover{background:#0000000d}
.iconbtn.pclose{font-size:13px;color:var(--muted);width:22px;height:22px;display:flex;
  align-items:center;justify-content:center;margin-top:2px}
.iconbtn.pclose:hover{color:var(--ink)}
.star svg{width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:1.6}
.star.on svg{fill:#facc15;stroke:#a16207}
.p-body{padding:0 14px 14px;overflow:auto}

/* OpenBible.info image */
.p-img-wrap{position:relative;margin:0 0 12px;border-radius:10px;overflow:hidden;
  background:#0001;line-height:0}
.p-img-wrap.hidden{background:transparent}
.p-img-wrap.hidden .p-img{display:none}
.p-img{display:block;width:100%;height:auto;max-height:240px;object-fit:cover}
.p-img-toggle{position:absolute;left:10px;bottom:10px;
  background:#000000aa;color:#fff;border:none;border-radius:6px;
  padding:4px 10px;font:inherit;font-size:11.5px;line-height:1.3;cursor:pointer;
  backdrop-filter:blur(4px)}
.p-img-toggle:hover{background:#000000cc}
.p-img-wrap.hidden .p-img-toggle{position:static;display:inline-block;
  background:transparent;color:var(--muted);margin:0 0 8px;
  border:1px solid var(--line);backdrop-filter:none}
.p-img-wrap.hidden .p-img-toggle:hover{background:#0000001a}
.p-img-link{position:absolute;right:10px;bottom:10px;
  background:#000000aa;color:#fff;text-decoration:none;border-radius:6px;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  font-size:13px;backdrop-filter:blur(4px)}
.p-img-link:hover{background:#000000cc}
.p-img-wrap.hidden .p-img-link{display:none}
.verses{font-size:12.5px;line-height:1.7;margin-top:2px}
a.verse{color:var(--link);cursor:pointer;text-decoration:none;border-bottom:1px dotted #1f5e8c66}
a.verse:hover{border-bottom-style:solid}
.aka-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.subbox{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;margin-bottom:8px}
.aka-name{font-size:15px}
.aka-note{font-size:12.5px;color:var(--muted);margin-left:6px}
.aka-note::before{content:'('}
.aka-note::after{content:')'}

/* modal (verse + info) */
#ov,#infoOv{position:fixed;inset:0;z-index:2000;background:#0006;display:none;
  align-items:center;justify-content:center;padding:20px}
#ov.show,#infoOv.show{display:flex}
.modal{background:var(--paper);border-radius:14px;max-width:520px;width:100%;max-height:80vh;
  display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:hidden}
.m-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.m-nav{border:none;background:transparent;cursor:pointer;color:var(--muted);
  font-size:22px;line-height:1;padding:0 4px;font-family:inherit;flex-shrink:0;
  border-radius:6px}
.m-nav:hover{background:#0000000d;color:var(--ink)}
.m-nav:disabled{opacity:.35;cursor:default;background:transparent;color:var(--muted)}
.m-ref{font-family:'Spectral',Georgia,serif;font-weight:600;font-size:18px;flex:1;min-width:0}
.m-ref-btn{border:none;background:transparent;text-align:left;cursor:pointer;
  padding:0;color:var(--ink);
  font-family:'Spectral',Georgia,serif;font-weight:600;font-size:18px}
.m-ref-btn span{border-bottom:1px dotted var(--muted)}
.m-ref-btn:hover span{border-bottom-color:var(--link);color:var(--link)}

/* Verse navigator modal */
#navOv{position:fixed;inset:0;z-index:2500;background:#0006;display:none;
  align-items:center;justify-content:center;padding:20px}
#navOv.show{display:flex}
.nav-modal{max-width:480px}
.nav-body{padding:18px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.nav-row{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap;min-width:0}
.nav-select{border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:6px 26px 6px 10px;font:inherit;font-size:14px;cursor:pointer;min-width:0;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%237a726a' d='M6 8L2 4h8z'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;background-size:10px}
.nav-select:focus{outline:none;border-color:var(--gold)}
.nav-select.short{width:5em;padding:6px 22px 6px 8px;text-align:center}
.nav-sep{font-size:18px;color:var(--muted)}
.nav-go{border:none;background:var(--gold);color:#3a2a00;font-weight:600;
  border-radius:8px;padding:7px 18px;font-size:14px;cursor:pointer;font-family:inherit}
.nav-go:hover{background:#e0b13a}

/* Search bar icon pill (clear / filter) */
#bar .pill.iconpill{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;font-size:11px;line-height:1
}
#filterBtn{color:var(--muted)}
#filterBtn.on{background:#fff6df;border-color:var(--gold);color:#7a5a00}

/* Filter menu */
#filterMenu{margin-top:6px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.15);
  max-height:65vh;overflow-y:auto;padding:6px 0;font-size:13px;
  scrollbar-width:thin;scrollbar-color:#bcb3a3 transparent}
#filterMenu[hidden]{display:none}
#filterMenu::-webkit-scrollbar{width:8px}
#filterMenu::-webkit-scrollbar-thumb{background:#bcb3a3;border-radius:4px;
  border:2px solid var(--paper);background-clip:padding-box}
#filterMenu .fm-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:6px 12px 2px;font-weight:600}
#filterMenu .fm-row{display:flex;align-items:center;gap:8px;
  padding:6px 10px 6px 32px;cursor:pointer;user-select:none;outline:none;
  position:relative}
#filterMenu .fm-group-row{gap:8px}
#filterMenu .fm-row:hover{background:#f1ead8}
#filterMenu .fm-row:focus-visible{background:#f1ead8;box-shadow:inset 0 0 0 2px var(--gold)}
#filterMenu .fm-check{
  width:16px;height:16px;border-radius:4px;border:1.5px solid #bbb1a0;
  background:#fff;flex-shrink:0;position:relative;transition:background .1s,border-color .1s
}
#filterMenu .fm-row[data-state="on"] .fm-check{
  background:var(--gold);border-color:var(--gold)
}
#filterMenu .fm-row[data-state="on"] .fm-check::after{
  content:'';position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)
}
#filterMenu .fm-row[data-state="partial"] .fm-check{
  background:var(--gold);border-color:var(--gold)
}
#filterMenu .fm-row[data-state="partial"] .fm-check::after{
  content:'';position:absolute;left:3px;top:6px;width:8px;height:2px;background:#fff
}
#filterMenu .fm-label{flex:1;min-width:0}
#filterMenu .fm-count{font-size:11px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
#filterMenu .fm-divider{height:1px;background:var(--line);margin:4px 0}
#filterMenu .fm-arrow{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  border:none;background:transparent;cursor:pointer;padding:0;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:18px;line-height:1;border-radius:4px;
  transition:transform .12s ease;flex-shrink:0
}
#filterMenu .fm-arrow:hover{background:#0000000d;color:var(--ink)}
#filterMenu .fm-arrow.collapsed{transform:translateY(-50%) rotate(-90deg)}
#filterMenu .fm-group-row{gap:6px}
.m-version{position:relative;font-family:inherit}
.m-version-btn{border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:8px;padding:4px 22px 4px 8px;font-size:12px;cursor:pointer;
  font-family:inherit;line-height:1.3;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%237a726a' d='M6 8L2 4h8z'/></svg>");
  background-repeat:no-repeat;background-position:right 6px center;background-size:10px}
.m-version-btn:hover{background-color:#f7f1e0}
.m-version-btn:focus{outline:none;border-color:var(--gold)}
.m-version-menu{position:fixed;
  margin:0;padding:4px 0;list-style:none;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  min-width:240px;max-height:60vh;overflow-y:auto;z-index:3000;
  scrollbar-width:thin;
  scrollbar-color:#bcb3a3 transparent}
.m-version-menu::-webkit-scrollbar{width:8px}
.m-version-menu::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.m-version-menu::-webkit-scrollbar-thumb{background:#bcb3a3;border-radius:4px;
  border:2px solid var(--paper);background-clip:padding-box}
.m-version-menu::-webkit-scrollbar-thumb:hover{background:#9c907d;
  border:2px solid var(--paper);background-clip:padding-box}
.m-version-menu[hidden]{display:none}
.m-version-menu .group{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:6px 12px 2px}
.m-version-menu li.opt{padding:6px 12px;cursor:pointer;font-size:13px;line-height:1.3;
  display:flex;align-items:baseline;gap:6px}
.m-version-menu li.opt:hover{background:#f1ead8}
.m-version-menu li.opt[aria-selected="true"]{background:#fff6df}
.m-version-menu li.opt .full{flex:1;min-width:0}
.m-version-menu li.opt .acr{color:var(--muted);font-size:11.5px;flex-shrink:0}
.m-body{padding:16px;overflow:auto;font-size:15.5px;line-height:1.6;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink)}
.m-body i, .m-body em{font-style:italic}
.m-body .jesus{color:var(--red)}
.m-body.err{color:#7a3b34;font-size:14px}
.also-mentioned{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.6;font-style:normal}
.also-mentioned a.place-link{color:var(--link);cursor:pointer;text-decoration:none;
  border-bottom:1px dotted #1f5e8c66}
.also-mentioned a.place-link:hover{border-bottom-style:solid}
.also-mentioned .place-unloc{color:var(--muted);cursor:help;
  border-bottom:1px dotted var(--muted)}

.sg-item.unloc{cursor:default;opacity:.55}
.sg-item.unloc:hover{background:transparent}
.x{font-size:18px;width:30px;height:30px;border-radius:8px;border:none;background:transparent;cursor:pointer}
.x:hover{background:#00000010}
.info-body{font-style:normal;color:var(--ink)}
.info-body h3{font-family:'Spectral',Georgia,serif;margin:0 0 10px}
.info-body p{margin:6px 0;font-size:14px}
.info-body a{color:var(--link)}

/* ---- Mobile layout ---- */
@media (max-width: 600px){
  /* Leave room on the left for the Leaflet zoom +/- buttons */
  #bar{top:8px;right:8px;left:auto;width:60vw;max-width:280px}
  .barRow{padding:5px 7px}
  #search{font-size:13.5px}
  #count{display:none}
  #layerSwatch{left:8px;bottom:8px;width:54px;height:54px}
  #layerSwatch .lbl{font-size:9px}
  #infoBtn{width:32px;height:32px;font-size:16px;right:8px;bottom:8px}
  #panel{left:8px;right:8px;bottom:8px;width:auto;max-width:none;max-height:55vh}
  #panel.with-swatch{left:8px}
  .p-head{padding:12px 12px 6px}
  .p-title{font-size:20px}
  .p-body{padding:0 12px 12px}
  /* Hide the basemap swatch and info button while a place panel is open,
     since the panel takes the full width at the bottom. */
  #panel.show ~ #layerSwatch,
  #panel.show ~ #infoBtn{display:none}
}