:root {
  color-scheme: light dark;
  --font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-xs: .7rem; --text-sm: .78rem; --text-base: .86rem; --text-md: 1rem;
  --text-lg: 1.18rem; --text-xl: 1.35rem; --text-2xl: 1.8rem;
  --font-weight-medium: 500; --font-weight-semibold: 650; --font-weight-bold: 800; --font-weight-black: 900;
  --tracking-tight: -.03em; --tracking-tighter: -.045em; --tracking-eyebrow: .12em;
  --space-1:.25rem; --space-2:.35rem; --space-3:.5rem; --space-4:.65rem; --space-5:.75rem; --space-6:1rem; --space-7:1.25rem; --space-8:1.5rem;
  --radius-sm:.5rem; --radius-md:.75rem; --radius-lg:1rem; --radius-xl:1.25rem; --radius-pill:999px;
  --ease-standard: cubic-bezier(.4,0,.2,1); --ease-decel: cubic-bezier(0,0,.2,1);
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:320ms;

  --color-bg:#eef6fc; --color-bg-alt:#e3f0fa; --color-surface:#ffffff; --color-surface-sunken:#f3f8fc;
  --color-surface-glass: rgba(255,255,255,.82);
  --color-border:#cfe0ee; --color-border-strong:#9fc2dc;
  --color-text:#0d283d; --color-text-muted:#52738a; --color-text-faint:#7d97a9;
  --color-accent:#1e96d6; --color-accent-strong:#0d6fa1; --color-accent-soft:#d7edfa;
  --color-on-accent:#ffffff; --color-accent-text:#0d6fa1;
  --color-success:#1f9d55; --color-user-location:#2f7de0; --color-waypoint:#d9821b; --color-destination:#d13d4a;
  --color-route-line:#0d6fa1; --color-route-line-alt:#a9d8f0;
  --color-risk-bg:#fdf1e2; --color-risk-border:#e8a13b; --color-risk-text:#8a5615;
  --color-alert-bg:#fdeceb; --color-alert-border:#e2555f; --color-alert-text:#9c2731;
  --shadow-sm:0 .3rem .8rem rgba(13,60,90,.12); --shadow-md:0 .6rem 1.4rem rgba(13,60,90,.16); --shadow-lg:0 -.6rem 1.8rem rgba(13,60,90,.18);

  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:#081b2c; --color-bg-alt:#0b2338; --color-surface:#0e2c44; --color-surface-sunken:#0a2338;
    --color-surface-glass: rgba(9,36,58,.86);
    --color-border:#204b66; --color-border-strong:#2f6484;
    --color-text:#eaf6ff; --color-text-muted:#9fc3d6; --color-text-faint:#7ba2b8;
    --color-accent:#52c1ec; --color-accent-strong:#7fd4f2; --color-accent-soft:#123a52;
    --color-on-accent:#062338; --color-accent-text:#7fd4f2;
    --color-success:#34d17a; --color-user-location:#5b9df5; --color-waypoint:#f2ab3d; --color-destination:#f2646f;
    --color-route-line:#7fd4f2; --color-route-line-alt:#3a6f8f;
    --color-risk-bg:#2c2113; --color-risk-border:#f0a35b; --color-risk-text:#ffd0a3;
    --color-alert-bg:#33191c; --color-alert-border:#ff6b62; --color-alert-text:#ffc3bf;
    --shadow-sm:0 .3rem .8rem rgba(0,0,0,.35); --shadow-md:0 .6rem 1.4rem rgba(0,0,0,.45); --shadow-lg:0 -.6rem 1.8rem rgba(0,0,0,.5);
  }
}

