/* Каркас Свода: размеры и состояния сверены по локальным эталонам. Значки и знак системы свои. */
#ms-header { position: relative; z-index: 40; }
.ms-top { display: flex; align-items: center; min-height: 58px; height: 58px; padding-right: 21px; background: #1f75a8; }
/* Второй слой синей полосы воспроизводит её край на DPR 1.25 без светлого шва. */
.ms-top::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 58px; background: #1f75a8; z-index: -1; pointer-events: none; }
.ms-brand { display: flex; flex: 0 0 58px; align-items: center; justify-content: center; width: 58px; height: 58px; color: #fff; }
.ms-brand:hover { color: #fff; text-decoration: none; }
.ms-brand svg { display: block; }
.ms-sections { display: flex; align-self: stretch; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0; padding: 0; }
.ms-sections::-webkit-scrollbar { display: none; }
/* До первого замера ссылки не показываются: ни обрезанных подписей, ни скачка «Ещё». Без JS остаётся прокрутка. */
.ms-top[data-shell-pending] .ms-sections { visibility: hidden; }
.ms-top[data-shell-ready] .ms-sections { overflow: hidden; }
.ms-sec { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; min-width: 52px; height: 58px; padding: 0 8px; border-radius: 3px 3px 0 0; color: #c6ddea; background: #1f75a8; text-decoration: none; transition: background .2s ease 0s; }
.ms-sec-icon { display: block; flex: 0 0 24px; width: 24px; height: 24px; margin-top: 14.65625px; color: #fff; }
.ms-sec-icon svg { display: block; width: 24px; height: 24px; }
.ms-sec-label { display: block; align-self: stretch; height: 12px; color: inherit; text-align: center; white-space: nowrap; cursor: pointer; font: 11px/normal "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
.ms-sec:not(.on) { will-change: opacity; }
.ms-sec:hover { color: #fff; text-decoration: none; }
/* Удержание под мышью остаётся hover; выбранный раздел — самостоятельное состояние. */
.ms-sec:not(.on):active { color: #fff; background: rgba(0,0,0,.15); }
.ms-sec:not(.on):hover { background: rgba(0,0,0,.08); }
.ms-sec.on { color: #fff; background: rgba(0,0,0,.15); cursor: auto; transition: none; }
.ms-top a:focus, .ms-top summary:focus { outline: 0; }
.ms-menu-toggle, .ms-burger { display: none; }
/* На настольной ширине вкладки переходят на следующую строку целиком, как в эталоне. */
#ms-tabs { display: flex; flex-wrap: wrap; align-items: flex-start; min-height: 40px; margin: 0; padding: 0; border-bottom: 1px solid #ececec; background: #fff; }
/* У раздела «Задачи» МойСклада строки вкладок нет (живой аккаунт 27.09.2026) — содержимое сразу под шапкой. */
#ms-tabs[data-sec="tasks"] { display: none; }
.ms-tab { display: block; flex: 0 0 auto; height: 40px; margin: 0 20px; padding: 0; border: 0; color: #186999; white-space: nowrap; font: 13px/38px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; text-decoration: none; transition: none; }
.ms-tab.on, .ms-tab:hover, .ms-tab:active { color: #186999; height: 37px; border-bottom: 3px solid #186999; text-decoration: none; }
.ms-tab:focus { outline: 0; }
.ms-user-menu { position: relative; flex: 0 0 auto; }
.ms-user-menu > summary { display: flex; align-items: center; height: 58px; list-style: none; cursor: auto; border-radius: 0; transition: none; }
.ms-user-menu > summary::-webkit-details-marker { display: none; }
.ms-user-menu > summary::marker { content: ''; }
.ms-user-menu > summary:hover, .ms-user-menu > summary:focus-visible { cursor: pointer; background: rgba(0,0,0,.08); }
.ms-user-menu[open] > summary { background: rgba(0,0,0,.15); }
.ms-user-info { display: block; margin: 5px 14px 0 5px; text-align: right; }
.ms-user-name, .ms-user-login { display: block; min-width: 2em; max-width: 20em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; line-height: normal; }
.ms-user-name { color: #fff; font-size: 12px; }
.ms-user-login { color: #c6ddea; font-size: 11px; }
.ms-user-avatar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #d9d9d9; color: #1f75a8; font-size: 12px; }
.ms-user-arrow { display: block; width: 8px; height: 8px; margin: 0 8px 0 4px; color: #c6ddea; font: 10px/8px Arial, sans-serif; }
.ms-service { position: absolute; top: 58px; right: 3px; width: 168.171875px; padding: 0; border: 1px solid #999; background: #fff; box-shadow: 0 1px 3px #c8c8c8; z-index: 30; }
.ms-service > a, .ms-service-disabled, .ms-logout > button { display: block; height: 15px; padding: 8px 15px; margin: 0; border: 0; border-radius: 0; color: #222; background: transparent; font: 12px/normal "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; text-align: left; white-space: pre; text-decoration: none; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background .2s ease 0s; }
.ms-service > a:hover, .ms-service > a:focus-visible, .ms-logout > button:not(:disabled):hover, .ms-logout > button:not(:disabled):focus-visible { color: #222; background: #dcdcdc; text-decoration: none; }
.ms-service-disabled, .ms-service-disabled:hover, .ms-logout > button:disabled { color: #c0c0c0; background: #fff; cursor: default; transition: none; }
.ms-service a:focus, .ms-service button:focus { outline: 0; }
/* Клавиатура использует фон наведения, без собственного контура поверх элементов шапки. */
.ms-top a:focus-visible, .ms-top summary:focus-visible,
.ms-service a:focus-visible, .ms-service button:focus-visible,
.ms-shell-popup a:focus-visible, .ms-shell-popup summary:focus-visible { outline: 0; }
.ms-sections > .ms-sec:not(.on):focus-visible, .ms-shell-more:not([open]) > summary:focus-visible { color: #fff; background: rgba(0,0,0,.08); }
.ms-service-divider { height: 1px; margin: 2px 0; background: #dde; }
.ms-service-fresh { padding: 8px 15px; color: #777; font-size: 12px; line-height: 15px; overflow-wrap: anywhere; }
.ms-logout { display: block; margin: 0; padding: 0; }
.ms-logout > button { box-sizing: content-box; width: calc(100% - 30px); }
/* Служебные кнопки — круги 38×38 с шагом 42 px, как в эталоне шапки. */
.ms-shell-tools { position: relative; display: flex; flex: 0 0 auto; align-items: center; margin-left: 16px; }
.ms-shell-tool { flex: 0 0 42px; }
.ms-shell-tool > summary { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 4px; padding: 0; border: 0; border-radius: 20px; color: #fff; list-style: none; cursor: pointer; transition: background .2s ease, opacity .2s ease; }
.ms-shell-tool > summary::-webkit-details-marker, .ms-shell-more > summary::-webkit-details-marker, .ms-shell-about > summary::-webkit-details-marker { display: none; }
.ms-shell-tool > summary::marker, .ms-shell-more > summary::marker, .ms-shell-about > summary::marker { content: ''; }
.ms-shell-tool > summary:hover { background: rgba(0,0,0,.08); }
.ms-shell-tool[open] > summary, .ms-shell-tool > summary:active { background: rgba(0,0,0,.15); }
.ms-shell-tool > summary svg { display: block; }
#ms-help-menu { --ms-icon-help-fill: transparent; --ms-icon-help-ring: #fff; --ms-icon-help-mark: #fff; }
.ms-shell-popup { position: absolute; top: 58px; right: 0; box-sizing: content-box; margin: 0; padding: 0; border: 1px solid #999; background: #fff; box-shadow: 0 1px 3px #c8c8c8; color: #222; z-index: 31; max-width: calc(100vw - 24px); max-height: calc(100vh - 72px); overflow: auto; overscroll-behavior: contain; }
.ms-shell-popup > a, .ms-shell-about > summary { display: block; padding: 8px 15px; height: 15px; margin: 0; color: #222; background: #fff; font: 12px/normal "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; text-align: left; white-space: nowrap; text-decoration: none; cursor: pointer; list-style: none; transition: background .2s ease; }
.ms-shell-popup > a:hover, .ms-shell-popup > a:focus-visible, .ms-shell-about > summary:hover, .ms-shell-about > summary:focus-visible { color: #222; background: #dcdcdc; text-decoration: none; }
.ms-shell-popup h2 { margin: 0; padding: 12px 15px; border-bottom: 1px solid #dde; font-size: 14px; font-weight: 400; }
.ms-shell-popup p { margin: 0; padding: 15px; font-size: 12px; line-height: 18px; }
.ms-shell-notifications { width: 316px; }
.ms-shell-notifications p { padding-top: 32px; padding-bottom: 32px; color: #777; text-align: center; }
.ms-shell-help { width: 276px; }
.ms-shell-about > summary::after { content: '▾'; float: right; color: #777; }
.ms-shell-about[open] > summary::after { content: '▴'; }
.ms-shell-about p { padding-top: 6px; color: #555; }
/* В «Ещё» перемещаются те же ссылки, поэтому права и выбор вкладок остаются у каркаса. */
.ms-shell-more { position: relative; flex: 0 0 68px; height: 58px; }
.ms-shell-more > summary { display: flex; align-items: center; justify-content: center; gap: 5px; width: 68px; height: 58px; border-radius: 3px 3px 0 0; color: #c6ddea; font-size: 12px; list-style: none; cursor: pointer; transition: background .2s ease; }
.ms-shell-more > summary:hover { background: rgba(0,0,0,.08); color: #fff; }
.ms-shell-more[open] > summary, .ms-shell-more.on > summary { color: #fff; background: rgba(0,0,0,.15); }
.ms-more-arrow { font: 10px/8px Arial, sans-serif; }
.ms-more-list { min-width: 180px; }
.ms-more-list .ms-sec { display: flex; flex-direction: row; align-items: center; min-width: 0; height: 36px; padding: 0 15px; gap: 10px; border-radius: 0; color: #222; background: #fff; }
.ms-more-list .ms-sec .ms-sec-icon { flex: 0 0 24px; margin: 0; color: #186999; }
.ms-more-list .ms-sec .ms-sec-label { align-self: auto; height: auto; text-align: left; font-size: 12px; }
.ms-more-list .ms-sec:hover, .ms-more-list .ms-sec:focus-visible, .ms-more-list .ms-sec:not(.on):hover, .ms-more-list .ms-sec.on { color: #222; background: #dcdcdc; }
#app { display: flow-root; min-width: 0; margin: 0; }
.ms-page-legacy { padding: 16px 20px; }
body.page-embed .ms-page-legacy { padding: 0; }
body.login .ms-page-legacy { padding: 0; }
.viewas { display: flex; align-items: center; gap: 12px; padding: 8px 20px; color: #6b4300; background: #ffc; border-bottom: 1px solid #f1d9a3; }
.viewas form { flex-shrink: 0; margin: 0 0 0 auto; }
/* Цвет сообщения зависит от смысла; readonly-плашка эталона относится к зелёному варианту. */
.ms-shell-flash { position: fixed; top: 0; left: calc(50% - 8px); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 48px); padding: 0; border: 0; border-radius: 0 0 5px 5px; color: #000; background: #d4e8ae; box-shadow: 0 0 5px #333; font: 12px/normal "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; z-index: 20; transition: none; animation: none; }
.ms-shell-flash[data-kind="warn"], .ms-shell-flash[data-kind="info"] { background: #ffc; }
.ms-shell-flash[data-kind="bad"], .ms-shell-flash[data-kind="error"] { background: #fcc; }
.ms-shell-flash:not([open]) { display: none; }
.ms-shell-flash > summary { position: absolute; top: 11px; right: 8px; width: 8px; height: 7px; margin: 0; padding: 0; color: #888; list-style: none; cursor: pointer; outline: 0; overflow: hidden; }
/* В исходном собственном значке поля по 4 px; показываем контур в окне 8×7. */
.ms-shell-flash > summary svg { display: block; position: relative; left: -4px; top: -4.5px; width: 16px; height: 16px; }
.ms-shell-flash > summary::-webkit-details-marker { display: none; }
.ms-shell-flash > summary::marker { content: ''; }
.ms-shell-flash-body { padding: 6px 8px; }
.ms-shell-flash-body > div { margin-right: 15px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Загрузчик рисует svod.js; прежняя полоса остаётся скрытой для совместимости. */
#progress { display: none; }
/* Как у сценарного центрирования МС: целый CSS px вместо дробного сдвига текста. */
@supports (transform: translateX(round(nearest, -50%, 1px))) {
  .ms-shell-flash { transform: translateX(round(nearest, -50%, 1px)); }
}
@media (max-width: 899px) {
  #ms-tabs { flex-wrap: nowrap; height: 40px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  #ms-tabs::-webkit-scrollbar { display: none; }
  #ms-tabs.ms-tabs-dragging, #ms-tabs.ms-tabs-dragging .ms-tab { cursor: grabbing; user-select: none; }
  .ms-top { flex-wrap: wrap; height: auto; padding-right: 8px; }
  .ms-menu-toggle { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
  .ms-burger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #fff; font-size: 24px; cursor: pointer; }
  .ms-menu-toggle:focus-visible + .ms-burger { outline: 2px solid #fff; }
  .ms-sections, .ms-top[data-shell-ready] .ms-sections { display: none; order: 3; flex: 1 0 100%; flex-wrap: wrap; overflow: visible; margin: 0; padding-bottom: 6px; }
  .ms-shell-tools { margin-left: auto; }
  .ms-shell-more { display: none; }
  .ms-menu-toggle:checked ~ .ms-sections, .ms-top[data-shell-ready] .ms-menu-toggle:checked ~ .ms-sections { display: flex; }
  .ms-service { right: 0; }
  .ms-page-legacy { padding: 12px; }
  .viewas { flex-wrap: wrap; padding: 8px 12px; }
  .viewas form { margin-left: 0; }
}
@media (max-width: 540px) {
  .ms-user-info { max-width: max(0px, calc(100vw - 282px)); }
  .ms-user-name, .ms-user-login { max-width: 100%; }
}
@media print {
  #ms-header, #progress, .ms-shell-flash { display: none; }
  .ms-page-legacy { padding: 0; }
}