/* PICK-LIVE: the open position, marked against the live book. Pairs with assets/pick-live.js. */
.pl{margin:22px 0;border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:16px;background:var(--paper);overflow:hidden}
.pl-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.pl-h{margin:0;font:800 16px/1.2 var(--sans);color:var(--ink)}
.pl-dot{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pl-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
[data-pl-state="live"] .pl-dot::before{background:var(--gain);box-shadow:0 0 0 3px color-mix(in srgb,var(--gain) 22%,transparent)}
[data-pl-state="live"] .pl-dot{color:var(--gain)}
@media (prefers-reduced-motion:no-preference){[data-pl-state="live"] .pl-dot::before{animation:pl-pulse 2.4s ease-in-out infinite}}
@keyframes pl-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;background:var(--line)}
.pl-c{background:var(--paper);padding:14px 18px}
.pl-k{margin:0;font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pl-v{margin:8px 0 0;font:800 25px/1.05 var(--cond);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-v--sm{font-size:21px}
.pl-v.is-gain{color:var(--gain)}.pl-v.is-drop{color:var(--drop)}
.pl-s{margin:6px 0 0;font:500 12.5px/1.4 var(--sans);color:var(--ink-3)}
.pl-s.is-gain{color:var(--gain)}.pl-s.is-drop{color:var(--drop)}
.pl-c--wide{grid-column:span 2}
.pl-fine{margin:0;padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2);font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.pl-fine b{color:var(--ink-2)}
@media (max-width:560px){.pl-c--wide{grid-column:span 1}.pl-v{font-size:23px}}

/* A moved number flashes in the direction it moved, and carries an arrow so the
   direction is never colour alone. Motion is gated; the arrow and the value are not. */
.pl-up,.pl-dn{border-radius:6px;padding-left:3px;padding-right:3px;margin-left:-3px;margin-right:-3px}
.pl-up::after,.pl-dn::after{margin-left:5px;font-size:.62em;vertical-align:.18em;font-weight:800}
.pl-up::after{content:"\25B2";color:var(--gain)}
.pl-dn::after{content:"\25BC";color:var(--drop)}
@media (prefers-reduced-motion:no-preference){
  .pl-up{animation:pl-up 1.4s ease-out}
  .pl-dn{animation:pl-dn 1.4s ease-out}
}
@media (prefers-reduced-motion:reduce){
  .pl-up{background:var(--gain-soft)}
  .pl-dn{background:var(--drop-soft)}
}
@keyframes pl-up{0%{background:var(--gain-soft)}70%{background:var(--gain-soft)}100%{background:transparent}}
@keyframes pl-dn{0%{background:var(--drop-soft)}70%{background:var(--drop-soft)}100%{background:transparent}}

/* Our own line on the ladder: which side we are on and how much of it we hold. */
.pl-mine{display:block;margin-top:5px;font:700 11px/1.35 var(--sans);letter-spacing:.02em;color:var(--brand-ink)}
.pl-mine span{display:inline-block;margin-right:7px;padding:2px 7px;border-radius:999px;background:var(--brand-soft);
  font:800 10px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase}