@layer base, layout, components;

@layer base {
	:root {
		color-scheme: light;
		--page: oklch(0.985 0.004 250);
		--panel: oklch(1 0 0);
		--panel-muted: oklch(0.975 0.004 250);
		--text: oklch(0.2 0.018 250);
		--muted: oklch(0.58 0.025 260);
		--line: oklch(0.92 0.006 250);
		--strong-line: oklch(0.86 0.01 250);
		--black: oklch(0.16 0.012 250);
		--error: oklch(0.62 0.18 29);
		--warning: oklch(0.72 0.15 75);
		--info: oklch(0.62 0.18 265);
		--open: oklch(0.62 0.14 45);
		--acknowledged: oklch(0.62 0.16 265);
		--resolved: oklch(0.65 0.15 150);
		--source-0: oklch(0.62 0.17 265);
		--source-1: oklch(0.66 0.14 230);
		--source-2: oklch(0.64 0.17 345);
		--source-3: oklch(0.62 0.14 55);
		--source-4: oklch(0.65 0.14 150);
		--source-5: oklch(0.63 0.16 290);
		font-family: Inter, ui-sans-serif, system-ui, sans-serif;
	}

	* {
		box-sizing: border-box;
	}

	html {
		min-block-size: 100%;
		background: var(--page);
	}

	body {
		min-block-size: 100vh;
		margin: 0;
		background: var(--page);
		color: var(--text);
		font-size: 14px;
	}

	button,
	input {
		font: inherit;
	}

	button {
		color: inherit;
	}

	input[type="checkbox"],
	input[type="radio"] {
		accent-color: var(--black);
	}
}

@layer layout {
	.log-app {
		display: grid;
		grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
		min-block-size: 100vh;
	}

	.filter-rail {
		position: sticky;
		inset-block-start: 0;
		display: grid;
		grid-template-rows: auto 1fr auto;
		block-size: 100vh;
		border-inline-end: 1px solid var(--line);
		background: var(--panel);
		overflow-y: auto;
	}

	.log-workspace {
		min-inline-size: 0;
		padding: 1.25rem 1.5rem 0;
	}

	.log-header {
		display: grid;
		grid-template-columns: minmax(12rem, 1fr) minmax(24rem, auto);
		align-items: start;
		gap: 1rem;
		margin-block-end: 1.25rem;
	}

	.toolbar {
		display: flex;
		justify-content: end;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.metric-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(12rem, 1fr));
		gap: 0.75rem;
		margin-block-end: 1rem;
	}

	.log-table-shell {
		margin-inline: -1.5rem;
		overflow-x: auto;
		border-block-start: 1px solid var(--line);
		background: var(--panel);
	}

	.login-page {
		display: grid;
		place-items: center;
		min-block-size: 100vh;
		padding: 1rem;
	}

	@media (max-width: 64rem) {
		.log-app {
			grid-template-columns: 1fr;
		}

		.filter-rail {
			position: static;
			block-size: auto;
			border-inline-end: 0;
			border-block-end: 1px solid var(--line);
		}

		.filter-form {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1rem;
		}

		.filter-heading,
		.filter-submit {
			grid-column: 1 / -1;
		}

		.log-header {
			grid-template-columns: 1fr;
		}

		.toolbar {
			justify-content: start;
		}

		.metric-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 40rem) {
		.log-workspace {
			padding-inline: 1rem;
		}

		.filter-form,
		.metric-grid {
			grid-template-columns: 1fr;
		}

		.log-table-shell {
			margin-inline: -1rem;
		}
	}
}

