/* Piece Customizer: third tab of the move-history panel. Reuses the board
   customizer's .bc-group/.bc-row/.bc-legend/.bc-actions controls; adds the
   scrolling pane + the live pawn preview stage. */

/* No top padding so the sticky preview pins flush to the pane's top edge
   (top:0 sticks to the padding edge; padding-top would leave a sliver). */
.pc-pane { overflow-y: auto; padding: 0 var(--space-2) var(--space-2); gap: var(--space-2); }

/* Preview: white piece on a dark square, black piece on a light square.
   Pinned to the top of the scrolling pane so it stays visible while you scroll
   the controls. Opaque background + negative margins cover the pane padding so
   controls scroll cleanly underneath. */
.pc-preview {
	position: sticky; top: 0; z-index: 3;
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
	background: var(--menu-option-bg);   /* opaque — hides controls scrolling under */
	margin: 0 calc(var(--space-2) * -1);   /* span full width under pane padding */
	padding: var(--space-2);
	border-bottom: 1px solid var(--menu-border);
	box-shadow: 0 4px 8px rgba(0, 0, 0, .25);
}
.pc-stage {
	border-radius: var(--radius-panel);
	aspect-ratio: 1 / 1;
	display: flex; align-items: center; justify-content: center;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.pc-stage-light { background: var(--light-square, #f0d9b5); }
.pc-stage-dark { background: var(--dark-square, #b58863); }
.pc-piece { width: 78%; height: 78%; }
.pc-piece svg { width: 100%; height: 100%; display: block; }

.pc-hint { color: var(--menu-text); opacity: .45; font-weight: 400; font-size: 10px; }

/* Reuse the board pane control styling on this pane too. */
.pc-pane .bc-group {
	border: 1px solid var(--menu-border);
	border-radius: var(--radius-panel);
	padding: 6px 8px 8px;
	margin-bottom: var(--space-2);
}