/* lucide-icons.css
 * Inline stroke-SVG icon helper for Meridian website.
 * 2026-05-20 — replaces emoji UI icons sitewide per design rule
 * (feedback_design_no_emoji_icons.md). Lucide-style strokes, monochrome.
 *
 * Usage:
 *   <span class="icon-stroke" aria-hidden="true">
 *     <svg viewBox="0 0 24 24"> … </svg>
 *   </span>
 *
 * Color inherits from the surrounding text — set parent color to brand
 * navy on light backgrounds, brand grey on dark backgrounds, or any
 * accent. Override size by setting font-size on the .icon-stroke span
 * (icons size with em).
 */

.icon-stroke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  color: inherit;
  line-height: 1;
  flex-shrink: 0;
}

.icon-stroke svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Block variant — used inside card-icon tiles where the icon is the
 * primary visual element (features.html .feature-icon, security trust
 * cards). Sizes itself by parent height instead of em. */
.icon-stroke-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
}
.icon-stroke-block svg {
  width: 60%;
  height: 60%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Live-pulse dot used to replace 🔴 in the intelligence LIVE tag. */
.icon-live-dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.05em;
  margin-right: 0.05em;
  position: relative;
}
.icon-live-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.55;
  animation: meridian-live-pulse 1.8s ease-in-out infinite;
}
@keyframes meridian-live-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.55; }
  50% { transform: scale(1.25); opacity: 0; }
}