/* components/content: Card, DefinitionList and Stat (ui/core.js), on the design-system tokens.
   Card is the FormCard look (styles/components/layout.css): a --border-default hairline all round, --radius-md, the
   title (--type-body semibold, subtitle caption muted) in a header strip ruled off by a --border-subtle hairline, the
   body padded --s-4, a footer ruled off the same way. No fills behind grouped content, no shadow (a section inside a
   page card lies flat on it). Code and Kbd use the .code / .kbd utilities in styles/base.css. */

/* ---- Card ---- */
.ae-card {
  display: flex; flex-direction: column; min-width: 0; background: var(--surface-card);
  border: var(--border-width-hairline) solid var(--border-default); border-radius: var(--radius-md);
}
.ae-card__header {
  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-card__header:has(.ae-card__subtitle) { align-items: flex-start; }
.ae-card__heading { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ae-card__title { margin: 0; font: var(--type-body); font-weight: var(--weight-semibold); color: var(--text-strong); }
.ae-card__subtitle { margin: 0; font: var(--type-caption); color: var(--text-muted); text-wrap: pretty; }
.ae-card__actions { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.ae-card__body { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-4); }
.ae-card__footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-top: var(--border-width-hairline) solid var(--border-subtle);
}
/* flush: the body runs edge to edge (a table), the header and footer keep their inset */
.ae-card--flush { overflow: hidden; }
.ae-card--flush > .ae-card__body { padding: 0; }
/* a disclosure card (<details class="ae-card">): the summary is the header strip, ruled off once it is open */
details.ae-card > summary {
  display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: var(--s-3) var(--s-4);
  cursor: pointer; border-radius: inherit; font: var(--type-body); font-weight: var(--weight-semibold); color: var(--text-strong);
}
details.ae-card > summary:hover { background: var(--surface-hover); }
details.ae-card[open] > summary {
  border-bottom: var(--border-width-hairline) solid var(--border-subtle); border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ---- DefinitionList: read-only key/value rows ---- */
.ae-dl { display: flex; flex-direction: column; margin: 0; }
.ae-dl__row {
  display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: var(--s-4);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--border-subtle);
}
.ae-dl__row:first-child { padding-top: 0; }
.ae-dl__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ae-dl dt { font: var(--type-body-sm); font-weight: var(--weight-medium); color: var(--text-muted); }
.ae-dl dd { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); color: var(--text-body); }

/* ---- Stat: a number with its caption, on a card ---- */
.ae-stat {
  --ae-tone-fg: var(--status-neutral-fg); --ae-tone-bg: var(--status-neutral-bg);
  display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-4);
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.ae-stat--success { --ae-tone-fg: var(--status-success-fg); --ae-tone-bg: var(--status-success-bg); }
.ae-stat--warning { --ae-tone-fg: var(--status-warning-fg); --ae-tone-bg: var(--status-warning-bg); }
.ae-stat--danger { --ae-tone-fg: var(--status-danger-fg); --ae-tone-bg: var(--status-danger-bg); }
.ae-stat--info { --ae-tone-fg: var(--status-info-fg); --ae-tone-bg: var(--status-info-bg); }
.ae-stat--brand { --ae-tone-fg: var(--text-brand); --ae-tone-bg: var(--surface-brand-subtle); }
.ae-stat__icon {
  display: grid; place-items: center; flex-shrink: 0; width: var(--s-8); height: var(--s-8);
  border-radius: var(--radius-md); background: var(--ae-tone-bg); color: var(--ae-tone-fg);
}
.ae-stat__text { min-width: 0; display: grid; gap: 2px; }
.ae-stat__value { font: var(--type-metric); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ae-stat__label { font: var(--type-caption); color: var(--text-muted); }