/* ==========================================================================
   Waymark: interface styles (no framework). Map = full screen; panel = side card on desktop,
   bottom sheet on phones. --inset-bottom keeps map controls clear of the sheet.
   ========================================================================== */
:root{
  --ink:#0F2A33; --ink-2:#183B46; --teal:#0E7C86; --teal-d:#0A5F67; --mint:#7FE0D6; --amber:#FF9A2E; --amber-d:#E4821A;
  --route:#2F5BEA; --bg:#F3F7F7; --card:#fff; --line:#DCE6E7; --muted:#5A6F77; --danger:#C93B3B; --ok:#1E9E6A;
  --r:16px; --shadow:0 10px 30px rgba(15,42,51,.18); --shadow-s:0 2px 8px rgba(15,42,51,.16);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --inset-bottom:0px; --sheet-h:150px; --topbar-h:60px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;-webkit-text-size-adjust:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:6px;background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;z-index:3000}
.skip-link:focus{left:8px}
kbd{background:#EEF3F3;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;font-size:.85em}

/* ---- top bar ---- */
.topbar{flex:none;height:calc(var(--topbar-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;z-index:2000;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex:none}
.brand-name{font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.brand-name span{color:var(--mint)}
.search-pill{flex:1;min-width:0;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#D5E7E8;text-align:left;transition:background .2s}
.search-pill:hover{background:rgba(255,255,255,.2)}
.search-pill span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff}
.icon-btn.accent{background:var(--amber);color:var(--ink)}
.icon-btn.accent:hover{background:var(--amber-d)}
.icon-btn[aria-pressed="true"]{background:var(--mint);color:var(--ink)}
body.navigating #trackBtn{display:none}
.icon-btn.busy svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- map ---- */
.app{position:relative;flex:1;min-height:0;background:#E7EEEE}
#map{position:absolute;inset:0;z-index:0;background:#E7EEEE}
#map.picking{cursor:crosshair}
.map-loading{position:absolute;z-index:500;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;background:#fff;padding:12px 18px;border-radius:999px;box-shadow:var(--shadow);transition:opacity .3s}
.map-loading.hide{opacity:0;pointer-events:none}
.map-loading.error{background:#FDECEC;color:#8E2020}
.spinner{width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}
.noscript{position:absolute;z-index:600;inset:20px;background:#fff;padding:20px;border-radius:var(--r)}
.leaflet-container{font-family:var(--sans)}
.leaflet-top.leaflet-right{top:8px}
.leaflet-control-zoom a{width:40px!important;height:40px!important;line-height:40px!important;font-size:20px!important}
.leaflet-bar,.leaflet-control-attribution{box-shadow:var(--shadow-s)!important}
.leaflet-bottom{bottom:var(--inset-bottom)}
.leaflet-popup-content-wrapper{border-radius:12px}
.popup-actions{display:grid;gap:6px;min-width:170px}
.popup-actions strong{font-size:.8rem;color:var(--muted);font-weight:600}
.popup-actions button{padding:9px 10px;border-radius:9px;border:1px solid var(--line);background:#fff;text-align:left;min-height:40px}
.popup-actions button:hover{background:var(--bg)}

/* ---- markers ---- */
.wm-pin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:3px solid #fff;box-shadow:var(--shadow-s);display:grid;place-items:center}
.wm-pin span{transform:rotate(45deg);font-weight:800;font-size:.8rem;color:#fff}
.wm-pin.start{background:var(--teal)}
.wm-pin.dest{background:var(--amber)}
.wm-pin.dest span{color:var(--ink)}
.wm-me{position:relative;width:22px;height:22px}
.wm-me .dot{position:absolute;inset:3px;border-radius:50%;background:#1A73E8;border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.45)}
.wm-me .ring{position:absolute;inset:-6px;border-radius:50%;background:rgba(26,115,232,.25);animation:ring 2s ease-out infinite}
.wm-me .cone{display:none;position:absolute;left:50%;top:50%;width:0;height:0;margin:-34px 0 0 -9px;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:22px solid rgba(26,115,232,.85);transform-origin:9px 34px;transform:rotate(var(--h,0deg))}
.wm-me.has-heading .cone{display:block}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;border:2px solid transparent;font-weight:700;transition:background .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn.block{width:100%}
.btn.primary{background:var(--teal);color:#fff}.btn.primary:hover{background:var(--teal-d)}
.btn.accent{background:var(--amber);color:var(--ink)}.btn.accent:hover{background:var(--amber-d)}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--ink)}.btn.ghost:hover{background:var(--bg)}
.btn.danger{background:var(--danger);color:#fff}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.sm{min-height:40px;padding:0 14px;font-size:.9rem}

/* ---- panel (desktop) ---- */
.panel{position:absolute;z-index:1000;left:16px;top:16px;width:400px;max-height:calc(100% - 32px);display:flex;flex-direction:column;background:var(--card);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.sheet-handle{display:none}
.panel-scroll{overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 14px}
.route-form{display:grid;gap:12px}
.fields{display:grid;gap:6px;position:relative}
.field-wrap{position:relative}
.field{display:flex;align-items:center;gap:8px;height:50px;padding:0 6px 0 14px;border:2px solid var(--line);border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
.field:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,134,.18)}
.field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:1rem}
.field input::placeholder{color:#8A9BA1}
.mini{flex:none;width:40px;height:40px;border-radius:10px;border:0;background:transparent;color:var(--muted);font-size:1.5rem;display:grid;place-items:center}
.mini:hover{background:var(--bg);color:var(--ink)}
.pin{flex:none;width:12px;height:12px;border-radius:50%;display:inline-block}
.pin-start{border:3px solid var(--teal);background:#fff}
.pin-dest{background:var(--amber)}
.swap{position:absolute;right:56px;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--teal);box-shadow:var(--shadow-s)}
.swap:hover{background:var(--bg)}
.hint{margin:-4px 0 0;font-size:.82rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:38px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.86rem;font-weight:600;color:var(--ink-2)}
.chip:hover{background:var(--bg)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:20;max-height:260px;overflow-y:auto}
.suggest li{padding:10px 12px;border-radius:10px;cursor:pointer;min-height:48px}
.suggest li:hover,.suggest li.active,.suggest li:focus{background:#E8F4F4;outline:0}
.suggest strong{display:block;font-size:.95rem}
.suggest small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest li.note{cursor:default;color:var(--muted)}
.suggest li.note:hover{background:transparent}

.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mode{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;min-height:62px;border-radius:12px;border:2px solid var(--line);background:#fff;font-weight:700;font-size:.85rem;color:var(--ink-2)}
.mode:hover{background:var(--bg)}
.mode[aria-checked="true"]{border-color:var(--teal);background:#E8F4F4;color:var(--teal-d)}

.status{margin-top:12px;padding:12px 14px;border-radius:12px;font-size:.93rem;line-height:1.45;border:1px solid}
.status.info{background:#EAF2FF;border-color:#C7DAFB;color:#1D3D7A}
.status.error{background:#FDECEC;border-color:#F3B9B9;color:#7C1D1D}
.status.warn{background:#FFF6E5;border-color:#F6D99A;color:#6B4A07}
.status.ok{background:#E7F7EF;border-color:#A8DEC3;color:#14583A}
.status strong{display:block;margin-bottom:2px}
.status .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.status.loading{display:flex;align-items:center;gap:10px}

.empty{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--bg)}
.empty h2{margin:0 0 6px;font-size:1.05rem}
.empty ul{margin:0;padding-left:18px;color:var(--muted);font-size:.92rem;display:grid;gap:4px}

.summary{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.summary-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.eyebrow{margin:0;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--teal)}
.big{margin:2px 0 0;font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.big small{font-size:1rem;font-weight:600;color:var(--muted);margin-left:4px}
.ft{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.ft li{display:flex;gap:12px;align-items:center}
.ft small{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}
.ft strong{display:block;font-size:.93rem;line-height:1.3;overflow-wrap:anywhere}
.alts{display:grid;gap:8px;margin:10px 0}
.alt{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;min-height:48px;border-radius:12px;border:2px solid var(--line);background:#fff;text-align:left}
.alt[aria-checked="true"]{border-color:var(--route);background:#EEF2FE}
.alt small{color:var(--muted)}
.summary-actions{display:flex;gap:8px;margin:8px 0 4px}
.steps{margin-top:8px}
.steps summary{cursor:pointer;font-weight:800;padding:10px 0;min-height:44px}
.steps summary small{font-weight:600;color:var(--muted)}
.step-list{list-style:none;margin:0;padding:0}
.step-list li{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.step-ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--bg);display:grid;place-items:center;color:var(--ink)}
.step-ic svg{transition:transform .2s}
.step-txt{flex:1;min-width:0;font-size:.93rem;line-height:1.35}
.step-dist{flex:none;font-size:.85rem;color:var(--muted);font-weight:600}
.legal{margin:16px 0 0;font-size:.74rem;line-height:1.45;color:var(--muted)}

/* ---- tracking chip ---- */
.track-chip{position:absolute;z-index:900;top:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);background:#fff;padding:8px 8px 8px 14px;border-radius:999px;box-shadow:var(--shadow)}
.track-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.track-text strong{font-size:.88rem}.track-text small{font-size:.74rem;color:var(--muted);white-space:nowrap}
.pulse{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ok);animation:pulse 1.6s infinite}
.pulse.weak{background:var(--amber)}.pulse.waiting{background:var(--danger)}
@keyframes pulse{50%{opacity:.35}}
.chip-btn{min-height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:.82rem}
.chip-btn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip-btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}

/* ---- navigation HUD ---- */
body.navigating .panel,body.navigating .track-chip,body.navigating .search-pill{display:none!important}
.nav-banner{position:absolute;z-index:1000;top:12px;left:16px;width:420px;max-width:calc(100% - 32px);display:flex;gap:14px;align-items:center;background:var(--ink);color:#fff;padding:12px 16px;border-radius:18px;box-shadow:var(--shadow)}
.nav-icon{flex:none;width:56px;height:56px;border-radius:14px;background:var(--mint);color:var(--ink);display:grid;place-items:center}
.nav-icon svg{transition:transform .25s}
.nav-text{display:flex;flex-direction:column;min-width:0}
.nav-text strong{font-size:1.5rem;line-height:1.1}
.nav-text span{font-size:1.02rem;line-height:1.25}
.nav-text small{color:#A9C4C8;margin-top:2px}
.nav-bar{position:absolute;z-index:1000;left:16px;bottom:16px;width:420px;max-width:calc(100% - 32px);background:#fff;border-radius:18px;padding:14px;box-shadow:var(--shadow);display:grid;gap:12px}
.nav-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.nav-stats small{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.nav-stats strong{font-size:1.15rem}
.nav-alert{padding:10px 12px;border-radius:12px;font-size:.92rem;line-height:1.4}
.nav-alert.warn{background:#FFF6E5;color:#6B4A07;border:1px solid #F6D99A}
.nav-alert.ok{background:#E7F7EF;color:#14583A;border:1px solid #A8DEC3}
.nav-alert .row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.nav-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:8px}
body.navigating .leaflet-top.leaflet-right{top:104px}

.toast{position:absolute;z-index:1100;left:50%;transform:translateX(-50%);bottom:calc(var(--inset-bottom) + 18px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;box-shadow:var(--shadow);max-width:calc(100% - 32px);text-align:center;font-size:.92rem}

/* ---- narrow screens ---- */
@media (max-width:859px){
  .brand-name{display:none}
  .search-pill{margin:0}
}
/* ---- phones / small tablets in portrait: bottom sheet ---- */
@media (max-width:859px) and (min-height:481px){
  .panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:none;height:var(--sheet-h);border-radius:22px 22px 0 0;transition:height .25s ease;padding-bottom:env(safe-area-inset-bottom)}
  .panel.dragging{transition:none}
  .sheet-handle{display:grid;place-items:center;flex:none;width:100%;height:40px;border:0;background:transparent;touch-action:none;cursor:grab}
  .sheet-handle span{width:44px;height:5px;border-radius:3px;background:#C3D1D3}
  .panel-scroll{padding:0 16px 14px}
  .swap{right:52px}
  .nav-banner{left:10px;right:10px;width:auto;max-width:none;top:8px}
  .nav-bar{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;max-width:none}
  .track-chip{top:8px}
  .toast{bottom:calc(var(--inset-bottom) + 14px)}
}
/* ---- landscape phones: a compact side card instead of a sheet (a sheet would hide the map) ---- */
@media (max-width:859px) and (max-height:480px){
  :root{--topbar-h:52px}
  .panel{left:8px;top:8px;width:min(360px,52vw);max-height:calc(100% - 16px)}
  .panel-scroll{padding:12px 14px}
  .nav-banner{left:8px;top:8px;width:min(360px,52vw)}
  body.navigating .leaflet-top.leaflet-right{top:8px}
  .nav-bar{left:8px;bottom:8px;width:min(360px,52vw)}
  .track-chip{top:8px}
  .leaflet-top.leaflet-right{top:8px}
}
@media (max-width:400px){.mode span{font-size:.78rem}.chip{font-size:.8rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}