@layer reset, tokens, base, layout, components, utilities, overrides;

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html,
	body {
		margin: 0;
	}
}

@layer tokens {
	:root {
		color-scheme: light;
		--font-sans: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
		--font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

		--color-bg: oklch(0.97 0.01 248);
		--color-surface: oklch(1 0 0);
		--color-text: oklch(0.24 0.01 256);
		--color-text-muted: oklch(0.46 0.016 252);
		--color-border: oklch(0.86 0.01 248);
		--color-accent: oklch(0.54 0.11 258);
		--color-accent-contrast: oklch(0.99 0 0);
		--color-danger: oklch(0.54 0.18 24);
		--color-success: oklch(0.56 0.14 150);

		--space-2: 0.5rem;
		--space-3: 0.75rem;
		--space-4: 1rem;
		--space-5: 1.5rem;
		--space-6: 2rem;
		--space-7: 2.75rem;

		--radius-sm: 0.375rem;
		--radius-md: 0.5rem;
		--radius-lg: 0.85rem;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			color-scheme: dark;
			--color-bg: oklch(0.17 0.008 252);
			--color-surface: oklch(0.21 0.01 252);
			--color-text: oklch(0.92 0.012 252);
			--color-text-muted: oklch(0.74 0.014 252);
			--color-border: oklch(0.36 0.012 252);
			--color-accent: oklch(0.69 0.1 258);
			--color-accent-contrast: oklch(0.2 0.008 252);
			--color-danger: oklch(0.64 0.16 26);
			--color-success: oklch(0.69 0.13 151);
		}
	}
}

@layer base {
	body {
		min-height: 100svh;
		background: var(--color-bg);
		color: var(--color-text);
		font-family: var(--font-sans);
		line-height: 1.5;
		text-wrap: pretty;
	}

	h1,
	h2,
	h3,
	p {
		margin: 0;
	}

	h2 {
		font-size: clamp(1.1rem, 0.6vw + 1rem, 1.4rem);
	}

	input,
	select,
	textarea,
	button {
		font: inherit;
	}

	input,
	select,
	textarea {
		inline-size: 100%;
		padding: 0.55rem 0.7rem;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		background: var(--color-surface);
		color: var(--color-text);
	}

	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible,
	button:focus-visible {
		outline: 2px solid color-mix(in oklab, var(--color-accent), white 30%);
		outline-offset: 2px;
	}

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

	code {
		font-family: var(--font-mono);
	}

	strong {
		font-weight: 600;
	}
}

@layer layout {
	.page {
		inline-size: min(100% - 2rem, 54rem);
		margin-inline: auto;
		padding-block: clamp(var(--space-5), 4vw, var(--space-6));
	}

	.page-narrow {
		inline-size: min(100% - 2rem, 34rem);
		padding-block: clamp(var(--space-6), 8vw, var(--space-7));
	}

	.admin-shell {
		inline-size: min(100% - 2rem, 74rem);
	}

	.cluster {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
		align-items: center;
	}

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

	.stack-tight > * + * {
		margin-block-start: var(--space-2);
	}

	.form-grid {
		display: grid;
		gap: var(--space-3);
	}

	.inline-form {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
		align-items: center;
	}

	.inline-form > * {
		flex: 1 1 10rem;
	}
}

