.sinergi-maps-nav{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border-bottom:1px solid #cbd5e1;flex-wrap:wrap;font:14px system-ui;position:relative;z-index:500}
.maps-mode-row{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px;width:100%;min-width:0}
.maps-mode-choice{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.sinergi-maps-nav a{padding:8px 12px;border-radius:7px;color:#145569;text-decoration:none;border:1px solid #cbd5e1;white-space:nowrap}
.sinergi-maps-nav a[aria-current=page]{color:#fff;background:#11677a;border-color:#11677a}
.sinergi-maps-nav a[aria-disabled=true]{opacity:.55}
.maps-edit-slot{flex:none;margin-left:auto}
.maps-edit-slot[hidden],.maps-edit-slot #edit-map[hidden]{display:none!important}
.maps-edit-slot #edit-map{display:inline-flex;align-items:center;gap:6px;width:auto;min-height:36px;margin:0;padding:7px 12px}
.maps-edit-slot{min-width:0;max-width:100%}
.maps-edit-slot:has(#editor-tools:not([hidden])){flex:1 1 480px}
.maps-edit-slot #map-editor-panel{display:block;margin:0;padding:0;border:0;background:transparent;max-width:100%}
.maps-edit-slot #map-editor-panel:has(>#editor-tools[hidden]){display:block}
.maps-edit-slot #map-editor-panel[hidden],.maps-edit-slot .editor-dock-controls,.maps-edit-slot #editor-tools[hidden]{display:none!important}
.maps-edit-slot #editor-tools:not([hidden]){display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;max-height:32vh;overflow:auto;padding:3px}
.maps-edit-slot .editor-actions{margin:0;flex-wrap:wrap;overflow:visible;flex-shrink:0}
.maps-edit-slot #editor-tools>.editor-actions{order:0}
.maps-edit-slot #editor-tools>:not(.editor-actions){order:1}
.maps-edit-slot #editor-tools>button{margin:0;width:auto;min-height:36px}
.maps-edit-slot #edit-save{width:auto;flex-basis:auto;max-width:100%}
.maps-edit-slot .combined-drawing{flex:0 1 300px;margin:0}
.maps-edit-slot #edit-properties{flex:1 1 260px;max-width:100%;margin:0}
.maps-edit-slot #edit-properties input,.maps-edit-slot #edit-properties textarea{box-sizing:border-box;width:100%}
.maps-edit-slot #edit-status{position:static;width:auto;height:auto;clip-path:none;white-space:normal;text-align:right;margin:3px 0 0}
.maps-edit-slot #edit-status:empty{display:none}
.maps-layer-choice{display:flex;gap:4px}
.maps-choice-status{font-size:12px;color:#475569}
.sinergi-maps-nav~main{height:calc(100dvh - 174px);min-height:400px}
@media(max-width:900px){.maps-edit-slot:has(#editor-tools:not([hidden])){flex-basis:100%}.maps-edit-slot #editor-tools:not([hidden]){justify-content:flex-start}.maps-edit-slot #edit-status{text-align:left}}
@media(max-width:700px){.sinergi-maps-nav{padding:8px 10px}.maps-mode-choice{gap:4px}.sinergi-maps-nav a{padding:8px}.maps-edit-slot #edit-map{padding:7px 9px}.maps-choice-status{width:100%}.sinergi-maps-nav~main{height:calc(100dvh - 224px)}}
/* Compact icons, with full accessible names and independent hit targets. */
.sinergi-maps-nav{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:36px minmax(36px,auto);gap:4px 12px;padding:8px 12px;align-items:start}
.maps-mode-row{display:contents}
.maps-mode-choice{grid-column:1;grid-row:1;gap:4px}
.maps-layer-choice{grid-column:1;grid-row:2}
.maps-edit-slot{grid-column:2;grid-row:1 / span 2;width:100%;margin:0;text-align:right}
.maps-choice-status{grid-column:1 / -1;grid-row:3}
.maps-choice-status:empty{display:none}
.maps-sr-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sinergi-maps-nav a,.maps-edit-slot #map-editor-panel .map-icon-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;min-height:36px;flex:0 0 36px;padding:8px;margin:0}
.sinergi-maps-nav a svg,.maps-edit-slot #map-editor-panel .map-icon-button svg{width:18px;height:18px;flex-shrink:0;pointer-events:none}
.sinergi-maps-nav a:focus-visible,.maps-edit-slot button:focus-visible{outline:3px solid #267ba0;outline-offset:2px}
.sinergi-maps-nav a[aria-current=page]{box-shadow:inset 0 -3px 0 #073d4b}
.maps-edit-slot #editor-tools:not([hidden]){gap:4px;align-items:flex-start}
@media(max-width:900px){.maps-edit-slot:has(#editor-tools:not([hidden])){grid-column:1 / -1;grid-row:3}.sinergi-maps-nav:has(#editor-tools:not([hidden])) .maps-choice-status{grid-row:4}}
@media(pointer:coarse),(max-width:700px){.sinergi-maps-nav{grid-template-rows:44px minmax(44px,auto)}.sinergi-maps-nav a,.maps-edit-slot #map-editor-panel .map-icon-button{width:44px;min-width:44px;height:44px;min-height:44px;flex-basis:44px;padding:12px}}

/* Compact drawing controls retain the existing inputs and change handlers. */
.maps-edit-slot .map-editor .combined-drawing{display:flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;gap:4px;padding:0;border:0;background:transparent;max-width:100%}
.maps-edit-slot .combined-drawing>label:not(.combined-toggle){display:flex;align-items:center;gap:3px;width:130px}
.maps-edit-slot .combined-drawing>label:has(#edit-route-count){width:90px}
.maps-edit-slot .map-editor .combined-toggle{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;border:1px solid #b7c9d9;border-radius:6px;background:#f5fafb;color:#203d62;cursor:pointer}
.maps-edit-slot .map-editor .combined-toggle input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.maps-edit-slot .combined-toggle:has(input:checked){background:#11677a;color:white;border-color:#11677a;box-shadow:inset 0 -3px 0 #073d4b}
.maps-edit-slot .combined-toggle:has(input:focus-visible){outline:3px solid #267ba0;outline-offset:2px}
.maps-edit-slot .combined-toggle:has(input:disabled){opacity:.5;cursor:not-allowed}
.maps-edit-slot .combined-toggle svg{pointer-events:none;width:18px;height:18px}
.maps-edit-slot #edit-combined-options{width:170px;max-width:100%}
.maps-edit-slot #edit-combined-options label{margin:0}
.maps-edit-slot .combined-drawing .ss-input{height:36px;min-height:36px;padding:4px 28px 4px 6px!important;font-size:12px}
.maps-edit-slot .combined-drawing .ss-clear{display:none}
.maps-edit-slot .combined-drawing .ss-toggle{width:24px}
.maps-edit-slot .combined-drawing [hidden]{display:none!important}
@media(pointer:coarse),(max-width:700px){.maps-edit-slot .map-editor .combined-toggle{width:44px;min-width:44px;height:44px}.maps-edit-slot .combined-drawing .ss-input{height:44px;min-height:44px;font-size:16px}.maps-edit-slot .combined-drawing>label:not(.combined-toggle){width:145px}.maps-edit-slot .combined-drawing>label:has(#edit-route-count){width:100px}}
/* Mode picker lives inline beside the title, without a separate navigation band. */
header>.sinergi-maps-nav{display:flex;flex:0 0 auto;align-items:center;gap:4px;padding:0;margin:0;border:0;background:transparent;color:inherit;white-space:nowrap;max-width:190px;overflow-x:auto;scrollbar-width:thin}
header>.sinergi-maps-nav .maps-mode-row{display:contents}
header>.sinergi-maps-nav .maps-mode-choice,header>.sinergi-maps-nav .maps-layer-choice{display:flex;flex-wrap:nowrap;gap:4px}
header>.sinergi-maps-nav [hidden]{display:none!important}
header>.sinergi-maps-nav a,header>.sinergi-maps-nav .maps-mode-back{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;min-width:30px;height:30px;min-height:30px;padding:5px;margin:0;border:1px solid #96a9bf;border-radius:6px;background:#fff;color:#203d62;font:inherit;cursor:pointer;text-decoration:none}
header>.sinergi-maps-nav a[aria-current=page]{background:#11677a;color:#fff}
header>.sinergi-maps-nav .maps-mode-back:focus-visible{outline:3px solid #6de1ef;outline-offset:2px}
@media(pointer:coarse){header>.sinergi-maps-nav a,header>.sinergi-maps-nav .maps-mode-back{width:44px;min-width:44px;height:44px;min-height:44px;flex-basis:44px}}

/* Only secondary phone choices overflow; the native action slot stays reserved. */
body>header:has(>.map-header-edit)>.sinergi-maps-nav[data-compact=true]{display:block;box-sizing:border-box;width:24px;min-width:24px;max-width:24px;overflow:visible;padding:0;flex:0 0 24px}
body>header>.sinergi-maps-nav[data-compact=true]>.maps-nav-overflow-toggle{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:24px;min-width:24px;height:24px;min-height:24px;padding:2px;margin:0;border:1px solid #96a9bf;border-radius:4px;background:#fff;color:#203d62}
body>header>.sinergi-maps-nav[data-compact=true]>.maps-nav-overflow-toggle svg{width:12px;height:12px;pointer-events:none}
body>header>.sinergi-maps-nav[data-compact=true]>.maps-nav-popover{position:fixed;z-index:1200;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;overflow:auto;overscroll-behavior:contain;border:1px solid #96a9bf;border-radius:8px;background:#fff;color:#203d62;box-shadow:0 4px 16px #0003;white-space:normal}
body>header>.sinergi-maps-nav[data-compact=true]>.maps-nav-popover[hidden]{display:none!important}
body>header>.sinergi-maps-nav[data-compact=true] .maps-mode-row{display:contents}
body>header>.sinergi-maps-nav[data-compact=true] :is(.maps-mode-choice,.maps-layer-choice){display:flex;flex-direction:column;gap:4px}
body>header:has(>.map-header-edit)>.sinergi-maps-nav[data-compact=true] .maps-nav-popover :is(a,button){display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-width:100%;max-width:none;flex-basis:auto;height:40px;min-height:40px;padding:8px;font:13px system-ui;border-radius:5px;text-align:left}
body>header>.sinergi-maps-nav[data-compact=true] .maps-nav-popover .maps-sr-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal}
body>header>.sinergi-maps-nav[data-compact=true] .maps-nav-popover .maps-mode-back:after{content:'Pilih mode Maps'}
body>header>.sinergi-maps-nav[data-compact=true] .maps-nav-popover .map-layer-menu-button:after{content:'Pilih peta dasar'}
body>header>.sinergi-maps-nav[data-compact=true] .maps-nav-popover a[aria-current=page]{background:#11677a;color:#fff}

/* The original Panel control moves as one unit; no duplicate or hidden anchors. */
body:has(header>.map-header-edit)>header[data-maps-header-order=v16]{grid-template-columns:auto var(--maps-compact-icon-size,28px) auto var(--maps-compact-icon-size,28px) auto minmax(24px,1fr) auto;min-height:56px}
body>header[data-maps-header-order=v16]>.brand{grid-column:1;grid-row:1}
body>header[data-maps-header-order=v16]>.map-area-toggle{grid-column:2;grid-row:1}
body>header[data-maps-header-order=v16]>.map-header-actions{grid-column:3;grid-row:1;width:auto;min-width:0;max-width:none}
body>header[data-maps-header-order=v16] #map-panel-actions{width:auto;min-width:0;justify-content:flex-start}
body>header[data-maps-header-order=v16]>.map-header-edit{grid-column:4;grid-row:1}
body>header[data-maps-header-order=v16]>.floating-symbol-reopen{grid-column:5;grid-row:1}
body>header[data-maps-header-order=v16]>.sinergi-maps-nav{grid-column:6;grid-row:1}
body>header>#mapsNativeHeaderSlotV16{grid-column:7;grid-row:1;display:flex;align-items:center;box-sizing:border-box;flex:0 0 auto;width:auto;min-width:0;margin:0;padding:0;border:0;pointer-events:none}
body>header>#mapsNativeHeaderSlotV16:empty{display:none}
body>header[data-maps-header-order=legacy]>#mapsNativeHeaderSlotV16{display:none}
@media(max-width:480px){body:has(header>.map-header-edit)>header[data-maps-header-order=v16]{grid-template-columns:auto 24px auto 24px auto minmax(24px,1fr) auto}}

/* Open menu clears later map status overlays, but remains below basemap dialogs. */
body>header.maps-nav-popover-open{z-index:1201}

/* Browser/PWA actions occupy the native slot only when Android has no toolbar. */
body>header>.maps-session-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-left:auto;flex:0 0 auto;grid-column:7;grid-row:1}
body>header>.maps-session-actions[hidden],.maps-session-actions>[hidden]{display:none!important}
body>header>.maps-session-actions :is(button,a){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:5px 9px;border:1px solid #8ba6c0;border-radius:6px;background:#203d62;color:#fff;font:600 12px system-ui;white-space:nowrap;text-decoration:none;cursor:pointer}
.maps-session-actions svg{width:18px;height:18px;flex:none;pointer-events:none}
.maps-session-actions :is(button,a):focus-visible{outline:3px solid #6de1ef;outline-offset:2px}
.maps-session-actions :is(button,a):active{background:#13864b}
#maps-session-message{position:fixed;z-index:2000;top:62px;right:12px;max-width:min(400px,calc(100vw - 48px));padding:12px;margin:0;border:1px solid #e0cc80;border-radius:8px;background:#fff8dc;color:#594a20;box-shadow:0 3px 12px #0002;font:14px/1.5 system-ui}
#maps-session-message[hidden]{display:none!important}
@media(max-width:700px){body>header>.maps-session-actions{gap:3px}body>header>.maps-session-actions :is(button,a){width:32px;min-width:32px;padding:5px}.maps-session-actions span{display:none}}
@media(max-width:480px){body>header>.maps-session-actions :is(button,a){width:28px;min-width:28px;min-height:28px;padding:4px}.maps-session-actions svg{width:16px;height:16px}}

/* Secondary account/export actions live in one labelled overflow menu. */
body>header>.maps-session-actions{position:relative}
body>header>.maps-session-actions #maps-account-menu-toggle{width:36px;min-width:36px;height:36px;padding:0;font:700 26px system-ui}
#maps-account-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:1600;display:flex;flex-direction:column;gap:5px;width:210px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 120px);overflow:auto;padding:8px;background:#fff;border:1px solid #b6cbd4;border-radius:9px;box-shadow:0 4px 18px #0004}
#maps-account-menu[hidden],#maps-account-menu>[hidden]{display:none!important}
body>header>.maps-session-actions #maps-account-menu :is(button,a){width:100%;min-height:44px;justify-content:flex-start;padding:9px 10px;color:#203d62;background:#f4f8fb;border-color:#d1dfe8}
body>header>.maps-session-actions #maps-account-menu span{display:inline}
body>header:has(#maps-account-menu:not([hidden])){z-index:1600}
@media(pointer:coarse),(max-width:700px){body>header>.maps-session-actions #maps-account-menu-toggle{width:44px;min-width:44px;height:44px}}