/* Conversion Railroad: the rail-yard scene (train on the main line, yard tray below) + the keypad panel in the practice
 * shell's stage. The scene, crates and rolling stock stay a daytime picture in dark mode; panels use --tlg-* tokens. */
.cr { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; padding: 10px 12px; }
.cr-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.cr-panel { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 2px; }

/* scene */
.cr-scene { position: relative; flex: none; height: 340px; overflow: hidden; border-radius: var(--tlg-radius-lg); border: var(--tlg-border-width) solid var(--tlg-border); background: #dff0f8; }
.cr-bg { position: absolute; top: 0; bottom: 0; left: -100%; width: 200%; display: flex; transition: transform 1.6s cubic-bezier(.45, 0, .25, 1); will-change: transform; }
.cr-bg .cr-bgpanel { display: block; width: 50%; height: 100%; flex: none; }
.cr-scene.is-arriving .cr-bg { transform: translateX(50%); }
.cr-top { position: absolute; top: 8px; left: 10px; right: 10px; z-index: 2; display: flex; align-items: flex-start; gap: 14px; pointer-events: none; }
.cr-signal { width: 54px; height: 130px; flex: none; }
.cr-signal svg { display: block; }
.cr-lamp--red { fill: #4a1712; } .cr-lamp--green { fill: #123a20; }
.cr-signal.is-stop .cr-lamp--red { fill: #ff3b2f; filter: drop-shadow(0 0 6px #ff3b2f); }
.cr-signal.is-go .cr-lamp--green { fill: #3ee062; filter: drop-shadow(0 0 6px #3ee062); }
.cr-board { margin: 6px auto 0; padding: 6px 10px 8px; border-radius: 8px; background: #15181c; border: 3px solid #3d434b; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cr-board-lab { font-size: 16px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffd76a; }
.cr-flaps { display: flex; gap: 2px; }
.cr-flap { width: 17px; height: 28px; border-radius: 3px; background: linear-gradient(#262a30 50%, #1b1e22 50%); color: #ffd76a; font: 700 20px/28px ui-monospace, Menlo, Consolas, monospace; text-align: center; box-shadow: inset 0 -1px 0 #000; }
.cr-dest { margin: 6px 0 0; padding: 6px 14px 8px; border-radius: 8px; background: #173f3c; border: 3px solid #c9a042; color: #f8eccb; display: flex; flex-direction: column; align-items: center; line-height: 1.15; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.cr-dest-lab { font-size: 16px; text-transform: uppercase; letter-spacing: .08em; }
.cr-dest-unit { font-size: 28px; font-weight: 900; color: #ffe38f; }
.cr-dest-name { font-size: 16px; }
.cr-rails { position: absolute; left: 0; right: 0; bottom: 22px; height: 4px; background: #7d848c; border-top: 1px solid #c3c9cf; z-index: 1; }
.cr-trainhost { position: absolute; left: 12px; bottom: 24px; z-index: 3; }

/* the train (factor-cars component), sized for 1366×768: engine 190 + 4 cars × 96 + caboose 96 */
.cr .pfc, .cr-ex .pfc { --pfc-car-w: 96px; }
.cr-trainhost .pfc-track { padding: 0; }
.cr-trainhost .pfc-train { min-height: 140px; }
.cr .pfc-art svg, .cr-ex .pfc-art svg { position: absolute; left: 0; bottom: 0; display: block; overflow: visible; }
.cr .pfc-engine, .cr-ex .pfc-engine { width: 190px; min-height: 140px; padding: 0 0 26px 104px; align-items: center; }
.cr .pfc-load, .cr-ex .pfc-load { position: relative; z-index: 1; }
.cr .pfc-car, .cr-ex .pfc-car { padding-bottom: 30px; }
.cr .pfc-caboose, .cr-ex .pfc-caboose { width: 96px; height: 140px; }
.cr .pfc-carry, .cr-ex .pfc-carry { position: absolute; top: 49px; left: 50%; transform: translateX(-50%); min-width: 70px; height: 42px; padding: 0 4px; justify-content: center; color: #2a1610;
  background: #fbf3dc; border: 1.4px solid #4d0f08; border-radius: 4px; }
.cr .pfc-caboose.is-long .pfc-carry-unit { font-size: 16px; }
.cr .pfc-carry-lab, .cr-ex .pfc-carry-lab { font-size: 16px; }
.cr .pfc-carry-unit, .cr-ex .pfc-carry-unit { font-size: 19px; }
.cr .pfc.is-alert .pfc-carry-unit { color: #b91c1c; }
.cr .pfc-link, .cr-ex .pfc-link { width: 6px; height: 4px; margin-bottom: 23px; background: #33373d; }
.cr .pfc-crate, .cr-ex .pfc-crate { min-width: 80px; border: 2px solid #6e4a22; border-radius: 3px; color: #1d1408;
  background: repeating-linear-gradient(0deg, #e9c48a 0 9px, #d5a865 9px 10px); box-shadow: inset 0 0 0 2px rgba(255, 240, 200, .5), inset 3px 3px 0 -1px #8a6a3c, inset -3px -3px 0 -1px #8a6a3c, 0 2px 0 rgba(0, 0, 0, .25); }
.cr .pfc-plank, .cr-ex .pfc-plank { width: 88px; background: #3e2a18; }
.cr .pfc-car--on:hover:not(:disabled) .pfc-frac, .cr .pfc-car--tray:hover:not(:disabled) .pfc-frac { transform: translateY(-3px); }
.cr .pfc-frac { transition: transform .12s; }

/* yard tray */
.cr-yard { flex: none; padding: 8px 10px 4px; border-radius: var(--tlg-radius-lg); border: var(--tlg-border-width) solid var(--tlg-border);
  background: linear-gradient(transparent calc(100% - 26px), #b8ad98 calc(100% - 26px)), var(--tlg-surface-2); }
.cr-yard .pfc-yard-h { margin-bottom: 6px; }
.cr-yard .pfc-tray { min-height: 140px; gap: 10px 14px; }
html[data-theme="dark"] .cr-yard { background: linear-gradient(transparent calc(100% - 26px), #5b544a calc(100% - 26px)), var(--tlg-surface-2); }

/* running the train */
.cr-steam circle { fill: #f4f6f8; opacity: 0; }
.cr-scene.is-rolling .cr-wheel { animation: cr-spin .45s linear infinite; }
.cr-scene.is-rolling .cr-rod { animation: cr-rod .45s linear infinite; }
.cr-scene.is-rolling .cr-steam circle { animation: cr-steam 1s ease-out infinite; }
.cr-scene.is-rolling .cr-steam circle:nth-child(2) { animation-delay: .25s; }
.cr-scene.is-rolling .cr-steam circle:nth-child(3) { animation-delay: .5s; }
@keyframes cr-spin { to { transform: rotate(-360deg); } }
@keyframes cr-rod { 0% { transform: translate(0, 0); } 25% { transform: translate(-3px, -3px); } 50% { transform: translate(0, -6px); } 75% { transform: translate(3px, -3px); } 100% { transform: translate(0, 0); } }
@keyframes cr-steam { 0% { opacity: .9; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(30px, -24px) scale(1.5); } }
.cr-scene.is-lurch .cr-trainhost { animation: cr-lurch .7s ease-out; }
@keyframes cr-lurch { 0% { transform: none; } 45% { transform: translateX(-16px); } 70% { transform: translateX(-11px); } 100% { transform: translateX(-12px); } }
.cr-scene.is-lurch .cr-trainhost { transform: translateX(-12px); }

/* Briefing example */
.cr-ex { width: 100%; }
.cr-scene--ex { height: 300px; }
.cr-scene--ex .cr-bg { transform: translateX(50%); transition: none; }
.ps-brief--drawer .cr-scene--ex { height: 250px; }
.ps-brief--drawer .cr-scene--ex .cr-trainhost { transform: scale(.78); transform-origin: left bottom; }
.ps-brief--drawer .cr-scene--ex .cr-signal { display: none; }

@media (prefers-reduced-motion: reduce) { .cr-bg { transition: none; } .cr-scene.is-lurch .cr-trainhost { animation: none; } }
@media (max-width: 1100px) { .cr { grid-template-columns: minmax(0, 1fr) 240px; } }
@media (max-width: 900px) {
  .cr { position: static; grid-template-columns: 1fr; }
  .cr-scene { overflow-x: auto; }
  .cr-trainhost { position: absolute; }
}