/* Шапка рабочих экранов в новом виде на компьютере (волна 5 дизайна экранов).
   Подключается после `dizayn2.css`: тот у потолка 800 строк.

   G2: в строке — только рабочие разделы («Объекты», «Поиск цен», «Как
   работать»); «Меню» на любой шапке становится кнопкой аккаунта с буквой и
   именем, а раскрытая карточка G3 показывает личное и разделы проекта.
   P8 (Эд, 16.10.2026): переключателя вида больше нет — новый дизайн у всех.
   P3: ход фоновой работы — плашка у разделов и тонкая полоса по нижнему
   краю липкой шапки; прокрутил лист вниз — ход всё равно на виду. */

/* P3: плашка хода — тёплая капсула с кружком, слова с заглавной, числа жирно и одной
   ширины. Селектор с `.navlink` и отдельная строка для `aria-current`: на экране своего
   поиска `dizayn_dva.js` помечает плашку текущим разделом, и правило «таблетки» раздела
   (`dizayn2.css`) красило её в белое. Обычные ссылки шапки эти правила не трогают. */
[data-dizayn="2"] .topbar .navlink.fonovaya,
[data-dizayn="2"] .topbar .navlink.fonovaya[aria-current="page"] {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--fg-1);
  font-size: 13.5px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
}
[data-dizayn="2"] .topbar .navlink.fonovaya:hover { background: color-mix(in oklch, var(--accent) 26%, transparent); }
[data-dizayn="2"] .topbar .fonovaya-chisla { font-weight: 650; }
[data-dizayn="2"] .topbar .fonovaya [data-sborka-tochka-slova] { display: inline-block; font-variant-numeric: tabular-nums; }
[data-dizayn="2"] .topbar .fonovaya [data-sborka-tochka-slova]::first-letter { text-transform: uppercase; }
[data-dizayn="2"] .topbar .fonovaya-eta { margin-left: 5px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
[data-dizayn="2"] .topbar .fonovaya-eta:empty,
[data-dizayn="2"] .topbar .fonovaya[hidden],
[data-dizayn="2"] .topbar .fonovaya-liniya[hidden] { display: none; }
/* Пульсирующая точка прежнего вида становится кружком «работаем».
   Ключевые кадры `zh-vrashchenie` и `zh-beg` — в `ceny_ozhidanie.css` (подключён всегда). */
[data-dizayn="2"] .topbar .fonovaya-tochka {
  width: 13px;
  height: 13px;
  margin-right: 7px;
  border: 2px solid color-mix(in oklch, var(--accent) 28%, transparent);
  border-top-color: var(--accent-ink);
  border-radius: 50%;
  background: none;
  opacity: 1;
  animation: zh-vrashchenie .8s linear infinite;
}
/* Полоса хода по нижнему краю шапки: на всю её ширину, кликов не ловит. */
[data-dizayn="2"] .topbar .fonovaya-liniya {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
}
[data-dizayn="2"] .topbar .fonovaya-zalivka { display: block; height: 100%; background: var(--accent); transition: width .6s ease; }
[data-dizayn="2"] .topbar .fonovaya-liniya::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--paper) 75%, transparent), transparent);
  transform: translateX(-100%);
  animation: zh-beg 2.2s ease-in-out infinite;
}
/* На телефоне плашке хватает чисел: срок уходит, кегль меньше. */
@media (max-width: 640px) {
  [data-dizayn="2"] .topbar .fonovaya { padding: 5px 10px; font-size: 12.5px; }
  [data-dizayn="2"] .topbar .fonovaya-eta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-dizayn="2"] .topbar .fonovaya-tochka,
  [data-dizayn="2"] .topbar .fonovaya-liniya::after { animation: none; }
  [data-dizayn="2"] .topbar .fonovaya-zalivka { transition: none; }
}

