/*
 * Levo demo: the desktop, closer to macOS 26 (Tahoe). Loaded after demo.css.
 * Desktop icons are macOS's own (img/desk/, from tools/export-desk-icons.swift),
 * 64 pt with 12 pt labels; widgets and the notification are Liquid Glass with a
 * lit rim; widget figures use SF Pro Rounded, as Apple's widgets do.
 */

.lv-scene {
	--glass: rgba(255, 255, 255, 0.36);
	--glass-rim: rgba(255, 255, 255, 0.6);
	--glass-lit: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 0.5px rgba(255, 255, 255, 0.5), inset 0 -0.5px 0 rgba(255, 255, 255, 0.25);
}
html.dark .lv-scene {
	--glass: rgba(30, 30, 34, 0.4);
	--glass-rim: rgba(255, 255, 255, 0.12);
	--glass-lit: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), inset 0 -0.5px 0 rgba(255, 255, 255, 0.05);
}

/* ------------------------------------------------------------ Desktop icons */

.lv-ic { gap: 3px; }
.lv-ic-name { font-size: 12px; line-height: 15px; padding: 0 5px; border-radius: 5px; }
html:not(.dark) .lv-ic-name { text-shadow: 0 0 4px rgba(255, 255, 255, 0.95), 0 0 1px rgba(255, 255, 255, 0.9); }
html.dark .lv-ic-name { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 6px rgba(0, 0, 0, 0.35); }
/* Selected: a soft rounded box behind the icon, the name in an accent pill. */
.lv-ic > span:first-child { border-radius: 7px; }
.lv-ic.is-sel > span:first-child { filter: none; background-color: rgba(0, 0, 0, 0.16); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.16); }
html.dark .lv-ic.is-sel > span:first-child { background-color: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16); }
.lv-ic.is-sel .lv-ic-name { background: var(--accent); color: #fff; text-shadow: none; }
html:not(.dark) .lv-ic.is-sel .lv-ic-name { background: #0A6CF0; }

/* macOS's own file icons. */
.lv-ic-real { display: block; width: 64px; height: 64px; border-radius: 7px; }
.lv-ic-real img { display: block; width: 64px; height: 64px; }
.lv-ic-vol { height: 64px; margin: 0; filter: none; border-radius: 7px; }

/* The screenshot: a Finder preview of a 16:10 capture of this desktop, with
   its menu bar, a window, the dock, a hairline rim and a soft shadow. */
.lv-ic-shot {
	width: 64px;
	height: 40px;
	margin: 12px 0;
	padding: 0;
	border-radius: 2px;
	background: none;
	box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.28);
}
.lv-ic.is-sel > span.lv-ic-shot:first-child { background: none; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(0, 0, 0, 0.16); }
html.dark .lv-ic.is-sel > span.lv-ic-shot:first-child { box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 0 0 4px rgba(255, 255, 255, 0.16); }
.lv-ic-shot i {
	border-radius: 2px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)) top / 100% 2px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)) 50% calc(100% - 1.5px) / 46% 3px no-repeat,
		radial-gradient(60% 55% at 78% 18%, rgba(255, 196, 160, 0.95) 0%, rgba(255, 196, 160, 0) 70%),
		radial-gradient(55% 60% at 12% 88%, rgba(150, 190, 255, 1) 0%, rgba(150, 190, 255, 0) 70%),
		radial-gradient(45% 45% at 48% 60%, rgba(182, 212, 255, 0.9) 0%, rgba(182, 212, 255, 0) 70%),
		linear-gradient(160deg, #EEF1F8, #F6EEEA);
}
html.dark .lv-ic-shot i {
	background:
		linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)) top / 100% 2px no-repeat,
		linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)) 50% calc(100% - 1.5px) / 46% 3px no-repeat,
		radial-gradient(60% 55% at 78% 18%, rgba(36, 84, 196, 0.85) 0%, rgba(36, 84, 196, 0) 70%),
		radial-gradient(55% 60% at 12% 88%, rgba(28, 98, 160, 0.9) 0%, rgba(28, 98, 160, 0) 70%),
		radial-gradient(45% 45% at 50% 62%, rgba(22, 62, 130, 0.6) 0%, rgba(22, 62, 130, 0) 70%),
		linear-gradient(160deg, #0A0E1A, #0B1220);
}
.lv-ic-shot i::before { left: 30%; top: 22%; width: 44%; height: 54%; border-radius: 2px; background: linear-gradient(#ECECEE 0 18%, #FFFFFF 18%); box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.28), 0 0 0 0.3px rgba(0, 0, 0, 0.2); }
html.dark .lv-ic-shot i::before { background: linear-gradient(#3A3A3E 0 18%, #26262A 18%); }
.lv-ic-shot i::after { left: calc(30% + 1.6px); top: calc(22% + 1.3px); width: 1.6px; height: 1.6px; box-shadow: 2.4px 0 0 #FEBC2E, 4.8px 0 0 #28C840; }

/* ------------------------------------------------------------ Widgets */

.lv-widget {
	border-radius: 22px;
	background: var(--glass);
	box-shadow: var(--glass-lit), 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 8px 24px -10px rgba(0, 0, 0, 0.22);
	-webkit-backdrop-filter: blur(30px) saturate(1.9) brightness(1.05);
	backdrop-filter: blur(30px) saturate(1.9) brightness(1.05);
}
html.dark .lv-widget {
	box-shadow: var(--glass-lit), 0 0 0 0.5px rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(30px) saturate(1.6) brightness(0.85);
	backdrop-filter: blur(30px) saturate(1.6) brightness(0.85);
}
.lv-w-city, .lv-w-date, .lv-w-dev { font-family: var(--rounded); }
.lv-w-city { font-size: 13px; font-weight: 600; color: rgb(var(--fg) / 0.9); }
.lv-w-date { font-size: 13px; font-weight: 500; color: rgb(var(--fg) / 0.55); }
.lv-w-time { font-family: var(--rounded); font-weight: 600; color: rgb(var(--fg) / 0.92); }
.lv-w-dev { font-size: 13px; font-weight: 600; color: rgb(var(--fg) / 0.55); }
.lv-w-level { font-size: 28px; color: rgb(var(--fg) / 0.92); }
.lv-ring-bg { stroke: rgb(var(--fg) / 0.12); }
.lv-ring-fg { stroke: #34C759; }
.lv-ring-fg.is-low { stroke: #FF3B30; }
.lv-w-cal { padding: 15px 14px 12px; }
.lv-cal-m { font-family: var(--rounded); font-size: 11.5px; font-weight: 700; color: #FF3B30; letter-spacing: .04em; }
.lv-cal-g { font-family: var(--rounded); font-size: 10px; font-weight: 600; color: rgb(var(--fg) / 0.85); }
.lv-cal-wd { color: rgb(var(--fg) / 0.4); }
.lv-cal-g .is-today { background: #FF3B30; }

/* ------------------------------------------------------------ The notification */

.lv-note {
	width: 344px;
	padding: 11px 14px 11px 11px;
	gap: 10px;
	border-radius: 18px;
	background: var(--glass);
	box-shadow: var(--glass-lit), 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 12px 34px -12px rgba(0, 0, 0, 0.3);
	-webkit-backdrop-filter: blur(30px) saturate(2) brightness(1.06);
	backdrop-filter: blur(30px) saturate(2) brightness(1.06);
}
html.dark .lv-note {
	box-shadow: var(--glass-lit), 0 0 0 0.5px rgba(0, 0, 0, 0.45), 0 12px 34px -12px rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(30px) saturate(1.6) brightness(0.85);
	backdrop-filter: blur(30px) saturate(1.6) brightness(0.85);
}
.lv-note:hover { background: rgba(255, 255, 255, 0.5); }
html.dark .lv-note:hover { background: rgba(44, 44, 48, 0.5); }
.lv-note-icon { width: 36px; height: 36px; }
.lv-note-text { font-size: 13px; line-height: 16px; gap: 1px; }
.lv-note-top b { font-weight: 700; }
.lv-note-when { font-size: 12px; color: rgb(var(--fg) / 0.5); }
.lv-note { cursor: default; overflow: visible; }
/* macOS's close button: a small round x at the top-leading corner, on hover. */
.lv-scene .lv-note-x {
	position: absolute;
	left: -6px;
	top: -6px;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(246, 246, 246, 0.92);
	color: rgb(0 0 0 / 0.6);
	box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.18);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	opacity: 0;
	transition: opacity .15s;
}
html.dark .lv-scene .lv-note-x { background: rgba(60, 60, 64, 0.92); color: rgb(255 255 255 / 0.75); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 1px 3px rgba(0, 0, 0, 0.4); }
.lv-note:hover .lv-note-x, .lv-note:focus-within .lv-note-x { opacity: 1; }
.lv-note-x .lv-sym { width: 8px; height: auto; }

/* Phones keep demo.css's compact cards. */
.lv-scene[data-mode="compact"] .lv-note { width: auto; }