Template:Infobox rank/styles.css

.loka-rank-title-with-icon {
	display: inline-block;
	white-space: nowrap;
	font-size: .84em;
}

.loka-rank-titleicon {
	display: inline;
	margin-left: .35em;
}

/* Sized in em, not a fixed px, so it scales together with the title text
   like a character rather than a separately-sized graphic next to it. */
.loka-rank-titleicon img {
	width: 1.3em;
	height: 1.3em;
	vertical-align: -.25em;
}

/* For a "Current Holders" section's own list -- lives here (not a
   standalone template) since it's only ever used on a rank article
   alongside this infobox, the same reason .loka-rank-titleicon does.
   auto-fill/minmax rather than a fixed column count so it still looks
   right whether a roster has 2 names (Old One) or 16 (Guardian). */
.loka-holders-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: .3em 1em;
	list-style: none;
	/* Only top margin -- the heading above already carries its own
	   margin-top for spacing from whatever precedes it, so this is purely
	   about opening up room between the heading text and the grid itself,
	   which otherwise sit almost flush against each other. */
	margin: 1em 0 0;
	padding: 0;
}

.loka-rank-staff--yes {
	color: #54FC54;
}

.loka-rank-staff--no {
	color: #FC5454;
}

.loka-rank-active--active {
	color: #54FC54;
}

.loka-rank-active--deprecated {
	color: #FC5454;
}

/* Same green/red pairing (and the same reasoning) as Template:Infobox
   website's status badge -- these neon shades read clearly against a dark
   infobox but wash out on a light one, so light mode gets darker,
   equally-distinct equivalents rather than picking new colours. */
@media (prefers-color-scheme: light) {
	.loka-rank-staff--yes,
	.loka-rank-active--active {
		color: #2E7D32;
	}

	.loka-rank-staff--no,
	.loka-rank-active--deprecated {
		color: #C62828;
	}
}