/* ============================================================================
   Экран «Мой день» — личный список выездов геодезиста. ТОЛЬКО специфика экрана:
   шрифт, цвета, кнопки, поля, плашки и знаки берутся из styles/base.css, он же
   подключается первым. Фундамент здесь НЕ дублируется и не правится — он общий
   с «Загрузкой КИ» и лежит в обоих приложениях байт-в-байт.

   ЧЕМ ЭТОТ ЭКРАН ОТЛИЧАЕТСЯ ОТ ОСТАЛЬНЫХ. Это телефон в поле, а не суженная
   таблица диспетчера: одна колонка, крупные цели под палец, читаемость на
   солнце, минимум нажатий до телефона контакта и до адреса.

   Отсюда единственная вольность — ПЕРЕОПРЕДЕЛЕНИЕ РАЗМЕРНЫХ ТОКЕНОВ на самом
   экране (.myday-page ниже). Значения фундамента отмерены под мышь и плотный
   экран: 13 px текста и 32 px высота контрола на вытянутой руке в солнечный
   день не читаются и не попадаются пальцем. Переопределены ТОЛЬКО кегли и
   высоты; палитра, форма, тени и правила компонентов остаются общими, поэтому
   кнопка, плашка и метка тут — те же самые, просто крупнее. Своих копий
   .btn/.badge/.note в этом файле нет намеренно.

   ⚠️ ОТКУДА ЭТОТ ФАЙЛ. Он взят копией из bku_calendar/public/styles/my-day.css:
   экран «Мой день» там уже сделан, покрыт тестами и принят — второй такой же
   выдумывать незачем. Парным (байт-в-байт обязательным) файлом он, в отличие
   от base.css и js/icons.js, НЕ является: правки ниже живут только здесь.

   ЧТО ДОБАВЛЕНО ПРОТИВ ОРИГИНАЛА — три блока в конце файла:
     * форма входа по личной ссылке и коду (внутри Битрикс24 её не было вовсе);
     * блок персональных данных клиента в карточке выезда (решение владельца
       18.09.2026 «показываем полностью»);
     * шапка с именем вошедшего и кнопкой выхода.
   ========================================================================== */

.myday-page {
  /* Кегли: на ступень крупнее фундамента. 15 px — нижняя граница, на которой
     текст ещё читается с вытянутой руки при ярком свете. */
  --fs-num:  26px;
  --fs-h:    19px;
  --fs-lg:   17px;
  --fs:      15px;
  --fs-sm:   13px;
  --fs-xs:   12px;

  /* Высоты контролов: 44 px — минимальная цель под палец. Кнопка, поле выбора
     даты и ссылка «позвонить» считают высоту от этих токенов. */
  --h-sm:   38px;
  --h:      44px;
  --h-lg:   50px;

  min-height: 100vh;
  background: var(--c-bg);
}

/* Полоса по краям экрана: на телефоне содержимое не должно упираться в кромку,
   и страница не должна ездить вбок. */
.myday-wrap {
  width: 100%;
  max-width: 720px;      /* на планшете и в окне браузера не растягиваемся в ленту */
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-6);
}

/* ---------- Шапка ---------- */
.myday-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-5) 0 var(--sp-4);
}
.myday-head__title { font-size: var(--fs-h); }
.myday-head__who {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Выбор дня ----------
   Липкая: список за день бывает длинным, а переключение дня — самое частое
   действие на этом экране. Возвращаться за ним наверх незачем. */
.myday-picker {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 calc(-1 * var(--sp-5));
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  background: var(--c-bg);
  box-shadow: var(--shadow-line);
}
.myday-picker__row {
  display: flex;
  gap: var(--sp-3);
}
/* Три быстрые цели одинаковой ширины: «вчера / сегодня / завтра» покрывают
   почти все обращения к экрану. */
.myday-picker__row .btn { flex: 1 1 0; padding: 0 var(--sp-2); }
.myday-picker__row .btn.is-active {
  border-color: transparent;
  background: var(--c-action);
  color: #fff;
}
.myday-picker__date {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* На узком телефоне подпись дня уезжает под поле целиком, а не ужимается
     в две строки рядом с ним: «18 сентября, пятница» — то, ради чего человек
     сюда посмотрел, обрезать её нельзя. */
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.myday-picker__date .input { flex: 0 0 auto; width: auto; min-width: 150px; }
.myday-picker__caption {
  flex: 1 1 auto;
  min-width: 150px;
  color: var(--c-text-strong);
  font-weight: 600;
  text-align: right;
}

/* ---------- Список выездов ---------- */
.myday-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); }

