/* ОБЩИЕ МЕЛОЧИ, замеченные на первом показе.
   Значения — из переменных дизайн-кода. */

/* Уголок растягивания у всех полей многострочного ввода одинаковый.
   Системный рисунок в разных браузерах свой и в тёмной теме остаётся
   светлым пятном; здесь он нарисован сам и берёт цвет рамки. */
textarea {
  resize: vertical;
  background-image: linear-gradient(135deg, transparent 46%,
    var(--line2) 46%, var(--line2) 54%, transparent 54%,
    transparent 66%, var(--line2) 66%, var(--line2) 74%, transparent 74%);
  background-repeat: no-repeat;
  background-position: calc(100% - 4px) calc(100% - 4px);
  background-size: 11px 11px;
}
textarea::-webkit-resizer { display: none; }
textarea.no-resize { resize: none; background-image: none; }

/* Панель со своей прокруткой не должна срезать то, что раскрывается
   поверх неё: список, подсказку, выбор числа. */
.panel-body { overscroll-behavior: contain; }

/* ── Общее поле даты: значок внутри поля и календарь слоем поверх.
   Оба места, где выбирают дату, берут это; своих календарей у экранов
   больше нет. */
.field-icon { position: relative; }
.field-icon > input.input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]) {
  width: 100%; padding-right: 42px;
}
.field-icon-btn {
  position: absolute; top: 1px; right: 1px; bottom: 1px; width: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ink3); cursor: pointer;
  border-radius: 0 var(--r) var(--r) 0;
}
.field-icon-btn:hover { color: var(--acc-ink); background: var(--acc-weak); }

.daypick {
  position: fixed; z-index: 420; width: 268px; padding: var(--sp-150);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-raised);
}
.daypick-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-100); font-size: var(--fs-s);
}
.daypick-head button {
  width: 26px; height: 26px; border: 1px solid var(--line);
  border-radius: var(--r-s); background: none; color: var(--ink2); cursor: pointer;
}
.daypick-head button:hover { border-color: var(--acc); color: var(--acc-ink); }
.daypick-week, .daypick-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.daypick-week span {
  text-align: center; font-size: 10.5px; color: var(--ink3);
  padding-bottom: var(--sp-050);
}
.daypick-grid button {
  height: 30px; border: 1px solid transparent; border-radius: var(--r-s);
  background: none; color: var(--ink); cursor: pointer;
  font-family: var(--num); font-size: 12.5px;
}
.daypick-grid button:hover { background: var(--a-200); }
.daypick-grid button.now { border-color: var(--line2); }
.daypick-grid button.on { background: var(--acc-solid); color: #fff; }
.daypick-foot {
  display: flex; gap: var(--sp-075); margin-top: var(--sp-100);
  padding-top: var(--sp-100); border-top: 1px solid var(--line);
}
.daypick-foot button {
  flex: 1; padding: var(--sp-075); border: 1px solid var(--line);
  border-radius: var(--r-s); background: none; color: var(--ink2);
  font-size: var(--fs-s); cursor: pointer;
}
.daypick-foot button:hover { border-color: var(--acc); color: var(--acc-ink); }