/*
 * Styles for /delights.js. Loaded on every page after /styles.css.
 * Everything is prefixed dl- (or body.night-feed) so nothing leaks into the UI kit.
 */

/* ─── Achievement toasts ────────────────────────────────────────────────── */

.dl-toasts {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 120;
	display: grid;
	gap: 0.6rem;
	width: min(22rem, calc(100vw - 2rem));
	pointer-events: none;
}
.dl-toast {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.8rem;
	align-items: start;
	padding: 0.85rem 2.4rem 0.85rem 0.9rem;
	color: var(--ink);
	background: var(--panel);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	box-shadow: 5px 5px 0 var(--shadow-color);
	pointer-events: auto;
	animation: dl-toast-in 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}
.dl-toast.is-leaving {
	animation: dl-toast-out 0.26s ease-in forwards;
}
.dl-toast-emoji {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	font-size: 1.5rem;
	line-height: 1;
	background: var(--accent);
	border: 2px solid var(--ink);
	border-radius: 50%;
}
.dl-toast-body > * {
	margin: 0;
}
.dl-toast-kicker {
	font: 600 0.62rem/1.4 var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-text);
}
.dl-toast-name {
	font-family: var(--font-display);
	font-weight: 850;
	font-stretch: 112%;
	font-size: 1.12rem;
	line-height: 1.15;
}
.dl-toast-name a {
	color: inherit;
	text-decoration: none;
}
.dl-toast-name a:hover,
.dl-toast-name a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--accent);
}
.dl-toast-desc {
	font-size: 0.84rem;
	line-height: 1.4;
	color: var(--ink-2);
}
.dl-toast-close {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	font: 500 1.25rem/1 var(--font-body);
	color: var(--ink-2);
	background: transparent;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
}
.dl-toast-close:hover {
	color: var(--ink);
	background: var(--paper-2);
}
@keyframes dl-toast-in {
	from {
		opacity: 0;
		transform: translate3d(0, 1.25rem, 0) scale(0.96);
	}
}
@keyframes dl-toast-out {
	to {
		opacity: 0;
		transform: translate3d(1.5rem, 0, 0);
	}
}

/* ─── Screensaver ───────────────────────────────────────────────────────── */

.dl-saver {
	position: fixed;
	inset: 0;
	z-index: 100;
	overflow: hidden;
	background: #050505;
	cursor: none;
	animation: dl-fade-in 0.8s ease both;
}
.dl-saver.is-leaving {
	opacity: 0;
	transition: opacity 0.2s ease;
}
.dl-saver-logo {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	justify-items: center;
	gap: 0.15rem;
	padding: 0.9rem 1.6rem 0.8rem;
	color: #ff5fa2;
	border: 0.22em solid currentColor;
	border-radius: 50% / 38%;
	will-change: transform;
	user-select: none;
}
.dl-saver-q {
	font: 600 clamp(0.6rem, 1.3vw, 0.9rem) / 1.2 var(--font-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.dl-saver-a {
	font-family: var(--font-display);
	font-weight: 900;
	font-stretch: 150%;
	font-size: clamp(2.6rem, 9vw, 7rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	white-space: nowrap;
}
[data-status='soon'] .dl-saver-a {
	font-size: clamp(1.7rem, 5.5vw, 4.5rem);
}
.dl-saver-hint {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	margin: 0;
	transform: translateX(-50%);
	font: 500 0.66rem/1.4 var(--font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	width: max-content;
	max-width: calc(100% - 2rem);
	color: rgb(255 255 255 / 0.4);
}
.dl-saver-corner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate(-50%, -50%);
	font-family: var(--font-display);
	font-weight: 900;
	font-stretch: 150%;
	font-size: clamp(2rem, 8vw, 5rem);
	color: #fff;
	animation: dl-corner 1.6s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
.dl-burst {
	position: absolute;
	width: 0;
	height: 0;
}
.dl-burst > span {
	position: absolute;
	width: 0.6rem;
	height: 0.85rem;
	border-radius: 1px;
	animation: dl-burst 1.2s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
@keyframes dl-burst {
	to {
		opacity: 0;
		transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--r));
	}
}
@keyframes dl-corner {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.5);
	}
	25% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.08);
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1);
	}
}
@keyframes dl-fade-in {
	from {
		opacity: 0;
	}
}

/* ─── Torch mode ────────────────────────────────────────────────────────── */

dialog.dl-dialog {
	width: min(32rem, calc(100vw - 2rem));
	padding: 0;
	color: var(--ink);
	background: var(--panel);
	border: 3px solid var(--ink);
	border-radius: var(--radius);
	box-shadow: 8px 8px 0 var(--shadow-color);
}
dialog.dl-dialog::backdrop {
	background: rgb(10 9 7 / 0.6);
}
.dl-dialog-inner {
	display: grid;
	gap: 0.85rem;
	padding: 1.5rem;
}
.dl-dialog-inner > * {
	margin: 0;
}
.dl-dialog-title {
	font-family: var(--font-display);
	font-weight: 900;
	font-stretch: 140%;
	font-size: 1.9rem;
	line-height: 1;
	text-transform: uppercase;
}

