/* Map toolbar only: the same controls retain their handlers and phone parents. */
html:not(.phone-layout) body>footer #navigation-controls{display:grid!important;grid-template-columns:max-content max-content max-content max-content minmax(8px,1fr) 30px max-content minmax(70px,110px) repeat(6,30px);grid-template-rows:34px 34px;gap:5px 3px;width:calc(100vw - 32px)!important;max-width:1040px!important;flex:0 1 1040px!important;margin:0 auto!important;align-items:center}
html:not(.phone-layout) #navigation-controls :is(.lab-utility-row,.lab-browse-row,.lab-linear-actions,.lab-mode-group,.header-right){display:contents!important}
html:not(.phone-layout) #navigation-controls #views{grid-row:1!important;grid-column:1/6!important;display:flex!important;gap:3px;width:auto!important;justify-self:start;margin:0!important}
html:not(.phone-layout) #navigation-controls .lab-five-tools{grid-row:1!important;grid-column:6/-1!important;display:flex!important;gap:3px;justify-self:end;width:auto!important;margin:0!important}
html:not(.phone-layout) #navigation-controls :is(#views,.lab-five-tools) button{width:auto!important;min-width:48px!important;padding:4px 9px!important;font-size:12px!important;height:32px!important}
html:not(.phone-layout) #navigation-controls #map-full-view{grid-row:2!important;grid-column:1!important}
html:not(.phone-layout) #navigation-controls #zoom-to-image{grid-row:2!important;grid-column:2!important}
html:not(.phone-layout) #navigation-controls #random{grid-row:2!important;grid-column:3!important}
html:not(.phone-layout) #navigation-controls .random-pool{grid-row:2!important;grid-column:4!important;display:flex!important;flex-direction:column!important;gap:0!important;margin:0!important;align-items:start}
html:not(.phone-layout) #navigation-controls .random-pool label{font-size:10px!important;line-height:15px!important;margin:0!important}
html:not(.phone-layout) #navigation-controls #theme-toggle{grid-row:2!important;grid-column:6!important}
html:not(.phone-layout) #navigation-controls #map-favorites{grid-row:2!important;grid-column:7!important;display:flex!important;flex-wrap:nowrap!important;gap:3px;padding:0!important;margin:0!important}
html:not(.phone-layout) #navigation-controls .search-field{grid-row:2!important;grid-column:8!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;height:32px!important}
html:not(.phone-layout) #navigation-controls #fit-view{grid-row:2!important;grid-column:9!important}
html:not(.phone-layout) #navigation-controls #fit-set{grid-row:2!important;grid-column:10!important}
html:not(.phone-layout) #navigation-controls #map-fullscreen{grid-row:2!important;grid-column:11!important}
html:not(.phone-layout) #navigation-controls #map-info{grid-row:2!important;grid-column:12!important}
html:not(.phone-layout) #navigation-controls #settings-toggle{grid-row:2!important;grid-column:13!important}
html:not(.phone-layout) #navigation-controls #help-toggle{grid-row:2!important;grid-column:14!important}
html:not(.phone-layout) #navigation-controls button{margin:0!important;min-width:0!important;min-height:30px!important;height:32px!important;padding:3px 5px!important}
html:not(.phone-layout) #navigation-controls #mode-sizing-controls{position:fixed!important;top:calc(var(--common-height) + 10px)!important;right:16px!important;left:auto!important;bottom:auto!important;display:flex!important;width:360px!important;max-width:calc(100vw - 160px)!important;margin:0!important;background:var(--aiml-paper,#faf9f5);padding:5px!important;z-index:45}
html:not(.phone-layout) #navigation-controls .lab-feedback{display:none!important}
@media(min-width:601px) and (max-width:850px){html:not(.phone-layout) body>footer #navigation-controls{width:calc(100vw - 16px)!important;column-gap:2px;grid-template-columns:max-content max-content max-content max-content minmax(2px,1fr) 28px max-content minmax(60px,80px) repeat(6,28px)}html:not(.phone-layout) #navigation-controls :is(#views,.lab-five-tools) button{padding:3px 6px!important;min-width:40px!important}}

html:not(.phone-layout) body>footer #navigation-controls #zoom-to-image{width:90px!important;max-width:90px!important}
html:not(.phone-layout) body>footer #navigation-controls #views{width:auto!important;min-width:0!important;grid-column:1/6!important;grid-row:1!important}

/* Revision: two compact lines with inline per-mode sliders and popup Search. */
html:not(.phone-layout) body>footer #navigation-controls{grid-template-columns:repeat(24,minmax(0,1fr))!important}
html:not(.phone-layout) body>footer #navigation-controls #views{grid-column:1/10!important;width:100%!important;justify-self:stretch}
html:not(.phone-layout) #navigation-controls #views button{flex:1;min-width:0!important;padding:3px!important}
html:not(.phone-layout) #navigation-controls .lab-five-tools{grid-column:10/17!important;justify-self:stretch;width:100%!important}
html:not(.phone-layout) #navigation-controls .lab-five-tools button{flex:1;min-width:0!important;padding:3px!important}
html:not(.phone-layout) body>footer #navigation-controls #zoom-to-image{grid-row:1!important;grid-column:17/20!important;width:100%!important;max-width:none!important}
html:not(.phone-layout) #navigation-controls #random{grid-row:1!important;grid-column:20/23!important}
html:not(.phone-layout) #navigation-controls .random-pool{grid-row:1!important;grid-column:23/25!important}
html:not(.phone-layout) #navigation-controls #map-full-view{grid-column:1/4!important}
html:not(.phone-layout) #navigation-controls #mode-sizing-controls{position:static!important;grid-row:2!important;grid-column:4/12!important;max-width:none!important;width:100%!important;padding:0!important;background:transparent;gap:4px!important}
html:not(.phone-layout) #mode-sizing-controls>*{min-width:0!important;flex:1!important}
html:not(.phone-layout) #mode-sizing-controls input[type=range]{width:100%!important;min-width:0!important}
html:not(.phone-layout) #navigation-controls #theme-toggle{grid-column:14!important}
html:not(.phone-layout) #navigation-controls #map-favorites{grid-column:15/18!important}
html:not(.phone-layout) #navigation-controls #phone-search-toggle{grid-row:2!important;grid-column:18!important;font-size:0!important;line-height:0!important}
html:not(.phone-layout) #navigation-controls #fit-view{grid-column:19!important}
html:not(.phone-layout) #navigation-controls #fit-set{grid-column:20!important}
html:not(.phone-layout) #navigation-controls #map-fullscreen{grid-column:21!important}
html:not(.phone-layout) #navigation-controls #map-info{grid-column:22!important}
html:not(.phone-layout) #navigation-controls #settings-toggle{grid-column:23!important}
html:not(.phone-layout) #navigation-controls #help-toggle{grid-column:24!important}

/* Override legacy fixed mode columns; each group stays within its allocated row. */
html:not(.phone-layout) body>footer #navigation-controls #views{display:flex!important;grid-template-columns:none!important}
html:not(.phone-layout) body>footer #navigation-controls :is(#views,.lab-five-tools) button{min-width:0!important;padding:3px!important;white-space:normal!important;line-height:12px!important}
html:not(.phone-layout) body>footer #navigation-controls #map-favorites{justify-content:end!important}

html:not(.phone-layout) body>footer #navigation-controls #map-full-view{width:100%!important}
@media(min-width:601px) and (max-width:850px){
 html:not(.phone-layout) body>footer #navigation-controls :is(#views,.lab-five-tools) button{font-size:11px!important;padding:2px!important}
 html:not(.phone-layout) body>footer #navigation-controls #map-favorites button{font-size:11px;padding:2px!important}
 html:not(.phone-layout) body>footer #navigation-controls #map-favorites button:first-child{width:28px!important;flex-basis:28px!important}
 html:not(.phone-layout) #mode-sizing-controls label{font-size:10px!important}
 html:not(.phone-layout) #mode-sizing-controls output{font-size:9px!important}
}

html:not(.phone-layout) body>footer #navigation-controls :is(#map-fullscreen,#map-info){width:100%!important}
@media(min-width:601px) and (max-width:850px){
 html:not(.phone-layout) body>footer #navigation-controls #views{grid-column:1/11!important}
 html:not(.phone-layout) body>footer #navigation-controls .lab-five-tools{grid-column:11/17!important}
}

/* Desktop refinement: matching mode/actions, right navigation, aligned lower groups. */
@media(min-width:851px){
html:not(.phone-layout) body>footer #navigation-controls{grid-template-columns:repeat(28,minmax(0,1fr))!important}
html:not(.phone-layout) body>footer #navigation-controls #views{grid-column:1/11!important}
html:not(.phone-layout) body>footer #navigation-controls #zoom-to-image{grid-column:11/13!important;white-space:normal!important;line-height:12px!important}
html:not(.phone-layout) body>footer #navigation-controls #random{grid-column:13/15!important;width:100%!important}
html:not(.phone-layout) body>footer #navigation-controls .random-pool{grid-column:15/17!important}
html:not(.phone-layout) body>footer #navigation-controls .lab-five-tools{grid-column:17/29!important}
html:not(.phone-layout) body>footer #navigation-controls #theme-toggle{grid-column:1!important}
html:not(.phone-layout) body>footer #navigation-controls #map-full-view{grid-column:2/5!important}
html:not(.phone-layout) body>footer #navigation-controls #mode-sizing-controls{grid-column:5/18!important;gap:14px!important;padding-inline:8px!important;box-sizing:border-box}
html:not(.phone-layout) body>footer #navigation-controls #map-favorites{grid-column:19/22!important}
html:not(.phone-layout) body>footer #navigation-controls #phone-search-toggle{grid-column:22!important}
html:not(.phone-layout) body>footer #navigation-controls #fit-view{grid-column:23!important}
html:not(.phone-layout) body>footer #navigation-controls #fit-set{grid-column:24!important}
html:not(.phone-layout) body>footer #navigation-controls #map-fullscreen{grid-column:25!important;max-width:none!important}
html:not(.phone-layout) body>footer #navigation-controls #map-info{grid-column:26!important;max-width:none!important}
html:not(.phone-layout) body>footer #navigation-controls #settings-toggle{grid-column:27!important}
html:not(.phone-layout) body>footer #navigation-controls #help-toggle{grid-column:28!important}

html:not(.phone-layout) body>footer #navigation-controls{flex-shrink:0!important}
html:not(.phone-layout) body>footer #navigation-controls #map-favorites{width:max-content!important;justify-self:end}

html:not(.phone-layout) body>footer{flex-wrap:wrap!important}
html:not(.phone-layout) body>footer #navigation-controls{flex-basis:min(1040px,calc(100vw - 32px))!important}

}
@media(min-width:851px) and (max-width:1000px){html:not(.phone-layout) body>footer #navigation-controls #views button{font-size:11px!important}}
