/*
 * components/layout: the page layouts of ui/layout.js, lifted from DS core/PageCard.jsx, forms/FormCanvas.jsx,
 * forms/FormStack.jsx and the list-screen rules in DS/CLAUDE.md + components/data/table.card.html.
 *
 * Literal values are the DS components' own: the form canvas's 30px inline inset, 20px block gap, 80% card and
 * clamp() page margin (named off-grid exceptions in the DS readme), FormCard's 60% field column, FormStack's 900px cap.
 */

/* ---- PageCard: fills the content gutter, held off the chrome by --gutter-inset; never grows the page ---- */
.ae-page-card {
  display: flex; flex-direction: column; height: 100%; min-height: 0; padding: var(--gutter-inset); overflow: hidden;
}
.ae-page-card__surface {
  position: relative; /* BulkActionBar and LoadingOverlay scope to the card */
  flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-card); border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-chrome); box-shadow: var(--shadow-xs);
}
.ae-page-card__surface.is-padded { padding: var(--s-4); }
.ae-page-card__surface.is-compact { padding: var(--s-2); } /* the list-page inset */
/* the inset is on the surface (fixed); content scrolls inside it */
.ae-page-card__scroll { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; }

/* ---- List screen: column, --s-2 gap; the compact card; toolbar strip, then the table filling the card ---- */
.ae-list-screen {
  display: flex; flex-direction: column; gap: var(--s-2); height: 100%; min-height: 0; padding: var(--gutter-inset);
  overflow: hidden;
}
.ae-list-screen__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--s-2) var(--s-2); }
/* the reserved bulk-bar strip: the bar's height plus the height the card gives up for it, bar top-aligned */
.ae-list-screen__bulk {
  flex: 0 0 calc(var(--bulk-bar-h) + var(--s-6) + var(--s-1)); display: flex; align-items: flex-start; justify-content: center;
}

/* ---- Toolbar strip: [search] [filters] [Refresh] --spacer-- [secondary actions] [THE primary] ---- */
.ae-toolbar-strip { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2); }
.ae-toolbar-strip__spacer { flex: 1; }

/* ---- FormCanvas: one card between wide page margins; title band, scrolling groups, pinned actions ---- */
.ae-form-canvas {
  display: flex; justify-content: center; height: 100%; min-height: 0;
  padding-inline: clamp(var(--s-6), calc(50% - 500px), 200px); /* DS CANVAS_GUTTER: shrinks the margin before the card */
  padding-block: 20px; /* DS CANVAS_BLOCK_GAP */
}
.ae-form-canvas__card {
  flex: 0 1 auto; width: 80%; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-card); border: var(--border-width-hairline) solid var(--border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md);
}
/* each band pads its own 30px inline (DS CANVAS_INSET), so the two hairlines run the full width of the card */
.ae-form-canvas__head {
  flex: 0 0 auto; display: grid; gap: var(--s-1); text-align: start; padding: var(--s-4) 30px;
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.ae-form-canvas__title {
  margin: 0; font: var(--type-h3); letter-spacing: var(--tracking-normal); color: var(--text-strong); text-wrap: balance;
}
.ae-form-canvas__subtitle { margin: 0; font: var(--type-body-sm); color: var(--text-muted); text-wrap: pretty; }
.ae-form-canvas__header { margin-top: var(--s-2); min-width: 0; }
.ae-form-canvas__body {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-auto-rows: min-content; align-content: start;
  gap: var(--s-4); padding: var(--s-4) 30px;
}
.ae-form-canvas__actions {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2);
  padding: var(--s-3) 30px; border-top: var(--border-width-hairline) solid var(--border-subtle);
}
@media (max-width: 760px) {
  .ae-form-canvas { padding-inline: var(--s-2); padding-block: var(--s-2); }
  .ae-form-canvas__card { width: 100%; }
}

/* ---- FormCard: a bordered section with a header strip (the AE console's "Basic details" card). A --border-default
   hairline all round, --radius-md, the card surface; the title band (--s-3 x --s-4, 44px at least) ruled off from
   the body by a --border-subtle hairline; the body padded --s-4. No fill behind the fields (grey behind an enabled
   control reads as disabled). The card is the size container for the labels-left rows (styles/components/forms.css). */
.ae-form-card {
  display: flex; flex-direction: column; min-width: 0; container-type: inline-size;
  background: var(--surface-card);
  border: var(--border-width-hairline) solid var(--border-default); border-radius: var(--radius-md);
}
.ae-form-card__head {
  display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: var(--s-3) var(--s-4);
  border-bottom: var(--border-width-hairline) solid var(--border-subtle);
}
.ae-form-card__head:has(.ae-form-card__subtitle) { align-items: flex-start; }
.ae-form-card__heading { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ae-form-card__title {
  margin: 0; font: var(--type-body); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); color: var(--text-strong);
}
.ae-form-card__subtitle { margin: 0; font: var(--type-caption); color: var(--text-muted); text-wrap: pretty; }
.ae-form-card__action { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ae-form-card__body {
  display: grid; gap: var(--s-3); min-width: 0; padding: var(--s-4);
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.ae-form-card__body.is-dimmed { opacity: 0.55; }

/* ---- FormStack: two columns, rows 8px (well above the 2px label gap), columns 24px ---- */
.ae-form-stack {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; row-gap: var(--s-2);
  column-gap: var(--s-6); max-width: 900px; margin-inline: auto;
}
.ae-form-stack.is-single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .ae-form-stack { grid-template-columns: minmax(0, 1fr); } }
.ae-form-actions {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-4);
  border-top: var(--border-width-hairline) solid var(--border-default);
}

/* Last on purpose (overrides the overflow: hidden above). Scroll regions are positioned and their frames clip without being scrollable: a visually hidden element (a caption,
   a hidden label) is positioned against the region it sits in, so scrollIntoView() or a focus can never slide the
   whole card (and its tab strip or title band) out of view. */
.ae-page-card, .ae-page-card__surface, .ae-list-screen, .ae-form-canvas__card { overflow: clip; }