@layer components {
  /* ——— Rows picked by their boxes, and the bar that acts on them ———
     No controller: the boxes keep the count themselves, a CSS counter read
     back in the bar, which follows them in the page; the bar stands only
     while one is checked (:has); and Clear is the form's own reset. */
  .selection {
    --selection-box: 1rem;

    counter-reset: picked;

    li {
      position: relative;
    }
  }

  /* A box beside each row, in the margin before it, so the row does not move
     when it appears: the pointer brings it, a phone keeps it, and once one is
     checked every box stays — picking has begun. */
  /* On the row's own line — the middle of its lead box — and not the middle
     of the item, which grows when a folder opens in place. */
  .selection__box {
    position: absolute;
    inset-block-start: calc(0.75rem + 1.25rem);
    inset-inline-start: calc(-1 * (var(--selection-box) + 0.875rem));
    translate: 0 -50%;
    margin: 0;
    opacity: 0;

    &:checked {
      counter-increment: picked;
    }
  }

  .selection li:is(:hover, :focus-within) .selection__box,
  .selection:has(.selection__box:checked) .selection__box {
    opacity: 1;
  }

  @media (any-hover: none) {
    .selection__box {
      opacity: 1;
    }
  }

  /* A door keeps its corner clear for the box wherever the box stands for
     good: on a finger's screen, and once picking has begun. */
  @media (any-hover: none) {
    .selection {
      --door-under-box: 2rem;
    }
  }

  .selection:has(.selection__box:checked) {
    --door-under-box: 2rem;
  }

  /* A narrow sheet has no margin to spare, so a row makes room for its box. */
  @container main (width < 40rem) {
    .selection .rows > li {
      padding-inline-start: calc(var(--selection-box) + var(--inline-space));
    }

    .selection .rows .selection__box {
      inset-inline-start: 0;
    }
  }

  /* On a tile the box sits in its corner, over the picture, and a picked
     tile wears the selected ink round its edge. */
  .selection .tiles .selection__box {
    z-index: var(--z-raised);
    inset-block-start: var(--inline-space);
    inset-inline-start: var(--inline-space);
    translate: none;
  }

  .selection .tiles > li:has(.selection__box:checked) .tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 calc(var(--border-size) * 2) var(--color-selected-ink);
    pointer-events: none;
  }

  /* The bar floats at the foot of the sheet, over the fixed footer, while
     rows are picked, dressed as every float is (HANSHI, Shape & elevation):
     the count and Clear at its start, then the verbs, Archive and Trash last
     after a hairline, Trash in the destructive ink (HANSHI, Buttons). */
  /* Above the rows it floats over: their pictures and boxes are raised to
     take their own clicks, and showed through it. */
  .bulk-bar {
    position: sticky;
    z-index: var(--z-popup);
    inset-block-end: calc(var(--footer-height) + var(--block-space));
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inline-space-half);
    margin-block-start: 1.75rem;
    padding: var(--inline-space) var(--inline-space) var(--inline-space) var(--inline-space-double);
    background-color: var(--color-canvas);
    border-radius: var(--border-radius-float);
    box-shadow: var(--shadow);

    .selection:has(.selection__box:checked) & {
      display: flex;
    }
  }

  .bulk-bar__count {
    display: flex;
    align-items: baseline;
    gap: var(--inline-space);
    margin-inline-end: auto;
    font-size: var(--text-small);

    span::before {
      content: counter(picked) " ";
      font-weight: 600;
    }
  }

  .bulk-bar__divider {
    inline-size: var(--border-size);
    block-size: 1.375rem;
    margin-inline: var(--inline-space-half);
    background-color: var(--color-line);
  }

  .bulk-bar__trash {
    --btn-color: var(--color-negative-ink);
  }

  /* A phone keeps Move… and Download in the bar, Download as its glyph, and
     the rest behind a ⋯ — the wide bar's verbs, in a menu. */
  .bulk-bar__more {
    display: none;
  }

  @container main (width < 40rem) {
    .bulk-bar__wide {
      display: none;
    }

    .bulk-bar__more {
      display: inline-flex;
    }

    .bulk-bar__download-label {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }
  }
}