/* ============================================================
   OKY — loading skeletons (shared)

   Every view paints a skeleton whose geometry matches its loaded
   state, so switching tabs no longer flashes a centred "Loading…"
   string and then jumps into the real layout.

   Only the grey blocks live here — the skeletons themselves are
   built from the real page classes (.ov-metric, .pg-email-row,
   .pg-org-card …) in js/skeleton.js, so they cannot drift from the
   layout they stand in for.

   `.sk-page` fades in over ~200ms on purpose: a response that lands
   quickly never shows more than a faint ghost, which is what removes
   the blink rather than trading it for a second one.
   ============================================================ */

:root {
  --sk-base: #eceef3;
  --sk-hi:   #f8f9fc;
}
[data-theme="dark"] {
  --sk-base: #1c2029;
  --sk-hi:   #262c37;
}

/* ---- primitives --------------------------------------------------- */
.sk {
  display: block;
  position: relative;
  overflow: hidden;
  flex: none;
  background: var(--sk-base);
  border-radius: 6px;
}
.sk::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--sk-hi), transparent);
  animation: sk-shimmer 1.5s ease-in-out infinite;
}
@keyframes sk-shimmer { to { transform: translateX(100%); } }

/* ---- layout helpers ----------------------------------------------- */
.sk-row { display: flex; align-items: center; min-width: 0; }
.sk-col { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sk-fill { flex: 1 1 auto; min-width: 0; }

/* ---- page wrapper ------------------------------------------------- */
.sk-page { animation: sk-in .2s ease-out both; }
@keyframes sk-in { from { opacity: 0; } to { opacity: 1; } }

/* Skeletons are never interactive. Border-box is normalised here because
   skeleton rows borrow page classes written for form controls (which the
   UA sheet already puts in border-box) — without it a `width:100%` row
   with padding overflows its card. */
.sk-page, .sk-page * { box-sizing: border-box; }
.sk-page * { pointer-events: none !important; cursor: default !important; }

@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
  .sk-page { animation: none; }
}