/* Explore's phone route sheet: ONE sheet, three heights (SHEET-1 = A, SHEET-DETAILS = A,
   Ayrton 2026-10-17). explore-sheet.js shapes the content and owns the drag.
   Two parts: the CONTENT of a shaped sheet (.mot-explore-sheet, any host: Explore's phone sheet and
   the brand guide's #explore-sheet frames); the Explore SHEET's heights (.mot-map-wrap--compact,
   phone widths only). The desktop sidebar is untouched. */

/* ── Content: one sheet, three bands ───────────────────────────────────── */
.mot-explore-sheet .mot-preview__stats,
.mot-explore-sheet .mot-preview__hint { display: none; }          /* the chips carry the numbers (no second copy) */
.mot-explore-sheet .mot-preview__head { margin-bottom: 4px; }
.mot-explore-sheet .mot-preview__location { margin-bottom: 0; }
.mot-explore-sheet .mot-explore-sheet__chips {
	flex-wrap: wrap; overflow: visible;
	margin: var(--sp-2, 8px) 0 0; padding: 0; border-top: 0;
	row-gap: 6px;
	-webkit-mask: none; mask: none;
}
.mot-explore-sheet .mot-explore-sheet__chips .mot-curviness { padding: 0; border: 0; background: none; }
/* Half: the profile + the places along the route + the page link, under a hairline. */
.mot-explore-sheet__half {
	display: flex; flex-direction: column; gap: var(--sp-4, 16px);
	margin-top: var(--sp-4, 16px); padding-top: var(--sp-4, 16px);
	border-top: 1px solid var(--mot-border, rgba(255,255,255,.09));
}
.mot-explore-sheet .mot-explore-sheet__chart { margin: 0; }
/* The profile's km labels: the SVG is drawn in a 720-wide viewBox and scaled to the sheet
   (326 px at 390), so 11 px of SVG came out 5 px high (T18-20, measured 7 px boxes).
   explore-sheet.js writes the size that renders as 11 px (sizeChart). */
