:root{
  /* Palette lifted from the live PBD stack — techcenter.css --tc-* tokens and
     nav-shared.css. Kept as local names because this site does not load those
     stylesheets (different domain, different nav), but the VALUES must not drift.
     Source of truth: apps/cc-palmbeachdyno/techcenter.css + nav-shared.css. */
  --ink:#131316; --ink-2:#1b1b20; --ink-3:#26262b; --ink-4:#0b0b0d;
  --paper:#ffffff; --paper-2:#f7f7f9; --paper-3:#ececed;
  --line:#e5e5ea; --line-dark:#2f2f36;
  --text:#0a0a0c; --text-2:#4b4b55; --text-3:#6b6b76;
  --text-inv:#f4f4f6; --text-inv-2:#9a9aa2;
  --red:#d1132e; --red-dark:#a80f25; --red-soft:#fdecee;
  --ok:#15803d; --ok-soft:#e9f9ee;
  --warn:#b45309; --warn-soft:#fef3e0;
  --err:#a80f25; --err-soft:#fdecee;
  --blue:#2563eb; --blue-soft:#eef4ff;
  --r:10px; --r-lg:14px; --tap:44px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 8px 24px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.06);
  --font:'Archivo',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--paper-2);
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;line-height:1.2;font-weight:700}
button{font:inherit;color:inherit}
a{color:var(--red-dark)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}

/* ---------- HEADER (compact — budget 56px) ---------- */
.hdr{background:var(--ink);color:var(--text-inv);border-bottom:3px solid var(--red)}
.hdr-in{display:flex;align-items:center;gap:14px;height:56px}
/* Logo lockup — the OFFICIAL brand SVGs (Ops Manual gotcha #15). Do not swap
   these for a CSS-text approximation. Sized 200x17.9px here (aspect ratio of the
   240x21.5 lockup used on the PBD sites) to fit this site's 56px header.
   ?v=N is manual: these are referenced from CSS, and CSS is not touched by the
   deploy workflow's asset-version stamp. Bump it if the SVG content ever changes. */
.brand{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;flex:0 0 auto;text-decoration:none;line-height:1}
.brand::before{content:"";display:block;width:200px;height:17.9px;
  background-image:url("/assets/img/pbd-logo.svg?v=2");
  background-repeat:no-repeat;background-position:left center;background-size:contain}
