/* Motarva: the download dialogs (the format picker + the post-download sheet).
 *
 * ONE stylesheet for both dialogs that post-download.js builds, enqueued wherever that script can
 * run (class-motarva-public.php, handle `motarva-download-sheet`, after main.css where main.css
 * loads). Until core 1.48.645 the base rules lived in main.css and the open state
 * (.mot-dl-sheet--visible) at the end of design-system.css (performance item 11b, 2026-10-06):
 *   - Explore skips main.css (perf.explore_without_main_css), so a signed-in Download there opened
 *     an unstyled picker: raw text over the map on a phone, off screen at (-640, -54) at 1280 px
 *     (tester 1.48.644 P1-B);
 *   - every other page loads design-system.css BEFORE main.css, so the base rule (same
 *     specificity, later) beat the open state and the dialog stayed hidden (measured 2026-10-18:
 *     visibility hidden, opacity 0 on a route page, beta and production).
 * Base and open state now sit in one file, the open state after the base: source order is the
 * whole mechanism, so keep it that way.
 */

/* ─── Post-download sheet / modal ─────────────────────────────────────── */

.mot-dl-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: calc(var(--mot-z-dialog, 2000) - 1);
	opacity: 0;
	transition: opacity .25s;
	pointer-events: none;
}
.mot-dl-overlay--visible {
	opacity: 1;
	pointer-events: auto;
}

/* Mobile-first: bottom sheet */
.mot-dl-sheet {
	/* The shell's radius, as a variable, because what sits inside is measured
	   FROM it (see .mot-dl-format). --mot-radius-xl is the system's modal
	   radius — .mot-modal has always used it; this sheet was on a bespoke 12/16
	   and now joins it, so the two dialogs in one flow have the same corner. */
	--mot-dl-radius: var(--mot-radius-xl);
	--mot-dl-inset:  var(--sp-6);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--mot-bg-card);
	border-top: 1px solid var(--mot-border);
	border-radius: var(--mot-dl-radius) var(--mot-dl-radius) 0 0;
	box-shadow: 0 -4px 32px rgba(0, 0, 0, .4);
	z-index: var(--mot-z-dialog, 2000); /* above every sheet (Z-SCALE-1): it was 1001, under the Browse route sheet (1100) */
	transform: translateY(100%);
	/* A closed dialog must not catch clicks. On a phone the translate alone
	   hides it, because it really is off-screen. The desktop rule below swaps
	   that for `opacity: 0` on a box parked at the centre of the viewport — so
	   without these two lines the closed picker stays a fully hit-testable
	   400px target over the middle of the page, and a click landing where a
	   format row used to be still downloads the route. `.mot-dl-overlay` above
	   has always done this correctly; the sheet was the one that missed it.
	   `visibility` also takes the closed dialog's links out of the tab order,
	   which is why the delay matches the transition: it flips only once the
	   close animation has finished. */
	visibility: hidden;
	pointer-events: none;
	transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s, visibility 0s .3s;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
}

/* Drag handle (mobile) */
.mot-dl-sheet__handle {
	width: 36px;
	height: 4px;
	background: var(--mot-border);
	border-radius: 2px;
	margin: var(--sp-3) auto 0;
	cursor: grab;
	touch-action: none;
}

/* Close button: .mot-close (design-system §2b, V6 standard); the sheet only places it. */
.mot-dl-sheet__close {
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-4);
}

/* Body */
.mot-dl-sheet__body {
	padding: var(--mot-dl-inset);
	padding-top: var(--sp-4);
	overflow-y: auto;
}

/* Header with success icon */
.mot-dl-header {
	text-align: center;
	margin-bottom: var(--sp-6);
}
.mot-dl-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(0,135,90,.12);
	color: var(--mot-green);
	margin-bottom: var(--sp-3);
}
.mot-dl-header__icon svg {
	width: 24px;
	height: 24px;
}
.mot-dl-header h3 {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 var(--sp-1);
	color: var(--mot-text);
}
.mot-dl-header p {
	color: var(--mot-text-muted);
	font-size: .875rem;
	margin: 0;
	line-height: 1.4;
}

