/* Modern UI Phase 11 — Icons | var.24 grafo74 */
:root {
  --ui-icon-size: 1.1em;
  --ui-icon-stroke: 2;
  --ui-icon-gap: .48em;
  --ui-icon-muted: currentColor;
}

.ui-icon {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  flex: 0 0 var(--ui-icon-size);
  display: inline-block;
  vertical-align: -.18em;
  color: inherit;
  stroke: currentColor;
  stroke-width: var(--ui-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  pointer-events: none;
}

.ui-icon--filled { fill: currentColor; stroke: none; }

.ui-has-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--ui-icon-gap);
}

.ui-icon-only {
  display: inline-grid !important;
  place-items: center;
  line-height: 1 !important;
}

.ui-icon-only > .ui-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

/* Keep old glyphs available to assistive technology but visually remove them. */
.ui-icon-only > .ui-icon-legacy-glyph {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Header/menu icon */
a.icon.ui-icon-only {
  min-width: 44px;
  min-height: 44px;
  padding: .55rem !important;
}

/* Viewer controls */
.viewer-toolbar button .ui-icon,
.doc-controls button .ui-icon,
.viewer-controls button .ui-icon,
.viewer-controls a .ui-icon,
button[onclick*="prevDoc"] .ui-icon,
button[onclick*="nextDoc"] .ui-icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* Contact rows: icons line up instead of changing text baseline. */
.contacts-footer__item.ui-has-icon,
a[href^="mailto:"].ui-has-icon,
a[href^="tel:"].ui-has-icon {
  justify-content: flex-start;
}

.contacts-footer__item .ui-icon {
  width: 1rem;
  height: 1rem;
  opacity: .96;
}

/* Text actions */
.io_button.ui-has-icon,
.article-toggle.ui-has-icon,
[data-article-action].ui-has-icon,
.theme-toggle.ui-has-icon {
  gap: .42rem;
}

/* Scroll arrows use the same vector system. */
.scroll-arrow .ui-icon,
.scroll-to-top .ui-icon,
.back-to-top .ui-icon,
a[href="#top"] .ui-icon,
button[aria-label*="Вверх"] .ui-icon,
button[title*="Вверх"] .ui-icon {
  width: 1.45rem;
  height: 1.45rem;
}

/* Dark mode: icons inherit the already-approved foreground color. */
html[data-theme="dark"] .ui-icon,
body.dark-mode .ui-icon {
  color: inherit;
  filter: none;
}

/* High contrast and keyboard focus remain obvious. */
@media (forced-colors: active) {
  .ui-icon { forced-color-adjust: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-icon { transition: none !important; animation: none !important; }
}

@media print {
  .ui-icon { filter: none !important; }
  .theme-toggle, .scroll-arrow, .scroll-to-top, .back-to-top { display: none !important; }
}

/* var.25 fix — the responsive menu trigger must never appear beside a fully visible menu. */
.topnav > a.icon.ui-icon-only {
  display: none !important;
}

@media screen and (max-width: 770px) {
  .topnav > a.icon.ui-icon-only {
    display: inline-grid !important;
  }
}

@media print {
  .topnav > a.icon.ui-icon-only {
    display: none !important;
  }
}