:root {
  --bg:#0e1a24; --card:#fffaf2; --ink:#132029; --muted:#5a6a76;
  --tide:#2a6f7a; --foam:#f4eee4; --line:#e4d9c5; --g:#1f6b4a; --y:#c45c26; --ta:#2f5f8a;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--foam); color: var(--ink); line-height:1.4;
}
header {
  position: sticky; top: 0; z-index: 8;
  background: var(--bg); color: #f6f1e7;
  padding: 12px 14px 10px;
  padding-top: calc(12px + env(safe-area-inset-top));
}
.topnav {
  display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:0 0 10px; padding-bottom:2px;
}
.topnav a {
  flex:0 0 auto; color:#d7e4ec; text-decoration:none; font-size:13px; font-weight:650;
  border:1px solid #355066; border-radius:999px; padding:6px 12px; background:#163042;
}
.topnav a.on { background:#2a6f7a; border-color:#3f8b96; color:#fff; }
h1 { margin:0; font-size:1.25rem; letter-spacing:-.02em; }
.sub { font-size:12px; color:#b7c5cf; margin:4px 0 10px; }
.tools { display:flex; flex-direction:column; gap:8px; }
.tools input, .tools select {
  width:100%; font:inherit; font-size:16px;
  padding:11px 12px; border-radius:10px;
  border:1px solid #355066; background:#0f2433; color:#f6f1e7;
}
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.count { font-size:12px; color:#9eb0bd; }
.sorts, .vibes, .who { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 0; }
.sorts button, .vibes button {
  flex:0 0 auto; border:1px solid #355066; background:#163042; color:#e8f0f4;
  border-radius:999px; padding:7px 12px; font-size:13px;
}
.sorts button.on { background:#2a6f7a; border-color:#3f8b96; }
.vibes button {
  border-color:#c9a24a; background:#2a2418; color:#f3e6c8; font-weight:650;
}
.vibes button.on { background:#c9a24a; color:#1a1408; }
.who-lab { font-size:12px; color:#9eb0bd; flex:0 0 auto; align-self:center; }
.who button {
  flex:0 0 auto; border:1px solid #355066; background:#163042; color:#e8f0f4;
  border-radius:999px; padding:8px 14px; font-size:13px; font-weight:650;
}
.who button[data-who="Michael"] { border-color:#9b6adf; }
.who button[data-who="Stephanie"] { border-color:#4ec4d0; }
.who button[data-who="Steven"] { border-color:#4cba78; }
.who button[data-who="Michael"].on { background:#6b2db8; border-color:#c9a6ff; color:#fff; }
.who button[data-who="Stephanie"].on { background:#178a96; border-color:#7de0ea; color:#fff; }
.who button[data-who="Steven"].on { background:#1f8a4c; border-color:#9ee0b5; color:#fff; }
.wrap { max-width:720px; margin:0 auto; padding:12px 12px 40px; }
.note {
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px; font-size:13px; color:#33424c; margin-bottom:12px;
}
.list { display:flex; flex-direction:column; gap:10px; }
.card {
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 13px; box-shadow:0 6px 18px rgba(16,32,43,.06);
}
.card.hidden { display:none; }
.name { font-size:1.05rem; font-weight:750; margin:0 0 2px; }
.meta { font-size:13px; color:var(--muted); }
.blurb { font-size:13px; color:#3e4d57; margin-top:6px; }
.scores { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.scores.four { grid-template-columns:1fr 1fr; }
.pill { background:#f3ebe0; border-radius:10px; padding:8px 8px 7px; text-align:center; }
.pill .lab { display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pill .num { font-size:1.15rem; font-weight:800; }
.pill .n { font-size:11px; color:var(--muted); }
.g .num { color:var(--g); }
.y .num { color:var(--y); }
.ta .num { color:var(--ta); }
.maps, .site {
  display:inline-block; margin-top:8px; margin-right:10px; font-size:13px; color:#1b4f8a;
  text-decoration:none; font-weight:600;
}
.tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.tag { font-size:11px; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:3px 8px; font-weight:700; }
.tag.fancy { background:#efe3c4; color:#6a4e12; }
.tag.trendy { background:#eadcf4; color:#5a2d7a; }
.tag.Reform { background:#e8eefc; color:#2a4a8a; }
.tag.Conservative { background:#e7f3ea; color:#1f5a32; }
.tag.Egalitarian { background:#f3e9ff; color:#5c2a9a; }
.tag.Orthodox { background:#fdeee6; color:#8a3a12; }
.tag.Chabad { background:#e8f4fb; color:#1a5f8a; }
.tag.Cultural { background:#f4efe4; color:#5a4a28; }
.marks { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.emos { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.emo {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 7px; border-radius:10px;
  font-size:20px; line-height:1; border:0; cursor:pointer;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.emo.Michael { background:#6b2db8; box-shadow:0 0 0 2px #d7b8ff inset; }
.emo.Stephanie { background:#178a96; box-shadow:0 0 0 2px #9eebf2 inset; }
.emo.Steven { background:#1f8a4c; box-shadow:0 0 0 2px #b4ecc8 inset; }
.emo.pick { background:#ece4d6; box-shadow:none; }
.mark-note {
  font-size:13px; border-radius:10px; padding:7px 10px; line-height:1.35;
  display:flex; gap:8px; align-items:flex-start;
}
.mark-note .who-n { font-weight:750; }
.mark-note .txt { flex:1; }
.mark-note .x { border:0; background:transparent; color:inherit; opacity:.6; cursor:pointer; font-size:16px; }
.mark-note.Michael { background:#f3e9ff; color:#5c2a9a; }
.mark-note.Stephanie { background:#e4f7f8; color:#0f6e78; }
.mark-note.Steven { background:#e5f6eb; color:#146b3a; }
.add-note { display:flex; gap:6px; margin-top:2px; }
.add-note input {
  flex:1; font:inherit; font-size:16px; padding:8px 10px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--ink); min-width:0;
}
.add-note button {
  flex:0 0 auto; border:0; border-radius:10px; padding:8px 12px;
  font-size:13px; font-weight:700; background:#163042; color:#f6f1e7;
}
.need-who { font-size:12px; color:var(--muted); }
footer { text-align:center; color:#6a5f52; font-size:12px; padding:8px 16px 28px; }
#map { height: calc(100dvh - 210px); min-height: 420px; width:100%; }
.leaflet-popup-content { min-width: 240px; max-width: 300px; }
.star-icon {
  font-size:22px; line-height:28px; text-align:center; color:#1c4a9a;
  text-shadow: 0 0 2px #fff;
}
@media (min-width: 880px) {
  .wrap { max-width:980px; }
  .list { display:grid; grid-template-columns:1fr 1fr; }
  .scores, .scores.four { grid-template-columns:1fr 1fr 1fr 1fr; }
  .tools { flex-direction:row; flex-wrap:wrap; align-items:center; }
  .tools input { flex:1; width:auto; }
  .row2 { display:contents; }
  .tools select { width:auto; min-width:140px; }
}