/**
 * Tools home — design system (login + authenticated dashboard).
 * Glass on chrome over photo hero; tokens for type, spacing, radius, motion.
 */

/* ── Login (body.at-tools-login) ───────────────────────────────────── */

body.at-tools-login {
	font-family: var(--font-sans);
	color: #fff;
	--dash-glass-bg: rgba(255, 255, 255, 0.16);
	--dash-glass-blur: blur(24px) saturate(180%);
	--dash-glass-border: 1px solid rgba(255, 255, 255, 0.25);
	--dash-glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

body.at-tools-login .login-box.at-glass {
	border-radius: 0;
	max-width: 420px;
	padding: var(--space-8) var(--space-7);
	background: var(--dash-glass-bg);
	-webkit-backdrop-filter: var(--dash-glass-blur);
	backdrop-filter: var(--dash-glass-blur);
	border: var(--dash-glass-border);
	box-shadow: var(--dash-glass-shadow);
}

body.at-tools-login .at-tools-login__title {
	margin: 0 0 var(--space-2);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: #fff;
}

body.at-tools-login .at-tools-login__lead {
	margin-bottom: var(--space-5);
	font-size: var(--text-md);
	color: rgba(255, 255, 255, 0.82);
}

body.at-tools-login .login-form {
	gap: var(--space-4);
}

body.at-tools-login .login-input.at-input {
	height: auto;
	min-height: 44px;
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-md);
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.at-tools-login .login-input.at-input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

body.at-tools-login .login-input.at-input:hover:not(:focus):not(:disabled) {
	background: rgba(255, 255, 255, 0.11);
	border-color: rgba(255, 255, 255, 0.32);
}

body.at-tools-login .login-input.at-input:focus {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--brand-accent);
	box-shadow: 0 0 0 3px rgba(55, 155, 215, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.at-tools-login .login-input--locked,
body.at-tools-login .login-input--locked:hover,
body.at-tools-login .login-input--locked:focus {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.75);
	box-shadow: none;
}

body.at-tools-login .login-input.at-input:-webkit-autofill,
body.at-tools-login .login-input.at-input:-webkit-autofill:hover,
body.at-tools-login .login-input.at-input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px rgba(0, 24, 55, 0.92) inset;
	caret-color: #fff;
}

body.at-tools-login .at-btn.at-tools-login__submit {
	width: 100%;
	min-height: 44px;
	height: auto;
	padding: var(--space-3) var(--space-5);
	justify-content: flex-start;
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	text-align: left;
}

body.at-tools-login .at-btn.at-tools-login__submit::after {
	content: "";
	position: absolute;
	right: var(--space-5);
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 15px;
	background: url("https://a.akel.co/sites/5/2025/12/arrow-right-white.svg") no-repeat center / contain;
	opacity: 0.85;
}

body.at-tools-login .at-btn.at-tools-login__submit:hover::after {
	opacity: 1;
}

body.at-tools-login .at-tools-login-msg {
	display: block;
	margin-top: var(--space-2);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	text-align: center;
	border-radius: 0;
	border: 1px solid transparent;
}

body.at-tools-login .at-tools-login-msg--error {
	color: #fff;
	background: rgba(212, 76, 98, 0.28);
	border-color: rgba(212, 76, 98, 0.55);
}

body.at-tools-login .at-tools-login-msg--info {
	font-weight: var(--weight-medium);
	color: rgba(255, 255, 255, 0.92);
	background: rgba(55, 155, 215, 0.22);
	border-color: rgba(55, 155, 215, 0.45);
}

body.at-tools-login .login-link {
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--text-min, 14px);
	text-underline-offset: 3px;
	transition: color var(--duration-fast) var(--ease-out);
}

body.at-tools-login .login-link:hover {
	color: var(--brand-accent);
}

body.at-tools-login .login-pw-toggle::after {
	font-size: var(--text-min, 14px);
	letter-spacing: var(--tracking-wide);
}

body.at-tools-login .login-form .login-foot {
	margin-top: var(--space-2);
}

@media (max-width: 480px) {
	body.at-tools-login .login-box.at-glass {
		padding: var(--space-6) var(--space-5);
	}
}

/* ── Dashboard (body.at-tools-dashboard) ─────────────────────────── */

