/* v55: one place for display choices; keep the map and timeline in reach. */
.map-top {justify-content:flex-end}
.map-top #panel-toggle {width:auto}
.map-top .panel-toggle-label {display:inline;font-size:12px}
.map-top .pill,.map-top #fullscreen-map {min-height:44px;height:44px}
.map-display-menu[hidden],.map-menu-links[hidden] {display:none!important}
.map-display-menu .view-switch {display:flex;width:100%}
.map-display-menu .view-switch button {flex:1;min-height:44px}
.map-display-menu .map-option-label {font-size:12px;margin:0 0 9px}
.map-display-menu .display-map-layers {border:0;padding-top:0;margin-top:12px}
.map-display-menu .display-map-layers button {min-height:44px;flex:1;justify-content:center;font-size:12px}
.map-extra-options {border-top:1px solid #354b60;margin-top:8px;padding-top:4px}
.map-extra-options summary {cursor:pointer;min-height:44px;display:list-item;align-content:center;font-size:13px;color:#d5c29e;margin-left:16px}
.map-extra-options label {display:flex;gap:10px;align-items:center;min-height:44px;font-size:13px;color:#c7d7e4}
.map-extra-options .simple-map-action {min-height:44px;margin-top:12px}
.map-extra-options .display-menu-actions {margin-top:4px}
.map-display-menu #close-map-menu {min-width:44px;min-height:44px}
.map-reference-options{display:flex;gap:8px;margin:10px 0}
.map-reference-options #names-status,.map-reference-options #modern-toggle{display:block!important;position:static!important;flex:1;min-height:44px;padding:8px;border:1px solid #425765;border-radius:7px;font-size:12px;color:#dbd0b8;background:#1a2b36}
.map-reference-options #modern-toggle[aria-pressed=true]{background:#34534a;border-color:#cbb986;color:#fff}
.timeline-event-label{font-size:11px;color:#a7b9c6;margin:10px 0 0}
.fullscreen-map .timeline-event-label,.presenting .timeline-event-label{display:none}
.era-shortcuts {margin-top:6px;border-top:1px solid #263643}
.era-shortcuts>summary {cursor:pointer;color:#b7c8d6;font-size:12px;min-height:44px;line-height:44px;width:fit-content}
.era-shortcuts .era-jumps {margin-top:0;padding-top:0}
.fullscreen-map .era-shortcuts,.presenting .era-shortcuts {display:none}
@media(max-width:700px){
 .map-top{justify-content:flex-end;left:14px;right:14px;gap:7px}
 .map-top #panel-toggle{margin-right:auto;padding:8px 12px}
 .map-top #map-view-button{padding:8px 12px}
 .map-top #fullscreen-map{width:44px;flex-shrink:0}
 .map-display-menu{top:69px;max-height:calc(100% - 84px);width:290px}
 .era-shortcuts .era-jumps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;overflow:visible}
 .era-shortcuts .era-jumps button{white-space:normal;text-align:left;min-height:48px;padding:8px 12px}
 .era-shortcuts .era-jumps button span{display:block}
 .timeline .time-helper{display:block;font-size:12px}
 .map-controls button{width:44px;height:44px}
 .map-top .panel-toggle-label{font-size:12px}
}
@media(max-width:360px){
 .map-top{left:10px;right:10px;gap:5px}
 .map-top #panel-toggle,.map-top #map-view-button{padding:8px;font-size:12px}
 .first-detour{flex-wrap:wrap}
}
@media(display-mode:standalone){
 .topbar{padding-top:calc(12px + env(safe-area-inset-top,0px))}
 .timeline{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
}

/* Keep account actions inside narrow WebKit viewports, even with fallback fonts. */
@media(max-width:700px){
 .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:8px;box-sizing:border-box;width:100%;padding-left:14px;padding-right:14px}
 .topbar .brand{grid-column:1;min-width:0;max-width:100%;gap:8px;overflow:hidden}
 .topbar .brand strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;letter-spacing:1px}
 .topbar .brand-caption{display:none}
 .topbar .brand-icon{box-sizing:border-box;position:relative;flex:0 0 24px;width:24px;height:24px;border:2px solid currentColor;border-radius:50%;font-size:0;line-height:0}
 .topbar .brand-icon::before{content:"";position:absolute;inset:2px 5px;border:1px solid currentColor;border-radius:50%}
 .topbar .brand-icon::after{content:"";position:absolute;left:1px;right:1px;top:9px;border-top:1px solid currentColor}
 .topbar .header-right{grid-column:2;min-width:0;margin:0;gap:6px;flex-wrap:nowrap}
 .topbar .more-button{min-width:58px;min-height:44px;padding:8px;font-size:12px}
 .topbar .more-button span{display:none}
 .topbar .account-button{flex:0 0 auto;width:auto;max-width:110px;min-height:44px;padding:6px 9px;gap:6px;font-size:12px}
 .topbar .account-button-label{display:block;min-width:0}
 .topbar .account-button>svg{width:20px;height:20px}
 .topbar .experience-nav button>span{display:none}
}
@media(max-width:360px){
 .topbar{padding-left:12px;padding-right:12px}
 .topbar .brand-icon{display:none}
 .topbar .brand strong{font-size:13px}
}

/* Core map controls use vectors so their meaning survives missing symbol fonts. */
.map-control-icon{display:inline-block;width:18px;height:18px;flex:none;vertical-align:middle}
#reset-view .map-control-icon{width:22px;height:22px}