@layer blocks {
  .task-item {
    --task-item-z-index: 1;
    --repel-gap: var(--space-quarter); /* spec demo-list / product row gap 14px */
    --sidebar-align: center; /* a row laid out as .sidebar (admin users) centres like .repel */
    position: relative;
    z-index: var(--task-item-z-index);
    cursor: pointer;
    min-block-size: var(--grid-cell); /* rows sit on the paper's dot pitch */
    line-height: var(--grid-cell);
    padding-inline: 2px;
    border-radius: var(--radius-s);
  }

  .task-item-content {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* Stays unpositioned so ::before covers the row from .task-item. */
  .task-item-link {
    color: inherit;
    --link-decoration: none;
  }

  .task-item-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--task-item-z-index);
  }

  .task-item :where(a, button, input, select, textarea, [tabindex]):not(.task-item-link) {
    position: relative;
    z-index: calc(var(--task-item-z-index) + 1);
  }

  .task-item:focus,
  .task-item:focus-within:has(:focus-visible) {
    outline: var(--stroke-s) solid var(--color-focus-border);
    outline-offset: 1px;
  }

  .task-item-link:focus-visible {
    outline: none;
  }

  /* Done: a drawn, angled strike. It and the undo link carry the state; the
     text keeps its full colour, so it stays above 4.5:1. The stroke is the
     inline text's background, cloned onto every line it wraps to, so each
     line is struck. 178.4deg tilts the band 1.6deg, rising to the right. The
     text stays unpositioned so .task-item-link::before still covers the row. */
  .task-item[data-state="done"] .task-item-text {
    background: linear-gradient(
      178.4deg,
      transparent calc(54% - var(--stroke-l) / 2),
      var(--color-decorative) 0 calc(54% + var(--stroke-l) / 2),
      transparent 0
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .task-item:is([data-state="done"], [data-state="ghost"], [data-state="preview"], [data-state="moving"]) {
    cursor: default;
  }

  .task-item[data-state="preview"] > span:first-child {
    flex: none;
  }

  .task-item:is([data-state="preview"], [data-state="ghost"], [data-state="moving"]) .title a {
    --color-link: var(--color-accent-strong);
    --color-link-hover: var(--color-text);
  }
}