/* Cover knobs are registered non-inheriting, so each cover's knobs stay on
   that cover and never reach a nested cover (set on an ancestor they do
   nothing). syntax "*" with no initial value, so var() falls back when unset:
   every browser drops a rule whose initial-value is relative (1rem, 100svh). */
@property --cover-min-block-size {
  syntax: "*";
  inherits: false;
}

@property --cover-padding {
  syntax: "*";
  inherits: false;
}

@property --cover-space {
  syntax: "*";
  inherits: false;
}

.cover {
  /* --cover-space is read by the children, which a non-inheriting knob never
     reaches: resolve it here into a private variable the children inherit.
     Every .cover resets it, so a nested cover's children get their own default. */
  --_cover-space: var(--cover-space, 1rem);
  display: flex;
  flex-direction: column;
  min-block-size: var(--cover-min-block-size, 100svh);
  padding: var(--cover-padding, 1rem);
}

.cover > * {
  margin-block: var(--_cover-space, 1rem);
}

.cover > :first-child:not(.centered, h1) {
  margin-block-start: 0;
}

.cover > :last-child:not(.centered, h1) {
  margin-block-end: 0;
}

/* The centred child: .centered if there is one, otherwise the h1. Two rules,
   not one list: a browser without :has() drops a whole selector list, and
   .centered must still work there. */
.cover > .centered {
  margin-block: auto;
}

.cover:not(:has(> .centered)) > h1 {
  margin-block: auto;
}

/* The first/last-child resets above skip every h1 so a centred h1 keeps its
   auto margins. When a .centered sibling takes the centre instead, the h1 is
   an ordinary child again and gets the same edge reset as any other. */
.cover:has(> .centered) > h1:first-child:not(.centered) {
  margin-block-start: 0;
}

.cover:has(> .centered) > h1:last-child:not(.centered) {
  margin-block-end: 0;
}