/* Silo: Discover boot skeleton.
 *
 * Every value on Discover is dynamic — the movers strip and the markets rows
 * all stand in for a feed — so while html.silo-skel is set (silo-skeleton.js
 * clears it after a randomised 0.5-1.3s "load") each of those bits paints as a
 * shimmer pill instead of its text. The pill sizes itself off the real content
 * it is covering, so the reveal costs no layout shift: nothing moves, the text
 * simply arrives. Static chrome — headers, tabs, filters, the search field —
 * is never skeletonised; it is already there on first paint.
 *
 * html.silo-skel-rows is the same treatment scoped to the table alone, held
 * across a tab switch (All / Trending / Established / …): the pager swaps in a
 * fresh table whose stat and price cells still carry the captured placeholder
 * values, and the passes that paint the real numbers land a beat later. The
 * rows stay pilled over that gap, so a switch reads as a fetch instead of
 * flashing fallback figures. The movers strip is untouched — it did not
 * reload, so it must not blink.
 */

html.silo-skel .sc-logo,
html.silo-skel .sc-name,
html.silo-skel .sc-price,
html.silo-skel .sc-d,
html.silo-skel .sm-icons,
html.silo-skel .sm-pair,
html.silo-skel .sm-c-trend::after,
html.silo-skel .sm-v,
html.silo-skel .sm-d,
html.silo-skel-rows .sm-icons,
html.silo-skel-rows .sm-pair,
html.silo-skel-rows .sm-c-trend::after,
html.silo-skel-rows .sm-v,
html.silo-skel-rows .sm-d {
  border-radius: 999px;
  background-color: transparent;
  background-image: linear-gradient(90deg, #ececea 25%, #f6f6f4 50%, #ececea 75%);
  background-size: 200% 100%;
  animation: silo-shimmer 1.1s linear infinite;
  color: transparent !important;
  box-shadow: none;
}

/* glyphs, logos and the robinhood tag ride inside those pills: blank them out
   without collapsing the width they contribute */
html.silo-skel .sc-name > *,
html.silo-skel .sc-logo > *,
html.silo-skel .sm-pair > *,
html.silo-skel .sm-icons > *,
html.silo-skel .sm-d > *,
html.silo-skel-rows .sm-pair > *,
html.silo-skel-rows .sm-icons > *,
html.silo-skel-rows .sm-d > * {
  visibility: hidden;
}

/* values hug their own text, so the pill is the width of the number that is
   coming rather than the whole column */
html.silo-skel .sm-v,
html.silo-skel .sm-d,
html.silo-skel-rows .sm-v,
html.silo-skel-rows .sm-d {
  width: fit-content;
  margin-left: auto;
}

/* canvas and img paint over a background, so the trend cell wears the pill and
   the sparkline hides beneath it */
html.silo-skel .sm-c-trend,
html.silo-skel-rows .sm-c-trend { position: relative; }
html.silo-skel .sm-c-trend .sm-spark,
html.silo-skel-rows .sm-c-trend .sm-spark { visibility: hidden; }
html.silo-skel .sm-c-trend::after,
html.silo-skel-rows .sm-c-trend::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 92px;
  height: 12px;
  transform: translateY(-50%);
}

/* stagger down the table: rows nearer the fold shimmer a beat later, which
   reads as data filling in rather than one flat block */
html.silo-skel .sm-row:nth-child(2n) .sm-v,
html.silo-skel .sm-row:nth-child(2n) .sm-d,
html.silo-skel-rows .sm-row:nth-child(2n) .sm-v,
html.silo-skel-rows .sm-row:nth-child(2n) .sm-d { animation-delay: 0.12s; }
html.silo-skel .sm-row:nth-child(3n) .sm-v,
html.silo-skel .sm-row:nth-child(3n) .sm-d,
html.silo-skel-rows .sm-row:nth-child(3n) .sm-v,
html.silo-skel-rows .sm-row:nth-child(3n) .sm-d { animation-delay: 0.24s; }

