/* Пожелание и референс к записи — один вид на четыре витрины.
 *
 * Цвета НЕ задаются: берутся у страницы через currentColor и прозрачность.
 * Так блок садится и на светлые «Карточки», и на тёмный «Разворот», не
 * заводя четвёртой копии палитры. Своё здесь только устройство.
 *
 * ГЛАВНОЕ — СНИМОК. Раньше до него вели два нажатия: сперва раскрыть блок,
 * потом найти мелкую кнопку «Приложить фото». В маникюре именно снимок и
 * есть главное действие на этом экране, поэтому он крупная плитка,
 * открывающая галерею одним касанием.
 */
.nx-note {
  margin: 14px 0 0;
  width: 100%;
  flex: 1 1 100%;
  display: grid;
  gap: 10px;
}

.nx-note-head { display: flex; align-items: baseline; gap: 8px; }
.nx-note-title { font-size: 15px; font-weight: 600; }
/* «Необязательно» сказано прямо: без этого слова пустое поле читается как
   требование, и человек уходит его заполнять вместо того, чтобы записаться. */
.nx-note-opt { font-size: 12.5px; opacity: .5; }

.nx-note-row { display: flex; align-items: center; gap: 12px; }
.nx-note-slotbox { position: relative; flex: 0 0 auto; }

/* 84 пикселя — палец попадает не глядя. Минимум для касания 44, но это
   основная цель на экране, и мелкая цель здесь читается как «необязательно
   и неважно». */
.nx-note-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 84px;
  height: 84px;
  border: 1px dashed rgb(128 128 128 / .45);
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, opacity .15s;
}
.nx-note-slot:hover { border-color: currentColor; }
.nx-note-slot.has { border-style: solid; border-color: rgb(128 128 128 / .28); }
.nx-note-slot.busy { opacity: .5; pointer-events: none; }

.nx-note-plus { font-size: 22px; line-height: 1; opacity: .55; }
.nx-note-word { font-size: 12px; opacity: .55; }
.nx-note-slot.has .nx-note-plus,
.nx-note-slot.has .nx-note-word { display: none; }

.nx-note-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Крестик поверх угла снимка: отдельная строка «Убрать» под картинкой
   уводила палец вниз и читалась как подпись к ней. */
.nx-note-drop {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(20 20 24 / .82);
  color: #fff;
  font: 600 15px/1 system-ui, sans-serif;
  cursor: pointer;
}

.nx-note-hint { margin: 0; font-size: 13px; line-height: 1.4; opacity: .62; }

.nx-note-text {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid rgb(128 128 128 / .32);
  border-radius: 14px;
  background: rgb(128 128 128 / .06);
  color: inherit;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  resize: vertical;
  transition: border-color .15s;
}
.nx-note-text:focus { outline: none; border-color: currentColor; }
.nx-note-text::placeholder { color: inherit; opacity: .42; }

/* Отказ пишем НА МЕСТЕ, а не всплывашкой: она гаснет через секунду, и
   человек остаётся с плиткой, которая «просто не сработала». */
.nx-note-bad { margin: 0; font-size: 13px; line-height: 1.4; color: #c0392b; }

/* ПОСЛЕДНЕЕ ПРАВИЛО ФАЙЛА.
   `display` из класса перебивает атрибут `hidden`, и снимок с крестиком
   показывались до того, как фото приложили. Правило скрытия обязано стоять
   после всех, иначе следующая добавленная строка снова его перекроет.
   Область ограничена блоком: глобальное `[hidden]` в общем файле поменяло
   бы поведение страницы, которая его подключила. */
.nx-note [hidden] { display: none; }