/* Shared data and image loading states. No layout/interaction changes on refresh. */
@keyframes mk-shimmer { to { background-position: -200% 0; } }
.mk-skeleton-block, img.mk-image-loading {
  --mk-loading-gradient: linear-gradient(100deg, color-mix(in srgb, var(--text, #888) 7%, transparent) 20%, color-mix(in srgb, var(--text, #888) 15%, transparent) 45%, color-mix(in srgb, var(--text, #888) 7%, transparent) 70%);
  background: var(--mk-loading-gradient);
  background-size: 200% 100%; animation: mk-shimmer 1.6s linear infinite;
}
/* Some legacy thumbnails set an inline fallback background. */
img.mk-image-loading { background-image: var(--mk-loading-gradient) !important; background-size: 200% 100% !important; }
.mk-loading { position: relative; }
.mk-loading-initial { min-height: var(--mk-loading-height, 220px); }
.mk-loading-inline { display: inline-block; min-width: 72px; }
.mk-skeleton { position: absolute; inset: 0; z-index: 2; overflow: hidden; padding: 8px; border-radius: inherit; background: var(--bg, #171717); pointer-events: none; }
.mk-skeleton-grid { position: relative; inset: auto; grid-column: 1 / -1; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-content: start; }
.mk-loading-initial:has(> .mk-skeleton-grid) > :not(.mk-skeleton):not(.mk-loading-status) { display: none !important; }
.mk-skeleton-card { min-width: 0; }
.mk-skeleton-block { display: block; border-radius: 7px; }
.mk-skeleton-image { aspect-ratio: 4 / 3; width: 100%; }
.mk-skeleton-line { height: 11px; width: 75%; margin-top: 10px; }
.mk-skeleton-line.short { width: 48%; }
.mk-skeleton-strip { display: flex; gap: 9px; }
.mk-skeleton-strip .mk-skeleton-card { flex: 0 0 72px; }
.mk-skeleton-strip .mk-skeleton-image { aspect-ratio: 1; }
.mk-skeleton-chips { display: flex; gap: 8px; }
.mk-skeleton-chips .mk-skeleton-block { flex: 0 0 110px; height: 36px; }
/* Keep the permanent upload / Best of makooor controls available while lists load. */
#pivotStrip > .mk-skeleton, #discoveryCommunities > .mk-skeleton { position: relative; inset: auto; flex: 0 0 auto; background: none; padding: 0; }
#pivotStrip > .mk-skeleton { height: 80px; }
#discoveryCommunities > .mk-skeleton { height: 36px; }
#pivotStrip.mk-loading-initial, #discoveryCommunities.mk-loading-initial { min-height: 0; }
.mk-skeleton-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.mk-skeleton-detail .mk-skeleton-image { aspect-ratio: 3 / 4; max-height: 360px; }
.mk-skeleton-line-only { padding: 2px 0; background: var(--bg, #171717); }
.mk-skeleton-line-only .mk-skeleton-line { width: 100%; margin: 4px 0; }
.mk-loading-refresh::after { content: ''; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent, #d4a574), transparent); background-size: 200% 100%; animation: mk-shimmer 1.6s linear infinite; }
.mk-loading-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mk-loading-error { grid-column: 1 / -1; padding: 10px; font-size: 12px; color: var(--text-dim, inherit); }
.mk-loading-error button { margin-left: 8px; padding: 7px 10px; color: inherit; background: none; border: 1px solid var(--border-strong, #888); border-radius: 6px; cursor: pointer; font: inherit; }
img.mk-image-error { animation: none; background: var(--surface-2, #7772); }
@media (max-width: 600px) {
  .mk-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-loading-error button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-skeleton-block, img.mk-image-loading, .mk-loading-refresh::after,
  .skel-block, .skel-line { animation: none !important; }
}