/* Стиль страниц стенда Минспорта на МФМ-2026.
 *
 * Один файл на три страницы — правило проекта про один экземпляр здесь не
 * формальность: шапка, кнопки и фирменная дуга должны совпасть попиксельно,
 * иначе переход между страницами читается как переход на другой сайт.
 *
 * Брендбук Фестиваля и три его правила, определившие всё:
 *
 * 1. Палитра разбита на четыре ветки, смешивать их в одном макете запрещено.
 *    Взята ветка «Масштаб» (фиолетовая) — она отвечает за международность,
 *    сцену и официальные события, то есть ровно за то, что мы транслируем.
 * 2. Фон белый. Правило книги: цветной фон — привлечь внимание, белый —
 *    читаемость и структура, «карточки с большим количеством текста». Живые
 *    субтитры — этот случай, и ветка работает через графику и акценты.
 * 3. Шрифт Onest, заголовки строчными в жирных начертаниях.
 *
 * Дуга в шапке — фирменная графика: незамкнутые формы, дуги, пересечения.
 * Незамкнутость в книге несёт смысл (открытое будущее), поэтому окружность
 * здесь именно разорвана, а не просто скруглена.
 */

:root{
  /* Ветка «Масштаб» из брендбука Фестиваля, стр. 25 */
  --deep:#3A0786; --main:#5F37B1; --mid:#8259C9; --soft:#C4A8E3;
  --ink:#1D1D1B; --bg:#fff; --muted:#6b6b75; --line:#ece9f3;
  --ok:#49AD33; --warn:#FFAE00; --bad:#BC3F0A;
  --pad:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
     font:400 16px/1.5 Onest,system-ui,-apple-system,"Segoe UI",sans-serif;
     display:flex;flex-direction:column;isolation:isolate;
     -webkit-font-smoothing:antialiased}

/* --- шапка: два знака по углам --- */
header{flex:none;padding:14px var(--pad) 0;display:flex;align-items:center;gap:12px}
header .vidium{height:24px;width:auto;flex:none}
header .cross{flex:1}
header .fest{height:30px;width:auto;flex:none}

main{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 var(--pad)}

/* --- возврат на главную ---------------------------------------------------
 * Ссылка, а не кнопка. Вторая крупная кнопка на экране конкурирует с
 * «Воспроизведением», а посетитель пришёл нажать именно его.
 */
.back{flex:none;display:inline-flex;align-items:center;gap:6px;
      margin:10px 0 0;padding:4px 0;align-self:flex-start;
      color:var(--mid);text-decoration:none;font-size:13.5px;font-weight:400}
.back:hover{color:var(--deep)}
.back span{text-decoration:underline;text-underline-offset:3px}

/* --- смысловой блок и фирменная дуга --------------------------------------
 * Дуга светлая и позади текста: на странице, где читают живой текст, графика
 * не имеет права спорить с ним за внимание.
 */
.lead{position:relative;padding:18px 0 14px}

/* Дуга привязана к верху страницы, а не к заголовку. На этих страницах
   заголовок стоит по центру высоты, и вместе с ним графика уезжала на середину,
   оставляя пустым весь верх. В макете пятно стоит под знаком фестиваля —
   там же, где оно было на исходной странице, пока заголовок не переехал. */
body::before{content:"";position:fixed;right:-14%;top:52px;
  width:58vw;height:58vw;max-width:260px;max-height:260px;
  border-radius:0 0 0 100%;background:var(--soft);opacity:.25;z-index:-1}
h1{margin:0 0 6px;font-weight:700;font-size:clamp(22px,6.4vw,30px);line-height:1.15;
   letter-spacing:-.01em}
.lead p{margin:0;color:var(--muted);font-weight:300;font-size:14.5px}

/* --- кнопки ---------------------------------------------------------------
 * Кнопки не равны по весу. Звук — услуга, которую мы продаём; видео —
 * дополнение. Две одинаковые кнопки заставляют выбирать там, где выбор
 * очевиден, поэтому вторая идёт контуром.
 */
