/*
 * The fare gates (includes/pieces/gates.php): a concourse at night. Over the gates, the board's
 * arithmetic; then twelve steel gate cabinets drawn as boxes in depth (front, top and inner side),
 * each pair with two red paddles hinged on their inner sides that swing shut across the aisle on a
 * check SSA holds back. The month's sign above, what the check pays below.
 */

.gates { --pad: #d8382d; --pad-lt: #ff8f84; --D: 30px; }

/* The board: the rule's arithmetic. */
.gates__board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; border-radius: 10px; overflow: hidden; background: #2a2e34; box-shadow: 0 1px 0 #2b2f35, inset 0 2px 5px rgba(0, 0, 0, .7); }
.gates__cell { padding: 10px 12px 11px; background: #0a0b0d; }
.gates__cell dt { font: 700 .95rem/1.15 var(--board-font); letter-spacing: .08em; text-transform: uppercase; color: #c9c4ba; }
.gates__cell dd { margin: 6px 0 0; font: 700 1.7rem/1 var(--board-font); letter-spacing: .02em; color: var(--flap-ink); font-variant-numeric: tabular-nums; }
.gates__cell--held dd { color: var(--signal); }

/* The gates: two rows of six, each viewed a little from above. */
.gates__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.gates__g { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.gates__mo { width: 100%; padding: 6px 0 5px; border-radius: 4px; background: #0a0b0d; box-shadow: inset 0 0 0 1px #2f343b; font: 700 1.1rem/1 var(--board-font); letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--flap-ink); }
.gates__unit { position: relative; width: 100%; max-width: 124px; height: 108px; perspective: 320px; perspective-origin: 50% -90%; transform-style: preserve-3d; }
.gates__unit::before { content: ""; position: absolute; left: -4px; right: -4px; bottom: 0; height: 12px; border-radius: 3px; background: linear-gradient(#50565e, #24282d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.gates__unit::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--signal) 0 6px, transparent 6px 10px); opacity: .85; }

/* A cabinet: a steel box in depth, its front, its black glass top with a card reader, its inner side. */
.gates__cab { position: absolute; bottom: 10px; width: 25%; height: 72%; border-radius: 3px 3px 0 0; background: linear-gradient(#e4e7ea, #b9bfc6 55%, #9aa1a9); transform-style: preserve-3d; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .7), inset -1px 0 0 rgba(0, 0, 0, .25), inset 0 -4px 0 rgba(0, 0, 0, .28); }
.gates__cab--l { left: 0; }
.gates__cab--r { right: 0; }
.gates__cab::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--D); transform-origin: 50% 0; transform: rotateX(-90deg); border-radius: 3px; background: radial-gradient(circle at 50% 55%, #f5c21b 0 3px, #15171a 3.5px 6px, transparent 6.5px), linear-gradient(#30353b, #121417); }
.gates__cab::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--D); }
.gates__cab--l::after { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(90deg, #5f656d, #8a9098); }
.gates__cab--r::after { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #8a9098, #5f656d); }
.gates__cab i { position: absolute; left: 50%; top: 12%; width: 12px; height: 12px; margin-left: -6px; border-radius: 2px; background: #3a3f46; box-shadow: inset 0 0 0 2px #15171a; transition: background-color .3s; }
.is-paid .gates__cab i, .is-free .gates__cab i { background: #4fc48a; }
.is-held .gates__cab i { background: #ff6b5e; }
.is-part .gates__cab i { background: var(--signal); }

/* The paddles: glass doors hinged on the cabinets' inner sides, half-way back; shut across the aisle, open folded back. */
.gates__pad { position: absolute; bottom: 26%; width: 25%; height: 40%; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 40%), linear-gradient(var(--pad-lt), var(--pad) 26%, #a3211a); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .4); transition: transform .6s cubic-bezier(.3, 1.4, .55, 1), opacity .3s; }
.gates__pad::after { content: ""; position: absolute; left: 4px; right: 4px; top: 42%; height: 4px; border-radius: 2px; background: #fbfaf6; opacity: .9; }
.gates__pad--l { left: 25%; transform-origin: 0 50%; transform: translateZ(calc(var(--D) / -2)) rotateY(var(--a, 84deg)); }
.gates__pad--r { right: 25%; transform-origin: 100% 50%; transform: translateZ(calc(var(--D) / -2)) rotateY(var(--b, -84deg)); }
.is-held .gates__pad--l, .is-part .gates__pad--l { --a: 0deg; }
.is-held .gates__pad--r { --b: 0deg; }
.is-free .gates__pad { opacity: 0; }
.is-none .gates__unit { opacity: .4; }

.gates__chk { min-height: 1.1em; font: 700 1.2rem/1.1 var(--board-font); letter-spacing: .02em; text-align: center; color: var(--flap-ink); font-variant-numeric: tabular-nums; }
.is-held .gates__chk { color: #ff9b8f; }
.is-part .gates__chk { color: var(--signal); }
.is-none .gates__chk, .is-free .gates__chk { color: #c9c4ba; }

.gates__key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; font-size: .95rem; color: #c9c4ba; }
.gates__k::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 2px; background: #4fc48a; vertical-align: 0; }
.gates__k--shut::before { background: #ff6b5e; }
.gates__k--half::before { background: var(--signal); }

.gates__ctrl { margin-top: 14px; }
.js .gates .gates__ctrl { display: block; }
.gates__slide { display: block; }
.gates__lk { display: block; font-size: 1.05rem; color: var(--flap-ink); }
.gates__lk b { font: 700 1.3rem/1 var(--board-font); color: var(--signal); font-variant-numeric: tabular-nums; }
.gates__back { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px; background: #0a0b0d; box-shadow: inset 4px 0 0 #4fc48a; font-size: 1.04rem; line-height: 1.45; color: var(--flap-ink); }
.gates__say { margin: 12px 0 0; font-size: 1.06rem; line-height: 1.5; color: var(--flap-ink); }

@media (max-width: 719px) {
	.gates { --D: 24px; }
	.gates__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 10px; }
	.gates__unit { height: 88px; }
	.gates__mo { font-size: 1rem; }
	.gates__chk { font-size: 1.08rem; }
	.gates__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gates__cell dd { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
	.gates__pad, .gates__cab i { transition: none; }
}
.gates dd, .gates b, .gates__chk { white-space: nowrap; }