/* ============================================================
 * user_ui — Header chrome (Phase 7 Package E + Package I bell
 * + Package EE balance display).
 * ============================================================
 *
 * Styles extracted VERBATIM from the landing-page mockup per
 * architecture rule §4 (mockup-verbatim canonical classes —
 * `.head`, `.brand`, `nav.primary`, `.spacer`). The mockup's
 * `.hamburger` was retired in the drawer-redesign pass — the
 * mobile-menu trigger is now the `.mobile-menus-edge` arrow
 * tab owned by menus/mobile_menus.css.
 *
 * Section-local class additions only — never replaces or
 * shadows canonical classes that other packages also use:
 *   - `.user-pill`         section-local (logged-in placeholder)
 *   - `.user-pill-avatar`  section-local (img inside the pill)
 *   - `.bell`              section-local (Package I — bell btn)
 *   - `.bell-badge`        section-local (Package I — unread count)
 *   - `.hdr-balance*`      section-local (Package EE — balance)
 *
 * All colours come from tokens.css so light/dark theme-flip
 * is automatic — nothing here is hardcoded per theme.
 *
 * Loaded by user_ui/templates/user_ui/shared/base.html as part
 * of the global cascade.
 * ============================================================ */

/* ---- Sticky header bar ---- */
/* Header-background pass: the bar paints the designer-supplied
   diagonal-stripe strip (img/user_ui/shared/header-bg-{dark,light}.webp,
   1249×89) instead of the former translucent color-mix fill.
   `cover` — the strip fills the full bar (a `contain` variant was
   tried and rejected: at the 64px bar height the strip rendered
   too small). The image's baked-in rounded corners scale off the
   visible edges under cover; `var(--bg)` remains the paint
   fallback while the image loads / if it 404s. Theme pattern
   mirrors help.css / about.css:
   dark image is the default, `html[data-theme="light"]` swaps in the
   light variant — see documentation/img/USAGE.md. */
header.site {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg) url("../../../img/user_ui/shared/header-bg-dark.3ed15739eee4.webp") center / cover no-repeat;
    border-bottom: 1px solid var(--line-2);
}
html[data-theme="light"] header.site {
    background-image: url("../../../img/user_ui/shared/header-bg-light.3ace33e5b067.webp");
}

/* ---- Inner flex row (uses .wrap from base.css for max-width + padding) ---- */
.head {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 64px;
}

/* ---- Brand lockup ---- */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}
.brand img.brand-mark {
    height: 38px;
    width: auto;
    display: block;
}

/* ---- Primary nav ---- */
nav.primary {
    display: flex;
    gap: 28px;
    margin-left: 24px;
}
nav.primary a {
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--font-head);
}
nav.primary a:hover {
    color: var(--orange);
}
nav.primary a[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Flex spacer pushing the right cluster to the edge ---- */
.head .spacer {
    flex: 1;
}

/* ---- Bell (Package I — notification button) ---- */
.bell {
    position: relative;
}

/* ---- Bell badge (Package I — unread count) ---- */
.bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--orange);
    color: #fff;
    border: 2px solid var(--bg);
    border-radius: 9px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.bell-badge[hidden] {
    display: none;
}

/* ============================================================
 * Header balance (Package EE — live total spendable balance).
 * ============================================================
 *
 * A bordered pill carrying a small uppercase label + the
 * spendable total, plus an inert `+` tile (links to Wallet
 * once Package GG ships). Token-driven so both themes work
 * without per-theme rules. SiteBalance (balance.js) rewrites
 * `[data-balance-amount]` text on `balance.updated`.
 */
.hdr-balance {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 6px 5px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    background: var(--surface);
}
.hdr-balance-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
.hdr-balance-label {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.hdr-balance-amount {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
/* `+` tile — neutral surface (matches the mockup's grey button),
   not orange, so it doesn't read as a live primary CTA while inert. */
.hdr-balance-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    flex: none;
}
.hdr-balance-add svg {
    width: 16px;
    height: 16px;
}
.hdr-balance-add:not(:disabled):hover {
    background: var(--bg-2);
}
.hdr-balance-add:not(:disabled):focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
/* Inert until the Wallet page ships (Package GG): native `disabled`
   removes it from tab order + blocks activation; show no interactive
   affordance — just the not-allowed cursor + dim. */
.hdr-balance-add:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

/* ---- User pill (logged-in placeholder) ---- */
.user-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}
.user-pill:hover {
    box-shadow: 0 0 0 2px var(--orange-3);
}
.user-pill:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.user-pill-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* ============================================================
 * Responsive — values mirror the mockup verbatim.
 * ============================================================ */

/* ---- iPad / tablet (≤ 1100px) ---- */
@media (max-width: 1100px) {
    nav.primary { gap: 18px; }
    nav.primary a { font-size: 13px; }
    /* Below desktop the balance pill is too wide for the header — with the
       nav still showing on tablet it pushed the user-pill off the right
       edge. Pull it out of the bar here; the account menu(s) render a
       `[data-balance-root]` copy (SiteBalance mounts on each, both
       server-seed + live-update) so the figure stays reachable. */
    .hdr-balance { display: none; }
}

/* ---- Mobile / phone (≤ 760px) ---- */
@media (max-width: 760px) {
    nav.primary { display: none; }
    .head { height: 58px; gap: 10px; }
    .brand img.brand-mark { height: 32px; }
}