/* Сквозные шапка, подвал и нижнее меню сайта marshrut.me для отдельных страниц
   (договоры, «О клубе», вход, мероприятия, журнал…). Разметку рисует
   marshrut-site.js; вид повторяет шапку и подвал главного приложения
   (full-loop-demo.html, слой нового дизайна: .topbar.solid, .f-footer,
   .bottomnav). Все правила под своими классами ms-*, цвета — в своих
   переменных: у каждой страницы своя таблица стилей, и общие имена вроде
   .top, .foot или .brand там уже заняты. */

.ms-top, .ms-foot, .ms-bnav{
  --ms-bg:#F3F1EC; --ms-panel:#FFFFFF; --ms-text:#12151A; --ms-faint:#8A8F97;
  --ms-line:rgba(18,21,26,.10); --ms-gold:#E3B341; --ms-gold-deep:#A8781A; --ms-gold-ink:#1B1A17;
  --ms-night:#0D1116; --ms-night-ink:#F1EFE9; --ms-night-ink-2:#A8AEB7; --ms-night-line:rgba(255,255,255,.10);
  --ms-font-b:'Golos Text','Onest','Segoe UI',system-ui,sans-serif;
  --ms-font-m:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ms-pad:clamp(16px,3vw,40px);
  box-sizing:border-box; font-family:var(--ms-font-b); -webkit-font-smoothing:antialiased;
}
.ms-top.ms-dark, .ms-bnav.ms-dark{
  --ms-bg:#0D1116; --ms-panel:#151A21; --ms-text:#F1EFE9; --ms-faint:#7C828B;
  --ms-line:rgba(255,255,255,.10); --ms-gold-deep:#F0C65A;
}
@media (prefers-color-scheme: dark){
  .ms-top.ms-auto, .ms-bnav.ms-auto{
    --ms-bg:#0D1116; --ms-panel:#151A21; --ms-text:#F1EFE9; --ms-faint:#7C828B;
    --ms-line:rgba(255,255,255,.10); --ms-gold-deep:#F0C65A;
  }
  .ms-top.ms-auto .brand .marshrut-logo{--logo-gold:#E8BE55;}
}
.ms-top *, .ms-foot *, .ms-bnav *{box-sizing:border-box;}
/* Сброс: страницы задают ссылкам и абзацам своё оформление прямо по тегу
   (на «Платёж не прошёл» любая ссылка — жёлтая кнопка). Внутри шапки и подвала
   оно не должно действовать; нужное оформление задают правила ниже. */
.ms-top a, .ms-foot a, .ms-bnav a{display:inline; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
  color:inherit; font:inherit; text-decoration:none; text-transform:none; letter-spacing:normal; min-height:0; width:auto;}
.ms-foot p, .ms-foot span, .ms-top span, .ms-bnav span{color:inherit; font:inherit; margin:0; padding:0; background:none;}
.ms-top svg, .ms-foot svg, .ms-bnav svg{max-width:none;}
.ms-wrap{max-width:1240px; margin:0 auto; padding:0 var(--ms-pad);}

/* ---------- шапка ---------- */
/* Слои как у приложения (40 и 30): полноэкранное видео и окна страниц выше. */
header.ms-top{position:sticky; top:0; z-index:40; display:flex; align-items:center; height:66px; margin:0; padding:0;
  background:var(--ms-bg); color:var(--ms-text); border:0; border-bottom:1px solid var(--ms-line); font-size:15.5px; line-height:1.55;}
.ms-top .ms-wrap{display:flex; align-items:center; gap:20px; width:100%;}
.ms-top a.brand{display:flex; align-items:center; gap:0; font-weight:700; font-size:1.05rem; white-space:nowrap; color:inherit;}
.ms-top .brand .marshrut-logo{height:36px;}
.ms-top.ms-dark .brand .marshrut-logo{--logo-gold:#E8BE55;}
.ms-nav{display:none; gap:4px; margin-left:12px;}
.ms-nav a{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; border-radius:999px;
  font-weight:600; font-size:.94rem; opacity:.85; color:inherit;}
.ms-nav a:hover{opacity:1; background:rgba(127,127,127,.12);}
.ms-nav a.on{opacity:1; background:rgba(127,127,127,.16);}
.ms-nav a.ms-vip{color:var(--ms-gold-deep); font-weight:700; letter-spacing:.04em; opacity:1;}
.ms-nav .ms-crown{width:15px; height:15px; flex:none;}
.ms-right{margin-left:auto; display:flex; align-items:center; gap:8px;}
.ms-top a.ms-invite{display:none; flex:none; height:42px; padding:0 16px; align-items:center; gap:8px; border-radius:999px;
  border:1px solid var(--ms-gold); color:inherit; font-weight:600; font-size:.92rem; white-space:nowrap; transition:background .2s,color .2s;}
.ms-invite svg{width:18px; height:18px; display:block;}
.ms-top a.ms-invite:hover{background:var(--ms-gold); color:var(--ms-gold-ink);}
.ms-theme{flex:none; width:42px; height:42px; padding:0; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(127,127,127,.3); background:var(--ms-panel); color:inherit; cursor:pointer;}
.ms-theme svg{width:19px; height:19px; display:block;}
.ms-theme:hover{border-color:var(--ms-gold); color:var(--ms-gold-deep);}
.ms-top a.ms-profile{display:flex; align-items:center; gap:8px; height:42px; padding:3px 14px 3px 3px; border-radius:999px;
  border:1px solid rgba(127,127,127,.3); background:var(--ms-panel); color:inherit; font-weight:600; font-size:.92rem; white-space:nowrap;}
.ms-top a.ms-profile:hover{border-color:var(--ms-gold);}
.ms-avatar{width:34px; height:34px; border-radius:50%; background:var(--ms-gold); color:var(--ms-gold-ink);
  display:grid; place-items:center; font-weight:700; font-size:.9rem; line-height:1;}
.ms-avatar svg{width:17px; height:17px;}
.ms-profile .ms-label{max-width:110px; overflow:hidden; text-overflow:ellipsis;}
.ms-top a:focus-visible, .ms-theme:focus-visible, .ms-foot a:focus-visible, .ms-bnav a:focus-visible{outline:2px solid var(--ms-gold); outline-offset:2px;}
@media (min-width:900px){ .ms-nav{display:flex;} .ms-top a.ms-invite{display:inline-flex;} }
@media (max-width:560px){ .ms-top .brand .marshrut-logo{height:30px;} .ms-profile .ms-label{display:none;} .ms-top a.ms-profile{padding-right:3px;} }
@media (max-width:400px){ .ms-theme{width:38px; height:38px;} }

/* ---------- нижнее меню на телефоне ---------- */
nav.ms-bnav{position:fixed; left:0; right:0; bottom:0; z-index:30; margin:0; display:grid; grid-template-columns:repeat(5,1fr);
  padding:6px 0 calc(6px + env(safe-area-inset-bottom)); background:var(--ms-panel); border-top:1px solid var(--ms-line);}
.ms-bnav a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 0;
  font-size:.66rem; font-weight:600; color:var(--ms-faint); text-decoration:none;}
.ms-bnav a svg{width:22px; height:22px; display:block;}
.ms-bnav a.on{color:var(--ms-gold-deep);}
body.ms-bnav-on{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
@media (min-width:900px){ nav.ms-bnav{display:none;} body.ms-bnav-on{padding-bottom:0;} }

/* ---------- подвал ---------- */
footer.ms-foot{display:block; margin:0; background:var(--ms-night); color:var(--ms-night-ink-2); padding:56px 0 70px; font-size:.9rem; line-height:1.55; border:0; text-align:left;}
.ms-foot-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.ms-foot h4{margin:0 0 14px; color:var(--ms-night-ink); font-family:var(--ms-font-m); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;}
.ms-foot a{display:block; margin-bottom:8px; color:var(--ms-night-ink-2); text-decoration:none;}
.ms-foot a:hover{color:var(--ms-gold);}
.ms-foot div.brand{display:flex; color:var(--ms-night-ink); margin-bottom:16px;}
.ms-foot .brand .marshrut-logo{height:40px; --logo-gold:#E8BE55;}
.ms-foot p{margin:0;}
.ms-foot-bottom{margin-top:40px; padding-top:20px; border-top:1px solid var(--ms-night-line); font-size:.8rem; line-height:1.6; color:rgba(241,239,233,.5);}
@media (min-width:860px){ .ms-foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;} }
@media (max-width:859px){
  footer.ms-foot{padding:40px 0 48px;}
  .ms-foot-grid{grid-template-columns:1fr; gap:0;}
  .ms-foot-grid>div{padding:20px 0; border-top:1px solid var(--ms-night-line);}
  .ms-foot-grid>div:first-child{border-top:0; padding-top:0; padding-bottom:24px;}
  .ms-foot h4{margin-bottom:12px;}
  .ms-foot a{margin-bottom:12px; font-size:.96rem; line-height:1.35;}
  .ms-foot-bottom{margin-top:8px; padding-top:18px; font-size:.76rem;}
}

/* Слоты с серверной разметкой (журнал): её читает поисковик без скриптов, а в
   браузере скрипт заменяет слот. До замены прячем содержимое, но держим место,
   чтобы страница не прыгала. Класс ms-js ставится в <head>. */
.ms-js .ms-slot > *{visibility:hidden;}
.ms-js .ms-slot-top{min-height:66px;}