/* ── Base ── */

.titlebar {
    background: var(--color-background-secondary);
    border-bottom: solid 1px var(--color-border-secondary);
    box-sizing: content-box;
    height: 3rem;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1001;
}

.titlebar-content {
    align-items: center;
    display: flex;
    height: 3rem;
    justify-content: flex-start;
    margin: 0 auto;
    max-width: 60rem;
    padding: 0 var(--space-lg);
    gap: var(--space-xl);
}

.titlebar-left,
.titlebar-center-left,
.titlebar-center,
.titlebar-center-right,
.titlebar-right {
    align-items: center;
    display: flex;
    gap: var(--space-md);
    margin-bottom: 0;
}

.titlebar-center {
    flex: 1;
}

.titlebar-center-left:not(:has(> *:not([style*="display: none"]))) {
    display: none;
}

.titlebar-content .titlebar-logo {
    display: block;
    flex-shrink: 0;
    height: 2rem;
    opacity: var(--opacity-full);  /* logo always stays full opacity */
    position: relative;
}

.titlebar-content img.svg {
    display: block;
    flex-shrink: 0;
    height: var(--font-size-2xl);
    width: var(--font-size-2xl);
}

.titlebar-content #office-status img.svg {
    height: var(--font-size-xl);
    width: var(--font-size-xl);
}

/* ── Responsive ── */

@media (max-width: 48rem) {

    .titlebar-content {
        margin: 0;
        overflow-x: auto;
        -ms-overflow-style: none;
        gap: var(--space-lg);
    }

    .titlebar-content .titlebar-logo {
        height: 1.75rem;
    }

    .titlebar-content img.svg {
        height: var(--font-size-xl);
        width: var(--font-size-xl);
    }

}