/* Интерактивные схемы лекций (diagrams.js). Подключается и на /platform, и в CRM (предпросмотр):
   цвета — общие переменные обеих страниц. Встроенных <style> нет — строгая CSP. */
.pl-diagram{margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);max-width:600px;overflow-wrap:anywhere}
.pl-diagram figcaption{font-weight:700;margin:0 0 8px}
.pl-diagram-fallback{margin:0;color:var(--ink-2);font-size:13px}
.pl-diagram-missing{margin:12px 0;padding:8px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-weight:600;overflow-wrap:anywhere}

.dg-stage{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px}
.dg-svg{display:block;width:100%;height:auto;max-width:500px;margin:0 auto;overflow:visible}

/* Гамма бренда: тёмно-синий сайдбара CRM, синий --sky, голубой градиент шапки, светлые фоны.
   Цвет-сигнал (--good/--warn/--bad) — только там, где он о безопасности (см. тест палитры). */
.pl-diagram{--dg-navy:#0f2747;--dg-grad-a:#52b0f8;--dg-grad-b:#2a86e0}
.dg-title{display:flex;align-items:center;gap:8px}
.dg-badge{width:22px;height:22px;flex:none;color:var(--sky)}

/* Фигуры: базовый класс первым, модификаторы ниже — у них та же специфичность. */
.dg-shape{fill:none;stroke:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;transition:fill .18s ease,stroke .18s ease,stroke-width .18s ease}
.dg-f-navy{fill:var(--dg-navy)}
.dg-f-sky{fill:var(--sky)}
.dg-f-sky2{fill:var(--sky-2)}
.dg-f-tint{fill:var(--sky);fill-opacity:.07}
.dg-f-bg{fill:var(--bg)}
.dg-f-surface{fill:var(--surface)}
.dg-f-good{fill:var(--good-bg)}
.dg-f-warn{fill:var(--warn-bg)}
.dg-f-bad{fill:var(--bad-bg)}
.dg-f-none{fill:none}
.dg-hit{fill:var(--surface);fill-opacity:0}
.dg-s-line{stroke:var(--line-2)}
.dg-s-ink{stroke:var(--ink-3)}
.dg-s-navy{stroke:var(--dg-navy)}
.dg-s-sky{stroke:var(--sky)}
.dg-s-good{stroke:var(--good)}
.dg-s-warn{stroke:var(--warn)}
.dg-s-bad{stroke:var(--bad)}
.dg-dash{stroke-dasharray:5 4}
.dg-dot{stroke-dasharray:1 4}
.dg-grad-a{stop-color:var(--dg-grad-a)}
.dg-grad-b{stop-color:var(--dg-grad-b)}
.dg-arrowhead{fill:var(--ink-3)}
.dg-text{font-family:inherit;font-size:13px;fill:var(--ink);pointer-events:none}
.dg-t-sm{font-size:11.5px}
.dg-t-xs{font-size:10.5px}
.dg-t-xl{font-size:24px}
.dg-t-b{font-weight:700}
.dg-t-mute{fill:var(--ink-2)}
.dg-t-sky{fill:var(--sky-ink)}
.dg-t-inv{fill:#fff}

/* Значки: цвет задаёт класс группы, части берут его через currentColor */
.dg-icon{color:var(--sky);pointer-events:none}
.dg-i-navy{color:var(--dg-navy)}
.dg-i-sky{color:var(--sky)}
.dg-i-mute{color:var(--line-2)}
.dg-i-inv{color:#fff}
.dg-i-warn{color:var(--warn)}
.dg-i-bad{color:var(--bad)}
.dg-is{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dg-if{fill:currentColor}
.dg-ir{fill:var(--surface);stroke:currentColor;stroke-width:1.3}
.dg-rotor{transform-box:fill-box;transform-origin:center}
.dg-marker{pointer-events:none;transition:transform .55s cubic-bezier(.4,0,.2,1)}

/* Горячие точки: выбранная — синяя обводка и заливка; изученная — точка в углу */
.dg-spot{cursor:pointer;outline:none}
.dg-spot:hover > .dg-hot,.dg-spot:hover > .dg-keep{stroke:var(--sky);stroke-width:2}
.dg-spot.is-path > .dg-hot,.dg-spot.is-path > .dg-keep{stroke:var(--sky);stroke-width:2}
.dg-spot.is-on > .dg-hot{fill:var(--sky-2);fill-opacity:1;stroke:var(--sky);stroke-width:2.6}
.dg-spot.is-on > .dg-keep{stroke:var(--sky);stroke-width:3}
.dg-spot:focus-visible > .dg-hot,.dg-spot:focus-visible > .dg-keep{stroke:var(--dg-navy);stroke-width:2.6}
.dg-spot.is-on .dg-rotor,.dg-marker .dg-rotor{animation:dg-spin 1.1s linear infinite}
.dg-spot.is-on .dg-rotor-side,.dg-marker .dg-rotor-side{animation:dg-blade .5s ease-in-out infinite alternate}
.dg-seen{pointer-events:none}
.dg-seen-dot{fill:var(--sky);stroke:var(--surface);stroke-width:1.5}
.dg-ptitle,.dg-ptext{animation:dg-in .22s ease}
@keyframes dg-spin{to{transform:rotate(360deg)}}
@keyframes dg-blade{from{transform:scaleX(1)}to{transform:scaleX(.35)}}
@keyframes dg-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .dg-shape,.dg-marker{transition:none}
  .dg-spot.is-on .dg-rotor,.dg-marker .dg-rotor,.dg-spot.is-on .dg-rotor-side,.dg-marker .dg-rotor-side,.dg-ptitle,.dg-ptext{animation:none}
}

/* Пояснение, счётчик, дерево решений, самопроверка — под рисунком */
.dg-panel{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);min-height:64px}
.dg-panel p,.dg-flow p,.dg-quiz p{margin:4px 0 0}
.dg-ptitle{display:block}
.dg-hint{color:var(--ink-3)}
.dg-nav,.dg-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.dg-count{font-size:13px;font-weight:600;color:var(--ink-2)}
.dg-count.is-done{color:var(--sky-ink)}
.dg-quiz-start{margin-left:auto}
.dg-flow,.dg-quiz{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--sky-2);border:1px solid var(--line)}
.dg-fhead,.dg-qno{font-size:12px;font-weight:700;color:var(--sky-ink)}
.dg-fq,.dg-fend,.dg-qtext{font-weight:600}
.dg-qopts{display:grid;gap:6px;margin-top:8px}
.dg-qopts .btn,.dg-flow .btn{white-space:normal;text-align:left}
.dg-qhint,.dg-qnote{color:var(--ink-2);font-size:13px}
.dg-qfeedback.ok{color:var(--sky-ink)}
.dg-qfeedback.bad{color:var(--bad)}
.dg-source{margin-top:8px;font-size:12px;color:var(--ink-3)}

@media (max-width:480px){
  .pl-lecture .pl-diagram{margin-left:-14px;margin-right:-14px;padding:8px 6px}
  .dg-stage{padding:2px 0;border-left:0;border-right:0;border-radius:0}
}