/* Yezbi brand header: wordmark → live app name → app icon, inside one home link (README.md in this folder).
   Needs yezbi-tokens.css. The bottom of the wordmark lettering, the app name's baseline and the bottom of the
   icon line up: flex baseline alignment puts each image's bottom edge on the text baseline, and the wordmark and
   tight (inline/) icon files have no padding below their artwork. Set --yezbi-brand-size to scale the whole lockup. */
.yezbi-brand {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  min-width: 0;
  color: var(--yz-brand-name, #243247);
  font-family: var(--yz-font-brand, 'Trebuchet MS', 'Fira Sans', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif);
  font-size: var(--yezbi-brand-size, 22px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  background: none;
  border-radius: 8px;
}
.yezbi-brand .yezbi-wordmark,
.yezbi-brand .yezbi-app-icon {
  display: block;
  flex: none;
  width: auto;
  height: 1.5em;
  max-width: none;
  border: 0;
  background: none;
}
.yezbi-brand .yezbi-app-name {
  display: block;
  flex: none;
  line-height: 1;
  color: inherit;
}
.yezbi-brand:focus-visible {
  outline: 2px solid var(--yz-focus, #355FCB);
  outline-offset: 4px;
}
/* A brand bar that follows the theme: white in light mode, the approved slate in dark mode, never a white plate
   behind the logo. Apps with their own header surface can skip this class. */
.yezbi-brand-bar {
  background: var(--yz-header-bg, #FFFFFF);
  border-bottom: 1px solid var(--yz-header-border, #CED6DF);
  color: var(--yz-brand-name, #243247);
}
@media (forced-colors: active) {
  .yezbi-brand { color: LinkText; }
}