/* ---------- свой календарь Флоу (`datePick.js`) ----------

   Роман 16.09.2026, про поле «Срок» в окне «По сделке не осталось дел»:
   «возможно ли сделать выбор даты нормальной кнопкой в стиле остальной Флоу?
   типо может фиолетовой с аккуратным кастомным значком даты? <…> возможно ли
   сделать фон календаря прозрачным стеклом? также анимации переключения
   курсора дат, кастомный курсор выбора даты? как в сайдбаре главного меню».

   Своим листом, а не куском `app.css`, — по той же причине, что почта и меню
   дела: общий файл правят в несколько рук. Все краски — токенами темы, своих
   цветов здесь нет: светлая и тёмная получаются сами. */

/* ---- кнопка поля ----

   Фиолетовая, но не заливкой во всю ширину: в форме таких полей бывает по
   два-три рядом с обычными, и сплошные акцентные плашки перекричали бы
   главную кнопку окна. Поэтому акцент — в плитке значка, а поле — лёгкий
   тон того же цвета с кромкой. Высота та же, что у `.input`, — в сетке формы
   поле даты не выпирает из ряда. */
.dp {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-width: 0; min-height: 34px;
  padding: 3px 12px 3px 3px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--text);
  font: inherit; font-size: 13.5px; line-height: 1.2; text-align: left;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease),
    box-shadow 160ms var(--ease);
}
.dp:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
}
/* Кольцо фокуса — на кнопке, хотя фокус стоит в спрятанном поле за ней:
   с клавиатуры человек приходит именно в поле (разбор в `datePick.js`). */
.dp.is-open,
.dp:has(+ .dp-native:focus) { border-color: var(--accent); box-shadow: var(--ring); }
.dp:disabled { cursor: default; opacity: .55; }

.dp__icon {
  flex: none; width: 26px; height: 26px; border-radius: 5px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  /* Волосок света по верхней кромке — плитка читается кнопкой, а не пятном. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(40, 36, 96, .18);
  transition: transform 160ms var(--ease);
}
.dp__icon .icon { stroke-width: 2.1; }
.dp:hover .dp__icon { transform: scale(1.04); }
.dp__text {
  flex: 1; min-width: 0;
  display: grid;
  font-weight: 550; letter-spacing: .005em;
}
/* Видимая подпись и невидимые подписи самой большой ширины — в одной клетке:
   клетка берёт ширину самой длинной, и кнопка не прыгает от даты к дате
   (разбор у `widthGhosts` в datePick.js). */
.dp__label, .dp__ghosts > span {
  grid-area: 1 / 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp__ghosts { display: contents; }
.dp__ghosts > span { visibility: hidden; pointer-events: none; }
.dp.is-empty .dp__label { color: var(--text-faint); font-weight: 450; }

/* Настоящее поле — хранилище значения. Не `display: none`: фокус с
   клавиатуры и подписи `<label>` должны до него доходить. */
.input.dp-native {
  position: absolute; width: 1px; height: 1px; min-width: 0;
  margin: 0; padding: 0; border: 0; opacity: 0;
  pointer-events: none; clip-path: inset(50%);
}

/* Места, где поле даты было узким по своей раскладке. */
.paint-plan__ship .dp { width: auto; min-width: 170px; }
.due-pick__exact .dp { flex: 1; min-width: 0; }
@media (max-width: 820px) {
  .paint-plan__ship .dp { width: 100%; min-width: 0; }
}

/* ---- окно ----

   Стекло то же, что у панели звонка (`.call` в app.css) и плашки отмены
   письма (`.mail-undo`): токены `--glass`, `--glass-line`, `--glass-blur`, с
   волоском света по верхней кромке. Два стеклянных слоя Флоу обязаны быть
   из одного стекла. */
.dp-pop {
  position: fixed; z-index: 130;
  width: 292px; padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-pop), inset 0 1px 0 var(--glass-line);
  color: var(--text);
  font-family: var(--font); font-size: 13px;
  font-variant-numeric: tabular-nums;
  /* Потолок высоты ставит `placeFloating` — сколько осталось до края окна.
     Не влезло (низкий экран ноутбука, поле посередине формы) — окно
     прокручивается внутри себя, а не теряет низ с кнопкой «Готово». */
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-user-select: none; user-select: none;
}
/* Проявление — как у меню (`pop-fade`, `pop-rise` в app.css): сторону сдвига
   ставит `placeFloating` классом `is-up`. */
.dp-pop.is-in {
  --pop-from: -4px;
  animation: pop-fade 90ms linear, pop-rise 160ms var(--ease);
}
.dp-pop.is-in.is-up { --pop-from: 4px; }

.dp-pop__head { display: flex; align-items: center; gap: 2px; margin: 0 0 8px 6px; }
.dp-pop__title {
  flex: 1;
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  letter-spacing: -.005em;
}
.dp-pop__nav {
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  display: grid; place-items: center;
  background: none; color: var(--text-soft); cursor: pointer;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.dp-pop__nav:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text);
}

.dp-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding-bottom: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); text-align: center;
}
.dp-week .is-weekend { opacity: .7; }

