/* Map symbols from the common FPLPortal icon pack. Colors indicate affiliation. */
.atc-symbol-wrapper{border:0;background:transparent}
.atc-symbol{display:grid;place-items:center;width:34px;height:34px;background:#112b3dec;border:2px solid var(--symbol-color,#d8d7bc);border-radius:7px;box-shadow:0 2px 8px #000a}
.atc-symbol img{width:24px;height:24px;object-fit:contain;pointer-events:none}
.atc-symbol--friendly{--symbol-color:#37b8ff}
.atc-symbol--hostile{--symbol-color:#ff7474}
.atc-symbol--neutral{--symbol-color:#e1ce94}

/* The map always owns the entire viewport. The sidebar floats over it. */
main{position:relative;display:block!important;min-width:0;overflow:hidden;padding:8px}
main>.map-pane{position:absolute;inset:8px;width:auto;height:auto;min-height:0;z-index:0}
main>.atc-sidebar{
  position:absolute;top:8px;bottom:8px;right:8px;z-index:700;
  width:44px;max-width:calc(100% - 16px);
  display:flex!important;flex-direction:row!important;gap:0!important;
  min-width:0;overflow:hidden!important;border:1px solid #315368;
  border-radius:5px;background:#0b1b29f5;box-shadow:0 3px 18px #0007;
  transition:width .65s cubic-bezier(.22,.65,.25,1)
}
main.atc-sidebar-open>.atc-sidebar{width:min(380px,calc(100% - 16px))}
.atc-sidebar-rail{width:42px;min-width:42px;flex:none;display:flex;align-items:flex-start;justify-content:center;background:#102838;border-right:1px solid #315368}
.atc-sidebar-toggle{width:34px;min-height:42px;padding:4px;position:sticky;top:8px;font-size:19px;z-index:2}
.atc-sidebar-content{width:calc(100% - 42px);min-width:0;flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:8px;padding:8px}
.atc-sidebar-content>section{flex-shrink:0;min-width:0}
.atc-sidebar-content>section[hidden]{display:none!important}
.atc-panel-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;color:#73ccf5;letter-spacing:.12em;padding:5px 2px;background:none;border:0;font-size:11px}
.atc-panel-trigger:after{content:"▾";font-size:15px}
.atc-panel-trigger[aria-expanded=false]:after{content:"▸"}
.atc-panel-body[hidden]{display:none!important}
.atc-panel-body>h2:first-child{display:none}
main:not(.atc-sidebar-open) .atc-sidebar-content{visibility:hidden;pointer-events:none;padding:0;width:0;flex:0;overflow:hidden}
main:not(.atc-sidebar-open) .atc-sidebar-rail{border-right:0}
.map-pane .leaflet-tooltip,.map-pane .leaflet-tooltip.atc-route-tooltip{
  min-width:180px;max-width:min(340px,calc(100vw - 60px));max-height:240px;
  overflow:auto;overflow-wrap:break-word;word-break:normal;white-space:normal;
}
.map-pane .leaflet-tooltip:empty{display:none}
@media(max-width:800px){
 main{min-height:70vh;overflow:hidden}
 main>.map-pane{inset:8px}
 main>.atc-sidebar{width:44px;max-width:calc(100% - 16px);min-height:0;overflow:hidden!important}
 main.atc-sidebar-open>.atc-sidebar{width:min(380px,calc(100% - 16px))}
}
@media(prefers-reduced-motion:reduce){main>.atc-sidebar{transition:none}}

/* Header + navigation float above the canvas; never take map layout space. */
.app{position:relative;min-height:0}
.atc-topbar{
  position:absolute;top:0;left:0;right:0;z-index:1100;
  background:#0b1b29;box-shadow:0 4px 18px #0009;
  transform:translateY(calc(-100% + 24px));
  transition:transform .65s cubic-bezier(.22,.65,.25,1);
}
.atc-topbar.atc-topbar-open{transform:translateY(0)}
.atc-topbar-content{min-width:0}
.atc-topbar-grip{display:flex;justify-content:center;align-items:center;height:24px;border-top:1px solid #315368;background:#102838}
.atc-topbar-pin{height:21px;line-height:17px;padding:1px 20px;font-size:10px;min-width:120px}
.atc-topbar:focus-within{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .atc-topbar,main>.atc-sidebar{transition:none}
}