/* The Happiness plaque lives in the top bar (hud.css). Its panel drops down under it and holds the summary, what helps,
   what pulls the streets down and a few tips. Paper card like the other hover cards. */
#hp-panel{position:absolute;top:calc(100% + 14px);left:0;z-index:26;width:340px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:14px 16px 16px;max-height:calc(100vh - var(--hud-bottom,108px) - 24px);overflow:auto;overscroll-behavior:contain}
.chip.hp.open{box-shadow:0 4px 0 var(--action),0 0 0 3px var(--action)}
#hp-panel .hp-level{margin:0;font-family:var(--display);font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:21px;color:var(--sky-ink)}
#hp-panel .hp-summary{margin:2px 0 0;font-size:14px;line-height:1.3;color:var(--ink-soft);font-weight:600}
#hp-panel .hp-section{margin-top:12px}
#hp-panel h4{margin:0 0 4px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
#hp-panel .hp-list,#hp-panel .hp-tips{margin:0;padding:0;list-style:none;font-size:14px;line-height:1.3}
#hp-panel .hp-list li{padding:3px 0 3px 16px;position:relative}
#hp-panel .hp-list li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--sage-d)}
#hp-panel .hp-section:nth-of-type(2) .hp-list li::before{background:var(--coral)}
#hp-panel .hp-tips li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1.5px dashed rgba(43,38,32,.2)}
#hp-panel .hp-tips li:last-child{border-bottom:0}
#hp-panel .hp-quiet{margin:0;font-size:14px;color:var(--ink-soft)}
#hp-panel .hp-show{flex:0 0 auto;height:32px;padding:0 12px;border-radius:11px;border:2px solid var(--ink);background:var(--paper-2);font-weight:800;font-size:13px;box-shadow:0 2px 0 var(--ink)}
#hp-panel .hp-show:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink)}