/* Hand-written and deliberately small — no build step, no framework. */
:root {
  --bg: #f6f7f9; --fg: #1a1d21; --muted: #6b7280; --line: #e3e6ea;
  --card: #ffffff; --primary: #2563eb; --danger: #b91c1c; --ok: #047857;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#15181c; --fg:#e8eaed; --muted:#9aa3ad; --line:#2b3038; --card:#1c2027; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width: 900px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.topbar { display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:var(--card); border-bottom:1px solid var(--line); }
.topbar .brand { font-weight:600; text-decoration:none; color:var(--fg); }
.topbar .spacer { flex:1; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:16px; margin:16px 0; }
.card.narrow { max-width:420px; margin:12vh auto; text-align:center; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
input[type=email], input[type=text] { padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--fg); flex:1; min-width:200px; }
.btn { display:inline-block; padding:8px 14px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--fg); cursor:pointer; font:inherit; }
.btn.primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn.danger { color:var(--danger); }
.btn.link { border:0; background:none; color:var(--muted); text-decoration:underline; }
form.button_to { display:inline; }
table.card { width:100%; border-collapse:collapse; padding:0; overflow:hidden; }
th, td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); }
th { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
tr:last-child td { border-bottom:0; }
.flash { padding:10px 14px; border-radius:8px; margin:0 0 12px; }
.flash.notice { background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok); }
.flash.alert  { background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger); }
.error { color:var(--danger); margin:0 0 8px; }

/* --- metrics dashboard --- */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:16px 0; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; }
.tile-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.tile-value { font-size:1.6rem; font-weight:600; margin-top:4px; }
.tile-note { font-size:.78rem; color:var(--muted); margin-top:4px; }
.badge { display:inline-block; font-size:.72rem; padding:2px 7px; border-radius:999px;
  border:1px solid var(--line); }
.badge.done { color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent); }
.badge.active { color:var(--primary); border-color:color-mix(in srgb, var(--primary) 40%, transparent); }
.badge.todo { color:var(--muted); }
.intervals { list-style:none; margin:0; padding:0; }
.intervals li { display:flex; gap:8px; align-items:center; padding:1px 0; font-size:.88rem; }
.intervals .istatus { min-width:110px; color:var(--muted); }
.intervals .ihours { font-variant-numeric:tabular-nums; }
dl.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:8px 0 0; }
dl.grid dt { font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
dl.grid dd { margin:2px 0 0; }
.scroll-x { overflow-x:auto; }
.notice-inline { color:var(--muted); font-size:.88rem; margin:8px 0 0; }
.ok { color:var(--ok); } .bad { color:var(--danger); }
code { background:var(--bg); padding:1px 5px; border-radius:4px; font-size:.9em; }

table.plain { width:100%; border-collapse:collapse; }
table.plain th, table.plain td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); font-size:.9rem; }
table.plain tr:last-child td { border-bottom:0; }
h3 { font-size:.98rem; margin:0 0 6px; }

/* --- forms --- */
.stack > * + * { margin-top: 14px; }
.field { display:flex; flex-direction:column; gap:4px; }
.field.inline, label.inline { flex-direction:row; align-items:center; gap:6px; }
.field label, .field > label { font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.hint { font-size:.8rem; color:var(--muted); margin:2px 0 0; }
.row.nested { padding:6px 0; border-bottom:1px solid var(--line); }
.row.spread { display:flex; align-items:center; justify-content:space-between; gap:12px; }
label.inline.danger { color:var(--danger); }
select, textarea, input[type=password], input[type=number], input[type=date] {
  padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font:inherit; }
details summary { cursor:pointer; color:var(--muted); font-size:.88rem; padding:6px 0; }