/* The surface primitive: one bordered box lifted off the tinted page. Shadow is
   hookable (--panel-shadow) so a flat variant is a one-line override. */

@layer components {
  .panel {
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--panel-shadow, var(--shadow-sm));
    padding: var(--panel-padding, 1rem 1.5ch);
  }

  /* Opt-in vertical stack: children flow in a column with a hookable gap.
     Kept off the base .panel so surfaces that arrange their own contents
     (e.g. .blank-slate) don't inherit a competing layout. */
  .panel--stack {
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap, 1rem);
  }
}