/* the values fade up as the pills release */
.sc-name, .sc-price, .sc-d,
.sm-pair, .sm-v, .sm-d {
  transition: color 0.22s ease, background-color 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.silo-skel .sc-logo,
  html.silo-skel .sc-name,
  html.silo-skel .sc-price,
  html.silo-skel .sc-d,
  html.silo-skel .sm-icons,
  html.silo-skel .sm-pair,
  html.silo-skel .sm-c-trend::after,
  html.silo-skel .sm-v,
  html.silo-skel .sm-d,
  html.silo-skel-rows .sm-icons,
  html.silo-skel-rows .sm-pair,
  html.silo-skel-rows .sm-c-trend::after,
  html.silo-skel-rows .sm-v,
  html.silo-skel-rows .sm-d {
    animation: none;
    background-image: none;
    background-color: #ececea;
  }
}

/* ---- market page ----------------------------------------------------- */
/* Same idea as the rows: a pool is built and filled in one pass, so its
   figures are held behind pills while it "loads". Only the values shimmer —
   the frame, the labels and the tabs stay put, so nothing shifts when they
   land. */
html.silo-skel-market .smp-headline-value,
html.silo-skel-market .smp-headline-delta,
html.silo-skel-market .smp-hstat-value,
html.silo-skel-market .smp-context b,
html.silo-skel-market .smp-mini-value,
html.silo-skel-market .smp-delta-chip,
html.silo-skel-market .smp-mini-sub,
html.silo-skel-market .smp-fee-now,
html.silo-skel-market .smp-ratio-side,
html.silo-skel-market .smp-canvas-wrap::after,
html.silo-skel-market .smp-fee-wrap::after {
  border-radius: 999px;
  background-color: transparent;
  background-image: linear-gradient(90deg, #ececea 25%, #f6f6f4 50%, #ececea 75%);
  background-size: 200% 100%;
  animation: silo-shimmer 1.1s linear infinite;
  color: transparent !important;
  box-shadow: none;
}

/* the two canvases are drawn, not text: cover them with a pill of their own */
html.silo-skel-market .smp-canvas-wrap,
html.silo-skel-market .smp-fee-wrap { position: relative; }
html.silo-skel-market .smp-canvas-wrap::after,
html.silo-skel-market .smp-fee-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
}
html.silo-skel-market .smp-canvas,
html.silo-skel-market .smp-fee-canvas { opacity: 0; }

/* glyphs riding inside a pilled value are blanked without collapsing width */
html.silo-skel-market .smp-headline-delta > *,
html.silo-skel-market .smp-delta-chip > *,
html.silo-skel-market .smp-ratio-side > * { visibility: hidden; }

/* values hug their own text so the pill is the width of what is coming */
html.silo-skel-market .smp-headline-value,
html.silo-skel-market .smp-mini-value,
html.silo-skel-market .smp-hstat-value,
html.silo-skel-market .smp-fee-now { width: fit-content; }

html[data-silo-theme="dark"].silo-skel-market .smp-headline-value,
html[data-silo-theme="dark"].silo-skel-market .smp-headline-delta,
html[data-silo-theme="dark"].silo-skel-market .smp-hstat-value,
html[data-silo-theme="dark"].silo-skel-market .smp-context b,
html[data-silo-theme="dark"].silo-skel-market .smp-mini-value,
html[data-silo-theme="dark"].silo-skel-market .smp-delta-chip,
html[data-silo-theme="dark"].silo-skel-market .smp-mini-sub,
html[data-silo-theme="dark"].silo-skel-market .smp-fee-now,
html[data-silo-theme="dark"].silo-skel-market .smp-ratio-side,
html[data-silo-theme="dark"].silo-skel-market .smp-canvas-wrap::after,
html[data-silo-theme="dark"].silo-skel-market .smp-fee-wrap::after {
  background-image: linear-gradient(90deg, #24262a 25%, #2c2f34 50%, #24262a 75%);
}