/* Shared application identity: logo, product name and tagline across every shell. */
.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none !important;
}
.app-brand:hover,
.app-brand:focus { text-decoration: none !important; }
.app-brand-logo {
    width: 38px;
    height: 42px;
    flex: 0 0 auto;
    object-fit: contain;
}
.app-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    line-height: 1.05;
}
.app-brand-name {
    overflow: hidden;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-brand-tagline {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.app-brand--light .app-brand-name { color: #163b65; }
.app-brand--light .app-brand-tagline { color: #a94300; }
.app-brand--dark .app-brand-name { color: #fff; }
.app-brand--dark .app-brand-tagline { color: #ffd166; }
.app-brand.app-brand--logo-only .app-brand-logo {
    width: auto;
    height: 52px;
    max-width: min(260px, 62vw);
}

.app-brand--public .app-brand-logo { width: 36px; height: 40px; }
.app-brand--sidebar { width: 100%; }
.app-brand--exam .app-brand-logo { width: 34px; height: 40px; }
.app-brand--topbar .app-brand-logo { width: 30px; height: 36px; }
.app-brand--topbar .app-brand-name { font-size: 25px; }
.app-brand--topbar .app-brand-tagline { font-size: 7px; }
/* Admin/teacher left nav.
   The copy column there is only 176px wide (260 sidebar − 36 padding − 38 logo
   − 10 gap). At the shared 28px, "Online Exams" measures 175px — one pixel of
   slack — so the name ellipsised as soon as the webfont loaded or the page was
   zoomed, and the tagline overflowed by 17px at 9px outright. Scoped to
   .ia-sidebar-brand so the topbar, public, exam, legacy and student-sidebar
   shells keep the shared sizes. */
.ia-sidebar-brand .app-brand-name { font-size: 22px; }
.ia-sidebar-brand .app-brand-tagline { font-size: 8px; letter-spacing: .055em; }

.app-brand--legacy { height: 50px; padding: 4px 12px !important; }
.app-brand--legacy .app-brand-logo { width: 32px; height: 38px; }
.app-brand--legacy .app-brand-name { font-size: 25px; }
.app-brand--legacy .app-brand-tagline { font-size: 7px; }
.app-brand.app-brand--logo-only.app-brand--public .app-brand-logo { height: 58px; }
.app-brand.app-brand--logo-only.app-brand--sidebar .app-brand-logo { height: 54px; }
.app-brand.app-brand--logo-only.app-brand--exam .app-brand-logo { height: 50px; }
.app-brand.app-brand--logo-only.app-brand--topbar .app-brand-logo { height: 44px; }
.app-brand.app-brand--logo-only.app-brand--legacy .app-brand-logo { height: 42px; }

body.ia-sidebar-collapsed .ia-sidebar-brand .app-brand-copy { display: none; }
body.ia-sidebar-collapsed .ia-sidebar-brand { justify-content: center; padding-right: 8px; padding-left: 8px; }

@media (max-width: 575px) {
    .app-brand { gap: 7px; }
    .app-brand-logo { width: 32px; height: 38px; }
    .app-brand-name { font-size: 25px; }
    .app-brand--topbar .app-brand-name,
    .app-brand--legacy .app-brand-name { font-size: 25px; }
    .app-brand-tagline { font-size: 7px; letter-spacing: .045em; }
    .app-brand.app-brand--logo-only .app-brand-logo {
        height: 48px;
        max-width: min(220px, 64vw);
    }
    .app-brand.app-brand--logo-only.app-brand--topbar .app-brand-logo,
    .app-brand.app-brand--logo-only.app-brand--legacy .app-brand-logo { height: 40px; }
}