/* POASwap depth and motion: layered card shading, quieter dividers, restrained buy/sell/teal, and small live cues.
   Only opacity, transform, colour and clip-path animate (no layout shift). All motion sits behind prefers-reduced-motion. */
.ps{--buy:#3CCB8E;--sell:#EB5F55;--teal:#35C9D0;--glass:rgba(255,255,255,.028)}
.ps .card{background:linear-gradient(180deg,var(--glass),rgba(255,255,255,0) 96px),linear-gradient(180deg,var(--card2),var(--card) 180px);
  border-color:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 1px 0 rgba(0,0,0,.35),0 14px 30px -22px rgba(0,0,0,.9)}
.ps .card:hover{border-color:rgba(53,201,208,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(53,201,208,.05),0 14px 34px -20px rgba(53,201,208,.28)}
.ps .ch{border-bottom-color:rgba(255,255,255,.04)}
.ps td{border-bottom-color:rgba(255,255,255,.035)}
.ps th{border-bottom-color:rgba(255,255,255,.05)}
.ps .xstats{background:linear-gradient(180deg,var(--glass),transparent),var(--card)}
.ps tbody tr{transition:background-color .15s ease}
.ps tbody tr:hover>td{background-color:rgba(53,201,208,.035)}
.ps .jm-in{background:radial-gradient(120% 60% at 50% -10%,rgba(53,201,208,.08),transparent 60%)}
/* buttons: one easing, a lift on hover, a press on click */
.ps button,.ps .askb,.ps .joinbtn,.ps .xag-add,.ps .more{transition:transform .12s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease}
.ps button:active:not(:disabled),.ps .askb:active,.ps .joinbtn:active{transform:translateY(1px) scale(.985)}
.ps .joinbtn:hover{box-shadow:0 8px 22px -10px rgba(53,201,208,.55)}
/* live dot (the book is live) */
.ps .xlv{position:relative}
.ps .xlv::before{content:"";position:absolute;left:-11px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--buy);box-shadow:0 0 0 0 rgba(60,203,142,.5)}
/* tick flash, new row slide-in, chart draw-in, skeleton */
@keyframes ps-up{0%{color:var(--buy);text-shadow:0 0 12px rgba(60,203,142,.35)}100%{}}
@keyframes ps-down{0%{color:var(--sell);text-shadow:0 0 12px rgba(235,95,85,.35)}100%{}}
@keyframes ps-rowup{0%{background-color:rgba(60,203,142,.14)}100%{background-color:transparent}}
@keyframes ps-rowdn{0%{background-color:rgba(235,95,85,.14)}100%{background-color:transparent}}
@keyframes ps-in{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@keyframes ps-pulse{0%{box-shadow:0 0 0 0 rgba(60,203,142,.5)}70%{box-shadow:0 0 0 6px rgba(60,203,142,0)}100%{box-shadow:0 0 0 0 rgba(60,203,142,0)}}
@keyframes ps-draw{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes ps-grow{0%{transform:scaleY(.2);opacity:0}100%{transform:none;opacity:1}}
@keyframes ps-shim{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes ps-sheet{0%{opacity:0;transform:translateY(24px)}100%{opacity:1;transform:none}}
@keyframes ps-fade{0%{opacity:0;transform:translateY(-3px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .ps .t-up{animation:ps-up .9s ease-out}
  .ps .t-down{animation:ps-down .9s ease-out}
  .ps tr.t-up>td{animation:ps-rowup 1.1s ease-out}
  .ps tr.t-down>td{animation:ps-rowdn 1.1s ease-out}
  .ps tr.r-in,.ps .r-in{animation:ps-in .38s cubic-bezier(.2,.8,.2,1) both}
  .ps tr.r-in>td{animation:ps-rowup 1.4s ease-out}
  .ps .xlv::before,.psa .ststrip.ok .sttag i{animation:ps-pulse 2.4s ease-out infinite}
  .ps .drawin svg path,.ps .drawin svg polyline,.ps .drawin svg line:not([stroke-dasharray]){animation:ps-draw .8s cubic-bezier(.3,.7,.2,1) both}
  .ps .drawin svg rect{transform-box:fill-box;transform-origin:50% 100%;animation:ps-grow .5s cubic-bezier(.2,.8,.2,1) both}
  .ps .chartbox svg:empty{background:linear-gradient(90deg,rgba(255,255,255,.015) 25%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.015) 75%);background-size:200% 100%;animation:ps-shim 1.6s linear infinite;border-radius:10px}
  .ps details[open]>:not(summary){animation:ps-fade .2s ease-out}
  .ps .xms-b:not([hidden]){animation:ps-fade .22s ease-out}
}
@media (prefers-reduced-motion:no-preference) and (max-width:640px){.ps .jm[open]{animation:ps-sheet .26s cubic-bezier(.2,.8,.2,1) both}}
@media (prefers-reduced-motion:reduce){.ps *,.ps *::before,.ps *::after{transition-duration:0s!important}}
/* Simple book: the last fill lives on the chart and in Activity, not again under the asks */
.ps #swapsopen tr.mid{display:none}