/* Route v2 S6: the flip card. Tokens only (--rt-* and site colors). */
.rt-card { position: relative; perspective: 1200px; border-radius: var(--rt-radius, 18px); padding: var(--rt-gap, 16px); background: var(--rt-card, var(--panel)); box-shadow: 0 0 0 1px var(--rt-line, var(--line)); min-height: 9rem; transition: box-shadow .32s; overflow-x: clip; }
.rt-card[data-face="drive"] { box-shadow: 0 0 0 1px var(--blue), 0 0 18px -6px var(--blue); }
.rt-card[data-face="onsite"] { box-shadow: 0 0 0 1px var(--green), 0 0 18px -6px var(--green); }
.rt-card[data-face="clock"][data-gate="1"] { box-shadow: 0 0 0 1px var(--red), 0 0 18px -6px var(--red); }
.rt-card-in { transform-style: preserve-3d; }
.rt-card-swap { position: absolute; top: 8px; right: 8px; z-index: 2; }
.rt-face { display: grid; gap: .6rem; font-size: var(--fs-lead); }
.rt-face[hidden] { display: none; }
.rt-face-clock .rt-gate { display: grid; gap: .4rem; text-align: center; padding: .5rem 0; }
.rt-face-clock .rt-gate b { font-size: var(--fs-h3); }
.rt-face-clock .rt-loaded { justify-self: start; }
.rt-face-team, .rt-face-drive, .rt-face-done { min-height: 6rem; }
.rt-card.rt-flip .rt-card-in { animation: rt-flip .32s cubic-bezier(.34, 1.56, .64, 1); }
.rt-card.rt-slide .rt-card-in { animation: rt-slide .28s ease-out; }
.rt-card.rt-fade .rt-card-in { animation: rt-fade .2s ease; }
@keyframes rt-flip { from { transform: rotateY(-90deg) scale(.98); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes rt-slide { from { transform: translateX(24%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rt-fade { from { opacity: 0; } to { opacity: 1; } }
.rt-burst { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--fs-h1) * 1.5); font-style: normal; color: var(--green); pointer-events: none; animation: rt-burst .7s ease-out forwards; }
@keyframes rt-burst { 0% { transform: scale(.4); opacity: 0; } 40% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rt-card * { animation: none !important; } .rt-card.rt-fade .rt-card-in { animation: rt-fade .2s ease !important; } }