@layer components {
  .panel {
    background-color: var(--color-surface);
    border: var(--border);
    color: var(--color-ink);
    border-radius: var(--panel-border-radius, 1em);
    padding: calc(var(--block-space) * 2);
    /* position: relative; */

    html[data-theme="dark"] & {
      --panel-border-color: var(--color-gray-dark);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        --panel-border-color: var(--color-gray-dark);
      }
    }
  }

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

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

  .panel--narrow {
    inline-size: var(--panel-size, 40ch);
    max-inline-size: calc(100% - var(--inline-space) * 2);
  }

  /* 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, 1em);
    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);
  }

  .panel__close {
    border: 0;
    font-size: 0.6rem;
    inset: calc(var(--block-space) / 3) calc(var(--block-space) / 3) auto auto;
    position: absolute;
  }
}