:root {
	color-scheme: light dark;

	--accent-500: oklch(0.65 0.15 260);
	--accent-600: oklch(0.55 0.17 260);
	--accent-ring: oklch(0.55 0.17 260 / 0.15);

	--success-500: oklch(0.65 0.16 145);
	--success-600: oklch(0.55 0.18 145);

	--warning-500: oklch(0.75 0.16 100);
	--warning-600: oklch(0.65 0.18 100);

	--danger-500: oklch(0.6 0.22 30);
	--danger-600: oklch(0.5 0.22 30);

	--border-light: rgba(0, 0, 0, 0.35);
	--border-dark: rgba(255, 255, 255, 0.25);
}

* {
	box-sizing: border-box;
	margin: 0;
	/* padding: 0; */
}

body {
	background-color: Canvas;
	color: CanvasText;

	font-family: system-ui, sans-serif;
	font-size: 1.5rem;
	line-height: 1.5;
}

input {
	min-inline-size: 0;
	padding: 0.5rem 0.75rem;

	background-color: transparent;
	border: 1px solid var(--border-light);
	color: inherit;

	font: inherit;

	border-radius: 0.5rem;

	transition:
		border-color 120ms ease,
		box-shadow 120ms ease,
		outline-color 120ms ease;

	::placeholder {
		opacity: 0.6;
	}

	@media (prefers-color-scheme: dark) {
		border: 1px solid var(--border-dark);
	}

	&[type="checkbox"] {
		block-size: 1.5rem;
		inline-size: 1.5rem;
	}
}

button {
	padding: 0.5rem 0.9rem;

	background-color: var(--accent-500);
	color: white;

	font: inherit;
	font-weight: 600;
	cursor: pointer;

	border: none;
	border-radius: 0.5rem;

	&:hover:not(:disabled) {
		background-color: var(--accent-600);
	}

	&:active {
		transform: scale(0.97);
	}

	&:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}
}

.selected-btn {
	background-color: transparent;
	color: inherit;

	border: 1px solid var(--border-light);

	font-weight: 500;

	padding: 0.25rem 0.75rem;

	transform: none;

	@media (prefers-color-scheme: dark) {
		border-color: var(--border-dark);
	}
}

.delete-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-inline-start: auto;

	background-color: var(--danger-500);
	color: white;

	font-weight: 600;

	border: none;

	cursor: pointer;

	transition:
		background-color 120ms ease,
		transform 80ms ease;

	&:hover:not(:disabled) {
		background-color: var(--danger-600);
	}

	&:active {
		transform: scale(0.95);
	}
}

.save-btn {
	background-color: var(--success-500);

	&:hover:not(:disabled) {
		background-color: var(--success-600);
	}
}

summary {
	cursor: pointer;

	&:hover {
		opacity: 0.75;
	}
}

.timeline-wrapper {
    padding: 1.5rem;
		
    background: rgba(255,255,255,0.12);
		
    backdrop-filter: blur(6px);
		
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 0.75rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 10px 30px rgba(0,0,0,0.25);

		font-size: 1.1rem;
}

.inner {
	--inner-max-width: 32rem;
	--inner-gutter: 3rem;
	--inner-padding-block: 3rem;

	inline-size: min(100% - var(--inner-gutter), var(--inner-max-width));
	margin-inline: auto;
	padding-block: var(--inner-padding-block);
}

.flow > * + * {
	--flow-size: 1rem;

	margin-block-start: var(--flow-size);
}

/* Utility Classes */
.width-100 {
	inline-size: 100%;
}

.min-height-10 {
	min-block-size: 10rem;
}

.grid {
	display: grid;
}

.flex {
	display: flex;
}

.block {
	display: block;
}

.space-between {
	justify-content: space-between;
}

.justify-content-center {
	justify-content: center;
}

.align-items-center {
	align-items: center;
}

.grid-template-columns-4 {
	@media (width > 560px) {
		grid-template-columns: repeat(4, 1fr);
	}
}

.gap-0-5 {
	gap: 0.5rem;
}

.gap-1 {
	gap: 1rem;
}

.flex-shrink-0 {
	flex-shrink: 0;
}

.margin-left-auto {
	margin-inline-start: auto;
}

.padding-0 {
	padding: 0;
}

.padding-inline-start-1-5 {
	padding-inline-start: 1.5rem;
}

.padding-block-1 {
	padding-block: 1rem;
}

.padding-block-end-1 {
	padding-block-end: 1rem;
}

.text-align-center {
	text-align: center;
}

.list-style-none {
	list-style: none;
}

.line-through {
	text-decoration: line-through;
}

.opacity-60 {
	opacity: 0.6;
}

.border-bottom-1 {
	border-bottom: 1px solid;
}

.font-size-small {
	font-size: 0.9rem;
}

.cursor-pointer {
	cursor: pointer;
}

.user-select-none {
	user-select: none;
}

.text-success {
	color: var(--success-500);

	&:hover {
		color: var(--success-600);
	}
}

.text-warning {
	color: var(--warning-500);

	&:hover {
		color: var(--warning-600);
	}
}

.text-danger {
	color: var(--danger-500);

	&:hover {
		color: var(--danger-600);
	}
}

.bg-success {
	background-color: var(--success-500);

	&:hover {
		background-color: var(--success-600);
	}
}

.bg-warning {
	background-color: var(--warning-500);

	&:hover {
		background-color: var(--warning-600);
	}
}

.bg-danger {
	background-color: var(--danger-500);

	&:hover {
		background-color: var(--danger-600);
	}
}