/* Шапка десятого — ЕДИНСТВЕННАЯ копия стилей на весь сайт (сведение
   долга из TODO, 2026-08-12). Разметка — общим куском _head10.html;
   файл подключают и морда (preview10.html, остальные её стили
   инлайном), и base.html (после ten.css). Шапка правится здесь и
   только здесь.

   Размеры — в ПИКСЕЛЯХ, не в rem: app.css держит базовый кегль 15, а
   морда свёрстана при 16 — те же rem давали шапку на 6,7% мельче
   (урок сверки с восьмой песочницей).

   Цветовые токены (--ink, --green…) задаёт страница: морде — её
   инлайновый :root, остальным — ten.css; значения одни. Свой у шапки
   только --head-w. */

:root {
  /* колонка шапки — как у верха морды; от 1960 расширяется до 1930 */
  --head-w: min(80vw, 1320px);
}

header.top10 { border-bottom: 1px solid var(--line); background: #fff; }
.top10 .head { display: flex; align-items: center; gap: 18px; height: 78px;
               max-width: var(--head-w); margin: 0 auto;
               /* поле 28 — как у .wrap на морде: лого стоит в той же точке */
               padding: 0 28px; }
/* слоган — на базовой линии логотипа (просьба пользователя) */
.top10 .brand { display: flex; align-items: baseline; gap: 14px; }
.top10 .logo { font-size: 29.6px; font-weight: 800; letter-spacing: -.6px;
               color: var(--ink); text-decoration: none; }
.top10 .logo-4 { color: var(--accent); }
.top10 .logo-me { color: var(--green); }
.top10 .claim { color: var(--muted); font-size: 14.7px; }
.top10 .head-center { margin: 0 auto; display: flex; align-items: center;
                      gap: 14px; }
/* пульс: цифру доводит скрипт морды; место под неё занято заранее,
   иначе середина шапки ездила бы при загрузке (приём боевого) */
.top10 .pulse { font-weight: 700; color: var(--green-dark); font-size: 14.4px;
                white-space: nowrap; text-decoration: none; }
.top10 .pulse b { display: inline-block; min-width: 2.6ch; text-align: right;
                  font-variant-numeric: tabular-nums; }
.top10 .btn-add { background: var(--green); color: #fff; font-weight: 600;
                  font-size: 15.2px; padding: 12px 22px; border-radius: 8px;
                  white-space: nowrap; text-decoration: none; }
.top10 .btn-add:hover { background: var(--green-dark); }
.top10 .head-nav { display: flex; gap: 18px; font-size: 15.2px;
                   white-space: nowrap; }
.top10 .head-nav a { color: var(--ink); text-decoration: none; }
.top10 .head-nav a:hover, .top10 .head-nav a.active { color: var(--green); }
.top10 .lang-dd10 { position: relative; }
/* на широком экране выбранный язык горит зелёным (уточнение
   пользователя); обычным цветом он становится только на телефоне */
.top10 .lang-dd10 > summary { list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--green); font-weight: 600; font-size: 15.2px; }
.top10 .lang-dd10 > summary::-webkit-details-marker { display: none; }
/* окошко языков — БЕЗ префикса .top10: этим же окошком пользуется
   пилюля языка над карточкой на морде (.lm10-lang) */
.lang-menu10 {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 950;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 26px rgba(17, 24, 39, .14); padding: 6px;
  display: grid; gap: 2px; min-width: 64px;
}
.lang-menu10 a { padding: 8px 14px; border-radius: 8px;
                 font-size: 14.4px; color: var(--ink);
                 text-decoration: none; white-space: nowrap; }
.lang-menu10 a:hover { background: var(--soft); color: var(--green); }
.lang-menu10 a.on { color: var(--green); font-weight: 700; }

/* широкий экран: шапка тянется до 1930 — колонка заголовка морды
   плюс 1320 её панели; края сходятся с верхом страницы */
@media (min-width: 1960px) {
  :root { --head-w: 1930px; }
}

@media (max-width: 700px) {
  /* короткое «+ Разместить», голая цифра пульса, меню на телефон не
     влезает (страницы живы по прямым адресам). Шапка во всю ширину
     (просьба пользователя «чуть раздвинь»), поля 12 — общие с
     остальной страницей */
  .top10 .claim, .top10 .place-long, .top10 .pulse-word,
  .top10 .head-nav { display: none; }
  .top10 .head { gap: 10px; height: 56px; max-width: none;
                 padding: 0 12px; }
  .top10 .btn-add { padding: 10px 14px; font-size: 13.6px; }
  .top10 .head-center { gap: 8px; }
  .top10 .logo { font-size: 21.6px; }
  /* язык обычным цветом только на телефоне (уточнение пользователя) */
  .top10 .lang-dd10 > summary { color: var(--ink); }
}