/* PCC Maps — route library (Phase 6 redesign, "Peak CC Routes UX").
 * Reads colour/type tokens from design-tokens.css. Keeps the earlier
 * defensive pattern from the previous version — a self-contained
 * panel plus !important on text colours — since this can still land
 * inside a dark UX Builder row whose own !important rules would
 * otherwise make text unreadable. */

.pcc-maps-library {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	background: var(--pcc-surface);
	color: var(--pcc-ink) !important;
	font-family: var(--pcc-font-body);
	border-radius: var(--pcc-radius-lg);
	border: 1px solid var(--pcc-border-light);
	box-shadow: var(--pcc-shadow-frame);
	box-sizing: border-box;
	overflow: hidden;
}
.pcc-maps-library * {
	box-sizing: border-box;
}

.pcc-maps-library-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1em;
	padding: 1.75em 1.75em 1.25em;
	border-bottom: 1px solid var(--pcc-border-light);
}
.pcc-maps-library-title {
	margin: 0 0 0.2em;
	font-family: var(--pcc-font-display);
	font-weight: 700;
	font-size: 1.9em;
	letter-spacing: 0.01em;
	color: var(--pcc-ink) !important;
}
.pcc-maps-library-subtitle {
	margin: 0;
	color: var(--pcc-muted) !important;
	font-size: 0.95em;
}
.pcc-maps-library-actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding-top: 0.3em;
}

/* Mobile-only "FILTER" trigger for the bottom sheet */
.pcc-maps-mobile-filter-toggle {
	display: none;
	align-items: center;
	gap: 0.5em;
	width: calc(100% - 3em);
	margin: 1.25em 1.75em 0;
	padding: 0.8em 1.2em;
	background: var(--pcc-ink);
	color: #fff !important;
	border: none;
	border-radius: var(--pcc-radius-sm);
	font-family: var(--pcc-font-display);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.85em;
	cursor: pointer;
}
.pcc-maps-mobile-filter-count {
	background: var(--pcc-accent);
	color: #fff !important;
	border-radius: var(--pcc-radius-pill);
	padding: 0.1em 0.55em;
	font-size: 0.9em;
}

.pcc-maps-library-body {
	display: flex;
	align-items: flex-start;
	gap: 0;
}

/* ------------------------------------------------------------------ */
/* Filter rail                                                        */
/* ------------------------------------------------------------------ */

.pcc-maps-filter-rail {
	flex: none;
	width: 296px;
	background: var(--pcc-surface-tint);
	border-right: 1px solid var(--pcc-border-light);
	position: sticky;
	top: 0;
	align-self: flex-start;
	max-height: 100vh;
	overflow-y: auto;
}
.pcc-maps-sheet-handle {
	display: none;
}

.pcc-maps-filters {
	display: flex;
	flex-direction: column;
	gap: 1.6em;
	padding: 1.5em;
}

.pcc-maps-filters-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pcc-maps-filters-label {
	font-family: var(--pcc-font-display);
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pcc-ink) !important;
}
.pcc-maps-clear-filters {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.9em;
	color: var(--pcc-accent) !important;
	text-decoration: underline;
	cursor: pointer;
}

.pcc-maps-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pcc-maps-filter-group {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}
.pcc-maps-filter-label {
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pcc-muted) !important;
}

/* Search */
.pcc-maps-search-wrap {
	position: relative;
}
.pcc-maps-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: var(--pcc-placeholder);
	pointer-events: none;
}
.pcc-maps-search-wrap input[type="search"] {
	width: 100%;
	height: 44px;
	padding: 0 0.9em 0 2.5em;
	border: 1px solid var(--pcc-border);
	border-radius: var(--pcc-radius-sm);
	background: var(--pcc-surface);
	color: var(--pcc-ink) !important;
	font-family: var(--pcc-font-body);
	font-size: 0.95em;
}
.pcc-maps-search-wrap input::placeholder {
	color: var(--pcc-placeholder) !important;
}

/* Segmented control (ride type) */
.pcc-maps-segmented {
	display: flex;
	background: var(--pcc-segment-track);
	border-radius: var(--pcc-radius-sm);
	padding: 4px;
	gap: 2px;
}
.pcc-maps-segment {
	flex: 1;
	text-align: center;
	padding: 0.55em 0.4em;
	border-radius: 5px;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--pcc-muted) !important;
	cursor: pointer;
}
.pcc-maps-segment input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.pcc-maps-segment:has(input:checked) {
	background: var(--pcc-surface);
	color: var(--pcc-ink) !important;
	box-shadow: var(--pcc-shadow-segment);
}

