/*
 * Refractive glass UI — framework-agnostic stylesheet.
 *
 * Tokens + component classes for Liquid Glass (default: Apple-style lens with a frosted body) and the
 * legacy dark smoked chrome (.gl-glass--smoked). Every component is covered by the snapshot test in
 * tests/ (see references/fidelity.md). Safari/Firefox fallback and reduced-transparency/motion handling
 * are built in.
 *
 * Liquid material = fill (thin white lift) + the refraction engine (bend, lit edge, colour fringe).
 * Smoked material = charcoal fill + bezel refraction + a CSS stroke + glow.
 * Put glass over something with detail (imagery, colour, scrolling content). Glass over a flat colour just looks grey.
 */

:root {
	/* ---- app backgrounds ---- */
	--gl-bg-app: #0a0c0d; /* dashboard outer shell, share page */
	--gl-bg-surface: #151719; /* main panel inside the shell */
	--gl-bg-raised: #1b1e21;
	--gl-bg-canvas: #121314; /* editor canvas behind floating glass */
	--gl-line: rgba(255, 255, 255, 0.04); /* shell borders */

	/* ---- glass fills (hex alpha: E5=.90 E0=.88 CC=.80 B3=.70 80=.50) ---- */
	--gl-fill: #151719e5; /* standard: dock, toolbars, menus, panels */
	--gl-fill-70: #151719b3; /* back-button pill */
	--gl-fill-50: #15171980; /* header pills, slide rail, key caps */
	--gl-fill-deep: #0b0c0dcc; /* insert menu, menus opened from floating toolbars */
	--gl-fill-frost: #151719cc; /* heavy-blur toolbar */
	--gl-fill-form: #151719e0; /* floating form panel */
	--gl-fill-lift: #202326e5; /* insert bar / secondary floating button */
	--gl-fill-dialog: rgba(21, 23, 25, 0.84);
	--gl-fill-chip: #000000a3; /* badges on thumbnails */
	/* ---- Liquid Glass fills (the default material) ---- */
	--gl-fill-liquid: rgba(200, 204, 214, 0.07); /* regular: a neutral 7% body — lifts dark content a little, dims light content a little */
	--gl-fill-liquid-frosted: rgba(210, 214, 222, 0.14); /* menus, dialogs, panels full of text */
	--gl-fill-liquid-dark: rgba(21, 23, 25, 0.42); /* tinted variant when the content behind is very light */
	/* Apple-style clear lens: the body is clear at the rim and darkens ~8% toward the centre (light gathers at the edges) */
	--gl-fill-clear: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(21, 23, 25, 0.08) 0%, rgba(21, 23, 25, 0.08) 55%, rgba(21, 23, 25, 0) 100%);
	--gl-fill-sheen: linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0%, rgba(153, 153, 153, 0.08) 100%); /* CSS-only glass */

	/* ---- rims (1px gradient stroke, drawn with mask-composite) ---- */
	--gl-rim: linear-gradient(190deg, hsla(0, 0%, 100%, 0.35) 0%, hsla(0, 0%, 0%, 0.25) 50%, hsla(0, 0%, 100%, 0.35) 100%);
	--gl-rim-segment: linear-gradient(210deg, hsla(0, 0%, 100%, 0.35) 0%, hsla(0, 0%, 0%, 0.25) 50%, hsla(0, 0%, 100%, 0.35) 100%);
	--gl-rim-search: linear-gradient(190deg, hsla(0, 0%, 100%, 0.35) 0%, hsla(0, 0%, 0%, 0.3) 60%, hsla(0, 0%, 100%, 0.35) 100%);
	--gl-rim-dialog: linear-gradient(190deg, hsla(0, 0%, 100%, 0.42) 0%, hsla(0, 0%, 0%, 0.2) 50%, hsla(0, 0%, 100%, 0.32) 100%);
	--gl-rim-glint: linear-gradient(135deg, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 100%, 0.35) 50%, hsla(0, 0%, 0%, 0) 100%);
	--gl-rim-chip: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0) 52%, rgba(255, 255, 255, 0.5) 100%);
	--gl-hairline: rgba(255, 255, 255, 0.5); /* 1px + mix-blend overlay */

	/* ---- light & shadow ---- */
	--gl-glow: inset 0 0 8px 0 rgba(255, 255, 255, 0.16);
	--gl-drop: 0 12px 16px 0 rgba(0, 0, 0, 1);
	--gl-drop-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* tailwind shadow-xl */
	--gl-drop-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* tailwind shadow-lg */
	--gl-drop-card: 0 18px 45px rgba(0, 0, 0, 0.28);
	--gl-drop-dialog: 0 28px 90px rgba(0, 0, 0, 0.5);
	--gl-drop-track: 0 8px 24px 0 rgba(0, 0, 0, 1);
	--gl-drop-search: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
	--gl-bevel: 0 1px 1.4px 0 #070709, 0 2px 0.8px 1px rgba(255, 255, 255, 0.25), inset 0 0 8px 0 rgba(255, 255, 255, 0.16), inset 0 2px 1px 0 #ffffff, inset 0 -2px 1.9px 0 rgba(0, 0, 0, 0.32);

	/* ---- interaction washes ---- */
	--gl-wash: rgba(255, 255, 255, 0.1); /* hover / selected row, toolbar button */
	--gl-wash-soft: #ffffff14; /* input fill */
	--gl-wash-mid: #ffffff1f; /* trigger hover */
	--gl-wash-strong: #ffffff29; /* overlay-menu hover/selected, active toggle */
	--gl-dock-hover: #27272a; /* zinc-800 */
	--gl-dock-open: #3f3f46; /* zinc-700 */

	/* ---- text ---- */
	--gl-text: #ffffff;
	--gl-text-soft: rgba(255, 255, 255, 0.7);
	--gl-text-faint: rgba(255, 255, 255, 0.5);
	--gl-text-icon: #898989; /* resting icon in menu rows */
	--gl-text-list: #adadad; /* resting text in destination/theme lists */
	--gl-text-label: #a1a1aa; /* zinc-400 section labels */
	--gl-text-dim: #71717a; /* zinc-500, "/ 12" */
	--gl-text-ink: #020303; /* text on white buttons */

	/* ---- accent (teal) ---- */
	--gl-accent: #25d0ca;
	--gl-accent-deep: #158470;
	--gl-accent-bright: #21d4b3;
	--gl-accent-glow: #46fff9b8;

	/* ---- type ---- */
	--gl-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter Display", Inter, "Segoe UI", Roboto, sans-serif; /* system first: the kit ships no web font */
	--gl-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* tailwind font-mono */

	/* ---- motion ---- */
	--gl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================= base ================= */

