: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);
  --env-bar:26px;   /* non-prod banner height; see #env-banner below */
}
*{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;height:100dvh;overflow:hidden;
}
/* ---------------- non-prod environment banner ----------------
   Emitted by server._env_banner() only when KNEAD_ENV != prod (staging plan
   Part 4), so on prod nothing here matches anything.

   Fixed rather than in flow: body is display:flex with a fixed-width #rail and
   a flex:1 #map, so a third child in that row would render as a squeezed
   vertical column, not a bar. The rail header is pushed down by the bar's
   height so the wordmark stays visible; the map's top edge needs no offset
   because the zoom control sits bottomright (map.js) and Leaflet's attribution
   is bottom-right too. z-index clears Leaflet's control panes (max 1000). */
#env-banner{
  position:fixed;top:0;left:0;right:0;z-index:1200;height:var(--env-bar);
  display:flex;align-items:center;justify-content:center;
  background:#8A2E2E;color:#FBF8F1;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;
}
#env-banner ~ #rail header{padding-top:calc(13px + var(--env-bar))}

/* ---------------- 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:13px 22px 10px;border-bottom:1px solid var(--line)}
.h-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.h-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.acct{display:flex;align-items:center;gap:8px}
.acct:empty{display:none}
.acct-btn{display:inline-block;padding:4px 12px;border-radius:99px;background:var(--euca-deep);color:#FBF8F1;
  font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;line-height:1.5}
.acct-btn:hover{background:var(--euca)}
.acct-link{font-size:11.5px;color:var(--grey);text-decoration:none;white-space:nowrap;border-bottom:1px dotted var(--grey)}
.acct-link:hover{color:var(--euca-deep);border-bottom-color:var(--euca)}
.wordmark{font-family:'Fraunces',serif;font-weight:700;font-size:24px;letter-spacing:-.5px;color:var(--euca-deep)}
.wordmark em{font-style:italic;color:var(--terra)}
.tagline{font-size:12px;color:var(--ink-soft);margin-top:1px}
#fresh{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;white-space:nowrap;
  flex-shrink:0;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 ---------------- */
#f-wrap{flex-shrink:0;position:relative}
#f-toggle{display:flex;align-items:center;gap:9px;width:100%;padding:9px 22px;
  border:none;border-bottom:1px solid var(--line);background:transparent;cursor:pointer;
  font-family:'Karla';font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);flex-shrink:0}
#f-toggle:hover{color:var(--euca-deep)}
#f-active{flex:1;min-width:0;text-align:left;font-size:12px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--terra);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#f-toggle .chev{flex-shrink:0;transition:transform .2s}
#f-toggle.open .chev{transform:rotate(180deg)}
#filters.closed{display:none}
#filters{padding:12px 22px 14px;border-bottom:1px solid var(--line);overflow-y:auto;flex-shrink:0;max-height:40vh}
.f-label{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);margin:11px 0 6px}
.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}
/* ---------------- address search bar ---------------- */
#addr-form{display:flex;gap:6px;padding:9px 22px 0;flex-shrink:0}
#addr-q{flex:1;min-width:0;padding:8px 11px;border:1px solid var(--line);border-radius:9px;
  background:#fff;font-family:'Karla';font-size:13px;color:var(--ink)}
#addr-q:focus{outline:2px solid var(--euca);border-color:var(--euca)}
#addr-go{padding:8px 14px;border:none;border-radius:9px;background:var(--euca-deep);
  color:#FBF8F1;font-family:'Karla';font-weight:700;font-size:12.5px;cursor:pointer;
  transition:opacity .15s}
#addr-go:hover{opacity:.88}
#addr-go:disabled{opacity:.55;cursor:default}

/* ---------------- out-of-area coverage banner ---------------- */
#coverage-note{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:950;
  display:flex;align-items:flex-start;gap:10px;width:min(440px,calc(100% - 24px));
  padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 6px 24px -6px rgba(33,48,42,.45);font-size:13px;color:var(--ink-soft);
  line-height:1.45;animation:coverage-rise .25s both}
@keyframes coverage-rise{from{opacity:0;transform:translate(-50%,7px)}
  to{opacity:1;transform:translate(-50%,0)}}
#coverage-note[hidden]{display:none}
#coverage-note b{display:block;font-family:'Fraunces',serif;font-size:15px;
  color:var(--euca-deep);margin-bottom:2px}
#coverage-x{border:none;background:none;font-size:20px;color:var(--grey);
  cursor:pointer;line-height:1;padding:0;margin-left:auto;flex-shrink:0}
#coverage-x:hover{color:var(--ink)}

/* ---------------- "Use my location" map pill ---------------- */
#locate-cta{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:900;
  display:flex;align-items:center;gap:8px;padding:10px 18px;border:none;border-radius:999px;
  background:var(--euca-deep);color:#FBF8F1;font-family:'Karla';font-weight:700;
  font-size:13.5px;cursor:pointer;box-shadow:0 3px 14px rgba(33,48,42,.4);
  transition:background .15s}
#locate-cta:hover{background:#2F6B4F}
#locate-cta[hidden]{display:none}
#locate-cta svg{display:block}
#locate-cta.spinning svg{animation:spin .7s linear infinite}

