/* shared/profile-menu.css — header account menu (upper-right).
   shared/profile-menu.js mounts a button into `.header-right` and toggles
   a dropdown with the signed-in email, Admin mode, Profile, Access tokens,
   and Sign out. Server mode only. */

.profile-menu {
    position: relative;
    display: inline-flex;
}

/* The button: a small circular avatar showing the email initial. */
.profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    line-height: 1;
}
.profile-btn__avatar {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
/* Armed (admin mode on): a red ring so the elevated state reads from the
   button even when the menu is closed — pairs with the page banner/frame. */
.profile-btn--armed {
    box-shadow: 0 0 0 2px var(--danger, #dc3545);
    border-color: var(--danger, #dc3545);
    color: var(--danger, #dc3545);
}

.profile-menu__panel {
    display: none;
    /* Fixed + JS-positioned from the button rect: an absolute panel gets
       trapped below the content layer by the app's stacking contexts, so
       anchor it to the viewport instead (profile-menu.js sets top/right). */
    position: fixed;
    min-width: 15rem;
    z-index: 9400;  /* above the is-elevated frame (9200) + banner (9100) */
    background: var(--bg, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: var(--radius, 6px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    padding: 0.3rem;
    font-size: 0.85rem;
}
.profile-menu__panel.open { display: block; }

.profile-menu__id {
    padding: 0.35rem 0.55rem 0.45rem;
}
.profile-menu__email {
    font-weight: 600;
    color: var(--text, #222);
    word-break: break-all;
}
.profile-menu__role {
    margin-top: 0.1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--danger, #dc3545);
}

.profile-menu__sep {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--border, #eee);
}

.profile-menu__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius, 4px);
    color: var(--text, #222);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    font: inherit;
}
.profile-menu__item:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

.profile-menu__toggle { cursor: pointer; }
.profile-menu__check {
    margin: 0;
    cursor: pointer;
    accent-color: var(--danger, #dc3545);
    flex-shrink: 0;
}
.profile-menu__toggle-label {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.profile-menu__hint {
    font-size: 0.72rem;
    color: var(--text-muted, #888);
}