/* --- Tasks card ----------------------------------------------------------- */

.quickadd {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 9px 14px;
  border-bottom: 1px solid var(--hair);
  background: var(--fill-2);
}

.quickadd input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 3px 0;
  font-size: 13px;
  color: var(--ink);
}

.quickadd input::placeholder { color: var(--faint); }
.quickadd input:focus { outline: none; }

/* Which project new tasks land under. Tinted by the current choice, so the
   control shows the color it is about to apply. */
.qa-project {
  appearance: none;
  flex: none;
  max-width: 104px;
  padding: 2px 9px;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  background: var(--tint-bg);
  color: var(--tint);
  font-size: 10.5px;
  cursor: pointer;
  text-overflow: ellipsis;
}

.qa-project:hover { border-color: var(--line); }

/* Focus is shown on the row rather than the input, so the accent reads as an
   edge marker instead of a box. */
.quickadd:focus-within { box-shadow: inset 2px 0 0 var(--accent); }

/* The click-to-place banner. Only present while a task is held — and that
   `[hidden]` rule is what makes "only" true. An author `display:` beats the
   UA's `[hidden] { display: none }` whatever the specificity, so without it the
   attribute does nothing and the bar sits there permanently, offering to cancel
   a placement nobody started. */
.pickbar[hidden] { display: none; }

.pickbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 7px 14px;
  font-size: 11.5px;
  color: var(--accent-ink);
  background: var(--tint-bg, var(--accent-bg));
  border-bottom: 1px solid var(--hair);
}

.pickbar span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pickbar .linkish { margin-left: auto; color: var(--accent-ink); }

.task-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 6px;
}

/* Dropping a scheduled block back here unschedules it. */
.task-scroll.is-dropback {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--accent-bg);
}

.group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 5px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.group-label.is-overdue { color: var(--danger); }
.group-label .rule { flex: 1; height: 1px; background: var(--hair); }

.task {
  display: grid;
  grid-template-columns: 14px 16px 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px 14px 7px 8px;
  border-radius: var(--r-md);
  margin: 0 6px;
  cursor: grab;
}

.task:hover { background: var(--hover); }
.task:has(input:focus-visible) { background: var(--hover); }

.task.is-dragging { opacity: .4; cursor: grabbing; }

/* Held for a click-to-place: outlined rather than filled, because the row is
   still in the list — it has not gone anywhere yet. */
.task.is-picked {
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.grip {
  display: grid;
  place-content: center;
  width: 14px;
  height: 20px;
  padding: 0;
  color: var(--line);
  cursor: grab;
  border-radius: 4px;
}

.task:hover .grip { color: var(--faint); }
.grip:hover { color: var(--ink-2); background: var(--fill-2); }
.task.is-picked .grip { color: var(--accent); }

/* The row is top-aligned, so the box lines up with the first line of the title
   rather than with the block as a whole. */
.task .tick { margin-top: 3px; }

/* A button, so clicking the text opens the editor — but styled as the row it
   sits in, not as a control. */
.task-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

/* A task waiting on its first save. Visible, but clearly not settled yet. */
.task.is-pending { opacity: .55; }
.task.is-pending .grip { visibility: hidden; }

.task-title {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}

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

.due,
.at {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted);
}

.at { color: var(--faint); }
.due.is-late { color: var(--danger); font-weight: 500; }

/* Completed work drops to the --read pair: still legible, no longer competing. */
.task.done .task-title {
  color: var(--read);
  text-decoration: line-through;
  text-decoration-color: var(--faint);
}

.task.done .chip {
  color: var(--read);
  background: var(--read-bg);
}

.task.done .due,
.task.done .at {
  color: var(--faint);
  text-decoration: none;
}

/* --- what got done today -------------------------------------------------- */

/* The toggle sits at the bottom of the list, so what it reveals appears where
   you are already looking rather than at the top of a scroll you have left. */
.done-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 7px 14px;
  border-top: 1px solid var(--hair);
}

.done-hint {
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Capped rather than free: this is a footnote to the list above it, and it may
   not push the open work off the screen however good a day it was. */
.done-scroll {
  flex: none;
  max-height: 34vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 0 6px;
  border-top: 1px solid var(--hair);
  background: var(--fill-2);
}

.done-scroll[hidden] { display: none; }
.done-scroll .empty { padding: 14px 16px; }

.tasks-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 9px 14px 10px;
  border-top: 1px solid var(--hair);
  font-size: 11px;
  color: var(--faint);
}

.tasks-foot .hint {
  font-size: 10.5px;
  color: var(--faint);
  opacity: .85;
}

@media (max-width: 1180px) {
  .tasks-foot .hint { display: none; }
}