/*
 * V71 · Дашборд роиасика в telemetry-сцене · r1
 * Приказ шефа 29.07: взять дашборд из «The dashboard you actually run»
 * (roiasic.com, живой прод) БЕЗ ИЗМЕНЕНИЙ, кроме лого в левом верхнем углу
 * (теперь VNISH GLOBAL). Подсветка по периметру (dashHalo) и логика выезда
 * (.dash.in) сохранены; :has заменён на класс .is-in от JS (Safari 15 этого
 * Мака не знает :has). Цвета и шрифты роиасика (Geist/Geist Mono локально),
 * скоуп .vg-roidash перебивает форс Onest из v54 своей специфичностью.
 * Откат: минус файл + v71-roidash.js + вернуть article.command-dashboard.
 */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "GeistMono";
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* позиция в сцене: слот старого command-dashboard, чувак (z2) и чипы (z7) выше */
/* приказ 29.07 р5: вернуть как было (посадка ROIDASH-R1), из наворотов
   остаются только скрытые чипы и живые графики */
.vg-roidash {
  --bd2: #28282f;
  --g1: #ffb347;
  position: absolute;
  left: max(28vw, 395px);
  bottom: 2vh;
  width: min(940px, 62vw);
  z-index: 1;
}
/* р7: цифры мельче (были слишком большие), панель компактнее и целиком в кадре */
.vg-roidash .dc .v { font-size: 17px; }
.vg-roidash .dfan .f b { font-size: 13.5px; }
.vg-roidash .dbrd .bl b { font-size: 11px; }
.vg-roidash .dmain { padding: 13px; gap: 10px; }
.vg-roidash .drow { gap: 10px; }
.vg-roidash .dc { padding: 10px 12px; }
.vg-roidash .dc svg { height: 60px; }

