/* ====================================================================
   SKELETON LOADERS

   Shimmer-style loading placeholders for any async UI surface. Use
   in any of three ways:

   1. WRAPPER element with class="skeleton" — entire children area
      blurs and shows shimmer until JS removes the class:

        <div class="skeleton">
            <!-- real content already rendered server-side -->
        </div>
        // JS: el.classList.remove('skeleton') when ready

   2. PLACEHOLDER blocks with shape classes — render where data is
      not yet available:

        <div class="skel skel--card"></div>
        <div class="skel skel--list-item"></div>
        <div class="skel skel--text"></div>

   3. WAITING-FOR-FETCH wrapper that hides children + shows
      a single shimmer pulse:

        <div class="skel-wait" aria-busy="true">
            <span class="skel skel--text"></span>
        </div>

   Performance: the shimmer is a single linear-gradient animation
   running at 60fps on the GPU. No layout thrash. Animation pauses
   when the user has `prefers-reduced-motion: reduce` set.
==================================================================== */


/* ---- The shimmer effect itself ----
   A 200% wide gradient that translates across the parent.
   Color stops are biased to match both light and dark themes. */
@keyframes masthead-skel-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.skel,
.skeleton-pulse {
    display: block;
    background: linear-gradient(
        90deg,
        var(--skel-base, rgba(0, 0, 0, 0.06)) 25%,
        var(--skel-shine, rgba(0, 0, 0, 0.12)) 50%,
        var(--skel-base, rgba(0, 0, 0, 0.06)) 75%
    );
    background-size: 200% 100%;
    animation: masthead-skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 3px;
    /* prevent text inside skel from showing through */
    color: transparent;
    user-select: none;
}

/* Dark / negative theme variants — softer shimmer on dark bg */
[data-theme="dark"] .skel,
[data-theme="dark"] .skeleton-pulse,
[data-theme="negative"] .skel,
[data-theme="negative"] .skeleton-pulse {
    --skel-base: rgba(255, 255, 255, 0.06);
    --skel-shine: rgba(255, 255, 255, 0.14);
}


/* ---- Shape variants ---- */

/* Heading: short bar, font-height-ish */
.skel--heading {
    height: 1.4em;
    width: 70%;
    margin-bottom: 8px;
}

/* Subtitle / deck */
.skel--text {
    height: 0.9em;
    width: 100%;
    margin-bottom: 6px;
}
.skel--text:nth-child(even) { width: 92%; }
.skel--text:nth-child(3n) { width: 78%; }

/* Avatar dot */
.skel--avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: 0 0 28px;
}
.skel--avatar-lg {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: 0 0 44px;
}

/* Card thumbnail */
.skel--thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 3px;
    margin-bottom: 12px;
}
.skel--thumb-square {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 3px;
}

/* Tag pill */
.skel--pill {
    display: inline-block;
    height: 22px;
    width: 60px;
    border-radius: 11px;
    margin: 2px;
    vertical-align: middle;
}

/* Whole-card skeleton (used on home columns when JS hasn't finished
   fetching the next batch) */
.skel--card {
    padding: 16px 18px 22px;
    border-bottom: 1px solid var(--line, #e6e6e3);
    background: transparent;
    /* `.skel--card` is a CONTAINER, not the shimmer source — its
       children carry the shimmer. Override the shimmer animation
       since the container itself shouldn't shimmer. */
    animation: none;
    color: inherit;
    user-select: auto;
}

/* Skeleton row (list-item / notification / followed-author row etc) */
.skel--row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line, #e6e6e3);
    /* same: container only — no shimmer */
    animation: none;
    background: transparent;
    color: inherit;
    user-select: auto;
}
.skel--row .skel--row-body {
    flex: 1 1 auto;
    min-width: 0;  /* prevents children overflow in flex */
}


/* ---- Wrapper-based skeleton (blurs real content) ----
   For when we DO have content rendered server-side but want to
   indicate "this section is being refreshed". Use sparingly. */
