/* ================================================================
 *  Route Maker — generate view (Round trip / To a place)
 *  Restyle 2026-09-24 (Ayrton: "dit ziet er nog wat oud uit").
 *
 *  The components are the design system's (.mot-field-label, .mot-field,
 *  .mot-range, .mot-segmented, .mot-toggle-chip; brand guide #route-maker).
 *  This file only lays them out in the sidebar and wins over the pre-R2
 *  generator rules in route-maker.css, which it loads after. Every rule is
 *  scoped to .mrm-generate-panel. State comes from the classes route-maker.js
 *  already toggles (--active) and from aria-pressed, which it now also sets.
 * ============================================================= */

.mrm-wrap--r2 .mrm-generate-panel {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5, 1.25rem);
}
.mrm-generate-panel .mrm-gen__field { margin: 0; }

/* Places: the Save dialog's field look, locate inside the start field. */
.mrm-generate-panel .mrm-gen-inputwrap .mot-field__input,
.mrm-generate-panel .mot-field__input {
	min-height: 52px;
	padding: 0 52px 0 14px;
	border-radius: var(--mot-radius, 12px);
	font-size: .9375rem;
}
.mrm-generate-panel #mrm-gen-end.mot-field__input { padding-right: 14px; }
.mrm-generate-panel .mot-field__input:focus {
	border-color: var(--mot-text, #f2f2f2);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mot-text, #f2f2f2) 12%, transparent);
}
.mrm-generate-panel .mrm-gen-locate.mot-field__action {
	right: 4px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	color: var(--mot-text-muted, #9b9b9b);
}
.mrm-generate-panel .mrm-gen-locate.mot-field__action:hover,
.mrm-generate-panel .mrm-gen-locate.mot-field__action:focus-visible {
	background: var(--mot-bg-raised, #202020);
	color: var(--mot-text, #f2f2f2);
}
.mrm-generate-panel .mrm-gen-locate svg { width: 18px; height: 18px; }

/* Swap: a round button on the seam between start and end, right-aligned. */
.mrm-generate-panel .mrm-gen-swaprow {
	justify-content: flex-end;
	margin: calc(-1 * var(--sp-5, 1.25rem) - 2px) 12px calc(-1 * var(--sp-5, 1.25rem) - 10px);
	position: relative;
	z-index: 1;
	pointer-events: none;
}
.mrm-generate-panel .mrm-gen-swap {
	width: 44px;
	height: 44px;
	border: 1px solid var(--mot-border, rgba(255,255,255,.12));
	background: var(--mot-bg-card, #131313);
	color: var(--mot-text, #f2f2f2);
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
	pointer-events: auto;
}
.mrm-generate-panel .mrm-gen-swap svg { width: 16px; height: 16px; }
.mrm-generate-panel .mrm-gen-swap:focus-visible { outline: 2px solid var(--mot-text, #f2f2f2); outline-offset: 2px; }

/* Distance: label left, value right, the slider, then its ends. */
.mrm-gen__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3, .75rem);
	margin-bottom: 4px;
}
.mrm-gen__head .mot-field-label { margin: 0; }
.mrm-gen__value {
	font-family: var(--mot-font-heading, 'Outfit', sans-serif);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--mot-text, #f2f2f2);
	font-variant-numeric: tabular-nums;
}
.mrm-generate-panel .mrm-range.mot-range { accent-color: auto; }
.mrm-gen__scale {
	display: flex;
	justify-content: space-between;
	margin-top: 2px;
	font-size: .75rem;
	color: var(--mot-text-muted, #9b9b9b);
	font-variant-numeric: tabular-nums;
}

/* Curviness: one segmented surface; the km of each level appears under its
 * label once a route was generated. */
.mrm-generate-panel .mrm-gen-curves.mot-segmented {
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--mot-border, rgba(255,255,255,.12));
	border-radius: var(--mot-radius, 12px);
	background: var(--mot-bg, #0a0a0a);
}
.mrm-generate-panel .mrm-gen-curves__btn.mot-segmented__opt {
	min-height: 52px;
	padding: 6px 4px;
	border: 1px solid transparent;
	border-radius: calc(var(--mot-radius, 12px) - 4px);
	color: var(--mot-text-muted, #9b9b9b);
	font-size: .875rem;
	font-weight: 700;
}
.mrm-generate-panel .mrm-gen-curves__btn.mot-segmented__opt:hover:not(.mrm-gen-curves__btn--active) {
	background: var(--mot-bg-raised, #202020);
	color: var(--mot-text, #f2f2f2);
}
.mrm-generate-panel .mrm-gen-curves__btn--active.mot-segmented__opt {
	background: var(--mot-selected-soft, var(--mot-bg-raised, #202020));
	border-color: var(--mot-text, #f2f2f2);
	box-shadow: inset 0 0 0 .5px var(--mot-text, #f2f2f2);
	color: var(--mot-text, #f2f2f2);
}
.mrm-generate-panel .mrm-gen-curves__row { gap: 6px; }
.mrm-generate-panel .mrm-gen-curves__btn svg { width: 16px; height: 16px; }
.mrm-generate-panel .mrm-gen-curves__stats {
	font-size: .75rem;
	font-weight: 600;
	opacity: .8;
	font-variant-numeric: tabular-nums;
}

/* Avoid: pill toggles, soft grey + outline when on (multi-select; 2026-09-24). */
.mrm-generate-panel .mrm-gen-avoid { gap: 8px; }
.mrm-generate-panel .mrm-gen-avoid__chip.mot-toggle-chip {
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--mot-border, rgba(255,255,255,.12));
	background: transparent;
	color: var(--mot-text, #f2f2f2);
	font-size: .875rem;
	font-weight: 600;
}
.mrm-generate-panel .mrm-gen-avoid__chip svg { width: 16px; height: 16px; }
.mrm-generate-panel .mrm-gen-avoid__chip.mot-toggle-chip:hover:not(.mrm-gen-avoid__chip--active) {
	border-color: var(--mot-text-muted, #9b9b9b);
	color: var(--mot-text, #f2f2f2);
}
.mrm-generate-panel .mrm-gen-avoid__chip--active.mot-toggle-chip {
	background: var(--mot-selected-soft, var(--mot-bg-raised, #202020));
	border-color: var(--mot-text, #f2f2f2);
	box-shadow: inset 0 0 0 .5px var(--mot-text, #f2f2f2);
	color: var(--mot-text, #f2f2f2);
}

/* Actions: Generate (orange until a result exists; Cancel in its place while a
 * generation runs), then Edit this route. */
.mrm-gen__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2, .5rem);
	padding-top: var(--sp-4, 1rem);
	border-top: 1px solid var(--mot-border, rgba(255,255,255,.09));
}
.mrm-generate-panel .mrm-gen-go,
.mrm-generate-panel .mrm-gen-cancel,
.mrm-generate-panel .mrm-gen-edit {
	width: 100%;
	min-height: 48px;
	margin: 0;
	justify-content: center;
}