/* Approved YJ geometry; selected blue symbol / ink lettering palette. */
:root { --brand-facet: #67A7F4; --brand-mark: #2463EB; --brand-word: #19365B; }
:root[data-theme="dark"] { --brand-facet: #B1D1FF; --brand-mark: #91BAFF; --brand-word: #EDF2FA; }
:root[data-theme="eye"] { --brand-facet: #80B7A5; --brand-mark: #176B61; --brand-word: #203D37; }
.brand{gap:0}
.brand-image{display:block;width:142px;height:48px;max-width:100%;object-fit:contain;flex-shrink:0}
.sidebar .brand{min-height:48px}
.brand-signature{display:block;width:352px;max-width:100%}
.brand-image-signature{width:352px;height:auto;aspect-ratio:704/328}
.breadcrumb-scope{display:inline-flex;align-items:center;gap:6px}
.breadcrumb-brand-mark{display:none;flex-shrink:0;width:20px;height:20px;object-fit:contain}
@media(max-width:74.99em){.breadcrumb>.breadcrumb-scope:first-of-type{display:inline-flex}.breadcrumb-brand-mark{display:block}}
@media(max-width:59.99em){.brand-signature,.brand-image-signature{width:142px}.brand-image-signature{height:48px;aspect-ratio:568/192}}

/* On small phones the current page takes priority; the workspace stays below the header. */
.breadcrumb { flex: 1; }
@media (max-width: 32em) {
  .breadcrumb > .breadcrumb-scope:first-of-type { display: none; }
  .breadcrumb strong { white-space: normal; overflow-wrap: anywhere; }
}

/* The login signature uses the same outlines and switches to the compact logo on small screens. */
.brand-signature .brand-image-compact { display: none; }
@media (max-width: 59.99em) {
  .brand-signature .brand-image-signature { display: none; }
  .brand-signature .brand-image-compact { display: block; }
}