:root{--ink:#122f43;--muted:#718394;--navy:#102c43;--accent:#daaa5b;--teal:#096b6b;--line:#e7ebef;--bg:#fffdf9;--shadow:0 16px 45px #0d27301a;color-scheme:light}*{box-sizing:border-box}body{margin:0;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#f7f9fb}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.shell{display:flex;min-height:100vh;height:100dvh;overflow:hidden}.sidebar{width:398px;min-width:398px;background:var(--bg);z-index:5;box-shadow:3px 0 30px #263c481c;display:flex;flex-direction:column;min-height:0}.brandbar{padding:27px 25px 19px;display:flex;align-items:center;gap:12px}.mark{height:43px;width:43px;flex:none;background:transparent;border-radius:10px;overflow:hidden;color:#fff;display:grid;place-items:center}.mark svg{width:43px;height:43px;stroke:none;display:block}.brandname{font-size:20px;font-weight:800;letter-spacing:1.2px;line-height:1.2}.brandname b{color:#c59b57}.tagline{font-size:11px;font-weight:500;color:#79909f;letter-spacing:.7px;padding-top:4px}.devnotice{height:32px;margin:0 25px 17px;background:#f0f7f4;border:1px solid #deebe4;border-radius:7px;display:flex;align-items:center;gap:9px;padding:0 11px;color:#347a64;font-size:10px;font-weight:800;letter-spacing:1.05px}.glowdot{display:inline-block;width:7px;height:7px;background:#50b994;border-radius:50%;box-shadow:0 0 0 3px #52ba9422;flex-shrink:0}.version{margin-left:auto;font-size:9px;color:#758d82}.searcharea{padding:0 25px;border-bottom:1px solid var(--line)}.searchbox{height:51px;background:#f2f5f7;border:1px solid #edf1f3;border-radius:13px;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px}.input-icon{width:18px;height:18px;color:#768b96}.searchbox input{border:0;outline:none;background:transparent;min-width:0;flex:1;color:var(--ink);font-size:12.5px}.searchbox input::placeholder{color:#8998a2}.searchbox button{width:35px;height:35px;display:grid;place-items:center;border:0;background:var(--navy);color:white;border-radius:9px}.searchbox button svg{width:18px;height:18px}.tabbar{display:grid;grid-template-columns:repeat(3,1fr);margin-top:19px}.tab{background:transparent;border:0;border-bottom:3px solid transparent;color:#8a9ba5;padding:0 2px 14px;font-size:13px;font-weight:700}.tab.active{border-bottom-color:#c8a267;color:var(--navy)}.scrollpane{overflow:auto;flex:1;scrollbar-width:thin}.panel{padding:25px 25px 36px}.hidden{display:none!important}.eyebrow{font-size:10px;color:#b58b49;font-weight:850;letter-spacing:1.4px;display:flex;align-items:center;gap:8px}.panel h2{font-size:26px;letter-spacing:-.65px;line-height:1.22;margin:7px 0 7px}.muted{color:#83929f;font-size:12.5px;line-height:1.65;margin:0 0 23px}.categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.category{border:1px solid #edf0f2;background:white;border-radius:12px;min-height:82px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#465c6d;box-shadow:0 3px 13px #24415a08;transition:.15s}.category:hover,.category.active{border-color:#cbaa70;background:#fffbf3;transform:translateY(-1px)}.emoji{font-size:22px;line-height:1}.category span:last-child{font-size:11px;font-weight:700}.panel-divider{height:1px;background:var(--line);margin:26px 0 19px}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.results-header h3{font-size:14px;margin:0;font-weight:800}.subtle{color:#93a3ac;font-size:11px}.results{display:flex;flex-direction:column;gap:8px}.empty{display:flex;align-items:center;flex-direction:column;text-align:center;background:#f6f8f9;border:1px dashed #dce4e8;padding:27px 18px;border-radius:13px;color:#899aa5;font-size:11.5px;gap:5px}.empty strong{font-size:12px;color:#586f7e}.empty-symbol{font-size:25px;color:#b1bcc2;margin-bottom:5px}.empty.compact{padding:22px 12px}.result{background:white;border:1px solid #e8edf0;border-radius:12px;display:flex;gap:10px;padding:12px;align-items:center}.result .result-icon{width:40px;height:40px;background:#f1f6f7;border-radius:10px;display:grid;place-items:center;font-size:20px;flex:none}.result-body{min-width:0;flex:1}.result-name{font-size:12.5px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-address{font-size:11px;color:#82949f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-actions{display:flex;gap:4px}.mini-action{display:grid;place-items:center;width:30px;height:30px;border:0;background:#f5f7f8;border-radius:8px;color:#40596c}.mini-action svg{height:15px;width:15px}.mini-action:hover{background:#e8efef}.sidefooter{border-top:1px solid var(--line);padding:15px 25px;color:#98a4ab;font-size:9.5px;display:flex;justify-content:space-between;align-items:center}.footerlink{border:0;background:transparent;display:flex;align-items:center;gap:5px;font-size:11px;color:#516a7c}.footerlink svg{width:16px;height:16px}.maparea{flex:1;position:relative;min-width:0;background:#eef3ee}#map{position:absolute;inset:0}.maplibregl-control-container .maplibregl-ctrl-bottom-right{bottom:72px!important}.map-top{position:absolute;top:24px;left:25px;right:25px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.map-headline{background:#ffffffec;backdrop-filter:blur(12px);border:1px solid #f0f1ef;box-shadow:var(--shadow);padding:12px 16px;border-radius:30px;font-size:12px;font-weight:750;display:flex;align-items:center;gap:12px;pointer-events:auto}.map-controls{position:absolute;right:25px;top:98px;display:flex;flex-direction:column;gap:10px}.floating{background:#fff;border:1px solid #edf0ef;box-shadow:0 6px 24px #0c22311b;border-radius:13px;width:46px;height:46px;display:grid;place-items:center;color:var(--navy);font-size:22px;font-weight:500}.floating svg{height:20px;width:20px}.floating:hover{color:#1b8583}.labelled{width:auto;height:43px;padding:0 15px;display:flex;gap:9px;font-size:12px;font-weight:750}.head-actions{pointer-events:auto}.map-hint{position:absolute;left:25px;bottom:31px;background:#fffffff2;color:#526b7b;box-shadow:var(--shadow);font-size:11px;padding:9px 13px;border-radius:8px}.routeform label,.fieldstack label{display:block;font-size:10px;font-weight:800;color:#9caaaf;letter-spacing:1px;margin:14px 0 7px}.fieldrow{display:flex;gap:9px;align-items:center;height:46px;padding:0 12px;border:1px solid #e5ecef;border-radius:11px;background:#f8fafb}.startdot,.enddot{width:10px;height:10px;border-radius:50%;background:#50b58d;border:2px solid #bce2ce;flex:none}.enddot{background:#c58c56;border-color:#efdbc0}.fieldrow input{background:none;border:none;outline:none;min-width:0;flex:1;font-size:12px}.smalltext{border:0;background:#e4f1ee;color:#286b61;border-radius:5px;font-size:11px;padding:5px 7px;font-weight:800}.transport{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:19px 0}.mode{border:1px solid #e9edef;padding:11px 4px;border-radius:9px;font-size:11px;background:white;color:#577084}.mode.active{background:#14384f;color:white;border-color:#14384f}.primarybtn{background:#122f43;color:white;border:0;border-radius:11px;padding:13px 17px;width:100%;font-weight:750;font-size:13px;display:flex;align-items:center;justify-content:space-between}.primarybtn svg{width:17px;height:17px}.beta{color:#9a7342;background:#fcf1dc;font-size:9px;letter-spacing:.6px;padding:4px 6px;border-radius:4px}.route-results{margin-top:20px}.route-choice{border:1px solid #e5ebef;background:white;margin-bottom:8px;padding:12px 13px;border-radius:10px;cursor:pointer}.route-choice.active{border:2px solid #bc985f;background:#fffdf7}.route-choice strong{font-size:13px}.route-choice .tripinfo{font-size:11px;color:#7790a0;margin-top:4px}.stepbox{margin-top:15px;background:#f5f8f8;border-radius:11px;padding:12px}.step{border-bottom:1px solid #e2e7e9;padding:10px 0;display:flex;gap:10px;color:#4e6575;font-size:11.5px}.step:last-child{border-bottom:0}.step b{font-size:11px;min-width:45px;color:#8f9fa9}.navstart{display:flex;gap:8px;margin-top:12px}.navstart button{flex:1;font-size:11px;border:1px solid #ccd8dc;border-radius:8px;padding:9px;background:white;color:#254657;font-weight:700}.navstart button:first-child{background:#176b66;border:1px solid #176b66;color:white}.fieldstack{margin-bottom:14px}.fieldstack input:not([type=checkbox]),.fieldstack select{width:100%;border:1px solid #e0e7eb;background:#fff;border-radius:9px;padding:11px;outline:0;color:#3d5a6b;font-size:12px}.fieldstack small{display:block;color:#8a9ca7;margin-top:6px;font-size:10.5px;line-height:1.5}.switchrow{display:flex!important;align-items:center;gap:9px;font-size:11px!important;letter-spacing:normal!important;color:#345268!important}.switchrow input{accent-color:#096b6b}.legalnote{margin-top:23px;color:#8c9ca5;font-size:10.5px}.legalnote a{color:#096b6b}.nav-overlay{position:absolute;top:87px;left:25px;width:340px;background:#102f43;color:white;border-radius:17px;box-shadow:0 15px 50px #0a29394d;overflow:hidden}.nav-header{background:#193d52;display:flex;justify-content:space-between;align-items:center;padding:11px 15px;font-weight:800;font-size:10px;letter-spacing:.65px}.nav-header b{font-weight:500;color:#deb778;font-size:8px;margin-left:5px}.nav-header button{background:none;border:0;color:#dfe8ed;font-size:11px}.nav-next{padding:19px;display:flex;gap:16px;align-items:center}.turn-icon{width:54px;height:54px;background:#1b675f;border-radius:13px;font-size:36px;text-align:center}.nav-next strong{font-size:16px}.nav-sub{color:#aec0cd;margin-top:4px;font-size:11px}.nav-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #315365;padding:12px 18px;gap:12px}.nav-bottom div{font-size:10px;color:#bdcad3}.soundbtn{border:1px solid #476377;border-radius:9px;background:#264a5f;color:white;padding:8px;flex:none}.soundbtn svg{width:17px;height:17px}.toast{position:absolute;bottom:85px;left:50%;transform:translate(-50%,10px);background:#152f42;color:white;box-shadow:var(--shadow);border-radius:10px;padding:10px 17px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;max-width:360px;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.mobile-menu,.mobile-close,.mobile-nav{display:none}.maplibregl-popup-content{padding:12px 15px;border-radius:9px;color:#28495e;font-size:12px;box-shadow:var(--shadow)}.maplibregl-popup-close-button{font-size:18px;padding:4px 7px}@media(max-width:900px){.sidebar{width:350px;min-width:350px}.brandbar{padding:20px 20px 15px}.searcharea,.panel{padding-left:20px;padding-right:20px}.devnotice{margin-left:20px;margin-right:20px}.sidefooter{padding:13px 20px}}@media(max-width:700px){.shell{display:block}.sidebar{position:absolute;left:0;top:0;bottom:0;width:min(100%,390px);min-width:0;z-index:20;transform:translateX(-103%);transition:transform .22s}.sidebar.open{transform:translateX(0)}.mobile-close{display:grid;margin-left:auto}.maparea{width:100%;height:100dvh}.map-top{top:calc(env(safe-area-inset-top) + 14px);left:14px;right:14px;gap:12px}.mobile-menu{display:grid;flex:none;width:43px;height:43px}.map-headline{padding:11px 13px;flex:1;justify-content:center;max-width:270px}.head-actions .labelled{width:43px;height:43px;justify-content:center;padding:0}.head-actions .labelled span{display:none}.map-controls{top:calc(env(safe-area-inset-top) + 79px);right:14px}.map-controls .floating{width:42px;height:42px}.map-hint{left:14px;bottom:calc(env(safe-area-inset-bottom) + 78px);right:14px;text-align:center}.mobile-nav{display:flex;align-items:center;justify-content:space-around;position:absolute;bottom:0;left:0;right:0;height:calc(65px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;box-shadow:0 -7px 25px #102c4320;z-index:2}.mobile-nav button{background:none;border:none;color:#8596a1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:20px;width:25%}.mobile-nav button span{font-size:9px;font-weight:700}.mobile-nav button.active{color:#0c5f64}.maplibregl-control-container .maplibregl-ctrl-bottom-right{bottom:150px!important}.nav-overlay{left:14px;right:14px;top:calc(env(safe-area-inset-top) + 68px);width:auto}.toast{bottom:calc(env(safe-area-inset-bottom) + 135px);width:calc(100% - 60px)}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Keep mobile menu controls clickable above the map canvas. */
.mobile-menu{pointer-events:auto}

.iconbutton{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--navy);place-items:center;cursor:pointer;padding:0}
.iconbutton svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.iconbutton:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pronounce{font-size:11px;color:#79909f;padding-top:3px;line-height:1.35}
.pronounce .ipa{font-weight:700;color:var(--teal);letter-spacing:.3px}
.pronounce + .tagline{padding-top:2px}

/* v0.3.1 — Consistent branded header and responsive drawer. */
.brandbar{gap:13px;min-height:96px}
.brand-icon{width:48px;height:48px;border-radius:12px;display:block;flex:none;object-fit:contain}
.brand-copy{min-width:0;flex:1}
.brandname{font-size:21px;letter-spacing:.65px;white-space:nowrap}
.brand-copy .tagline{padding-top:5px;font-size:12px;letter-spacing:.25px}
.sidebar-backdrop{display:none}
@media(max-width:900px){.brandbar{min-height:83px}}
@media(max-width:700px){
  .brandbar{min-height:82px;padding:17px 18px 14px;gap:11px}
  .brand-icon{width:44px;height:44px;border-radius:11px}
  .brandname{font-size:19px;letter-spacing:.45px}
  .brand-copy .tagline{font-size:11.5px}
  .mobile-close{width:36px;height:36px;min-width:36px;margin-left:3px}
  .sidebar-backdrop{display:block;position:absolute;inset:0;z-index:19;border:0;background:rgba(12,32,46,.45);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility .22s}
  .sidebar-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
}
@media(max-width:360px){.brandname{font-size:17px}.brandbar{gap:8px}.brand-icon{width:40px;height:40px}}

@media(max-width:700px){.sidebar{width:min(94vw,390px);transition:none}.sidebar-backdrop{transition:none}}
.devopts{border:1px solid var(--line);border-radius:14px;padding:4px 14px;margin:6px 0 14px}
.devopts>summary{cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#79909f;padding:10px 0;list-style-position:inside}
.devopts[open]>summary{margin-bottom:6px}
.devnote{font-size:12px;color:#79909f;margin:0 0 10px}
/* Compass button: needle shows north and turns with the map */
.floating.compass{position:relative;overflow:visible}
.floating.compass .needle{width:30px;height:30px;transition:transform .12s linear;transform-origin:50% 50%}
.floating.compass .compass-n{font-size:6.2px;font-weight:800;fill:#d6453d;stroke:none;font-family:inherit}
.floating.compass.active{background:var(--navy);border-color:var(--navy)}
.floating.compass.active .compass-n{fill:#fff}
.floating.compass.active circle{stroke:#fff}
@media (prefers-reduced-motion:reduce){.floating.compass .needle{transition:none}}