/* FapSwipe Core 0.31.0 — shared Stack/Grid discovery + taxonomy filtering. */
/*
 * Full-stage feed contract
 * ------------------------
 * STABILITY CONTRACT — EDIT AT YOUR OWN PERIL:
 * Every organic slide owns the full dynamic viewport. Media is contained inside
 * that stage rather than sizing the slide itself. This keeps video, image,
 * interstitial and future navigation layers aligned to one viewport coordinate
 * system and prevents portrait media from creating a shorter swipe surface.
 */
.fapswipe-feed,
.fapswipe-swiper,
.fapswipe-slide {
    width: 100%;
    min-height: 100vh;
    height: 100dvh;
}

.fapswipe-feed {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;

    /* Core design tokens. Skins and deliberate admin/developer overrides change
     * values, while layout/interaction selectors continue consuming one contract. */
    --fapswipe-stage-bg: #000000;
    --fapswipe-text: #ffffff;
    --fapswipe-text-muted: rgb(255 255 255 / 0.90);
    --fapswipe-accent: #ffffff;
    --fapswipe-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fapswipe-pill-height: 28px;
    --fapswipe-pill-padding-inline: 10px;
    --fapswipe-pill-bg: rgb(8 8 8 / 0.68);
    --fapswipe-pill-bg-hover: rgb(8 8 8 / 0.84);
    --fapswipe-pill-text: #ffffff;
    --fapswipe-pill-border: rgb(255 255 255 / 0.28);
    --fapswipe-cta-bg: #ffffff;
    --fapswipe-cta-text: #111111;
    --fapswipe-cta-border: #ffffff;
    --fapswipe-ui-control-size: 40px;
    --fapswipe-ui-control-gap: 9px;
    --fapswipe-ui-rail-inset: 24px;
    /*
     * Desktop feed navigation owns a second right-side lane. Keep this derived
     * from the shared control geometry instead of hard-coding pixels so Native
     * Player controls can remain in the primary rail without collisions.
     */
    --fapswipe-nav-rail-inset: calc(var(--fapswipe-ui-rail-inset, 24px) + var(--fapswipe-ui-control-size, 40px) + var(--fapswipe-ui-control-gap, 9px));
    --fapswipe-ui-icon-size: 18px;
    --fapswipe-ui-control-bg: rgb(8 8 8 / 0.78);
    --fapswipe-ui-control-bg-hover: rgb(8 8 8 / 0.92);
    --fapswipe-ui-control-text: #ffffff;
    --fapswipe-ui-control-border: rgb(255 255 255 / 0.34);
    --fapswipe-ui-control-border-hover: rgb(255 255 255 / 0.54);
    --fapswipe-ui-control-shadow: 0 6px 18px rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.12);
    --fapswipe-color-scheme: dark;

    overflow: hidden;
    background: var(--fapswipe-stage-bg);
    color: var(--fapswipe-text);
    color-scheme: var(--fapswipe-color-scheme);
    font-family: var(--fapswipe-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.fapswipe-feed,
.fapswipe-feed *,
.fapswipe-feed *::before,
.fapswipe-feed *::after {
    box-sizing: border-box;
}

/* Preset skins change chrome, never feed geometry or interaction behavior. */
.fapswipe-feed[data-fapswipe-skin="frost"] {
    --fapswipe-pill-bg: rgb(255 255 255 / 0.88);
    --fapswipe-pill-bg-hover: rgb(255 255 255 / 0.96);
    --fapswipe-pill-text: #111111;
    --fapswipe-pill-border: rgb(0 0 0 / 0.16);
    --fapswipe-cta-bg: #ffffff;
    --fapswipe-cta-text: #111111;
    --fapswipe-cta-border: #ffffff;
    --fapswipe-ui-control-bg: rgb(255 255 255 / 0.88);
    --fapswipe-ui-control-bg-hover: rgb(255 255 255 / 0.97);
    --fapswipe-ui-control-text: #111111;
    --fapswipe-ui-control-border: rgb(0 0 0 / 0.16);
    --fapswipe-ui-control-border-hover: rgb(0 0 0 / 0.28);
    --fapswipe-ui-control-shadow: 0 6px 18px rgb(0 0 0 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.6);
    --fapswipe-color-scheme: light;
}

.fapswipe-feed[data-fapswipe-skin="minimal"] {
    --fapswipe-pill-bg: rgb(0 0 0 / 0.42);
    --fapswipe-pill-bg-hover: rgb(0 0 0 / 0.58);
    --fapswipe-pill-border: rgb(255 255 255 / 0.18);
    --fapswipe-ui-control-bg: rgb(0 0 0 / 0.42);
    --fapswipe-ui-control-bg-hover: rgb(0 0 0 / 0.58);
    --fapswipe-ui-control-border: rgb(255 255 255 / 0.18);
    --fapswipe-ui-control-border-hover: rgb(255 255 255 / 0.34);
    --fapswipe-ui-control-shadow: none;
}

/* Theme typography is opt-in. All other visual tokens remain FapSwipe-owned. */
.fapswipe-feed[data-fapswipe-typography="theme"] {
    font-family: inherit;
}

.fapswipe-slide {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    background: var(--fapswipe-stage-bg);
}

/*
 * Media stage
 * -----------
 * SAFE TO STYLE, DO NOT CHANGE THE GEOMETRY CONTRACT casually. The semantic
 * `.fapswipe-media-stage` class is the skin extension point; the legacy
 * `.fapswipe-player-wrap` class remains for compatibility with existing code.
 */
.fapswipe-player-wrap,
.fapswipe-media-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    overflow: hidden;
    background: var(--fapswipe-stage-bg);
}

