/* Shared logo sizing for every page. Change the values here once — it updates
   the logo everywhere it's used (header nav, admin sidebar, admin login).

   logo.svg has a lot of empty transparent space baked into its own 533x533
   square canvas around the actual mark. So the visible "slot" (--logo-box) is
   kept fixed and small — this is what controls the header bar's height and
   never grows. The image itself (--logo-zoom) is rendered much bigger than
   that slot and centered inside it with overflow:hidden, which crops away the
   empty canvas margin instead of inflating the header. Raise --logo-zoom to
   make the visible mark bigger; raise --logo-box only if you want the header
   bar itself taller. width is always auto + aspect-ratio locked to 1/1, so
   the image itself can never stretch/distort. */
:root{
  --logo-box: 64px;           /* header/login logo slot height — controls header bar height */
  --logo-zoom: 180px;         /* actual rendered image height — bigger = bigger visible mark */
  --logo-box-compact: 42px;   /* admin sidebar chip slot height */
  --logo-zoom-compact: 84px;  /* admin sidebar chip rendered image height */
  --logo-box-lg: 84px;        /* large centered logo slot height — e.g. login/empty-state screens */
  --logo-zoom-lg: 240px;      /* large centered logo rendered image height */
}

.logo-mark{
  height: var(--logo-box);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-mark--center{
  justify-content: center;
  margin: 0 auto 18px;
}

.logo-mark-compact{
  height: var(--logo-box-compact);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.logo-mark-lg{
  height: var(--logo-box-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.brand-logo{
  height: var(--logo-zoom);
  width: auto;
  aspect-ratio: 1 / 1;   /* logo.svg is a 533x533 square — locked so it can never stretch */
  flex-shrink: 0;
}

.brand-logo-compact{
  height: var(--logo-zoom-compact);
  width: auto;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.brand-logo-lg{
  height: var(--logo-zoom-lg);
  width: auto;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}