:root{
  --bg:#faf9f6; --card:#fff; --ink:#1f2328; --muted:#6a737d; --line:#e6e3dc;
  --green:#2e7d4f; --amber:#b8860b; --red:#b23b3b; --blue:#2f6690;
  --shadow:0 1px 3px rgba(0,0,0,.06);
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}   /* our display:block/flex rules otherwise beat [hidden] */
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
#app{max-width:560px;margin:0 auto;padding:0 .9em 3em;}

header{padding:1.1em 0 .5em;}
h1{font-size:1.3em;margin:0;letter-spacing:-.01em;}
.tagline{color:var(--muted);font-size:.85em;margin:.15em 0 0;}

/* chips ---------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:.4em;margin:.6em 0;}
.chip-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:.85em;font-weight:600;padding:.4em .8em;border-radius:20px;
  cursor:pointer;white-space:nowrap;transition:.12s;}
.chip-btn:hover{border-color:#cfc9bd;}
.chip-btn.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.tiers .chip-btn.active[data-color="green"]{background:var(--green);border-color:var(--green);}
.tiers .chip-btn.active[data-color="amber"]{background:var(--amber);border-color:var(--amber);}
.tiers .chip-btn.active[data-color="func"]{background:var(--blue);border-color:var(--blue);}

/* scope builder -------------------------------------------------------- */
.scope{margin:.5em 0 .7em;}
.seg{display:inline-flex;background:#f0ede6;border:1px solid var(--line);border-radius:10px;
  padding:2px;gap:2px;margin:.15em 0 .5em;}
.seg-btn{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.82em;
  font-weight:600;padding:.35em .9em;border-radius:8px;cursor:pointer;}
.seg-btn.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow);}
/* scope-type + area-mode side by side on one line (wraps on very narrow screens) */
.scope-row{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;}
.range{font-size:.82em;color:var(--muted);display:block;margin:.35em 0;}
.range>span{display:block;margin-bottom:.1em;}
.range b{color:var(--ink);font-size:1.05em;font-weight:700;}
.range input[type=range]{width:100%;accent-color:var(--ink);}
.hint{font-size:.76em;color:var(--muted);margin:.3em 0 0;}
.route-inputs{display:flex;flex-direction:column;gap:.4em;margin:.2em 0 .5em;}
.ac-field{position:relative;}
.point-place{margin:.2em 0 .4em;}
.locate-btn{font:inherit;font-size:.8em;color:var(--blue);background:transparent;border:0;
  padding:.1em 0 .3em;cursor:pointer;}
.locate-btn:hover{text-decoration:underline;}
.locate-btn.locating{opacity:.6;cursor:default;}
.ac-field input{width:100%;font:inherit;font-size:.9em;padding:.55em 2.3em .55em .7em;
  border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);}
.ac-field input:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue);}
.mic-btn{position:absolute;right:.35em;top:50%;transform:translateY(-50%);border:0;background:transparent;
  font-size:1em;line-height:1;cursor:pointer;padding:.25em;opacity:.55;border-radius:6px;}
