/* ════════════════════════════════════════════════════════════════════
   Brand lockup — one component for every surface (navbar, sidebar foot,
   sign-in panel, landing, status pages). Driven by Settings › Branding.
   Sizes set three custom props; layouts flip the flex direction.
   ════════════════════════════════════════════════════════════════════ */
.brand-lockup { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; color: inherit; text-decoration: none; }
a.brand-lockup:hover { color: inherit; }
.brand-stacked { flex-direction: column; text-align: center; gap: .75rem; }
.brand-logo-wrap { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.brand-logo { display: block; width: auto; height: var(--lockup-logo, 34px); object-fit: contain; }
.brand-logo-dark { display: none; }
[data-theme="dark"] .brand-logo-dark { display: block; }
[data-theme="dark"] .brand-logo-wrap:has(.brand-logo-dark) .brand-logo-light { display: none; }
.brand-mark {
    width: var(--lockup-mark, 36px); height: var(--lockup-mark, 36px); border-radius: 27%;
    display: grid; place-items: center; flex: none;
    background: linear-gradient(135deg, var(--brand, var(--nt-accent)), color-mix(in srgb, var(--brand, var(--nt-accent)), #000 22%));
    color: var(--nt-on-accent); font-weight: 800; font-size: calc(var(--lockup-mark, 36px) * .5); letter-spacing: -.02em;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--brand, var(--nt-accent)), transparent 62%);
}
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-name { font-weight: 800; letter-spacing: -.015em; font-size: var(--lockup-name, 1.05rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-tagline { font-size: calc(var(--lockup-name, 1.05rem) * .6); font-weight: 500; opacity: .78; margin-top: .2rem; white-space: normal; }
.brand-stacked .brand-name, .brand-stacked .brand-tagline { white-space: normal; }

.brand-sm { --lockup-logo: 24px; --lockup-mark: 26px; --lockup-name: .86rem; }
.brand-md { --lockup-logo: 34px; --lockup-mark: 36px; --lockup-name: 1.05rem; }
.brand-lg { --lockup-logo: 54px; --lockup-mark: 58px; --lockup-name: 1.55rem; }
.brand-xl { --lockup-logo: 82px; --lockup-mark: 86px; --lockup-name: 2rem; }
.brand-stacked.brand-lg .brand-logo, .brand-stacked.brand-xl .brand-logo { height: auto; max-height: calc(var(--lockup-logo) * 1.4); max-width: min(300px, 72vw); }