/*
 * Общие элементы Свода. Стабильная разметка A11 для всех страниц.
 * Значки внутри кнопок: Icons::svg(имя, 16). Все пользовательские значения — Web::esc.
 * Кнопки: <button type="button" class="ms-btn">Фильтр</button>
 * Состояния: .on (нажата), [disabled] или .off (недоступна), .is-hover/.is-active (образцы).
 * Зелёная: <button type="submit" class="ms-btn ms-btn-green">Найти</button>
 * Со стрелкой: <button type="button" class="ms-btn ms-btn-drop" data-ms-menu="print-menu">Печать</button>
 * Со значком: <button type="button" class="ms-btn"><svg ...></svg><span>Печать</span></button>
 * Круглая: <button type="button" class="ms-btn ms-btn-circle" aria-label="Настройки"><svg ...></svg></button>
 * Для круглых: Icons::svg('gear-round', 28) / Icons::svg('bookmark', 28); нарисованный в SVG круг не дублируется.
 * Группа: <div class="ms-btn-group"><button class="ms-btn on" type="button">Неделя</button><button class="ms-btn" type="button">Месяц</button></div>
 * Текст: <input class="ms-input" name="q" placeholder="Номер или комментарий">
 * Список: <select class="ms-select" name="payment"><option value="">Любая</option></select>
 * Подпись: <label class="ms-field-label ms-field-dot" for="store">Склад</label>; точка с меню условия поля — FilterCond::dot()
 *   первой внутри подписи (вид и поведение — m_cond.css, m_cond.js), прежняя «•» у такой подписи не рисуется.
 * Флажок: <label class="ms-check"><input type="checkbox" name="posted" value="1"><span>Проведено</span></label>
 * Выбор справочника: <span class="ms-pick"><input id="store" class="ms-input" value="" readonly><input type="hidden" name="store_id" value=""><button type="button" data-ms-dialog="store-dialog" aria-label="Выбрать склад"></button></span>
 * Дата (name остаётся прежним серверным именем, value строго YYYY-MM-DD):
 * <span class="ms-date"><input type="hidden" name="from" value="2026-09-01"><button type="button" class="ms-date-open" aria-label="Календарь"><svg ...></svg></button><input class="ms-input" type="text" value="01.09.2026" inputmode="numeric" placeholder="дд.мм.гггг" aria-label="Дата с"></span>
 * Период: <div class="ms-period"><div class="ms-period-heading"><span class="ms-field-label ms-field-dot">Период</span><span class="ms-period-quick"><a href="#" data-ms-period="yesterday">вч</a><a href="#" data-ms-period="today">сег</a><a href="#" data-ms-period="week">нед</a><a href="#" data-ms-period="month">мес</a></span></div><div class="ms-period-fields"><span>с</span>[ms-date для from]<span>по</span>[ms-date для to]</div></div>
 * Меню: <div id="print-menu" class="ms-menu" hidden role="menu"><button type="button" class="ms-menu-item" role="menuitem">Печать</button><button type="button" class="ms-menu-item" disabled role="menuitem">Недоступно</button><hr class="ms-menu-separator"><button type="button" class="ms-menu-item" role="menuitem">Настроить…</button></div>
 * Календарь .ms-cal создаёт widgets.js при открытии .ms-date; пример всех частей — /styleguide.
 * Список с флажками: <button type="button" class="ms-btn ms-btn-drop" data-ms-menu="states">Статусы</button><div id="states" class="ms-multi" hidden><input type="hidden" name="states" value="one,two"><label class="ms-check"><input type="checkbox" value="one" checked><span>Первый</span></label><label class="ms-check"><input type="checkbox" value="two" checked><span>Второй</span></label></div>
 * В ms-multi скрытое значение — список через запятую; data-ms-format="json" на контейнере включает JSON.
 * Диалог: <div id="store-dialog" class="ms-dialog" hidden role="dialog" aria-modal="true" aria-labelledby="store-title"><div class="ms-dialog-panel"><div class="ms-dialog-head"><h2 id="store-title">Склады</h2><button type="button" class="ms-dialog-close" data-ms-close aria-label="Закрыть">×</button></div><div class="ms-dialog-body"><div class="ms-dialog-tree" role="tree"><button type="button" class="ms-dialog-node" role="treeitem" data-ms-value="store-1" data-ms-label="Ковров">Ковров</button></div></div><div class="ms-dialog-foot"><button type="button" class="ms-btn ms-btn-green" data-ms-choose>Выбрать</button><button type="button" class="ms-btn" data-ms-close>Отменить</button></div></div></div>
 * Подсказка: <button class="ms-btn" type="button" data-ms-tooltip="Обновить">…</button> (появление .2s).
 * Справка: <a class="ms-help" href="/help" aria-label="Справка">?</a>
 * Метка: <span class="ms-chip">Ковров<button type="button" data-ms-chip-remove aria-label="Убрать фильтр">×</button></span>
 * Ссылка: <a class="ms-link" href="…">Название</a>
 * Обновление: <button type="button" class="ms-refresh" data-ms-tooltip="Обновить" aria-label="Обновить"><svg ...></svg></button>
 * widgets.js запускается на DOMContentLoaded и svod:page; события ms:choose, ms:period, ms:chip-remove всплывают.
 * Дополнения без изменения разметки: .ms-btn-filter (отступы «Фильтр»), .ms-btn-find (широкая «Найти»),
 * .ms-btn-reset (широкая «Очистить»), .ms-input-search (скруглённый поиск); обычные поля прямоугольные.
 * .ms-period-fields допускает один разделитель «–» между датами; подписи «с/по» необязательны.
 * data-ms-time="1" на .ms-date показывает часы и минуты в тексте; скрытая дата остаётся YYYY-MM-DD.
 * data-ms-time-name="time" создаёт отдельное скрытое поле времени HH:MM только при явном запросе страницы.
 * data-ms-target="id-поля" на открывающей диалог кнопке заменяет поиск ближайшего .ms-pick.
 * Вложенное дерево: .ms-dialog-branch > .ms-dialog-node[aria-expanded] + .ms-dialog-children[role=group].
 * Фокус полей редактора: .ms-editor у обёртки; обычные фильтры не получают синей рамки.
 * Состояния без мыши: .is-focus, .is-hover, .is-active; .on — только длительный выбор, не открытое меню.
 * Строки .ms-multi: .on — текущая, .highlighted — найденная, hover — жёлтый; checked хранится отдельно.
 * Метка .ms-chip: .on — выбранная, .dragged/.dropping — состояния переноса; длинный текст допускает .ms-chip-text.
 * data-ms-tooltip-pos="top|bottom|bottom-center" выбирает положение подсказки; обычный title остаётся нативным.
 * .ms-refresh не меняет размер SVG: Icons::svg('refresh', 10). Попапы появляются без анимации.
 */