/*
 * Extension-owned media markup is rendered before Core's overlay/action rail.
 * Normalize every direct media child while explicitly excluding Core chrome so
 * a provider may return one wrapper or a small group without changing geometry.
 */
.fapswipe-media-stage > :not(.fapswipe-overlay):not(.fapswipe-actions),
.fapswipe-player-wrap > :not(.fapswipe-overlay):not(.fapswipe-actions) {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
}

/*
 * Videos use `contain`, not `cover`: the visitor should see the complete source
 * frame on both desktop and mobile. Portrait video therefore gets natural black
 * side bars on wide screens instead of destructive cropping.
 */
.fapswipe-media-stage video,
.fapswipe-player-wrap video,
.fapswipe-media-stage .fapswipe-native-video,
.fapswipe-player-wrap .fapswipe-native-video {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    background: var(--fapswipe-stage-bg);
}

/* Player-provider wrappers must participate in the same full-height stage. */
.fapswipe-media-stage .freedomplayer,
.fapswipe-media-stage .flowplayer,
.fapswipe-player-wrap .freedomplayer,
.fapswipe-player-wrap .flowplayer {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

/*
 * Images are never top-anchored. Contain + center guarantees the whole image is
 * visible even when its aspect ratio is taller/wider than the device viewport.
 */
.fapswipe-slide[data-media-type="image"] .fapswipe-media-stage > :not(.fapswipe-overlay):not(.fapswipe-actions):not(img):not(picture),
.fapswipe-slide[data-media-type="image"] .fapswipe-player-wrap > :not(.fapswipe-overlay):not(.fapswipe-actions):not(img):not(picture) {
    display: grid;
    place-items: center;
    overflow: hidden;
}

.fapswipe-slide[data-media-type="image"] .fapswipe-media-stage picture,
.fapswipe-slide[data-media-type="image"] .fapswipe-media-stage img,
.fapswipe-slide[data-media-type="image"] .fapswipe-player-wrap picture,
.fapswipe-slide[data-media-type="image"] .fapswipe-player-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center center;
}

/*
 * A subtle lower fade improves title/taxonomy legibility without creating a
 * separate footer panel. Interstitial Ads owns its own presentation gradient.
 */
.fapswipe-slide:not(.fapswipe-ad-slide)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    height: min(28%, 300px);
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.08) 32%, rgb(0 0 0 / 0.58) 100%);
}

