@layer components {
  .panel {
    background-color: var(--color-surface);
    border: var(--border);
    color: var(--color-ink);
    border-radius: var(--panel-border-radius);
    padding: var(--block-space-double);
    /* position: relative; */
  }

  .panel--small {
    display: flex;
    background-color: var(--color-surface);
    border: var(--border);
    color: var(--color-ink);
    border-radius: var(--border-radius);
    padding: var(--block-space-half);

    @media (min-width: 50rem) {
      padding: var(--block-space-half) var(--block-space);
    }
  }

  /* Info box — the unified inline info/legal/warning/status panel.
     Shape and spacing live here; color comes from a single variant class that
     sets --info-box-fill / --info-box-ink / --info-box-border. Views pick one
     semantic variant (info/warning/success/danger/neutral) instead of hand-syncing
     fill-*, txt-*, and border-* utilities. */
  .info-box {
    --info-box-fill: var(--color-gray-lightest);
    --info-box-ink: var(--color-ink);
    --info-box-border: var(--color-gray-dark);

    background-color: var(--info-box-fill);
    color: var(--info-box-ink);
    border: var(--border-size) solid var(--info-box-border);
    border-radius: var(--panel-border-radius);
    padding-block: var(--block-space);
    padding-inline: var(--inline-space-double);
    font-size: var(--font-small-responsive);

    & > :first-child { margin-block-start: 0; }
    & > :last-child { margin-block-end: 0; }

    & a:not(.btn) {
      color: var(--info-box-ink);
      text-decoration: underline;
      text-decoration-skip-ink: auto;
    }
  }

  .info-box--info {
    --info-box-fill: var(--color-blue-light);
    --info-box-ink: var(--color-blue);
    --info-box-border: var(--color-blue);
  }

  .info-box--warning {
    --info-box-fill: var(--color-yellow-light);
    --info-box-ink: var(--color-yellow-dark);
    --info-box-border: var(--color-yellow);
  }

  .info-box--success {
    --info-box-fill: var(--color-green-light);
    --info-box-ink: var(--color-green-dark);
    --info-box-border: var(--color-green);
  }

  .info-box--danger {
    --info-box-fill: var(--color-red-lightest);
    --info-box-ink: var(--color-red);
    --info-box-border: var(--color-red);
  }

  .info-box--neutral {
    --info-box-fill: var(--color-gray-lightest);
    --info-box-ink: var(--color-ink-body);
    --info-box-border: var(--color-gray-dark);
  }
}