/* Explicit in-app theme override (Settings page), independent of OS preference. */
:root[data-theme="dark"] {
  --color-bg:#081b2c; --color-bg-alt:#0b2338; --color-surface:#0e2c44; --color-surface-sunken:#0a2338;
  --color-surface-glass: rgba(9,36,58,.86);
  --color-border:#204b66; --color-border-strong:#2f6484;
  --color-text:#eaf6ff; --color-text-muted:#9fc3d6; --color-text-faint:#7ba2b8;
  --color-accent:#52c1ec; --color-accent-strong:#7fd4f2; --color-accent-soft:#123a52;
  --color-on-accent:#062338; --color-accent-text:#7fd4f2;
  --color-success:#34d17a; --color-user-location:#5b9df5; --color-waypoint:#f2ab3d; --color-destination:#f2646f;
  --color-route-line:#7fd4f2; --color-route-line-alt:#3a6f8f;
  --color-risk-bg:#2c2113; --color-risk-border:#f0a35b; --color-risk-text:#ffd0a3;
  --color-alert-bg:#33191c; --color-alert-border:#ff6b62; --color-alert-text:#ffc3bf;
  --shadow-sm:0 .3rem .8rem rgba(0,0,0,.35); --shadow-md:0 .6rem 1.4rem rgba(0,0,0,.45); --shadow-lg:0 -.6rem 1.8rem rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms; }
}
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { min-width:320px; margin:0; background:var(--color-bg); }
button,input,select { font:inherit; }
button { cursor:pointer; border:0; transition:transform var(--duration-fast) var(--ease-standard), background-color var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard); }
button:active:not(:disabled) { transform:scale(.96); }
.hidden { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.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:var(--font-weight-semibold); letter-spacing:var(--tracking-tighter); text-shadow:0 .1rem .6rem #000d; pointer-events:none; opacity:1; transition:opacity var(--duration-base) var(--ease-standard); }
body:has(#confirm-route:not(.hidden)) .map-wordmark,
body:has(#map-screen.hidden) .map-wordmark { opacity:0; }

main { min-height:100dvh; padding:0 0 calc(5.2rem + env(safe-area-inset-bottom)); }
.trip-form { padding:1rem; background:var(--color-bg); }
.trip-form > div:first-child { display:none; }
.trip-form form { display:grid; gap:.45rem; padding:0; }
label { color:var(--color-text-muted); font-size:var(--text-sm); font-weight:var(--font-weight-semibold); }
.location-input { display:flex; align-items:stretch; }
.location-input input { flex:1; min-width:0; border-radius:var(--radius-md) 0 0 var(--radius-md); }
.gps-button { position:relative; z-index:2; display:grid; flex:0 0 3rem; width:3rem; min-height:2.85rem; place-items:center; padding:0; border:1px solid var(--color-border); border-left:0; border-radius:0 var(--radius-md) var(--radius-md) 0; background:var(--color-accent-soft); color:var(--color-accent-text); touch-action:manipulation; pointer-events:auto; }
.gps-button:disabled { opacity:.7; }
.gps-button .spin { animation:gps-spin 1s linear infinite; }
@keyframes gps-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gps-button .spin { animation:none; } }
.gps-feedback { margin:.1rem 0; color:var(--color-alert-text); font-size:var(--text-sm); line-height:1.35; }
.add-stop-button { min-height:2rem; padding:.3rem .5rem; border:1px solid var(--color-border-strong); background:var(--color-accent-soft); color:var(--color-accent-text); font-size:var(--text-xs); }
.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:var(--color-surface-sunken); color:var(--color-text-muted); }
input,select { width:100%; min-height:2.85rem; padding:.65rem .75rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text); }
button { min-height:2.85rem; padding:.7rem .85rem; border-radius:var(--radius-md); background:var(--color-accent); color:var(--color-on-accent); font-weight:var(--font-weight-bold); }
.departure-note { margin:.1rem 0; color:var(--color-text-muted); font-size:var(--text-sm); line-height:1.4; }
.status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* 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:var(--color-bg); }
.map-screen .section-title { display:none; }
.map-wrap { flex:1; min-height:0; background:var(--color-bg-alt); }
#route-map { width:100%; height:100%; }
.maplibregl-ctrl-top-right { top:calc(.55rem + env(safe-area-inset-top))!important; right:calc(.55rem + env(safe-area-inset-right))!important; }
.maplibregl-ctrl-attrib { font-size:10px!important; }

