/* Full-body portraits (js/bodies.js) and the #/bodies prototype gallery. */
.body-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.bodies-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.bodies-controls .picker { min-width: 220px; }
.bodies-gallery { display: flex; flex-direction: column; gap: 14px; }
.bodies-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; align-items: end; }
.bodies-meta { align-self: center; font-size: 14px; }
.bodies-cell { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border, #ccc4); }
.bodies-cell.auto { outline: 2px solid var(--accent, #e07a2c); outline-offset: 1px; }
.bodies-cell figcaption { font-size: 11px; text-align: center; padding: 2px 0 4px; opacity: .75; }
.bodies-light .bodies-cell { background: #f3f1ec; color: #222; }
.bodies-dark .bodies-cell { background: #14171c; color: #ddd; }
@media (max-width: 760px) {
	.bodies-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bodies-meta { grid-column: 1 / -1; }
}
.body-silhouette .bd-fig *, .body-silhouette .bd-ball * { fill: #000 !important; stroke: #000 !important; stroke-opacity: 1 !important; fill-opacity: 1 !important; }
.bodies-sil .bodies-cell { background: #fff; }