.fapswipe-overlay {
    position: absolute;
    left: 16px;
    right: calc(var(--fapswipe-ui-rail-inset, 24px) + var(--fapswipe-ui-control-size, 40px) + 12px);
    bottom: 76px;
    z-index: 20;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

.fapswipe-feed .fapswipe-creator,
.fapswipe-feed .fapswipe-duration,
.fapswipe-feed .fapswipe-title,
.fapswipe-feed .fapswipe-description,
.fapswipe-feed .fapswipe-taxonomy {
    font-family: inherit;
    text-transform: none;
}

.fapswipe-feed .fapswipe-creator,
.fapswipe-feed .fapswipe-duration {
    color: var(--fapswipe-text-muted);
}

/* One-line metadata keeps the overlay compact like modern short-form viewers and
 * prevents imported editorial copy from obscuring the media surface. */
.fapswipe-feed .fapswipe-title {
    display: block;
    min-width: 0;
    max-width: 100%;
    margin: 4px 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--fapswipe-text);
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fapswipe-feed .fapswipe-title a {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: inherit;
    white-space: nowrap;
    pointer-events: auto;
}

.fapswipe-feed .fapswipe-title a:hover,
.fapswipe-feed .fapswipe-title a:focus-visible {
    color: inherit;
    text-decoration: none;
}

.fapswipe-feed .fapswipe-description {
    display: block;
    min-width: 0;
    max-width: 680px;
    margin: 4px 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--fapswipe-text-muted);
    font-size: 0.92rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fapswipe-feed .fapswipe-taxonomy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}

/* Category and tag pills share identical geometry. Text length may change width,
 * but taxonomy type never changes height, padding, radius, or vertical alignment. */
.fapswipe-feed .fapswipe-taxonomy-link {
    appearance: none;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: var(--fapswipe-pill-height, 28px);
    min-height: var(--fapswipe-pill-height, 28px);
    margin: 0;
    padding: 0 var(--fapswipe-pill-padding-inline, 10px);
    overflow: hidden;
    border: 1px solid var(--fapswipe-pill-border);
    border-radius: 999px;
    background: var(--fapswipe-pill-bg);
    color: var(--fapswipe-pill-text);
    font-family: inherit;
    font-size: 11px;
    font-style: normal;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.9);
    text-transform: none;
    white-space: nowrap;
    pointer-events: auto;
}

.fapswipe-feed .fapswipe-taxonomy-link:hover,
.fapswipe-feed .fapswipe-taxonomy-link:focus-visible {
    border-color: var(--fapswipe-pill-border);
    background: var(--fapswipe-pill-bg-hover);
    color: var(--fapswipe-pill-text);
    text-decoration: none;
}

.fapswipe-feed .fapswipe-taxonomy-link:focus-visible {
    outline: 2px solid var(--fapswipe-accent);
    outline-offset: 2px;
}

/* Stable CTA skin hook for Core/extension-owned editorial actions. Ads retains
 * its own independent styling contract. */
.fapswipe-feed .fapswipe-cta,
.fapswipe-feed .fapswipe-cta-button,
.fapswipe-feed a[data-fapswipe-cta],
.fapswipe-feed button[data-fapswipe-cta] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--fapswipe-cta-border);
    border-radius: 999px;
    background: var(--fapswipe-cta-bg);
    color: var(--fapswipe-cta-text);
    font-family: inherit;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
}

.fapswipe-feed .fapswipe-cta:hover,
.fapswipe-feed .fapswipe-cta:focus-visible,
.fapswipe-feed .fapswipe-cta-button:hover,
.fapswipe-feed .fapswipe-cta-button:focus-visible,
.fapswipe-feed a[data-fapswipe-cta]:hover,
.fapswipe-feed a[data-fapswipe-cta]:focus-visible,
.fapswipe-feed button[data-fapswipe-cta]:hover,
.fapswipe-feed button[data-fapswipe-cta]:focus-visible {
    color: var(--fapswipe-cta-text);
    text-decoration: none;
    filter: brightness(0.94);
}

.fapswipe-feed .fapswipe-cta:focus-visible,
.fapswipe-feed .fapswipe-cta-button:focus-visible,
.fapswipe-feed a[data-fapswipe-cta]:focus-visible,
.fapswipe-feed button[data-fapswipe-cta]:focus-visible {
    outline: 2px solid var(--fapswipe-accent);
    outline-offset: 2px;
}

