/* Session screens (Hub, Switcher, Spin, AgreePanel, Summary): keyframes + the few classes inline styles cannot express.
   Values ported from docs/design/{Hub,Switcher,Spin,Agree,Summary}.dc.html helmet blocks. Every animation is switched off for
   prefers-reduced-motion AND for the .rm class on <html> (session.reducedMotionAll). */
@keyframes slideA { from { transform: translateY(-38%) } to { transform: translateY(0) } }
@keyframes slideB { from { transform: translateY(-38%) } to { transform: translateY(0) } }
.tickA { animation: slideA .09s linear; }
.tickB { animation: slideB .09s linear; }
@keyframes cardIn { 0% { transform: translateX(120%) rotate(8deg) } 70% { transform: translateX(-4%) rotate(-3deg) } 100% { transform: translateX(0) rotate(-2deg) } }
.cardIn { animation: cardIn .7s cubic-bezier(.2,.8,.3,1) both; }
@keyframes bannerPop { 0% { transform: scale(.3); opacity: 0 } 60% { transform: scale(1.12); opacity: 1 } 100% { transform: scale(1) } }
.bannerPop { animation: bannerPop .5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes blink { 0%,100% { background: #FFD23F } 50% { background: #FFF3C4 } }
.bulb { animation: blink .6s steps(2) infinite; }
.bulb2 { animation: blink .6s steps(2) -.3s infinite; }
@keyframes fill { from { width: 4% } to { width: 100% } }
.filling { animation: fill 1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes stripes { from { background-position: 0 0 } to { background-position: 40px 0 } }
.stripes { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 10px, transparent 10px 20px); animation: stripes .6s linear infinite; }
@keyframes popin { 0% { transform: scale(.85); opacity: 0 } 60% { transform: scale(1.04); opacity: 1 } 100% { transform: scale(1) } }
.popin { animation: popin .35s cubic-bezier(.2,.8,.3,1); }
@keyframes fall { 0% { transform: translateY(-40px) rotate(0); opacity: 0 } 10% { opacity: 1 } 100% { transform: translateY(260px) rotate(360deg); opacity: 0 } }
.cf { animation: fall 2.6s linear infinite; }
@keyframes sxToastIn { from { transform: translateY(16px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .tickA, .tickB, .cardIn, .bannerPop, .bulb, .bulb2, .stripes, .popin, .cf { animation: none; }
  .filling { animation: none; width: 100%; }
}
.rm .tickA, .rm .tickB, .rm .cardIn, .rm .bannerPop, .rm .bulb, .rm .bulb2, .rm .stripes, .rm .popin, .rm .cf { animation: none; }
.rm .filling { animation: none; width: 100%; }

/* Shared look of the session screens' buttons (PressButton, 10 §3.2). Size/colour are set inline per spec. */
.sx { font-family: 'Lilita One', sans-serif; font-weight: 400; color: #1E1B2E; border: 3px solid #1E1B2E; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; box-sizing: border-box; }
.sx:hover { color: #1E1B2E; }
.sx[disabled] { cursor: not-allowed; }
.sx-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }
.sx-field { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px; border: 3px solid #1E1B2E; border-radius: 12px; background: #FFFFFF; font: 700 15px 'Nunito', sans-serif; color: #1E1B2E; }
.sx-field:focus { outline: 3px solid #FFD23F; outline-offset: 2px; }
.sx-fade-toast { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 4; background: #1E1B2E; color: #FFFFFF; border: 3px solid #FFFFFF; border-radius: 18px; padding: 12px 16px; font-weight: 900; font-size: 15px; animation: toastIn .3s ease-out both; max-width: calc(100vw - 32px); }
.sx-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(15,18,38,0.6); display: flex; justify-content: center; padding: 160px 16px 16px; box-sizing: border-box; overflow-y: auto; }
.sx-overlay.center { align-items: center; padding: 16px; background: rgba(14,12,30,0.62); }
/* mock dialogs are content-box: width 480 + padding 22 + border 3 (Hub/Switcher/Summary .dc.html) */
.sx-dialog { width: 480px; max-width: calc(100% - 50px); align-self: flex-start; background: #FFFDF7; border: 3px solid #1E1B2E; border-radius: 24px; box-shadow: 0 8px 0 #1E1B2E; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-sizing: content-box; }
.sx-overlay.center .sx-dialog { align-self: center; }
.sx-grip { display: grid; grid-template-columns: repeat(2, 5px); grid-auto-rows: 5px; gap: 4px; padding: 4px; cursor: grab; background: none; border: 0; }
.sx-grip i { width: 5px; height: 5px; border-radius: 50%; background: #5B5675; display: block; }
.sx-switch-veil { position: absolute; inset: 0; background: rgba(20,24,48,0.5); z-index: 5; }
.sx-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) { .sx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sx-draghint { outline: 3px dashed #FFD23F; outline-offset: 2px; }
.sx-delay .bean { animation-delay: var(--d, 0s); }

/* Switcher drawer stays a full-viewport column while the world/agree panel scroll (Switcher.dc.html: drawer = 100vh, footer pinned). */
@media (min-width: 761px) {
  .sx-play-row > .pw-drawer { position: sticky; top: 0; height: 100vh; align-self: flex-start; }
}

/* Summary podium + Hub "All tickets discussed" cheerers: the mocks draw no ground shadow under these beans */
.sx-noshadow .pw-shadow { display: none; }