/* Сетка стоит в своей рамке: при смене месяца старая и новая едут в ней
   вбок, и край рамки обрезает их, а не всё окно. */
.dp-days { position: relative; overflow: hidden; }
.dp-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 34px;
}

.dp-day {
  position: relative; z-index: 1;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: color 180ms var(--ease);
}
/* Цифры — ровно по центру плашки. Роман 16.09.2026: «есть проблемы с
   центрированием цифр в подсветках выбора календаря».

   Строка текста по умолчанию несёт место под надстрочные и подстрочные
   элементы шрифта, и у шрифта Флоу надстрочного больше. У цифр хвостов вниз
   нет, поэтому глиф в центрированной строке садится ниже середины: замер по
   снимку дал 10 точек сверху и 8 снизу в клетке дня, 11 и 10 в плашке
   времени. На айфоне это втрое больше.

   `text-box: trim-both cap alphabetic` срезает строку по высоте прописных
   сверху и по базовой линии снизу — центруется сам глиф, а не строка. Подгонка
   отступом тут не годится: она верна для одного шрифта и одного кегля и
   съезжает с первой же сменой. Где свойства нет — остаётся прежний сдвиг
   в точку, не хуже, чем было. */
.dp-day, .dp-chip, .dp-clock__part { text-box: trim-both cap alphabetic; }
.dp-day.is-weekend { color: var(--text-soft); }
.dp-day.is-out { color: var(--text-faint); opacity: .55; }
.dp-day:disabled { cursor: default; opacity: .28; }
/* Сегодня — тонкое кольцо. Кольцо на самой клетке, а не на плашке: плашка
   выбранного уезжает, а «сегодня» остаётся на месте. */
.dp-day.is-today::after {
  /* Скругление 7, а не 10: у плашки выбранного радиус 10 стоит на рамке в три
     прозрачные точки, и видимая заливка скруглена на 10 − 3 = 7. С радиусом
     10 кольцо «сегодня» поверх выбранного выходило другой формы. Роман
     16.09.2026: «они не совпадают (разной формы), выглядит странно». */
  content: ""; position: absolute; inset: 3px; border-radius: 7px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent);
  pointer-events: none;
}
.dp-day.is-today { color: var(--accent-text); font-weight: 650; }
.dp-day.is-picked { color: var(--on-accent); font-weight: 650; }
.dp-day.is-today.is-picked::after { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }

/* Плашка выбранного и подсветка наведения.

   Приём — плашки выбранного раздела в меню слева (`.nav__pill`): одна плашка
   на всю сетку, стоит абсолютом под клетками и **переезжает** сдвигом
   `transform`, а не гаснет в одной клетке и зажигается в другой. Скорость и
   разгон те же — 320 мс на `--ease`, без отскока: плашка указывает, а
   перелетевший указатель на миг показывал бы не тот день. Первая установка —
   без переезда (`is-instant`), иначе при каждом открытии плашка ехала бы из
   угла. */
.dp-pill,
.dp-hover {
  position: absolute; left: 0; top: 0; z-index: 0;
  border-radius: 10px; pointer-events: none; opacity: 0;
  /* Клетка 34 точки, плашка на три точки меньше с каждой стороны — между
     соседними выбранными днями остаётся воздух. */
  box-sizing: border-box; border: 3px solid transparent; background-clip: padding-box;
}
.dp-pill {
  background-color: var(--accent);
  box-shadow: none;
  transition: transform 320ms var(--ease), width 320ms var(--ease),
    height 320ms var(--ease), opacity 180ms var(--ease);
}
.dp-pill.is-on { opacity: 1; }
.dp-hover {
  background-color: color-mix(in srgb, var(--text) 9%, transparent);
  transition: transform 180ms var(--ease), opacity 200ms var(--ease);
}
.dp-hover.is-on { opacity: 1; transition-duration: 180ms, 120ms; }
.dp-pill.is-instant,
.dp-hover.is-instant { transition: none; }

/* Смена месяца: сетка уходит в сторону листания, новая приходит с другой. */
@keyframes dp-from-right { from { transform: translateX(34px); opacity: 0; } }
@keyframes dp-from-left { from { transform: translateX(-34px); opacity: 0; } }
@keyframes dp-to-left { to { transform: translateX(-34px); opacity: 0; } }
@keyframes dp-to-right { to { transform: translateX(34px); opacity: 0; } }
.dp-grid.from-right { animation: dp-from-right 240ms var(--ease); }
.dp-grid.from-left { animation: dp-from-left 240ms var(--ease); }
.dp-grid.is-leaving { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.dp-grid.is-leaving.to-left { animation: dp-to-left 200ms var(--ease) both; }
.dp-grid.is-leaving.to-right { animation: dp-to-right 200ms var(--ease) both; }

/* ---- время ---- */
.dp-time {
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--glass-line);
  display: grid; gap: 8px;
}
.dp-times {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.dp-chip {
  position: relative; z-index: 1;
  height: 30px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  color: var(--text); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 550; font-variant-numeric: tabular-nums;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background-color 140ms var(--ease);
}
.dp-chip:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.dp-chip.is-picked { color: var(--on-accent); border-color: transparent; background: none; }
.dp-pill--time { border: 0; border-radius: 9px; }

.dp-clock { display: flex; align-items: center; gap: 4px; }
.dp-clock__label { flex: 1; color: var(--text-soft); font-size: 12.5px; }
.dp-clock__part {
  width: 44px; height: 30px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--text); text-align: center;
  font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  outline: none;
  -webkit-user-select: text; user-select: text;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.dp-clock__part:focus { border-color: var(--accent); box-shadow: var(--ring); }
.dp-clock__sep { font-size: 15px; font-weight: 600; color: var(--text-soft); }

/* ---- низ ---- */
.dp-foot {
  display: flex; align-items: center; gap: 4px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--glass-line);
}
.dp-foot .spacer { flex: 1; }
.dp-link {
  border: 0; background: none; cursor: pointer;
  padding: 5px 8px; border-radius: 7px;
  color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 550;
  transition: background-color 140ms var(--ease);
}
.dp-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dp-link--quiet { color: var(--text-soft); }
.dp-link--quiet:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }

