/* Конструктор маршрута, laid out like a route page: the map fills the
   screen, floating cards sit on it. Left: the constructor (summary and
   settings) and the map card (base maps, layers, track colour); top: the
   administrator's road tools next to the constructor, the route and map
   toolbars on the right; right: a tall card of route points; bottom: the
   elevation profile.
   Phones get the route page's header, round map buttons, a bottom sheet and
   the bottom navigation. */
html.planner-page {
  --pl-menu:0px;--pl-left:372px;--pl-right:312px;--pl-gap:12px;--pl-radius:15px;--pl-profile:138px;
  --pl-surface:color-mix(in srgb,var(--vz-card) 96%,transparent);
  --pl-route:#6250d6;--pl-casing:#fff;--pl-casing-outer:#0b223a;--pl-start:#1c8a4c;--pl-finish:#c4162e;--pl-club:#5b6474;--pl-checkpoint:#c4162e;--pl-edit:#f2b100;
  /* Surfaces: blue asphalt, yellow gravel, orange dirt (validated for any pair, colour-blind
     included) and a neutral; yellow gets a dark edge to stay visible on light maps. */
  --pl-paved:#2a78d6;--pl-gravel:#c9a000;--pl-gravel-edge:#4d3b00;--pl-dirt:#d9481f;--pl-heavy:#1c1c1c;--pl-unknown:#9aa3ae;--pl-line:#9aa3ae;--pl-banned:#8a1fb4;
  /* Way types: the categorical slots 1–6 in their fixed order. */
  /* Way types: cycleways sky blue, local roads blue, streets light violet, highways grey,
     tracks green, paths pink; «no road» the palest grey. */
  --pl-way-cycleway:#31b3e8;--pl-way-major:#3f2b96;--pl-way-track:#1baf7a;--pl-way-local:#1f4fc4;--pl-way-path:#e87ba4;--pl-way-street:#a98ae6;--pl-way-other:#c9ced5;
  --pl-grid:color-mix(in srgb,var(--vz-line) 70%,transparent);
  /* Administrators' blocks and additions: beige, so they never pass for the public page. */
  --pl-admin-bg:#faf4e6;--pl-admin-soft:#f3ead4;--pl-admin-line:#e3d5b0;--pl-admin-ink:#6d5320;
}
html.planner-page[data-theme="dark"] {
  --pl-way-cycleway:#4cc3f0;--pl-way-major:#7c6cf2;--pl-way-track:#2cc58d;--pl-way-local:#5b86f2;--pl-way-path:#f08fb4;--pl-way-street:#bda3f0;--pl-way-other:#5f6976;
  --pl-admin-bg:#3a3224;--pl-admin-soft:#463b2994;--pl-admin-line:#6b5934;--pl-admin-ink:#e6cf98;
  --pl-route:#9085e9;--pl-casing:#04111b;--pl-casing-outer:#c6d3e9;--pl-start:#3cbf73;--pl-finish:#ff5a67;--pl-club:#aab6c8;--pl-checkpoint:#ff5a67;
  --pl-paved:#3987e5;--pl-gravel:#cfa31a;--pl-gravel-edge:#04111b;--pl-dirt:#e0562c;--pl-heavy:#e4e6ea;--pl-unknown:#6f7b8a;--pl-line:#6f7b8a;--pl-banned:#c77dff;
  
}
html.planner-page body { margin:0;min-width:320px;overflow:hidden;background:var(--vz-page);color:var(--vz-copy);font:400 14px/1.45 var(--vz-font-body); }
.planner-page :is(.pl-app,.pl-app *,.pl-dialog,.pl-dialog *) { box-sizing:border-box; }
.planner-page :is(button,input) { font-family:var(--vz-font-body); }
.planner-page :is(button,a,input,[tabindex]):focus-visible { outline:2px solid var(--vz-blue);outline-offset:2px; }
.planner-page button { cursor:pointer; }
.planner-page button:disabled { cursor:default;opacity:.4; }
/* Interface icons only: the chart and Leaflet's layers draw their own SVG. */
.planner-page :is(.pl-card,.pl-toolbar,.pl-road-bar,.pl-admin-bar,.pl-mobile-header,.pl-round,.pl-round-pair,.pl-mobile-nav,.pl-context,.pl-dialog,.pl-popup) svg:not(.pl-chart-svg) { display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }

.planner-page .pl-app { position:fixed;inset:0 0 0 var(--pl-menu); }
/* Its own stacking context keeps Leaflet's controls under the cards and sheets. */
.planner-page .pl-map { position:absolute;z-index:0;isolation:isolate;inset:0;background:var(--vz-card-soft);outline:none;cursor:crosshair; }
.planner-page .pl-map .leaflet-interactive { cursor:pointer; }
.planner-page .pl-map.leaflet-dragging { cursor:grabbing; }
.planner-page.pl-admin-mode .pl-map { cursor:help; }
.planner-page.theme-dark .pl-street-tiles img.leaflet-tile { filter:invert(.9) hue-rotate(180deg) saturate(.8) brightness(1.1) contrast(.76); }
.planner-page .leaflet-control-attribution { background:color-mix(in srgb,var(--vz-card) 85%,transparent);color:var(--vz-muted);font-size:10px; }
.planner-page .leaflet-control-attribution a { color:var(--vz-blue); }
.planner-page :is(.pl-mobile-header,.pl-sheet-handle,.pl-round,.pl-round-pair,.pl-mobile-nav,.pl-settings-close,.pl-menu-toggle,.pl-settings-sheet) { display:none; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.planner-page .pl-card { border:1px solid var(--vz-line);border-radius:var(--pl-radius);background:var(--pl-surface);box-shadow:var(--vz-shadow-popup);color:var(--vz-copy); }
.planner-page .pl-card-head { display:flex;align-items:center;gap:6px;min-height:50px;padding:8px 10px 6px 8px; }
.planner-page .pl-card-head :is(h1,h2) { flex:1;min-width:0;margin:0;overflow:hidden;color:var(--vz-blue);font:700 22px/1.15 var(--vz-font-heading);white-space:nowrap;text-overflow:ellipsis; }
.planner-page .pl-card-head h2 { font-size:19px; }
.planner-page .pl-card-head h2 span { color:var(--vz-muted);font:600 14px/1 var(--vz-font-body); }
.planner-page .pl-card-body { padding:0 14px 14px; }
.planner-page .pl-fold { display:grid;place-items:center;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--vz-blue); }
.planner-page .pl-fold svg { width:18px !important;height:18px !important;stroke-width:2.2 !important;transition:transform .2s; }
.planner-page .pl-fold[aria-expanded="false"] svg { transform:rotate(180deg); }
.planner-page .pl-fold:hover,.planner-page .pl-icon-button:hover { background:var(--vz-hover); }
.planner-page .pl-icon-button { display:grid;place-items:center;flex:none;width:38px;height:38px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--vz-blue); }
.planner-page.theme-dark [data-pl-theme] { color:var(--vz-current); }
.planner-page .pl-icon-button:is(.pl-menu-toggle,.pl-settings-close) { display:none; }
.planner-page [data-pl-fold-body][hidden] { display:none !important; }

