/* #problem: the queue of open signals nobody gets to, and what a generic voicebot does not know. Uses base.css .sp. */
#problem .sp-t > p + p{color:var(--ink)}
#problem .pb-in{padding:8px 0 0}
#problem .pb-head,#problem .pb-rows li{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,.62fr) minmax(0,.66fr);gap:12px;align-items:center;padding:0 22px}
#problem .pb-head{height:34px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#problem .pb-rows li{min-height:60px;border-top:1px solid var(--line-soft)}
#problem .pb-sig{display:flex;align-items:center;gap:10px;min-width:0;font-size:14px;font-weight:500;line-height:1.35;color:var(--ink)}
#problem .pb-sig i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}
#problem .pb-who{display:flex;flex-direction:column;min-width:0}
#problem .pb-who b{font-size:14px;font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#problem .pb-who small{font-size:12.5px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#problem .pb-age{font-size:13.5px;font-weight:500;color:var(--orange-ink);white-space:nowrap}
#problem .pb-st{justify-self:start;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px dashed #c5cdd8;font-size:12.5px;color:var(--muted);white-space:nowrap}
#problem .pb-bot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:4px;padding:18px 22px 20px;border-top:1px solid var(--line-soft);background:var(--soft)}
#problem .pb-bot b{font-size:14px;font-weight:600}
#problem .pb-bot ul{display:flex;flex-wrap:wrap;gap:8px}
#problem .pb-bot li{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--body);white-space:nowrap}
#problem .pb-bot li::before{content:"";width:10px;height:10px;flex:none;
  background:linear-gradient(45deg,transparent 42%,var(--red) 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--red) 42% 58%,transparent 58%)}

/* Rows age in: the waiting time is the point, so it lands last on each row */
.motion #problem .pb-rows li{transition:opacity .6s var(--ease),translate .7s var(--ease);transition-delay:calc(.25s + var(--k) * .12s)}
.motion #problem .pb-v:not(.is-in) .pb-rows li{opacity:0;translate:0 10px}
.motion #problem .pb-age{transition:opacity .5s ease calc(.75s + var(--k) * .12s)}
.motion #problem .pb-v:not(.is-in) .pb-age{opacity:0}

@media (max-width:640px){
  #problem .pb-head{display:none}
  #problem .pb-in{padding:0}
  #problem .pb-rows li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sig age" "who st";gap:4px 12px;padding:12px 16px}
  #problem .pb-rows li:first-child{border-top:0}
  #problem .pb-sig{grid-area:sig}
  #problem .pb-who{grid-area:who;padding-left:19px}
  #problem .pb-age{grid-area:age;justify-self:end;font-size:13px}
  #problem .pb-st{grid-area:st;justify-self:end;height:24px;font-size:12px}
  #problem .pb-bot{padding:16px}
  #problem .pb-bot li{white-space:normal;height:auto;min-height:30px;padding:4px 12px 4px 10px}
}