:root {
	--navy: #001429;
	--blue: #0f57a7;
	--yellow: #ffd028;
	--bg: #f5f7fa;
	--surface: #ffffff;
	--text: #0d1b2a;
	--muted: #5b6878;
	--line: #e3e8ef;
	--accent: var(--blue);
	--done: #1f7a4d;
	--done-bg: #e6f4ec;
	--open: #8a5a00;
	--open-bg: #fff4d6;
	--todo: #45505e;
	--todo-bg: #eef1f5;
	--late: #b42318;
	--late-bg: #fdecea;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0b1420;
		--surface: #111d2c;
		--text: #e6edf5;
		--muted: #93a1b3;
		--line: #22324a;
		--accent: #6ea8ec;
		--done: #6fd3a0;
		--done-bg: #10301f;
		--open: #ffd36b;
		--open-bg: #33290d;
		--todo: #b8c3d1;
		--todo-bg: #1b2a3d;
		--late: #ff8a80;
		--late-bg: #3a1614;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 14px/1.5 Inter, system-ui, sans-serif;
}

h1, h2, .wordmark, .kpi strong { font-family: Lexend, Inter, sans-serif; font-weight: 500; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0 0 12px; }
button, select, input { font: inherit; color: inherit; }
a { color: var(--accent); }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

.bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 24px;
	background: var(--navy);
	color: #fff;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.wordmark { font-size: 20px; letter-spacing: -0.01em; }
.product { font-size: 13px; color: var(--yellow); text-transform: uppercase; letter-spacing: 0.08em; }
.who { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 16px;
	min-width: 0;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.signin { display: grid; place-items: center; padding: 64px 16px; }
.signin form { width: min(380px, 100%); display: grid; gap: 14px; padding: 24px; }
.signin p { margin: 0; }
label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
input, select {
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface);
	font-size: 14px;
}
input:focus-visible, select:focus-visible, button:focus-visible, tr[tabindex]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.primary {
	padding: 10px 14px;
	border: 0;
	border-radius: 6px;
	background: var(--blue);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}
.primary:disabled { opacity: 0.6; cursor: default; }
.error { color: var(--late); margin: 0; }
.banner { background: var(--late-bg); padding: 10px 14px; border-radius: 8px; }

.app { max-width: 1280px; margin: 0 auto; padding: 20px 24px 48px; display: grid; gap: 16px; }

.filters { display: flex; flex-wrap: wrap; gap: 12px; }
.filters label { min-width: 150px; flex: 1 1 150px; }

.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.kpi span { display: block; font-size: 12px; color: var(--muted); }
.kpi strong { display: block; font-size: 26px; line-height: 1.2; margin-top: 2px; }
.kpi.late strong { color: var(--late); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.table-wrap { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid th { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid tbody tr[tabindex] { cursor: pointer; }
.grid tbody tr[tabindex]:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.grid tbody tr:last-child td { border-bottom: 0; }
.tasks td { white-space: nowrap; }
.tasks td.title { white-space: normal; min-width: 260px; }
.sub { display: block; font-size: 12px; color: var(--muted); }
.empty { color: var(--muted); margin: 12px 0 0; }

.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill.done { color: var(--done); background: var(--done-bg); }
.pill.in_progress { color: var(--open); background: var(--open-bg); }
.pill.todo { color: var(--todo); background: var(--todo-bg); }
.pill.overdue { color: var(--late); background: var(--late-bg); }
.agent { font-size: 11px; color: var(--accent); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 6px; }

dialog {
	margin: 0 0 0 auto;
	width: min(560px, 100vw);
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	border: 0;
	border-left: 1px solid var(--line);
	padding: 0;
	background: var(--surface);
	color: var(--text);
}
dialog::backdrop { background: rgb(0 20 41 / 0.45); }
.d-head {
	position: sticky;
	top: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}
.d-head h2 { margin: 0; font-size: 18px; }
.icon { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
.d-body { padding: 16px 20px 32px; display: grid; gap: 20px; }
.d-body h3 { font: 500 12px/1.4 Inter, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.note { background: var(--done-bg); border-radius: 8px; padding: 10px 12px; }
.json {
	margin: 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--todo-bg);
	font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.list li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.thread li { display: block; border-left: 2px solid var(--line); padding-left: 10px; }
.thread .meta { font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
	.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.bar { padding: 12px 16px; }
	.app { padding: 16px 16px 40px; }
	.filters label { min-width: 0; flex-basis: calc(50% - 6px); }
}