/* Пожелание и референс к записи — один вид на четыре витрины.
 *
 * Цвета НЕ задаются: берутся у страницы через 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; }

/* СНИМОК К ОТЗЫВУ — строка, а не плитка (владелец, 09.10: «чтобы много
   места не занимало на витрине»). 36 пикселей — меньше строки поля ввода,
   но палец попадает: вся кнопка с подписью и есть цель. */
.nx-shot { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.nx-shot-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 4px;
  border: 1px dashed rgb(128 128 128 / .45);
  border-radius: 999px;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, opacity .15s;
}
.nx-shot-pick:hover { border-color: currentColor; }
.nx-shot-pick.has { border-style: solid; border-color: rgb(128 128 128 / .28); }
.nx-shot-pick.busy { opacity: .5; pointer-events: none; }
.nx-shot-plus {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  opacity: .55;
}
.nx-shot-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.nx-shot-word { opacity: .7; }
.nx-shot-drop {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .55;
  font: 500 18px/1 system-ui, sans-serif;
  cursor: pointer;
}
.nx-shot [hidden] { display: none; }

/* АНКЕТА — ОДНА КАРТОЧКА ОДНОЙ ВЫСОТЫ (16.10).
   Вопрос крупно, варианты — кнопками на палец, внизу «Назад · точки ·
   Пропустить». Цвета по-прежнему от страницы: рамка и заливка —
   прозрачностью, выбранное — обводкой в цвет текста. */
.nx-ask {
  margin: 14px 0 0;
  width: 100%;
  flex: 1 1 100%;
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgb(128 128 128 / .26);
  border-radius: 18px;
  background: rgb(128 128 128 / .05);
}
.nx-ask-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.nx-ask-k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.nx-ask-n { font-size: 12.5px; opacity: .5; font-variant-numeric: tabular-nums; }
.nx-ask-q { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.nx-ask-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-ask-opt {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgb(128 128 128 / .36);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.nx-ask-opt:hover { border-color: currentColor; }
.nx-ask-opt.on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; background: rgb(128 128 128 / .12); font-weight: 600; }
.nx-ask-opt:disabled { opacity: .5; pointer-events: none; }
.nx-ask-opt:focus-visible, .nx-ask-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nx-ask-line { display: flex; gap: 8px; }
.nx-ask-in {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid rgb(128 128 128 / .32);
  border-radius: 999px;
  background: rgb(128 128 128 / .06);
  color: inherit;
  font: inherit;
  font-size: 15px;
}
.nx-ask-in:focus { outline: none; border-color: currentColor; }
.nx-ask-in::placeholder { color: inherit; opacity: .42; }
.nx-ask-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.nx-ask-link {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  opacity: .62;
  cursor: pointer;
  transition: opacity .15s;
}
.nx-ask-link:hover { opacity: 1; }
.nx-ask-nav .nx-ask-link:last-child { margin-left: auto; }
.nx-ask-dots { display: inline-flex; gap: 5px; }
.nx-ask-dots i { width: 6px; height: 6px; border-radius: 99px; background: currentColor; opacity: .2; transition: width .15s, opacity .15s; }
.nx-ask-dots i.done { opacity: .5; }
.nx-ask-dots i.on { width: 16px; opacity: .9; }
.nx-ask-sum { margin: 0; display: grid; gap: 6px; }
.nx-ask-sum dt { font-size: 12.5px; opacity: .55; }
.nx-ask-sum dd { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.nx-ask-none { margin: 0; font-size: 14px; opacity: .62; }
.nx-ask [hidden] { display: none; }

/* Промокод — строкой под пожеланием; итог проверки — на месте. */
.nx-promo { display: grid; gap: 8px; justify-items: start; }
.nx-promo .nx-ask-line { width: 100%; }
.nx-promo-in { text-transform: uppercase; letter-spacing: .06em; }
.nx-promo-said { margin: 0; font-size: 13.5px; line-height: 1.4; }
.nx-promo-said.bad { color: #c0392b; }

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