/* ╔══════════════════════════════════════════════════════════════╗
   ║  OKO · СБОРКА СИСТЕМЫ РОСТА — стили                             ║
   ║  Карточка статуса, список готовых систем и полноэкранный        ║
   ║  просмотр собранной системы внутри приложения.                  ║
   ║  Обе темы, движение только на transform/opacity.                ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────── статус сборки */
.sb-status{
  margin:12px 0;
  padding:16px;
  border-radius:var(--r-md,14px);
  background:var(--surface);
  border:1px solid color-mix(in srgb, var(--lime,#9AFF00) 22%, transparent);
  position:relative;
  overflow:hidden;
}
/* тонкая бегущая полоса сверху — признак живой работы, НЕ шкала прогресса:
   поддельный процент здесь был бы враньём, сборка идёт часами */
.sb-status:not(.bad)::before{
  content:'';
  position:absolute; top:0; left:0;
  height:2px; width:38%;
  background:linear-gradient(90deg,transparent,var(--lime,#9AFF00),transparent);
  animation:sbRun 2.4s ease-in-out infinite;
}
@keyframes sbRun{
  0%{ transform:translateX(-100%) }
  100%{ transform:translateX(360%) }
}
.sb-status.bad{ border-color:color-mix(in srgb,#ff5a5a 40%,transparent) }

.sb-status-h{ display:flex; gap:12px; align-items:flex-start }
.sb-status-ic{
  flex:0 0 auto; width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--lime,#9AFF00) 12%, transparent);
  color:var(--lime,#9AFF00);
}
.sb-status.bad .sb-status-ic{
  background:rgba(255,90,90,.12); color:#ff7a7a;
}
.sb-status-ic svg.i{ width:21px; height:21px }
.sb-status-h b{ display:block; font-size:15px; margin-bottom:4px }
.sb-status-h small{ display:block; color:var(--dim); font-size:12.5px; line-height:1.55 }
.sb-btns{ display:flex; gap:8px; margin-top:12px }

/* ─────────────────────────────────── список готовых систем */
.sb-ready{ margin:12px 0 }
.sb-ready-h{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); margin-bottom:8px;
}
.sb-ready-h svg.i{ width:15px; height:15px; color:var(--lime,#9AFF00) }

.sb-item{
  width:100%;
  display:flex; align-items:center; gap:12px;
  padding:13px 14px; margin-bottom:8px;
  border-radius:var(--r-md,14px);
  background:var(--surface);
  border:1px solid var(--border);
  text-align:left;
  min-height:44px;
  transition:border-color .18s, background .18s;
}
.sb-item:hover,.sb-item:active{
  border-color:color-mix(in srgb, var(--lime,#9AFF00) 45%, transparent);
  background:var(--raised, rgba(255,255,255,.04));
}
.sb-item-ic{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--lime,#9AFF00) 12%, transparent);
  color:var(--lime,#9AFF00);
}
.sb-item-ic svg.i{ width:19px; height:19px }
.sb-item-b{ flex:1; min-width:0 }
.sb-item-b b{ display:block; font-size:14.5px; margin-bottom:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sb-item-b small{ display:block; color:var(--dim); font-size:12px }
.sb-item > svg.i:last-child{ width:16px; height:16px; color:var(--dim); flex:0 0 auto }

/* ────────────────────── просмотр системы внутри приложения */
#okoSysView{
  position:fixed; inset:0; z-index:78;
  background:var(--bg,#050505);
  display:flex; flex-direction:column;
  transform:translateY(100%);
  visibility:hidden;                    /* закрытую панель гасим полностью,
                                           иначе на широком экране она остаётся
                                           в кадре (урок из прошлых сессий) */
  transition:transform .32s cubic-bezier(.3,1,.4,1), visibility .32s;
}
#okoSysView.on{ transform:none; visibility:visible }

.sv-bar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:calc(8px + var(--oko-safe-top,0px)) 12px 8px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.sv-bar b{
  flex:1; min-width:0; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sv-x, .sv-out{
  flex:0 0 auto;
  width:44px; height:44px; border-radius:12px;   /* 44px — правило доступности */
  display:flex; align-items:center; justify-content:center;
  color:var(--text); background:transparent;
}
.sv-x svg.i{ width:20px; height:20px; transform:rotate(180deg) }
.sv-out svg.i{ width:19px; height:19px; color:var(--dim) }
.sv-x:active, .sv-out:active{ background:var(--raised, rgba(255,255,255,.06)) }

#okoSysFrame{
  flex:1; width:100%; border:0; background:#050505;
  padding-bottom:var(--oko-safe-bottom,0px);
}

@media (prefers-reduced-motion:reduce){
  .sb-status::before{ animation:none }
  #okoSysView{ transition:none }
}