/* ============================================================================
   Feed states — designed loading skeletons and empty states for Top 100,
   Today and Brands (design batch 1, 2026-10-08).

   Skeletons keep the exact boxes they already had (their heights were
   measured against the real cards to avoid layout shift); this only draws
   the card's shape inside them — logo, name, pay line and the stat row — and
   a soft violet sheen instead of a blinking grey slab. No extra markup.

     .sk.sk-card         brand card (Today, Brands, Changes)
     .sk.sk-row          compact ranked row (Today, Most active)
     .video-skeleton     Top 100 tile: the frame plus the facts below it
     .today-empty, #results>.empty, #tv>.empty   designed empty states
   ========================================================================= */
:root{--sk-ink:color-mix(in srgb,var(--ink) 8%,transparent);--sk-ink-2:color-mix(in srgb,var(--violet) 14%,transparent);
  --sk-sheen:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--violet) 9%,transparent) 50%,transparent 80%)}

.sk.sk-card,.sk.sk-row{position:relative;overflow:hidden;animation:none;opacity:1;border-color:color-mix(in srgb,var(--violet) 10%,var(--rule));border-radius:var(--r-lg);background-color:var(--pane);background-repeat:no-repeat}
.sk.sk-card{
  background-image:
    linear-gradient(var(--sk-ink) 0 0),linear-gradient(var(--sk-ink) 0 0),linear-gradient(var(--sk-ink) 0 0),
    linear-gradient(var(--sk-ink-2) 0 0),linear-gradient(var(--sk-ink-2) 0 0),
    linear-gradient(var(--sk-ink) 0 0),linear-gradient(var(--sk-ink) 0 0),linear-gradient(var(--sk-ink) 0 0);
  background-size:44px 44px,42% 13px,30% 10px,16% 10px,52% 16px,22% 28px,22% 28px,22% 28px;
  background-position:18px 18px,74px 22px,74px 44px,18px 86px,18px 106px,18px calc(100% - 18px),38% calc(100% - 18px),68% calc(100% - 18px)}
.sk.sk-row{
  background-image:linear-gradient(var(--sk-ink) 0 0),linear-gradient(var(--sk-ink) 0 0),linear-gradient(var(--sk-ink-2) 0 0),linear-gradient(var(--sk-ink) 0 0),linear-gradient(var(--sk-ink) 0 0);
  background-size:40px 40px,24% 13px,18% 13px,14% 22px,14% 22px;
  background-position:16px 50%,68px 50%,40% 50%,64% 50%,82% 50%}
@media(max-width:960px){.sk.sk-row{background-position:14px 16px,64px 22px,14px 70px,14px calc(100% - 16px),40% calc(100% - 16px)}}
.sk.sk-card::after,.sk.sk-row::after,.video-skeleton::after{content:"";position:absolute;inset:0;background:var(--sk-sheen);background-size:200% 100%;animation:sk-sheen 1.8s ease-in-out infinite}
@keyframes sk-sheen{0%{background-position:150% 0}100%{background-position:-50% 0}}

/* The Top 100 tile: frame on top, then the stat row, creator and hook. */
.video-grid>.video-skeleton{box-sizing:content-box;padding-bottom:150px;border:1px solid color-mix(in srgb,var(--violet) 10%,var(--rule));border-radius:var(--r-md);background-color:var(--pane);background-repeat:no-repeat;
  background-image:linear-gradient(var(--pane-2) 0 0),linear-gradient(var(--sk-ink) 0 0),linear-gradient(var(--sk-ink-2) 0 0),radial-gradient(circle,var(--sk-ink) 15px,transparent 16px),linear-gradient(var(--sk-ink) 0 0),linear-gradient(var(--sk-ink) 0 0);
  background-size:100% calc(100% - 150px),30% 10px,22% 14px,32px 32px,46% 11px,78% 11px;
  background-position:0 0,12px calc(100% - 128px),12px calc(100% - 106px),12px calc(100% - 52px),52px calc(100% - 62px),12px calc(100% - 18px)}

@media(prefers-reduced-motion:reduce){.sk.sk-card::after,.sk.sk-row::after,.video-skeleton::after{animation:none;background:none}}

/* Empty states: an icon, one plain sentence and the way forward. */
.today-empty,#results>.empty,#tv>.empty{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;padding:28px 20px;border:1px dashed color-mix(in srgb,var(--violet) 26%,var(--rule));border-radius:var(--r-lg);background:color-mix(in srgb,var(--violet) 3%,var(--pane));font-size:14.5px;line-height:1.5;color:var(--ink-2);text-align:center}
.today-empty::before,#results>.empty::before,#tv>.empty::before{content:"";width:28px;height:28px;background:var(--violet);opacity:.75;-webkit-mask:url("/icons/phosphor/magnifying-glass.svg") center/contain no-repeat;mask:url("/icons/phosphor/magnifying-glass.svg") center/contain no-repeat}
#results>.empty{grid-column:1/-1}
.today-empty a,#results>.empty a,#tv>.empty a{color:var(--violet);font-weight:600}