/* Presentation of the original SVG artwork from /assets/icon. */
:root {
  --icon-ink: brightness(0) saturate(100%) invert(24%);
  --icon-muted: brightness(0) saturate(100%) invert(46%);
  --icon-light: brightness(0) saturate(100%) invert(96%);
  --icon-red: brightness(0) saturate(100%) invert(15%) sepia(94%) saturate(6481%) hue-rotate(351deg) brightness(94%) contrast(117%);
}

svg.asset-icon,
:is(img,svg:where(.inline-svg)).key-icon,
:is(img,svg:where(.inline-svg)).filter-icon {
  filter: var(--icon-ink);
}

/* Dark navigation, banners and red action buttons. */
.catalog-button > .asset-icon,
.hero-story .asset-icon,
.site-footer .asset-icon,
.telegram-banner .asset-icon,
.activate-button .asset-icon,
.primary-button .asset-icon,
.community-tile .asset-icon {
  filter: var(--icon-light);
}

.catalog-button > .asset-icon { width: 18px; height: 18px; }
.search-field > .asset-icon { width: 18px; height: 18px; filter: var(--icon-muted); }
.search-support > .asset-icon { width: 20px; height: 20px; }
.hero-guide .asset-icon { width: 14px; height: 14px; }
.activate-button > .asset-icon,
.primary-button > .asset-icon { width: 18px; height: 18px; }
.site-footer .asset-icon { width: 12px; height: 12px; }
svg.asset-icon:has(use[href="#i-external"]) { width: 11px; height: 11px; }

/* Dense artwork needs less area than the original outline placeholders. */
.key-input .key-icon,
.flow-page .key-icon { width: 26px; height: 26px; flex: 0 0 26px; filter: var(--icon-ink); opacity: 1; }
.activation-route .key-input .key-icon { width: 22px; height: 22px; flex-basis: 22px; }
.teaser-key .key-icon,
.teaser-key :is(:is(img,svg:where(.inline-svg))[src^="/assets/icon/"],svg[data-svg-kind="icon"]) { width: 25px; height: 25px; filter: var(--icon-ink); }
.flow-page .field-icon { width: 20px; height: 20px; flex: 0 0 20px; filter: var(--icon-ink); }
.filter-toggle .filter-icon { width: 17px; height: 17px; flex: 0 0 17px; filter: var(--icon-ink); }
.activation-bottom > .asset-icon { width: 17px; height: 17px; filter: var(--icon-muted); }
.product-next-note > .asset-icon { width: 18px; height: 18px; filter: var(--icon-muted); }

/* Help and service links stay quiet until the user points to them. */
.strip-icon .asset-icon,
.support-icon .asset-icon,
.flow-support-icon .asset-icon { width: 19px; height: 19px; filter: var(--icon-ink); }
.flow-support > .asset-icon,
.support-link > .asset-icon,
.text-link > .asset-icon { width: 15px; height: 15px; filter: var(--icon-muted); }
.flow-support:hover > .asset-icon,
.support-link:hover > .asset-icon,
.text-link:hover > .asset-icon,
.activation-back:hover > .asset-icon,
.activation-support:hover .asset-icon,
.product-link:hover .asset-icon { filter: var(--icon-red); }
.activation-back > .asset-icon { width: 16px; height: 16px; filter: var(--icon-muted); }
.activation-support .asset-icon { width: 13px; height: 13px; filter: var(--icon-muted); }
body.activation-route .activation-support svg.asset-icon:has(use[href="#i-external"]) { width: 10.45px; height: 10.45px; }
.order-card-title { gap: 5px; }
.order-card-title .order-symbol svg.asset-icon { width: 20.52px; height: 20.52px; }
.order-timeline .timeline-marker svg.asset-icon { width: 10px; height: 10px; }
.order-timeline li.done .timeline-marker svg.asset-icon { filter: var(--icon-light); }
.order-timeline li:not(.done):not(.active) .timeline-marker svg.asset-icon { filter: var(--icon-muted); }
.order-card[data-status="needs_attention"] .order-timeline li.active .timeline-marker svg.asset-icon { filter: var(--icon-red); }
.telegram-banner-mark .asset-icon { width: 27px; height: 27px; transform: rotate(8deg); }
.telegram-banner-button .asset-icon { width: 15px; height: 15px; }

@media (max-width: 760px) {
  .catalog-button > .asset-icon { width: 19px; height: 19px; }
  .key-input .key-icon,
  .flow-page .key-icon { width: 25px; height: 25px; flex-basis: 25px; }
  .activation-route .key-input .key-icon { width: 22px; height: 22px; flex-basis: 22px; }
  .flow-page .field-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .telegram-banner-mark .asset-icon { width: 24px; height: 24px; }
  .order-card-title { gap: 4px; }
  .order-card-title .order-symbol svg.asset-icon { width: 17.955px; height: 17.955px; }
}

/* Keep all three credential field icons equal and their input text aligned. */
.credentials-route .password-wrap .key-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-inline: 4px;
}