@layer cards {
  /* CARDS — a responsive, self-contained card composition.
     Drop-in: link AFTER layout.css so this layer wins on card specifics.
     Markup the content branch clones from the <template> pool (one per card block):
       <app-card><h2></h2><p></p></app-card>
     A <section> that HOLDS cards becomes a responsive auto-fit grid. Per D7460N,
     the <section> (layout) carries the track sizing; the CARD (content) carries the
     padding/spacing — sections themselves have no padding/margin. */

  /* The card section: intrinsic auto-fit grid — 2-up on wide, 1-up when narrow. */
  section:has(app-card) {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
    margin-inline: 1rem;
  }

  app-card {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    /* Uses the color-scheme token when present, else a subtle system-color tint. */
    background: var(--bg-panel, color-mix(in oklch, currentColor 5%, transparent));
    outline: 0.0625rem solid color-mix(in oklch, currentColor 12%, transparent);
    outline-offset: -0.0625rem;
  }

  app-card > * { margin: 0; }
  app-card > h2 { font-size: 1.25rem; line-height: 1.2; }
  app-card > p { text-wrap: pretty; }
}