/* Social share section */
.mot-dl-social {
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--mot-border);
}
.mot-dl-social__label {
	display: block;
	font-size: .8rem;
	font-weight: 500;
	color: var(--mot-text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: var(--sp-3);
}
.mot-dl-social__row {
	display: flex;
	justify-content: center;
	gap: var(--sp-3);
}
.mot-dl-social__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--mot-border);
	background: var(--mot-bg-raised);
	color: var(--mot-text-muted);
	cursor: pointer;
	transition: background var(--mot-transition), border-color var(--mot-transition), color var(--mot-transition), transform .12s;
}
/* Same fix as the close button: --mot-border is a hairline, not a fill. */
.mot-dl-social__btn:hover {
	color: var(--mot-text);
	border-color: var(--mot-text);
	transform: translateY(-2px);
}
.mot-dl-social__btn:active {
	transform: translateY(0) scale(.95);
}
.mot-dl-social__btn:focus-visible {
	outline: 2px solid var(--mot-accent);
	outline-offset: 2px;
}
.mot-dl-social__btn svg {
	width: 20px;
	height: 20px;
}

/* Platform-specific hover colors */
.mot-dl-social__btn[data-share="facebook"]:hover {
	color: #1877f2;
	border-color: #1877f2;
	background: rgba(24,119,242,.08);
}
.mot-dl-social__btn[data-share="twitter"]:hover {
	color: var(--mot-text);
	border-color: var(--mot-text);
	background: rgba(255,255,255,.06);
}
.mot-dl-social__btn[data-share="whatsapp"]:hover {
	color: #25d366;
	border-color: #25d366;
	background: rgba(37,211,102,.08);
}
.mot-dl-social__btn[data-share="email"]:hover {
	color: var(--mot-accent);
	border-color: var(--mot-accent);
	background: rgba(255,107,53,.06);
}
.mot-dl-social__btn[data-share="copy"]:hover {
	color: var(--mot-blue);
	border-color: var(--mot-blue);
	background: rgba(26,110,220,.08);
}
.mot-dl-social__btn--copied {
	color: var(--mot-green) !important;
	border-color: var(--mot-green) !important;
	background: rgba(0,135,90,.12) !important;
}

/* Save to Favorites button (full width) */
.mot-dl-save {
	width: 100%;
	justify-content: center;
	margin-bottom: var(--sp-4);
	padding: .7rem 1.2rem;
	gap: var(--sp-2);
}
.mot-dl-save--saved {
	border-color: var(--mot-green);
	color: var(--mot-green);
}
.mot-dl-save--saved:hover {
	background: rgba(0,135,90,.06);
}

/* Help accordion */
.mot-dl-help-toggle {
	background: none;
	border: none;
	color: var(--mot-text-muted);
	font-size: .85rem;
	font-weight: 500;
	cursor: pointer;
	padding: 0;
	margin-bottom: var(--sp-3);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	width: 100%;
}
.mot-dl-help-toggle:hover {
	color: var(--mot-text);
}
.mot-dl-help-toggle:focus-visible {
	outline: 2px solid var(--mot-accent);
	outline-offset: 2px;
}
.mot-dl-help-chevron {
	margin-left: auto;
	transition: transform .2s;
}
.mot-dl-help {
	background: var(--mot-bg-raised);
	border-radius: var(--mot-radius-sm);
	padding: var(--sp-4);
	margin-bottom: var(--sp-4);
	font-size: .85rem;
	color: var(--mot-text-muted);
	line-height: 1.6;
}
.mot-dl-help p {
	margin: 0 0 var(--sp-2);
}
.mot-dl-help p:last-child {
	margin-bottom: 0;
}
.mot-dl-help strong {
	color: var(--mot-text);
}

