/* ===== TASKS — the task queue as a pit-wall board (V1, read-only) =====
   Fleet's sibling surface: lanes stack vertically with sticky headers
   (single-column left-UI reads cleaner than columns at PWA widths), cards
   carry the 4px status rail, chips reuse the fleet status hues so the two
   boards read as one system. Color canon: green = live work, cool gray =
   quiet, amber = attention (returned), red = failure only (blocked). */

/* ---- lanes: fleet-section idiom + sticky heads ---- */
.tasks-lane {
  margin-bottom: 22px;
  animation: fleet-rise 0.5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(0.06s * var(--s, 0) + 0.08s);
}
.tasks-lane-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--fleet-hair);
  /* sticky so the lane you're scrolled into always names itself */
  position: sticky; top: -14px; z-index: 2;
  background: rgba(31,17,17,0.88);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tasks-lane-label {
  font-family: var(--fleet-ink); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.95rem; color: var(--text-primary);
}
.tasks-lane-attention .tasks-lane-label { color: var(--fleet-your-move); }
.tasks-lane-attention .tasks-lane-label::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px; background: var(--fleet-your-move); vertical-align: middle;
  box-shadow: 0 0 8px var(--fleet-your-move); animation: fleet-pulse 1.3s ease-in-out infinite;
}
/* Item 7: the PARKED lane is the quiet opposite of NEEDS ATTENTION — muted
   label, no dot, no pulse. Quiet is the feature: an ordered park was landing
   in the loud lane and asking to be undone. */
.tasks-lane-parked .tasks-lane-label { color: var(--text-muted); }
.tasks-lane-parked .tasks-lane-cards { opacity: 0.82; }
.tasks-lane-count { font-family: var(--fleet-text); font-weight: 600; font-size: 0.68rem;
  letter-spacing: 0.04em; color: var(--text-muted); }

/* State-priority lane color hints (task daadab16, artifact msgId 1536108c §3;
   ACTIVELY WORKING added in task ad34262c stage 1). Lane label gets a colored
   dot cue matching Jase's priority framing:
   actively-working green + pulse (bot's pane is working right now) →
   awaiting-signoff red (someone owes an admin tap) → pending-merge amber
   (Jase's own action gate) → in-progress green (moving) → awaiting-reply
   muted (waiting on response). The `state-` selector prefix is what
   statePriorityGroupedHtml sets on the lane element (`tasks-lane-state-<key>`);
   done rides the existing collapsible <details> so no header rule needed. */
.tasks-lane-state-actively-working .tasks-lane-label { color: var(--pw-green, #46d55a); }
.tasks-lane-state-actively-working .tasks-lane-label::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px; background: var(--pw-green, #46d55a); vertical-align: middle;
  box-shadow: 0 0 8px var(--pw-green, #46d55a);
  animation: fleet-pulse 1.3s ease-in-out infinite;
}
.tasks-lane-state-awaiting-signoff .tasks-lane-label { color: var(--fleet-your-move); }
.tasks-lane-state-awaiting-signoff .tasks-lane-label::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px; background: var(--fleet-your-move); vertical-align: middle;
}
.tasks-lane-state-pending-merge .tasks-lane-label { color: var(--fleet-amber, #ffb020); }
.tasks-lane-state-pending-merge .tasks-lane-label::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px; background: var(--fleet-amber, #ffb020); vertical-align: middle;
}
.tasks-lane-state-in-progress .tasks-lane-label { color: var(--pw-green, #46d55a); }
.tasks-lane-state-in-progress .tasks-lane-label::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px; background: var(--pw-green, #46d55a); vertical-align: middle;
}
.tasks-lane-state-awaiting-reply .tasks-lane-label { color: var(--text-muted); }
.tasks-lane-state-awaiting-reply .tasks-lane-cards { opacity: 0.92; }

/* Sort dropdown + cascading second dropdown (task daadab16). Same toolbar
   width class as the old episode filter so phone layout doesn't shift. */
.tasks-sortby,
.tasks-sortby-sub {
  background: rgba(0,0,0,0.32);
  color: var(--text-primary);
  border: 1px solid var(--fleet-hair);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--fleet-text);
  font-size: 0.78rem;
  cursor: pointer;
}
.tasks-sortby-sub { margin-left: 6px; }

.tasks-lane-cards {
  /* Single full-width column: collapsed pills stack as long rows in lane order
     (Jase 2026-07-16 — "a long single pill that all stack on top of each other").
     The expanded card keeps grid-column:1/-1, so its size/shape is pixel-identical
     to before — only the collapsed pills change from a 3-across grid to rows. */
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

/* ---- cards: fleet-card idiom, rail = status ---- */
.tasks-card {
  position: relative; padding: 11px 13px 12px 16px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--fleet-hair); overflow: hidden;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer;
  animation: fleet-rise 0.42s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(0.04s * var(--i, 0) + 0.12s);
}
.tasks-card::before { /* 4px status rail down the left edge */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--rail, var(--fleet-none));
}
.tasks-card:hover { border-color: rgba(255,255,255,0.16);
  box-shadow: 0 14px 34px -20px rgba(0,0,0,0.8); }
.tasks-card-in_progress { --rail: var(--fleet-working); }
.tasks-card-dispatched  { --rail: var(--fleet-working); }
.tasks-card-queued      { --rail: var(--fleet-waiting); }
.tasks-card-returned    { --rail: var(--fleet-your-move); }
.tasks-card-blocked     { --rail: var(--fleet-dead); }
.tasks-card-done        { --rail: var(--fleet-resting); }
.tasks-card-awaiting_signoff { --rail: var(--fleet-your-move); }   /* amber — owes admin a tap */
.tasks-card-returned::before,
.tasks-card-blocked::before,
.tasks-card-awaiting_signoff::before { animation: fleet-pulse 1.3s ease-in-out infinite; }

/* center (not baseline) so the head Done button aligns cleanly with the title/
   age text (Option B) instead of hanging off a text baseline */
.tasks-card-head { display: flex; align-items: center; gap: 8px; }
.tasks-title { font-family: var(--fleet-ink); font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.01em; color: var(--text-primary); line-height: 1.3;
  flex: 1 1 auto; min-width: 0; }
/* right-pinned head group: age + the countdown rail (f426c411), no overlap */
.tasks-head-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tasks-age { font-family: var(--fleet-mono); font-size: 0.66rem; color: var(--text-muted);
  white-space: nowrap; }
/* Done cluster relocated to the meta row (f426c411 render A) — the compact
   sizing follows it there; margin-left:auto pins it to the row's right end.
   The .tasks-done-<state> modifiers ride the button unchanged: nothing in the
   meta row styles bare state classes, so no collision (checked vs .tasks-done,
   the DONE-section class — different name, untouched). */
.tasks-card-meta .tasks-done-btn { font-size: 0.58rem; padding: 3px 9px; letter-spacing: 0.06em; margin-left: auto; }
.tasks-card-meta .tasks-human-donemark { font-size: 0.62rem; margin-left: auto; }
.tasks-card-meta .tasks-await-mark { margin-left: auto; }