/* Every Layout primitives (CUBE: composition). */

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack-gap, var(--space-m)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-s));
  align-items: var(--cluster-align, center);
  justify-content: var(--cluster-justify, flex-start);
}

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-l));
}
.sidebar > :first-child { flex-basis: var(--sidebar-width, 16rem); flex-grow: 1; }
.sidebar > :last-child { flex-basis: 0; flex-grow: 999; min-width: var(--sidebar-content-min, 50%); }

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-m));
}
.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

.cover {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--space-m);
}
.cover > * { margin-block: var(--space-s); }
.cover > :first-child:not(main) { margin-block-start: 0; }
.cover > :last-child:not(main) { margin-block-end: 0; }
.cover > main { margin-block: auto; }

.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-width: var(--center-max, 60rem);
  padding-inline: var(--space-m);
}