/* Responsive navbar: the header shrinks and wraps instead of overflowing on
   narrow screens. Loaded last on every page that includes _navbar.html so it
   wins over the base header rules in style.css / vault-2.css. */

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

@media (max-width: 720px) {
    .header { padding: .65rem .9rem; row-gap: .45rem; }
    .brand-logo { height: 1.7rem; }
    .header-actions { gap: .35rem; flex-wrap: wrap; }
    .pill-outline, .pill-solid { padding: .42rem .8rem; font-size: .7rem; }
    .account-id { font-size: .62rem; letter-spacing: .05em; }
}

@media (max-width: 460px) {
    .header { flex-direction: column; align-items: stretch; }
    .header-actions { width: 100%; justify-content: flex-start; margin-left: 0; }
    .account-id { display: none; }
}

@media (max-width: 360px) {
    .header-actions { gap: .3rem; }
    .pill-outline, .pill-solid { padding: .4rem .68rem; font-size: .68rem; }
}