/* Site chrome — top nav + footer + mobile overlay.

   Every value is a token. No magic numbers, no hex codes, no inline pixel
   sizes that aren't either tied to the spacing scale or a documented
   exception (touch targets pinned at 44px, hamburger bars at 2px). */

/* ═══════════════════════════════════════════════════════════════════════
   Page-level accessibility primitives — skip link + sr-only utility
   ═══════════════════════════════════════════════════════════════════════ */

/* Visually hidden until focused. Keyboard users hit Tab once on page
   load and get a visible "Skip to main content" link — bypasses the
   nav (especially the mega-menu trigger sequence) and drops them at
   the page's primary content. */
.jp-skip-link{
    position:absolute;
    top:var(--jp-space-2);
    left:var(--jp-space-2);
    z-index:calc(var(--jp-z-overlay) + 1);
    padding:10px 16px;
    background:var(--jp-ink);
    color:#fff;
    border-radius:var(--jp-radius-md);
    font-weight:900;
    text-decoration:none;
    box-shadow:var(--jp-shadow-md);
    transform:translateY(-200%);
    transition:transform var(--jp-duration-fast) var(--jp-ease);
}
.jp-skip-link:focus,
.jp-skip-link:focus-visible{
    transform:translateY(0);
    outline:3px solid var(--jp-accent);
    outline-offset:3px;
}

/* Screen-reader-only — visually hidden, available to assistive tech.
   Mirrors the long-standing .sr-only pattern but namespaced. */
.jp-sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* Tab-focused <main> gets no visible outline by default — the focus
   ring on the main element itself is meaningless, the user just wants
   to land here from the skip link. */
#jp-main:focus,
#jp-main:focus-visible{outline:none}

/* ═══════════════════════════════════════════════════════════════════════
   Top navigation — sticky pill bar with mega-menu groups
   ═══════════════════════════════════════════════════════════════════════ */

.jp-nav{
    position:sticky;
    top:var(--jp-space-4);
    z-index:var(--jp-z-nav);
    margin:var(--jp-space-5) auto 0;
    width:min(var(--jp-shell-wide),calc(100% - var(--jp-gutter) * 2));
    transition:top var(--jp-duration-base) var(--jp-ease);
}
.jp-nav__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--jp-space-4);
    padding:var(--jp-space-3) var(--jp-space-5);
    background:var(--jp-panel-soft);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--jp-line);
    border-radius:var(--jp-radius-lg);
    box-shadow:var(--jp-shadow-sm);
    transition:padding var(--jp-duration-base) var(--jp-ease),
               box-shadow var(--jp-duration-base) var(--jp-ease);
}
.jp-nav.is-shrunk .jp-nav__inner{
    padding:var(--jp-space-2) var(--jp-space-5);
    box-shadow:var(--jp-shadow-md);
}
/* Tagline collapses smoothly when the nav shrinks on scroll — animating
   max-height + opacity (not `display:none`) keeps the transition fluid.
   `overflow:hidden` swallows the rendered text while it collapses. */
.jp-nav__brand-text small{
    overflow:hidden;
    max-height:1.4em;
    opacity:1;
    transition:max-height var(--jp-duration-base) var(--jp-ease),
               opacity var(--jp-duration-fast) var(--jp-ease),
               margin var(--jp-duration-base) var(--jp-ease);
}
.jp-nav.is-shrunk .jp-nav__brand-text small{
    max-height:0;
    opacity:0;
    margin-top:0;
}