@media (min-width: 901px) {
  [data-dizayn="2"] .topbar { align-items: center; }
  [data-dizayn="2"] .topbar .topbar-rabota { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
  [data-dizayn="2"] .topbar .topbar-rabota .navlink { padding: 8px 13px; font-size: 14.5px; color: var(--fg-1); }
  [data-dizayn="2"] .topbar .topbar-rabota .navlink[aria-current="page"] { font-weight: 600; }

  /* Кнопка аккаунта — у любой шапки, и у длинной владельца тоже. */
  [data-dizayn="2"] .topbar .topbar-burger {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 12px 4px 4px;
    box-sizing: border-box;
    background: var(--paper);
    box-shadow: var(--sh-1), 0 0 0 1px var(--bd);
  }
  [data-dizayn="2"] .topbar .topbar-flag { display: block; }
  [data-dizayn="2"] .topbar .topbar-burger .burger-menyu,
  [data-dizayn="2"] .topbar .topbar-flag:checked + .topbar-burger .burger-zakryt { display: none; }
  [data-dizayn="2"] .topbar .burger-akk { display: inline-flex; align-items: center; gap: 9px; }
  [data-dizayn="2"] .topbar .burger-akk .who-bukva { display: inline-grid; width: 30px; height: 30px; font-size: 13px; font-weight: 600; }
  [data-dizayn="2"] .topbar .burger-imya {
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--ink);
  }
  [data-dizayn="2"] .topbar .burger-akk::after { content: "▾"; font-size: 11px; color: var(--fg-3); transition: transform var(--t-pop) var(--e-out); }
  [data-dizayn="2"] .topbar .topbar-flag:checked + .topbar-burger { background: var(--paper); color: var(--ink); }
  [data-dizayn="2"] .topbar .topbar-flag:checked + .topbar-burger .burger-akk::after { transform: rotate(180deg); }

  /* Разделы — только раскрытой карточкой под кнопкой (её место и размер —
     правило волны 3 «шире телефона» в `dizayn2.css`). */
  [data-dizayn="2"] .topbar .topbar-menu { display: none; }
  [data-dizayn="2"] .topbar .topbar-flag:checked ~ .topbar-menu {
    display: flex;
    flex-direction: column;
    flex-basis: auto;
    top: calc(100% - 2px);
    right: 24px;
  }
  /* Рабочие разделы уже стоят в строке — в карточке их не повторяем. */
  [data-dizayn="2"] .topbar .topbar-flag:checked ~ .topbar-menu .menu-rabota { display: none; }
}

/* Узкая шапка: строка не вмещает плашку «идёт тестирование» — она уходит.
   Мерило — ширина самой шапки: у колонки чтения (1156 px) она уже окна, а
   плашка хода фоновой работы («Ищем цены …») съедает ещё ~260 px. */
@media (min-width: 901px) {
  [data-dizayn="2"] .topbar { container: shapka / inline-size; }
}
@container shapka (max-width: 1099px) {
  [data-dizayn="2"] .topbar .alpha { display: none; }
}
@container shapka (max-width: 1339px) {
  [data-dizayn="2"] .topbar:has(.fonovaya) .alpha { display: none; }
}

/* Телефон: логотип, плашка, микрофон и «Меню» встают в одну строку. На 390 «Меню»
   переносилось второй строкой, и липкая шапка отнимала 40 px у каждого рабочего
   экрана (ОС Насти 16.10 про телефон). На 360–380 и полная подпись плашки не
   входит: видна короткая, экранной читалке остаётся полный текст. */
@media (max-width: 480px) {
  [data-dizayn="2"] .topbar { column-gap: 8px; }
  [data-dizayn="2"] .topbar .alpha { font-size: 9.5px; letter-spacing: .03em; padding: 3px 7px; }
}
@media (max-width: 380px) {
  [data-dizayn="2"] .topbar .alpha[data-korotko] { font-size: 0; letter-spacing: 0; }
  [data-dizayn="2"] .topbar .alpha[data-korotko]::after { content: attr(data-korotko); font-size: 9.5px; letter-spacing: .03em; }
}