/* Единая шапка страниц-историй раздела «История в цифрах» (/istorii/t1966/, /istorii/vov/ …).
   Разметка одинакова везде: header.sh > .sh-in > (a.sh-brand + .sh-tools).
   Цвета и размеры заданы здесь, а не токенами страниц, чтобы шапка совпадала пиксель в пиксель. */

.sh{flex:none;height:56px;background:rgba(10,17,25,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);position:relative;z-index:30}
.sh-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%;padding:0 clamp(16px,3vw,32px)}

.sh-brand{display:flex;align-items:center;gap:10px;min-width:0;color:#F2F6FA;text-decoration:none}
.sh-brand:hover{color:#F2F6FA}
.sh-mk{width:26px;height:26px;flex:none;transition:opacity .18s}
.sh-brand:hover .sh-mk{opacity:.75}
.sh-brand b{font:600 16px/1 Unbounded,Manrope,system-ui,sans-serif;letter-spacing:.005em;transform:translateY(1px)}
.sh-brand i{width:1px;height:16px;background:rgba(255,255,255,.18);flex:none}
.sh-brand span{font:500 13px/1 Manrope,system-ui,sans-serif;color:#8FA3B8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sh-tools{display:flex;align-items:center;gap:8px;flex:none}
.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:99px;border:1px solid transparent;font:600 12.5px/1 Manrope,system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.sh-btn svg{width:14px;height:14px;flex:none}
.sh-btn span{font:inherit;font-style:normal}
.sh-btn.ghost{color:#C4D2E2;border-color:rgba(255,255,255,.22);background:none}
.sh-btn.ghost:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.sh-btn.main{color:#F0BFA3;background:rgba(227,162,127,.16)}
.sh-btn.main:hover{background:rgba(227,162,127,.26);color:#fff}
.sh a:focus-visible{outline:2px solid #E3A27F;outline-offset:2px}

/* телефон: у бренда остаётся знак и слово «Эхолос», название истории видно в самой сцене;
   «Все истории» — круглая кнопка-стрелка, «Кабинет» — компактная таблетка. Высота касания 34 px. */
@media(max-width:560px){
  .sh-brand i,.sh-brand span{display:none}
  .sh-btn.ghost{width:34px;padding:0}
  .sh-btn.ghost span{display:none}
  .sh-btn.main{padding:0 14px}
}
@media(max-height:480px){.sh{height:44px}.sh-btn{height:30px}}

/* ===== Нижняя панель на телефоне и планшете — одна для всех историй =====
   Внизу каждой сцены своя полоса 64 px (плюс безопасный отступ iPhone) только под кнопки: «Источник кадра» слева,
   «Звук» справа. Текст сцены заканчивается над полосой и плавно гаснет, поэтому кнопки не налезают на слова.
   Плашки с названием сцены и подсказки «колесо или стрелки» на таких экранах нет ни в одной истории. */
@media(max-width:900px),(pointer:coarse){
  .panel{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}
  .panel .wrap{padding-bottom:20px!important}
  /* Облегчение для телефонов. Маска на прокручиваемом блоке, размытие полноэкранных фото и «стекло» под кнопками
     заставляют браузер держать в памяти отдельные слои для каждой сцены; при длинном просмотре слои сбрасываются
     и содержимое пропадает. Поэтому здесь: без маски, без блюра фона, без зерна и без backdrop-filter. */
  .grain{display:none!important}
  .photo.blur{filter:brightness(.36) grayscale(.5)!important}
  .show.frames .bgb{filter:brightness(.32) grayscale(.6)!important}
  .sh,.top,.topbar,.card,.panel.media .card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .panel.media .card{background-color:rgba(13,21,31,.8)!important}
  .credit-btn,.amb,.snd,.show-cap,.amb-cap,.credit-pop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .credit-btn,.amb:not(.on),.snd,.show-cap,.amb-cap,.credit-pop{background-color:rgba(10,17,25,.92)!important}
  #note,#chapterNote,.hint{display:none!important}

  .credit{left:12px!important;right:auto!important;top:auto!important;bottom:calc(15px + env(safe-area-inset-bottom,0px))!important}
  .credit-btn{width:34px!important;height:34px!important;min-height:0!important;padding:0!important;justify-content:center;font-size:0!important;gap:0!important}
  .credit-btn::before{width:18px!important;height:18px!important;font-size:11px!important}
  .credit-pop{bottom:44px!important;width:min(340px,calc(100vw - 24px))!important}

  .amb,.snd{position:fixed!important;right:12px!important;left:auto!important;top:auto!important;bottom:calc(15px + env(safe-area-inset-bottom,0px))!important;height:34px!important;min-height:0!important;padding:0 14px!important;font-size:12.5px!important;z-index:36}
  .snd{position:absolute!important}
  .amb-cap{right:12px!important;bottom:calc(60px + env(safe-area-inset-bottom,0px))!important}
  .show-cap{right:auto!important;left:12px!important;bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;max-width:calc(100% - 24px)!important}
}