body.at-tools-dashboard {
	font-family: var(--font-sans);
	color: #fff;
}

body.at-tools-dashboard main.dashboard {
	max-width: var(--container-lg, 1100px);
	padding: 0 var(--space-5) var(--space-6);
}

body.at-tools-dashboard .dashboard-header {
	padding: var(--space-5) 0 var(--space-6);
	margin-bottom: var(--space-8);
}

body.at-tools-dashboard .dashboard-header::after {
	background: linear-gradient(
		90deg,
		rgba(55, 155, 215, 0.15) 0%,
		rgba(130, 200, 245, 0.45) 50%,
		rgba(55, 155, 215, 0.2) 100%
	);
	box-shadow: 0 0 12px rgba(55, 155, 215, 0.2);
}

body.at-tools-dashboard .dashboard-header-actions {
	gap: var(--space-3);
}

body.at-tools-dashboard .dashboard-header .at-btn {
	color: rgba(255, 255, 255, 0.95);
	border-radius: 0;
	border: none;
}

body.at-tools-dashboard .dashboard-header .at-btn--secondary.at-glass {
	border-radius: 0;
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: none;
	box-shadow: none;
}

body.at-tools-dashboard .dashboard-header .at-btn--secondary.at-glass:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

body.at-tools-dashboard .dashboard-header .clear-cache-btn-header.at-btn {
	min-height: 42px;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	font-size: var(--text-caps, 11px);
	font-weight: var(--weight-medium);
}

body.at-tools-dashboard .dashboard-welcome {
	margin-bottom: var(--space-8);
}

body.at-tools-dashboard .dashboard-welcome-bar {
	gap: var(--space-7);
}

body.at-tools-dashboard .dashboard-welcome .at-eyebrow,
body.at-tools-dashboard .dashboard-welcome .welcome-greeting {
	color: rgba(255, 255, 255, 0.78);
}

body.at-tools-dashboard .welcome-headline .welcome-name,
body.at-tools-dashboard .welcome-headline .welcome-name-link {
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-tight);
}

body.at-tools-dashboard .dashboard-welcome-right .welcome-date {
	font-size: var(--text-md);
	color: rgba(255, 255, 255, 0.85);
}

body.at-tools-dashboard .dashboard-welcome-clock time {
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
}

body.at-tools-dashboard .dashboard-welcome-right .dashboard-weather-temp {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
}

body.at-tools-dashboard .tool-stacks {
	gap: var(--space-5);
	margin-bottom: var(--space-8);
}

body.at-tools-dashboard .tool-stack.at-glass {
	border-radius: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: none;
	box-shadow: none;
}

body.at-tools-dashboard .dashboard-header .at-btn--icon {
	width: 42px;
	min-width: 42px;
	height: 42px;
	padding: 0;
	justify-content: center;
}

body.at-tools-dashboard .tool-stack__title {
	margin: 0;
	padding: var(--space-4) var(--space-5) var(--space-3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.82);
}

body.at-tools-dashboard .tool-stack-link {
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
	padding: var(--space-3) var(--space-5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: background var(--duration-fast) var(--ease-out);
}

body.at-tools-dashboard .tool-stack-link:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

body.at-tools-dashboard .tool-stack-link:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

body.at-tools-dashboard .install-card.at-glass {
	border-radius: 0;
	margin-bottom: var(--space-6);
	padding: var(--space-4) var(--space-5);
	color: rgba(255, 255, 255, 0.95);
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: none;
	box-shadow: none;
}

body.at-tools-dashboard .install-card-btn-primary {
	background: var(--brand-accent);
	color: #fff;
	border-radius: 0;
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	transition: background var(--duration-fast) var(--ease-out);
}

body.at-tools-dashboard .install-card-btn-primary:hover {
	background: var(--brand-accent-hover);
}

body.at-tools-dashboard .install-card-btn-close {
	border-radius: 0;
	transition: background var(--duration-fast) var(--ease-out);
}

body.at-tools-dashboard .install-card-btn-close:hover {
	background: rgba(255, 255, 255, 0.12);
}

body.at-tools-dashboard .install-modal-card.at-glass {
	border-radius: 0;
	border: none;
	color: var(--text-primary);
}

body.at-tools-dashboard .install-modal-title {
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
}

body.at-tools-dashboard .install-modal-lead {
	font-size: var(--text-md);
	color: var(--text-secondary);
}

body.at-tools-dashboard .dashboard-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: var(--space-5);
}

