@layer components {
  /* A panel

     The background box, and there is one. Sunk paper inside a faint line, the
     panel corner, and no shadow — this sits *in* the page rather than over it,
     and a shadow is what the product spends on the things that lift off it: a
     menu, the palette, a toast.

     It was two for a while — a white card with a shadow, and --sunk for the
     one on the workspace page — and the two appeared on the same screen. The
     Members page showed a sunk panel of facts above two lifted white ones
     holding forms, which read as three kinds of importance where there was
     only one kind of box.

     A card is a panel, so it takes the column like every other panel. What is
     inside it is what sits on the measure — see .form in forms.css. Capping
     the card itself is what put two half-width panels under a full-width list
     on the Members page, with five hundred pixels of empty paper beside them. */
  .card {
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
  }

  /* A panel's own heading. It names the box rather than opening a section of
     the page, so it is set at the row-title size and not at the section size —
     an <h2> at 30px inside a panel competes with the page's own title, and on
     the Members page there were two of them doing it. */
  .card__title { font-size: var(--text-md); letter-spacing: var(--tracking-tight); }

  /* A one-line notice at the head of a page — this task is in the trash, this
     project is archived — with the way out of it on the right. The panel's own
     padding is meant for a panel of content and makes a single sentence look
     like a section, so it is a strip: the same paper and the same corner, at
     the height of the control it carries. */
  .card--banner { padding: var(--space) var(--space-2) var(--space) var(--space-3); }

  /* On a phone the panel keeps its shape and gives back the padding it does
     not have the room for. */
  @media (max-width: 40rem) {
    .card { padding: var(--space-3); }
  }
}