/* The planner floats above the map at launch. */
.planner-overlay { position:fixed; z-index:12; top:calc(.7rem + env(safe-area-inset-top)); left:calc(.7rem + env(safe-area-inset-left)); right:calc(.7rem + env(safe-area-inset-right)); max-height:calc(100dvh - 6rem); overflow-y:auto; padding:.7rem; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-glass); box-shadow:var(--shadow-md); backdrop-filter:blur(16px); transition:opacity var(--duration-slow) var(--ease-decel), transform var(--duration-slow) var(--ease-decel); }
.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 var(--color-border); border-radius:0 0 var(--radius-lg) var(--radius-lg); background:var(--color-accent-soft); color:var(--color-accent-text); font-size:var(--text-sm); }
.planner-collapsed .planner-overlay { top:calc(.7rem + env(safe-area-inset-top)); 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:var(--radius-pill); box-shadow:var(--shadow-md); }
.planner-overlay form { display:grid; gap:.35rem; }
.planner-overlay .departure-note { display:none; }
.planner-overlay form button { width:100%; }

.drawer-handle { width:2.5rem; height:.3rem; margin:0 auto var(--space-4); border-radius:var(--radius-pill); background:var(--color-border-strong); cursor:grab; }
.drawer-handle:active { cursor:grabbing; }
.drawer-title { margin:0 0 .55rem; color:var(--color-text); font-size:var(--text-md); font-weight:var(--font-weight-bold); }
.map-controls { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.map-mode { min-height:2.7rem; margin:0; padding:.55rem; background:var(--color-surface); color:var(--color-text); font-size:.82rem; border:1px solid var(--color-border); }
.map-mode.selected { background:var(--color-accent); color:var(--color-on-accent); border-color:var(--color-accent); }
.map-mode:active { transform:scale(.98); }
.muted { margin:.65rem 0 0; color:var(--color-text-muted); font-size:var(--text-sm); line-height:1.35; }
.map-help { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Route choices are a phone drawer, not a desktop section. */
#route-section { position:fixed; z-index:15; right:.7rem; bottom:calc(4.7rem + 3.6rem + env(safe-area-inset-bottom)); left:.7rem; max-height:42dvh; padding:.85rem .75rem; overflow:auto; border:1px solid var(--color-border); border-bottom:0; border-radius:var(--radius-lg) var(--radius-lg) 0 0; background:var(--color-surface-glass); box-shadow:var(--shadow-lg); backdrop-filter:blur(16px); opacity:1; transform:translateY(0); transition:opacity var(--duration-slow) var(--ease-decel), transform var(--duration-slow) var(--ease-decel), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete; }
#route-section.hidden { opacity:0; transform:translateY(1rem); }
@starting-style { #route-section:not(.hidden) { opacity:0; transform:translateY(1rem); } }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.eyebrow { margin:0 0 .25rem; color:var(--color-accent-text); font-size:var(--text-xs); font-weight:var(--font-weight-semibold); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { font-size:var(--text-xl); margin-bottom:.45rem; letter-spacing:var(--tracking-tighter); }
h2 { margin:0; font-size:var(--text-lg); letter-spacing:var(--tracking-tight); }
.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 var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); transition:transform var(--duration-fast) var(--ease-standard); }
.route-card:active { transform:scale(.98); }
.route-card.selected { outline:2px solid var(--color-accent); }
.route-label { margin:0 0 .2rem; color:var(--color-accent-text); font-size:var(--text-base); font-weight:var(--font-weight-bold); }
.route-summary { margin:0; color:var(--color-text-muted); font-size:var(--text-base); }
.route-card button { min-height:2.55rem; margin:0; padding:.5rem .65rem; font-size:var(--text-sm); }

/* Weather is its own phone page with large, vertical cards. */
.weather-drawer { min-height:calc(100dvh - 8.6rem); padding:1rem .75rem; background:var(--color-bg); }
.drawer-actions { display:flex; gap:.65rem; }
.text-button { min-height:auto; padding:0; background:transparent; color:var(--color-accent-text); font-size:var(--text-sm); }
.weather-timeline { display:grid; gap:.7rem; }
.checkpoint { position:relative; min-height:8.4rem; padding:1rem; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.checkpoint.has-risk { border-color:var(--color-risk-border); background:var(--color-risk-bg); }
.checkpoint.has-alert { border-color:var(--color-alert-border); background:var(--color-alert-bg); }
.checkpoint-time { color:var(--color-accent-text); font-size:var(--text-sm); font-weight:var(--font-weight-semibold); }
.checkpoint-location { margin:.25rem 0 .55rem!important; color:var(--color-text)!important; font-size:var(--text-md); font-weight:var(--font-weight-semibold); }
.checkpoint-body { display:flex; gap:var(--space-5); align-items:flex-start; }
.weather-glyph { flex:0 0 auto; font-size:2.6rem; line-height:1; color:var(--color-accent); }
.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:var(--color-accent-strong); color:var(--color-on-accent); box-shadow:0 .2rem .55rem rgba(13,60,90,.35); transform:rotate(-45deg); }
.weather-map-pin i { font-size:1rem; transform:rotate(45deg); }
.weather-map-pin.has-severe-weather { background:var(--color-risk-border); color:#fff; box-shadow:0 .2rem .7rem rgba(232,161,59,.72); }
.maplibregl-popup-content { padding:0!important; overflow:hidden; border-radius:.85rem!important; background:var(--color-surface)!important; color:var(--color-text)!important; box-shadow:var(--shadow-md)!important; }
.maplibregl-popup-tip { border-top-color:var(--color-surface)!important; border-bottom-color:var(--color-surface)!important; }
.maplibregl-popup-close-button { z-index:2; width:2rem; height:2rem; color:var(--color-text); font-size:1.25rem; }
.weather-popup { display:block; min-width:14rem; padding:.9rem; }
.checkpoint-temp { margin:.2rem 0; font-size:var(--text-2xl); font-weight:var(--font-weight-semibold); }
.checkpoint-body > div:last-child { flex:1; min-width:0; }
.checkpoint p { margin-bottom:.32rem; color:var(--color-text-muted); font-size:var(--text-base); }
.forecast-pending { margin-top:0!important; color:var(--color-text-muted)!important; }
.unavailable-glyph { color:var(--color-text-muted); }
.risk { color:var(--color-risk-text)!important; font-weight:var(--font-weight-medium); }
.alert-text { color:var(--color-alert-text)!important; font-weight:var(--font-weight-bold); }
.attribution { margin:1rem 0 0; color:var(--color-text-faint); font-size:var(--text-xs); line-height:1.4; }

.skeleton-line { height:.85rem; border-radius:var(--radius-sm); background:linear-gradient(90deg, var(--color-surface-sunken) 25%, var(--color-border) 50%, var(--color-surface-sunken) 75%); background-size:200% 100%; animation:skeleton-shimmer 1.4s ease-in-out infinite; }
.skeleton-line + .skeleton-line { margin-top:.5rem; }
@keyframes skeleton-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-line { animation:none; } }

.settings-section { min-height:calc(100dvh - 8.6rem); padding:1rem .75rem; background:var(--color-bg); }
.settings-group { margin-top:1.25rem; }
.settings-label { margin:0 0 .5rem; color:var(--color-text-muted); font-size:var(--text-sm); font-weight:var(--font-weight-semibold); }
.theme-switch { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.theme-option { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; min-height:4.2rem; padding:.6rem .4rem; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-muted); font-size:var(--text-sm); font-weight:var(--font-weight-medium); border-radius:var(--radius-md); }
.theme-option i { font-size:1.2rem; }
.theme-option[aria-checked="true"] { border-color:var(--color-accent); background:var(--color-accent-soft); color:var(--color-accent-text); font-weight:var(--font-weight-bold); }
.setting-toggle { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.4rem; padding:.8rem .9rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text); cursor:pointer; }
.setting-toggle span { display:grid; gap:.2rem; }
.setting-toggle strong { font-size:var(--text-base); }
.setting-toggle small { color:var(--color-text-muted); font-size:var(--text-sm); }
.radar-switch-input { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.radar-switch { position:relative; display:block; flex:0 0 auto; width:3.25rem; height:1.9rem; border:2px solid var(--color-border-strong); border-radius:var(--radius-pill); background:var(--color-surface-sunken); box-shadow:inset 0 .05rem .12rem rgba(13,60,90,.12); transition:background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.radar-switch::after { position:absolute; top:.18rem; left:.18rem; width:1.18rem; height:1.18rem; border-radius:50%; background:var(--color-surface); box-shadow:0 .1rem .28rem rgba(0,0,0,.26); content:""; transition:transform var(--duration-base) var(--ease-standard); }
.radar-switch-input:checked + .radar-switch { border-color:var(--color-accent); background:var(--color-accent); }
.radar-switch-input:checked + .radar-switch::after { transform:translateX(1.35rem); }
.radar-switch-input:focus-visible + .radar-switch { outline:3px solid var(--color-accent); outline-offset:3px; }
.radar-attribution { margin:.55rem 0 0; }
.radar-attribution a { color:inherit; }

.bottom-nav { position:fixed; z-index:30; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1fr 1fr; gap:.4rem; padding:.5rem calc(.75rem + env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) calc(.75rem + env(safe-area-inset-left)); border-top:1px solid var(--color-border); background:var(--color-surface-glass); 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:var(--color-text-muted); }
.bottom-nav button.active { background:var(--color-accent-soft); color:var(--color-accent-text); }
.bottom-nav button:disabled { cursor:not-allowed; color:var(--color-text-faint); opacity:.55; }
.bottom-nav button i { font-size:1.15rem; }

.confirm-route { position:fixed; z-index:20; left:calc(.7rem + env(safe-area-inset-left)); right:calc(.7rem + env(safe-area-inset-right)); bottom:calc(5.45rem + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:3rem; border-radius:var(--radius-lg); background:var(--color-accent); color:var(--color-on-accent); box-shadow:var(--shadow-md); font-size:var(--text-base); font-weight:var(--font-weight-bold); opacity:1; transition:transform var(--duration-fast) var(--ease-standard), opacity var(--duration-base) var(--ease-standard), display var(--duration-base) allow-discrete, overlay var(--duration-base) allow-discrete; }
.confirm-route:active { transform:scale(.97); }
.confirm-route.hidden { opacity:0; }
.weather-loading { position:fixed; z-index:22; top:50%; left:50%; display:flex; align-items:center; gap:.55rem; min-height:3rem; padding:.65rem .9rem; border:1px solid var(--color-border-strong); border-radius:var(--radius-pill); background:var(--color-surface-glass); color:var(--color-text); box-shadow:var(--shadow-md); backdrop-filter:blur(14px); font-size:var(--text-sm); font-weight:var(--font-weight-bold); transform:translate(-50%,-50%); }
.weather-loading i { color:var(--color-accent-text); font-size:1.15rem; }
.severe-route-alert { position:fixed; z-index:23; top:calc(.8rem + env(safe-area-inset-top)); left:50%; display:flex; align-items:center; gap:.5rem; min-height:2.7rem; padding:.55rem .8rem; border:1px solid var(--color-alert-border); border-radius:var(--radius-pill); background:var(--color-alert-bg); color:var(--color-alert-text); box-shadow:var(--shadow-md); font-size:var(--text-sm); font-weight:var(--font-weight-bold); transform:translateX(-50%); white-space:nowrap; }
.severe-route-alert i { font-size:1.1rem; }
@starting-style { .confirm-route:not(.hidden) { opacity:0; } }