/* ДНЖ · днж-практики.рф · overview.css
   Стартовая страница «Обзор»: тёмный герой со счётчиками и графики.
   Часть разделённого сайта (15.09.2026). Подключается из index.html. */

/* ============================================================
   Заглавная страница «Статистика библиотеки»
   ============================================================ */

/* ── Тёмный герой со счётчиками ─────────────────────────── */
.stats-hero{
  background:var(--grad-hero); color:#fff; border-radius:var(--r);
  padding:34px 38px 30px; position:relative; overflow:hidden; box-shadow:var(--shadow-panel);
}
.stats-hero::after{
  content:""; position:absolute; right:-140px; top:-200px; width:560px; height:560px;
  background:radial-gradient(circle, rgba(255,93,0,.42) 0%, transparent 68%); pointer-events:none;
}
.stats-hero>*{position:relative}
.stats-hero .kicker{
  font-size:var(--fs-1); font-weight:800; letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:#FFC69C; margin-bottom:12px;
}
.stats-hero h2{font-size:38px; line-height:1.1; margin-bottom:12px}
.stats-hero .src{font-size:var(--fs-3); color:#E4D2F0; line-height:1.55; max-width:76ch}
.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.pill{
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-md); padding:12px 16px; min-width:96px;
}
.pill .v{font-size:26px; font-weight:800; line-height:1.05; letter-spacing:var(--tracking-tight)}
.pill .l{font-size:var(--fs-2); color:#E4D2F0; margin-top:3px; line-height:1.3}
.pill.hot{background:rgba(255,93,0,.9); border-color:transparent}
.pill.hot .l{color:#FFE7D7}

/* ── Горизонтальные бары (кластеры, источники, показатели) ─ */
.bars{display:grid; gap:7px; margin-top:16px}
.brow{
  display:grid; grid-template-columns:minmax(180px,300px) minmax(120px,1fr) 46px;
  gap:14px; align-items:center;
}
.brow .lb{font-size:var(--fs-3); color:var(--ink); line-height:1.35; display:flex; gap:7px; min-width:0}
.brow .lb b{color:var(--violet); font-weight:800; flex:none}
.brow .lb span{color:var(--ink-2); min-width:0; text-wrap:pretty}
.brow .track{height:12px; border-radius:var(--r-pill); background:var(--violet-l); overflow:hidden}
.brow .track i{display:block; height:100%; border-radius:var(--r-pill); background:var(--violet)}
.brow .v{font-size:var(--fs-3); font-weight:800; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.brow.low .track i{background:var(--orange)}
.brow.low .v{color:#9E3A00}
.brow.low .lb b{color:#9E3A00}
.brow.top .track i{background:linear-gradient(90deg,var(--violet) 0%,#8A1DB4 100%)}
.bars-note{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; padding-top:13px;
  border-top:1px solid var(--line-2); font-size:var(--fs-2); color:var(--mut);
}
.bars-note span{display:inline-flex; align-items:center; gap:7px}
.bars-note span::before{content:""; width:10px; height:10px; border-radius:3px; background:var(--violet)}
.bars-note span.o::before{background:var(--orange)}

/* ── Воронка допуска ────────────────────────────────────── */
.fnl{display:grid; gap:10px; margin-top:16px}
.fnl .r{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center;
  background:var(--violet-l2); border:1px solid var(--info-b); border-radius:var(--r-md);
  padding:13px 18px; position:relative;
}
.fnl .r .nm{font-size:16px; font-weight:700; color:var(--ink); line-height:1.3}
.fnl .r .ds{font-size:var(--fs-2); color:var(--mut); line-height:1.5; margin-top:3px}
.fnl .r .v{font-size:28px; font-weight:800; color:var(--violet); line-height:1; letter-spacing:var(--tracking-tight)}
.fnl .r.out{background:var(--err-bg); border-color:var(--err-b)}
.fnl .r.out .v{color:var(--err)}
.fnl .r.wait{background:var(--grad-veil-orange); border-color:var(--orange-b)}
.fnl .r.wait .v{color:#9E3A00}

/* ── Стопка заполненности ───────────────────────────────── */
.stack{display:flex; height:34px; border-radius:var(--r-sm); overflow:hidden; margin-top:16px}
.stack i{display:block; height:100%}
.stack i.a{background:var(--violet)}
.stack i.b{background:var(--lavender)}
.stack i.c{background:var(--orange)}
.stack-lg{display:grid; gap:9px; margin-top:14px}
.stack-lg .r{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; font-size:var(--fs-3)}
.stack-lg .r::before{content:""; width:11px; height:11px; border-radius:3px; background:var(--violet)}
.stack-lg .r:nth-child(2)::before{background:var(--lavender)}
.stack-lg .r:nth-child(3)::before{background:var(--orange)}
.stack-lg .r .l{color:var(--ink-2); line-height:1.4}
.stack-lg .r .v{font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; justify-self:end}

/* ── Сетка панелей ──────────────────────────────────────── */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.grid-2 .info-sec{margin-bottom:0}
.grid-2 .info-sec.span2{grid-column:1/-1}
.bars.cols2{grid-template-columns:1fr 1fr; gap:7px 34px}
.bars.cols2 .brow{grid-template-columns:minmax(0,1fr) minmax(80px,1fr) 40px}
.panel-note{
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line-2);
  font-size:var(--fs-2); color:var(--mut); line-height:1.55;
}
.panel-note b{color:var(--violet)}

/* в половинных панелях подпись уже, трек тоньше */
.grid-2 .brow{grid-template-columns:minmax(0,1fr) minmax(70px,110px) 40px; gap:12px}

@media (max-width:1240px){
  .brow{grid-template-columns:minmax(0,1fr) minmax(90px,150px) 42px}
}
@media (max-width:1100px){
  .brow,.grid-2 .brow{grid-template-columns:minmax(0,1fr) 44px; gap:6px 12px}
  .brow .track{grid-column:1/-1; order:3; height:10px}
}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .bars.cols2{grid-template-columns:1fr}
  .stats-hero{padding:26px 22px}
  .stats-hero h2{font-size:28px}
}