/* ============================================================
 * user_ui — Mobile menus (Phase 7 Package G + drawer-redesign
 * pass).
 * ============================================================
 *
 * DRAWER-REDESIGN PASS — the drawers moved OFF the mockup's
 * hardcoded dark palette (`#2E3441` bg + `#fff` text) onto the
 * design tokens, so they now theme-flip with the rest of the
 * site and match the card language used everywhere else
 * (surface backgrounds, `--line-2` hairlines, rounded row
 * tiles). Every colour in this file is a token — nothing is
 * hardcoded per theme any more.
 *
 * The same pass replaced the header hamburger with a left-edge
 * arrow tab (`.mobile-menus-edge`) — a fixed half-tab at the
 * vertical middle of the left viewport edge (thumb-reachable,
 * unlike the old top-right burger). It opens the LEFT drawer
 * and hides while any drawer is open (`html.mobile-menus-locked`).
 *
 * Layout constants kept from Package G:
 *   - Drawer width      300px / max 88vw
 *   - Backdrop          rgba(0,0,0,0.4) no blur
 *   - Z-index           edge 140, backdrop 150, drawer 200
 *   - Transition        250ms ease
 *   - Close button      30×30 transparent X, stroke 2.5
 *
 * Redesign specifics:
 *   - Drawer bg         var(--bg) + side hairline var(--line-2)
 *   - Links             padded row tiles (12px 14px, radius 12px),
 *                       hover = var(--surface-2) fill + --orange text
 *   - Primary links     Saira 800 / 14px / .06em / UPPERCASE / --text
 *   - Secondary rows    Work Sans 500 / 14px / --text-dim
 *                       (anchors AND the Support/Logout buttons —
 *                       the inline button styles moved here)
 *   - Section labels    .mobile-drawer-label — Saira 700 / 10px /
 *                       .12em / UPPERCASE / --text-mute
 *   - Identity/balance  cards on var(--surface-2) + var(--line-2)
 *
 * Section-local classes shipped (never replace canonical):
 *   - .mobile-menus              outer container
 *   - .mobile-menus-edge         left-edge arrow tab (drawer-redesign
 *                                pass — replaces the header burger)
 *   - .mobile-menus-backdrop     shared backdrop
 *   - .mobile-drawer             both drawers
 *   - .mobile-drawer-left        left drawer side modifier
 *   - .mobile-drawer-right       right drawer side modifier
 *   - .mobile-drawer-close       close-button
 *   - .mobile-drawer-label       section label (drawer-redesign pass)
 *   - .mobile-drawer-user        identity block (right drawer)
 *   - .mobile-drawer-avatar      avatar img
 *   - .mobile-drawer-name        display-name span
 *   - .mobile-drawer-sep         divider between primary + secondary
 *   - .mobile-drawer-secondary   secondary list container
 *   - .mobile-drawer-balance*    Package EE live-balance card
 *
 * Loaded by user_ui/templates/user_ui/shared/base.html as part
 * of the global cascade after header/footer CSS, before
 * `{% block extra_css %}`.
 * ============================================================ */

/* ============================================================
 * 1. Container — logical group only, no visual effect.
 * ============================================================ */
.mobile-menus {
    /* No layout — children are position:fixed. */
}

/* ============================================================
 * 2. Edge trigger (drawer-redesign pass) — left-middle arrow
 *    tab that opens the LEFT drawer. Replaces the header
 *    hamburger. Sits at the vertical middle of the left
 *    viewport edge where the thumb naturally rests. Matches
 *    the header chrome's translucent-blur surface. Hidden
 *    while any drawer is open (the lock class is the single
 *    source of "a drawer is open" truth).
 * ============================================================ */
.mobile-menus-edge {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 140;
    width: 30px;
    height: 72px;
    padding: 0;
    border: 1px solid var(--line-2);
    border-left: 0;
    border-radius: 0 14px 14px 0;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transition: opacity 250ms ease, color 120ms ease-out;
}
.mobile-menus-edge svg {
    width: 18px;
    height: 18px;
}
.mobile-menus-edge:hover {
    color: var(--orange);
}
.mobile-menus-edge:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
html.mobile-menus-locked .mobile-menus-edge {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
 * 3. Backdrop — shared between both drawers.
 *    rgba(0,0,0,0.4) no blur, z-index 150, fade 250ms.
 * ============================================================ */
.mobile-menus-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}
.mobile-menus-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
 * 4. Drawer base — token-driven (drawer-redesign pass).
 *    Theme-aware: flips with `data-theme` like every other
 *    surface. Tight flex gap — the row tiles carry their own
 *    padding, so the big Package G gap is gone.
 * ============================================================ */
.mobile-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 200;
    width: 300px;
    max-width: 88vw;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform 250ms ease;
    will-change: transform;
    pointer-events: none;
    outline: none;
}
.mobile-drawer.is-open {
    pointer-events: auto;
}

/* 4a. Left drawer — slides in from the left. */
.mobile-drawer-left {
    left: 0;
    border-right: 1px solid var(--line-2);
    transform: translateX(-100%);
}
.mobile-drawer-left.is-open {
    transform: translateX(0);
}

/* 4b. Right drawer — slides in from the right. */
.mobile-drawer-right {
    right: 0;
    border-left: 1px solid var(--line-2);
    transform: translateX(100%);
}
.mobile-drawer-right.is-open {
    transform: translateX(0);
}

