:root {
	color-scheme: light;
	font-family: var(
		--font-body,
		'Avenir Next',
		'Helvetica Neue',
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif
	);
	background: #e8e3d8;
	color: #2a2621;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	background:
		radial-gradient(
			circle at 12% 8%,
			rgba(255, 252, 245, 0.46),
			transparent 42%
		),
		radial-gradient(
			circle at 88% 0%,
			rgba(172, 155, 132, 0.14),
			transparent 44%
		),
		linear-gradient(180deg, #ece7dc 0%, #ddd4c6 100%);
	padding: 0;
}

#root {
	width: 100%;
}

.frame {
	width: 100%;
	background: #f6f1e7;
	border: 1px solid #c5b8a5;
	border-radius: 16px;
	padding: 0;
	box-shadow:
		inset 0 1px 0 rgba(255, 252, 246, 0.7),
		inset 0 14px 24px rgba(86, 74, 58, 0.07),
		inset 0 -10px 16px rgba(118, 102, 82, 0.125);
	display: grid;
	place-items: center;
}

.rail {
	position: relative;
	width: 100%;
	min-height: 220px;
	background:
		repeating-linear-gradient(
			180deg,
			rgba(58, 50, 42, 0.03) 0,
			rgba(58, 50, 42, 0.03) 1px,
			transparent 1px,
			transparent 26px
		),
		#efe9dd;
	border-radius: 12px;
	overflow: visible;
	border: 1px solid #d2c5b3;
	box-shadow:
		inset 0 2px 3px rgba(255, 253, 248, 0.62),
		inset 0 12px 22px rgba(126, 110, 90, 0.08),
		inset 0 -8px 14px rgba(113, 98, 80, 0.115);
	display: flex;
	align-items: center;
	justify-content: center;
	--baseline-bottom: 28px;
	--ticks-bottom: 2rem;
	--tick-height: 1rem;
	--overlay-bottom: 38px;
}

.rail-day {
	min-height: 220px;
}

.rail-month {
	min-height: 88px;
	margin-top: 24px;
	margin-bottom: 16px;
	--baseline-bottom: 18px;
	--ticks-bottom: 2rem;
	--tick-height: 8px;
	--overlay-bottom: 24px;
}

.rail-year {
	min-height: 44px;
	margin-top: 16px;
	--baseline-bottom: 12px;
	--ticks-bottom: 8px;
	--tick-height: 6px;
	--overlay-bottom: 18px;
}

.baseline {
	position: absolute;
	bottom: var(--baseline-bottom);
	left: 0;
	right: 0;
	height: 2px;
	background: #bcae9a;
}

.ticks {
	position: absolute;
	bottom: var(--ticks-bottom);
	left: 0;
	right: 0;
	height: 12px;
	pointer-events: none;
	z-index: 1;
}

.tick-labels {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 16px;
	pointer-events: none;
	font-size: 0.8rem;
	color: #6d6256;
	font-variant-numeric: tabular-nums;
}

.tick {
	position: absolute;
	bottom: 0;
	width: 2px;
	height: var(--tick-height);
	background: #9a8e7f;
	border-radius: 2px;
}

.tick-label {
	position: absolute;
	bottom: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}

.items {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 0;
}

.timeline-empty-state {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 420px;
	width: min(90%, 420px);
	border: 1px dashed #9c8f7e;
	border-radius: 10px;
	background: rgba(250, 245, 235, 0.9);
	padding: 16px;
	text-align: center;
	z-index: 5;
}

.timeline-empty-state__title {
	margin: 0 0 6px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #2f2a23;
}

.timeline-empty-state__copy {
	margin: 0 0 12px;
	font-size: 0.85rem;
	color: #6d6256;
}

.timeline-empty-state__button {
	border: 1px solid #7f7263;
	border-radius: 999px;
	background: #3e3830;
	color: #f8f3e8;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 6px 12px;
	cursor: pointer;
}

.timeline-empty-state__button:hover {
	background: #534b41;
}

