@layer blocks {
  .task-edit {
    --task-edit-gap: var(--space-quarter); /* same as .task-item row gap */
    --task-edit-mark: var(--space-half); /* mock pencil 17px, near the checkbox */
    --cluster-space: var(--task-edit-gap);
    --flow-space: var(--space-quarter);
    --repel-gap: var(--space-half);
    padding-block: var(--space-1);
  }

  .task-edit-mark {
    flex: none;
    color: var(--color-accent-strong);
  }

  .task-edit-mark svg {
    width: var(--task-edit-mark);
    height: var(--task-edit-mark);
  }

  .task-edit-line :is(.write-line, .task-item) {
    flex: 1;
    min-inline-size: 0;
  }

  .task-edit-line .write-line {
    inline-size: auto;
  }

  /* Wrapped buttons keep a half cell between rows so their hit areas
     don't overlap. */
  .task-edit-actions {
    --cluster-space: var(--space-half) var(--task-edit-gap);
    padding-inline-start: calc(var(--task-edit-mark) + var(--task-edit-gap));
  }
}