/* Hasaki Glass UI - preview layer for the Argon theme. */
body.hasaki-glass-ui {
	--hgu-surface: rgba(255, 255, 255, 0.42);
	--hgu-surface-sidebar: rgba(245, 247, 252, 0.62);
	--hgu-border: rgba(255, 255, 255, 0.48);
	--hgu-shadow: 0 14px 34px rgba(23, 38, 74, 0.13), 0 3px 10px rgba(23, 38, 74, 0.08);
	--hgu-blur: 18px;
}

html.darkmode body.hasaki-glass-ui {
	--hgu-surface: rgba(18, 23, 35, 0.54);
	--hgu-surface-sidebar: rgba(18, 23, 35, 0.76);
	--hgu-border: rgba(255, 255, 255, 0.14);
	--hgu-shadow: 0 16px 38px rgba(0, 0, 0, 0.26), 0 3px 12px rgba(0, 0, 0, 0.18);
}

/* Keep the material consistent with theme cards and widget cards. */
body.hasaki-glass-ui .card:not(#leftbar_part1):not(#leftbar_announcement),
body.hasaki-glass-ui .page-information-card,
body.hasaki-glass-ui .post-navigation,
body.hasaki-glass-ui .related-posts,
body.hasaki-glass-ui .site-footer,
body.hasaki-glass-ui .github-info-card {
	background-color: var(--hgu-surface) !important;
	background-image: none;
	border: 1px solid var(--hgu-border) !important;
	box-shadow: var(--hgu-shadow) !important;
	-webkit-backdrop-filter: blur(var(--hgu-blur)) saturate(130%);
	backdrop-filter: blur(var(--hgu-blur)) saturate(130%);
	background-clip: padding-box;
}

body.hasaki-glass-ui article.post {
	background-color: var(--hgu-surface) !important;
}

body.hasaki-glass-ui article.post:hover {
	border-color: rgba(255, 255, 255, 0.68) !important;
	box-shadow: 0 18px 42px rgba(23, 38, 74, 0.17), 0 4px 12px rgba(23, 38, 74, 0.1) !important;
}

html.darkmode body.hasaki-glass-ui article.post:hover {
	border-color: rgba(255, 255, 255, 0.25) !important;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

body.hasaki-glass-ui #leftbar_part2,
body.hasaki-glass-ui .widget-area > .widget:not(#leftbar_part1) {
	background-color: var(--hgu-surface) !important;
}

body.hasaki-glass-ui :is(article.post, #leftbar, #leftbar_part2, .card):focus-visible {
	outline: 2px solid var(--themecolor-light, var(--themecolor));
	outline-offset: 3px;
}

/* Keep fixed utility widgets readable above translucent surfaces. */
body.hasaki-glass-ui .hmp-player,
body.hasaki-glass-ui .hvc-calendar {
	-webkit-backdrop-filter: blur(18px) saturate(135%);
	backdrop-filter: blur(18px) saturate(135%);
}

@media screen and (max-width: 900px) {
	body.hasaki-glass-ui #leftbar {
		background-color: var(--hgu-surface-sidebar) !important;
		border-right: 1px solid var(--hgu-border);
		box-shadow: 16px 0 40px rgba(23, 38, 74, 0.18) !important;
		-webkit-backdrop-filter: blur(22px) saturate(140%);
		backdrop-filter: blur(22px) saturate(140%);
	}

	body.hasaki-glass-ui #leftbar_part1,
	body.hasaki-glass-ui #leftbar_part2 {
		box-shadow: none !important;
	}

	body.hasaki-glass-ui #sidebar_mask {
		background: rgba(15, 20, 34, 0.42);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	body.hasaki-glass-ui .card:not(#leftbar_part1):not(#leftbar_announcement),
	body.hasaki-glass-ui #leftbar {
		background-color: var(--color-foreground, rgba(255, 255, 255, 0.94)) !important;
	}
}