.gl-root {
	font-family: var(--gl-font);
	font-feature-settings: "salt" on; /* Inter stylistic alternates */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	color: var(--gl-text);
	background: var(--gl-bg-app);
	color-scheme: dark;
}
/* Zero-specificity control reset (like Tailwind preflight). Your own styles win. */
:where(.gl-root) :where(button, input, textarea, select) { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
:where(.gl-root) :where(button) { background: transparent; border: 0; padding: 0; cursor: pointer; }
:where(.gl-root) :where(svg) { flex: none; }

/* Editor canvas: the dot grid gives the glass something to bend. */
.gl-canvas {
	background-color: var(--gl-bg-canvas);
	background-image: radial-gradient(circle, rgb(255 255 255 / 0.16) 0.9px, transparent 1.1px);
	background-size: 16px 16px;
}
.gl-dots {
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
	background-size: 14px 14px;
}

/* ================= the material ================= */

/*
 * .gl-glass — the element that gets refract() / refractive.*.
 * The engine sets backdrop-filter + border-radius (= refraction radius) inline.
 */
:where(.gl-glass, .gl-glass-css) { position: relative; } /* zero specificity: utilities like `fixed` win */
/* Custom properties inherit: reset per element so nested glass never picks up its parent's fill/light/strokes. */
.gl-root [hidden] { display: none !important; } /* bindMenu()/dialogs toggle [hidden]; component display rules must not override it */
.gl-glass { --gl-glass-fill: initial; --gl-glass-drop: initial; --gl-glass-glow: initial; }
.gl-rim { --gl-rim-radius: initial; --gl-rim-gradient: initial; }
.gl-hairline { --gl-hairline-radius: initial; --gl-hairline-color: initial; }
.gl-glass {
	background: var(--gl-glass-fill, var(--gl-fill-liquid));
	box-shadow: var(--gl-glass-drop, 0 0 #0000), var(--gl-glass-glow, 0 0 #0000);
	color: var(--gl-text);
}
/* Liquid Glass variants */
.gl-glass--frosted { --gl-glass-fill: var(--gl-fill-liquid-frosted); }
.gl-glass--dark { --gl-glass-fill: var(--gl-fill-liquid-dark); }
/* Legacy smoked chrome: charcoal body (pair with data-glass-material="smoked" and a gl-rim / gl-hairline stroke) */
.gl-glass--smoked { --gl-glass-fill: var(--gl-fill); }
.gl-glass--70 { --gl-glass-fill: var(--gl-fill-70); }
.gl-glass--50 { --gl-glass-fill: var(--gl-fill-50); }
.gl-glass--deep { --gl-glass-fill: var(--gl-fill-deep); }
.gl-glass--frost { --gl-glass-fill: var(--gl-fill-frost); }
.gl-glass--form { --gl-glass-fill: var(--gl-fill-form); }
.gl-glass--lift { --gl-glass-fill: var(--gl-fill-lift); }
.gl-glass--dialog { --gl-glass-fill: var(--gl-fill-dialog); }
/* Clear lens. Pair with data-glass-material="clear": the engine draws the rim as concentrated light,
   so leave gl-rim/gl-glow OFF (a CSS stroke on top reads as an outline, not light). */
.gl-glass--clear { --gl-glass-fill: var(--gl-fill-clear); }
/* Apple's "regular" glass over photos: same lens, but the body lifts toward white (~13%) so controls read on busy imagery */
.gl-glass--clear.gl-glass--regular { --gl-glass-fill: rgba(255, 255, 255, 0.13); }
/* Liquid Glass rim light: the engine bakes highlight (white α) and shadow line (black α) into one image and composites it
   here on top of the lens, so no filter pass is spent on light. Opacity = lens intensity (materialize). */
.gl-glass[data-gl-lit]::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; box-sizing: border-box;
	/* 9-slice: corners are pixel-exact, straight edges stretch — so while a control animates its size the rim line keeps its
	   exact thickness and stays crisp (the engine only rebuilds the bend map mid-animation) */
	border: var(--gl-light-border, 0px) solid transparent;
	border-image: var(--gl-light) var(--gl-light-slice, 0) fill / var(--gl-light-border, 0px) stretch;
	opacity: var(--gl-light-opacity, 1);
}
.gl-glass--ink { color: var(--gl-text-ink); } /* dark labels/icons when liquid glass sits on a light backdrop */
.gl-glass--solid { --gl-glass-fill: #151719; backdrop-filter: none !important; } /* when text behind would hurt legibility */

.gl-glow { --gl-glass-glow: var(--gl-glow); }
.gl-drop { --gl-glass-drop: var(--gl-drop); }
.gl-drop-xl { --gl-glass-drop: var(--gl-drop-xl); }

/* CSS-only glass (no refraction engine) */
.gl-glass-css {
	background: var(--gl-fill-sheen), var(--gl-glass-base, transparent);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}

/* [ADDED] Safari/Firefox ignore backdrop-filter:url(); refractive.js tags those elements. */
.gl-glass--clear.glass-no-refraction { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset 0 0 12px rgba(255, 255, 255, 0.18); }
.gl-glass.glass-no-refraction {
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
}

/* ---- strokes: use ONE per element ---- */

/* Rim: 1px gradient stroke. --gl-rim-radius lets it differ from the body on purpose. */
.gl-rim::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: var(--gl-rim-radius, inherit);
	background: var(--gl-rim-gradient, var(--gl-rim));
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) content-box;
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) content-box;
	mask-composite: exclude;
	pointer-events: none;
}
.gl-rim--segment { --gl-rim-gradient: var(--gl-rim-segment); }
.gl-rim--search { --gl-rim-gradient: var(--gl-rim-search); }
.gl-rim--dialog { --gl-rim-gradient: var(--gl-rim-dialog); }
.gl-rim--glint { --gl-rim-gradient: var(--gl-rim-glint); }
.gl-rim--chip { --gl-rim-gradient: var(--gl-rim-chip); }

