/* ---------------------------------------------------------------------------
   member-nav.css — fits the public bar's `pnav-*` vocabulary into the app's
   fixed nav frame.

   READ public-nav.css FIRST. Every visual decision (the pill links, the coin
   chip, the 34px avatar, the two-tone wordmark) is made there and shared
   verbatim, so the signed-in bar and the signed-out bar cannot drift. This file
   only carries the four things that differ:

     1. the bar sits INSIDE `.main-nav-outer`, which is already fixed, frosted
        and 60px tall — so `.pnav--member` gives up its own position, its own
        background and its own border, and shortens to 60px;
     2. the hamburger, which the public bar has no equivalent of;
     3. the two actions are <button>s here (coins opens the modal, the avatar
        opens the drawer) rather than a <span> and an <a>, so they need the
        usual button resets;
     4. the corrections for what the app shell no longer renders — the chips
        row, and the spacer height that reserved space for it.

   The `html.has-member-nav` prefix on (4) is deliberate: dashboard-avatar.css
   sets those two rules with `!important`, and this file is not guaranteed to
   load after it. A second class on the ancestor wins the specificity tie
   whatever the load order.
   ------------------------------------------------------------------------ */

/* ── 1. the bar inside the fixed frame ─────────────────────────────────── */
.pnav.pnav--member {
    position: static;           /* `.main-nav-outer` is the fixed one */
    z-index: auto;
    width: 100%;
    background: transparent;    /* the frame paints the Aurora glass */
    border-bottom: 0;           /* …and the hairline under it */
}

.pnav--member .pnav-inner {
    /* 60px, not the public bar's 68px: `.main-nav-spacer` and every page
       stylesheet that offsets itself from this nav are built on 60. */
    height: 60px;
    max-width: 1240px;
    gap: 14px;
}

/* ── 2. hamburger → try-on sidebar ─────────────────────────────────────── */
/* Base look comes from `.brand-hamburger` in style.css (44px, transparent,
   hover wash). Only the icon needs correcting: that rule was written for the
   old dark-on-glass bar and ships `text-white` in the markup, which is why the
   markup here does not. */
.pnav--member .mnav-burger {
    flex-shrink: 0;
    margin-left: -6px;          /* optical: align the glyph, not the hit area */
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1;
}

.pnav--member .mnav-burger .bi { color: inherit; }

.pnav--member .mnav-burger:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ── 3. the two actions as buttons ─────────────────────────────────────── */

/* The coin badge. Redesigned 2026-08-17: it was a 0.9rem/700 pill reading
   "⚡ 22668 pts", the widest and heaviest thing in the bar — a balance is
   ambient information, and it was shouting over the wordmark and the links.
   Now it is a coin and a figure, one step down in size and weight, on a
   borderless wash that only picks up a hairline on hover. Nothing here spends a
   colour: the bar is monochrome (see the pip note below), so the coin reads as
   a coin by its shape, not by going gold.
   The `pts` label is gone from the markup — the unit lives in the aria-label
   and in the modal this opens (docs/COINS_TERMINOLOGY.md: users read "Coins"). */
.pnav--member .mnav-coins {
    gap: 5px;
    padding: 6px 11px;
    border-color: transparent;
    background: var(--brand-fill-soft);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    /* MUST stay below `font: inherit` — that shorthand resets line-height, so
       declaring this above it silently does nothing.

       And it is what actually makes the badge 28px. Inheriting the body's 1.6
       added ~8px of half-leading that no padding value can take back out, so
       the "one step down" pill measured 34px — exactly as tall as the 34px
       avatar beside it — and the point of the redesign (an ambient balance
       sitting UNDER the avatar's weight) never reached the screen. Height is
       padding + cap height from here: 6 + 16 + 6. */
    line-height: 1;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}

/* The glyph carries its own line box, so it needs the same treatment or it
   re-inflates the pill it sits in and drops the coin off the digits' centre. */
.pnav--member .mnav-coins .bi {
    line-height: 1;
    font-size: 0.86rem;
    color: var(--ink-soft);
}

.pnav--member .mnav-coins:hover {
    background: var(--surface-sunken);
    border-color: var(--line);
}

.pnav--member .mnav-coins:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* An <a> to /user/:id here (a <button> before 2026-08-17, when it opened the
   drawer). The resets stay: several pages ship their own `a { }` rules, and the
   element was a button long enough that the styles assume no padding/border. */
.pnav--member .pnav-avatar {
    position: relative;         /* anchors the unread pip */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Unread notifications. The bell chip carried this signal before; the avatar is
   now the only always-visible element that can. Monochrome, like every other
   state in this bar — a pip, never a colour. The ring is the bar's own
   background, so the dot reads as cut out of the avatar rather than stuck on.
   Toggled by loadNotificationCount() in dashboard-avatar.hbs. */
.pnav--member .pnav-avatar.has-unread::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--surface-page);
}

/* ── 4. what the app shell no longer renders ───────────────────────────── */

/* The chips row (Admin · Chat · Alerts · pts · gems). Still in the DOM —
   user-points.js, GemSystem.renderBalanceChip, the notification badge and
   quick-chat all address elements inside it — but never shown. Everything it
   offered is in the sidebar drawer's Activity section. */
html.has-member-nav #avatarMenuContainer.nav-action-bar {
    display: none !important;
}

/* dashboard-avatar.css reserves 100px on mobile: 60 for the brand row, ~48 for
   the chips row that used to sit under it, plus a gap. With no second row there
   is only the brand row (+ the iOS notch) to clear. */
html.has-member-nav .main-nav-spacer {
    height: calc(60px + env(safe-area-inset-top)) !important;
}

/* ── responsive ────────────────────────────────────────────────────────── */
/* public-nav.css drops the link row at 940px and hands navigation to its
   full-screen mobile panel. This bar has no panel — the sidebar drawer is the
   mobile menu, and the hamburger is always there — so the two rules that
   assume a panel have to be undone. */
@media (max-width: 940px) {
    /* The public bar hides the log-in link because its panel repeats it. */
    .pnav--member .pnav-actions .pnav-login { display: inline-flex; }
}

@media (max-width: 520px) {
    /* Likewise the balance: the panel's identity row repeated it, so the public
       bar drops the chip. Here the bar is the only place the figure is always
       visible (the try-on sidebar repeats it, but only once opened), so it
       stays — it is small enough now that it costs almost nothing. */
    .pnav--member .pnav-actions .pnav-coins { display: inline-flex; }
    .pnav--member .mnav-coins { padding: 6px 9px; }
    .pnav--member .pnav-inner { gap: 8px; padding: 0 14px; }
    .pnav--member .mnav-burger { width: 38px; height: 38px; }
}

/* Narrow phones: brand + burger + balance + avatar on one row. The wordmark
   shrinks (never hides — see the note in public-nav.css) and the log-in pill
   is the first thing to go, since the drawer carries the same action. */
@media (max-width: 400px) {
    .pnav--member .pnav-actions .pnav-login { display: none; }
    .pnav--member .mnav-coins { font-size: 0.8rem; }
}