/* Deliberately no transitions: crisp on/off, at most two flashes a second (see delights.js). */
.dl-torch {
	position: fixed;
	inset: 0;
	z-index: 110;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1rem;
	padding: 2rem;
	text-align: center;
	color: #2a2a2a;
	background: #000;
	cursor: pointer;
	outline: none;
}
.dl-torch.is-on {
	color: #000;
	background: #fff;
}
.dl-torch > * {
	margin: 0;
}
.dl-torch-word {
	font-family: var(--font-display);
	font-weight: 900;
	font-stretch: 150%;
	font-size: clamp(4rem, 20vw, 16rem);
	line-height: 0.9;
	letter-spacing: -0.03em;
}
[data-status='soon'] .dl-torch-word {
	font-size: clamp(3rem, 12vw, 10rem);
}
.dl-torch-morse {
	font-size: clamp(1rem, 3vw, 1.6rem);
	letter-spacing: 0.25em;
}
.dl-torch-hint {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	font: 500 0.7rem/1.4 var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #777;
}

/* ─── The due date in other calendars (home panel) ──────────────────────── */

.dl-cal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 0.6rem;
	margin: 0;
}
.dl-cal {
	padding: 0.65rem 0.8rem 0.7rem;
	background: var(--paper);
	border: 1px solid var(--rule-2);
	border-radius: var(--radius);
}
.dl-cal dt {
	margin: 0 0 0.25rem;
	font: 500 0.64rem/1.3 var(--font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.dl-cal dd {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 750;
	font-stretch: 100%;
	font-size: 1rem;
	line-height: 1.3;
}

/* ─── Night-feed mode: after YES, 02:00 to 05:00 UK time ────────────────── */

:root:has(> body.night-feed),
body.night-feed {
	color-scheme: dark;
	--paper: #0c0302;
	--paper-2: #170605;
	--panel: #120403;
	--ink: #e2573f;
	--ink-2: #b9452f;
	--ink-3: #8a3324;
	--rule: rgb(226 87 63 / 0.14);
	--rule-2: rgb(226 87 63 / 0.32);
	--grid: rgb(226 87 63 / 0.04);
	--no: #c94a35;
	--soon: #d9603f;
	--yes: #e2573f;
	--ok: #e2573f;
	--error: #ff6b52;
	--focus: #ff8a6b;
	--accent: #b9452f;
	--accent-ink: #0c0302;
	--accent-text: #ff7a5e;
	--hero-bg: #0f0302;
	--hero-ink: #d94e37;
	--mc-bg: #090201;
	--footer-bg: #060100;
	--footer-ink: #b9452f;
	--code-bg: #060100;
	--code-ink: #e2573f;
	--shadow-color: rgb(226 87 63 / 0.3);
}
body.night-feed img,
body.night-feed video,
body.night-feed canvas,
body.night-feed .dl-saver-logo {
	filter: sepia(1) saturate(2.5) hue-rotate(-25deg) brightness(0.55);
}
/* The telemetry LEDs are hard-coded green and amber: dim them to match. */
html[data-conn] body.night-feed .led {
	background: var(--ink-3);
	box-shadow: none;
}
.dl-whisper {
	position: fixed;
	left: max(1rem, env(safe-area-inset-left));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 95;
	max-width: min(24rem, calc(100vw - 2rem));
	margin: 0;
	padding: 0.5rem 0.85rem;
	font: 500 0.74rem/1.45 var(--font-mono);
	letter-spacing: 0.02em;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--rule-2);
	border-radius: 999px;
	pointer-events: none;
	animation: dl-fade-in 1.2s ease both;
}
/* Narrow screens: stack the toasts above the whisper rather than on top of it. */
@media (max-width: 49rem) {
	body.night-feed .dl-toasts {
		bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem);
	}
}

/* ─── /achievements ─────────────────────────────────────────────────────── */

.dl-ach-summary {
	max-width: 40rem;
}
.dl-ach-summary:focus {
	outline: none;
}
.dl-ach-grid {
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.dl-ach {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.9rem;
	align-items: start;
	padding: 1rem 1.1rem;
}
.dl-ach-emoji {
	display: grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	font-size: 1.5rem;
	line-height: 1;
	background: var(--accent);
	border: 2px solid var(--ink);
	border-radius: 50%;
}
.dl-ach-text > * {
	margin: 0;
}
.dl-ach-text > * + * {
	margin-top: 0.3rem;
}
.dl-ach-name {
	font-family: var(--font-display);
	font-weight: 850;
	font-stretch: 112%;
	font-size: 1.1rem;
	line-height: 1.15;
}
.dl-ach-desc {
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--ink-2);
}
.dl-ach.is-earned {
	border-color: var(--ink);
	box-shadow: var(--shadow);
}
.dl-ach.is-locked {
	background: transparent;
	border-style: dashed;
}
.dl-ach.is-locked .dl-ach-emoji {
	background: var(--paper-2);
	border-color: var(--rule-2);
	filter: grayscale(1);
}
.dl-ach.is-locked .dl-ach-name {
	color: var(--ink-2);
}
.dl-ach-reset {
	padding-top: 0.5rem;
}

/* ─── Reduced motion: no slides or bursts (the screensaver doesn't start at all) ─ */

@media (prefers-reduced-motion: reduce) {
	.dl-toast,
	.dl-toast.is-leaving,
	.dl-saver,
	.dl-saver-corner,
	.dl-burst > span,
	.dl-whisper {
		animation: none;
	}
}