:root {
  --bg: #f8f9fb; --surface: #ffffff; --line: #e1e2e4; --line-firm: #c2c7cd;
  --ink: #191c1e; --ink-soft: #42474d; --ink-faint: #73777d;
  --navy: #01253b; --teal: #006877; --teal-in: #e3f6f9;
  --warn: #8a4b00; --warn-in: #fff3e0; --bad: #ba1a1a; --bad-in: #ffdad6;
  --tap: 2.75rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1rem/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1rem 4rem; }
.bar { position: sticky; top: 0; z-index: 5; background: var(--navy); color: #fff; padding: 0.75rem 1rem; }
.bar-in { max-width: 44rem; margin: 0 auto; display: flex; align-items: baseline; gap: 0.75rem; }
.brand { font-weight: 650; letter-spacing: -0.01em; color: #fff; text-decoration: none; }
.who { margin-left: auto; font-size: 0.8125rem; color: #cfe0ea; text-align: right; overflow-wrap: anywhere; }
.who form { display: inline; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: #9eecfe; text-decoration: underline; cursor: pointer; }
h1 { font-size: 1.625rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.015em; margin: 1.75rem 0 0.25rem; text-wrap: balance; }
h2 { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin: 2.25rem 0 0.5rem; }
.lede { color: var(--ink-soft); margin: 0 0 1rem; }
.progress { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
progress { flex: 1; height: 0.5rem; appearance: none; border: 0; border-radius: 999px; background: var(--line); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--teal); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--teal); border-radius: 999px; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.item { scroll-margin-top: 4.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.875rem 1rem; }
.item.done { background: transparent; }
.item.done .title { color: var(--ink-soft); }
.row { display: flex; gap: 0.75rem; align-items: flex-start; }
.row form { margin: 0; flex: 0 0 auto; }
.tick { width: var(--tap); height: var(--tap); border-radius: 10px; border: 2px solid var(--line-firm); background: var(--surface);
  font-size: 1.25rem; line-height: 1; color: #fff; cursor: pointer; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease; }
.tick:active { transform: scale(0.97); }
.tick.on { background: var(--teal); border-color: var(--teal); }
.mark { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; margin: 0.125rem 0.5rem 0 0.5rem; border-radius: 50%;
  border: 2px solid var(--line-firm); display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; color: #fff; }
.mark.on { background: var(--teal); border-color: var(--teal); }
.body { flex: 1; min-width: 0; }
.title { font-weight: 600; overflow-wrap: anywhere; }
.detail { color: var(--ink-soft); font-size: 0.9375rem; margin-top: 0.25rem; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--ink-faint); }
.chip { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.chip.doing { background: var(--teal-in); color: var(--teal); }
.chip.blocked { background: var(--bad-in); color: var(--bad); }
.chip.late { background: var(--warn-in); color: var(--warn); }
.answer { margin-top: 0.75rem; }
.answer blockquote { margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--teal); background: var(--teal-in); white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 0 8px 8px 0; }
label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; }
textarea, input[type=email], select { width: 100%; font: inherit; padding: 0.625rem 0.75rem; border: 1px solid var(--line-firm); border-radius: 8px; background: var(--surface); color: var(--ink); }
textarea { min-height: 5.5rem; resize: vertical; }
select { min-height: var(--tap); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 1.125rem; border-radius: 999px; border: 0;
  background: var(--navy); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.btn:active { transform: scale(0.97); }
.btn.quiet { background: transparent; color: var(--navy); border: 1px solid var(--line-firm); }
.stack { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.inline { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.inline select { flex: 1; }
.history { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; color: var(--ink-soft); }
.history li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.history time { color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-right: 0.5rem; }
.clients { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.clients a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.875rem 1rem; color: inherit; text-decoration: none; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; margin-top: 1.5rem; }
.error { background: var(--bad-in); color: var(--bad); padding: 0.625rem 0.75rem; border-radius: 8px; margin: 0 0 1rem; }
.empty { color: var(--ink-faint); }
a { color: var(--teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tick, .btn { transition: none; } }