:root {
	color-scheme: dark;
	/* 5-color palette: near-black, two middle tones, near-white, blue accent */
	--ride-c1: #0b0f14;
	--ride-c2: #1c2430;
	--ride-c3: #3a4658;
	--ride-c4: #e6edf7;
	--ride-c5: #3b82f6;

	/* semantic aliases */
	--ride-bg-900: var(--ride-c1);
	--ride-bg-800: var(--ride-c2);
	--ride-border: var(--ride-c3);
	--ride-text: var(--ride-c4);
	--ride-muted: color-mix(in srgb, var(--ride-c4) 62%, var(--ride-c3));
	--ride-accent: var(--ride-c5);
	--ride-accent-soft: color-mix(in srgb, var(--ride-c5) 72%, var(--ride-c4));
}

/* Custom scrollbar styles */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: color-mix(in srgb, var(--ride-bg-800) 40%, transparent);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--ride-border) 50%, transparent);
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--ride-border);
}

/* Used by the navbar in views/partials/header.ejs */
.ride-glass {
	background: color-mix(in srgb, var(--ride-bg-900) 72%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.theme-body {
	background: var(--ride-bg-900);
	color: var(--ride-text);
}

.theme-main {
	padding: 3rem 1.5rem;
}

.theme-kicker {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 700;
	color: var(--ride-muted);
}

.theme-heading {
	font-size: clamp(1.85rem, 3vw, 2.35rem);
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--ride-text);
}

.theme-subtext {
	margin-top: 0.75rem;
	color: var(--ride-muted);
}

.theme-panel {
	border: 1px solid color-mix(in srgb, var(--ride-border) 70%, transparent);
	background: color-mix(in srgb, var(--ride-bg-800) 90%, transparent);
	border-radius: 0.625rem;
	box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22);
}

.theme-input {
	width: 100%;
	padding: 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--ride-border);
	background: rgba(15, 23, 42, 0.75);
	color: var(--ride-text);
}

.theme-input::placeholder {
	color: color-mix(in srgb, var(--ride-c3) 70%, var(--ride-c4));
}

.theme-input:focus {
	outline: none;
	border-color: var(--ride-accent);
	box-shadow: 0 0 0 2px
		color-mix(in srgb, var(--ride-accent) 35%, transparent);
}

.theme-select-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.theme-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 0.625rem 2.25rem 0.625rem 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid color-mix(in srgb, var(--ride-border) 88%, transparent);
	background-color: color-mix(in srgb, var(--ride-bg-800) 88%, transparent);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ride-muted) 50%),
		linear-gradient(135deg, var(--ride-muted) 50%, transparent 50%);
	background-position:
		calc(100% - 0.95rem) calc(50% - 0.15rem),
		calc(100% - 0.65rem) calc(50% - 0.15rem);
	background-size:
		0.35rem 0.35rem,
		0.35rem 0.35rem;
	background-repeat: no-repeat;
	color: var(--ride-text);
	font-weight: 600;
	line-height: 1.25;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.theme-select:hover {
	border-color: color-mix(
		in srgb,
		var(--ride-accent-soft) 62%,
		var(--ride-border)
	);
	background-color: color-mix(in srgb, var(--ride-bg-800) 94%, transparent);
}

.theme-select:focus {
	outline: none;
	border-color: var(--ride-accent);
	box-shadow: 0 0 0 2px
		color-mix(in srgb, var(--ride-accent) 35%, transparent);
}

.theme-select option {
	background-color: #101823;
	color: var(--ride-text);
}

.theme-link {
	color: var(--ride-muted);
	transition: color 0.2s ease;
}

.theme-link:hover {
	color: var(--ride-accent-soft);
}

.theme-accent-text {
	color: var(--ride-accent);
}

.theme-text-muted {
	color: var(--ride-muted);
}
.theme-text-muted\! {
	color: var(--ride-muted) !important;
}

.theme-text-primary {
	color: var(--ride-text);
}

.theme-code {
	font-family:
		ui-monospace,
		SFMono-Regular,
		SF Mono,
		Consolas,
		Liberation Mono,
		Menlo,
		monospace;
	font-size: 0.85rem;
	line-height: 1.65;
	tab-size: 2;
	white-space: pre;
	overflow-x: auto;
	background: color-mix(in srgb, var(--ride-bg-900) 72%, transparent);
	border: 1px solid color-mix(in srgb, var(--ride-border) 85%, transparent);
	border-radius: 0.75rem;
	padding: 1rem;
}

.theme-code::-webkit-scrollbar {
	height: 10px;
	width: 10px;
}

.docs-tree {
	display: grid;
	gap: 0.5rem;
}

.docs-tree-node {
	border: 1px solid color-mix(in srgb, var(--ride-border) 70%, transparent);
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--ride-bg-800) 74%, transparent);
	padding: 0.5rem 0.75rem;
}

.docs-tree-summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.docs-tree-summary::-webkit-details-marker {
	display: none;
}