.mic-btn:hover{opacity:1;}
.mic-btn.listening{opacity:1;background:#fdeaea;animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{50%{opacity:.45;}}
.ac-list{position:absolute;left:0;right:0;top:100%;z-index:1000;margin:.15em 0 0;padding:.2em;list-style:none;
  background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:0 6px 18px rgba(0,0,0,.12);
  max-height:220px;overflow:auto;}
.ac-list li{padding:.5em .6em;border-radius:6px;font-size:.86em;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.ac-list li:hover,.ac-list li.sel{background:#f0ede6;}
/* Same footprint as .when-btn, filled so it still reads as the primary action; sits at the
   right end of the time-toggle row. */
.search-btn{margin-left:auto;font:inherit;font-size:.8em;font-weight:700;background:var(--ink);
  color:#fff;border:1px solid var(--ink);border-radius:8px;padding:.35em .8em;cursor:pointer;transition:.15s;}
.search-btn:hover{opacity:.92;}
.search-btn.dirty{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,102,144,.25);}
/* live search spinner, inline to the right of the Update button */
.progress{font-size:.8em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding-left:.2em;}
.when{display:flex;align-items:center;gap:.3em;margin-top:.6em;}
.when-btn{border:1px solid var(--line);background:var(--card);color:var(--muted);
  font:inherit;font-size:.8em;font-weight:600;padding:.35em .8em;border-radius:8px;cursor:pointer;}
.when-btn.active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* map ------------------------------------------------------------------ */
#map{height:44vh;min-height:280px;border-radius:14px;border:1px solid var(--line);
  box-shadow:var(--shadow);z-index:0;}
.you-dot{background:var(--blue);width:16px;height:16px;border-radius:50%;
  border:3px solid #fff;box-shadow:0 0 0 2px var(--blue);}
.num-pin{background:var(--ink);color:#fff;font-weight:700;font-size:.75em;
  width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:var(--shadow);}
.num-pin span{transform:rotate(45deg);}
.num-pin.green{background:var(--green);} .num-pin.amber{background:var(--amber);}
.num-pin.red{background:var(--red);} .num-pin.func{background:var(--blue);}

/* status --------------------------------------------------------------- */
.status{font-size:.85em;color:var(--muted);margin:.7em 0 0;padding:.5em .2em;}
.status.error{color:var(--red);font-weight:600;}

/* result cards --------------------------------------------------------- */
.results{list-style:none;margin:.4em 0 0;padding:0;}
.stop{display:flex;gap:.8em;align-items:center;background:var(--card);
  border:1px solid var(--line);border-left:6px solid var(--line);border-radius:12px;
  padding:.75em .85em;margin:.55em 0;box-shadow:var(--shadow);cursor:pointer;}
.stop.green{border-left-color:var(--green);} .stop.amber{border-left-color:var(--amber);}
.stop.red{border-left-color:var(--red);} .stop.func{border-left-color:var(--blue);}
.stop.active{outline:2px solid var(--blue);outline-offset:1px;}
.rank{flex:none;width:1.5em;height:1.5em;border-radius:50%;background:var(--muted);color:#fff;
  font-size:.8em;font-weight:700;display:flex;align-items:center;justify-content:center;align-self:flex-start;}
.green .rank{background:var(--green);} .amber .rank{background:var(--amber);}
.red .rank{background:var(--red);} .func .rank{background:var(--blue);}
.lead{font-size:1.55em;font-weight:800;min-width:1.9em;text-align:center;line-height:1;}
.lead small{font-size:.42em;font-weight:600;vertical-align:super;color:var(--muted);display:block;margin-top:.2em;}
.green .lead{color:var(--green);} .amber .lead{color:var(--amber);}
.red .lead{color:var(--red);} .func .lead{color:var(--blue);}
.mid{flex:1;min-width:0;}
.name{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.name .kchip{font-size:.72em;font-weight:600;color:var(--muted);background:#f0ede6;
  padding:.05em .5em;border-radius:20px;margin-left:.35em;}
.sub{color:var(--muted);font-size:.82em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tier{font-size:.8em;font-weight:600;margin-top:.1em;}
.green .tier{color:var(--green);} .amber .tier{color:var(--amber);}
.red .tier{color:var(--red);} .func .tier{color:var(--blue);}
.view{font-size:.8em;margin-top:.2em;color:var(--green);font-style:italic;line-height:1.35;}
.view.muted{color:var(--muted);font-style:normal;}
.right{display:flex;flex-direction:column;gap:.3em;align-items:flex-end;}
.btn{font-size:.76em;text-decoration:none;background:var(--ink);color:#fff;
  padding:.35em .7em;border-radius:20px;white-space:nowrap;}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}

footer{color:var(--muted);font-size:.76em;margin-top:1.4em;text-align:center;line-height:1.5;}
.spin{display:inline-block;width:12px;height:12px;border:2px solid var(--line);
  border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:.4em;}
@keyframes spin{to{transform:rotate(360deg);}}