@layer components {
	.login-card.api-key-card {
		inline-size: min(100%, 42rem);
		max-inline-size: 42rem;
	}

	.api-key-card details {
		display: block;
		min-inline-size: 0;
	}

	.api-key-card summary {
		cursor: pointer;
		padding-block: 0.75rem;
		font-weight: 700;
	}

	.api-key-card label {
		display: block;
		margin-block: 0.75rem 0.5rem;
	}

	.api-key-card input {
		inline-size: 100%;
		min-inline-size: 0;
		padding: 0.75rem;
		border: 1px solid var(--strong-line);
		border-radius: 0.5rem;
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	}

	.api-key-card :is(a, summary, button, input):focus-visible {
		outline: 3px solid var(--info);
		outline-offset: 3px;
	}

	.api-key-card [role="status"] {
		min-block-size: 1.5em;
	}

	.toolbar a.icon-button {
		color: var(--text);
		text-decoration: none;
	}

	.brand-block {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 0.75rem;
		padding: 1rem 0.875rem;
	}

	.brand-mark {
		display: grid;
		place-items: center;
		inline-size: 2rem;
		aspect-ratio: 1;
		border-radius: 0.45rem;
		background: var(--black);
		color: white;
		font-weight: 800;
	}

	.environment-pill {
		border: 1px solid oklch(0.88 0.08 150);
		border-radius: 0.4rem;
		background: oklch(0.96 0.04 150);
		color: oklch(0.48 0.14 150);
		font-size: 0.8rem;
		font-weight: 700;
		padding: 0.2rem 0.45rem;
	}

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

	.filter-heading {
		margin: 0;
		padding: 0.5rem 0.875rem 0.85rem;
		color: var(--muted);
		font-size: 0.75rem;
		font-weight: 800;
		text-transform: uppercase;
	}

	.filter-group {
		border-block-start: 1px solid var(--line);
		padding: 1rem 0.875rem;
	}

	.filter-group h2 {
		margin: 0 0 0.65rem;
		color: oklch(0.38 0.018 250);
		font-size: 0.82rem;
	}

	.filter-empty {
		margin: 0;
		color: var(--muted);
	}

	.filter-option {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.55rem;
		min-block-size: 2rem;
		color: oklch(0.28 0.018 250);
		font-weight: 650;
	}

	.filter-option input {
		inline-size: 1rem;
		block-size: 1rem;
		margin: 0;
	}

	.filter-option output {
		color: var(--muted);
		font-variant-numeric: tabular-nums;
	}

	.filter-submit,
	.login-form button {
		border: 0;
		border-radius: 0.45rem;
		background: var(--black);
		color: white;
		cursor: pointer;
		font-weight: 750;
		padding: 0.65rem 0.8rem;
	}

	.filter-submit {
		margin: 0.25rem 0.875rem 1rem;
		inline-size: calc(100% - 1.75rem);
	}

	.login-form {
		display: grid;
		gap: 0.5rem;
	}

	.login-card {
		display: grid;
		gap: 1.5rem;
		inline-size: min(100%, 28rem);
		border: 1px solid var(--line);
		border-radius: 0.65rem;
		background: var(--panel);
		padding: clamp(1.5rem, 6vw, 2.5rem);
	}

	.login-card h1 {
		margin: 0;
		font-size: 1.8rem;
		line-height: 1.15;
	}

	.eyebrow,
	.login-copy {
		margin: 0;
		color: var(--muted);
	}

	.eyebrow {
		margin-block-end: 0.5rem;
		font-size: 0.78rem;
		font-weight: 850;
		text-transform: uppercase;
	}

	.login-copy {
		margin-block-start: 0.5rem;
	}

	.login-form label,
	.checkbox-row {
		font-weight: 700;
	}

	.login-form input:not([type="checkbox"]) {
		inline-size: 100%;
		border: 1px solid var(--line);
		border-radius: 0.45rem;
		background: var(--panel-muted);
		color: var(--text);
		padding: 0.62rem;
	}

	.checkbox-row {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.validation-summary,
	.field-validation {
		color: var(--error);
		font-size: 0.82rem;
	}

	.rail-foot {
		margin: 0;
		border-block-start: 1px solid var(--line);
		padding: 0.85rem;
		color: var(--muted);
		font-size: 0.86rem;
	}

	.log-header h1 {
		margin: 0;
		font-size: 1.35rem;
		line-height: 1.2;
	}

	.log-header p {
		margin: 0.3rem 0 0;
		color: var(--muted);
	}

	.search-box {
		inline-size: min(22rem, 100%);
		border: 1px solid var(--line);
		border-radius: 0.65rem;
		background: var(--panel);
		color: var(--text);
		padding: 0.72rem 0.9rem;
	}

	.segmented-control {
		display: flex;
		border-radius: 0.65rem;
		background: var(--panel-muted);
		padding: 0.25rem;
	}

	.segmented-control label {
		display: grid;
	}

	.segmented-control input {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		opacity: 0;
	}

	.segmented-control span {
		border-radius: 0.5rem;
		color: var(--muted);
		font-weight: 800;
		padding: 0.48rem 0.85rem;
	}

	.segmented-control input:checked + span {
		background: var(--panel);
		color: var(--text);
		box-shadow: 0 0.2rem 0.6rem oklch(0.72 0.02 250 / 0.28);
	}

	.live-toggle {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		color: oklch(0.36 0.018 250);
		font-weight: 750;
	}

	.icon-button {
		border: 1px solid var(--line);
		border-radius: 0.65rem;
		background: var(--panel);
		cursor: pointer;
		font-weight: 750;
		padding: 0.72rem 0.9rem;
	}

	.metric-card {
		min-block-size: 7rem;
		border: 1px solid var(--line);
		border-radius: 0.5rem;
		background: var(--panel);
		padding: 1rem;
	}

	.metric-label {
		display: flex;
		align-items: center;
		gap: 0.45rem;
		color: var(--muted);
		font-weight: 800;
	}

	.metric-card strong {
		display: block;
		margin-block-start: 0.55rem;
		font-size: 1.75rem;
		line-height: 1;
	}

	.sparkline {
		display: flex;
		align-items: end;
		gap: 0.22rem;
		block-size: 2.1rem;
		margin-block-start: 0.7rem;
	}

	.spark-bar {
		inline-size: 0.22rem;
		min-block-size: 0.35rem;
		border-radius: 999rem;
		background: oklch(0.88 0.01 250);
	}

	.spark-bar.is-error {
		background: oklch(0.78 0.11 29);
	}

	.log-table {
		inline-size: 100%;
		min-inline-size: 60rem;
		border-collapse: collapse;
	}

	.log-table th,
	.log-table td {
		border-block-end: 1px solid var(--line);
		padding: 0.82rem 1rem;
		text-align: start;
		vertical-align: middle;
	}

	.log-table th {
		background: var(--panel-muted);
		color: var(--muted);
		font-size: 0.75rem;
		text-transform: uppercase;
	}

	.log-table td {
		color: oklch(0.26 0.02 250);
		font-weight: 600;
	}

	.mono-cell {
		color: var(--muted);
		font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
		font-variant-numeric: tabular-nums;
	}

	.level-pill {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		border-radius: 0.4rem;
		font-size: 0.76rem;
		font-weight: 900;
		padding: 0.25rem 0.55rem;
	}

	.level-pill span,
	.severity-dot,
	.status-dot,
	.color-dot {
		display: inline-block;
		inline-size: 0.48rem;
		aspect-ratio: 1;
		border-radius: 50%;
		flex: 0 0 auto;
	}

	.level-error {
		background: oklch(0.96 0.03 29);
		color: oklch(0.48 0.17 29);
	}

	.level-warning {
		background: oklch(0.97 0.04 75);
		color: oklch(0.48 0.12 65);
	}

	.level-information {
		background: oklch(0.96 0.035 265);
		color: oklch(0.5 0.18 265);
	}

	.level-error span,
	.severity-error {
		background: var(--error);
	}

	.level-warning span,
	.severity-warning {
		background: var(--warning);
	}

	.level-information span,
	.severity-information {
		background: var(--info);
	}

	.severity-total {
		background: var(--black);
	}

	.status-open {
		background: var(--open);
	}

	.status-acknowledged {
		background: var(--acknowledged);
	}

	.status-resolved {
		background: var(--resolved);
	}

	.color-0 {
		background: var(--source-0);
	}

	.color-1 {
		background: var(--source-1);
	}

	.color-2 {
		background: var(--source-2);
	}

	.color-3 {
		background: var(--source-3);
	}

	.color-4 {
		background: var(--source-4);
	}

	.color-5 {
		background: var(--source-5);
	}

	.empty-state {
		display: grid;
		place-items: center;
		gap: 0.35rem;
		min-block-size: 12rem;
		color: var(--muted);
		text-align: center;
	}

	.empty-state strong {
		color: var(--text);
		font-size: 1rem;
	}
}