.docs-tree-children {
	margin-top: 0.5rem;
	padding-left: 0.75rem;
	border-left: 1px solid
		color-mix(in srgb, var(--ride-border) 60%, transparent);
	display: grid;
	gap: 0.45rem;
}

.docs-tree-file {
	display: block;
	padding: 0.45rem 0.25rem 0.45rem 0;
	color: var(--ride-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.docs-tree-file:hover {
	color: var(--ride-accent-soft);
}

.docs-file-card {
	border-radius: 0.625rem;
}

.docs-doc-body {
	display: grid;
	gap: 0.4rem;
}

.docs-doc-body p {
	margin: 0;
}

.docs-doc-body h3,
.docs-doc-body h4,
.docs-doc-body h5,
.docs-doc-body h6 {
	margin: 0.25rem 0 0.35rem;
	color: var(--ride-text);
	font-weight: 700;
	line-height: 1.3;
}

.docs-doc-body ul,
.docs-doc-body ol {
	margin: 0.2rem 0 0.25rem;
	padding-left: 1.25rem;
	display: grid;
	gap: 0.2rem;
}

.docs-doc-body li {
	margin: 0;
}

.docs-doc-body blockquote {
	margin: 0.25rem 0;
	padding: 0.4rem 0.65rem;
	border-left: 3px solid
		color-mix(in srgb, var(--ride-accent) 55%, transparent);
	background: color-mix(in srgb, var(--ride-bg-900) 52%, transparent);
	border-radius: 0 0.4rem 0.4rem 0;
	color: var(--ride-text);
}

.docs-doc-body code {
	font-family:
		ui-monospace,
		SFMono-Regular,
		SF Mono,
		Consolas,
		Liberation Mono,
		Menlo,
		monospace;
	font-size: 0.82em;
	padding: 0.1rem 0.3rem;
	border-radius: 0.3rem;
	background: color-mix(in srgb, var(--ride-bg-900) 65%, transparent);
	border: 1px solid color-mix(in srgb, var(--ride-border) 70%, transparent);
	color: var(--ride-text);
}

.docs-doc-body pre {
	margin: 0.2rem 0;
}

.docs-doc-body a {
	color: var(--ride-accent-soft);
	text-decoration: underline;
	text-underline-offset: 0.14rem;
}

.docs-source-block {
	white-space: pre;
	line-height: 1;
}

.docs-source-line {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: 0.5rem;
	align-items: start;
}

.docs-source-line-number {
	text-align: right;
	color: var(--ride-muted);
	text-decoration: none;
	user-select: none;
	padding-right: 0.4rem;
	border-right: 1px solid
		color-mix(in srgb, var(--ride-border) 65%, transparent);
}

.docs-source-line-number:hover {
	color: var(--ride-accent-soft);
}

.docs-source-line:target .docs-source-line-content,
.docs-source-line:target .docs-source-line-number {
	color: var(--ride-accent-soft);
}

.docs-source-line-content {
	white-space: pre;
	overflow-wrap: normal;
	word-break: normal;
}

.theme-border {
	border-color: color-mix(in srgb, var(--ride-border) 85%, transparent);
}

.theme-border-soft {
	border-color: color-mix(in srgb, var(--ride-border) 70%, transparent);
}

.theme-surface {
	background: color-mix(in srgb, var(--ride-bg-800) 80%, transparent);
}

.theme-surface-strong {
	background: color-mix(in srgb, var(--ride-bg-800) 94%, transparent);
}

.theme-hover-accent-border {
	transition: border-color 0.2s ease;
}

.theme-hover-accent-border:hover {
	border-color: var(--ride-accent);
}

.theme-pill {
	border-radius: 0.625rem;
}

.theme-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ride-accent);
	color: var(--ride-c4);
	border: 1px solid color-mix(in srgb, var(--ride-accent) 70%, var(--ride-c4));
	border-radius: 0.5rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		filter 0.2s ease,
		transform 0.2s ease;
}

.theme-btn-primary:hover {
	filter: brightness(1.06);
}

.theme-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--ride-text);
	border: 1px solid color-mix(in srgb, var(--ride-border) 85%, transparent);
	border-radius: 0.5rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		color 0.2s ease;
}

.theme-btn-secondary:hover {
	border-color: var(--ride-accent);
	color: var(--ride-text);
}

.theme-avatar {
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--ride-bg-700) 88%, transparent);
	border: 1px solid color-mix(in srgb, var(--ride-border) 85%, transparent);
	color: var(--ride-text);
}

.theme-brand-dot {
	color: var(--ride-accent);
}

.theme-footer-shell {
	border-top: 1px solid
		color-mix(in srgb, var(--ride-border) 75%, transparent);
	background: color-mix(in srgb, var(--ride-bg-900) 90%, transparent);
}

.theme-footer-link {
	color: var(--ride-muted);
	transition: color 0.2s ease;
}

