Template:Policy/styles.css

.loka-policy-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: .8em;
	margin: 1em 0;
}

.loka-policy-card {
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 6px;
	padding: .7em .9em;
}

@media (prefers-color-scheme: light) {
	.loka-policy-card {
		background: rgba(0, 0, 0, .02);
		border-color: rgba(0, 0, 0, .1);
	}
}

.loka-policy-name {
	font-weight: 700;
	font-size: 1.02em;
	margin-bottom: .5em;
	padding-bottom: .35em;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

@media (prefers-color-scheme: light) {
	.loka-policy-name {
		border-bottom-color: rgba(0, 0, 0, .1);
	}
}

.loka-policy-stance {
	display: flex;
	gap: .5em;
	align-items: baseline;
	font-size: .88em;
	line-height: 1.4;
}

.loka-policy-stance + .loka-policy-stance {
	margin-top: .5em;
}

/* Fixed instead of auto so the description column lines up at the same
   x-position on every row -- both between a card's own stances (Neutral
   is shorter than Oppressive) and across every card in the grid, since
   auto-width let each row's label hug its own text instead. Sized to
   fit "OPPRESSIVE", the longest label, at its own .78em/.03em-tracked
   font size. */
.loka-policy-stance-label {
	flex: 0 0 4.8em;
	font-weight: 700;
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
}

/* Same green/amber/red convention already used across the wiki for a
   tri-state — green for the everyone-benefits option, amber matching
   the infobox type-ribbon's "default/standard" gold, red for the
   exclusionary one. Light-mode swaps to the same darker equivalents
   Infobox rank/website already use, for the same "washes out on a
   light background" reason. */
.loka-policy-stance--benevolent .loka-policy-stance-label { color: #54FC54; }
.loka-policy-stance--neutral .loka-policy-stance-label { color: #f0cf8e; }
.loka-policy-stance--oppressive .loka-policy-stance-label { color: #FC5454; }

@media (prefers-color-scheme: light) {
	.loka-policy-stance--benevolent .loka-policy-stance-label { color: #2E7D32; }
	.loka-policy-stance--neutral .loka-policy-stance-label { color: #9c6b2e; }
	.loka-policy-stance--oppressive .loka-policy-stance-label { color: #C62828; }
}

.loka-policy-stance-text {
	opacity: .92;
}

/* A single always-on perk (e.g. World Capital's Eminent Domain) isn't a
   stance choice, so it doesn't fit the card grid above — a small
   highlighted callout instead, in the same amber used for "neutral"
   above, since it reads as the same kind of "standard, no alliance
   politics involved" info. */
.loka-policy-perk {
	background: rgba(240, 207, 142, .08);
	border: 1px solid rgba(240, 207, 142, .3);
	border-radius: 6px;
	padding: .8em 1em;
	margin: 1em 0;
}

.loka-policy-perk-name {
	font-weight: 700;
	color: #f0cf8e;
	margin-bottom: .3em;
}

@media (prefers-color-scheme: light) {
	.loka-policy-perk {
		background: rgba(156, 107, 46, .06);
		border-color: rgba(156, 107, 46, .3);
	}

	.loka-policy-perk-name {
		color: #9c6b2e;
	}
}