/* ---------------- 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);padding:6px 22px 0;flex-shrink:0}
.loc-status:empty{display:none}
.loc-status.err{color:#8A2E2E}

/* ---------------- signup funnel ---------------- */
#fu-overlay{position:fixed;inset:0;z-index:2000;background:rgba(33,48,42,.45);
  display:flex;align-items:center;justify-content:center;padding:18px}
#fu-overlay[hidden]{display:none}
#fu-modal{position:relative;width:100%;max-width:390px;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:26px 24px 20px;
  box-shadow:0 8px 40px -8px rgba(33,48,42,.4);animation:rise .25s both}
#fu-x{position:absolute;top:10px;right:14px;border:none;background:none;
  font-size:22px;color:var(--grey);cursor:pointer;line-height:1}
#fu-x:hover{color:var(--ink)}
.fu-title{font-family:'Fraunces',serif;font-weight:700;font-size:22px;
  color:var(--euca-deep);letter-spacing:-.3px}
.fu-sub{font-size:13.5px;color:var(--ink-soft);margin:6px 0 14px;line-height:1.5}
#fu-modal input[type=email],#fu-modal input[type=tel],#fu-modal input[inputmode=numeric]{
  width:100%;padding:10px 12px;margin-bottom:8px;border:1px solid var(--line);
  border-radius:9px;background:#fff;font-family:'Karla';font-size:14px;color:var(--ink)}
#fu-modal input:focus{outline:2px solid var(--euca);border-color:var(--euca)}
.fu-consent{display:flex;gap:8px;align-items:flex-start;font-size:12px;
  color:var(--ink-soft);margin:2px 0 12px;line-height:1.4;cursor:pointer}
.fu-consent input{margin-top:2px}
.fu-btn{display:block;width:100%;padding:10px 15px;border:none;border-radius:9px;
  background:var(--terra);color:#FBF8F1;font-family:'Karla';font-weight:700;
  font-size:13.5px;cursor:pointer;transition:background .15s}
.fu-btn:hover{background:#A75A30}
.fu-btn.small{width:auto;padding:6px 13px;font-size:12.5px}
.fu-hint{font-size:12px;color:var(--grey);margin-top:8px;text-align:center}
.fu-err{font-size:12.5px;font-weight:600;color:#8A2E2E;margin-top:8px;min-height:0}
.fu-err:empty{display:none}
.fu-fine{font-size:10.5px;color:var(--grey);margin-top:12px;line-height:1.45}
.fu-fine a{color:var(--ink-soft)}
#fu-banner{position:fixed;bottom:14px;right:14px;z-index:1500;display:flex;
  align-items:center;gap:12px;max-width:420px;padding:11px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--card-sh);font-size:12.5px;color:var(--ink-soft);animation:rise .3s both}
#fu-banner[hidden]{display:none}
#fu-banner-x{border:none;background:none;font-size:18px;color:var(--grey);
  cursor:pointer;line-height:1;padding:0}
.fu-cta{margin-top:10px;padding:14px;border:1px dashed var(--line);border-radius:12px;
  font-size:12.5px;color:var(--ink-soft);line-height:1.5;text-align:center}
.fu-cta b{display:block;font-family:'Fraunces',serif;font-size:15px;
  color:var(--euca-deep);margin-bottom:3px}
.fu-cta .fu-btn{width:auto;margin:8px auto 0;padding:7px 16px;font-size:12.5px}
.fu-alerts-list{margin-bottom:12px;max-height:40vh;overflow-y:auto}
.fu-alert{display:flex;align-items:center;gap:8px;padding:9px 10px;margin-bottom:6px;
  border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12.5px;color:var(--ink)}
.fu-alert.off{color:var(--grey);background:transparent}
.fu-alert span{flex:1;min-width:0;line-height:1.4}
.fu-alert em{font-style:normal;color:var(--grey)}
.fu-alert button{border:1px solid var(--line);background:transparent;border-radius:7px;
  padding:4px 9px;font-family:'Karla';font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.fu-alert button:hover{color:var(--euca-deep);border-color:var(--euca)}
.fu-alert button[data-act=delete]{padding:2px 8px;font-size:15px;line-height:1}

@media (max-width:820px){
  .h-row{flex-wrap:wrap}
  .acct-btn{padding:3px 10px;font-size:11.5px}
  body{flex-direction:column}
  #rail{width:100%;min-width:0;flex:1;min-height:0;height:auto;order:2;
    border-right:none;border-top:1px solid var(--line)}
  #map{height:36vh;height:36dvh;min-height:200px;flex:none;order:1}
  header{padding:9px 16px 8px}
  .wordmark{font-size:20px}
  #f-toggle{padding:9px 16px}
  /* open filters overlay the results instead of pushing them off-screen */
  #filters{position:absolute;top:100%;left:0;right:0;z-index:1100;
    background:var(--panel);border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px -10px rgba(33,48,42,.3);
    max-height:52vh;max-height:52dvh;padding:10px 16px 14px}
  .loc-status{padding:6px 16px 0}
  #addr-form{padding:8px 16px 0}
  #locate-cta{bottom:12px;padding:9px 15px;font-size:13px}
  #meta{padding:8px 16px}
  #list{padding:10px 12px 24px;-webkit-overflow-scrolling:touch}
  #fu-banner{left:14px;max-width:none}
}