@media (max-width: 600px) {
	body.at-tools-dashboard main.dashboard {
		padding: 0 var(--space-4) var(--space-6);
	}

	body.at-tools-dashboard .tool-stack__title,
	body.at-tools-dashboard .tool-stack-link {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.at-tools-login .login-input.at-input,
	body.at-tools-login .at-btn.at-tools-login__submit,
	body.at-tools-login .login-link,
	body.at-tools-dashboard .tool-stack-link,
	body.at-tools-dashboard .install-card-btn-primary,
	body.at-tools-dashboard .install-card-btn-close {
		transition: none;
	}
}

/* ── Liquid glass launcher (home dashboard) ───────────────────────── */

body.at-tools-dashboard main.dashboard,
body:has(main.dashboard) main.dashboard {
	padding-left: max(var(--space-5), env(safe-area-inset-left, 0px));
	padding-right: max(var(--space-5), env(safe-area-inset-right, 0px));
	padding-bottom: max(var(--space-6), env(safe-area-inset-bottom, 0px));
}

body.at-tools-dashboard .at-glass-lq,
body:has(main.dashboard) .at-glass-lq {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04) 60%),
		rgba(8, 16, 32, 0.3);
	-webkit-backdrop-filter: blur(28px) saturate(160%);
	backdrop-filter: blur(28px) saturate(160%);
	border: none;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.22) inset,
		0 0 0 1px rgba(255, 255, 255, 0.06) inset,
		0 18px 44px -24px rgba(0, 0, 0, 0.45);
	border-radius: 0;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.at-tools-dashboard .at-glass-lq,
	body:has(main.dashboard) .at-glass-lq {
		background: rgba(18, 30, 56, 0.7);
	}
}

body.at-tools-dashboard .at-home-launcher,
body:has(main.dashboard) .at-home-launcher {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	margin-bottom: var(--space-8);
}

body.at-tools-dashboard .at-tiles__head,
body:has(main.dashboard) .at-tiles__head {
	margin-bottom: var(--space-4);
}

body.at-tools-dashboard .at-tiles__head .at-eyebrow,
body:has(main.dashboard) .at-tiles__head .at-eyebrow {
	display: block;
	margin-bottom: var(--space-1);
	color: rgba(255, 255, 255, 0.72);
}

body.at-tools-dashboard .at-tiles--hero .at-tiles__head .at-eyebrow,
body:has(main.dashboard) .at-tiles--hero .at-tiles__head .at-eyebrow {
	color: var(--coll-sapphire-text-dark);
}

body.at-tools-dashboard .at-tiles--utility .at-tiles__head .at-eyebrow,
body:has(main.dashboard) .at-tiles--utility .at-tiles__head .at-eyebrow {
	color: var(--coll-gold-text-dark);
}

body.at-tools-dashboard .at-tiles__title,
body:has(main.dashboard) .at-tiles__title {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-tight);
	color: #fff;
}

body.at-tools-dashboard .at-tiles__grid--hero,
body:has(main.dashboard) .at-tiles__grid--hero {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
	width: 100%;
}

body.at-tools-dashboard .at-tiles__grid--utility,
body:has(main.dashboard) .at-tiles__grid--utility {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	width: 100%;
}

body.at-tools-dashboard .at-home-launcher a.at-tile,
body.at-tools-dashboard .at-home-launcher a.at-tile:visited,
body:has(main.dashboard) .at-home-launcher a.at-tile,
body:has(main.dashboard) .at-home-launcher a.at-tile:visited {
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	min-width: 0;
	border-radius: 0;
	color: #fff;
	text-decoration: none;
	transition: box-shadow var(--duration-fast) var(--ease-out);
}

body.at-tools-dashboard .at-home-launcher a.at-tile.at-glass-lq,
body:has(main.dashboard) .at-home-launcher a.at-tile.at-glass-lq {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(120% 110% at 100% 100%, color-mix(in srgb, var(--tile-tint, transparent) 22%, transparent) 0%, transparent 55%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 60%),
		rgba(10, 20, 40, 0.2);
	-webkit-backdrop-filter: blur(36px) saturate(160%);
	backdrop-filter: blur(36px) saturate(160%);
	border: none;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.26) inset,
		0 0 0 1px rgba(255, 255, 255, 0.08) inset,
		0 14px 36px -18px rgba(0, 0, 0, 0.4);
}