.visit {
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

/* Верх плитки: кнопка-шапка и ручка для перетаскивания в одну строку. */
.visit__top { display: flex; align-items: stretch; }

/* ---------- Ручка, за которую плитку тащат ----------

   🔴 touch-action: none ЗДЕСЬ — ЭТО И ЕСТЬ ТО, ЧТО ДЕЛАЕТ ЖЕСТ ВОЗМОЖНЫМ
   на телефоне, а не оформление. Браузер решает судьбу касания заранее, по
   этому свойству под пальцем: пока прокрутка разрешена, первое же движение
   уходит странице, приходит pointercancel, и жест срывается — а touchmove,
   которым его пытались удержать, до страницы не доходит вовсе. Убрать эту
   строку значит вернуть поломку, из-за которой перетаскивание не работало
   на живом телефоне 23.09.2026.

   ⚠️ И ровно поэтому запрет стоит на РУЧКЕ, а не на плитке: у плитки он
   отнял бы у человека возможность пролистать день пальцем. Живая проверка
   обоих условий — scripts/check-touch.mjs. */
.visit__grip {
  flex: 0 0 auto;
  /* 44 px — палец, а не курсор. Мельче — промах, а промах здесь означает
     «пролистал вместо того, чтобы переставить». */
  width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  color: var(--c-muted-soft);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.visit__grip:active { cursor: grabbing; color: var(--c-action); }
.visit__grip .icon { width: 20px; height: 20px; }

/* Шапка карточки — целиком кнопка: палец попадает в неё где угодно. */
.visit__head {
  flex: 1 1 auto;
  min-width: 0;
}
.visit__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.visit__head:hover { background: var(--c-surface-alt); }
.visit__head:active { background: var(--c-surface-mute); }
/* ⚠️ Выделение текста на шапке выключено НЕ ради красоты. Плитку берут
   удержанием пальца (~350 мс), а ровно на этом сроке телефон показывает свою
   лупу с выделением текста и меню «Копировать»: жест начинался бы одновременно
   с системным выделением, и переносил бы человек уже поверх чужого меню. */
.visit__head {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Колонки времени на плитке нет: время выезда кабинет не ведёт (решение
   владельца 24.09.2026), день стоит в шапке экрана. */

.visit__main { flex: 1 1 auto; min-width: 0; }
.visit__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-text-strong);
  line-height: 1.3;
}
.visit__addr {
  margin-top: var(--sp-1);
  color: var(--c-text);
  line-height: 1.4;
  /* Адрес бывает длинным: две строки в списке, полностью — в раскрытой карточке. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.visit__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

.visit__chev { flex: 0 0 auto; margin-top: 2px; color: var(--c-muted-soft); }

/* ---------- Перетаскивание плиток пальцем (22.09.2026) ----------

   Порядок выездов геодезист раскладывает сам: зажал плитку, перенёс, отпустил.
   Вся логика — в public/js/my-day.js, раздел о жесте; здесь только вид.

   ⚠️ touch-action ниже — вторая застёжка, а не первая. Правило прокрутки
   браузер читает В НАЧАЛЕ касания, поэтому стиль, появившийся уже на ходу,
   к этому касанию не применяется. Страницу на месте держит preventDefault
   у touchmove; убрать его, понадеявшись на эту строку, — значит получить
   список, уезжающий вместе с плиткой. */
.myday-list--dragging {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Плитка в руке: приподнята тенью и чуть увеличена. Смещения за пальцем нет
   намеренно — список перестраивается под ней сразу, и человек видит РЕЗУЛЬТАТ
   переноса, а не его траекторию. */
.visit--lifted {
  position: relative;
  /* Выше липкой панели выбора дня (z-index 5): иначе плитка уезжает под неё
     ровно в тот момент, когда её тащат наверх. */
  z-index: 6;
  transform: scale(1.02);
  box-shadow: var(--shadow-modal);
}
@media (prefers-reduced-motion: reduce) {
  .visit--lifted { transform: none; }
}

/* Строка «день разложен руками» и кнопка возврата. Стоит НАД списком:
   объяснение, почему 14:00 выше 09:00, должно попасться на глаза раньше
   самого списка. */
.myday-order {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--c-surface-alt);
}
.myday-order__text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

/* ---------- Раскрытая карточка ---------- */
/* ⚠️ Верхний отступ тот же, каким разделены поля внутри карточки (правило
   ниже). Раньше он был нулевым, и подпись первого поля прижималась к линии
   раскрытия — на телефоне это читалось как продолжение шапки, а не как
   начало карточки. Не «чуть-чуть по вкусу»: цифра взята из ритма полей,
   иначе первое поле навсегда останется исключением из общего шага. */
.visit__body { padding: var(--sp-5); border-top: 1px solid var(--c-line); }
.visit__body > * + * { margin-top: var(--sp-5); }
.visit__body > .loading, .visit__body > .error-box { margin-top: var(--sp-4); }

.vfield__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.vfield__label .icon { color: var(--c-muted-soft); }
/* Значение — тем же кеглем, что и рабочий текст, но контрастнее: его читают
   на солнце, и приглушённый серый тут неуместен. */
.vfield__value { color: var(--c-text-strong); line-height: 1.45; overflow-wrap: anywhere; }
.vfield__value--text { white-space: pre-wrap; }

.vfield__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Ряд «сумма / предоплата»: две величины рядом, каждая со своей подписью. */
.vmoney { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.vmoney > * { flex: 1 1 140px; }
.vmoney__num {
  color: var(--c-text-strong);
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Комментарий геодезисту — это указание тому, кто сейчас смотрит в экран.
   Отдельная подложка, чтобы его не пролистали вместе с прочими полями. */
.vnote {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-action-soft);
}
.vnote .vfield__label { color: var(--c-action); }
.vnote .vfield__label .icon { color: var(--c-action); }

/* ---------- Действия карточки ----------
   Позвонить — главное действие экрана и единственное залитое цветом.
   Требование заказчика дословно: телефон обязан быть кликабельным. */
/* ---------- Подтверждение отметки выезда (08.10.2026) ----------

   Вопрос живёт В КАРТОЧКЕ, а не в системном окне: окно браузера на телефоне
   приходит поверх всего, выглядит чужим и в поле его закрывают не глядя.
   Рамка и фон нужны, чтобы вопрос не слился с соседними действиями —
   иначе подтверждение превращается во вторую такую же кнопку. */
.vconfirm {
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface-alt);
}
.vconfirm__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-text-strong);
  line-height: 1.3;
}
/* Почему обратно не отыграешь — тем же кеглем, что и прочие пояснения
   экрана: это не мелкий шрифт из договора, его обязаны прочитать. */
