/* Campermap: a clear map between two compact control surfaces. */
:root{--ink:#13273b;--muted:#657888;--border:#dce5eb;--shadow:0 8px 32px #09203b1c,0 2px 5px #09203b0a;--mint:#a9f85d;color:#152c40;background:#dfe8ef}
body{overscroll-behavior:none}button{transition:background .18s,box-shadow .18s,transform .18s}button:active{transform:scale(.96)}button:disabled{cursor:default;opacity:.7}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #397fea;outline-offset:3px}
.surface{background:#ffffffed;border:1px solid #fff;border-radius:20px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.topbar{top:max(14px,env(safe-area-inset-top));left:16px;right:16px;display:flex;align-items:center;gap:5px;padding:6px 8px;pointer-events:auto;height:64px;z-index:6}
.brand{display:flex;align-items:center;gap:8px;background:none;border:0;box-shadow:none;padding:0 10px 0 0;min-height:48px;flex-shrink:0}
.brand-mark{height:38px;width:38px;border-radius:12px;background:var(--ink);color:var(--mint);display:grid;place-items:center}.brand-mark svg{width:27px;height:27px;stroke-width:1.8}.brand strong{font-size:21px;letter-spacing:-1px;font-weight:800}.brand strong span{color:#567084;font-weight:500}
.header-search{display:flex;align-items:center;gap:10px;flex:1;max-width:480px;margin-left:auto;min-width:44px;min-height:46px;border:0;background:#edf2f6;border-radius:13px;padding:10px 14px;color:#526a7e;text-align:left;font-size:14px}.header-icon{height:46px;min-width:46px;display:grid;place-items:center;background:none;border:0;border-radius:13px}.header-icon[aria-expanded=true],.header-search[aria-expanded=true]{background:var(--ink);color:var(--mint)}.header-icon:hover{background:#e6eef4}
.floating-panel{top:max(88px,calc(env(safe-area-inset-top) + 74px));right:16px;width:min(380px,calc(100vw - 24px));padding:16px 18px;max-height:42dvh;border-radius:20px;animation:panel-in .2s ease-out;z-index:7}.panel-heading h2{font-size:19px}.icon-button{color:var(--ink)}
.search-field{display:flex;align-items:center;gap:9px;border:1px solid #bbcbd7;border-radius:12px;padding:0 12px;margin-top:8px}.search-field input{border:0;background:none;width:100%;min-width:0;height:48px;outline-offset:5px;font-size:16px;color:var(--ink)}.search-scope{color:var(--muted);font-size:12px;margin:12px 0}.search-result{display:block;text-align:left;width:100%;background:none;border:0;border-top:1px solid var(--border);padding:12px 6px;min-height:56px;border-radius:7px}.search-result:hover,.search-result:focus-visible{background:#edf5fc}.search-result strong{font-size:15px;display:block}.search-result span{display:block;margin-top:4px;font-size:12px;color:var(--muted)}.search-empty{font-size:15px;line-height:1.6}
.rules-visibility{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}.rules-visibility button{border:0;background:#edf2f6;border-radius:10px;min-height:44px;padding:8px 12px;display:flex;align-items:center;gap:8px;font-size:14px}.rules-visibility>span{font-size:12px;color:var(--muted)}.rules-visibility button[aria-pressed=false] .visibility-dot{background:#a7b4bd}.activity{margin-top:12px}.activity button[aria-pressed=true]{color:var(--mint)}.field{margin:12px 0}.field select{min-height:46px}.primary-button{background:var(--ink);color:var(--mint);border-radius:12px;margin-top:12px}.layers-note{margin:10px 0}.legend{position:static;box-shadow:none;padding:12px 0;border:0;border-radius:0;background:none;max-width:none;gap:10px 12px;font-size:12px}.base-switch{margin:10px 0}.toggle-row small{font-size:12px}
.side-controls{position:fixed;right:16px;top:calc(50% - 110px);display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:3}.locate-button{border:1px solid white;min-height:52px;min-width:52px;padding:13px;display:flex;align-items:center;gap:9px;background:var(--ink);color:var(--mint);border-radius:17px}.locate-button span{font-size:14px;display:none}.locate-button[aria-busy=true] svg{animation:spin 1.5s linear infinite}.map-controls{position:static;display:grid;border-radius:16px;background:#fffffff2}.map-controls button{width:48px;height:46px;background:transparent}.map-controls button+button{border-top:1px solid var(--border)}.map-controls button:hover{background:#dfeaf3}
.command-dock{position:fixed;bottom:max(28px,calc(env(safe-area-inset-bottom) + 22px));left:50%;transform:translateX(-50%);width:min(510px,calc(100vw - 24px));z-index:4;border-radius:24px;padding:14px 16px 4px;background:#101f30f5;color:#f5f9fd;border:1px solid #ffffff25;box-shadow:0 14px 48px #0b233638;backdrop-filter:blur(20px)}
.dock-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;min-width:0}.dock-heading>div{min-width:0}#dock-eyebrow{font-size:12px;font-weight:600;letter-spacing:1.1px;margin:0 0 4px;color:#a8bbc9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}#dock-municipality{font-size:21px;letter-spacing:-.6px;font-weight:650;line-height:1.2;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock-position{width:44px;height:44px;flex-shrink:0;border:1px solid #ffffff20;background:#22374a;color:var(--mint);border-radius:14px;display:grid;place-items:center}
.quick-states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.quick-state{border:1px solid #ffffff13;background:#1e3043;border-radius:13px;color:#f3f7fd;padding:9px 7px;min-height:64px;text-align:left;display:flex;flex-direction:column;gap:6px;justify-content:center;min-width:0}.quick-state[aria-pressed=true]{background:#2a4055;border-color:#6a8ba9;box-shadow:inset 0 2px 0 #b2f667}.quick-label{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap}.quick-label svg{width:16px;height:16px;stroke-width:1.8}.quick-label b{font-size:17px;font-weight:700;width:16px;text-align:center}.quick-value{display:flex;align-items:center;gap:5px;font-size:12px;color:#b8c8d7;line-height:1.3}.quick-value:before{content:'';display:block;flex-shrink:0;width:6px;height:6px;border-radius:50%;background:currentColor}.quick-state[data-tone=verde] .quick-value{color:#a5ef91}.quick-state[data-tone=amarillo] .quick-value{color:#ffda83}.quick-state[data-tone=rojo] .quick-value{color:#ff959e}
.dock-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:42px}.dock-footer button{background:none;border:0;color:#b3c5d5;min-height:42px;padding:7px 0;text-align:left;font-size:12px;display:flex;align-items:center;gap:5px;min-width:0}.dock-footer #vehicle-shortcut{max-width:42%}#query-context{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#query-toggle{color:var(--mint);font-size:12px;justify-content:flex-end}#query-toggle:disabled{color:#b3c5d5;opacity:1}#query-toggle:disabled>span:last-child{display:none}
.bottom-sheet{position:fixed;inset:auto 0 max(12px,env(safe-area-inset-bottom));margin:0 auto;width:min(510px,calc(100vw - 24px));max-height:42dvh;padding:12px 20px 20px;border:1px solid #cfdae3;border-radius:24px;background:#f9fcff;box-shadow:0 -8px 60px #101f3040;animation:panel-in .22s ease-out}.bottom-sheet::before{content:'';display:block;width:32px;height:4px;border-radius:4px;background:#bac9d6;margin:0 auto 6px}.bottom-sheet::backdrop{background:#0f233a12}.bottom-sheet h2{font-size:23px}.bottom-sheet .result-topline{position:sticky;top:-12px;background:#f9fcff;z-index:1}.bottom-sheet p{font-size:16px}.bottom-sheet summary{min-height:44px}.bottom-sheet .card-actions{gap:8px}.secondary-button{background:#e5eef5}.point-marker{width:22px;height:22px;border-width:4px;box-shadow:0 0 0 6px #fff6,0 3px 15px #0b2c4755}
#toast{top:max(92px,calc(env(safe-area-inset-top) + 82px));background:#101f30;border:1px solid #ffffff25;z-index:30}.maplibregl-ctrl-bottom-left{left:8px!important;bottom:0!important}.maplibregl-ctrl-bottom-right{bottom:0!important;right:2px!important}.maplibregl-ctrl-attrib{font-size:11px!important;background:#ffffffd9!important}#boot{background:#101f30;color:#eff9ff;z-index:20}#boot .spinner{border-color:#698599;border-top-color:var(--mint)}#boot.error button{background:var(--mint);color:var(--ink)}
@keyframes panel-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(min-width:800px){.topbar{max-width:820px;left:50%;right:auto;width:calc(100% - 40px);transform:translateX(-50%)}.floating-panel{right:max(20px,calc((100vw - 820px)/2));top:90px}.locate-button span{display:block}.command-dock{bottom:32px}.quick-state{padding:10px 12px}.quick-value{font-size:14px}.dock-footer button,#query-toggle{font-size:14px}}
@media(max-width:640px){.topbar{left:12px;right:12px;top:max(10px,env(safe-area-inset-top));height:58px;border-radius:18px;gap:2px;padding:5px 6px}.brand{gap:6px;padding-right:4px}.brand-mark{width:32px;height:36px;border-radius:11px}.brand strong{font-size:19px}.header-search{flex:1;margin-left:auto;padding:10px;justify-content:center;background:#eaf0f5;min-height:44px}.header-search span{display:none}.header-icon{width:44px;min-width:44px;height:44px}.floating-panel{top:max(78px,calc(env(safe-area-inset-top) + 68px));right:12px;max-height:42dvh;padding:12px 16px}.side-controls{right:12px;top:calc(50% - 110px)}.locate-button{min-width:46px;min-height:46px;padding:11px;border-radius:15px}.map-controls button{width:44px;height:44px}.command-dock{padding:10px 12px 0;border-radius:21px}.dock-heading{margin-bottom:8px}#dock-eyebrow{font-size:12px;letter-spacing:.8px}#dock-municipality{font-size:20px}.quick-state{padding:8px 7px;min-height:59px;gap:5px}.dock-footer{min-height:42px}.bottom-sheet{max-height:42dvh;padding:10px 17px 18px;border-radius:22px}.maplibregl-ctrl-bottom-left{display:none}}
@media(max-width:360px){.brand strong{font-size:17px}.brand-mark{width:27px}.topbar{left:8px;right:8px}.header-icon{width:42px;min-width:42px}.header-search{padding:9px;min-width:42px}.quick-label{font-size:14px;gap:3px}.quick-label svg,.quick-label b{width:14px}.command-dock{width:calc(100vw - 16px);padding-left:10px;padding-right:10px}.quick-state{padding:7px 5px}#dock-municipality{font-size:19px}#query-toggle,.dock-footer button{font-size:12px}}
@media(max-height:500px) and (min-width:600px){.command-dock{left:12px;transform:none;width:400px;bottom:20px}.side-controls{top:86px}.topbar{height:54px;top:8px}.brand-mark{height:32px}.bottom-sheet{max-height:65dvh;left:auto;right:12px;width:400px}.floating-panel{max-height:65dvh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
