*{box-sizing:border-box}body{margin:0;background:#f1f6f9;color:#24465c;font:15px/1.45 system-ui,sans-serif}header{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:#194c6e;color:white;padding:12px 18px}header a{color:white;text-decoration:none}header span{font-size:10px;background:#ffffff25;padding:3px 6px;border-radius:4px}main{max-width:1200px;margin:auto;padding:12px}h1{font-size:22px;margin:3px 0 12px}.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}button,select{font:600 14px system-ui;border:1px solid #a8bfce;border-radius:6px;padding:10px;background:white;color:#24465c;cursor:pointer}#start,#follow[aria-pressed=true]{background:#246986;color:white}button:disabled{opacity:.5;cursor:default}#status{min-height:22px;margin:10px 0}#map{height:65vh;min-height:360px;border-radius:10px;border:1px solid #b7cbd7}.details{padding:5px 12px;background:white;border-radius:0 0 8px 8px}.details p{margin:7px 0}.note{font-size:12px;color:#536b7b;margin:8px 0}.moving-weather{border:1px solid #afc4d0;border-radius:8px;background:#fffffff5;box-shadow:0 2px 12px #1234;padding:9px 11px;color:#24465c;font:13px/1.5 system-ui;min-width:180px;max-width:230px;white-space:normal}.moving-weather img{width:42px;height:42px;vertical-align:middle}.moving-weather strong{font-size:23px}.moving-weather .minor{font-size:11px;color:#536b7b}.moving-weather p{margin:3px 0}.moving-weather .stale{color:#9b4d15}.leaflet-tooltip-left.moving-weather:before{border-left-color:#afc4d0}@media(max-width:600px){header{gap:10px;font-size:12px;padding:10px}main{padding:8px}h1{font-size:19px}#map{height:62vh}.moving-weather{min-width:145px;max-width:170px;padding:6px 8px;font-size:12px}.moving-weather strong{font-size:20px}}

.drive-position-marker{background:transparent;border:0}.drive-position-marker span{display:block;width:24px;height:24px;margin:2px;border:3px solid #fff;border-radius:50%;background:#147ba3;box-shadow:0 1px 6px #1238;cursor:grab}.drive-position-marker.leaflet-drag-target span{cursor:grabbing}

#expand{position:fixed;right:10px;top:10px;z-index:1100;width:38px;height:38px;padding:0;background:white;font-size:27px;line-height:1;box-shadow:0 1px 5px #1234}
body.drive-fullscreen{overflow:hidden}.drive-fullscreen #map{position:fixed;inset:0;height:100dvh;width:100%;min-height:0;border:0;border-radius:0;z-index:900}
.drive-fullscreen header,.drive-fullscreen h1,.drive-fullscreen .note,.drive-fullscreen .details{display:none}
.drive-fullscreen .controls{position:fixed;top:10px;left:56px;right:56px;z-index:1000;gap:5px;pointer-events:none}.drive-fullscreen .controls>*{pointer-events:auto}.drive-fullscreen .controls label{background:white;border-radius:6px;padding-left:7px;font-size:12px}
.drive-fullscreen #status{position:fixed;bottom:28px;left:10px;right:10px;z-index:1000;background:#fffffff0;border-radius:7px;padding:7px 10px;margin:0;font-size:12px;max-height:25dvh;overflow:auto;box-shadow:0 1px 5px #1232}
@media(max-width:600px){.drive-fullscreen .controls button,.drive-fullscreen .controls select{font-size:12px;padding:8px 6px}.drive-fullscreen .controls{left:50px;right:52px}}

#map .margin-weather{position:absolute;right:12px;top:30%;z-index:650;max-height:55%;overflow:auto;width:200px;pointer-events:auto}
.weather-connector{position:absolute;inset:0;width:100%;height:100%;z-index:450;pointer-events:none;overflow:hidden}.weather-connector line{stroke:#246986;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
@media(max-width:600px){#map .margin-weather{right:8px;width:160px;min-width:0;max-width:45%;top:32%}}

#open-chrome{display:inline-block;padding:10px;border:1px solid #a8bfce;border-radius:6px;background:#fff4d7;color:#24465c;font:600 14px system-ui;text-decoration:none;cursor:pointer}#open-chrome[hidden]{display:none!important}@media(max-width:600px){.drive-fullscreen #open-chrome{font-size:12px;padding:8px 6px}}

#chrome-help{flex-basis:100%;max-width:460px;padding:7px 10px;border:1px solid #d4dfe6;border-radius:6px;background:#fffffff5;color:#355469;font:12px/1.4 system-ui}#chrome-help[hidden]{display:none!important}

#srm-home{display:inline-block;padding:10px;border:1px solid #a8bfce;border-radius:6px;background:white;color:#24465c;font:600 14px system-ui;text-decoration:none}#srm-home:hover{background:#e3edf4}@media(max-width:600px){.drive-fullscreen #srm-home{font-size:12px;padding:8px 6px}}

#map .margin-weather{top:56%;right:12px;max-height:calc(44% - 90px)}
@media(max-width:600px){#map .margin-weather{top:56%;right:8px;max-height:calc(44% - 90px)}}

.tracking-indicator{font-size:12px;line-height:1.3;padding:4px 7px;border-radius:6px;background:#edf5f8;color:#264e63;font-variant-numeric:tabular-nums}.tracking-indicator[hidden]{display:none}

#gps-countdown{font-weight:700;border:1px solid #9dbdcc;background:#fff;white-space:nowrap;min-width:80px;text-align:center}

.moving-weather .weather-reading{font-size:inherit;font-weight:400;line-height:1.35;margin:6px 0;overflow-wrap:anywhere}.moving-weather .weather-value{font-size:16px;font-weight:600}

/* Mobile uses pinch zoom; retain zoom buttons on desktop. */
@media(max-width:600px){#map .leaflet-control-zoom{display:none}}

.drive-hud{position:absolute;left:12px;bottom:100px;z-index:700;padding:8px 10px;border:1px solid #a8bdc9;border-radius:8px;background:#fffffff2;box-shadow:0 2px 7px #1233;pointer-events:auto;color:#24465c;font-size:11px;max-width:170px}.drive-hud strong{font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}.gps-quality{font-size:11px;margin-top:4px}.drive-hud[data-quality=good] .gps-quality{color:#276240}.drive-hud[data-quality=weak]{border-color:#ba8d46;background:#fff3df}.drive-hud[data-quality=weak] .gps-quality{color:#845619}
.north-control{position:absolute;top:56px;right:10px;z-index:1001;width:48px;padding:5px;display:flex;flex-direction:column;align-items:center;gap:1px;background:#fffffff2;font-size:11px;box-shadow:0 1px 5px #1233}.north-arrow{display:block;position:relative;width:34px;height:40px;color:#b33b35;font-size:0;line-height:0;transform-origin:center}.north-arrow::before{content:"";position:absolute;left:4px;top:1px;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:20px solid currentColor}.north-arrow::after{content:"";position:absolute;left:14px;top:18px;width:6px;height:21px;background:currentColor;border-radius:0 0 2px 2px}.options-toggle{position:absolute;top:10px;left:56px;z-index:1001;padding:8px 10px;background:#fffffff2;font-size:12px;box-shadow:0 1px 5px #1233}.drive-fullscreen .controls{top:53px}.drive-options-hidden .controls,.drive-options-hidden #status{display:none!important}.drive-weather-notice{position:absolute;left:12px;right:58px;top:38%;z-index:800;max-width:430px;background:#fff0cc;color:#634918;border:1px solid #d4ae59;border-radius:7px;padding:9px 38px 9px 10px;font-size:13px;box-shadow:0 2px 8px #1233}.drive-weather-notice[hidden]{display:none}.drive-weather-notice button{position:absolute;right:3px;top:2px;background:transparent;border:0;font-size:23px;line-height:24px;padding:3px 7px;color:#634918}.drive-options-hidden .drive-weather-notice{top:65px}
@media(max-width:600px){.drive-hud{left:8px;bottom:95px;padding:7px 8px;max-width:145px}.drive-hud strong{font-size:24px}.options-toggle{left:10px}.drive-weather-notice{left:8px;font-size:12px}.drive-fullscreen .controls{left:10px;right:53px}.drive-options-hidden .drive-hud{bottom:30px}}

/* Circular compass; the arrow rotates inside the fixed rim. */
.north-control{width:58px;height:58px;border-radius:50%;padding:8px;justify-content:center;gap:0}.north-control>span:last-child{display:none}

/* Always-visible compact home logo, outside the hideable options. */
#map #srm-home{position:absolute;top:10px;left:10px;z-index:1002;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:2px;border-radius:6px;box-shadow:0 1px 5px #1233;background:#fff}
#map #srm-home img{display:block;width:40px;height:40px;object-fit:contain}
#map .options-toggle{left:64px}
#map .leaflet-top.leaflet-left{top:56px}
.drive-fullscreen .controls{top:64px}

/* Establish the map position before Leaflet initialization, allowing fullscreen CSS to apply. */
#map{position:relative}

.drive-title{display:flex;align-items:center;gap:12px;margin:3px 44px 12px 0}.drive-title h1{margin:0}.drive-title #close-map{flex-shrink:0;padding:6px 10px}.drive-fullscreen .drive-title{display:none}

#share-position{position:fixed;right:56px;top:10px;z-index:1100;width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;background:white;box-shadow:0 1px 5px #1234}
@media(max-width:360px){#map .options-toggle{max-width:calc(100% - 166px);font-size:11px;padding:8px 6px}}

.drive-share-dialog{width:min(360px,calc(100% - 24px));border:1px solid #a8bfce;border-radius:12px;padding:20px;color:#24465c;background:#fff;box-shadow:0 8px 32px #1235}.drive-share-dialog::backdrop{background:#1236}.drive-share-dialog strong{display:block;padding-right:25px}.drive-share-dialog .share-close{position:absolute;right:6px;top:6px;border:0;padding:2px 8px;font-size:24px}.share-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.share-links a,.share-links button{display:block;text-align:center;text-decoration:none;background:#f1f6f9;border:1px solid #a8bfce;border-radius:6px;padding:10px;color:#24465c;font:600 14px system-ui}.drive-share-dialog p{margin:10px 0 0;font-size:13px}.drive-share-dialog p:empty{display:none}