/* Difficulty rows */
.pcc-maps-difficulty-list {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.pcc-maps-difficulty-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6em;
	height: 46px;
	padding: 0 0.75em;
	background: var(--pcc-surface);
	border: 1.5px solid var(--pcc-border-light);
	border-radius: var(--pcc-radius-sm);
	cursor: pointer;
}
.pcc-maps-difficulty-row input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.pcc-maps-difficulty-row[data-difficulty-row="green"]:has(input:checked) { background: var(--pcc-green-tint); border-color: var(--pcc-green); }
.pcc-maps-difficulty-row[data-difficulty-row="blue"]:has(input:checked) { background: var(--pcc-blue-tint); border-color: var(--pcc-blue); }
.pcc-maps-difficulty-row[data-difficulty-row="red"]:has(input:checked) { background: var(--pcc-red-tint); border-color: var(--pcc-red); }
.pcc-maps-difficulty-row[data-difficulty-row="black"]:has(input:checked) { background: var(--pcc-black-tint); border-color: var(--pcc-black); }

.pcc-maps-difficulty-dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	flex: none;
}
.pcc-maps-difficulty-name {
	flex: 1;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--pcc-ink) !important;
}
.pcc-maps-difficulty-count {
	font-size: 0.85em;
	color: var(--pcc-muted) !important;
}
.pcc-maps-difficulty-info {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--pcc-border);
	color: var(--pcc-muted) !important;
	font-size: 0.75em;
	cursor: help;
}
.pcc-maps-tooltip {
	/* `position: fixed` (not `absolute`) so this floats above the results
	 * grid instead of being clipped by the filter rail's own
	 * `overflow-y: auto` (needed for the rail's internal scroll) — an
	 * ancestor with any non-`visible` overflow clips an absolutely
	 * positioned descendant that escapes its box, which is what cut the
	 * tooltip off originally. library-filters.js also moves this element
	 * to be a direct child of <body> the moment it's first shown, so it
	 * can't get painted underneath something elsewhere on the page (a
	 * route card, a theme's own image-hover wrapper) whose own stacking
	 * context this z-index would otherwise be powerless against — see
	 * the comment above positionDifficultyTooltip() in that file for the
	 * full reasoning. Position/visibility are set from there; the
	 * off-screen default below just avoids a flash at 0,0 if it's ever
	 * shown before that runs (e.g. JS disabled but a browser still
	 * honours the CSS :hover — rare, and harmless since it stays off-screen). */
	display: none;
	position: fixed;
	top: -9999px;
	left: -9999px;
	transform: translateY(-50%);
	width: 214px;
	background: var(--pcc-ink);
	color: #fff !important;
	font-size: 0.8em;
	line-height: 1.45;
	padding: 0.7em 0.85em;
	border-radius: var(--pcc-radius-sm);
	box-shadow: var(--pcc-shadow-tooltip);
	z-index: 9999;
	text-align: left;
}
.pcc-maps-difficulty-info:hover .pcc-maps-tooltip,
.pcc-maps-difficulty-info:focus .pcc-maps-tooltip,
.pcc-maps-difficulty-info.is-open .pcc-maps-tooltip {
	display: block;
}

.pcc-maps-difficulty-explainer-toggle {
	display: none;
	background: none;
	border: none;
	padding: 0;
	text-align: left;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--pcc-accent) !important;
	cursor: pointer;
}
.pcc-maps-difficulty-explainer {
	display: none;
	flex-direction: column;
	gap: 0.5em;
	background: var(--pcc-surface);
	border-radius: var(--pcc-radius-sm);
	padding: 0.85em;
	font-size: 0.85em;
	color: var(--pcc-ink-80) !important;
}
.pcc-maps-difficulty-explainer p {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	color: var(--pcc-ink-80) !important;
}
.pcc-maps-difficulty-explainer:not([hidden]) {
	display: flex;
}

/* Range sliders */
.pcc-maps-range-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.pcc-maps-range-value {
	font-size: 0.85em;
	font-weight: 600;
	color: var(--pcc-ink) !important;
}
input.pcc-maps-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 999px;
	background: var(--pcc-border);
	outline: none;
}
input.pcc-maps-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pcc-accent);
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(34, 51, 58, 0.3);
}
input.pcc-maps-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pcc-accent);
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(34, 51, 58, 0.3);
}
.pcc-maps-range-ends {
	display: flex;
	justify-content: space-between;
	font-size: 0.78em;
	color: var(--pcc-muted-light) !important;
}