.vconfirm__why {
  margin-top: var(--sp-2);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.vconfirm__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.visit__actions { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Кнопка во всю ширину и в НЕСКОЛЬКО строк при нужде: в фундаменте у кнопки
   nowrap и фиксированная высота — это верно для панели диспетчера, но здесь в
   подпись входит целый телефонный номер, и на экране 320 px он бы вылез
   за кромку кнопки. */
.visit__actions .btn {
  width: 100%;
  height: auto;
  min-height: var(--h-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-lg);
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}
.visit__actions .btn .icon { width: 18px; height: 18px; }

/* ---------- Состояния экрана ---------- */
.myday-state { margin-top: var(--sp-5); }
.myday-state .empty { padding: var(--sp-6) var(--sp-4); }
.myday-state__box {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-panel);
  text-align: center;
}
.myday-state__title { margin-bottom: var(--sp-2); font-size: var(--fs-lg); }
.myday-state__text { color: var(--c-muted); line-height: 1.5; }
.myday-state__actions { margin-top: var(--sp-5); }
.myday-state__actions .btn { width: 100%; }

/* Совсем узкий телефон (320 px): поля и зазоры поуже, чтобы заголовок
   и адрес не сжимались в столбик по одному слову. */
@media (max-width: 360px) {
  .myday-wrap { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .myday-picker { margin: 0 calc(-1 * var(--sp-4)); padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .visit__head { gap: var(--sp-3); }
}

/* ============================================================================
   ДОБАВЛЕНО ДЛЯ ВНЕШНЕГО САЙТА (см. шапку файла)
   ========================================================================== */

/* ---------- Значок чата поддержки в шапке ---------- */

/* Кнопка-значок без подписи: в шапке телефона рядом уже стоят «Как это
   работает» и «Выйти», и третья надпись сложила бы их в два этажа. Размер
   держим кнопочный (палец, перчатка), а не «по картинке». */
.myday-head__chat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--h-sm, 32px);
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
  color: var(--c-action);
}
.myday-head__chat svg { display: block; }

/* ---------- Вход по личной ссылке ---------- */

/* Форма входа — единственное, что видит человек до опознания. Она узкая
   намеренно: на широком экране поле кода во всю ширину выглядит как поиск. */
.myday-wrap--narrow { max-width: 460px; }

.login-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); text-align: left; }
.login-form__label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
/* Крупнее обычного поля и с разрядкой: код набирают пальцем, часто в перчатках,
   и вводят его вслепую — точки маски должны быть различимы. */