/* The App Store badge under the help accordion (2026-09-21). The riders who
   open "How to import" are the app's audience, and until now the sheet sent
   them nowhere: /app/ alone converts three badge clicks a month. One line of
   text, then the badge; a top rule so it reads as its own row and not as a
   fourth import platform. Same component as /app/ (`.mot-app-badge` below),
   injected by post-download.js from `motarva.app_badge_html`. */
.mot-dl-app {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3, .75rem);
	padding-top: var(--sp-4, 1rem);
	margin-bottom: var(--sp-4, 1rem);
	border-top: 1px solid var(--mot-border, #2e2e2e);
}
.mot-dl-app__text {
	display: flex;
	align-items: center;
	gap: var(--sp-2, .5rem);
	margin: 0;
	font-size: .85rem;
	color: var(--mot-text-muted, #9b9b9b);
	text-align: center;
}

/* ─── Post-download: one next step per device (proposal A, 2026-09-24) ───
   docs/post-download-sheet-scope-2026-09-23.md. The help riders reached for is
   the sheet now: device chips, three steps, the full guide. Chips are
   monochrome and a selected chip INVERTS (the selection rule); orange stays
   off this sheet entirely: it is information, not a call to action. */
.mot-dl-device { margin: var(--sp-4, 1rem) 0; }
.mot-dl-device__label {
	margin: 0 0 var(--sp-2, .5rem);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mot-text-muted, #9b9b9b);
}
.mot-dl-device__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2, .5rem); margin-bottom: var(--sp-3, .75rem); }
.mot-dl-device__chip {
	padding: 7px 14px;
	border: 1px solid var(--mot-border, #333);
	border-radius: 999px;
	background: transparent;
	color: var(--mot-text, #f2f2f2);
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
}
.mot-dl-device__chip:hover { border-color: var(--mot-text-muted, #9b9b9b); }
.mot-dl-device__chip:focus-visible { outline: 2px solid var(--mot-text, #f2f2f2); outline-offset: 2px; }
.mot-dl-device__chip--active {
	background: var(--mot-selected-fill, var(--mot-text, #f2f2f2));
	color: var(--mot-selected-label, var(--mot-bg, #0a0a0a));
	border-color: var(--mot-text, #f2f2f2);
}
.mot-dl-device__panel {
	padding: var(--sp-3, .75rem) var(--sp-4, 1rem);
	border-radius: var(--mot-radius, 12px);
	background: var(--mot-bg-raised, #202020);
}
.mot-dl-device__steps { margin: 0; padding-left: 1.2em; font-size: .88rem; line-height: 1.5; color: var(--mot-text, #f2f2f2); }
.mot-dl-device__steps li + li { margin-top: 4px; }
.mot-dl-device__guide {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: var(--sp-2, .5rem);
	font-size: .85rem;
	font-weight: 600;
	color: var(--mot-text, #f2f2f2);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mot-dl-device__guide[hidden] { display: none; }

/* The app as one row: text left, badge (phone) or a small framed QR (computer). */
.mot-dl-app {
	flex-direction: row;
	justify-content: space-between;
	text-align: left;
	gap: var(--sp-3, .75rem);
}
.mot-dl-app__text { text-align: left; }
.mot-dl-app__badge { flex-shrink: 0; }
.mot-dl-app__qr { display: none; margin: 0; flex-shrink: 0; text-align: center; max-width: 112px; }
.mot-dl-app__qr img {
	display: block;
	width: 88px;
	height: 88px;
	margin: 0 auto 4px;
	padding: 4px;
	border: 1px solid var(--mot-border, #333);
	border-radius: 8px;
	background: #fff; /* scanners need black on white in both themes */
}
.mot-dl-app__qr figcaption { font-size: .72rem; line-height: 1.3; color: var(--mot-text-muted, #9b9b9b); }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
	.mot-dl-app__qr { display: block; }
	.mot-dl-app__badge { display: none; }
}

/* Save and share: quiet, side by side. */
.mot-dl-actions { display: flex; gap: var(--sp-2, .5rem); margin: 0 0 var(--sp-3, .75rem); }
.mot-dl-actions__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--mot-border, #333);
	border-radius: 999px;
	background: transparent;
	color: var(--mot-text-muted, #9b9b9b);
	font: inherit;
	font-size: .82rem;
	cursor: pointer;
}
.mot-dl-actions__btn:hover { color: var(--mot-text, #f2f2f2); border-color: var(--mot-text-muted, #9b9b9b); }
.mot-dl-actions__btn:focus-visible { outline: 2px solid var(--mot-text, #f2f2f2); outline-offset: 2px; }
.mot-dl-social[hidden] { display: none; }
/* The save button keeps its .mot-dl-save hooks (JS state), but not the old
   full-width block look defined above. */
.mot-dl-actions .mot-dl-save { width: auto; margin: 0; padding: 6px 12px; justify-content: flex-start; }

/* Opt-out checkbox */
.mot-dl-optout {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: .8rem;
	color: var(--mot-text-muted);
	cursor: pointer;
}
.mot-dl-optout__check {
	accent-color: var(--mot-accent);
}

/* ─── Download format picker ───────────────────────────────────────────
 * The popup every download control opens: the pill on a route card, the
 * Download button on a route page, the one in the explore preview panel.
 *
 * It borrows the post-download sheet's chrome on purpose (`.mot-dl-sheet` +
 * this modifier) — bottom sheet on a phone, centred modal on a desktop, same
 * handle, same close, same motion. The two dialogs appear one after the other
 * in the same flow, so anything else would read as two different products.
 * Only what is genuinely different is restated here: the list of formats. */
/* The picker sits its rows closer to the shell than the share sheet sits its
   text, so the corners can nest: 24 outer, 12 inset, 12 inner — three values off
   the radius/spacing scale, related by subtraction rather than picked by eye.
   (16 inset was tried first: just as concentric on paper, but an 8px row inside
   a 24px shell reads clipped rather than echoed.) */
.mot-dl-picker {
	--mot-dl-inset: var(--sp-3);
	/* Apple's concentric rule: a shape inside a rounded shape takes the shell's
	   radius MINUS the distance between them, so the two curves stay parallel
	   instead of the inner one bulging past the outer. Written as the
	   subtraction, not as its answer, so it follows --mot-dl-radius if the
	   sheet's corner ever changes. */
	--mot-dl-row-radius: calc(var(--mot-dl-radius) - var(--mot-dl-inset));
}
/* The rows carry a 48px tile and two lines of type, so the picker takes a wider
   dialog than the share sheet's 400 — scoped here, since the share sheet's
   content is happy at 400. */
@media (min-width: 768px) {
	.mot-dl-sheet.mot-dl-picker { width: 440px; }
}
/* A bottom sheet ends where the phone's home indicator begins, so the last
   format row needs the inset as well as the padding. */
.mot-dl-picker .mot-dl-sheet__body {
	padding-bottom: calc(var(--mot-dl-inset) + env(safe-area-inset-bottom, 0px));
}
.mot-dl-picker__head {
	text-align: center;
	margin-bottom: var(--sp-5);
}
.mot-dl-picker__title {
	font-family: var(--mot-font-heading);
	font-size: 1.15rem;
	font-weight: var(--mot-font-heading-weight);
	color: var(--mot-text);
	margin: 0;
}
/* The route being downloaded — the picker can be opened from a grid of twelve
   cards, so it has to name which one it is about. */
.mot-dl-picker__route {
	margin: var(--sp-1) 0 0;
	font-size: .875rem;
	color: var(--mot-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mot-dl-picker__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}
/* Row and tile are ONE surface model, and it has to read the same in both
 * themes. It did not: the row sat on --mot-bg, which is a step BELOW the sheet
 * in dark (a well at #151515 under a #1f1f1f dialog) and identical to it in
 * light (white on white, visible only by its hairline). Hovering then took the
 * row to --mot-bg-raised, which in dark is LIGHTER than the tile inside it, so
 * the tile flipped from sitting above its row to sinking into it.
 *
 * Now: the row rests on the sheet's own ground and is drawn by its hairline;
 * hover raises it one step; and the tile always takes the step the row is not
 * on. Same relationship in both themes, and it never inverts. */
.mot-dl-format {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4);
	border: 1px solid var(--mot-border);
	border-radius: var(--mot-dl-row-radius);
	background: transparent;
	color: var(--mot-text);
	text-decoration: none;
	transition: border-color var(--mot-transition), background var(--mot-transition);
}
.mot-dl-format:hover,
.mot-dl-format:focus-visible {
	border-color: var(--mot-text);
	background: var(--mot-bg-raised);
	text-decoration: none;
}
.mot-dl-format:focus-visible { outline: 2px solid var(--mot-accent); outline-offset: 2px; }
/* The format's own glyph, in the square tile the /app/ spec strip established
   (`.mot-app-spec__format`: card ground, hairline border, --mot-radius-lg, the
   icon muted). Same vocabulary, one size down, because here it labels a row
   rather than filling a band. The glyph comes from
   Motarva_Route_Exporter::formats(), so both surfaces draw a format the same
   way. */
.mot-dl-format__tile {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	/* One notch tighter than the row it sits in: a 44px box reads rounder than a
	   368px one at the same radius, so matching the number would make the tile
	   look like the loudest corner in the dialog. */
	border-radius: calc(var(--mot-dl-row-radius) - 2px);
	background: var(--mot-bg-raised);
	border: 1px solid var(--mot-border);
	color: var(--mot-text-muted);
	transition: background var(--mot-transition), color var(--mot-transition);
}
.mot-dl-format__tile svg,
.mot-dl-format__tile i { width: 24px; height: 24px; }
/* The row takes the raised step on hover, so the tile hands it back and drops to
 * the sheet's own ground — it stays a step away from its row either way, in
 * both themes, instead of blending into it. */
.mot-dl-format:hover .mot-dl-format__tile,
.mot-dl-format:focus-visible .mot-dl-format__tile {
	background: var(--mot-bg-card);
	color: var(--mot-text);
}
.mot-dl-format__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
/* The format IS the choice, so it carries the row's weight — the heading face
   at the /app/ strip's letter-spacing, one line above what it is for. */
.mot-dl-format__name {
	font-family: var(--mot-font-heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--mot-text);
	line-height: 1.2;
}
.mot-dl-format__desc {
	font-size: .875rem;
	line-height: 1.35;
	color: var(--mot-text-muted);
}
.mot-dl-format__go { flex: none; color: var(--mot-text-muted); }
.mot-dl-format:hover .mot-dl-format__go { color: var(--mot-text); }
/* Desktop: centered modal */
@media (min-width: 768px) {
	.mot-dl-sheet {
		bottom: auto;
		top: 50%;
		left: 50%;
		right: auto;
		transform: translate(-50%, -50%) scale(.95);
		opacity: 0;
		border-radius: var(--mot-dl-radius);
		border: 1px solid var(--mot-border);
		width: 400px;
		max-height: 80vh;
		box-shadow: 0 8px 40px rgba(0,0,0,.5);
	}
	
	.mot-dl-sheet__handle {
		display: none;
	}
	.mot-dl-sheet__body {
		padding-top: var(--sp-6);
	}
}

/* Open. AFTER every base rule above (same specificity: the later one wins). */
.mot-dl-sheet--visible {
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s, visibility 0s;
}
@media (min-width: 768px) {
	.mot-dl-sheet--visible {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}