/* ============================================================
 * user_ui — Desktop user-menu dropdown.
 * ============================================================
 *
 * Companion to Package G's mobile right drawer — same content
 * surface (identity + primary + secondary + Logout), different
 * presentation (top-right popover instead of slide-out drawer).
 *
 * Theme-aware (uses --surface-2 / --text / --line / --orange).
 * Unlike the mobile drawers which are hardcoded dark for
 * visual parity with native-mobile drawer conventions, the
 * desktop dropdown follows the same theme-aware pattern as
 * `.site-help` and `.site-notifications` — both surfaces
 * coexist with page content and need to adapt to the active
 * theme.
 *
 * Loaded by base.html as part of the global cascade after
 * the other chrome stylesheets. Every page has a header, so
 * the dropdown CSS is global.
 * ============================================================ */

/* ---- Hidden by default; .is-open class toggles visibility ---- */
.site-user-menu {
    position: fixed;
    /* Top: just below the 64px sticky header + 8px gap */
    top: 72px;
    /* Right: align with the container's right edge.
       max() picks the larger of (a) the responsive --pad and
       (b) the side gap when viewport is wider than --container.
       On a 1500px viewport: gap = (1500 - 1240) / 2 = 130px.
       On a 1100px viewport: gap = -70px → max picks --pad (28px). */
    right: max(var(--pad), calc((100vw - var(--container)) / 2));
    width: 280px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 22px 24px;
    z-index: 110;
    display: none;
    box-sizing: border-box;
}
.site-user-menu.is-open {
    display: block;
}

/* ---- Close X button (top-right corner of panel) ---- */
.site-user-menu-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.site-user-menu-close:hover {
    background: var(--chip);
}
.site-user-menu-close svg {
    width: 16px;
    height: 16px;
}

/* ---- Identity block (avatar + display name) ---- */
.site-user-menu-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-right: 32px;        /* clear the close button */
}
.site-user-menu-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    display: block;
}
.site-user-menu-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ---- Primary action group (Saira 700 UPPERCASE) ---- */
.site-user-menu-primary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.site-user-menu-primary a {
    display: block;
    text-decoration: none;
    color: var(--text);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 0;
}
.site-user-menu-primary a:hover {
    color: var(--orange);
}

/* ---- Separator between primary and secondary ---- */
.site-user-menu-sep {
    height: 1px;
    background: var(--line);
    margin: 14px 0;
}

/* ---- Secondary action group (Work Sans 500, lowercase) ---- */
.site-user-menu-secondary {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.site-user-menu-secondary a,
.site-user-menu-secondary .site-user-menu-logout-btn {
    display: block;
    text-decoration: none;
    color: var(--text-dim);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    padding: 6px 0;
    background: transparent;
    border: 0;
    text-align: left;
    width: 100%;
    cursor: pointer;
}
.site-user-menu-secondary a:hover,
.site-user-menu-secondary .site-user-menu-logout-btn:hover {
    color: var(--orange);
}

/* ---- Inert placeholder links (dimmed coming-soon state) ---- */
.site-user-menu a[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Logout form wrapper — keep it neutral ---- */
.site-user-menu-logout-form {
    margin: 0;
    padding: 0;
}

/* ============================================================
 * Mobile (≤ 760px) — Package G's mobile drawer takes over.
 * ============================================================ */
@media (max-width: 760px) {
    .site-user-menu {
        /* Force hidden even when JS toggles .is-open — the
           user-pill click on mobile opens the mobile right
           drawer instead (Package G). */
        display: none !important;
    }
}

/* ============================================================
 * Live balance (Package EE) — shown in the dropdown on tablet
 * (761–1100px) where the header pill is hidden; sits directly
 * under the identity block. Theme-aware (tokens). Hidden >1100px
 * (the header pill is the source there) to avoid showing it twice;
 * the ≤760px rule above already force-hides the whole dropdown so
 * the mobile drawer copy takes over on phones.
 * ============================================================ */
.site-user-menu-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.site-user-menu-balance-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}
.site-user-menu-balance-label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.site-user-menu-balance-amount {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 17px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.site-user-menu-balance-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
}
.site-user-menu-balance-add svg {
    width: 16px;
    height: 16px;
}
.site-user-menu-balance-add:not(:disabled):hover {
    background: var(--bg-2);
}
.site-user-menu-balance-add:not(:disabled):focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.site-user-menu-balance-add:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

/* Desktop (>1100px): the header pill shows the balance, so hide the
   in-dropdown copy to avoid showing the same figure twice. */
@media (min-width: 1101px) {
    .site-user-menu-balance {
        display: none;
    }
}