/* Original Milyssus wordmark with a quiet corporate signature. */
.mly-brand-lockup {
  --mly-brand-width: 180px;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--mly-brand-width);
  max-width: 100%;
  flex-shrink: 0;
  gap: 5px;
  color: #111;
  line-height: 1;
  vertical-align: middle;
}
.mly-brand-name { display: block; min-width: 0; }
.mly-brand-lockup .mly-brand-wordmark,
.ml-login-brand .mly-brand-wordmark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 36 / 5;
  object-fit: contain;
  filter: brightness(0);
  margin: 0;
}
.mly-brand-corp {
  align-self: flex-end;
  margin-right: 4%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .12em;
  color: #6e6e73;
  white-space: nowrap;
}
.brand:has(.mly-brand-lockup), .ml-login-brand:has(.mly-brand-lockup) {
  min-height: 44px;
  align-items: center;
  border-radius: 4px;
}
.brand:has(.mly-brand-lockup):focus-visible,
.ml-login-brand:has(.mly-brand-lockup):focus-visible {
  outline: 2px solid #111;
  outline-offset: 5px;
}
.ml-login-brand .mly-brand-lockup { --mly-brand-width: 188px; gap: 6px; }
.ml-login-brand .mly-brand-corp { font-size: 11px; }
.ml-login-header > span { font-size: 11px; color: #6e6e73; }
.pending-screen > .mly-brand-lockup { --mly-brand-width: 188px; margin-bottom: 32px; }
.pending-screen .mly-brand-wordmark { margin-bottom: 0; }
@media (max-width: 1100px) {
  .app-header .mly-brand-lockup { --mly-brand-width: 160px; }
}
@media (max-width: 760px) {
  .app-header { gap: 8px; }
  .app-header .header-actions { gap: 5px; }
  .app-header .mly-brand-lockup { --mly-brand-width: 146px; gap: 4px; }
  .app-header .mly-brand-corp { font-size: 9px; }
  .header-identity:has(.mly-brand-lockup) { min-width: 0; }
  .ml-login-brand .mly-brand-lockup { --mly-brand-width: 164px; gap: 5px; }
  .ml-login-brand .mly-brand-corp { font-size: 10px; }
  .ml-login-header > span { font-size: 10px; }
}
@media (max-width: 400px) {
  .app-header .mly-brand-lockup { --mly-brand-width: 136px; }
}
@media (max-width: 360px) {
  .app-header { gap: 8px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .app-header .mly-brand-lockup { --mly-brand-width: 120px; }
  .app-header .header-actions { gap: 3px; }
  .ml-login-header { gap: 16px; }
  .ml-login-brand .mly-brand-lockup { --mly-brand-width: 154px; }
}

.header-identity .brand:has(.mly-brand-lockup) { min-width: 0; max-width: 100%; }