/* Размеры и состояния измерены службой сверки 23.09.2026. Чужие ресурсы не используются. */
.ms-btn {
  appearance: none;
  box-sizing: content-box;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 26px;
  min-height: 0;
  padding: 0 10px;
  margin: 0 10px 0 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: linear-gradient(to bottom, #fff, #e6e6e6);
  box-shadow: none;
  color: #222;
  font: 400 12px/normal "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  user-select: auto;
  outline: 0;
  transition-duration: 0s;
  transition-delay: 0s;
}
.ms-btn:hover, .ms-btn.is-hover { background: linear-gradient(to bottom, #fff, #f7f7f7); color: #222; text-decoration: none; }
.ms-btn:active, .ms-btn.is-active { background: #f2f2f2; }
.ms-btn.on, .ms-btn.on:hover {
  border-width: 0;
  padding: 1px 11px;
  background: linear-gradient(to bottom, #e6e6e6, #d6d6d6);
  box-shadow: inset 0 1px 3px #333;
}
.ms-btn:disabled, .ms-btn.off, .ms-btn[aria-disabled="true"] {
  color: #c0c0c0;
  cursor: default;
  background: linear-gradient(to bottom, #fff, #e6e6e6);
  box-shadow: none;
  opacity: 1;
}
.ms-btn-green, .ms-btn.primary { border-color: #a1b900; color: #fff; background: linear-gradient(to bottom, #cce255, #a1b900); }
.ms-btn-green:hover, .ms-btn-green.is-hover, .ms-btn.primary:hover { color: #fff; background: linear-gradient(to bottom, #cce255, #b7d200); }
.ms-btn-green:active, .ms-btn-green.is-active, .ms-btn.primary:active { color: #fff; background: #a1b900; }
.ms-btn-green.on { color: #fff; background: linear-gradient(to bottom, #cce255, #a1b900); }
.ms-btn-green.on:hover, .ms-btn-green.on.is-hover { color: #fff; background: linear-gradient(to bottom, #cce255, #b7d200); }
.ms-btn-green:disabled, .ms-btn-green.off, .ms-btn-green[aria-disabled="true"] { color: #c0c0c0; background: linear-gradient(to bottom, #fff, #e6e6e6); border-color: #ccc; }
.ms-btn-filter { padding-right: 13px; padding-left: 13px; }
.ms-btn-filter.on, .ms-btn-filter.on:hover { padding: 1px 14px; }
.ms-btn-find { padding-right: 21px; padding-left: 21px; }
.ms-btn-reset { padding-right: 12px; padding-left: 12px; }
.ms-btn-drop::after, .ms-btn.drop::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 4px;
  margin: 0;
  border: 0;
  background: #6b6b6b;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.ms-btn-drop:disabled::after, .ms-btn-drop.off::after, .ms-btn-drop[aria-disabled="true"]::after { opacity: .3; }
.ms-btn > svg { flex: none; width: 16px; height: 16px; }
.ms-btn-circle {
  width: 26px;
  padding: 0;
  margin: 0 5px;
  border: 1px solid #aeaaaa;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(to bottom, #c0c0c0, #b4b4b4 96%);
}
.ms-btn-circle:hover, .ms-btn-circle.is-hover { color: #fff; background: linear-gradient(to bottom, #848484, #909090); }
.ms-btn-circle:active, .ms-btn-circle.is-active { background: linear-gradient(to bottom, #848484, #909090); }
.ms-btn-circle.on, .ms-btn-circle.on:hover { padding: 0; border: 1px solid #aeaaaa; box-shadow: none; }
.ms-btn-group { display: inline-flex; align-items: center; margin: 0 10px 0 0; vertical-align: middle; }
.ms-btn-group > .ms-btn { margin: 0; border-radius: 0; border-left-width: 0; }
.ms-btn-group > .ms-btn:first-child { border-left-width: 1px; border-radius: 3px 0 0 3px; }
.ms-btn-group > .ms-btn:last-child { border-radius: 0 3px 3px 0; }
.ms-btn-group > .ms-btn:only-child { border-radius: 3px; }
.ms-btn-group > .ms-btn.on { padding: 1px 11px 1px 10px; border: 0; }
.ms-btn-group > .ms-btn:has(+ .ms-btn.on) { border-right-width: 0; padding: 0 11px 0 9px; }
.ms-btn-group > .ms-btn.on:first-child { padding-left: 12px; padding-right: 9px; }
.ms-btn-group > .ms-btn:disabled, .ms-btn-group > .ms-btn.off, .ms-btn-group > .ms-btn[aria-disabled="true"] { color: rgba(192, 192, 192, .3); }
.ms-btn:focus, .ms-btn.is-focus, .ms-refresh:focus, .ms-help:focus { outline: 0; }
.ms-btn:visited { color: #222; }
.ms-btn-green:visited, .ms-btn.primary:visited { color: #fff; }
.ms-btn.off:visited, .ms-btn[aria-disabled="true"]:visited { color: #c0c0c0; }
.ms-btn:disabled, .ms-btn.off, .ms-btn[aria-disabled="true"] { --ms-icon-round-top: #c0c0c0; --ms-icon-round-bottom: #b4b4b4; }

.ms-input, .ms-select {
  box-sizing: content-box;
  margin: 0;
  border: 1px solid #bfbfbf;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  color: #000;
  font: 400 12px/normal Arial, sans-serif;
  letter-spacing: normal;
  vertical-align: middle;
  outline: 0;
  transition-duration: 0s;
}
.ms-input { width: 200px; height: 15px; padding: 2px; }
.ms-input-search { border-radius: 3px; }
.ms-input::placeholder { color: #757575; opacity: 1; }
.ms-select { box-sizing: border-box; width: 250px; height: 21px; padding: 0; cursor: pointer; }
.ms-input:focus, .ms-select:focus, .ms-input.is-focus, .ms-select.is-focus { outline: 0; }
.ms-input:disabled, .ms-input[readonly], .ms-select:disabled { background: #f0f0f0; color: #888; }
.ms-input:disabled { cursor: default; }
/* Синий фокус принадлежит старым формам и GWT. React задаёт собственный фокус в m_controls. */
.ms-editor :is(.ms-input, .ms-select):where(:not([data-ms-controls="react"] *)):is(:focus, .is-focus) { border-color: #2f9bff; outline: 1px solid #2f9bff; outline-offset: 0; }
.ms-input[aria-invalid="true"] { border-color: red; }
.ms-field-label { display: inline-block; padding: 0 0 3px; margin: 0; color: #222; font: 400 12px/14px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; vertical-align: bottom; white-space: nowrap; }
.ms-field-dot::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 3px 5px; border-radius: 50%; background: #808080; }
.ms-pick { box-sizing: border-box; display: inline-flex; position: relative; width: 250px; height: 21px; border: 1px solid #bfbfbf; background: #fff; vertical-align: middle; }
.ms-pick > .ms-input { flex: 1; min-width: 0; width: 0; height: 19px; padding: 0 2px; border: 0; outline: 0; background: transparent; color: #000; line-height: 14px; }
.ms-pick > button { box-sizing: content-box; flex: none; display: flex; align-items: center; justify-content: center; width: 18px; height: 19px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.ms-pick > button::after { content: ""; width: 8px; height: 4px; border: 0; background: #888; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ms-pick > button:hover { background: transparent; }
.ms-pick:focus-within, .ms-pick.is-focus { outline: 0; }
.ms-editor .ms-pick:focus-within, .ms-editor .ms-pick.is-focus { border-color: #2f9bff; outline: 1px solid #2f9bff; }
.ms-editor .ms-pick > .ms-input:focus { outline: 0; border: 0; }
.ms-pick.off, .ms-pick:has(input:disabled) { background: #e3e3e3; color: #888; }
.ms-pick.off > .ms-input, .ms-pick > .ms-input:disabled { color: #888; }
.ms-editor .ms-pick.off, .ms-editor .ms-pick:has(input:disabled) { background: #f0f0f0; }
.ms-check { display: inline-flex; align-items: center; gap: 5px; color: #222; font: 400 12px/normal "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; vertical-align: middle; cursor: pointer; }
input.ms-check, .ms-check > input[type="checkbox"] { box-sizing: border-box; appearance: auto; flex: none; width: 14px; height: 14px; padding: 0; margin: 0; border-radius: 0; accent-color: auto; cursor: pointer; }
.ms-check:has(input:disabled), input.ms-check:disabled { color: #888; cursor: default; }
.ms-check > input:disabled { cursor: initial; }
.ms-date { box-sizing: content-box; display: inline-flex; position: relative; align-items: center; width: 116px; height: 19px; border: 1px solid #bfbfbf; background: #fff; vertical-align: middle; }
.ms-date > .ms-input { box-sizing: content-box; min-width: 0; flex: 1; width: 97px; height: 19px; border: 0; padding: 0 0 0 7px; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 19px; background: transparent; }
.ms-date > .ms-input:focus { outline: none; }
.ms-date:focus-within, .ms-date.is-focus { outline: 0; }
/* Ошибка ручного ввода относится к общей рамке даты, внутреннее поле без рамки. */
.ms-date:has(> .ms-input[aria-invalid="true"]) { border-color: red; }
.ms-editor .ms-date:focus-within, .ms-editor .ms-date.is-focus { border-color: #2f9bff; outline: 1px solid #2f9bff; }
.ms-editor .ms-date > .ms-input:focus { outline: 0; border: 0; }
.ms-date.off, .ms-date:has(input:disabled) { background: #e3e3e3; }
.ms-date-open { box-sizing: content-box; position: relative; left: 3px; flex: none; display: flex; align-items: center; justify-content: center; width: 12px; height: 19px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #4292bd; cursor: pointer; }
.ms-date-open > svg { width: 12px; height: 13px; }
.ms-date[data-ms-time="1"] { width: 153px; }
.ms-period { display: inline-block; vertical-align: top; color: #222; font: 400 12px/normal "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
.ms-period-heading { display: flex; align-items: flex-end; height: 17px; white-space: nowrap; }
.ms-period-heading > .ms-field-label { padding-bottom: 2px; }
.ms-period-quick { display: inline-flex; height: 15px; margin-left: 4px; padding-bottom: 2px; font-size: 13px; line-height: 15px; }
.ms-period-quick > a { height: 15px; color: #186999; text-decoration: none; }
.ms-period-quick > a + a::before { content: "·"; display: inline-block; width: 5px; margin: 0 1px; color: #186999; font-size: 12px; line-height: 14px; text-align: center; }
.ms-period-quick > a:hover { color: #f88001; }
.ms-period-quick > a:visited { color: #186999; }
.ms-period-quick > a:visited:hover { color: #f88001; }
.ms-period.off .ms-period-quick > *, .ms-period[aria-disabled="true"] .ms-period-quick > *, .ms-period-quick > [aria-disabled="true"], .ms-period-quick > .off { color: #888; cursor: default; }
.ms-period-fields { display: flex; align-items: flex-start; gap: 0; }
.ms-period-fields > span:not(.ms-date) { width: 14px; flex: none; padding-top: 2px; text-align: center; }
.ms-period-fields > .ms-date { flex: 1; }
/* Плашка выбранного периода, как у МойСклада (живая сверка 11.10.2026): «◀ Сегодня, 11 октября ▶» — подпись 15px синим
   по центру, стрелки по краям; выбранный пресет оранжевым; заполненное поле фильтра — голубая подложка МойСклада. */
.ms-period-fields[hidden], .ms-period-panel[hidden] { display: none; }
.ms-period-panel { box-sizing: border-box; display: flex; align-items: center; height: 21px; padding: 0 10px; }
.ms-period-text { flex: 1 1 auto; min-width: 0; height: 21px; margin: 0 5px; padding: 0; border: 0; background: none; color: #186999; font: 400 15px/21px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ms-period-text:hover { color: #f88001; }
.ms-period-step { position: relative; flex: none; width: 10px; height: 13px; padding: 0; border: 0; background: none; cursor: pointer; }
.ms-period-step::before { content: ""; position: absolute; top: 0; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.ms-period-prev::before { right: 1px; border-right: 8px solid #1b6694; }
.ms-period-next::before { left: 1px; border-left: 8px solid #1b6694; }
.ms-period-step:hover::before { border-left-color: #f88001; border-right-color: #f88001; }
.ms-period-prev:hover::before { border-left-color: transparent; }
.ms-period-next:hover::before { border-right-color: transparent; }
.ms-period-quick > a.on, .ms-period-quick > a.on:visited { color: #f88001; }
.ms-list-filter .ms-list-field.is-filled { background: rgba(101, 190, 241, .3); }

/* Навигация каркаса прежней версии также называлась ms-menu: она исключена явно. */
.ms-menu:where(:not(#ms-menu)), .ms-multi, .ms-cal {
  box-sizing: content-box;
  position: absolute;
  z-index: 30;
  margin: 0;
  padding: 0;
  border: 1px solid #999;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 1px 3px #c8c8c8;
  color: #222;
  font: 400 12px/normal "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  transition-duration: 0s;
  transition-delay: 0s;
  animation: none;
}
.ms-menu:where(:not(#ms-menu)) { display: block; min-width: 140px; width: max-content; }
.ms-menu[hidden], .ms-multi[hidden], .ms-dialog[hidden], .ms-cal[hidden] { display: none !important; }
.ms-menu:where(:not(#ms-menu)) > .ms-menu-item {
  appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 23px;
  padding: 4px 15px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #222;
  font: inherit;
  line-height: 15px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ms-menu:where(:not(#ms-menu)) > .ms-menu-item:hover, .ms-menu:where(:not(#ms-menu)) > .ms-menu-item.is-hover, .ms-menu:where(:not(#ms-menu)) > .ms-menu-item:focus-visible { background: #dcdcdc; }
.ms-menu-item:focus, .ms-menu-item.is-focus { outline: 0; }
.ms-menu:where(:not(#ms-menu)) > .ms-menu-item:disabled, .ms-menu:where(:not(#ms-menu)) > .ms-menu-item.off, .ms-menu:where(:not(#ms-menu)) > .ms-menu-item[aria-disabled="true"] { color: #c0c0c0; background: transparent; cursor: default; }
.ms-menu-separator { display: block; height: 1px; padding: 0; margin: 2px 0; border: 0; background: #dde; }
.ms-multi { display: block; width: 249px; border-color: #bfbfbf; max-height: 200px; overflow-y: auto; z-index: 20; }
.ms-multi > .ms-check { display: flex; gap: 0; box-sizing: border-box; height: 21px; padding: 0; margin: 0; white-space: nowrap; }
.ms-multi > .ms-check > input { width: 13px; height: 13px; margin: 4px; }
.ms-multi > .ms-check.on { background: #e4f1fa; }
.ms-multi > .ms-check.highlighted { background: #dff3df; }
.ms-multi > .ms-check:hover, .ms-multi > .ms-check.is-hover { background: #fffb8c; cursor: pointer; }
.ms-multi > .ms-check:has(input:disabled) { color: #888; cursor: default; }

.ms-cal { width: 286px; z-index: 20; }
.ms-cal-head { display: flex; align-items: center; width: 266px; height: 30px; margin: 10px 10px 9px; }
.ms-cal-month { flex: 1; color: #222; font-size: 14px; font-weight: 700; text-align: center; }
.ms-cal-nav { box-sizing: content-box; position: relative; width: 30px; height: 28px; padding: 0; margin: 0; border: 1px solid #ccc; border-radius: 3px; background: linear-gradient(to bottom, #fff, #e6e6e6); color: #7b7b7b; cursor: default; outline: 0; }
.ms-cal-nav::after { content: ""; position: absolute; left: 12px; top: 9px; width: 7px; height: 7px; border: solid #888; border-width: 0 0 2px 2px; transform: rotate(45deg); }
.ms-cal-nav[data-ms-month="1"]::after { left: 10px; transform: rotate(225deg); }
.ms-cal-nav:hover, .ms-cal-nav.is-hover { background: #fff; }
.ms-cal-nav:active, .ms-cal-nav.is-active { background: #f2f2f2; }
.ms-cal-grid { display: grid; grid-template-columns: repeat(7, 38px); margin: 0 10px; }
.ms-cal-weekday { display: block; height: 14px; font-size: 12px; line-height: 14px; text-align: center; }
.ms-cal-day { box-sizing: content-box; appearance: none; display: block; width: 38px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: #222; font: inherit; line-height: 32px; text-align: center; cursor: default; outline: 0; }
.ms-cal-day.filler { color: #bbb; }
.ms-cal-day.today { width: 36px; height: 30px; border: 1px solid #d0d0d0; border-radius: 3px; line-height: 30px; }
.ms-cal-day.on { background: #aacdef; border-radius: 3px; }
.ms-cal-day:hover, .ms-cal-day.is-hover { width: 34px; height: 28px; border: 2px solid #aacdef; border-radius: 3px; line-height: 28px; outline: none; }
.ms-cal-day.today:hover, .ms-cal-day.today.is-hover { width: 36px; height: 30px; border: 1px solid #d0d0d0; line-height: 30px; }
/* Tab и стрелки выделяют текущий день, сохраняя внешние 38×32, включая «сегодня». */
.ms-cal .ms-cal-day:focus-visible { width: 34px; height: 28px; border: 2px solid #aacdef; border-radius: 3px; line-height: 28px; outline: 0; }
.ms-cal-time { display: flex; justify-content: center; height: 40px; padding: 0; }
.ms-cal-spinner { display: flex; align-items: flex-start; width: 64px; padding-top: 3px; }
.ms-cal-spinner > input { box-sizing: content-box; width: 30px; height: 25px; padding: 0; margin: 0 0 0 9px; border: 1px solid #bfbfbf; border-right: 0; border-radius: 0; font: 400 12px/normal sans-serif; color: #222; text-align: center; }
.ms-cal-spin-buttons { display: flex; flex-direction: column; }
.ms-cal-spin-buttons > button { box-sizing: border-box; display: block; position: relative; width: 24px; height: 13px; padding: 0; margin: 0; border: 1px solid #ccc; border-radius: 2px 2px 0 0; background: linear-gradient(to bottom, #fff, #e6e6e6); cursor: pointer; }
.ms-cal-spin-buttons > button + button { height: 14px; border-top: 0; border-radius: 0 0 2px 2px; }
.ms-cal-spin-buttons > button::after { content: ""; position: absolute; left: 7px; top: 4px; border: 4px solid transparent; border-top: 0; border-bottom-color: #888; }
.ms-cal-spin-buttons > button + button::after { border-bottom: 0; border-top: 4px solid #888; }

.ms-dialog { box-sizing: border-box; position: fixed; display: flex; align-items: center; justify-content: center; inset: 0; z-index: 20; background: rgba(0, 0, 0, .5); color: #222; font: 400 12px/normal "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; animation: none; transition-duration: 0s; }
/* У native dialog атрибут open управляет видимостью; flex-каркас выше предназначен для div-оболочки. */
dialog.ms-dialog:not([open]) { display: none; }
dialog.ms-dialog[open] { display: block; }
/* Собственный контекст модального окна: шапка приложения не должна накрывать окно и затемнение. */
.ms-dialog-layer { position: fixed; inset: 0; z-index: 100; pointer-events: none; animation: none; transition-duration: 0s; }
.ms-dialog-layer > .ms-dialog { pointer-events: auto; }
.ms-dialog.ms-dialog-floating { background: transparent; }
.ms-dialog-backdrop { position: fixed; inset: 0; z-index: 5; background: #000; opacity: .5; pointer-events: none; animation: none; transition-duration: 0s; }
.ms-dialog-panel { box-sizing: content-box; position: relative; display: flex; flex-direction: column; width: 500px; height: 97vh; min-height: min(624px, 100vh); max-width: calc(100vw - 60px); padding: 0 15px; border: 0; border-radius: 5px; background: #fff; box-shadow: 0 0 25px #333; }
.ms-dialog-head { flex: none; box-sizing: border-box; height: 56px; padding: 17px 30px 15px 0; }
.ms-dialog-head > h2 { margin: 0; padding: 0; font: 700 20px/24px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color: #222; }
.ms-dialog-close { appearance: none; position: absolute; right: 10px; top: 15px; width: 23px; height: 23px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: #eee; color: #666; font: 700 20px/22px Arial, sans-serif; cursor: pointer; }
.ms-dialog-close:hover { background: #ccc; color: #222; }
.ms-dialog-body { flex: 1; min-height: 0; max-height: 948px; overflow: auto; }
.ms-dialog-tree { width: 290px; max-width: 100%; }
.ms-dialog-node { box-sizing: border-box; appearance: none; display: block; position: relative; width: 100%; height: 32px; margin: 0; padding: 0 10px 0 24px; border: 0; border-radius: 0; background: transparent; color: #186999; font: 400 12px/32px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; }
.ms-dialog-node:focus, .ms-dialog-close:focus { outline: 0; }
.ms-dialog-tree.ms-tree-suggestions .ms-dialog-node:hover, .ms-dialog-tree.ms-tree-suggestions .ms-dialog-node.is-hover { background: #fffb8c; }
.ms-dialog-node.on, .ms-dialog-node[aria-selected="true"] { background: #e4f1fa; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
.ms-dialog-node[aria-expanded]::before { content: ""; position: absolute; top: 13px; left: 10px; border: 3px solid transparent; border-right: 0; border-left-color: #888; }
.ms-dialog-node[aria-expanded="true"]::before { transform: rotate(90deg); }
.ms-dialog-children { margin-left: 24px; }
.ms-dialog-children[hidden] { display: none; }
.ms-dialog-foot { display: flex; flex: none; align-items: flex-start; height: 31px; margin: 15px 0 0; }
.ms-dialog-foot > .ms-btn { margin-top: 1px; }

.ms-link, .ms-link:visited { color: #186999; text-decoration: underline; cursor: pointer; }
.ms-link:hover { color: #f88001; }
.ms-help { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin: 0; border: 1px solid #7eafcc; border-radius: 50%; background: #ecf8ff; color: #186999; font: 700 10px/13px Arial, sans-serif; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; }
.ms-help:hover, .ms-help.is-hover { color: #186999; border-color: #186999; --ms-icon-help-ring: #186999; text-decoration: none; }
.ms-help.on, .ms-help[aria-expanded="true"] { color: #fff; background: #186999; border-color: #186999; --ms-icon-help-fill: #186999; --ms-icon-help-ring: #186999; --ms-icon-help-mark: #fff; }
.ms-help:has(> .ms-icon-help) { border: 0; background: transparent; }
.ms-help > .ms-icon-help { display: block; width: 15px; height: 15px; }
.ms-chip { box-sizing: content-box; display: inline-flex; align-items: center; position: relative; min-width: 50px; max-width: 250px; padding: 6px 15px 5px 10px; margin: 3px 3px 0; border: 0; border-radius: 15px; background: #e3e3e3; color: #222; font: 400 12px/16.8px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; text-decoration: none; vertical-align: middle; cursor: pointer; }
.ms-chip:visited { color: #222; }
.ms-chip.on, .ms-chip.on:visited { color: #fff; background: #1f75a8; }
.ms-chip:hover, .ms-chip.is-hover { background: #d1d1d1; text-decoration: none; }
.ms-chip.dragged { opacity: .4; }
.ms-chip.dropping { border: 1px dashed #bfbfbf; background: none; color: #888; opacity: 1; }
.ms-chip-text { display: block; min-width: 0; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-chip:hover > .ms-chip-text, .ms-chip.is-hover > .ms-chip-text { max-width: 240px; }
.ms-chip > button { display: none; position: absolute; top: 0; right: 5px; padding: 0; margin: 0; width: 10px; height: 10px; border: 0; background: transparent; color: #888; font: 12px/10px Arial, sans-serif; cursor: pointer; }
.ms-chip:hover > button, .ms-chip.is-hover > button { display: block; }
.ms-refresh { box-sizing: content-box; appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 20px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: #999; vertical-align: middle; cursor: pointer; }
.ms-refresh > svg { display: block; }
.ms-refresh:hover, .ms-refresh:visited { color: #999; }
[data-ms-tooltip] { position: relative; }
[data-ms-tooltip]::before, [data-ms-tooltip]::after { position: absolute; display: none; pointer-events: none; z-index: 1000000; }
[data-ms-tooltip]::after { content: attr(data-ms-tooltip); top: 100%; left: 0; margin-top: 9px; padding: 8px 12px; border-radius: 4px; background: #091739; color: #fff; font: 400 12px/16px var(--ms-font-interface, 'Svod Onest', Arial, sans-serif); white-space: pre; text-align: center; box-shadow: none; }
[data-ms-tooltip]::before { content: ""; bottom: -9px; left: 10px; width: 0; height: 0; border: 9px solid transparent; border-top: 0; border-bottom-color: #091739; z-index: 1000001; }
[data-ms-tooltip]:hover::before, [data-ms-tooltip]:hover::after, [data-ms-tooltip].is-hover::before, [data-ms-tooltip].is-hover::after { display: block; animation: ms-widget-tip .2s ease-in forwards; }
[data-ms-tooltip-pos="top"]::after { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 9px; }
[data-ms-tooltip-pos="top"]::before { top: -9px; bottom: auto; border: 9px solid transparent; border-bottom: 0; border-top-color: #091739; }
[data-ms-tooltip-pos="bottom-center"]::after { width: 200px; left: calc(50% - 116px); }
[data-ms-tooltip-pos="bottom-center"]::before { left: calc(50% - 9px); }
@media (hover: none) and (pointer: coarse) {
  [data-ms-tooltip]:focus::before, [data-ms-tooltip]:focus::after, [data-ms-tooltip]:active::before, [data-ms-tooltip]:active::after { display: block; animation: ms-widget-tip .2s ease-in forwards; }
}
@keyframes ms-widget-tip { from { opacity: 0; } to { opacity: 1; } }

/* Страница образцов не задаёт геометрию рабочих страниц. */
.ms-page-styleguide { padding: 20px; color: #222; font: 400 12px/normal "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
.ms-guide-title { margin: 0 0 10px; font-size: 20px; line-height: 24px; }
.ms-guide-note { margin: 0 0 20px; color: #777; }
.ms-guide-section { margin: 0 0 25px; }
.ms-guide-section > h2 { margin: 0 0 12px; font-size: 16px; line-height: 20px; }
.ms-guide-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 20px; margin-bottom: 16px; }
.ms-guide-example { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ms-guide-caption { color: #777; font-size: 11px; }
.ms-guide-filter { padding: 12px 15px; background: #e3e3e3; }
.ms-guide-popup-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 35px; }
.ms-guide-popup-row .ms-menu, .ms-guide-popup-row .ms-multi, .ms-guide-popup-row .ms-cal { position: relative; left: auto; top: auto; }
.ms-guide-popup-row .ms-menu { width: 160.641px; }
.ms-dialog.ms-dialog-demo { position: relative; inset: auto; width: 580px; max-width: 100%; height: 580px; }
.ms-dialog-demo > .ms-dialog-panel { height: 550px; min-height: 0; max-width: calc(100% - 60px); }
.ms-guide-result { min-height: 16px; margin: 10px 0; color: #186999; }
.ms-guide-specimen { position: absolute; margin: 0; padding: 0; }
.ms-guide-specimen .ms-menu, .ms-guide-specimen .ms-cal, .ms-guide-specimen .ms-multi { position: relative; }
.ms-guide-specimen-menu { left: 952px; top: 150px; }
.ms-guide-specimen-menu .ms-menu { width: 160.641px; }
.ms-guide-specimen-calendar { left: 310px; top: 207px; }
.ms-guide-specimen-multi { left: 311px; top: 258px; }
.ms-guide-specimen-buttons { left: 47px; top: 178px; display: flex; }
.ms-guide-specimen-period { left: 311px; top: 170px; }
.ms-guide-specimen-filter { left: 360.516px; top: 124px; }
.ms-guide-specimen-select { left: 575px; top: 187px; }
.ms-guide-specimen-pick { left: 47px; top: 237px; }
.ms-guide-specimen-search { left: 443.828125px; top: 128px; }
.ms-guide-specimen-group { left: calc(50% - 502px); top: 147.703125px; }
.ms-guide-specimen-chip { left: 20px; top: 532px; }
.ms-guide-specimen-check { left: 40px; top: 589.796875px; }
.ms-guide-specimen-help { left: 20px; top: 130.6875px; }
.ms-guide-specimen-help, .ms-guide-specimen-check { display: flex; align-items: flex-start; }
.ms-guide-specimen-refresh { left: 255.03125px; top: 129px; }
.ms-guide-specimen-edge { position: static; }
.ms-guide-edge-fields { display: flex; align-items: center; position: fixed; right: 5px; bottom: 5px; z-index: 2; }
.ms-guide-edge-fields .ms-btn { margin: 0 4px; }
@media (max-width: 600px) { .ms-page-styleguide { padding: 12px; } .ms-guide-popup-row { gap: 20px; } }
/* Круг уже нарисован внутри двух SVG A9: кнопка сохраняет ровно одну рамку. */
.ms-btn-circle:has(> .ms-icon-bookmark), .ms-btn-circle:has(> .ms-icon-gear-round) { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; }
.ms-btn-circle > .ms-icon-bookmark, .ms-btn-circle > .ms-icon-gear-round { width: 28px; height: 28px; }
.ms-btn-circle.on:hover:has(> .ms-icon-bookmark), .ms-btn-circle.on:hover:has(> .ms-icon-gear-round) { border: 0; padding: 0; }
.ms-btn-circle:where(:not(:disabled):not(.off):not([aria-disabled="true"])):hover, .ms-btn-circle.is-hover:where(:not(:disabled):not(.off):not([aria-disabled="true"])), .ms-btn-circle.on { --ms-icon-round-top: #848484; --ms-icon-round-bottom: #909090; --ms-icon-round-end: 100%; }
.ms-btn-circle:disabled, .ms-btn-circle.off, .ms-btn-circle[aria-disabled="true"] { --ms-icon-round-top: #c0c0c0; --ms-icon-round-bottom: #b4b4b4; --ms-icon-round-end: 96%; box-shadow: none; cursor: default; }
.ms-guide-specimen-buttons, .ms-guide-specimen-period { background: #e3e3e3; }
.ms-guide-specimen-buttons + .ms-guide-note { margin-top: 450px; }