/* ================================================================
 *  Route Maker — Create / Edit Page
 *  Full-viewport layout matching Motarva's map-browse pattern.
 *  Mobile-first: stacked → 70/30 split at 960px
 * ============================================================= */

/* ── Body override for fullscreen (set via $mot_extra_body_class) ── */
.mrm-fullscreen-body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
	background: var(--mot-bg, #151515);
}

/* ── Main wrapper: fixed below the header, fill remaining viewport ── */
.mrm-wrap {
	position: fixed;
	top: var(--mot-header-h-mob, 0px);
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	background: var(--mot-bg, #151515);
	color: var(--mot-text, #f2f2f2);
	font-family: var(--mot-font, system-ui, -apple-system, sans-serif);
	z-index: 1;
}

/* ── Stats bar ───────────────────────────────────────────────── */
.mrm-stats {
	display: flex;
	align-items: center;
	gap: var(--sp-4, 1rem);
	padding: var(--sp-2, .5rem) var(--sp-4, 1rem);
	background: var(--mot-bg-card, #1f1f1f);
	border-bottom: 1px solid var(--mot-border, rgba(255,255,255,.08));
	font-size: .8125rem;
	z-index: 10;
	flex-shrink: 0;
}
.mrm-stats__item {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--mot-text-muted, #9b9b9b);
}
.mrm-stats__icon {
	width: 14px;
	height: 14px;
}
/* Leading "back to My Routes" control — a real, readable back affordance at
   the start of the stats bar (was a low-contrast folder link buried in the
   far top-right corner). */
.mrm-stats__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 8px;
	margin-right: 2px;
	border-radius: var(--mot-radius-sm, 8px);
	color: var(--mot-text, #f2f2f2);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--mot-transition, .18s ease), color var(--mot-transition, .18s ease);
}
.mrm-stats__back:hover,
.mrm-stats__back:focus-visible {
	background: var(--mot-bg-raised, #2a2a2a);
	color: var(--mot-text, #f2f2f2);
}
.mrm-stats__divider {
	width: 1px;
	align-self: stretch;
	margin: 4px 4px;
	background: var(--mot-border, rgba(255,255,255,.08));
}

/* ── Map column ──────────────────────────────────────────────── */
.mrm-map-col {
	position: relative;
	flex: 1;
	min-height: 0;
}
.mrm-map {
	position: absolute;
	inset: 0;
	background: var(--mot-bg, #151515);
}

/* ── Map toolbar ─────────────────────────────────────────────── */
.mrm-toolbar {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 500;
}
.mrm-toolbar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--mot-border);
	border-radius: 50%;
	background: var(--mot-bg-card, #1f1f1f);
	color: var(--mot-text, #f2f2f2);
	cursor: pointer;
	transition: background var(--mot-transition), border-color var(--mot-transition), color var(--mot-transition);
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.mrm-toolbar__btn:hover:not(:disabled) {
	background: var(--mot-bg-raised, #2a2a2a);
	border-color: var(--mot-text-muted, #9b9b9b);
}
.mrm-toolbar__btn:disabled {
	/* Fade the glyph, never the whole button: at 35% total opacity the white
	   circle vanished against light map tiles and disabled tools read as bare
	   icons floating on the map. The surface stays solid so the toolbar keeps
	   its shape; only the icon signals the disabled state. */
	cursor: not-allowed;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.mrm-toolbar__btn:disabled svg {
	opacity: .35;
}
.mrm-toolbar__btn--danger:hover:not(:disabled) {
	background: var(--mot-red, #D93025);
	border-color: var(--mot-red, #D93025);
	color: #fff;
}
.mrm-toolbar__btn svg {
	width: 18px;
	height: 18px;
}

/* ── Sidebar (hidden on mobile) ──────────────────────────────── */
.mrm-sidebar {
	display: none;
}
.mrm-sidebar__inner {
	padding: var(--sp-6, 1.5rem);
}
.mrm-sidebar__title {
	margin: 0 0 var(--sp-4, 1rem);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--mot-text, #f2f2f2);
}

.mrm-form__actions {
	display: flex;
	gap: var(--sp-2, .5rem);
	margin-top: var(--sp-4, 1rem);
}
.mrm-form__actions .mot-btn {
	flex: 1;
	justify-content: center;
}

/* ── Published actions panel ─────────────────────────────────── */
.mrm-published-actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2, .5rem);
}
.mrm-published-actions__msg {
	display: flex;
	align-items: center;
	gap: var(--sp-2, .5rem);
	padding: var(--sp-3, .75rem);
	border-radius: var(--mot-radius-sm, 6px);
	background: rgba(34, 197, 94, .1);
	color: var(--mot-green, #00875A);
	font-weight: 600;
	font-size: .875rem;
	margin-bottom: var(--sp-2, .5rem);
}
.mrm-published-actions__msg svg {
	width: 20px;
	height: 20px;
}
.mrm-published-actions .mot-btn {
	justify-content: center;
	width: 100%;
}
/* ── Mobile action bar ───────────────────────────────────────── */
.mrm-action-bar {
	display: flex;
	gap: var(--sp-2, .5rem);
	padding: var(--sp-3, .75rem) var(--sp-4, 1rem);
	background: var(--mot-bg-card, #1f1f1f);
	border-top: 1px solid var(--mot-border, rgba(255,255,255,.08));
	flex-shrink: 0;
	z-index: 100;
}
.mrm-action-bar .mot-btn {
	flex: 1;
	justify-content: center;
}

/* ── Mobile slide-up panel ───────────────────────────────────── */
.mrm-panel-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
.mrm-panel-overlay--show {
	opacity: 1;
	pointer-events: auto;
}

.mrm-panel {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	max-height: 80vh;
	background: var(--mot-bg-card, #1f1f1f);
	border-top: 1px solid var(--mot-border, rgba(255,255,255,.08));
	border-radius: var(--mot-radius, 12px) var(--mot-radius, 12px) 0 0;
	z-index: 9999;
	transform: translateY(100%);
	visibility: hidden;
	transition: transform .3s ease, visibility .3s;
	overflow-y: auto;
}
.mrm-panel--show {
	transform: translateY(0);
	visibility: visible;
}
.mrm-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-4, 1rem);
	border-bottom: 1px solid var(--mot-border, rgba(255,255,255,.08));
	position: sticky;
	top: 0;
	background: var(--mot-bg-card, #1f1f1f);
}
.mrm-panel__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
}
.mrm-panel__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	color: var(--mot-text-muted, #9b9b9b);
	cursor: pointer;
	border-radius: var(--mot-radius-sm, 6px);
}
.mrm-panel__close:hover {
	background: var(--mot-bg-raised, #2a2a2a);
	color: var(--mot-text, #f2f2f2);
}
.mrm-panel__close svg {
	width: 20px;
	height: 20px;
}
.mrm-panel__body {
	padding: var(--sp-4, 1rem);
}

/* ── Leaflet zoom control — merged pill with divider ────────── */
.mrm-map .leaflet-control-zoom {
	border: 1px solid var(--mot-border) !important;
	border-radius: 22px !important;
	background: var(--mot-bg-card, #1f1f1f) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.mrm-map .leaflet-control-zoom a {
	width: 44px;
	height: 44px;
	line-height: 44px;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--mot-text, #f2f2f2) !important;
	font-size: 18px;
	box-shadow: none;
	transition: background var(--mot-transition);
}
.mrm-map .leaflet-control-zoom a:hover {
	background: var(--mot-bg-raised, #2a2a2a) !important;
}
.mrm-map .leaflet-control-zoom a.leaflet-control-zoom-in {
	border-bottom: 1px solid var(--mot-border) !important;
}

/* ── Leaflet.Draw overrides ──────────────────────────────────── */
.leaflet-draw-toolbar {
	display: none !important;
}
.leaflet-draw-actions {
	display: none !important;
}

/* Accent polyline color */
.leaflet-interactive {
	stroke: var(--mot-accent, #ff6b35) !important;
}

/* ── Leaflet layer control — dark theme, round toggle ──────── */
/* Collapsed: container invisible — toggle button is the only visible element */
.leaflet-control-layers {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--mot-text, #f2f2f2) !important;
}
/* Expanded: container gets styled card appearance */
.leaflet-control-layers-expanded {
	background: var(--mot-bg-card, #1f1f1f) !important;
	border: 1px solid var(--mot-border) !important;
	border-radius: var(--mot-radius, 12px) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important;
}
.leaflet-control-layers-toggle,
.leaflet-retina .leaflet-control-layers-toggle,
.leaflet-touch .leaflet-control-layers-toggle {
	background: var(--mot-bg-card, #1f1f1f) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
	border: 1px solid var(--mot-border) !important;
	border-radius: 50% !important;
	width: 44px !important;
	height: 44px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	transition: background-color var(--mot-transition), border-color var(--mot-transition);
}
.leaflet-control-layers-toggle:hover {
	background-color: var(--mot-bg-raised, #2a2a2a) !important;
	border-color: var(--mot-text-muted) !important;
}
/* padding for expanded state (bg/border set above) */
.leaflet-control-layers-expanded {
	padding: 8px 12px 8px 8px !important;
}
.leaflet-control-layers label {
	color: var(--mot-text, #f2f2f2) !important;
	font-size: .8125rem;
}
.leaflet-control-layers-separator {
	border-top-color: var(--mot-border) !important;
}

/* Light theme: swap SVG stroke to dark */
html.mot-theme-light .leaflet-control-layers-toggle,
html.mot-theme-light .leaflet-retina .leaflet-control-layers-toggle {
	background: var(--mot-bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
}

/* ── Tag chips ────────────────────────────────────────────────── */
.mrm-tag-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.mrm-tag-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border: 1px solid var(--mot-border, rgba(255,255,255,.08));
	border-radius: 20px;
	background: transparent;
	color: var(--mot-text-muted, #9b9b9b);
	font-size: .75rem;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--mot-transition, .18s ease);
	text-transform: capitalize;
}
/* Tags are MULTI-select, so they take core's multi-select chip treatment
   (.mot-vehicle-grid__item:has(input:checked)): ink border on a raised
   surface, never an inversion — several chips lit at once would otherwise
   read as several primary actions. Orange is CTA-only (2026-08-15). */
.mrm-tag-chip:hover {
	border-color: var(--mot-text-muted, #9b9b9b);
	color: var(--mot-text, #f2f2f2);
}
.mrm-tag-chip--active {
	background: var(--mot-bg-raised, #2a2a2a);
	border-color: var(--mot-text, #f2f2f2);
	color: var(--mot-text, #f2f2f2);
}

/* ── Location search bar ─────────────────────────────────────── */
.mrm-search {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 500;
	width: 320px;
}
.mrm-search__input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--mot-bg-card, #1f1f1f);
	border: 1px solid var(--mot-border, rgba(255,255,255,.08));
	border-radius: var(--mot-radius-sm, 6px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.mrm-search__icon {
	width: 16px;
	height: 16px;
	color: var(--mot-text-muted, #9b9b9b);
	flex-shrink: 0;
}
.mrm-search__input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: var(--mot-text, #f2f2f2);
	font-size: .8125rem;
	font-family: inherit;
	min-width: 0;
}
.mrm-search__input::placeholder {
	color: var(--mot-text-muted, #9b9b9b);
}
.mrm-search__results {
	display: none;
	margin-top: 4px;
	background: var(--mot-bg-card, #1f1f1f);
	border: 1px solid var(--mot-border, rgba(255,255,255,.08));
	border-radius: var(--mot-radius-sm, 6px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
	max-height: 240px;
	overflow-y: auto;
}
.mrm-search__results--open {
	display: block;
}
.mrm-search__result {
	padding: 8px 12px;
	font-size: .8125rem;
	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, #2a2a2a);
}
.mrm-search__result + .mrm-search__result {
	border-top: 1px solid var(--mot-border, rgba(255,255,255,.08));
}
.mrm-search__empty {
	padding: 12px;
	font-size: .8125rem;
	color: var(--mot-text-muted, #9b9b9b);
	text-align: center;
}
.mrm-search-pin {
	background: none !important;
	border: none !important;
}
.mrm-search-pin__wrap {
	position: relative;
	display: flex;
	align-items: flex-end;
}
.mrm-search-pin__label {
	position: absolute;
	left: 28px;
	bottom: 14px;
	white-space: nowrap;
	background: var(--mot-bg-card, #1f1f1f);
	color: var(--mot-text, #f2f2f2);
	font-size: .75rem;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: var(--mot-radius-sm, 6px);
	border: 1px solid var(--mot-border, rgba(255,255,255,.08));
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
	pointer-events: none;
}

@media (max-width: 639px) {
	.mrm-search {
		left: 64px;
		right: 66px;
		width: auto;
		transform: none;
	}
}

/* ── Desktop layout (960px+) ─────────────────────────────────── */
@media (min-width: 960px) {
	.mrm-wrap {
		top: var(--mot-header-h, 0px);
		display: grid;
		grid-template-columns: 1fr 320px;
		grid-template-rows: auto 1fr;
	}

	.mrm-stats {
		grid-column: 1 / -1;
	}

	.mrm-map-col {
		min-height: 0;
	}

	.mrm-map {
		position: absolute;
		inset: 0;
	}

	.mrm-sidebar {
		display: block;
		overflow-y: auto;
		border-left: 1px solid var(--mot-border, rgba(255,255,255,.08));
		background: var(--mot-bg-card, #1f1f1f);
	}

	/* Hide mobile UI */
	.mrm-action-bar,
	.mrm-panel-overlay,
	.mrm-panel {
		display: none !important;
	}
}

/* ── Routing indicator ─────────────────────────────────────── */
.mrm-routing-indicator {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--mot-bg-card, #1f1f1f);
	color: var(--mot-text, #f2f2f2);
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Snap button active state ─────────────────────────────── */
/* A binary on/off toggle, so it INVERTS like every other selected control
   (2026-08-15 monochrome selection). !important stays only because the base
   .mrm-toolbar__btn fill would otherwise win. */
.mrm-toolbar__btn--active {
	background: var(--mot-selected-fill, #f2f2f2) !important;
	border-color: var(--mot-selected-fill, #f2f2f2);
	color: var(--mot-selected-label, #151515) !important;
}

/* ── Generate panel ────────────────────────────────────────── */
.mrm-generate-panel {
	position: absolute;
	top: 56px;
	left: 12px;
	z-index: 1000;
	width: 300px;
	background: var(--mot-bg-card, #1f1f1f);
	border-radius: var(--mot-radius-lg, 12px);
	padding: 16px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.3);
	/* R0: small-viewport insurance — the grown panel must scroll, never clip
	   the Generate button off-screen (measured 727px tall vs 667px viewport) */
	max-height: calc(100dvh - 140px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.mrm-generate-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.mrm-generate-panel__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--mot-text, #f2f2f2);
	margin: 0;
}
.mrm-generate-panel__close {
	background: none;
	border: none;
	color: var(--mot-muted, #9b9b9b);
	cursor: pointer;
	padding: 4px;
}
.mrm-generate-panel__close:hover { color: var(--mot-text, #f2f2f2); }

.mrm-gen-mode {
	display: flex;
	gap: 4px;
	margin-bottom: 12px;
	background: var(--mot-bg, #151515);
	border-radius: var(--mot-radius-sm);
	padding: 3px;
}
.mrm-gen-mode__btn {
	flex: 1;
	padding: 6px 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--mot-muted, #9b9b9b);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.mrm-gen-mode__btn--active {
	background: var(--mot-selected-fill, #f2f2f2);
	border-color: var(--mot-selected-fill, #f2f2f2);
	color: var(--mot-selected-label, #151515);
}
.mrm-gen-pick {
	display: flex;
	gap: 6px;
}
.mrm-gen-pick .mrm-input {
	flex: 1;
}
.mrm-gen-go {
	width: 100%;
	margin-top: 12px;
}
/* ── Route style toggle ───────────────────────────────────── */
.mrm-gen-style {
	display: flex;
	gap: 4px;
	background: var(--mot-bg, #151515);
	border-radius: var(--mot-radius-sm);
	padding: 3px;
}
.mrm-gen-style__btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 6px 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--mot-muted, #9b9b9b);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.mrm-gen-style__btn svg {
	width: 14px;
	height: 14px;
}
.mrm-gen-style__btn--active {
	background: var(--mot-selected-fill, #f2f2f2);
	border-color: var(--mot-selected-fill, #f2f2f2);
	color: var(--mot-selected-label, #151515);
}

/* ── Geocoder inputs: locate, swap, suggestions (v1.10.0) ─── */
.mrm-gen-inputwrap {
	position: relative;
}
.mrm-gen-inputwrap .mrm-input {
	padding-right: 34px;
}
.mrm-gen-locate {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--mot-muted, #9b9b9b);
	cursor: pointer;
}
.mrm-gen-locate:hover { color: var(--mot-text, #f2f2f2); }
.mrm-gen-locate svg { width: 15px; height: 15px; }
.mrm-gen-swaprow {
	display: flex;
	justify-content: center;
	margin: -6px 0;
}
.mrm-gen-swap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: var(--mot-bg, #151515);
	color: var(--mot-muted, #9b9b9b);
	cursor: pointer;
	transition: color 0.15s, transform 0.15s;
}
.mrm-gen-swap:hover { color: var(--mot-text, #f2f2f2); transform: rotate(180deg); }
.mrm-gen-swap svg { width: 14px; height: 14px; }
.mrm-gen-suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 1200;
	background: var(--mot-bg-raised, #2a2a2a);
	border-radius: var(--mot-radius-sm, 8px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.35);
	overflow: hidden;
	max-height: 220px;
	overflow-y: auto;
}
.mrm-gen-suggest__item {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: none;
	background: transparent;
	color: var(--mot-text, #f2f2f2);
	font-size: 12.5px;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mrm-gen-suggest__item:hover { background: var(--mot-bg, #151515); }

/* ── Curviness toggle (same pattern as the style toggle) ──── */
.mrm-gen-curves {
	display: flex;
	gap: 4px;
	background: var(--mot-bg, #151515);
	border-radius: var(--mot-radius-sm);
	padding: 3px;
}
/* A tier the server reported as the SAME route as another is removed from the
 * control (see applyLevelCollapse). The explicit rule is required: the
 * `display: flex` below out-specifies the UA stylesheet's `[hidden]`, so the
 * attribute alone would not hide anything. */
.mrm-gen-curves__btn[hidden] {
	display: none;
}
.mrm-gen-curves__btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 6px 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--mot-muted, #9b9b9b);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.mrm-gen-curves__btn svg {
	width: 14px;
	height: 14px;
}
.mrm-gen-curves__btn--active {
	background: var(--mot-selected-fill, #f2f2f2);
	border-color: var(--mot-selected-fill, #f2f2f2);
	color: var(--mot-selected-label, #151515);
}
/* The glyph keeps its level colour when picked — mirrors core's
   .mot-tag-check--curviness decision, where letting the inverted chip repaint
   the drawing made the one coloured thing on the control disappear. */
.mrm-gen-curves__btn--active svg {
	color: var(--mot-cv-medium);
}
.mrm-gen-curves__btn--active[data-curves="low"] svg    { color: var(--mot-cv-low); }
.mrm-gen-curves__btn--active[data-curves="medium"] svg { color: var(--mot-cv-medium); }
.mrm-gen-curves__btn--active[data-curves="high"] svg   { color: var(--mot-cv-high); }
.mrm-gen-curves__row {
	display: flex;
	align-items: center;
	gap: 5px;
}
.mrm-gen-curves__stats {
	font-size: 10.5px;
	font-weight: 600;
	opacity: 0.85;
	line-height: 1;
}

/* ── Avoid chips ──────────────────────────────────────────── */
.mrm-gen-avoid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.mrm-gen-avoid__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border: 1px solid var(--mot-border, rgba(255,255,255,.08));
	border-radius: 20px;
	background: transparent;
	color: var(--mot-muted, #9b9b9b);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--mot-transition, .18s ease);
}
.mrm-gen-avoid__chip svg {
	width: 12px;
	height: 12px;
}
/* MULTI-select (all four can be on at once), so border + raised surface
   rather than an inversion — see .mrm-tag-chip--active above. */
.mrm-gen-avoid__chip:hover {
	border-color: var(--mot-text-muted, #9b9b9b);
	color: var(--mot-text, #f2f2f2);
}
.mrm-gen-avoid__chip--active {
	background: var(--mot-bg-raised, #2a2a2a);
	border-color: var(--mot-text, #f2f2f2);
	color: var(--mot-text, #f2f2f2);
}

.mrm-gen-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	color: var(--mot-muted, #9b9b9b);
	font-size: 13px;
}

/* ── Spinner ───────────────────────────────────────────────── */
.mrm-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--mot-muted, #9b9b9b);
	border-top-color: var(--mot-accent, #ff6b35);
	border-radius: 50%;
	animation: mrm-spin 0.6s linear infinite;
}
.mrm-spinner--sm {
	width: 14px;
	height: 14px;
}
@keyframes mrm-spin {
	to { transform: rotate(360deg); }
}

/* ── Range slider ──────────────────────────────────────────── */
.mrm-range {
	width: 100%;
	accent-color: var(--mot-accent, #ff6b35);
}

/* Insert-on-route grab line (v1.10.4): invisible wide hit target over the
   route — crosshair signals "grab here to add a point". */
.mrm-line-grab { cursor: crosshair; }