/* entities_v3.css — хвиля 2 редизайну (fund/institution/person profile).
   МІНІМАЛЬНИЙ шар: усе структурне (ss-glass/ss-surface/ss-table/ss-tag/ss-seg/
   ss-toc/tv3-logo/tv3-note/.exp/.sec) уже дає design-system.css + ticker_v3.css
   (сторінки сутностей підключають ОБИДВА поруч із цим файлом — UI-KIT.md).
   Тут лише те, чого не було в жодному з двох джерел: аватар особи, бар
   sector-breakdown, чіп-фільтр сектора портфеля (JS-toggle, множинний вибір
   з лічильниками — інший контракт ніж .ss-seg/.cc-chip), пошук-інпут
   портфеля інституції, quiet-стан «дані недоступні».
*/

/* ---------- аватар особи (кругле фото, на відміну від .tv3-logo — квадрат) ---------- */
.ev3-avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .22);
}

/* ---------- сектор-бар (fund/institution sector breakdown) ---------- */
.ev3-bar-row { display: flex; align-items: center; gap: 12px; }
.ev3-bar-label { flex: 0 0 auto; width: 156px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-2); }
.ev3-bar-track { flex: 1 1 auto; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.ev3-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--petrol-200); }
.ev3-bar-fill.is-muted { background: rgba(255, 255, 255, .2); }
.ev3-bar-pct { flex: 0 0 auto; width: 54px; text-align: end; }

/* ---------- чіп-фільтр сектора (портфель інституції, JS aria-pressed toggle) ---------- */
.ev3-chip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  padding: 6px 12px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(255, 255, 255, .055); color: var(--text-3);
  box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .16);
  transition: background var(--react), color var(--react);
}
.ev3-chip:hover { color: var(--text); }
.ev3-chip[aria-pressed="true"] { background: var(--petrol-600); color: var(--text); font-weight: 600; }

/* ---------- пошук у щільній таблиці (портфель інституції) ---------- */
.ev3-search-wrap { position: relative; max-width: 300px; }
.ev3-search-wrap svg { position: absolute; inset-inline-start: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-faint); }
.ev3-search {
  width: 100%; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .055);
  box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .2); color: var(--text);
  font: inherit; font-size: 12.5px; padding-block: 9px; padding-inline: 34px 14px;
}
.ev3-search::placeholder { color: var(--text-faint); }
.ev3-search:focus { outline: 2px solid var(--petrol-200); outline-offset: 1px; }

/* ---------- muted inline-статус (sort-loading, порожні "quiet" рядки) ---------- */
.ev3-status { font-size: 11.5px; color: var(--text-faint); }
.ev3-status[hidden] { display: none; }

/* ---------- клікабельний заголовок таблиці (портфель інституції, сортування колонок) ----------
   Той самий контракт, що старий .sort-btn/.sort-ind (input.css) — напрямок
   малює ЛИШЕ th[aria-sort], жодного гліфа в JS (guardrails: no strings in JS). */
.ev3-sortbtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: inherit; font: inherit; }
.ev3-sortbtn .sort-ind { display: inline-block; width: .7em; text-align: center; opacity: .8; }
.ev3-sortbtn .sort-ind::after { content: ""; font-size: .7em; }
th[aria-sort="ascending"] .sort-ind::after { content: "\25B2"; }
th[aria-sort="descending"] .sort-ind::after { content: "\25BC"; }