@layer components {
  /* ——— A folder's page: its head ———
     The title and New on one line. Under it the filters at the start, and
     Filter…, the order and list | grid at the end. The line never changes
     with what is picked: every chip of a kind the folder holds is drawn
     whichever one is on, and the controls stand while the folder holds
     anything — so a chip reads as a filter, not as a new page. Their rows are
     utilities (the view); the space each keeps is its own. */
  .vault-head {
    margin-block: var(--block-space-double) 0.875rem;
  }

  .vault-controls {
    gap: 0.625rem;
    margin-block-end: var(--block-space-half);
  }

  /* Filter… on its line (filters.css), as wide as the head allows it. */
  .vault-filter {
    inline-size: 9.5rem;
  }

  /* A zip that landed, with air between it and the rows. */
  .vault-exports:has(> *) {
    margin-block-end: var(--block-space);
  }

  /* "Keep folders open", quietly under the controls, at their end. */
  .vault-keep-open {
    margin-block-end: var(--inline-space-half);

    input {
      margin: 0;
      accent-color: var(--color-ink);
    }
  }
}