:root{--navy:#0d2232;--ink:#173249;--muted:#738697;--line:#e3e9ec;--bg:#f5f8fa;--green:#2c9b71;--mint:#e5f6ed;--orange:#f7a849;--radius:16px;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}body{font-size:14px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}.app{display:grid;grid-template-columns:minmax(360px,430px) minmax(0,1fr);min-height:100vh}.sidebar{height:100vh;overflow:auto;background:#fff;border-right:1px solid var(--line);z-index:500;scrollbar-width:thin}.brand-row{background:var(--navy);padding:22px 27px;display:flex;align-items:center;gap:11px;color:#fff}.logo{height:42px;width:42px;display:grid;place-items:center;background:#1c554f;color:#b8f6c8;border:1px solid #367e6a;border-radius:13px}.logo svg{width:30px;height:30px}.brand{font-size:23px;letter-spacing:-1px;font-weight:850;line-height:1}.brand span{color:#a7eab7}.brand-tag{font-size:10px;color:#c8d8dd;letter-spacing:.6px;margin-top:6px}.stage-pill{margin-left:auto;white-space:nowrap;color:#aee4c2;font-size:9px;font-weight:800;letter-spacing:1.1px;padding:7px 8px;border:1px solid #3e766b;border-radius:99px}.sidebar-content{padding:24px 28px 30px}.eyebrow{font-size:10px;letter-spacing:1.75px;font-weight:800;color:#278764;display:flex;align-items:center;gap:9px}.eyebrow-line{height:1px;width:18px;background:var(--green)}h1{font-size:30px;line-height:1.16;letter-spacing:-1.2px;margin:13px 0 9px;font-weight:850}h1 em{font-style:normal;color:var(--green)}.intro{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 22px}.search-card{border:1px solid var(--line);border-radius:15px;padding:13px 15px;box-shadow:0 6px 25px #2d4f6509;position:relative}.field-row{display:flex;gap:12px;align-items:flex-start}.field-main{min-width:0;flex:1}.field-main>label,.form-field>label,.advanced>label{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.3px;margin-bottom:6px}.marker{width:11px;height:11px;border-radius:50%;flex:none;margin-top:14px}.start-marker{border:3px solid #24ac76}.end-marker{background:#ed9c42;box-shadow:0 0 0 3px #fff3e3}.origin-row{display:flex;align-items:center;justify-content:space-between;gap:6px}.origin-row>span{font-size:12px;font-weight:650;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mini-button{background:var(--mint);color:#227d60;border:0;border-radius:6px;font-weight:750;font-size:10px;padding:7px 8px;display:flex;align-items:center;gap:4px;white-space:nowrap}.mini-button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}.path-connector{height:17px;border-left:1px dashed #a4bec0;margin-left:5px;margin-top:3px;margin-bottom:1px}.destination-row{padding-top:1px}.field-main>input{width:100%;height:36px;padding:6px 8px;border:1px solid #dce6e9;border-radius:8px;background:#f9fbfc;outline-color:#6cb6a0;color:var(--ink)}.search-actions{display:flex;align-items:center;justify-content:space-between;margin-top:5px;gap:8px}.text-button{color:#168360;background:none;border:0;padding:5px 0;font-weight:750;font-size:11px}.search-actions>span{font-size:9px;color:#8395a0;text-align:right}.destination-results{border-top:1px solid var(--line);margin-top:10px;padding-top:8px;max-height:160px;overflow:auto}.result-row{width:100%;text-align:left;border:none;border-radius:8px;background:#fff;display:flex;align-items:center;gap:9px;padding:10px;color:var(--ink)}.result-row:hover,.result-row:focus-visible{background:#eff8f3}.result-row span{display:block;font-size:10px;color:var(--muted);margin-top:2px}.selection-summary{background:#edfaf4;border:1px solid #d2eee1;border-radius:10px;margin-top:10px;padding:9px 12px;display:flex;gap:7px;flex-direction:column}.selection-summary>span{color:#3b8966;font-size:10px;font-weight:700}.selection-summary>strong{font-size:12px}.primary-button{margin-top:11px;width:100%;background:#259267;color:#fff;border:none;min-height:47px;border-radius:11px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 19px #289f6d26}.primary-button svg{height:17px;width:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.primary-button>span{margin-left:auto;padding-right:14px}.primary-button svg{margin-left:auto}.status-line{font-size:11px;color:#8796a1;margin:9px 0 16px;min-height:16px}.status-line.error{color:#b04a37}.status-line.ok{color:#27865e}.section{border-top:1px solid var(--line);padding:18px 0 17px}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}h2{font-size:14px;letter-spacing:-.2px;margin:0;font-weight:800}.small-badge{font-size:9px;letter-spacing:.4px;font-weight:800;color:#ad7438;background:#fff4e8;border:1px solid #f4ddbf;padding:5px 7px;border-radius:6px}.small-badge.active{background:#e5f6ed;color:#21835c;border-color:#bde5d2}.money-badge{color:#28906e;border-radius:6px;background:#e7f6ed;padding:5px 8px;font-weight:800;font-size:10px}.placeholder{background:#f8fafb;border:1px dashed #d9e4e9;border-radius:12px;padding:25px 17px;display:flex;align-items:center;flex-direction:column;text-align:center;gap:9px;color:#8b9aa5;font-size:12px;line-height:1.45}.placeholder b{color:#415c6d}.placeholder-icon{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;color:#409875;background:#e7f6ed;font-size:20px}.route-list{display:grid;gap:8px}.route-option{background:#fff;border:1px solid #e1e9ed;text-align:left;border-radius:11px;padding:11px 12px;color:var(--ink);width:100%}.route-option.selected{border:2px solid #2a9c70;background:#f2fbf6;padding:10px 11px}.route-option-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.route-name{font-size:12px;font-weight:800}.route-chip{font-size:9px;background:#e9f5ef;color:#288661;border-radius:6px;padding:4px 6px;font-weight:800}.route-metrics{display:flex;justify-content:space-between;gap:6px;color:#748794;margin-top:7px;font-size:11px}.route-metrics b{color:#18394c}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-field>label{font-size:10px}.input-unit{border:1px solid #dce6e9;border-radius:9px;display:flex;align-items:center;gap:4px;padding:0 8px;height:37px}.input-unit input{width:100%;min-width:0;font-weight:800;border:0;outline:none;background:none;color:var(--ink)}.input-unit span{white-space:nowrap;color:#8ca0ac;font-size:10px}.micro-note{font-size:10px;color:#8799a5;line-height:1.55;margin:10px 0 12px}.cost-footer{background:#f0f8f3;border:1px solid #e1f2e8;border-radius:11px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.cost-footer div{display:flex;flex-direction:column;gap:6px}.cost-footer span{font-size:10px;color:#62816d}.cost-footer strong{font-size:18px;letter-spacing:-.3px;color:#19845d}.disclaimer{font-size:10px;line-height:1.5;color:#8b99a4;margin:11px 0 0}.options-section h2{margin-bottom:12px}.toggle-line{display:flex;align-items:center;gap:10px;padding:9px 0}.toggle-icon{width:31px;height:31px;flex:0 0 31px;border-radius:9px;background:#eef5f6;color:#418777;display:grid;place-items:center;font-size:16px}.toggle-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.toggle-copy strong{font-size:12px}.toggle-copy span{font-size:10px;line-height:1.3;color:#91a0a8}.switch{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 38px}.switch input{opacity:0;position:absolute}.switch-slider{inset:0;position:absolute;background:#cfdae0;border-radius:99px;transition:.2s}.switch-slider:before{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;background:white;border-radius:50%;box-shadow:0 1px 4px #0001;transition:.2s}.switch input:checked+.switch-slider{background:#38a479}.switch input:checked+.switch-slider:before{transform:translateX(16px)}.switch input:focus-visible+.switch-slider{outline:2px solid #257c5e;outline-offset:2px}.language-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0}.language-row label{font-size:11px;font-weight:750}.language-row select{border:1px solid var(--line);padding:7px;border-radius:8px;background:white;color:var(--ink)}.secondary-button{border:1px solid #cee3da;background:#eef8f2;color:#23815c;font-size:11px;font-weight:800;border-radius:8px;padding:10px 13px}.advanced{border:1px solid var(--line);border-radius:11px;padding:12px;font-size:11px;color:#738794}.advanced summary{font-weight:800;color:#466575;cursor:pointer}.advanced summary span{float:right}.advanced p{line-height:1.5}.advanced input{width:100%;border:1px solid var(--line);border-radius:8px;margin-top:5px;padding:10px;outline-color:#2c9b71}.advanced-actions{display:flex;gap:12px;align-items:center;margin-top:9px}.advanced label{font-size:11px}.footer{font-size:10px;color:#98a7b0;line-height:1.6;margin-top:20px}.map-area{position:relative;height:100vh;min-height:560px;overflow:hidden;background:#dfebe7}#map{position:absolute;inset:0}.leaflet-control-attribution{font-size:10px!important}.map-topbar{position:absolute;left:23px;right:23px;top:21px;z-index:400;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.map-topbar>*{pointer-events:auto}.live-pill{background:#fff;box-shadow:0 6px 22px #17384d25;border-radius:9px;padding:11px 14px;color:#3c5363;font-size:11px;font-weight:750;display:flex;align-items:center;gap:8px}.dot{width:7px;height:7px;border-radius:50%;background:#eca54d;box-shadow:0 0 0 3px #fff2e1}.dot.connected{background:#3ba875;box-shadow:0 0 0 3px #e1f4e8}.map-control{height:42px;width:42px;border-radius:9px;border:1px solid #e3e9e9;background:#fff;box-shadow:0 5px 18px #17384d1a;color:#2b735c;font-size:23px}.map-hint{z-index:400;position:absolute;top:74px;left:23px;pointer-events:none;background:#133f4ccc;color:white;border-radius:6px;padding:7px 10px;font-size:10px}.map-bottom{position:absolute;left:22px;right:22px;bottom:28px;z-index:400;pointer-events:none}.map-bottom>*{pointer-events:auto}.route-banner{background:#fff;border-radius:14px;box-shadow:0 12px 35px #17384d38;padding:20px 22px;display:flex;gap:18px;align-items:center;justify-content:space-between}.banner-main{display:flex;flex-direction:column;gap:6px;min-width:180px}.banner-label{color:#2e936f;font-weight:800;font-size:9px;letter-spacing:1.3px}.banner-main strong{font-size:18px;letter-spacing:-.4px}.banner-main>span:last-child{color:#7f929e;font-size:11px}.banner-stats{display:flex;gap:30px}.banner-stats>div{min-width:65px;display:flex;flex-direction:column;gap:6px}.banner-stats strong{font-size:18px;white-space:nowrap}.banner-stats small{color:#899ba6;letter-spacing:.6px;font-size:9px;font-weight:800}.navigation-button{display:block;margin:9px 0 0 auto;border:0;background:#237e62;color:white;border-radius:9px;padding:13px 18px;font-weight:750;box-shadow:0 5px 22px #104c3b33}.navigation-button.running{background:#b94a38}.guidance{position:absolute;z-index:400;top:115px;left:23px;max-width:340px;background:#0d2636;color:white;border-radius:13px;padding:15px 17px;display:flex;align-items:center;gap:13px;box-shadow:0 9px 28px #142b3f30}.guidance-icon{background:#315f60;border-radius:9px;font-size:28px;padding:7px}.guidance>div:last-child{display:flex;flex-direction:column;gap:5px}.guidance small{font-size:9px;letter-spacing:1px;color:#c6e5d0}.guidance strong{font-size:13px}.guidance span{font-size:10px;color:#abc2cb}.poi-panel{margin-bottom:10px;background:white;border-radius:12px;padding:13px 16px;box-shadow:0 6px 20px #17384d27;max-height:185px;overflow-y:auto;max-width:390px}.poi-panel h3{margin:0 0 9px;font-size:12px}.poi-item{display:flex;gap:10px;align-items:start;padding:5px 0}.poi-item b{font-size:11px}.poi-item p{font-size:10px;color:#8193a0;line-height:1.4;margin:3px 0}.custom-marker{display:grid;place-items:center;background:#1e946b;border:3px solid white;color:#fff;font-weight:800;border-radius:50%;box-shadow:0 3px 8px #21483388;width:29px;height:29px}.end-pin{background:#ed9c42}.gps-pin{background:#297bbe}.poi-pin{background:#6b8b9e;font-size:15px}.leaflet-container{font-family:inherit}.leaflet-control-zoom{border:none!important;box-shadow:0 5px 15px #3455!important}.leaflet-control-zoom a{border-radius:7px!important}.leaflet-popup-content{font-size:12px;line-height:1.5}.leaflet-popup-content b{font-size:13px}@media(max-width:980px){.app{grid-template-columns:375px minmax(0,1fr)}.sidebar-content{padding:21px 20px}.banner-stats{gap:12px}.banner-stats strong{font-size:15px}.route-banner{padding:15px;display:block}.banner-stats{margin-top:15px}.map-bottom{left:14px;right:14px}}@media(max-width:720px){.app{display:flex;flex-direction:column}.sidebar{height:auto;overflow:visible;border-right:0;order:2}.brand-row{padding:15px 17px}.sidebar-content{padding:21px 16px}.map-area{order:1;height:52vh;min-height:350px;max-height:540px;position:sticky;top:0;z-index:100}.map-bottom{left:10px;right:10px;bottom:18px}.route-banner{padding:12px 13px}.banner-main strong{font-size:14px}.banner-stats{margin-top:8px;gap:12px}.banner-stats strong{font-size:14px}.map-topbar{top:12px;left:12px;right:12px}.map-hint{top:62px;left:12px;font-size:9px}.guidance{left:12px;top:96px;right:12px;max-width:none;padding:10px}.poi-panel{max-height:110px;padding:9px 11px}.navigation-button{padding:9px;font-size:11px}.leaflet-control-attribution{font-size:8px!important}h1{font-size:27px}.brand-tag{font-size:9px}}@media(max-width:380px){.stage-pill{font-size:8px}.banner-stats{gap:7px}.banner-stats strong{font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} 

.field-label{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.3px;margin-bottom:6px}.safety-note{font-size:10px;color:#a15c37;background:#fff8ef;border-left:3px solid #efb35e;line-height:1.5;padding:8px 10px;margin:8px 0 17px}

/* Alpha 0.2: make the HTML hidden attribute authoritative over display:flex/block. */
[hidden] { display: none !important; }
.quick-destinations { margin: 12px 0 6px; }
.quick-destinations > span { display:block; color:#667e8b; font-weight:800; font-size:10px; letter-spacing:.8px; margin-bottom:8px; }
.destination-chips { display:flex; flex-wrap:wrap; gap:8px; }
.destination-chip { background:#eaf7f0; border:1px solid #cfe6d9; color:#166d51; border-radius:999px; padding:9px 13px; font-size:12px; font-weight:750; }
.destination-chip:focus-visible { outline:2px solid #188a63; outline-offset:2px; }
.quick-destinations p { font-size:11px; color:#7b8b97; line-height:1.45; margin:9px 0 12px; }
.plan-journey-btn {position:absolute; left:50%; transform:translateX(-50%); bottom:20px; z-index:400; width:max-content; max-width:calc(100% - 30px); border:0; border-radius:50px; padding:12px 20px; background:#116b53; color:white; font-weight:800; box-shadow:0 6px 20px #0b423b66; font-size:13px;}
@media (max-width:720px) {
  /* A map-first layout with real viewing room, not a sticky map behind long forms. */
  .map-area { height: 64svh; height: 64dvh; min-height:420px; max-height:740px; position:relative; top:auto; z-index:100; }
  .map-topbar {left:14px; right:14px; top:14px;}
  .live-pill {font-size:11px; padding:9px 11px; box-shadow:0 3px 10px #2343;}
  .map-hint {font-size:10px; left:14px; top:63px; padding:7px 10px; max-width:calc(100% - 80px);}
  .leaflet-top.leaflet-right {top:73px;}
  .map-bottom {left:9px; right:9px; bottom:9px;}
  .route-banner {padding:10px 12px; box-shadow:0 4px 13px #2343; border-radius:12px;}
  .banner-main {gap:1px;}
  .banner-main strong {font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:85vw;}
  .banner-main>span:last-child {font-size:9px;}
  .banner-stats {margin-top:7px; gap:10px; justify-content:space-between;}
  .banner-stats strong {font-size:16px;}
  .banner-stats small {font-size:9px;}
  .guidance {left:10px; right:10px; top:106px; max-width:none; box-shadow:0 3px 12px #2346;}
  .navigation-button {margin:7px 0 0 auto; padding:10px 15px; font-size:12px;}
  .poi-panel {max-height:100px;}
  .plan-journey-btn {bottom:16px; padding:13px 22px; font-size:13px;}
  .brand-row {padding:15px 18px;}
}


/* Alpha 0.2.2: journey information is now BELOW the map, never over its roads. */
.map-column {
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.map-column .map-area {
  flex: 0 0 auto;
  width: 100%;
  height: min(70vh, 720px);
  min-height: 440px;
  max-height: none;
  position: relative;
  top: auto;
  z-index: 1;
}
.trip-details {
  position: relative;
  z-index: 2;
  padding: 17px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.trip-details .plan-journey-btn {
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
  z-index: auto;
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
}
.trip-details .route-banner {
  width: 100%;
  flex: none;
  box-shadow: 0 5px 20px #17384d15;
}
.trip-details .guidance {
  position: static;
  left: auto;
  top: auto;
  right: auto;
  max-width: none;
  width: 100%;
  flex: none;
  box-shadow: 0 5px 20px #17384d1c;
}
.trip-details .navigation-button {
  align-self: flex-start;
  margin: 0;
  flex: none;
}
.trip-details .poi-panel {
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  overflow: visible;
  box-shadow: 0 5px 20px #17384d12;
}
.trip-details .poi-panel h3 {font-size: 14px; margin-bottom: 11px;}
.trip-details .poi-item b {font-size: 13px;}
.trip-details .poi-item p {font-size: 12px;}
@media (max-width: 720px) {
  .app {display: flex; flex-direction: column;}
  .map-column {
    order: 1;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  .sidebar {order: 2;}
  .map-column .map-area {
    height: 60svh;
    height: 60dvh;
    min-height: 375px;
    max-height: 610px;
    position: relative;
    top: auto;
    z-index: 1;
  }
  .trip-details {padding: 15px 16px 21px; gap: 12px;}
  .trip-details .route-banner {display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px;}
  .trip-details .banner-main strong {font-size: 16px; max-width: none; white-space: normal; overflow: visible; text-overflow: clip;}
  .trip-details .banner-main>span:last-child {font-size: 11px;}
  .trip-details .banner-stats {margin-top: 2px; gap: 12px; justify-content: space-between;}
  .trip-details .banner-stats strong {font-size: 18px;}
  .trip-details .banner-stats small {font-size: 10px;}
  .trip-details .poi-panel {padding: 15px 17px;}
  .trip-details .navigation-button {width: 100%; padding: 13px; font-size: 13px;}
  .trip-details .guidance {padding: 13px 15px;}
  .map-hint {max-width: calc(100% - 90px);}
}

/* Explicit flex order overrides the earlier mobile map-first prototype rules. */
.map-column .map-area { order: 0; }
.map-column .trip-details { order: 1; }

/* Alpha 0.2.3 — real-location provenance and map diagnostics. */
.origin-meta {color:#9a593e;font-size:11px;line-height:1.5;margin:8px 0 0;padding:8px 9px;background:#fff7ef;border-left:3px solid #e3a26f;border-radius:3px;}
.demo-origin-btn {display:block;margin-top:8px;border:1px solid #c8d7dd;background:#f7fbfc;color:#386679;border-radius:7px;padding:7px 9px;font-size:10px;font-weight:650;text-align:left;}
.demo-origin-btn:focus-visible{outline:2px solid #267d66;outline-offset:2px;}
.banner-origin{margin:3px 0 3px;font-size:11px;color:#95643a;font-weight:750;line-height:1.45;}
.map-error{position:absolute;z-index:450;left:10px;right:10px;bottom:10px;background:#fff8ec;color:#975738;box-shadow:0 2px 12px #193b4722;padding:9px 12px;border:1px solid #e7b98c;border-radius:9px;font-size:11px;line-height:1.5;pointer-events:none;}
.start-pin{background:#247da8;}.demo-pin{background:#966e30;}
/* Ensure the map remains visible and full-sized while phone orientation changes. */
#map{width:100%;height:100%;}
@media(max-width:720px){.map-column .map-area{min-height:380px}.trip-details .banner-origin{font-size:11px;}}

/* Alpha 0.2.4: Native MapLibre markers, route and map-loading diagnostics. */
#map{width:100%;height:100%;background:#e3ebe8;}
.map-point{width:37px;height:37px;border-radius:50%;background:#21855e;color:#fff;border:4px solid #fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;box-shadow:0 3px 12px #142d3577;cursor:pointer;}
.map-point.end-pin{background:#ea8b28;}
.map-point.gps-pin{background:#247fc3;}
.map-point.demo-pin{background:#7d8792;}
.map-point.poi-pin{background:#596f81;font-size:20px;}
.map-load-status{position:absolute;left:12px;bottom:12px;z-index:5;background:#ffffffeb;border-radius:8px;padding:8px 10px;color:#304959;font-size:11px;font-weight:700;pointer-events:none;}
.map-error{z-index:6;bottom:54px;}
.maplibregl-control-container{font-size:10px;}
.maplibregl-ctrl-attrib{font-size:9px!important;}