:root {
	color-scheme: light dark;
	--bg: #f6f7f5;
	--surface: #ffffff;
	--text: #1f2421;
	--muted: #5d665f;
	--line: #d9ded9;
	--needs: #c2570c;
	--danger: #b3372f;

	/* Solid fills carry white text, so they are dark enough to read it at a distance */
	--needs-fill: #c2570c;
	--running-fill: #b3372f;
	--idle-fill: #2f7a4d;
	--background-fill: #3a6ea5;
	--stale-fill: #6b7280;
	--on-fill: #ffffff;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #151816;
		--surface: #1e2220;
		--text: #e8ece9;
		--muted: #9aa49c;
		--line: #333a36;
		--needs: #f59e42;
		--danger: #f07a72;
		--needs-fill: #d0630f;
		--running-fill: #c4403a;
		--idle-fill: #2f8a56;
		--background-fill: #3f78b5;
		--stale-fill: #5d6671;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font:
		16px/1.4 system-ui,
		-apple-system,
		'Segoe UI',
		Roboto,
		sans-serif;
}

.bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid var(--line);
}

h1 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
}

.version {
	margin-left: 6px;
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 400;
}

main {
	max-width: 960px;
	margin: 0 auto;
	padding: 16px;
}

.pill {
	padding: 2px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.8rem;
	color: var(--muted);
}

.usage {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.usage-tile {
	padding: 12px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 8px;
}

.usage-label {
	color: var(--muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.usage-value {
	font-size: 1.5rem;
	font-weight: 700;
}

.usage-unit {
	margin-left: 4px;
	color: var(--muted);
	font-size: 0.9rem;
	font-weight: 400;
}

.usage-sub {
	color: var(--muted);
	font-size: 0.85rem;
}

.usage-note {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--muted);
	font-size: 0.8rem;
}

.summary {
	margin-bottom: 16px;
	font-size: 1.4rem;
	font-weight: 600;
}

.summary.attention {
	color: var(--needs);
}

.sessions {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}

.card {
	--state-fill: var(--stale-fill);
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 8px;
}

.card.needs-input {
	--state-fill: var(--needs-fill);
}

.card.running {
	--state-fill: var(--running-fill);
}

.card.idle {
	--state-fill: var(--idle-fill);
}

.card.background {
	--state-fill: var(--background-fill);
}

/* Last, so a quiet session is grey whatever state it was running in */
.card.stale {
	--state-fill: var(--stale-fill);
}

.card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	background: var(--state-fill);
	color: var(--on-fill);
}

.status {
	font-size: 1.2rem;
	font-weight: 700;
}

.age {
	font-size: 0.85rem;
	white-space: nowrap;
}

.card-body {
	padding: 12px 14px 14px;
}

.project {
	font-size: 1.1rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.where {
	color: var(--muted);
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

.detail {
	margin-top: 4px;
	color: var(--muted);
	font-size: 0.85rem;
}

.agents {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 0.85rem;
}

.agent-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--needs-fill);
}

.agent-dot.running {
	background: var(--running-fill);
}

@media (prefers-reduced-motion: no-preference) {
	.agent-dot.running {
		animation: pulse 1.6s ease-in-out infinite;
	}
}

@keyframes pulse {
	50% {
		opacity: 0.35;
	}
}

.agents-label {
	margin-left: 4px;
	color: var(--muted);
}

.agents-needs {
	color: var(--needs);
	font-weight: 600;
}

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

.key-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 360px;
}

.key-form input,
.key-form button {
	padding: 8px 10px;
	font: inherit;
	color: inherit;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 6px;
}

.key-form button {
	cursor: pointer;
}

.error {
	margin: 0;
	color: var(--danger);
}

[hidden] {
	display: none !important;
}