/* ============================================================================
   Utilities - small, single-purpose helpers. Everything reads from tokens.
   ========================================================================= */

/* spacing */
.mt-0 { margin-block-start: 0; }
.mt-3 { margin-block-start: var(--s-3); }
.mt-4 { margin-block-start: var(--s-4); }
.mt-5 { margin-block-start: var(--s-5); }
.mt-6 { margin-block-start: var(--s-6); }
.mt-7 { margin-block-start: var(--s-7); }
.mt-8 { margin-block-start: var(--s-8); }
.mt-9 { margin-block-start: var(--s-9); }
.mt-10 { margin-block-start: var(--s-10); }

.mb-0 { margin-block-end: 0; }
.mb-3 { margin-block-end: var(--s-3); }
.mb-4 { margin-block-end: var(--s-4); }
.mb-5 { margin-block-end: var(--s-5); }
.mb-6 { margin-block-end: var(--s-6); }
.mb-7 { margin-block-end: var(--s-7); }
.mb-8 { margin-block-end: var(--s-8); }
.mb-9 { margin-block-end: var(--s-9); }

/* text */
.text-white { color: var(--white); }
.text-mist { color: var(--mist-400); }
.text-muted { color: var(--mist-600); }
.text-blue { color: var(--blue-400); }
.text-center { text-align: center; }
.text-end { text-align: end; }
.text-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.text-small { font-size: var(--fs-small); }
.text-mono { font-family: var(--font-mono); }
.text-upper { text-transform: uppercase; letter-spacing: var(--tr-label); }
.text-balance { text-wrap: balance; }

.label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--mist-600);
}

/* layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }
.gap-7 { gap: var(--s-7); }

.stack-4 > * + * { margin-block-start: var(--s-4); }
.stack-5 > * + * { margin-block-start: var(--s-5); }
.stack-6 > * + * { margin-block-start: var(--s-6); }
.stack-7 > * + * { margin-block-start: var(--s-7); }

.measure { max-inline-size: 68ch; }
.measure-narrow { max-inline-size: 52ch; }
.mx-auto { margin-inline: auto; }
.w-full { inline-size: 100%; }

/* visibility */
.hide { display: none !important; }

@media (max-width: 767.98px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .hide-desktop { display: none !important; } }
@media (max-width: 991.98px) { .hide-below-lg { display: none !important; } }
@media (min-width: 992px) { .hide-from-lg { display: none !important; } }

[hidden] { display: none !important; }

/* media */
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-16-6 { aspect-ratio: 16 / 6; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-1-1 { aspect-ratio: 1 / 1; }

.cover {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.round { border-radius: var(--r-sm); overflow: hidden; }
.round-full { border-radius: var(--r-pill); overflow: hidden; }

/* surfaces */
.surface {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-6);
}

@media (min-width: 768px) { .surface { padding: var(--s-7); } }

.surface--alt { background: var(--ink-850); }

/* Empty-state block for "no results" panels. */
.empty {
  padding: var(--s-10) var(--s-6);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  color: var(--mist-600);
}

/* Loading spinner for AJAX buttons. */
.spinner {
  inline-size: 16px;
  block-size: 16px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-block-start-color: var(--white);
  border-radius: var(--r-pill);
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* No-JS fallbacks: anything that only works with JS is hidden without it. */
html:not(.js) .js-only { display: none !important; }
html.js .no-js-only { display: none !important; }