1@media (max-width: 1180px) {2 /* There is no longer room for a third column, so the dock floats over the3 map's right edge instead and keeps its fold. */4 .app-shell {5 grid-template-columns: var(--sidebar) minmax(0, 1fr);6 }78 .dock {9 position: fixed;10 z-index: 9;11 top: var(--topbar);12 right: 0;13 bottom: 0;14 border-left: 1px solid var(--line-strong);15 background: rgba(23, 25, 29, 0.96);16 backdrop-filter: blur(14px);17 box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);18 }19}2021@media (max-width: 980px) {22 :root {23 --sidebar: 300px;24 }2526 .map-pickers label > span {27 display: none;28 }2930 .map-pickers select {31 max-width: 190px;32 }33}3435@media (max-width: 760px) {36 :root {37 --topbar: 64px;38 }3940 .app-shell {41 grid-template-columns: 1fr;42 }4344 .topbar {45 grid-template-columns: auto minmax(0, 1fr) auto;46 }4748 .brand {49 padding: 0 15px;50 border-right: 0;51 }5253 .brand small {54 display: none;55 }5657 .map-pickers {58 justify-content: center;59 padding: 0 7px;60 }6162 .map-pickers select {63 max-width: 135px;64 height: 35px;65 padding-left: 8px;66 font-size: 11px;67 }6869 .mobile-legend {70 display: grid;71 }7273 .sidebar {74 position: fixed;75 z-index: 30;76 top: var(--topbar);77 bottom: 0;78 left: 0;79 width: min(330px, calc(100% - 42px));80 box-shadow: 18px 0 50px rgba(0, 0, 0, 0.45);81 transform: translateX(-102%);82 transition: transform 180ms ease;83 }8485 .sidebar.is-open {86 transform: translateX(0);87 }8889 .map-panel {90 grid-column: 1;91 }9293 .dock {94 width: min(336px, calc(100% - 42px));95 }96}