/**
 * Floating member login-status box, fixed to the top-right corner on every
 * front-end page. Guests see a "Log in" button; logged-in members see their
 * name with a dropdown that holds "Log out". Palette mirrors member-auth.css
 * (cyan accent #33c6e9). The name is never server-rendered (page cache would
 * leak one member's name to everyone) — member-status-box.js fills it from the
 * never-cached state probe, so the SSR default is always the guest button.
 */
.bc-status-box {
    --bc-accent: #33c6e9;
    --bc-accent-hover: #1fb0d3;
    --bc-ink: #242424;
    --bc-muted: #6f6f70;
    --bc-border: #dcdbdb;
    --bc-surface: #ffffff;
    --bc-surface-alt: #f6f6f6;

    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 9990;
    font-size: 14px;
    line-height: 1.2;
    color: var(--bc-ink);
}

.bc-status-box[hidden] {
    display: none;
}

/* Shared pill look for both the guest button and the member trigger. */
.bc-status-box__login,
.bc-status-box__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: 9px 16px;
    border: 1px solid var(--bc-border);
    border-radius: 999px;
    background: var(--bc-surface);
    color: var(--bc-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(24, 24, 24, 0.12);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.bc-status-box__login {
    background: var(--bc-accent);
    border-color: var(--bc-accent);
    color: #fff;
}

.bc-status-box__login:hover {
    background: var(--bc-accent-hover);
    border-color: var(--bc-accent-hover);
}

.bc-status-box__name:hover {
    border-color: var(--bc-accent);
    color: var(--bc-accent);
}

.bc-status-box__login:focus-visible,
.bc-status-box__name:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(51, 198, 233, 0.35);
}

/* Truncate long names so the pill never overflows the viewport edge. */
.bc-status-box__name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-status-box__caret {
    flex: 0 0 auto;
    transition: transform 0.18s ease;
}

.bc-status-box__member.is-open .bc-status-box__caret {
    transform: rotate(180deg);
}

/* Dropdown anchored to the right edge under the member pill. */
.bc-status-box__member {
    position: relative;
}

.bc-status-box__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    padding: 6px;
    border: 1px solid var(--bc-border);
    border-radius: 12px;
    background: var(--bc-surface);
    box-shadow: 0 8px 24px rgba(24, 24, 24, 0.18);
}

.bc-status-box__dropdown[hidden] {
    display: none;
}

.bc-status-box__logout-btn {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--bc-ink);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.bc-status-box__logout-btn:hover {
    background: var(--bc-surface-alt);
    color: var(--bc-accent);
}

/* Mobile: sit clear of a typical fixed header/hamburger and shrink the pill so
   it never covers site navigation or spills past the viewport edge. */
@media (max-width: 782px) {
    .bc-status-box {
        top: 10px;
        right: 10px;
        font-size: 13px;
    }

    .bc-status-box__login,
    .bc-status-box__name {
        max-width: 46vw;
        padding: 7px 12px;
        font-size: 13px;
    }

    .bc-status-box__dropdown {
        min-width: 140px;
    }
}