/* sc-skeleton.css — Superhuman Code skeleton loading states.
 * Theme-agnostic: overlay paints the page's own computed background (set
 * inline by sc-skeleton.js), bones are a neutral translucent grey that reads
 * on light AND dark skins; shimmer is a soft white sweep.
 * Shown only when the fetch outlasts 150ms; hard cap 3s (sc-skeleton.js). */

#sc-skeleton-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  padding: calc(max(env(safe-area-inset-top), 60px) + 8px) 18px
           calc(max(env(safe-area-inset-bottom), 34px) + 90px);
  overflow: hidden;
  opacity: 1;
  transition: opacity .28s ease-out;
  pointer-events: none;
  /* bones fade toward the bottom — implies more content below, avoids the
     half-empty-viewport "broken" read */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,.25) 92%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, rgba(0,0,0,.25) 92%, transparent);
}
#sc-skeleton-overlay.sc-sk-hide { opacity: 0; }

.sc-sk-bone {
  position: relative;
  overflow: hidden;
  background: rgba(127, 127, 127, .14);
  border-radius: 10px;
}
.sc-sk-bone::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: sc-sk-shimmer 1.4s infinite;
}
@keyframes sc-sk-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .sc-sk-bone::after { animation: none; }
}

.sc-sk-card {
  background: rgba(127, 127, 127, .06);
  border: 1px solid rgba(127, 127, 127, .10);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}
.sc-sk-row { display: flex; gap: 12px; align-items: center; }
.sc-sk-col { flex: 1; min-width: 0; }

.sc-sk-line   { height: 12px; margin-bottom: 8px; }
.sc-sk-line:last-child { margin-bottom: 0; }
.sc-sk-w30 { width: 30%; } .sc-sk-w40 { width: 40%; }
.sc-sk-w60 { width: 60%; } .sc-sk-w80 { width: 80%; }
.sc-sk-title  { height: 22px; width: 45%; margin: 4px 0 18px; }
.sc-sk-circle { border-radius: 50%; flex: none; }
.sc-sk-avatar { width: 44px; height: 44px; }
.sc-sk-thumb  { width: 56px; height: 56px; border-radius: 12px; flex: none; }
.sc-sk-photo  { width: 72px; height: 72px; border-radius: 14px; flex: none; }
.sc-sk-hero   { height: 110px; border-radius: 14px; margin-bottom: 10px; }
.sc-sk-bar    { height: 8px; border-radius: 4px; margin-top: 8px; }
.sc-sk-chip   { display: inline-block; height: 26px; width: 64px; border-radius: 13px; margin: 0 8px 12px 0; }
.sc-sk-ring   { width: 110px; height: 110px; border-radius: 50%; margin: 8px auto; }

/* content entrance when the skeleton hands off */
.sc-stagger-in { animation: sc-card-in .32s cubic-bezier(.25,.8,.35,1) both; }
@keyframes sc-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sc-stagger-in { animation: none; } }