@layer components {
  /* ====================================================================
     Bucket cards — Home's project tiles and the dock tool's frame
     ====================================================================
     Named `bucket-card`, not `card`: `.card` and `.cards` belong to the card
     table's board, ported from fizzy, where `.cards` is a COLUMN and `.card`
     is one card on it. Two components cannot share a name, and the board's
     copy is the one that must stay byte-identical to its source. */

  /* Bucket cards on Home: whitespace does the grouping, one hairline each. */
  .bucket-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--block-space);
  }

  /* A column with presence: title row up top, the avatar strip pinned to the
     foot, and enough minimum height that a bare card still reads as a place
     (user, 2026-08-06). Everything else stays at sheet 05's ceiling — one
     hairline, flat radius, no shadow. */
  .bucket-card {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    min-block-size: var(--card-min-height, 9rem);
    padding: var(--block-space) var(--inline-space-double);
    color: var(--color-ink);
    background-color: var(--color-surface);
    border: var(--border);
    border-radius: var(--border-radius);
    text-decoration: none;

    > .avatars {
      margin-block-start: auto;
    }
  }

  /* A card that carries a second control can no longer *be* a link — a button
     nested in an anchor is invalid and browsers un-nest it silently, which
     breaks whichever of the two you notice second. So the title's link stretches
     over the whole card instead. */
  .bucket-card__link {
    color: var(--color-ink);
    text-decoration: none;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
    }
  }

  /* And every CONTROL in the card is positioned, so the overlay cannot
     swallow its clicks. Document order is not enough: unpositioned content
     paints *below* a positioned overlay however late it comes, which fails
     only in a real browser and only on whichever control was added last.
     Controls, not `.bucket-card > *`: positioning a wrapper (the header)
     re-anchors the overlay to that wrapper and shrinks the link to a strip —
     the same bug from the other side. `position: relative` with no offsets
     moves nothing. */
  .bucket-card :is(.btn, button) {
    position: relative;
  }
}