1/* The overview earns its corner while the reader is looking for where they are,2 and stops earning it the moment they are looking at what is underneath it. It3 slides off to the right when put away, leaving the handle at the edge to4 bring it back. */5.overview-shelf {6 display: flex;7 align-items: center;8 transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);9}1011.overview-shelf[hidden] {12 display: none;13}1415/* Put away, the panel travels its own width plus the corner's inset, so what16 is left on screen is the handle alone, flush with the edge of the map. The17 map panel clips it there: the dock is the map's neighbour, not a layer under18 it, and a panel sliding out of one column has no business painting over the19 next one. */20.overview-shelf.is-docked {21 transform: translateX(calc(100% - 23px + var(--corner-inset, 0px)));22}2324/* Put away is put away: what is left of the panel past the edge of the window25 does not steer the map. */26.overview-shelf.is-docked .overview {27 pointer-events: none;28}2930/* The handle is part of the panel it moves, not a control beside it: it shares31 the panel's edge, and only the outer corners are rounded. */32.overview-dock {33 display: grid;34 width: 24px;35 height: 52px;36 padding: 0;37 border: 1px solid var(--line-strong);38 border-right: 0;39 border-radius: 8px 0 0 8px;40 margin-right: -1px;41 place-items: center;42 background: rgba(23, 25, 29, 0.9);43 box-shadow: -5px 6px 20px rgba(0, 0, 0, 0.24);44 color: var(--muted);45 cursor: pointer;46}4748.overview-dock:hover {49 color: var(--accent);50}5152.overview-dock svg {53 width: 13px;54 fill: none;55 stroke: currentColor;56 stroke-linecap: round;57 stroke-linejoin: round;58 stroke-width: 1.8;59 transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);60}6162.overview-shelf.is-docked .overview-dock svg {63 transform: rotate(180deg);64}6566/* Only worth the space once the whole map no longer fits on screen, which is67 why it is hidden until then rather than always present. */68.overview {69 position: relative;70 overflow: hidden;71 border: 1px solid var(--line-strong);72 border-radius: 8px;73 background: rgba(23, 25, 29, 0.9);74 box-shadow: 0 6px 25px rgba(0, 0, 0, 0.28);75 cursor: crosshair;76 line-height: 0;77 /* The overview is dragged, so a touch on it steers the map rather than78 scrolling whatever is behind it. */79 touch-action: none;80}8182.overview[hidden] {83 display: none;84}8586.overview canvas {87 display: block;88 opacity: 0.85;89}9091.overview-viewport {92 position: absolute;93 border: 1px solid var(--accent);94 border-radius: 2px;95 background: rgba(58, 165, 201, 0.14);96 pointer-events: none;97}98