/* 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). */

.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: .28rem; flex-wrap: wrap; }
    .pill-outline, .pill-solid { padding: .36rem .68rem; font-size: .66rem; }
    .account-id { font-size: .6rem; letter-spacing: .04em; }
}

@media (max-width: 560px) {
    .brand-logo { height: 1.3rem; }
    .pill-outline, .pill-solid { padding: .32rem .58rem; font-size: .64rem; }
    .header-actions { gap: .24rem; }
    .account-id { display: none; }
}

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