/* Sticky selected-viewer bar core shell, fixed positioning, brand, and page offsets.
   Search, HUD/activity, and toast visuals live in their component stylesheets.
   Compact landscape follows the shared support-responsive.css contract: max-width 1180px + landscape. */

html {
    background: #040813;
    scrollbar-gutter: stable;
    /* Sticky-bar page offsets are driven by the --sb-* custom properties set per breakpoint
       below. Only these 4 base read-rules keep !important (needed to trump higher-specificity
       scroll-margin on view containers like #profile-detail); every per-breakpoint rule is a
       plain custom-property assignment on its exact original selector -- no !important -- so the
       cascade (and thus the resolved offset) is byte-for-byte identical. Tokenized 2026-07-10,
       verified across breakpoints/orientations. See docs/support-site-styling-audit.md. */
    scroll-padding-top: var(--sb-scroll-pad, auto) !important;
}

body {
    padding-top: var(--sb-body-pad, 92px) !important;
}

.page {
    padding-top: var(--sb-page-pad, 12px) !important;
}

.section {
    scroll-margin-top: var(--sb-section-sm, 112px) !important;
}

.support-sticky-bar {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    overflow: visible;
    border-bottom: 1px solid rgba(126, 223, 255, 0.46);
    background:
        linear-gradient(90deg, rgba(126, 223, 255, 0.14), transparent 16%, transparent 82%, rgba(176, 154, 255, 0.08)),
        linear-gradient(180deg, rgba(5, 16, 33, 0.99), rgba(4, 13, 28, 0.96) 58%, rgba(3, 9, 21, 0.98)),
        linear-gradient(90deg, rgba(126, 223, 255, 0.055), rgba(129, 255, 195, 0.025), rgba(255, 211, 126, 0.025), rgba(255, 111, 134, 0.025));
    box-shadow:
        0 0 34px rgba(35, 180, 255, 0.22),
        0 7px 28px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(234, 247, 255, 0.09),
        inset 0 -1px 0 rgba(126, 223, 255, 0.28),
        inset 0 -10px 26px rgba(35, 180, 255, 0.055);
    backdrop-filter: blur(18px);
}

.support-sticky-bar:has(.sticky-results.open) {
    z-index: 20000;
}

.support-sticky-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(126, 223, 255, 0.64), rgba(129, 255, 195, 0.22), rgba(176, 154, 255, 0.20), transparent);
    opacity: 0.42;
    pointer-events: none;
}

.support-sticky-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(126, 223, 255, 0.96), rgba(129, 255, 195, 0.42), rgba(176, 154, 255, 0.36), transparent);
    box-shadow: 0 0 16px rgba(126, 223, 255, 0.42);
    opacity: 0.82;
    pointer-events: none;
}

.support-sticky-inner {
    width: min(1500px, calc(100vw - 24px));
    margin: 0 auto;
    padding: 6px 0;
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    overflow: visible;
}

#support-sticky-user-bar .sticky-selected-cockpit {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr) minmax(0, 1fr);
}

#support-sticky-user-bar .sticky-viewer-hud {
    order: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#support-sticky-user-bar .sticky-cockpit-identity {
    order: 2;
    grid-template-rows: auto minmax(0, 1fr);
}

#support-sticky-user-bar .sticky-activity-strip {
    order: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#support-sticky-user-bar .sticky-cockpit-label {
    order: 1;
    margin: 0 0 2px;
}

#support-sticky-user-bar .sticky-search-wrap {
    order: 2;
}

.sticky-selected-cockpit:has(.sticky-results.open) {
    z-index: 2;
}

.sticky-selected-cockpit:has(.sticky-results.open) .sticky-cockpit-identity {
    z-index: 20;
}

.sticky-brand {
    min-width: 0;
    display: grid;
    align-content: center;
    padding: 7px 9px;
    border: 1px solid rgba(126, 223, 255, .30);
    border-radius: 13px;
    background:
        radial-gradient(circle at 12% 0%, rgba(126, 223, 255, 0.15), transparent 46%),
        linear-gradient(135deg, rgba(126, 223, 255, 0.10), transparent 38%),
        rgba(8, 24, 45, 0.56);
    box-shadow: inset 4px 0 0 rgba(126, 223, 255, 0.54), inset 0 0 16px rgba(126, 223, 255, 0.045), 0 0 14px rgba(35, 180, 255, 0.10);
}

