/* Rainbow Hour PWA — imports shared base then adds sky-and-rainbow styling */
@import url('/styles/base.css');

@layer app;

@layer app {
	/* Sky backdrop: light-mode daylight, dark-mode dusk */
	body {
		min-height: 100dvh;
		background:
			linear-gradient(
				to bottom,
				color-mix(in srgb, #7dd3fc 55%, var(--color-bg)),
				var(--color-bg)
			);
	}

	rainbow-hour-app {
		display: block;
		max-width: 42rem;
		margin: 0 auto;
		padding: var(--space-lg) var(--space-md) var(--space-xl);
	}

	/* ── Header ─────────────────────────────────────────────────────────── */

	.rh-header {
		text-align: center;
		padding-bottom: var(--space-lg);

		h1 {
			font-size: clamp(2rem, 6vw, 2.75rem);
			margin: var(--space-sm) 0;
			background: linear-gradient(
				90deg,
				#ef4444,
				#f97316,
				#facc15,
				#22c55e,
				#3b82f6,
				#8b5cf6
			);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
	}

	.rh-tagline {
		color: var(--color-text-muted);
		max-width: 36ch;
		margin: 0 auto;
	}

	/* ── Cards ──────────────────────────────────────────────────────────── */

	.rh-static section,
	.rh-dash {
		background: color-mix(in srgb, var(--color-surface) 92%, transparent);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		padding: var(--space-lg) var(--space-md);
		margin-block: var(--space-md);
		backdrop-filter: blur(6px);
	}

	/* Rainbow ribbon along the top edge of every card */
	.rh-static section,
	.rh-dash {
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			inset: 0 0 auto;
			height: 5px;
			background: linear-gradient(
				90deg,
				#ef4444,
				#f97316,
				#facc15,
				#22c55e,
				#3b82f6,
				#8b5cf6
			);
		}
	}

	h2 {
		margin-top: 0;
	}

	/* ── Live dashboard ─────────────────────────────────────────────────── */

	.rh-location {
		font-weight: 600;
	}

	.rh-sun {
		color: var(--color-text-muted);

		&:empty {
			display: none;
		}
	}

	.rh-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-sm);
		align-items: center;
		margin-block: var(--space-md);
	}

	.rh-alerts {
		font-size: 1.2rem;
		line-height: 1;

		&[aria-pressed='true'] {
			color: var(--color-accent);
		}
	}

	.rh-verdict {
		font-size: 1.15rem;
		font-weight: 700;
		margin-block: var(--space-md) 0;

		&[hidden] {
			display: none;
		}
	}

	.rh-factors {
		list-style: none;
		padding: 0;
		margin-block: var(--space-sm) 0;
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xs) var(--space-md);

		&[hidden] {
			display: none;
		}

		li {
			font-size: 0.9rem;
			color: var(--color-text-muted);

			&[data-pass='true'] {
				color: var(--color-success);
			}
		}
	}

	/* ── Coordinate form (no-JS baseline, always present) ────────────────── */

	.rh-fields {
		display: flex;
		gap: var(--space-md);
		flex-wrap: wrap;
	}

	.field {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		flex: 1;
		min-width: 10rem;

		label {
			font-weight: 600;
		}

		input {
			padding: 0.5rem 0.75rem;
			border: 1px solid var(--color-border);
			border-radius: var(--radius);
			background: var(--color-surface);
			color: var(--color-text);
			width: 100%;

			&:focus {
				outline: 2px solid var(--color-accent);
				outline-offset: 1px;
				border-color: transparent;
			}
		}
	}

	.error {
		color: var(--color-error);
		border: 1px solid var(--color-error);
		border-radius: var(--radius);
		padding: var(--space-sm) var(--space-md);
	}

	/* ── Footer note ────────────────────────────────────────────────────── */

	.rh-privacy {
		color: var(--color-text-muted);
		font-size: 0.85rem;
		max-width: 60ch;
	}

	/* ── View transitions ───────────────────────────────────────────────── */

	@view-transition {
		navigation: auto;
	}
}