@layer components {
  .panel {
    background-color: var(--panel-bg, var(--color-canvas));
    border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-ink-lighter));
    border-radius: var(--panel-border-radius, 1em);
    color: var(--color-ink);
    inline-size: var(--panel-size, 100%);
    max-inline-size: 100%;
    padding-block: var(--panel-padding-block, var(--block-space-half));
    padding-inline: var(--panel-padding-inline, var(--block-space));

    @media (min-width: 640px) {
      padding-block: var(--panel-padding-block, var(--block-space));
      padding-inline: var(--panel-padding-inline, var(--block-space-double));
    }
  }

  .panel--wide {
    --panel-size: 80ch;
  }

  .panel--centered {
    --panel-border-size: 0;

    @media (min-width: 640px) {
      --panel-size: 42ch;
    }

    #main:has(&) {
      display: grid;
      justify-content: center;
      margin-block: auto;
    }
  }

  .panel--shaded {
    --panel-bg: var(--color-ink-lightest);
    --panel-border-size: 0;
  }

  /* A section heading row with actions ("Positions" + Buy/Sell). The
     buttons' extra height is absorbed with negative block margins so the
     row stays exactly one heading tall — the gap below the heading then
     matches sections whose headings have no buttons. */
  .section-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-block-end: var(--block-space);

    > :not(h2) {
      margin-block: -0.5em;
    }
  }
}