/* 05-objects/_objects.css — structural primitives. Layout only, NO color/skin.
   (One file here; in the Rails app these split one-per-object.) */

/* o-appshell — the full-viewport program frame: fixed bars top & bottom, body scrolls between */
.o-appshell {
  min-height: 100svh;
  display: grid;
  grid-template-rows: var(--bar-h) 1fr var(--bar-h);
}
.o-appshell__body {
  overflow-y: auto;
  padding: var(--space-lg) var(--gutter-page) var(--space-2xl);
}

/* o-stack — vertical rhythm */
.o-stack { display: flex; flex-direction: column; gap: var(--gap-stack); }
.o-stack--tight { gap: var(--space-sm); }
.o-stack--loose { gap: var(--space-xl); }

/* o-cluster — wrapping horizontal row */
.o-cluster { display: flex; flex-wrap: wrap; gap: var(--gap-cluster); align-items: center; }
.o-cluster--tight { gap: var(--space-2xs); }

/* o-repel — push apart (menu bar items, panel title row) */
.o-repel { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: space-between; }

/* o-container — centered cap */
.o-container { width: 100%; max-width: var(--shell-max); margin-inline: auto; }
.o-container--wide { max-width: var(--measure-wide); }

/* o-measure — bounded reading column */
.o-measure { max-width: var(--measure); }

/* o-grid — intrinsic auto-fit, no media queries */
.o-grid { display: grid; gap: var(--gap-stack); grid-template-columns: repeat(auto-fit, minmax(min(100%, 28ch), 1fr)); }
.o-grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 40ch), 1fr)); }

/* o-split — fixed two-column (prose | diagram); collapses on narrow */
.o-split { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .o-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
/* --aside — the yellow box is a one-third sidebar, not a half */
@media (min-width: 56rem) { .o-split--aside { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
/* --aside-left — same one-third sidebar, but the box leads and the prose follows */
@media (min-width: 56rem) { .o-split--aside-left { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }