/*
 * The lever frame (includes/pieces/levers.php): a signal box at night. The line lit to the combined
 * income under two semaphores whose arms drop and bounce; levers leaning towards you when pulled
 * (CSS 3D); the worksheet as a ruled register on card.
 */

.levers { --edge: 14px; --post: 184px; --postb: 136px; --arm: 88px; --armh: 18px; --steel: linear-gradient(90deg,#5c626a,#f3f5f7 40%,#c2c7ce 62%,#4b5058); --go: cubic-bezier(.4,.1,.2,1); display: grid; gap: 16px; }
.levers__sig,.levers__post,.levers__cap,.levers__no,.levers__head,.levers__arm,.levers__face,.levers__edge,.levers__spec,.levers__pivot,.levers__lit,.levers__seg,.levers__well,.levers__shaft,.levers__grip,.levers__catch,.levers__brass,.levers__lab,.levers__pick { position: absolute; }
.levers__board { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 12px 14px; border-radius: 10px; background: #0a0b0d; box-shadow: inset 0 2px 5px #000000b2,0 1px 0 #2b2f35; }
.levers__cell { display: grid; gap: 6px; margin: 0; }
.levers__k,.levers__seg { font: 700 .95rem/1 var(--board-font); letter-spacing: .12em; text-transform: uppercase; color: #c9c4ba; }
.levers__flap .flaps__cells i { font-size: 1.55rem; }
.levers__flap--tax .flaps__cells i,.levers__flap--tax .flaps__cells i.is-flip b { color: var(--signal); }
.levers__share { font: 700 1rem/1.2 var(--board-font); color: var(--flap-ink); }

/* The diagram: two signals over the line, and their plates. */
.levers__diagram { padding: 10px 12px 14px; border-radius: 10px; background: linear-gradient(#16191d,#0c0d10); box-shadow: inset 0 0 0 1px #2a2e34; }
.levers__sky { position: relative; height: 206px; perspective: 700px; perspective-origin: 40% 30%; }
.levers__sig { bottom: 0; left: calc(var(--edge) + var(--x) * (100% - 2 * var(--edge))); width: 0; height: 100%; transform-style: preserve-3d; transform: rotateY(-24deg); transition: left .8s var(--go); }
.levers__post { bottom: 0; left: -4px; width: 8px; height: var(--post); border-radius: 2px; background: var(--steel); box-shadow: 2px 0 2px #00000080; }
.levers__post::after { content: ""; position: absolute; left: -7px; bottom: 0; width: 21px; height: 8px; border-radius: 2px 2px 0 0; background: linear-gradient(#3b4047,#1b1d21); }
.levers__cap { top: -9px; left: -2px; width: 12px; height: 10px; border-radius: 50% 50% 2px 2px; background: linear-gradient(90deg,#2b2f35,#6b7079 45%,#1b1d21); }
.levers__no { top: 46%; left: -9px; display: grid; place-items: center; width: 25px; height: 22px; border-radius: 3px; background: #fbfaf6; color: #15171a; font: 700 .95rem/1 var(--board-font); font-style: normal; box-shadow: var(--p-enamel),0 1px 2px #00000099; }
.levers__head { left: 0; bottom: calc(var(--post) - 18px); transform-style: preserve-3d; }
.levers__arm { left: 2px; top: calc(var(--armh) / -2); width: var(--arm); height: var(--armh); transform-origin: -2px 50%; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.36,1.7,.6,1); }
.levers__sig.is-off .levers__arm { transform: rotateZ(42deg); }
/* Each signal stands at its true place, however close: signal 2 is shorter, so signal 1's arm passes over it, and their number plates sit at different heights. */
.levers__sig--b { --post: var(--postb); }
.levers__sig--a .levers__no { top: 70%; left: 7px; }
.levers__sig--b .levers__no { top: 30%; }
.levers__face { inset: 0; border-radius: 1px 4px 4px 1px; background: linear-gradient(90deg,#b8241a 64%,#fbfaf6 0 78%,#b8241a 0); box-shadow: inset 0 2px 0 #ffffff59,inset 0 -2px 0 #0000004c; }
.levers__edge { left: 0; right: 0; top: 100%; height: 5px; background: #5a0f09; transform-origin: 50% 0; transform: rotateX(-90deg); }
.levers__spec { left: -32px; top: -3px; width: 34px; height: 34px; overflow: visible; stroke: #0b0c0e; }
.levers__spec path { fill: #1d2024; }
.levers__red { fill: #e2463a; }
.levers__green { fill: #183b26; }
.levers__sig.is-off .levers__red { fill: #4a1410; }
.levers__sig.is-off .levers__green { fill: #3fbf6b; }
.levers__pivot { left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%,#eef0f2,#6b7079 60%,#2b2f35); }
.levers__track { position: relative; height: 26px; margin: 2px 0 22px; }
.levers__track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 10px; background: linear-gradient(#8e949d,#5c626b) 0 3px / 100% 4px no-repeat,repeating-linear-gradient(90deg,#3b4047 0 5px,transparent 5px 13px); }
.levers__lit { left: var(--edge); top: 9px; height: 8px; width: calc(var(--w) * (100% - 2 * var(--edge))); min-width: 4px; border-radius: 4px; background: #f3efe5; box-shadow: 0 0 0 2px #0b0c0e; transition: width .7s var(--go),background-color .4s; }
.levers__lit.is-a { background: var(--signal); }
.levers__lit.is-b,.levers__seg--b { background-color: #ff9b8f; }
.levers__seg { top: 24px; letter-spacing: .06em; white-space: nowrap; }
.levers__seg { left: calc(var(--edge) + var(--from) * (100% - 2 * var(--edge))); width: calc((var(--to) - var(--from)) * (100% - 2 * var(--edge))); text-align: center; transition: left .8s,width .8s; }
.levers__seg--b { background: none; color: #ff9b8f; } .levers__seg--a { color: var(--signal); }
.levers__track[data-same="1"] .levers__seg--n,.levers__track[data-same="1"] .levers__seg--a { visibility: hidden; }
.levers__plates { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.levers__plate { display: grid; align-content: start; gap: 3px; padding: 10px 12px 9px; border-radius: 7px; background: #fbfaf6; color: #15171a; box-shadow: inset 0 0 0 3px #3c4148,var(--p-enamel),0 2px 0 #000; }
.levers__pn,.levers__ps,.levers__lab,.levers__lead li { font: 700 .95rem/1.15 var(--board-font); letter-spacing: .06em; text-transform: uppercase; }
.levers__plate b { font: 700 1.7rem/1 var(--board-font); font-variant-numeric: tabular-nums; }
.levers__pw { font-size: .95rem; line-height: 1.3; color: #3c4148; }
.levers__ps { justify-self: start; margin-top: 4px; padding: 3px 8px 2px; border-radius: 4px; background: #15171a; color: #f3efe5; }
.levers__plate.is-off .levers__ps,.levers__lever.is-pulled .levers__lab,.levers__lead li.is-on { background: var(--signal); color: var(--signal-ink); }

/* The frame: the floor plate, the levers pivoted under it, the plates on and under it. */
.levers__frame { padding-top: 6px; }
.levers__row { position: relative; display: flex; justify-content: center; gap: 4px; }
.levers__row::before { content: ""; position: absolute; left: 0; right: 0; bottom: 34px; height: 16px; border-radius: 3px; background: linear-gradient(#41464e,#1b1d21 70%,#0e0f12); box-shadow: inset 0 1px 0 #ffffff2e,0 3px 4px #00000099; }
.levers__lever { --paint: linear-gradient(90deg,#050506,#3a3e45 34%,#17191c 68%,#050506); position: relative; flex: 0 1 76px; min-width: 0; height: 214px; }
.levers__lever--money { --paint: linear-gradient(90deg,#4a0c07,#e2463a 34%,#a52a1f 68%,#3d0a06); flex-basis: 84px; cursor: ns-resize; }
.levers__lever--st + .levers__lever--money { margin-left: 18px; }
.levers__well { left: 50%; bottom: 42px; width: 14px; height: 168px; margin-left: -7px; perspective: 420px; perspective-origin: 50% -20%; }
.levers__well::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: -6px; height: 6px; border-radius: 2px; background: #050506; }
.levers__shaft { inset: 0; border-radius: 3px 3px 1px 1px; background: var(--paint); transform-origin: 50% 100%; transform: rotateX(calc(var(--pull) * -44deg)); transition: transform .55s cubic-bezier(.3,.1,.2,1); box-shadow: 3px 0 3px #00000073; }
.levers__lever.is-drag .levers__shaft { transition: none; }
.levers__grip { top: 0; left: -1px; right: -1px; height: 31%; border-radius: 7px 7px 2px 2px; background: var(--steel); }
.levers__catch { top: 9%; left: -6px; width: 4px; height: 22%; border-radius: 2px; background: var(--steel); }
.levers__brass { bottom: 31px; left: 50%; z-index: 1; display: grid; place-items: center; width: 26px; height: 22px; margin-left: -13px; border-radius: 3px; background: var(--p-brass); color: #1b1600; font: 700 .95rem/1 var(--board-font); font-style: normal; box-shadow: 0 1px 2px #00000099; }
.levers__lab,.levers__lead li { padding: 4px 6px 3px; border-radius: 4px; background: #fbfaf6; color: #15171a; white-space: nowrap; box-shadow: var(--p-enamel),0 2px 0 #000; }
.levers__lab { left: 50%; bottom: 0; transform: translateX(-50%); }
.levers__pick { inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.levers__pick:disabled { cursor: default; }
.levers__lever:has(.levers__pick:focus-visible) { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 6px; }
.levers__lead { display: none; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.levers__now { margin: 14px 0 0; text-align: center; font-size: 1rem; line-height: 1.4; color: var(--flap-ink); }
.levers__now span { font: 700 1rem/1 var(--board-font); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.levers__ranges { display: grid; gap: 4px 24px; }
.levers__range { display: block; min-width: 0; }
.levers__rk { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 1rem; line-height: 1.3; color: var(--flap-ink); }
.levers__rk b { font: 700 1.2rem/1.1 var(--board-font); color: var(--signal); font-variant-numeric: tabular-nums; }
.levers .p-range { --line: #e2463a; }

/* The register: ruled card, a red margin, a band's lines marked when its signal is passed. */
.levers__sheet { padding: 14px 16px 10px; border-radius: 6px; background: linear-gradient(#fbf8f0,#f2ecdd); color: #15171a; box-shadow: 0 2px 0 #000,0 14px 22px -14px #000000cc; }
.levers__st { margin: 0 0 8px; font: 700 1.05rem/1.2 var(--board-font); letter-spacing: .08em; text-transform: uppercase; }
.levers__lines { margin: 0; padding: 0; list-style: none; border-top: 2px solid #15171a; }
.levers__line { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: baseline; gap: 8px; padding: 5px 4px 4px 0; border-bottom: 1px solid #d8cfba; font-size: .98rem; line-height: 1.3; break-inside: avoid; transition: box-shadow .4s; }
.levers__ln { padding-right: 6px; border-right: 2px solid #d9a3a0; text-align: right; font: 700 .98rem/1.3 var(--board-font); color: #3c4148; }
.levers__la { font: 700 1.08rem/1.2 var(--board-font); font-variant-numeric: tabular-nums; text-align: right; }
.levers[data-a="1"] .levers__line--a { box-shadow: inset 34px 0 0 -30px #c79a00; }
.levers[data-b="1"] .levers__line--b { box-shadow: inset 34px 0 0 -30px #b42318; }
.levers__line--end { border: 0; border-top: 3px double #15171a; }
.levers__line--end .levers__lw { font-weight: 700; }
.levers__line--end .levers__la { font-size: 1.3rem; }
.levers__say { margin: 0; font-size: 1.06rem; line-height: 1.5; color: var(--flap-ink); }
.levers.is-setup .levers__shaft,.levers.is-setup .levers__lit,.levers.is-setup .levers__arm,.levers.is-setup .levers__sig,.levers.is-run .levers__lever--money .levers__shaft,.levers.is-run .levers__lit { transition: none; }

/* The page's own list spacing (.prose ol, .prose li) does not apply inside the drawing. */
.piece .levers__plates { margin: 14px 0 0; }
.piece .levers__lines, .piece .levers__line, .piece .levers__plate, .piece .levers__lead li { margin: 0; }
.piece .levers__lead { margin: 10px 0 0; }
@media (min-width: 700px) {
	.levers__ranges { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
	.levers__lines { columns: 2; column-gap: 26px; }
}
@media (max-width: 599px) {
	.levers { --edge: 10px; --post: 140px; --postb: 98px; --arm: 40px; --armh: 13px; }
	.levers__board { padding: 10px; gap: 10px 18px; }
	.levers__flap .flaps__cells i { font-size: 1.3rem; }
	.levers__sky { height: 158px; }
	.levers__post { width: 7px; left: -3.5px; }
	.levers__spec { display: none; }
	.levers__seg,.levers__lab { display: none; }
	.levers__lead { display: flex; }
	.levers__plates { gap: 8px; }
	.levers__plate { padding: 8px 9px; }
	.levers__plate b { font-size: 1.4rem; }
	.levers__row { gap: 0; }
	.levers__row::before { bottom: 12px; }
	.levers__lever { flex-basis: 48px; height: 160px; }
	.levers__lever--money { flex-basis: 76px; }
	.levers__lever--st + .levers__lever--money { margin-left: 8px; }
	.levers__well { bottom: 26px; height: 124px; }
	.levers__brass { bottom: 9px; }
	.levers__sheet { padding: 12px 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.levers__sig,.levers__arm,.levers__lit,.levers__shaft,.levers__seg { transition: none; }
}