@charset "UTF-8";
/*
 * File: css/modules/tnsb-main-top-stories.css
 * Version: 1.5.0
 * Date: 2026-10-23
 * Purpose: TOP-only Story owner caption colors depend on active posts,
 *          never on whether the visitor has viewed those posts.
 *
 * The shortcode renders #tnsb-stories > .tnsb-stories__icons containing
 * .tnsb-story-icon with a .label span. There is no .tnsb-stories ancestor:
 * the previous selector did not match and was therefore ineffective.
 */

/* Align the strip with TOP sections, without changing its plugin markup. */
.reel-container > .tnsb-main-top-stories {
    box-sizing: border-box;
    margin: 28px 2vw 0;
    padding: 0;
    min-width: 0;
    color: #fff;
}

/* Keep owner captions opaque even if the icon itself is dimmed after viewing.
 * Inactive rings retain their own plugin-supplied gray-ring styling. */
.reel-container > .tnsb-main-top-stories #tnsb-stories .tnsb-story-icon {
    opacity: 1 !important;
}

/*
 * Verified from staging Safari inspector (2026-10-23):
 *   has posts: .tnsb-story-icon.is-active[data-active="true"]
 *   no posts:  .tnsb-story-icon.no-posts[data-active="false"]
 * Use the real shortcode states, NOT .is-inactive, which is never emitted
 * here. Keep all captions opaque after the viewer has watched a story.
 */

/* Fallback: unknown or no-posts owner names are dim, never falsely white. */
.reel-container > .tnsb-main-top-stories #tnsb-stories .tnsb-story-icon .label {
    color: rgba(255, 255, 255, 0.38) !important;
    opacity: 1 !important;
}

/* Currently posted stories: white before AND after the viewer watches. */
.reel-container > .tnsb-main-top-stories #tnsb-stories .tnsb-story-icon.is-active .label,
.reel-container > .tnsb-main-top-stories #tnsb-stories .tnsb-story-icon[data-active="true"] .label {
    color: #fff !important;
    opacity: 1 !important;
}

/* No current posts: dim the name regardless of other transient states. */
.reel-container > .tnsb-main-top-stories #tnsb-stories .tnsb-story-icon.no-posts .label,
.reel-container > .tnsb-main-top-stories #tnsb-stories .tnsb-story-icon[data-active="false"] .label {
    color: rgba(255, 255, 255, 0.38) !important;
    opacity: 1 !important;
}

/* Guests: keep every Story thumbnail in full color.
 * Both the avatar and any enclosing Story element must be unfiltered;
 * removing the filter from img alone cannot cancel an ancestor's grayscale.
 * No changes to overlay tap restrictions, inactive name colors, or viewed state.
 */
.reel-container > .tnsb-main-top-stories.is-guest,
.reel-container > .tnsb-main-top-stories.is-guest #tnsb-stories,
.reel-container > .tnsb-main-top-stories.is-guest #tnsb-stories .tnsb-stories__icons,
.reel-container > .tnsb-main-top-stories.is-guest #tnsb-stories .tnsb-story-icon,
.reel-container > .tnsb-main-top-stories.is-guest #tnsb-stories .tnsb-story-icon img {
    -webkit-filter: none !important;
    filter: none !important;
}

@media (max-width: 780px) {
    .reel-container > .tnsb-main-top-stories {
        margin: 20px 17px 0;
    }
}