/* ── Аватар: инициалы сразу, фото поверх (components/avatar-fallback.js) ─────────────────────────────
   Размер — через --av; при ошибке загрузки фото убирается скриптом, и остаются инициалы. */
.av {
  --av: 32px;
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--av); height: var(--av); border-radius: 999px; box-sizing: border-box;
  background: var(--tint-accent-av); color: var(--accent-hover);
  font-family: var(--font-display); font-weight: 700; font-size: calc(var(--av) * .36); line-height: 1;
}
.av__i { pointer-events: none; }
.av__img { opacity: 0; transition: opacity .18s; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; background: var(--tint-accent-av); }
.av__img--ok { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .av__img { transition: none; } }
.av--sm { --av: 28px; }
.av--md { --av: 40px; }
.av--lg { --av: 56px; }

/* Редактор фото сотрудника (components/photo-editor.js) */
.pe { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pe-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pe-hint { flex-basis: 100%; font-size: 12px; color: var(--text-muted); }
.pe-crop { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pe-canvas { width: 240px; height: 240px; max-width: 100%; border-radius: 50%; border: 1px solid var(--border-default); background: var(--surface-raised, var(--bg-secondary)); cursor: grab; touch-action: none; }
.pe-canvas:active { cursor: grabbing; }
.pe-zoom { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }

/* Выбор должности из справочника (components/position-picker.js) */
.pp-pick { position: relative; }
.pp-pick__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.pp-pick__ph { color: var(--text-muted); }
.pp-pick__panel { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); padding: 8px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px); background: var(--surface-raised, var(--surface-primary)); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.pp-pick__list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; }
.pp-pick__opt { text-align: left; padding: 7px 9px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; border-radius: 6px; cursor: pointer; }
.pp-pick__opt:hover { background: color-mix(in srgb, var(--accent-primary) 8%, transparent); }
.pp-pick__opt--on { font-weight: 600; color: var(--accent-primary); }
.pp-pick__opt--add { color: var(--accent-primary); border-top: 1px solid var(--border-subtle); border-radius: 0 0 6px 6px; }
.pp-pick__empty { padding: 8px 9px; font-size: 13px; color: var(--text-muted); }
.pp-pick__add { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.pp-pick__add-actions { display: flex; gap: 8px; }

.pp-pick__note { margin: 4px 2px 0; font-size: 12px; color: var(--text-muted); }

/* Аватар-кнопка «сменить фото» (components/avatar-photo.js): при наведении и фокусе поверх фото — значок камеры */
.avx { position: relative; flex: none; display: inline-flex; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; color: inherit; line-height: 0; }
.avx__cam {
  position: absolute; inset: 0; border-radius: inherit; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .52); color: #fff; opacity: 0; transition: opacity .15s; pointer-events: none;
}
.avx:hover .avx__cam, .avx:focus-visible .avx__cam { opacity: 1; }
.avx:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
@media (hover: none) { .avx::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-primary); border: 2px solid var(--surface-primary, var(--bg-secondary)); } }
@media (prefers-reduced-motion: reduce) { .avx__cam { transition: none; } }