/* ============================================
   FORUM CATEGORY PAGE STYLES
   ============================================
   Extracted from category.jsp
   Uses CSS variables from /css/site-vars.css.jspf
   ============================================ */

.jive-list > tbody > tr, .tree-table { display:none; }

/* Spacing on the right: apply to cells since padding/margin have no effect on the table element in table layout */
.tree-table td:last-child,
.tree-table th:last-child {
    padding-right: 10px;
}

/* Hide the native select without display:none so the custom dropdown (.MultiCheckBoxDetail) can display */
select.forum-filter-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    visibility: hidden !important;
}

.MultiCheckBox {
    padding: 0;
    border-radius:4px;
    cursor:pointer;
    text-align:center;
    width: 125px !important;
    border: 2px solid #bbb;
    position: relative;
    z-index: 10;
}

/* Arrow: no grey box, match the SVG arrow on date sort and board select */
.MultiCheckBox .select2-arrow {
    transition: transform 120ms ease-in-out;
    transform-origin: center;
    border-left: none;
    background: none;
    background-image: none;
    width: 24px;
}
.MultiCheckBox .select2-arrow b {
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") no-repeat center;
    background-size: 20px;
}
html.dark-mode .MultiCheckBox .select2-arrow b {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ccc'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
}

@media (max-width: 767px) {
    .MultiCheckBox .select2-arrow {
        display: none !important;
    }
}

.MultiCheckBox.is-open {
    border-color: var(--site-primary);
    box-shadow: 0 0 3px rgba(0,0,0,0.15);
}

.MultiCheckBox.is-open .select2-arrow {
    transform: rotate(180deg);
}

.MultiCheckBox .k-icon {
    font-size: 15px;
    float: right;
    font-weight: bolder;
    margin-top: -7px;
    height: 10px;
    width: 14px;
    color:#787878;
}

.MultiCheckBoxDetail {
    display:none;
    position:absolute;
    border:1px solid #e2e2e2;
    /* Attach list directly under trigger (no visual gap) */
    margin-top: 0;
    overflow:hidden;
    z-index:999999;
    background-color: #fff;
    max-height: 380px;
    box-shadow: 0 10px 28px rgba(36, 23, 64, 0.18);
    border-radius: 0 0 6px 6px;
}

