/* People in a picture: the picture with a labelled box on each named face, and a chip per person.
 * Colours only from the tokens in styles.css (the boxes sit on the picture, so they use the slate frame's colours). */
.pp-figure { margin: 0 0 12px; display: flex; justify-content: center; background: var(--mam-slate); border-radius: var(--radius-sm); padding: 8px; }
.pp-frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.pp-frame img { display: block; max-width: 100%; max-height: 360px; width: auto; height: auto; border-radius: 4px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pp-box { position: absolute; padding: 0; margin: 0; background: transparent; border: 2px solid var(--mam-slate-text); border-radius: 4px; box-shadow: 0 0 0 1px var(--mam-slate-veil); cursor: pointer; line-height: 1.2; }
.pp-box .pp-name { position: absolute; left: -2px; top: 100%; margin-top: 2px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--mam-slate-text); background: var(--mam-slate-veil); padding: 1px 4px; border-radius: 4px; pointer-events: none; }
.pp-box:hover, .pp-box:focus-visible, .pp-box.lit { border-color: var(--ot-accent); box-shadow: 0 0 0 1px var(--mam-slate-veil), 0 0 0 4px var(--mam-tint); outline: none; }
.pp-box:hover .pp-name, .pp-box:focus-visible .pp-name, .pp-box.lit .pp-name { background: var(--ot-accent); color: var(--ot-text-on-accent); }
.pp-chips { margin: 4px 0 8px; }
.pp-chips .chip.lit { border-color: var(--ot-accent); background: var(--mam-tint); }
.chip .pp-from { font-size: 11px; color: var(--ot-muted); margin-left: 2px; }
.chip.pp-marked .chip-text::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border: 1.5px solid currentColor; border-radius: 2px; vertical-align: 1px; opacity: 0.6; }
.pp-note { font-size: 12px; margin: 4px 0 0; }
.chip.pp-count { gap: 3px; }
.chip.pp-count svg { width: 12px; height: 12px; }
@media (max-width: 600px) { .pp-frame img { max-height: 260px; } .pp-box .pp-name { max-width: 110px; } }