.title_bar {
    background-color: var(--grey100);
    height: var(--title-bar-h);
    width: 100%;
    position: fixed;
    top: 0;
    display: flex;
    /* Top padding is the notch inset, so the bar's grey extends up behind the status bar
       while its 48px of content stays below it. See --safe-top in main.css. */
    padding: var(--safe-top) 8px 0;
    box-shadow: 0 3px 6px 0 var(--shadow);
    /* Above everything the pages under it put on screen, and 1100 rather than 1000 because of
       one thing that reached it: a hovered ribbon on a profile takes z-index 1000 to lift itself
       and its tooltip over its neighbours on the rail. At a tie the later element in the
       document wins, and the profile is later than this bar - so scrolling a profile with a
       ribbon under the cursor dragged the ribbon and its label up over the fixed bar. The
       ribbon's 1000 is right for what it is doing; this is the layer that has to sit above it.
       @see profile.css .TeamBanner:hover */
    z-index: 1100;
}
.title_bar .links-container {
    display: flex;
    margin: auto 16;
    width: 100%;
    height: 48px;
    line-height: 48px;
    max-width: 800px;
}
.links-container .link_btn {
    flex-grow: 1;
    text-align: center;
    margin: 0 4px;
}
.link_btn i {
    margin-right: 6px;
}
.link_btn {
    white-space: nowrap;
}


.links-container .selected_btn {
    background-color: var(--green200);
    color: var(--green600);
    position: relative;
    height: 54px;
    padding-top: 6px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 3px 6px 0 var(--shadow);
}

.logo {
    color: var(--grey800);
    margin: auto 0;
    line-height: 14px;
    font-size: 12px;
    font-family: 'Montserrat';
    /* Flex so the mark sits left of the two wordmark lines and centres against them; the
       wordmark's own line-height keeps working because it lives in its own span now. */
    display: flex;
    align-items: center;
    gap: 8px;
}
/* The app icon is a 180px square PNG drawn at 28. width/height on the tag reserve the box so
   the wordmark does not jump left when it loads. @see title_bar.php */
