/* Reserve a row below the existing header; the migration notice stays sticky. */
.member-announcement-bar {
    --announcement-bar-height: 36px;
    --announcement-bg: #f3f5f7;
    --announcement-ink: #252b34;
    --announcement-line: #e0e4e9;
    --announcement-accent: #365d86;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: var(--announcement-bar-height);
    padding: 0 24px;
    border-bottom: 1px solid var(--announcement-line);
    background: var(--announcement-bg);
    color: var(--announcement-ink);
    font: 400 14px/1.5 var(--site-header-font, system-ui, sans-serif);
}
:root[data-theme=dark] .member-announcement-bar {
    --announcement-bg: #17181b;
    --announcement-ink: #ededee;
    --announcement-line: #303035;
    --announcement-accent: #aac8ed;
}
.member-announcement-bar[hidden] { display: none !important; }
.member-announcement-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.member-announcement-link:hover { color: var(--announcement-accent); }
.member-announcement-icon { flex: none; color: var(--announcement-accent); }
.member-announcement-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.member-announcement-link > svg { flex: none; }
.member-announcement-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    align-self: stretch;
    flex: 0 0 var(--announcement-bar-height);
    width: var(--announcement-bar-height);
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.member-announcement-close:hover { background: rgb(128 128 128 / 12%); }
.member-announcement-bar :focus-visible { outline: 2px solid var(--announcement-accent); outline-offset: -3px; }
/* The asset navigation is fixed; reserve only the portion of the flowing bar
   still visible below the sticky header. JS updates this value on scrolling. */
@media (min-width: 701px) {
    :root:has([data-announcement-bar]:not([hidden])) .ac-side.aa-sidebar {
        top: calc(var(--site-header-desktop-height, 72px) + var(--announcement-visible-height, 36px));
        height: calc(100dvh - var(--site-header-desktop-height, 72px) - var(--announcement-visible-height, 36px));
    }
}
@media (max-width: 600px) {
    .member-announcement-bar { --announcement-bar-height: 40px; padding-inline: 12px 4px; gap: 4px; }
    .member-announcement-link { gap: 8px; }
}
/* The terminal moves its market row into the grid and uses an automatic height
   with a viewport minimum. Keep that flow and reduce only the minimum reserved
   space by the part of the announcement still visible below the header. */
@media (min-width: 769px) {
    :root:has([data-announcement-bar]:not([hidden])) #ftxPage:not([data-app-terminal]) .ftx-grid {
        min-height: calc(100vh - var(--site-header-desktop-height, 72px) - var(--announcement-visible-height, 36px)) !important;
    }
}

/* Balance the close-control space so this temporary migration notice stays
   centered on the page, including in the existing administrator preview. */
.member-announcement-bar[data-announcement-scope="member-migration"] {
    --announcement-bg: rgb(243 245 247 / 96%);
    padding-inline: 0;
    display: grid;
    grid-template-columns: var(--announcement-bar-height) minmax(0, 1fr) var(--announcement-bar-height);
}
.member-announcement-bar[data-announcement-scope="member-migration"] .member-announcement-link {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
}
.member-announcement-bar[data-announcement-scope="member-migration"] .member-announcement-close {
    grid-column: 3;
    grid-row: 1;
}
@media (max-width: 600px) {
    .member-announcement-bar[data-announcement-scope="member-migration"] { padding-inline: 0; }
}

.nm-bar-preview .member-announcement-bar[data-announcement-scope="member-migration"] { padding-inline: 4px; }

/* Follow the existing sticky header without removing the notice from document
   flow. Administrator previews retain their normal inline positioning. */
.member-announcement-bar[data-announcement-bar][data-announcement-scope="member-migration"] {
    position: sticky;
    top: var(--site-header-desktop-height, 72px);
    z-index: 999;
}

/* Tint only the background; keep text and controls fully opaque. */
:root[data-theme=dark] .member-announcement-bar[data-announcement-scope="member-migration"] {
    --announcement-bg: rgb(23 24 27 / 96%);
}

/* Share the mobile header's viewport positioning. Reserve only a visible
   migration row; closing or expiring it immediately restores the header space. */
@media (max-width: 768px) {
    :root[data-member-shell] { --mobile-announcement-reserved-height: 36px; }
    :root[data-member-shell] body:has(> .uh-header[data-unified-header]):has(> [data-announcement-bar][data-announcement-scope="member-migration"]:not([hidden])) {
        padding-top: calc(var(--site-header-desktop-height, 72px) + var(--mobile-announcement-reserved-height));
    }
    :root[data-member-shell] body > .member-announcement-bar[data-announcement-bar][data-announcement-scope="member-migration"] {
        position: fixed;
        inset-inline: 0;
    }
}
@media (max-width: 600px) {
    :root[data-member-shell] { --mobile-announcement-reserved-height: 40px; }
}