/* Who is here, and their sheet (src/ui/people-here.mjs; numbers-based branch):
   a stack of faces in the top bar that drops down the list. */
.here-face{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--stone-600);border-radius:var(--radius-round);background:var(--surface-low);color:var(--text);font:600 var(--size-small) var(--head);letter-spacing:.04em}
.here-face.big{width:56px;height:56px;font-size:var(--size-body)}
.here-face.foe{border-color:var(--danger)}
.here-face.hostile{border-color:var(--danger-600)}
.here-face.friend{border-color:var(--ok)}
.here-face.beaten{opacity:.5}
.here-health{display:block;width:38px;height:4px;border-radius:var(--radius-pill);background:var(--stone-800);overflow:hidden}
.here-health span{display:block;height:100%;background:linear-gradient(90deg,var(--health-from),var(--health-to))}
.top-actions .here-button{display:flex;align-items:center;gap:var(--space-3);width:auto;height:44px;padding:0 10px 0 5px;border-color:var(--stone-850);border-radius:var(--radius-pill);background:var(--surface);color:var(--text-soft)}
.top-actions .here-button[hidden]{display:none}
.top-actions .here-button[aria-expanded=true]{border-color:var(--accent);background:var(--accent-950)}
.here-stack{display:flex}
.here-stack .here-face{width:28px;height:28px;font-size:var(--size-tiny);letter-spacing:0;background:var(--surface-low);box-shadow:0 0 0 2px var(--surface)}
.here-stack .here-face+.here-face{margin-left:-5px}
.here-more{font:600 var(--size-label) var(--head);font-variant-numeric:tabular-nums}
.here-list{position:absolute;top:calc(100% + 6px);right:max(12px,env(safe-area-inset-right));z-index:30;width:min(340px,calc(100vw - 24px));max-height:min(60vh,440px);overflow-y:auto;overscroll-behavior:contain;padding:6px;background:var(--surface);border:1px solid var(--accent-850);border-radius:var(--radius-xl);box-shadow:0 14px 30px rgb(var(--black-rgb) / .55)}
.here-list[hidden]{display:none}
.here-list ul{margin:0;padding:0;list-style:none}
.here-row{display:flex;align-items:center;gap:var(--space-5);width:100%;min-height:56px;padding:6px 8px;border:0;border-radius:var(--radius-lg);background:none;color:var(--text);text-align:left}
.here-row:hover,.here-row:focus-visible{background:var(--accent-950)}
.here-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.here-row-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 var(--size-body) var(--head)}
.here-row-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim);font:400 var(--size-label) var(--head)}
.here-row.beaten .here-row-text{opacity:.6}
.here-row-health{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.here-row-health small{color:var(--text-dim);font:600 var(--size-caption) var(--head);font-variant-numeric:tabular-nums}
.here-row-health .here-health{width:56px}
.person-sheet .dialog-card{max-width:420px}
.sheet-top{display:flex;align-items:center;gap:var(--space-5);margin-bottom:10px}
.sheet-title{margin:0;color:var(--text-soft)}
.sheet-tier{margin:4px 0 0}
.sheet-tier small{color:var(--text-dim)}
.sheet-tier .pill{display:inline-block}
.sheet-tier .tier-weak{background:var(--stone-700);color:var(--text)}
.sheet-tier .tier-elite,.sheet-tier .tier-deadly{background:var(--danger-700);color:var(--danger-100)}
.sheet-row{display:flex;justify-content:space-between;gap:var(--space-4);padding:6px 0;border-top:1px solid var(--stone-850)}
.sheet-row span{color:var(--text-dim)}
.sheet-row b{font-weight:500;text-align:right;color:var(--text)}
.sheet-row b.neg{color:var(--danger)}
.sheet-row b.pos{color:var(--ok)}
.sheet-health{height:6px;margin:0 0 6px;border-radius:var(--radius-pill);background:var(--stone-800);overflow:hidden}
.sheet-health span{display:block;height:100%;background:linear-gradient(90deg,var(--health-from),var(--health-to))}
.sheet-threat{margin:0 0 8px;color:var(--text-dim);font-size:var(--size-small)}
.sheet-bond{position:relative;height:6px;margin:2px 0 8px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--danger-700),var(--stone-750) 50%,var(--ok))}
.sheet-bond .mid{position:absolute;left:50%;top:-2px;width:1px;height:10px;background:var(--stone-500)}
.sheet-bond .mark{position:absolute;top:-4px;width:14px;height:14px;margin-left:-7px;border:2px solid var(--surface);border-radius:var(--radius-round);background:var(--text)}
.sheet-about{margin:10px 0 0;color:var(--text-soft);font-style:italic}
.person-say{display:flex;gap:var(--space-3);margin-top:12px}
.person-say[hidden]{display:none}
.person-say input{flex:1;min-width:0}