/* The bar's height is published as a variable because #msgbar hangs directly
   off the bottom of it. It used to be pinned with a hardcoded margin-top that
   had to be kept in sync with this height by hand — and wasn't: landing.css
   re-declares the bar at 76px, so the message bar floated 20px below it with a
   strip of page showing through the gap. Anything that changes the height must
   change this variable, not just the declaration. */
:root {
    --navbar-h: 100px;
}

#navbar {
    background-color: var(--c-black);
    display: flex;
    height: var(--navbar-h);
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--z-sticky);
}
.logoContainer {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Brand accent, not --success. The sign-in icon and the Logout link below are
   ordinary nav chrome; nothing about them reports an outcome. landing.css
   already repaints both to --lp-primary, so the miscast token only ever showed
   on the pages that load navbar.css WITHOUT it (credits, the KYC frame). */
.poboLogin {
    fill: var(--color-brand);
    height: 20px;
    width: 20px;
    position: absolute;
    right: 30px;
}
.poboLogo {
    display: block;
    width: auto;
    height: 35px;
    fill: var(--color-brand);
}
.poboLogin:hover,.poboLogo:hover{
    cursor:pointer
  }
.userLogout{
    position: absolute;
    color: var(--color-brand);
    right: 50px;
}
.p_hide {
    display: none;
}
.p_show {
    display: block;
}
/* Sign-in feedback ("User not found", "…being redirected"). It is a TOAST, so
   it has to clear the login modal and its scrim: at --z-sticky it shared a layer
   with the navbar and was painted UNDER the .overlay (--z-overlay) and the modal
   (--z-modal), which is why the message read as a dimmed maroon strip behind the
   dialog it was reporting on. */
#msgbar {
    display: none;
    height: 50px;
    padding: 0 var(--space-8);
    align-items: center;
    position: fixed;
    /* Flush under the navbar. Was top:0 + a 96px margin against a 76px bar. */
    top: var(--navbar-h);
    width: 100vw;
    z-index: var(--z-toast);
    justify-content: center;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--c-white);
    text-align: center;
}
/* The colour used to be assigned in JS, by reading the token off :root with
   getComputedStyle and writing an inline background-color. That put the choice
   of colour outside the stylesheets entirely — nothing could lint it, and it
   silently picked up whatever :root happened to win the cascade. It is a class
   now; CSS resolves the token. */
.msgbar--success { background-color: var(--success); }
.msgbar--error   { background-color: var(--danger); }

@media only screen and (max-width: 600px) {
    #navbar {
        width:100vw;
    }
}