@layer components {
  [role="list"] {
    --flow-space: 0.5em;
  }

  /* Constrain the breakout click area to each list item */
  .task-item {
    --task-item-z-index: 1;
    position: relative;
    z-index: var(--task-item-z-index);
    display: grid;
    grid-template-areas: "secondary primary due";
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0 1rem;
    cursor: pointer;
  }

  .task-item-primary {
    grid-area: primary;
  }

  .task-item-secondary {
    grid-area: secondary;
  }

  .task-item-due {
    grid-area: due;
  }

  /* Semantic breakout: extend the primary link to cover the full <li> */
  .task-item-primary-action {
    position: static;
  }

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

  /* Elevate all interactive children above the breakout overlay */
  .task-item :where(a, button, input, select, textarea, [tabindex]):not(.task-item-primary-action) {
    position: relative;
    z-index: calc(var(--task-item-z-index) + 1);
  }

  /* Focus: show outline on the list item when the primary link is focused */
  .task-item:focus-within {
    outline: 2px solid theme(--color-teal-600);
    outline-offset: 2px;
  }

  @media (prefers-color-scheme: dark) {
    .task-item:focus-within {
      outline-color: theme(--color-teal-400);
    }
  }

  .task-item:focus-within:has(:focus-visible) {
    outline: 2px solid theme(--color-teal-600);
    outline-offset: 2px;
  }

  .task-item:focus-within:not(:has(:focus-visible)) {
    outline: none;
  }

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