/*
 * The coupled carriages (includes/pieces/couple.php): two wagons in one-point perspective from above
 * right, so every front face stays square and the loads compare by height. Each load is a box of lit
 * faces sized by --fw (spouse's full benefit), --fh (half: the arm), --fo (your own), --ft (top-up),
 * --fg (what waiting adds), shares of the tallest stack; --swing turns the arm, --link drops the link.
 */

.cp {
	--hmax: 27; --base: 10.6; --swing: 0; --link: 0;
	--w-front: linear-gradient(180deg, #2c3036 0%, #1d2024 100%); --w-top: #50565f; --w-side: #111316;
	--o-front: linear-gradient(180deg, #fbf6ea 0%, #ece3cf 100%); --o-top: #fffdf6; --o-side: #cfc4ab;
	--t-front: linear-gradient(180deg, #f39a4f 0%, #e57a26 100%); --t-top: #f9bf8c; --t-side: #b85a10;
	--deck-front: linear-gradient(180deg, #474c54 0%, #2a2d32 100%); --deck-top: repeating-linear-gradient(90deg, #8f7f69 0 1.25cqw, #7a6b57 1.25cqw 1.4cqw); --deck-side: #1c1f23;
	--ground: #ddd7ca; --sleeper: #8f8170; --rail: #9aa1aa; --stage: linear-gradient(180deg, #f3efe6 0%, #ebe6db 62%, #e1dbcd 100%);
	--ghost: #c4600c;
}
@media (prefers-color-scheme: dark) {
	.cp {
		--w-front: linear-gradient(180deg, #59606a 0%, #434951 100%); --w-top: #79808b; --w-side: #2d3137;
		--ground: #2b2e33; --sleeper: #45413a; --rail: #8e949d; --stage: linear-gradient(180deg, #1d2024 0%, #202328 62%, #26292e 100%);
		--ghost: #f39a4f;
	}
}

.cp__plates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; }
.cp-plate { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 11px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--stone-2), 0 1px 0 rgba(0, 0, 0, .06); }
.cp-plate--y { box-shadow: inset 0 0 0 2px var(--line), 0 1px 0 rgba(0, 0, 0, .06); }
.cp-plate__k { font: 700 .95rem/1.15 var(--board-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cp-plate__v { font: 700 1.7rem/1.1 var(--board-font); letter-spacing: .01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-plate__v small { font-size: .95rem; letter-spacing: .04em; color: var(--ink-2); }
.cp-plate__s { font-size: .95rem; line-height: 1.35; color: var(--ink-2); }

.cp__stage { container-type: inline-size; position: relative; overflow: hidden; border-radius: 10px; background: var(--stage); box-shadow: inset 0 0 0 1px var(--stone-2); }
.cp__world { position: relative; height: calc((var(--base) + var(--hmax) + 8) * 1cqw); perspective: 165cqw; perspective-origin: 114% -50%; transform-style: preserve-3d; }

.cp-box { position: absolute; left: calc(var(--x) * 1cqw); bottom: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); height: calc(var(--h) * 1cqw); transform-style: preserve-3d; }
.cp-box > .f { position: absolute; display: block; }
.cp-box > .f--front { inset: 0; transform: translateZ(calc(var(--d) * .5cqw)); background: var(--cf); }
.cp-box > .f--top { left: 0; top: 0; width: 100%; height: calc(var(--d) * 1cqw); transform-origin: 50% 0; transform: translateZ(calc(var(--d) * .5cqw)) rotateX(-90deg); background: var(--ct); }
.cp-box > .f--side { left: 100%; top: 0; width: calc(var(--d) * 1cqw); height: 100%; transform-origin: 0 50%; transform: translateZ(calc(var(--d) * .5cqw)) rotateY(90deg); background: var(--cs); }

/* The ground: ballast, sleepers and two rails, lying flat under the wheels. */
.cp-ground { position: absolute; left: -12cqw; width: 124cqw; bottom: 5cqw; height: 26cqw; transform-origin: 50% 100%; transform: translateZ(13cqw) rotateX(90deg); transform-style: preserve-3d;
	background: repeating-linear-gradient(90deg, transparent 0 2.2cqw, var(--sleeper) 2.2cqw 3.6cqw) 0 5.4cqw / 100% 15.2cqw no-repeat, radial-gradient(closest-side, rgba(0, 0, 0, .22), transparent) 10cqw 50% / 52cqw 18cqw no-repeat, radial-gradient(closest-side, rgba(0, 0, 0, .22), transparent) 58cqw 50% / 52cqw 18cqw no-repeat, var(--ground); }
.cp-rail { position: absolute; left: 0; right: 0; height: .7cqw; background: linear-gradient(180deg, #d9dde2, var(--rail) 60%, #5d636b); }
.cp-rail--back { top: 6.8cqw; }
.cp-rail--front { top: 18.5cqw; }

/* The wagons: bogies, wheels, deck, buffers. */
.cp-wagon { position: absolute; inset: 0; transform-style: preserve-3d; --wx: 3; }
.cp-wagon--y { --wx: 51; }
.cp-bogie { --w: 10; --h: 1.9; --d: 11; --y: 6.4; --cf: linear-gradient(180deg, #33373d, #1d2024); --ct: #43474e; --cs: #15171a; }
.cp-bogie--a { --x: calc(var(--wx) + 4); }
.cp-bogie--b { --x: calc(var(--wx) + 32); }
.cp-wheels { position: absolute; bottom: 5cqw; width: 10cqw; height: 3.6cqw; display: flex; justify-content: space-between; transform: translateZ(5.9cqw); }
.cp-wheels--a { left: calc((var(--wx) + 4) * 1cqw); }
.cp-wheels--b { left: calc((var(--wx) + 32) * 1cqw); }
.cp-wheel { display: block; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: radial-gradient(circle, #2b2f35 0 22%, #9aa1aa 23% 29%, #3d4249 30% 62%, #c4c9cf 63% 70%, #50565e 71%); box-shadow: 0 .2cqw .3cqw rgba(0, 0, 0, .35); }
.cp-deck { --x: var(--wx); --w: 46; --h: 2.4; --d: 16; --y: 8.2; --cf: var(--deck-front); --ct: var(--deck-top); --cs: var(--deck-side); }
.cp-deck > .f--top { box-shadow: inset 0 0 0 .2cqw rgba(0, 0, 0, .18); }
.cp-deck > .f--front { background: radial-gradient(circle, #8a9099 0 .18cqw, transparent .22cqw) 0 50% / 2.3cqw 100% repeat-x, var(--deck-front); }
.cp-buffer { position: absolute; bottom: 8.7cqw; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e3e6ea, #7d838c 60%, #3b4047); transform: translateZ(8.3cqw); }
.cp-buffer--l { left: calc((var(--wx) - .9) * 1cqw); }
.cp-buffer--r { left: calc((var(--wx) + 45.5) * 1cqw); }

/* The coupling: a hook on each wagon end and the link between them. */
.cp-coupler { position: absolute; inset: 0; transform-style: preserve-3d; }
.cp-hook { --x: 48.2; --y: 8.9; --w: 3.6; --h: 1; --d: 1; --cf: #2a2d32; --ct: #565c64; --cs: #15171a; }
.cp-link { position: absolute; left: 48.4cqw; bottom: 9.25cqw; width: 3.4cqw; height: .5cqw; transform-origin: 0 50%; transform: rotateZ(calc(var(--link) * -1deg)); transform-style: preserve-3d; }
.cp-link__bar { --x: 0; --y: 0; --w: 3.4; --h: .5; --d: .5; --cf: #6f757d; --ct: #b7bcc3; --cs: #3d4249; }

/* The loads. */
.cp-load { --w: 30; --d: 10; }
.cp-load--w { --x: calc(3 + 8); --y: var(--base); --h: calc(var(--fw) * var(--hmax)); --cf: var(--w-front); --ct: var(--w-top); --cs: var(--w-side); }
.cp-load--o { --x: calc(51 + 8); --y: var(--base); --h: calc(var(--fo) * var(--hmax)); --cf: var(--o-front); --ct: var(--o-top); --cs: var(--o-side); opacity: clamp(0, calc(var(--fo) * 500), 1); }
.cp-load--t { --x: calc(51 + 8); --y: calc(var(--base) + var(--fo) * var(--hmax)); --h: calc(var(--ft) * var(--hmax)); --cf: var(--t-front); --ct: var(--t-top); --cs: var(--t-side); opacity: clamp(0, calc(var(--ft) * 500), 1); }
.cp-load--g { --x: calc(51 + 8); --y: calc(var(--base) + (var(--fo) + var(--ft)) * var(--hmax)); --h: calc(var(--fg) * var(--hmax)); --cf: rgba(224, 105, 11, .07); --ct: rgba(224, 105, 11, .2); --cs: rgba(224, 105, 11, .14); opacity: clamp(0, calc(var(--fg) * 500), 1); }
.cp-load--g > .f { border: .32cqw dashed var(--ghost); box-sizing: border-box; }
.cp-load--g > .f--top { border-width: 1.2cqw .32cqw; }
.cp-load--o > .f--front { box-shadow: inset 0 0 0 .14cqw rgba(0, 0, 0, .12); }
.cp-load--w > .f--front { box-shadow: inset 0 .14cqw 0 rgba(255, 255, 255, .12); }

/* The brass band at half of the full benefit, and the arm that swings out from it over your wagon. */
.cp-band { --x: 10.6; --w: 30.8; --h: .8; --d: 10.8; --y: calc(var(--base) + var(--fh) * var(--hmax) - .4); --cf: var(--p-brass); --ct: #f1d58d; --cs: #8c6219; }
.cp-arm { position: absolute; left: 41cqw; bottom: calc((var(--base) + var(--fh) * var(--hmax) - .45) * 1cqw); width: 18cqw; height: .9cqw; transform-origin: 0 50%; transform: rotateY(calc(var(--swing) * 1deg)); transform-style: preserve-3d; }
.cp-arm__bar { --x: 0; --y: 0; --w: 17.4; --h: .9; --d: .9; --cf: var(--p-brass); --ct: #f4dea0; --cs: #8c6219; }
.cp-arm__tip { --x: 16.8; --y: -1.1; --w: 1.2; --h: 3.1; --d: 3.2; --cf: var(--p-brass); --ct: #f4dea0; --cs: #7a5513; }

/* The lever (the age you start) and the key. */
.cp__ctrl { margin-top: 14px; }
.cp__lever { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; }
.cp__lever-k { font: 700 1rem/1.2 var(--board-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cp__lever-v { font: 700 1.6rem/1 var(--board-font); color: var(--ink); font-variant-numeric: tabular-nums; }
.cp__lever .p-range { grid-column: 1 / -1; --line: #e0690b; }
.cp__ticks { position: relative; display: flex; justify-content: space-between; margin: -6px 6px 0; padding-bottom: 34px; font: 700 .95rem/1 var(--board-font); color: var(--ink-2); }
.cp__ticks span { width: 1.4em; text-align: center; margin: 0 -.35em; }
.cp__fra { position: absolute; left: calc(var(--at) * (100% - 1.4em) + .7em); bottom: 0; transform: translateX(-50%); padding: 0 6px 1px; border-radius: 3px; background: var(--signal); color: var(--signal-ink); font: 700 .95rem/1.25 var(--board-font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cp__fra::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-bottom-color: var(--signal); }
.cp-plate__s span { white-space: nowrap; }

.cp .cp__key { display: grid; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.cp-key { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; font-size: 1rem; line-height: 1.35; color: var(--ink); }
.cp-key b { font: 700 1.15rem/1.2 var(--board-font); letter-spacing: .02em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cp-swatch { width: 18px; height: 18px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.cp-key--w .cp-swatch { background: var(--w-front); }
.cp-key--h .cp-swatch { height: 6px; background: var(--p-brass); }
.cp-key--o .cp-swatch { background: var(--o-front); }
.cp-key--t .cp-swatch { background: var(--t-front); }
.cp-key--g .cp-swatch { background: transparent; box-shadow: none; border: 2px dashed var(--ghost); }
.cp-key.is-off { color: var(--ink-2); }
.cp .cp__say { margin: 18px 0 0; font-size: 1.06rem; line-height: 1.5; color: var(--ink); }

@media (max-width: 599px) {
	.cp { --hmax: 40; }
	.cp-plate { padding: 8px 10px 9px; }
	.cp-plate__v { font-size: 1.45rem; }
	.cp-plate__k { letter-spacing: .05em; }
	.cp__world { perspective: 130cqw; }
}