*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#e8eef0;color:#203135;font:16px system-ui}#map{position:fixed;inset:0}.surface{position:absolute;background:#fff;border-radius:24px;box-shadow:0 3px 18px #102a3833;padding:22px}h1{margin:0 0 18px;font-size:28px}h2{margin:0;font-size:18px}p{line-height:1.45;margin:12px 0;color:#526267}button{min-height:48px;border:0;border-radius:28px;padding:12px 20px;font:700 16px system-ui;cursor:pointer;background:#e9f1f3;color:#214750}button:disabled{opacity:.5;cursor:default}a{color:#086a75}#preview{left:20px;top:20px;bottom:240px;width:370px;overflow:auto}#jobMeta{display:grid;grid-template-columns:1fr 1fr;gap:12px}#jobMeta div{padding:10px;background:#f0f5f6;border-radius:12px}#jobMeta small{display:block;color:#5e7075;font-size:12px;margin-bottom:5px}#jobMeta b{overflow-wrap:anywhere}#destination{font-weight:600}.street{margin-top:22px}.street h2{margin-bottom:12px}.street iframe{width:100%;height:220px;border:0;border-radius:14px;background:#edf2f4}.street a{display:inline-block;margin-top:8px;font-size:14px}#guidance{display:none;top:20px;left:20px;width:min(560px,calc(100% - 180px));background:#006367;color:#fff;min-height:118px;padding-left:90px}#guidance h2{font-size:28px;line-height:1.25}#turn{position:absolute;left:22px;top:24px;font-size:48px}#guidanceJob{display:block;margin-top:10px;color:#d1eeeb}#mapControls{position:absolute;right:20px;top:22px;display:flex;flex-direction:column;gap:12px}#mapControls button{background:#fff;box-shadow:0 2px 8px #0002}#trip{left:20px;bottom:30px;width:370px;padding:20px}#metrics{font-size:25px;font-weight:750;color:#086b64}.actions{display:flex;flex-wrap:wrap;gap:8px}#start,#arrive{background:#007c83;color:white;flex:1}#back{background:#d93630;color:white}#error{font-size:14px}#sync{font-size:12px;margin:8px 0 0}#sync:empty{display:none}#truck{width:40px;height:40px;background:white;color:#1768ed;border:3px solid #86b5ff;border-radius:50%;text-align:center;font-size:29px;line-height:32px}body.navigating #preview{display:none}body.navigating #guidance{display:block}body.navigating #trip{width:min(560px,calc(100% - 40px))}body.navigating #refresh{display:none}body.navigating #mapControls{top:180px}.mapboxgl-ctrl-bottom-right{bottom:34px!important}@media(max-width:700px){#preview{left:12px;top:12px;bottom:auto;width:calc(100% - 100px);max-height:43dvh;padding:16px}#preview h1{font-size:22px}.street iframe{height:200px}#trip{left:12px;bottom:30px;width:calc(100% - 24px);padding:16px}#mapControls{right:10px;top:12px;gap:8px}#mapControls button{font-size:12px;padding:10px;min-width:72px}#guidance{top:12px;left:12px;width:calc(100% - 24px);padding:18px 18px 18px 70px}#guidance h2{font-size:22px}#turn{left:16px;font-size:38px}body.navigating #trip{width:calc(100% - 24px)}body.navigating #mapControls{top:170px}#metrics{font-size:22px}}@media(max-height:650px) and (min-width:701px){#preview{bottom:205px;top:10px}#trip{bottom:28px;padding:12px 18px}#error{margin:6px 0}#mapControls{gap:6px}.street{margin-top:12px}}