/* az.ai shared card grid (package azai-v17c). One component for every az.ai page.
   <div class="az-cards" data-max="4" data-minw="220">          container: equal columns, equal heights per row, centred, equal gutters
     <article class="az-card">                                   card: same padding, button row pinned to the bottom
       <span class="az-card-icon">...</span>                      48 px icon slot (svg/img)
       <h3 class="az-card-title">Title</h3>                       2 lines max
       <p class="az-card-text">Description</p>                    3 lines max
       <div class="az-card-foot"><a class="btn">Open</a></div>     always at the bottom
     </article>
   </div>
   Modifiers: .az-cards--square (cards at least as tall as wide), .az-cards--compact (smaller padding).
   /dp/az/cards.js picks the column count (max data-max, each column >= data-minw px) that leaves NO part-filled last row. */
.az-cards { --az-gap: 14px; display: grid; grid-template-columns: repeat(var(--az-cols, 4), minmax(0, 1fr)); grid-auto-rows: auto; align-items: stretch; gap: var(--az-gap); width: 100%; max-width: 1180px; margin-inline: auto; justify-content: center; }
@media (max-width: 1099px) { .az-cards { --az-cols: 2; } }
@media (max-width: 559px) { .az-cards { --az-cols: 1; } }
.az-card { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 16px; border: 1px solid rgba(70, 100, 170, .45); background: linear-gradient(180deg, rgba(16, 28, 60, .92), rgba(9, 17, 38, .92)); color: #eef3fb; box-sizing: border-box; height: 100%; }
.az-cards--compact .az-card { padding: 12px; gap: 6px; }
.az-cards--square .az-card { aspect-ratio: 1 / 1; }
@supports not (aspect-ratio: 1 / 1) { .az-cards--square .az-card { min-height: 220px; } }
.az-card-icon { width: 48px; height: 48px; display: inline-grid; place-items: center; flex: none; }
.az-card-icon > svg, .az-card-icon > img { width: 48px; height: 48px; object-fit: contain; }
.az-card-title { margin: 0; font-size: 17px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.az-card-text { margin: 0; font-size: 14px; line-height: 1.45; color: #b9c7dc; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.az-card-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.az-card-foot > * { min-height: 44px; }

/* pill chip rows on the front-door pages: centred (the words set each width) */
.chips { justify-content: center; }

/* azai-v30: balanced card grids (cards.js v2 sets 2 tracks per card, centres a short last row and evens card heights) */
.az-cards { align-items: stretch; justify-items: stretch; }
.az-cards > * { min-width: 0; box-sizing: border-box; }
.az-cards > p:only-child, .az-cards > .empty:only-child { grid-column: 1 / -1; text-align: center; }
.tool-grid > *, .rel-grid > *, .acct > *, .azc-forms > *, .grid.g2 > *, .grid.g3 > *, .grid.g4 > * { min-width: 0; width: 100%; box-sizing: border-box; }