body.at-tools-dashboard .at-home-launcher a.at-tile.at-glass-lq::before,
body:has(main.dashboard) .at-home-launcher a.at-tile.at-glass-lq::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0;
	background: linear-gradient(
		160deg,
		rgba(255, 255, 255, 0.12) 0%,
		rgba(255, 255, 255, 0.04) 35%,
		transparent 70%
	);
	pointer-events: none;
	z-index: 0;
}

body.at-tools-dashboard .at-home-launcher a.at-tile.at-glass-lq::after,
body:has(main.dashboard) .at-home-launcher a.at-tile.at-glass-lq::after {
	content: "";
	position: absolute;
	top: 0;
	left: 18%;
	right: 18%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--tile-tint, white) 55%, rgba(255, 255, 255, 0.9)) 50%,
		transparent
	);
	pointer-events: none;
	z-index: 0;
}

body.at-tools-dashboard .at-home-launcher a.at-tile.at-glass-lq > *,
body:has(main.dashboard) .at-home-launcher a.at-tile.at-glass-lq > * {
	position: relative;
	z-index: 1;
}

body.at-tools-dashboard .at-tile--hero,
body:has(main.dashboard) .at-tile--hero {
	gap: var(--space-2);
	padding: var(--space-5) var(--space-4) var(--space-4);
	min-height: 120px;
}

body.at-tools-dashboard .at-tile--compact,
body:has(main.dashboard) .at-tile--compact {
	gap: var(--space-2);
	padding: var(--space-4) var(--space-3) var(--space-3);
	min-height: 96px;
}

body.at-tools-dashboard .at-tile__badge,
body:has(main.dashboard) .at-tile__badge {
	width: 32px;
	height: 32px;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: var(--space-1);
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--tile-tint, white) 16%, rgba(255, 255, 255, 0.18)) 0%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.02) 100%);
	border: none;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.25) inset,
		0 0 0 1px color-mix(in srgb, var(--tile-tint, white) 22%, rgba(255, 255, 255, 0.08)) inset;
}

body.at-tools-dashboard .at-tile--compact .at-tile__badge,
body:has(main.dashboard) .at-tile--compact .at-tile__badge {
	width: 28px;
	height: 28px;
	border-radius: 0;
}

body.at-tools-dashboard .at-tile__icon,
body:has(main.dashboard) .at-tile__icon {
	display: block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: rgba(255, 255, 255, 0.92);
}

body.at-tools-dashboard .at-tile--compact .at-tile__icon,
body:has(main.dashboard) .at-tile--compact .at-tile__icon {
	width: 14px;
	height: 14px;
}

body.at-tools-dashboard .at-tile__label,
body:has(main.dashboard) .at-tile__label {
	display: block;
	width: 100%;
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: #fff;
}

body.at-tools-dashboard .at-tile--compact .at-tile__label,
body:has(main.dashboard) .at-tile--compact .at-tile__label {
	font-size: var(--text-lg);
}

body.at-tools-dashboard .at-tile__sub,
body:has(main.dashboard) .at-tile__sub {
	display: block;
	width: 100%;
	margin-top: var(--space-1);
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
	color: rgba(255, 255, 255, 0.72);
	line-height: var(--leading-snug);
}

body.at-tools-dashboard .at-tile--compact .at-tile__sub,
body:has(main.dashboard) .at-tile--compact .at-tile__sub {
	font-size: var(--text-sm);
}

@media (max-width: 639px) {
	body.at-tools-dashboard .at-tile__sub,
	body:has(main.dashboard) .at-tile__sub {
		display: none;
	}
}

/* Per-app DS-Collection tint. Applied subtly to the badge rim, corner glow, and top shimmer. */
body.at-tools-dashboard .at-tile--reach,
body:has(main.dashboard) .at-tile--reach {
	--tile-tint: var(--coll-emerald);
}

body.at-tools-dashboard .at-tile--vision,
body:has(main.dashboard) .at-tile--vision {
	--tile-tint: var(--brand-accent);
}

