/*
 * Motarva — Route preview sheet (route-preview.css)
 *
 * The content of the sheet that opens when a route is picked: on the explore
 * map (inside .mot-sidebar / .mot-sheet, whose host positioning stays in
 * map-browse.css) and on the browse page (the docked pane + modal sheet hosts
 * defined at the bottom of this file). Rendered by route-preview.js.
 *
 * Moved out of map-browse.css on 2026-08-20 so both pages load one stylesheet.
 * Tokens only: every colour is var(--mot-*, fallback) from design-system.css.
 *
 * Scope: docs/route-preview-sheet-scope.md
 */

/* ── Hero image ──────────────────────────────────────────────────────────── */
.mot-hero {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--mot-radius, 12px);
}
.mot-hero--single { height: 200px; }
.mot-hero--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
	height: 180px;
}
.mot-hero--svg {
	height: 160px;
	background: var(--mot-bg-raised, #2a2a2a);
}
.mot-hero--svg svg { width: 100%; height: 100%; }
.mot-hero--empty {
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mot-bg-raised, #2a2a2a);
	color: var(--mot-text-muted, #9b9b9b);
}
.mot-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
	min-height: 0;
	transition: transform .3s ease;
}
.mot-hero__img:hover { transform: scale(1.04); }
/* The fallback plate is not a photo: no lightbox, no zoom. */
.mot-hero__img--placeholder,
.mot-hero__img--placeholder:hover { cursor: default; transform: none; }
.mot-hero__overlay {
	position: absolute;
	top: 8px;
	display: flex;
	gap: 6px;
	z-index: 2;
}
.mot-hero__overlay--left { left: 8px; }
.mot-hero__overlay--right { right: 8px; }
.mot-hero__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	/* Theme-aware: dark card surface in dark mode, white in light mode. */
	background: var(--mot-bg-card, #1f1f1f);
	color: var(--mot-text, #f2f2f2);
	border: none;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--mot-shadow-sm, 0 1px 4px rgba(0,0,0,.2));
	transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
	padding: 0;
}
.mot-hero__btn:hover { transform: scale(1.08); box-shadow: var(--mot-shadow, 0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.25)); }
.mot-hero__btn:active { transform: scale(.92); }
.mot-hero__btn svg, .mot-hero__btn i { width: 16px; height: 16px; }
.mot-hero__btn--fav.mot-fav-btn {
	position: static;
	opacity: 1;
	background: var(--mot-bg-card, #1f1f1f);
	width: 32px !important;  /* design-system grows .mot-fav-btn to 44px under 768px; here it matches its neighbours */
	height: 32px !important;
	padding: 0;
}
.mot-hero__btn--fav.mot-fav-btn svg.lucide { width: 16px; height: 16px; }
.mot-hero__btn--fav svg.lucide {
	/* Theme-aware stroke — inherits from parent .mot-hero__btn color. */
	stroke: var(--mot-text, #f2f2f2);
	stroke-width: 2;
	fill: transparent;
	filter: none;
}
.mot-hero__btn--fav.mot-fav--active { background: var(--mot-bg-card, #1f1f1f); }
.mot-hero__btn--fav.mot-fav--active svg.lucide {
	fill: var(--mot-fav, #FF385C);
	stroke: var(--mot-fav, #FF385C);
}
/* Photo-count pill and the "No photos yet" label: a scrim over an image, the
   same in both themes, so the two scrim tokens carry it rather than a theme
   colour. The !important pair outlives the route page's own .mot-hero__count. */
.mot-hero__count,
.mot-sidebar .mot-hero__count,
.mot-sidebar__preview .mot-hero__count {
	position: absolute;
	bottom: 8px;
	left: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: var(--mot-scrim, rgba(0,0,0,.65)) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--mot-on-scrim, #ffffff) !important;
	font-size: .72rem;
	font-weight: 600;
	border-radius: var(--mot-radius-pill);
	cursor: pointer;
}
.mot-hero__placeholder-label { cursor: default; }
.mot-hero__count i,
.mot-hero__count svg.lucide,
.mot-sidebar .mot-hero__count svg.lucide,
.mot-sidebar__preview .mot-hero__count svg.lucide {
	width: 12px;
	height: 12px;
	stroke: var(--mot-on-scrim, #ffffff) !important;
	fill: none !important;
	color: var(--mot-on-scrim, #ffffff) !important;
}

/* ── Preview body ────────────────────────────────────────────────────────── */
.mot-preview__body {
	padding: var(--sp-3) var(--sp-1) 0;
}

/* ── One type size on every host ─────────────────────────────────────────── */
.mot-preview .mot-preview__title,
.mot-preview h1.mot-preview__title { font-size: 1.25rem; line-height: 1.3; margin: 0 0 var(--sp-1); }
.mot-preview__location { font-size: .85rem; display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-2); flex-wrap: wrap; }
/* The rating follows the place inline, "Belgium · Ardennes · ★ 4.5 (12)". It
   used to be pushed to the right edge, where on the explore and page hosts it
   collided with the close / save / open buttons on the title line (Ayrton,
   2026-08-21). The dot is drawn only when a place precedes it. */
.mot-preview__location .mot-preview__rating-link { flex: none; }
.mot-preview__place:not(:empty) + .mot-preview__rating-link::before { content: '·'; color: var(--mot-text-muted, #9b9b9b); font-weight: 400; margin-right: var(--sp-1); }

/* ── Badge row (matches .mot-single__top-badges) ────────────────────────── */
.mot-preview__badge-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-3);
}
.mot-preview__stat-inline {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	font-size: .82rem;
	font-weight: 600;
	color: var(--mot-text, #f2f2f2);
}
.mot-preview__stat-inline .mot-star--filled { color: var(--mot-yellow, #D4930D); }

/* Provenance hint under the stat tiles (a via-point file measured on the
   routed road, curviness-scope §6.1.3). Muted, one line, icon-led.
   The body is a flex column with gap 0 on every host (design-system.css), so
   the hint owns its own top spacing: a negative margin here sat 8px INSIDE the
   bottom tile row and clipped its border (Ayrton, 2026-08-26, Cornwall). */
.mot-preview__hint {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2, .5rem);
	margin: var(--sp-2, .5rem) 0 var(--sp-3, .75rem);
	font-size: .8rem;
	line-height: 1.4;
	color: var(--mot-text-muted, #9b9b9b);
}
.mot-preview__hint svg, .mot-preview__hint [data-lucide] { flex: none; width: 14px; height: 14px; margin-top: .15em; }
.mot-preview__stat-muted {
	font-weight: 400;
	color: var(--mot-text-muted, #9b9b9b);
}

/* ── Description collapse ────────────────────────────────────────────────── */
.mot-preview__desc {
	font-size: .875rem;
	line-height: 1.65;
	color: var(--mot-text-muted, #9b9b9b);
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--mot-border, rgba(255,255,255,.08));
	transition: max-height .3s ease;
}
.mot-preview__desc[data-collapsed="true"] {
	max-height: 100px;
	overflow: hidden;
	position: relative;
}
.mot-preview__desc[data-collapsed="true"]::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 40px;
	/* The fade reads the card token, so the light theme needs no second rule. */
	background: linear-gradient(transparent, var(--mot-bg-card, #1f1f1f));
	pointer-events: none;
}
.mot-preview__desc[data-collapsed="false"] { max-height: 2000px; }
.mot-preview__desc-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	background: none;
	border: none;
	color: var(--mot-text, #f2f2f2);
	font-size: .78rem;
	font-weight: 600;
	cursor: pointer;
	padding: var(--sp-2) 0 0;
	transition: color var(--mot-transition, .2s ease), gap var(--mot-transition, .2s ease);
}
.mot-preview__desc-toggle::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform .2s ease;
}
.mot-preview__desc-toggle[data-expanded="true"]::after {
	transform: rotate(180deg);
}
.mot-preview__desc-toggle:hover { color: var(--mot-text, #f2f2f2); }

/* ── Action bar ──────────────────────────────────────────────────────────── */
.mot-preview__action-bar {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	background: var(--mot-bg-card, #1f1f1f);
	border-top: 1px solid var(--mot-border, rgba(255,255,255,.08));
	padding: var(--sp-3) var(--sp-4);
}
.mot-preview__action-primary {
	position: relative;
	z-index: 2;
}
/* The Download control is itself the button (it opens the shared format
   picker) — it used to be a wrapper around one, hence both selectors. */
.mot-preview__action-primary,
.mot-preview__action-primary .mot-btn {
	width: 100%;
	justify-content: center;
	border-radius: var(--mot-radius-pill, 9999px);
	padding: .7rem 1.5rem;
	font-size: .88rem;
}

/* ── Failure state (payload did not come) ────────────────────────────────── */
.mot-preview__failed {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-8, 3rem) var(--sp-4) var(--sp-6);
	text-align: center;
	color: var(--mot-text-muted, #9b9b9b);
}
.mot-preview__failed p { margin: 0; font-size: .9rem; }
.mot-preview__failed svg { color: var(--mot-text-muted, #9b9b9b); }

/* ── Skeleton while the payload loads ────────────────────────────────────── */
.mot-skeleton-preview__photo-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	margin: 0 -16px;
	overflow: hidden;
}
.mot-skeleton-preview__photo { height: 160px; }
.mot-skeleton-preview__body { padding: 0 16px; }
.mot-skeleton-preview__badge { width: 180px; height: 20px; margin: 12px 0 8px; border-radius: var(--mot-radius-pill); }
.mot-skeleton-preview__title { width: 70%; height: 20px; margin: 6px 0; border-radius: 6px; }
.mot-skeleton-preview__location { width: 45%; height: 14px; margin: 6px 0; border-radius: 6px; }
.mot-skeleton-preview__line { width: 200px; height: 14px; margin: 8px 0; border-radius: 6px; }

/* ── Desktop sizes ───────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
	.mot-hero--single { height: 220px; }
	.mot-hero--grid { height: 200px; }
	.mot-hero--svg { height: 170px; }
	.mot-hero--empty { height: 130px; }
	.mot-skeleton-preview__photo { height: 180px; }
}

/* ═══ Hosts ═══════════════════════════════════════════════════════════════ */

/* The host-agnostic pane: a flex column whose .mot-preview__scroll scrolls and
   whose action bar stays put. The explore map keeps its own host rules
   (.mot-sidebar__preview / .mot-sheet .mot-preview in map-browse.css). */
.mot-preview-pane {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	background: var(--mot-bg-card, #1f1f1f);
}
.mot-preview-pane[hidden] { display: none; }
/* design-system's .mot-preview pads 0 16px 24px — written for the explore
   mobile host (#mot-preview IS .mot-preview). The sheet template's own
   .mot-preview wrapper must not pad again: one padding, the scroller's. */
.mot-preview-pane > .mot-preview,
.mot-sidebar__preview > .mot-preview,
.mot-preview .mot-preview { padding: 0; }
.mot-preview-pane .mot-preview__scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px 16px 24px;
}

/* ── Browse: docked pane (≥ 1024 px) ─────────────────────────────────────── */
/* An overlay, and nothing else moves (Ayrton, 2026-08-20): the pane slides in
   over the right-hand cards and the page underneath keeps its layout, its
   scroll position and its paint. A reflowing grid made riders lose the card
   they were looking at; sliding the whole page off to the left fixed that
   but repainted everything and took the heading and the filter bar with it.
   No backdrop: the cards the pane does not cover stay clickable, so a rider
   hops from card to card. 580 px is the explore sidebar's detail width.
   The hosts live on <body> (routes-archive.js moves them there) so no
   ancestor transform or overflow can ever clip them. */
:root { --mot-preview-pane-w: 580px; }
.mot-archive__pane { display: none; }

@media (min-width: 1024px) {
	.mot-archive__pane:not([hidden]) {
		display: flex;
		position: fixed;
		top: var(--mot-header-bar-h, 64px);
		right: 0;
		bottom: 0;
		width: var(--mot-preview-pane-w, 580px);
		z-index: 900; /* under the fixed header (1000), over the sticky pill bar (50) */
		border-left: 1px solid var(--mot-border, rgba(255,255,255,.08));
		box-shadow: var(--mot-shadow-hover, 0 2px 4px rgba(0,0,0,.25), 0 8px 28px rgba(0,0,0,.35));
		animation: mot-pane-in .25s cubic-bezier(.4,0,.2,1);
	}
}
@keyframes mot-pane-in {
	from { transform: translateX(100%); }
	to   { transform: none; }
}

/* ── Browse: modal sheet (< 1024 px) ─────────────────────────────────────── */
/* Two states only, open and closed: there is no map underneath to keep in
   view, so the peek/half stops of the explore sheet have no job here. */
.mot-preview-sheet {
	position: fixed;
	inset: 0;
	z-index: 1100; /* above the fixed header: this is a modal */
	display: block;
}
.mot-preview-sheet[hidden] { display: none; }
.mot-preview-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: var(--mot-scrim, rgba(0,0,0,.65));
	opacity: 0;
	transition: opacity .25s ease;
}
.mot-preview-sheet--open .mot-preview-sheet__backdrop { opacity: 1; }
.mot-preview-sheet__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 92dvh;
	display: flex;
	flex-direction: column;
	background: var(--mot-bg-card, #1f1f1f);
	border-radius: var(--mot-radius-lg, 16px) var(--mot-radius-lg, 16px) 0 0;
	box-shadow: var(--mot-shadow-hover, 0 2px 4px rgba(0,0,0,.25), 0 8px 28px rgba(0,0,0,.35));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	transform: translateY(100%);
	transition: transform .3s cubic-bezier(.4,0,.2,1);
	will-change: transform;
}
.mot-preview-sheet--open .mot-preview-sheet__panel { transform: translateY(0); }
.mot-preview-sheet--dragging .mot-preview-sheet__panel { transition: none; }
.mot-preview-sheet__handle-wrap {
	padding: 8px 0 2px;
	display: flex;
	justify-content: center;
	cursor: grab;
	flex-shrink: 0;
	touch-action: none; /* JS handles the drag */
}
.mot-preview-sheet__handle-wrap:active { cursor: grabbing; }
.mot-preview-sheet__handle {
	width: 36px;
	height: 4px;
	border-radius: 2px;
	background: var(--mot-border-strong, rgba(255,255,255,.2));
}
.mot-preview-sheet .mot-preview-pane { flex: 1; }
.mot-preview-sheet .mot-preview__scroll { padding: 0 12px 12px; }
/* Compact, as in the explore sheet */
.mot-preview-sheet .mot-stat-chips { margin-top: var(--sp-2); margin-bottom: var(--sp-2); gap: var(--sp-1); }
.mot-preview-sheet .mot-stat-chip { padding: var(--sp-1) var(--sp-2); font-size: .75rem; gap: var(--sp-1); }
.mot-preview-sheet .mot-stat-chip__icon { width: 13px; height: 13px; }
.mot-preview-sheet .mot-preview__author { padding: 8px 10px; gap: 8px; margin-bottom: 8px; }
.mot-preview-sheet .mot-preview__avatar { width: 28px; height: 28px; }
.mot-preview-sheet .mot-preview__author-name { font-size: .8rem; }

@media (min-width: 1024px) {
	.mot-preview-sheet { display: none !important; }
}
/* A sheet drawn in place for reference (the brand guide): no viewport, no
   breakpoint, the backdrop and panel stay inside their frame. */
.mot-preview-sheet--static {
	display: block !important;
	position: relative;
	inset: auto;
	z-index: auto;
	overflow: hidden;
}
@media (max-width: 1023.98px) {
	html.mot-sheet-lock { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.mot-archive__pane:not([hidden]) { animation: none; }
	.mot-preview-sheet__panel,
	.mot-preview-sheet__backdrop { transition: none; }
}

/* ═══ The sheet as a template (2026-08-21) ════════════════════════════════════
   partials/_route-sheet.php renders the body for all three hosts; these rules
   style what the PHP template adds over the old JS renderer: the stat tiles,
   the tab bar + panels, the photo grid, the four-control action bar with its
   overflow menu, and the route PAGE as a host (.mot-preview-pane--page).
   Scope: docs/route-detail-sheet-scope.md + docs/route-sheet-tabs-scope.md */

/* ── Pinned identity ─────────────────────────────────────────────────────── */
.mot-preview__badge-row .mot-preview__rating-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	font-size: .82rem;
	font-weight: 600;
	color: var(--mot-text, #f2f2f2);
	text-decoration: none;
	transition: opacity var(--mot-transition, .2s ease);
}
.mot-preview__badge-row .mot-preview__rating-link:hover { opacity: .7; text-decoration: none; }
.mot-preview__title .mot-builder-badge--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin-bottom: 0;
}
/* The numbers as tiles: the design-system grid (150–220 px tracks, packed
   left) does the sizing; the sheet only tightens the padding. */
.mot-preview__stats.mot-stat-grid { margin-top: var(--sp-3); }
.mot-preview__stats .mot-stat-tile { padding: var(--sp-3); }
.mot-preview__stats .mot-stat-tile__value { font-size: 1.125rem; }
.mot-preview__body .mot-ride-yours { margin: var(--sp-3) 0 0; }

/* ── Social proof: one bordered row, separators between the numbers ──────── */
.mot-proof {
	display: flex;
	align-items: stretch;
	margin-top: 0;
	border: 1px solid var(--mot-border, rgba(255,255,255,.08));
	border-radius: var(--mot-radius-lg, 16px);
	background: var(--mot-bg-card, #1f1f1f);
	overflow: hidden;
}
/* The proof row is a bordered container: the flat-section rule that removes
   the rule lines around About must not take its top edge. */
/* The proof row keeps its frame wherever it sits. The flat-section rules
 * further down (`--flat + --flat`, `:first-child`) zero the top border at
 * the same (0,2,0) and come later, so they won the moment the row moved
 * under About (a flat section); the sibling selector below is (0,3,0). */
.mot-preview__section.mot-proof,
.mot-preview__section--flat + .mot-preview__section.mot-proof,
.mot-preview__panel > .mot-preview__section.mot-proof:first-child { border-top: 1px solid var(--mot-border, rgba(255,255,255,.08)); padding-top: 0; }
.mot-proof__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: var(--sp-2) var(--sp-2);
	font-size: .78rem;
	color: var(--mot-text-muted, #9b9b9b);
	white-space: nowrap;
}
.mot-proof__item + .mot-proof__item { border-left: 1px solid var(--mot-border, rgba(255,255,255,.08)); }
.mot-proof__icon { width: 14px; height: 14px; flex: none; color: var(--mot-text-muted, #9b9b9b); }
.mot-proof__value { font-weight: 700; color: var(--mot-text, #f2f2f2); font-variant-numeric: tabular-nums; }
@media (max-width: 400px) {
	.mot-proof__item { flex-direction: column; gap: 2px; }
	.mot-proof__label { font-size: .7rem; }
}

/* ── No hero (explore, page): the buttons sit on the title line ──────────── */
.mot-preview__head {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
}
.mot-preview__head .mot-preview__title { flex: 1 1 auto; min-width: 0; }
.mot-preview__head-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
	margin-left: auto;
	padding-top: 2px; /* optical: centre the 32 px buttons on the title's first line */
}
.mot-preview__head-actions .mot-hero__overlay { position: static; display: contents; }

/* ── Browse: the live route map as hero, edge to edge ────────────────────── */
/* The pane's scroller pads 12 px 16 px; the hero bleeds over it. Leaflet
   draws into .mot-preview__map; the V9 plate underneath is the poster until
   the tiles arrive (and for no-JS). */
.mot-hero--map {
	position: relative;
	height: 260px;
	margin: -12px -16px 0;
	border-radius: 0;
	overflow: hidden;
	background: var(--mot-bg-raised, #2a2a2a);
}
.mot-preview-sheet .mot-hero--map { margin: 0 -12px 0; height: 220px; }
.mot-preview__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	z-index: 0;
}
.mot-preview__map { background: var(--mot-bg-raised, #2a2a2a); }
.mot-preview__map--live .mot-preview__map-poster { display: none; }
.mot-preview__map-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.mot-preview__map .leaflet-control-attribution {
	font-size: .6rem;
	background: var(--mot-scrim, rgba(0,0,0,.65));
	color: var(--mot-on-scrim, #fff);
}
.mot-preview__map .leaflet-control-attribution a { color: inherit; }
.mot-hero--map .mot-hero__overlay { z-index: 500; } /* above Leaflet's panes (400) */

/* ── Sections ────────────────────────────────────────────────────────────── */
.mot-preview__section {
	border-top: 1px solid var(--mot-border, rgba(255,255,255,.08));
	padding-top: var(--sp-4);
	margin-top: var(--sp-4);
}
.mot-preview__section--flat,
.mot-preview__section--flat + .mot-preview__section--flat,
.mot-preview__panel > .mot-preview__section:first-child,
.mot-preview__trip {
	border-top: 0;
	padding-top: 0;
}
.mot-preview__trip { margin-top: var(--sp-5); }
.mot-preview .mot-preview__section-title {  /* outranks .mot-page-wrap h2 on the page */
	font-family: var(--mot-font-heading);
	font-weight: var(--mot-font-heading-weight, 700);
	font-size: 1.0625rem;
	line-height: 1.25;
	margin: 0 0 var(--sp-3);
	color: var(--mot-text, #f2f2f2);
}
.mot-preview__section-sub {
	font-size: .85rem;
	color: var(--mot-text-muted, #9b9b9b);
	margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);
}
.mot-preview__desc {
	font-size: .9rem;
	line-height: 1.65;
	color: var(--mot-text-muted, #9b9b9b);
	overflow-wrap: anywhere;
	margin: 0;
	padding: 0;
	border: 0;
}
.mot-preview__summary { font-size: .95rem; line-height: 1.5; margin: 0; }
.mot-preview__meta .mot-gpx-chips { margin-bottom: 0; }
.mot-preview__meta .mot-gpx-chips + .mot-preview__vehicles { margin-top: var(--sp-3); }
.mot-preview__vehicles { margin-top: 0; }
.mot-preview__body .mot-preview__author { margin: 0; }
.mot-preview__author-detail {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.mot-preview__author-arrow {
	flex-shrink: 0;
	color: var(--mot-text-muted, #9b9b9b);
	opacity: .5;
	transition: opacity var(--mot-transition, .18s ease), transform var(--mot-transition, .18s ease);
}
.mot-preview__author:hover .mot-preview__author-arrow { opacity: 1; transform: translateX(2px); }
.mot-preview__body .mot-route-grid--compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.mot-preview__body .mot-route-timeline { margin: var(--sp-4) 0 0; }
.mot-preview__body .mot-corners { gap: var(--sp-4); }
.mot-preview__login-nudge { margin-top: var(--sp-4); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
/* Sticky at the top of the scroller: a long panel never loses its tab bar.
   The negative inline margins let the bar's background cover the scroller's
   padding so content does not peek out beside it while scrolling. */
.mot-preview__tabs.mot-tabs {
	position: sticky;
	top: 0;
	z-index: 3;
	margin: var(--sp-5) calc(-1 * var(--sp-4)) var(--sp-4);
	padding: 0 var(--sp-4);
	background: var(--mot-bg-card, #1f1f1f);
}
/* Blink measures sticky insets from the scroll container's CONTENT edge, so a
   scroller with 12 px top padding leaves a 12 px strip above a top:0 bar. The
   pane hosts pad 12 px (explore sidebar, browse pane), the sheets pad 0. */
.mot-preview-pane .mot-preview__tabs.mot-tabs,
.mot-sidebar__preview .mot-preview__tabs.mot-tabs { top: -12px; }
.mot-preview-sheet .mot-preview__tabs.mot-tabs,
.mot-sheet .mot-preview__tabs.mot-tabs {
	top: 0;
	margin-left: -12px;
	margin-right: -12px;
	padding: 0 12px;
}
.mot-preview__tab.mot-tab {
	flex: 1 1 0;
	justify-content: center;
	padding: var(--sp-3) var(--sp-2);
	font-size: .85rem;
	background: none;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	font-family: inherit;
}
.mot-preview__tab.mot-tab:focus-visible { outline: 2px solid var(--mot-text, #f2f2f2); outline-offset: -2px; }
.mot-preview__panel { min-width: 0; }
.mot-preview__panel[hidden],
.mot-preview--tabbed .mot-preview__panel:not(.mot-preview__panel--active) { display: none; }
/* No JS: every panel shows, each under its own rule line. */
.mot-preview:not(.mot-preview--tabbed) .mot-preview__panel + .mot-preview__panel {
	border-top: 1px solid var(--mot-border, rgba(255,255,255,.08));
	margin-top: var(--sp-5);
	padding-top: var(--sp-5);
}

/* ── Photos panel ────────────────────────────────────────────────────────── */
.mot-preview__photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
	border-radius: var(--mot-radius, 12px);
	overflow: hidden;
}
.mot-preview__photo {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--mot-bg-raised, #2a2a2a);
	cursor: pointer;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
}
/* Repeating bento (community-photos-scope D6, Ayrton 2026-08-21): one wide,
   two square, again — dense packing so a trailing single still fills. The
   grid's children are <figure>s (photo + attribution); the wide slot is the
   figure, the aspect ratio is the photo's. */
.mot-preview__photos { grid-auto-flow: dense; overflow: visible; }
.mot-preview__photo-item { margin: 0; min-width: 0; position: relative; }
.mot-preview__photo-item:nth-child(3n + 1) { grid-column: span 2; }
.mot-preview__photo-item:nth-child(3n + 1) .mot-preview__photo { aspect-ratio: 16 / 9; }
.mot-preview__photo-item .mot-preview__photo { width: 100%; border-radius: var(--mot-radius, 12px); }

/* ── Community photos: the bar, the attribution, the per-photo actions ──── */
.mot-preview__photos-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
	font-size: .85rem;
	color: var(--mot-text-muted, #9b9b9b);
}
.mot-preview__photos-bar .mot-btn { flex: none; text-decoration: none; }
.mot-preview__photo-add.is-busy { opacity: .6; pointer-events: none; }
/* The upload bar: one for the whole batch, under the Add button's row. */
.mot-preview__photos-bar { flex-wrap: wrap; }
.mot-preview__upload {
	flex: 1 0 100%;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-1);
}
.mot-preview__upload-track {
	flex: 1 1 auto;
	height: 6px;
	border-radius: 3px;
	background: var(--mot-bg-raised, #2a2a2a);
	overflow: hidden;
}
.mot-preview__upload-fill {
	height: 100%;
	width: 0;
	border-radius: 3px;
	background: var(--mot-accent, #ff6b35);
	transition: width .15s linear;
}
.mot-preview__upload-label {
	flex: none;
	font-size: .72rem;
	font-variant-numeric: tabular-nums;
	color: var(--mot-text-muted, #9b9b9b);
	min-width: 5.5em;
	text-align: right;
}
.mot-preview__photo-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	padding: 6px 2px 0;
	font-size: .72rem;
	color: var(--mot-text-muted, #9b9b9b);
	min-width: 0;
}
.mot-preview__photo-by {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.mot-preview__photo-by > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mot-preview__photo-by img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; }
.mot-preview__photo-by svg { width: 14px; height: 14px; flex: none; }
.mot-preview__photo-actions { display: inline-flex; gap: 2px; flex: none; }
.mot-preview__photo-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--mot-text-muted, #9b9b9b);
	cursor: pointer;
	transition: background var(--mot-transition, .2s ease), color var(--mot-transition, .2s ease);
}
.mot-preview__photo-act:hover { background: var(--mot-bg-raised, #2a2a2a); color: var(--mot-text, #f2f2f2); }
.mot-preview__photo-act svg { width: 14px; height: 14px; }
.mot-preview__photos-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 140px;
	border: 1px dashed var(--mot-border, rgba(255,255,255,.08));
	border-radius: var(--mot-radius, 12px);
	color: var(--mot-text-muted, #9b9b9b);
}
.mot-preview__photo-item.is-uploading .mot-preview__photo { opacity: .5; }
.mot-preview__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.mot-preview__photo:hover img { transform: scale(1.04); }
.mot-preview__photo:focus-visible { outline: 2px solid var(--mot-text, #f2f2f2); outline-offset: -2px; }
/* The hero's "Show all N" is a real control now (it opens the Photos tab). */
button.mot-hero__count { border: 0; font-family: inherit; }

/* ── Action bar: Download · Save · Ridden · More (+ View Route off-page) ──── */
.mot-preview__action-bar {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
}
.mot-preview__action-bar .mot-preview__action-primary,
.mot-preview__action-bar .mot-preview__action-primary.mot-btn {
	flex: 1 1 140px;
	width: auto;
	min-width: 0;
	padding: .7rem 1rem;
}
.mot-preview__action-bar .mot-preview__action-icon {
	flex: none;
	height: 42px;
	min-height: 42px;
	padding: 0 .9rem;
	border-radius: var(--mot-radius-pill, 9999px);
	gap: 6px;
	font-size: .85rem;
}
/* The favourite and ridden buttons reset the card-overlay styles they
   inherit from favorites.css / completions (position, opacity, size). */
/* Surface and border come from the .mot-btn--secondary tier (outlined since
   2026-08-21); only the card-overlay resets stay here. */
.mot-preview__action-bar .mot-fav-btn,
.mot-preview__action-bar .mot-driven-btn {
	position: static;
	width: auto;
	opacity: 1;
	color: var(--mot-text, #f2f2f2);
}
.mot-preview__action-bar .mot-driven-btn:not(.mot-driven--active) { border-color: var(--mot-btn-outline-border, var(--mot-border-strong, rgba(255,255,255,.3))); } /* main.css's own .mot-driven-btn border would differ from the tier */
.mot-preview__action-bar .mot-fav-btn:hover,
.mot-preview__action-bar .mot-driven-btn:hover,
.mot-preview__action-bar .mot-preview__more-btn:hover { transform: translateY(-1px); }
.mot-preview__action-bar .mot-fav-btn svg.lucide,
.mot-preview__action-bar .mot-driven-btn svg.lucide {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	filter: none;
}
.mot-preview__action-bar .mot-fav-btn.mot-fav--active svg.lucide {
	fill: var(--mot-fav, #FF385C);
	stroke: var(--mot-fav, #FF385C);
}
.mot-preview__action-bar .mot-driven-btn.mot-driven--active {
	border-color: var(--mot-green, #00875A);
	background: var(--mot-green-dim, rgba(0,135,90,.1));
	color: var(--mot-green, #00875A);
}
.mot-preview__action-bar .mot-driven-btn.mot-driven--active svg.lucide { stroke: var(--mot-green, #00875A); }
.mot-preview__more { position: relative; flex: none; }
.mot-preview__more-btn { width: 42px; padding: 0 !important; justify-content: center; }
.mot-preview__more-menu {
	top: auto;
	bottom: calc(100% + 6px);
	left: auto;
	right: 0;
	min-width: 220px;
}
.mot-preview__more-menu .mot-dropdown__item { font-size: .85rem; }
/* Narrow hosts: the three controls go icon-only, Download keeps its word. */
@media (max-width: 639px) {
	.mot-preview__action-bar { gap: var(--sp-1); }
	.mot-preview__action-bar .mot-preview__action-icon { padding: 0 .75rem; }
	.mot-preview__action-bar .mot-fav-btn__text,
	.mot-preview__action-bar .mot-driven-btn__text { display: none; }
}
.mot-preview-sheet .mot-preview__action-bar .mot-preview__action-icon,
.mot-sheet .mot-preview__action-bar .mot-preview__action-icon { padding: 0 .75rem; }
.mot-preview-sheet .mot-fav-btn__text, .mot-preview-sheet .mot-driven-btn__text,
.mot-sheet .mot-fav-btn__text, .mot-sheet .mot-driven-btn__text { display: none; }

/* ── The route PAGE as a host ───────────────────────────────────────────── */
/* The page scrolls; the pane is a column in the .mot-single grid beside the
   sticky map. No inner scroller, the tab bar sticks under the fixed header,
   the action bar sticks to the bottom of the viewport, as the old
   .mot-single__action-bar did. */
.mot-preview-pane--page {
	display: block;
	overflow: visible;
	min-height: 0;
	padding: var(--sp-5) var(--sp-4) 0;
}
/* design-system's .mot-preview is a flex scroller (overflow-y: auto) for the
   explore hosts; on the page that would make it the scroll container and
   kill both sticky bars. The page scrolls, so the wrapper is a plain block. */
.mot-preview-pane--page .mot-preview {
	display: block;
	overflow: visible;
	flex: none;
	padding: 0;
}
.mot-preview-pane--page .mot-breadcrumb { margin-bottom: var(--sp-4); }
.mot-preview-pane--page .mot-preview__scroll {
	overflow: visible;
	padding: 0;
}
.mot-preview-pane--page .mot-hero--single { height: 240px; }
.mot-preview-pane--page .mot-hero--grid { height: 220px; }
.mot-preview-pane--page .mot-img-manage { margin-top: var(--sp-4); }
.mot-preview-pane--page .mot-preview__body { padding: var(--sp-4) 0 0; }
/* Same type on all three sheets (Ayrton, 2026-08-21): the h1 on the page is
   the h3 size the sheets use; the tag differs, the size does not. */
.mot-preview-pane--page .mot-preview__stats.mot-stat-grid { margin-top: var(--sp-4); }
.mot-preview-pane--page .mot-preview__stats .mot-stat-tile { padding: var(--sp-4); }
.mot-preview-pane--page .mot-preview__stats .mot-stat-tile__value { font-size: 1.25rem; }
.mot-preview-pane--page .mot-preview__tabs.mot-tabs {
	top: var(--mot-header-h, 64px);
	margin-top: var(--sp-6);
}
.mot-preview-pane--page .mot-preview__tab.mot-tab { font-size: .9rem; padding: var(--sp-3) var(--sp-3); }
.mot-preview-pane--page .mot-preview__section { padding-top: var(--sp-5); margin-top: var(--sp-5); }
.mot-preview-pane--page .mot-preview__body .mot-route-grid--compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
/* A short tab (Corners, Photos, Reviews) must not let the footer ride up under
   the sheet and cut the sticky map short: every panel is at least the viewport
   minus header, tab bar and action bar, so the page stays a page. */
.mot-preview-pane--page .mot-preview__panel { min-height: calc(100dvh - var(--mot-header-h, 64px) - 130px); }
.mot-preview-pane--page .mot-preview__action-bar {
	position: sticky;
	bottom: 0;
	z-index: 10;
	margin: var(--sp-6) calc(-1 * var(--sp-4)) 0;
	padding: var(--sp-3) var(--sp-4);
}
@media (min-width: 960px) {
	/* Same inner width as the sheets (16 px sides), now that the column is the sheet's 580 px. */
	.mot-preview-pane--page { padding: var(--sp-6) var(--sp-4) 0; }
}
@media (max-width: 639px) {
	.mot-preview-pane--page { padding: var(--sp-4) var(--sp-3) 0; }
	.mot-preview-pane--page .mot-preview__tabs.mot-tabs { margin-left: calc(-1 * var(--sp-3)); margin-right: calc(-1 * var(--sp-3)); padding: 0 var(--sp-3); }
	.mot-preview-pane--page .mot-preview__action-bar { margin-left: calc(-1 * var(--sp-3)); margin-right: calc(-1 * var(--sp-3)); padding: var(--sp-2) var(--sp-3); }
}
/* Portals rendered in place on the page: fixed to the viewport as before. */
.mot-preview-pane--page .mot-embed-modal,
.mot-preview-pane--page .mot-report-modal { position: fixed; }

@media (prefers-reduced-motion: reduce) {
	.mot-preview__photo img, .mot-preview__author-arrow { transition: none; }
}