/* 022: карта дополняет карточки. Все формы исполнения и нижние вкладки остаются доступны без WebGL. */
.cr-route-overview { display: grid; gap: var(--space-2); min-width: 0; }
.cr-route-select { display: grid; gap: var(--space-1); min-width: 0; font-size: var(--text-sm); }
.cr-route-select select { width: 100%; min-width: 0; min-height: 44px; text-overflow: ellipsis; }
.cr-map { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--panel); min-width: 0; }
.cr-map__tools { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-2); padding: 0 var(--space-2); }
.cr-map__tools > b { flex: 1 1 auto; font-size: var(--text-sm); }
.cr-map__tools .btn { min-height: 44px; padding: 0 var(--space-2); font-size: var(--text-sm); }
.cr-map__canvas { height: clamp(180px, 27vh, 260px); min-width: 0; background: var(--cream); }
.cr-map__canvas[hidden], .cr-route-select[hidden], .cr-map__note[hidden] { display: none; }
.cr-map__note { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--muted); }
.cr-map__legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3); margin: 0; font-size: var(--text-xs); color: var(--muted); }
.cr-map__legend span { display: inline-flex; align-items: center; gap: var(--space-1); }
.cr-map__legend svg { width: 16px; height: 16px; }
.cr-map__order, .cr-map__current { margin: 0; font-size: var(--text-sm); color: var(--muted); overflow-wrap: anywhere; }
.cr-map__current { color: var(--ink); font-weight: var(--weight-semibold); }
.cr-map-pin { display: grid; place-items: center; width: 44px; height: 44px; padding: 3px; border: 0; background: transparent;
  font: inherit; cursor: pointer; color: var(--on-accent); }
.cr-map-pin__shape { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 50%;
  padding: 0 4px; background: var(--route-1); border: 2px solid var(--panel); box-shadow: 0 1px 4px var(--muted);
  font-size: var(--text-sm); font-weight: var(--weight-bold); }
.cr-map-pin--pickup .cr-map-pin__shape { border-radius: 6px; background: var(--panel); color: var(--gold); border-color: var(--gold); }
.cr-map-pin--return .cr-map-pin__shape { border-radius: 4px 15px 4px 15px; background: var(--panel); color: var(--err); border-color: var(--err); }
.cr-map-pin--group .cr-map-pin__shape { border-radius: 9px; outline: 2px solid var(--route-1); outline-offset: 1px; }
.cr-map-pin.is-selected .cr-map-pin__shape { outline: 3px solid var(--ink); outline-offset: 2px; }
.cr-map-pin:disabled .cr-map-pin__shape { background: var(--panel); color: var(--muted); border-color: var(--muted); opacity: .8; }
.cr-map-pin:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.cr-map-choice { min-height: 44px; white-space: normal; text-align: left; }
.cr-map-choice > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.cr-map-choice small { font-weight: normal; color: var(--muted); }
.cr-stop__selection { display: flex; flex-wrap: wrap; gap: var(--space-2); grid-column: 1 / -1; }
.cr-stop__selection .btn { min-height: 44px; }
.cr-stop__selection svg { width: var(--icon-md); height: var(--icon-md); }
.cr-stop:focus { outline: none; }
.cr-stop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cr-navigation__choices { display: grid; gap: var(--space-3); min-width: 0; }
.cr-navigation__choices a { min-height: 44px; white-space: normal; }
.cr-navigation__choices svg { width: var(--icon-md); height: var(--icon-md); }
.cr-map .maplibregl-ctrl-attrib { font-size: 10px; }
.cr-map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
@media (max-width: 380px) {
  .cr-map__tools { gap: 0; }
  .cr-map__tools > b { width: 100%; padding-top: var(--space-2); }
}
/* Своё место курьера (последнее принятое сервером): синяя точка с обводкой, под булавками остановок. */
.cr-map-me { width: 22px; height: 22px; display: grid; place-items: center; pointer-events: none; z-index: 0; }
.cr-map-me__dot { width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--route-1, var(--accent));
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 7px color-mix(in srgb, var(--route-1, var(--accent)) 25%, transparent); }