/* ════════════════════════════════════════════════════════════
   UMNAI Infographic & Diagram primitives — v3.0
   Load AFTER styles.css. Provides panels, hero, section numbers,
   sub-element chips, node shapes, connectors, icon chips.
   Light layout · white rounded panels · soft shadows · lime accent.
   ════════════════════════════════════════════════════════════ */

/* ── Canvas ─────────────────────────────────────────── */
.ig-canvas {
  background: var(--brand-white);
  color: var(--neutral-900);
  font-family: var(--font-text);
}

/* ── Panels ─────────────────────────────────────────── */
.ig-panel {
  position: relative;
  background: var(--brand-white);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: var(--space-8);
}
.ig-panel--lg { box-shadow: var(--shadow-panel-lg); }

/* Hero — the dark anchor panel */
.ig-hero {
  background: var(--neutral-900);
  color: var(--brand-white);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel-lg);
  padding: var(--space-12);
  text-align: center;
}
.ig-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--brand-white);
}
.ig-hero__rule {
  height: 2px;
  width: 64%;
  margin: var(--space-5) auto;
  background: var(--lime-300);
  border: 0;
}
.ig-hero__tag {
  font-size: 19px;
  line-height: 1.4;
  color: var(--neutral-300);
}
.ig-hero__tag em { font-style: normal; color: var(--lime-300); }

/* ── Section numbering ──────────────────────────────── */
.ig-head { display: flex; align-items: flex-start; gap: var(--space-4); }
.ig-num {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--lime-300);
  color: var(--neutral-900);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
}
.ig-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--neutral-900);
  line-height: 1.15;
}
.ig-head__sub {
  font-size: 14px;
  color: var(--neutral-500);
  margin-top: 2px;
}

/* ── Sub-element chips / rows ───────────────────────── */
.ig-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-lg);
  font-size: 14px; font-weight: 500;
  color: var(--neutral-900);
}
.ig-chip__icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--neutral-900); }
.ig-chip--dark { background: var(--neutral-800); border-color: var(--neutral-700); color: var(--brand-white); }
.ig-chip--dark .ig-chip__icon { color: var(--lime-300); }

/* Mono token chip (e.g. IF A + B → C) */
.ig-token {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  color: var(--neutral-700);
}
.ig-token b {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border: 1.5px solid var(--neutral-300); border-radius: var(--radius-sm);
  font-weight: 600;
}
.ig-token b.is-out { border-color: var(--lime-500); color: var(--lime-700); }

/* ── Icon chips (round / rounded) ───────────────────── */
.ig-ichip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-100);
  color: var(--neutral-900);
}
.ig-ichip--sq { border-radius: var(--radius-md); }
.ig-ichip--lime { background: var(--lime-300); border-color: var(--lime-300); color: var(--neutral-900); }
.ig-ichip--dark { background: var(--neutral-900); border-color: var(--neutral-900); color: var(--lime-300); }

/* Line-art icon defaults — set on the element so values inherit into
   the shadow content cloned by <use> (fill/stroke are inherited props) */
.ig-icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Node shapes (for flow diagrams) ────────────────── */
/* Role → shape is fixed:  input/raw/output = sharp rect (rx0)
   processing/reasoning/intelligence = rounded rect (rx8)
   decision gate = diamond                                   */
.ig-node {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 44px; padding: var(--space-3) var(--space-5);
  background: var(--brand-white);
  border: 2px solid var(--neutral-300);
  font-size: 14px; font-weight: 600; color: var(--neutral-900);
  text-align: center;
}
.ig-node--io       { border-radius: 0; }                    /* inputs / raw data / governed outputs */
.ig-node--process  { border-radius: 8px; }                  /* processing / reasoning / intelligence */
.ig-node--decision {                                        /* decision gate */
  border-radius: 0;
  aspect-ratio: 1; padding: var(--space-4);
  transform: rotate(45deg);
}
.ig-node--decision > * { transform: rotate(-45deg); }

/* Node accent variants (follow destination domain) */
.ig-node--lime    { border-color: var(--lime-500); }
.ig-node--cer     { border-color: var(--cer-500); }
.ig-node--amber   { border-color: var(--amber-400); }
.ig-node--violet  { border-color: var(--violet-400); }
.ig-node--coral   { border-color: var(--coral-400); }
.ig-node--solid   { background: var(--neutral-900); color: var(--brand-white); border-color: var(--neutral-900); }

/* Selected / active node (mini network diagrams) */
.ig-dot { width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--neutral-300); }
.ig-dot--on { background: var(--lime-400); box-shadow: 0 0 0 4px rgba(220,255,80,0.25); }

/* ── Connectors ─────────────────────────────────────── */
/* Use inline SVG <path> with these classes for arrows.    */
.ig-flow      { stroke: var(--lime-300); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ig-flow-head { fill: var(--lime-300); }
.ig-feedback  { stroke: var(--lime-300); stroke-width: 2.5; fill: none; stroke-dasharray: 7 7; stroke-linecap: round; stroke-linejoin: round; }
.ig-internal      { stroke: var(--neutral-300); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ig-internal-head { fill: var(--neutral-300); }
/* Destination-accent connector overrides on detailed flows */
.ig-flow.is-cer    { stroke: var(--cer-500); }
.ig-flow.is-amber  { stroke: var(--amber-400); }
.ig-flow.is-violet { stroke: var(--violet-400); }
.ig-flow.is-coral  { stroke: var(--coral-400); }

/* ── Status (validated / trusted) ───────────────────── */
.ig-check { color: var(--success-base); }