.MultiCheckBoxDetailBody {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.MultiCheckBoxDetail .cont  {
    clear: both;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background-color: #fff;
    font-size: 18px;
    text-align: left;
}

.MultiCheckBoxDetail .cont:hover  {
    background-color: var(--site-featured-bg);
    color:#fff;
    cursor:pointer;
}

/* Dark mode: solid opaque backgrounds so forum rows don't bleed through */
html.dark-mode .MultiCheckBoxDetail {
    background-color: var(--dm-bg-elevated, #2a2a2a);
    border-color: var(--dm-border, rgba(255, 255, 255, 0.2));
}
html.dark-mode .MultiCheckBoxDetail .cont {
    background-color: var(--dm-bg-elevated, #2a2a2a);
    color: var(--dm-text-primary, rgba(255, 255, 255, 0.92));
}
html.dark-mode .MultiCheckBoxDetail .cont:hover {
    background-color: var(--site-featured-bg);
    color: #fff;
}

.MultiCheckBoxDetailBody > div > div {
    float: none;
}

.MultiCheckBoxDetail .cont > div:first-child {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.MultiCheckBoxDetail .cont > div:last-child {
    flex: 1 1 auto;
    line-height: 1.25;
    text-align: left;
}

.MultiCheckBoxDetail .cont input.mulinput {
    margin: 0 8px 0 2px;
    width: 16px;
    height: 16px;
    min-width: 16px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--site-secondary, #522d80) 58%, #b9b0c8);
    border-radius: 3px;
    background-color: #fff;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.75);
}

.MultiCheckBoxDetail .cont input.mulinput:checked {
    background-color: var(--site-secondary, #522d80);
    border-color: var(--site-secondary, #522d80);
}

.MultiCheckBoxDetail .cont input.mulinput:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

html.dark-mode .MultiCheckBoxDetail .cont input.mulinput {
    border-color: color-mix(in srgb, var(--site-secondary, #522d80) 62%, var(--dm-border, rgba(255,255,255,0.35)));
    background-color: var(--dm-bg-elevated, #2a2a2a);
}

html.dark-mode .MultiCheckBoxDetail .cont input.mulinput:checked {
    background-color: var(--site-secondary, #522d80);
    border-color: var(--site-secondary, #522d80);
}

.MultiCheckBoxDetailHeader {
    display: none;
    overflow:hidden;
    position:relative;
    height: 28px;
    background-color: var(--site-featured-bg);
    font-size:18px;
    cursor:pointer;
}

.MultiCheckBoxDetailHeader>input {
    position: absolute;
    top: 4px;
    left: 3px;
}

.MultiCheckBoxDetailHeader>div {
    position: absolute;
    top: 5px;
    left: 24px;
    color:#fff;
}

.award-static-image { vertical-align: middle; width:20px; height:20px; }
.award-count { font-size:12px; }
.award-container { background-color:inherit; }
.jive-list td { vertical-align: middle; }
.t-sub { font-size:16px; vertical-align: middle; }
#award-popup-inner { top:60%; left:40%; }

/* ============================================
   MY FEED (myfeed.jsp) - grouped forum picker, new-topic dropdown, pager
   ============================================ */
/* ──────────────────────────────────────────────────────────────────────
   MY FEED retro masthead frame: cream sports-almanac paper with orange
   double-rule borders top & bottom, subtle grain texture, sharp corners.
   The frame WRAPS both the new masthead row and the existing controls.
   ────────────────────────────────────────────────────────────────────── */
.myfeed-board-header-frame {
    background-color: #faf3e3;
    background-image:
        radial-gradient(rgba(120, 80, 30, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 250, 235, 0.65), rgba(245, 235, 210, 0.95));
    background-size: 4px 4px, 100% 100%;
    background-position: 0 0, 0 0;
    border: none !important;
    border-top: 6px double var(--site-primary, #f26b1d) !important;
    border-bottom: 6px double var(--site-primary, #f26b1d) !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    position: relative;
    text-align: left;
    width: 100%;
    max-width: 100%;
}
.myfeed-board-header-frame > #board-header.myfeed-board-header-controls {
    background: transparent !important;
    border: none !important;
    box-sizing: border-box;
    display: block;
    padding: 0;
    width: 100%;
}
/* ─── Masthead row (eyebrow text above the controls) ─────────────────── */
.myfeed-masthead {
    align-items: baseline;
    box-sizing: border-box;
    color: #3a1263;
    display: flex;
    flex-wrap: nowrap;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 700;
    gap: 12px;
    justify-content: space-between;
    letter-spacing: 0.16em;
    line-height: 1.2;
    overflow: hidden;
    padding: 10px 14px 8px 14px;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid rgba(58, 18, 99, 0.18);
}
.myfeed-masthead-left {
    align-items: baseline;
    display: inline-flex;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}
.myfeed-masthead-title {
    flex: 0 1 auto;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Printer's ornament (fleuron / hedera, U+2766) between the title and date.
   Slightly smaller than surrounding text and with extra horizontal padding so
   it reads as a decorative flourish, not a punctuation mark. */
.myfeed-masthead-divider {
    color: var(--site-primary, #f26b1d);
    flex: 0 0 auto;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1;
    padding: 0 10px;
    transform: translateY(-1px);
    display: inline-block;
}
.myfeed-masthead-date {
    flex: 0 1 auto;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.myfeed-masthead-edition {
    color: #6a5d82;
    flex: 0 0 auto;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.myfeed-masthead-date .date-full,
.myfeed-masthead-date .date-short,
.myfeed-masthead-date .date-tiny { display: none; }
.myfeed-masthead-date .date-full { display: inline; }

/* ──────────────────────────────────────────────────────────────────────
   DARK MODE: aged parchment / leather-bound look. Deep ink background,
   gilt-gold double-rules, aged cream serif text, no paper grain.
   ────────────────────────────────────────────────────────────────────── */
html.dark-mode .myfeed-board-header-frame {
    background-color: #1a1422 !important;
    background-image:
        radial-gradient(rgba(201, 160, 99, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(40, 30, 55, 0.55), rgba(20, 14, 30, 0.95)) !important;
    background-size: 4px 4px, 100% 100% !important;
    border-top: 6px double #c9a063 !important;
    border-bottom: 6px double #c9a063 !important;
}
html.dark-mode .myfeed-masthead {
    border-bottom-color: rgba(232, 222, 200, 0.18);
    color: #e8dec8;
}
html.dark-mode .myfeed-masthead-divider {
    color: #c9a063;
}
html.dark-mode .myfeed-masthead-date {
    color: #c9bea3;
}
html.dark-mode .myfeed-masthead-edition {
    color: #a89770;
}
html.dark-mode #board-header-inner.myfeed-header-inner .myfeed-sort-static {
    color: #c9bea3;
}

#board-header-inner.myfeed-header-inner {
    align-items: center !important;
    background: transparent !important;
    box-sizing: border-box;
    display: flex !important;
    flex-wrap: nowrap;
    gap: 14px;
    justify-content: flex-start;
    padding: 6px 54px 6px 14px !important;
    position: relative;
    text-align: left;
}
#board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap,
#board-header-inner.myfeed-header-inner .board-opt,
#board-header-inner.myfeed-header-inner .filter-sort-row,
#board-header-inner.myfeed-header-inner .forum-filter-container,
#board-header-inner.myfeed-header-inner .sort-by-form,
#board-header-inner.myfeed-header-inner .myfeed-sort-static {
    align-items: center !important;
    display: inline-flex !important;
    float: none !important;
    height: auto !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    vertical-align: middle !important;
}
#board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap {
    margin-right: 0 !important;
}
#board-header-inner.myfeed-header-inner .board-opt {
    margin-right: 6px !important;
    padding-left: 0 !important;
}
#board-header-inner.myfeed-header-inner .filter-sort-row {
    gap: 14px;
}
#board-header-inner.myfeed-header-inner .sort-by-form {
    gap: 6px;
    margin-right: 0 !important;
    white-space: nowrap;
}
#board-header-inner.myfeed-header-inner .myfeed-sort-static {
    color: #6a5d82;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
#board-header-inner.myfeed-header-inner select,
#board-header-inner.myfeed-header-inner .MultiCheckBox {
    vertical-align: middle !important;
}
#board-header-inner.myfeed-header-inner .myfeed-new-topic-select,
#board-header-inner.myfeed-header-inner #board-jump {
    min-height: 27px;
}
/* ─── Shared neutral picker style (My Feed Board Jump + MultiCheckBox) ───
   IMPORTANT: Board Jump runs select2 v3, so its trigger button is .select2-choice
   (NOT .select2-selection--single, which is v4). MultiCheckBox is our custom widget.
   Keep all selectors here in v3 syntax so both pickers actually receive the rules.
   The New Topic button is intentionally excluded — it's scoped via .myfeed-new-topic-wrap
   in its own block below and has its own special treatment. */
/* Board jump + Sort by: same pickers on category/index headers (no .myfeed-header-inner) */
#board-header-inner .board-opt .select2-container .select2-choice,
#board-header-inner .sort-by-form .select2-container .select2-choice,
#board-header-inner .forum-filter-container .MultiCheckBox {
    background: linear-gradient(to bottom, #fff 0%, #f7f6fa 100%) !important;
    background-image: linear-gradient(to bottom, #fff 0%, #f7f6fa 100%) !important;
    border: 1px solid #b9b0c8 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    box-sizing: border-box;
    color: var(--site-secondary, #3a1263) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    height: 31px !important;
    line-height: 29px !important;
    min-height: 31px !important;
    font-family: inherit !important;
}
#board-header-inner .board-opt .select2-container .select2-choice .select2-chosen,
#board-header-inner .sort-by-form .select2-container .select2-choice .select2-chosen,
#board-header-inner .forum-filter-container .mf-picker-trigger-text,
#board-header-inner .forum-filter-container .MultiCheckBox > .forum-filter-mobile-label,
#board-header-inner .forum-filter-container .MultiCheckBox {
    color: var(--site-secondary, #3a1263) !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-family: inherit !important;
    line-height: 29px !important;
}
#board-header-inner .forum-filter-container .MultiCheckBox {
    padding-right: 28px !important;
}
/* Shared arrow-column treatment: same gradient + left border on both pickers
   so they read as siblings (vintage typewriter button look). */
#board-header-inner .forum-filter-container .MultiCheckBox .select2-arrow,
#board-header-inner .board-opt .select2-container .select2-choice .select2-arrow,
#board-header-inner .sort-by-form .select2-container .select2-choice .select2-arrow {
    background: linear-gradient(to bottom, #eee 0%, #d8d8d8 100%) !important;
    background-image: linear-gradient(to bottom, #eee 0%, #d8d8d8 100%) !important;
    border-left: 1px solid #b9b0c8 !important;
    display: block !important;
    height: 29px !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 24px !important;
}
#board-header-inner .forum-filter-container .MultiCheckBox .select2-arrow b,
#board-header-inner .board-opt .select2-container .select2-choice .select2-arrow b,
#board-header-inner .sort-by-form .select2-container .select2-choice .select2-arrow b {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 18px !important;
    width: 22px !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
}
/* Open state: rotate arrow to up-chevron on both pickers */
#board-header-inner .forum-filter-container .MultiCheckBox.is-open .select2-arrow b,
#board-header-inner .board-opt .select2-container.select2-dropdown-open .select2-choice .select2-arrow b,
#board-header-inner .sort-by-form .select2-container.select2-dropdown-open .select2-choice .select2-arrow b {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3e%3cpath d='M7 14l5-5 5 5z'/%3e%3c/svg%3e") !important;
}
/* Open state: brand-colored focus border on both pickers */
#board-header-inner .board-opt .select2-container.select2-dropdown-open .select2-choice,
#board-header-inner .sort-by-form .select2-container.select2-dropdown-open .select2-choice,
#board-header-inner .forum-filter-container .MultiCheckBox.is-open {
    border-color: var(--site-primary, #f26b1d) !important;
}

/* Dark mode: shared trigger body */
html.dark-mode #board-header-inner .board-opt .select2-container .select2-choice,
html.dark-mode #board-header-inner .sort-by-form .select2-container .select2-choice,
html.dark-mode #board-header-inner .forum-filter-container .MultiCheckBox {
    background: var(--dm-bg-elevated, #2a2a2a) !important;
    background-image: none !important;
    border-color: var(--dm-border, rgba(255, 255, 255, 0.24)) !important;
    color: var(--dm-text-primary, rgba(255, 255, 255, 0.92)) !important;
}
html.dark-mode #board-header-inner .board-opt .select2-container .select2-choice .select2-chosen,
html.dark-mode #board-header-inner .sort-by-form .select2-container .select2-choice .select2-chosen,
html.dark-mode #board-header-inner .forum-filter-container .mf-picker-trigger-text,
html.dark-mode #board-header-inner .forum-filter-container .MultiCheckBox > .forum-filter-mobile-label {
    color: var(--dm-text-primary, rgba(255, 255, 255, 0.92)) !important;
}
/* Dark mode arrow column: matched dark gradient with light-cream chevron */
html.dark-mode #board-header-inner .forum-filter-container .MultiCheckBox .select2-arrow,
html.dark-mode #board-header-inner .board-opt .select2-container .select2-choice .select2-arrow,
html.dark-mode #board-header-inner .sort-by-form .select2-container .select2-choice .select2-arrow {
    background: linear-gradient(to bottom, #3a3444 0%, #2f2938 100%) !important;
    background-image: linear-gradient(to bottom, #3a3444 0%, #2f2938 100%) !important;
    border-left: 1px solid var(--dm-border, rgba(255, 255, 255, 0.24)) !important;
}
html.dark-mode #board-header-inner .forum-filter-container .MultiCheckBox .select2-arrow b,
html.dark-mode #board-header-inner .board-opt .select2-container .select2-choice .select2-arrow b,
html.dark-mode #board-header-inner .sort-by-form .select2-container .select2-choice .select2-arrow b {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ccc'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;
}
html.dark-mode #board-header-inner .forum-filter-container .MultiCheckBox.is-open .select2-arrow b,
html.dark-mode #board-header-inner .board-opt .select2-container.select2-dropdown-open .select2-choice .select2-arrow b,
html.dark-mode #board-header-inner .sort-by-form .select2-container.select2-dropdown-open .select2-choice .select2-arrow b {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ccc'%3e%3cpath d='M7 14l5-5 5 5z'/%3e%3c/svg%3e") !important;
}
#board-header-inner.myfeed-header-inner .settings-gear-desktop {
    align-items: center;
    display: inline-flex !important;
    justify-content: center;
    right: 12px;
}
#board-header-inner.myfeed-header-inner .settings-gear .material-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

/* ─── Tablet: shorter date format, allow control row to wrap if tight ─── */
@media (max-width: 1023px) and (min-width: 768px) {
    .myfeed-masthead-date .date-full { display: none; }
    .myfeed-masthead-date .date-short { display: inline; }
    #board-header-inner.myfeed-header-inner {
        flex-wrap: wrap;
        padding-right: 14px !important;
    }
}

/* ─── Mobile: tiny date, smaller eyebrow, thinner double-rule ─── */
@media (max-width: 767px) {
    .myfeed-board-header-frame {
        border-top-width: 4px !important;
        border-bottom-width: 4px !important;
    }
    .myfeed-masthead {
        font-size: 13px;
        gap: 6px;
        letter-spacing: 0.10em;
        padding: 6px 10px 5px 10px;
    }
    .myfeed-masthead-title { max-width: 55%; }
    .myfeed-masthead-divider { font-size: 11px; padding: 0 6px; }
    .myfeed-masthead-date .date-full,
    .myfeed-masthead-date .date-short { display: none; }
    .myfeed-masthead-date .date-tiny { display: inline; }
    .myfeed-masthead-edition { display: none; }
}

/* ─── Very narrow viewports: drop letter-spacing, allow ellipsis on whole row ─── */
@media (max-width: 359px) {
    .myfeed-masthead {
        letter-spacing: 0.06em;
        padding: 3px 8px;
    }
    .myfeed-masthead-title { max-width: 50%; }
}

@media (max-width: 767px) {
    /* My Feed: hide the absolutely-positioned desktop gear on small screens.
       Its rule above uses display:inline-flex with high specificity and was
       overriding forum-responsive.css's display:none — users saw TWO gears (this
       one floated to the right of the full-width board jump + the mobile-top gear). */
    #board-header-inner.myfeed-header-inner .settings-gear-desktop {
        display: none !important;
    }
    #board-header-inner.myfeed-header-inner {
        display: grid !important;
        /* New Topic = natural width; My Feed picker = all remaining space; gear = auto.
           Equal 1fr|1fr was squeezing "N boards selected" until text clipped. */
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        gap: 8px 10px !important;
        justify-items: stretch !important;
        padding: 10px !important;
    }
    #board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    #board-header-inner.myfeed-header-inner .myfeed-new-topic-select,
    #board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap .select2-container.myfeed-new-topic-container {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    #board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap .select2-container.myfeed-new-topic-container .select2-selection--single {
        height: 31px !important;
        width: 100% !important;
    }
    #board-header-inner.myfeed-header-inner .settings-gear-mobile-top {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
    }
    #board-header-inner.myfeed-header-inner .board-opt {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-content: stretch !important;
        width: 100% !important;
    }
    #board-header-inner.myfeed-header-inner .board-opt select,
    #board-header-inner.myfeed-header-inner .board-opt .select2-container {
        max-width: none !important;
        width: 100% !important;
    }
    #board-header-inner.myfeed-header-inner .filter-sort-row {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    #board-header-inner.myfeed-header-inner .forum-filter-container,
    #board-header-inner.myfeed-header-inner .forum-filter-container form {
        width: 100% !important;
    }
    #board-header-inner.myfeed-header-inner .forum-filter-container .MultiCheckBox {
        justify-content: flex-start !important;
        height: 31px !important;
        min-height: 31px !important;
        padding: 3px 30px 3px 10px !important;
        width: 100% !important;
    }
    #board-header-inner.myfeed-header-inner .forum-filter-container .MultiCheckBox .select2-arrow {
        display: block !important;
    }
    #board-header-inner.myfeed-header-inner .forum-filter-container .MultiCheckBoxDetail {
        left: auto !important;
        right: 0 !important;
        width: min(320px, calc(100vw - 24px)) !important;
    }
    #board-header-inner.myfeed-header-inner .sort-by-form {
        display: none !important;
    }
    #board-header-inner.myfeed-header-inner .myfeed-sort-static {
        display: none !important;
    }
}