.btn{display:block;width:100%;border:0;border-radius:18px;padding:20px 18px;
  background:var(--main);color:#fff;font:700 19px/1 Onest,sans-serif;
  letter-spacing:.01em;cursor:pointer;text-align:center;text-decoration:none;
  transition:background .15s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn.on{background:var(--deep)}
.btn:disabled{opacity:.6}
.btn.ghost{background:transparent;color:var(--main);
  box-shadow:inset 0 0 0 2px var(--main)}
.btn.ghost:active{background:rgba(95,55,177,.06)}
.choice{display:flex;flex-direction:column;gap:12px}

/* --- состояния тракта --- */
.status{display:flex;flex-direction:column;gap:6px;padding:12px 2px 14px;
        font-size:12.5px;color:var(--muted);font-weight:300}
.st{display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:#c9c9d2;flex:none}
.dot.live{background:var(--ok)} .dot.wait{background:var(--warn)}
.dot.warn{background:var(--warn)} .dot.err{background:var(--bad)}
#tr-switch a{color:var(--mid);text-decoration:underline;text-underline-offset:3px}

footer{flex:none;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
       color:#9a97a6;font-size:11px;font-weight:300;
       display:flex;justify-content:space-between;align-items:center;gap:10px}
.lang{display:flex;gap:2px}
.lang button{border:0;background:none;font:500 11px/1 Onest,sans-serif;
  color:#9a97a6;cursor:pointer;padding:4px 6px;border-radius:6px}
.lang button[aria-current="true"]{color:#fff;background:var(--main)}

/* --- страница звука: свёрнутый и развёрнутый вид ---------------------------
 * Пока субтитры выключены, заголовок и кнопка стоят по центру высоты — экрану
 * больше нечем себя занять. Включение субтитров поднимает их наверх и отдаёт
 * освободившееся место тексту. Переключает один класс на <body>, потому что
 * позицию меняют сразу три блока.
 */
.fold{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
body.subs-on .fold{flex:none;justify-content:flex-start}

.subs{display:none}
body.subs-on .subs{display:block;flex:1;min-height:0;position:relative;
  border-top:1px solid var(--line);margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}

#stage{position:absolute;inset:0;overflow:hidden;
  font-size:clamp(17px,4.6vw,22px);
  --bright:7.2em;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,
    rgba(0,0,0,.16) 18%,rgba(0,0,0,.5) 46%,
    rgba(0,0,0,.85) calc(100% - var(--bright) - 1.4em),
    #000 calc(100% - var(--bright)));
  mask-image:linear-gradient(to bottom,transparent 0,
    rgba(0,0,0,.16) 18%,rgba(0,0,0,.5) 46%,
    rgba(0,0,0,.85) calc(100% - var(--bright) - 1.4em),
    #000 calc(100% - var(--bright)))}
#flow{position:absolute;left:var(--pad);right:var(--pad);bottom:14px;
      font-size:inherit;line-height:1.4;font-weight:400;text-wrap:pretty}
#tail{color:var(--mid)}
#idle{position:absolute;left:0;right:0;top:46%;text-align:center;
      color:#bcb8c9;font-size:13px;font-weight:300;transition:opacity .4s}
#idle.hidden{opacity:0}

/* Кнопка субтитров прибита к низу КАРТОЧКИ, а не к низу экрана: низ экрана на
 * телефоне занят панелью Safari и жест-баром Android, и прибитая туда кнопка
 * попадает под них. */
.actionbar{flex:none;display:flex;justify-content:flex-end;padding:10px 0 2px}
.actionbar button{border:0;background:transparent;cursor:pointer;
  font:500 13px/1 Onest,sans-serif;color:var(--main);
  padding:8px 12px;border-radius:12px;
  box-shadow:inset 0 0 0 1.5px var(--soft)}
.actionbar button:active{background:rgba(95,55,177,.06)}

/* --- страница видео -------------------------------------------------------
 * Фрейм чужой, поэтому всё, что мы можем ему дать, — место и разрешения.
 * Пропорция 16:9 держится своей, а не подбирается плеером: без неё блок
 * схлопывается в ноль до загрузки и страница прыгает.
 */
/* Пропорция не задаётся жёстко, фрейм забирает свободную высоту страницы.
   Плеер чужой и полноэкранный по устройству: он сам вписывает кадр в то, что
   ему дали. Подбор аспекта под временный плеер был бы подгонкой под конкретную
   вёрстку, которая сменится вместе с боевым плеером. min-height нужен, чтобы
   блок не схлопнулся в ноль до загрузки и страница не прыгала. */
.frame{position:relative;width:100%;flex:1;min-height:200px;border-radius:18px;
  overflow:hidden;background:#0d0b12}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame .hint{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:24px;
  color:#cfc7de;font-size:14px;font-weight:300;line-height:1.45;
  pointer-events:none}
.note{margin:14px 2px 0;color:var(--muted);font-size:13px;font-weight:300}

/* Экран шире телефона: страница остаётся колонкой в центре, а не растягивается
 * на всю ширину. Читать строку в 1400 пикселей невозможно, а на стенде рядом с
 * телефонами будут и планшеты. */
@media (min-width:720px){
  header,main,footer{width:100%;max-width:680px;margin-left:auto;margin-right:auto}
  /* На широком экране высоты в избытке, и растянутый на неё фрейм выглядит
     нелепо: возвращаем ему обычную пропорцию видео. */
  .frame{flex:none;aspect-ratio:16/9}
}