/* Общая шапка «Смены» для страниц вне smena.html: «График», «Люди»,
   «Отчёт к собранию». Разметка — smena-shapka.js. Правила — дословно те же,
   что у шапки в smena.html (`.proto .phead`, `.proto .htop` и далее), чтобы
   шапка не менялась при переходе между экранами (слово Сергея 22.09.2026:
   «чтобы кнопки не бегали туда-сюда»).

   Ширина — как у smena.html: полоса во всю ширину окна, содержимое не шире
   1400px по центру с полями 20px (на планшете 940px, на телефоне — во всю
   ширину). Раньше шапка «Графика» жила внутри его контейнера 1300px, у
   «Людей» — 1000px, и кнопки на каждом экране стояли в своём месте. */

/* Полоса прокрутки — всегда на месте. Страницы разной длины: «Смена» и
   «График» прокручиваются, «Бюджет» и «Отчёт» нет. В браузере Windows
   полоса занимает ~15px, и на длинных страницах вся шапка уезжала влево —
   «пляшет» (слово Сергея 23.09.2026). Место под полосу держим на ВСЕХ
   страницах, тогда шапка стоит в одной точке. */
html{overflow-y:scroll;scrollbar-gutter:stable}

.shapka-vne{position:sticky;top:0;z-index:30;background:var(--panel);border-bottom:1px solid var(--line);
  font:14px/1.45 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink)}
.shapka-vne .proto{margin:0 auto;max-width:1400px;padding:12px 20px}
.shapka-vne .proto[data-w="tablet"]{max-width:940px}
.shapka-vne button{font-family:inherit;cursor:pointer;color:inherit}

/* Шрифт шапки задан ЯВНО, а не наследуется от страницы: у «Отчёта к
   собранию» свой шрифт Manrope 16px, у «Графика» — 15px с весом 500, и
   те же слова выходили то жирнее, то шире — кнопки уезжали (слово Сергея
   22.09.2026: «то жирные шрифты, то съезжают правее, левее»). */
.proto .htop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font:500 15px/1.45 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:normal;color:var(--ink)}
.proto .htop .iconbtn{font-family:inherit;line-height:normal;cursor:pointer}
.proto .brand{font-weight:800;font-size:17px;white-space:nowrap;color:var(--ink)}
.proto .brand em{color:var(--amber);font-style:normal}
.proto .site-label{font-weight:700;font-size:14.5px;color:var(--ink)}
.proto .who-name{font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap}
.proto .hsp{flex:1}
.proto .iconbtn{background:none;border:1px solid var(--line-2);border-radius:9px;padding:8px 11px;
  font-size:14px;color:var(--dim);text-decoration:none;line-height:normal}
.proto .iconbtn.on{background:var(--amber-soft,var(--panel-2));color:var(--ink);border-color:var(--amber)}
.proto .hmenu{display:none}
.proto .htools{display:contents}
.proto[data-w="panel"] .hmenu{display:inline-flex}
.proto[data-w="panel"] .htools{display:none}
.proto[data-w="panel"] .htop{flex-wrap:nowrap;position:relative;gap:8px}
.proto[data-w="panel"] .htop.tools-open .htools{display:flex;position:absolute;right:0;top:100%;
  z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:10px;gap:8px;align-items:center;flex-wrap:wrap;box-shadow:0 8px 24px rgba(20,20,19,.14)}
.proto[data-w="panel"] .site-label{font-size:13.5px}
.proto[data-w="panel"] .brand{flex:none}
.proto[data-w="panel"] .site-label,
.proto[data-w="panel"] .who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
.proto[data-w="panel"] .who-name{flex-shrink:3}
.shapka-vne .proto[data-w="panel"]{max-width:460px;padding:12px 20px}
/* Активный пункт — фоном и рамкой, без жирного: жирный шрифт шире, и
   кнопки справа от активной сдвигались на 3–7px при переходе между
   экранами (замер 22.09.2026, Playwright, 1280px). */