/* Layout utilities — replace inline spacing (production-safe, no page inline CSS) */

.vm-stack { display: grid; gap: 1rem; }
.vm-stack--tight { gap: 0.65rem; }
.vm-stack--loose { gap: 1.5rem; }
.vm-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.vm-row--between { justify-content: space-between; }
.vm-row--center { justify-content: center; }
.vm-grow { flex: 1; min-inline-size: 0; }
.vm-full { inline-size: 100%; }
.vm-max-form { max-inline-size: 40rem; }
.vm-max-prose { max-inline-size: 32rem; margin-inline: auto; }
.vm-max-search { max-inline-size: 18rem; }
.vm-mbs-1 { margin-block-start: 0.5rem; }
.vm-mbs-2 { margin-block-start: 1rem; }
.vm-mbs-3 { margin-block-start: 1.5rem; }
.vm-mbs-4 { margin-block-start: 2rem; }
.vm-mbe-0 { margin-block-end: 0; }
.vm-mbe-2 { margin-block-end: 1rem; }
.vm-mbe-3 { margin-block-end: 1.5rem; }
.vm-pad-0 { padding: 0; }
.vm-section--flush { padding-inline: 0; }
.vm-section--tight-top { padding-block-start: 0; }
.vm-section--soft-top { padding-block-start: 1.5rem; }
.vm-crumb-bar { padding-block-end: 0; }
.vm-align-center { align-items: center; }
.vm-overflow-x { overflow-x: auto; }
.vm-eyebrow--accent { color: var(--vm-signal, var(--vm-accent, var(--velin-color-primary))); }
.vm-field-gap { display: grid; gap: 0.75rem; }
.vm-cta-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.vm-spin-bay {
  min-block-size: 14rem;
  margin-block-start: 1rem;
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in oklch, var(--vm-ice, oklch(90% 0.02 240)) 22%, transparent);
  background:
    radial-gradient(circle at 50% 55%, color-mix(in oklch, var(--vm-signal, oklch(58% 0.2 25)) 28%, transparent), transparent 55%),
    var(--vm-slate, var(--velin-color-surface-dim));
  font-family: var(--velin-font-heading);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--velin-color-text-muted);
  position: relative;
}
.vm-spin-bay__ring {
  position: absolute;
  inset: 18%;
  border: 1px solid color-mix(in oklch, var(--vm-signal) 40%, transparent);
  border-radius: 50%;
  animation: vm-spin-hint 12s linear infinite;
  pointer-events: none;
}
.vm-download-list {
  margin: 0;
  padding-inline-start: 1.1rem;
  color: var(--velin-color-text-muted);
  display: grid;
  gap: 0.35rem;
}
.vm-search-bay {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)) auto;
  gap: 0.75rem;
  align-items: end;
  margin: -2.5rem clamp(1rem, 3vw, 2.5rem) 0;
  padding: 1.15rem 1.25rem;
  position: relative;
  z-index: 5;
  background: color-mix(in oklch, var(--vm-asphalt, var(--velin-color-surface)) 92%, transparent);
  border: 1px solid color-mix(in oklch, var(--vm-ice, oklch(90% 0.02 240)) 14%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px oklch(0% 0 0 / 0.28);
}
.vm-search-bay label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--velin-color-text-muted);
}
.vm-search-bay .velin-input,
.vm-search-bay .velin-select,
.vm-search-bay select,
.vm-search-bay input {
  font: inherit;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in oklch, var(--vm-ice, oklch(90% 0.02 240)) 16%, transparent);
  background: color-mix(in oklch, var(--vm-slate, var(--velin-color-surface-dim)) 80%, transparent);
  color: inherit;
  border-radius: 0.15rem;
}
.vm-search-bay .velin-btn,
.vm-search-bay button[type="submit"] {
  font-family: var(--velin-font-heading);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.75rem 1.15rem;
  border: 0;
  background: var(--vm-signal, var(--velin-color-primary));
  color: var(--velin-color-on-primary);
  cursor: pointer;
}
.vm-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.5rem clamp(1rem, 3vw, 2.5rem) 0;
}
.vm-kpi {
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in oklch, var(--vm-ice, oklch(90% 0.02 240)) 12%, transparent);
  background: color-mix(in oklch, var(--vm-slate, var(--velin-color-surface-dim)) 70%, transparent);
}
.vm-kpi strong {
  display: block;
  font-family: var(--velin-font-heading);
  font-size: 1.85rem;
  letter-spacing: 0.04em;
}
.vm-kpi span {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.82rem;
  color: var(--velin-color-text-muted);
}
.vm-sticky-actions {
  position: sticky;
  inset-block-start: calc(var(--vm-top-h, 4.25rem) + 1rem);
}
.vm-alert-strip {
  margin: 0 clamp(1rem, 3vw, 2.5rem) 1rem;
}
.vm-chart-panel {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid color-mix(in oklch, var(--vm-ice, oklch(90% 0.02 240)) 12%, transparent);
  background: color-mix(in oklch, var(--vm-slate, var(--velin-color-surface-dim)) 65%, transparent);
}
.vm-chart-panel velin-sparkline {
  display: block;
  inline-size: 100%;
  block-size: 4.5rem;
}
.vm-review-rail {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem clamp(1rem, 3vw, 2.5rem);
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in oklch, var(--vm-ice) 14%, transparent);
  background: color-mix(in oklch, var(--vm-slate) 55%, transparent);
}
.vm-review-rail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--velin-color-text-muted);
}
.vm-review-rail__meta span {
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in oklch, var(--vm-ice) 16%, transparent);
}
.vm-filters-sticky {
  position: sticky;
  inset-block-start: calc(var(--vm-top-h, 4.25rem) + 0.75rem);
  align-self: start;
}
.vm-skeleton-title {
  block-size: 2rem;
  inline-size: 42%;
  margin-block-end: 1rem;
}
.vm-skeleton-card {
  aspect-ratio: 16 / 10;
}
.vm-progress-track {
  display: block;
  block-size: 0.35rem;
  margin-block: 0.75rem 0;
  border-radius: 999px;
  background: color-mix(in oklch, var(--vm-ice, oklch(90% 0.02 240)) 14%, transparent);
  overflow: hidden;
}
.vm-progress-track > [class*="vm-progress-fill"] {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--vm-signal, var(--velin-color-primary));
  transition: inline-size 0.35s ease;
}
.vm-progress-track > .vm-progress-fill--38 { inline-size: 38%; }
.vm-progress-track > .vm-progress-fill--60 { inline-size: 60%; }
.vm-progress-track > .vm-progress-fill--100 { inline-size: 100%; }
.vm-auth {
  max-inline-size: 24rem;
  display: grid;
  gap: 0.85rem;
}
.vm-system__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-block-start: 1.25rem;
}
.vm-team-card velin-avatar,
.vm-team-card img {
  inline-size: 5.5rem;
  block-size: 5.5rem;
  object-fit: cover;
  border-radius: 50%;
}
@keyframes vm-spin-hint {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vm-spin-bay__ring { animation: none; }
}
@media (max-width: 900px) {
  .vm-search-bay { grid-template-columns: 1fr 1fr; margin-block-start: 1rem; }
  .vm-kpi-strip { grid-template-columns: 1fr 1fr; }
  .vm-filters-sticky { position: static; }
}
@media (max-width: 640px) {
  .vm-search-bay { grid-template-columns: 1fr; }
  .vm-kpi-strip { grid-template-columns: 1fr; }
}