.login-form__input {
  width: 100%;
  height: var(--h-lg);
  font-size: var(--fs-lg);
  letter-spacing: 0.12em;
}
.login-form__hint { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.45; }
.login-form .btn--wide { width: 100%; margin-top: var(--sp-2); }
.login-form .error-box { margin-bottom: var(--sp-2); }

/* ---------- Набор PIN: четыре точки (22.09.2026) ----------

   Код набирают не в поле со звёздочками, а как в банке: четыре точки и
   цифровая клавиатура телефона. Это не мода. Геодезист открывает кабинет
   стоя у машины, часто в перчатке: узкое поле высотой в строку он ищет
   пальцем, кнопку «Войти» под клавиатурой — не видит вовсе. Четыре точки
   занимают полосу в палец высотой, а четвёртая цифра отправляет код сама,
   так что кнопки на экране нет.

   ⚠️ ПОЛЕ НЕ СПРЯТАНО, А ПРОЗРАЧНО. display:none и visibility:hidden
   выбрасывают элемент из порядка фокусировки — на телефоне клавиатура
   тогда не откроется вовсе. Поле растянуто поверх точек и прозрачно:
   тап по точкам и есть тап по полю, поэтому отдельного обработчика
   «нажали — открой клавиатуру» не нужно.

   ⚠️ КЕГЛЬ ПОЛЯ НЕ МЕНЬШЕ 16px (здесь var(--fs-lg) = 17px). Мельче — и
   Сафари на iPhone увеличивает страницу при фокусе, экран прыгает.

   ⚠️ ЦВЕТА ВЫБРАНЫ ПО КОНТРАСТУ, А НЕ ПО ВКУСУ. Точка — графика, её норма
   3:1 к белому фону коробки. Из светлых нейтралей фундамента норму держит
   ТОЛЬКО --c-muted-soft (3.15:1); --c-border (1.32), --c-faint (1.68) и
   --c-action-line (1.53) не держат — пустые точки ими рисовать нельзя.
   Заполненная — --c-action (5.79:1), ошибка — --c-alert (6.57:1).
   Своего цвета действия здесь не заводится: полоса точек И ЕСТЬ контрол,
   по которому нажимают, и синий на ней означает ровно это.

   ⚠️ Размер точки — литералом, как у .dot (8px), .icon (16px) и .ava (30px)
   в base.css: размерных токенов в системе нет, а --sp-* это ритм отступов,
   и правка ритма сплющила бы точки. */

/* 🔴 ПОЛОСА ТОЧЕК ВЫГЛЯДИТ КАК ПОЛЕ, ПОТОМУ ЧТО ПО НЕЙ НАДО НАЖАТЬ.
   Владелец 22.09.2026: «первый кружочек выделяется, а клавиатура не
   открывается — приходится ещё раз тапнуть по кружочкам». Так и есть, и
   иначе быть не может (разбор в шапке блока «Набор PIN» в login.js:
   клавиатуру поднимает только касание). Значит, чинить надо не клавиатуру,
   а ОБЕЩАНИЕ: точки, висящие на голом белом, ничем не говорили, что по ним
   нажимают. Рамка и подложка — тот же идиом, что у .input в base.css, то
   есть «сюда вводят». */
.pin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Полоса высотой с кнопку: цель под палец, а не под курсор. */
  min-height: var(--h-lg);
  margin-top: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-surface);
  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
