/* ============================================================================
   Sipuron skeleton loading states.

   Design rule that drives everything here: a skeleton REUSES THE REAL CARD
   CLASSES rather than inventing its own box. .sk-card carries the page's own
   .card class, .sk-cover carries .cover, and so on, so the placeholder inherits
   whatever width, aspect-ratio, gap and breakpoint overrides the real card
   already has. That is what stops the page jumping when real content arrives -
   there is no second set of dimensions to keep in sync, and a future change to
   the card automatically applies to its skeleton.

   Nothing here is scoped to a page, but nothing here matches an existing
   selector either: every rule is under .sk / .sk-* , so including this file
   cannot alter an existing layout.
   ============================================================================ */

:root{
  /* warm cream over a soft purple base, to match the storybook palette */
  --sk-base:rgba(58,48,112,.11);
  --sk-shine:rgba(255,251,240,.62);
  --sk-radius:10px;
}
/* Dark surfaces (the app shell, the night-time panels) need the inverse: a light
   film on a dark base. Put .sk-dark on the container, or any ancestor. */
.sk-dark,.sk-on-dark{
  --sk-base:rgba(255,255,255,.075);
  --sk-shine:rgba(255,255,255,.14);
}

/* ---- the shimmer itself ---- */
.sk{
  position:relative;
  overflow:hidden;
  background:var(--sk-base);
  border-radius:var(--sk-radius);
  /* a skeleton must never be the thing that widens the page */
  max-width:100%;
}
.sk::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 0%,var(--sk-shine) 50%,transparent 100%);
  animation:sk-shimmer 1.45s ease-in-out infinite;
}
@keyframes sk-shimmer{ to{ transform:translateX(100%); } }

/* Reduced motion: keep the placeholder, drop the sweep. A static block still
   communicates "loading" without animating anything. */
@media (prefers-reduced-motion:reduce){
  .sk::after{ animation:none; opacity:.45; }
}

/* ---- text lines ---- */
.sk-line{ height:.72em; margin:.34em 0; border-radius:6px; }
.sk-line.sk-w40{ width:40% }
.sk-line.sk-w55{ width:55% }
.sk-line.sk-w70{ width:70% }
.sk-line.sk-w85{ width:85% }
.sk-line.sk-w100{ width:100% }

/* ---- card skeletons ----
   .sk-card is applied ALONGSIDE the page's own .card class, so flex-basis,
   width and every media-query override come from the real rules. Only the
   inside is replaced. */
.sk-card{ cursor:default; pointer-events:none; }
.sk-card .sk-cover{
  /* .cover already supplies aspect-ratio, radius and overflow on every page,
     so this only needs the shimmer surface */
  width:100%;
  background:var(--sk-base);
}
.sk-card .sk-meta{ display:block }

/* A skeleton rail mirrors .rail > h2 + .track-wrap > .track without needing the
   arrows, and inherits the track's own overflow handling. */
.sk-rail-title{ height:1.5em; width:min(240px,55%); margin:0 0 14px; border-radius:8px }
.sk-track{ display:flex; gap:14px; overflow:hidden; padding:6px 26px 14px }
@media(max-width:900px){ .sk-track{ gap:18px; padding:7px 16px 16px } }
@media(max-width:620px){ .sk-track{ gap:12px; padding:5px 7px 12px } }

/* ---- table / row skeletons ---- */
tr.sk-row > td{ padding-block:14px }
.sk-row .sk-line{ margin:0 }
/* feed-style lists that are not tables (the activity log) */
.sk-feed-row{
  display:flex; align-items:center; gap:12px;
  padding:14px 12px; margin:8px 0;
  border:1px solid var(--sk-base); border-radius:14px;
}
.sk-feed-row .sk-dot{ flex:0 0 34px; height:34px; border-radius:50% }
.sk-feed-row .sk-body{ flex:1 1 auto; min-width:0 }

/* ---- a small spinner for inside a play button ----
   Sized in em so it follows whatever font-size the button already has, and it
   replaces the glyph rather than sitting next to it, so the button does not
   change size while audio is resolving. */
.sk-spin{
  display:inline-block;
  width:1em; height:1em;
  border:.14em solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:sk-spin .7s linear infinite;
  vertical-align:-.12em;
}
@keyframes sk-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){
  /* a still ring reads as "busy" without spinning */
  .sk-spin{ animation:none; border-top-color:currentColor; opacity:.5 }
}

/* Containers marked busy should not let a half-built skeleton be interacted
   with, and must never introduce a horizontal scrollbar. */
[aria-busy="true"] .sk,[aria-busy="true"] .sk-card{ user-select:none }
[aria-busy="true"]{ overflow-x:clip }