.sticky-brand-kicker {
    color: var(--accent);
    font-size: 0;
    font-weight: 950;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-brand-kicker::before {
    content: "THE BUNKER SHOW";
    color: var(--accent);
    font-size: 7.5px;
    font-weight: 950;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
}

.sticky-brand-title {
    color: var(--text);
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1;
}

.sticky-brand-sub {
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0;
}

.sticky-brand-sub::before {
    content: "Sync ";
    color: rgba(126, 223, 255, .72);
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 8.5px;
}

.sticky-brand-sub span {
    font-size: 8.5px;
}

@media (max-width: 1320px) {
    body {
        --sb-body-pad: 112px;
    }

    .section {
        --sb-section-sm: 132px;
    }

    .support-sticky-inner {
        grid-template-columns: 134px minmax(0, 1fr);
    }
}

@media (max-width: 1080px) {
    body {
        --sb-body-pad: 126px;
    }

    .section {
        --sb-section-sm: 146px;
    }

    .support-sticky-inner {
        grid-template-columns: 132px minmax(0, 1fr);
    }
}

@media (max-width: 1180px) and (orientation: landscape),
       (min-width: 761px) and (max-width: 1180px) and (orientation: portrait) {
    html {
        --sb-scroll-pad: 104px;
    }

    body,
    body.support-v2-shell:has(#support-sticky-user-bar) {
        --sb-body-pad: 104px;
    }

    .section {
        --sb-section-sm: 112px;
    }

    .support-sticky-inner {
        width: min(100vw - 14px, 1180px) !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 5px 0 !important;
    }

    .sticky-brand {
        display: none !important;
    }

    #support-sticky-user-bar .sticky-selected-cockpit {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr) minmax(0, 1fr) !important;
        gap: 5px !important;
        padding: 5px !important;
    }

    #support-sticky-user-bar .sticky-viewer-hud,
    #support-sticky-user-bar .sticky-activity-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    .sticky-hud-pill,
    .sticky-activity-card {
        min-width: 0 !important;
    }
}

@media (max-width: 760px) {
    html {
        --sb-scroll-pad: 130px;
    }

    body,
    body.support-v2-shell:has(#support-sticky-user-bar) {
        --sb-body-pad: 150px;
    }

    .page {
        --sb-page-pad: 0px;
        padding-bottom: 82px !important;
    }

    .section {
        --sb-section-sm: 142px;
    }

    .support-sticky-inner {
        width: min(100vw - 12px, 760px);
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 4px 0;
    }

    .sticky-brand {
        display: none;
    }

    #support-sticky-user-bar .sticky-selected-cockpit {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        padding: 5px !important;
    }

    #support-sticky-user-bar .sticky-cockpit-identity {
        order: 1;
    }

    #support-sticky-user-bar .sticky-viewer-hud {
        order: 2;
    }

    #support-sticky-user-bar .sticky-activity-strip {
        order: 3;
    }

    #support-sticky-user-bar .sticky-cockpit-label {
        order: 2;
    }

    #support-sticky-user-bar .sticky-search-wrap {
        order: 1;
    }
}

@media (max-width: 760px) and (orientation: landscape) {
    html {
        --sb-scroll-pad: 112px;
    }

    body,
    body.support-v2-shell:has(#support-sticky-user-bar) {
        --sb-body-pad: 112px;
    }

    .section {
        --sb-section-sm: 120px;
    }

    #support-sticky-user-bar .sticky-selected-cockpit {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 0.78fr) minmax(0, 1fr) !important;
    }

    #support-sticky-user-bar .sticky-viewer-hud {
        order: 1;
    }

    #support-sticky-user-bar .sticky-cockpit-identity {
        order: 2;
    }

    #support-sticky-user-bar .sticky-activity-strip {
        order: 3;
    }

    #support-sticky-user-bar .sticky-cockpit-label {
        display: block;
        order: 1;
        margin: 0 0 2px;
    }

    #support-sticky-user-bar .sticky-search-wrap {
        order: 2;
    }
}

@media (max-width: 620px) {
    body.support-v2-shell:has(#support-sticky-user-bar) {
        --sb-body-pad: 142px;
    }

    .support-sticky-inner {
        width: min(100vw - 14px, 620px) !important;
        padding: 4px 0 !important;
        gap: 4px !important;
    }

    .sticky-brand {
        display: none !important;
    }
}

@media (max-width: 620px) and (orientation: landscape) {
    body.support-v2-shell:has(#support-sticky-user-bar) {
        --sb-body-pad: 112px;
    }
}

@media (max-width: 480px) {
    html {
        --sb-scroll-pad: 134px;
    }

    body {
        --sb-body-pad: 134px;
    }
}

@media (max-width: 480px) and (orientation: landscape) {
    html {
        --sb-scroll-pad: 112px;
    }

    body {
        --sb-body-pad: 112px;
    }
}

@media (max-width: 420px) {
    body.support-v2-shell:has(#support-sticky-user-bar) {
        --sb-body-pad: 136px;
    }
}

@media (max-width: 420px) and (orientation: landscape) {
    body.support-v2-shell:has(#support-sticky-user-bar) {
        --sb-body-pad: 112px;
    }
}

@media (min-width: 1321px) and (max-width: 1520px) {
    .support-sticky-inner {
        width: min(1470px, calc(100vw - 20px));
        grid-template-columns: 132px minmax(0, 1fr);
    }
}

@media (min-width: 1181px) and (max-width: 1320px),
       (min-width: 1081px) and (max-width: 1180px) and (orientation: portrait) {
    body {
        --sb-body-pad: 98px;
    }

    .section {
        --sb-section-sm: 118px;
    }
}