/* ===== 010 human tasks — toolbar / create form / Done pill / due / human detail.
   Matches the existing tasks language: fleet vars + fonts, the .tasks-flip-btn
   pill shape, the .tasks-thread-input form field. ===== */

/* Toolbar: filter segmented-control + new-task button, above the lanes */
.tasks-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tasks-toolbar-spacer { flex: 1 1 auto; }
.tasks-filter {
  font-family: var(--fleet-mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  background: var(--fleet-panel); color: var(--text-secondary); border: 1px solid var(--fleet-hair);
  transition: background .13s ease, border-color .13s ease, color .13s ease;
  -webkit-tap-highlight-color: transparent;
}
.tasks-filter:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.tasks-filter-on, .tasks-filter-on:hover { background: var(--fleet-your-move); border-color: var(--fleet-your-move); color: #120c0c; }
.tasks-filter:focus-visible { outline: 2px solid var(--fleet-your-move); outline-offset: 2px; }
.tasks-newbtn {
  font-family: var(--fleet-mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--fleet-working); border: 1px solid var(--fleet-working);
  transition: background .13s ease; -webkit-tap-highlight-color: transparent;
}
.tasks-newbtn:hover { background: rgba(46,213,115,0.10); }
.tasks-newbtn:focus-visible { outline: 2px solid var(--fleet-working); outline-offset: 2px; }

/* Create row: a bordered panel, fields aligned, matching the app forms */
.tasks-create {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px;
  background: var(--fleet-panel); border: 1px solid var(--fleet-hair); border-radius: 10px;
}
.tasks-create-title, .tasks-create-assignee, .tasks-create-due {
  font-family: var(--fleet-text); font-size: 0.82rem; color: var(--text-primary);
  padding: 7px 10px; border-radius: 7px;
  background: rgba(0,0,0,0.22); border: 1px solid var(--fleet-hair); color-scheme: dark;
}
.tasks-create-title { flex: 2 1 180px; }
.tasks-create-assignee { flex: 1 1 150px; }
.tasks-create-due { flex: 0 0 auto; }
.tasks-create-title::placeholder, .tasks-create-assignee::placeholder { color: var(--text-muted); }
.tasks-create-title:focus-visible, .tasks-create-assignee:focus-visible, .tasks-create-due:focus-visible {
  outline: 2px solid var(--fleet-working); outline-offset: 1px; border-color: transparent;
}
.tasks-create-submit {
  font-family: var(--fleet-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 7px; cursor: pointer;
  background: var(--fleet-working); color: #08130c; border: 1px solid var(--fleet-working);
  transition: filter .13s ease;
}
.tasks-create-submit:hover { filter: brightness(1.08); }
.tasks-create-submit[disabled] { opacity: 0.6; cursor: default; }
.tasks-create-err { flex-basis: 100%; font-family: var(--fleet-text); font-size: 0.74rem; color: var(--fleet-dead); }

/* Time-budget slider component (task f8a851a8) — shared surface across the
   create form, the admin edit form, and the card popover. The Phase B naked
   <input type=number> was the wrong mechanism (no CSS parity + typing a
   minute count is friction); the log-scale slider over 11 anchor points is
   the pick-B replacement. Every new class here gets sibling-parity styling
   per the eval-caught form-input-class-family rule.

   Layout: [Budget: label] [track+ticks] [live label] [× clear]
   Wrap markers: data-budget-cleared=true|false on .tasks-budget-slider-wrap
   drives the greying-out of the label + slider fill in cleared state. */
.tasks-create-budget-wrap, .tasks-edit-budget-wrap {
  display: flex; align-items: center; gap: 8px; flex: 1 1 260px;
  min-width: 200px;
}
.tasks-create-budget-label, .tasks-edit-budget-label {
  font-family: var(--fleet-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  flex: 0 0 auto;
}
.tasks-budget-slider-wrap {
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto;
  min-width: 0;
}
.tasks-budget-slider-track-wrap {
  position: relative; flex: 1 1 auto; min-width: 100px;
  display: flex; align-items: center; height: 24px;
}
.tasks-budget-slider {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 4px; padding: 0; margin: 0;
  background: rgba(255,255,255,0.10);
  border: none; border-radius: 2px;
  cursor: pointer;
  position: relative; z-index: 2;
}
.tasks-budget-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: transparent;
}
.tasks-budget-slider::-moz-range-track {
  height: 4px; border-radius: 2px; background: rgba(255,255,255,0.10);
}
.tasks-budget-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--fleet-working); border: 2px solid #08130c;
  margin-top: -6px; cursor: pointer;
  box-shadow: 0 0 8px rgba(46,213,115,0.35);
}
.tasks-budget-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--fleet-working); border: 2px solid #08130c;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(46,213,115,0.35);
}
.tasks-budget-slider:focus-visible {
  outline: 2px solid var(--fleet-working); outline-offset: 4px;
}
.tasks-budget-slider-ticks {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 3px; pointer-events: none; z-index: 1;
}
.tasks-budget-slider-tick {
  width: 2px; height: 6px; border-radius: 1px;
  background: rgba(255,255,255,0.20);
}
.tasks-budget-slider-label {
  font-family: var(--fleet-mono); font-size: 0.72rem; font-weight: 600;
  color: var(--text-primary); white-space: nowrap;
  min-width: 32px; text-align: right;
}
.tasks-budget-slider-wrap[data-budget-cleared="true"] .tasks-budget-slider-label {
  color: var(--text-muted); opacity: 0.6;
}
.tasks-budget-slider-wrap[data-budget-cleared="true"] .tasks-budget-slider::-webkit-slider-thumb {
  background: var(--text-muted); box-shadow: none;
}
.tasks-budget-slider-wrap[data-budget-cleared="true"] .tasks-budget-slider::-moz-range-thumb {
  background: var(--text-muted); box-shadow: none;
}
.tasks-budget-slider-clear {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; padding: 0;
  background: transparent; border: 1px solid var(--fleet-hair);
  border-radius: 4px; color: var(--text-muted); cursor: pointer;
  font-family: inherit; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.tasks-budget-slider-clear:hover {
  color: var(--fleet-dead); border-color: var(--fleet-dead);
}

/* Card-side time-budget pill — post-create affordance. Empty state uses a
   dashed border to signal "affordance, no value yet"; set state uses a
   solid accent-tinted background. Sits ABOVE the timer bar (or alone when
   the bar's own gate fails), inside the card body. */
.tasks-budget-pill {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center;
  margin: 6px 12px 0 12px; padding: 3px 10px;
  font-family: var(--fleet-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.06em; line-height: 1;
  border-radius: 999px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tasks-budget-pill-empty {
  background: transparent; color: var(--text-muted);
  border: 1px dashed var(--fleet-hair);
}
.tasks-budget-pill-empty:hover {
  color: var(--fleet-working); border-color: var(--fleet-working);
}
.tasks-budget-pill-set {
  background: rgba(46,213,115,0.14); color: var(--fleet-working);
  border: 1px solid var(--fleet-working);
}
.tasks-budget-pill-set:hover { background: rgba(46,213,115,0.22); }
.tasks-budget-pill-open {
  outline: 2px solid var(--fleet-working); outline-offset: 2px;
}

/* Card-inline popover — expands under the pill. Not floating (uses the
   same inline-render idiom as the collab picker); the card rerender pass
   emits it conditionally on budgetPopoverOpenId. */
.tasks-budget-popover {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 12px 0 12px; padding: 8px 12px;
  background: var(--fleet-panel); border: 1px solid var(--fleet-hair);
  border-radius: 8px;
}
.tasks-budget-popover .tasks-budget-slider-wrap { flex: 1 1 220px; min-width: 180px; }
.tasks-budget-popover-actions {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
}
.tasks-budget-save, .tasks-budget-cancel {
  font-family: var(--fleet-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--fleet-hair);
  color: var(--text-muted);
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.tasks-budget-save {
  background: var(--fleet-working); color: #08130c;
  border-color: var(--fleet-working);
}
.tasks-budget-save:hover { filter: brightness(1.08); }
.tasks-budget-save[disabled] { opacity: 0.6; cursor: default; }
.tasks-budget-cancel:hover {
  color: var(--text-primary); border-color: var(--text-primary);
}
.tasks-budget-popover-err {
  flex-basis: 100%; font-family: var(--fleet-text); font-size: 0.74rem;
  color: var(--fleet-dead);
}

/* Admin three-dot (kebab) in the card head — a QUIET affordance at rest (muted
   glyph, no border/bg, same restraint as the subtask ghost button), lifting to a
   readable glyph + faint plate on hover/focus. Neutral (not the add-green), since
   it just opens a menu. Sits between the title and the head-right group. */
.tasks-kebab {
  flex: 0 0 auto; font-family: var(--fleet-mono); font-size: 1rem; line-height: 1;
  width: 24px; height: 24px; padding: 0; border: none; border-radius: 5px;
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: color .13s ease, background .13s ease; -webkit-tap-highlight-color: transparent;
}
.tasks-kebab:hover, .tasks-kebab:focus-visible { color: var(--text-primary); background: rgba(255,255,255,0.08); }
.tasks-kebab:focus-visible { outline: 2px solid var(--fleet-working); outline-offset: 1px; }

/* Inline admin edit form — mirrors the create-form surface, tucked under the
   card head. Same input/submit shapes; a muted CANCEL beside the green SAVE. */
.tasks-edit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; padding: 12px;
  background: var(--fleet-panel); border: 1px solid var(--fleet-hair); border-radius: 10px;
}
.tasks-edit-title, .tasks-edit-assignee, .tasks-edit-due {
  font-family: var(--fleet-text); font-size: 0.82rem; color: var(--text-primary);
  padding: 7px 10px; border-radius: 7px;
  background: rgba(0,0,0,0.22); border: 1px solid var(--fleet-hair); color-scheme: dark;
}
.tasks-edit-title { flex: 2 1 180px; }
.tasks-edit-assignee { flex: 1 1 150px; }
.tasks-edit-due { flex: 0 0 auto; }
.tasks-edit-title::placeholder, .tasks-edit-assignee::placeholder { color: var(--text-muted); }
.tasks-edit-title:focus-visible, .tasks-edit-assignee:focus-visible, .tasks-edit-due:focus-visible {
  outline: 2px solid var(--fleet-working); outline-offset: 1px; border-color: transparent;
}
.tasks-edit-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tasks-edit-save {
  font-family: var(--fleet-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 7px; cursor: pointer;
  background: var(--fleet-working); color: #08130c; border: 1px solid var(--fleet-working);
  transition: filter .13s ease;
}
.tasks-edit-save:hover { filter: brightness(1.08); }
.tasks-edit-save[disabled] { opacity: 0.6; cursor: default; }
.tasks-edit-cancel {
  font-family: var(--fleet-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--text-muted); border: 1px solid var(--fleet-hair);
  transition: color .13s ease, border-color .13s ease;
}
.tasks-edit-cancel:hover { color: var(--text-primary); border-color: var(--text-muted); }
.tasks-edit-cancel[disabled] { opacity: 0.6; cursor: default; }
.tasks-edit-err { flex-basis: 100%; font-family: var(--fleet-text); font-size: 0.74rem; color: var(--fleet-dead); }

/* ── projects Cut B (013) ──────────────────────────────────────────────── */

/* Toolbar: project filter select + GROUP toggle (reuses the filter chip look). */
.tasks-project-filter {
  font-family: var(--fleet-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 8px; border-radius: 6px; cursor: pointer; max-width: 160px;
  background: var(--fleet-panel); color: var(--text-secondary); border: 1px solid var(--fleet-hair);
  color-scheme: dark;
}
.tasks-project-filter:focus-visible { outline: 2px solid var(--fleet-your-move); outline-offset: 2px; }
/* 019 (Jase 811abd67): the EPISODE filter reads a chapter name, not a short
   project label — a step up from the shared 0.6rem, with more room before the
   name truncates. Scoped to [data-episodefilter] so the parked project filter
   keeps the base styling. Mobile keeps the shared max-width:none override. */
.tasks-project-filter[data-episodefilter] { font-size: 0.72rem; max-width: 220px; }
.tasks-groupbtn {
  font-family: var(--fleet-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  background: var(--fleet-panel); color: var(--text-secondary); border: 1px solid var(--fleet-hair);
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.tasks-groupbtn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.tasks-groupbtn-on, .tasks-groupbtn-on:hover { background: var(--fleet-your-move); border-color: var(--fleet-your-move); color: #120c0c; }
.tasks-groupbtn:focus-visible { outline: 2px solid var(--fleet-your-move); outline-offset: 2px; }

/* Create-project form + its inputs mirror the create-task form shapes. */
.tasks-project-name, .tasks-project-owner, .tasks-project-desc, .tasks-create-project, .tasks-create-episode, .tasks-project-due,
.tasks-projedit-name, .tasks-projedit-desc, .tasks-projedit-due {
  font-family: var(--fleet-text); font-size: 0.82rem; color: var(--text-primary);
  padding: 7px 10px; border-radius: 7px;
  background: rgba(0,0,0,0.22); border: 1px solid var(--fleet-hair); color-scheme: dark;
}
.tasks-project-name { flex: 2 1 180px; }
.tasks-project-owner { flex: 1 1 150px; }
.tasks-project-desc { flex: 2 1 180px; }
.tasks-create-project { flex: 1 1 140px; }
.tasks-create-episode { flex: 1 1 150px; }
.tasks-project-due, .tasks-projedit-due { flex: 0 0 auto; }
.tasks-projedit-name { flex: 2 1 150px; }
.tasks-projedit-desc { flex: 2 1 150px; }
/* project settings edit form — a row at the top of the member panel */
.tasks-projedit { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--fleet-hair); }
.tasks-projedit-name::placeholder, .tasks-projedit-desc::placeholder { color: var(--text-muted); }
.tasks-projedit-name:focus-visible, .tasks-projedit-desc:focus-visible, .tasks-projedit-due:focus-visible,
.tasks-project-due:focus-visible {
  outline: 2px solid var(--fleet-working); outline-offset: 1px; border-color: transparent;
}
/* project due-date chip on the group header — amber, like the task due chip */
.tasks-project-groupdue {
  font-family: var(--fleet-mono); font-size: 0.62rem; letter-spacing: 0.04em;
  color: var(--fleet-your-move); border: 1px solid rgba(254,202,87,0.4);
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.tasks-project-name::placeholder, .tasks-project-desc::placeholder { color: var(--text-muted); }
.tasks-project-name:focus-visible, .tasks-project-owner:focus-visible, .tasks-project-desc:focus-visible, .tasks-create-project:focus-visible {
  outline: 2px solid var(--fleet-working); outline-offset: 1px; border-color: transparent;
}

/* Project chip on a card's meta line — cool/quiet, distinct from the amber due chip. */
.tasks-project-chip {
  font-family: var(--fleet-mono); font-size: 0.62rem; letter-spacing: 0.03em;
  color: #7ec7ff; border: 1px solid rgba(126,199,255,0.4);
  padding: 1px 6px; border-radius: 4px; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}

/* 019: episode chip on a card's meta line — warm/quiet, distinct from the cool
   project chip. Stale/facts-unavailable dashes the border, same rule as the
   board linkchip. */
.tasks-episode-chip {
  font-family: var(--fleet-mono); font-size: 0.62rem; letter-spacing: 0.03em;
  color: #ffc98a; border: 1px solid rgba(255,201,138,0.4);
  padding: 1px 6px; border-radius: 4px; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.tasks-episode-chip-stale { color: var(--text-muted); border-color: var(--fleet-hair); border-style: dashed; }
/* bf953a34: on an EXPANDED card the chip is the link-management entry (tap
   toggles the picker row), so it reads tappable there — and only there; on
   collapsed pills it stays a passive label. */
.tasks-card-expanded .tasks-episode-chip {
  cursor: pointer;
  transition: border-color .13s ease, background .13s ease;
}
.tasks-card-expanded .tasks-episode-chip:hover { border-color: rgba(255,201,138,0.85); background: rgba(255,201,138,0.08); }

/* Attach row in the expanded card's left column. */
.tasks-project-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--fleet-text); font-size: 0.8rem; color: var(--text-secondary);
  margin-top: 4px;
}
.tasks-project-cur { color: var(--text-primary); }
.tasks-project-change {
  font-family: var(--fleet-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text-muted); border: 1px solid var(--fleet-hair);
  transition: color .13s ease, border-color .13s ease;
}
.tasks-project-change:hover, .tasks-project-change:focus-visible { color: #7ec7ff; border-color: rgba(126,199,255,0.5); }
.tasks-project-attach {
  font-family: var(--fleet-text); font-size: 0.8rem; color: var(--text-primary);
  padding: 6px 9px; border-radius: 7px; max-width: 220px;
  background: rgba(0,0,0,0.22); border: 1px solid var(--fleet-hair); color-scheme: dark;
}
.tasks-project-attach-cancel {
  font-family: var(--fleet-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text-muted); border: 1px solid var(--fleet-hair);
}
.tasks-project-attach-cancel:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* Group-by-project sections. */
.tasks-project-group { margin-bottom: 18px; }
.tasks-project-grouphead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 2px 8px; border-bottom: 1px solid var(--fleet-hair); margin-bottom: 10px;
}
.tasks-project-groupname {
  font-family: var(--fleet-ink); font-weight: 600; font-size: 0.92rem; color: var(--text-primary); letter-spacing: 0.01em;
}
.tasks-project-groupowner { font-family: var(--fleet-mono); font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.04em; }
.tasks-project-groupcount {
  font-family: var(--fleet-mono); font-size: 0.62rem; color: var(--text-secondary);
  background: var(--fleet-panel); border: 1px solid var(--fleet-hair); border-radius: 10px; padding: 1px 8px;
}
.tasks-project-manage {
  margin-left: auto; font-family: var(--fleet-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text-muted); border: 1px solid var(--fleet-hair);
  transition: color .13s ease, border-color .13s ease, background .13s ease;
}
.tasks-project-manage:hover { color: var(--text-primary); border-color: var(--text-muted); }
.tasks-project-manage-on, .tasks-project-manage-on:hover { color: #7ec7ff; border-color: rgba(126,199,255,0.5); background: rgba(126,199,255,0.08); }

/* Member panel under a group head. */
.tasks-member-panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 12px;
  background: var(--fleet-panel); border: 1px solid var(--fleet-hair); border-radius: 10px;
}
.tasks-member-owner { flex-basis: 100%; font-family: var(--fleet-mono); font-size: 0.66rem; color: var(--text-muted); letter-spacing: 0.04em; }
.tasks-member-list { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.tasks-member-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--fleet-text); font-size: 0.78rem; color: var(--text-primary);
  background: rgba(0,0,0,0.22); border: 1px solid var(--fleet-hair); border-radius: 6px; padding: 3px 4px 3px 9px;
}
.tasks-member-remove {
  font-family: var(--fleet-mono); font-size: 0.85rem; line-height: 1; width: 18px; height: 18px;
  border: none; border-radius: 4px; background: transparent; color: var(--text-muted); cursor: pointer;
  transition: color .13s ease, background .13s ease;
}
.tasks-member-remove:hover { color: var(--fleet-dead); background: rgba(255,107,107,0.12); }
.tasks-member-empty { font-family: var(--fleet-text); font-size: 0.78rem; color: var(--text-muted); }
.tasks-member-loading { flex-basis: 100%; font-family: var(--fleet-text); font-size: 0.78rem; color: var(--text-muted); }
.tasks-member-add { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.tasks-member-select {
  font-family: var(--fleet-text); font-size: 0.8rem; color: var(--text-primary); flex: 1 1 150px;
  padding: 7px 10px; border-radius: 7px; background: rgba(0,0,0,0.22); border: 1px solid var(--fleet-hair); color-scheme: dark;
}
.tasks-member-addbtn {
  font-family: var(--fleet-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 7px; cursor: pointer;
  background: var(--fleet-working); color: #08130c; border: 1px solid var(--fleet-working); transition: filter .13s ease;
}
.tasks-member-addbtn:hover { filter: brightness(1.08); }
.tasks-member-addbtn[disabled] { opacity: 0.6; cursor: default; }

/* Collaborators row (button-invite, expanded card). Chips reuse
   .tasks-member-chip / .tasks-member-remove; the picker reuses the
   .tasks-mention-dd option look, anchored to the ADD button (the addwrap is
   the positioning context) and opening upward like the composer dropdown. */
.tasks-collab-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tasks-collab-label { font-family: var(--fleet-mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--text-muted); flex: 0 0 auto; }
.tasks-collab-list { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tasks-collab-addwrap { position: relative; flex: 0 0 auto; }
.tasks-collab-add {
  font-family: var(--fleet-mono); font-size: 0.62rem; letter-spacing: 0.06em;
  padding: 3px 8px; border: 1px solid var(--fleet-hair); border-radius: 6px;
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: color .13s ease, background .13s ease;
}
.tasks-collab-add:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.tasks-collab-add[disabled] { opacity: 0.6; cursor: default; }
/* .tasks-collab-dd / .tasks-participant-dd previously overrode .tasks-mention-dd
   with left:auto; right:0 to anchor against .tasks-collab-addwrap. Post-389a2db8:
   positioning is viewport-fixed via positionPickerDd() in tasks-board.js — no
   per-picker anchor overrides needed. */

/* Participants row (be44a98e admin-add-bot-participant). Reuses .tasks-collab-row
   / .tasks-collab-label / .tasks-collab-list / .tasks-collab-addwrap /
   .tasks-collab-add for shape, adds a small kind badge to each chip and to
   each picker option. Non-admin viewers see the list only (no addwrap). */
.tasks-participant-kind {
  font-family: var(--fleet-mono); font-size: 0.55rem; letter-spacing: 0.06em;
  padding: 1px 4px; border-radius: 3px;
  color: var(--text-muted); background: rgba(255,255,255,0.06);
  border: 1px solid var(--fleet-hair); text-transform: uppercase;
}
.tasks-participant-optkind {
  font-family: var(--fleet-mono); font-size: 0.55rem; letter-spacing: 0.06em;
  color: var(--text-muted); margin-left: 6px; text-transform: uppercase;
  flex: 0 0 auto;
}
/* .tasks-participant-dd anchor override retired — see .tasks-collab-dd note above. */

/* Due chip on the card meta (amber — a deadline to watch) */
.tasks-due {
  font-family: var(--fleet-mono); font-size: 0.64rem; letter-spacing: 0.04em;
  color: var(--fleet-your-move); border: 1px solid rgba(254,202,87,0.4);
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}

/* Human-task detail: description only, no step pipeline. Done lives at the
   meta row's right end (f426c411 render A); due lives on the countdown rail
   (or the meta chip when the rail doesn't render). */
.tasks-detail-human { display: flex; flex-direction: column; gap: 8px; }
.tasks-human-desc { font-family: var(--fleet-text); font-size: 0.84rem; color: var(--text-secondary); line-height: 1.45; white-space: pre-wrap; }
.tasks-human-donemark { font-family: var(--fleet-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; color: var(--fleet-working); text-transform: uppercase; }

/* Reopen toggle (2026-07-30): on a done human card the DONE mark is a BUTTON
   (same look as the inert mark) — tap reverts to in-progress. Hover hints the
   affordance; the failed flash borrows the dead color. */
button.tasks-reopen-toggle { background: transparent; border: none; padding: 0; cursor: pointer; }
button.tasks-reopen-toggle:hover:not(:disabled) { text-decoration: underline; filter: brightness(1.15); }
button.tasks-reopen-toggle:disabled { opacity: 0.6; cursor: progress; }
button.tasks-reopen-toggle.tasks-reopen-failed { color: var(--fleet-dead, #ff6b6b); }

/* Done pill — mirrors .tasks-flip-btn, a touch larger (Done is the primary
   action). On the meta row it's compacted by .tasks-card-meta above. */
.tasks-done-btn {
  font-family: var(--fleet-mono);
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--fleet-working); border: 1px solid var(--fleet-working);
  transition: background .13s ease, border-color .13s ease, color .13s ease;
  -webkit-tap-highlight-color: transparent;
}
.tasks-done-btn:hover { background: rgba(46,213,115,0.10); }
.tasks-done-btn:focus-visible { outline: 2px solid var(--fleet-working); outline-offset: 2px; }
.tasks-done-armed, .tasks-done-armed:hover { background: var(--fleet-your-move); border-color: var(--fleet-your-move); color: #120c0c; }
.tasks-done-busy { color: var(--text-muted); border-color: var(--fleet-hair); background: transparent; cursor: default; opacity: 0.7; }
.tasks-done-failed { color: var(--fleet-dead); border-color: var(--fleet-dead); background: transparent; cursor: default; }
@media (prefers-reduced-motion: reduce) { .tasks-done-btn, .tasks-filter, .tasks-newbtn { transition: none; } }

@media (max-width: 640px) {
  .tasks-create { flex-direction: column; align-items: stretch; }
  .tasks-create-title, .tasks-create-assignee, .tasks-create-due, .tasks-create-submit { flex: 1 1 auto; width: 100%; }
  .tasks-create-budget-wrap, .tasks-edit-budget-wrap { flex: 1 1 auto; width: 100%; }
  .tasks-edit { flex-direction: column; align-items: stretch; }
  .tasks-edit-title, .tasks-edit-assignee, .tasks-edit-due { flex: 1 1 auto; width: 100%; }
  .tasks-edit-actions { width: 100%; }
  .tasks-edit-save, .tasks-edit-cancel { flex: 1 1 auto; }
  .tasks-project-create { flex-direction: column; align-items: stretch; }
  .tasks-project-name, .tasks-project-owner, .tasks-project-desc, .tasks-project-due { flex: 1 1 auto; width: 100%; }
  .tasks-member-panel { flex-direction: column; align-items: stretch; }
  .tasks-member-add { width: 100%; }
  .tasks-member-select, .tasks-member-addbtn { flex: 1 1 auto; }
  .tasks-project-filter { max-width: none; flex: 1 1 auto; }
  /* the [data-episodefilter] desktop max-width outspecifies the line above, so
     the episode filter needs its own mobile release back to full width */
  .tasks-project-filter[data-episodefilter] { max-width: none; }
  .tasks-projedit { flex-direction: column; align-items: stretch; }
  .tasks-projedit-name, .tasks-projedit-desc, .tasks-projedit-due { flex: 1 1 auto; width: 100%; }
  /* Countdown rail, COLLAPSED pills only (93a5afda): drop the date half and
     keep the urgency half — 'OVERDUE 22H' / '2H LEFT' / '5D LEFT'. Expanded
     cards (data-expanded) and desktop keep the full 'DUE JUL 28 · …' form;
     the date is still one tap away on the expanded card either way. The rail
     itself may narrow to fit the freed label. */
  .tasks-card:not([data-expanded]) .tasks-cd-due { display: none; }
  .tasks-card:not([data-expanded]) .tasks-cd { flex-basis: 108px; }
}