body.at-tools-dashboard .at-tile--ledger,
body:has(main.dashboard) .at-tile--ledger {
	--tile-tint: var(--coll-emerald);
}

body.at-tools-dashboard .at-tile--ods,
body:has(main.dashboard) .at-tile--ods {
	--tile-tint: var(--coll-ruby);
}

body.at-tools-dashboard .at-tile--forge,
body:has(main.dashboard) .at-tile--forge {
	--tile-tint: var(--coll-gold);
}

body.at-tools-dashboard .at-tile--permittracker,
body:has(main.dashboard) .at-tile--permittracker {
	--tile-tint: var(--coll-sapphire);
}

body.at-tools-dashboard .at-tile--tradeportal,
body:has(main.dashboard) .at-tile--tradeportal {
	--tile-tint: var(--coll-diamond);
}

body.at-tools-dashboard .at-tile--lowvoltage,
body:has(main.dashboard) .at-tile--lowvoltage {
	--tile-tint: var(--coll-gold);
}

body.at-tools-dashboard .at-tile--colorselection,
body:has(main.dashboard) .at-tile--colorselection {
	--tile-tint: var(--coll-ruby);
}

body.at-tools-dashboard .at-tile--diagramcreator,
body:has(main.dashboard) .at-tile--diagramcreator {
	--tile-tint: var(--coll-sapphire);
}

body.at-tools-dashboard .at-tile--lotfitgenerator,
body:has(main.dashboard) .at-tile--lotfitgenerator {
	--tile-tint: var(--coll-emerald);
}

body.at-tools-dashboard .at-tile--s,
body:has(main.dashboard) .at-tile--s {
	--tile-tint: var(--coll-diamond);
}

body.at-tools-dashboard .at-home-launcher a.at-tile:active,
body:has(main.dashboard) .at-home-launcher a.at-tile:active {
	filter: brightness(0.93);
}

@media (hover: hover) {
	body.at-tools-dashboard .at-home-launcher a.at-tile.at-glass-lq:hover,
	body:has(main.dashboard) .at-home-launcher a.at-tile.at-glass-lq:hover {
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.3) inset,
			0 0 0 1px rgba(255, 255, 255, 0.1) inset,
			0 20px 44px -18px rgba(0, 0, 0, 0.5);
	}
}

body.at-tools-dashboard .at-stacks--columns,
body:has(main.dashboard) .at-stacks--columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
	width: 100%;
}

body.at-tools-dashboard .at-stacks--cols-2,
body:has(main.dashboard) .at-stacks--cols-2 {
	grid-template-columns: 1fr;
}

body.at-tools-dashboard .at-stacks--cols-3,
body:has(main.dashboard) .at-stacks--cols-3 {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	body.at-tools-dashboard .at-stacks--cols-2,
	body:has(main.dashboard) .at-stacks--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.at-tools-dashboard .at-stacks--cols-3,
	body:has(main.dashboard) .at-stacks--cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	body.at-tools-dashboard .at-stacks--cols-3,
	body:has(main.dashboard) .at-stacks--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

body.at-tools-dashboard .at-stacks__card,
body:has(main.dashboard) .at-stacks__card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

body.at-tools-dashboard .at-stacks__card.at-glass-lq,
body:has(main.dashboard) .at-stacks__card.at-glass-lq {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04) 60%),
		rgba(8, 16, 32, 0.28);
	-webkit-backdrop-filter: blur(32px) saturate(160%);
	backdrop-filter: blur(32px) saturate(160%);
	border: none;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.22) inset,
		0 0 0 1px rgba(255, 255, 255, 0.06) inset,
		0 18px 44px -22px rgba(0, 0, 0, 0.5);
}

body.at-tools-dashboard .at-stacks__card.at-glass-lq::before,
body:has(main.dashboard) .at-stacks__card.at-glass-lq::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0;
	background: linear-gradient(
		160deg,
		rgba(255, 255, 255, 0.1) 0%,
		rgba(255, 255, 255, 0.03) 35%,
		transparent 70%
	);
	pointer-events: none;
	z-index: 0;
}

body.at-tools-dashboard .at-stacks__card.at-glass-lq::after,
body:has(main.dashboard) .at-stacks__card.at-glass-lq::after {
	content: "";
	position: absolute;
	top: 0;
	left: 20%;
	right: 20%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	pointer-events: none;
	z-index: 1;
}

