/* synced from shared/skin @ 2026-09-16 — do not edit copies; run: node scripts/sync-shared-skin.mjs */
/**
 * Apple Liquid Glass — web reconstruction of the iOS 26 / macOS 26 Tahoe material.
 *
 * Optical model (HIG + WWDC 2025 “Meet Liquid Glass”):
 *   - Regular / Clear variants
 *   - Convex-rim refraction (SVG feDisplacementMap, Chromium backdrop-filter: url())
 *   - Specular rim: bright hairlines top+bottom, dark left+right (measured Control Center)
 *   - Travelling highlight driven by --lg-hx / --lg-hy (pointer / gyro)
 *   - Adaptive tint; glass is the floating control layer, not the content layer
 *
 * Enable:  <html data-skin="liquid-glass">
 * Runtime: shared/skin/liquid-glass.js  (filters + light tracking)
 * Revert:  ?skin=classic
 *
 * Layout unchanged. Edit only this file in shared/skin/, then: npm run sync:skin
 */

/* ═══════════════════════════════════════════════════════════════════
   TOKENS — LIGHT (iOS 26 light)
   ═══════════════════════════════════════════════════════════════════ */
html[data-skin='liquid-glass'] {
	color-scheme: light dark;
	--font: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	--radius: 26px;
	--radius-lg: 28px;
	--radius-pill: 980px;
	--ease: 0.38s cubic-bezier(0.22, 1, 0.36, 1);
	--ease-press: 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Apple systemBackground — monochrome */
	--bg: #ffffff;
	--bg-elevated: #ffffff;
	--bg-mesh: none;

	/* Regular glass fill — milky, still see-through */
	--surface: rgba(255, 255, 255, 0.22);
	--surface-hover: rgba(255, 255, 255, 0.34);
	--surface-muted: rgba(255, 255, 255, 0.14);
	--surface-solid: rgba(255, 255, 255, 0.55);

	--text: #000000;
	--muted: rgba(60, 60, 67, 0.6);
	--border: rgba(255, 255, 255, 0.62);
	--border-dark: rgba(0, 0, 0, 0.12);
	--border-strong: rgba(255, 255, 255, 0.78);

	--success: #34c759;
	--success-soft: rgba(52, 199, 89, 0.16);
	--danger: #ff3b30;
	--danger-soft: rgba(255, 59, 48, 0.14);
	--warn: #ff9500;
	--warn-soft: rgba(255, 149, 0, 0.16);
	--accent-soft: color-mix(in srgb, var(--accent, #007aff) 16%, transparent);
	--accent-fallback: #007aff;

	/* Material */
	--lg-blur: 28px;
	--lg-sat: 1.85;
	--lg-bright: 1.06;
	--lg-fill: rgba(255, 255, 255, 0.18);
	--lg-fill-clear: rgba(255, 255, 255, 0.1);
	--lg-edge: rgba(255, 255, 255, 0.7);
	--lg-spec-top: 0.78;
	--lg-spec-bot: 0.5;
	--lg-hx: 50%;
	--lg-hy: 0%;
	--lg-angle: 180deg;

	/* Measured rim: bright T/B, dark L/R + outer lift */
	--shadow-xs:
		inset 0 1px 0 rgba(255, 255, 255, 0.82),
		inset 0 -1px 0 rgba(255, 255, 255, 0.42),
		inset 1px 0 0 rgba(0, 0, 0, 0.08),
		inset -1px 0 0 rgba(0, 0, 0, 0.08),
		0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.92),
		inset 0 -1px 0 rgba(255, 255, 255, 0.48),
		inset 1px 0 0 rgba(0, 0, 0, 0.1),
		inset -1px 0 0 rgba(0, 0, 0, 0.1),
		0 8px 28px rgba(0, 0, 0, 0.12),
		0 2px 6px rgba(0, 0, 0, 0.06);
	--shadow-lg:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
		inset 0 -1px 0 rgba(255, 255, 255, 0.5),
		inset 1px 0 0 rgba(0, 0, 0, 0.1),
		inset -1px 0 0 rgba(0, 0, 0, 0.1),
		0 18px 48px rgba(0, 0, 0, 0.16),
		0 6px 16px rgba(0, 0, 0, 0.08);
	--shadow-float: var(--shadow-lg);
	--shadow-pressed:
		inset 0 2px 8px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);

	--face:
		radial-gradient(130% 90% at var(--lg-hx) var(--lg-hy), rgba(255, 255, 255, 0.55), transparent 46%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.22) 100%);
	--face-hover:
		radial-gradient(130% 90% at var(--lg-hx) var(--lg-hy), rgba(255, 255, 255, 0.7), transparent 48%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.12) 42%, rgba(255, 255, 255, 0.3) 100%);
	--face-accent:
		radial-gradient(130% 90% at var(--lg-hx) var(--lg-hy), rgba(255, 255, 255, 0.5), transparent 46%),
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--accent, #007aff) 22%, #fff) 0%,
			color-mix(in srgb, var(--accent, #007aff) 10%, transparent) 100%
		);

	--preview: rgba(0, 0, 0, 0.88);
	--track: rgba(0, 0, 0, 0.08);
	--scan: #64d2ff;
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ═══════════════════════════════════════════════════════════════════
   TOKENS — DARK (iOS 26 dark)
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
	html[data-skin='liquid-glass']:not([data-theme='light']) {
		--bg: #000000;
		--bg-elevated: #000000;
		--bg-mesh: none;
		--surface: rgba(40, 40, 44, 0.42);
		--surface-hover: rgba(58, 58, 64, 0.55);
		--surface-muted: rgba(28, 28, 32, 0.38);
		--surface-solid: rgba(28, 28, 30, 0.72);
		--text: #ffffff;
		--muted: rgba(235, 235, 245, 0.6);
		--border: rgba(255, 255, 255, 0.22);
		--border-dark: rgba(0, 0, 0, 0.55);
		--border-strong: rgba(255, 255, 255, 0.32);
		--success: #30d158;
		--success-soft: rgba(48, 209, 88, 0.18);
		--danger: #ff453a;
		--danger-soft: rgba(255, 69, 58, 0.16);
		--warn: #ffd60a;
		--warn-soft: rgba(255, 214, 10, 0.16);
		--lg-fill: rgba(255, 255, 255, 0.08);
		--lg-fill-clear: rgba(255, 255, 255, 0.05);
		--lg-edge: rgba(255, 255, 255, 0.28);
		--lg-spec-top: 0.38;
		--lg-spec-bot: 0.22;
		--lg-bright: 1.08;
		--shadow-xs:
			inset 0 1px 0 rgba(255, 255, 255, 0.28),
			inset 0 -1px 0 rgba(255, 255, 255, 0.1),
			inset 1px 0 0 rgba(0, 0, 0, 0.45),
			inset -1px 0 0 rgba(0, 0, 0, 0.45),
			0 1px 3px rgba(0, 0, 0, 0.5);
		--shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.32),
			inset 0 -1px 0 rgba(255, 255, 255, 0.12),
			inset 1px 0 0 rgba(0, 0, 0, 0.5),
			inset -1px 0 0 rgba(0, 0, 0, 0.5),
			0 12px 36px rgba(0, 0, 0, 0.55),
			0 2px 8px rgba(0, 0, 0, 0.4);
		--shadow-lg:
			inset 0 1.5px 0 rgba(255, 255, 255, 0.34),
			inset 0 -1px 0 rgba(255, 255, 255, 0.12),
			inset 1px 0 0 rgba(0, 0, 0, 0.55),
			inset -1px 0 0 rgba(0, 0, 0, 0.55),
			0 24px 64px rgba(0, 0, 0, 0.65),
			0 8px 20px rgba(0, 0, 0, 0.5);
		--shadow-float: var(--shadow-lg);
		--shadow-pressed:
			inset 0 3px 10px rgba(0, 0, 0, 0.55),
			inset 0 1px 0 rgba(255, 255, 255, 0.08);
		--face:
			radial-gradient(130% 90% at var(--lg-hx) var(--lg-hy), rgba(255, 255, 255, 0.22), transparent 46%),
			linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.08) 100%);
		--face-hover:
			radial-gradient(130% 90% at var(--lg-hx) var(--lg-hy), rgba(255, 255, 255, 0.3), transparent 48%),
			linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.12) 100%);
		--face-accent:
			radial-gradient(130% 90% at var(--lg-hx) var(--lg-hy), rgba(255, 255, 255, 0.22), transparent 46%),
			linear-gradient(
				180deg,
				color-mix(in srgb, var(--accent, #0a84ff) 32%, transparent) 0%,
				color-mix(in srgb, var(--accent, #0a84ff) 12%, transparent) 100%
			);
		--preview: #000;
		--track: rgba(255, 255, 255, 0.1);
		--scan: #64d2ff;
	}
}

html[data-skin='liquid-glass'][data-theme='dark'] {
	--bg: #000000;
	--bg-elevated: #000000;
	--bg-mesh: none;
	--surface: rgba(40, 40, 44, 0.42);
	--surface-hover: rgba(58, 58, 64, 0.55);
	--surface-muted: rgba(28, 28, 32, 0.38);
	--surface-solid: rgba(28, 28, 30, 0.72);
	--text: #ffffff;
	--muted: rgba(235, 235, 245, 0.6);
	--border: rgba(255, 255, 255, 0.22);
	--border-dark: rgba(0, 0, 0, 0.55);
	--border-strong: rgba(255, 255, 255, 0.32);
	--success: #30d158;
	--success-soft: rgba(48, 209, 88, 0.18);
	--danger: #ff453a;
	--danger-soft: rgba(255, 69, 58, 0.16);
	--warn: #ffd60a;
	--warn-soft: rgba(255, 214, 10, 0.16);
	--lg-fill: rgba(255, 255, 255, 0.08);
	--lg-fill-clear: rgba(255, 255, 255, 0.05);
	--lg-edge: rgba(255, 255, 255, 0.28);
	--lg-spec-top: 0.38;
	--lg-spec-bot: 0.22;
	--lg-bright: 1.08;
	--shadow-xs:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		inset 0 -1px 0 rgba(255, 255, 255, 0.1),
		inset 1px 0 0 rgba(0, 0, 0, 0.45),
		inset -1px 0 0 rgba(0, 0, 0, 0.45),
		0 1px 3px rgba(0, 0, 0, 0.5);
	--shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.32),
		inset 0 -1px 0 rgba(255, 255, 255, 0.12),
		inset 1px 0 0 rgba(0, 0, 0, 0.5),
		inset -1px 0 0 rgba(0, 0, 0, 0.5),
		0 12px 36px rgba(0, 0, 0, 0.55),
		0 2px 8px rgba(0, 0, 0, 0.4);
	--shadow-lg:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.34),
		inset 0 -1px 0 rgba(255, 255, 255, 0.12),
		inset 1px 0 0 rgba(0, 0, 0, 0.55),
		inset -1px 0 0 rgba(0, 0, 0, 0.55),
		0 24px 64px rgba(0, 0, 0, 0.65),
		0 8px 20px rgba(0, 0, 0, 0.5);
	--shadow-float: var(--shadow-lg);
	--shadow-pressed:
		inset 0 3px 10px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	--face:
		radial-gradient(130% 90% at var(--lg-hx) var(--lg-hy), rgba(255, 255, 255, 0.22), transparent 46%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.08) 100%);
	--face-hover:
		radial-gradient(130% 90% at var(--lg-hx) var(--lg-hy), rgba(255, 255, 255, 0.3), transparent 48%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.12) 100%);
	--face-accent:
		radial-gradient(130% 90% at var(--lg-hx) var(--lg-hy), rgba(255, 255, 255, 0.22), transparent 46%),
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--accent, #0a84ff) 32%, transparent) 0%,
			color-mix(in srgb, var(--accent, #0a84ff) 12%, transparent) 100%
		);
	--preview: #000;
	--track: rgba(255, 255, 255, 0.1);
	--scan: #64d2ff;
}

