@layer components {
  /* ——— A row of Docs & Files ———
     Every kind on one grid, so a folder, a document and a picture line up:
     a column for a folder's chevron, kept empty on every other row; the
     lead, one 2.5rem box for a folder's glyph, a document's, a file's
     picture or a PDF's first page; the words; and what trails them — the
     dotted comment count, or an open folder's own list | grid. */
  .file-row {
    --icon-size: 1.375rem;

    position: relative;
    display: grid;
    grid-template-columns: 1.25rem 2.5rem minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    align-items: center;
    padding-block: 0.75rem;
  }

  /* The dock card's lines: no chevron, and the card's gap is their air. */
  .file-row--brief {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    padding-block: 0;
  }

  .file-row__lead {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    aspect-ratio: 1;
    color: var(--color-ink-subtle);
    border-radius: var(--border-radius);
    overflow: clip;

    img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  /* A PDF's first page, whole, on paper with a hairline edge. */
  .file-row__lead--page {
    background-color: var(--color-canvas);
    border: var(--border);

    img {
      object-fit: contain;
    }
  }

  /* The name is the row's door, stretched over the whole row. What has a
     door of its own — the chevron that opens a folder in place, a picture's
     lightbox, the count, an open folder's switch — stands above it. */
  .file-row__door::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .file-row__chevron,
  a.file-row__lead,
  .file-row__trail {
    position: relative;
    z-index: var(--z-raised);
  }

  .file-row__chevron {
    --icon-size: 1rem;

    display: grid;
    place-items: center;
    block-size: 2.5rem;
    color: var(--color-ink-subtle);
    cursor: pointer;
  }
}