/*
 * Glossi feature illustration primitives
 *
 * Shared by compact marketing diagrams. The outer feature card owns the
 * canvas; these classes describe only the truthful UI fragments inside it.
 */

.feature-illustration,
.mini-proof {
  --fi-ink: var(--ink, 24, 24, 27);
  --fi-radius: 5px;
  --fi-line: rgba(var(--fi-ink), .35);
  --fi-line-strong: rgba(var(--fi-ink), .62);
  --fi-line-faint: rgba(var(--fi-ink), .12);
  --fi-surface: rgba(255, 255, 255, .94);
  --fi-surface-edge: rgba(var(--fi-ink), .16);
  --fi-control: rgba(var(--fi-ink), .032);
  --fi-control-edge: rgba(var(--fi-ink), .10);
  --fi-skeleton: rgba(var(--fi-ink), .10);
  --fi-skeleton-soft: rgba(var(--fi-ink), .065);
  --fi-connector: rgba(var(--fi-ink), .30);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.feature-illustration > svg,
.mini-proof > svg {
  display: block;
  width: 104%;
  height: 104%;
  transform: translate(-2%, -2%);
}

.fi-line,
.fi-line-strong,
.fi-line-faint,
.fi-surface,
.fi-control,
.mini-line,
.mini-line-strong,
.mini-line-faint,
.mini-surface,
.mini-control {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fi-line,
.mini-line {
  fill: none;
  stroke: var(--fi-line);
  stroke-width: 1.15;
}

.fi-line-strong,
.mini-line-strong {
  fill: none;
  stroke: var(--fi-line-strong);
  stroke-width: 1.35;
}

.fi-line-faint,
.mini-line-faint {
  fill: none;
  stroke: var(--fi-line-faint);
  stroke-width: 1;
}

.fi-surface,
.mini-surface {
  fill: var(--fi-surface);
  stroke: var(--fi-surface-edge);
  stroke-width: 1;
}

.fi-control,
.mini-control {
  fill: var(--fi-control);
  stroke: var(--fi-control-edge);
  stroke-width: 1;
}

.fi-raised,
.mini-raised {
  filter: drop-shadow(0 5px 8px rgba(var(--fi-ink), .05));
}

.fi-overlay,
.mini-overlay {
  filter: drop-shadow(0 8px 12px rgba(var(--fi-ink), .07));
}

.fi-skeleton,
.mini-skeleton { fill: var(--fi-skeleton); }

.fi-skeleton-soft,
.mini-skeleton-soft,
.fi-skeleton--light { fill: var(--fi-skeleton-soft); }

.fi-surface--muted { fill: rgba(var(--fi-ink), .026); }
.fi-elevated { filter: drop-shadow(0 7px 10px rgba(var(--fi-ink), .055)); }

.fi-canvas {
  fill: rgba(var(--fi-ink), .018);
  stroke: rgba(var(--fi-ink), .08);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fi-canvas--strong { stroke: rgba(var(--fi-ink), .18); }

.fi-badge {
  fill: rgba(255, 255, 255, .96);
  stroke: rgba(var(--fi-ink), .16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fi-icon--strong { stroke: rgba(var(--fi-ink), .66); }
.fi-arrow,
.fi-node { fill: var(--fi-connector); }

.fi-thumb {
  fill: #fff;
  stroke: rgba(var(--fi-ink), .35);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fi-tick {
  fill: none;
  stroke: rgba(var(--fi-ink), .22);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.fi-icon-circle {
  fill: rgba(255, 255, 255, .9);
  stroke: rgba(var(--fi-ink), .48);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.fi-field,
.mini-field {
  fill: rgba(var(--fi-ink), .025);
  stroke: rgba(var(--fi-ink), .055);
  stroke-width: 1;
}

.fi-icon,
.mini-icon {
  fill: none;
  stroke: rgba(var(--fi-ink), .52);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fi-connector,
.mini-connector {
  fill: none;
  stroke: var(--fi-connector);
  stroke-width: 1.3;
  stroke-dasharray: 1.4 4.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.fi-track,
.mini-track { fill: rgba(var(--fi-ink), .10); }

.fi-track-fill,
.mini-track-fill { fill: #3f3f42; }

.fi-track-handle,
.mini-track-handle {
  fill: #fff;
  stroke: rgba(var(--fi-ink), .35);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fi-fill-strong,
.mini-fill-strong { fill: rgba(var(--fi-ink), .58); }

@media (prefers-reduced-motion: no-preference) {
  .feature-illustration .fi-raised,
  .feature-illustration .fi-overlay,
  .mini-proof .mini-raised,
  .mini-proof .mini-overlay {
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1),
                filter 220ms cubic-bezier(.22, 1, .36, 1);
  }
}