/* ==========================================================================
   AD4 — страница за статуса. Наследява палитрата от style.css.
   ========================================================================== */

.sub main{position:relative;z-index:10;padding-top:calc(var(--nav-h) + clamp(26px,5vh,54px))}
.sub .nav{background:rgba(9,9,10,.76);backdrop-filter:blur(14px);border-bottom-color:var(--line)}

.st-head{margin-bottom:clamp(26px,4.4vh,48px)}
.st-head h1{
  font-size:clamp(31px,5.6vw,78px);font-weight:600;line-height:.96;letter-spacing:-.045em;
}
.st-head h1 .dim{color:var(--ink-4)}
.st-lead{color:var(--ink-2);max-width:52ch;margin-top:20px;font-size:15.5px}

.st-overall{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  margin-top:26px;padding:14px 18px;
  border:1px solid var(--line);
}
.st-overall b{font-weight:400;color:var(--ink)}
.st-overall__up{margin-left:auto;color:var(--ink-4)}

.dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--ink-4);
  box-shadow:0 0 0 0 rgba(255,255,255,.4);
}
.dot.up{background:#5fd18b;animation:beat 2.4s var(--e-io) infinite}
.dot.warn{background:#e0b25c}
.dot.down{background:#d96a6a}
@keyframes beat{
  0%{box-shadow:0 0 0 0 rgba(95,209,139,.5)}
  70%{box-shadow:0 0 0 9px rgba(95,209,139,0)}
  100%{box-shadow:0 0 0 0 rgba(95,209,139,0)}
}


/* ---------- Малките графики ---------------------------------------------- */

.spark{
  display:block;width:100%;height:26px;overflow:visible;
  margin-top:10px;
}
.spark polyline{
  fill:none;stroke:var(--ink-4);stroke-width:1.2;
  stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  animation:draw 1.4s var(--e) forwards;
}
.spark circle{fill:var(--ink);r:1.8;opacity:0;animation:dot .5s var(--e) 1.1s forwards}
.fact .spark{height:30px;margin-top:12px}
.fact .spark polyline{stroke:var(--ink-3)}
.node:hover .spark polyline,.fact:hover .spark polyline{stroke:var(--ink-2)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes dot{to{opacity:1}}

/* ---------- Числата ------------------------------------------------- */

.st-facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-bottom:clamp(38px,6vh,72px);
}
.fact{
  background:var(--bg);padding:clamp(16px,2vw,24px) clamp(14px,1.6vw,22px);
  display:flex;flex-direction:column-reverse;gap:8px;
  position:relative;isolation:isolate;
  transition:background .5s var(--e);
}
.fact::before{
  content:"";position:absolute;z-index:-1;inset:0;background:var(--bg-3);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--e);
}
.fact:hover::before{transform:scaleY(1);transform-origin:top}
.fact b{
  font-weight:600;color:var(--ink);
  font-size:clamp(30px,4.2vw,54px);line-height:.92;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.fact b i{font-style:normal;font-size:.44em;color:var(--ink-4);letter-spacing:-.02em;margin-left:.12em}
.fact span{color:var(--ink-4);line-height:1.3}
.fact--down b{color:#d96a6a}
.fact--warn b{color:#e0b25c}

/* ---------- Секции --------------------------------------------------------- */

.st-sec{margin-bottom:clamp(34px,5.5vh,64px)}
.st-sec .sec__lbl b{color:var(--ink-4);font-weight:400}

/* ---------- Възлите --------------------------------------------------------- */

.st-nodes{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.node{background:var(--bg);padding:17px 16px 16px;transition:background .5s var(--e)}
.node:hover{background:var(--bg-2)}
.node__h{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.node__n{font-size:clamp(17px,1.8vw,23px);font-weight:600;letter-spacing:.02em;line-height:1}
.node__r{color:var(--ink-4);margin-bottom:16px}
.node__m{display:grid;gap:10px}
.node__m > div{display:grid;gap:5px}
.node__k{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.node__k span{color:var(--ink-4)}
.node__k b{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums;text-align:right}

.bar{height:2px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ink-3);transition:width .9s var(--e),background .5s}
.bar i.hi{background:#e0b25c}
.bar i.max{background:#d96a6a}

/* ---------- Стената със сайтовете -------------------------------------------- */

.st-wall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.tile{
  background:var(--bg);
  display:grid;gap:0;align-content:start;
  position:relative;isolation:isolate;overflow:hidden;
  opacity:0;transform:translateY(10px);
  animation:tileIn .6s var(--e) forwards;
  animation-delay:calc(var(--i, 0) * 22ms);
}
@keyframes tileIn{to{opacity:1;transform:none}}

.tile__shot{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:16/10;background:var(--bg-3);
}
.tile__shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:grayscale(1) brightness(.62) contrast(1.05);
  transition:filter .6s var(--e),transform .8s var(--e);
}
.tile:hover .tile__shot img{filter:grayscale(.1) brightness(.92);transform:scale(1.05)}
/* Лека завеса, за да не се бие снимката с текста отдолу. */
.tile__shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg) 2%,transparent 55%);
}

.tile__b{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 12px 8px;min-width:0;
}
.tile__top{display:flex;align-items:center;gap:8px;min-width:0}
.tile__n{
  font-size:13px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .4s var(--e);
}
.tile:hover .tile__n{color:var(--ink)}
.tile__ms{color:var(--ink-4);font-variant-numeric:tabular-nums;font-size:10px;flex:none}
.tile__bar{display:block;height:2px;background:var(--bg-3);overflow:hidden}
.tile__bar i{display:block;height:100%;background:var(--ink-4);transition:width .9s var(--e),background .4s}
.tile:hover .tile__bar i{background:var(--ink-3)}

.tile--down .tile__shot img{filter:grayscale(1) brightness(.4) contrast(1.1)}
.tile--down .tile__n{color:#d99a9a}
.tile--down .tile__ms{color:#d96a6a}
.tile--down .tile__bar i{background:#c85959}
.tile--down .tile__shot::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(200,89,89,.10) 7px 14px);
}

/* ---------- Футър на страницата ------------------------------------------------ */

.st-foot{border-top:1px solid var(--line);padding-block:0}
.stf{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(18px,3vw,44px);align-items:center;
  padding-block:clamp(20px,3vh,30px);
}
.stf__a{display:flex;align-items:baseline;gap:12px;min-width:0}
.stf__brand{font-size:16px;font-weight:600;letter-spacing:-.04em;flex:none}
.stf__brand sup{font-size:8px;font-weight:400;color:var(--ink-3);vertical-align:super}
.stf__a p{color:var(--ink-4);margin:0}

.stf__b{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center}
.stf__b a{color:var(--ink-3);position:relative;padding-block:2px;transition:color .3s var(--e)}
.stf__b a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--e);
}
.stf__b a:hover{color:var(--ink)}
.stf__b a:hover::after{transform:scaleX(1);transform-origin:left}

/* Лентата се пълни до следващото обновяване. */
.stf__c{display:grid;gap:8px;justify-items:end;color:var(--ink-4);min-width:0}
.stf__bar{display:block;width:min(180px,40vw);height:2px;background:var(--bg-3);overflow:hidden}
.stf__bar i{display:block;height:100%;width:0;background:var(--ink-3);transition:width 1s linear}

/* Плавна смяна на числата при обновяване. */
.tick{animation:tick .5s var(--e)}
@keyframes tick{from{opacity:.25}}

@media (max-width:1080px){
  .st-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stf{grid-template-columns:1fr;gap:16px;justify-items:center;text-align:center}
  .stf__c{justify-items:center}
}

@media (max-width:760px){
  /* Стегнато и центрирано, както на началната страница. */
  .st-head{text-align:center}
  .st-head h1{font-size:clamp(30px,8.6vw,46px)}
  .st-lead{margin-inline:auto;font-size:14.5px}
  .st-overall{flex-direction:column;gap:8px;text-align:center;padding:13px 14px}
  .st-overall__up{margin-left:0}
  .sub .sec__lbl{justify-content:center;text-align:center}
  .sub .sec__lbl b{display:none}
  .fact{align-items:center;text-align:center;padding:15px 12px}
  .st-nodes{grid-template-columns:1fr}
  .node{padding:15px 14px}
  .node__h{justify-content:center}
  .node__r{text-align:center;margin-bottom:13px}
  .st-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile__n{font-size:12px}
  .tile__b{padding:8px 10px 7px}
  .st-facts{grid-template-columns:1fr}
  .stf__a{flex-direction:column;align-items:center;gap:5px}
}

@media (prefers-reduced-motion:reduce){
  .dot.up{animation:none}
  .tick{animation:none}
  .tile{opacity:1;transform:none;animation:none}
  .spark polyline{stroke-dashoffset:0;animation:none}
  .spark circle{opacity:1;animation:none}
}