:root{--bg:#fff;--fg:#1c2128;--muted:#5b6570;--panel:#f6f8fa;--line:#d0d7de;--accent:#0b6bcb;
--warn:#b54708;--warnbg:#fff4e5;--bad:#b42318;--badbg:#fdecea;--ok:#1a7f37;
--sev-unknown:#6b7280;--sev-low:#2e9d4f;--sev-medium:#e0a100;--sev-high:#e8590c;--sev-blocking:#c92a2a;}
@media (prefers-color-scheme:dark){:root{--bg:#0d1117;--fg:#e6edf3;--muted:#9aa4af;--panel:#161b22;
--line:#30363d;--accent:#58a6ff;--warn:#f0a050;--warnbg:#3a2a10;--bad:#ff8077;--badbg:#3d1614;--ok:#56d364;}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{font:14px/1.4 system-ui,sans-serif;background:var(--bg);color:var(--fg)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:3000;background:var(--bg);padding:6px}
/* full-screen map; search and results float over it (top left), settings slide in */
#layout{position:fixed;inset:0}
#map{position:absolute;inset:0}
#sidebar{position:absolute;z-index:1000;top:12px;left:12px;width:400px;max-width:calc(100% - 24px);
  max-height:calc(100% - 24px);display:flex;flex-direction:column;pointer-events:none}
#sidebar>*{pointer-events:auto}
#searchbar{position:relative;background:var(--bg);border-radius:24px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.search-row{display:flex;align-items:center;gap:4px;padding:4px 6px 4px 8px}
.brand{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font:700 16px/30px system-ui;text-align:center}
#search{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--fg);font-size:16px;padding:10px 6px}
#search::-webkit-search-cancel-button{cursor:pointer}
button.icon{border:0;background:transparent;font-size:18px;width:40px;height:40px;border-radius:50%;padding:0}
button.icon:hover{background:var(--panel)}
#suggest{list-style:none;margin:0;padding:6px 0;border-top:1px solid var(--line)}
#suggest li{display:flex;gap:10px;align-items:center;padding:8px 16px;cursor:pointer}
#suggest li[aria-selected=true],#suggest li:hover{background:var(--panel)}
#suggest .ico{flex:none;width:22px;text-align:center;color:var(--muted)}
#suggest .t{font-weight:600}#suggest .d{color:var(--muted);font-size:12px}
#suggest .none{color:var(--muted);cursor:default}
/* 99 % opaque on purpose: Chrome treats an opaque scrolling panel as covering the map
   down to the end of its scrolled content, and then leaves the WebGL map there
   unpainted (grey); a background that is not fully opaque avoids that */
#panel{margin-top:10px;overflow:auto;background:color-mix(in srgb,var(--bg) 99%,transparent);border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.3);padding:4px 14px 10px}
#panel:not(:has(section:not([hidden]))){display:none}
.coords{margin:10px 0 4px}.coords>div{margin:2px 0}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.dot.a{background:#0b6bcb}.dot.b{background:#1a7f37}
.drive-row{margin-top:10px}
.steps-box summary{cursor:pointer;list-style:revert}.steps-box summary h2{display:inline}
#settings{position:absolute;z-index:1100;top:0;right:0;bottom:0;width:360px;max-width:100%;overflow:auto;
  padding:8px 16px 16px;background:var(--panel);border-left:1px solid var(--line);box-shadow:-2px 0 8px rgba(0,0,0,.25)}
.settings-head{display:flex;justify-content:space-between;align-items:center}
.settings-head h2{margin:8px 0}
.me-dot{width:16px;height:16px;border-radius:50%;background:#1a73e8;border:3px solid #fff;box-shadow:0 0 0 6px rgba(26,115,232,.2),0 0 3px rgba(0,0,0,.5)}
h1{font-size:18px;margin:0;display:inline}h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 6px}
.tag{color:var(--muted);font-size:12px;margin-left:8px}
.hint{color:var(--muted);font-size:12px;margin:4px 0}
.row{display:flex;gap:6px;margin:6px 0}
input[type=password],input[type=text],select{flex:1;width:100%;padding:6px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--fg)}
button{padding:6px 10px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--fg);cursor:pointer}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
label{display:block;margin:6px 0}.chk{margin:2px 0}
fieldset.seg{border:0;padding:0;margin:6px 0;display:flex;gap:12px;align-items:center}
fieldset.seg legend{float:left;margin-right:10px;padding:0}fieldset.seg label{margin:0}
.plain{list-style:none;margin:0;padding:0}
.banner{margin-top:8px;padding:8px 12px;border-radius:8px;background:var(--badbg);color:var(--bad);border:1px solid var(--bad);font-size:13px}
.banner.warn{background:var(--warnbg);color:var(--warn);border-color:var(--warn)}
#source-banners .banner{margin:0 0 8px}
.badge{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;border:1px solid currentColor}
.h-healthy{color:var(--ok)}.h-degraded,.h-unknown{color:var(--warn)}.h-stale,.h-unreachable{color:var(--bad)}.h-planned,.h-disabled{color:var(--muted, #888)}
#sources li{padding:6px 0;border-bottom:1px solid var(--line)}#sources small{display:block;color:var(--muted)}
.route{border:2px solid var(--line);border-radius:6px;padding:8px;margin:8px 0;cursor:pointer;background:var(--bg)}
.route.sel{border-color:var(--accent)}
.route h3{margin:0 0 2px;font-size:14px}.route .eta{font-weight:600}.route ul{margin:4px 0 0 16px;padding:0}
.route .meta{color:var(--muted);font-size:12px}
.err{color:var(--bad)}.warnline{color:var(--warn);font-size:12px}
.bar{display:flex;align-items:center;gap:6px;margin:2px 0}.bar span.n{width:72px}.bar .track{flex:1;height:8px;background:var(--line);border-radius:4px}
.bar .fill{height:8px;background:var(--accent);border-radius:4px}.bar .v{width:34px;text-align:right}
.ev{border-top:1px solid var(--line);padding:6px 0;font-size:12px}
.ev dl{margin:2px 0;display:grid;grid-template-columns:auto 1fr;gap:0 8px}.ev dt{color:var(--muted)}.ev dd{margin:0;word-break:break-word}
.epi{font-weight:700;font-size:11px;text-transform:uppercase}
.sw{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;margin-right:6px;background:var(--sev-high);border:2px solid var(--fg)}
.sw.dashed{background:transparent;border:2px dashed var(--sev-high)}
.sw.infer{background:transparent;border:2px dotted var(--sev-high);border-radius:3px;transform:rotate(45deg) scale(.85)}
.sw.pred{background:transparent;border:2px double var(--sev-high);border-radius:3px}
/* map incident markers */
.inc{width:22px;height:22px;border-radius:50%;border:3px solid #111;background:var(--c);color:#fff;font:700 11px/16px system-ui;text-align:center}
.inc.observation{background:rgba(255,255,255,.55);border:3px dashed var(--c);color:#111}
.inc.inference{background:rgba(255,255,255,.55);border:3px dotted var(--c);border-radius:4px;transform:rotate(45deg)}
.inc.inference span{display:inline-block;transform:rotate(-45deg)}
.inc.prediction{background:rgba(255,255,255,.55);border:3px double var(--c);border-radius:4px;color:#111}
.inc.sel{box-shadow:0 0 0 3px var(--accent)}
.pin{font:700 12px/22px system-ui;text-align:center;color:#fff;width:24px;height:24px;border-radius:50%;background:#0b6bcb;border:2px solid #fff;box-shadow:0 0 3px #000}
.pin.b{background:#1a7f37}
@media (max-width:720px){#sidebar{top:8px;left:8px;max-width:calc(100% - 16px)}#panel{max-height:45vh}}
/* directions */
.steps{list-style:none;margin:0;padding:0}
.step{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);cursor:pointer}
.step .arrow{flex:none;width:28px;height:28px;border-radius:6px;background:var(--accent);color:#fff;font:700 18px/28px system-ui;text-align:center}
.step .sbody{flex:1}.step .meta{color:var(--muted);font-size:12px}
.lanes{display:flex;gap:2px;margin:4px 0}
.lane{min-width:22px;padding:1px 3px;text-align:center;border:1px solid var(--line);border-radius:3px;color:var(--muted);font-weight:700}
.lane.ok{background:var(--accent);border-color:var(--accent);color:#fff}
/* speed-limit signs (§ 41 StVO Zeichen 274 look) */
.sign{width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid #c92a2a;color:#111;font:700 10px/18px system-ui;text-align:center;box-shadow:0 0 2px #000}
.sign.temp{border-color:#e0a100}
.sign.end{border:2px solid #111;background:linear-gradient(135deg,#fff 44%,#111 44%,#111 56%,#fff 56%)}
/* driver reports by tier */
.rep{width:22px;height:22px;border-radius:4px;transform:rotate(45deg);border:3px solid #111;background:#fff;color:#111;font:700 12px/16px system-ui;text-align:center}
.rep span{display:inline-block;transform:rotate(-45deg)}.rep.t-candidate{border-style:dashed}.rep.t-local{background:#fde68a}.rep.t-live,.rep.t-official{background:#e8590c;color:#fff}
#map.reporting{cursor:crosshair}
/* drive mode */
#drive{border:2px solid var(--accent);border-radius:8px;padding:8px;margin:8px 0;background:var(--bg)}
#drive .next{display:flex;gap:10px;align-items:center}
#drive .next>div:nth-child(2){flex:1}
.arrow.big{flex:none;width:44px;height:44px;border-radius:8px;background:var(--accent);color:#fff;font:700 30px/44px system-ui;text-align:center}
#drive .dist{font-size:22px;font-weight:700}
.sign.big{width:46px;height:46px;border-width:6px;font:700 17px/34px system-ui;flex:none}
.sign.big.unknown{border-color:var(--line);color:var(--muted)}
.sign.over{animation:over 1s infinite alternate}
@keyframes over{to{background:#c92a2a;color:#fff}}
#drive .alert{margin:6px 0;padding:6px;border-left:4px solid #e8590c;background:var(--warnbg);font-size:13px}
#drive .alert.t-local,#drive .alert.t-candidate{border-left-style:dashed}
#drive .prompt{margin:6px 0;padding:6px;border:1px solid var(--line);border-radius:6px}
#drive .prompt button{margin:4px 4px 0 0}
.car{width:26px;height:26px;border-radius:50%;background:#0b6bcb;border:3px solid #fff;color:#fff;font:700 12px/20px system-ui;text-align:center;box-shadow:0 0 4px #000}
.sw.line{border:0;border-radius:2px;height:6px;width:18px;transform:none}
.sw.line.queue{background:#c92a2a}.sw.line.slow{background:#e8590c}
/* map agent */
.agent-log{max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:6px;margin:6px 0}
.msg{padding:6px 8px;border-radius:8px;max-width:92%;font-size:13px}
.msg.me{align-self:flex-end;background:var(--accent);color:#fff}
.msg.bot{align-self:flex-start;background:var(--bg);border:1px solid var(--line)}
.msg.err{color:var(--bad)}
.msg .places{margin:4px 0 0 16px;padding:0}.msg .places li{margin:2px 0}
.msg .places button{margin-left:6px;padding:1px 6px;font-size:12px}
#agent-mic.listening{background:var(--bad);color:#fff}
.pin.via{background:#7a5af8;width:22px;height:22px;line-height:18px;font-size:11px}
.leaflet-control-attribution{font-size:10px;max-width:60%;line-height:1.3}
/* drive mode: the next turn first; the planning view returns after Stop */
body.driving #route-sec,body.driving #agent-sec,body.driving .drive-row,body.driving #detail-sec{display:none}
body.driving #drive{margin-top:10px}
@media (max-width:720px){.leaflet-control-attribution{max-width:calc(100% - 70px);max-height:1.4em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.leaflet-control-attribution:hover,.leaflet-control-attribution:focus-within{max-height:none;white-space:normal}}