/* ================================================================
 *  Route Maker UI round (MRM 1.19.71, Ayrton 2026-09-25/26)
 *  The approved mockup: claude.ai artifact PZeRxHXbcWSpG2XTS353R6,
 *  frames A-G and variant V2 "Containers" (FEATURES.md, "UI round").
 *
 *  The components the round added, in one file so the brand guide
 *  (#route-maker) renders them from the same source as the editor:
 *    .mrm-tabbar        Route | POI's, a segmented tab bar pinned under
 *                     the sidebar head; the selected tab INVERTS
 *    .mrm-block       a bordered block (elevation profile, stops)
 *    .mrm-stop__fix   "No road found" on a stop row + "Draw this stretch
 *                     straight" (a .mot-notice--warning inside the row)
 *    .mrm-noroad-*    the dotted stretch and its warning mark on the map
 *  Loaded after route-maker.css and route-maker-generate.css.
 *  var(--mot-*, fallback) throughout: the brand guide and a standalone
 *  install both render it.
 * ============================================================= */

/* ── Tabs: Route | POI's ─────────────────────────────────────── */
.mrm-tabbar {
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	padding: 4px var(--sp-5, 1.25rem) 12px;
	background: inherit;
	transition: box-shadow .18s ease;
}
/* The body under it has scrolled: a hairline and a soft shadow say the
   list slides under a bar that stays (mockup frame D). */
