/* Phone first. Every size here is chosen for a thumb, not a mouse: 44px
   minimum tap target, 16px minimum input font (anything smaller makes iOS
   zoom the page on focus), and one single column that never scrolls
   sideways. Desktop gets the same layout, centred, which is the "desktop is
   a bonus" trade CLAUDE.md asks for.

   No framework, no build step. */

:root {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --ink: #1c1b19;
  --muted: #6b6660;
  --line: #e2ded8;
  --accent: #1f5f4b;
  --accent-ink: #ffffff;
  --error-bg: #fdecea;
  --error-ink: #8a1c11;
  --notice-bg: #eaf4ef;
  --notice-ink: #17503f;
  --urgent: #b4531a;
  --urgent-bg: #fbeee2;
  --urgent-ink: #8a3d10;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --surface: #201f1c;
    --ink: #f2efe9;
    --muted: #a49e95;
    --line: #35322d;
    --accent: #4fae8d;
    --accent-ink: #10201a;
    --error-bg: #3a1c18;
    --error-ink: #ffb4a8;
    --notice-bg: #17332a;
    --notice-ink: #9fdcc3;
    --urgent: #d98a4f;
    --urgent-bg: #3a2415;
    --urgent-ink: #f0b98a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.who {
  color: var(--muted);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page {
  max-width: 34rem;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

h1 { font-size: 24px; margin: 8px 0 12px; }

.muted { color: var(--muted); }

.placeholder {
  margin-top: 24px;
  padding: 16px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}

.flash {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 16px;
}

.flash-error { background: var(--error-bg); color: var(--error-ink); }
.flash-notice { background: var(--notice-bg); color: var(--notice-ink); }

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

label { font-size: 15px; color: var(--muted); }

input[type="text"],
input[type="date"],
select,
textarea {
  width: 100%;
  font: inherit;
  /* 16px minimum: smaller and iOS Safari zooms in on focus. */
  font-size: 17px;
  padding: 13px 12px;
  min-height: 48px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

textarea { min-height: 76px; resize: vertical; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  font: inherit;
  font-weight: 600;
  min-height: 48px;
  padding: 12px 18px;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.link-button {
  min-height: 44px;
  padding: 8px 4px;
  color: var(--muted);
  background: none;
  font-weight: 500;
  font-size: 15px;
  text-decoration: underline;
}

a { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Task rows

   The whole list is one column of cards. No table: a table with four columns
   on a 360px screen is a horizontal scrollbar, and this list is read in a car
   more often than at a desk.

   Late and urgent are marked with a colour *and* a word. Colour alone fails
   for anyone who cannot see the difference, and fails again in sunlight
   through a windscreen.
   --------------------------------------------------------------------------- */

.count-line { margin: 0 0 16px; font-size: 15px; }
.late-count { color: var(--error-ink); }

.tasks {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
}

.task-overdue { border-left-color: var(--error-ink); }
.task-urgent { border-left-color: var(--urgent); }

/* htmx puts this on the element making the request. A tap in a dead spot
   should look like something is happening, without any JavaScript of ours. */
.task.htmx-request { opacity: 0.55; }

.task-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.task-title {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  /* A long title wraps rather than pushing the card sideways. */
  overflow-wrap: anywhere;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}

.tag {
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

.tag-late { color: var(--error-ink); background: var(--error-bg); border-color: transparent; }
.tag-today { color: var(--notice-ink); background: var(--notice-bg); border-color: transparent; }
.tag-urgent { color: var(--urgent-ink); background: var(--urgent-bg); border-color: transparent; }

.who-tag { font-size: 13px; color: var(--muted); }

.task-notes {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.row-error {
  margin: 10px 0 0;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--error-ink);
  background: var(--error-bg);
  border-radius: var(--radius);
}

/* Buttons wrap instead of shrinking: a 44px tap target that has been squeezed
   to 30px to fit three across is a button you miss while driving. */
.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.chip {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 15px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.chip-quiet {
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
}

/* ---------------------------------------------------------------------------
   Dashboard
   --------------------------------------------------------------------------- */

.group { margin: 24px 0 0; }

.group h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 17px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.group-count { font-size: 14px; font-weight: 500; color: var(--muted); }
.group-unassigned h2 { color: var(--error-ink); border-bottom-color: var(--error-ink); }

.new-task {
  margin: 0 0 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.new-task summary {
  min-height: 24px;
  padding: 6px 0;
  font-weight: 600;
  cursor: pointer;
}

.new-task .stack { margin-top: 8px; }

.field { display: flex; flex-direction: column; gap: 6px; }

/* Two short fields share a line on anything wider than a small phone, and
   stack below that rather than squeezing a date input to nothing. */
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field-row > * { flex: 1 1 9rem; }
.field-row > .chip { flex: 0 0 auto; align-self: flex-end; }

/* ---------------------------------------------------------------------------
   Task detail
   --------------------------------------------------------------------------- */

.crumb { margin: 0 0 4px; font-size: 15px; }
.detail-title { overflow-wrap: anywhere; }
.detail-notes { font-size: 16px; color: var(--ink); }
.detail-actions { margin-bottom: 20px; }

.inline-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 20px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.inline-form .chip { align-self: flex-start; }

.history-heading { font-size: 17px; margin: 24px 0 8px; }

.history {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event {
  padding-left: 12px;
  border-left: 2px solid var(--line);
  font-size: 15px;
}

.event-comment { border-left-color: var(--accent); }
.event p { margin: 0 0 2px; }
.event-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.event-when { font-size: 13px; }

.after-list { margin-top: 24px; }