/* Перший шар — нова схема принтера (розділ 13б). Доповнює fl.css, не
   замінює: розкладка .fl-schema / .fl-panel лишилась, змінився сам малюнок. */

.fl-svgwrap { background: #0B1B30; border-radius: 14px; }
.fl-svgwrap svg.fl-printer { display: block; width: 100%; height: auto; }

/* виноска у спокої — приглушена; точка світиться зеленим */
.fl-node { cursor: pointer; outline: none; }
.fl-node .fl-node-line { stroke: rgba(150, 200, 250, .38); transition: stroke .18s; }
.fl-node .fl-node-glow { opacity: 0; transition: opacity .22s; }
.fl-node .fl-node-ring { stroke: rgba(107, 240, 140, .45); transition: stroke .18s, r .18s; }
.fl-node .fl-node-dot  { fill: #6BF08C; stroke: #0B1B30; transition: fill .18s, stroke .18s; }
.fl-node .fl-node-tag  { fill: rgba(14, 30, 54, .92); stroke: rgba(150, 200, 250, .38); stroke-width: 1; transition: fill .18s, stroke .18s; }
.fl-node .fl-node-txt  { fill: #C9D6E8; transition: fill .18s; }

/* наведення / фокус */
.fl-node:hover .fl-node-line, .fl-node:focus-visible .fl-node-line { stroke: rgba(107, 240, 140, .8); }
.fl-node:hover .fl-node-glow, .fl-node:focus-visible .fl-node-glow { opacity: .8; }
.fl-node:hover .fl-node-ring, .fl-node:focus-visible .fl-node-ring { stroke: #6BF08C; }
.fl-node:hover .fl-node-tag,  .fl-node:focus-visible .fl-node-tag  { stroke: rgba(107, 240, 140, .8); }
.fl-node:hover .fl-node-txt,  .fl-node:focus-visible .fl-node-txt  { fill: #fff; }

/* обраний вузол — янтарний, як раніше, але з підписом-капсулою */
.fl-node.fl-on .fl-node-line { stroke: var(--fl-amber); stroke-width: 2; }
.fl-node.fl-on .fl-node-glow { opacity: 1; }
.fl-node.fl-on .fl-node-ring { stroke: var(--fl-amber); }
.fl-node.fl-on .fl-node-dot  { fill: var(--fl-amber); stroke: #fff; }
.fl-node.fl-on .fl-node-tag  { fill: var(--fl-amber); stroke: var(--fl-amber); }
.fl-node.fl-on .fl-node-txt  { fill: #0B1B30; }

/* повільний пульс кільця обраного вузла — виводить око на місце. Через
   rAF-цикли не робимо: це декор, при reduced-motion просто вимикаємо. */
@keyframes fl-ring { 0% { r: 15; opacity: 1; } 100% { r: 24; opacity: 0; } }
.fl-node.fl-on .fl-node-ring { animation: fl-ring 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .fl-node.fl-on .fl-node-ring { animation: none; } }

/* підпис над малюнком — тепер підказка, а не заголовок */
.fl-schema-map .fl-mono { display: flex; align-items: center; gap: 10px; }
.fl-schema-map .fl-mono::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fl-neon);
  box-shadow: 0 0 0 4px rgba(107, 240, 140, .18);
}

/* ── телефон: малюнок стискається до ~290 px, тож підписи й точки робимо
   більшими (SVG масштабує їх разом із малюнком), а картці даємо всю ширину */
@media (max-width: 760px) {
  .fl-schema-map { padding: 14px 8px 8px; }
  .fl-svgwrap { border-radius: 10px; }
  .fl-node .fl-node-txt { font-size: 15px; }
  .fl-node .fl-node-tag { transform: scaleY(1.25); transform-box: fill-box; transform-origin: center; }
  .fl-node .fl-node-dot { r: 10; stroke-width: 2.5; }
  .fl-node .fl-node-ring { r: 18; }
  .fl-node .fl-node-line { stroke-width: 2; }
  @keyframes fl-ring { 0% { r: 18; opacity: 1; } 100% { r: 28; opacity: 0; } }
}

/* примітка в панелі, коли розділ вузла ще порожній (02.10.2026) */
.fl-panel .fl-panel-note{margin:0 0 14px;padding:11px 13px;background:var(--fl-amber-lt);border-radius:var(--fl-r-sm);
  font-size:13.5px;line-height:1.5;color:var(--fl-ink)}