/* === WIDGET: explainer | scope .vr-explainer =============================== */
@layer widgets {
  .vr-explainer__overview { display: grid; grid-template-columns: .85fr 1.4fr; gap: 20px; }
  .vr-explainer__intro p:first-child { margin-top: 0; color: var(--vr-ink); }
  .vr-explainer__diagram { display: grid; grid-template-columns: 1fr 18px 1.2fr 18px 1fr 18px 1fr; gap: 8px; align-content: center; align-items: center; text-align: center; }
  .vr-explainer__node { display: grid; justify-items: center; gap: 14px; font-size: .7rem; }
  .vr-explainer__node .vr-icon { width: 42px; height: 42px; color: var(--vr-brand); stroke-width: 1.4; }
  .vr-explainer__connector { color: var(--vr-brand); font-size: 1.4rem; }
  .vr-explainer__tunnel { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .65rem; background: var(--vr-brand); color: white; padding: 14px 8px; border-radius: 8px; }
  .vr-explainer__diagram > p { grid-column: 1 / -1; font-size: .7rem; margin-top: 20px; }
  .vr-explainer__limits { margin-top: 20px; }
  .vr-explainer__title { display: flex; align-items: center; gap: 12px; }
  .vr-explainer__title > .vr-icon { color: var(--vr-brand); }
  .vr-explainer__title--yes > .vr-icon { color: var(--vr-success); }
  .vr-explainer__reading { margin-top: 14px; font-size: var(--vr-text-xs); color: var(--vr-muted); }
  @media (max-width: 900px) { .vr-explainer__overview { grid-template-columns: 1fr; } .vr-explainer__diagram { padding-block: 32px; } }
  @media (max-width: 480px) { .vr-explainer__diagram { grid-template-columns: 1fr 16px 1fr; gap: 14px; } .vr-explainer__diagram > :nth-child(4) { display: none; } .vr-explainer__node { font-size: .75rem; } }
}
/* === END WIDGET: explainer =============================================== */