/* ── Brand cluster (left) ────────────────────────────────────────────── */
.jp-nav__brand{
    display:flex;
    align-items:center;
    gap:var(--jp-space-3);
    flex-shrink:0;
    text-decoration:none;
}
.jp-nav__brand-mark{
    width:38px;
    height:38px;
    border-radius:var(--jp-radius-sm);
    background:var(--jp-charcoal);
    box-shadow:inset 0 0 0 1px var(--jp-line);   /* outlines the tile on a dark header */
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3px;
    padding:7px;
}
.jp-nav__brand-mark span{border-radius:4px;background:var(--jp-accent)}
.jp-nav__brand-mark span:nth-child(2){background:#fff}
.jp-nav__brand-mark span:nth-child(3){grid-column:1/3;background:var(--ui-brand-soft)}
.jp-nav__brand-text{display:flex;flex-direction:column;line-height:1.1}
.jp-nav__brand-text strong{
    font-size:var(--jp-text-md);
    font-weight:900;
    color:var(--jp-ink);
    letter-spacing:-.04em;
}
.jp-nav__brand-text small{
    font-size:11px;
    color:var(--jp-muted);
    font-weight:600;
    margin-top:1px;
}

/* ── Centre nav (mega-menu triggers + flat links) ─────────────────────── */
.jp-nav__centre{
    display:flex;
    align-items:center;
    gap:var(--jp-space-1);
    flex:1;
    justify-content:center;
}
.jp-nav__link{
    padding:9px 14px;
    border-radius:var(--jp-radius-pill);
    color:var(--jp-ink-soft);
    font-size:var(--jp-text-sm);
    font-weight:750;
    text-decoration:none;
    transition:background var(--jp-duration-fast) var(--jp-ease),
               color var(--jp-duration-fast) var(--jp-ease);
}
.jp-nav__link:hover{background:var(--jp-accent-wash);color:var(--jp-ink)}
.jp-nav__link--utility{color:var(--jp-muted)}
.jp-nav__link--utility:hover{color:var(--jp-ink);background:transparent}

/* ── Mega-menu group ─────────────────────────────────────────────────── */
.jp-nav__group{position:relative}
.jp-nav__group-trigger{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 14px;
    border:0;
    background:transparent;
    border-radius:var(--jp-radius-pill);
    color:var(--jp-ink-soft);
    font:inherit;
    font-size:var(--jp-text-sm);
    font-weight:750;
    cursor:pointer;
    transition:background var(--jp-duration-fast) var(--jp-ease),
               color var(--jp-duration-fast) var(--jp-ease);
}
.jp-nav__group-trigger:hover,
.jp-nav__group.is-open .jp-nav__group-trigger{
    background:var(--jp-accent-wash);
    color:var(--jp-ink);
}
.jp-nav__group-caret{
    font-size:10px;
    line-height:1;
    transition:transform var(--jp-duration-base) var(--jp-ease);
}
.jp-nav__group.is-open .jp-nav__group-caret{transform:rotate(180deg)}

/* ── Mega panel ──────────────────────────────────────────────────────── */
.jp-nav__panel{
    position:absolute;
    top:calc(100% + var(--jp-space-3));
    left:50%;
    transform:translateX(-50%) translateY(-6px);
    min-width:340px;
    max-width:520px;
    background:var(--jp-panel);
    border:1px solid var(--jp-line);
    border-radius:var(--jp-radius-lg);
    box-shadow:var(--jp-shadow-md);
    padding:var(--jp-space-3);
    opacity:0;
    pointer-events:none;
    transition:opacity var(--jp-duration-base) var(--jp-ease),
               transform var(--jp-duration-base) var(--jp-ease);
}
.jp-nav__group.is-open .jp-nav__panel{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}
.jp-nav__panel-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.jp-nav__panel-item{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:var(--jp-space-3) var(--jp-space-4);
    border-radius:var(--jp-radius-md);
    text-decoration:none;
    transition:background var(--jp-duration-fast) var(--jp-ease),
               transform var(--jp-duration-fast) var(--jp-ease);
}
.jp-nav__panel-item:hover{
    background:var(--jp-accent-wash);
    transform:translateX(2px);
}
.jp-nav__panel-item-label{
    font-weight:900;
    color:var(--jp-ink);
    font-size:var(--jp-text-base);
    line-height:var(--jp-leading-snug);
}
.jp-nav__panel-item-detail{
    color:var(--jp-muted);
    font-size:var(--jp-text-xs);
    font-weight:550;
    line-height:var(--jp-leading-body);
}

/* ── Utility cluster (right) ─────────────────────────────────────────── */
.jp-nav__utility{
    display:flex;
    align-items:center;
    gap:var(--jp-space-2);
    flex-shrink:0;
}
.jp-nav__cta{
    display:inline-flex;
    align-items:center;
    padding:10px 16px;
    background:var(--jp-charcoal);
    color:#fff;
    border-radius:var(--jp-radius-sm);
    font-size:var(--jp-text-sm);
    font-weight:700;
    text-decoration:none;
    box-shadow:0 1px 2px rgba(18,18,18,.12);
    transition:transform var(--jp-duration-base) var(--jp-ease),
               background var(--jp-duration-base) var(--jp-ease);
}
.jp-nav__cta:hover{
    transform:translateY(-1px);
    background:#000;
}

/* Inbox bell — now a button (data-nav-trigger="inbox") that toggles the
   preview panel. Reset button-defaults so it can share visuals with the
   avatar/footer chrome. */
.jp-nav__inbox{
    position:relative;
    width:36px;
    height:36px;
    padding:0;
    border-radius:50%;
    background:var(--jp-canvas-3);
    border:1px solid var(--jp-line);
    color:var(--jp-ink);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font:inherit;
    cursor:pointer;
    transition:background var(--jp-duration-fast) var(--jp-ease),
               transform var(--jp-duration-fast) var(--jp-ease);
}
.jp-nav__inbox:hover{
    background:var(--jp-panel);
    transform:translateY(-1px);
}
.jp-nav__inbox-icon{
    width:18px;
    height:18px;
    fill:currentColor;
    display:block;
}
.jp-nav__inbox-badge{
    position:absolute;
    top:-2px;
    right:-2px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:var(--jp-radius-pill);
    background:var(--jp-accent);
    color:var(--ui-on-gold);
    font-size:11px;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 6px rgba(231,199,90,.55);
    transform-origin:center;
    animation:jp-nav__badge-pop var(--jp-duration-base) var(--jp-ease) both;
}
@keyframes jp-nav__badge-pop{
    0%   {transform:scale(.4); opacity:0}
    60%  {transform:scale(1.15); opacity:1}
    100% {transform:scale(1); opacity:1}
}

.jp-nav__logout-form{margin:0}
.jp-nav__logout{
    border:0;
    background:transparent;
    cursor:pointer;
    font:inherit;
}

/* ── Hamburger (mobile only) ─────────────────────────────────────────── */
.jp-nav__hamburger{
    display:none;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--jp-line);
    background:var(--jp-panel);
    border-radius:var(--jp-radius-sm);
    cursor:pointer;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
}
.jp-nav__hamburger-bar{
    display:block;
    width:18px;
    height:2px;
    background:var(--jp-ink);
    border-radius:1px;
    transition:transform var(--jp-duration-base) var(--jp-ease);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media(max-width:1060px){
    .jp-nav__centre{gap:0}
    .jp-nav__group-trigger,
    .jp-nav__link{padding:8px 10px}
}

@media(max-width:860px){
    .jp-nav{margin-top:var(--jp-space-3);top:var(--jp-space-3)}
    .jp-nav__centre,
    .jp-nav__utility{display:none}
    .jp-nav__hamburger{display:inline-flex}
    .jp-nav__brand-text small{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile overlay — full-screen menu replacing the desktop centre/utility
   ═══════════════════════════════════════════════════════════════════════ */

.jp-nav-mobile{
    position:fixed;
    inset:0;
    z-index:var(--jp-z-overlay);
    background:var(--jp-canvas);
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    animation:jp-nav-mobile-in var(--jp-duration-slow) var(--jp-ease);
}
/* Restore the browser-default `[hidden]` behaviour that our `display:flex`
   rule above accidentally overrode (same specificity, our rule loaded
   later, so the attribute lost). Without this the overlay covers every
   page on every viewport, including desktop where it's never wanted. */
.jp-nav-mobile[hidden]{display:none}
@keyframes jp-nav-mobile-in {
    from { opacity:0; transform:translateY(-12px) }
    to   { opacity:1; transform:translateY(0) }
}
body.jp-nav-mobile-open{overflow:hidden}

.jp-nav-mobile__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--jp-space-5) var(--jp-space-6);
    border-bottom:1px solid var(--jp-line);
}
.jp-nav-mobile__brand{
    font-size:var(--jp-text-lg);
    font-weight:900;
    letter-spacing:-.03em;
    color:var(--jp-ink);
    text-decoration:none;
}
.jp-nav-mobile__close{
    width:44px;
    height:44px;
    border-radius:var(--jp-radius-pill);
    border:1px solid var(--jp-line);
    background:var(--jp-panel);
    color:var(--jp-ink);
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.jp-nav-mobile__body{
    flex:1;
    padding:var(--jp-space-5) var(--jp-space-6);
    display:flex;
    flex-direction:column;
    gap:var(--jp-space-6);
}
.jp-nav-mobile__section-head{
    display:block;
    margin-bottom:var(--jp-space-3);
    color:var(--jp-muted);
    font-size:var(--jp-text-xs);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:var(--jp-tracking-eyebrow);
}
.jp-nav-mobile__section ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
}
.jp-nav-mobile__section a{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:var(--jp-space-3) 0;
    font-size:var(--jp-text-lg);
    font-weight:850;
    color:var(--jp-ink);
    text-decoration:none;
    border-bottom:1px solid var(--jp-line);
    transition:color var(--jp-duration-fast) var(--jp-ease);
}
.jp-nav-mobile__section a:hover,
.jp-nav-mobile__section a:active{color:var(--jp-accent-ink)}

.jp-nav-mobile__foot{
    padding:var(--jp-space-5) var(--jp-space-6) var(--jp-space-7);
    display:flex;
    flex-direction:column;
    gap:var(--jp-space-3);
    border-top:1px solid var(--jp-line);
    background:var(--jp-panel);
}
.jp-nav-mobile__foot .ui-btn{width:100%}
.jp-nav-mobile__logout{margin:0}

/* ═══════════════════════════════════════════════════════════════════════
   Footer — never goes dark, multi-column on desktop, accordion on mobile
   ═══════════════════════════════════════════════════════════════════════ */

.jp-footer{
    margin-top:var(--jp-space-11);
    background:linear-gradient(180deg,
        rgba(231,199,90,0) 0%,
        var(--jp-canvas-2) 100%);
    border-top:1px solid var(--jp-line);
}
.jp-footer__inner{
    width:min(var(--jp-shell-wide),calc(100% - var(--jp-gutter) * 2));
    margin:0 auto;
    padding:var(--jp-space-9) 0 var(--jp-space-7);
    display:grid;
    grid-template-columns:1fr 3fr;
    gap:var(--jp-space-8);
}
@media(max-width:860px){
    .jp-footer__inner{
        grid-template-columns:1fr;
        gap:var(--jp-space-6);
        padding:var(--jp-space-7) 0 var(--jp-space-5);
    }
}

/* Brand block */
.jp-footer__brand{display:flex;flex-direction:column;gap:var(--jp-space-3)}
.jp-footer__brand-link{
    display:flex;
    align-items:center;
    gap:var(--jp-space-2);
    text-decoration:none;
    color:var(--jp-ink);
}
.jp-footer__brand-mark{
    width:32px;
    height:32px;
    border-radius:var(--jp-radius-sm);
    background:var(--jp-charcoal);
    box-shadow:inset 0 0 0 1px var(--jp-line);   /* outlines the tile on a dark header */
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px;
    padding:5px;
}
.jp-footer__brand-mark span{border-radius:3px;background:var(--jp-accent)}
.jp-footer__brand-mark span:nth-child(2){background:#fff}
.jp-footer__brand-mark span:nth-child(3){grid-column:1/3;background:var(--ui-brand-soft)}
.jp-footer__brand-link strong{
    font-size:var(--jp-text-md);
    font-weight:900;
    letter-spacing:-.03em;
}
.jp-footer__tagline{
    color:var(--jp-muted);
    font-size:var(--jp-text-sm);
    line-height:var(--jp-leading-body);
    font-weight:550;
}

/* Columns */
.jp-footer__columns{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--jp-space-5);
}
@media(max-width:860px){
    .jp-footer__columns{grid-template-columns:1fr;gap:0}
}

.jp-footer__column{display:flex;flex-direction:column;gap:var(--jp-space-3)}
.jp-footer__column-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    font:inherit;
    cursor:default;
    color:inherit;
}
.jp-footer__column-heading{
    color:var(--jp-muted);
    font-size:var(--jp-text-xs);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:var(--jp-tracking-eyebrow);
}
.jp-footer__column-caret{display:none;color:var(--jp-muted);font-size:18px;line-height:1}
.jp-footer__column-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:var(--jp-space-2);
}
.jp-footer__column-link{
    color:var(--jp-ink-soft);
    font-size:var(--jp-text-sm);
    font-weight:650;
    text-decoration:none;
    transition:color var(--jp-duration-fast) var(--jp-ease);
}
.jp-footer__column-link:hover{color:var(--jp-accent-ink)}