.fapswipe-actions {
    position: absolute;
    right: var(--fapswipe-ui-rail-inset, 24px);
    bottom: 84px;
    z-index: 21;
    display: grid;
    justify-items: center;
    gap: 6px;
}

.fapswipe-action-item {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: var(--fapswipe-ui-control-size, 40px);
}

.fapswipe-action-caption {
    display: block;
    max-width: 56px;
    overflow: hidden;
    color: rgb(255 255 255 / 0.92);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.92);
    white-space: nowrap;
    pointer-events: none;
}

.fapswipe-actions a,
.fapswipe-actions button,
.fapswipe-prev,
.fapswipe-next {
    appearance: none;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: var(--fapswipe-ui-control-size, 40px);
    height: var(--fapswipe-ui-control-size, 40px);
    margin: 0;
    padding: 0;
    border: 1px solid var(--fapswipe-ui-control-border, rgb(255 255 255 / 0.24));
    border-radius: 999px;
    background: var(--fapswipe-ui-control-bg, rgb(8 8 8 / 0.58));
    box-shadow: var(--fapswipe-ui-control-shadow, 0 4px 14px rgb(0 0 0 / 0.42));
    color: var(--fapswipe-ui-control-text);
    text-decoration: none;
    cursor: pointer;
    opacity: 0.94;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.fapswipe-actions a:hover,
.fapswipe-actions a:focus-visible,
.fapswipe-actions button:hover,
.fapswipe-actions button:focus-visible,
.fapswipe-prev:hover,
.fapswipe-prev:focus-visible,
.fapswipe-next:hover,
.fapswipe-next:focus-visible {
    background: var(--fapswipe-ui-control-bg-hover, rgb(8 8 8 / 0.78));
    border-color: var(--fapswipe-ui-control-border-hover);
    opacity: 1;
}

.fapswipe-actions a:active,
.fapswipe-actions button:active,
.fapswipe-prev:active,
.fapswipe-next:active {
    transform: scale(0.94);
}

.fapswipe-actions a:focus-visible,
.fapswipe-actions button:focus-visible,
.fapswipe-prev:focus-visible,
.fapswipe-next:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.fapswipe-actions svg,
.fapswipe-prev svg,
.fapswipe-next svg {
    display: block;
    width: var(--fapswipe-ui-icon-size, 18px);
    height: var(--fapswipe-ui-icon-size, 18px);
    fill: currentColor;
}

.fapswipe-prev,
.fapswipe-next {
    position: absolute;
    z-index: 30;
    right: var(--fapswipe-nav-rail-inset, 73px);
}

.fapswipe-prev { top: 14px; }
.fapswipe-next { top: calc(14px + var(--fapswipe-ui-control-size, 40px) + var(--fapswipe-ui-control-gap, 9px)); }

.fapswipe-feedback {
    position: absolute;
    left: 50%;
    bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px));
    z-index: 60;
    max-width: min(80vw, 320px);
    padding: 8px 12px;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 999px;
    background: rgb(10 10 10 / 0.88);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.38);
    color: var(--fapswipe-text);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.fapswipe-feedback[data-kind="error"] {
    border-color: rgb(255 255 255 / 0.28);
}

.fapswipe-feedback.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.fapswipe-player-missing,
.fapswipe-empty {
    padding: 24px;
    text-align: center;
}

.fapswipe-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*
 * Feed controls shell + visitor sort control
 * ------------------------------------------
 * Keep sorting outside the media/player lifecycle. Changing the selector performs
 * a normal GET navigation to a shareable `?sort=` URL, so the running Swiper never
 * has to be torn down and rebuilt in place. The active-filter row intentionally
 * lives underneath the sort row inside one shell to avoid control overlap.
 */
.fapswipe-feed-controls {
    position: absolute;
    top: 14px;
    left: 50%;
    z-index: 46;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(72vw, 520px);
    max-width: calc(100vw - 136px);
    padding-inline: 4px;
    transform: translateX(-50%);
}