.mf-group {
    border-top: 1px solid #e2e2e2;
}
.mf-group:first-child { border-top: none; }
.mf-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background-color: var(--site-primary, #f26b1d);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 2;
}
.mf-group-head:hover { background-color: color-mix(in srgb, var(--site-primary, #f26b1d) 85%, #000); }
.mf-group-toggle {
    margin: 0;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}
.mf-group-label {
    flex: 1 1 auto;
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
}
html.dark-mode .mf-group { border-color: var(--dm-border, rgba(255,255,255,0.1)); }
html.dark-mode .mf-group-head {
    background-color: var(--site-primary-dark, #c46a25);
    color: #fff;
}
html.dark-mode .mf-group-head:hover { background-color: color-mix(in srgb, var(--site-primary-dark, #c46a25) 85%, #000); }
html.dark-mode .mf-group-label { color: #fff; }

.mf-picker-detail {
    border-color: var(--site-primary, #f26b1d);
    width: 320px;
    max-width: calc(100vw - 20px);
}
#board-header-inner.myfeed-header-inner .select2-results__option,
.mf-picker-detail .cont {
    color: var(--site-secondary, #3a1263);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.25;
}
#board-header-inner.myfeed-header-inner .select2-results__option--highlighted[aria-selected],
.mf-picker-detail .cont:hover {
    background: linear-gradient(180deg, var(--site-secondary, #522d80) 0%, color-mix(in srgb, var(--site-secondary, #522d80) 72%, #ffffff) 100%) !important;
    color: #fff !important;
}
html.dark-mode #board-header-inner.myfeed-header-inner .select2-results__option,
html.dark-mode .mf-picker-detail .cont {
    color: var(--dm-text-primary, rgba(255,255,255,0.92));
}
html.dark-mode #board-header-inner.myfeed-header-inner .select2-results__option--highlighted[aria-selected],
html.dark-mode .mf-picker-detail .cont:hover {
    background: linear-gradient(180deg, var(--site-secondary, #522d80) 0%, color-mix(in srgb, var(--site-secondary, #522d80) 72%, #ffffff) 100%) !important;
    color: #fff !important;
}

/* Board Jump dropdown (select2 v3, panel class .board-jump-drop). The MultiCheckBox
   dropdown above uses a custom widget; Board Jump uses select2 v3, so it lands
   different DOM and needs its own selectors. These rules harmonize the two
   pickers visually so both look like the same retro almanac dropdown. */
.board-jump-drop {
    border: 1px solid var(--site-primary, #f26b1d) !important;
    border-radius: 2px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18) !important;
    overflow: hidden;
    margin-top: 2px;
    background: #fff !important;
}
.board-jump-drop .select2-results { padding: 0 !important; margin: 0 !important; }
.board-jump-drop .select2-results > li { background: #fff !important; }
.board-jump-drop .select2-results .select2-result-label {
    background: #fff !important;
    color: var(--site-secondary, #2b1358) !important;
    border: none !important;
}
/* Hover / keyboard-highlight: gradient from --site-secondary so each site
   matches its own palette (TigerNet purple, Cubs navy, etc.). */
.board-jump-drop .select2-results .select2-highlighted,
.board-jump-drop .select2-results .select2-highlighted .select2-result-label {
    background: linear-gradient(180deg, var(--site-secondary, #522d80) 0%, color-mix(in srgb, var(--site-secondary, #522d80) 72%, #ffffff) 100%) !important;
    background-color: transparent !important;
    color: #fff !important;
}
/* Dark mode: dark elevated body, cream-ish text, --site-secondary highlight. */
html.dark-mode .board-jump-drop {
    border-color: var(--site-primary, #f26b1d) !important;
    background: var(--dm-bg-elevated, #2a2a2a) !important;
}
html.dark-mode .board-jump-drop .select2-results > li,
html.dark-mode .board-jump-drop .select2-results .select2-result-label {
    background: var(--dm-bg-elevated, #2a2a2a) !important;
    color: var(--dm-text-primary, rgba(255, 255, 255, 0.92)) !important;
}
html.dark-mode .board-jump-drop .select2-results .select2-highlighted,
html.dark-mode .board-jump-drop .select2-results .select2-highlighted .select2-result-label {
    background: linear-gradient(180deg, var(--site-secondary, #522d80) 0%, color-mix(in srgb, var(--site-secondary, #522d80) 72%, #ffffff) 100%) !important;
    background-color: transparent !important;
    color: #fff !important;
}

.forum-filter-container .MultiCheckBox {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 28px;
    width: 172px !important;
    padding: 3px 30px 3px 10px;
    text-align: left;
}
.forum-filter-container .MultiCheckBox .select2-arrow {
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
}
.forum-filter-container .MultiCheckBox.is-open .select2-arrow {
    transform: translateY(-50%) rotate(180deg);
}
.mf-picker-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--site-secondary, #522d80) 14%, #e2e2e2);
    background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--site-secondary, #522d80) 5%, #ffffff) 100%);
}
.mf-picker-action {
    border: 1px solid color-mix(in srgb, var(--site-secondary, #522d80) 32%, #ccc);
    border-radius: 999px;
    background-color: #fff;
    color: var(--site-secondary, #3a2d5e);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 5px 9px;
}
.mf-picker-action:hover {
    background-color: color-mix(in srgb, var(--site-secondary, #522d80) 11%, #fff);
}
.mf-picker-count {
    margin-left: auto;
    color: #6a5d82;
    font-size: 12px;
    white-space: nowrap;
}
.mf-picker-trigger-text {
    display: inline-flex;
    align-items: center;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}
html.dark-mode .mf-picker-toolbar {
    background: var(--dm-bg-elevated, #2a2a2a);
    border-color: var(--dm-border, rgba(255,255,255,0.14));
}
html.dark-mode .mf-picker-action {
    background-color: color-mix(in srgb, var(--site-secondary, #522d80) 24%, var(--dm-bg-elevated, #2a2a2a));
    border-color: color-mix(in srgb, var(--site-secondary, #522d80) 48%, transparent);
    color: var(--dm-text-primary, rgba(255, 255, 255, 0.92));
}
html.dark-mode .mf-picker-action:hover {
    background-color: color-mix(in srgb, var(--site-secondary, #522d80) 34%, var(--dm-bg-elevated, #2a2a2a));
}
html.dark-mode .mf-picker-count {
    color: color-mix(in srgb, var(--site-secondary, #522d80) 28%, var(--dm-text-primary, rgba(255, 255, 255, 0.75)));
}

@media (max-width: 767px) {
    .mf-picker-detail {
        left: 10px !important;
        max-height: 70vh;
        width: calc(100vw - 20px);
    }
    .mf-picker-detail .MultiCheckBoxDetailBody {
        max-height: calc(70vh - 44px) !important;
    }
    .mf-picker-trigger-text {
        max-width: 150px;
    }

    /* Category page header pickers — viewport-centered dropdown panel using the
       same trick as the Tiger Boards drop (.board-jump-drop below). The panel
       anchors to #board-header-inner (which has inline position:relative and
       spans the full mobile row width), then centers via left:50% + translateX,
       so it always renders in the middle of the screen regardless of whether
       the trigger pill is on the left, middle, or right of the row. Scoped with
       :not(.myfeed-header-inner) so My Feed keeps its own positioning. */
    #board-header-inner:not(.myfeed-header-inner) .forum-filter-container .MultiCheckBoxDetail {
        position: absolute !important;
        top: calc(100% + 2px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-top: 0 !important;
        width: min(360px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-height: 70vh !important;
    }
    #board-header-inner:not(.myfeed-header-inner) .forum-filter-container .MultiCheckBoxDetail .MultiCheckBoxDetailBody {
        max-height: calc(70vh - 44px) !important;
    }
    #board-header-inner:not(.myfeed-header-inner) .forum-filter-container .MultiCheckBoxDetail .cont > div:last-child {
        white-space: normal !important;
    }

    /* Tiger Boards (Select2 v3) drop is appended to body with class .board-jump-drop.
       Center it on the viewport with the same approach. */
    .board-jump-drop {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(360px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }
}

/* New Topic category dropdown: primary action control (rendered via select2 v3) */
.myfeed-new-topic-wrap { white-space: nowrap; }

/* Hide the raw native select once select2 takes over (it injects a sibling .select2-container) */
.myfeed-new-topic-wrap select.myfeed-new-topic-select.select2-offscreen,
.myfeed-new-topic-wrap select.myfeed-new-topic-select.select2-hidden-accessible {
    visibility: hidden;
}

/* Trigger button (.select2-choice in v3): solid brand-colored action style.
   Sharp 2px corners to harmonize with the retro almanac frame's right-angle aesthetic.
   Uses --site-primary so each site picks up its own brand color (TigerNet orange,
   CubsHQ red, etc.) with the original orange as a fallback. */
.myfeed-new-topic-wrap .select2-container .select2-choice,
#board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap .select2-container .select2-choice {
    background: var(--site-primary, #f26b1d) !important;
    background-image: none !important;
    border: 1px solid var(--site-primary, #f26b1d) !important;
    border-radius: 2px !important;
    color: #fff !important;
    cursor: pointer;
    height: 31px !important;
    line-height: 29px !important;
    min-height: 31px !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 28px 0 10px !important;
    font-weight: 600;
    text-shadow: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    box-sizing: border-box;
}
.myfeed-new-topic-wrap .select2-container .select2-choice:hover,
.myfeed-new-topic-wrap .select2-container.select2-dropdown-open .select2-choice,
.myfeed-new-topic-wrap .select2-container.select2-container-active .select2-choice {
    background: color-mix(in srgb, var(--site-primary, #f26b1d) 88%, #fff) !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--site-primary, #f26b1d) 88%, #fff) !important;
    color: #fff !important;
}
.myfeed-new-topic-wrap .select2-container .select2-choice .select2-chosen,
.myfeed-new-topic-wrap .select2-container .select2-choice .select2-chosen.select2-default,
#board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap .select2-container .select2-choice .select2-chosen,
#board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap .select2-container .select2-choice .select2-chosen.select2-default {
    color: #fff !important;
    opacity: 1 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    line-height: 29px !important;
    padding: 0 !important;
    margin-right: 0 !important;
    text-shadow: none !important;
}
.myfeed-new-topic-wrap .select2-container .select2-choice .select2-arrow {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    width: 22px !important;
    top: 0 !important;
    right: 4px !important;
    bottom: 0 !important;
}
.myfeed-new-topic-wrap .select2-container .select2-choice .select2-arrow b {
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") no-repeat center center !important;
    background-size: 18px 18px !important;
    width: 22px !important;
    height: 100% !important;
    display: block !important;
}
.myfeed-new-topic-wrap .select2-container.select2-dropdown-open .select2-choice .select2-arrow b {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3e%3cpath d='M7 14l5-5 5 5z'/%3e%3c/svg%3e") !important;
}

/* Dropdown panel (.select2-drop in v3, with our custom .myfeed-new-topic-drop class) */
.select2-drop.myfeed-new-topic-drop {
    border: 1px solid var(--site-primary, #f26b1d) !important;
    border-radius: 2px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18) !important;
    overflow: hidden;
    margin-top: 2px;
    background: #fff !important;
}
.select2-drop.myfeed-new-topic-drop .select2-results { padding: 0 !important; margin: 0 !important; }
.select2-drop.myfeed-new-topic-drop .select2-results > li { background: #fff !important; }
.select2-drop.myfeed-new-topic-drop .select2-result-label {
    background: #fff !important;
    color: var(--site-secondary, #2b1358) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    padding: 8px 14px !important;
    border: none !important;
}
.select2-drop.myfeed-new-topic-drop .select2-results .select2-highlighted,
.select2-drop.myfeed-new-topic-drop .select2-results .select2-highlighted .select2-result-label,
.select2-drop.myfeed-new-topic-drop .select2-result-selectable:hover .select2-result-label {
    background: linear-gradient(180deg, var(--site-secondary, #522d80) 0%, color-mix(in srgb, var(--site-secondary, #522d80) 72%, #ffffff) 100%) !important;
    color: #fff !important;
}

/* Dark mode: ONE solid background color, ONE solid text color, no gradients,
   no inset shadows, no text shadows. Uses --site-primary-dark (Config.COLOR1
   darkened 15% toward black) so each site keeps its brand identity without
   the neon glare against the deep-ink masthead.
   Selectors duplicated with #board-header-inner.myfeed-header-inner to match the
   ID specificity of the light-mode rule and ensure the override actually wins. */
html.dark-mode .myfeed-new-topic-wrap .select2-container .select2-choice,
html.dark-mode #board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap .select2-container .select2-choice {
    background: var(--site-primary-dark, #c46a25) !important;
    background-image: none !important;
    border: 1px solid var(--site-primary-dark, #c46a25) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html.dark-mode .myfeed-new-topic-wrap .select2-container .select2-choice:hover,
html.dark-mode .myfeed-new-topic-wrap .select2-container.select2-dropdown-open .select2-choice,
html.dark-mode .myfeed-new-topic-wrap .select2-container.select2-container-active .select2-choice,
html.dark-mode #board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap .select2-container .select2-choice:hover,
html.dark-mode #board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap .select2-container.select2-dropdown-open .select2-choice,
html.dark-mode #board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap .select2-container.select2-container-active .select2-choice {
    background: color-mix(in srgb, var(--site-primary-dark, #c46a25) 88%, #fff) !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--site-primary-dark, #c46a25) 88%, #fff) !important;
    color: #fff !important;
}
/* Solid white chosen-label text in dark mode (overrides the rule that wins by
   ID specificity). */
html.dark-mode .myfeed-new-topic-wrap .select2-container .select2-choice .select2-chosen,
html.dark-mode .myfeed-new-topic-wrap .select2-container .select2-choice .select2-chosen.select2-default,
html.dark-mode #board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap .select2-container .select2-choice .select2-chosen,
html.dark-mode #board-header-inner.myfeed-header-inner .myfeed-new-topic-wrap .select2-container .select2-choice .select2-chosen.select2-default {
    color: #fff !important;
    text-shadow: none !important;
}
html.dark-mode .select2-drop.myfeed-new-topic-drop {
    border-color: var(--site-primary-dark, #c46a25) !important;
    background: var(--dm-bg-elevated, #2a2a2a) !important;
}
html.dark-mode .select2-drop.myfeed-new-topic-drop .select2-results > li,
html.dark-mode .select2-drop.myfeed-new-topic-drop .select2-result-label {
    background: var(--dm-bg-elevated, #2a2a2a) !important;
    color: var(--dm-text-primary, rgba(255,255,255,0.92)) !important;
}
html.dark-mode .select2-drop.myfeed-new-topic-drop .select2-results .select2-highlighted,
html.dark-mode .select2-drop.myfeed-new-topic-drop .select2-results .select2-highlighted .select2-result-label {
    background: linear-gradient(180deg, var(--site-secondary, #522d80) 0%, color-mix(in srgb, var(--site-secondary, #522d80) 72%, #ffffff) 100%) !important;
    color: #fff !important;
}

/* Disabled (no postable categories): keep the native select but styled */
.myfeed-new-topic-wrap select.myfeed-new-topic-select[disabled] {
    visibility: visible;
    margin-left: 0;
    padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--site-secondary, #522d80) 22%, #ccc);
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--site-secondary, #522d80) 10%, #e8e8e8);
    color: color-mix(in srgb, var(--site-secondary, #522d80) 40%, #555);
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.85;
}

/* First-visit onboarding: point users to the board picker without selecting defaults */
.myfeed-onboarding-scrim {
    position: fixed;
    inset: 0;
    background: radial-gradient(
        ellipse var(--myfeed-spotlight-radius-x, 130px) var(--myfeed-spotlight-radius-y, 52px) at var(--myfeed-spotlight-x, 50%) var(--myfeed-spotlight-y, 120px),
        rgba(14, 9, 24, 0) 0,
        rgba(14, 9, 24, 0) 56%,
        rgba(14, 9, 24, 0.62) 74%,
        rgba(14, 9, 24, 0.62) 100%
    );
    pointer-events: none;
    z-index: 999990;
}
.myfeed-picker-spotlight {
    position: relative;
    z-index: 1000002;
}
#board-header-inner.myfeed-header-inner.myfeed-onboarding-active {
    z-index: 1000002;
}
#board-header-inner.myfeed-header-inner.myfeed-onboarding-active .myfeed-new-topic-wrap,
#board-header-inner.myfeed-header-inner.myfeed-onboarding-active .board-opt,
#board-header-inner.myfeed-header-inner.myfeed-onboarding-active .myfeed-sort-static,
#board-header-inner.myfeed-header-inner.myfeed-onboarding-active .settings-gear {
    opacity: 0.35;
}
.myfeed-picker-spotlight form,
.myfeed-picker-spotlight .MultiCheckBox {
    position: relative;
    z-index: 1000004;
}
.myfeed-picker-spotlight .MultiCheckBox {
    animation: myfeed-picker-pulse 1.6s ease-in-out infinite;
    background-color: #fff;
    border-color: #ff9f1a;
    box-shadow: 0 0 0 5px rgba(255,159,26,0.25), 0 8px 24px rgba(0,0,0,0.22);
}
.myfeed-picker-spotlight .MultiCheckBoxDetail {
    z-index: 1000003;
}
.myfeed-onboarding-callout {
    position: fixed;
    top: 128px;
    left: 50%;
    transform: none;
    z-index: 1000001;
    width: min(390px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(250,243,255,0.98));
    box-shadow: 0 18px 55px rgba(0,0,0,0.28);
    color: #2b1e47;
    cursor: pointer;
    text-align: left;
}
.myfeed-onboarding-callout::before {
    content: "";
    position: absolute;
    top: -13px;
    left: var(--myfeed-callout-arrow-left, 48px);
    width: 22px;
    height: 22px;
    transform: rotate(45deg);
    background: rgba(255,255,255,0.98);
    border-left: 1px solid rgba(255,255,255,0.35);
    border-top: 1px solid rgba(255,255,255,0.35);
}
.myfeed-onboarding-kicker {
    color: #c56700;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.myfeed-onboarding-title {
    margin-top: 3px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
}
.myfeed-onboarding-copy {
    margin-top: 6px;
    color: #5b4d73;
    font-size: 15px;
    line-height: 1.35;
}
.myfeed-choose-boards-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background-color: var(--site-featured-bg);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    position: relative;
    z-index: 1000001;
    box-shadow: 0 8px 20px rgba(0,0,0,0.16);
}
.myfeed-choose-boards-btn:hover {
    filter: brightness(1.08);
}
.myfeed-choose-boards-btn .material-icons {
    display: inline-flex;
    align-items: center;
    color: #fff !important;
    font-family: 'Material Icons';
    font-size: 20px;
    font-weight: normal;
    line-height: 1;
    opacity: 1 !important;
}
@keyframes myfeed-picker-pulse {
    0%, 100% {
        box-shadow: 0 0 0 5px rgba(255,159,26,0.24), 0 8px 24px rgba(0,0,0,0.22);
    }
    50% {
        box-shadow: 0 0 0 9px rgba(255,159,26,0.12), 0 12px 30px rgba(0,0,0,0.28);
    }
}
html.dark-mode .myfeed-onboarding-callout {
    background: linear-gradient(135deg, rgba(44,35,64,0.98), rgba(31,25,45,0.98));
    color: var(--dm-text-primary, rgba(255,255,255,0.92));
}
html.dark-mode .myfeed-onboarding-callout::before {
    background: rgba(44,35,64,0.98);
}
html.dark-mode .myfeed-onboarding-copy {
    color: #d2c7e5;
}
html.dark-mode .myfeed-picker-spotlight .MultiCheckBox {
    background-color: var(--dm-bg-elevated, #2a2a2a);
}
@media (max-width: 767px) {
    .myfeed-onboarding-callout {
        width: min(390px, calc(100vw - 24px));
    }
    .myfeed-picker-spotlight {
        display: inline-flex !important;
        isolation: isolate;
        padding: 5px;
        border-radius: 13px;
        background: rgba(255,159,26,0.22);
        box-shadow: 0 0 0 2px rgba(255,255,255,0.36), 0 0 0 9px rgba(255,159,26,0.26), 0 14px 34px rgba(0,0,0,0.38);
    }
    .myfeed-picker-spotlight::after {
        content: "Tap here";
        position: absolute;
        right: 6px;
        bottom: -29px;
        padding: 5px 9px;
        border-radius: 999px;
        background: #ff8a1f;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1;
        text-transform: uppercase;
        box-shadow: 0 5px 14px rgba(0,0,0,0.28);
    }
    .myfeed-picker-spotlight .MultiCheckBox {
        min-height: 42px;
        width: 210px !important;
        padding: 8px 36px 8px 13px;
        border: 2px solid rgba(255,255,255,0.94) !important;
        border-radius: 9px;
        background: linear-gradient(135deg, #ff9d2f 0%, #f26b1d 100%) !important;
        color: #fff !important;
        box-shadow: 0 0 0 5px rgba(255,159,26,0.34), 0 10px 26px rgba(0,0,0,0.34) !important;
    }
    .myfeed-picker-spotlight .MultiCheckBox .select2-arrow b {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;
    }
    .myfeed-picker-spotlight .mf-picker-trigger-text,
    .myfeed-picker-spotlight .forum-filter-mobile-icon,
    .myfeed-picker-spotlight .forum-filter-mobile-text {
        color: #fff !important;
        font-weight: 800;
    }
    html.dark-mode .myfeed-picker-spotlight {
        background: rgba(255,159,26,0.28);
        box-shadow: 0 0 0 2px rgba(255,255,255,0.48), 0 0 0 9px rgba(255,159,26,0.34), 0 14px 34px rgba(0,0,0,0.42);
    }
    html.dark-mode .myfeed-picker-spotlight .MultiCheckBox {
        background: linear-gradient(135deg, #ffb347 0%, #f26b1d 100%) !important;
        border-color: rgba(255,255,255,0.96) !important;
        color: #fff !important;
    }
}

/* Reddit-style pager */
.myfeed-pager__page,
.jive-paginator__page { margin: 0 6px; }

/* Empty state for first-visit users */
.myfeed-empty-state { background-color: #fafafa; }
html.dark-mode .myfeed-empty-state {
    background-color: var(--dm-bg-elevated, #2a2a2a);
    border-color: var(--dm-border, rgba(255,255,255,0.2));
    color: var(--dm-text-primary, rgba(255,255,255,0.92));
}

/* "Back to My Feed" chip styling lives in thread-header-responsive.jspf
   critical CSS so the pill renders correctly on first paint, before this
   file is fetched. Single source of truth — do not redefine here. */