/* Left column: the constructor — summary on top, settings below, scrolling inside. */
.planner-page .pl-left { position:absolute;z-index:810;top:var(--pl-gap);bottom:var(--pl-gap);left:var(--pl-gap);display:flex;flex-direction:column;gap:10px;width:var(--pl-left);pointer-events:none; }
.planner-page .pl-left > * { pointer-events:auto; }
/* The track and the base maps share the column 50 : 50; a folded one gives its room to the other. */
.planner-page .pl-main-card { display:flex;flex:1 1 0;flex-direction:column;min-height:0; }
.planner-page .pl-left .pl-layers-card { flex:1 1 0;display:flex;flex-direction:column;min-height:0; }
.planner-page .pl-left .pl-layers-card.is-folded,.planner-page.pl-collapsed .pl-left .pl-layers-card { flex:none; }
.planner-page .pl-left .pl-layers-card.is-folded,.planner-page.pl-collapsed .pl-left .pl-layers-card { max-height:none; }
/* A folded track card keeps its head at the top; the base maps stay at the bottom. */
.planner-page .pl-main-card.is-folded,.planner-page.pl-collapsed .pl-main-card { flex:none;min-height:0; }
.planner-page .pl-left .pl-layers-card { margin-top:auto; }
.planner-page .pl-main-card.is-folded ~ .pl-layers-card:not(.is-folded) { flex:1 1 0; }
.planner-page .pl-left .pl-layers-card > .pl-card-body { min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin; }
.planner-page .pl-overlay-group { margin:6px 0 0 4px;color:var(--vz-muted);font:600 11px/1.2 var(--vz-font-body);letter-spacing:.05em;text-transform:uppercase; }
.planner-page .pl-main-body { min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin; }
.planner-page .pl-head-actions { position:relative;display:flex;align-items:center;margin-right:-4px; }
.planner-page .pl-head-actions .pl-icon-button { width:34px;height:34px; }
.planner-page .pl-head-actions .pl-icon-button svg { width:19px;height:19px; }
/* Summary: one compact row — distance, climb, descent, time with the speed under it. */
.planner-page .pl-stats { display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:6px;margin:0 0 8px;padding:6px 8px;border-radius:11px;background:var(--vz-card-soft); }
.planner-page .pl-stats div { display:flex;align-items:center;gap:2px;min-width:0; }
.planner-page .pl-stats svg { width:13px !important;height:13px !important; }
.planner-page .pl-stats svg { width:15px !important;height:15px !important;color:var(--vz-blue); }
.planner-page .pl-stats dt { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.planner-page .pl-stats svg { flex:none; }
.planner-page .pl-stats dd { margin:0;color:var(--vz-copy);font:italic 700 12.5px/1.2 var(--vz-font-body);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap; }
.planner-page .pl-stats .pl-speed { display:flex;align-items:center;gap:2px;margin-left:2px;color:var(--vz-muted);font-size:10px;white-space:nowrap; }
.planner-page .pl-stats .pl-speed input { width:34px;height:20px;padding:0 2px;border:1px solid var(--vz-line);border-radius:6px;background:var(--vz-card);color:var(--vz-copy);font:600 11px/1 var(--vz-font-body);text-align:center;-moz-appearance:textfield; }
.planner-page .pl-stats .pl-speed input::-webkit-inner-spin-button { display:none; }
.planner-page .pl-settings { margin-top:12px;padding-top:2px;border-top:1px solid var(--vz-line); }
.planner-page .pl-bike-block { margin-bottom:10px; }
.planner-page .pl-bike-block h3 { margin:0 0 5px;color:var(--vz-muted);font:600 11px/1.2 var(--vz-font-body);letter-spacing:.06em;text-transform:uppercase; }
.planner-page .pl-settings .pl-bike-block { margin-bottom:0; }
.planner-page .pl-settings .pl-bike-block h3 { margin-top:12px; }
.planner-page .pl-settings h3 { margin:12px 0 6px;color:var(--vz-muted);font:600 11px/1.2 var(--vz-font-body);letter-spacing:.06em;text-transform:uppercase; }
.planner-page .pl-breakdown { margin-bottom:10px; }
.planner-page .pl-breakdown-head { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px; }
.planner-page .pl-breakdown-head .pl-tabs { margin:0; }
.planner-page .pl-map-switch { display:flex;align-items:center;gap:5px;color:var(--vz-muted);font-size:11.5px;cursor:pointer;white-space:nowrap; }
.planner-page .pl-map-switch input { width:14px;height:14px;margin:0;accent-color:var(--vz-current-fill); }
.planner-page .pl-map-hint { height:14px;margin:4px 0 0;overflow:hidden;color:var(--vz-muted);font-size:11px;line-height:14px;white-space:nowrap;text-overflow:ellipsis; }
.planner-page .pl-map-hint.is-hint { color:var(--vz-warning); }
.planner-page .pl-tabs { display:flex;gap:14px;margin-bottom:7px; }
.planner-page .pl-tabs button { padding:0 0 3px;border:0;border-bottom:2px solid transparent;background:none;color:var(--vz-muted);font:600 12px/1.2 var(--vz-font-body); }
.planner-page .pl-tabs button[aria-selected="true"] { border-bottom-color:var(--vz-current-fill);color:var(--vz-copy); }
.planner-page .pl-bar { display:flex;gap:2px;height:8px;margin-bottom:7px;overflow:hidden;border-radius:4px;background:var(--vz-card-soft); }
.planner-page .pl-bar span { min-width:3px;height:100%; }
/* Every kind of the tab in two columns; room for four rows whichever tab is open. */
.planner-page .pl-legend { display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:18px;align-content:start;gap:1px 18px;height:calc(18px * 4 + 3px);overflow:hidden;margin:0;padding:0;list-style:none;font-size:12px; }
.planner-page .pl-legend li { display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap; }
.planner-page .pl-legend li span { overflow:hidden;text-overflow:ellipsis; }
.planner-page .pl-legend li b { flex:none;color:var(--vz-muted);font-weight:700; }
.planner-page .pl-legend li.is-empty { opacity:.45; }
.planner-page .pl-legend-banned i { background:repeating-linear-gradient(90deg,var(--pl-banned) 0 3px,transparent 3px 6px) !important;height:3px !important; }
.planner-page .pl-legend i { width:10px;height:10px;border-radius:3px; }
.planner-page .pl-legend b { font-weight:700;font-variant-numeric:tabular-nums; }
.planner-page .pl-legend em { color:var(--vz-muted);font-style:normal;font-variant-numeric:tabular-nums; }
/* The route's name is the constructor's title: written in place, with its save state under it. */
.planner-page .pl-hidden-title { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
/* The track card's head: «Трек · state» and the tools on the first line, the name on its own lines under them. */
.planner-page .pl-track-head { display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;column-gap:2px;row-gap:0;min-height:0;padding:6px 8px 2px 6px; }
.planner-page .pl-track-head .pl-head-actions { grid-column:-2 / -1; }
.planner-page .pl-track-head .pl-head-actions .pl-icon-button { width:32px;height:32px; }
.planner-page .pl-track-head .pl-title-box { grid-column:1 / -1;padding:0 4px 0 8px; }
.planner-page .pl-title-box { position:relative;display:grid;flex:1;min-width:0;cursor:text; }
.planner-page .pl-title-kicker { display:flex;gap:6px;min-height:12px;padding-left:2px;overflow:hidden;color:var(--vz-muted);font:600 10.5px/1.15 var(--vz-font-body);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap; }
.planner-page .pl-title-kicker b { font-weight:700; }
.planner-page .pl-title-kicker .pl-save-state::before { content:'· ';color:var(--vz-muted); }
.planner-page .pl-title-box > svg { position:absolute;right:6px;top:7px;width:14px !important;height:14px !important;color:var(--vz-muted);opacity:0;transition:opacity .15s; }
.planner-page .pl-title-box:is(:hover,:focus-within) > svg { opacity:.8; }
.planner-page .pl-title-box textarea { display:block;width:100%;min-width:0;min-height:27px;padding:1px 22px 2px 0;overflow:hidden;resize:none;border:0;border-bottom:1px dashed transparent;border-radius:0;background:transparent;color:var(--vz-blue);font:700 19px/1.25 var(--vz-font-heading);field-sizing:content; }
.planner-page .pl-title-box textarea:hover { border-bottom-color:var(--vz-line); }
.planner-page .pl-title-box textarea:focus { border-bottom:1px solid var(--vz-blue);outline:none; }
.planner-page .pl-title-box textarea::placeholder { color:var(--vz-blue);opacity:.75; }
.planner-page .pl-save-state { overflow:hidden;color:var(--vz-muted);text-overflow:ellipsis;text-transform:none;letter-spacing:0; }
.planner-page .pl-save-state:empty { display:none; }
.planner-page .pl-save-state.is-dirty { color:var(--vz-warning); }
.planner-page .pl-save-state.is-saved { color:var(--vz-success); }
.planner-page .pl-source { margin:0 0 8px;color:var(--vz-muted);font-size:12px; }
.planner-page .pl-source[hidden] { display:none; }
.planner-page .pl-source a { color:var(--vz-blue); }
.planner-page .pl-search { position:relative;margin-top:10px; }

.planner-page .pl-search-field { display:flex;align-items:center;gap:8px;height:40px;padding:0 11px;border:1px solid var(--vz-line);border-radius:11px;background:var(--vz-card);color:var(--vz-muted); }
.planner-page .pl-search-field:focus-within { border-color:var(--vz-blue); }
.planner-page .pl-search-field svg { width:17px !important;height:17px !important; }
.planner-page .pl-search-field input { flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;color:var(--vz-copy);font-size:14px;outline:none; }
.planner-page .pl-search-results { position:absolute;z-index:900;top:44px;left:0;right:0;margin:0;padding:5px;border:1px solid var(--vz-line);border-radius:12px;background:var(--vz-card);box-shadow:var(--vz-shadow-popup);list-style:none; }
.planner-page .pl-search-results[hidden] { display:none; }
.planner-page .pl-search-results li { display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer; }
.planner-page .pl-search-results li:is(:hover,[aria-selected="true"]) { background:var(--vz-hover); }
.planner-page .pl-search-results b { font-weight:600; }
.planner-page .pl-search-results small,.planner-page .pl-search-results .is-empty { color:var(--vz-muted);font-size:12px; }

/* Points: the tallest card, scrolling inside. */
.planner-page .pl-points-card { display:flex;flex:1;flex-direction:column;min-height:120px; }
.planner-page .pl-points-card.is-folded { flex:none;min-height:0;margin-top:auto; }
.planner-page .pl-points-card .pl-fold svg { transform:rotate(180deg); }
.planner-page .pl-points-card .pl-fold[aria-expanded="false"] svg { transform:none; }
.planner-page .pl-edit-tools { display:none;gap:0; }
.planner-page .pl-edit-tools button { display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--vz-blue); }
.planner-page .pl-edit-tools button:hover:not(:disabled) { background:var(--vz-hover); }
.planner-page .pl-edit-tools svg { width:17px !important;height:17px !important; }
.planner-page .pl-points-scroll { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 6px;scrollbar-width:thin; }
.planner-page .pl-login-note { margin:0 0 10px;padding:9px 11px;border-radius:10px;background:var(--vz-selection);color:var(--vz-copy);font-size:13px;line-height:1.4; }
.planner-page .pl-login-note a { color:var(--vz-blue);font-weight:700; }
.planner-page .pl-empty { margin:2px 6px 8px;padding:12px;border:1px dashed var(--vz-line);border-radius:12px;font-size:13px; }
.planner-page .pl-empty[hidden] { display:none; }
.planner-page .pl-empty ol { display:grid;gap:7px;margin:0 0 12px;padding-left:18px; }
.planner-page .pl-empty b { color:var(--vz-blue); }
.planner-page .pl-empty .pl-secondary { width:100%;height:auto;min-height:40px;padding:8px 12px;line-height:1.2;white-space:normal;text-align:left; }
.planner-page .pl-points { margin:0;padding:0;list-style:none; }
.planner-page .pl-point { position:relative;display:grid;grid-template-columns:14px 26px minmax(0,1fr) auto 26px;align-items:center;gap:7px;min-height:44px;padding:3px 2px;border-radius:10px; }
.planner-page .pl-point:is(:hover,.is-hover) { background:var(--vz-hover); }
.planner-page .pl-point + .pl-point::before { content:"";position:absolute;top:-14px;left:33px;height:26px;border-left:2px dotted var(--vz-line); }
.planner-page .pl-point.is-dragging { opacity:.45; }
.planner-page .pl-point.is-drop-before { box-shadow:inset 0 2px 0 var(--vz-current-fill); }
.planner-page .pl-point.is-drop-after { box-shadow:inset 0 -2px 0 var(--vz-current-fill); }
.planner-page .pl-grip { display:grid;place-items:center;width:14px;height:26px;color:var(--vz-muted);cursor:grab;opacity:.35; }
.planner-page .pl-point:is(:hover,:focus-within) .pl-grip { opacity:1; }
.planner-page .pl-grip svg { width:14px !important;height:14px !important; }
.planner-page .pl-badge { position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;border:2.5px solid var(--pl-route);border-radius:50%;background:var(--vz-card);color:var(--vz-copy);font:800 11px/1 var(--vz-font-body);font-variant-numeric:tabular-nums; }
.planner-page .pl-point.is-start .pl-badge { border-color:var(--pl-start);background:var(--pl-start);color:#fff; }
.planner-page .pl-point.is-finish .pl-badge { border-color:var(--pl-finish);background:var(--pl-finish);color:#fff; }
.planner-page .pl-badge svg { width:12px !important;height:12px !important;stroke-width:2.6 !important; }
.planner-page .pl-point-copy { display:grid;justify-items:start;gap:1px;min-width:0; }
.planner-page :is(.pl-point-name,.pl-leg) { max-width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left; }
.planner-page .pl-point-name strong { display:block;overflow:hidden;font-size:14px;font-weight:600;white-space:nowrap;text-overflow:ellipsis; }
.planner-page :is(.pl-point-copy small,.pl-leg) { display:flex;align-items:center;gap:5px;overflow:hidden;color:var(--vz-muted);font-size:12px;white-space:nowrap; }
.planner-page .pl-leg { margin-left:-4px;padding:1px 4px;border-radius:6px; }
.planner-page .pl-leg:hover { background:var(--vz-hover);color:var(--vz-blue); }
.planner-page .pl-leg span { overflow:hidden;text-overflow:ellipsis; }
.planner-page :is(.pl-point-copy small,.pl-leg) svg { width:13px !important;height:13px !important; }
.planner-page .pl-leg.is-error { color:var(--vz-error);white-space:normal; }
.planner-page .pl-leg-menu { position:fixed;z-index:950;min-width:220px; }
.planner-page .pl-leg-menu p { margin:2px 10px 4px;color:var(--vz-muted);font-size:11px; }
.planner-page .pl-leg-menu button[aria-checked="true"] { background:var(--vz-selection);font-weight:700; }
.planner-page .pl-point-total { font:italic 700 13px/1 var(--vz-font-body);font-variant-numeric:tabular-nums;white-space:nowrap; }
.planner-page .pl-point-remove { display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--vz-muted);opacity:0; }
.planner-page .pl-point:is(:hover,:focus-within) .pl-point-remove { opacity:1; }
.planner-page .pl-point-remove:hover { color:var(--vz-error); }
.planner-page .pl-point-remove svg { width:16px !important;height:16px !important; }
.planner-page .pl-spinner { display:inline-block;flex:none;width:11px;height:11px;border:2px solid var(--vz-line);border-top-color:var(--vz-blue);border-radius:50%;animation:pl-spin .8s linear infinite; }
@keyframes pl-spin { to { transform:rotate(360deg); } }
.planner-page .pl-actions { position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--vz-line); }
.planner-page .pl-points-card.is-folded .pl-actions { display:none; }
.planner-page :is(.pl-primary,.pl-secondary) { display:flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px;border-radius:11px;font:700 14px/1 var(--vz-font-body);white-space:nowrap; }
.planner-page .pl-primary { border:1px solid var(--vz-current-fill);background:var(--vz-current-fill);color:var(--vz-on-accent); }
.planner-page .pl-primary:hover:not(:disabled) { filter:brightness(1.07); }
.planner-page .pl-secondary { border:1px solid var(--vz-line);background:var(--vz-card);color:var(--vz-blue); }
.planner-page .pl-secondary:hover:not(:disabled) { background:var(--vz-hover); }
.planner-page .pl-secondary[aria-pressed="true"] { border-color:var(--pl-edit);background:color-mix(in srgb,var(--pl-edit) 18%,var(--vz-card));color:var(--vz-copy); }
.planner-page .pl-more-button { width:40px;padding:0 !important; }
.planner-page :is(.pl-menu,.pl-context) { position:absolute;z-index:860;display:grid;min-width:240px;padding:6px;border:1px solid var(--vz-line);border-radius:12px;background:var(--vz-card);box-shadow:var(--vz-shadow-popup); }
.planner-page .pl-menu { top:40px;right:0; }
.planner-page :is(.pl-menu,.pl-context)[hidden] { display:none; }
.planner-page :is(.pl-menu,.pl-context) button { display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--vz-copy);font:500 13px/1.2 var(--vz-font-body);text-align:left; }
.planner-page :is(.pl-menu,.pl-context) button:hover { background:var(--vz-hover); }
.planner-page :is(.pl-menu,.pl-context) svg { color:var(--vz-blue); }
.planner-page .pl-context p { margin:2px 10px 6px;color:var(--vz-muted);font-size:11px; }