/* Hairline: flat 1px stroke blended with overlay. */
.gl-hairline::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--gl-hairline-radius, inherit);
	border: 1px solid var(--gl-hairline-color, var(--gl-hairline));
	mix-blend-mode: overlay;
	pointer-events: none;
}
.gl-hairline--bright { --gl-hairline-color: #ffffff; }
.gl-hairline--soft { --gl-hairline-color: rgba(255, 255, 255, 0.2); }

/* ================= header ================= */

/* Header pill. Refraction radius 20 → body 20px; rim + glow stay fully round. */
.gl-pill {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: 12px 16px;
	--gl-rim-radius: 9999px;
	--gl-glass-glow: 0 0 #0000; /* glow is drawn by ::before at full radius */
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}
.gl-pill.gl-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	box-shadow: var(--gl-pill-glow, inset 0 0 8px 0 rgba(255, 255, 255, 0.16));
	pointer-events: none;
}
.gl-pill--back { padding: 12px 16px 12px 8px; gap: 6px; } /* Back button: fill --70 */
.gl-pill--title { font-weight: 500; --gl-pill-glow: inset 2px 0 8px 0 rgba(255, 255, 255, 0.16); }
.gl-pill--icon { padding: 12px; justify-content: center; color: rgba(255, 255, 255, 0.65); }
.gl-pill > button { display: flex; align-items: center; gap: 6px; height: 100%; border-radius: 9999px; font-weight: inherit; }
.gl-pill svg { width: 18px; height: 18px; }
.gl-pill--icon svg { width: 16px; height: 16px; }
.gl-pill-row { display: flex; align-items: center; gap: 8px; }

