@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;
  }

  .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"]) .task-item-title a {
    --color-link: var(--color-accent-strong);
    --color-link-hover: var(--color-text);
  }
}