/* Elevation profile: bottom, between the columns. */
.planner-page .pl-profile { position:fixed;z-index:805;left:calc(var(--pl-menu) + var(--pl-left) + var(--pl-gap) * 2);right:calc(var(--pl-right) + var(--pl-gap) * 2);bottom:var(--pl-gap);height:var(--pl-profile);padding:4px 12px 6px 8px; }
.planner-page .pl-profile[hidden] { display:none; }
.planner-page .pl-profile.is-folded { height:42px; }
.planner-page .pl-profile-head { display:flex;align-items:center;gap:8px;height:32px;color:var(--vz-blue); }
.planner-page .pl-profile-head strong { flex:none;font:700 16px/1 var(--vz-font-heading); }
.planner-page .pl-profile-stats { display:flex;gap:12px;min-width:0;overflow:hidden;color:var(--vz-muted);font-size:12px;white-space:nowrap; }
.planner-page .pl-profile-stats b { color:var(--vz-copy);font-weight:600;font-variant-numeric:tabular-nums; }
.planner-page .pl-chart { position:relative;height:calc(100% - 34px); }
.planner-page .pl-chart-svg { display:block;width:100%;height:100%;overflow:visible; }
.planner-page .pl-chart-grid { stroke:var(--pl-grid);stroke-width:1; }
.planner-page .pl-chart-axis { fill:var(--vz-muted);font:400 11px/1 var(--vz-font-body);font-variant-numeric:tabular-nums; }
.planner-page .pl-chart-line { fill:none;stroke:var(--vz-copy);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;opacity:.85; }
.planner-page .pl-chart-cross { stroke:var(--vz-copy);stroke-width:1;stroke-dasharray:3 3; }
.planner-page .pl-chart-dot { fill:var(--vz-card);stroke:var(--vz-copy);stroke-width:2.5; }
.planner-page .pl-chart-tip { position:absolute;z-index:2;top:-6px;display:grid;gap:3px;padding:6px 9px;border:1px solid var(--vz-line);border-radius:9px;background:var(--vz-card);box-shadow:var(--vz-shadow-popup);font-size:12px;line-height:1.3;white-space:nowrap;pointer-events:none;transform:translateX(-50%); }
.planner-page .pl-chart-tip[hidden] { display:none; }
.planner-page .pl-chart-tip b { font-variant-numeric:tabular-nums; }
.planner-page .pl-chart-tip small,.planner-page .pl-tip small { display:flex;align-items:center;gap:6px;color:var(--vz-muted);font-size:11px; }
.planner-page :is(.pl-chart-tip,.pl-tip) i { display:block;width:9px;height:9px;border-radius:2px; }

/* Right column: toolbar and settings. */
.planner-page .pl-right { position:absolute;z-index:810;top:calc(var(--pl-gap) + 58px);right:var(--pl-gap);bottom:var(--pl-gap);display:flex;flex-direction:column;align-items:stretch;gap:10px;width:var(--pl-right);pointer-events:none; }
.planner-page .pl-right .pl-points-card { flex:1; }

