.c-panel {
  position: relative;
  background: var(--surface-raised);
  border: var(--bw) solid var(--line);
  padding: var(--pad-panel);
}
/* The title is an ordinary header at the top of the panel, inside the box. It used to be notched
   into the top edge — hung half above the border and masking the rule behind it — which any
   ancestor that scrolled or clipped cut in half, and which broke the corner where the drawn rule
   met the border. The panel's border is a whole box again and the header sits under it. */
.c-panel > .c-panel__title:first-child,
.c-panel__title {
  display: block;
  margin-block-end: var(--space-md);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: inherit;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
/* A panel laid out as a stack spaces its own children, so the header must not space itself too. */
.c-panel.o-stack > .c-panel__title:first-child { margin-block-end: 0; }
.c-panel__title .c-panel__key { color: var(--accent); }
.c-panel--double { border-style: double; border-width: 3px; }
.c-panel--double > .c-panel__title { color: var(--text-bright); }
/* Flush content — a table of nowrap cells, a wide terminal — can outrun a phone's width, so this
   panel scrolls sideways rather than clipping. */
.c-panel--flush { padding: 0; overflow-x: auto; }
/* Only full-bleed content — a table, a terminal, a code block — is meant to reach a flush panel's
   edges. A header or a paragraph left there is indented to the cell padding instead, so it starts
   on the column the cells under it do. */
.c-panel--flush > .c-panel__title:first-child { padding: var(--space-md) var(--space-sm) 0; }
.c-panel--flush > p { padding-inline: var(--space-sm); }
/* A note above a table is a sentence about it, not the first of its rows, so it is set off from the
   header row by the space the panel would have given it if it had any. */
.c-panel--flush > p + * { margin-block-start: var(--space-md); }
.c-panel--accent { border-color: var(--line-strong); }
/* One panel under another is a second box to read rather than the next row of the first, so a
   stacked run of them stands further apart than the stack's own rhythm puts its items. */
.o-stack > .c-panel + .c-panel { margin-block-start: var(--space-md); }