/* ===== Sidebar (общий, настоящий fixed — НЕ часть #stage) =====
     Свой размер (иконки/шрифт подписи) — реальные пиксели, как у меню,
     не масштабируется. Прижат к истинному левому краю и истинному низу
     экрана всегда, независимо от масштаба/размера холста.
     left:45px: центр колонки (иконки App Store/Google Play, 20px шириной —
     самый широкий child при align-items:center, см. правило ниже) должен
     совпадать с центром .logo (left:28px + width:54px/2 = 55px).
     45+20/2=55 — центры совпадают ровно. */
  /* Правка макета 2026-08-07 (Figma 2872:2475): вместо значков магазинов —
     подпись и логотип media5, и вся колонка стала КНОПКОЙ, открывающей попап
     «О компании». Поэтому здесь сброс собственной отрисовки кнопки; якорь
     (left/bottom) не трогаем — он выставлен по прежнему макету и проверен на
     всех слайдах. */
  .apps-sidebar{
    position:fixed; left:45px; bottom:24px;
    display:flex; flex-direction:column; align-items:center; gap:24px;
    z-index:100;
    padding:0; border:none; background:none; cursor:pointer;
  }
  /* Высота блока подписи — 337 из макета: столько занимает повёрнутая строка.
     Поворачиваем ВНУТРЕННИЙ span, а не сам блок, иначе он утащил бы за собой
     раскладку колонки (высота и ширина у повёрнутого элемента остаются
     исходными — transform не участвует в лейауте). */
  .apps-label{ width:12px; height:337px; display:flex; align-items:center; justify-content:center; }
  .apps-label span{
    display:inline-block; white-space:nowrap; transform:rotate(-90deg);
    font-family:'Unbounded',sans-serif; font-weight:400; font-size:10px;
    letter-spacing:1px; text-transform:uppercase; color:var(--ink);
  }
  /* Логотип тоже вертикальный: бокс 20×89.596 — это повёрнутый 89.596×20. */
  .apps-media5{ width:20px; height:89.596px; display:flex; align-items:center; justify-content:center; }
  .apps-media5 img{
    display:block; width:89.596px; height:20px; transform:rotate(-90deg);
    /* Файл общий с попапом и меню, там он лежит на чёрном и потому белый;
       здесь фон жёлтый — гасим в чёрный тем же приёмом, что на 4-1. */
    filter:brightness(0);
  }
  .apps-sidebar:hover .apps-media5 img{ opacity:0.7; }

  /* ----- Тёмный слайд ------------------------------------------------------
     Слайд 3 (Cost) — единственный тёмный на сайте, и сайдбар на нём оказывался
     чёрным по чёрному: подпись почти не читалась, а логотип media5 пропадал
     совсем (правка 2026-08-08 по замечанию пользователя).

     Класс ставит та же функция, что перекрашивает шапку, — applyMenubarDark в
     js/nav-menu.js: тема у них общая (dark = индекс слайда 2), и заводить
     сайдбару собственный опрос индекса значило бы завести второй источник
     правды о том, какой слайд тёмный.

     Логотип возвращаем к исходному белому простым отключением фильтра: файл
     images/media5-logo.svg сам по себе БЕЛЫЙ (он общий с меню и попапом, где
     лежит на чёрном), а brightness(0) выше — это как раз перекраска под жёлтый
     фон остальных слайдов.

     Переход по цвету — 0.45с, ровно половина перехода между слайдами: столько
     же занимает уход шапки за верхний край, где она перекрашивается. Так обе
     перекраски идут в одном темпе. В спокойном режиме (prefers-reduced-motion)
     переход снимаем — там цвет обязан меняться сразу. */
  .apps-label span, .apps-media5 img{ transition:color 0.45s ease, filter 0.45s ease; }
  html.is-calm .apps-label span, html.is-calm .apps-media5 img{ transition:none; }
  .apps-sidebar.is-dark .apps-label span{ color:#fff; }
  .apps-sidebar.is-dark .apps-media5 img{ filter:none; }