/* ==========================================================
   FORHER SVG ICON SYSTEM

   Decorative icons use assets/icons/sprite.svg and <svg><use>.
   This prevents emoji substitutions on iOS and ensures currentColor.
   No icon font, JavaScript library, or CDN is required.
   ========================================================== */

.ui-icon {
  display: inline-block;
  inline-size: 1.1em;
  block-size: 1.1em;
  flex: 0 0 auto;
  vertical-align: -0.15em;
  color: inherit;
  overflow: visible;
}

/* Keep text links quiet: the shadow/float belongs to filled buttons only. */
.btn-text:hover,
.btn-text:active {
  transform: none;
  box-shadow: none;
  background: transparent;
}

.btn-text .ui-icon {
  inline-size: 16px;
  block-size: 16px;
}

.btn .arr .ui-icon,
.card-link .ui-icon,
.path-arrow .ui-icon {
  inline-size: 18px;
  block-size: 18px;
}

.icon-btn .ui-icon {
  inline-size: 19px;
  block-size: 19px;
}

.agenda-row-arrow .ui-icon {
  inline-size: 18px;
  block-size: 18px;
}

.motion-button .ui-icon,
.motion-button.light .ui-icon {
  inline-size: 14px;
  block-size: 14px;
}

.tick .ui-icon,
.check .ui-icon {
  inline-size: 17px;
  block-size: 17px;
}

.benefit-icon .ui-icon {
  inline-size: 19px;
  block-size: 19px;
}

.save-date .ui-icon {
  inline-size: 17px;
  block-size: 17px;
}

/* Filled play/pause shapes don't inherit unwanted outlines from the old CSS. */
[data-play-icon] .ui-icon,
.motion-button .ui-icon {
  stroke: none;
  fill: none;
}

/* Respect keyboard focus styling from tokens.css; don't suppress it. */