.planner-page .pl-right > * { pointer-events:auto; }
/* Two bars side by side, top right: route editing, then the map and the view. */
.planner-page .pl-toolbar { position:absolute;z-index:815;top:var(--pl-gap);right:var(--pl-gap);display:flex;gap:8px;color:var(--vz-blue); }
.planner-page .pl-tool-group { display:flex;align-items:center;height:46px;overflow:hidden;border:1px solid var(--vz-line);border-radius:11px;background:var(--pl-surface);box-shadow:var(--vz-shadow-popup); }
.planner-page .pl-tool-group--map { width:var(--pl-right); }
.planner-page .pl-tool-group--map button { flex:1;width:auto; }
.planner-page .pl-toolbar button { display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:inherit; }
.planner-page .pl-toolbar button:hover:not(:disabled) { background:var(--vz-hover); }
.planner-page .pl-toolbar .pl-divider { flex:none;width:1px;height:26px;background:var(--vz-line); }
.planner-page .pl-toolbar button[aria-pressed="true"] { background:var(--vz-selection); }
.planner-page .pl-settings-sheet { flex-direction:column;min-height:0; }
.planner-page .pl-settings-sheet > .pl-card-body { min-height:0;overflow-y:auto;overscroll-behavior:contain; }
.planner-page .pl-layers-card h3 { margin:10px 0 6px;color:var(--vz-muted);font:600 11px/1.2 var(--vz-font-body);letter-spacing:.06em;text-transform:uppercase; }
.planner-page .pl-layers-card .pl-card-head { min-height:42px;padding-bottom:2px; }
.planner-page .pl-layers-card .pl-card-body { padding:0 10px 10px; }
/* Base maps as small pictures of the same place; the chosen one is outlined. */
/* Four maps in a row, three rows; the rest are scrolled to. */
.planner-page .pl-bases { --pl-plate:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:var(--pl-plate);gap:6px;max-height:calc(var(--pl-plate) * 3 + 12px + 4px);padding:2px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;scrollbar-width:thin; }
.planner-page .pl-bases button { scroll-snap-align:start; }
.planner-page .pl-bases button { display:grid;gap:3px;min-width:0;padding:3px 3px 4px;border:1px solid var(--vz-line);border-radius:10px;background:var(--vz-card);color:var(--vz-copy);font:600 11px/1.15 var(--vz-font-body);text-align:center; }
.planner-page .pl-bases button:hover { border-color:color-mix(in srgb,var(--vz-current-fill) 50%,var(--vz-line)); }
.planner-page .pl-bases button[aria-checked="true"] { border-color:var(--vz-current-fill);box-shadow:0 0 0 1.5px var(--vz-current-fill);color:var(--vz-current); }
.planner-page .pl-bases button > span:nth-child(2) { display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.planner-page .pl-thumb { position:relative;display:block;height:40px;overflow:hidden;border-radius:7px;background:var(--vz-card-soft); }
.planner-page .pl-thumb img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.planner-page.theme-dark .pl-bases [data-pl-base="map"] img,.planner-page.theme-dark .pl-overlay .pl-thumb img:first-child { filter:invert(.9) hue-rotate(180deg) saturate(.8) brightness(1.1) contrast(.76); }
.planner-page .pl-thumb svg { position:absolute;inset:0;width:100% !important;height:100% !important;fill:none;stroke-width:3.2 !important;stroke-linecap:round; }
.planner-page .pl-thumb--club circle { fill:#fff;stroke:var(--pl-checkpoint);stroke-width:2.6 !important; }
/* Layers over the map in two columns; group names across both. */
.planner-page .pl-overlays { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px; }
.planner-page .pl-overlays .pl-overlay-group { grid-column:1 / -1; }
.planner-page .pl-overlays .pl-overlay b { display:block;line-height:1.2; }
.planner-page .pl-event-form { display:grid;gap:10px; }
.planner-page .pl-event-form label { display:grid;gap:4px;color:var(--vz-muted);font:600 12px/1.2 var(--vz-font-body); }
.planner-page .pl-event-form :is(input:not([type="checkbox"]),select,textarea) { min-height:36px;padding:6px 10px;border:1px solid var(--vz-line);border-radius:9px;background:var(--vz-card);color:var(--vz-copy);font:400 14px/1.4 var(--vz-font-body); }
.planner-page .pl-event-form textarea { resize:vertical; }
.planner-page .pl-event-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.planner-page .pl-event-form .pl-event-check { display:flex;align-items:center;gap:8px;color:var(--vz-copy);font-weight:500; }
.planner-page .pl-event-error { margin:0;color:#b42318;font-size:13px; }
.planner-page .pl-event-actions { display:flex;justify-content:flex-end; }
.planner-page .pl-event-form h3 { margin:6px 0 0;font:700 14px/1.2 var(--vz-font-body); }
.planner-page .pl-event-list { display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:13px; }
.planner-page .pl-event-list li { padding:7px 10px;border-radius:9px;background:var(--vz-card-soft); }
.planner-page .pl-event-list small { display:block;margin-top:2px;color:var(--vz-muted); }
.planner-page .pl-event-list .is-published b { color:#1b8a4b; }
.planner-page .pl-event-list .is-declined b { color:#b42318; }
.planner-page .pl-catalog-tabs { display:flex;gap:4px;margin:0 18px 8px; }
.planner-page .pl-role-note { margin:0 0 10px;padding:8px 10px;border-radius:10px;background:var(--vz-card-soft);color:var(--vz-copy);font-size:12.5px;line-height:1.45; }
.planner-page .pl-overlay { display:grid;grid-template-columns:auto 52px minmax(0,1fr);align-items:center;gap:8px;padding:4px 6px 4px 4px;border:1px solid transparent;border-radius:10px;cursor:pointer; }
.planner-page .pl-overlay:hover { background:var(--vz-hover); }
.planner-page .pl-overlay:has(input:checked) { border-color:var(--vz-line);background:var(--vz-card-soft); }
.planner-page .pl-overlay input { width:16px;height:16px;margin:0;accent-color:var(--vz-current-fill); }
.planner-page .pl-overlay .pl-thumb { height:34px; }
.planner-page .pl-overlay b { display:block;font-size:12.5px;font-weight:600;line-height:1.2; }
.planner-page .pl-overlay small { display:block;color:var(--vz-muted);font-size:11px;line-height:1.25; }
.planner-page .pl-overlay small.is-hint { color:var(--vz-warning); }
.planner-page .pl-bikes { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px;border-radius:11px;background:var(--vz-card-soft); }
.planner-page .pl-bikes button { display:grid;justify-items:center;gap:2px;min-width:0;padding:6px 2px 5px;border:0;border-radius:9px;background:transparent;color:var(--vz-muted);font:600 11px/1.1 var(--vz-font-body); }
.planner-page .pl-bikes button svg { width:26px !important;height:26px !important; }
.planner-page .pl-bikes button[aria-checked="true"],.planner-page .pl-segmented button[aria-checked="true"] { background:var(--vz-card);box-shadow:0 1px 3px color-mix(in srgb,#0b223a 18%,transparent);color:var(--vz-current); }
.planner-page .pl-hint { margin:6px 0 0;color:var(--vz-muted);font-size:12px;line-height:1.35; }
.planner-page .pl-segmented { display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--vz-card-soft); }
.planner-page .pl-segmented button { display:flex;flex:1;align-items:center;justify-content:center;gap:5px;min-width:0;height:30px;padding:0 6px;border:0;border-radius:7px;background:transparent;color:var(--vz-muted);font:600 12px/1 var(--vz-font-body);white-space:nowrap; }
.planner-page .pl-segmented svg { width:16px !important;height:16px !important; }
.planner-page .pl-track-legend { display:grid;gap:6px;margin:8px 0 0;padding:0;list-style:none;font-size:12px; }
.planner-page .pl-track-legend li { display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:8px;align-items:start; }
.planner-page .pl-track-legend svg { width:24px !important;height:8px !important;margin-top:5px; }
.planner-page .pl-track-legend b { font-weight:600; }
.planner-page .pl-track-legend small { display:block;color:var(--vz-muted);font-size:11.5px;line-height:1.3; }
.planner-page .pl-check { display:flex;align-items:flex-start;gap:10px;padding:5px 0;cursor:pointer; }
.planner-page .pl-check input { flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--vz-current-fill); }
.planner-page .pl-check span { display:grid;gap:1px; }
.planner-page .pl-check b { font-size:13px;font-weight:600; }
.planner-page .pl-check small { color:var(--vz-muted);font-size:12px;line-height:1.3; }
.planner-page .pl-check small.is-hint { color:var(--vz-warning); }
.planner-page .pl-surface-legend { display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;margin:8px 4px 0;padding:0;list-style:none;font-size:11.5px; }
.planner-page .pl-surface-legend[hidden] { display:none; }
.planner-page .pl-surface-legend li { display:flex;align-items:center;gap:6px; }
.planner-page .pl-surface-legend svg { width:24px !important;height:8px !important; }
.planner-page .pl-admin { margin-top:14px;padding-top:2px;border-top:1px solid var(--vz-line); }
.planner-page .pl-admin .pl-secondary { width:100%; }
.planner-page .pl-admin-roads { display:grid;gap:6px; }
.planner-page .pl-club-edit { margin:2px 6px 10px;padding:10px 12px;border:1px solid var(--pl-edit);border-radius:12px;background:color-mix(in srgb,var(--pl-edit) 10%,var(--vz-card)); }
.planner-page .pl-club-edit[hidden] { display:none; }
.planner-page .pl-club-edit-head { display:flex;align-items:flex-start;gap:8px;margin-bottom:8px; }
.planner-page .pl-club-edit-title { display:grid;flex:1;gap:1px;margin:0;font-size:15px;line-height:1.2; }
.planner-page .pl-club-edit-title small { color:var(--vz-muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase; }
.planner-page .pl-club-edit-state { flex:none;padding:3px 8px;border-radius:99px;background:color-mix(in srgb,var(--vz-success) 14%,var(--vz-card));color:var(--vz-success);font:700 11px/1.3 var(--vz-font-body);white-space:nowrap; }
.planner-page .pl-club-edit-state.is-dirty { background:color-mix(in srgb,var(--vz-warning) 16%,var(--vz-card));color:var(--vz-warning); }
.planner-page .pl-club-edit-actions { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px; }
.planner-page .pl-club-edit-actions .pl-primary { grid-column:1 / -1;height:36px; }
.planner-page .pl-club-edit-actions > * { min-width:0; }
.planner-page .pl-club-edit-actions .pl-secondary { height:auto;min-height:32px;padding:5px 8px;font-size:12px;line-height:1.15;white-space:normal;text-align:center; }
.planner-page .pl-club-edit-actions .pl-club-leave { color:var(--vz-error); }
.planner-page .pl-club-edit [hidden] { display:none !important; }
.planner-page .pl-kp-summary { display:grid;gap:6px;width:100%;padding:8px;border:1px solid var(--vz-line);border-radius:10px;background:var(--vz-card);color:var(--vz-copy);text-align:left; }
.planner-page .pl-kp-summary:hover:not(:disabled) { border-color:var(--pl-checkpoint);background:var(--vz-hover); }
.planner-page .pl-kp-strip { display:flex;flex-wrap:wrap;gap:3px; }
.planner-page .pl-kp-strip .pl-kp { min-width:0;height:18px;padding:0 4px;font-size:10px; }
.planner-page .pl-kp-summary-text { color:var(--vz-blue);font:700 12px/1.3 var(--vz-font-body); }
.planner-page .pl-km-check { margin-top:8px;padding:6px 8px;border-radius:8px;background:color-mix(in srgb,var(--vz-warning) 12%,var(--vz-card));font-size:12px; }
.planner-page .pl-kp-open { display:flex;align-items:center;gap:7px;min-width:0;height:34px;padding:0 6px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:left; }
.planner-page .pl-kp-open:hover { background:var(--vz-hover); }
.planner-page .pl-kp-name { flex:1;min-width:0;overflow:hidden;font-size:13px;font-weight:600;white-space:nowrap;text-overflow:ellipsis; }
.planner-page .pl-kp-name.is-empty { color:var(--vz-muted);font-style:italic;font-weight:500; }
.planner-page .pl-kp-flag { flex:none;padding:1px 5px;border-radius:5px;background:var(--vz-card-soft);color:var(--vz-muted);font-size:10px; }
.planner-page .pl-kp-flag.is-missing { color:var(--vz-warning); }
.planner-page .pl-kp.is-active { box-shadow:0 0 0 3px color-mix(in srgb,var(--pl-checkpoint) 35%,transparent),0 1px 4px #0b223a55;transform:scale(1.12); }
.planner-page .pl-kp-page { display:grid;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--pl-edit) 45%,var(--vz-line)); }
.planner-page .pl-kp-page-head { display:flex;align-items:center;justify-content:space-between; }
.planner-page :is(.pl-kp-back,.pl-link) { padding:0;border:0;background:none;color:var(--vz-blue);font:700 13px/1.2 var(--vz-font-body); }
.planner-page .pl-field { display:grid;gap:4px; }
.planner-page .pl-field > span { color:var(--vz-muted);font:600 11px/1.2 var(--vz-font-body);letter-spacing:.05em;text-transform:uppercase; }
.planner-page .pl-field :is(input,textarea) { width:100%;padding:7px 9px;border:1px solid var(--vz-line);border-radius:9px;background:var(--vz-card);color:var(--vz-copy);font:500 13px/1.35 var(--vz-font-body); }
.planner-page .pl-field textarea { resize:vertical; }
.planner-page .pl-kp-photo { display:grid;gap:6px; }
.planner-page .pl-kp-photo img { width:100%;max-height:170px;object-fit:cover;border-radius:10px; }
.planner-page .pl-kp-photo p { margin:0;color:var(--vz-muted);font-size:12px; }
.planner-page .pl-kp-photo > div { display:flex;gap:6px; }
.planner-page .pl-kp-photo .pl-secondary { height:32px;padding:0 10px;font-size:12px;cursor:pointer; }
.planner-page .pl-kp-place { margin:0;font-size:12px;font-variant-numeric:tabular-nums; }
.planner-page .pl-kp-page-foot { display:flex;align-items:center;justify-content:space-between;gap:6px; }
.planner-page .pl-kp-page-foot .pl-secondary { height:30px;padding:0 9px;font-size:12px; }
.planner-page .pl-danger { display:flex;align-items:center;gap:5px;height:30px;padding:0 9px;border:1px solid color-mix(in srgb,var(--vz-error) 40%,var(--vz-line));border-radius:9px;background:var(--vz-card);color:var(--vz-error);font:600 12px/1 var(--vz-font-body); }
.planner-page .pl-danger svg { width:15px !important;height:15px !important; }
.planner-page .pl-poi-show { display:grid;place-items:center;width:24px;height:28px;padding:0;border:0;background:none; }
.planner-page .pl-club-edit-row { display:flex;align-items:center;gap:6px; }
.planner-page .pl-club-edit-row label { display:flex;flex:1;align-items:center;gap:6px;min-width:0;color:var(--vz-muted);font-size:12px;white-space:nowrap; }
.planner-page .pl-club-edit-row input { width:64px;height:32px;padding:0 6px;border:1px solid var(--vz-line);border-radius:8px;background:var(--vz-card);color:var(--vz-copy);font:600 13px/1 var(--vz-font-body); }
.planner-page .pl-club-edit-row .pl-primary { flex:none;height:34px;padding:0 12px;font-size:13px; }
.planner-page .pl-club-edit h3 { margin:10px 0 6px;color:var(--vz-muted);font:600 11px/1.2 var(--vz-font-body);letter-spacing:.06em;text-transform:uppercase; }
.planner-page .pl-kp-list { display:grid;gap:4px;margin:0;padding:0;list-style:none; }
.planner-page .pl-kp-list li { display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:2px; }
.planner-page .pl-poi-list li { grid-template-columns:auto minmax(0,1fr) auto;gap:4px; }
.planner-page .pl-kp-note { font-weight:700; }
.planner-page .pl-kp-note[aria-expanded="true"] { background:var(--vz-selection); }
.planner-page .pl-kp-list textarea { grid-column:2 / -1;order:9;width:100%;min-height:60px;padding:6px 8px;border:1px solid var(--vz-line);border-radius:8px;background:var(--vz-card);color:var(--vz-copy);font:400 12.5px/1.35 var(--vz-font-body);resize:vertical; }
.planner-page .pl-kp-list li > small { grid-column:2 / -1;order:10;color:var(--vz-muted);font-size:11px; }
.planner-page .pl-poi-mark { display:block;width:14px;height:14px;border:2.5px solid #fff;border-radius:3px;background:var(--pl-route);box-shadow:0 1px 4px #0b223a66;transform:rotate(45deg); }
.planner-page .pl-kp-list input { min-width:0;height:30px;padding:0 8px;border:1px solid var(--vz-line);border-radius:8px;background:var(--vz-card);color:var(--vz-copy);font:500 13px/1 var(--vz-font-body); }
.planner-page .pl-kp-list .pl-icon-button { width:28px;height:28px; }
.planner-page .pl-kp { display:inline-grid;place-items:center;min-width:36px;height:20px;padding:0 5px;border:2px solid #fff;border-radius:10px;background:var(--pl-checkpoint);box-shadow:0 1px 4px #0b223a55;color:#fff;font:800 11px/1 var(--vz-font-body);white-space:nowrap; }
.planner-page .pl-admin-roads select { height:32px;padding:0 8px;border:1px solid var(--vz-line);border-radius:9px;background:var(--vz-card);color:var(--vz-copy);font:600 13px/1 var(--vz-font-body); }
.planner-page .pl-legend-wide { grid-column:1 / -1; }
.planner-page .pl-ban-sample { width:16px;height:0;border-top:3px dashed var(--pl-banned); }

/* Administrators: the road tools, top, against the constructor. */
.planner-page .pl-admin-bar { position:absolute;z-index:815;top:var(--pl-gap);left:calc(var(--pl-left) + var(--pl-gap) * 2);display:flex;align-items:center;gap:6px;height:46px;padding:0 5px;border:1px solid var(--vz-line);border-radius:11px;background:var(--pl-surface);box-shadow:var(--vz-shadow-popup); }
.planner-page .pl-admin-toggle { display:flex;align-items:center;gap:7px;height:36px;padding:0 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--vz-blue);font:700 13px/1 var(--vz-font-body);white-space:nowrap; }
.planner-page .pl-admin-toggle:hover { background:var(--vz-hover); }
.planner-page .pl-admin-toggle[aria-pressed="true"] { border-color:#ff2d95;background:color-mix(in srgb,#ff2d95 12%,var(--vz-card));color:var(--vz-copy); }
.planner-page .pl-admin-toggle svg { width:18px !important;height:18px !important; }
.planner-page .pl-admin-tool { display:flex;align-items:center;gap:4px;padding:2px;border:1.5px solid var(--pl-admin-line);border-radius:11px;transition:border-color .15s,background .15s; }
.planner-page .pl-admin-tool.is-on { border-color:#ff2d95;background:color-mix(in srgb,#ff2d95 7%,transparent); }
.planner-page .pl-admin-tool .pl-admin-toggle[aria-pressed="true"] { border-color:transparent;background:transparent; }
.planner-page .pl-admin-scope button:disabled { opacity:.45;cursor:not-allowed; }
.planner-page .pl-admin-link { display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;border:1px solid var(--pl-admin-line);border-radius:9px;background:color-mix(in srgb,var(--pl-admin-bg) 55%,var(--vz-card));color:var(--pl-admin-ink);font:600 12.5px/1 var(--vz-font-body);text-decoration:none;white-space:nowrap; }
.planner-page .pl-admin-link:hover { background:var(--pl-admin-soft); }
.planner-page .pl-admin-link svg { width:16px !important;height:16px !important; }
.planner-page .pl-admin-link b { min-width:18px;padding:3px 6px;border-radius:99px;background:var(--pl-admin-soft);color:var(--vz-copy);font-size:11px;text-align:center; }
.planner-page .pl-admin-link b:empty { display:none; }
.planner-page .pl-admin-scope { display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--vz-card-soft); }
.planner-page .pl-admin-scope button { height:30px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--vz-muted);font:600 12px/1 var(--vz-font-body);white-space:nowrap; }
.planner-page .pl-admin-scope button[aria-checked="true"] { background:var(--vz-card);box-shadow:0 1px 3px color-mix(in srgb,#0b223a 18%,transparent);color:var(--vz-current); }

/* Administrators: the selected roads and what to do with them. */
.planner-page .pl-road-bar { position:absolute;z-index:858;left:50%;bottom:calc(var(--pl-profile) + var(--pl-gap) * 2);display:grid;gap:6px;width:min(560px,calc(100% - var(--pl-left) - var(--pl-right) - var(--pl-gap) * 4));padding:8px 10px;border:1.5px solid #ff2d95;border-radius:13px;background:var(--vz-card);box-shadow:var(--vz-shadow-popup);transform:translateX(calc(-50% + (var(--pl-left) - var(--pl-right)) / 2)); }
.planner-page .pl-road-bar[hidden] { display:none; }
.planner-page .pl-road-bar p { margin:0;overflow:hidden;color:var(--vz-muted);font-size:12px;white-space:nowrap;text-overflow:ellipsis; }
.planner-page .pl-road-bar p b { color:var(--vz-copy); }
.planner-page .pl-road-bar p a { color:var(--vz-blue); }
.planner-page .pl-road-bar div { display:flex;flex-wrap:wrap;gap:4px; }
.planner-page .pl-road-bar button { display:flex;align-items:center;gap:5px;height:30px;padding:0 9px;border:1px solid var(--vz-line);border-radius:8px;background:var(--vz-card);color:var(--vz-copy);font:600 12px/1 var(--vz-font-body); }
.planner-page .pl-road-bar button:hover { background:var(--vz-hover); }
.planner-page .pl-road-bar button[aria-pressed="true"] { border-color:var(--vz-current-fill);background:var(--vz-selection); }
.planner-page .pl-road-bar button i { width:12px;height:12px;border-radius:3px; }
.planner-page .pl-road-bar button svg { width:15px !important;height:15px !important;color:var(--vz-blue); }

.planner-page.pl-sparse-points .leaflet-marker-pane .pl-wp:not(.is-start):not(.is-finish) { display:none; }
/* Checkpoints on the elevation profile. */
.planner-page .pl-chart-kp line { stroke:var(--pl-checkpoint);stroke-width:1.2;stroke-dasharray:3 3; }
.planner-page .pl-chart-kp text { fill:var(--pl-checkpoint);font:800 10px/1 var(--vz-font-body); }

/* ── The checkpoint editor: a page over the planner, like the route page ── */
.planner-page .pl-kp-editor { position:fixed;z-index:880;inset:0 0 0 var(--pl-menu);display:flex;flex-direction:column;background:var(--vz-page);color:var(--vz-copy); }
.planner-page .pl-kp-editor[hidden] { display:none; }
.planner-page .pl-kpe-head { display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--vz-line);background:var(--vz-card); }
.planner-page .pl-kpe-back { flex:none;padding:8px 12px;border:1px solid var(--vz-line);border-radius:10px;background:var(--vz-card);color:var(--vz-blue);font:700 13px/1 var(--vz-font-body); }
.planner-page .pl-kpe-head h2 { flex:1;min-width:0;margin:0;overflow:hidden;color:var(--vz-blue);font:700 24px/1.2 var(--vz-font-heading);white-space:nowrap;text-overflow:ellipsis; }
.planner-page .pl-kpe-head h2 .pl-kp { vertical-align:4px;margin-right:6px; }
.planner-page .pl-kpe-head h2 small { color:var(--vz-muted);font:500 13px/1 var(--vz-font-body); }
.planner-page .pl-kpe-nav { display:flex;gap:6px; }
.planner-page .pl-kpe-nav .pl-secondary { height:34px;padding:0 10px;font-size:13px; }
.planner-page .pl-kpe-head .pl-danger { height:34px; }
.planner-page .pl-kp-editor :is(.pl-kpe-head,.pl-kpe-photo-actions) svg { display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.planner-page .pl-kpe-body { flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);gap:18px;padding:18px;overflow:auto; }
.planner-page .pl-kpe-photo { position:relative;display:grid;align-content:start;gap:10px; }
.planner-page .pl-kpe-photo img { width:100%;max-height:min(62vh,640px);object-fit:cover;border-radius:16px;box-shadow:var(--vz-shadow-popup); }
.planner-page .pl-kpe-nophoto { display:grid;place-items:center;height:min(48vh,420px);border:2px dashed var(--vz-line);border-radius:16px;color:var(--vz-muted);font:600 16px/1.4 var(--vz-font-body);text-align:center; }
.planner-page .pl-kpe-nophoto small { font-weight:400;font-size:12px; }
.planner-page .pl-kpe-photo-actions { display:flex;gap:8px; }
.planner-page .pl-kpe-photo-actions :is(.pl-primary,.pl-secondary) { height:36px;font-size:13px;cursor:pointer; }
.planner-page .pl-kpe-fields { display:grid;align-content:start;gap:14px; }
.planner-page .pl-kpe-title { font:700 20px/1.25 var(--vz-font-heading) !important;color:var(--vz-blue) !important; }
.planner-page .pl-kpe-description textarea { min-height:220px;font-size:14px;line-height:1.5; }
.planner-page .pl-kpe-map { height:240px;border:1px solid var(--vz-line);border-radius:12px;overflow:hidden; }
.planner-page .pl-kpe-coords { display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin-top:6px; }
.planner-page .pl-kpe-coords label { display:grid;gap:3px;color:var(--vz-muted);font-size:11px; }
.planner-page .pl-kpe-coords input { width:120px;height:32px;padding:0 8px;border:1px solid var(--vz-line);border-radius:8px;background:var(--vz-card);color:var(--vz-copy);font:500 13px/1 var(--vz-font-body);font-variant-numeric:tabular-nums; }
.planner-page .pl-kpe-coords .pl-secondary { height:32px;padding:0 10px;font-size:12px; }
.planner-page .pl-kpe-strip { display:flex;gap:10px;padding:12px 18px 14px;overflow-x:auto;border-top:1px solid var(--vz-line);background:var(--vz-card);scrollbar-width:thin; }
.planner-page .pl-kpe-card { position:relative;flex:none;display:grid;grid-template-rows:74px auto auto;gap:3px;width:150px;padding:6px;border:2px solid var(--vz-line);border-radius:12px;background:var(--vz-card);color:var(--vz-copy);text-align:left; }
.planner-page .pl-kpe-card:hover { border-color:color-mix(in srgb,var(--pl-checkpoint) 50%,var(--vz-line)); }
.planner-page .pl-kpe-card.is-current { border-color:var(--pl-edit);box-shadow:0 0 0 2px color-mix(in srgb,var(--pl-edit) 40%,transparent); }
.planner-page .pl-kpe-card img,.planner-page .pl-kpe-card-blank { width:100%;height:74px;object-fit:cover;border-radius:8px;background:var(--vz-card-soft); }
.planner-page .pl-kpe-card .pl-kp { position:absolute;top:10px;left:10px; }
.planner-page .pl-kpe-card b { overflow:hidden;font-size:12px;white-space:nowrap;text-overflow:ellipsis; }
.planner-page .pl-kpe-card small { color:var(--vz-muted);font-size:11px; }
.planner-page .pl-kpe-add { place-items:center;grid-template-rows:74px auto auto;border-style:dashed;color:var(--vz-blue); }
.planner-page .pl-kpe-add > span { display:grid;place-items:center;width:100%;height:74px;font:300 40px/1 var(--vz-font-body); }
@media (max-width:900px) {
  .planner-page .pl-kpe-body { grid-template-columns:1fr; }
  .planner-page .pl-kpe-head { flex-wrap:wrap; }
  .planner-page .pl-kpe-head h2 { order:3;flex-basis:100%;font-size:19px; }
}

/* Swatches. */
.planner-page [data-surface="paved"] { background:var(--pl-paved); }
.planner-page [data-surface="gravel"] { background:var(--pl-gravel); }
.planner-page [data-surface="dirt"] { background:var(--pl-dirt); }
.planner-page [data-surface="unknown"] { background:var(--pl-unknown); }
.planner-page [data-surface="heavy"] { background:var(--pl-heavy); }
.planner-page [data-way="cycleway"] { background:var(--pl-way-cycleway); }
.planner-page [data-way="major"] { background:var(--pl-way-major); }
.planner-page [data-way="track"] { background:var(--pl-way-track); }
.planner-page [data-way="local"] { background:var(--pl-way-local); }
.planner-page [data-way="path"] { background:var(--pl-way-path); }
.planner-page [data-way="street"] { background:var(--pl-way-street); }
.planner-page [data-way="other"] { background:var(--pl-way-other); }

/* Panels folded with the toolbar button: only the headers stay. */
.planner-page.pl-collapsed :is(.pl-left,.pl-right) [data-pl-fold-body],.planner-page.pl-collapsed .pl-actions { display:none !important; }
.planner-page.pl-collapsed .pl-points-card { flex:none;min-height:0;margin-top:auto; }
.planner-page.pl-collapsed .pl-profile { height:42px; }

.planner-page .pl-toast { position:absolute;z-index:870;top:calc(var(--pl-gap) + 58px);left:calc(50% + (var(--pl-left) - var(--pl-right)) / 2);max-width:min(520px,calc(100% - 32px));padding:9px 14px;border:1px solid var(--vz-line);border-radius:10px;background:var(--vz-card);box-shadow:var(--vz-shadow-popup);font-size:13px;transform:translateX(-50%); }
.planner-page .pl-toast[hidden] { display:none; }
.planner-page .pl-toast.is-error { border-color:color-mix(in srgb,var(--vz-error) 55%,var(--vz-line));color:var(--vz-error); }
.planner-page .pl-toast button { margin-left:10px;padding:0;border:0;background:none;color:var(--vz-blue);font:700 13px/1 var(--vz-font-body); }
.planner-page .pl-unavailable { position:absolute;z-index:870;top:50%;left:50%;max-width:420px;padding:16px 18px;border:1px solid var(--vz-line);border-radius:var(--pl-radius);background:var(--vz-card);box-shadow:var(--vz-shadow-popup);color:var(--vz-error);transform:translate(-50%,-50%); }

/* ── Map marks ───────────────────────────────────────────────────────── */
.planner-page .pl-marker { background:none;border:0; }
.planner-page .pl-wp { display:grid;place-items:center;width:26px;height:26px;border:3px solid var(--pl-route);border-radius:50%;background:#fff;box-shadow:0 1px 5px #0b223a88;color:#1d2a3a;font:800 11px/1 var(--vz-font-body);font-variant-numeric:tabular-nums;cursor:grab; }
.planner-page .pl-wp.is-start { border-color:#fff;background:var(--pl-start);color:#fff; }
.planner-page .pl-wp.is-finish { border-color:#fff;background:var(--pl-finish);color:#fff; }
.planner-page .pl-wp svg { width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round; }
.planner-page .pl-wp.is-hover { box-shadow:0 0 0 5px color-mix(in srgb,var(--pl-route) 35%,transparent),0 1px 5px #0b223a88; }
.planner-page .pl-ghost { display:block;width:14px;height:14px;border:3px solid var(--pl-route);border-radius:50%;background:#fff;box-shadow:0 1px 3px #0b223a80;cursor:grab; }
.planner-page .pl-cursor { display:block;width:16px;height:16px;border:3px solid #fff;border-radius:50%;background:var(--vz-copy);box-shadow:0 1px 4px #0b223a99; }
.planner-page .pl-km { display:grid;place-items:center;min-width:24px;height:18px;padding:0 4px;border:1.5px solid #fff;border-radius:9px;background:#1d2a3a;color:#fff;font:700 10px/1 var(--vz-font-body);font-variant-numeric:tabular-nums;box-shadow:0 1px 3px #0b223a66; }
.planner-page .pl-tip { padding:5px 9px;border:1px solid var(--vz-line);border-radius:8px;background:var(--vz-card);box-shadow:var(--vz-shadow-popup);color:var(--vz-copy);font:500 12px/1.35 var(--vz-font-body); }
.planner-page .pl-tip::before { display:none; }
.planner-page .pl-popup-wrap .leaflet-popup-content-wrapper { padding:0;overflow:hidden;border:1px solid var(--vz-line);border-radius:13px;background:var(--vz-card);color:var(--vz-copy);box-shadow:var(--vz-shadow-popup); }
.planner-page .pl-popup-wrap .leaflet-popup-tip { background:var(--vz-card); }
.planner-page .pl-popup-wrap .leaflet-popup-content { width:250px !important;margin:0;font:400 13px/1.4 var(--vz-font-body); }
.planner-page .pl-popup-wrap .leaflet-popup-close-button { top:6px;right:6px;width:26px;height:26px;color:var(--vz-muted);font:400 20px/26px Arial,sans-serif; }
.planner-page .pl-popup { display:grid;gap:2px;padding:10px 8px 8px; }
.planner-page .pl-popup h3 { margin:0 26px 2px 8px;color:var(--vz-blue);font:700 16px/1.2 var(--vz-font-heading); }
.planner-page .pl-popup p { margin:0 8px 6px;color:var(--vz-muted);font-size:12px; }
.planner-page .pl-popup p a { color:var(--vz-blue); }
.planner-page .pl-popup button { display:flex;align-items:center;gap:9px;width:100%;min-height:34px;padding:5px 8px;border:0;border-radius:8px;background:transparent;color:var(--vz-copy);font:500 13px/1.2 var(--vz-font-body);text-align:left; }
.planner-page .pl-popup button:hover { background:var(--vz-hover); }
.planner-page .pl-popup button svg { width:18px;height:18px;color:var(--vz-blue); }
.planner-page .pl-popup button i { flex:none;width:14px;height:14px;border-radius:4px; }
.planner-page .pl-popup button[aria-pressed="true"] { background:var(--vz-selection);font-weight:700; }
.planner-page .pl-popup button.is-danger,.planner-page .pl-popup button.is-danger svg { color:var(--vz-error); }
.planner-page .pl-popup input { width:calc(100% - 16px);height:36px;margin:0 8px 6px;padding:0 9px;border:1px solid var(--vz-line);border-radius:8px;background:var(--vz-card);color:var(--vz-copy);font:inherit; }

/* ── Dialogs ─────────────────────────────────────────────────────────── */
.planner-page .pl-dialog { width:min(480px,calc(100vw - 24px));max-height:min(640px,calc(100dvh - 48px));padding:0;overflow:hidden;border:1px solid var(--vz-line);border-radius:15px;background:var(--vz-card);box-shadow:var(--vz-shadow-popup);color:var(--vz-copy); }
.planner-page .pl-dialog[open] { display:flex;flex-direction:column; }
.planner-page .pl-dialog::backdrop { background:#020a1499; }
.planner-page .pl-dialog header { display:flex;align-items:center;justify-content:space-between;padding:14px 12px 10px 18px;border-bottom:1px solid var(--vz-line); }
.planner-page .pl-dialog h2 { margin:0;color:var(--vz-blue);font:700 22px/1.2 var(--vz-font-heading); }
.planner-page .pl-dialog header button { display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--vz-muted); }
.planner-page .pl-dialog-search { padding:10px 12px 4px; }
.planner-page .pl-dialog-body { flex:1;min-height:80px;overflow-y:auto;padding:6px 10px; }
.planner-page .pl-dialog-body > p { margin:12px 8px;color:var(--vz-muted); }
.planner-page .pl-dialog-body > p a { color:var(--vz-blue);font-weight:700; }
.planner-page .pl-plan-list { margin:0;padding:0;list-style:none; }
.planner-page .pl-plan { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;border-bottom:1px solid var(--vz-line); }
.planner-page .pl-plan:last-child { border-bottom:0; }
.planner-page .pl-plan-open { display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;row-gap:2px;min-width:0;padding:9px 8px;border:0;border-radius:9px;background:transparent;color:inherit;font:inherit;text-align:left; }
.planner-page .pl-plan-open:hover { background:var(--vz-hover); }
.planner-page .pl-plan-open > i { grid-row:span 2;width:12px;height:28px;border-radius:4px; }
.planner-page .pl-plan-open strong { overflow:hidden;color:var(--vz-blue);font-size:14px;white-space:nowrap;text-overflow:ellipsis; }
.planner-page .pl-plan-open small { color:var(--vz-muted);font-size:12px; }
.planner-page .pl-plan.is-current .pl-plan-open strong::after { content:" · открыт";color:var(--vz-current);font-weight:600; }
.planner-page .pl-plan-delete { display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--vz-muted); }
.planner-page .pl-plan-delete:hover,.planner-page .pl-plan-delete[data-confirm] { background:var(--vz-hover);color:var(--vz-error); }
.planner-page .pl-plan-copy { flex:none;height:30px;padding:0 10px;border:1px solid var(--vz-line);border-radius:8px;background:var(--vz-card);color:var(--vz-blue);font:600 12px/1 var(--vz-font-body); }
.planner-page .pl-plan-copy:hover { background:var(--vz-hover); }
.planner-page .pl-plan-edit:hover { color:var(--vz-blue); }
.planner-page .pl-dialog footer { padding:10px 12px 12px;border-top:1px solid var(--vz-line); }
.planner-page .pl-dialog footer p { margin:0;color:var(--vz-muted);font-size:12px; }
.planner-page .pl-dialog footer button { display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:40px;border:1px solid var(--vz-line);border-radius:11px;background:var(--vz-card);color:var(--vz-blue);font:600 13px/1 var(--vz-font-body); }

@media (min-width:1280px) { html.planner-page { --pl-menu:var(--route-menu-width,92px); } }
@media (min-width:768px) and (max-width:1279px) {
  html.planner-page { --pl-left:336px;--pl-right:280px; }
  .planner-page .mock-site-rail { display:none; }
  .planner-page .pl-icon-button.pl-menu-toggle { display:grid; }
  .planner-page .pl-card-head h1 { font-size:19px; }
  .planner-page .pl-stats dd { font-size:12.5px; }
  .planner-page .pl-stats { padding:6px 8px; }
}
@media (max-height:720px) and (min-width:768px) { html.planner-page { --pl-profile:118px; } }

/* ── Phones: header, round map buttons, bottom sheet, bottom navigation ── */
@media (max-width:767px) {
  html.planner-page { --pl-header:calc(56px + env(safe-area-inset-top,0px));--pl-nav:calc(64px + env(safe-area-inset-bottom,0px));--pl-sheet:186px; }
  html.planner-page.pl-sheet-open { --pl-sheet:calc(100dvh - var(--pl-header) - var(--pl-nav) - 40px); }
  .planner-page .mock-site-rail,.planner-page .pl-toolbar,.planner-page .pl-card-head .pl-fold,.planner-page .pl-main-card h1,.planner-page .pl-main-card .pl-menu-toggle { display:none !important; }
  .planner-page .pl-main-card .pl-card-head { justify-content:flex-end;min-height:38px;padding:0; }
  .planner-page .pl-road-bar { left:8px;right:8px;bottom:calc(var(--pl-nav) + var(--pl-sheet) + 8px);width:auto;transform:none; }
  .planner-page .pl-admin-bar { top:calc(var(--pl-header) + 64px);left:12px;height:42px; }
  .planner-page .pl-admin-toggle span { display:none; }
  .planner-page .pl-kp-editor { inset:var(--pl-header) 0 var(--pl-nav) 0;z-index:895; }
  .planner-page .pl-kpe-body { padding:12px; }
  .planner-page .pl-map { top:var(--pl-header);bottom:calc(var(--pl-nav) + var(--pl-sheet) - 16px); }
  .planner-page .pl-mobile-header { position:fixed;z-index:880;inset:0 0 auto;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:4px;height:var(--pl-header);padding:env(safe-area-inset-top,0px) 8px 0;background:var(--pl-surface);box-shadow:0 1px 4px #08152c2b;color:var(--vz-blue); }
  .planner-page .pl-mobile-header strong { overflow:hidden;text-align:center;white-space:nowrap;font:700 20px/1.1 var(--vz-font-heading); }
  .planner-page .pl-mobile-header .pl-icon-button { width:44px;height:44px; }
  /* The left column becomes the bottom sheet. */
  .planner-page .pl-left { position:fixed;z-index:850;inset:auto 0 var(--pl-nav) 0;width:auto;height:var(--pl-sheet);gap:0;padding:0 12px 12px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--vz-line);border-bottom:0;border-radius:20px 20px 0 0;background:var(--vz-card);box-shadow:0 -3px 12px #08152c26;pointer-events:auto;transition:height .22s ease; }
  .planner-page .pl-sheet-handle { position:sticky;top:0;z-index:5;display:grid;place-items:center;flex:none;width:calc(100% + 24px);height:26px;margin:0 -12px;padding:0;border:0;background:var(--vz-card); }
  .planner-page .pl-sheet-handle span { width:40px;height:4px;border-radius:2px;background:var(--vz-line); }
  .planner-page .pl-left .pl-card { flex:none;border:0;border-radius:0;background:none;box-shadow:none; }
  .planner-page .pl-left .pl-card-body { padding:0; }
  .planner-page .pl-stats dd { font-size:15px; }
  .planner-page .pl-profile { position:static;height:150px;margin:4px 0 6px;padding:0; }
  .planner-page .pl-profile-head { height:26px; }
  .planner-page .pl-profile-head .pl-fold { display:none; }
  .planner-page .pl-points-card { min-height:0;margin-top:4px; }
  .planner-page .pl-points-card .pl-card-head { min-height:44px;padding:4px 0; }
  .planner-page .pl-points-scroll { overflow:visible;padding:0; }
  .planner-page .pl-point { min-height:52px; }
  .planner-page .pl-point-remove { opacity:1;width:40px;height:40px; }
  .planner-page .pl-point { grid-template-columns:14px 26px minmax(0,1fr) auto 40px; }
  .planner-page .pl-grip { opacity:1; }
  .planner-page .pl-edit-tools { display:flex; }
  .planner-page .pl-edit-tools button { width:36px;height:36px; }
  /* Settings: a full sheet over the map. */
  .planner-page .pl-right { position:fixed;z-index:890;inset:var(--pl-header) 0 var(--pl-nav) 0;width:auto;display:none;padding:10px;background:color-mix(in srgb,#020a14 35%,transparent); }
  .planner-page.pl-settings-open .pl-right { display:flex; }
  .planner-page .pl-settings-sheet { display:flex;flex:1;max-height:100%;background:var(--vz-card); }
  /* In the sheet nothing is folded. */
  .planner-page .pl-right .pl-settings-sheet .pl-card-body [data-pl-fold-body] { display:block !important; }
  .planner-page .pl-settings-sheet .pl-layers-card { border:0;box-shadow:none;background:none; }
  .planner-page .pl-settings-sheet .pl-layers-card .pl-card-head { display:none; }
  .planner-page .pl-settings-sheet .pl-layers-card .pl-card-body { padding:0; }
  .planner-page .pl-settings-sheet .pl-settings { margin-top:8px; }
  .planner-page .pl-icon-button.pl-settings-close { display:grid; }
  .planner-page .pl-bikes button { padding:8px 2px 7px;font-size:12px; }
  .planner-page .pl-segmented button { height:38px;font-size:13px; }
  .planner-page .pl-overlay { padding:6px; }
  /* Round map buttons, as on the route pages. */
  .planner-page .pl-round { position:fixed;z-index:840;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid var(--vz-line);border-radius:50%;background:var(--pl-surface);box-shadow:0 3px 9px #10254554;color:var(--vz-blue); }
  .planner-page .pl-round--settings { top:calc(var(--pl-header) + 10px);left:12px; }
  .planner-page .pl-round--locate { top:calc(var(--pl-header) + 10px);right:12px; }
  .planner-page .pl-round--fit { top:calc(var(--pl-header) + 64px);right:12px; }
  .planner-page .pl-round-pair { position:fixed;z-index:840;bottom:calc(var(--pl-nav) + var(--pl-sheet) + 10px);display:flex;overflow:hidden;border:1px solid var(--vz-line);border-radius:12px;background:var(--pl-surface);box-shadow:var(--vz-shadow-popup); }
  .planner-page .pl-round-pair--edit { left:12px; }
  .planner-page .pl-round-pair--zoom { right:12px; }
  .planner-page .pl-round-pair button { display:grid;place-items:center;width:46px;height:44px;padding:0;border:0;background:transparent;color:var(--vz-blue); }
  .planner-page .pl-round-pair button + button { border-left:1px solid var(--vz-line); }
  .planner-page.pl-sheet-open :is(.pl-round,.pl-round-pair) { visibility:hidden; }
  .planner-page .pl-mobile-nav { position:fixed;z-index:900;inset:auto 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:var(--pl-nav);padding:5px 0 env(safe-area-inset-bottom,0px);background:var(--pl-surface);box-shadow:0 -2px 8px #10254518; }
  .planner-page .pl-mobile-nav :is(a,button) { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;padding:3px 1px;border:0;background:transparent;color:var(--vz-copy);font:400 12px/1.2 var(--vz-font-body);text-decoration:none; }
  .planner-page .pl-mobile-nav [aria-current] { color:var(--vz-current);font-weight:700; }
  .planner-page .pl-mobile-nav svg { width:24px !important;height:24px !important; }
  .planner-page .pl-toast { top:calc(var(--pl-header) + 64px);left:50%;max-width:calc(100% - 24px); }
  .planner-page .leaflet-control-attribution { font-size:9px; }
}

/* ── Administrators' blocks: beige instead of white ── */
.planner-page :is(.pl-admin-bar,.pl-road-bar,.pl-club-edit,.pl-kp-summary,.pl-km-check) { border-color:var(--pl-admin-line);background:var(--pl-admin-bg); }
.planner-page :is(.pl-admin-bar,.pl-road-bar) { box-shadow:0 6px 18px color-mix(in srgb,#6d5320 22%,transparent); }
.planner-page .pl-admin-scope { background:var(--pl-admin-soft); }
.planner-page .pl-admin-scope button[aria-checked="true"],.planner-page .pl-road-bar button,.planner-page .pl-club-edit :is(.pl-secondary,input,select) { border-color:var(--pl-admin-line);background:color-mix(in srgb,var(--pl-admin-bg) 55%,var(--vz-card)); }
.planner-page :is(.pl-road-bar button,.pl-kp-summary):hover:not(:disabled) { background:var(--pl-admin-soft); }
.planner-page .pl-club-edit-title small,.planner-page .pl-club-edit h3 { color:var(--pl-admin-ink); }
.planner-page .pl-kp-editor { background:color-mix(in srgb,var(--pl-admin-bg) 45%,var(--vz-page)); }
.planner-page :is(.pl-kpe-head,.pl-kpe-strip) { border-color:var(--pl-admin-line);background:var(--pl-admin-bg); }
.planner-page :is(.pl-kpe-back,.pl-kpe-card,.pl-kpe-coords input) { border-color:var(--pl-admin-line);background:color-mix(in srgb,var(--pl-admin-bg) 55%,var(--vz-card)); }

/* ── Desktop: the constructor and the map card fit a laptop screen without scrolling ──
   Base maps four in a row with low pictures, overlays one line each (their notes are
   tooltips; warnings stay), the legend in three columns, the bicycle's note in two lines. */
@media (min-width:901px) {
  .planner-page .pl-bases { --pl-plate:50px;gap:4px;max-height:calc(var(--pl-plate) * 3 + 8px + 4px); }
  .planner-page .pl-bases button { gap:2px;padding:2px 2px 3px;border-radius:8px;font-size:10.5px; }
  .planner-page .pl-bases .pl-thumb { height:28px;border-radius:6px; }
  .planner-page .pl-layers-card h3 { margin:8px 0 4px; }
  .planner-page .pl-overlays { gap:2px; }
  .planner-page .pl-overlay { grid-template-columns:auto 40px minmax(0,1fr);gap:7px;padding:2px 6px 2px 4px; }
  .planner-page .pl-overlay .pl-thumb { height:24px;border-radius:6px; }
  .planner-page .pl-overlay small:not(.is-hint) { display:none; }
  .planner-page .pl-overlay-group { margin-top:4px; }
  .planner-page .pl-surface-legend { grid-template-columns:repeat(3,auto);justify-content:start;gap:2px 12px;margin-top:5px;font-size:11px; }
  .planner-page [data-pl-bike-hint] { display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11.5px; }
  .planner-page .pl-settings { margin-top:8px; }
  .planner-page .pl-settings h3 { margin:8px 0 4px; }
  .planner-page .pl-bikes button { padding:4px 2px 3px; }
  .planner-page .pl-bikes button svg { width:22px !important;height:22px !important; }
  .planner-page .pl-new-segments { display:flex;align-items:center;gap:10px;margin-top:8px; }
  .planner-page .pl-new-segments h3 { flex:none;margin:0; }
  .planner-page .pl-new-segments .pl-segmented { flex:1; }
  /* The breakdown in one line: tabs, bar and legend closer together. */
  .planner-page .pl-bar { margin-bottom:5px; }
  .planner-page .pl-legend { gap:1px 8px;font-size:11px; }
  .planner-page .pl-legend li { gap:4px; }
  .planner-page .pl-legend i { width:8px;height:8px; }
  .planner-page .pl-search-field { height:36px; }

  .planner-page .pl-overlays { gap:1px; }
  .planner-page .pl-layers-card h3 { margin:6px 0 3px; }
}
/* Laptop screens: the bicycle's note only as the tooltip of the bicycles. */
@media (min-width:901px) and (max-height:1000px) {
  .planner-page [data-pl-bike-hint] { display:none; }
}

/* ── Administrators: the view of the surface layer, the club route bar ── */
.planner-page .pl-admin-view { display:flex;align-items:center;gap:4px;height:36px;padding:0 6px 0 8px;border-radius:9px;color:var(--pl-admin-ink); }
.planner-page .pl-admin-view svg { width:16px !important;height:16px !important; }
.planner-page .pl-admin-view select { height:30px;padding:0 4px;border:1px solid var(--pl-admin-line);border-radius:7px;background:color-mix(in srgb,var(--pl-admin-bg) 55%,var(--vz-card));color:var(--vz-copy);font:600 12px/1 var(--vz-font-body); }
.planner-page .pl-admin-count { height:30px;margin-right:4px;padding:0 9px;border:1px solid var(--pl-admin-line);border-radius:8px;background:color-mix(in srgb,var(--pl-admin-bg) 55%,var(--vz-card));color:var(--pl-admin-ink);font:600 12px/1 var(--vz-font-body);white-space:nowrap; }
.planner-page .pl-admin-count:hover { background:var(--pl-admin-soft); }
.planner-page .pl-admin-count:empty { display:none; }
.planner-page .pl-admin-map { display:inline-flex;align-items:center;gap:5px;text-decoration:none; }
.planner-page .pl-admin-map svg { width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.planner-page .pl-fixes-dialog { background:var(--pl-admin-bg); }
.planner-page .pl-fixes-dialog .pl-plan-open > i { width:10px; }
.planner-page .pl-club-bar { position:absolute;z-index:814;top:calc(var(--pl-gap) + 52px);left:calc(var(--pl-left) + var(--pl-gap) * 2);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;max-width:calc(100% - var(--pl-left) - var(--pl-gap) * 4 - 320px);padding:6px 10px;border:1px solid var(--pl-admin-line);border-radius:11px;background:var(--pl-admin-bg);box-shadow:0 6px 18px color-mix(in srgb,#6d5320 22%,transparent); }
.planner-page .pl-club-bar[hidden] { display:none; }
.planner-page .pl-club-bar { flex-wrap:wrap;max-width:calc(100vw - var(--pl-menu) - var(--pl-left) - var(--pl-gap) * 4); }
.planner-page .pl-club-bar .pl-club-edit-title { display:flex;align-items:baseline;gap:5px;margin:0;font-size:13.5px;line-height:1.15;white-space:nowrap; }
.planner-page .pl-club-bar .pl-club-edit-title b { max-width:200px;overflow:hidden;text-overflow:ellipsis; }
.planner-page .pl-club-bar .pl-club-edit-title small { font-size:10px; }
.planner-page .pl-club-bar .pl-club-edit-state { padding:2px 7px;font-size:11px; }
.planner-page .pl-club-count,.planner-page .pl-club-hint { color:var(--pl-admin-ink);font-size:11px;white-space:nowrap; }
.planner-page .pl-club-hint { cursor:help;border-bottom:1px dotted var(--pl-admin-line); }
.planner-page .pl-club-version { display:flex;align-items:center;gap:5px;color:var(--vz-muted);font-size:12px;white-space:nowrap; }
.planner-page .pl-club-version input { width:56px;height:30px;padding:0 6px;border:1px solid var(--pl-admin-line);border-radius:8px;background:color-mix(in srgb,var(--pl-admin-bg) 55%,var(--vz-card));color:var(--vz-copy);font:600 13px/1 var(--vz-font-body); }
.planner-page .pl-club-bar .pl-primary { height:32px;padding:0 12px;font-size:13px; }
.planner-page .pl-club-bar .pl-secondary { height:32px;padding:0 10px;border-color:var(--pl-admin-line);background:color-mix(in srgb,var(--pl-admin-bg) 55%,var(--vz-card));font-size:12px; }
.planner-page .pl-club-bar .pl-club-leave { color:var(--vz-error); }
.planner-page .pl-club-bar .pl-km-check { margin:0;padding:3px 8px;font-size:11px; }
.planner-page .pl-club-bar .pl-km-check[hidden] { display:none; }
/* A card in the editor's strip can be removed in place. */
.planner-page .pl-kpe-card-remove { position:absolute;top:8px;right:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--vz-card) 85%,transparent);color:var(--vz-muted);opacity:0;transition:opacity .15s; }
.planner-page .pl-kpe-card:is(:hover,:focus-within) .pl-kpe-card-remove { opacity:1; }
.planner-page .pl-kpe-card-remove:hover { background:var(--vz-card);color:var(--vz-error); }
.planner-page .pl-kpe-card-remove svg { width:14px !important;height:14px !important; }
.planner-page .pl-poi-mark.is-active { box-shadow:0 0 0 3px color-mix(in srgb,var(--pl-edit) 60%,transparent); }
@media (max-width:767px) {
  .planner-page .pl-club-bar { top:calc(var(--pl-header) + 112px);left:12px;right:12px;max-width:none; }
  .planner-page .pl-admin-view,.planner-page .pl-admin-count,.planner-page .pl-admin-link span { display:none; }
}

/* The administrator's bar keeps clear of the map tools on laptop screens. */
@media (min-width:768px) and (max-width:1560px) {
  .planner-page .pl-admin-toggle span { display:none; }
  .planner-page .pl-admin-toggle { padding:0 9px; }
  .planner-page .pl-admin-view { padding-left:4px; }
  .planner-page .pl-admin-view svg { display:none !important; }
}
/* While a club route is edited its bar sits under the administrator's: the toasts go below both. */
.planner-page.pl-club-editing .pl-toast { top:calc(var(--pl-gap) + 104px); }

@media (max-width:1700px) {
  .planner-page .pl-club-hint { display:none; }
}
@media (max-width:1500px) {
  .planner-page .pl-club-count { display:none; }
  .planner-page .pl-club-bar .pl-club-edit-title b { max-width:150px; }
}

/* The steepest stretch on the elevation profile: a link to its place on the map. */
.planner-page .pl-steep { padding:0;border:0;border-bottom:1px dashed currentColor;background:none;color:inherit;font:inherit;cursor:pointer; }
.planner-page .pl-steep:hover { color:var(--vz-blue); }

/* Two base maps at once: a tick in a picture's corner lays that map over the chosen one. */
.planner-page .pl-bases button { position:relative; }
.planner-page .pl-base-check { position:absolute;top:5px;right:5px;display:grid;place-items:center;width:18px;height:18px;border:1.5px solid #fff;border-radius:5px;background:rgba(11,34,58,.35);box-shadow:0 1px 3px rgba(0,0,0,.35);cursor:pointer; }
.planner-page .pl-base-check:hover { background:rgba(11,34,58,.6); }
.planner-page .pl-base-check[aria-checked="true"] { background:var(--vz-current-fill); }
.planner-page .pl-base-check[aria-checked="true"]::after { content:'';width:12px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6 9.6 3.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.planner-page .pl-base-check[data-order]:not([data-order=""])::after { content:attr(data-order);width:auto;height:auto;background:none;color:#fff;font:800 11px/1 var(--vz-font-body); }
.planner-page .pl-leave-dialog footer { display:flex;flex-wrap:wrap;gap:8px; }
.planner-page .pl-leave-dialog footer button[hidden] { display:none; }

/* The bar of selected roads: what is chosen, for whom it changes, two rows of choices. */
.planner-page .pl-road-bar { border-color:var(--pl-admin-line); }
@media (min-width:768px) {
  .planner-page .pl-road-bar { left:calc(var(--pl-left) + var(--pl-gap) * 2);right:calc(var(--pl-right) + var(--pl-gap) * 2);display:flex;align-items:center;gap:10px;width:auto;padding:6px 8px 6px 12px;transform:none; }
  .planner-page .pl-road-bar > p { flex:1 1 auto;min-width:100px; }
  .planner-page .pl-road-bar { gap:8px;padding-left:10px; }
}
.planner-page .pl-road-bar .pl-road-row { display:flex;flex:none;flex-wrap:nowrap;align-items:center;gap:4px; }
.planner-page .pl-road-bar .pl-road-row { gap:3px; }
.planner-page .pl-road-bar .pl-road-row button { gap:4px;height:28px;padding:0 6px;font-size:11.5px; }
.planner-page .pl-road-bar .pl-road-row button i { width:10px;height:10px; }
.planner-page .pl-road-bar .pl-road-divider { width:1px;height:22px;margin:0 3px;background:var(--pl-admin-line); }
.planner-page .pl-road-bar .pl-road-clear { padding:0 7px; }
@media (max-width:767px) { .planner-page .pl-road-bar .pl-road-row { flex-wrap:wrap; } }

/* Stages of a route: a line under the stage's last point with its distance; marks on the profile. */
.planner-page .pl-stage { display:flex;align-items:center;justify-content:space-between;margin:2px 4px 6px 34px;padding:3px 8px;border-radius:7px;background:color-mix(in srgb,var(--pl-route) 10%,var(--vz-card));color:var(--pl-route);font:700 11.5px/1.3 var(--vz-font-body); }
.planner-page .pl-stage b { font-style:italic;font-variant-numeric:tabular-nums; }
.planner-page .pl-point.is-stage-end .pl-badge { box-shadow:0 0 0 3px color-mix(in srgb,var(--pl-route) 35%,transparent); }
.planner-page .pl-chart-stage line { stroke:var(--pl-route);stroke-width:1.5;stroke-dasharray:5 3; }
.planner-page .pl-chart-stage text { fill:var(--pl-route);font:800 10px/1 var(--vz-font-body); }

/* The vector map: dimmed like the street map in the dark theme. */
html.planner-page.theme-dark .pl-vector-map { filter:invert(.9) hue-rotate(180deg) saturate(.8) brightness(1.1) contrast(.76); }
.planner-page .pl-vector-map .maplibregl-canvas { outline:none; }

/* Several maps side by side: thin white borders, the map's name in a corner. */
.planner-page .pl-map-extra { z-index:0;cursor:grab;border-left:3px solid #fff;border-top:3px solid #fff; }
.planner-page .pl-map-extra.is-split-first-col { border-left:0; }
.planner-page .pl-map-extra.is-split-first-row { border-top:0; }
.planner-page .pl-split-label { position:absolute;z-index:700;left:10px;top:10px;display:flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:99px;background:rgba(11,34,58,.78);color:#fff;font:700 12px/1 var(--vz-font-body);pointer-events:auto; }
/* Cells in the top row keep their name below the map tools. */
.planner-page .pl-map:not(.pl-map-extra) > .pl-split-label { padding-right:10px; }
.planner-page .pl-split-label button { display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font:700 14px/1 var(--vz-font-body);cursor:pointer; }
.planner-page .pl-split-cross { pointer-events:none; }
.planner-page .pl-split-cross::before,.planner-page .pl-split-cross::after { content:'';position:absolute;left:12px;top:0;width:2px;height:26px;background:#ff2d95;box-shadow:0 0 0 1px #fff; }
.planner-page .pl-split-cross::after { left:0;top:12px;width:26px;height:2px; }
html.planner-page.theme-dark .pl-map-extra .pl-street-tiles { filter:invert(.9) hue-rotate(180deg) saturate(.8) brightness(1.1) contrast(.76); }

/* Collapsed blocks: one height with the toolbars (46 px), the same title size and baseline;
   the folded track card keeps only its head line, without the track's name. */
@media (min-width:768px) {
  .planner-page :is(.pl-left > .pl-card.is-folded, .pl-right > .pl-card.is-folded),
  .planner-page.pl-collapsed :is(.pl-left > .pl-card, .pl-right > .pl-card) { box-sizing:border-box;height:46px;min-height:46px;max-height:46px;overflow:hidden; }
  .planner-page :is(.pl-left > .pl-card.is-folded, .pl-right > .pl-card.is-folded) > .pl-card-head,
  .planner-page.pl-collapsed :is(.pl-left > .pl-card, .pl-right > .pl-card) > .pl-card-head { height:44px;min-height:44px;padding-top:0;padding-bottom:0;align-items:center; }
  .planner-page .pl-main-card.is-folded .pl-title-box,.planner-page.pl-collapsed .pl-main-card .pl-title-box { display:none; }
  .planner-page .pl-main-card.is-folded .pl-track-head,.planner-page.pl-collapsed .pl-main-card .pl-track-head { grid-template-rows:44px; }
  .planner-page :is(.pl-left > .pl-card.is-folded, .pl-right > .pl-card.is-folded) h2,
  .planner-page.pl-collapsed :is(.pl-left > .pl-card, .pl-right > .pl-card) h2,
  .planner-page :is(.pl-profile.is-folded, .pl-collapsed .pl-profile) .pl-profile-head strong { font-size:18px;line-height:1; }
  .planner-page .pl-profile.is-folded,.planner-page.pl-collapsed .pl-profile { box-sizing:border-box;height:46px;padding-top:6px;padding-bottom:6px; }
}
/* The Yandex map frame under the planner's panes. */
.planner-page .pl-yandex-frame { position:absolute;inset:0;z-index:0;width:100%;height:100%;border:0;pointer-events:none; }
/* The lock of a split map's zoom. */
.planner-page .pl-split-label .pl-split-lock { display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;cursor:pointer; }
.planner-page .pl-split-label .pl-split-lock svg { width:12px !important;height:12px !important;fill:none;stroke:currentColor;stroke-width:2.4; }
.planner-page .pl-split-label .pl-split-lock[aria-pressed="true"] { background:#ffd166;color:#0b223a; }

/* The viewing mode: a hand cursor, a popup telling what is where. */
.planner-page.pl-viewing .pl-map.leaflet-container { cursor:grab; }
.planner-page .pl-toolbar [data-pl-action="view-mode"][aria-pressed="true"] { background:var(--vz-selection);color:var(--vz-current); }
.planner-page .pl-info-popup .leaflet-popup-content { margin:10px 12px;font:13px/1.4 var(--vz-font-body); }
.planner-page .pl-info-list { display:grid;gap:6px;margin:0;padding:0;list-style:none; }
.planner-page .pl-info-list strong { display:block;font-weight:700; }
.planner-page .pl-info-list small { color:var(--vz-muted);font-size:12px; }
.planner-page .pl-info-empty { margin:0; }
.planner-page .pl-info-coords { margin:6px 0 0;color:var(--vz-muted);font-size:11px; }
.planner-page .pl-wikimapia-tip { font:600 12px/1.3 var(--vz-font-body); }
.planner-page .pl-info-row { margin:4px 0 0;font-size:12.5px; }
.planner-page .pl-info-row a { color:var(--vz-blue); }
.planner-page .pl-info-add { margin-top:8px;padding:6px 10px;border:1px solid var(--vz-current-fill);border-radius:8px;background:var(--vz-current-fill);color:var(--vz-on-accent,#fff);font:600 12.5px/1.2 var(--vz-font-body);cursor:pointer; }
.planner-page .pl-yandex-frame[hidden] { display:none; }
/* The administrators' objects: the drawing bar. */
.planner-page .pl-object-bar .pl-road-row { flex-wrap:wrap;gap:6px; }
.planner-page .pl-object-bar :is(select,input) { height:30px;padding:0 8px;border:1px solid var(--pl-admin-line);border-radius:8px;background:var(--vz-card);color:var(--vz-copy);font:500 12.5px/1 var(--vz-font-body); }
.planner-page .pl-object-bar input[data-pl-object-name] { width:150px; }
.planner-page .pl-object-bar input[data-pl-object-description] { flex:1 1 140px;min-width:120px; }
.planner-page .pl-object-kinds button { height:30px;padding:0 9px; }
.planner-page .pl-object-bar > p { white-space:normal; }
.planner-page .pl-info-remove { margin-left:6px;border-color:#b42318;background:#fff;color:#b42318; }

/* Smooth start: the map area takes the tourist map's land colour at once (no white flash) and
   the vector canvas fades in when MapLibre draws its first frame. */
.planner-page .leaflet-container { background:#f8f3e3; }
.planner-page[data-theme="dark"] .leaflet-container { background:#282419; }
.planner-page .pl-vector-map, .planner-page .leaflet-gl-layer { animation:pl-map-in .35s ease-out; }
@keyframes pl-map-in { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .planner-page .pl-vector-map, .planner-page .leaflet-gl-layer { animation:none; } }

/* Under old sheet maps the street map shows only in their gaps (no sheet, the lagoon): toned
   like old paper, so the gaps blend in instead of looking like broken tiles. */
.planner-page .pl-old-base .pl-street-tiles, .planner-page .pl-street-under { filter:sepia(.55) saturate(.6) brightness(1.03) contrast(.92); }