/* Canon icon library — цвета сущностей/инструментов + мягкое движение.
   Подключать ПОСЛЕ ui.css и extra_css. Спрайт: _ico_sprite / /ico-sprite.svg + ico.js. */
:root {
  --tool-moy-ip: #0e7490;
  --tool-provider-po-ip: #155e75;
  --tool-dns-leak: #d97706;
  --tool-dns-lookup: #b45309;
  --tool-dns-sravnenie: #ca8a04;
  --tool-dns-propagation: #a16207;
  --tool-rkn-check: #e11d48;
  --tool-proverka-blokirovki: #be123c;
  --tool-dostupnost-saita: #059669;
  --tool-redirect-check: #047857;
  --tool-http-status: #0f766e;
  --tool-trassirovka: #0284c7;
  --tool-ping: #0369a1;
  --tool-port-check: #075985;
  --tool-skorost-interneta: #f37a0a;
  --tool-stabilnost: #c2410c;
  --tool-diagnostika: #2550ff;
  --tool-ipv6: #6d28d9;
  --tool-ip-blacklist: #9f1239;
  --tool-ssl-check: #4f46e5;
}

body.skin-canon .hub-card--e-dns { --e-bar: var(--e-dns, #d97706); }
body.skin-canon .hub-card--e-dpi { --e-bar: var(--e-dpi, #e11d48); }
body.skin-canon .hub-card--e-backbone { --e-bar: var(--e-backbone, #0284c7); }
body.skin-canon .hub-card--e-tools { --e-bar: var(--e-tools, #78716c); }

body.skin-canon a.hub-card[href^="/tools/moy-ip"],
body.skin-canon.tool-moy-ip { --e-bar: var(--tool-moy-ip); --tool: var(--tool-moy-ip); }
body.skin-canon a.hub-card[href^="/tools/provider-po-ip"],
body.skin-canon.tool-provider-po-ip { --e-bar: var(--tool-provider-po-ip); --tool: var(--tool-provider-po-ip); }
body.skin-canon a.hub-card[href^="/tools/dns-leak"],
body.skin-canon.tool-dns-leak { --e-bar: var(--tool-dns-leak); --tool: var(--tool-dns-leak); }
body.skin-canon a.hub-card[href^="/tools/dns-lookup"],
body.skin-canon.tool-dns-lookup { --e-bar: var(--tool-dns-lookup); --tool: var(--tool-dns-lookup); }
body.skin-canon a.hub-card[href^="/tools/dns-sravnenie"],
body.skin-canon.tool-dns-sravnenie { --e-bar: var(--tool-dns-sravnenie); --tool: var(--tool-dns-sravnenie); }
body.skin-canon a.hub-card[href^="/tools/dns-propagation"],
body.skin-canon.tool-dns-propagation { --e-bar: var(--tool-dns-propagation); --tool: var(--tool-dns-propagation); }
body.skin-canon a.hub-card[href^="/tools/rkn-check"],
body.skin-canon.tool-rkn-check { --e-bar: var(--tool-rkn-check); --tool: var(--tool-rkn-check); }
body.skin-canon a.hub-card[href^="/tools/proverka-blokirovki"],
body.skin-canon.tool-proverka-blokirovki { --e-bar: var(--tool-proverka-blokirovki); --tool: var(--tool-proverka-blokirovki); }
body.skin-canon a.hub-card[href^="/tools/dostupnost-saita"],
body.skin-canon.tool-dostupnost-saita { --e-bar: var(--tool-dostupnost-saita); --tool: var(--tool-dostupnost-saita); }
body.skin-canon a.hub-card[href^="/tools/redirect-check"],
body.skin-canon.tool-redirect-check { --e-bar: var(--tool-redirect-check); --tool: var(--tool-redirect-check); }
body.skin-canon a.hub-card[href^="/tools/http-status"],
body.skin-canon.tool-http-status { --e-bar: var(--tool-http-status); --tool: var(--tool-http-status); }
body.skin-canon a.hub-card[href^="/tools/trassirovka"],
body.skin-canon.tool-trassirovka { --e-bar: var(--tool-trassirovka); --tool: var(--tool-trassirovka); }
body.skin-canon a.hub-card[href^="/tools/ping"],
body.skin-canon.tool-ping { --e-bar: var(--tool-ping); --tool: var(--tool-ping); }
body.skin-canon a.hub-card[href^="/tools/port-check"],
body.skin-canon.tool-port-check { --e-bar: var(--tool-port-check); --tool: var(--tool-port-check); }
body.skin-canon a.hub-card[href^="/tools/skorost-interneta"],
body.skin-canon.tool-skorost-interneta { --e-bar: var(--tool-skorost-interneta); --tool: var(--tool-skorost-interneta); }
body.skin-canon a.hub-card[href^="/tools/stabilnost"],
body.skin-canon a.hub-card[href*="stability"],
body.skin-canon.tool-stabilnost { --e-bar: var(--tool-stabilnost); --tool: var(--tool-stabilnost); }
body.skin-canon a.hub-card[href^="/tools/diagnostika"],
body.skin-canon.tool-diagnostika { --e-bar: var(--tool-diagnostika); --tool: var(--tool-diagnostika); }
body.skin-canon a.hub-card[href^="/tools/ipv6"],
body.skin-canon.tool-ipv6 { --e-bar: var(--tool-ipv6); --tool: var(--tool-ipv6); }
body.skin-canon a.hub-card[href^="/tools/ip-blacklist"],
body.skin-canon.tool-ip-blacklist { --e-bar: var(--tool-ip-blacklist); --tool: var(--tool-ip-blacklist); }
body.skin-canon a.hub-card[href^="/tools/ssl-check"],
body.skin-canon.tool-ssl-check { --e-bar: var(--tool-ssl-check); --tool: var(--tool-ssl-check); }

body.skin-canon[class*="tool-"] .hero {
  border-left-color: var(--tool, var(--e-bar, var(--hud)));
}
body.skin-canon[class*="tool-"] .h1-line .mi,
body.skin-canon[class*="tool-"] .hero .mi--h2 {
  stroke: var(--tool, var(--e-bar, var(--hud)));
  color: var(--tool, var(--e-bar, var(--hud)));
}

body.skin-canon .hub-card {
  border-left-width: 3px;
  border-left-color: var(--e-bar, var(--hud));
}
body.skin-canon .hub-card .mi,
body.skin-canon .hub-card use {
  stroke: var(--e-bar, var(--hud));
  color: var(--e-bar, var(--hud));
}

/* Карточки причин = те же плитки, что «Разделы ЧекРунет.ру» */
body.skin-canon .swipe-card--e-device { --e-bar: var(--e-device, #64748b); }
body.skin-canon .swipe-card--e-wifi { --e-bar: var(--e-wifi, #0d9488); }
body.skin-canon .swipe-card--e-provider { --e-bar: var(--e-provider, #0e7490); }
body.skin-canon .swipe-card--e-dpi { --e-bar: var(--e-dpi, #e11d48); }
body.skin-canon .swipe-card--e-backbone { --e-bar: var(--e-backbone, #0284c7); }
body.skin-canon .swipe-card--e-service { --e-bar: var(--e-service, #059669); }

body.skin-canon .swipe-card {
  background: var(--panel) !important;
  border: 2.5px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
  border-left-width: 3px !important;
  border-left-color: var(--e-bar, var(--hud)) !important;
}
body.skin-canon .swipe-card .card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 0 10px;
  color: var(--e-bar, var(--hud));
}
body.skin-canon .swipe-card .card__icon .mi {
  width: 16px;
  height: 16px;
  stroke: var(--e-bar, var(--hud));
}
body.skin-canon .swipe-card:has(.card__icon) .swipe-card__num {
  display: none;
}
body.skin-canon .swipe-card:hover,
body.skin-canon .swipe-card:focus-within {
  background: var(--soft) !important;
  color: var(--hud);
  border-color: var(--line) !important;
  border-left-color: var(--e-bar, var(--hud)) !important;
}

/* Мягкое движение: 1px, без рывков. Idle только у иконок блоков. */
@media (prefers-reduced-motion: no-preference) {
  .motion-on .mi {
    transform-origin: center;
    transition: transform .32s cubic-bezier(.22, .8, .28, 1), opacity .32s ease;
  }
  .motion-on a:hover .mi,
  .motion-on button:hover .mi,
  .motion-on .hub-card:hover .mi,
  .motion-on .swipe-card:hover .mi,
  .motion-on .card:hover .card__icon .mi,
  .motion-on .theme-toggle:hover .mi,
  .motion-on .drawer a:hover .mi,
  .motion-on .topnav a:hover .mi {
    transform: translate(1px, -1px);
  }
  .motion-on .mi--h2,
  .motion-on .card__icon .mi,
  .motion-on .hub-card .mi,
  .motion-on .swipe-card .mi {
    animation: ico-soft 3.8s cubic-bezier(.4, 0, .2, 1) infinite;
  }
}
@keyframes ico-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: .78; }
}
@media (prefers-reduced-motion: reduce) {
  .mi, .card__icon .mi, .hub-card .mi {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}