.past-overlay {
	position: absolute;
	inset: 0 0 var(--overlay-bottom) 0;
	background: linear-gradient(
		90deg,
		rgba(120, 101, 84, 0.24) 0%,
		rgba(120, 101, 84, 0.14) 20%,
		rgba(120, 101, 84, 0.03) 100%
	);
	backdrop-filter: blur(2px);
	pointer-events: none;
	z-index: 2;
	transition: width 0.9s linear;
}

/* Sleepy Time Overlay — for the drowsy hours */
.sleepy-overlay {
	position: absolute;
	inset: 0;
	background: rgba(100, 120, 140, 0.15);
	pointer-events: none;
	z-index: 1;
}

/* Tick half-height during sleepy hours */
.tick.sleepy {
	height: calc(var(--tick-height) * 0.5);
}

/* Blocks — now 1/4 height with overlap stacking */
.block {
	position: absolute;
	height: 36px;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(44, 37, 30, 0.14);
	transition:
		left 0.3s ease,
		width 0.3s ease,
		transform 0.15s ease,
		box-shadow 0.15s ease,
		filter 0.15s ease,
		bottom 150ms ease;
	z-index: 3;
	cursor: pointer;
	/* Default to bottom position */
	bottom: 44px;
}

.block.past {
	opacity: 0.65;
}

.block.past::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(15, 23, 42, 0.1);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.block:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(44, 37, 30, 0.2);
	filter: brightness(1.03);
	z-index: 12;
}

.block:focus-visible {
	outline: 2px solid #f8fafc;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.65);
}

.block.hovered {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	z-index: 20;
	filter: brightness(1.1);
}

.block-icon {
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	color: white;
	opacity: 0.8;
	pointer-events: none;
}

.block-label {
	position: absolute;
	left: 20px;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.7rem;
	font-weight: 500;
	color: white;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Overlap stacking — CSS custom property set by JS */
.block[data-stack-level='0'] {
	bottom: 44px;
}
.block[data-stack-level='1'] {
	bottom: calc(44px + 10%);
}
.block[data-stack-level='2'] {
	bottom: calc(44px + 20%);
}
.block[data-stack-level='3'] {
	bottom: calc(44px + 30%);
}
.block[data-stack-level='4'] {
	bottom: calc(44px + 40%);
}
.block[data-stack-level='5'] {
	bottom: calc(44px + 50%);
}

/* Zoom-level specific block heights */
[data-zoom-level='day'] .block {
	height: 36px;
}

[data-zoom-level='week'] .block {
	height: 28px;
}

[data-zoom-level='month'] .block,
[data-zoom-level='quarter'] .block,
[data-zoom-level='year'] .block {
	height: 20px;
}

[data-zoom-level='quarter'] .block-label,
[data-zoom-level='year'] .block-label,
[data-zoom-level='quarter'] .block-icon,
[data-zoom-level='year'] .block-icon {
	display: none;
}

/* Hidden tooltip — details now shown in panel above */
.tooltip {
	display: none;
}

.now-window {
	position: absolute;
	top: -10px;
	bottom: -10px;
	border-radius: 3px;
	/* background: rgba(37, 99, 235, 0.16); */
	background: linear-gradient(
		0deg,
		rgba(249, 242, 230, 0.9) 10%,
		rgba(120, 105, 89, 0.2) 15%,
		rgba(120, 105, 89, 0.06) 100%
	);
	border: 1px solid rgba(120, 105, 89, 0.22);
	pointer-events: none;
	overflow: visible;
	backdrop-filter: blur(2px);
	z-index: 4;
}

.now-line {
	position: absolute;
	bottom: 1.2rem;
	width: 2px;
	height: 65%;
	background: #4c4339;
	background: linear-gradient(
		0deg,
		rgba(249, 242, 230, 0.14) 5%,
		rgba(116, 104, 91, 0.36) 16%,
		rgba(70, 63, 54, 0.94) 94%,
		rgba(70, 63, 54, 0.66) 100%
	);
	left: 50%;
	transform: translateX(-50%);
	border-radius: 2px;
	/* box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); */
}

.now-line-simple {
	height: 100%;
}

.now-time {
	background: rgba(248, 243, 233, 0.9);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top-color: rgba(116, 104, 91, 0.24);
	bottom: 1px;
	color: #3e3730;
	font-size: 0.6rem;
	left: 50%;
	padding: 4px 0;
	position: absolute;
	transform: translateX(-50%);
	text-align: center;
	width: calc(100% - 2px);
}

/* -----------------------------------------------------------------------------
 * Viewport Rail — The Zoom-Aware Timeline
 * -------------------------------------------------------------------------- */

.viewport-rail {
	min-height: 200px;
	transition: all 200ms ease-out;
}

.viewport-rail--day {
	--tick-height: 16px;
}

.viewport-rail--week {
	--tick-height: 14px;
}

.viewport-rail--month {
	--tick-height: 12px;
}

.viewport-rail--quarter {
	--tick-height: 10px;
}

.viewport-rail--year {
	--tick-height: 8px;
}

/* Now Marker — The Muted Thread of Temporal Existence */
.now-marker {
	position: absolute;
	top: 0;
	bottom: var(--baseline-bottom, 28px);
	width: 2px;
	z-index: 10;
	pointer-events: none;
	transition: left 0.9s linear;
}

.now-marker-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: linear-gradient(
		180deg,
		rgba(120, 101, 84, 0.08) 0%,
		rgba(120, 101, 84, 0.58) 20%,
		#8d7968 50%,
		rgba(120, 101, 84, 0.58) 80%,
		rgba(120, 101, 84, 0.08) 100%
	);
	box-shadow: 0 0 4px rgba(120, 101, 84, 0.24);
	border-radius: 1px;
}