.fapswipe-sort-control {
    position: static;
    display: block;
    width: 100%;
    max-width: min(58vw, 220px);
}

.fapswipe-sort-select {
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 8px 34px 8px 13px;
    border: 1px solid var(--fapswipe-ui-control-border, rgb(255 255 255 / 0.34));
    border-radius: 999px;
    background-color: var(--fapswipe-ui-control-bg, rgb(8 8 8 / 0.78));
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    box-shadow: var(--fapswipe-ui-control-shadow, 0 6px 18px rgb(0 0 0 / 0.55));
    color: var(--fapswipe-ui-control-text);
    color-scheme: var(--fapswipe-color-scheme);
    font-family: inherit;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.9);
    white-space: nowrap;
    cursor: pointer;
    opacity: .98;
}

.fapswipe-sort-select option,
.fapswipe-sort-select optgroup {
    background-color: var(--fapswipe-stage-bg);
    color: var(--fapswipe-text);
}

.fapswipe-sort-select:hover,
.fapswipe-sort-select:focus-visible {
    border-color: var(--fapswipe-ui-control-border-hover);
    background-color: var(--fapswipe-ui-control-bg-hover, rgb(8 8 8 / 0.92));
    opacity: 1;
}

.fapswipe-sort-select:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.fapswipe-sort-select:disabled {
    cursor: wait;
    opacity: .62;
}

/*
 * Active taxonomy filters
 * -----------------------
 * Filter discovery reuses the taxonomy chips already rendered with each slide;
 * this compact state bar appears only after a category/tag has been selected.
 * That avoids serializing a potentially enormous tag directory into every page.
 */
.fapswipe-filter-state {
    position: static;
    z-index: 47;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: none;
    white-space: nowrap;
}

.fapswipe-filter-state::-webkit-scrollbar {
    display: none;
}

.fapswipe-filter-chip,
.fapswipe-filter-clear {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    overflow: hidden;
    border: 1px solid var(--fapswipe-ui-control-border, rgb(255 255 255 / 0.34));
    border-radius: 999px;
    background: var(--fapswipe-ui-control-bg, rgb(8 8 8 / 0.78));
    box-shadow: var(--fapswipe-ui-control-shadow, 0 6px 18px rgb(0 0 0 / 0.55));
    color: var(--fapswipe-ui-control-text);
    font-family: inherit;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    flex: 0 0 auto;
    text-decoration: none;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.9);
}

.fapswipe-filter-chip-label {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fapswipe-filter-chip-taxonomy,
.fapswipe-filter-chip-term {
    overflow: hidden;
    text-overflow: ellipsis;
}

.fapswipe-filter-chip-separator,
.fapswipe-filter-chip-remove {
    flex: 0 0 auto;
}

.fapswipe-filter-clear {
    flex: 0 0 auto;
    padding-inline: 10px;
    opacity: .92;
}

.fapswipe-filter-chip:hover,
.fapswipe-filter-chip:focus-visible,
.fapswipe-filter-clear:hover,
.fapswipe-filter-clear:focus-visible {
    border-color: var(--fapswipe-ui-control-border-hover);
    background: var(--fapswipe-ui-control-bg-hover, rgb(8 8 8 / 0.92));
}

.fapswipe-filter-chip:focus-visible,
.fapswipe-filter-clear:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/*
 * Feed information visibility
 * ---------------------------
 * Visible mode is responsive: desktop keeps editorial context; phones keep only
 * the title so the player controls remain the primary bottom-layer interaction.
 * Clean View is browser-session UI state and never changes server/cache output.
 */
.fapswipe-info-toggle {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 45;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--fapswipe-ui-control-border, rgb(255 255 255 / 0.24));
    border-radius: 999px;
    background: var(--fapswipe-ui-control-bg, rgb(8 8 8 / 0.58));
    box-shadow: var(--fapswipe-ui-control-shadow, 0 4px 14px rgb(0 0 0 / 0.42));
    color: var(--fapswipe-ui-control-text);
    font-family: inherit;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    opacity: .78;
    transition: opacity 140ms ease, background 140ms ease;
}