/* Mobile accordion behaviour */
@media(max-width:860px){
    .jp-footer__column{
        border-bottom:1px solid var(--jp-line);
        padding:var(--jp-space-3) 0;
        gap:0;
    }
    .jp-footer__column-head{
        cursor:pointer;
        min-height:44px;
    }
    .jp-footer__column-caret{display:inline}
    .jp-footer__column-list{
        overflow:hidden;
        max-height:0;
        opacity:0;
        margin-top:0;
        transition:max-height var(--jp-duration-base) var(--jp-ease),
                   opacity var(--jp-duration-fast) var(--jp-ease),
                   margin-top var(--jp-duration-base) var(--jp-ease);
    }
    .jp-footer__column[data-open] .jp-footer__column-list{
        max-height:400px;
        opacity:1;
        margin-top:var(--jp-space-3);
    }
}

/* Legal strip */
.jp-footer__legal{
    border-top:1px solid var(--jp-line);
    background:rgba(18,18,18,.02);
}
.jp-footer__legal-inner{
    width:min(var(--jp-shell-wide),calc(100% - var(--jp-gutter) * 2));
    margin:0 auto;
    padding:var(--jp-space-5) 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--jp-space-4);
    flex-wrap:wrap;
}
.jp-footer__copyright{
    color:var(--jp-muted);
    font-size:var(--jp-text-xs);
    font-weight:700;
}
.jp-footer__theme{display:flex;align-items:center;gap:var(--jp-space-2);font-size:var(--jp-text-xs);font-weight:var(--ui-weight-strong);color:var(--jp-muted)}
.jp-footer__theme[hidden]{display:none}
.jp-footer__theme select{
    min-height:36px;padding:0 var(--jp-space-3);
    border:1px solid var(--ui-control);border-radius:var(--ui-radius-control);
    background:var(--jp-panel);color:var(--jp-ink);font:inherit;
}
.jp-footer__theme select:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
@media(max-width:680px){.jp-footer__theme select{min-height:44px}}
.jp-footer__legal-links{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:var(--jp-space-4);
}
.jp-footer__legal-links a{
    color:var(--jp-muted);
    font-size:var(--jp-text-xs);
    font-weight:700;
    text-decoration:none;
    transition:color var(--jp-duration-fast) var(--jp-ease);
    display:inline-flex;
    align-items:center;
}
.jp-footer__legal-links a:hover{color:var(--jp-ink)}
/* Mobile: bump legal links to a 44px tap area without bloating the
   desktop strip's density. */