.now-marker-label {
	position: absolute;
	top: -1.35rem;
	bottom: auto;
	left: 50%;
	transform: translateX(-50%);
	background: #726658;
	color: #f8f3e8;
	font-size: 0.65rem;
	font-weight: 500;
	padding: 2px 6px;
	border-radius: 3px;
	white-space: nowrap;
	box-shadow: 0 2px 4px rgba(44, 37, 30, 0.18);
	font-family: var(
		--font-display,
		'Iowan Old Style',
		'Palatino Linotype',
		serif
	);
}

/* Viewport transitions */
.viewport-rail .block {
	transition:
		left 0.3s ease,
		width 0.3s ease,
		transform 0.15s ease,
		box-shadow 0.15s ease,
		filter 0.15s ease,
		bottom 150ms ease;
}

.viewport-rail .tick,
.viewport-rail .tick-label {
	transition:
		left 0.3s ease,
		opacity 0.15s ease;
}

.viewport-rail .now-marker {
	transition: left 0.9s linear;
}

@media (max-width: 768px) {
	.frame {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
	}

	.viewport-rail {
		min-width: 920px;
	}

	[data-zoom-level='day'] .block,
	[data-zoom-level='week'] .block {
		min-height: 32px;
	}

	.timeline-empty-state {
		width: min(88%, 380px);
		left: 44%;
	}
}

:root[data-contrast='high'] body {
	background:
		radial-gradient(
			circle at 15% 10%,
			rgba(76, 201, 255, 0.12),
			transparent 40%
		),
		linear-gradient(180deg, #000 0%, #111 100%);
}

:root[data-contrast='high'] .frame {
	background: #000;
	border-color: #fff;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

:root[data-contrast='high'] .rail {
	background: #101010;
	border-color: #fff;
}

:root[data-contrast='high'] .baseline,
:root[data-contrast='high'] .tick {
	background: #fff;
}

:root[data-contrast='high'] .tick-label {
	color: #fff;
}

:root[data-contrast='high'] .timeline-empty-state {
	background: #000;
	border-color: #fff;
}

:root[data-contrast='high'] .timeline-empty-state__title,
:root[data-contrast='high'] .timeline-empty-state__copy {
	color: #fff;
}

:root[data-contrast='high'] .timeline-empty-state__button {
	background: #fff;
	color: #000;
	border-color: #fff;
}