@layer blocks {
  .task-item {
    --task-item-z-index: 1;
    --repel-gap: var(--space-xs); /* spec demo-list / product row gap 14px */
    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;
  }

  /* Shrink-wraps the title and its tags so the struck rule spans the text and
     nothing more. Positioned only while struck: positioning it always would
     trap .task-item-link::before, which makes the entire row clickable. */
  .task-item-text {
    display: inline-block;
  }

  /* Tags: a quieter aside on the title's line. */
  .task-item .hashes {
    font-size: 0.9em;
    font-weight: var(--weight-normal);
    color: var(--color-text-faint);
  }

  /* 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 (landing demo) and completing (real list): a drawn, angled strike. */
  .task-item:is([data-state="done"], [data-state="completing"]) :is(.task-item-text, .badge) {
    position: relative;
    opacity: 0.55;
  }

  .task-item:is([data-state="done"], [data-state="completing"]) .task-item-text::after {
    content: "";
    position: absolute;
    inset-inline: calc(-1 * var(--space-3xs)) calc(-1 * var(--space-2xs));
    inset-block-start: 54%;
    block-size: var(--stroke-l);
    border-radius: var(--radius-s);
    background: var(--color-decorative);
    rotate: -1.6deg;
  }

  .task-item[data-state="completing"] {
    animation: task-complete 0.4s ease-out forwards;
  }

  @keyframes task-complete {
    70% {
      opacity: 0.5;
      transform: translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateX(var(--space-s));
      max-height: 0;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
  }

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

  .task-item[data-state="ghost"] {
    margin-block-start: var(--space-3xs);
  }

  .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);
  }
}