/* интерактив: периоды на графиках кликабельны (дух vnish.us) */
.vg-roidash .dc .l span [data-period] {
  cursor: pointer;
  color: #8a8f98;
  font-style: normal;
  transition: color .2s ease;
}
.vg-roidash .dc .l span [data-period]:hover { color: #c9ccd2; }
.vg-roidash .dc .l span [data-period].is-live { color: var(--g1); }
.vg-roidash .dsb .it { cursor: pointer; transition: background .2s ease, color .2s ease; }
.vg-roidash .dsb .it:hover { background: #16181c; color: #c9ccd2; }

/* шрифты дашборда: канон роиасика, форс поверх v54-Onest */
.vg-roidash .dash,
.vg-roidash .dash * { font-family: "Geist", "Onest", Arial, sans-serif !important; }
.vg-roidash .dc .v,
.vg-roidash .dc .s,
.vg-roidash .dpool,
.vg-roidash .dfan .f,
.vg-roidash .dbrd .bl,
.vg-roidash .dfoot { font-family: "GeistMono", "SF Mono", "Menlo", monospace !important; }

/* ---- ПОДСВЕТКА ПО ПЕРИМЕТРУ · канон roiasic dashHalo ---- */
.vg-roidash.dashHalo { margin-top: 0; }
.vg-roidash.dashHalo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 0 20px 2px rgba(255, 150, 50, .55), 0 0 52px 10px rgba(240, 99, 26, .28);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.vg-roidash.is-in::before { animation: vgDashFadeIn 1.4s ease 1s both, vgDashHalo 5.5s ease-in-out 2.4s infinite; }
@keyframes vgDashFadeIn { from { opacity: 0; } to { opacity: .5; } }
@keyframes vgDashHalo { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }

/* ---- ЛОГИКА ВЫЕЗДА · канон roiasic .reveal ---- */
.vg-roidash .dash {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}
.vg-roidash .dash.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .vg-roidash.is-in::before { animation: none; opacity: .5; }
  .vg-roidash .dash { opacity: 1; transform: none; transition: none; }
}

/* ---- ПАНЕЛЬ · канон roiasic один в один ---- */
.vg-roidash .dash {
  position: relative;
  z-index: 1;
  border: 1px solid var(--bd2);
  border-radius: 18px;
  overflow: hidden;
  background: #141518;
  display: grid;
  grid-template-columns: 190px 1fr;
  margin-top: 0;
  box-shadow: 0 50px 110px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 150, 50, .05);
}
.vg-roidash .dsb { background: #101114; border-right: 1px solid #1e2025; padding: 18px 0; display: flex; flex-direction: column; font-size: 12px; color: #8a8f98; }
.vg-roidash .dsb .cap { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #565b64; padding: 10px 18px 4px; }

/* лого: ЕДИНСТВЕННАЯ замена - наш знак + VNISH GLOBAL, прыжок букв канон */
.vg-roidash .dlg { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #f4f2ef; padding: 4px 18px 0; margin-bottom: 10px; font-weight: 640; letter-spacing: .04em; }
.vg-roidash .dlg-mark { width: 24px; height: auto; flex: none; filter: drop-shadow(0 0 8px rgba(231, 199, 125, .35)); }
.vg-roidash .dlg-word { display: flex; flex-direction: column; min-width: 0; }
.vg-roidash .dlg-word em { font-style: normal; font-size: 6.5px; letter-spacing: .18em; color: #8a8f98; margin-top: 2px; white-space: nowrap; }
.vg-roidash .dlg .ch { display: inline-block; animation: vgDlgHop 5.4s cubic-bezier(.2, .72, .2, 1) infinite; animation-delay: calc(var(--i) * 28ms); }
@keyframes vgDlgHop { 0%, 5%, 20%, 100% { transform: translateY(0); } 12% { transform: translateY(-.14em); } }
@media (prefers-reduced-motion: reduce) { .vg-roidash .dlg .ch { animation: none; } }

.vg-roidash .dsb .it { padding: 9px 18px; display: flex; align-items: center; gap: 9px; }
.vg-roidash .dsb .it.on { background: #1a1c20; color: #f4f2ef; border-left: 2px solid var(--g1); }
.vg-roidash .dsb .sp { margin-top: auto; }
.vg-roidash .dmain { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vg-roidash .drow { display: grid; gap: 12px; }
.vg-roidash .dr1 { grid-template-columns: repeat(4, 1fr) 1.6fr; }
.vg-roidash .dr2 { grid-template-columns: 1fr 1fr; }
.vg-roidash .dr3 { grid-template-columns: 1.6fr 1fr; }
.vg-roidash .dr4 { grid-template-columns: repeat(3, 1fr); }
.vg-roidash .dc { background: #1a1b1f; border: 1px solid #23252b; border-radius: 10px; padding: 12px 14px; min-width: 0; }
.vg-roidash .dc .l { font-size: 10.5px; color: #8a8f98; margin-bottom: 6px; display: flex; justify-content: space-between; }
.vg-roidash .dc .v { font-size: 21px; font-weight: 600; color: #f4f2ef; }
.vg-roidash .dc .v em { font-style: normal; color: var(--g1); }
.vg-roidash .dc .s { font-size: 9.5px; color: #565b64; margin-top: 4px; }
.vg-roidash .dc svg { width: 100%; height: 74px; display: block; }
.vg-roidash .dpool { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px 14px; font-size: 10px; color: #8a8f98; align-items: center; }
.vg-roidash .dpool .u { color: #c9ccd2; filter: blur(4px); user-select: none; pointer-events: none; }
.vg-roidash .dtag { font-size: 9px; padding: 3px 8px; border-radius: 5px; font-weight: 600; }
.vg-roidash .tg { background: rgba(95, 208, 138, .12); color: #5fd08a; }
.vg-roidash .to { background: rgba(255, 179, 71, .14); color: var(--g1); }
.vg-roidash .tr { background: rgba(224, 90, 79, .14); color: #e05a4f; }
.vg-roidash .dfan { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vg-roidash .dfan .f { display: flex; justify-content: space-between; align-items: baseline; }
.vg-roidash .dfan .f b { font-size: 16px; color: #f4f2ef; font-weight: 600; }
.vg-roidash .dfan .f span { font-size: 9px; color: #e05a4f; }
.vg-roidash .dbrd .bl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; font-size: 10px; color: #8a8f98; }
.vg-roidash .dbrd .bl b { display: block; font-size: 13px; color: #f4f2ef; font-weight: 600; }
.vg-roidash .dfoot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; background: #101114; border-top: 1px solid #1e2025; padding: 9px 16px; font-size: 10px; color: #565b64; }
.vg-roidash .dfoot .chip { border: 1px solid #2a2d33; border-radius: 6px; padding: 3px 9px; color: #c9ccd2; }

/* ---- мобилка · канон roiasic 820 + посадка в сцену ---- */
@media (max-width: 1280px) {
  .vg-roidash { width: min(880px, 78vw); }
}
@media (max-width: 900px) {
  .vg-roidash { left: 16px; right: 16px; width: auto; bottom: 9vh; }
  .vg-roidash .dash { zoom: 1; }
  .telemetry[data-telemetry-v53] { min-height: 150vh; }
  .telemetry[data-telemetry-v53] .telemetry-copy { position: static !important; width: auto; margin: 0 16px 14px !important; }
}
@media (max-width: 820px) {
  .vg-roidash { bottom: 3vh; }
  .vg-roidash .dash { grid-template-columns: 1fr; }
  .vg-roidash .dsb { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid #1e2025; align-items: center; padding: 10px 6px; }
  .vg-roidash .dlg { margin-bottom: 0; align-self: center; flex: none; padding: 0 12px 0 18px; }
  .vg-roidash .dsb .sp { margin-top: 0; }
  .vg-roidash .dsb .it { white-space: nowrap; }
  .vg-roidash .dmain { padding: 12px; gap: 10px; }
  .vg-roidash .dr1, .vg-roidash .dr2, .vg-roidash .dr3, .vg-roidash .dr4 { grid-template-columns: 1fr; }
  /* мобильный состав: лого-полоса + 3 агрегата + график HR + фаны + плата 1 + футер */
  .vg-roidash .dr1 .dc:nth-child(n+4) { display: none; }
  .vg-roidash .dr2 .dc:nth-child(2) { display: none; }
  .vg-roidash .dr3 .dc:first-child { display: none; }
  .vg-roidash .dr4 .dc:nth-child(n+2) { display: none; }
}