/* ═══════════════════════════════════════════════════════════════
   AgencyOS — skeleton-v5.css
   V5 Blue skeleton loading states (reference .sk / .skel*). Scoped to
   .skv5 so it cannot affect any existing component. Tokens come from the
   shared V5 palette (--st-*, settings-v5.css).
   ═══════════════════════════════════════════════════════════════ */
.skv5 { color: var(--st-ink); font-family: var(--app-font, Inter, 'Outfit', system-ui, sans-serif); }
.skv5 *, .skv5 *::before, .skv5 *::after { box-sizing: border-box; }
.skv5 .sk {
  display: block; max-width: 100%; background-color: color-mix(in srgb, var(--st-muted) 14%, var(--st-surface));
  background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--st-surface) 70%, transparent) 50%, transparent 80%);
  background-size: 220% 100%; background-repeat: no-repeat; animation: skv5Shimmer 1.3s ease-in-out infinite;
}
@keyframes skv5Shimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .skv5 .sk { animation: none; } }
.skv5.skelPage { display: grid; gap: 18px; align-content: start; width: 100%; }
.skv5 .skSr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skv5 .skelHead { display: grid; gap: 10px; }
.skv5 .skelHeadRow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.skv5 .skelMetrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.skv5 .skelCard { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--st-line); border-radius: 14px; background: var(--st-surface); }
.skv5 .skelCard.tall { padding: 20px; }
.skv5 .skelCard.banner { grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; gap: 14px; }
.skv5 .skelToolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.skv5 .skelSpacer { flex: 1 1 0; }
.skv5 .skelInline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.skv5 .skelGrid { display: grid; gap: 14px; }
.skv5 .skelStack { display: grid; gap: 10px; min-width: 0; flex: 1; }
.skv5 .skelPanel { display: grid; gap: 4px; padding: 14px 18px; border: 1px solid var(--st-line); border-radius: 16px; background: var(--st-surface); }
.skv5 .skelRow { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.skv5 .skelRow + .skelRow { border-top: 1px solid var(--st-line); }
.skv5 .skelRow.slim { gap: 18px; padding: 14px 0; }
.skv5 .skelTwo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }
.skv5 .skelTwo.wide { grid-template-columns: 340px minmax(0, 1fr); }
.skv5 .skelSettings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; padding: 20px; border: 1px solid var(--st-line); border-radius: 16px; background: var(--st-surface); }
.skv5.skelInset { padding: 0; }
@media (max-width: 900px) {
  .skv5 .skelTwo, .skv5 .skelTwo.wide, .skv5 .skelSettings { grid-template-columns: 1fr; }
}