/* Board Customizer: lives inside the move-history side panel as a second tab.
   Inherits the panel's menu-surface theme; these rules add the tab bar + the
   compact control rows for the Board pane. */

/* Tab bar replaces the old single "Moves" header label. */
.mh-tabs { display: flex; gap: 4px; }
.mh-tab {
	border: none;
	background: none;
	color: var(--menu-text);
	opacity: .55;
	font: inherit;
	font-weight: bold;
	padding: 2px 6px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.mh-tab.is-active { opacity: 1; border-bottom-color: var(--highlight-color); }

/* Panes fill the panel; hidden one is fully removed from flow. */
.mh-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mh-pane[hidden] { display: none; }

/* Board pane: scrolls as one column of control groups. */
.bc-pane { overflow-y: auto; padding: var(--space-2); gap: var(--space-2); }
.bc-pane .bc-group {
	border: 1px solid var(--menu-border);
	border-radius: var(--radius-panel);
	padding: 6px 8px 8px;
	margin-bottom: var(--space-2);
}
.bc-legend {
	color: var(--highlight-color);
	font-weight: 600;
	font-size: 12px;
	display: flex; align-items: center; gap: 6px;
	margin-bottom: 2px;
}
.bc-legend input { accent-color: var(--highlight-color); }

.bc-row { display: grid; grid-template-columns: 52px 1fr; gap: 6px; align-items: center; margin: 5px 0; }
.bc-row label { color: var(--menu-text); opacity: .7; font-size: 11px; }
.bc-row input[type=range] { width: 100%; accent-color: var(--highlight-color); }
.bc-row input[type=color] { width: 100%; height: 22px; border: none; background: none; padding: 0; cursor: pointer; }
.bc-row select { background: var(--menu-surface-2); color: var(--menu-text); border: 1px solid var(--menu-border); border-radius: 4px; padding: 3px; }
.bc-row .bc-val { display: none; }   /* compact: ranges speak for themselves */

/* Inline color swatches (replace the native color popup). */
.bc-row-col { align-items: start; }
.bc-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.bc-swatch {
	width: 20px; height: 20px;
	border-radius: 4px;
	border: 2px solid transparent;
	padding: 0; cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.bc-swatch.is-active { border-color: var(--menu-text); }

/* Touch devices: 20px swatches are too small to hit reliably. */
@media (pointer: coarse) {
	.bc-swatch { width: 28px; height: 28px; }
}

/* "+" custom-color trigger: shows current off-palette color via --cust. */
.bc-swatch-custom {
	background: var(--cust, var(--menu-surface-2));
	color: var(--menu-text);
	font: 700 14px/1 sans-serif;
	display: flex; align-items: center; justify-content: center;
}

/* Custom HSV picker popover — themed to the menu surface. */
.bc-cp {
	position: fixed; z-index: 9999;
	width: 184px;
	background: var(--menu-surface-2);
	border: 1px solid var(--menu-border);
	border-radius: var(--radius-panel);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
	padding: 10px;
	display: flex; flex-direction: column; gap: 8px;
}
.bc-cp[hidden] { display: none; }
.bc-cp-sv { position: relative; width: 160px; height: 160px; border-radius: 6px; overflow: hidden; cursor: crosshair; }
.bc-cp-sv canvas { display: block; width: 160px; height: 160px; }
.bc-cp-dot {
	position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
	border: 2px solid #fff; border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); pointer-events: none;
}
.bc-cp-hue {
	width: 100%; height: 14px; -webkit-appearance: none; appearance: none;
	border-radius: 7px; outline: none;
	background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.bc-cp-hue::-webkit-slider-thumb {
	-webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
	background: #fff; border: 2px solid rgba(0, 0, 0, .5); cursor: pointer;
}
.bc-cp-hue::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid rgba(0, 0, 0, .5); cursor: pointer; }
.bc-cp-foot { display: flex; align-items: center; gap: 6px; }
.bc-cp-prev { width: 24px; height: 24px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); flex: 0 0 auto; }
.bc-cp-hex {
	flex: 1 1 auto; min-width: 0;
	background: var(--menu-surface); color: var(--menu-text);
	border: 1px solid var(--menu-border); border-radius: 4px;
	padding: 4px 6px; font: 12px monospace; text-transform: lowercase;
}

.bc-actions { display: flex; gap: 6px; margin-top: 2px; }
.bc-actions button {
	flex: 1 1 0;
	height: var(--control-height);
	border: none;
	border-radius: var(--radius-panel);
	cursor: pointer;
	font-weight: 600;
	font-size: 12px;
}
#bc-save { background: var(--btn-cream-bg); color: var(--btn-cream-text); }
#bc-save:hover { background: var(--btn-cream-hover); color: var(--btn-cream-text); }
#bc-random,
#bc-reset { background: var(--menu-surface-2); color: var(--menu-text); }
.bc-status { min-height: 14px; font-size: 11px; color: var(--highlight-color); text-align: center; margin-top: 4px; }