/* Responsive navbar v3: smaller, sharper mobile header so the logo and the
   pill row sit together instead of one sprawling above the other. Loads last
   on every page that includes _navbar.html (after style.css / vault-2.css). */

/* The navbar is global chrome on its own dark surface — profile themes may
   only recolor the page body, never this bar. Pin the tokens the header, its
   pills and the inbox read so light themes can't make them black-on-black. */
.header {
    --foreground: #f5f0ef;
    --muted-foreground: #7d6f6c;
    --border-blood: rgba(139, 0, 0, .28);
    color: var(--foreground);
}

.header {
    flex-wrap: wrap;
    row-gap: .4rem;
}

@media (max-width: 720px) {
    .header { padding: .55rem .85rem; gap: .35rem; }
    .brand-logo { height: 1.5rem; }
    .header-actions { gap: .26rem; flex-wrap: wrap; }
    .pill-outline, .pill-solid { padding: .28rem .56rem; font-size: .63rem; }
    .inbox-bell { width: 32px; height: 32px; }
    .account-id { font-size: .58rem; letter-spacing: .04em; }
}

@media (max-width: 560px) {
    .brand-logo { height: 1.3rem; }
    .pill-outline, .pill-solid { padding: .26rem .46rem; font-size: .61rem; }
    .header-actions { gap: .22rem; }
    .inbox-bell { width: 30px; height: 30px; }
    .icon-bell { width: 15px; height: 15px; }
    .inbox-dot { min-width: 15px; height: 15px; font-size: .55rem; line-height: 15px; }
    .account-id { display: none; }
}

@media (max-width: 400px) {
    .header { padding: .5rem .7rem; }
    .brand-logo { height: 1.2rem; }
    .pill-outline, .pill-solid { padding: .24rem .4rem; font-size: .58rem; line-height: 1; }
    .header-actions { gap: .18rem; width: 100%; justify-content: flex-start; }
}