.pin__dots { display: flex; gap: var(--sp-5); }
.pin__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-surface);
  /* Кольцо внутренней тенью — приём .dot из base.css: у круга такого размера
     рамка съела бы половину диаметра. */
  box-shadow: inset 0 0 0 2px var(--c-muted-soft);
  transition: background-color .12s ease-out, box-shadow .12s ease-out;
}
.pin__dot--on {
  background: var(--c-action);
  box-shadow: inset 0 0 0 2px var(--c-action);
}
/* 🔴 «ГОТОВ К ВВОДУ» ПОКАЗЫВАЕТСЯ ТОЛЬКО ПОСЛЕ ПЕРВОГО КАСАНИЯ (.pin--armed).
   Раньше подсветка загоралась сразу: экран сам ставил фокус в поле, браузер
   честно отвечал :focus-within — и человек видел «поле готово», хотя
   клавиатуры не было и набрать он ничего не мог. Это ровно та жалоба, с
   которой пришёл владелец. Фокус без клавиатуры бывает только до первого
   касания страницы, и ровно это состояние мы теперь не украшаем.
   ⚠️ Класс ставит JS по первому pointerdown/keydown (см. armPin в login.js),
   а не разметка: до жеста человека на странице ничего не произошло. */
.pin--armed:focus-within {
  border-color: var(--c-action);
  box-shadow: 0 0 0 2px var(--c-focus-ring);
}
/* Куда встанет следующая цифра — видимая каретка вместо той, что спрятана
   у прозрачного поля. */
.pin--armed:focus-within .pin__dot--next {
  box-shadow: inset 0 0 0 2px var(--c-action);
}

.pin__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  /* 🔴 НЕ МЕНЬШЕ 16px, И ЭТО НЕ КЕГЛЬ ТЕКСТА, А ПОРОГ ПЛАТФОРМЫ. Сафари на
     iPhone при фокусе масштабирует страницу по формуле clamp(16 / кегль поля)
     — на 15px экран дёрнет зумом, и банковский набор развалится. Значение
     берётся с самого сфокусированного узла, поэтому прозрачному полю оно
     нужно ровно так же. Литералом, а не var(--fs-lg): токен равен 17px
     только внутри .myday-page, а порог должен держаться везде. Лечить это
     через user-scalable=no нельзя — запрет масштабирования бьёт по тем,
     кто работает с крупным системным шрифтом. */
  font-size: 17px;
  /* Курсор-рука: полоса точек читается как нажимаемая. */
  cursor: pointer;
}
.pin__input:focus { outline: none; }

/* Проверяем код. Точки гаснут в светлую заливку действия, но кольцо остаётся
   контрастным: состояние «занято» не повод терять различимость. */
.pin--busy .pin__dot {
  background: var(--c-action-soft);
  box-shadow: inset 0 0 0 2px var(--c-action);
}

/* Код не подошёл. ⚠️ Тряска и красное кольцо — УСИЛЕНИЕ, а не носитель
   смысла: тряска кончается через треть секунды, цвет не читается диктором.
   Сам отказ по-прежнему говорит плашка .error-box словами. */
@keyframes pin-shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.pin--error .pin__dots { animation: pin-shake .18s linear 2; }
.pin--error .pin__dot { box-shadow: inset 0 0 0 2px var(--c-alert); }

/* Подсказка под точками встаёт по центру: над ней центрированная полоса,
   и левый край здесь читался бы как оторвавшийся абзац. */
.login-form--pin .login-form__hint { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .pin--error .pin__dots { animation: none; }
  .pin__dot { transition: none; }
}

/* ---------- Персональные данные клиента ---------- */

/* Отдельная плоскость с рамкой, а не просто ещё несколько полей подряд.
   Причина не в красоте: человек должен ВИДЕТЬ границу того, что нельзя
   показывать посторонним и класть в переписку. Цветом не кричим — это
   рабочие данные, с которыми он работает каждый день, а не авария. */
.vclient {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  background: var(--c-surface-alt);
}
.vclient__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}
.vclient__head .icon { color: var(--c-muted-soft); }
/* margin-top свой: раньше отступ давала шапка, а теперь между ней и сеткой
   стоит строка с ФИО, и сетка рисуется только в раскрытом виде. */