.fapswipe-info-toggle:hover,
.fapswipe-info-toggle:focus-visible,
.fapswipe-feed[data-fapswipe-info-hidden="1"] .fapswipe-info-toggle {
    opacity: 1;
    background: var(--fapswipe-ui-control-bg-hover, rgb(8 8 8 / 0.78));
}

.fapswipe-info-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.fapswipe-feed[data-fapswipe-info-hidden="1"] .fapswipe-overlay,
.fapswipe-feed[data-fapswipe-info-hidden="1"] .fapswipe-actions,
.fapswipe-feed[data-fapswipe-info-hidden="1"] .fapswipe-prev,
.fapswipe-feed[data-fapswipe-info-hidden="1"] .fapswipe-next {
    display: none;
}

@media (max-width: 767px) {
    .fapswipe-feed {
        --fapswipe-ui-control-size: 38px;
        --fapswipe-ui-control-gap: 9px;
        --fapswipe-ui-icon-size: 18px;
        --fapswipe-ui-rail-inset: max(16px, calc(env(safe-area-inset-right, 0px) + 10px));
    }

    /* Touch-first mobile navigation is the swipe gesture; arrows add clutter. */
    .fapswipe-prev,
    .fapswipe-next {
        display: none !important;
    }

    /* Mobile keeps prose metadata hidden while exposing one lightweight taxonomy row. */
    .fapswipe-feed .fapswipe-creator,
    .fapswipe-feed .fapswipe-description,
    .fapswipe-feed .fapswipe-duration {
        display: none;
    }

    .fapswipe-feed .fapswipe-taxonomy {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        max-width: 100%;
        margin-top: 6px;
        overflow-x: auto;
        padding: 1px 1px 3px;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .fapswipe-feed .fapswipe-taxonomy::-webkit-scrollbar {
        display: none;
    }

    .fapswipe-feed .fapswipe-taxonomy-link {
        flex: 0 0 auto;
        width: auto;
        height: var(--fapswipe-pill-height, 26px);
        min-height: var(--fapswipe-pill-height, 26px);
        max-width: min(64vw, 240px);
        padding: 0 var(--fapswipe-pill-padding-inline, 8px);
        overflow: hidden;
        font-size: 10px;
        text-overflow: ellipsis;
    }

    .fapswipe-overlay {
        left: 14px;
        right: calc(var(--fapswipe-ui-rail-inset, 22px) + var(--fapswipe-ui-control-size, 38px) + 12px);
        bottom: 72px;
    }

    .fapswipe-feed {
        --fapswipe-pill-height: 26px;
        --fapswipe-pill-padding-inline: 8px;
    }

    .fapswipe-feed .fapswipe-title {
        display: block;
        overflow: hidden;
        margin: 0;
        font-size: 1rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Keep comments/share away from the bottom control bar. */
    .fapswipe-actions {
        right: var(--fapswipe-ui-rail-inset, 22px);
        top: 50%;
        bottom: auto;
        gap: 6px;
        transform: translateY(-50%);
    }

    .fapswipe-action-caption {
        max-width: 50px;
        font-size: 9px;
    }

    .fapswipe-info-toggle {
        top: max(10px, env(safe-area-inset-top, 0px));
        left: max(10px, env(safe-area-inset-left, 0px));
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .fapswipe-feed-controls {
        top: max(10px, env(safe-area-inset-top, 0px));
        gap: 6px;
        width: min(76vw, 320px);
        max-width: calc(100vw - 106px);
    }

    .fapswipe-sort-control {
        max-width: min(60vw, 220px);
    }

    .fapswipe-filter-state {
        gap: 4px;
    }

    .fapswipe-filter-chip,
    .fapswipe-filter-clear {
        min-height: 34px;
        padding: 7px 9px;
        font-size: 10px;
    }

    .fapswipe-filter-chip-taxonomy,
    .fapswipe-filter-chip-separator {
        display: none;
    }

    .fapswipe-sort-select {
        min-height: 34px;
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: 11px;
    }
}

/* Landscape phones and touch tablets can exceed the 767px width breakpoint. */
@media (hover: none) and (pointer: coarse) {
    .fapswipe-prev,
    .fapswipe-next {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fapswipe-info-toggle,
    .fapswipe-actions a,
    .fapswipe-actions button,
    .fapswipe-prev,
    .fapswipe-next,
    .fapswipe-feedback {
        transition: none;
    }
}

/*
 * Stack / Grid presentation
 * -------------------------
 * Grid is a discovery surface, not a second player wall. Only lightweight poster
 * cards are added as the visitor scrolls; the existing bounded Swiper remains the
 * sole owner of live media/player DOM and is disabled while Grid is visible.
 */
.fapswipe-feed-control-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.fapswipe-feed-control-row .fapswipe-sort-control {
    flex: 1 1 auto;
    min-width: 0;
}

.fapswipe-view-control {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 2px;
    border: 1px solid var(--fapswipe-ui-control-border, rgb(255 255 255 / 0.34));
    border-radius: 999px;
    background: var(--fapswipe-ui-control-bg, rgb(8 8 8 / 0.78));
    box-shadow: var(--fapswipe-ui-control-shadow, 0 6px 18px rgb(0 0 0 / 0.55));
}

.fapswipe-view-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    margin: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--fapswipe-ui-control-text);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    opacity: .72;
    touch-action: manipulation;
}

.fapswipe-view-button svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.fapswipe-view-button:hover,
.fapswipe-view-button:focus-visible,
.fapswipe-view-button.is-active,
.fapswipe-view-button[aria-pressed="true"] {
    background: var(--fapswipe-ui-control-bg-hover, rgb(255 255 255 / 0.14));
    opacity: 1;
}

.fapswipe-view-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.fapswipe-grid[hidden] {
    display: none !important;
}

.fapswipe-feed.is-fapswipe-grid {
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    background: var(--fapswipe-stage-bg);
}

.fapswipe-feed.is-fapswipe-grid .fapswipe-swiper,
.fapswipe-feed.is-fapswipe-grid .fapswipe-info-toggle {
    display: none !important;
}

.fapswipe-grid {
    width: 100%;
    min-height: 100dvh;
    padding: 70px 10px max(18px, env(safe-area-inset-bottom, 0px));
    background: var(--fapswipe-stage-bg);
    color: var(--fapswipe-text);
}


.fapswipe-grid-filter-bar[hidden] {
    display: none !important;
}

.fapswipe-grid-filter-bar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, 1800px);
    margin: 0 auto 10px;
    padding: 0 1px;
}

