/* ---- the top bar, shared ------------------------------------------------
   Global rather than page-scoped, and loaded by the public join page as well as
   the console. These rules used to live in Home.razor.css, where Blazor's CSS
   isolation rewrote them to .topline[b-xxxxx] — so they matched Home and nothing
   else. The Admins and Backups headers had been rendering unstyled, which went
   unnoticed while the logo was a small square and became obvious the moment it
   was replaced with a wordmark nearly 2000px wide.

   The join page had its own hand-written copy of the same bar, which is why it
   never quite matched. One file now, so they cannot drift apart again. */

.console-shell {
    display: flex;
    flex-direction: column;
    /* body has 1.5rem padding all round */
    height: calc(100vh - 3rem);
}

.topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

.topline h1 { margin: 0; font-size: 1.5rem; letter-spacing: .02em; }

.topline h1.brand {
    display: flex;
    /* Centre, not baseline: the tagline belongs on the logo's middle line, and a wordmark has no
       text baseline of its own for the browser to line it up against. */
    align-items: center;
    gap: .6rem;
    font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* The logo is the way between the console and the join page, so it is a link on
   both. line-height:0 keeps the anchor from adding descender space under it. */
.brand-home {
    display: block;
    line-height: 0;
    border: 0;
}

.brand-home:hover { filter: brightness(1.15); }

/* A wide wordmark, not a square mark: fixing both dimensions squashed it. Height is set and
   width follows the image, so replacing the file with a different proportion needs no CSS change. */
.brand-logo {
    height: 1.5em;
    width: auto;
    display: block;
    flex: 0 0 auto;
}

/* Reset out of the headline's shouting, since this is a sentence rather than a label. */
.brand-tag {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--muted);
    white-space: nowrap;
}

.topbar { display: flex; justify-content: flex-end; align-items: center; gap: .6rem; color: var(--muted); }

/* First thing to go when there is no room: it is a sentiment, not a control. */
@media (max-width: 52rem) {
    .brand-tag { display: none; }
}