/* ============================================
   LOADING — SMI loader, page transition, skeleton
   ============================================ */

/* SMI loader — clockwise crossfade.
   Six elements: N → NE → E → SE → arrow → NW.
   Each fades out in its slot while the previous one fades back in,
   so only one element is (mostly) invisible at any time.
   Shell colour = currentColor, so it follows the in-app theme.
   Teal stops use the brand tokens (#59D3D0 → #367F7D).
   Override timing per instance with the duration argument (sets --smi-dur). */
.smi-loader {
  --smi-dur: 1.2s;
  --smi-teal-from: var(--color-turquoise-300);
  --smi-teal-to: #367f7d;
  display: inline-block;
  flex-shrink: 0;
  color: inherit;
}

.smi-loader .smi-shell { fill: currentColor; }
.smi-loader .smi-stop-from { stop-color: var(--smi-teal-from); }
.smi-loader .smi-stop-to { stop-color: var(--smi-teal-to); }

.smi-loader .smi-el {
  animation: smi-fade var(--smi-dur) linear infinite;
  /* animation-delay is set per element inline: calc(var(--smi-dur) * (i/6 - 1)) */
}

@keyframes smi-fade {
  0%      { opacity: 1; }
  16.67%  { opacity: 0; }   /* this element's slot: fully out */
  33.33%  { opacity: 1; }   /* back in while the next one fades out */
  100%    { opacity: 1; }
}

@keyframes smi-pulse { 50% { opacity: .45; } }

/* Login → app: branded splash, carried over to the destination page via sessionStorage */
.smi-login-splash {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  color: var(--text-primary);
  cursor: progress;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.smi-splash-active .smi-login-splash {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.smi-splash-active body { overflow: hidden; }
/* Freeze on the last frame while fading out instead of snapping back to the default pose */
html:not(.smi-splash-active) .smi-login-splash .smi-loader,
html:not(.smi-splash-active) .smi-login-splash .smi-loader * { animation-play-state: paused; }

/* Page transitions: the region that is about to change swaps its content for a skeleton */
.smi-page-region { display: contents; }
.smi-is-page-loading > :not(.smi-page-skeleton) { display: none !important; }
.smi-page-skeleton { animation: smi-skeleton-in .15s ease-out; cursor: progress; }
@keyframes smi-skeleton-in { from { opacity: 0; } }
.smi-page-reveal > * { animation: smi-skeleton-in .25s ease-out; }

/* Pages without the app shell (login, auth) draw the whole shell as a skeleton */
.smi-page-skeleton-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: var(--bg-base);
  cursor: progress;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility 0s linear .15s;
}
.smi-page-skeleton-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity .15s ease;
}
.smi-shell-skeleton { display: flex; min-height: 100vh; }
.smi-shell-skeleton__sidebar {
  display: flex;
  flex: 0 0 13rem;
  flex-direction: column;
  padding: 20px;
}
.smi-shell-skeleton__main { flex: 1; min-width: 0; }
.smi-shell-skeleton__header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 4rem;
  padding: 0 16px;
}
@media (max-width: 1023px) {
  .smi-shell-skeleton__sidebar { display: none; }
}

/* Submit button while its form navigates */
.smi-btn-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  pointer-events: none;
  cursor: progress;
  opacity: .85;
}

/* Skeleton — port of shadcn/ui Skeleton (bg-muted animate-pulse rounded-md).
   Size it with utilities, e.g. <span class="smi-skeleton h-4 w-24"></span>. */
.smi-skeleton {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  border-radius: var(--radius-md);
  background: var(--skeleton-bg, color-mix(in srgb, var(--text-primary) 9%, transparent));
  animation: smi-skeleton-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
.smi-skeleton-title { width: min(8rem, 100%); height: 1.15rem; }
.smi-skeleton-cover {
  width: 38%;
  max-width: 6.75rem;
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
  height: auto;
}
.smi-skeleton-cover--fill { width: 100%; max-width: none; }
.smi-skeleton-page { min-width: 0; max-width: 100%; }
.smi-skeleton-match {
  display: grid;
  grid-template-columns: 1.25rem 3.25rem minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 4.25rem;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border-default);
}
.smi-skeleton-match > .smi-skeleton { width: 1.25rem; height: 1.25rem; }
.smi-skeleton-match-time,
.smi-skeleton-match-teams { display: grid; gap: 6px; min-width: 0; }
.smi-skeleton-match-time .smi-skeleton { height: .7rem; }
.smi-skeleton-match-time .smi-skeleton:first-child { width: 70%; }
.smi-skeleton-match-teams .smi-skeleton { height: .7rem; }
.smi-skeleton-match-teams .smi-skeleton:first-child { width: 78%; }
.smi-skeleton-match-teams .smi-skeleton:last-child { width: 58%; }
.smi-page-skeleton,
.smi-page-skeleton .dash-card,
.smi-page-skeleton .smi-skeleton-stack,
.smi-page-skeleton .flex,
.smi-page-skeleton .grid {
  min-width: 0;
  max-width: 100%;
}
.smi-page-skeleton .dash-card { overflow: hidden; }
.smi-page-skeleton .flex { flex-wrap: wrap; }
.smi-page-skeleton .flex > * { min-width: 0; max-width: 100%; }
.smi-shell-skeleton__header,
.smi-shell-skeleton__main { min-width: 0; overflow: hidden; }
.smi-skeleton--inline { display: inline-block; vertical-align: middle; }
.smi-skeleton--circle { border-radius: var(--radius-full); }
.smi-skeleton--text { height: .75rem; }
@keyframes smi-skeleton-pulse { 50% { opacity: .5; } }

.smi-skeleton-stack { display: grid; gap: .75rem; }

@media (prefers-reduced-motion: reduce) {
  .smi-loader .smi-el { animation: none; }
  .smi-loader { animation: smi-pulse 1.6s ease-in-out infinite; }
  .smi-skeleton,
  .smi-page-skeleton,
  .smi-page-reveal > * { animation: none; }
}