body.at-tools-dashboard .at-stacks__card > *,
body:has(main.dashboard) .at-stacks__card > * {
	position: relative;
	z-index: 2;
}

body.at-tools-dashboard .at-stacks__heading,
body:has(main.dashboard) .at-stacks__heading {
	margin: 0;
	padding: var(--space-4) var(--space-5) var(--space-3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.88);
	letter-spacing: var(--tracking-wide);
}

body.at-tools-dashboard .at-stacks__card:nth-of-type(1) .at-stacks__heading,
body:has(main.dashboard) .at-stacks__card:nth-of-type(1) .at-stacks__heading {
	color: var(--coll-diamond-text-dark);
}

body.at-tools-dashboard .at-stacks__card:nth-of-type(2) .at-stacks__heading,
body:has(main.dashboard) .at-stacks__card:nth-of-type(2) .at-stacks__heading {
	color: var(--coll-sapphire-text-dark);
}

body.at-tools-dashboard .at-stacks__card:nth-of-type(3) .at-stacks__heading,
body:has(main.dashboard) .at-stacks__card:nth-of-type(3) .at-stacks__heading {
	color: var(--coll-gold-text-dark);
}

body.at-tools-dashboard .at-stacks__card .tool-stack-links,
body:has(main.dashboard) .at-stacks__card .tool-stack-links {
	display: flex;
	flex-direction: column;
	padding: var(--space-1) 0 var(--space-2);
}

body.at-tools-dashboard .at-stacks__card .tool-stack-link,
body:has(main.dashboard) .at-stacks__card .tool-stack-link {
	color: #fff;
	margin: 0 var(--space-2);
	padding: var(--space-3) var(--space-3);
	border-radius: 0;
	border-bottom: none;
	font-size: var(--text-md);
}

body.at-tools-dashboard .at-stacks__card .tool-stack-link:visited,
body:has(main.dashboard) .at-stacks__card .tool-stack-link:visited {
	color: #fff;
}

body.at-tools-dashboard .at-stacks__card .tool-stack-link:hover,
body:has(main.dashboard) .at-stacks__card .tool-stack-link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

body.at-tools-dashboard .at-stacks__card .tool-stack-link:focus-visible,
body:has(main.dashboard) .at-stacks__card .tool-stack-link:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.at-tools-dashboard .at-stacks__card.at-glass-lq,
	body:has(main.dashboard) .at-stacks__card.at-glass-lq {
		background: rgba(18, 30, 56, 0.72);
	}
}

@media (hover: hover) {
	body.at-tools-dashboard .at-stacks__card.at-glass-lq,
	body:has(main.dashboard) .at-stacks__card.at-glass-lq {
		transition: box-shadow var(--duration-fast) var(--ease-out);
	}

	body.at-tools-dashboard .at-stacks__card.at-glass-lq:hover,
	body:has(main.dashboard) .at-stacks__card.at-glass-lq:hover {
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.24) inset,
			0 0 0 1px rgba(255, 255, 255, 0.08) inset,
			0 24px 56px -24px rgba(0, 0, 0, 0.6);
	}
}

@media (min-width: 640px) {
	body.at-tools-dashboard .at-tiles__grid--hero,
	body:has(main.dashboard) .at-tiles__grid--hero {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.at-tools-dashboard .at-tiles__grid--utility,
	body:has(main.dashboard) .at-tiles__grid--utility {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.at-tools-dashboard .at-tile__sub,
	body:has(main.dashboard) .at-tile__sub {
		display: block;
	}
}

@media (min-width: 900px) {
	body.at-tools-dashboard .at-tiles__grid--utility,
	body:has(main.dashboard) .at-tiles__grid--utility {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (prefers-color-scheme: light) {
	body.at-tools-dashboard .at-home-launcher a.at-tile.at-glass-lq,
	body:has(main.dashboard) .at-home-launcher a.at-tile.at-glass-lq {
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08) 55%),
			rgba(8, 16, 32, 0.72);
	}
}

@media (max-width: 600px) {
	body.at-tools-dashboard main.dashboard {
		padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
		padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	body.at-tools-dashboard .at-home-launcher a.at-tile,
	body:has(main.dashboard) .at-home-launcher a.at-tile {
		transition: none;
	}
}