.fapswipe-grid-filter-label {
    flex: 0 0 auto;
    color: var(--fapswipe-muted-text, rgb(255 255 255 / 0.72));
    font-family: var(--fapswipe-font-family);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.fapswipe-grid-filter-list {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 1px 4px;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.fapswipe-grid-filter-list::-webkit-scrollbar {
    display: none;
}

.fapswipe-grid-filter-link {
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    max-width: min(38vw, 190px);
    margin: 0;
    padding: 6px 10px;
    overflow: hidden;
    border: 1px solid var(--fapswipe-pill-border, rgb(255 255 255 / 0.28));
    border-radius: var(--fapswipe-pill-radius, 999px);
    background: var(--fapswipe-pill-bg, rgb(8 8 8 / 0.64));
    box-shadow: none;
    color: var(--fapswipe-pill-text, #fff);
    font-family: var(--fapswipe-font-family);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.fapswipe-grid-filter-link:hover,
.fapswipe-grid-filter-link:focus-visible {
    border-color: var(--fapswipe-ui-control-border-hover, rgb(255 255 255 / 0.58));
    background: var(--fapswipe-ui-control-bg-hover, rgb(8 8 8 / 0.88));
}

.fapswipe-grid-filter-link:focus-visible {
    outline: 2px solid var(--fapswipe-accent, currentColor);
    outline-offset: 2px;
}

.fapswipe-grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    width: min(100%, 1800px);
    margin: 0 auto;
}

.fapswipe-grid-card {
    appearance: none;
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: #101010;
    box-shadow: none;
    color: #fff;
    font: inherit;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    touch-action: manipulation;
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 180px 320px;
    -webkit-tap-highlight-color: transparent;
}

.fapswipe-grid-card-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: linear-gradient(145deg, #202020, #080808);
}

.fapswipe-grid-card-media.is-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 35%, rgb(255 255 255 / 0.08), transparent 46%);
}

.fapswipe-grid-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background: #101010;
    transition: transform 160ms ease;
}