.mot-explore-sheet .mot-explore-sheet__chart svg > text { font-size: var(--mot-chart-tick, 11px); }
.mot-explore-sheet .mot-explore-sheet__half .mot-strip { margin: 0; }
.mot-explore-sheet__pagelink { margin: 0; font-size: .875rem; }
.mot-explore-sheet__pagelink a { color: var(--mot-text, #f2f2f2); text-decoration: underline; text-underline-offset: 3px; }
/* Full: the rest (the tabs). */
.mot-explore-sheet .mot-preview__tabs-anchor { margin-top: var(--sp-4, 16px); }
/* Download · Ridden · More: pinned under every height (SHEET-DETAILS 1), one row, clear of the
   home indicator. The sheet's heights are measured with this padding in them. */
.mot-explore-sheet .mot-preview__action-bar {
	flex-wrap: nowrap;
	padding: var(--sp-3, 12px) 12px calc(var(--sp-3, 12px) + env(safe-area-inset-bottom, 0px));
}

/* Skeleton (explore-sheet.js skeletonChrome): the close at top right, the bar pinned below. */
.mot-explore-sheet__skel { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.mot-explore-sheet__skel-close { position: absolute; top: 4px; right: 12px; z-index: 2; }
.mot-explore-sheet__skel .mot-skeleton-preview__photo-row { display: none; }   /* the loaded sheet shows no photo either */
.mot-explore-sheet__skel-bar { flex-wrap: nowrap; padding: var(--sp-3, 12px) 12px calc(var(--sp-3, 12px) + env(safe-area-inset-bottom, 0px)); }
.mot-explore-sheet__skel-bar .mot-preview__action-primary[disabled] { opacity: .55; cursor: progress; }
.mot-explore-sheet__skel-bar .mot-skeleton { flex: none; width: 44px; height: 44px; border-radius: 50%; }
/* Pinned to the sheet's bottom like the loaded bar (the skeleton is not the sheet's flex column). */
.mot-map-wrap--compact .mot-sheet .mot-preview__action-bar.mot-explore-sheet__skel-bar { position: absolute; left: 16px; right: 16px; bottom: 0; }

/* ── Explore: the sheet's heights (phone) ───────────────────────────────── */
/* THE HEIGHTS ARE A TRANSFORM (SHEET-SMOOTH-1, 2026-10-20). The sheet is ONE fixed height (full:
   the map minus 64 px) and a stop slides it down by translateY, which the compositor animates
   without layout. The tester measured the old `height` snap at 4x CPU: 5-10 frames over 16.7 ms
   per change (release 1.48.674 F2). Why the list sheet's "a height, not a transform" (map-browse.css,
   2026-09-01) does not apply here: below full nothing scrolls inside this sheet, so no scroller
   reaches under the fold; at full the translate is none. What did need an answer:
   - the action bar (Download) sits at the sheet's bottom, under the fold below full: it is slid UP
     by the same amount (the same transition, so it stays put on screen);
   - every stop is px from explore-sheet.js: --mot-explore-sheet-h (the sheet), -low and -half
     (measured from the content). The bar cannot resolve a % of the SHEET's height;
   - at full the transform is translateY(0), not `none`: none -> translate changes the containing
     block of the sheet's fixed boxes, which re-laid-out the whole content on every step into or
     out of full (measured). The only fixed box inside is the More menu, which places itself
     with fixedOrigin() (route-preview.js); the modals and the lightbox live on <body>. */
@media (max-width: 1023px) {
	.mot-map-wrap--compact .mot-sheet {
		height: calc(100% - 64px);
		box-shadow: 0 -3px 18px rgba(0,0,0,.25);
		transition: transform .3s cubic-bezier(.4,0,.2,1);
		will-change: auto;
	}
	.mot-map-wrap--compact .mot-sheet .mot-preview__action-bar {
		position: relative; z-index: 3;   /* over the content it covers below full */
		transition: transform .3s cubic-bezier(.4,0,.2,1);
	}
	/* The list sheet's per-stop --mot-sheet-h (map-browse.css) is inherited by every box in the
	   sheet: changing it per stop restyled all ~1400 of them on each tap (3.4 ms at 1x, ~14 ms
	   at 4x, measured). One value for every stop here, so a stop change restyles two boxes. */
	.mot-map-wrap--compact .mot-sheet[data-state] { --mot-sheet-h: calc(100% - 64px); }
	/* Each stop names its transform outright (no shared inherited variable): a stop change
	   then restyles the sheet and its bar, not every box inside (measured: 21 ms of style
	   recalc at 4x when one inherited variable carried the offset). */
	.mot-map-wrap--compact .mot-sheet[data-state="peek"] { transform: translateY(calc(var(--mot-explore-sheet-h, 0px) - var(--mot-explore-sheet-low, 248px))); }
	.mot-map-wrap--compact .mot-sheet[data-state="peek"] .mot-preview__action-bar { transform: translateY(calc(var(--mot-explore-sheet-low, 248px) - var(--mot-explore-sheet-h, 0px))); }
	.mot-map-wrap--compact .mot-sheet[data-state="half"] { transform: translateY(calc(var(--mot-explore-sheet-h, 0px) - var(--mot-explore-sheet-half, 448px))); }
	.mot-map-wrap--compact .mot-sheet[data-state="half"] .mot-preview__action-bar { transform: translateY(calc(var(--mot-explore-sheet-half, 448px) - var(--mot-explore-sheet-h, 0px))); }
	.mot-map-wrap--compact .mot-sheet[data-state="full"],
	.mot-map-wrap--compact .mot-sheet[data-state="full"] .mot-preview__action-bar { transform: translateY(0); }
	/* A drag writes both transforms inline (explore-sheet.js) and takes the transition off. */
	.mot-map-wrap--compact .mot-sheet.mot-sheet--dragging,
	.mot-map-wrap--compact .mot-sheet.mot-sheet--dragging .mot-preview__action-bar { transition: none; }
	/* The `closed` stop: the sheet slides out whole, the bar with it. */
	.mot-map-wrap--compact .mot-sheet.mot-sheet--out { transform: translateY(100%); }
	.mot-map-wrap--compact .mot-sheet.mot-sheet--out .mot-preview__action-bar { transform: translateY(0); }
	/* The map's bottom corners (the credit) ride above the sheet (map-layers.js measures it
	   into --mot-map-inset-b): here by a transform, as the Route Maker does, not by `bottom`,
	   so the credit following a stop is no layout animation either. */
	.mot-map-wrap--compact .leaflet-container .leaflet-bottom { bottom: 0; transform: translateY(calc(-1 * var(--mot-map-inset-b, 0px))); transition: transform .2s ease; }
	/* Below full nothing scrolls inside: a drag moves the sheet (the app's GM-1). At full the
	   content scrolls; at its top a pull down hands back to the sheet (explore-sheet.js).
	   The scroller stays `overflow-y: auto` at every stop: switching it to hidden below full
	   re-laid-out the whole content in the tap's task (the last 33 ms frame at 4x,
	   SHEET-SMOOTH-1). Below full the sheet owns every touch (touch-action: none + the drag)
	   and explore-sheet.js swallows the wheel, so it still does not scroll there. */
	/* The scroller takes vertical pans only at full, switched once the slide has ended
	   (explore-sheet.js syncScroll): a touch-action change restyles every box under it, which
	   cost a frame in the tap's task when it switched with the stop (SHEET-SMOOTH-1). */
	.mot-map-wrap--compact .mot-sheet.mot-sheet--scrolls .mot-preview .mot-preview__scroll { touch-action: pan-y; }
	.mot-map-wrap--compact .mot-explore-sheet .mot-strip__rail { touch-action: pan-x; }
	.mot-map-wrap--compact .mot-sheet__handle-wrap { padding: 10px 0 6px; }
	.mot-map-wrap--compact .mot-sheet__handle { width: 40px; height: 5px; border-radius: 3px; background: var(--mot-border-strong, var(--mot-text-muted, #9b9b9b)); opacity: .6; }
	/* The cookie plugin's floating "manage consent" tab sits bottom left, over Download
	   (measured 844 x 390): it steps away while a route sheet is open. */
	.mot-map-body:has(.mot-map-wrap--compact.mot-map-wrap--route) #cmplz-manage-consent { display: none; }
}
/* Held sideways: a side panel at the left with low and full only (SHEET-DETAILS 3); the route is
   framed beside it (map-browse.js phoneFrame), the map credit stays at the right. Under half the
   map's width on purpose: map-layers.js lifts the bottom corners over an overlay that spans half
   the map or more, which put the credit on the layers button at 640 x 360 (measured, 50 %). */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) {
	.mot-map-wrap--compact .mot-sheet { right: auto; width: min(400px, 46%); border-radius: 0 var(--mot-radius-lg, 16px) 0 0; }
	.mot-map-wrap--compact .mot-sheet[data-state="half"] { transform: translateY(calc(var(--mot-explore-sheet-h, 0px) - var(--mot-explore-sheet-low, 248px))); }
	.mot-map-wrap--compact .mot-sheet[data-state="half"] .mot-preview__action-bar { transform: translateY(calc(var(--mot-explore-sheet-low, 248px) - var(--mot-explore-sheet-h, 0px))); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
	.mot-map-wrap--compact .mot-sheet,
	.mot-map-wrap--compact .mot-sheet .mot-preview__action-bar { transition-duration: .18s; }
}