.panel {
  --panel-width: 50ch;
  --panel-padding: 1em;

  inline-size: var(--panel-width);
  margin: calc(var(--navbar-height) - var(--block-space)) auto var(--block-space);
  max-inline-size: 100vw;
  padding: var(--panel-padding);

  @media (min-width: 100ch) {
    --panel-padding: 2em;

    /* The card elevation. `--shadow-panel` is the SAME light stack this used to
       hold inline, but as a dedicated NON-flipping token (see colors.css) so the
       `shadow` theme knob can drive it (none/hard) while it stays identical in
       light AND dark — routing panels through the theme-flipping `--shadow-md`
       would darken them in dark mode. Default appearance is unchanged. */
    box-shadow: var(--shadow-panel);
    background-color: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
  }
}

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

.panel__button {
  inset-block-start: var(--block-space);
  inset-inline-start: var(--block-space);
  position: absolute;
}