.logo_mark {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    /* The PNG is a full-bleed square - iOS rounds it on the home screen and nothing rounds it
       here, so it reads as a green block against the bar's grey without this. */
    border-radius: 6px;
}
.title-bar-username {
    color: var(--grey800);
    margin: auto 0 auto auto;
    text-align: right;
    pointer-events: none;
    /* The name sits in a reserved 120px slot, right-aligned against the avatar, which is what
       holds it clear of the notification bell. This was `min-width: 120px` - a floor it could
       not go under at any width - and on a 320px screen the logo, the bell and that floor come
       to more than the bar is wide, so the account button was pushed 3px past the right-hand
       edge and the avatar was clipped.

       A width says the same thing without the floor. The name is a flex item of
       .account_btn_wrapper, so 120px is what it takes when there is room and what it gives back
       when there is not: nothing moves above ~360px, where the slot fits, and below that the
       name takes what is left and ellipses. Which a long name needed at any width - nothing
       capped it before, and Auth::validateUsername allows 20 characters. */
    width: 120px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account_btn_wrapper {
    display: flex;
    /* Both of these, so the ellipsis above can actually fire. A flex item's automatic minimum
       size is its min-content width, so without them the button refuses to shrink and the name
       pushes the avatar off the bar instead of being cut. */
    min-width: 0;
}
.account_btn_wrapper > i {
    pointer-events: none;
    padding: 7px 0 7px 14px;
    /* The avatar is the thing all of the above is protecting, so it is the one part of the
       button that never gives ground. Without this it shrinks alongside the name. */
    flex: none;
}
.account_btn {
    pointer-events: auto;
    margin: auto 0 auto auto;
    cursor: pointer;
    color: var(--grey400);
    position: relative;
    /* The other half of the pair described at .account_btn_wrapper: this is the flex item, so
       this is the automatic minimum that has to be released before anything inside it can be
       cut down. */
    min-width: 0;
}
/* Signed out it is an <a> to /join rather than a div opening a menu, so the underline the
   browser puts on a link has to come back off. @see title_bar.php */
a.account_btn {
    text-decoration: none;
}
.account_btn:hover, .account_btn:active, .account_btn:focus {
    color: var(--green400);
    /* background-color: var(--green100); */
}
.account_btn i {
    font-size: 32px;
    margin: auto 0 auto 8px;
}

/* DROPDOWN */
.show {
    display: block;
}

.account_dropdown {
    display: none;
    flex-direction: column;
    
    position: fixed;
    right: 0;
    top: var(--title-bar-h); /* hangs off the bottom of .title_bar, inset included */
    width: 170px;
    padding: 2px 0px;
    /* One above .title_bar, whose value this tracks: the dropdowns are its siblings rather than
       its children, so they are not inside its stacking context and have to clear it themselves. */
    z-index: 1101;
    
    background-color: var(--grey200);
    box-shadow: 0 3px 6px 0 var(--shadow);
    font-size: 14px;
}

.account_dropdown i {
    padding-right: 8px;
}
.account_dropdown div {
    font-size: 14px;
    margin-left: 16px;
    padding-top: 12px;
    /* text-align: center; */
    width: auto;
}
.account_dropdown a, .account_dropdown button {
    padding: 12px 16px;
    color: var(--grey900);
    font-size: 16px;
}
.account_dropdown a:hover, .account_dropdown button:hover, .account_dropdown button:active {
    background-color: var(--grey300);
}
.account_dropdown button {
    background-color: var(--grey200);
    border: none;
    text-align: left;
    border-top: 2px solid var(--grey300);
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    .username {
        max-width: 181px;
        overflow: hidden;
    }
}
@media screen and (max-width: 900px) {
    .links-container {
        display: none !important;
    }
}
@media screen and (min-width: 900.1px) {
    .account_dropdown {
        width: 200px;
    }
}

@media screen and (min-width: 1024px) {

}
/* ───────────────────────── Notification bell ─────────────────────────
   Sits before .account_btn, which is pushed right by `margin: auto 0 auto auto`.
   The bell takes that auto margin instead, and the adjacent-sibling rule zeroes
   the account button's - scoped so that a page without a bell is unaffected. */

.notif_btn {
    position: relative;
    margin: auto 0 auto auto;
    padding: 0 4px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--grey400);
    line-height: 1;
}
.notif_btn + .account_btn {
    margin-left: 0;
}
.notif_btn:hover, .notif_btn:active, .notif_btn:focus {
    color: var(--green400);
}
.notif_btn i {
    font-size: 25px;
}

.notif_badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--red500);
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 16px;
    text-align: center;
    box-sizing: border-box;
}

/* Shares .account_dropdown's positioning and chrome; only the sizing differs. */
.notif_dropdown {
    width: 280px;
    max-width: 92vw;
    padding: 0;
}
.notif_head {
    padding: 10px 14px;
    border-bottom: 2px solid var(--grey300);
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    color: var(--grey700);
}
.notif_list {
    max-height: 60vh;
    overflow-y: auto;
    /* Keeps a flick inside the list from carrying on into the page once the list hits its end -
       the same "the panel does not touch what is under it" rule the dismissing tap follows. */
    overscroll-behavior: contain;
}
.notif_item {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 10px 14px;
    border-bottom: 1px solid var(--grey300);
    color: var(--grey900);
    font-size: 14px;
}
.notif_item:hover {
    background-color: var(--grey300);
}
.notif_unread {
    background-color: var(--green100);
}
.notif_text {
    flex: 1;
}
.notif_when {
    color: var(--grey600);
    font-size: 12px;
    white-space: nowrap;
}
.notif_empty {
    padding: 16px 14px;
    color: var(--grey600);
    font-size: 14px;
}