/* Sharing tools belong to the room, so both appearances use the same roles. */
.people-picker { color: var(--chrome-ink); margin: 12px 0 20px; font-family: var(--serif); }
.people-picker [hidden] { display: none !important; }
.people-field-label { display: grid; gap: 9px; font: 12px var(--sans); color: var(--chrome-muted); }
.people-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--chrome-border); border-radius: 7px; background: var(--chrome-bg-raised); color: var(--chrome-ink); font: 16px var(--sans); }
.people-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 20px 0 9px; font: 12px var(--sans); letter-spacing: .06em; }
.people-quiet, .people-remove { background: transparent; border: 0; color: var(--accent); font: 13px var(--sans); padding: 9px 5px; min-height: 40px; cursor: pointer; }
.people-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.people-pick { display: block; flex: 1; min-width: 0; text-align: left; border: 1px solid var(--chrome-border); border-radius: 8px; padding: 13px; background: var(--chrome-bg-raised); color: var(--chrome-ink); cursor: pointer; }
.people-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.people-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--chrome-border); border-radius: 50%; background: var(--chrome-bg); color: var(--chrome-ink); font: 14px var(--sans); overflow: hidden; position: relative; }
.people-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.people-words { min-width: 0; display: grid; gap: 4px; }
.people-name { overflow-wrap: anywhere; font: 20px/1.2 var(--serif); }
.people-meta, .people-status, .people-privacy { font: 12px/1.5 var(--sans); color: var(--chrome-muted); overflow-wrap: anywhere; }
.people-status { margin: 10px 0; }
.playlist-share-sheet textarea.people-note { font: 22px/1.4 var(--handwritten); }
.people-note-tools { display: flex; gap: 7px; }
.people-note-tools button { width: 44px; height: 44px; min-height: 44px; border-radius: 50%; padding: 0; font-size: 20px; background: var(--chrome-bg-raised); color: var(--chrome-ink); border: 1px solid var(--chrome-border); }
.people-privacy { margin: 13px 0 0; }
.people-confirmation { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 13px; border: 1px solid var(--chrome-border); border-radius: 8px; background: var(--chrome-bg-raised); margin-bottom: 13px; }
.people-save { display: flex !important; align-items: flex-start; gap: 10px; margin: 12px 0; color: var(--chrome-ink); font: 14px/1.5 var(--sans); cursor: pointer; }
.people-save input { width: 18px !important; min-height: 18px !important; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.people-save small { display: block; margin-top: 3px; font: 12px/1.5 var(--sans); color: var(--chrome-muted); }
.people-picker button:disabled { opacity: .55; cursor: default; }
.people-picker button:focus-visible, .people-picker input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.people-input::placeholder { color: var(--chrome-muted); opacity: 1; }
/* Small helper copy needs the tool's readable muted ink in the dark room. */
[data-theme="dark"] .people-picker { --chrome-muted: var(--tool-muted); --accent: var(--yd-action-warm); }
[data-theme="dark"] .people-privacy { color: var(--tool-muted); }
.shared-by-label .people-identity { display: inline-flex; vertical-align: middle; }
.shared-by-label .people-avatar { width: 28px; height: 28px; flex-basis: 28px; }
.shared-by-label .people-name { font-size: 14px; }
@media (pointer: coarse) { .people-quiet, .people-remove { min-height: 44px; } }
@media (max-width: 420px) { .people-name { font-size: 18px; } .people-row { flex-wrap: wrap; } .people-pick { flex-basis: 80%; } }