html[data-skin='liquid-glass'][data-theme='light'] {
	--bg: #ffffff;
	--bg-elevated: #ffffff;
	--bg-mesh: none;
	--surface: rgba(255, 255, 255, 0.22);
	--surface-hover: rgba(255, 255, 255, 0.34);
	--surface-muted: rgba(255, 255, 255, 0.14);
	--surface-solid: rgba(255, 255, 255, 0.55);
	--text: rgba(0, 0, 0, 0.88);
	--muted: rgba(60, 60, 67, 0.72);
	--border: rgba(255, 255, 255, 0.62);
	--border-dark: rgba(0, 0, 0, 0.12);
	--border-strong: rgba(255, 255, 255, 0.78);
	--lg-fill: rgba(255, 255, 255, 0.18);
	--lg-fill-clear: rgba(255, 255, 255, 0.1);
	--lg-edge: rgba(255, 255, 255, 0.7);
	--lg-spec-top: 0.78;
	--lg-spec-bot: 0.5;
	--lg-bright: 1.06;
}

/* ═══════════════════════════════════════════════════════════════════
   CANVAS — content layer (wallpaper). Glass floats above it.
   ═══════════════════════════════════════════════════════════════════ */
html[data-skin='liquid-glass'] {
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
}

html[data-skin='liquid-glass'],
html[data-skin='liquid-glass'] body {
	background-color: var(--bg);
	background-image: none;
	color: var(--text);
}

html[data-skin='liquid-glass'] body.admin-panel {
	background: #000;
	background-image: none;
}

/* Shared frost recipe */
html[data-skin='liquid-glass'] {
	--lg-frost: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
}

html.lg-refract[data-skin='liquid-glass'] {
	--lg-frost: url(#rl-lg-refract) blur(14px) saturate(1.55) brightness(var(--lg-bright)) contrast(1.04);
}

/* ═══════════════════════════════════════════════════════════════════
   REGULAR — floating control surfaces
   ═══════════════════════════════════════════════════════════════════ */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	html[data-skin='liquid-glass'] .sidebar,
	html[data-skin='liquid-glass'] .mobile-header,
	html[data-skin='liquid-glass'] .bus-info-panel,
	html[data-skin='liquid-glass'] .no-buses-overlay,
	html[data-skin='liquid-glass'] .status-toast,
	html[data-skin='liquid-glass'] .toast-card,
	html[data-skin='liquid-glass'] .idle-card,
	html[data-skin='liquid-glass'] .idle-overlay,
	html[data-skin='liquid-glass'] .mode-toggle,
	html[data-skin='liquid-glass'] .tabs,
	html[data-skin='liquid-glass'] .card,
	html[data-skin='liquid-glass'] .panel,
	html[data-skin='liquid-glass'] .app,
	html[data-skin='liquid-glass'] .site-header,
	html[data-skin='liquid-glass'] .header,
	html[data-skin='liquid-glass'] .filters,
	html[data-skin='liquid-glass'] .timetable-card,
	html[data-skin='liquid-glass'] .day-card,
	html[data-skin='liquid-glass'] .rl-appearance-menu,
	html[data-skin='liquid-glass'] .rl-modal-card,
	html[data-skin='liquid-glass'] .modal-card,
	html[data-skin='liquid-glass'] .appearance-menu,
	html[data-skin='liquid-glass'] .rl-chrome-btn,
	html[data-skin='liquid-glass'] .class-chip {
		-webkit-backdrop-filter: var(--lg-frost);
		backdrop-filter: var(--lg-frost);
	}

	html[data-skin='liquid-glass'] .idle-overlay {
		background: rgba(0, 0, 0, 0.28) !important;
		-webkit-backdrop-filter: blur(18px) saturate(1.3);
		backdrop-filter: blur(18px) saturate(1.3);
	}
}

