@layer components {
  /* Panels — the raised surface a section of a screen sits on.
   *
   * A card is this with --interactive. There is no separate card component:
   * the difference between "a box with a heading" and "a box you can click" is
   * a hover treatment, not a second set of markup.
   */
  .panel {
    --panel-background: var(--color-canvas);
    --panel-padding: var(--space-and-half);
    --panel-radius: var(--radius-large);
    --panel-shadow: var(--shadow-card);
    --panel-border-color: transparent;

    padding: var(--panel-padding);
    border: var(--border-width) solid var(--panel-border-color);
    border-radius: var(--panel-radius);
    background: var(--panel-background);
    box-shadow: var(--panel-shadow);

    h2 {
      margin-block-start: 0;
    }
  }

  .panel__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space);
    margin-block-end: var(--space);
  }

  .panel__title {
    margin: 0;
    font-size: var(--text-medium);
    font-weight: var(--weight-bold);
  }

  /* .panel__footer is in footer.css, with the other three. */

  /* Variants */

  /* For a panel whose content brings its own padding — a table, a list, an
     image. overflow clips the content back to the corner radius. */
  .panel--flush {
    --panel-padding: 0;

    overflow: hidden;
  }

  /* A flush panel holding a table wider than itself (.table--wide), scrolled
     along rather than cut off at the edge of a phone. Any overflow but visible
     still clips to the corners, so it keeps the radius --flush is for. A div
     around the table, because a table element will not scroll; positioned, so
     a hidden label in a far column is clipped here rather than giving the page
     a scrollbar of its own — the rule .screen__scroll learned. */
  .panel--scroll {
    position: relative;
    overflow-x: auto;
  }

  /* Generous, and growing with the viewport — for a panel that is the whole
     point of its screen rather than one section of it: a sign-in card, a wizard
     step. */
  .panel--roomy {
    --panel-padding: clamp(var(--space-and-half), 4vw, var(--space-triple));
  }

  /* A row in a list: tighter, and a smaller radius because a stack of large
     ones reads as a pile of cards rather than a list. */
  .panel--row {
    --panel-padding: var(--space-three-quarters) var(--space);
    --panel-radius: var(--radius);
  }

  /* Outlined rather than raised, for a panel nested inside another one where a
     second shadow reads as clutter. */
  .panel--quiet {
    --panel-background: transparent;
    --panel-border-color: var(--color-border);
    --panel-shadow: none;
  }

  /* The card. Lifts under the pointer so it reads as a target. */
  .panel--interactive {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--transition-fast), translate var(--transition-fast);

    @media (any-hover: hover) {
      &:hover {
        --panel-shadow: var(--shadow-overlay);

        translate: 0 calc(var(--space-eighth) * -1);
      }
    }
  }
}