/**
 * Intentionally tiny. The tiles reuse the site's existing .seal rule so the picker
 * looks exactly as it always has; this file only covers what that rule never did.
 */
/*
 * The tiles are a fixed 85px wide (75px image + 5px padding each side), so laying them
 * out as inline-block leaves whatever does not divide evenly stranded at the right edge
 * — 83px on a 508px panel. Grid columns of 1fr share that remainder out across the row
 * instead. auto-fill with an 85px minimum keeps the same column count that fits today,
 * so only the spacing changes, not the number of seals per row.
 *
 * Scoped to .bsm-seal-grid: the site-wide .seal rule is shared with the legacy picker
 * and the Reisterstown popups, which are deliberately left alone.
 */
.bsm-seal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
	justify-items: center;
	align-items: start;
}

.bsm-seal-tile {
	cursor: pointer;
}

.bsm-seal-tile:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Placeholder box so a seal awaiting artwork still lines up with its neighbours. */
.bsm-seal-noimage {
	display: inline-block;
	width: 75px;
	height: 75px;
	border: 1px dashed #c3c4c7;
	background: #f6f7f7;
}