/* Business identity only. Workflow icons and semantic status colors stay separate. */
:root { --brand-highlight: var(--primary, #FF5B00); }
.brand-identity { min-width: 0; display: grid; gap: 3px; }
.brand-wordmark-img { display: block; width: 200px; max-width: 100%; height: 50px; object-fit: contain; object-position: left center; }
.brand--logo > .brand-mark { display: none; }
.brand-mark .brand-logo-img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.brand-signature { margin-bottom: 20px; max-width: 100%; }
.brand-signature .brand-wordmark-img { width: 220px; height: 55px; }
.sidebar .brand--logo { gap: 6px; align-items: center; }
.sidebar .brand-identity { flex: 1 1 auto; }
.sidebar .brand-wordmark-img { width: 158px; height: 40px; }
.sidebar .brand-identity > span { font-size: 11px; line-height: 1.35; }
.sidebar .brand-mark { flex: 0 0 36px; }
body.sidebar-collapsed .sidebar .brand--logo > .brand-mark { display: grid; }
body.sidebar-collapsed .sidebar .brand--logo { flex-direction: column; }
body.sidebar-collapsed .sidebar .sidebar-collapse-button { margin-left: 0; }
.nav-item.is-active { box-shadow: inset 3px 0 0 var(--brand-highlight); }
.sidebar .nav-item.is-active { box-shadow: inset 3px 0 0 var(--brand-highlight); }
.brand--logo .brand-identity > small { color: var(--ui-muted); }
.app-header { background: var(--ui-surface); color: var(--ui-ink); border-bottom: 3px solid var(--brand-highlight); }
.app-header .staff-identity { color: var(--ui-muted); }
.app-header .quiet-link, .app-header .quiet-button { color: var(--ui-ink); background: var(--ui-surface); border-color: var(--ui-line); }
.app-header .brand small { color: var(--ui-muted); }
.topbar:has(> .brand) { border-bottom: 3px solid var(--brand-highlight); }
@media (max-width: 980px) {
  .sidebar .brand--logo > .brand-mark { display: grid; }
  .sidebar .brand--logo { flex-direction: column; }
  .sidebar .sidebar-collapse-button { margin-left: 0; }
}
@media (max-width: 600px) {
  .brand-wordmark-img { width: 172px; height: 43px; }
  .brand--logo { min-width: 0; }
  .app-header .brand-identity { max-width: 172px; }
}

/* The phone console moves its sidebar into a bottom bar; keep a compact identity up top. */
.mobile-brand-mark { display: none; }
@media (max-width: 760px) {
  .topbar .mobile-page-heading { display: flex; align-items: center; gap: 8px; }
  .topbar .mobile-brand-mark { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; }
  .mobile-brand-mark .brand-logo-img { display: block; width: 26px; height: 26px; object-fit: contain; background: #fff; }
}