/* Hours: a punch clock. Cool mint paper, a big tabular clock, teal for the running state. */
:root { --page: #eef2f1; --card: #ffffff; --ink: #142020; --soft: #556463; --line: #d2dcda; --field: #e6ecea; --act: #0f6b62; --on-act: #ffffff; --stop: #b3261e; --wide: 720px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #101514; --card: #181f1e; --ink: #e5eeec; --soft: #9fb0ae; --line: #2a3533; --field: #101514; --act: #7fd8cc; --on-act: #062421; --stop: #ff8a80; color-scheme: dark; }
}
.timer { text-align: center; }
.timer .row { text-align: left; }
.clock { font-size: clamp(44px, 14vw, 72px); font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0; letter-spacing: -0.02em; }
.running .clock { color: var(--act); }
.running #go { background: var(--stop); color: #fff; }
#go { width: 100%; }
summary { cursor: pointer; list-style: none; } summary::-webkit-details-marker { display: none; }
summary h2 { margin: 0; display: inline; } summary::after { content: " +"; color: var(--act); font-weight: 700; }
details[open] summary::after { content: " −"; } details[open] summary { margin-bottom: 12px; }
.between { justify-content: space-between; align-items: center; } .between h2 { margin: 0; }
.totals li { font-variant-numeric: tabular-nums; } .totals .sum { font-weight: 700; }
.totals .val { color: var(--soft); margin-left: 10px; }
.day h3 { margin: 18px 0 4px; font-size: 15px; color: var(--soft); }
.entry .when { font-variant-numeric: tabular-nums; color: var(--soft); font-size: 14px; }
.entry .dur { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.entry .acts { display: flex; gap: 6px; flex: none; }
.rate { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .rate span { flex: 1; } .rate input { width: 110px; }