:root{
  --cream:#F6F1E7; --panel:#FDFBF5; --ink:#21302A; --ink-soft:#5C6B62;
  --euca:#2F6B4F; --euca-deep:#1E4A36; --terra:#C4703F; --terra-soft:#EAD9C9;
  --line:#E3DBCB; --rose:#B05A7A; --slate:#54749E; --grey:#9A9486;
  --card-sh:0 1px 2px rgba(33,48,42,.06),0 6px 18px -8px rgba(33,48,42,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Karla',sans-serif;color:var(--ink);background:var(--cream);
  background-image:radial-gradient(ellipse 80% 60% at 70% -10%,rgba(47,107,79,.07),transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  display:flex;height:100vh;overflow:hidden;
}
/* ---------------- rail ---------------- */
#rail{width:398px;min-width:398px;display:flex;flex-direction:column;height:100%;
  border-right:1px solid var(--line);background:var(--panel)}
header{padding:20px 22px 14px;border-bottom:1px solid var(--line)}
.wordmark{font-family:'Fraunces',serif;font-weight:700;font-size:30px;letter-spacing:-.5px;color:var(--euca-deep)}
.wordmark em{font-style:italic;color:var(--terra)}
.tagline{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
#fresh{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;
  padding:3px 10px;border-radius:99px;background:#EAF2EC;color:var(--euca-deep);font-weight:600}
#fresh.warn{background:#F6E8D6;color:#8A5320}
#fresh.stale{background:#F3DCDC;color:#8A2E2E}
#fresh .dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ---------------- filters ---------------- */
#filters{padding:14px 22px 16px;border-bottom:1px solid var(--line);overflow-y:auto;flex-shrink:0;max-height:46vh}
.f-label{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);margin:13px 0 7px}
.f-label:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:'Karla';font-size:13px;font-weight:600;padding:5px 12px;border-radius:99px;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;
  transition:all .15s}
.chip:hover{border-color:var(--euca);color:var(--euca-deep)}
.chip.on{background:var(--euca-deep);border-color:var(--euca-deep);color:#FBF8F1}
.chip.on.f-chip{background:var(--rose);border-color:var(--rose)}
/* dual time slider */
.range-wrap{position:relative;height:30px;margin:4px 2px 0}
.range-wrap input[type=range]{position:absolute;left:0;top:8px;width:100%;-webkit-appearance:none;
  appearance:none;background:none;pointer-events:none;height:14px}
.range-wrap input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:17px;height:17px;
  border-radius:50%;background:var(--euca-deep);border:2.5px solid var(--panel);
  box-shadow:0 1px 4px rgba(33,48,42,.4);cursor:grab}
.range-wrap input::-moz-range-thumb{pointer-events:auto;width:13px;height:13px;border-radius:50%;
  background:var(--euca-deep);border:2.5px solid var(--panel);box-shadow:0 1px 4px rgba(33,48,42,.4);cursor:grab}
.range-track{position:absolute;top:13px;left:0;right:0;height:4px;border-radius:4px;background:var(--line)}
.range-fill{position:absolute;top:13px;height:4px;border-radius:4px;background:var(--euca)}
.range-val{font-size:13px;font-weight:700;color:var(--euca-deep);text-align:center;margin-top:1px}
.single-range{width:100%;-webkit-appearance:none;height:4px;border-radius:4px;background:var(--line);margin:10px 0 2px}
.single-range::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--euca-deep);border:2.5px solid var(--panel);box-shadow:0 1px 4px rgba(33,48,42,.4);cursor:grab}
.single-range::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--euca-deep);
  border:2.5px solid var(--panel);cursor:grab}
.hint{font-size:11.5px;color:var(--grey);margin-top:5px;line-height:1.45}
.hint b{color:var(--terra)}
.row2{display:flex;gap:18px}.row2>div{flex:1}

#loc-note.err{color:#8A2E2E}
/* ---------------- results ---------------- */
#meta{padding:10px 22px;font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--line)}
#meta select{font-family:'Karla';font-size:12.5px;font-weight:600;color:var(--euca-deep);
  border:none;background:transparent;cursor:pointer}
#count b{color:var(--terra);font-size:15px;font-family:'Fraunces',serif}
#list{flex:1;overflow-y:auto;padding:12px 16px 24px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  margin-bottom:9px;box-shadow:var(--card-sh);cursor:pointer;transition:transform .14s, box-shadow .14s;
  animation:rise .3s both}
