/* =========================================================================
   ПРОТОТИП №7 — «Топливо»: подписи и пояснения.
   Панель-объяснение (общая для прототипов №2–№7) + стили нового экрана.

   ВАЖНО: собственные классы — с префиксом fx-. Префикс fuelp- в клоне уже
   занят («fuel preview», sheets-tele.js + app.css): переопределяя его,
   прототип ломал вёрстку чужих шитов.
   ========================================================================= */

/* ------------------------ Панель-объяснение ------------------------------ */
.stage{gap:32px}
.proto-panel{
  width:360px;max-height:852px;overflow-y:auto;scrollbar-width:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:24px;color:#E7EAEE;flex:0 0 auto;
}
.proto-panel::-webkit-scrollbar{display:none}
.proto-panel__eyebrow{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:#8CABCD;margin-bottom:6px}
.proto-panel__title{font-size:22px;font-weight:600;line-height:1.25;color:#fff}
.proto-panel__lead{font-size:13px;font-weight:400;line-height:1.5;color:#B8BFC8;margin:8px 0 0}
.proto-panel__now{
  margin-top:16px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:500;
  background:rgba(74,134,199,.16);border:1px solid rgba(74,134,199,.45);color:#BBD6F2;
}
.proto-panel__now b{color:#fff;font-weight:600}
.proto-panel__section{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#7E8894;margin:20px 0 10px}
.proto-flow{
  display:flex;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5;border:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.proto-flow b{color:#fff;font-weight:600}
.proto-flow__num{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;margin-top:1px;
  background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#fff;
}
.proto-flow--active{background:rgba(74,134,199,.14);border-color:rgba(74,134,199,.5)}
.proto-flow--active .proto-flow__num{background:#4A86C7}
.proto-panel__list{margin:0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:8px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5}
.proto-panel__list b{color:#fff;font-weight:600}
.proto-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#4A86C7;
  box-shadow:0 0 6px rgba(74,134,199,.8);margin-right:4px;vertical-align:baseline}
.proto-btn{
  margin-top:12px;width:100%;height:36px;border-radius:8px;cursor:pointer;
  background:rgba(74,134,199,.18);border:1px solid rgba(74,134,199,.5);color:#DCE9F7;
  font-size:12.5px;font-weight:600;
}
.proto-btn:hover{background:rgba(74,134,199,.3)}
@media (max-width:1150px){.proto-panel{display:none}}

/* ==========================================================================
   Список «Топливо»
   ========================================================================== */

.fx-hint{color:var(--text700)}

/* --- Заголовок группы, у которой не хватает сущности ---------------------
   Вместо термина «Не идентифицировано» — объяснение целым предложением
   и иконка ТОЙ сущности, которой нет (машина / заправочная точка). */
.fx-unknown{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;
  background:var(--yellow10);
}
.fx-unknown__t{color:var(--statusWarning);min-width:0}
.fx-ava--dashed{
  width:44px;height:44px;flex:0 0 44px;background:transparent;
  border:1px dashed var(--statusWarningBorder);
}

/* --- Итоги группы: у каждого числа подпись, период и сколько раз --------- */
/* Итоги — акцентным блоком: без него сумма читается как ещё одна строка
   карточки (пробовали белый фон, вернулись к плашке). */
.fx-totals{
  margin-top:10px;padding:10px;border-radius:8px;background:var(--default5);
  display:flex;flex-direction:column;gap:6px;
}
.fx-total{display:flex;align-items:baseline;gap:8px}
.fx-total__lbl{flex:1;min-width:0;color:var(--text700)}
.fx-total__cnt{color:var(--text500);white-space:nowrap}
/* Пометка «внутри есть события на проверку» — в свёрнутом виде о них
   говорил только немой красный кружок в углу шапки */
.fx-warn{display:flex;align-items:center;gap:6px;margin-top:4px}
.fx-warn .p3m{color:var(--red)}

/* --- Раскрывашка списка событий ------------------------------------------
   Свёрнуто карточка = шапка + итоги (клип 0), строка с шевронами всегда
   видна и прямо говорит, что внутри. */
.otexp--overflow.fx-exp .otexp__clip{max-height:0}
.otexp--overflow.fx-exp.otexp--open .otexp__clip{max-height:1600px}
.fx-exp{margin-top:2px}
.fx-exp__inner{padding-top:2px}
.fx-more{
  display:flex;align-items:center;justify-content:center;gap:6px;height:36px;
  color:var(--primary500);
}
.fx-more .p3m{color:var(--primary500)}
.fx-more__ic{display:flex;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.fx-exp .fx-more__less{display:none}
.fx-exp.otexp--open .fx-more__more{display:none}
.fx-exp.otexp--open .fx-more__less{display:inline}
.fx-exp.otexp--open .fx-more__ic{transform:rotate(180deg)}

/* --- Строка события ------------------------------------------------------ */
.fx-chip{
  display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:4px;
  font-size:10px;font-weight:600;line-height:1;white-space:nowrap;
}
.fx-row{align-items:flex-start;padding:10px 0}
.fx-row + .fx-row{border-top:1px solid var(--default5)}
/* Строка участника: иконка называет сущность, поэтому подпись словом
   («Где», «Кто») не нужна и строка не зависит от группировки. */
.fx-party{display:flex;align-items:center;gap:6px;min-width:0}
.fx-party .p3m{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Объяснение алерта словами прямо в строке */
.fx-alert{
  display:flex;align-items:flex-start;gap:6px;margin-top:6px;
  padding:6px 8px;border-radius:6px;background:var(--red10);
}
.fx-alert .p3m{color:var(--red);min-width:0}

/* ==========================================================================
   Шит события
   ========================================================================== */

/* Верхний блок: сколько, когда, откуда и куда — все первые вопросы сразу */
.fx-hero{
  border-radius:12px;overflow:hidden;
  background:color-mix(in srgb, var(--c) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.fx-hero__top{padding:14px 16px;text-align:center}
.fx-hero__lbl{color:var(--text700)}
.fx-hero__val{
  margin:2px 0 4px;font-family:Inter,sans-serif;font-size:30px;font-weight:600;
  line-height:1.15;color:var(--c);
}
.fx-hero__sub{color:var(--text600)}
/* Маршрут «Откуда → Куда» */
.fx-route{background:#fff;border-top:1px solid color-mix(in srgb, var(--c) 20%, transparent)}
.fx-route__row{display:flex;align-items:flex-start;gap:8px;padding:10px 12px}
.fx-route__row + .fx-route__row{border-top:1px dashed var(--text300)}
.fx-route__lbl{width:52px;flex:0 0 52px;color:var(--text600);padding-top:1px}
.fx-route__row .ic{margin-top:1px}

/* Заголовок смыслового блока шита */
.fx-sec{margin:18px 0 8px;color:var(--text700)}

/* Строка источника данных: иконка, что за источник, значение */
.fx-src{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;
  background:var(--default5);margin-bottom:6px;
}
/* Какое из двух показаний ушло в сводку */
.fx-src__badge{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  font-size:10px;font-weight:600;line-height:1.5;
  background:var(--primary50);color:var(--primary500);
}

/* Вывод словами: совпало / разошлось / данных нет */
.fx-verdict{
  display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:8px;
  background:var(--default5);color:var(--text700);
}
.fx-verdict .p3m{min-width:0}
.fx-verdict--info .p3m{color:var(--text700)}
.fx-verdict--bad{background:var(--red10)}
.fx-verdict--bad .p3m{color:var(--red)}
.fx-verdict--ok{background:var(--green10)}
.fx-verdict--ok .p3m{color:var(--green)}

/* Строка «label — value» блока «Детали» */
.fx-row2{display:flex;align-items:center;gap:8px;padding:7px 0}
.fx-row2 + .fx-row2{border-top:1px dashed var(--text300)}

.fx-note{margin-top:6px;color:var(--text600);text-align:center}