@media(max-width:680px){
    .jp-footer__legal-links a{min-height:44px;padding:0 var(--jp-space-1)}
}

/* ═══════════════════════════════════════════════════════════════════════
   Accessibility — focus + reduced motion
   ═══════════════════════════════════════════════════════════════════════ */

.jp-nav__link:focus-visible,
.jp-nav__group-trigger:focus-visible,
.jp-nav__cta:focus-visible,
.jp-nav__inbox:focus-visible,
.jp-nav__hamburger:focus-visible,
.jp-nav-mobile__close:focus-visible,
.jp-footer__column-link:focus-visible,
.jp-footer__legal-links a:focus-visible{
    outline:3px solid var(--jp-accent);
    outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
    .jp-nav,
    .jp-nav__inner,
    .jp-nav__group-caret,
    .jp-nav__panel,
    .jp-nav__panel-item,
    .jp-nav__cta,
    .jp-nav-mobile,
    .jp-nav__brand-text small,
    .jp-footer__column-list{
        transition:none !important;
        animation:none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Hide the legacy site-header that style.css still renders into existence
   when its rules apply. The new .jp-nav owns the chrome end-to-end.
   ═══════════════════════════════════════════════════════════════════════ */
.site-header{display:none}


/* ──────────────────────────────────────────────────────────────────────
   Navbar redesign — active state + utility cluster + avatar dropdown.
   The bar splits into three clusters: brand on the left, primary nav
   centered, utility (Pricing + auth/avatar) on the right. Every
   primary item carries an `is_active` flag from the context processor
   so the active-state underline lights up automatically.
   ────────────────────────────────────────────────────────────────────── */

/* Active-state — subtle 2px accent underline beneath the link/trigger.
   Position:relative on the parent lets the ::after absolute-position
   without disturbing the layout. */
.jp-nav__link,
.jp-nav__group-trigger{position:relative;}
.jp-nav__link--active,
.jp-nav__group-trigger--active{
    color:var(--jp-ink);
}
.jp-nav__link--active::after,
.jp-nav__group-trigger--active::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:2px;
    height:2px;
    border-radius:2px;
    background:var(--jp-accent);
}

/* The Pricing link in the utility cluster shouldn't carry the bold
   active-state when on /pricing/ — it's already de-emphasised. Just
   colour shift, no underline. */
.jp-nav__link--utility.jp-nav__link--active{color:var(--jp-ink);}
.jp-nav__link--utility.jp-nav__link--active::after{display:none;}


/* ── Avatar trigger + dropdown ──────────────────────────────────────── */

.jp-nav__avatar-group{position:relative;}
.jp-nav__avatar-trigger{
    appearance:none;
    background:transparent;
    border:0;
    padding:0;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:transform var(--jp-duration-fast) var(--jp-ease);
}
.jp-nav__avatar-trigger:hover{transform:translateY(-2px);}
.jp-nav__avatar-trigger:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px var(--jp-accent-wash);
    border-radius:50%;
}