.card:hover{transform:translateY(-1.5px);box-shadow:0 2px 4px rgba(33,48,42,.08),0 12px 26px -10px rgba(33,48,42,.22)}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1}}
.card .top{display:flex;align-items:baseline;gap:9px}
.t-when{font-family:'Fraunces',serif;font-weight:700;font-size:21px;color:var(--euca-deep);letter-spacing:-.3px}
.t-day{font-size:11.5px;font-weight:700;color:var(--terra);text-transform:uppercase;letter-spacing:.08em}
.t-km{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink-soft);background:var(--cream);
  padding:2px 9px;border-radius:99px}
.t-clinic{font-size:13.5px;font-weight:700;margin-top:5px}
.t-disc{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--euca-deep);
  background:#EAF2EC;padding:1px 7px;border-radius:99px;white-space:nowrap;vertical-align:middle}
.t-fresh{display:inline-block;margin-top:7px;font-size:11px;font-weight:600;color:var(--euca)}
.t-fresh.warn{color:#8A5320}
.t-fresh.stale{color:#8A2E2E}
.t-ther{font-size:12.5px;color:var(--ink-soft);margin-top:1px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rep-badge{font-size:10.5px;font-weight:700;color:#7A4F1E;background:#FFF0D6;
  border:1px solid #E8C97A;padding:1px 7px;border-radius:99px;white-space:nowrap;cursor:default}
.focus-badge{font-size:10.5px;font-weight:700;color:var(--euca-deep);background:#EAF2EC;
  border:1px solid #BFD8C6;padding:1px 7px;border-radius:99px;white-space:nowrap;cursor:default}
.gdot{width:8px;height:8px;border-radius:50%;display:inline-block}
.gdot.F{background:var(--rose)}.gdot.M{background:var(--slate)}.gdot.U{background:var(--grey)}
.opts{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.opt{font-size:12px;font-weight:700;color:var(--euca-deep);background:#EAF2EC;
  padding:3px 9px;border-radius:7px}
.opt small{font-weight:600;color:var(--ink-soft)}
.book{margin-top:9px;display:inline-block;font-size:12.5px;font-weight:700;color:#FBF8F1;
  background:var(--terra);padding:6px 15px;border-radius:8px;text-decoration:none;transition:background .15s}
.book:hover{background:#A75A30}
.empty{padding:40px 20px;text-align:center;color:var(--ink-soft)}
.empty .big{font-family:'Fraunces',serif;font-size:21px;color:var(--euca-deep);margin-bottom:8px}
#more{display:block;width:100%;padding:9px;margin-top:4px;border:1px dashed var(--line);
  border-radius:10px;background:none;font-family:'Karla';font-weight:700;font-size:12.5px;
  color:var(--ink-soft);cursor:pointer}
#more:hover{color:var(--euca-deep);border-color:var(--euca)}
/* ---------------- map ---------------- */
#map{flex:1;height:100%}
.leaflet-container{background:#EFEAE0;font-family:'Karla'}
.pin{background:var(--euca-deep);color:#FBF8F1;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-family:'Karla';border:2.5px solid #FBF8F1;
  box-shadow:0 2px 8px rgba(33,48,42,.35);transition:transform .12s}
.pin:hover{transform:scale(1.12)}
.pin.lit{background:var(--terra)}
.pop .p-clinic{font-family:'Fraunces',serif;font-weight:600;font-size:15px;color:var(--euca-deep)}
.pop .p-addr{font-size:11.5px;color:var(--ink-soft);margin:2px 0 7px}
.pop .p-slot{font-size:12.5px;padding:3px 0;border-top:1px dashed var(--line)}
.pop .p-slot b{color:var(--euca-deep)}
.pop a{color:var(--terra);font-weight:700;text-decoration:none}
/* ---------------- locate-me map button ---------------- */
#locate-btn{position:absolute;bottom:90px;right:10px;z-index:900;
  width:34px;height:34px;border-radius:8px;border:none;cursor:pointer;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s}
#locate-btn:hover{background:#f4f4f4}
#locate-btn.active{background:#EAF2EC}
#locate-btn svg{display:block}
#locate-btn.spinning svg{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loc-status{font-size:11.5px;color:var(--ink-soft);margin-top:6px;min-height:14px}
.loc-status.err{color:#8A2E2E}

@media (max-width:820px){
  body{flex-direction:column}
  #rail{width:100%;min-width:0;height:58%;order:2;border-right:none;border-top:1px solid var(--line)}
  #map{height:42%;order:1}
  #filters{max-height:32vh}
}