/* ============================================================
   HUD - обвязка, общая для сайта и всех сервисов.
   Шапка, рейки, статус-бар, crop-marks, hazard, тикер, прицел.
   ============================================================ */

/* ---------- верхняя шапка ---------- */
.hud-top{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--bar);
  display:flex;align-items:stretch;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.hud-top > *{display:flex;align-items:center;padding:0 12px;}
.hud-top .sep{border-right:1px solid var(--line);}

.hud-brand{gap:8px;font-family:var(--display);font-size:14px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.hud-brand img{width:18px;height:18px;}

.hud-nav{gap:0;margin-right:auto;padding:0;}
.hud-nav a{
  padding:0 14px;align-self:stretch;display:flex;align-items:center;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border-right:1px solid var(--line-soft);
  transition:color var(--dur),background var(--dur);
}
.hud-nav a:hover{color:var(--ink);background:var(--orange);}

.hud-clock{gap:14px;}
.hud-lang a{color:var(--dim);transition:color var(--dur);}
.hud-lang a:hover{color:var(--orange);}
.hud-lang .on{color:var(--cream);}

@media (max-width:900px){
  .hud-nav,.hud-clock .utc{display:none;}
}

/* ---------- вертикальные рейки по краям ---------- */
.hud-rail{
  position:fixed;top:var(--bar);bottom:var(--bar);width:var(--rail);
  z-index:50;display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  pointer-events:none;
}
.hud-rail.l{left:0;border-right:1px solid var(--line);}
.hud-rail.r{right:0;border-left:1px solid var(--line);}
.hud-rail span{
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--mute);
  white-space:nowrap;
}
.hud-rail.l span{transform:rotate(180deg);}
/* насечки на рейке - ритм, читается как линейка прибора */
.hud-rail::before{
  content:"";position:absolute;top:0;bottom:0;width:5px;
  background:repeating-linear-gradient(to bottom,
    var(--line-soft) 0 1px, transparent 1px 40px);
}
.hud-rail.l::before{right:0;}
.hud-rail.r::before{left:0;}

@media (max-width:1100px){.hud-rail{display:none;}}

/* рейки перекрывают края экрана - контент отодвигается ровно на их ширину.
   Живёт здесь, а не в sections.css: правило про рейки, а их подключают
   все страницы, включая документы без секций. */
@media (min-width:1101px){
  body{padding-left:var(--rail);padding-right:var(--rail);}
}

/* общий контейнер страницы: одна рамка на весь документ.
   min-height + margin-top:auto у подвала - чтобы на короткой странице (404)
   он прижимался к низу экрана, а не висел посреди пустоты. */
.page{
  max-width:var(--wrap);margin:0 auto;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  min-height:calc(100vh - var(--bar) * 2);
  display:flex;flex-direction:column;
}
.page > .foot{margin-top:auto;}

/* ---------- нижний статус-бар ---------- */
.hud-bottom{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  height:var(--bar);
  display:flex;align-items:stretch;
  background:var(--bg);
  border-top:1px solid var(--line);
}
.hud-bottom > *{display:flex;align-items:center;gap:10px;padding:0 12px;}
.hud-bottom .sep{border-right:1px solid var(--line);}
.hud-bottom .grow{margin-right:auto;}

.hud-online{color:var(--orange);white-space:nowrap;}
.hud-bottom .lbl,.hud-top .lbl{white-space:nowrap;}
.hud-online .caret{
  display:inline-block;width:7px;height:12px;background:var(--orange);
  margin-left:2px;vertical-align:-2px;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}

/* индикатор прогресса скролла - тонкая нить под статус-баром */
.hud-progress{
  position:fixed;bottom:var(--bar);left:0;height:2px;z-index:61;
  width:0;background:var(--orange);
  transition:width .08s linear;
}

/* тумблер эффектов - право пользователя выключить прицел и движение */
.hud-fx{
  background:none;border:none;padding:0 12px;align-self:stretch;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);cursor:pointer;
  border-left:1px solid var(--line);
  transition:color var(--dur),background var(--dur);
}
.hud-fx:hover{color:var(--ink);background:var(--orange);}

@media (max-width:700px){
  .hud-bottom .opt{display:none;}
}

/* ---------- прицельные линии за курсором ---------- */
.hud-cross{position:fixed;inset:0;z-index:40;pointer-events:none;
  opacity:0;transition:opacity var(--dur-slow);}
.hud-cross.on{opacity:1;}
.hud-cross i{position:absolute;background:rgba(var(--orange-rgb),.16);}
.hud-cross .x{top:0;bottom:0;width:1px;}
.hud-cross .y{left:0;right:0;height:1px;}

/* ---------- hazard-полоса ---------- */
.hazard{
  height:14px;
  background:repeating-linear-gradient(45deg,
    var(--orange) 0 10px, var(--bg) 10px 20px);
}

/* ---------- бегущий тикер ---------- */
.ticker{
  overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-1);
}
.ticker div{
  display:inline-block;padding:7px 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);
  animation:slide 42s linear infinite;
}
.ticker b{color:var(--orange);font-weight:500;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.ticker div{animation:none;}}

/* ---------- crop-marks: крестики на узлах сетки ---------- */
.marks{position:relative;}
.marks::before,.marks::after{
  content:"+";position:absolute;
  font-family:var(--mono);font-size:11px;line-height:1;color:var(--mute);
  pointer-events:none;
}
.marks::before{top:-6px;left:-6px;}
.marks::after{bottom:-6px;right:-6px;}

/* ---------- boot-sequence ---------- */
.boot{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;line-height:1.9;color:var(--dim);
}
.boot.done{
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.boot pre{margin:0;white-space:pre;}
.boot .ok{color:var(--orange);}