.brand .brand-main{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand .brand-sub{font:800 9.5px/1 var(--font);letter-spacing:.28em;
  color:var(--text-inv-2);white-space:nowrap}
.hdr-nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.hdr-nav a{color:var(--text-inv-2);text-decoration:none;font-size:13px;font-weight:600;
  padding:9px 10px;border-radius:6px;white-space:nowrap}
.hdr-nav a:hover{color:#fff;background:var(--ink-3)}
.hdr-nav a.cta{background:var(--red);color:#fff}
.hdr-nav a.cta:hover{background:var(--red-dark)}
.menu-btn{display:none;margin-left:auto;background:var(--ink-3);border:1px solid var(--line-dark);
  color:#fff;width:var(--tap);height:var(--tap);border-radius:8px;cursor:pointer;font-size:18px}

/* ---------- INTRO (compact — budget 72px) ---------- */
.intro{background:var(--ink-2);color:var(--text-inv);padding:14px 0 15px;
  border-bottom:1px solid var(--line-dark)}
.intro h1{font-size:20px;letter-spacing:-.4px}
.intro p{margin:5px 0 0;font-size:13.5px;color:var(--text-inv-2);max-width:66ch}

/* ---------- TABS ---------- */
.tabs-bar{background:var(--ink-2);position:sticky;top:0;z-index:40;
  box-shadow:0 2px 10px rgba(0,0,0,.28)}
.tabs{display:flex;gap:6px;padding:0 16px;max-width:1180px;margin:0 auto}
.tab{flex:1 1 0;min-height:52px;background:var(--ink-3);color:var(--text-inv-2);
  border:0;border-bottom:4px solid transparent;border-radius:9px 9px 0 0;cursor:pointer;
  font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;
  gap:7px;padding:0 10px}
.tab:hover{color:#fff;background:#2b323c}
.tab[aria-selected="true"]{background:var(--paper);color:var(--ink);
  border-bottom-color:var(--red);box-shadow:0 -2px 0 var(--red) inset}
.tab .ic{font-size:16px}
.tab{white-space:nowrap}
/* "Find E85 Near Me" wraps to two lines at 390px, making the tabs uneven and
   eating into the above-fold budget. Drop the qualifier on narrow screens. */
@media(max-width:430px){ .tab-more{display:none} }

/* ---------- TOOL SURFACE ---------- */
.tool{background:var(--paper);border-radius:0 0 12px 12px;box-shadow:var(--shadow);
  padding:18px 16px 20px;margin-bottom:20px}
.tool-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:900px){.tool-grid{grid-template-columns:minmax(0,1fr) minmax(370px,.85fr);gap:26px}}

.step-label{font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-2);margin:0 0 9px}

/* entry cards */
.cards{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:560px){.cards{grid-template-columns:1fr 1fr}}
.card{display:flex;align-items:center;gap:11px;min-height:56px;padding:11px 13px;
  background:var(--paper-2);border:2px solid var(--line);border-radius:var(--r);
  cursor:pointer;text-align:left;width:100%}
.card:hover{border-color:#adb9c6;background:#eef1f5}
.card[aria-pressed="true"]{border-color:var(--red);background:var(--red-soft)}
.card .ic{font-size:21px;flex:0 0 auto;width:26px;text-align:center}
.card b{display:block;font-size:14.5px;font-weight:700}
.card span{display:block;font-size:12px;color:var(--text-2);line-height:1.3}

/* fields */
.field{margin-top:16px}
.field>label,.field>.lbl{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.hint{font-size:12px;color:var(--text-2);font-weight:400;margin-top:3px;display:block}
.row{display:flex;gap:8px;align-items:stretch}
input[type="text"],input[type="number"],select{width:100%;min-height:var(--tap);
  padding:10px 12px;font-size:17px;font-weight:600;border:2px solid var(--line);
  border-radius:var(--r);background:var(--paper);color:var(--text);font-family:var(--font)}
/* room for the native chevron so long band labels ("Warm climate, year round —
   74–83%") aren't clipped on narrow screens */
select{padding-right:36px;font-size:15.5px;text-overflow:ellipsis}
@media(max-width:400px){select{font-size:14.5px}}
input:focus,select:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px var(--red-soft)}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.step{flex:0 0 auto;width:var(--tap);min-height:var(--tap);border:2px solid var(--line);
  background:var(--paper-2);border-radius:var(--r);font-size:20px;font-weight:700;cursor:pointer}
.step:hover{background:var(--paper-3)}
.unit-tog{display:flex;flex:0 0 auto;border:2px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--paper-2)}
.unit-tog button{min-width:46px;min-height:var(--tap);border:0;background:transparent;
  font-weight:700;font-size:14px;cursor:pointer;color:var(--text-2)}
.unit-tog button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{min-height:var(--tap);padding:0 15px;border:2px solid var(--line);border-radius:22px;
  background:var(--paper);font-weight:700;font-size:14.5px;cursor:pointer}
.chip:hover{border-color:#adb9c6;background:var(--paper-2)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.custom[aria-pressed="true"]{background:var(--red);border-color:var(--red)}

/* band select */
.band-note{font-size:12px;color:var(--text-2);margin-top:6px;padding:8px 10px;
  background:var(--paper-2);border-left:3px solid var(--line);border-radius:0 6px 6px 0}

/* ---------- RESULT ---------- */
.result{background:var(--ink);color:var(--text-inv);border-radius:12px;padding:18px 16px;
  position:relative;overflow:hidden}
.result::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--red)}
.result-empty{background:var(--paper-2);color:var(--text-2);border:2px dashed var(--line);
  text-align:center;padding:34px 18px;border-radius:12px;font-size:14px}
.res-h{font-size:11.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--text-inv-2);margin:0 0 12px}
.add-line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--line-dark)}
.add-line:last-of-type{border-bottom:0}
.add-verb{font-size:12px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--text-inv-2);flex:0 0 auto}
.add-num{font-size:34px;font-weight:800;letter-spacing:-1.2px;line-height:1;
  font-variant-numeric:tabular-nums}
.add-unit{font-size:16px;font-weight:700;color:var(--text-inv-2)}
.add-of{font-size:14px;color:var(--text-inv-2);font-weight:600}
.res-final{margin-top:14px;padding-top:13px;border-top:2px solid var(--line-dark)}
.res-final .k{font-size:12px;color:var(--text-inv-2);font-weight:700;text-transform:uppercase;
  letter-spacing:.6px}
.res-final .v{font-size:25px;font-weight:800;letter-spacing:-.7px;font-variant-numeric:tabular-nums}
.res-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill{font-size:12px;font-weight:700;padding:6px 10px;border-radius:16px;
  background:var(--ink-3);color:var(--text-inv-2);border:1px solid var(--line-dark)}
