/* Layout: map table on the left, controls stack on the right; results band below. */
:root{
  --paper:#F2F3F0; --sheet:#FFFFFF; --ink:#17191B; --muted:#5B605C; --rule:#D8DBD5;
  --you:#F2600C; --best:#0B4FD0; --overprint:#A3106F; --good:#1F7A45; --warn:#B4231A;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --paper:#131416; --sheet:#1C1E21; --ink:#ECEBE6; --muted:#A2A6A1; --rule:#33363A;
  --you:#FF7A2E; --best:#6AA2FF; --overprint:#E569BE; --good:#62C48C; --warn:#FF7A70; color-scheme:dark }}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:15px/1.55 var(--body);
  padding:env(safe-area-inset-top,0) max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.wrap{max-width:1320px;margin:0 auto;display:grid;gap:22px;padding-top:22px}
.top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 32px;align-items:end}
@media (max-width:760px){.top{grid-template-columns:minmax(0,1fr)}}
.eyebrow{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--overprint)}
h1{font:700 clamp(38px,6vw,60px)/.95 var(--display);margin:2px 0 0;letter-spacing:.01em}
h2{font:600 20px/1.1 var(--display);letter-spacing:.02em;margin:0;text-transform:uppercase}
.lede{margin:0;color:var(--muted);max-width:70ch}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
@media (max-width:960px){.stage{grid-template-columns:minmax(0,1fr)}}
.mapbox{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:8px;min-width:0;display:grid;gap:8px}
canvas#map{display:block;width:100%;height:auto;border-radius:3px}
.maplegend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:0 4px 2px}
.sw{display:inline-block;width:22px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}
.panel{display:grid;gap:12px;min-width:0}
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:14px 16px;display:grid;gap:10px;min-width:0}
.hint{margin:0;color:var(--muted);font-size:13px}
.drop{display:grid;gap:2px;place-items:center;text-align:center;border:1.5px dashed var(--rule);border-radius:6px;padding:16px 10px;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--you)}
.drop:focus-within{outline:2px solid var(--best);outline-offset:2px}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop-main{font-weight:600}
.drop-sub{font-size:12px;color:var(--muted)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row label{font-size:13px;color:var(--muted)}
.row input{font:500 15px var(--mono);width:88px;padding:6px 8px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink)}
.btn{font:500 13px var(--body);padding:7px 11px;border-radius:4px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--best)}
.btn.ghost{margin-left:auto}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.seg button{font:600 15px var(--body);padding:9px 0;border:0;background:var(--paper);color:var(--muted);cursor:pointer}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.seg button:focus-visible{outline:2px solid var(--best);outline-offset:-2px}
.pace-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
input[type=range]{width:100%;accent-color:var(--best)}
input[type=range]:disabled{opacity:.45}
output{font:500 18px var(--mono);font-variant-numeric:tabular-nums}
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.results{grid-template-columns:minmax(0,1fr)}}
.res{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:14px 16px;display:grid;gap:8px;align-content:start;min-width:0}
.res .tag{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.res .big{font:700 44px/1 var(--display);font-variant-numeric:tabular-nums}
.res .big small{font:500 15px var(--mono);color:var(--muted);margin-left:6px}
.res p{margin:0;color:var(--muted);font-size:14px}
.res .line{display:flex;justify-content:space-between;gap:8px;font:14px var(--mono);font-variant-numeric:tabular-nums;border-top:1px solid var(--rule);padding-top:6px}
.res .line span:first-child{color:var(--muted);font-family:var(--body)}
.res.you{border-top:4px solid var(--you)}
.res.best{border-top:4px solid var(--best)}
.res.alt{border-top:4px solid var(--rule)}
.verdict{font-weight:600;color:var(--ink)}
.verdict.up{color:var(--good)}
.swap{display:flex;flex-wrap:wrap;gap:6px}
.pill{font:500 12px var(--mono);padding:2px 7px;border-radius:999px;border:1px solid var(--rule)}
.pill.add{border-color:var(--good);color:var(--good)}
.pill.drop{border-color:var(--warn);color:var(--warn)}
.controls-card .cc-head{display:grid;gap:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 13px var(--mono);padding:5px 9px;border-radius:4px;border:1px solid var(--rule);background:var(--paper);color:var(--muted);cursor:pointer;min-width:52px}
.chip[aria-pressed="true"]{background:var(--overprint);border-color:var(--overprint);color:#fff}
.chip:focus-visible{outline:2px solid var(--best)}
footer{color:var(--muted);font-size:12px;max-width:90ch}
.err{color:var(--warn);font-weight:500}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}