/* ---------------- left: task checklist ---------------- */
  .rail{ min-height:0; }
  .meter{ display:flex; gap:4px; margin:0 0 8px; flex-shrink:0; }
  .meter .seg{ flex:1; height:6px; border-radius:3px; background:var(--line); transition:background-color .4s ease; }
  .meter .seg.current{ background:var(--blue); animation:pulseOpacity 1.2s ease-in-out infinite; }
  .meter .seg.done{ background:var(--green); }
  .meter .seg.blocked{ background:var(--amber); animation:pulseOpacity 1.2s ease-in-out infinite; }
  .meter .seg.failed{ background:var(--red); }
  .task-status-summary{ margin-bottom:12px; font-size:11px; line-height:1.5; color:var(--ink-dim); }
  .task-status-summary.all-done,.heading-hint.all-done{ color:var(--green); }
  .task-status-summary.has-blocked{ color:var(--amber); }
  #tasksPanel{ flex:1; min-height:0; overflow-y:auto; padding-right:2px; display:flex; flex-direction:column; gap:8px; }
  .tasks-empty{ margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-faint); }

  /* Status gets its own row above the task, so the task text and its evidence
     flow through the card's full width instead of wrapping around a chip. */
  .task-card{
    display:grid; grid-template-columns:15px 1fr; align-items:center; gap:2px 8px;
    padding:8px 10px 9px; border:1px solid var(--line-soft); border-left:2px solid var(--line);
    border-radius:7px; background:var(--panel);
    transition:border-color .35s ease, background .35s ease;
  }
  /* A task arrives and leaves in place, so the panel reads as the plan changing
     rather than as the list being rebuilt. */
  @keyframes taskIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes taskOut{
    from{ opacity:1; max-height:160px; padding-top:8px; padding-bottom:9px; }
    to{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; }
  }
  .task-card{ animation:taskIn .3s cubic-bezier(.22,.61,.36,1); }
  .task-card.leaving{ animation:taskOut .26s ease forwards; overflow:hidden; pointer-events:none; }
  .task-card .mark{ grid-column:1; grid-row:1; }
  .task-card .chip{ grid-column:2; grid-row:1; justify-self:start; }
  .task-card.current{ border-left-color:var(--blue); border-color:rgba(37,99,235,0.22); background:rgba(37,99,235,0.05); }
  .task-card.done{ border-left-color:var(--green); background:#f4fbf6; }
  .task-card.blocked{ border-left-color:var(--amber); background:rgba(180,83,9,0.05); }
  .task-card.failed{ border-left-color:var(--red); background:rgba(220,38,38,0.05); }

  .mark{ flex-shrink:0; width:15px; margin-top:1px; font-size:13px; line-height:15px; text-align:center; }
  .mark.todo{ color:var(--ink-faint); }
  .mark.current{ color:var(--blue); }
  .mark.done{ color:var(--green); }
  .mark.blocked{ color:var(--amber); }
  .mark.failed{ color:var(--red); }
  .blink-block{ display:inline-block; animation:pulseOpacity 1.1s ease-in-out infinite; }
  .check-pop{ display:inline-block; animation:popIn .3s cubic-bezier(.34,1.56,.64,1); }
  @keyframes popIn{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }
  .loader{ display:inline-block; width:13px; height:13px; border-radius:50%; border:2px dotted var(--blue); animation:spin 1s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .task-body{ grid-column:1 / -1; grid-row:2; min-width:0; }
  .task-text{ font-size:13px; line-height:1.45; color:var(--ink-dim); overflow-wrap:anywhere; }
  .task-card.current .task-text{ color:var(--ink); font-weight:600; }
  .task-card.done .task-text{ color:#315a3b; font-weight:400; }
  .task-card.blocked .task-text, .task-card.failed .task-text{ color:var(--ink); font-weight:600; }
  /* Evidence is shown whole - it is the record of what actually happened - but
     stays visually subordinate to the task itself. */
  .task-evidence{
    display:block; margin-top:4px; font-size:11.5px; line-height:1.45; color:var(--ink-dim); overflow-wrap:anywhere;
    animation:fadein .3s ease;
  }
  .task-evidence[hidden]{ display:none; }
  @keyframes fadein{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:translateY(0); } }

  .chip{
    flex-shrink:0; white-space:nowrap;
    padding:2px 5px; border-radius:4px;
    font-size:8.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
    color:var(--ink-faint); background:rgba(154,160,172,0.14);
  }
  .chip.current{ color:var(--blue); background:rgba(37,99,235,0.12); }
  .chip.done{ color:var(--green); background:rgba(21,128,61,0.12); }
  /* Archived sessions report "complete" / "active", not the live "done". */
  .chip.complete{ color:var(--green); background:rgba(21,128,61,0.12); }
  .chip.active{ color:var(--amber); background:rgba(180,83,9,0.13); }
  .chip.blocked{ color:var(--amber); background:rgba(180,83,9,0.13); }
  .chip.failed{ color:var(--red); background:rgba(220,38,38,0.12); }
  .chip.incomplete{ color:var(--ink-dim); background:rgba(154,160,172,0.18); }