.theme-footer-link:hover {
	color: var(--ride-accent-soft);
}

/* Map popup styling - matches site theme */
[data-map] {
	background-color: var(--ride-bg-800);
	border-radius: 0.625rem;
}

.ride-map-panel {
	position: relative;
	overflow: hidden;
}

.ride-map-panel::before {
	content: '';
	position: absolute;
	inset: -40% auto auto -35%;
	width: 16rem;
	height: 16rem;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--ride-accent) 14%, transparent) 0%,
		transparent 70%
	);
	pointer-events: none;
}

.ride-suggestion-panel {
	position: relative;
}

.ride-suggestion-item {
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease;
}

.ride-suggestion-item:hover {
	border-color: var(--ride-accent-soft);
	background: var(--ride-bg-800);
}

.ride-suggestion-item:has(input:checked) {
	background-color: #0f172abf;
	border-color: var(--ride-accent);
}

.ride-suggestion-item:has(input:disabled) {
	opacity: 0.5;
	cursor: not-allowed;
}

.ride-suggestion-item:has(input:disabled):hover {
	border-color: color-mix(in srgb, var(--ride-border) 88%, transparent);
	background: color-mix(in srgb, var(--ride-bg-800) 88%, transparent);
}

.leaflet-popup.map-popup {
	margin-bottom: 0.5rem !important;
}

.leaflet-popup.map-popup .leaflet-popup-content-wrapper {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.leaflet-popup.map-popup .leaflet-popup-content {
	margin: 0 !important;
	padding: 0 !important;
}

.leaflet-popup.map-popup .leaflet-popup-tip-container {
	display: none !important;
}

.profile-map-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	cursor: pointer;
	list-style: none;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease;
}

.profile-map-summary::-webkit-details-marker {
	display: none;
}

.profile-map-summary::marker {
	content: '';
}

.profile-map-summary:hover {
	border-color: var(--ride-accent-soft);
}

.profile-map-chevron {
	font-size: 0.85rem;
	line-height: 1;
	color: var(--ride-muted);
	transition:
		transform 0.2s ease,
		color 0.2s ease;
}

.profile-map-details[open] .profile-map-chevron {
	transform: rotate(180deg);
	color: var(--ride-accent-soft);
}

.profile-map-panel {
	background: color-mix(in srgb, var(--ride-bg-800) 84%, transparent);
	transition: border-color 0.2s ease;
}

/* Leaflet attribution styling */
.leaflet-dragging .leaflet-control-attribution {
	pointer-events: none !important;
	opacity: 0.125 !important;
}

.leaflet-control-attribution {
	background: color-mix(
		in srgb,
		var(--ride-bg-900) 75%,
		transparent
	) !important;
	border: 1px solid color-mix(in srgb, var(--ride-border) 85%, transparent) !important;
	border-radius: 0.275rem !important;
	color: var(--ride-muted) !important;
	padding: 0.275rem 0.4rem !important;
	font-size: 0.6rem !important;
	transition: opacity 0.3s ease !important;
	user-select: none !important;
}

.leaflet-control-attribution a {
	color: var(--ride-muted) !important;
	text-decoration: none;
}

.leaflet-control-attribution a:hover {
	text-decoration: underline;
}

/* Text separators in attribution */
.leaflet-control-attribution:before {
	display: none !important;
}

/* Leaflet controls styling */
.leaflet-control-zoom {
	border: none !important;
	box-shadow: none !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.25rem !important;
	font-size: 0.875rem !important;
	user-select: none !important;
}

.leaflet-control-zoom a {
	width: 2rem !important;
	height: 2rem !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	text-indent: 0 !important;
	border-radius: 0.375rem !important;
	background: color-mix(
		in srgb,
		var(--ride-bg-800) 95%,
		transparent
	) !important;
	border: 1px solid color-mix(in srgb, var(--ride-border) 70%, transparent) !important;
	color: var(--ride-text) !important;
	font-weight: 700 !important;
	transition: all 0.2s ease !important;
	user-select: none !important;
}

.leaflet-control-zoom a:not(.leaflet-disabled):hover {
	background: color-mix(
		in srgb,
		var(--ride-accent-soft) 10%,
		var(--ride-bg-800)
	) !important;
	color: var(--ride-accent-soft) !important;
	border-color: var(--ride-accent-soft) !important;
}

.leaflet-control-zoom a.leaflet-disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

.leaflet-control-zoom a span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}

.leaflet-tile.leaflet-tile-loaded {
	filter: grayscale(1) invert(1) brightness(0.9);
}

.divide-y > * {
	border-top-width: 0 !important;
	border-bottom-width: 0 !important;
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
	border-top-width: 1px !important;
	border-top-style: solid;
	border-top-color: inherit;
}

[ride-input]:checked + [ride-label],
[ride-label].checked {
	background-color: #0f172abf;
	border-color: var(--ride-accent);
	color: var(--ride-text);
}