.vclient__grid { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.vclient__row { display: flex; flex-direction: column; gap: 2px; }
.vclient__key { font-size: var(--fs-sm); color: var(--c-muted); }
/* Значения — моноширинно там, где важен каждый знак (СНИЛС, паспорт):
   их сверяют посимвольно с документом в руках. */
.vclient__val { font-size: var(--fs); color: var(--c-text-strong); overflow-wrap: anywhere; }
/* Своей моноширинной гарнитуры в системе нет и заводить её незачем: цифры
   в --font уже табличные (класс .mono из base.css), а разрядка добавляет
   различимость знаков, которые сверяют с документом посимвольно. */
.vclient__val--exact { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.vclient__foot { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.45; }

/* Пара «серия — номер» стоит в строку: в паспорте они тоже рядом. */
.vclient__pair { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.vclient__pair > * { flex: 1 1 120px; }

/* ---------- Блок клиента свёрнут, пока его не раскрыли (22.09.2026) ----------

   Решение владельца: реквизиты занимали в карточке больше места, чем всё
   остальное вместе. Свёрнутый вид — заголовок и ФИО, документ по нажатию.
   Сама логика (и то, что свёрнутое вообще не попадает в разметку) — в
   public/js/my-day.js, здесь только вид.

   ⚠️ Шапка блока стала КНОПКОЙ, отсюда сбросы ниже: у <button> свои фон,
   рамка, шрифт и выравнивание, и без них заголовок раздела выглядел бы серым
   прямоугольником посреди карточки. Это не «копия .btn» из фундамента,
   которых здесь нет намеренно: кнопкой тут работает заголовок, а не контрол. */
.vclient__head--tap {
  width: 100%;
  /* 44 px — палец, а не курсор. Цель мельче на вытянутой руке промахивается,
     а промах по этой кнопке открывает карточку соседнего поля. */
  min-height: 44px;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  text-align: left;
  cursor: pointer;
}
.vclient__head-text { min-width: 0; }
/* Слово у правого края, рядом со стрелкой: взгляд идёт по левому краю к имени,
   а управление живёт справа. Кегль обычный и без разрядки — это подпись
   к действию, а не продолжение заголовка раздела. */
.vclient__more {
  margin-left: auto;
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-action);
}
.vclient__chev { flex: 0 0 auto; display: inline-flex; color: var(--c-muted-soft); }
.vclient__head--tap:active { opacity: .7; }

/* ФИО видно всегда, в том числе свёрнутым: с кем имеешь дело — не деталь
   документа, а ответ на вопрос «к кому я приехал». */
.vclient__name {
  font-size: var(--fs);
  font-weight: 600;
  color: var(--c-text-strong);
  overflow-wrap: anywhere;
}
.vclient__head--tap + .vclient__name { margin-top: 2px; }

/* ---------- Шапка вошедшего ---------- */
.myday-head__actions { flex: 0 0 auto; display: flex; gap: var(--sp-2); }
.myday-head__actions .btn { height: var(--h-sm); }

/* В коробке с формой заголовок и пояснение выравниваются по левому краю:
   центрированный абзац прямо над левым столбцом полей читается как чужой
   кусок, а взгляд при вводе всё равно идёт по левому краю. */
.myday-state__box--form,
.myday-state__box--form .myday-state__title,
.myday-state__box--form .myday-state__text { text-align: left; }

/* Пустой день при ОБРЕЗАННОЙ выборке. Отличается от обычного «выездов нет»
   намеренно: это не факт «работы нет», а признание «полноту не гарантируем».
   Цвет — предупреждающий, тот же, что у плашки .note; своего оттенка не
   заводим. */
.myday-state__box--warn {
  background: var(--c-warn-soft);
  text-align: left;
}
.myday-state__box--warn .myday-state__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.myday-state__sign {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--c-warn);
}

/* ============================================================================
   Адрес-ссылка и кадастровый номер, который копируется тапом (19.09.2026).

   ⚠️ Размер цели — не вкусовщина: по этому тапают пальцем на солнце, стоя
   у машины. Меньше 44 px промахиваются, и человек копирует соседний номер.
   ⚠️ Токены берём ТОЛЬКО существующие в base.css. Выдуманное имя переменной
   молча убивает всё правило целиком — в этом проекте на этом уже наступали.
   ========================================================================== */

/* Адрес — ссылка на карту. Видом она обязана отличаться от обычного
   значения поля: человек за рулём должен понять, что сюда можно нажать,
   не пробуя. Куда она ведёт, решает телефон (см. mapLinkHtml в my-day.js),
   но выглядит она везде одинаково.
   Переносы длинного адреса уже разобраны .vfield__value выше. */
.vfield__value--link {
  color: var(--c-action);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Цель для пальца: адрес бывает в одну строку, а строка тонкая. */
  display: inline-block;
  min-height: 44px;
}

.chip--tap {
  /* Кнопка, а не текст: показываем это и видом, и размером цели. */
  cursor: pointer;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: inherit;
  font: inherit;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  transition: background-color .12s ease, border-color .12s ease;
}

.chip--tap:active { background: var(--c-surface-mute); }

.chip--done {
  border-color: var(--c-ok-line);
  background: var(--c-ok-soft);
}

.vfield__hint {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}