/* OBJECTS — reusable layout patterns. No cosmetics. */

.o-container { max-width: 64rem; margin-inline: auto; padding: var(--space-4); }
.o-container--narrow { max-width: 44rem; }  /* forms and destructive flows */

/* form field row: label left, control right; stacks below 32rem */
.o-field {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: start;
  max-width: 40rem;
  margin-bottom: var(--space-3);
}
@media (max-width: 32rem) { .o-field { grid-template-columns: 1fr; } }

.o-grid {
  display: grid;
  grid-template-columns: 12rem 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
}

.o-table-scroll { overflow-x: auto; }

/* identity row — an avatar beside the name it belongs to, wrapping rather than
   squeezing the text at 320px. `.page-header__identity` is the page-header's own
   instance of this shape (avatar beside the h1); this is the one for a card or a
   row, and it makes no assumption about the heading level inside it. */
.o-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* dashboard — home's card grid. As many 16rem columns as fit, collapsing to one
   at 320px and at 200% zoom without a media query (1.4.10). Cards stretch to
   their row's height so a short card doesn't leave a ragged edge, and shed the
   bottom margin the grid gap already provides. */
.o-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
  align-items: stretch;
  margin-block: var(--space-4);
}
.o-dashboard > .card { margin-bottom: 0; }
/* A summary list inside a dashboard card stacks unconditionally. Its two-column
   grid is sized for a full-width record page, and its stacking rule is a
   *viewport* media query — which can never fire for a 16rem card on a wide
   screen, so a value as ordinary as a written date range wrapped over three
   lines. The container decides here, not the viewport. */
.o-dashboard .summary-list__row {
  grid-template-columns: 1fr;
  gap: var(--space-1);
}

/* home strip — a horizontally scrolling row of cards (the new Badgers). Scrolls
   inside itself so the page never scrolls sideways, and snaps so a half-card is
   never the resting state. */
.o-home-strip {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
}
.o-home-strip > * { scroll-snap-align: start; }

.o-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}
.o-toolbar__search { flex: 1 1 16rem; max-width: 24rem; }
.o-toolbar__status, .o-toolbar__erased { display: flex; align-items: center; gap: var(--space-2); }
.o-toolbar__status .field-control { width: auto; }

.o-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-block: var(--space-4);
}

.o-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block: var(--space-8) var(--space-4);
  scroll-margin-top: var(--space-4);
}
.o-section-head > h2, .o-section-head > h3 { margin-block: 0; }
.o-section-head .o-actions { margin-block: 0; }

/* shell adaptation (not in handoff CSS) — the reference's My leave screen
   lays its stat cards in a wrapping row via inline demo styles
   (`display:flex;gap;flex-wrap` with `flex:1;min-width:14rem` cards):
   side-by-side on desktop/tablet, stacked on mobile. Transcribed here as a
   reusable object so the shell can use it without inline styles. */
.o-card-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.o-card-row > .card { flex: 1 1 14rem; }