:root{color-scheme:light;--ink:#242829;--paper:#ffffff;--line:#90999a;--accent:#242829}*{box-sizing:border-box}body{margin:0;background:#f8f8f4;color:var(--ink);font:16px/1.75 system-ui,-apple-system,sans-serif}main,header,footer{max-width:1100px;margin:auto;padding:20px}header{border-bottom:1px solid var(--line)}h1{font-size:clamp(26px,5vw,40px);line-height:1.3}h2{line-height:1.4}a{color:#242829;text-underline-offset:3px;overflow-wrap:anywhere}a[aria-disabled=true]{color:#555e60}button,input,select{font:inherit;min-height:48px;max-width:100%;border:1px solid #90999a;border-radius:8px;padding:8px 14px;background:var(--paper);color:var(--ink)}button{cursor:pointer}button:disabled{cursor:default;opacity:.65}button.primary{background:var(--accent);color:white}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #242829;outline-offset:3px}.panel{background:var(--paper);padding:20px;border:1px solid var(--line);border-radius:14px;margin:18px 0}.notice{border-left:5px solid #624b17;padding:12px 16px;background:#fff5dc}.actions,.filters,.move{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.filters label{flex:1 1 220px}.filters input,.filters select{width:100%;display:block}.map-wrap{overflow:hidden;position:relative;background:#eeefeb;border:1px solid var(--line);border-radius:12px;margin:16px 0}#map{display:block;width:100%;height:420px;touch-action:pan-y}#map image{pointer-events:none}#map .pin{cursor:pointer}#map .pin circle{fill:#242829;stroke:white;stroke-width:2}#map .pin text{fill:white;font:bold 13px system-ui;text-anchor:middle;dominant-baseline:central;pointer-events:none}.map-key{font-size:14px;color:#555e60}#selected{scroll-margin-top:16px}.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:12px 0}.results button{text-align:left;width:100%;background:var(--paper)}small{font-size:14px}details{padding:10px 0}summary{cursor:pointer;min-height:44px;font-weight:bold}li{margin:8px 0}.guide ol{padding-left:24px}.online-note{color:#624b17}#status,#connection,#result-count{font-weight:650}progress{max-width:100%}[hidden]{display:none!important}.print-map{width:100%;max-height:560px}.emergency{font-size:20px}footer{font-size:14px}nav{display:flex;gap:20px;flex-wrap:wrap}@media(max-width:540px){main,header,footer{padding:16px}.panel{padding:16px}#map{height:380px}.actions button{flex:1 1 140px}.results{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}@media print{button,input,select,.actions,nav{display:none!important}body{background:white}.panel{border:0}#map{height:550px}}

#map{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}#map:active{cursor:grabbing}#road-query{display:block;width:100%}#road-summary{font-size:14px;font-weight:650}

.emergency-first{border:3px solid #624b17}.emergency-calls{display:flex;flex-wrap:wrap;gap:10px}.emergency-calls a{display:block;padding:10px 14px;border:2px solid currentColor;border-radius:8px;font-weight:700}.navigation-panel,.personal-panel{scroll-margin-top:16px}#route-steps li{margin:16px 0}.saved-destinations{padding-left:20px}.saved-destinations li{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.saved-destinations button:first-child{flex:1;text-align:left}#map .saved-pin{cursor:pointer}#personal-save-status,#navigation-status,#position-status{font-weight:650}

#map[data-picking] .pin,#map[data-picking] .saved-pin{pointer-events:none;opacity:.25}

/* Simple view: explicit state, large targets, no added assets. */
.simple-only{display:none}html[data-view=simple] .simple-only{display:block}html[data-view=simple] .full-only{display:none!important}
html[data-view=simple]{--ink:#111111;--paper:#ffffff;--accent:#173e32}
html[data-view=simple] body{font-size:20px;line-height:1.7;color:#111;background:#fff}
html[data-view=simple] header,html[data-view=simple] main{padding:8px 12px}
html[data-view=simple] header{border:0}html[data-view=simple] h1{font-size:28px;line-height:1.3;margin:0}
html[data-view=simple] header nav,html[data-view=simple] header>p,html[data-view=simple] #emergency-first-title,html[data-view=simple] #save-title,html[data-view=simple] #connection,html[data-view=simple] #status,html[data-view=simple] #saved-date{display:none}
html[data-view=simple] .panel{padding:8px;margin:8px 0;border-color:#777;border-radius:8px}
html[data-view=simple] #emergency-first{margin-top:0;border:0;padding:0}
html[data-view=simple] .emergency-calls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html[data-view=simple] .emergency-calls a{min-height:56px;padding:8px;text-align:center;color:#111;display:flex;align-items:center;justify-content:center;line-height:1.3;font-size:20px;text-decoration:none;border-color:#333}
html[data-view=simple] .emergency-calls a[href="tel:1669"]{grid-column:1/-1;order:-2;min-height:64px;background:#a00000;color:#fff;border-color:#a00000;font-size:24px}
html[data-view=simple] .emergency-calls a[href="tel:1155"]{grid-column:1/-1;order:-1;min-height:64px;display:block;font-size:24px;background:#173e32;color:#fff;border-color:#173e32;padding:4px}
html[data-view=simple] small{font-size:16px;color:#111}html[data-view=simple] .emergency-calls small{color:inherit;font-size:16px}
html[data-view=simple] .phone-note{margin:4px 0;font-size:20px}
html[data-view=simple] details{padding:0;margin-top:8px}html[data-view=simple] summary{min-height:56px;padding:8px;line-height:1.7}
html[data-view=simple] #emergency-details{margin-top:0}html[data-view=simple] #emergency-details summary{min-height:56px}
html[data-view=simple] button,html[data-view=simple] input,html[data-view=simple] .big-call{min-height:56px;font-size:20px;line-height:1.5;color:#111;background:#fff;border-color:#333}
html[data-view=simple] button{padding:10px 8px}html[data-view=simple] button.primary{background:#173e32;color:#fff}
html[data-view=simple] #save{min-height:64px;width:100%;font-size:20px}html[data-view=simple] #simple-save-state{margin:0 0 8px;font-weight:700;line-height:1.4}
html[data-view=simple] #save-panel{margin-top:8px}html[data-view=simple] .save-help{font-size:20px;margin:8px 0;line-height:1.7}
.remove-area{margin-top:32px;padding-top:20px;border-top:2px solid #777}
html[data-view=simple] #help-panel button,html[data-view=simple] #simple-search button,html[data-view=simple] #simple-selected button,html[data-view=simple] #simple-results button{width:100%;display:block;margin:8px 0}
html[data-view=simple] .big-call{display:flex;align-items:center;padding:10px;border:1px solid #333;border-radius:8px;text-align:center}
html[data-view=simple] #map-panel>h2,html[data-view=simple] #map-panel>p:not(.simple-only),html[data-view=simple] #road-search-form,html[data-view=simple] .move,html[data-view=simple] #selected,html[data-view=simple] #navigation-panel,html[data-view=simple] #personal-panel,html[data-view=simple] #results,html[data-view=simple] #more,html[data-view=simple] .guide,html[data-view=simple] main>.emergency,html[data-view=simple] footer{display:none}
html[data-view=simple] #search-form{display:none}html[data-view=simple] #search-form.simple-search-open{display:block}html[data-view=simple] #search-form label:not(:first-child),html[data-view=simple] #search-form button{display:none}
html[data-view=simple] #map{height:65vh}html[data-view=simple] #map .pin text{font-size:20px}html[data-view=simple] #map .saved-pin text{font-size:18px}
html[data-view=simple] #simple-place-title{font-size:22px}html[data-view=simple] .map-safety,html[data-view=simple] .hospital-warning{color:#111;font-size:20px}html[data-view=simple] .map-attribution{font-size:16px}
html[data-view=simple] a{color:#111}html[data-view=simple] .actions{gap:8px;align-items:stretch}html[data-view=simple] #map-panel>.actions button{flex:1 1 0;font-size:20px}
html[data-view=simple] #home-pick,html[data-view=simple] #home-confirm,html[data-view=simple] #view-toggle{width:100%;margin:8px 0}
#thai-card{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:20px;background:#fff;color:#111;border:0;overflow:auto;font:20px/1.7 system-ui,-apple-system,sans-serif}
#thai-card [lang=th]{font-size:32px;line-height:1.7;font-family:system-ui,sans-serif;margin:16px 0 0;overflow-wrap:anywhere}#thai-card .translation{font-size:18px;margin:4px 0 12px}#thai-card input,#thai-card button{width:100%;min-height:56px;font-size:20px;margin:8px 0;background:white;color:#111}#thai-card label{display:block}.print-phones{display:none}
@page{size:A4;margin:15mm}@media print{body>*{display:none!important}body>#thai-card{display:block!important;position:static;width:auto;height:auto;overflow:visible;padding:0}#thai-card h2,#thai-card label,#thai-card input,#thai-card button,#address-status,#thai-card .no-print{display:none!important}#thai-card .print-phones{display:block;margin-top:24px;font-size:20px}#thai-card [lang=th]{font-size:28px}#thai-card .translation{font-size:16px}}

@media print{body>main{display:block!important}body>main>*{display:none!important}body>main>#thai-card{display:block!important;position:static;width:auto;height:auto;overflow:visible;padding:0}}

#simple-save-feedback:empty{display:none!important}html[data-view=simple] #simple-save-feedback{margin:8px 0;color:#111}
html[data-view=simple] button:disabled{opacity:1;background:#dddddd;color:#111111}
.offline-qa-badge{color:#111;background:#fff;font-size:20px;margin:12px}@media print{.offline-qa-badge{display:none!important}}
/* Match the emergency guide without expanding the first-screen control stack. */
@font-face{font-family:SafetySans;src:url('/immersive/media/noto-sans-jp.woff') format('woff');font-weight:400;font-display:swap}
:root{--ink:#142536;--paper:#fff;--line:#c4d1dc;--accent:#15364c}
body{font-family:SafetySans,'Noto Sans Thai','Yu Gothic UI','Hiragino Kaku Gothic ProN',system-ui,sans-serif;background:#f4f7fa;color:#142536;font-synthesis:weight}
h1,h2,h3{font-weight:800;letter-spacing:-.025em}button,input,select{border-color:#8294a5;border-radius:10px}button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 4px #14253620}.panel{border-color:#c4d1dc;background:#fff;border-radius:16px}button.primary{background:#15364c;color:#fff}.map-wrap{border-color:#8294a5;border-radius:14px}#map .pin circle{fill:#15364c}.notice{background:#fff6df;color:#4c3612;border-left-color:#8b5d12}.remove-area{border-top-color:#c4d1dc}.offline-qa-badge{background:#e7edf4;color:#263b4e;font-size:14px;padding:7px 12px;margin:0}
html[data-view=simple]{--ink:#142536;--paper:#fff;--accent:#15364c}html[data-view=simple] body{font-family:SafetySans,'Noto Sans Thai','Yu Gothic UI','Hiragino Kaku Gothic ProN',system-ui,sans-serif;background:#f4f7fa;color:#142536}html[data-view=simple] h1{color:#142536;font-weight:850}html[data-view=simple] .panel{border-color:#c4d1dc;border-radius:12px}html[data-view=simple] .emergency-calls a{border-color:#8294a5;color:#142536;background:#fff;border-radius:10px;font-weight:750}html[data-view=simple] .emergency-calls a[href="tel:1669"]{background:#b42330;border-color:#b42330;color:#fff}html[data-view=simple] .emergency-calls a[href="tel:1155"]{background:#15364c;border-color:#15364c;color:#fff}html[data-view=simple] .emergency-calls small{color:inherit}html[data-view=simple] #save,html[data-view=simple] button.primary{background:#15364c;border-color:#15364c;color:#fff;font-weight:750}html[data-view=simple] button,html[data-view=simple] input,html[data-view=simple] .big-call{border-color:#8294a5;border-radius:10px;color:#142536}html[data-view=simple] #simple-save-state{font-weight:750;color:#142536}html[data-view=simple] #simple-save-feedback{color:#142536}html[data-view=simple] small{color:#263b4e}html[data-view=simple] a{color:#15364c}html[data-view=simple] .map-safety,html[data-view=simple] .hospital-warning{color:#142536}html[data-view=simple] button:disabled{background:#e6ebf0;color:#475a6c;border-color:#bdcad5}html[data-view=simple] #simple-selected{border-top:3px solid #15364c}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:4px solid #0754a1;outline-offset:3px}
@media(prefers-reduced-motion:reduce){button{transform:none!important}}
html[data-view=simple] button,html[data-view=simple] input,html[data-view=simple] .emergency-calls a{min-height:58px}html[data-view=simple] #save,html[data-view=simple] .emergency-calls a[href="tel:1669"],html[data-view=simple] .emergency-calls a[href="tel:1155"]{min-height:64px}h1{text-wrap:balance}html[data-view=simple] #save:disabled{background:#e6ebf0;color:#475a6c;border-color:#bdcad5}
@media print{body{background:#fff;color:#000}html[data-view=simple] body{background:#fff;color:#000}}
