/* ============================================================================
   COMPONENT: plan-task — a Care Plan task row (read-only list for now; the
   completion grid arrives with FEA-0012).
   ========================================================================== */

@layer components {
  .plan-task-list { list-style: none; margin: 0; padding: 0; }

  .plan-task {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-block-size: var(--touch-target);
    padding-block: var(--space-2xs);
  }

  .plan-task__kind { display: inline-flex; color: var(--color-text-muted); flex: none; }
  .plan-task__title { flex: 1; }
  .plan-task__days { font-size: var(--text-sm); flex: none; }

  /* Grid completion slot (FEA-0012). One task per row; the row never wraps. */
  .plan-task { flex-wrap: nowrap; }
  .plan-task__title { min-inline-size: 0; }
  .plan-task__action { flex: none; display: inline-flex; align-items: center; gap: var(--space-2xs); }
  /* .plan-task__check (44px tap target + Dusk styling) lives in checkbox.css. */

  /* Optimistic completion (D-03): a just-checked row dims slightly until the
     team's realtime morph confirms who-did-it. Honors reduced-motion. */
  .plan-task--pending { opacity: 0.6; transition: opacity 120ms ease; }
  @media (prefers-reduced-motion: reduce) {
    .plan-task--pending { transition: none; }
  }
  .plan-task__count, .plan-task__by { font-size: var(--text-sm); }
  .plan-task__detail { display: block; font-size: var(--text-sm); }
  .plan-task__manage { --cluster-gap: var(--space-2xs); flex: none; }

  /* Window indicator (D-03): the time band the safety net watches. */
  .plan-task__window {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs, 0.125rem);
    white-space: nowrap;
  }
}