:root{
  --bg:#F5F5FA; --panel:#FFFFFF; --panel-border:#E3E3EE; --text:#16162A; --text-muted:#6B6B85;
  --accent:#5B4DF5; --accent-2:#0EA5A4; --field:#FAFAFD; --on-accent:#FFFFFF; --selected:rgba(91,77,245,0.07);
  --route-1:#5B4DF5; --route-2:#0EA5A4; --route-3:#E5484D; --route-4:#D97706; --route-5:#16A34A;
  box-sizing:border-box;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F0F1A; --panel:#181827; --panel-border:#2C2C44; --text:#E8E8F3; --text-muted:#9A9AB5;
    --accent:#8B80FF; --accent-2:#2DD4BF; --field:#13131F; --on-accent:#0F0F1A; --selected:rgba(139,128,255,0.12);
    --route-1:#8B80FF; --route-2:#2DD4BF; --route-3:#F87171; --route-4:#FBBF24; --route-5:#4ADE80;
  }
}
:root[data-theme="dark"]{
  --bg:#0F0F1A; --panel:#181827; --panel-border:#2C2C44; --text:#E8E8F3; --text-muted:#9A9AB5;
  --accent:#8B80FF; --accent-2:#2DD4BF; --field:#13131F; --on-accent:#0F0F1A; --selected:rgba(139,128,255,0.12);
  --route-1:#8B80FF; --route-2:#2DD4BF; --route-3:#F87171; --route-4:#FBBF24; --route-5:#4ADE80;
}
*{box-sizing:inherit;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Space Grotesk','Segoe UI',sans-serif;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }
[hidden]{display:none !important;}
.wrap{max-width:1280px; margin:0 auto; padding:28px 20px 60px;}
header{margin-bottom:22px;}
header h1{font-size:1.5rem; font-weight:700; margin:0 0 6px; letter-spacing:-0.01em;}
header p{margin:0; color:var(--text-muted); font-size:0.92rem; max-width:70ch; line-height:1.5;}
.layout{display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:start;}
@media (max-width:860px){
  .wrap{padding:20px 16px 48px;}
  .layout{grid-template-columns:1fr;}
  .layout .map-col{order:-1;}
}
.panel{background:var(--panel); border:1px solid var(--panel-border); border-radius:10px; padding:16px;}
.panel + .panel{margin-top:16px;}
.panel h2{font-size:0.72rem; font-weight:600; letter-spacing:0.04em; margin:0 0 12px; color:var(--text-muted);}
label{display:block; font-size:0.85rem; margin-bottom:6px; font-weight:500;}
.field{margin-bottom:16px;}
.row{display:flex; align-items:center; gap:10px;}
input[type="range"]{width:100%; accent-color:var(--accent);}
input.text{
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--panel-border);
  background:var(--field); color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:0.78rem;
}
input.text::placeholder{font-family:'Space Grotesk',sans-serif; color:var(--text-muted);}
input.text.busy{opacity:0.6;}
.dist-readout{white-space:nowrap; font-family:'IBM Plex Mono',monospace; font-size:0.95rem; min-width:62px; text-align:right;}
.segmented{display:flex; border:1px solid var(--panel-border); border-radius:8px; overflow:hidden;}
.segmented button{
  flex:1; padding:8px 6px; border:none; background:transparent; color:var(--text);
  font-family:inherit; font-size:0.82rem; cursor:pointer; border-right:1px solid var(--panel-border);
}
.segmented button:last-child{border-right:none;}
.segmented button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent); font-weight:600;}
.segmented.small button{padding:4px 10px; font-size:0.72rem;}
.segmented button:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;}
.band-note{font-size:0.72rem; color:var(--text-muted); margin:6px 0 0; line-height:1.4;}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:0.85rem;}
.checkbox-row input{accent-color:var(--accent);}
.btn{
  display:block; width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--panel-border);
  background:transparent; color:var(--text); font-family:inherit; font-size:0.85rem; text-align:center;
  font-weight:500; cursor:pointer; text-decoration:none;
}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600;}
.btn.primary:disabled{opacity:0.45; cursor:not-allowed;}
.btn-row{display:flex; gap:8px; margin-top:10px;}
.hint{font-size:0.78rem; color:var(--text-muted); margin:0 0 12px; line-height:1.5;}
.diag{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--text-muted); margin:10px 0 0; line-height:1.5;}
.diag:empty{display:none;}
.warn{font-size:0.8rem; color:var(--route-3); margin:10px 0 0; line-height:1.4;}
.map-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.map-head h2{margin:0;}
#map{width:100%; height:min(72vh, 680px); min-height:360px; border-radius:10px; border:1px solid var(--panel-border); overflow:hidden;}
@media (max-width:860px){ #map{height:56vh;} }
.legend{margin:10px 0 0; font-size:0.72rem; color:var(--text-muted); line-height:1.5;}
.candidates{display:flex; flex-direction:column; gap:8px;}
.cand{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  border:1px solid var(--panel-border); cursor:pointer; background:transparent; text-align:left;
  font-family:inherit; color:var(--text); width:100%;
}
.cand[aria-pressed="true"]{border-color:var(--accent); background:var(--selected);}
.swatch{width:12px; height:12px; border-radius:50%; flex-shrink:0;}
.cand .meta{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;}
.cand .meta .top{font-size:0.85rem; font-weight:600; font-family:'IBM Plex Mono',monospace;}
.cand .meta .bottom{font-size:0.72rem; color:var(--text-muted);}
.tag{font-size:0.65rem; padding:2px 6px; border-radius:10px; border:1px solid var(--panel-border); color:var(--text-muted); text-transform:lowercase;}
.tag.match{border-color:var(--accent); color:var(--accent);}
.profile-head{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px;}
.profile-head h2{margin:0;}
.profile-readout{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--text-muted);}
.profile-canvas{width:100%; height:120px; display:block; margin:8px 0 12px; cursor:crosshair; touch-action:none;}
.empty-note{font-size:0.82rem; color:var(--text-muted); line-height:1.5; margin:0;}

/* map markers */
.pin{
  display:flex; align-items:center; justify-content:center; font:600 10px 'Space Grotesk',sans-serif;
  color:#fff; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.35); cursor:grab;
}
.pin.start{width:26px; height:26px; border-radius:50%; background:var(--accent);}
.pin.end{width:24px; height:24px; border-radius:4px; background:var(--accent-2);}
.hover-dot{width:12px; height:12px; border-radius:50%; background:var(--panel); border:3px solid var(--text); pointer-events:none;}
.maplibregl-ctrl-attrib{font-size:10px;}