/* ---- телефон: лист снизу ----

   Как окна-листы (`.modal--sheet` в app.css): во всю ширину, скруглён
   сверху, с ручкой-полоской, приезжает снизу за 260 мс и уходит за 140.
   Окно у кнопки на узком экране оказывалось бы под пальцем или за краем. */
.dp-scrim {
  position: fixed; inset: 0; z-index: 129;
  background: var(--scrim);
  animation: pop-fade 180ms linear;
}
.dp-scrim.is-closing { opacity: 0; transition: opacity 140ms linear; }

.dp-pop--sheet {
  left: 0; right: 0; bottom: 0; top: auto;
  width: auto; max-width: none;
  padding: 6px 16px calc(14px + env(safe-area-inset-bottom));
  max-height: 90vh;
  /* Лист стоит на затемнении, а не на странице: светлое стекло (белый в
     72 %) поверх серой подложки мутнело до серого. Плотнее на долю
     поверхности — тот же приём, что у всплывающих сообщений (`--toast-glass`). */
  background: color-mix(in oklab, var(--glass), var(--surface) 55%);
  border-radius: 18px 18px 0 0;
  border-bottom: 0;
  font-size: 14px;
}
.dp-pop--sheet.is-in { animation: dp-sheet-up 260ms var(--ease); }
.dp-pop--sheet.is-closing { animation: dp-sheet-down 140ms var(--ease) both; }
@keyframes dp-sheet-up { from { transform: translateY(100%); } }
@keyframes dp-sheet-down { to { transform: translateY(100%); } }
.dp-pop__grip {
  width: 36px; height: 4px; border-radius: 3px; margin: 2px auto 10px;
  background: var(--border-strong);
}
.dp-pop--sheet .dp-pop__title { font-size: 17px; }
.dp-pop--sheet .dp-pop__nav { width: 40px; height: 40px; }
.dp-pop--sheet .dp-grid { grid-auto-rows: 46px; }
.dp-pop--sheet .dp-day { font-size: 15.5px; }
.dp-pop--sheet .dp-chip { height: 40px; font-size: 14.5px; }
.dp-pop--sheet .dp-clock__part { width: 54px; height: 40px; font-size: 17px; }
.dp-pop--sheet .dp-link { padding: 9px 10px; font-size: 14.5px; }
.dp-pop--sheet .dp-done { padding: 8px 16px; font-size: 14.5px; }
@media (max-width: 820px) {
  .dp { min-height: 40px; font-size: 14.5px; }
  .dp__icon { width: 32px; height: 32px; border-radius: 7px; }
}

/* ---- без движения ---- */
@media (prefers-reduced-motion: reduce) {
  .dp, .dp__icon, .dp-day, .dp-chip { transition: none; }
  .dp:hover .dp__icon { transform: none; }
  .dp-pill, .dp-hover { transition: opacity 120ms linear; }
  .dp-pop.is-in, .dp-pop--sheet.is-in, .dp-pop--sheet.is-closing,
  .dp-grid.from-right, .dp-grid.from-left, .dp-scrim { animation: none; }
}

/* ---------- набранная дата ----------

   Строка появляется, только когда в открытом календаре начали печатать
   цифры (разбор — `pushDigit` в `datePick.js`). Место ей над сеткой: под
   названием месяца, к которому календарь едет за набором, и над днями, среди
   которых загорается набранный.

   Цифрами моноширинно: при наборе меняется по знаку, и в пропорциональном
   наборе строка дёргалась бы на каждой цифре. Точки вместо ненабранного —
   они же держат ширину, пока цифры не приехали. */
.dp-typed {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 6px 6px;
}
.dp-typed__value {
  font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  color: var(--text);
}
/* Год, который не набирали: берётся тот, что открыт в календаре. Показан
   бледным — это подсказка системы, а не то, что человек напечатал. */
.dp-typed__value .is-guess { color: var(--text-faint); font-weight: 500; }
.dp-typed__hint { font-size: 11.5px; color: var(--text-faint); }
.dp-typed__hint.is-ready { color: var(--accent-text); }