/*
 * Centgenie's mark, served at `/elements/site-logo.css`.
 *
 * The tokens are read with fallbacks rather than declared: inside the shell they come from
 * `site-layout`, and anywhere else (Storybook, a view rendered on its own) the mark still has to
 * draw itself in whatever colour it inherits.
 */

site-logo {
  display: inline-flex;
  min-width: 0;
}

site-logo .site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.25rem;
  margin: -0.25rem;
  border-radius: 0.75rem;
  color: var(--cg-fg, currentColor);
  text-decoration: none;
  transition: opacity var(--cg-duration, 140ms) var(--cg-ease, ease);
}

site-logo .site-logo:hover {
  opacity: 0.75;
}

site-logo .site-logo:focus-visible {
  outline: 2px solid var(--cg-fg, currentColor);
  outline-offset: 1px;
}

site-logo .site-logo-mark {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
}

/* One word with two weights in it, which is all the wordmark is. */
site-logo .site-logo-word {
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

site-logo .site-logo-word span {
  color: var(--cg-muted, currentColor);
}

/*
 * The bar also has to fit whatever switch the screen hoisted into it, up to three buttons and an
 * account menu. The wordmark is the part that can wait: below this the coin alone still says
 * which app this is, and it comes back as soon as the row has room for it.
 */
@media (max-width: 36rem) {
  site-logo .site-logo-word {
    display: none;
  }
}