@layer components {
  .tap-target {
    display: none;
  }

  @media (pointer: coarse) {
    .board-item,
    .task-item,
    .list-item {
      min-height: var(--tap);
    }

    .item-check,
    .btn-icon,
    .btn-icon-sm,
    .menu-trigger,
    .mobile-menu-toggle {
      width: var(--tap-control);
      height: var(--tap-control);
    }

    .area-handle,
    .board-hint {
      width: var(--tap-control);
      height: var(--tap-control);
    }

    .board-archive-toggle,
    .lane-more,
    .board-item-actions,
    .task-actions {
      padding-block: var(--space-2);
    }

    /* Nothing hovers on a touch screen, and the title now opens the rename
       rather than the task, so the way into the task has to stand in the row.
       Only that one: the rest of the row's controls live inside the task, and
       five icons on a phone push every row onto a second line. */
    .board-item-actions {
      position: static;
      transform: none;
      opacity: 1;
      margin-left: auto;
      padding-left: 0;
      background: none;
    }

    .board-item-actions > *:not(.board-item-open) {
      display: none;
    }

    .btn-sm,
    .board-archive-toggle,
    .lane-more,
    .day-section-head,
    .mention-option,
    .page-section-head {
      min-height: var(--tap-control);
    }

    .task-checkbox-form {
      position: relative;
    }

    .tap-target {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: var(--tap-control);
      height: var(--tap-control);
      transform: translate(-50%, -50%);
    }
  }
}