.jp-nav__avatar-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--jp-accent);
    color:var(--ui-on-gold);
    font-weight:800;
    font-size:var(--jp-text-sm);
    letter-spacing:.02em;
    box-shadow:var(--jp-shadow-sm);
    transition:transform var(--jp-duration-fast) var(--jp-ease),
               box-shadow var(--jp-duration-fast) var(--jp-ease);
}
.jp-nav__avatar-trigger:hover .jp-nav__avatar-chip{
    box-shadow:var(--jp-shadow-md);
}
.jp-nav__avatar-chip--lg{
    width:48px;
    height:48px;
    font-size:var(--jp-text-md);
}

/* The avatar panel reuses .jp-nav__panel's positioning + open/close
   wiring, but with a denser layout tuned for a single-user menu. */
.jp-nav__avatar-panel{
    min-width:260px;
    right:0;
    left:auto;        /* override .jp-nav__panel default left-align */
}

.jp-nav__avatar-head{
    display:flex;
    align-items:center;
    gap:var(--jp-space-3);
    padding:var(--jp-space-5) var(--jp-space-5) var(--jp-space-4);
    border-bottom:1px solid var(--jp-line);
}
.jp-nav__avatar-headmeta{display:flex; flex-direction:column; min-width:0;}
.jp-nav__avatar-name{
    font-size:var(--jp-text-md);
    color:var(--jp-ink);
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.jp-nav__avatar-email{
    font-size:var(--jp-text-xs);
    color:var(--jp-muted-soft);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:200px;
    margin-top:2px;
}
.jp-nav__avatar-list{
    list-style:none;
    padding:var(--jp-space-2) 0;
    margin:0;
    border-bottom:1px solid var(--jp-line);
}
.jp-nav__avatar-link{
    position:relative;          /* anchor for the active-state underline */
    display:block;
    padding:var(--jp-space-3) var(--jp-space-5);
    color:var(--jp-ink-soft);
    font-size:var(--jp-text-sm);
    font-weight:600;
    text-decoration:none;
    transition:background var(--jp-duration-fast) var(--jp-ease),
               color var(--jp-duration-fast) var(--jp-ease);
}
.jp-nav__avatar-link:hover{
    background:var(--jp-accent-wash);
    color:var(--jp-ink);
}
.jp-nav__avatar-link--active{
    color:var(--jp-ink);
    font-weight:800;
}
/* Same accent underline as the centre nav's `--active` links — kept
   short and inset to the left so it reads as an "anchor" beneath the
   label, not a full divider. */
.jp-nav__avatar-link--active::after{
    content:"";
    position:absolute;
    left:var(--jp-space-5);
    bottom:4px;
    width:24px;
    height:2px;
    border-radius:2px;
    background:var(--jp-accent);
}

.jp-nav__avatar-foot{padding:var(--jp-space-2) 0;}
.jp-nav__avatar-logout{
    appearance:none;
    background:transparent;
    border:0;
    width:100%;
    text-align:left;
    padding:var(--jp-space-3) var(--jp-space-5);
    color:var(--jp-muted);
    font:inherit;
    font-size:var(--jp-text-sm);
    font-weight:600;
    cursor:pointer;
    transition:color var(--jp-duration-fast) var(--jp-ease),
               background var(--jp-duration-fast) var(--jp-ease);
}
.jp-nav__avatar-logout:hover{
    color:var(--jp-danger);
    background:var(--jp-danger-wash);
}


/* ── Mobile overlay: identity header for logged-in users ────────────── */

.jp-nav-mobile__identity{
    display:flex;
    align-items:center;
    gap:var(--jp-space-3);
    min-width:0;
}
.jp-nav-mobile__identity-name{
    display:block;
    font-size:var(--jp-text-md);
    color:var(--jp-ink);
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.jp-nav-mobile__identity-email{
    display:block;
    font-size:var(--jp-text-xs);
    color:var(--jp-muted-soft);
    margin-top:2px;
}


/* ── Inbox dropdown panel ───────────────────────────────────────────── */
/* Sits below the bell; reuses .jp-nav__panel's open/close animation. */
.jp-nav__inbox-panel{
    min-width:340px;
    max-width:380px;
    right:0;
    left:auto;            /* Override .jp-nav__panel default centre-align */
    transform:translateY(-6px);
    padding:var(--jp-space-3) var(--jp-space-3) var(--jp-space-2);
}
.jp-nav__group.is-open .jp-nav__inbox-panel{
    transform:translateY(0);
}
.jp-nav__inbox-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:var(--jp-space-3);
    padding:var(--jp-space-2) var(--jp-space-3) var(--jp-space-3);
    border-bottom:1px solid var(--jp-line);
    margin-bottom:var(--jp-space-2);
}
.jp-nav__inbox-title{
    font-size:var(--jp-text-base);
    font-weight:900;
    color:var(--jp-ink);
}
.jp-nav__inbox-count{
    font-size:var(--jp-text-xs);
    font-weight:700;
    color:var(--jp-accent-ink);
    background:var(--jp-accent-wash);
    padding:2px var(--jp-space-2);
    border-radius:var(--jp-radius-pill);
}
.jp-nav__inbox-count--zero{
    color:var(--jp-muted);
    background:var(--jp-canvas-3);
}
.jp-nav__inbox-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:2px;
    max-height:340px;
    overflow-y:auto;
}
.jp-nav__inbox-row{margin:0;}
.jp-nav__inbox-link{
    display:flex;
    align-items:flex-start;
    gap:var(--jp-space-3);
    padding:var(--jp-space-3) var(--jp-space-3);
    border-radius:var(--jp-radius-md);
    text-decoration:none;
    color:var(--jp-ink);
    transition:background var(--jp-duration-fast) var(--jp-ease),
               transform var(--jp-duration-fast) var(--jp-ease);
}
.jp-nav__inbox-link:hover,
.jp-nav__inbox-link:focus-visible{
    background:var(--jp-accent-wash);
    transform:translateX(2px);
}
.jp-nav__inbox-dot{
    flex-shrink:0;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--jp-accent);
    margin-top:7px;
    box-shadow:0 0 0 3px var(--jp-accent-wash);
}
.jp-nav__inbox-body{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;          /* Lets long subjects ellipsis instead of pushing */
}
.jp-nav__inbox-subject{
    font-size:var(--jp-text-sm);
    font-weight:700;
    color:var(--jp-ink);
    line-height:var(--jp-leading-snug);
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.jp-nav__inbox-meta{
    font-size:var(--jp-text-xs);
    font-weight:550;
    color:var(--jp-muted);
    line-height:var(--jp-leading-body);
}
.jp-nav__inbox-empty{
    margin:0;
    padding:var(--jp-space-4) var(--jp-space-3);
    text-align:center;
    color:var(--jp-muted);
    font-size:var(--jp-text-sm);
    font-weight:550;
}
.jp-nav__inbox-viewall{
    display:block;
    margin-top:var(--jp-space-2);
    padding:var(--jp-space-3);
    text-align:center;
    text-decoration:none;
    font-size:var(--jp-text-sm);
    font-weight:800;
    color:var(--jp-accent-ink);
    border-top:1px solid var(--jp-line);
    border-radius:0 0 var(--jp-radius-md) var(--jp-radius-md);
    transition:background var(--jp-duration-fast) var(--jp-ease);
}
.jp-nav__inbox-viewall:hover,
.jp-nav__inbox-viewall:focus-visible{
    background:var(--jp-accent-wash);
}


/* ── Reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
    .jp-nav__avatar-trigger,
    .jp-nav__avatar-chip,
    .jp-nav__avatar-link,
    .jp-nav__avatar-logout,
    .jp-nav__inbox,
    .jp-nav__inbox-link,
    .jp-nav__inbox-viewall{transition:none;}
    .jp-nav__avatar-trigger:hover,
    .jp-nav__inbox:hover{transform:none;}
    .jp-nav__inbox-link:hover{transform:none;}
    .jp-nav__inbox-badge{animation:none;}
}