/* ============================================================
   Ascend Intelligence — Layout primitives
   Alignment is a system guarantee, not a generation accident.
   Everything sits on a shared 12-column grid; paired blocks are
   equal height; nothing leaves orphan whitespace.
   ============================================================ */

/* ---- Container ---- */
.ai-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-6, 24px); box-sizing: border-box; }
.ai-container-wide { max-width: 1320px; }

/* ---- Base 12-column grid ----
   Children set their span with --col (default full width). Rows align
   to the same column tracks, so edges line up across sections. */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5, 20px);
  align-items: stretch;          /* equal-height by default — kills orphan voids */
}
.ai-grid > * { grid-column: span var(--col, 12); min-width: 0; }
.col-2 { --col: 2; /* @kind other */ } .col-3 { --col: 3; /* @kind other */ } .col-4 { --col: 4; /* @kind other */ }
.col-5 { --col: 5; /* @kind other */ } .col-6 { --col: 6; /* @kind other */ } .col-7 { --col: 7; /* @kind other */ }
.col-8 { --col: 8; /* @kind other */ } .col-9 { --col: 9; /* @kind other */ } .col-12 { --col: 12; /* @kind other */ }

/* ---- Equal-column rows (the common 2- / 3- / 4-up) ----
   align-items: stretch so a short card grows to match its tall sibling
   instead of leaving a gap beneath it. */
.ai-row-2, .ai-row-3, .ai-row-4 { display: grid; gap: var(--space-5, 20px); align-items: stretch; }
.ai-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- Auto-fit stat grid ----
   Tiles share one grid so every edge aligns and cells are equal height.
   No leftover half-row of mismatched boxes. */
.ai-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5, 20px);
  align-items: stretch;
}

/* ---- Fill helpers ----
   Put on a column whose natural content is shorter than its sibling:
   it stretches and distributes content top-to-bottom so the bottom
   edge meets the grid instead of floating. */
.ai-fill { height: 100%; display: flex; flex-direction: column; }
.ai-fill > .ai-spread { justify-content: space-between; flex: 1; }
.ai-push-end { margin-top: auto; }   /* pin a footer note to the card bottom */

/* ---- Card primitives (solid surfaces — never washed gradients) ---- */
.ai-panel {
  background: var(--surface-elevated);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius);
  padding: var(--space-6, 24px);
  box-sizing: border-box;
}

/* ---- Data / chart card ----
   A SOLID elevated surface. Charts never sit on a gradient or a washed
   panel — that's the "horrible grey" failure mode. Flat ink only. */
.ai-data-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius);
  padding: var(--space-6, 24px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.ai-data-card .ai-data-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: var(--space-5, 20px); }
.ai-data-card .ai-chart { flex: 1; min-height: 0; }

/* On light/paper sections, flip the data card to the white surface. */
.on-light .ai-panel, .on-light .ai-data-card,
.ai-panel.on-light, .ai-data-card.on-light {
  background: var(--surface-card);
  border-color: var(--border-on-light);
}