/* Small, composable utilities (spacing on the 4px scale, flex/grid helpers, text). */

.stack { display: grid; gap: var(--space-4); align-content: start; }
.stack-1 { display: grid; gap: var(--space-1); align-content: start; }
.stack-2 { display: grid; gap: var(--space-2); align-content: start; }
.stack-3 { display: grid; gap: var(--space-3); align-content: start; }
.stack-6 { display: grid; gap: var(--space-6); align-content: start; }
.stack-8 { display: grid; gap: var(--space-8); align-content: start; }
.stack, .stack-1, .stack-2, .stack-3, .stack-6, .stack-8 { grid-template-columns: minmax(0, 1fr); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cluster-1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.cluster-3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cluster-4 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.inline-flex { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.flex-1 { flex: 1; min-width: 0; }
.ml-auto { margin-left: auto; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.break { overflow-wrap: anywhere; }
.pre-wrap { white-space: pre-wrap; }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-auto-sm { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid-8-4 { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
.grid-6-6 { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.span-all { grid-column: 1 / -1; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }

.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-primary { color: var(--color-primary-fg); }
.text-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.text-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.text-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.upper { text-transform: uppercase; }
.divider { height: 1px; background: var(--color-border); border: 0; margin: var(--space-4) 0; }
.w-full { width: 100%; }
.max-prose { max-width: var(--prose-max); }

@media (max-width: 1279px) {
  .grid-8-4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-6-6 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-auto { grid-template-columns: minmax(0, 1fr); }
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .show-mobile { display: none !important; }
}

/* Layout containers own the spacing between fields (no stacked-field margins on top of gaps). */
:is(.stack, .stack-1, .stack-2, .stack-3, .stack-6, .stack-8, .grid-2, .grid-3, .grid-auto, .grid-auto-sm, .grid-6-6, .grid-8-4, .cluster, .between, .integration__fields) > :is(.field, .fieldset) { margin-top: 0; }

.below-lg { display: none; }
@media (max-width: 1023px) { .below-lg { display: revert; } }