@layer components {
  /* A file in rich text: one anatomy, the editor's, on both sides of the
     glass (active_storage/blobs/_blob draws the gem's own figure; the one
     anatomy ruling, docs/planning/documents-writing.md §2.3). The gem draws
     the component — a file's kind on a small page, its row, the preview, the
     gallery — in lexxy-content.css; this file says only where ours differs.

     The page's colour says the kind of file, in the inks the app already
     spends: documents in the mizu ink (lexxy.css maps the gem's blue to the
     subtle ink everywhere else), slides and design files in the red ink,
     sheets in the green — the -ink tones, because the extension is text.
     Code keeps the gem's purple, which lexxy.css maps to the subtle ink. */
  .attachment {
    --lexxy-color-blue: var(--color-selected-ink);
    --lexxy-color-red: var(--color-accent-ink);
    --lexxy-color-green: var(--color-positive-ink);
  }

  /* A smaller page with a heavier frame than the gem's. */
  .attachment__icon {
    block-size: 2.5lh;
    padding-inline: 0.5ch;
    border-width: 2px;
    border-block-start-width: 1ch;
  }

  /* A file's row runs the width of the text, from its start edge. */
  .attachment--file {
    gap: 1ch;
    inline-size: 100%;
    margin-inline: 0;
  }

  /* Read, a file's whole figure is its download: the link wraps the figure
     and says nothing of its own — the name is already strong, and the
     gem's underline would run under the icon too. */
  .attachment__download {
    display: block;
    color: inherit;
    text-decoration: none;
  }
}