/* One readable reaction, even when approvals arrive in a flurry. */
.happiness-feedback {position:relative;--happiness-reaction:#a7f4d1}
.human-strip .human-metric.happiness-feedback b {
  transform-origin:left bottom;
  font-variant-numeric:tabular-nums;
  transition:color .22s ease,text-shadow .22s ease;
}
.human-strip .human-metric.happiness-feedback>.happiness-delta {
  position:absolute;top:-3px;right:0;display:block;margin:0;
  padding:4px 7px;border:1px solid currentColor;border-radius:5px;
  background:#173c34;color:var(--happiness-reaction);
  font:600 12px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:0;white-space:nowrap;pointer-events:none;z-index:1;
}
.human-strip .human-metric.happiness-feedback.happiness-up b {
  color:#b0ffdc;animation:happiness-lift .6s cubic-bezier(.22,.75,.3,1);
  text-shadow:0 0 19px #70e6b74d;
}
.human-strip .human-metric.happiness-feedback.happiness-down {--happiness-reaction:#e2aeb6}
.human-strip .human-metric.happiness-feedback.happiness-down b {
  color:#dfb4bd;animation:happiness-dip .55s ease-out;
}
.human-strip .human-metric.happiness-feedback.happiness-down>.happiness-delta {background:#392b39}
.human-strip .happiness-feedback.happiness-up .meter {box-shadow:0 0 0 2px #7fedbc1c,0 0 15px #7fedbc29}
.human-strip .happiness-feedback.happiness-down .meter {box-shadow:0 0 0 2px #d99aac1a}
.human-strip .happiness-feedback.happiness-down .meter>span {background:#c894a6}
.human-strip .happiness-feedback .meter {transition:box-shadow .25s ease}
.human-strip .happiness-feedback .meter>span {transition:width .2s ease,background-color .25s ease}
.human-strip .happiness-feedback.happiness-counting .meter>span {transition:background-color .25s ease}
.human-strip .happiness-feedback.happiness-big b {animation-name:happiness-perk}
.human-strip .human-metric.happiness-feedback.happiness-big>.happiness-delta {
  border-color:#d5f5bd;box-shadow:0 0 15px #a0eab739;
  animation:happiness-bonus .65s ease-out;
}
.human-strip .human-metric.happiness-feedback.happiness-big>.happiness-delta::before {content:'✦';margin-right:5px;color:#f5dd95}
.human-strip .human-metric.happiness-feedback.happiness-drift b {color:#9ebeb4}
@keyframes happiness-lift {0%{transform:translateY(0) scale(1)}30%{transform:translateY(-5px) scale(1.045)}100%{transform:translateY(0) scale(1)}}
@keyframes happiness-dip {0%{transform:translateY(0)}32%{transform:translateY(4px)}100%{transform:translateY(0)}}
@keyframes happiness-perk {0%{transform:translateY(0) scale(1)}35%{transform:translateY(-7px) scale(1.08)}70%{transform:translateY(1px) scale(.99)}100%{transform:translateY(0) scale(1)}}
@keyframes happiness-bonus {0%{opacity:.3;transform:translateY(8px) scale(.85)}65%{opacity:1;transform:translateY(-2px) scale(1.05)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:680px) {
  .human-strip .human-metric.happiness-feedback>.happiness-delta {top:-2px;padding:3px 5px;font-size:10px}
}
@media(prefers-reduced-motion:reduce) {
  .human-strip .human-metric.happiness-feedback b,
  .human-strip .human-metric.happiness-feedback>.happiness-delta,
  .human-strip .happiness-feedback .meter,
  .human-strip .happiness-feedback .meter>span {animation:none;transition:none}
}