/* Liquid glass effect — adapted for the floating Top button */
:root{
	/* Glass variables scoped here to avoid collisions; fallback to UI theme vars */
	--lg-surface: color-mix(in srgb, var(--card, #0a0a0a) 70%, transparent);
	--lg-border: color-mix(in srgb, var(--fg, #fff) 22%, transparent 78%);
	--lg-highlight: color-mix(in srgb, var(--fg, #fff) 65%, transparent 35%);
	--lg-shadow: rgba(0,0,0,.25);
}

/* Base glass button styling */
.glass-btn{
	position: fixed;
	right: 18px;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
	display: none; /* toggled by .show in ui.css */
	z-index: 400; /* above canvas and content */
	border-radius: 999px;
	padding: .6rem 1rem;
	gap: .5rem;
	font-weight: 650;
	letter-spacing: .02em;
	line-height: 1;
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--lg-surface) 85%, transparent) 0%,
			color-mix(in srgb, var(--lg-surface) 92%, transparent) 100%
		);
	border: 1px solid var(--lg-border);
	color: var(--fg);
	text-decoration: none;
	box-shadow:
		inset 0 1px 0 var(--lg-highlight),
		0 10px 24px var(--lg-shadow);
	transition: transform .2s ease, box-shadow .2s ease, background .25s ease, opacity .25s ease;
}

.glass-btn:hover{
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 var(--lg-highlight),
		0 14px 34px rgba(0,0,0,.35);
}

.glass-btn:active{
	transform: translateY(0) scale(.98);
}

.glass-btn:focus-visible{
	outline: 2px solid color-mix(in srgb, var(--accent, #7dd3fc) 70%, transparent);
	outline-offset: 2px;
}

/* Icon treatment if using an arrow character */
.glass-btn::before{
	content: "";
}

/* Respect print */
@media print{
	.glass-btn{ display:none !important; }
}

/* Light/dark adjustments are inherited from root vars in ui.css */

/* Liquid glass badge for timeline date (e.g., "December 2025") */
.timeline .entry-period{
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--lg-surface) 85%, transparent) 0%,
		color-mix(in srgb, var(--lg-surface) 92%, transparent) 100%
	);
	border: 1px solid var(--lg-border);
	color: color-mix(in srgb, var(--fg, #fff) 92%, transparent 8%);
	border-radius: 999px; /* ensure pill */
	box-shadow:
		inset 0 1px 0 var(--lg-highlight),
		0 18px 36px rgba(0,0,0,.22);
}

.timeline .tl.card:hover .entry-period,
.timeline .tl.card:focus-within .entry-period{
	box-shadow:
		inset 0 1px 0 var(--lg-highlight),
		0 22px 44px rgba(0,0,0,.28);
}

/* Liquid glass surface for all cards in body sections */
.card{
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--lg-surface) 82%, transparent) 0%,
		color-mix(in srgb, var(--lg-surface) 94%, transparent) 100%
	);
	border: 1px solid var(--lg-border);
	box-shadow:
		inset 0 1px 0 var(--lg-highlight),
		0 12px 28px rgba(0,0,0,.22);
	transition: box-shadow .28s ease, background .28s ease;
}

.card:hover{
	/* preserve glass background on hover (override ui.css) */
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--lg-surface) 82%, transparent) 0%,
		color-mix(in srgb, var(--lg-surface) 94%, transparent) 100%
	);
	box-shadow:
		inset 0 1px 0 var(--lg-highlight),
		0 16px 36px rgba(0,0,0,.28);
}

@media (max-width: 640px){
	.card{ -webkit-backdrop-filter: saturate(135%) blur(8px); backdrop-filter: saturate(135%) blur(8px); }
}

@media print{
	.card{ background:#fff !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* ===================== NAVIGATION BAR GLASS ===================== */
.navigation{
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--lg-surface) 78%, transparent) 0%,
		color-mix(in srgb, var(--lg-surface) 92%, transparent) 100%
	);
	box-shadow:
		0 10px 26px rgba(0,0,0,.22);
}

.navigation.scrolled{
		box-shadow:
			0 18px 40px rgba(0,0,0,.28);
}

/* ===================== DROPDOWN GLASS PANEL ===================== */
.dropdown{
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	backdrop-filter: saturate(140%) blur(12px);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--lg-surface) 78%, transparent) 0%,
		color-mix(in srgb, var(--lg-surface) 92%, transparent) 100%
	);
	/* Avoid pronounced lines; rely on soft translucency */
	border: none;
	box-shadow: none;
}

@media (max-width: 768px){
	.dropdown{
		-webkit-backdrop-filter: saturate(135%) blur(10px);
		backdrop-filter: saturate(135%) blur(10px);
	}
}