/* ─── Выбор даты. Задача 728, блок 16.7 ──────────────────────────────

   Родное поле остаётся в разметке и остаётся источником истины для формы —
   оно просто уводится с глаз. Скрипт не выполнился, класс не проставлен,
   родной календарь виден и работает. */

.dt { position: relative; }

/* Не display:none — иначе поле выпадает из формы у части браузеров
   и перестаёт участвовать в проверке required. */
.dt-native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.dt-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--gap-2) var(--gap-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dt-button--empty { color: var(--muted); }
.dt-button:hover { border-color: var(--ink); }
.dt-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

.dt-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--gap-1));
  left: 0;
  min-width: 280px;
  padding: var(--gap-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
}

.dt-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap-2);
  margin-bottom: var(--gap-3);
}

/* Сетка месяца.

   Числа в ячейках выровнены по центру, и это НЕ нарушение запрета
   на центрирование: запрет про центрирование ТЕКСТА — заголовков, абзацев,
   подписей. Здесь таблица, и число центруется как содержимое ячейки;
   выровняй его влево — колонки перестанут читаться столбцами. */
.dt-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dt-dow {
  padding: var(--gap-1) 0;
  color: var(--muted);
  font-size: var(--step--1);
  text-align: center;
}

.dt-day {
  padding: var(--gap-2) 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
}

.dt-day:hover { border-color: var(--line); }
.dt-day:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Дни соседних месяцев видны, но приглушены: убери их совсем — и первая
   неделя месяца поедет, а человек потеряет опору. */
.dt-day--out { color: var(--muted); }

/* Сегодня — риской снизу, а не заливкой: цветные плашки запрещены. */
.dt-day--today { box-shadow: inset 0 -2px 0 var(--line); }

/* Выбранный день — единственное место, где уместен акцент. */
.dt-day--on {
  border-color: var(--ink);
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--accent);
}