/* ============================================================
 * 5. Close button — top corner facing the page center.
 *    Right drawer: top-LEFT of drawer. Left drawer: top-RIGHT
 *    (mirror).
 * ============================================================ */
.mobile-drawer-close {
    background: transparent;
    border: 0;
    color: var(--text-mute);
    padding: 0;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: color 120ms ease-out;
}
.mobile-drawer-right .mobile-drawer-close {
    align-self: flex-start;
}
.mobile-drawer-left .mobile-drawer-close {
    align-self: flex-end;
}
.mobile-drawer-close svg {
    width: 24px;
    height: 24px;
}
.mobile-drawer-close:hover {
    color: var(--orange);
}
.mobile-drawer-close:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 4px;
}

/* ============================================================
 * 6. Section label (drawer-redesign pass) — small uppercase
 *    kicker above a link group. Mirrors the label typography
 *    of the balance card.
 * ============================================================ */
.mobile-drawer-label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
    padding: 0 14px;
    margin: 8px 0 2px;
    flex: none;
}

/* ============================================================
 * 7. Primary links — padded row tiles (drawer-redesign pass).
 *    Saira 800 / 14px / UPPERCASE / .06em / --text; hover
 *    fills with --surface-2 and tints --orange, matching the
 *    card-hover language of the rest of the site.
 * ============================================================ */
.mobile-drawer > a {
    text-decoration: none;
    color: var(--text);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 14px;
    border-radius: 12px;
    transition: color 120ms ease-out, background-color 120ms ease-out;
}
.mobile-drawer > a:hover,
.mobile-drawer > a:focus-visible {
    color: var(--orange);
    background: var(--surface-2);
}
.mobile-drawer > a:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
}
.mobile-drawer > a[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}
.mobile-drawer > a[aria-disabled="true"]:hover,
.mobile-drawer > a[aria-disabled="true"]:focus-visible {
    color: var(--text);
    background: transparent;
}

/* ============================================================
 * 8. User identity block (right drawer, logged-in only).
 * ============================================================ */
.mobile-drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 2px;
    margin-bottom: 6px;
}
.mobile-drawer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--line-2);
}
.mobile-drawer-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
 * 9. Separator — between primary and secondary lists.
 * ============================================================ */
.mobile-drawer-sep {
    height: 1px;
    background: var(--line-2);
    margin: 10px 2px;
    flex-shrink: 0;
}

/* ============================================================
 * 10. Secondary list — Work Sans 500 row tiles. Covers the
 *     anchors AND the Support / Logout `<button>`s (their
 *     Package G inline styles moved here in the redesign
 *     pass so the whole list shares one rule set).
 * ============================================================ */
.mobile-drawer-secondary {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mobile-drawer-secondary form {
    margin: 0;
    padding: 0;
    display: block;
}
.mobile-drawer-secondary a,
.mobile-drawer-secondary button {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-dim);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    padding: 9px 14px;
    border-radius: 10px;
    transition: color 120ms ease-out, background-color 120ms ease-out;
}
.mobile-drawer-secondary a:hover,
.mobile-drawer-secondary a:focus-visible,
.mobile-drawer-secondary button:hover,
.mobile-drawer-secondary button:focus-visible {
    color: var(--orange);
    background: var(--surface-2);
}
.mobile-drawer-secondary a:focus-visible,
.mobile-drawer-secondary button:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
}
.mobile-drawer-secondary a[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}
.mobile-drawer-secondary a[aria-disabled="true"]:hover,
.mobile-drawer-secondary a[aria-disabled="true"]:focus-visible {
    color: var(--text-dim);
    background: transparent;
}

/* ============================================================
 * 11. Body scroll lock — applied while any drawer is open.
 *     Intentionally NO `touch-action: none` (cascades into
 *     the drawer and kills in-drawer scroll on iOS Safari);
 *     iOS rubber-band gap remains the Package NN carry-forward.
 * ============================================================ */
html.mobile-menus-locked,
html.mobile-menus-locked body {
    overflow: hidden;
}

/* ============================================================
 * 12. Reduced motion — snap-open / snap-close.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .mobile-drawer,
    .mobile-menus-backdrop,
    .mobile-menus-edge {
        transition: none;
    }
}

/* ============================================================
 * 13. Desktop — hide the entire module above the mobile
 *     breakpoint (edge tab included). Mirrors `header.css`
 *     @ 760px where `nav.primary` becomes visible.
 * ============================================================ */
@media (min-width: 761px) {
    .mobile-menus {
        display: none;
    }
}

/* ============================================================
 * 14. Live balance (Package EE) — token-driven card since the
 *     drawer-redesign pass (was translucent-white on the old
 *     hardcoded-dark drawer). Mirrors `.hdr-balance` in
 *     header.css. The whole module is display:none >760px, so
 *     no breakpoint gating is needed here.
 * ============================================================ */
.mobile-drawer-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 6px;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background: var(--surface-2);
    flex: none;
}
.mobile-drawer-balance-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}
.mobile-drawer-balance-label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.mobile-drawer-balance-amount {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 18px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.mobile-drawer-balance-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background-color 120ms ease-out;
}
.mobile-drawer-balance-add svg {
    width: 18px;
    height: 18px;
}
.mobile-drawer-balance-add:not(:disabled):hover {
    background: var(--bg-2);
}
.mobile-drawer-balance-add:not(:disabled):focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.mobile-drawer-balance-add:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}