/* Bevel button: beveled light pill — the header's primary action. */
.gl-btn-bevel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	border-radius: 43px;
	background: #e2e2e2;
	box-shadow: var(--gl-bevel);
	color: #000;
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	text-transform: capitalize;
	transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gl-btn-bevel:hover { background: #ececec; }
.gl-btn-bevel:disabled { cursor: not-allowed; opacity: 0.45; }
.gl-btn-bevel svg { width: 18px; height: 18px; color: #0e0f11; }

/* ================= dock ================= */

/* Bottom action dock: dock tier, radius 32. */
.gl-dock { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 4px; }
.gl-dock-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 9999px;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	white-space: nowrap;
}
.gl-dock-item svg { width: 20px; height: 20px; }
.gl-dock-item:hover { background: var(--gl-dock-hover); }
.gl-dock-item[aria-expanded="true"] { background: var(--gl-dock-open); } /* its menu is open */
.gl-dock-item[aria-pressed="true"] { background: var(--gl-wash-strong); } /* a mode is on */
.gl-dock-item--glyph { padding: 4px 12px; }
.gl-dock-item--glyph .gl-glyph { font-size: 18px; line-height: 28px; font-weight: 400; }
.gl-dock-item--icon { padding: 8px; } /* [ADDED] icon-only dock item, same rhythm */
.gl-dock-more { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; gap: 2px; border-radius: 9999px; }
.gl-dock-more:hover { background: var(--gl-dock-hover); }
.gl-dock-more i { width: 4px; height: 4px; border-radius: 9999px; background: #fff; }

/* Counter button (e.g. "Step 3 / 12"): button tier, radius 20; rim is 30px. Fill default + glow + drop. */
.gl-counter { width: 160px; display: flex; align-items: center; padding: 6px 4px; --gl-rim-radius: 30px; transition: filter 150ms; }
.gl-counter:hover { filter: brightness(1.1); }
.gl-counter-inner { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; border-radius: 8px; }
.gl-counter-label { display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 24px; font-weight: 600; color: #fff; text-transform: capitalize; }
.gl-counter-total { color: var(--gl-text-dim); }
.gl-counter svg { width: 20px; height: 20px; color: #fff; }

/* Secondary floating button: button tier on --lift */
.gl-float-btn { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9999px; color: #fff; font-size: 14px; line-height: 20px; font-weight: 500; transition: filter 150ms; }
.gl-float-btn:hover { filter: brightness(1.1); }
.gl-float-btn svg { width: 20px; height: 20px; }

/* ================= floating element toolbar ================= */

/* Floating element toolbar: toolbar tier (radius 30), fill default, hairline. */
.gl-toolbar { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; }
.gl-tool {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border-radius: 9999px;
	color: #fff;
	transition: background-color 150ms;
}
.gl-tool svg { width: 18px; height: 18px; }
.gl-tool:hover { background: var(--gl-wash); }
.gl-tool--more { padding: 4px 8px; color: var(--gl-text-soft); }
.gl-tool--more svg { width: 20px; height: 20px; }
.gl-tool--more[aria-expanded="true"] { background: var(--gl-wash); }
/* B / I / U toggles (overlay toolbar): 28px, active inverts */
.gl-tool--toggle { width: 28px; height: 28px; padding: 0; }
.gl-tool--toggle:hover { background: var(--gl-wash-strong); }
.gl-tool[aria-pressed="true"] { background: #fff !important; color: #000; }
.gl-tool:focus-visible,
.gl-dock-item:focus-visible,
.gl-row:focus-visible,
.gl-pill button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }

.gl-vdivider { width: 1px; height: 20px; margin: 0 4px; background: rgba(255, 255, 255, 0.2); flex: none; }
.gl-hdivider { width: 100%; height: 1px; margin: 4px 0; background: rgba(255, 255, 255, 0.1); }
.gl-hdivider--blend { background: rgba(255, 255, 255, 0.5); mix-blend-mode: overlay; }

/* ================= menus ================= */

/*
 * Menu panel. Base = compact menu (menu tier, radius 12, 176px, 6px pad, --deep, no stroke).
 * Menus render WITHOUT a heavy drop shadow; only the faint wrapper shadow below is drawn.
 * Leave gl-drop off menus.
 */
.gl-menu {
	display: flex;
	flex-direction: column;
	width: 176px;
	box-sizing: border-box;
	padding: 6px;
	transform-origin: var(--gl-origin, center bottom);
	animation: gl-pop-in 150ms ease-out;
}
/* Wide "more" menu: radius 24, 224px, 8px pad, default fill + hairline, pill rows; sits 8px above its trigger */
.gl-menu--wide { width: 224px; padding: 8px; gap: 2px; margin-bottom: 8px; }
/* Overlay menu (opened from a floating toolbar): overlayMenu tier, --deep, hairline #FFFFFF80, isolate */
.gl-menu--overlay { width: auto; min-width: 200px; isolation: isolate; overflow: hidden; --gl-hairline-color: #ffffff80; }
.gl-menu[data-state="closed"] { animation: gl-pop-out 100ms ease-in forwards; }
/* Faint wrapper shadow (tailwind shadow-md at 6px radius; 8px taller on the wide menu). */
.gl-menu:not(.gl-menu--overlay)::after {
	content: "";
	position: absolute;
	inset: 0 0 var(--gl-menu-wrap-extra, 0px) 0;
	border-radius: 6px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	pointer-events: none;
	z-index: -1;
}
.gl-menu--wide { --gl-menu-wrap-extra: -8px; }

.gl-menu-label { padding: 6px 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--gl-text-faint); }

/* Menu row: muted icon, white label, wash on hover. */
.gl-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px;
	border-radius: 8px;
	color: var(--gl-text-icon);
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gl-row > span { color: #fff; font-weight: 500; }
.gl-row svg { width: 20px; height: 20px; }
.gl-row:hover,
.gl-row[data-highlighted],
.gl-row[aria-expanded="true"] { background: var(--gl-wash); color: #fff; }
/* Pill row (wide menu): 10/12 padding */
.gl-row--pill { border-radius: 9999px; padding: 10px 12px; }
.gl-row[aria-disabled="true"] { color: rgba(137, 137, 137, 0.5); cursor: not-allowed; }
.gl-row[aria-disabled="true"] > span { color: var(--gl-text-faint); }

/* Overlay-menu rows (font list): pill, white text, #FFFFFF29 selected/hover, check on the right */
.gl-menu--overlay .gl-row { padding: 8px 12px; border-radius: 9999px; color: #fff; justify-content: space-between; gap: 0; }
.gl-menu--overlay .gl-row > span { font-weight: 400; }
.gl-menu--overlay .gl-row:hover,
.gl-menu--overlay .gl-row[aria-selected="true"] { background: var(--gl-wash-strong); }
.gl-menu--overlay .gl-row svg { width: 16px; height: 16px; stroke: #fff; }
/* Destination / theme lists use grey resting text */
.gl-row--muted { color: var(--gl-text-list) !important; }
.gl-row--muted:hover,
.gl-row--muted[aria-selected="true"] { color: #fff !important; }

/* ================= controls ================= */

/* Segmented control / tabs. Add .gl-rim; rim uses the 210° gradient. */
.gl-segmented {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: 60px;
	background: rgb(219 234 254 / 0.1);
	box-shadow: var(--gl-drop-track);
	--gl-rim-gradient: var(--gl-rim-segment);
}
.gl-segment {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 8px 8px;
	border-radius: 36px;
	color: var(--gl-text-soft);
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	text-transform: capitalize;
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gl-segment[aria-selected="true"] { background: var(--gl-wash); color: #fff; font-weight: 600; mix-blend-mode: plus-lighter; }

/* Search pill (inside menus). Add .gl-rim; rim uses the search gradient. */
.gl-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 60px;
	box-shadow: var(--gl-drop-search);
	--gl-rim-gradient: var(--gl-rim-search);
}
.gl-search svg { width: 20px; height: 20px; stroke: #73808c; stroke-width: 1.5; }
.gl-search input {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	color: var(--gl-text-soft);
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
}
.gl-search input::placeholder { color: var(--gl-text-soft); opacity: 1; }
.gl-search input:focus { color: #fff; }
/* Inline input inside a panel (embed URL, destination) */
.gl-input { background: var(--gl-wash-soft); border: 0; outline: none; border-radius: 9999px; padding: 6px 12px; color: #fff; font-size: 14px; line-height: 20px; }
.gl-input::placeholder { color: var(--gl-text-faint); }

/* Slider: 4px track, white fill, glossy glass bead thumb 24x16, white value bubble. */
.gl-slider { position: relative; display: flex; align-items: center; height: 32px; padding: 0 12px; box-sizing: border-box; overflow: visible; touch-action: none; cursor: pointer; }
.gl-slider-track { width: 100%; height: 4px; border-radius: 9999px; background: #ffffff33; pointer-events: none; }
.gl-slider-fill { height: 4px; border-radius: 9999px; background: #fff; width: var(--gl-value, 50%); }
.gl-slider-thumb {
	position: absolute;
	top: 50%;
	left: clamp(0px, calc(var(--gl-value, 50%) - 12px), calc(100% - 24px));
	width: 24px;
	height: 16px;
	transform: translateY(-50%);
	border-radius: 9999px;
	/* glossy glass bead: white-hot core, amber glints, cool right rim (pure CSS, no image) */
	background:
		linear-gradient(90deg, #fff 0 38%, rgba(255, 255, 255, 0.6) 48%, rgba(255, 255, 255, 0) 58%) left center / 100% 36% no-repeat,
		radial-gradient(26% 46% at 6% 50%, rgba(255, 245, 235, 0.95) 0 40%, rgba(255, 245, 235, 0) 100%),
		radial-gradient(30% 16% at 30% 7%, rgba(255, 150, 70, 0.85) 0, rgba(255, 150, 70, 0) 100%),
		radial-gradient(30% 16% at 30% 93%, rgba(255, 150, 70, 0.75) 0, rgba(255, 150, 70, 0) 100%),
		linear-gradient(180deg, #333435 0%, #444547 22%, #5f6163 50%, #444547 78%, #333435 100%);
	box-shadow: inset -1px 0 0.5px rgba(232, 233, 236, 0.6), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.15);
	filter: blur(0.2px);
	pointer-events: none;
}
.gl-slider-bubble {
	position: absolute;
	z-index: 10;
	left: calc(clamp(0px, calc(var(--gl-value, 50%) - 12px), calc(100% - 24px)) + 12px);
	top: calc(50% - 12px);
	transform: translate(-50%, -100%);
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 16px;
	padding: 1px 6px;
	border-radius: 10px;
	background: #fff;
	outline: 1px solid #d4d4d8;
	color: #000;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	text-align: center;
	pointer-events: none;
}

/* Toggle switch. Off state: add .gl-rim. */
.gl-switch { position: relative; flex-shrink: 0; width: 44px; height: 24px; border-radius: 38px; overflow: clip; background: rgba(0, 0, 0, 0.2); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.gl-switch::before { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 9999px; background: #fff; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.gl-switch[aria-checked="true"] { background: #fff; }
.gl-switch[aria-checked="true"]::before { left: 24px; background: #18181b; }
.gl-switch[aria-checked="true"].gl-rim::after { display: none; }

/* Key cap. Add .gl-rim; rim uses the dialog gradient. */
.gl-kbd {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 32px;
	min-height: 32px;
	box-sizing: border-box;
	padding: 6px 8px;
	border-radius: 6px;
	background: var(--gl-fill-50);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--gl-mono);
	font-size: 12px;
	line-height: 1;
	font-weight: 600;
	text-align: center;
	--gl-rim-gradient: var(--gl-rim-dialog);
}
.gl-keys { display: flex; flex-shrink: 0; align-items: center; gap: 6px; }

/* Color swatch */
.gl-swatches { display: grid; grid-auto-flow: column; grid-auto-columns: 24px; gap: 6px; justify-items: center; }
.gl-swatch { width: 24px; height: 24px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.gl-swatch:hover { transform: scale(1.1); }
.gl-swatch[aria-selected="true"] { outline: 2px solid #14b8a6; outline-offset: 1px; } /* selected */
.gl-swatch--rainbow { background: conic-gradient(from 180deg, #ff375f, #ffcc6d, #62ff00, #00c6e0, #0045da, #7e30d1, #ff0084, #ff4245); }

/* ================= buttons ================= */

/* Buttons: 40px, radius 56, 14/24 semibold. In modals use flex:1 in a row with gap 16. */
.gl-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	box-sizing: border-box;
	padding: 8px 20px;
	border-radius: 56px;
	overflow: hidden;
	font-size: 14px;
	line-height: 24px;
	font-weight: 600;
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gl-btn--primary { background: #fff; color: var(--gl-text-ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gl-btn--primary:hover { background: rgba(255, 255, 255, 0.9); }
.gl-btn--secondary { background: var(--gl-wash); color: #fff; }
.gl-btn--secondary:hover { background: rgba(255, 255, 255, 0.2); }
.gl-btn--outline { background: transparent; color: #fff; outline: 1px solid #ffffff1f; outline-offset: -1px; }
.gl-btn--outline:hover { background: var(--gl-wash); }
.gl-btn--sm { height: 32px; padding: 4px 12px 4px 8px; border-radius: 8px; line-height: 24px; } /* compact footer button */
/* Panel CTA: 40px, radius 10, zinc-800 text */
.gl-btn--panel { background: #fff; color: #27272a; border-radius: 10px; }
.gl-btn--panel:hover { background: #f3f4f6; }

/* Glass button: sheen fill + rim, teal wash fades in on hover. Add .gl-rim. */
.gl-btn--glass { background: var(--gl-fill-sheen); color: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); isolation: isolate; overflow: visible; }
.gl-btn--glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to bottom, rgba(37, 208, 202, 0.18) 0%, rgba(37, 208, 202, 0.08) 100%); opacity: 0; transition: opacity 200ms; z-index: -1; }
.gl-btn--glass:hover,
.gl-btn--glass:focus-visible { color: #fff; }
.gl-btn--glass:hover::before,
.gl-btn--glass:focus-visible::before { opacity: 1; }

/* Chip: resting glass + #FFFFFFCC overlay stroke; selected inverts, stroke drops. Add .gl-hairline. */
.gl-chip {
	position: relative;
	display: flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--gl-hairline-color: #ffffffcc;
}
.gl-chip.gl-hairline::before { inset: -1px; } /* stroke sits on the 1px transparent border */
.gl-chip:hover { background: rgba(255, 255, 255, 0.14); }
.gl-chip[aria-pressed="true"] { background: #fff; color: #000; }
.gl-chip[aria-pressed="true"]::before { display: none; }
.gl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* Badge. Add .gl-hairline. */
.gl-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 4px 12px;
	border-radius: 41px;
	background: rgb(21 132 112 / 0.3);
	overflow: hidden;
	color: var(--gl-accent-glow);
	font-size: 14px;
	line-height: 24px;
	font-weight: 500;
}

/* Glass play button over media */
.gl-play { display: flex; align-items: center; justify-content: center; padding: 1.65em; border-radius: 9999px; border: 0.5px solid #ffffff33; background: #ffffff3d; box-shadow: 0 0 0 5px rgba(0, 0, 1, 0.12); filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); color: #edfcfa; transition: transform 150ms; }
.gl-play:hover { transform: scale(1.05); }
.gl-play svg { width: 2.2em; height: 2.2em; }
.gl-play-backdrop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #000000a3; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* ================= surfaces ================= */

/* Side rail with thumbnails: rail tier (radius 20), --50, no stroke. */
.gl-rail { display: flex; flex-direction: column; overflow: hidden; }
.gl-rail-scroll { display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow-y: auto; scrollbar-width: none; }
.gl-rail-scroll::-webkit-scrollbar { display: none; }
.gl-thumb { position: relative; flex-shrink: 0; width: 168px; height: 100px; border-radius: 8px; overflow: clip; background: #171717; }
/* Active: white ring › black ring › content (160x92) */
.gl-thumb--active { width: 168px; height: auto; padding: 2px; box-sizing: border-box; background: #fff; overflow: visible; }
.gl-thumb--active > .gl-thumb-ring { padding: 2px; background: #000; border-radius: 6px; }
.gl-thumb--active .gl-thumb-media { width: 160px; height: 92px; border-radius: 5px; overflow: clip; background: #fff; position: relative; }
.gl-thumb-media { position: absolute; inset: 0; }
.gl-thumb-badge {
	position: absolute;
	left: 4px;
	bottom: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	background: var(--gl-fill-chip);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	font-weight: 600;
	--gl-rim-gradient: var(--gl-rim-chip);
	--gl-rim-radius: 36px;
}
.gl-thumb-badge.gl-rim::after { -webkit-backdrop-filter: blur(2px) brightness(1.2); backdrop-filter: blur(2px) brightness(1.2); }

/* Glass dialog: button tier (radius 20), --dialog fill, dialog rim at 16px. */
.gl-dialog { display: grid; gap: 16px; padding: 24px; box-sizing: border-box; --gl-glass-drop: var(--gl-drop-dialog); --gl-rim-gradient: var(--gl-rim-dialog); --gl-rim-radius: 16px; }
.gl-dialog-head { display: flex; flex-direction: column; gap: 6px; }
.gl-dialog-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em; color: #fff; }
.gl-dialog-desc { margin: 0; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.55); }
.gl-eyebrow { margin: 0 0 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
/* Grouped list card inside the dialog */
.gl-group { padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gl-group-row { display: flex; min-height: 48px; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.8); }
.gl-group-row + .gl-group-row { border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* Announcement modal: CSS-only glass + its overlay. */
.gl-overlay { position: fixed; inset: 0; background: #000000cc; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
.gl-modal {
	position: relative;
	box-sizing: border-box;
	border-radius: 28px;
	border: 1px solid #ffffff1a;
	background: rgba(0, 0, 0, 0.8);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: var(--gl-drop-lg);
	animation: gl-pop-in 150ms ease-out;
}
.gl-modal-body { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 100%; box-sizing: border-box; padding: 24px 12px 24px 24px; }
.gl-modal-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; align-self: stretch; }
.gl-modal-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; align-self: stretch; }
.gl-modal-title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: #fff; }
.gl-modal-text { margin: 0; font-size: 16px; line-height: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.gl-modal-actions { display: flex; align-items: center; column-gap: 16px; align-self: stretch; }
.gl-modal-actions > .gl-btn { flex: 1; padding-left: 0; padding-right: 0; }

/* Glass card. Add .gl-rim. */
.gl-card { position: relative; overflow: clip; box-sizing: border-box; border-radius: 20px; padding: 20px; background: var(--gl-fill-sheen), #0a0b0d; box-shadow: var(--gl-drop-card); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.gl-card-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: #fff; }
.gl-card-sub { margin: 8px 0 0; font-size: 14px; line-height: 24px; color: rgba(255, 255, 255, 0.6); }
.gl-card-list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.gl-tile { border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); padding: 14px; }
.gl-tile-text { margin: 0; font-size: 13.5px; line-height: 24px; color: rgba(255, 255, 255, 0.85); }

/* Thin scrollbar */
.gl-scroll { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) rgba(255, 255, 255, 0.04); }
.gl-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.gl-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 9999px; }
.gl-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 9999px; }
.gl-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }

/* ================= widgets (OS-style glass) ================= */

/* Widget card: widget tier (radius 28). Add a fill (gl-glass--50 over bright wallpaper) + gl-rim + gl-glow. */
.gl-widget { display: flex; flex-direction: column; gap: 12px; padding: 18px; box-sizing: border-box; color: #fff; }
.gl-widget-label { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; color: var(--gl-text-soft); }
.gl-widget-label svg { width: 14px; height: 14px; }

/* Weather */
.gl-weather-temp { font-size: 56px; line-height: 1; font-weight: 300; letter-spacing: -0.04em; }
.gl-weather-cond { font-size: 14px; line-height: 20px; font-weight: 500; }
.gl-weather-range { font-size: 13px; line-height: 18px; color: var(--gl-text-soft); }
.gl-hours { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.gl-hour { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--gl-text-soft); font-variant-numeric: tabular-nums; }
.gl-hour b { color: #fff; font-weight: 600; }
.gl-hour svg { width: 18px; height: 18px; color: #fff; }

/* Now playing */
.gl-player-head { display: flex; align-items: center; gap: 12px; }
.gl-player-art { flex: none; width: 56px; height: 56px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.gl-player-title { font-size: 15px; line-height: 20px; font-weight: 600; }
.gl-player-artist { font-size: 13px; line-height: 18px; color: var(--gl-text-soft); }
.gl-player .gl-slider { padding: 0; height: 20px; }
.gl-player-times { display: flex; justify-content: space-between; margin-top: -8px; font-size: 11px; line-height: 14px; color: var(--gl-text-faint); font-variant-numeric: tabular-nums; }
.gl-player-controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
.gl-icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9999px; color: #fff; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms; }
.gl-icon-btn:hover { background: var(--gl-wash); }
.gl-icon-btn svg { width: 22px; height: 22px; }
.gl-icon-btn--primary { width: 52px; height: 52px; background: #fff; color: #0a0c0d; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.gl-icon-btn--primary:hover { background: rgba(255, 255, 255, 0.9); }
.gl-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }

/* Control center: round toggle tiles + tall sliders */
.gl-cc { display: flex; gap: 12px; align-items: stretch; }
.gl-cc-tiles { display: grid; grid-template-columns: repeat(2, 52px); gap: 10px; align-content: center; }
.gl-cc-tile { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 9999px; background: rgba(255, 255, 255, 0.12); color: #fff; transition: background-color 150ms; }
.gl-cc-tile svg { width: 22px; height: 22px; }
.gl-cc-tile:hover { background: rgba(255, 255, 255, 0.18); }
.gl-cc-tile[aria-pressed="true"] { background: var(--gl-accent); color: #fff; }
.gl-cc-tile--light[aria-pressed="true"] { background: #fff; color: #0a0c0d; }
.gl-vslider { position: relative; flex: none; width: 56px; height: 124px; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); cursor: pointer; }
.gl-vslider-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--gl-value, 50%); background: #fff; }
.gl-vslider svg { position: absolute; left: 50%; bottom: 12px; width: 22px; height: 22px; transform: translateX(-50%); color: #6b6d70; }

/* Notification */
.gl-notif { display: grid; grid-template-columns: 38px 1fr auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 16px; box-sizing: border-box; color: #fff; }
.gl-notif-icon { grid-row: span 2; align-self: start; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.gl-notif-icon svg { width: 20px; height: 20px; }
.gl-notif-title { font-size: 14px; line-height: 20px; font-weight: 600; }
.gl-notif-time { font-size: 12px; line-height: 16px; color: var(--gl-text-faint); }
.gl-notif-body { grid-column: 2 / 4; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, 0.75); }

/* Spotlight search: pill tier with radius 28 */
.gl-spotlight { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 20px; box-sizing: border-box; color: #fff; font-size: 20px; line-height: 28px; }
.gl-spotlight svg { width: 22px; height: 22px; color: var(--gl-text-soft); flex: none; }
.gl-spotlight input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; font: inherit; }
.gl-spotlight input::placeholder { color: var(--gl-text-soft); }

/* App dock: dock tier with radius 24, icon tiles instead of text items */
.gl-appdock { display: flex; align-items: center; gap: 10px; padding: 10px; }
.gl-app { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.25); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.gl-app svg { width: 26px; height: 26px; }
.gl-app:hover { transform: translateY(-4px); }
.gl-app[data-running]::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 9999px; background: rgba(255, 255, 255, 0.85); }
.gl-appdock-sep { flex: none; width: 1px; height: 40px; background: rgba(255, 255, 255, 0.2); }

/* Calendar */
.gl-cal-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; line-height: 18px; font-weight: 600; }
.gl-cal-head span:first-child { color: var(--gl-accent); text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; }
.gl-cal { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.gl-cal span { height: 22px; line-height: 22px; }
.gl-cal .dow { font-size: 10px; font-weight: 600; color: var(--gl-text-faint); }
.gl-cal .off { color: rgba(255, 255, 255, 0.3); }
.gl-cal .today { justify-self: center; width: 22px; border-radius: 9999px; background: var(--gl-accent); color: #fff; font-weight: 700; }

/* ================= motion ================= */

@keyframes gl-pop-in {
	from { opacity: 0; transform: scale(0.95) translateY(4px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes gl-pop-out {
	from { opacity: 1; transform: scale(1) translateY(0); }
	to { opacity: 0; transform: scale(0.95) translateY(4px); }
}

/* [ADDED] */
@media (prefers-reduced-motion: reduce) {
	.gl-menu, .gl-modal { animation-duration: 1ms; }
	.gl-play:hover, .gl-swatch:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
	.gl-glass, .gl-glass-css, .gl-card, .gl-modal { --gl-glass-fill: #151719; background: #151719; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ---------- Morphing menu: a button that grows into a menu (Liquid Glass) ---------- */
.gl-morph {
	position: relative; display: block; overflow: hidden; padding: 0; border: 0; cursor: default;
	--gl-morph-w: 260px; --gl-morph-h: 76px; --gl-morph-open-w: 320px; --gl-morph-open-h: 372px;
	width: var(--gl-morph-w); height: var(--gl-morph-h);
	transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
	will-change: width, height;
}
.gl-morph[aria-expanded="true"] { width: var(--gl-morph-open-w); height: var(--gl-morph-open-h); }
.gl-morph-face {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
	width: var(--gl-morph-w); height: var(--gl-morph-h); margin: 0; padding: 0 22px; border: 0; background: none; color: inherit;
	font: 600 17px/1 var(--gl-font); letter-spacing: 0.01em; cursor: pointer; border-radius: inherit;
	transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gl-morph-face svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.gl-morph-face:hover { background: var(--gl-wash); }
.gl-morph-face:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.gl-morph[aria-expanded="true"] .gl-morph-face { height: 56px; justify-content: flex-start; width: var(--gl-morph-open-w); font-size: 14px; opacity: 0.7; }
.gl-morph[aria-expanded="true"] .gl-morph-face svg { transform: rotate(180deg); }
.gl-morph-menu {
	position: absolute; left: 0; right: 0; top: 56px; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 12px; margin: 0; list-style: none;
	opacity: 0; transform: translateY(6px); pointer-events: none;
	transition: opacity 0.2s ease 0s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0s;
}
.gl-morph[aria-expanded="true"] .gl-morph-menu { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.22s; }
.gl-morph-menu [role="menuitem"] {
	display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: none; color: inherit;
	font: 500 15px/1 var(--gl-font); text-align: left; cursor: pointer; transition: background 0.15s ease;
}
.gl-morph-menu [role="menuitem"] svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.gl-morph-menu [role="menuitem"]:hover, .gl-morph-menu [role="menuitem"]:focus-visible { background: var(--gl-wash); outline: none; }
.gl-morph-menu [role="menuitem"] .gl-kbd { margin-left: auto; }
.gl-morph-menu .gl-hdivider { margin: 6px 4px; }
@media (prefers-reduced-motion: reduce) { .gl-morph, .gl-morph-face, .gl-morph-menu { transition-duration: 0.01ms; } }

/* ---------- Scenes: detailed backdrops for glass to sit on ----------
   Liquid Glass only reads as glass when there is detail behind it. Use these on the section or a layer behind the glass. */
.gl-scene { position: relative; }
.gl-scene--lines { background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(255, 255, 255, 0.22) 13px 15px), linear-gradient(180deg, #1b1e26, #0e1016); }
.gl-scene--lines-light { background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(38, 41, 48, 0.9) 13px 15px), linear-gradient(180deg, #ece9e1, #e3dfd5); color: #1c1e22; }
.gl-scene--grid { background: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(180deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(135deg, #1a1d2b, #0d0f16); }
.gl-scene--dots { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.35) 0 1.6px, transparent 2px) 0 0 / 18px 18px, linear-gradient(180deg, #14171f, #0b0d12); }
.gl-scene--horizon { background: linear-gradient(180deg, #babcc7 0 50%, #464852 50%); } /* Apple's WWDC25 demo backdrop */
.gl-scene--sunset { background: linear-gradient(180deg, #1d2a5e 0%, #7d4b9c 32%, #f08a5d 55%, #f9c66b 66%, #1f3a5f 66.2%, #10233d 100%); }
.gl-scene--stripes { background: repeating-linear-gradient(90deg, #f5f1e8 0 22px, #2b2e36 22px 44px); }
.gl-scene--type { background: linear-gradient(180deg, #f2efe8, #e6e2d8); color: #15171b; } /* fill it with large text (h1 at 96–160px), then float glass over the words */