/*
 * v1.2.49: a completed task card follows the color selected for that task.
 * The background uses a readable tint; its border and checkbox keep the exact
 * selected color. The stable border width prevents layout shifts on checking.
 */
body[data-lt-personalization] .habit-item {
  border-left-width: 6px !important;
  border-left-style: solid !important;
  border-left-color: color-mix(
    in srgb,
    var(--task-color, var(--green)) 24%,
    var(--line)
  ) !important;
}

body[data-lt-personalization] .habit-item.done {
  background: color-mix(
    in srgb,
    var(--task-color, var(--green)) 22%,
    var(--card) 78%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--task-color, var(--green)) 48%,
    var(--line)
  ) !important;
  border-left-color: var(--task-color, var(--green)) !important;
}

body[data-lt-personalization] .habit-item.done .check {
  background: var(--task-color, var(--green)) !important;
  border-color: var(--task-color, var(--green)) !important;
}