/* The draggable edge between the map and the side panel (wide screens only). Loaded after
   app.css, which reads the same --side-w for the panel, the map legend and the attribution. */

.splitter { position: absolute; top: 0; bottom: 0; left: -12px; width: 24px; z-index: 5; cursor: col-resize; touch-action: none; }
.splitter::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 3rem; transform: translate(-50%, -50%); border-radius: 2px; background: var(--muted); opacity: 0.7; }
.splitter:hover::after, .splitter:focus-visible::after, .resizing .splitter::after { background: var(--accent); opacity: 1; }
.splitter:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.resizing { user-select: none; cursor: col-resize; }
@media (max-width: 768px) { .splitter { display: none; } }