.skeleton {
    position: relative;
    pointer-events: none;
}
.skeleton > * {
    opacity: 0.35;
    filter: blur(1px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--skel-shine, rgba(0, 0, 0, 0.06)) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: masthead-skel-shimmer 1.4s ease-in-out infinite;
    pointer-events: none;
}
.skeleton.skeleton--done > * {
    opacity: 1;
    filter: none;
}
.skeleton.skeleton--done::after {
    display: none;
}


/* ---- Reduced motion ----
   Stop the animation. The grey base remains so users still see a
   visual difference between "loading" and "loaded", just without
   the moving gradient that can be uncomfortable. */
@media (prefers-reduced-motion: reduce) {
    .skel,
    .skeleton-pulse,
    .skeleton::after {
        animation: none;
        background-size: 100% 100%;
        background-position: 0 0;
        background: var(--skel-base, rgba(0, 0, 0, 0.08));
    }
}


/* ---- aria-busy state for accessibility ----
   When the parent has aria-busy="true", screen readers can announce
   that the region is loading. Add this to any container that
   contains .skel children. */
[aria-busy="true"] {
    cursor: progress;
}


/* ====================================================================
   APPLICATION-SPECIFIC SKELETONS
   These wrap real elements in the theme, replacing text with shimmer
   bars while async work is in flight.
==================================================================== */


/* ---- Weather widget loading state ----
   While JS is fetching geolocation + weather, hide the "--°C Loading…"
   text fallback and show a compact shimmer line instead. */
.weather.is-loading .temp,
.weather.is-loading .cond,
.weather.is-loading .weather-city {
    /* Hide the text content */
    color: transparent;
    position: relative;
    /* And paint the shimmer over the area */
    background: linear-gradient(
        90deg,
        var(--skel-base, rgba(0, 0, 0, 0.06)) 25%,
        var(--skel-shine, rgba(0, 0, 0, 0.12)) 50%,
        var(--skel-base, rgba(0, 0, 0, 0.06)) 75%
    );
    background-size: 200% 100%;
    animation: masthead-skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 3px;
    display: inline-block;
    min-width: 60px;
    line-height: 1.2;
}
.weather.is-loading .weather-icon {
    opacity: 0.3;
}
[data-theme="dark"] .weather.is-loading .temp,
[data-theme="dark"] .weather.is-loading .cond,
[data-theme="dark"] .weather.is-loading .weather-city,
[data-theme="negative"] .weather.is-loading .temp,
[data-theme="negative"] .weather.is-loading .cond,
[data-theme="negative"] .weather.is-loading .weather-city {
    /* reuse dark vars (already set globally above for .skel) */
}


/* ---- Notifications panel — initial fetch shimmer ----
   When window.Masthead.notifications hasn't been hydrated yet (rare,
   but happens on slow networks where JS evaluates before the inline
   localized data lands), show 3 skeleton rows. */
.notif-list-loading {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.notif-list-loading .skel--row {
    padding: 14px 16px;
}
.notif-list-loading .skel--row-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


/* ---- Account dashboard — async section skeletons ----
   Followed columnists, advanced search sliders, and other sections
   that depend on REST data fetched after first paint. */
.account-followed-loading {
    padding: 8px 0;
}
.account-followed-loading .skel--row {
    padding: 10px 0;
}


/* ---- Home column "Load more" skeleton ----
   When the user clicks Load More, we show 2 placeholder cards
   while the fetch resolves. Removed on the next render. */
.column-body .skel--card {
    padding: 16px 18px 22px;
    border-bottom: 1px solid var(--line, #e6e6e3);
}
.column-body .skel--card .skel--heading {
    margin-bottom: 12px;
    width: 85%;
}
.column-body .skel--card .skel--text:last-child {
    margin-bottom: 14px;
}
.column-body .skel--card .skel-byline {
    display: flex;
    align-items: center;
    gap: 10px;
}