/*
 * The points (includes/pieces/switch.php): a ground plane tilted back on the late spouse's track, so
 * that line stays square over the flat ruler. Tracks are drawn flat on it; lever, buffer stop and
 * train stand up as boxes of lit faces. --tx: the train's nose along the line; --ty, --th: its centre
 * across the plane and heading; --cx: the buffer stop; --lever: the throw (0 to 1); --bump: the give.
 */

.sw {
	--ky: 1.7; --tilt: 62deg; --mainy: 11.5; --stageh: 24;
	--tx: 80; --ty: 7; --th: 0; --cx: 200; --lever: 1; --bump: 0;
	--cess: #b9b2a3; --ballast: #d3cec4; --sleeper: #7b6957; --rail-b: #4d535b; --rail-t: #d6dade; --blade: #f1f3f5;
	--stage: linear-gradient(180deg, #e9e5dc 0%, #dcd6ca 100%);
	--body: linear-gradient(180deg, #ef8a3a 0%, #d8650e 100%); --body-end: #b9560c; --roof: #e4e1da; --glass: #1d2126;
}
@media (prefers-color-scheme: dark) {
	.sw {
		--cess: #34373c; --ballast: #474a50; --sleeper: #2a2724; --rail-b: #15171a; --rail-t: #b9bec5; --blade: #f3efe5;
		--stage: linear-gradient(180deg, #1d2024 0%, #23262b 100%); --roof: #c9c5bc;
	}
}

.sw__plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
.sw-plate { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 10px; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--stone-2), inset 0 3px 0 var(--rule); }
.sw-plate--limit { box-shadow: inset 0 0 0 1px var(--stone-2), inset 0 4px 0 var(--signal); }
.sw-plate--you { order: 3; box-shadow: inset 0 0 0 2px var(--line); }
.sw-plate[data-off] .sw-plate__v { color: var(--ink-2); }
.sw-plate__k { font: 700 .95rem/1.15 var(--board-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sw-plate__v { font: 700 1.55rem/1.1 var(--board-font); color: var(--ink); font-variant-numeric: tabular-nums; }
.sw-plate__s { font-size: .95rem; line-height: 1.35; color: var(--ink-2); }

.sw { container-type: inline-size; }
.sw__stage { position: relative; height: calc(var(--stageh) * 1cqw); overflow: hidden; border-radius: 10px 10px 0 0; background: var(--stage); box-shadow: inset 0 0 0 1px var(--stone-2); perspective: 130cqw; perspective-origin: 50% 20%; }
.sw__bed { position: absolute; left: 0; width: 100cqw; top: calc((var(--mainy) - 7 * var(--ky)) * 1cqw); height: calc(20 * var(--ky) * 1cqw); transform-origin: 50% calc(7 * var(--ky) * 1cqw); transform: rotateX(var(--tilt)); transform-style: preserve-3d; background: var(--cess); }
.sw-ground__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sw-ballast { fill: var(--ballast); }
.sw-sleepers { fill: var(--sleeper); }
.sw-rail { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sw-rail--base { stroke: var(--rail-b); stroke-width: 4.2px; }
.sw-rail--top { stroke: var(--rail-t); stroke-width: 1.6px; }
.sw-rail--blade { stroke: var(--blade); stroke-width: 2.2px; }
.sw-stretcher, .sw-rod { fill: none; stroke: #2a2d32; stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sw-beyond { fill: var(--cess); opacity: .72; }
.sw-mark { fill: #fbfaf6; }
.sw-mark.is-fra { fill: var(--signal); }

/* A box standing on the ground: footprint --w by --d, --h tall, raised --z. */
.sw-box { position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * var(--ky) * 1cqw); width: calc(var(--w) * 1cqw); height: calc(var(--d) * var(--ky) * 1cqw); transform: translateZ(calc(var(--z, 0) * 1cqw)); transform-style: preserve-3d; }
.sw-box > .g { position: absolute; display: block; }
.sw-box > .g--top { inset: 0; transform: translateZ(calc(var(--h) * 1cqw)); background: var(--ct); }
.sw-box > .g--front { left: 0; top: 100%; width: 100%; height: calc(var(--h) * 1cqw); transform-origin: 50% 0; transform: rotateX(90deg); background: var(--cf); }
.sw-box > .g--back { left: 0; bottom: 100%; width: 100%; height: calc(var(--h) * 1cqw); transform-origin: 50% 100%; transform: rotateX(-90deg); background: var(--cb, var(--cf)); }
.sw-box > .g--right { left: 100%; top: 0; width: calc(var(--h) * 1cqw); height: 100%; transform-origin: 0 50%; transform: rotateY(-90deg); background: var(--cr); }
.sw-box > .g--left { right: 100%; top: 0; width: calc(var(--h) * 1cqw); height: 100%; transform-origin: 100% 50%; transform: rotateY(90deg); background: var(--cl, var(--cr)); }

/* The lever frame, in front of the points: a cast base and a lever that leans back (normal) or forward (thrown). */
.sw-lever-base { --x: 37.9; --y: 11.4; --w: 3.4; --d: 2.2; --h: 1.1; --ct: #4a4f57; --cf: linear-gradient(180deg, #3a3f46, #23262b); --cr: #1b1d21; }
.sw-lever { position: absolute; left: 39.3cqw; top: calc(12.15 * var(--ky) * 1cqw); width: .6cqw; height: calc(.7 * var(--ky) * 1cqw); transform-origin: 50% 50%; transform: translateZ(1.1cqw) rotateX(calc((var(--lever) * 2 - 1) * -30deg)); transform-style: preserve-3d; }
.sw-lever-arm { --x: 0; --y: 0; --w: .6; --d: .7; --h: 6.5; --ct: #5a6068; --cf: linear-gradient(90deg, #d23a2a, #a82718); --cr: #8a1f13; --cb: #8a1f13; }
.sw-lever-grip { --x: -.12; --y: -.05; --w: .84; --d: .8; --h: 1.6; --z: 6; --ct: #eef0f2; --cf: var(--p-steel); --cr: #8e949d; --cb: #8e949d; }

/* The buffer stop at the limit: a timber body, a yellow beam, two buffers that give a little. */
.sw-stop { position: absolute; inset: 0; transform-style: preserve-3d; }
.sw-stop > .sw-box { left: calc((var(--cx) + var(--x)) * 1cqw); }
.sw-stop__body { --x: 1.1; --y: 4.6; --w: 3.2; --d: 4.8; --h: 3; --ct: #5b4c3d; --cf: linear-gradient(180deg, #4b3e31, #33291f); --cr: #2a221a; --cl: #3d3227; }
.sw-stop__beam { --x: .5; --y: 4.3; --w: .8; --d: 5.4; --h: 1.5; --z: 1.5; --ct: #ffe27a; --cf: repeating-linear-gradient(135deg, var(--signal) 0 .7cqw, #15171a .7cqw 1.4cqw); --cr: #c99a0b; --cl: repeating-linear-gradient(45deg, var(--signal) 0 .7cqw, #15171a .7cqw 1.4cqw); }
.sw-stop__buf { --x: calc(-.3 + var(--bump)); --w: .9; --d: .9; --h: 1; --z: 1.8; --ct: #eef0f2; --cf: #9aa1aa; --cr: #c4c9cf; --cl: radial-gradient(circle, #f4f6f8 0 30%, #9aa1aa 70%); }
.sw-stop__buf--a { --y: 5.4; }
.sw-stop__buf--b { --y: 7.7; }

/* The train: one railcar, its nose at --tx. */
.sw-train { position: absolute; left: calc((var(--tx) - 13) * 1cqw); top: calc((var(--ty) - 1.55) * var(--ky) * 1cqw); width: 13cqw; height: calc(3.1 * var(--ky) * 1cqw); transform: rotateZ(calc(var(--th) * 1deg)); transform-style: preserve-3d; }
.sw-train__shadow { position: absolute; inset: -6% -1%; border-radius: 30%; background: rgba(0, 0, 0, .28); filter: blur(.5cqw); }
.sw-train__body { --x: 0; --y: 0; --w: 13; --d: 3.1; --h: 3.3; --z: .6; --ct: linear-gradient(180deg, #c6c3bb 0 18%, var(--roof) 18% 82%, #c6c3bb 82%); --cf: linear-gradient(180deg, var(--body-end) 0 10%, transparent 10%), linear-gradient(180deg, transparent 0 24%, var(--glass) 24% 52%, #f3efe5 52% 60%, transparent 60%), var(--body); --cr: linear-gradient(90deg, var(--body-end) 0 14%, var(--glass) 14% 86%, var(--body-end) 86%) 0 22% / 100% 40% no-repeat, #c25b0d; --cl: #b4520a; --cb: #b4520a; }
.sw-train__body > .g--top { border-radius: 0 1.2cqw 1.2cqw 0; }

/* Labels of the two tracks, flat on the stage. */
.sw-name { position: absolute; left: 10px; z-index: 2; padding: 2px 7px 1px; border-radius: 3px; font: 700 .95rem/1.25 var(--board-font); letter-spacing: .08em; text-transform: uppercase; }
.sw-name--theirs { top: 8px; background: var(--board); color: var(--flap-ink); }
.sw-name--yours { left: 18cqw; top: min(calc((var(--mainy) + 11.4 * var(--ky) * cos(var(--tilt))) * 1cqw), calc(var(--stageh) * 1cqw - 32px)); background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }

/* The ruler, square under the line. */
.sw__ruler { position: relative; height: 56px; margin: 0; border-radius: 0 0 10px 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--stone-2); }
.sw-scale { position: absolute; top: 12px; left: calc(var(--a) * 1cqw); width: calc((var(--b) - var(--a)) * 1cqw); height: 6px; border-radius: 3px; background: linear-gradient(90deg, #f6c79e, var(--line)); }
.sw-rule-k { position: absolute; left: 12px; top: 10px; max-width: calc(var(--a) * 1cqw - 30px); font: 700 .95rem/1.2 var(--board-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.sw .sw-ticks { margin: 0; padding: 0; list-style: none; }
.sw-tick { position: absolute; top: 8px; left: calc(var(--x) * 1cqw); width: 2px; height: 14px; margin-left: -1px; background: var(--ink-2); }
.sw-tick span { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font: 700 .95rem/1 var(--board-font); color: var(--ink-2); }
.sw-tick.is-on { background: var(--ink); }
.sw-tick.is-on span { color: var(--paper); background: var(--ink); padding: 2px 4px 1px; border-radius: 3px; margin-top: -2px; }
.sw-end { position: absolute; top: 40px; left: calc(var(--x) * 1cqw); font: 700 .95rem/1 var(--board-font); color: var(--ink); white-space: nowrap; }
.sw-end--a { transform: translateX(-50%); display: none; }
.sw-end--b { transform: translateX(-100%); display: none; }
.sw-you, .sw-cap { position: absolute; top: 0; width: 0; height: 0; border: 7px solid transparent; }
.sw-you { left: calc(var(--tx) * 1cqw); margin-left: -7px; border-top-color: var(--line); border-top-width: 9px; }
.sw-cap { left: calc((var(--cx) - .3) * 1cqw); top: 1px; width: 12px; height: 22px; border: 0; margin-left: -6px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--signal) 0 4px, #15171a 4px 8px); box-shadow: 0 0 0 1px #15171a; }
.sw .sw__legend { margin: 16px 0 0; font-size: .98rem; line-height: 1.45; color: var(--ink-2); }

.sw__ctrl { margin-top: 20px; }
.sw__lever { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; }
.sw__lever-k { font: 700 1rem/1.2 var(--board-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sw__lever-v { font: 700 1.6rem/1 var(--board-font); color: var(--ink); font-variant-numeric: tabular-nums; }
.sw__lever .p-range { grid-column: 1 / -1; --line: #e0690b; }
.sw__ends { display: flex; justify-content: space-between; margin-top: -4px; font: 700 .95rem/1 var(--board-font); color: var(--ink-2); }
.sw .sw__say { margin: 22px 0 0; font-size: 1.06rem; line-height: 1.5; color: var(--ink); }

@media (max-width: 599px) {
	.sw { --ky: 2.7; --tilt: 58deg; --mainy: 15; --stageh: 42; }
	.sw__plates { grid-template-columns: 1fr 1fr; }
	.sw-plate--you { order: -1; grid-column: 1 / -1; }
	.sw-plate { padding: 8px 10px 9px; }
	.sw-plate__v { font-size: 1.35rem; }
	.sw-tick span { display: none; }
	.sw-tick.is-on span, .sw-tick.is-end span { display: block; }
}