/* Стили выбора людей и карточки человека. Владелец — по карте слотов 00-plan §4; цвета только из theme.css. */

/* The picker of people (features/people/picker.js): one field with the chosen as chips inside it; while it is open, the
   list of whom to add over the page, pinned under the field (shared/pin.js); under the field, the quick row. A phone
   keeps the list in the page, under the field. */
.pp.w-popwrap { position: relative; display: flex; flex-direction: column; gap: 8px; }
.pp-field { cursor: text; }
.pp-field.is-all { max-height: 132px; overflow-y: auto; }
.pp-chip { max-width: 100%; min-width: 0; }
.pp-chip-open { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 0; color: inherit; font: inherit; }
.pp-chip-text { min-width: 0; max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pp-chip-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
.pp-chip-ic .w-i { width: 13px; height: 13px; }
.pp-chip.is-partial .pp-chip-ic { background: var(--card); color: var(--muted-foreground); }
.pp-chip-tag { flex-shrink: 0; padding: 0 6px; border-radius: 8px; background: var(--card); font-size: 11px; line-height: 18px; color: var(--muted-foreground); }
.pp-chips-more { height: 28px; padding: 0 10px; border-radius: 14px; background: var(--secondary); color: var(--foreground); font-size: 13px; font-weight: 500; }
.pp-chips-more:hover { background: var(--hover); }

.pp-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--w-pop-shadow); }
.pp-done { display: none; }
.pp-head { margin: 8px 10px 2px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--muted-foreground); }
.pp-done + .pp-head { margin-top: 2px; }
.pp-row.is-active { background: var(--hover); }
.pp-row[aria-disabled="true"] { cursor: default; color: var(--muted-foreground); }
.pp-row[aria-disabled="true"]:hover { background: none; }
.pp-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-copy b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-copy small { font-size: 13px; line-height: 18px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-gic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); }
.pp-gic .w-i { width: 16px; height: 16px; }
.pp-row[aria-disabled="true"] .pp-gic { background: var(--secondary); color: var(--muted-foreground); }
.pp-tag { flex-shrink: 0; padding: 0 8px; border-radius: 10px; background: var(--secondary); font-size: 12px; line-height: 20px; color: var(--body); }
.pp-mark { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--primary-foreground); }
.pp-row[aria-selected="true"] .pp-mark { background: var(--primary); border-color: var(--primary); }
.pp-mark .w-i { width: 12px; height: 12px; stroke-width: 3; }
.pp-none, .pp-more { margin: 6px 10px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }

/* One row under the field at any width: what does not fit is a scroll away, faded at the edge. A mask reads only the
   alpha of its colour, so any opaque token does. */
.pp-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, var(--foreground) calc(100% - 24px), transparent); mask-image: linear-gradient(to right, var(--foreground) calc(100% - 24px), transparent); }
.pp-quick::-webkit-scrollbar { display: none; }
.pp-quick-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: 32px; padding: 0 12px 0 8px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 13px; }
.pp-quick-chip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pp-quick-chip:hover { background: var(--hover); }
.pp-quick-chip .w-i { width: 14px; height: 14px; color: var(--muted-foreground); }

@media (max-width: 760px) {
  /* The field goes to the top when its list opens (picker.js setOpen), clear of a sticky head of the window. */
  .pp-field { scroll-margin-top: 56px; }
  .pp-pop { position: static; max-height: none; padding-top: 0; box-shadow: none; }
  .pp-done { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: 6px 0; background: var(--card); }
  .pp.is-open .pp-quick { display: none; }
  .pp-quick { margin-right: -16px; padding-right: 16px; }
  .pp-quick-chip { height: 40px; border-radius: 12px; }
}

/* The card of a person (features/people/card.js). */
.pc-head { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.pc-copy { min-width: 0; }
.pc .w-sheet-note { margin-top: 16px; }