/* Compact map chrome; content panels retain their readable sizing. */
html body#opal-ui :is(.rail,.navigation){gap:6px}
html body#opal-ui :is(.rail,.navigation) .round{
 width:32px!important;height:32px!important;min-width:32px;min-height:32px;
 border-radius:7px!important;padding:7px!important;
 box-shadow:0 1px 5px #0002!important;
}
html body#opal-ui :is(.rail,.navigation) .round svg{width:17px!important;height:17px!important}
html body#opal-ui .zoom{border-radius:7px!important;overflow:hidden;box-shadow:0 1px 5px #0002}
html body#opal-ui .zoom button{width:32px!important;height:32px!important;padding:0!important;font-size:21px!important}
html body#opal-ui .rotate-buttons{gap:4px}
html body#opal-ui .rotate-buttons button{width:28px!important;height:28px!important;font-size:17px!important;padding:0!important}
html body#opal-ui :is(.travel-top-dock button,.globe-rotation){width:34px!important;height:34px!important;padding:8px!important}
html body#opal-ui :is(.travel-top-dock button,.globe-rotation) svg{width:17px!important;height:17px!important}
html body#opal-ui .global-search input{height:36px!important;font-size:12px!important}
html body#opal-ui .map-ambience-launch{height:34px!important;padding:0 10px!important;font-size:11px!important;gap:6px}
html body#opal-ui .map-ambience-launch svg{width:15px!important;height:15px!important;flex-basis:15px}
html body#opal-ui #countriesButton{padding:8px 12px!important;font-size:11px!important;min-height:34px}
html body#opal-ui .brand .opal-logo{width:44px!important;height:44px!important}
html body#opal-ui .brand{gap:9px!important}
html body#opal-ui .brand .brand-name{font-size:20px!important}
html body#opal-ui :is(.rail,.navigation,.travel-top-dock,.map-ambience) button:focus-visible{
 outline:2px solid #4285f4!important;outline-offset:3px;
}
@media(min-width:851px){
 html{--opal-search-width:340px}
 html body#opal-ui .global-search{width:var(--opal-search-width)!important}
}
@media(pointer:coarse){
 html body#opal-ui :is(.rail,.navigation) .round,
 html body#opal-ui :is(.zoom button,.rotate-buttons button,.travel-top-dock button,.globe-rotation){
  width:44px!important;height:44px!important;min-width:44px;min-height:44px;
 }
 html body#opal-ui :is(.map-ambience-launch,#countriesButton){min-height:44px}
 html body#opal-ui .global-search input{height:44px!important}
}
/* Match the header to the compact navigation controls. */
@media(min-width:851px){
 html:root{--opal-search-width:300px}
 html body#opal-ui .global-search{width:var(--opal-search-width)!important}
 html body#opal-ui .global-search input{height:30px!important;min-height:30px;padding:0 13px!important;font-size:11px!important}
 html body#opal-ui .travel-top-dock{gap:6px;right:calc(50% + var(--opal-search-width)/2 + 9px)}
 html body#opal-ui .travel-top-dock button,
 html body#opal-ui .globe-rotation{width:30px!important;height:30px!important;min-height:30px;padding:7px!important}
 html body#opal-ui .map-ambience{left:calc(50% + var(--opal-search-width)/2 + 9px)}
 html body#opal-ui .map-ambience-launch{height:30px!important;min-height:30px;padding:0 9px!important;font-size:10px!important}
 html body#opal-ui .globe-rotation{left:calc(100% + 6px)}
 html body#opal-ui #countriesButton{height:30px;min-height:30px;padding:6px 10px!important;font-size:10px!important}
}
@media(min-width:851px) and (pointer:coarse){
 html body#opal-ui .global-search input,
 html body#opal-ui .travel-top-dock button,
 html body#opal-ui .globe-rotation,
 html body#opal-ui .map-ambience-launch,
 html body#opal-ui #countriesButton{height:44px!important;min-height:44px}
 html body#opal-ui .travel-top-dock button,
 html body#opal-ui .globe-rotation{width:44px!important}
}