@layer components {
	.app-body {
		background:
			radial-gradient(circle at 0 0, color-mix(in oklab, var(--color-accent), transparent 87%) 0%, transparent 52%),
			var(--color-bg);
	}

	.card {
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		padding: clamp(var(--space-4), 2vw + 0.5rem, var(--space-6));
		box-shadow:
			0 1px 0 color-mix(in oklab, var(--color-border), transparent 35%),
			0 10px 28px color-mix(in oklab, var(--color-text), transparent 92%);
	}

	.title {
		margin: 0 0 var(--space-2);
		font-size: clamp(1.5rem, 1.5vw + 1rem, 2.3rem);
		font-weight: 600;
		letter-spacing: -0.01em;
		line-height: 1.15;
		text-wrap: balance;
	}

	.subtitle {
		margin: 0 0 var(--space-5);
		color: var(--color-text-muted);
		max-inline-size: 62ch;
	}

	.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.55rem 0.95rem;
		border: 1px solid var(--color-accent);
		border-radius: var(--radius-sm);
		background: var(--color-accent);
		color: var(--color-accent-contrast);
		cursor: pointer;
		transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
		font-weight: 550;
	}

	a.button {
		text-decoration: none;
	}

	.button:hover,
	.button:focus-visible {
		background: color-mix(in oklab, var(--color-accent), var(--color-bg) 12%);
		border-color: color-mix(in oklab, var(--color-accent), var(--color-bg) 12%);
	}

	.button:active {
		transform: translateY(1px);
	}

	.button-secondary {
		background: color-mix(in oklab, var(--color-accent), var(--color-bg) 72%);
		color: var(--color-text);
	}

	.button-ghost {
		background: transparent;
		color: var(--color-text);
		border-color: var(--color-border);
	}

	.board-root {
		display: grid;
		gap: var(--space-5);
	}

	.board-root[data-loading='true'] {
		opacity: 0.65;
	}

	.board-sheet-header {
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--space-4);
		background: color-mix(in oklab, var(--color-surface), var(--color-accent) 3%);
	}

	.board-sheet-header h2 {
		font-size: 1.12rem;
		font-weight: 640;
	}

	.board-sheet-header p {
		margin-block-start: 0.35rem;
		color: var(--color-text-muted);
		font-size: 0.95rem;
	}

	.board-group {
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--space-4);
		background: var(--color-surface);
	}

	.board-group-heading h3 {
		font-size: 1rem;
		font-weight: 620;
	}

	.board-group-note {
		padding: 0.35rem 0.5rem;
		border-radius: var(--radius-sm);
		background: color-mix(in oklab, var(--color-accent), var(--color-surface) 78%);
		color: color-mix(in oklab, var(--color-text), var(--color-text-muted) 30%);
		font-size: 0.89rem;
	}

	.board-columns {
		display: grid;
		gap: var(--space-3);
		grid-template-columns: minmax(0, 1fr);
	}

	.board-column {
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		background: color-mix(in oklab, var(--color-surface), var(--color-bg) 12%);
	}

	.board-column h4 {
		padding: var(--space-3);
		border-block-end: 1px solid var(--color-border);
		font-size: 0.92rem;
		font-weight: 620;
	}

	.board-table {
		inline-size: 100%;
		border-collapse: collapse;
		table-layout: fixed;
	}

	.board-table th,
	.board-table td {
		padding: 0.45rem 0.5rem;
		border-block-end: 1px solid var(--color-border);
		font-size: 0.86rem;
		vertical-align: top;
		text-align: start;
	}

	.board-table thead th {
		color: var(--color-text-muted);
		font-size: 0.76rem;
		font-weight: 580;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		background: color-mix(in oklab, var(--color-surface), var(--color-bg) 24%);
	}

	.board-table tbody tr:last-child th,
	.board-table tbody tr:last-child td {
		border-block-end: none;
	}

	.board-position {
		inline-size: 4rem;
		font-weight: 600;
	}

	.board-table select {
		min-inline-size: 10.5rem;
	}

	.board-status-cell {
		inline-size: 8.25rem;
	}

	.board-notify {
		display: block;
		margin-block-start: 0.2rem;
		color: var(--color-text-muted);
		font-size: 0.76rem;
	}

	.status-strip {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	.status-chip {
		display: inline-flex;
		align-items: center;
		padding: 0.22rem 0.56rem;
		border-radius: 100vmax;
		border: 1px solid var(--color-border);
		background: color-mix(in oklab, var(--color-surface), var(--color-border) 12%);
		font-size: 0.82rem;
		font-weight: 550;
	}

	.status-chip.is-accepted {
		border-color: color-mix(in oklab, var(--color-success), var(--color-border) 50%);
		background: color-mix(in oklab, var(--color-success), var(--color-surface) 84%);
	}

	.status-chip.is-declined {
		border-color: color-mix(in oklab, var(--color-danger), var(--color-border) 50%);
		background: color-mix(in oklab, var(--color-danger), var(--color-surface) 84%);
	}

	.status-chip.is-pending {
		border-color: color-mix(in oklab, var(--color-accent), var(--color-border) 60%);
		background: color-mix(in oklab, var(--color-accent), var(--color-surface) 88%);
	}

	.form-feedback,
	.form-error {
		min-block-size: 1.2lh;
		color: var(--color-text-muted);
		font-size: 0.92rem;
	}

	.form-feedback[data-tone='danger'],
	.form-error[data-tone='danger'] {
		color: var(--color-danger);
	}

	.form-feedback[data-tone='success'],
	.form-error[data-tone='success'] {
		color: var(--color-success);
	}

	.field-label {
		font-weight: 560;
	}

	.admin-login-card {
		padding-block: var(--space-6);
	}

	.helper-card {
		padding-block: var(--space-6);
	}

	.detail-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: var(--space-3);
		padding: var(--space-3);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		background: color-mix(in oklab, var(--color-surface), var(--color-accent) 2%);
	}

	.detail-grid p {
		color: var(--color-text-muted);
		font-size: 0.95rem;
	}

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

	.output {
		min-block-size: 1.5lh;
		font-family: var(--font-mono);
		font-size: 0.925rem;
		color: var(--color-text-muted);
		overflow-wrap: anywhere;
	}

	@media (width >= 48rem) {
		.card {
			padding: var(--space-6);
		}
	}

	@media (width >= 58rem) {
		.board-columns {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.board-columns.is-three-columns {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}

@layer utilities {
	.stack > * + * {
		margin-block-start: var(--space-3);
	}
}

@layer overrides {}