:root {
	--bg: #f4f5f7;
	--surface: #fff;
	--text: #18202c;
	--muted: #5f6877;
	--line: #e1e4e9;
	--accent: #1f6f5c;
	--accent-hover: #175747;
	--accent-soft: #e9f4ef;
	--danger: #b42318;
	--danger-soft: #fdf0ee;
	--radius: 10px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	/* Onest — гротеск с хорошей кириллицей (fragments.html); system-ui — пока шрифт грузится */
	font: 16px/1.5 "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--text);
	background: var(--bg);
}
::selection { background: var(--accent-soft); }

nav {
	display: flex;
	gap: 24px;
	align-items: center;
	padding: 0 24px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}
nav strong { font-size: 17px; letter-spacing: -0.01em; margin-right: 8px; }
nav a {
	padding: 16px 0 13px;
	border-bottom: 3px solid transparent;
	color: var(--muted);
	text-decoration: none;
	font-weight: 500;
}
nav a:hover { color: var(--text); }
nav a.active { color: var(--text); border-bottom-color: var(--accent); }

main { max-width: 960px; margin: 0 auto; padding: 32px 24px 48px; }

h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 20px; }
h2 { font-size: 18px; line-height: 1.25; margin: 32px 0 12px; }

/* Рабочая область — одна белая панель на фоне страницы */
.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.panel > form.inline { padding: 16px; border-bottom: 1px solid var(--line); }

form.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
main > form.inline { margin-bottom: 16px; }
label { font-weight: 500; }

input {
	font: inherit;
	height: 40px;
	padding: 0 12px;
	color: inherit;
	background: var(--surface);
	border: 1px solid #cdd2d9;
	border-radius: 8px;
	min-width: 0;
}
input::placeholder { color: #8a92a0; }
input:hover { border-color: #aeb5c0; }
input[name="name"], input[name="description"] { flex: 1 1 140px; }
/* Своя ширина поля (~20 символов) не даёт колонке таблицы сжаться на телефоне; flex всё равно
   растягивает поле на всю ячейку на широком экране */
input[name="description"] { width: 8em; }

button {
	font: inherit;
	font-weight: 500;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--accent);
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	cursor: pointer;
	transition: background-color 120ms ease-out, color 120ms ease-out;
}
button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Стоп — главное действие идущей строки, но не авария: контурная кнопка, заливка по наведению */
button.stop { background: var(--surface); border-color: var(--danger); color: var(--danger); }
button.stop:hover { background: var(--danger); color: #fff; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 13px; font-weight: 600; color: var(--muted); background: #fafbfc; }
tbody tr:last-child td, tfoot tr:last-child th { border-bottom: 0; }
tfoot th { font-size: 16px; color: var(--text); background: var(--surface); border-top: 1px solid var(--line); }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.zero { color: var(--muted); }
table.totals { max-width: 480px; }
.panel.totals { max-width: 480px; }
/* Широкая таблица записей на телефоне прокручивается сама, а не растягивает страницу */
.table-wrap { overflow-x: auto; }

/* Сотрудники: имя — первая колонка, таймер — вторая */
.employees td:first-child { font-weight: 600; width: 30%; }
.employees tr.is-running td { background: var(--accent-soft); }
.running { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.status { font-size: 13px; font-weight: 600; color: var(--accent); }
.elapsed { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; letter-spacing: 0.01em; }
.task { flex-basis: 100%; }
small, .hint, .empty { color: var(--muted); }
.hint { font-size: 14px; margin: 12px 0 0; }
.empty { padding: 16px; margin: 0; }

.flash { padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; border: 1px solid; }
.flash.error { background: var(--danger-soft); border-color: #f4c7c1; color: #7a1a12; }
.flash.ok { background: var(--accent-soft); border-color: #c4e3d6; color: #13473b; }

/* Телефон: строка сотрудника — блок, имя сверху, таймер под ним; кнопки не меньше 44 px */
@media (max-width: 600px) {
	nav { gap: 16px; padding: 0 16px; }
	main { padding: 24px 16px 40px; }
	h1 { font-size: 24px; }
	input, button { height: 44px; }
	.employees thead { display: none; }
	.employees tr { display: block; border-bottom: 1px solid var(--line); }
	.employees tr:last-child { border-bottom: 0; }
	.employees td, .employees td:first-child { display: block; width: auto; border: 0; padding: 12px 16px 0; }
	.panel > form.inline label { flex-basis: 100%; }
	.employees td + td { padding: 8px 16px 14px; }
	.employees tr.is-running { background: var(--accent-soft); }
}