.fapswipe-grid-card:hover .fapswipe-grid-card-image,
.fapswipe-grid-card:focus-visible .fapswipe-grid-card-image {
    transform: scale(1.018);
}

.fapswipe-grid-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid rgb(255 255 255 / 0.26);
    border-radius: 999px;
    background: rgb(0 0 0 / 0.58);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    backdrop-filter: blur(5px);
}

.fapswipe-grid-card-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    padding: 44px 10px 10px;
    background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.82));
    pointer-events: none;
}

.fapswipe-grid-card-title {
    display: -webkit-box;
    overflow: hidden;
    color: #fff;
    font-family: var(--fapswipe-font-family);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.85);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fapswipe-grid-card:focus-visible {
    outline: 2px solid var(--fapswipe-accent, #fff);
    outline-offset: 2px;
}


.fapswipe-grid-empty {
    width: min(100%, 680px);
    margin: 18vh auto 0;
    padding: 18px;
    color: var(--fapswipe-muted-text, rgb(255 255 255 / 0.72));
    font-family: var(--fapswipe-font-family);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.fapswipe-grid-empty[hidden] {
    display: none !important;
}

.fapswipe-grid-sentinel {
    width: 100%;
    height: 2px;
    margin-top: 12px;
}

.fapswipe-grid.is-loading .fapswipe-grid-sentinel::after {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    margin: 4px auto 0;
    border: 2px solid rgb(255 255 255 / 0.22);
    border-top-color: var(--fapswipe-accent, #fff);
    border-radius: 50%;
    animation: fapswipe-grid-spin .75s linear infinite;
}

@keyframes fapswipe-grid-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 767px) {
    .fapswipe-feed-control-row {
        gap: 5px;
    }

    .fapswipe-feed-control-row .fapswipe-sort-control {
        max-width: none;
    }

    .fapswipe-view-button {
        width: 34px;
        min-height: 30px;
        padding: 5px;
    }

    .fapswipe-view-button span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .fapswipe-view-button svg {
        width: 16px;
        height: 16px;
    }

    .fapswipe-grid {
        padding: 58px 5px max(14px, env(safe-area-inset-bottom, 0px));
    }

    .fapswipe-grid-filter-bar {
        gap: 6px;
        margin-bottom: 6px;
    }

    .fapswipe-grid-filter-label {
        font-size: 10px;
    }

    .fapswipe-grid-filter-list {
        gap: 5px;
    }

    .fapswipe-grid-filter-link {
        min-height: 28px;
        max-width: min(52vw, 170px);
        padding: 6px 9px;
        font-size: 10px;
    }

    .fapswipe-grid-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .fapswipe-grid-card {
        border-radius: 7px;
        contain-intrinsic-size: 170px 302px;
    }

    .fapswipe-grid-card-badge {
        top: 6px;
        left: 6px;
        min-width: 24px;
        height: 24px;
        padding: 0 6px;
        font-size: 10px;
    }

    .fapswipe-grid-card-overlay {
        padding: 36px 8px 8px;
    }

    .fapswipe-grid-card-title {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fapswipe-grid-card-image {
        transition: none;
    }

    .fapswipe-grid.is-loading .fapswipe-grid-sentinel::after {
        animation-duration: 1.4s;
    }
}

/* Active taxonomy chips add a second controls row; reserve enough poster space. */
.fapswipe-feed.is-fapswipe-grid:has(.fapswipe-feed-controls.has-filters) .fapswipe-grid {
    padding-top: 108px;
}

@media (max-width: 767px) {
    .fapswipe-feed.is-fapswipe-grid:has(.fapswipe-feed-controls.has-filters) .fapswipe-grid {
        padding-top: 100px;
    }
}