.pill b{color:#fff;font-variant-numeric:tabular-nums}
.res-expl{margin-top:13px;font-size:13.5px;color:#dfe6ed;line-height:1.5}

/* warnings / errors */
.note{margin-top:10px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.45;
  display:flex;gap:9px;align-items:flex-start}
.note .ic{flex:0 0 auto}
.note.warn{background:var(--warn-soft);color:var(--warn);border:1px solid #f0dcae}
.note.err{background:var(--err-soft);color:var(--err);border:1px solid #f3c9cb}
.note.info{background:var(--paper-2);color:var(--text-2);border:1px solid var(--line)}
.alts{margin-top:12px;display:grid;gap:8px}
.alt{background:var(--paper);border:2px solid var(--line);border-left:4px solid var(--red);
  border-radius:8px;padding:11px 13px;font-size:13.5px;color:var(--text)}
.alt b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--red-dark);margin-bottom:3px}

/* math panel */
details.math{margin-top:13px;border-top:1px solid var(--line-dark);padding-top:11px}
details.math summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--text-inv-2);
  min-height:32px;display:flex;align-items:center}
details.math summary:hover{color:#fff}
.work{margin-top:9px;font-family:var(--mono);font-size:11.5px;line-height:1.6;
  background:#090b0e;border-radius:8px;padding:11px;overflow-x:auto}
.work div{padding:5px 0;border-bottom:1px solid #1d232b}
.work div:last-child{border-bottom:0}
.work .wl{color:#8fb4d9;font-weight:700}
.work .we{color:#7d8896}
.work .ws{color:#c9d4df}
.work .wv{color:#5fd39a;font-weight:700}

/* actions */
.actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
/* `color` is set explicitly, not inherited. .btn has a light background, so any
   .btn placed inside a dark-on-light container inherits that container's white
   text and renders white-on-white. The consent banner did exactly that and the
   "No thanks" button was invisible. Fixing it on .btn itself means the next dark
   container cannot reintroduce it. */
.btn{min-height:var(--tap);padding:0 17px;border-radius:var(--r);border:2px solid var(--line);
  background:var(--paper);color:var(--ink);font-weight:700;font-size:14.5px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:1 1 auto}
.btn:hover{background:var(--paper-2)}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-cross{width:100%;flex:1 1 100%;background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.btn-cross:hover{background:var(--ink-3);border-color:var(--ink-3)}

/* ---------- STATIONS PLACEHOLDER ---------- */
.soon{text-align:center;padding:40px 18px}
.soon .badge{display:inline-block;background:var(--red-soft);color:var(--red-dark);
  font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  padding:6px 13px;border-radius:16px;margin-bottom:14px}
.soon h2{font-size:22px;margin-bottom:9px}
.soon p{color:var(--text-2);max-width:56ch;margin:0 auto 8px;font-size:14.5px}
.soon .stat{display:flex;gap:26px;justify-content:center;margin:22px 0;flex-wrap:wrap}
.soon .stat div{text-align:center}
.soon .stat b{display:block;font-size:27px;font-weight:800;letter-spacing:-.8px}
.soon .stat span{font-size:11.5px;color:var(--text-2);text-transform:uppercase;
  letter-spacing:.6px;font-weight:700}

/* ---------- BELOW-TOOL ---------- */
.promo{background:var(--paper);border-radius:12px;box-shadow:var(--shadow);padding:16px;
  margin-bottom:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.promo .ic{font-size:26px}
.promo div{flex:1 1 260px;min-width:0}
.promo b{display:block;font-size:15px}
.promo p{margin:2px 0 0;font-size:13.5px;color:var(--text-2)}
.promo a{flex:0 0 auto;text-decoration:none}
.adslot{display:none}
.content{background:var(--paper);border-radius:12px;box-shadow:var(--shadow);
  padding:20px 18px;margin-bottom:16px}
.content h2{font-size:18px;margin-bottom:11px}
.content h3{font-size:15px;margin:16px 0 5px}
.content p{margin:0 0 10px;font-size:14.5px;color:#2c343d;max-width:74ch}
.faq details{border-bottom:1px solid var(--line);padding:11px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:14.5px;min-height:32px;
  display:flex;align-items:center}
.faq p{margin:8px 0 2px;font-size:14px}
.disc{background:#fbfcfd;border:1px solid var(--line);border-radius:12px;padding:15px 17px;
  margin-bottom:16px;font-size:13px;color:var(--text-2);line-height:1.55}
.disc b{color:var(--text);display:block;margin-bottom:5px;font-size:13.5px}

/* ---------- FOOTER ---------- */
.ftr{background:var(--ink);color:var(--text-inv-2);padding:26px 0 20px;font-size:13.5px}
.ftr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:20px}
.ftr h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.8px;margin:0 0 9px}
.ftr a{color:var(--text-inv-2);text-decoration:none;display:block;padding:5px 0}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr-btm{border-top:1px solid var(--line-dark);margin-top:20px;padding-top:15px;font-size:12.5px}

@media(max-width:719px){
  .hdr-nav{display:none;position:absolute;top:56px;left:0;right:0;background:var(--ink-2);
    flex-direction:column;padding:8px;gap:2px;border-bottom:3px solid var(--red);z-index:60}
  .hdr-nav.open{display:flex}
  .hdr-nav a{padding:12px;min-height:var(--tap);display:flex;align-items:center;font-size:15px}
  .menu-btn{display:block}
  .brand::before{width:150px;height:13.4px}
  .brand .brand-sub{font-size:8px;letter-spacing:.24em}
  /* Fold budget: header + intro + tabs must clear 210px at 390x844 so the first
     calculator control is visible without scrolling. Asserted in the test suite. */
  .intro{padding:9px 0 10px}
  .intro h1{font-size:17px;letter-spacing:-.3px}
  .intro p{font-size:12.5px;margin-top:3px;line-height:1.35}
  .tab{font-size:14px;min-height:48px}
  .add-num{font-size:31px}
  .wrap{padding:0 12px}
  .tabs{padding:0 12px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================= STATION FINDER ================= */
.find-search{display:flex;gap:8px;margin-bottom:10px}
.find-search input{flex:1 1 auto;min-width:0}
.find-search .btn{flex:0 0 auto}
.find-geo{width:100%;justify-content:center}
.find-note{font-size:12px;color:var(--text-2);margin:7px 0 0;line-height:1.4}
.find-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.find-controls label{font-size:13.5px;font-weight:700;flex:0 0 auto}
.find-controls select{width:auto;min-width:118px;flex:0 0 auto}
.find-filterbtn{padding:0 14px}
.viewtog{display:flex;margin-left:auto;border:2px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--paper-2);flex:0 0 auto}
.viewtog button{min-height:var(--tap);padding:0 14px;border:0;background:transparent;
  font-weight:700;font-size:14px;cursor:pointer;color:var(--text-2);white-space:nowrap}
.viewtog button[aria-pressed="true"]{background:var(--ink);color:#fff}
.find-filters{margin-top:12px;padding:13px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r)}
.find-filters label{display:flex;align-items:center;gap:9px;min-height:var(--tap);
  font-size:14.5px;font-weight:600;cursor:pointer}
.find-filters input[type=checkbox]{width:20px;height:20px;flex:0 0 auto;accent-color:var(--red)}
.find-filters .hint{margin-top:6px}

.find-status{margin-top:16px;font-size:14px;color:var(--text-2);font-weight:600}
.find-status.err{color:var(--err);background:var(--err-soft);border:1px solid #f3c9cb;
  padding:11px 13px;border-radius:8px;font-weight:400}
.find-status.warn{color:var(--warn);background:var(--warn-soft);border:1px solid #f0dcae;
  padding:11px 13px;border-radius:8px;font-weight:400}

/* The `hidden` attribute is only a UA `display:none`, so ANY later rule that sets
   display wins over it. `.find-list{display:grid}` did exactly that: switching to
   the map view set stList.hidden = true and the entire results list stayed on
   screen underneath the map. Make `hidden` mean hidden, everywhere, once. */
[hidden]{display:none!important}
.find-list{margin-top:12px;display:grid;gap:10px}
/* The single out-of-radius "nearest station" card. Visually distinct so it can
   never be mistaken for a result that satisfied the search. */
.st-far{border-style:dashed;opacity:.92}
.st-far .st-dist{color:var(--red)}
.st{border:2px solid var(--line);border-radius:var(--r);padding:13px 14px;background:var(--paper)}
.st:hover{border-color:#c9ccd2}
.st.sel{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.st-top{display:flex;align-items:baseline;gap:10px}
.st-name{font-weight:800;font-size:16px;letter-spacing:-.2px;flex:1 1 auto;min-width:0}
.st-dist{font-weight:800;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.st-addr{font-size:14px;color:var(--text-2);margin-top:3px;line-height:1.4}
.st-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.st-b{font-size:11.5px;font-weight:800;letter-spacing:.3px;padding:4px 9px;border-radius:14px;
  text-transform:uppercase;border:1px solid transparent;white-space:nowrap}
.st-b.e85{background:var(--ok-soft);color:var(--ok);border-color:#bfe6d0}
.st-b.bp{background:var(--blue-soft);color:var(--blue);border-color:#c9dcfb}
.st-b.blend{background:var(--paper-2);color:var(--text-2);border-color:var(--line)}
.st-meta{margin-top:9px;font-size:12.5px;color:var(--text-2);display:grid;gap:3px}
.st-meta .conf-ok{color:var(--ok);font-weight:700}
.st-meta .conf-old{color:var(--warn);font-weight:700}
.st-meta .conf-none{color:var(--text-3);font-weight:700}
.st-acts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.st-acts a,.st-acts button{flex:1 1 auto;min-height:var(--tap);padding:0 13px;border-radius:var(--r);
  border:2px solid var(--line);background:var(--paper);font-weight:700;font-size:14px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;color:var(--text)}
.st-acts a.dir{background:var(--ink);border-color:var(--ink);color:#fff}
.st-acts a:hover,.st-acts button:hover{background:var(--paper-2)}
.st-acts a.dir:hover{background:var(--ink-3);border-color:var(--ink-3)}
.st-plan{margin-top:10px;padding:10px 12px;background:var(--red-soft);
  border-left:3px solid var(--red);border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.45}
.st-plan b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--red-dark);margin-bottom:3px}

.find-mapwrap{margin-top:12px;border:2px solid var(--line);border-radius:var(--r);overflow:hidden}
#stMap{height:460px;width:100%;background:var(--paper-2)}
@media(max-width:719px){#stMap{height:60vh;min-height:340px}}
.find-attrib{margin-top:16px;font-size:12px;color:var(--text-2);line-height:1.5;
  padding-top:13px;border-top:1px solid var(--line)}
.maplibregl-popup-content{font-family:var(--font);font-size:13.5px;padding:11px 13px;border-radius:8px}
.maplibregl-popup-content b{display:block;font-size:14.5px;margin-bottom:2px}
/* ---- map popup ----
   Tap targets stay at the same 44px minimum as the list. A popup on a phone is
   used one-handed, often in sunlight, by someone who has already decided to go. */
.maplibregl-popup-content{padding:12px 14px;border-radius:var(--r);font-size:14px;line-height:1.45}
.maplibregl-popup-content b{display:block;font-size:15px;margin-bottom:2px}
.pop-conf{margin-top:6px;font-size:12.5px;line-height:1.4}
.pop-acts{display:flex;gap:8px;margin-top:10px}
.pop-acts a{flex:1 1 auto;min-height:var(--tap);display:inline-flex;align-items:center;
  justify-content:center;border-radius:var(--r);font-weight:700;font-size:14px;
  text-decoration:none;padding:0 12px}
.pop-acts a.dir{background:var(--ink);color:#fff}
.pop-acts a.call{background:var(--paper);color:var(--ink);border:2px solid var(--line)}

/* ---- the search origin on the map ----
   Deliberately not a pin. Pins are places you can drive to; this is where the
   measuring started from. Blue reads as "you" by convention and cannot be
   confused with the red station pins at a glance or in greyscale. */
/* Sits BELOW the station pins. When the search centre coincides with a station —
   which it does whenever a ZIP holds exactly one — an origin marker on top
   silently swallowed the tap, so the pin could not be opened at all. The pins are
   the actionable things; the origin is a reference point. */
.st-me{width:18px;height:18px;border-radius:50%;box-sizing:border-box;z-index:1;
  border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.35);
  cursor:pointer}
.st-me.me-exact{background:#2b6cb0}
/* A ZIP or city centroid is not a person. Hollow, so it reads as a reference
   point rather than aplace  someone is standing at. */
.st-me.me-approx{background:#fff;border-color:#2b6cb0;border-width:4px}
.st-pin{width:26px;height:26px;border-radius:50% 50% 50% 0;background:var(--red);z-index:2;
  transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer}
.st-pin.sel{background:var(--ink);width:32px;height:32px}

/* ---- consent banner ----
   Bottom sheet, above everything, but it must never cover the tool's result
   area on a phone: it sits at the bottom and the page keeps scrolling behind it.
   Only ever rendered for EEA/UK/CH visitors (see analytics.js). */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:2000;
  background:var(--ink);color:#fff;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(0,0,0,.28);display:grid;gap:10px}
.consent p{margin:0;font-size:14px;line-height:1.5;color:#e8e8ea;max-width:66ch}
.consent a{color:#fff;text-decoration:underline}
.consent-acts{display:flex;gap:10px;flex-wrap:wrap}
.consent-acts .btn{min-height:var(--tap);flex:1 1 auto;max-width:220px}
@media (min-width:700px){
  .consent{grid-template-columns:1fr auto;align-items:center;gap:18px}
  .consent-acts{flex:0 0 auto}
}