/**
 * FCA Ads Manager — frontend ad chrome (injected into the FC portal feed,
 * header, and sidebar). Uses FC design tokens so ads inherit the active
 * theme incl. dark mode.
 */


/* FCA-TOKENS:BEGIN - generated from src/css/tokens.css, do not edit here */
.fca-ads-root,
.fca-ad,
.fca-ads-page {
    /* Surfaces */
    --fcom-primary-bg: var(--el-bg-color, #fff);
    --fcom-secondary-bg: var(--el-fill-color-light, #f7f8fa);
    --fcom-active-bg: var(--el-fill-color, #f0f2f5);
    --fcom-highlight-bg: var(--el-fill-color-light, #f5f7fa);

    /* Text */
    --fcom-primary-text: var(--el-text-color-primary, #111827);
    --fcom-secondary-text: var(--el-text-color-regular, #4b5563);
    /*
     * Muted text (field hints, card descriptions, units) -- ~69 elements on
     * the settings page alone. This rode --el-text-color-secondary, which is
     * #909399 in light mode: 3.08:1 on white and 2.87:1 on the #f5f7fa card
     * head, i.e. below AA for the 11-13px text that uses it. Dark mode was
     * fine (#a3a6ad on #141414), so this is a light-mode-only fix.
     *
     * --el-text-color-regular would pass but is the body-text colour, which
     * flattens the three-tier hierarchy. This grey is one step lighter than
     * that and still clears AA on both light surfaces (measured in the
     * browser: 5.12:1 on white, 4.77:1 on #f5f7fa). Dark mode keeps the host
     * token below.
     */
    --fcom-text-off: #6b6e73;
    --fcom-text-link: var(--el-color-primary, #1877f2);

    /* Lines */
    --fcom-primary-border: var(--el-border-color, #dadde1);

    /* Actions */
    --fcom-primary-button: var(--el-color-primary, #1877f2);
    --fcom-primary-button-text: var(--el-color-white, #fff);

    /* Status */
    --fcom-danger: var(--el-color-danger, #c0392b);
    --fcom-error-color: var(--el-color-danger, #c0392b);
    --fcom-warning-light: var(--el-color-warning-light-9, #fdf6ec);

    /* Elevation */
    --fcom-shadow: var(--el-box-shadow-light, 0 2px 12px rgba(0, 0, 0, .08));
    --fcom-shadow-sm: var(--el-box-shadow-lighter, 0 2px 6px rgba(0, 0, 0, .06));

    /*
     * Semantic status colours.
     *
     * The UI had 21 different literal hexes doing this job -- #ef4444,
     * #b91c1c, #dc2626, #c0392b for "danger" alone -- all picked for a light
     * background. A dark green like #166534 or an amber like #b45309 is
     * simply unreadable on a dark surface, and the pale tints (#dcfce7,
     * #fef3c7, #fee2e2) became bright slabs.
     *
     * CAREFUL -- the two halves of each pair behave differently. Measured in
     * the browser on this install, light -> dark:
     *
     *   --el-color-success-light-9   #f0f9eb -> #1c2518   flips
     *   --el-color-danger-light-9    #fef0f0 -> #2a1d1d   flips
     *   --el-color-warning-light-9   #fdf6ec -> #292218   flips
     *   --el-color-success           #67c23a -> #67c23a   FIXED
     *   --el-color-danger            #f56c6c -> #f56c6c   FIXED
     *   --el-color-warning           #e6a23c -> #e6a23c   FIXED
     *
     * So the washes follow the theme but the brand hues do not. Mapping the
     * -text tokens straight onto the brand hue therefore reads well on the
     * dark wash (~7:1) and badly on the light one: #67c23a on #f0f9eb is
     * 2.0:1, and on plain white 2.24:1 -- which is what the contrast audit
     * caught on `.fca-ratio-ok`.
     *
     * The -text tokens are therefore set per theme by hand: a dark shade of
     * each hue for light mode (these are the literals the call sites already
     * carried as fallbacks, chosen for light backgrounds) and the brand hue
     * for dark mode, in the override block below. Only -bg and -border can
     * safely ride an --el-* token.
     */
    --fca-danger-text: #c0392b;
    --fca-danger-bg: var(--el-color-danger-light-9, #fef0f0);
    --fca-danger-border: var(--el-color-danger-light-5, #fab6b6);

    --fca-success-text: #047857;
    --fca-success-bg: var(--el-color-success-light-9, #f0f9eb);
    --fca-success-border: var(--el-color-success-light-5, #b3e19d);

    /* #b45309 cleared AA on white but only reached 4.44:1 on the amber tint
       behind a 10px chip (.fca-adv-mini--pend), so this is one step deeper. */
    --fca-warning-text: #92400e;
    --fca-warning-bg: var(--el-color-warning-light-9, #fdf6ec);
    --fca-warning-border: var(--el-color-warning-light-5, #f3d19e);

    /* --el-color-primary DOES flip on this theme (#19283a -> #F0F3F5), so
       info needs no override. */
    --fca-info-text: var(--el-color-primary, #1d4ed8);
    --fca-info-bg: var(--el-color-primary-light-9, #ecf5ff);
}

/*
 * Dark-mode overrides, for the tokens whose correct value is not a theme
 * -flipping host token: the three status -text tokens go back to the brand
 * hues (readable on the dark washes, not the light ones), and muted text goes
 * back to the host's secondary grey. Both selectors are
 * needed: Element Plus keys its own dark block off `html.dark`, while
 * FluentCommunity also sets `data-color-mode` on the same element, and a site
 * may end up with only one of the two.
 */
html.dark .fca-ads-root,
html.dark .fca-ad,
html.dark .fca-ads-page,
[data-color-mode="dark"] .fca-ads-root,
[data-color-mode="dark"] .fca-ad,
[data-color-mode="dark"] .fca-ads-page {
    --fca-danger-text: var(--el-color-danger, #f56c6c);
    --fca-success-text: var(--el-color-success, #67c23a);
    --fca-warning-text: var(--el-color-warning, #e6a23c);
    /* Measured 7.56:1 on #141414. */
    --fcom-text-off: var(--el-text-color-secondary, #a3a6ad);
}
/* FCA-TOKENS:END */
.fca-ad {
    position: relative;
    box-sizing: border-box;
}

/* Multi-ad placement grid: columns follow the zone's configured ad count
 * (capped at 6 via --fca-cols), collapsing to a single column on narrow
 * containers so ads never squash. */
.fca-zone-grid-slots {
    display: grid;
    grid-template-columns: repeat(var(--fca-cols, 1), minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}
.fca-zone-grid-slots > .fca-ad {
    width: 100%;
    margin: 0;
}
/* Feed ad block: spacing so it reads as its own row between feed posts. */
.fca-feed-grid {
    margin: 16px 0;
}
@media (max-width: 782px) {
    .fca-zone-grid-slots {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    }
}

/* Demo-mode placeholder: sized box shown in place of a live network slot. */
.fca-ad__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 auto;
    color: var(--fcom-secondary-text, #65676b);
    background: repeating-linear-gradient(
        45deg,
        var(--fcom-active-bg, #f0f2f5),
        var(--fcom-active-bg, #f0f2f5) 10px,
        var(--fcom-primary-bg, #fff) 10px,
        var(--fcom-primary-bg, #fff) 20px
    );
    border: 1px dashed var(--fcom-primary-border, #ccd0d5);
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
}
.fca-ad__placeholder--responsive {
    width: 100%;
}
.fca-ad__placeholder-label {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.fca-ad__placeholder-size {
    font-size: 12px;
    opacity: .7;
}

/* Between-posts + header banner sit in the main content column and should
   visually match FC feed cards. */
.fca-ad--feed,
.fca-ad--header {
    margin: 0 0 16px;
    background: var(--fcom-primary-bg, #fff);
    border: 1px solid var(--fcom-primary-border, #e9ebee);
    border-radius: 10px;
    padding: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.fca-zone-grid-slots .fca-ad--feed,
.fca-zone-grid-slots .fca-ad--header {
    margin: 0;
}

.fca-ad--feed .fca-ad__body,
.fca-ad--global-feed .fca-ad__body,
.fca-ad--space-feed .fca-ad__body {
    max-height: 320px;
}

.fca-ad--feed .fca-ad__house img,
.fca-ad--global-feed .fca-ad__house img,
.fca-ad--space-feed .fca-ad__house img {
    max-height: 320px;
}

.fca-ad--header {
    margin-bottom: 16px;
}

/* Sidebar ad reuses FC's own widget shell (.app_side_widget) — only the
   inner padding needs help. */
.fca-ad--sidebar {
    padding: 12px;
}

/* Fixed footprints: width capped per FluentCommunity column
 *   feed/header/posts → .fcom_feed_box max 680px
 *   left nav          → .fcom_sidebar_wrap 270px
 *   right widgets     → .app_side_widgets 320px
 */
.fca-ad.fca-ad--fixed .fca-ad__body {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}
.fca-ad.fca-ad--header .fca-ad__body,
.fca-ad.fca-ad--feed .fca-ad__body,
.fca-ad.fca-ad--global-feed .fca-ad__body,
.fca-ad.fca-ad--space-feed .fca-ad__body,
.fca-ad.fca-ad--post-before .fca-ad__body,
.fca-ad.fca-ad--post-inside .fca-ad__body,
.fca-ad.fca-ad--post-after .fca-ad__body,
.fca-ad.fca-ad--event-list .fca-ad__body,
.fca-ad.fca-ad--event-single-before .fca-ad__body,
.fca-ad.fca-ad--event-single-inside .fca-ad__body,
.fca-ad.fca-ad--event-single-after .fca-ad__body {
    max-width: min(100%, 680px);
}
.fca-ad.fca-ad--sidebar-left .fca-ad__body {
    max-width: min(100%, 246px);
}
.fca-ad.fca-ad--sidebar .fca-ad__body {
    max-width: min(100%, 296px);
}

.fca-ad.fca-ad--fixed .fca-ad__body > .fca-ad__house,
.fca-ad.fca-ad--fixed .fca-ad__body > .fca-ad__placeholder,
.fca-ad.fca-ad--fixed .fca-ad__body > iframe.fca-ad__sandbox {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
}
.fca-ad.fca-ad--fixed .fca-ad__house img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Left-sidebar (navigation) ad.
   FC's nav column (.space_contents) is a fixed-height, internally-scrolling
   flex column. This ad used to be `position: sticky; bottom: 0; z-index: 5`
   so it stayed visible — but sticky paints it OVER whatever menu items happen
   to sit at the bottom of the scrollport, hiding them and swallowing their
   clicks. It now sits in normal flow at the end of the column, so it can
   never cover the menu on any layout. Keeping it *visible* is handled
   separately by .fca-left-ad-host below. */
.fca-ad.fca-ad--sidebar-left {
    position: static;
    margin: auto 0 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 12px;
    background: var(--fcom-primary-bg, #fff);
    border-top: 1px solid var(--fcom-primary-border, #e4e7eb);
}

/* Hand the scrolling from the whole column to the nav list inside it, so the
   ad becomes a static footer that is always on screen AND always below the
   menu. The class is added by the injector only when the expected nav list is
   present, so any other layout keeps FluentCommunity's own scrolling. */
/* `.spaces` is carried for specificity: FluentCommunity's own rule is
   `.spaces .space_contents { overflow: hidden auto }` — the same 0,2,0 weight
   as a bare `.space_contents.fca-left-ad-host`, and their stylesheet loads
   after ours, so a tie would leave the column scrollable. */
.spaces .space_contents.fca-left-ad-host,
.space_contents.fca-left-ad-host {
    overflow: hidden;
    padding-bottom: 0;
}
.spaces .space_contents.fca-left-ad-host > .fcom_sidebar_wrap,
.space_contents.fca-left-ad-host > .fcom_sidebar_wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* Keep the creative/placeholder inside the narrow (~270px) nav width. */
.fca-ad.fca-ad--sidebar-left .fca-ad__placeholder,
.fca-ad.fca-ad--sidebar-left .fca-ad__body,
.fca-ad.fca-ad--sidebar-left img {
    max-width: min(246px, 100%);
}
.fca-ad.fca-ad--sidebar-left .fca-ad__body {
    overflow: hidden !important;
}

.fca-ad__label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fcom-text-off, #8a8d91);
    margin-bottom: 8px;
}

.fca-ad__body {
    min-height: 1px;
}

/* House creative */
.fca-ad__house {
    display: block;
    text-decoration: none;
    color: inherit;
}

.fca-ad__house img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* House creative text.
   With no advertiser background the copy follows the portal theme. When the
   advertiser DOES set a background, no theme token can be correct — the fill
   is their colour, not ours — so the injector measures that colour's
   luminance and sets --fca-house-fg / --fca-house-fg-muted to whichever of
   light or dark text contrasts better against it. */
.fca-ad__house {
    color: var(--fca-house-fg, var(--fcom-primary-text, #050505));
}
.fca-ad__house-title {
    font-size: 14px;
    font-weight: 600;
    margin: 8px 0 0;
    color: var(--fca-house-fg, var(--fcom-primary-text, #050505));
}

.fca-ad__house-body {
    font-size: 13px;
    color: var(--fca-house-fg-muted, var(--fcom-text-off, #65676b));
    margin: 4px 0 0;
}

/* When a house creative sets a background color, pad it so text isn't flush. */
.fca-ad__house[style*="background"] {
    padding: 14px;
    border-radius: 8px;
}

/* AdSense responsive units */
.fca-ad .adsbygoogle {
    display: block;
}

/* [fca_ads_listing] table */
.fca-ads-listing {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.fca-ads-listing th,
.fca-ads-listing td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--fcom-primary-border, #e9ebee);
}

.fca-ads-listing th {
    font-weight: 700;
    white-space: nowrap;
}

.fca-ads-listing th a {
    text-decoration: none;
    color: inherit;
}

.fca-ads-listing-empty {
    color: var(--fcom-text-off, #65676b);
}

/* ── Member "Report ad" control ─────────────────────────────────────────
   A small, unobtrusive flag button in the top-right of a served ad. Fades
   in on hover/focus so it never competes with the creative. */
.fca-ad--reportable {
    position: relative;
}
.fca-ad__report {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--fcom-primary-border, #e9ebee);
    border-radius: 6px;
    background: var(--fcom-primary-bg, #fff);
    color: var(--fcom-text-off, #8a8d91);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.fca-ad--reportable:hover .fca-ad__report,
.fca-ad--reportable:focus-within .fca-ad__report,
.fca-ad__report:focus {
    opacity: 1;
}
/* FluentCommunity declares no danger/success token, so these are literals
   rather than a var() that would silently fall through to its default (which
   is how every other colour in this file ended up stuck in light mode).
   #e0245e as TEXT measures ~2.7:1 on the dark card, so dark mode gets a
   lighter red; the solid-fill uses below keep their saturated colour because
   white-on-fill reads the same in both themes. */
.fca-ad__report:hover {
    color: var(--fca-danger-text, #c81e4f);
    border-color: #c81e4f;
}
html.dark .fca-ad__report:hover {
    color: var(--fca-danger-text, #f87171);
    border-color: #f87171;
}
@media (hover: none) {
    .fca-ad__report { opacity: .6; }
}

/* Already reported: locked, always visible, green so the viewer knows their
   report was recorded. */
.fca-ad__report--reported,
.fca-ad--reportable:hover .fca-ad__report--reported,
.fca-ad__report--reported:hover,
.fca-ad__report--reported:focus {
    opacity: 1;
    cursor: default;
    color: #fff;
    background: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
@media (hover: none) {
    .fca-ad__report--reported { opacity: 1; }
}

/* Report popover (appended to <body>, positioned by JS). */
.fca-ad-report-pop {
    position: absolute;
    z-index: 100000;
    width: 260px;
    max-width: calc(100vw - 16px);
    padding: 12px;
    background: var(--fcom-primary-bg, #fff);
    border: 1px solid var(--fcom-primary-border, #e9ebee);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
    font-size: 13px;
    color: var(--fcom-primary-text, #050505);
}
.fca-ad-report-pop__title {
    font-weight: 700;
    margin-bottom: 8px;
}
.fca-ad-report-pop__reason {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding: 8px;
    border: 1px solid var(--fcom-primary-border, #d7dbdf);
    border-radius: 8px;
    font: inherit;
    color: inherit;
    background: var(--fcom-active-bg, #f7f8fa);
}
.fca-ad-report-pop__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.fca-ad-report-pop__actions button {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.fca-ad-report-pop__cancel {
    background: transparent;
    border-color: var(--fcom-primary-border, #d7dbdf);
    color: var(--fcom-text-off, #65676b);
}
.fca-ad-report-pop__send {
    background: #c81e4f;
    color: #fff;
}
.fca-ad-report-pop__send:disabled {
    opacity: .7;
    cursor: default;
}
.fca-ad-report-pop__done {
    padding: 4px 0;
    font-weight: 600;
    color: var(--fcom-primary-text, #050505);
}

/* Sandboxed custom-ad iframe — isolates third-party scripts from the portal. */
.fca-ad__sandbox {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    border: 0;
    background: transparent;
    overflow: hidden;
}
.fca-ad__custom {
    width: 100%;
    height: 100%;
}