.mrm-tabbar.is-stuck {
	/* A shadow line, not a border: a border would shrink the body by 1 px the
	   moment it scrolls, and push a row scrolled into view out by that pixel. */
	box-shadow: 0 1px 0 var(--mot-border, rgba(255,255,255,.09)), 0 8px 12px -10px rgba(0, 0, 0, .35);
}
.mrm-tabbar__list {
	display: flex;
	gap: 4px;
	padding: 3px;
	border-radius: 999px;
	background: var(--mot-bg-raised, #202020);
	border: 1px solid var(--mot-border, rgba(255,255,255,.09));
}
.mrm-tabbar__tab {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--mot-text-muted, #9b9b9b);
	font: inherit;
	font-weight: 700;
	font-size: .875rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.mrm-tabbar__tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.mrm-tabbar__tab:hover { color: var(--mot-text, #f2f2f2); }
.mrm-tabbar__tab:focus-visible { outline: 2px solid var(--mot-text, #f2f2f2); outline-offset: 2px; }
/* The house selection rule: the chosen tab inverts, never orange. */
.mrm-tabbar__tab[aria-selected="true"] {
	background: var(--mot-selected-fill, var(--mot-text, #f2f2f2));
	color: var(--mot-selected-label, var(--mot-bg, #0a0a0a));
	border-color: var(--mot-text, #f2f2f2);
}
/* The number of POI pins on the map for the ticked categories. */
.mrm-tabbar__n {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--mot-bg-card, #131313);
	border: 1px solid var(--mot-border, rgba(255,255,255,.09));
	color: var(--mot-text, #f2f2f2);
	font-size: .75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.mrm-tabbar__n[hidden] { display: none; }
.mrm-tabbar__tab[aria-selected="true"] .mrm-tabbar__n {
	background: color-mix(in srgb, var(--mot-selected-label, #0a0a0a) 20%, transparent);
	border-color: transparent;
	color: var(--mot-selected-label, #0a0a0a);
}
/* Only the route and its places have tabs; the chooser, the generator and
   the upload view keep the head alone. */
.mrm-side .mrm-tabbar { display: none; }
.mrm-side[data-view="plan"] .mrm-tabbar,
.mrm-side[data-view="generate"] .mrm-tabbar,
.mrm-side[data-view="poi"] .mrm-tabbar { display: block; }
/* The generator's POIs tab before its first route: no Save (nothing to save
   yet), as on its Route tab (route-maker.css, --gen-fresh). */
.mrm-side[data-view="poi"].mrm-side--gen-open.mrm-side--gen-fresh .mrm-side__foot { display: none; }

/* ── The POI tab's mode line (Ayrton 2026-09-28, peek option B) ──
   Phone only, under the tabs, at peek, half and full: the list's mode on
   the left ("Langs de route" / "In dit gebied"), the ONE switch on the
   right as a text button ("Zoek in dit gebied" / "Terug naar langs de
   route"). The label has no icon: French along mode only fits without one
   at 360 px. 44 px tall, the button's hit area too. Brand guide
   #route-maker-sheet. Styled everywhere (the brand guide shows it); inside
   the sheet it shows on a phone in the POI tab only. */
.mrm-poi-modeline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	padding: 0 var(--sp-4, 1rem) 0 calc(var(--sp-4, 1rem) + 4px);
	flex-shrink: 0;
}
.mrm-poi-modeline[hidden] { display: none; }
.mrm-poi-modeline__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--mot-text, #f2f2f2);
}
.mrm-poi-modeline__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--mot-text, #f2f2f2);
	font: inherit;
	font-size: .8125rem;
	font-weight: 800;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: var(--mot-text-muted, #9b9b9b);
	text-underline-offset: 3px;
	cursor: pointer;
}
.mrm-poi-modeline__btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.mrm-poi-modeline__btn:hover { text-decoration-color: var(--mot-text, #f2f2f2); }
.mrm-poi-modeline__btn:focus-visible { outline: 2px solid var(--mot-text, #f2f2f2); outline-offset: 2px; border-radius: 4px; }
.mrm-poi-modeline__btn:disabled { color: var(--mot-text-muted, #9b9b9b); text-decoration: none; cursor: default; }
.mrm-poi-modeline__btn[hidden] { display: none; }
.mrm-side .mrm-poi-modeline { display: none; }
@media (max-width: 959px) {
	.mrm-side[data-view="poi"] .mrm-poi-modeline:not([hidden]) { display: flex; }
	/* Peek grows by the line minus the tab bar's bottom padding: 236 -> 248
	   (mockup measure); the map's controls ride above it (measured, below). */
	.mrm-side[data-view="poi"][data-height="peek"]:has(.mrm-poi-modeline:not([hidden])) { height: 248px; }
	.mrm-side[data-view="poi"]:has(.mrm-poi-modeline:not([hidden])) .mrm-tabbar { padding-bottom: 0; }
}

/* Save sits under BOTH tabs (Ayrton, decision 3). */
.mrm-side[data-view="poi"] .mrm-side__foot { display: flex; }

/* The POI tab is the panel itself: its own "Along the route" heading row
   keeps the add button; the old back link went with the old view. */
.mrm-side[data-view="poi"] .mrm-side__body { padding-top: 0; }

/* ── The Route tab's parts, moved here from route-maker.css (1.19.71) so the
   brand guide draws them from the editor's own rules ─────────── */
.mrm-plan__section { display: flex; flex-direction: column; gap: var(--sp-2, .5rem); }
.mrm-plan__label {
	margin: 0;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mot-text-muted, #9b9b9b);
}

.mrm-plan__count { margin-left: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mot-text-muted, #9b9b9b); }
/* Stops list */
.mrm-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mrm-stop { display: flex; align-items: center; border-bottom: 1px solid var(--mot-border, rgba(255,255,255,.09)); }
.mrm-stop__go {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 4px 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.mrm-stop__num {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 999px;
	/* Via stops: the soft grey of the selection controls, not a black disc
	   (2026-09-24, Ayrton on black). Start and finish keep their colours. */
	background: var(--mot-selected-soft, var(--mot-bg-raised, #202020));
	box-shadow: inset 0 0 0 1px var(--mot-border-strong, var(--mot-text-muted, #9b9b9b));
	color: var(--mot-text, #f2f2f2);
	font-size: .75rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mrm-stop--start .mrm-stop__num  { background: var(--mot-marker-start, #34C759); color: var(--mot-bg, #0a0a0a); box-shadow: none; }
.mrm-stop--finish .mrm-stop__num { background: var(--mot-marker-finish, #FF453A); color: var(--mot-bg, #0a0a0a); box-shadow: none; }
.mrm-stop__text { display: flex; flex-direction: column; }
.mrm-stop__name { font-weight: 700; }
.mrm-stop__meta { font-size: .8125rem; color: var(--mot-text-muted, #9b9b9b); }
.mrm-stop__del {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--mot-text-muted, #9b9b9b);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.mrm-stop__del:hover, .mrm-stop__del:focus-visible { background: var(--mot-bg-raised, #202020); color: var(--mot-text, #f2f2f2); }
.mrm-stops__empty { margin: 0; color: var(--mot-text-muted, #9b9b9b); font-size: .875rem; }
.mrm-stops__empty[hidden] { display: none; }

.mrm-eprof { display: flex; flex-direction: column; gap: 6px; }
.mrm-eprof[hidden] { display: none; }
.mrm-eprof__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mrm-eprof__sum { font-size: .8125rem; color: var(--mot-text-muted, #9b9b9b); font-variant-numeric: tabular-nums; }
.mrm-eprof__chart { position: relative; touch-action: pan-y; cursor: crosshair; }
.mrm-eprof__svg { display: block; overflow: visible; }
.mrm-eprof__area { fill: var(--mot-chart-area, rgba(255,107,53,.18)); stroke: none; }
.mrm-eprof__line { fill: none; stroke: var(--mot-chart-line, #d9521e); stroke-width: 2; stroke-linejoin: round; }
.mrm-eprof__cursor { stroke: var(--mot-text, #f2f2f2); stroke-width: 1; }
.mrm-eprof__tip {
	position: absolute;
	top: -6px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--mot-text, #f2f2f2);
	color: var(--mot-bg, #0a0a0a);
	font-size: .75rem;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}
.mrm-eprof__tip[hidden] { display: none; }
/* The map dot that follows the profile cursor: tokens, not Leaflet's inline colours. */
path.mrm-eprof-dot { stroke: var(--mot-text, #f2f2f2); fill: var(--mot-bg, #0a0a0a); }

/* ── V2 containers (decision 4) ──────────────────────────────── */
.mrm-block {
	border: 1px solid var(--mot-border, rgba(255,255,255,.09));
	border-radius: var(--mot-radius-lg, 16px);
	padding: 14px 16px;
	background: var(--mot-bg-card, #131313);
}
/* The light theme's border token is 7 % ink, too faint for a block that has
   to read as a block on white; the mockup measured 10 %. */
html.mot-theme-light .mrm-block { border-color: rgba(0, 0, 0, .10); }
.mrm-block[hidden] { display: none; }
.mrm-block .mrm-stop:last-child { border-bottom: 0; }
.mrm-block.mrm-plan__section { gap: var(--sp-2, .5rem); }

/* ── A stretch without a road (decision 6) ───────────────────── */
.mrm-stop { flex-wrap: wrap; }
.mrm-stop__meta--warn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--mot-yellow, #D4930D);
	font-weight: 700;
}
.mrm-stop__meta--warn svg { width: 13px; height: 13px; flex-shrink: 0; }
.mrm-stop__meta--straight { display: inline-flex; align-items: center; gap: 5px; }
.mrm-stop__meta--straight svg { width: 13px; height: 13px; flex-shrink: 0; }
/* Snap notices (2026-09-29): the route starts or ends far from this point. Calm, muted, like the straight line. */
.mrm-stop__meta--far { display: inline-flex; align-items: center; gap: 5px; }
.mrm-stop__meta--far svg { width: 13px; height: 13px; flex-shrink: 0; }
/* W2 Stop (2026-09-29): the Snapping pill offers Stop after 3 s; a 44 px target, text-styled like the toast action. */
.mrm-routing-indicator.mrm-routing-indicator--stop { padding-top: 0; padding-bottom: 0; padding-right: 4px; }
.mrm-routing-indicator__stop {
	min-height: 44px; min-width: 44px; padding: 0 12px; margin: 0;
	background: none; border: 0; border-radius: 999px; cursor: pointer;
	color: var(--mot-text, #f2f2f2); font: inherit; font-weight: 700;
	text-decoration: underline; text-underline-offset: 3px;
	white-space: nowrap; /* "Suche stoppen" broke over two lines at 390 px (beta 2026-09-29) */
}
.mrm-routing-indicator__stop:hover { background: var(--mot-bg-raised, #202020); }
.mrm-routing-indicator__stop:focus-visible { outline: 2px solid var(--mot-text, #f2f2f2); outline-offset: -2px; }
.mrm-routing-indicator__stop[hidden] { display: none; }
/* Snap notices round 2 (tester 2026-09-29): the pill grows to its content on one line.
   It was absolutely placed at left:50%, so it could use only half the map's width:
   "Snapping to road..." wrapped and FR "Arrêter la recherche" spilled onto Redo at 390 px.
   Only with the switch on (--sn is set by route-maker.js). */
.mrm-wrap--r2 .mrm-routing-indicator.mrm-routing-indicator--sn,
.mrm-routing-indicator.mrm-routing-indicator--sn {
	width: max-content; max-width: calc(100% - 32px); white-space: nowrap; box-sizing: border-box;
}
.mrm-routing-indicator--sn > span:not(.mrm-spinner) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mrm-routing-indicator--sn > .mrm-spinner { flex-shrink: 0; }
.mrm-routing-indicator--sn > .mrm-routing-indicator__stop { flex-shrink: 0; }
@media (max-width: 959px) {
	/* Between the left gutter and the right-hand tool column (44 px buttons at right: 12px). */
	.mrm-wrap--r2 .mrm-routing-indicator.mrm-routing-indicator--sn,
	.mrm-routing-indicator.mrm-routing-indicator--sn {
		left: 16px; right: 64px; transform: none; margin: 0 auto; max-width: calc(100% - 80px);
	}
	.mrm-routing-indicator--sn .mrm-routing-indicator__stop { padding: 0 10px; }
}
.mrm-stop__fix { flex: 1 1 100%; margin: 0 0 12px; }
.mrm-stop__fix .mot-notice { margin: 0; padding: 12px 14px; gap: 10px; font-size: .8125rem; }
.mrm-stop__fix .mot-notice > svg { width: 16px; height: 16px; }
.mrm-stop__fix .mot-notice__title { font-size: .875rem; margin-bottom: 2px; }
.mrm-stop__fix .mot-notice__text { margin: 0 0 10px; }
.mrm-stop__fix .mot-btn { min-height: 44px; padding: 0 16px; gap: 8px; }
.mrm-stop__fix .mot-btn svg { width: 16px; height: 16px; }
/* Try again (primary) + Draw this stretch straight (secondary), 2026-09-28:
   a title without a text line gets its space back from the buttons' row. */
.mrm-stop__fix-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mrm-stop__fix .mot-notice__title + .mrm-stop__fix-actions { margin-top: 10px; }

/* On the map: the stretch dotted in ink, a warning mark half way. The
   route's orange is left out of that stretch (route-maker.js
   updatePolyline), so the dots are the only line there. */
path.mrm-noroad-line { stroke: var(--mot-text, #f2f2f2); stroke-opacity: .85; }
html.mot-theme-light path.mrm-noroad-line { stroke: var(--mot-text, #1c1c1c); stroke-opacity: .7; }
.mrm-noroad-pin { background: none !important; border: 0 !important; }
.mrm-noroad-pin__dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--mot-bg-card, #131313);
	border: 2px solid var(--mot-yellow, #D4930D);
	color: var(--mot-yellow, #D4930D);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
	cursor: pointer;
}
.mrm-noroad-pin__dot svg { width: 15px; height: 15px; }

/* A generator pin moved to the nearest road (LCG-CITY B, MRM 1.19.219): a thin
   dashed line in muted ink from where the rider put it to the route's stop, and
   a ring where it was. Calm on purpose: the toast says what happened. */
path.mrm-pin-move__line { stroke: var(--mot-text-muted, #9b9b9b); stroke-opacity: .9; }
.mrm-pin-move { background: none !important; border: 0 !important; pointer-events: none; }
.mrm-pin-move__ring {
	display: block;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--mot-bg-card, #131313);
	border: 2px solid var(--mot-text-muted, #9b9b9b);
}

/* ── Phone: the sheet at peek carries the tabs too ───────────── */
@media (max-width: 959px) {
	/* grip 22 + head 44 + tabs 64 + stats 34 + foot 73, measured 2026-09-26.
	   Was 176 without the tabs. */
	.mrm-side[data-height="peek"] { height: 236px; }
	/* The map's controls ride above the sheet at every height: core's
	   map-layers.js measures the sheet into --mot-map-inset-b (the bottom of
	   every .leaflet-bottom). The fixed bottoms that stood here (236 px, 56 %,
	   248 px, 176 px, landscape 84 px) were guesses per state and are gone
	   (2026-10-06). At full the sheet is the task and they step away. */
	body:has(.mrm-side[data-height="full"]) #mrm-map .leaflet-bottom.leaflet-right { visibility: hidden; }
	/* Moved by a transform, not by `bottom`: the column follows a sheet that
	   moves by itself (after a generation) without counting as a layout
	   shift (poi_modes.py measured 0.28 with `bottom`). */
	#mrm-map .leaflet-bottom.leaflet-right { bottom: 0; transform: translateY(calc(-1 * var(--mot-map-inset-b, 0px))); transition: transform .2s ease; }
	/* Their TOP: route-maker.js placeMapControls() keeps the column under the
	   "POIs · N" chip; when the band between chip and sheet is too short the
	   zoom steps aside, and below the layer button's height the column. */
	#mrm-map.mrm-map--ctl-nozoom .leaflet-bottom.leaflet-right .leaflet-control-zoom { display: none; }
	#mrm-map.mrm-map--ctl-none .leaflet-bottom.leaflet-right { visibility: hidden; }
	/* An Undo toast that found no free spot (route-maker.js placeToast): what it would lie on steps aside while it shows. */
	body.mrm-toast-hides-pill #mrm-poi-pill { visibility: hidden; }
	body.mrm-toast-hides-ctl #mrm-map .leaflet-bottom.leaflet-right { visibility: hidden; }
	.mrm-side[data-height="peek"] .mrm-view[data-view="poi"] { display: none; }
	.mrm-tabbar { padding: 2px var(--sp-4, 1rem) 10px; }
}
/* Phone: the map's controls (layers, zoom, attribution) move to the LEFT edge,
   still riding above the sheet (R4's rule, the bottom offsets above). On the
   right they stacked onto the five-button tool column (Undo ... Guide): at the
   start (half sheet) and on a 360 px phone the zoom and layer buttons sat on
   Reverse, Clear and Guide (R4 tester, 2026-09-26). The left edge below the
   search pill is empty, so both columns stay whole at 360/390/430 px. */
@media (max-width: 959px) {
	#mrm-map .leaflet-bottom.leaflet-right { left: 0; right: 0; }
	#mrm-map .leaflet-bottom.leaflet-right .leaflet-control { float: left; clear: both; margin-left: 12px; margin-right: 0; }
	#mrm-map .leaflet-bottom.leaflet-right .mot-layers .mot-layers__panel { right: auto; left: 0; }
}

/* ── Location search bar ─────────────────────────────────────── */
/* UI round (1.19.71, Ayrton decision 5, mockup frame F): a 44 px pill, the
   height of the round tool buttons beside it, on the same top line (12 px).
   Was 37 px with 8 px corners. */
.mrm-search {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 500;
	width: 360px;
}
.mrm-search__input-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 16px;
	background: var(--mot-bg-card, #131313);
	border: 1px solid var(--mot-border, rgba(255,255,255,.09));
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	box-sizing: border-box;
}
.mrm-search__input-wrap:focus-within { border-color: var(--mot-text, #f2f2f2); }
.mrm-search__icon {
	width: 18px;
	height: 18px;
	color: var(--mot-text-muted, #9b9b9b);
	flex-shrink: 0;
}
.mrm-search__input {
	flex: 1;
	height: 100%;
	background: transparent;
	border: none;
	outline: none;
	color: var(--mot-text, #f2f2f2);
	font-size: .875rem;
	font-family: inherit;
	min-width: 0;
}
.mrm-search__input::placeholder {
	color: var(--mot-text-muted, #9b9b9b);
}
/* iOS Safari zooms the page into any field under 16 px on focus (tester, iPhone
   sim iOS 26.5: tapping "Locatie zoeken..." zoomed the Route Maker). */
@media (max-width: 959px) {
	.mrm-search__input { font-size: 16px; }
}
.mrm-search__results {
	display: none;
	margin-top: 6px;
	background: var(--mot-bg-card, #131313);
	border: 1px solid var(--mot-border, rgba(255,255,255,.09));
	border-radius: var(--mot-radius, 12px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
	max-height: 240px;
	overflow-y: auto;
}
.mrm-search__results--open {
	display: block;
}
/* The open list is the task: it goes above the map's controls. On a phone the
   layers and zoom buttons ride the LEFT edge (Leaflet's control corner, z-index
   1000) and sat on results 3-5 over the search's 500 (tester 2026-09-29,
   390x664). Lifted only while open, so the closed pill keeps its 500 under the
   POI card host (1001) and the point menu (1002). */
.mrm-search:has(.mrm-search__results--open) { z-index: 1003; }
.mrm-search__result {
	padding: 12px 16px;
	font-size: .875rem;
	color: var(--mot-text, #f2f2f2);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background var(--mot-transition, .18s ease);
}
.mrm-search__result:hover,
.mrm-search__result--active {
	background: var(--mot-bg-raised, #202020);
}
.mrm-search__result + .mrm-search__result {
	border-top: 1px solid var(--mot-border, rgba(255,255,255,.09));
}
.mrm-search__empty {
	padding: 12px;
	font-size: .8125rem;
	color: var(--mot-text-muted, #9b9b9b);
	text-align: center;
}

/* Phone: 12 px from the left, up to the tool column (12 + 44 + 8). */
@media (max-width: 639px) {
	.mrm-search {
		left: 12px;
		right: 64px;
		width: auto;
		transform: none;
	}
}

/* ── The search pill beside the tools (decision 5) ───────────── */
/* A narrow desktop map (960-1339 px window): centred, the 360 px pill ran
   under the five tool buttons (5 x 44 + 4 x 6 = 244 px at 12 px from the
   right). There it starts at the left and stops before them. */
@media (min-width: 960px) and (max-width: 1339px) {
	.mrm-wrap--r2 .mrm-search {
		left: 16px;
		transform: none;
		width: min(360px, calc(100% - 16px - 244px - 12px - 16px));
	}
}

/* ── Generate on a phone (Ayrton 2026-09-26: "je kan de kaart niet zien") ──
   The sheet opens at half (route-maker.js setView), so the pins and the
   loop area stay visible above it; a point picked on the map drops it to
   peek. Generate is pinned to the bottom of the sheet's scroll area, so it
   is reachable at every height without scrolling. */
@media (max-width: 959px) {
	.mrm-side[data-view="generate"] .mrm-gen__actions {
		position: sticky;
		bottom: calc(-1 * var(--sp-5, 1.25rem));
		z-index: 2;
		margin: var(--sp-2, .5rem) calc(-1 * var(--sp-5, 1.25rem)) calc(-1 * var(--sp-5, 1.25rem));
		padding: var(--sp-3, .75rem) var(--sp-5, 1.25rem) calc(var(--sp-3, .75rem) + env(safe-area-inset-bottom, 0px));
		background: var(--mot-bg-card, #131313);
		box-shadow: 0 -8px 12px -10px rgba(0, 0, 0, .35);
	}
	/* The grip is the drag handle: it owns vertical moves. */
	.mrm-side__grip { touch-action: none; }
}

/* ── The point menu (delete-a-point, option C, Ayrton 2026-09-28) ──────
   Right-click a route point (desktop) or hold it ~0.5 s (touch): a small menu
   at the point. It is the site's dropdown (.mot-dropdown__menu / __item, the
   danger item red), placed by route-maker.js placePointMenu() inside the map.
   The delete item says just "Delete" ("enkel ... 'verwijderen'"); on a 2-point
   route or a closed loop's start it is greyed with the reason under it. The
   items are 44 px tall on touch. Brand guide #rm-point-menu. */
.mot-dropdown__menu.mrm-ptmenu {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1002; /* above Leaflet's controls (1000) and the POI card host (1001) */
	min-width: 200px;
	max-width: min(280px, calc(100% - 16px));
	padding: 4px 0;
	/* Inside the map it would inherit Leaflet's Helvetica (tester 3). */
	font-family: var(--mot-font, 'Nunito Sans', system-ui, sans-serif);
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
.mrm-ptmenu__head {
	padding: 8px 16px 6px;
	font-size: .75rem;
	color: var(--mot-text-muted, #9b9b9b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom: 1px solid var(--mot-border, rgba(255,255,255,.09));
}
.mrm-ptmenu .mot-dropdown__item { min-height: 40px; }
.mrm-ptmenu .mot-dropdown__item:focus-visible {
	outline: 2px solid var(--mot-text, #f2f2f2);
	outline-offset: -2px;
	background: var(--mot-bg-raised, #202020);
}
.mrm-ptmenu .mot-dropdown__item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.mrm-ptmenu .mot-dropdown__item[aria-disabled="true"]:hover { background: none; }
.mrm-ptmenu__note {
	margin: -4px 0 0;
	padding: 0 16px 10px 44px; /* under the label, past the 18 px icon + 10 px gap */
	font-size: .75rem;
	line-height: 1.35;
	color: var(--mot-text-muted, #9b9b9b);
}
@media (pointer: coarse) {
	.mrm-ptmenu .mot-dropdown__item { min-height: 44px; }
}
/* The point the menu belongs to, and a point with keyboard focus: an ink
   ring (selection is monochrome, never orange). */
/* !important: route-maker.css paints every .leaflet-interactive stroke in
   the accent with !important. */
.leaflet-pane path.mrm-wp-dot.mrm-wp--menu,
.leaflet-pane path.mrm-wp-dot:focus-visible {
	stroke: var(--mot-text, #f2f2f2) !important;
	stroke-width: 5;
	outline: none;
}
/* The 44 px touch hit circle is invisible (the same rule would ring it). */
.leaflet-pane path.mrm-wp-hit { stroke: none !important; fill-opacity: 0; }
.leaflet-marker-icon.mrm-wp--menu { filter: drop-shadow(0 0 0 var(--mot-text, #f2f2f2)) drop-shadow(0 0 2px var(--mot-text, #f2f2f2)); }
/* A held point must not start the phone's text selection or callout. */
.leaflet-pane path.mrm-wp-dot,
.leaflet-pane path.mrm-wp-hit { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Delete pressed while a leg is still routing: the item waits visibly (the
   site's busy ring in the icon's place, design-system .mot-btn.is-busy) and
   the menu stays open until the route is ready (route-maker.js requestDelete). */
.mrm-ptmenu .mot-dropdown__item.is-busy { pointer-events: none; }
.mrm-ptmenu .mot-dropdown__item.is-busy > svg:first-child { display: none; }
.mrm-ptmenu .mot-dropdown__item.is-busy::before {
	content: '';
	flex: none;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: mot-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.mrm-ptmenu .mot-dropdown__item.is-busy::before { animation-duration: 2.4s; }
}
/* A hold on the map or the sheet's chrome must not start iOS's text
   selection ("Copy / Find Selection / Look Up", tester 2026-09-29): no
   selection or callout on the map, the stats row, the sheet's grip, head and
   tabs. Real text fields keep theirs. */
#mrm-map,
.mrm-stats,
.mrm-side__grip,
.mrm-side__head,
.mrm-tabbar {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
#mrm-map input,
#mrm-map textarea,
.mrm-side__head input {
	-webkit-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
}

/* ── Phone held sideways (Ayrton 2026-10-01, "1. A"; V7 landscape) ─────────
   At 844 x 390 the sheet opened at half (56 %) and the map's controls rode
   at bottom: 56 %, so the layer button ended under the site header (y 34-78,
   measured) and could not be tapped. Like Explore (core d1dac12c): the sheet
   opens LOWER, leaving a 190 px map band in which the layer button, the zoom
   and the credit (bottom-left) all fit. peek = the grip + the head (84 px);
   half = the band; full is unchanged. Both stay inside the drag snap's
   fractions (peek < .36, half .36-.78, route-maker.js). Portrait unchanged. */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 500px) {
	.mrm-side[data-height="peek"],
	.mrm-side[data-view="poi"][data-height="peek"]:has(.mrm-poi-modeline:not([hidden])) { height: 84px; }
	.mrm-side[data-height="half"] { height: calc(100% - 190px); }
}

/* ── The generate loader (Ayrton 2026-10-04 22:00: "B · de kaart zoekt mee en
   E · skelet van de routekaart"; brand guide #rm-gen-loader) ───────────────
   B, on the map: the route draws itself in (provisional dashed, then final).
   The dashed search lines that ran between the pins while phase 1 ran were
   removed (Ayrton 2026-10-06).
   E, in the panel: the result card. An empty title or value IS the skeleton
   (:empty::before), so filling it in never moves anything; the thin bar runs
   until phase 2 is in. Monochrome: orange stays Generate's. */
.mrm-gen-result {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: hidden;
	padding: 14px 14px 12px;
	border: 1px solid var(--mot-border, rgba(255,255,255,.09));
	border-radius: var(--mot-radius, 12px);
	background: var(--mot-bg-card, #131313);
}
.mrm-gen-result[hidden] { display: none; }
/* The thin indeterminate bar along the card's top edge. */
.mrm-gen-result__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	overflow: hidden;
}
.mrm-gen-result__bar::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 30%;
	border-radius: 2px;
	background: var(--mot-text, #f2f2f2);
	animation: mrm-gen-bar 1.4s ease-in-out infinite;
}
@keyframes mrm-gen-bar {
	from { transform: translateX(-100%); }
	to   { transform: translateX(334%); }
}
.mrm-gen-result[data-state="final"] .mrm-gen-result__bar { visibility: hidden; }
.mrm-gen-result[data-state="final"] .mrm-gen-result__bar::before { animation: none; } /* hidden is not stopped */
/* Stage mode (LCG, MRM 1.19.209): one segment per stage of a long route, under the
   title. Pending = the border, done = ink, the stage in progress shimmers, a stage that
   rides the fast road is muted and dashed. Monochrome, like the bar above it. */
.mrm-gen-result__stages {
	display: flex;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mrm-gen-result__stages[hidden] { display: none; }
.mrm-gen-result__stage {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--mot-border, rgba(255,255,255,.09));
}
.mrm-gen-result__stage--done { background: var(--mot-text, #f2f2f2); }
.mrm-gen-result__stage--fast {
	background: repeating-linear-gradient(90deg, var(--mot-text-muted, #9b9b9b) 0 6px, transparent 6px 9px);
}
.mrm-gen-result__stage--current {
	background: linear-gradient(90deg, var(--mot-bg-raised, #202020) 25%, var(--mot-text-muted, #9b9b9b) 50%, var(--mot-bg-raised, #202020) 75%);
	background-size: 200% 100%;
	animation: mot-shimmer 1.5s ease infinite;
}
.mrm-gen-result[data-state="final"] .mrm-gen-result__stages { display: none; }
.mrm-gen-result__head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.mrm-gen-result__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font: 700 1.0625rem/1.5rem var(--mot-font-heading, 'Outfit', sans-serif);
	color: var(--mot-text, #f2f2f2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Provisional: the dashed outline echoes the dashed line on the map. */
.mrm-gen-result__tag {
	display: none;
	flex: none;
	padding: 1px 8px;
	border: 1px dashed var(--mot-text-muted, #9b9b9b);
	border-radius: var(--mot-radius-pill, 999px);
	font: 700 .6875rem/1.25rem var(--mot-font-body, 'Nunito Sans', sans-serif);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mot-text-muted, #9b9b9b);
}
.mrm-gen-result[data-state="provisional"] .mrm-gen-result__tag { display: inline-block; }
.mrm-gen-result__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
}
.mrm-gen-result__stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2px;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--mot-border, rgba(255,255,255,.09));
	border-radius: var(--mot-radius-sm, 8px);
}
/* Sentence case and free to wrap: "Temps de conduite" does not fit a third
   of the sidebar in capitals. */
.mrm-gen-result__label {
	font: 600 .75rem/1rem var(--mot-font-body, 'Nunito Sans', sans-serif);
	color: var(--mot-text-muted, #9b9b9b);
	overflow-wrap: anywhere;
}
.mrm-gen-result__value {
	margin: 0;
	height: 1.5rem;
	font: 700 1rem/1.5rem var(--mot-font-heading, 'Outfit', sans-serif);
	font-variant-numeric: tabular-nums;
	color: var(--mot-text, #f2f2f2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mrm-gen-result__status {
	margin: 0;
	min-height: 1.25rem;
	font-size: .8125rem;
	line-height: 1.25rem;
	color: var(--mot-text-muted, #9b9b9b);
}
/* Done: nothing left to say (an empty line read as a gap in the card). */
.mrm-gen-result[data-state="final"] .mrm-gen-result__status { display: none; }
/* After 8 s and after 30 s of phase 1: why it takes long, and that Cancel loses nothing. */
.mrm-gen-result__note {
	margin: 0;
	padding: 8px 10px;
	border-radius: var(--mot-radius-sm, 8px);
	background: var(--mot-bg-raised, #202020);
	font-size: .8125rem;
	line-height: 1.25rem;
	color: var(--mot-text, #f2f2f2);
}
.mrm-gen-result__note:empty { display: none; }

/* The skeleton: core .mot-skeleton's gradient and shimmer, drawn where a value
   is still empty: the title, the three stats and each curviness level's km. */
.mrm-gen-result__title:empty::before,
.mrm-gen-result__value:empty::before,
.mrm-gen-curves__stats:empty::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 70%;
	height: 14px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--mot-bg-raised, #202020) 25%, var(--mot-border, rgba(255,255,255,.09)) 50%, var(--mot-bg-raised, #202020) 75%);
	background-size: 200% 100%;
	animation: mot-shimmer 1.5s ease infinite;
}
.mrm-gen-result__title:empty::before { width: 55%; height: 16px; }
.mrm-gen-curves__stats:empty::before { width: 3.5em; height: 10px; }

/* Phone: the card scrolls into view above the pinned Generate / Cancel bar. */
@media (max-width: 959px) {
	.mrm-side[data-view="generate"] .mrm-gen-result { scroll-margin-bottom: 96px; }
}

/* Reduced motion, the calm version: no shimmer, the bar a still faint line; the route lines appear
   at once (route-maker.js skips the draw-in). */
@media (prefers-reduced-motion: reduce) {
	.mrm-gen-result__bar::before { animation: none; width: 100%; opacity: .25; }
	.mrm-gen-result__stage--current { animation: none; background: var(--mot-text-muted, #9b9b9b); }
	.mrm-gen-result__title:empty::before,
	.mrm-gen-result__value:empty::before,
	.mrm-gen-curves__stats:empty::before { animation: none; }
}