html[data-skin='liquid-glass'] .app:has(.main-content),
html[data-skin='liquid-glass'] .app:has(.map-wrapper) {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

html[data-skin='liquid-glass'] .sidebar,
html[data-skin='liquid-glass'] .bus-info-panel,
html[data-skin='liquid-glass'] .no-buses-overlay,
html[data-skin='liquid-glass'] .toast-card,
html[data-skin='liquid-glass'] .idle-card,
html[data-skin='liquid-glass'] .card,
html[data-skin='liquid-glass'] .panel,
html[data-skin='liquid-glass'] .filters,
html[data-skin='liquid-glass'] .timetable-card,
html[data-skin='liquid-glass'] .rl-appearance-menu,
html[data-skin='liquid-glass'] .rl-modal-card,
html[data-skin='liquid-glass'] .modal-card,
html[data-skin='liquid-glass'] .appearance-menu,
html[data-skin='liquid-glass'] a.app,
html[data-skin='liquid-glass'] .apps > .app {
	background-color: var(--lg-fill) !important;
	background-image: var(--face) !important;
	border: 0.5px solid var(--lg-edge) !important;
	box-shadow: var(--shadow-float) !important;
	border-radius: var(--radius-lg);
	corner-shape: superellipse(1.6);
}

html[data-skin='liquid-glass'] .sidebar {
	background-color: color-mix(in srgb, var(--lg-fill) 70%, transparent) !important;
	border-right: 0.5px solid var(--lg-edge) !important;
	border-radius: 0;
	corner-shape: unset;
	box-shadow:
		inset 1px 0 0 rgba(255, 255, 255, 0.35),
		12px 0 40px rgba(0, 0, 0, 0.1) !important;
	-webkit-backdrop-filter: var(--lg-frost) !important;
	backdrop-filter: var(--lg-frost) !important;
}

html[data-skin='liquid-glass'] .sidebar-header,
html[data-skin='liquid-glass'] .sidebar .status-section,
html[data-skin='liquid-glass'] .sidebar .mode-section,
html[data-skin='liquid-glass'] .sidebar .stats-section,
html[data-skin='liquid-glass'] .sidebar .filters-section,
html[data-skin='liquid-glass'] .sidebar .footer-section,
html[data-skin='liquid-glass'] .sidebar .sidebar-content {
	background: transparent !important;
	border-color: color-mix(in srgb, var(--border) 55%, transparent) !important;
}

html[data-skin='liquid-glass'] .sidebar-header,
html[data-skin='liquid-glass'] .mobile-header,
html[data-skin='liquid-glass'] .site-header,
html[data-skin='liquid-glass'] .header {
	background-color: color-mix(in srgb, var(--lg-fill) 80%, transparent) !important;
	background-image: var(--face) !important;
	border-bottom: 0.5px solid var(--lg-edge) !important;
	-webkit-backdrop-filter: var(--lg-frost) !important;
	backdrop-filter: var(--lg-frost) !important;
}

html[data-skin='liquid-glass'] .sidebar .stat-card,
html[data-skin='liquid-glass'] .sidebar .search-input {
	background: var(--lg-fill-clear) !important;
	background-image: var(--face) !important;
	border: 0.5px solid var(--lg-edge) !important;
	box-shadow: var(--shadow-xs) !important;
	border-radius: 14px;
	corner-shape: superellipse(1.7);
}

html[data-skin='liquid-glass'] .sidebar-overlay {
	background: rgba(0, 0, 0, 0.28) !important;
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	backdrop-filter: blur(12px) saturate(1.2);
}

/* ═══════════════════════════════════════════════════════════════════
   CLEAR — capsules / chips / tiles (more lens, less milk)
   ═══════════════════════════════════════════════════════════════════ */
html[data-skin='liquid-glass'] .route-filter,
html[data-skin='liquid-glass'] .mode-btn,
html[data-skin='liquid-glass'] .tab,
html[data-skin='liquid-glass'] .sidebar-toggle,
html[data-skin='liquid-glass'] .sidebar-reopen,
html[data-skin='liquid-glass'] .clear-btn,
html[data-skin='liquid-glass'] .idle-continue-btn,
html[data-skin='liquid-glass'] .class-chip,
html[data-skin='liquid-glass'] .rl-chrome-btn,
html[data-skin='liquid-glass'] .app {
	border-radius: var(--radius-pill);
	corner-shape: superellipse(2);
	transition:
		transform var(--ease-press),
		box-shadow var(--ease),
		background var(--ease),
		border-color var(--ease),
		color var(--ease),
		filter var(--ease);
}

html[data-skin='liquid-glass'] .route-filter,
html[data-skin='liquid-glass'] .sidebar-toggle,
html[data-skin='liquid-glass'] .sidebar-reopen,
html[data-skin='liquid-glass'] .basemap-toggle,
html[data-skin='liquid-glass'] .class-chip,
html[data-skin='liquid-glass'] .rl-chrome-btn,
html[data-skin='liquid-glass'] a.app,
html[data-skin='liquid-glass'] .apps > .app {
	background-color: var(--lg-fill-clear) !important;
	background-image: var(--face) !important;
	border: 0.5px solid var(--lg-edge) !important;
	box-shadow: var(--shadow) !important;
}

html[data-skin='liquid-glass'] a.app,
html[data-skin='liquid-glass'] .apps > .app {
	border-radius: var(--radius-lg) !important;
	corner-shape: superellipse(1.6);
}

html[data-skin='liquid-glass'] .route-filter:hover,
html[data-skin='liquid-glass'] .sidebar-toggle:hover,
html[data-skin='liquid-glass'] .sidebar-reopen:hover,
html[data-skin='liquid-glass'] .basemap-toggle:hover,
html[data-skin='liquid-glass'] .class-chip:hover,
html[data-skin='liquid-glass'] .rl-chrome-btn:hover,
html[data-skin='liquid-glass'] a.app:hover,
html[data-skin='liquid-glass'] .apps > .app:hover {
	background-image: var(--face-hover) !important;
	transform: translateY(-1px);
	box-shadow: var(--shadow-lg) !important;
}

html[data-skin='liquid-glass'] .route-filter:active,
html[data-skin='liquid-glass'] .sidebar-toggle:active,
html[data-skin='liquid-glass'] .basemap-toggle:active,
html[data-skin='liquid-glass'] .class-chip:active,
html[data-skin='liquid-glass'] a.app:active,
html[data-skin='liquid-glass'] .apps > .app:active,
html[data-skin='liquid-glass'] .mode-btn:active,
html[data-skin='liquid-glass'] .tab:active,
html[data-skin='liquid-glass'] .rl-chrome-btn:active {
	transform: scale(0.97);
	box-shadow: var(--shadow-pressed) !important;
	filter: brightness(0.97);
}

html[data-skin='liquid-glass'] .route-filter.selected,
html[data-skin='liquid-glass'] .mode-btn.active,
html[data-skin='liquid-glass'] .tab.active,
html[data-skin='liquid-glass'] .class-chip.active {
	background-image: var(--face-accent) !important;
	background-color: transparent !important;
	border-color: color-mix(in srgb, var(--accent, #007aff) 40%, var(--lg-edge)) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.75),
		inset 0 -1px 0 rgba(255, 255, 255, 0.3),
		0 8px 24px color-mix(in srgb, var(--accent, #007aff) 22%, transparent) !important;
	color: var(--text) !important;
}

/* Segmented control — recessed glass well, selected capsule morphs on top */
html[data-skin='liquid-glass'] .mode-toggle,
html[data-skin='liquid-glass'] .tabs {
	background: var(--lg-fill-clear) !important;
	background-image: none !important;
	border: 0.5px solid var(--border-dark) !important;
	box-shadow:
		inset 0 1px 3px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
	border-radius: var(--radius-pill);
	corner-shape: superellipse(2);
	padding: 0.22rem;
}

html[data-skin='liquid-glass'] .mode-btn,
html[data-skin='liquid-glass'] .tab {
	background: transparent;
	border: 1px solid transparent !important;
	border-radius: var(--radius-pill) !important;
	box-shadow: none !important;
}

html[data-skin='liquid-glass'] .mode-btn.active,
html[data-skin='liquid-glass'] .tab.active {
	background-color: var(--lg-fill) !important;
	background-image: var(--face) !important;
	border: 0.5px solid var(--lg-edge) !important;
	box-shadow: var(--shadow) !important;
}

html[data-skin='liquid-glass'] .route-badge {
	border-radius: 12px !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		0 4px 10px color-mix(in srgb, var(--route-color, var(--accent, #007aff)) 35%, transparent) !important;
	border: 0.5px solid color-mix(in srgb, #fff 40%, transparent) !important;
}

html[data-skin='liquid-glass'] .brand-mark,
html[data-skin='liquid-glass'] .app-icon-box {
	background: var(--brand-gradient, linear-gradient(145deg, #64d2ff, #bf5af2)) !important;
	border-radius: 18px !important;
	corner-shape: superellipse(1.7);
	border: 0.5px solid rgba(255, 255, 255, 0.5) !important;
	box-shadow:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 0 rgba(0, 0, 0, 0.18),
		0 10px 24px color-mix(in srgb, #007aff 28%, transparent) !important;
}

html[data-skin='liquid-glass'] .idle-continue-btn {
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--accent, #007aff) 86%, #fff) 0%,
		var(--accent, #007aff) 100%
	) !important;
	color: #fff !important;
	border: 0.5px solid color-mix(in srgb, var(--accent, #007aff) 70%, #fff) !important;
	border-radius: var(--radius-pill) !important;
	box-shadow:
		inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
		0 8px 24px color-mix(in srgb, var(--accent, #007aff) 40%, transparent) !important;
	font-weight: 650;
}

html[data-skin='liquid-glass'] .status-pill {
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-xs);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	border: 0.5px solid color-mix(in srgb, currentColor 22%, var(--lg-edge));
}

html[data-skin='liquid-glass'] .leaflet-control-attribution {
	background: var(--lg-fill) !important;
	-webkit-backdrop-filter: var(--lg-frost);
	backdrop-filter: var(--lg-frost);
	border-radius: 12px !important;
	border: 0.5px solid var(--lg-edge) !important;
	box-shadow: var(--shadow-xs) !important;
	overflow: hidden;
}

html[data-skin='liquid-glass'] .basemap-toggle {
	-webkit-backdrop-filter: var(--lg-frost);
	backdrop-filter: var(--lg-frost);
	border-radius: var(--radius-pill) !important;
}

html[data-skin='liquid-glass'] .main-content {
	background: transparent !important;
}

html[data-skin='liquid-glass'] .footer-link:hover,
html[data-skin='liquid-glass'] .back-link:hover {
	color: var(--accent, #007aff);
}

/* Serali table stays content (HIG: don't glass the content layer) */
html[data-skin='liquid-glass'] .timetable th,
html[data-skin='liquid-glass'] .timetable td {
	background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
}

html[data-skin='liquid-glass'] .timetable td.now,
html[data-skin='liquid-glass'] .m-row.now {
	background: color-mix(in srgb, var(--accent, #007aff) 14%, transparent);
}

html[data-skin='liquid-glass'] select,
html[data-skin='liquid-glass'] input[type='text'] {
	background: var(--lg-fill-clear);
	border: 0.5px solid var(--lg-edge);
	border-radius: 14px;
	box-shadow: var(--shadow-xs);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	color: var(--text);
}

html[data-skin='liquid-glass'] .rl-modal {
	background: rgba(0, 0, 0, 0.28);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	backdrop-filter: blur(20px) saturate(1.3);
}

html[data-skin='liquid-glass'] .header,
html[data-skin='liquid-glass'] .site-header {
	z-index: 400;
	overflow: visible;
}

html[data-skin='liquid-glass'] .rl-appearance-menu,
html[data-skin='liquid-glass'] body > .rl-appearance-menu {
	z-index: 2147483000 !important;
}

html[data-skin='liquid-glass'] .tab,
html[data-skin='liquid-glass'] .mode-btn,
html[data-skin='liquid-glass'] .class-chip,
html[data-skin='liquid-glass'] .rl-chrome-btn,
html[data-skin='liquid-glass'] .btn-primary,
html[data-skin='liquid-glass'] .btn-secondary,
html[data-skin='liquid-glass'] .btn-success,
html[data-skin='liquid-glass'] .idle-continue-btn,
html[data-skin='liquid-glass'] .route-filter,
html[data-skin='liquid-glass'] .sidebar-toggle,
html[data-skin='liquid-glass'] .sidebar-reopen,
html[data-skin='liquid-glass'] .basemap-toggle {
	border-radius: 980px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduce Transparency / Reduce Motion (Apple HIG)
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-transparency: reduce) {
	html[data-skin='liquid-glass'] {
		--lg-fill: #ffffff;
		--lg-fill-clear: #f2f2f7;
		--surface: #ffffff;
		--surface-hover: #f2f2f7;
		--surface-muted: #f2f2f7;
		--lg-blur: 0px;
		--lg-frost: none;
		--bg-mesh: none;
	}
	html.lg-refract[data-skin='liquid-glass'] {
		--lg-frost: none;
	}
	@media (prefers-color-scheme: dark) {
		html[data-skin='liquid-glass'] {
			--lg-fill: #1c1c1e;
			--lg-fill-clear: #2c2c2e;
			--surface: #1c1c1e;
			--surface-hover: #2c2c2e;
			--surface-muted: #000;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	html[data-skin='liquid-glass'] .route-filter,
	html[data-skin='liquid-glass'] .mode-btn,
	html[data-skin='liquid-glass'] .tab,
	html[data-skin='liquid-glass'] .class-chip,
	html[data-skin='liquid-glass'] .app {
		transition: none !important;
	}
	html[data-skin='liquid-glass'] .route-filter:hover,
	html[data-skin='liquid-glass'] .app:hover,
	html[data-skin='liquid-glass'] .class-chip:hover {
		transform: none !important;
	}
}