/* §16 — feedback the player can see without opening the record */
#toasts{position:fixed;right:14px;bottom:14px;z-index:60;display:flex;flex-direction:column;gap:6px;
  align-items:flex-end;pointer-events:none;max-width:min(380px,70vw)}
.toast{font-family:var(--mono);font-size:11px;line-height:1.4;color:#cfe3ff;background:rgba(0,26,42,.94);
  border:1px solid #073e5f;border-left:3px solid var(--blue);padding:6px 10px;
  animation:toastIn .18s ease-out, toastOut .4s ease-in 9s forwards;pointer-events:auto;cursor:pointer}
.toast:hover{animation-play-state:paused}
.toast b{letter-spacing:.12em;font-size:9.5px;color:var(--yellow);margin-right:8px;text-transform:uppercase}
.toast.good{border-left-color:#7dff9b}.toast.red{border-left-color:#ff8a6b}.toast.amber{border-left-color:#c8912f}
@keyframes toastIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.toast{animation:toastOut .01s linear 9.4s forwards}}
/* number keys: the digit is printed on the button it presses */
#choices,#acts,#probes{counter-reset:hk}
#choices button,#acts>button,#probes button{counter-increment:hk}
#choices button::after,#acts>button::after{content:counter(hk);float:right;margin-left:10px;
  font-family:var(--mono);font-size:9px;color:#3c5a70;border:1px solid #173a52;padding:0 4px;border-radius:2px}
button:active:not(:disabled){transform:translateY(1px)}
#notes .nr{display:flex;gap:8px;align-items:baseline;padding:3px 0;font-size:12px;color:#cfe3ff}
#notes .nr i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#7f97b5;flex:0 0 62px}
#notes .nr.warn{color:#ffb08a}
/* THE WHEEL. Every card was its own scroll box with overscroll contained, and the
   columns did not scroll at all: so the wheel did nothing over the picture, and a
   long scene crushed the dialogue into a slot. Now the COLUMN scrolls, cards keep
   their height, and the wheel works wherever the pointer is. */
@media(min-width:961px){
  #l,#m{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#0b3a57 transparent}
  #l>.card,#m>.card{flex-shrink:0;overflow:visible;overscroll-behavior:auto}
  /* the record: one scroll box (the list), not two. the card keeps its height
     so the picture above and the table below never shove it out of view */
  #m>#feed{flex:0 0 auto;max-height:none;overflow:visible}
  #m>#feed #feedBody{flex:0 0 auto;height:clamp(140px,26vh,300px);overflow-y:auto;overscroll-behavior:auto;
    scrollbar-width:thin;scrollbar-color:#0b3a57 transparent}
  #scene{width:var(--sceneW,100%);align-self:center}
  /* what you can answer stays on screen while the text above it scrolls */
  #sitBox #choices{position:sticky;bottom:-1px;z-index:3;background:var(--navy-2);padding:8px 0 3px;
    box-shadow:0 -12px 12px -10px rgba(0,8,18,.85)}
}
/* THE BANDS. A strip you drag. One under the picture (bigger picture / more room to
   read), one under the roster (more names / more talk). Double-click puts it back. */
.band{flex:0 0 9px;margin:-5px 0;cursor:ns-resize;position:relative;z-index:5;touch-action:none}
.band::before{content:"";position:absolute;left:30%;right:30%;top:3px;height:3px;border-radius:2px;
  background:repeating-linear-gradient(90deg,#0b3a57 0 6px,transparent 6px 10px);transition:background .12s}
.band:hover::before,.band.drag::before{background:repeating-linear-gradient(90deg,var(--yellow) 0 6px,transparent 6px 10px)}
/* a grip in the middle, so it reads as something you can take hold of */
.band::after{content:"\21D5";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22px;height:14px;line-height:13px;text-align:center;font-size:11px;color:#5f96bd;
  background:var(--navy,#001A2A);border:1px solid #0b3a57;border-radius:3px;transition:color .12s,border-color .12s}
.band:hover::after,.band.drag::after{color:var(--yellow);border-color:var(--yellow)}