.pcc-maps-sheet-footer {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Results                                                             */
/* ------------------------------------------------------------------ */

.pcc-maps-results {
	flex: 1;
	min-width: 0;
	padding: 1.5em 1.75em 2em;
}

.pcc-maps-results-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
	padding-bottom: 1em;
	margin-bottom: 1.25em;
	border-bottom: 1px solid var(--pcc-border-light);
}
.pcc-maps-results-count-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
}
.pcc-maps-result-count {
	font-weight: 700;
	color: var(--pcc-ink) !important;
}
.pcc-maps-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}
.pcc-maps-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: #f0f3f3;
	border: 1px solid #dde3e5;
	border-radius: var(--pcc-radius-pill);
	padding: 0.3em 0.75em;
	font-size: 0.8em;
	color: var(--pcc-ink-80) !important;
	cursor: pointer;
}
.pcc-maps-sort {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.85em;
	color: var(--pcc-muted) !important;
}
.pcc-maps-sort select {
	padding: 0.4em 0.6em;
	border: 1px solid var(--pcc-border);
	border-radius: var(--pcc-radius-sm);
	color: var(--pcc-ink) !important;
	background: var(--pcc-surface);
	font-size: 1em;
}

/* Grid + cards */
.pcc-maps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.pcc-maps-card {
	position: relative;
	border: 1px solid var(--pcc-border-light);
	border-radius: var(--pcc-radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--pcc-surface);
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.pcc-maps-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: var(--pcc-muted);
	z-index: 1;
}
.pcc-maps-card-diff-green::before { background: var(--pcc-green); }
.pcc-maps-card-diff-blue::before { background: var(--pcc-blue); }
.pcc-maps-card-diff-red::before { background: var(--pcc-red); }
.pcc-maps-card-diff-black::before { background: var(--pcc-black); }

.pcc-maps-card:hover {
	border-color: var(--pcc-accent);
	box-shadow: var(--pcc-shadow-card-hover);
	transform: translateY(-2px);
}

.pcc-maps-card-thumb-link {
	position: relative;
	display: block;
	height: 148px;
	background: var(--pcc-thumb-bg);
}

.pcc-maps-thumb-svg {
	width: 100%;
	height: 100%;
	display: block;
}

.pcc-maps-thumb-map {
	/* `cover` so the map fills the thumbnail edge to edge instead of
	 * letterboxing on a card whose aspect ratio doesn't match the
	 * cached image's square crop. PCC_Maps_Map_Background pads well
	 * beyond the route's own bounding box before choosing its zoom
	 * level specifically so this crop has margin to work with — a
	 * card's realistic width:height range (roughly 2.5:1–3:1 across
	 * breakpoints, thumbnail height is fixed) crops well within that
	 * margin, so the route itself isn't the part that gets cropped. */
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	background: var(--pcc-thumb-bg);
}

.pcc-maps-thumb-placeholder {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pcc-muted-light) !important;
	font-size: 0.85em;
}

.pcc-maps-thumb-line {
	fill: none;
	stroke: var(--pcc-accent);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.pcc-maps-thumb-start { fill: var(--pcc-ink); }
.pcc-maps-thumb-end { fill: var(--pcc-ink); }

.pcc-maps-card-badge-type {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(34, 51, 58, 0.86);
	color: #fff !important;
	font-family: var(--pcc-font-display);
	font-size: 0.68em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.3em 0.6em;
	border-radius: 4px;
}

.pcc-maps-card-body {
	/* `flex: 1` so this fills whatever height the grid row stretched
	 * `.pcc-maps-card` to (grid rows size to their tallest item by
	 * default) — combined with `margin-top: auto` on
	 * .pcc-maps-card-actions below, that's what keeps every card's
	 * Download button aligned along the same row regardless of how many
	 * lines a given route's title wraps to. */
	flex: 1 1 auto;
	padding: 1em 1.1em 1.1em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.pcc-maps-card-title {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.45em;
	font-family: var(--pcc-font-display);
	font-size: 1.1em;
	font-weight: 600;
}
.pcc-maps-card-title a {
	text-decoration: none;
	color: var(--pcc-ink) !important;
	/* Cap a very long route name at two lines rather than letting one
	 * unusually long title make its card dramatically taller than its
	 * neighbours in the same grid row. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.pcc-maps-card-title .pcc-maps-difficulty-dot {
	margin-top: 0.4em;
	flex: none;
	width: 11px;
	height: 11px;
}

.pcc-maps-card-stats {
	display: flex;
	gap: 1em;
	font-size: 0.9em;
	color: var(--pcc-ink-80) !important;
}
.pcc-maps-card-stats strong {
	font-family: var(--pcc-font-display);
	font-size: 1.1em;
	color: var(--pcc-ink) !important;
}

.pcc-maps-card-start,
.pcc-maps-card-leader {
	font-size: 0.85em;
	color: var(--pcc-muted) !important;
	margin: 0;
}

.pcc-maps-card-actions {
	display: flex;
	align-items: center;
	gap: 0.5em;
	/* `auto` (not a fixed 0.4em) so this row sits pinned to the bottom of
	 * .pcc-maps-card-body's stretched height rather than directly under
	 * whatever content happens to precede it — see the comment on
	 * .pcc-maps-card-body above for why that keeps Download buttons
	 * aligned across a row of cards with differently-sized titles. */
	margin-top: auto;
	padding-top: 0.4em;
}
.pcc-maps-card-download {
	flex: 1;
	text-align: center;
	padding: 0.6em 1em;
	font-size: 0.8em;
}
.pcc-maps-favourite {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--pcc-radius-sm);
	border: 1px solid var(--pcc-border);
	background: var(--pcc-surface);
	color: var(--pcc-muted) !important;
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
}
.pcc-maps-favourite.is-favourited {
	color: var(--pcc-accent) !important;
	border-color: var(--pcc-accent);
}

.pcc-maps-no-results {
	padding: 3em 1em;
	text-align: center;
	background: var(--pcc-surface-tint-2);
	border: 2px dashed var(--pcc-border);
	border-radius: var(--pcc-radius-md);
	color: var(--pcc-muted) !important;
}
.pcc-maps-no-results-title {
	font-family: var(--pcc-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pcc-ink) !important;
	margin: 0 0 0.4em;
}
.pcc-maps-no-results a {
	color: var(--pcc-accent) !important;
}

/* Pagination */
.pcc-maps-pagination {
	margin-top: 2em;
}
.pcc-maps-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pcc-maps-pagination a,
.pcc-maps-pagination span {
	display: inline-block;
	padding: 0.4em 0.8em;
	border: 1px solid var(--pcc-border);
	border-radius: 4px;
	text-decoration: none;
	color: var(--pcc-ink-80) !important;
}
.pcc-maps-pagination .current {
	background: var(--pcc-accent);
	border-color: var(--pcc-accent);
	color: #fff !important;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 1100px) {
	.pcc-maps-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.pcc-maps-library-body {
		display: block;
	}
	.pcc-maps-mobile-filter-toggle {
		display: flex;
	}
	.pcc-maps-results {
		padding: 1.25em;
	}

	/* Filter rail becomes a bottom sheet */
	.pcc-maps-filter-rail {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: auto;
		max-height: 85vh;
		border-radius: 20px 20px 0 0;
		border-right: none;
		box-shadow: 0 -8px 30px rgba(34, 51, 58, 0.25);
		transform: translateY(105%);
		transition: transform 0.25s ease;
		z-index: 60;
	}
	.pcc-maps-filter-rail.is-open {
		transform: translateY(0);
	}
	.pcc-maps-sheet-handle {
		display: block;
		width: 44px;
		height: 4px;
		border-radius: 999px;
		background: var(--pcc-border);
		margin: 0.7em auto 0;
	}
	.pcc-maps-sheet-scrim {
		position: fixed;
		inset: 0;
		background: rgba(34, 51, 58, 0.45);
		z-index: 55;
	}
	.pcc-maps-sheet-scrim[hidden] {
		display: none;
	}
	.pcc-maps-sheet-footer {
		display: flex;
		gap: 0.75em;
		position: sticky;
		bottom: 0;
		background: var(--pcc-surface-tint);
		padding-top: 0.75em;
		margin-top: 0.25em;
	}
	.pcc-maps-sheet-cancel {
		flex: none;
		width: 108px;
	}
	.pcc-maps-sheet-submit {
		flex: 1;
	}

	.pcc-maps-difficulty-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5em;
	}
	.pcc-maps-difficulty-row {
		flex-wrap: wrap;
		height: auto;
		padding: 0.6em;
	}
	.pcc-maps-difficulty-info {
		display: none;
	}
	.pcc-maps-difficulty-explainer-toggle {
		display: inline-block;
	}
}

@media (max-width: 760px) {
	.pcc-maps-grid {
		grid-template-columns: 1fr;
	}
	.pcc-maps-library-head {
		flex-direction: column;
	}
	.pcc-maps-results-head {
		flex-direction: column;
		align-items: flex-start;
	}
}