/* SPMT Config Mapper
 * All colours live here so you can re-skin a config by overriding these
 * variables in your theme or per-palette modifier class.
 */

.spmt-config {
	--spmt-axle:   #1d9e75;
	--spmt-ppu:    #ba7517;
	--spmt-drive:  #185fa5;
	--spmt-steer:  #993556;
	--spmt-glyph:  #ffffff;
	--spmt-text:   #3d3d3a;
	--spmt-muted:  #73726c;

	margin: 1.5rem 0;
	display: inline-block;
	max-width: 100%;
}

.spmt-config__title {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--spmt-text);
	margin: 0 0 0.5rem;
}

.spmt-config__svg {
	display: block;
}

/* Element fills — these are SVG <rect> elements, styled via fill. */
.spmt-cell        { stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.5; }
.spmt-cell.spmt-axle  { fill: var(--spmt-axle); }
.spmt-cell.spmt-ppu   { fill: var(--spmt-ppu); }
.spmt-cell.spmt-drive { fill: var(--spmt-drive); }
.spmt-cell.spmt-steer { fill: var(--spmt-steer); }

.spmt-glyph {
	fill: var(--spmt-glyph);
	font-family: inherit;
	font-weight: 500;
	pointer-events: none;
}

/* Legend */
.spmt-config__legend {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0.6rem 0 0;
	padding: 0;
	font-size: 0.8rem;
	color: var(--spmt-muted);
}
.spmt-config__legend li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}
.spmt-swatch {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 3px;
	flex: none;
}
.spmt-swatch.spmt-axle  { background: var(--spmt-axle); }
.spmt-swatch.spmt-ppu   { background: var(--spmt-ppu); }
.spmt-swatch.spmt-drive { background: var(--spmt-drive); }
.spmt-swatch.spmt-steer { background: var(--spmt-steer); }

/* Palettes — swap the axle colour family. */
.spmt-config--blue  { --spmt-axle: #185fa5; --spmt-drive: #0c447c; }
.spmt-config--amber { --spmt-axle: #ba7517; --spmt-ppu: #993c1d; }
.spmt-config--slate { --spmt-axle: #5f5e5a; --spmt-ppu: #993c1d; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
	.spmt-config {
		--spmt-text:  #e9e7df;
		--spmt-muted: #a8a69d;
	}
	.spmt-cell { stroke: rgba(255, 255, 255, 0.22); }
}

/* Spread setup sheet */
.spmt-sheet {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: var(--spmt-text);
	line-height: 1.5;
}
.spmt-sheet p { margin: 0.15rem 0; }

/* Compact stage: drawing beside the valve/sensor panel (matches the builder).
   The drawing keeps its natural width; the panel takes the rest and flows its
   cards into as many columns as fit, wrapping below once the build is too wide
   to share a line. */
.spmt-stage { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.spmt-stage .spmt-canvas { flex: 0 1 auto; overflow-x: auto; }
.spmt-stage .spmt-canvas svg { display: block; }
.spmt-vs-summary {
	flex: 1 1 280px; min-width: 0; font-size: 13px; color: var(--spmt-text);
	display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px; align-content: start;
}
.spmt-vs-summary:empty { display: none; }
.spmt-vs-sum-title { grid-column: 1 / -1; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--spmt-muted); margin-bottom: 2px; }
.spmt-vs-sum-ppu { border: 1px solid rgba(0, 0, 0, .12); border-radius: 6px; padding: 8px 10px; margin-bottom: 0; }
.spmt-vs-sum-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.spmt-vs-sum-id { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.spmt-vs-sum-line { font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.5; }
.spmt-vs-sum-auto { color: #a02b2b; font-weight: 600; margin-top: 2px; }
.spmt-ppu { cursor: pointer; }
/* On phones the drawing takes its own row and the panel spans the full width
   with larger, easier-to-read text. */
@media (max-width: 782px) {
	.spmt-stage .spmt-canvas { flex: 1 1 100%; }
	.spmt-vs-summary { flex: 1 1 100%; font-size: 15px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
	.spmt-vs-sum-title { font-size: 13px; }
	.spmt-vs-sum-id { font-size: 16px; }
}


/* Read-only PPU settings popup */
.spmt-pop-data { display: none; }
.spmt-pop-overlay {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center; padding: 16px;
	background: rgba(0, 0, 0, .45);
}
.spmt-pop-modal {
	position: relative; width: 100%; max-width: 340px;
	background: #fff; color: #222; border-radius: 10px; padding: 18px 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
	font-size: 14px; line-height: 1.5;
}
.spmt-pop-close {
	position: absolute; top: 6px; right: 10px;
	border: 0; background: none; padding: 0;
	font-size: 22px; line-height: 1; cursor: pointer; color: #888;
}
.spmt-pop-close:hover { color: #333; }
.spmt-pop-title { font-weight: 700; font-size: 15px; margin: 0 0 8px; padding-right: 20px; }
.spmt-pop-geo { margin: 0 0 4px; color: #555; }
.spmt-pop-vs { margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.spmt-pop-auto { color: #a02b2b; font-weight: 600; margin: 8px 0 0; }