/* Настройки профиля: снимок, имя, адрес страницы.

   Экран растёт: за названием придут описание, вид деятельности,
   контакты. Поэтому здесь нет ни одной внешней подписи над полем —
   подпись живёт внутри рамки (components/field-stack.css), а высота
   строки настройки равна высоте поля и больше ничему.

   Верхняя строка со снимком сделана по тому же правилу: подпись
   «ФОТО» и кнопка «Сменить фото» занимали три этажа ради одного
   действия. Аватарка со значком камеры — одна строка и одно нажатие,
   и такую строку узнают, не читая. */

/* ── Снимок ──────────────────────────────────────────────────── */

/* Верхняя строка: снимок слева, «Сохранить» у правого края.

   Главное действие экрана стоит здесь, а не внизу отдельной полосой.
   Полоса внизу хороша, пока настройка одна; настроек станет десяток,
   и до кнопки придётся прокручивать. Наверху она видна всегда
   и не спорит с содержимым — строка со снимком и без неё была
   наполовину пустой. */
.photo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Снимок с подписью — кнопка: попасть надо пальцем, а не в значок
   размером с ноготь. Значок остаётся, но он объясняет, а не ловит
   нажатие. */
.photo__pick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Круг пустой, пока снимка нет: место под него держится уже сейчас,
   иначе строка подпрыгнет, когда снимок появится. Ростом с поле —
   так верх экрана читается как первая строка списка, а не как шапка. */
.photo__circle {
  position: relative;
  flex: none;
  width: 14.9cqw;
  height: 14.9cqw;
  border-radius: 50%;
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  transition: border-color var(--fast) var(--ease);
}

/* Значок камеры сидит на краю круга и вырезан из него ободком цвета
   страницы — иначе на светлом снимке он растворяется. */
.photo__badge {
  position: absolute;
  right: -0.5cqw;
  bottom: -0.5cqw;
  display: grid;
  place-items: center;
  width: var(--sp-6);
  height: var(--sp-6);
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--bg-page);
}

.photo__badge .icon {
  width: var(--fs-sm);
  height: var(--fs-sm);
}

.photo__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.photo__name {
  font-size: var(--fs-md);
  font-weight: 600;
}

.photo__note {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.photo__pick:active .photo__circle { border-color: var(--accent-dim); }

/* Кнопка копирования у самого значения: копируют то, что видят.
   Значком без подписи — подпись заняла бы строку, а «два листа»
   понимают все. Работает и когда адрес закрыт: менять нельзя,
   а называть и пересылать его нужно как раз тогда. */
.field__copy {
  flex: none;
  width: var(--sp-8);
  height: var(--sp-8);
  margin-right: calc(var(--sp-2) * -1);
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}

.field__copy .icon {
  width: var(--fs-md);
  height: var(--fs-md);
}

.field__copy:active { background: var(--surface-2); }

/* ── Адрес страницы ──────────────────────────────────────────── */

/* Приставка перед полем: она не значение, а часть подписи, и спорить
   по весу с набранным словом не должна. */
.field__prefix--dim {
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: normal;
  color: var(--text-faint);
}

/* Подсказка под полем: спокойная — серая, тревожная — красная.
   Место у неё одно, поэтому строка не прыгает при ошибке. */
.hint__say { color: inherit; }
.hint__say--bad { color: var(--danger); }

/* Наведение только там, где есть мышь: на телефоне hover залипает
   после касания и оставляет строку подсвеченной. */
@media (hover: hover) {
  .photo__pick:hover .photo__circle { border-color: var(--accent-dim); }
  .field__copy:hover { color: var(--accent-text); background: var(--surface-2); }
}