:root { color-scheme: dark; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; background:#061727; color:#eff8ff; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { min-width:320px; margin:0; background:#061727; }
button,input,select { font:inherit; }
button { cursor:pointer; border:0; }
.hidden { display:none!important; }

.map-wordmark { position:fixed; z-index:25; left:1rem; bottom:calc(5.45rem + env(safe-area-inset-bottom)); color:#f3fbffb8; font-size:1.08rem; font-weight:850; letter-spacing:-.045em; text-shadow:0 .1rem .6rem #000d; pointer-events:none; }

main { min-height:100dvh; padding:0 0 calc(5.2rem + env(safe-area-inset-bottom)); }
.trip-form { padding:1rem; background:#061727; }
.trip-form > div:first-child { display:none; }
.trip-form form { display:grid; gap:.45rem; padding:0; }
label { color:#a8c8da; font-size:.78rem; font-weight:750; }
.location-input { position:relative; }
.location-input input { padding-right:3.25rem; }
.gps-button { position:absolute; top:50%; right:.35rem; display:grid; width:2.3rem; min-height:2.3rem; place-items:center; padding:0; border:1px solid #3f718a; border-radius:.6rem; background:#113a53; color:#dff5ff; transform:translateY(-50%); }
.add-stop-button { min-height:2rem; padding:.3rem .5rem; border:1px solid #3f718a; background:#113a53; color:#dff5ff; font-size:.72rem; }
.waypoints { display:grid; gap:.4rem; }
.waypoint-row { display:grid; grid-template-columns:1fr 2.3rem; gap:.35rem; align-items:end; }
.waypoint-row label { grid-column:1 / -1; }
.waypoint-row button { min-height:2.85rem; padding:0; background:#14364d; color:#e4f6ff; }
input,select { width:100%; min-height:2.85rem; padding:.65rem .75rem; border:1px solid #315e78; border-radius:.75rem; background:#0a263b; color:#f3fbff; }
button { min-height:2.85rem; padding:.7rem .85rem; border-radius:.75rem; background:#5bd0ee; color:#052131; font-weight:800; }
.departure-note,.status { margin:.1rem 0; color:#acc8d8; font-size:.78rem; line-height:1.4; }

/* Map is the primary phone surface. */
.map-screen { position:fixed; z-index:1; inset:0 0 calc(4.7rem + env(safe-area-inset-bottom)); display:flex; flex-direction:column; margin:0; background:#061727; }
.map-screen .section-title { display:none; }
.map-wrap { flex:1; min-height:0; background:#071b2d; }
#route-map { width:100%; height:100%; }
.maplibregl-ctrl-top-right { top:.55rem!important; right:.55rem!important; }
.maplibregl-ctrl-attrib { font-size:10px!important; }

/* The planner floats above the map at launch. */
.planner-overlay { position:fixed; z-index:12; top:.7rem; left:.7rem; right:.7rem; max-height:calc(100dvh - 6rem); overflow-y:auto; padding:.7rem; border:1px solid #3e6f89; border-radius:1rem; background:#09243aeF; box-shadow:0 .8rem 2rem #0009; backdrop-filter:blur(16px); }
.planner-toggle { display:flex; min-height:2.2rem; width:calc(100% + 1.4rem); align-items:center; justify-content:center; gap:.4rem; margin: .7rem -.7rem -.7rem; border:1px solid #3e6f89; border-radius:0 0 1rem 1rem; background:#0d3852; color:#e8f8ff; font-size:.76rem; }
.planner-collapsed .planner-overlay { top:.7rem; max-height:none; overflow:visible; padding:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.planner-collapsed .planner-overlay form,.planner-collapsed .planner-overlay .status { display:none; }
.planner-collapsed .planner-toggle { width:auto; min-height:2.55rem; margin:0; padding:.5rem .8rem; border-radius:999px; box-shadow:0 .5rem 1.2rem #0009; }
.planner-overlay form { display:grid; gap:.35rem; }
.planner-overlay .departure-note { display:none; }
.planner-overlay button { width:100%; }

.destination-drawer { position:relative; z-index:5; margin-top:auto; padding:.8rem .9rem 1rem; border-top:1px solid #315f79; border-radius:1.1rem 1.1rem 0 0; background:#09243af5; box-shadow:0 -1rem 2.5rem #0008; }
.drawer-handle { width:2.5rem; height:.28rem; margin:0 auto .55rem; border-radius:99px; background:#5e8094; }
.drawer-title { margin:0 0 .55rem; color:#f4fbff; font-size:.9rem; font-weight:800; }
.map-controls { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.map-mode { min-height:2.7rem; margin:0; padding:.55rem; background:#123a54; color:#dceff8; font-size:.82rem; }
.map-mode.selected { background:#5bd0ee; color:#052131; }
.muted { margin:.65rem 0 0; color:#b3cedd; font-size:.76rem; line-height:1.35; }
.map-help { display:none!important; }

/* Route choices are a phone drawer, not a desktop section. */
#route-section { position:fixed; z-index:15; right:.7rem; bottom:calc(4.7rem + env(safe-area-inset-bottom)); left:.7rem; max-height:42dvh; padding:.85rem .75rem; overflow:auto; border:1px solid #315f79; border-bottom:0; border-radius:1rem 1rem 0 0; background:#071b2df5; box-shadow:0 -.7rem 1.8rem #0008; backdrop-filter:blur(16px); }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.eyebrow { margin:0 0 .25rem; color:#78d9ef; font-size:.67rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { font-size:1.35rem; margin-bottom:.45rem; }
h2 { margin:0; font-size:1.18rem; letter-spacing:-.03em; }
.route-options { display:grid; gap:.65rem; margin-top:1rem; }
.route-card { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:1rem; border:1px solid #315f79; border-radius:1rem; background:#0b2a40; }
.route-card.selected { outline:2px solid #63d8ef; }
.route-label { margin:0 0 .2rem; color:#87e0f3; font-size:.85rem; font-weight:800; }
.route-summary { margin:0; color:#d7e9f2; font-size:.86rem; }
.route-card button { min-height:2.55rem; margin:0; padding:.5rem .65rem; font-size:.78rem; }

/* Weather is its own phone page with large, vertical cards. */
.weather-drawer { min-height:calc(100dvh - 8.6rem); padding:1rem .75rem; background:#071b2d; }
.drawer-actions { display:flex; gap:.65rem; }
.text-button { min-height:auto; padding:0; background:transparent; color:#85def1; font-size:.78rem; }
.weather-timeline { display:grid; gap:.7rem; }
.checkpoint { position:relative; min-height:8.4rem; padding:1rem; border:1px solid #315f79; border-radius:1rem; background:#0b2a40; }
.checkpoint.has-risk { border-color:#f0a35b; background:#392817; }
.checkpoint.has-alert { border-color:#ff665d; background:#42232a; }
.checkpoint-time { color:#82dcf0; font-size:.82rem; font-weight:850; }
.checkpoint-location { margin:.25rem 0 .55rem!important; color:#f6fcff!important; font-size:1rem; font-weight:850; }
.weather-glyph { float:right; margin:-.1rem .1rem .25rem .7rem; font-size:2.6rem; line-height:1; }
.weather-map-pin { display:grid; width:2rem; height:2rem; place-items:center; min-height:0; padding:0; border:2px solid #fff; border-radius:50% 50% 50% 0; background:#0d4d72; color:#f4fbff; box-shadow:0 .2rem .55rem #0009; transform:rotate(-45deg); }
.weather-map-pin i { font-size:1rem; transform:rotate(45deg); }
.checkpoint-temp { margin:.2rem 0; font-size:1.8rem; font-weight:850; }
.checkpoint p { margin-bottom:.32rem; color:#d5e6ef; font-size:.85rem; }
.forecast-pending { margin-top:1.45rem!important; color:#b6cedb!important; }
.risk { color:#ffd0a3!important; font-weight:750; }
.alert-text { color:#ffc3bf!important; font-weight:800; }
.attribution { margin:1rem 0 0; color:#a7c1d0; font-size:.7rem; line-height:1.4; }

.bottom-nav { position:fixed; z-index:30; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1fr; gap:.4rem; padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); border-top:1px solid #315f79; background:#071b2df2; backdrop-filter:blur(16px); }
.bottom-nav button { display:flex; min-height:3.1rem; align-items:center; justify-content:center; gap:.45rem; margin:0; background:transparent; color:#b9d3e1; }
.bottom-nav button.active { background:#15445e; color:#f4fcff; }
.bottom-nav button:disabled { cursor:not-allowed; color:#587282; opacity:.55; }
.bottom-nav button i { font-size:1.15rem; }
.confirm-route { position:fixed; z-index:20; top:1rem; left:50%; min-height:2.75rem; padding:.5rem 1rem; border:2px solid #effbff; border-radius:999px; background:#23c5e5; color:#052131; box-shadow:0 .45rem 1.2rem #0009; font-size:.86rem; letter-spacing:.08em; transform:translateX(-50%); }