/**
 * Anchor Nav — Digital Suite
 *
 * v1.0.5
 *
 * A sticky in-page section nav that collapses into a horizontal rail below a
 * breakpoint. Extracted from the LXP Features page custom code
 * (`responsiveAnchorNavbar()`), generalised so any page can author one in the
 * Designer without touching JavaScript.
 *
 * What it owns
 * - scroll-spy: marks the link whose section is under the spy line
 * - rail sync: keeps that link scrolled into view once the nav is a rail
 * - scroll offset: writes scroll-margin-top on every target so a jumped-to
 *   heading is not swallowed by the sticky sub-header
 * - stickiness, when nothing above the nav is already sticky
 * - its own CSS: structure always, presentation unless the page opts out
 * - one Splide instance per nav, mounted only below the breakpoint
 *
 * Every DOM lookup is a data attribute — no class in this file is used to find
 * anything. The splide__* classes Splide needs are added at runtime and
 * stripped again after mount, so the global splide.min.css can never reach in.
 * See vault: Ops/Gotchas — "The site's global Splide CSS hijacks any carousel".
 *
 * Requires the site-wide Splide 4.1.4 (Site Settings -> Footer). Waits for it.
 * No GSAP, no ScrollTrigger — the spy is an IntersectionObserver.
 *
 * Configure with data-anchor-nav-config='{...}' on the nav (preferred — keeps the
 * page footer a bare <script src>) or from page custom code via window.HaufeAnchorNav.
 * Source: ~/Development/haufe/ds-anchor-nav · Vault: Dev/Bundle-Deploys
 */
(function () {
  'use strict';

  var NS = 'HaufeAnchorNav';
  var VERSION = '1.0.5';
  var CSS_ID = 'anchor-nav-css';

  var SEL = {
    root: '[data-anchor-nav]',
    track: '[data-anchor-nav-track]',
    list: '[data-anchor-nav-list]',
    link: '[data-anchor-nav-link]'
  };

  /* Module baseline. Every key is overridable from page custom code, globally
     or per instance name — see readConfig(). */
  var BASE = {
    breakpoint: 767,        // max-width px at which the nav becomes a rail. One number for the
                            // slider AND the spy, so they cannot disagree for a pixel
    styles: 'layout',       // 'layout' (default) structure only — the Designer owns every visual.
                            //          The safe default on a site that already has a design
                            // 'full'   also ship the presentation, themeable through the
                            //          --anchor-nav-* custom properties. For a page with no
                            //          styling of its own
                            // 'none'   no CSS at all; the page owns even the rail layout
    sticky: 'auto',         // 'auto'  correct the `top` of whatever is already sticky (the nav
                            //         or an ancestor) and never introduce stickiness the design
                            //         did not ask for
                            // true    stick stickyTarget (or the nav) and set its top
                            // false   never touch position or top
                            // The top is the measured chrome offset — the same number the
                            // sections get as scroll-margin-top, so the two cannot drift apart
    stickyTarget: '',       // selector for the element to stick instead of the nav root.
                            // Resolved as closest() first, so a shared class like `.c-sticky`
                            // picks this nav's wrapper and not the first one on the page
    activeClass: 'is-current', // class on the current link. Not `is-active` — Splide stamps that
                            // on the current slide itself. The module also sets aria-current,
                            // which is what its own CSS keys on
    offset: 0,              // px of fixed chrome above a section, written as scroll-margin-top
    offsetFrom: '',         // selector measured at runtime instead. Re-measured on resize.
                            // Wins over `offset`
    offsetExtra: 0,         // px added on top of the measured value (breathing room)
    railOffsetsSelf: 'auto',// once the nav is a rail it usually sits above the content and sticks
                            // there, so its own height is chrome too. 'auto' adds it while the
                            // rail is mounted inside a sticky box; true/false force it
    spyLine: 0.35,          // viewport fraction a section top must cross to become current
    smooth: true,           // own the click and scroll smoothly. Respects prefers-reduced-motion
    setHash: true,          // reflect the current section in the URL on click, no history entry
    rail: true,             // mount Splide below the breakpoint at all
    watchDOM: false,        // re-read links when the list is re-rendered (CMS)
    splide: {               // any Splide 4 option, merged over this baseline
      type: 'slide',
      autoWidth: true,
      arrows: false,
      pagination: false,
      snap: true,
      padding: '0.2rem',
      gap: 0,               // spacing is one CSS custom property (--anchor-nav-gap), not two
      drag: true
    }
  };

  /* ------------------------------------------------------------------- CSS */

  /* Themeable defaults. A page restyles the component by redeclaring any of
     these on [data-anchor-nav] — one Designer block, no JS, no !important. */
  var CSS_VARS =
    '[data-anchor-nav]{' +
      '--anchor-nav-gap:12px;' +
      '--anchor-nav-padding:12px;' +
      '--anchor-nav-radius:12px;' +
      '--anchor-nav-bg:rgba(255,255,255,.06);' +
      '--anchor-nav-link-padding:8px 12px;' +
      '--anchor-nav-link-radius:8px;' +
      '--anchor-nav-link-color:inherit;' +
      '--anchor-nav-link-bg:transparent;' +
      '--anchor-nav-link-color-hover:var(--anchor-nav-link-color);' +
      '--anchor-nav-link-bg-hover:rgba(255,255,255,.08);' +
      '--anchor-nav-link-color-current:var(--anchor-nav-link-color);' +
      '--anchor-nav-link-bg-current:rgba(255,255,255,.16);' +
      '--anchor-nav-transition:160ms ease;' +
    '}';

  /* Structure — the layout Splide cannot work without, scoped to our own
     attributes so it never depends on, and is never reached by, the global
     splide.min.css. */
  var CSS_LAYOUT = [
    '[data-anchor-nav]{position:relative}',
    '[data-anchor-nav] [data-anchor-nav-track]{position:relative;overflow:hidden}',
    '[data-anchor-nav] [data-anchor-nav-list]{display:flex;flex-direction:column;' +
      'gap:var(--anchor-nav-gap);margin:0;padding:0;list-style:none}',
    /* Splide measures slide positions from the rendered box, so the CSS gap is
       part of the maths and Splide's own `gap` option stays at 0. */
    '[data-anchor-nav].is-rail [data-anchor-nav-list]{flex-direction:row;flex-wrap:nowrap;' +
      'margin:0 !important;padding:0 !important;backface-visibility:hidden}',
    /* A rail item that wraps is broken, not merely unstyled, so both of these are
       structure and ship even at styles:'layout'.
       The `br` rule matters more than it looks: a label like "Rollen &<br>Berechtigungen"
       is authored for the NARROW VERTICAL sidebar, where the break is correct. In the
       rail it makes one chip two lines tall and drags every sibling's height with it.
       The break is suppressed only while the rail is mounted, so the column keeps it. */
    '[data-anchor-nav].is-rail [data-anchor-nav-link]{flex:0 0 auto;white-space:nowrap}',
    '[data-anchor-nav].is-rail [data-anchor-nav-link] br{display:none}'
  ].join('');

  /* Presentation — everything a client would otherwise have to rebuild in the
     Designer before the component looks like anything. Keyed on aria-current,
     not on activeClass, so a renamed active class cannot break the styling. */
  /* Every skin selector sits inside :where(), so the whole block has ZERO
     specificity: a single Designer class beats it without !important and
     without anyone having to know the module's selectors. A component that
     ships styling has to lose every argument with the site's own design.

     The current-link rule keys on data-anchor-nav-current, not aria-current:
     Splide strips aria-current off its slides on every move, so an
     aria-keyed rule dies the moment the rail mounts. */
  var CSS_SKIN = [
    ':where([data-anchor-nav].is-styled [data-anchor-nav-track]){background:var(--anchor-nav-bg);' +
      'border-radius:var(--anchor-nav-radius);padding:var(--anchor-nav-padding)}',
    ':where([data-anchor-nav].is-styled [data-anchor-nav-link]){display:flex;align-items:center;' +
      'padding:var(--anchor-nav-link-padding);border-radius:var(--anchor-nav-link-radius);' +
      'color:var(--anchor-nav-link-color);background:var(--anchor-nav-link-bg);' +
      'text-decoration:none;cursor:pointer;' +
      'transition:background var(--anchor-nav-transition),color var(--anchor-nav-transition)}',
    ':where([data-anchor-nav].is-styled [data-anchor-nav-link]:hover){' +
      'background:var(--anchor-nav-link-bg-hover);color:var(--anchor-nav-link-color-hover)}',
    ':where([data-anchor-nav].is-styled [data-anchor-nav-link][data-anchor-nav-current]){' +
      'background:var(--anchor-nav-link-bg-current);color:var(--anchor-nav-link-color-current)}',
    ':where([data-anchor-nav].is-styled [data-anchor-nav-link]:focus-visible){' +
      'outline:2px solid currentColor;outline-offset:2px}',
    /* The rail is swipeable; say so to the pointer and keep the text unselectable
       mid-drag, which is the one thing that makes a hand-built rail feel broken. */
    ':where([data-anchor-nav].is-styled.is-rail [data-anchor-nav-link]){' +
      '-webkit-user-select:none;user-select:none}'
  ].join('');

  /* ---------------------------------------------------------------- utils */

  function toArray(list) {
    return Array.prototype.slice.call(list || []);
  }

  function merge() {
    var out = {};
    toArray(arguments).forEach(function (src) {
      if (!src) return;
      Object.keys(src).forEach(function (key) {
        var val = src[key];
        if (val && typeof val === 'object' && !Array.isArray(val)) {
          out[key] = merge(out[key], val);
        } else {
          out[key] = val;
        }
      });
    });
    return out;
  }

  /* One stylesheet for the page, injected as early as the first instance that
     wants it. `layout` and `full` share it — the skin is gated by a class on
     the root, so two navs on one page can disagree about styling. */
  function injectCSS(mode) {
    if (mode === 'none') return;
    var style = document.getElementById(CSS_ID);
    if (!style) {
      style = document.createElement('style');
      style.id = CSS_ID;
      style.textContent = CSS_VARS + CSS_LAYOUT + CSS_SKIN;
      /* First child of <head>: the page's own stylesheets load after it and win
         without needing specificity tricks. */
      document.head.insertBefore(style, document.head.firstChild);
    }
  }

  var RESERVED = ['version', 'instances', 'init'];   // the API we hang off the same object

  function userConfig() {
    var user = window[NS];
    if (!user || typeof user !== 'object') return null;
    var out = {};
    Object.keys(user).forEach(function (key) {
      if (RESERVED.indexOf(key) === -1) out[key] = user[key];
    });
    return out;
  }

  /* Config on the element itself. This is the preferred route on Webflow: it
     keeps the page's footer a bare `<script src>`, and a footer with no inline
     body is the only one `set_page_freeform_code` will accept — an inline
     <script> locks the page to 406 forever. See vault Dev/Bundle-Deploys.

     Two forms, because each one is unavailable somewhere:
       data-anchor-nav-config='{"offsetFrom":".x"}'   one attribute, any depth
       data-anchor-nav-offset-from=".x"               one attribute per key
     The JSON form cannot be written through the Webflow Data API — a value
     containing braces and quotes fails the write with a 500 — so a headless
     deploy uses the per-key form. Hand-authored markup can use either. */

  var KEYS = Object.keys(BASE);

  function kebab(key) {
    return key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); });
  }

  /* "24" -> 24, "true" -> true, "{...}" -> object. Anything else stays a string,
     which is what selectors and mode words like 'auto' need. */
  function coerce(raw) {
    if (raw === 'true') return true;
    if (raw === 'false') return false;
    if (raw !== '' && !isNaN(Number(raw))) return Number(raw);
    var first = raw.charAt(0);
    if (first === '{' || first === '[') {
      try { return JSON.parse(raw); } catch (err) { return raw; }
    }
    return raw;
  }

  function attrConfig(root) {
    var out = null;

    var raw = root.getAttribute('data-anchor-nav-config');
    if (raw) {
      try {
        out = JSON.parse(raw);
      } catch (err) {
        console.error('[anchor-nav] data-anchor-nav-config is not valid JSON:', raw);
      }
    }

    /* Only real config keys are read, so the structural attributes
       (-track, -list, -link, -bound) can never be mistaken for settings. */
    KEYS.forEach(function (key) {
      var attr = 'data-anchor-nav-' + kebab(key);
      if (!root.hasAttribute(attr)) return;
      out = out || {};
      out[key] = coerce(root.getAttribute(attr));
    });

    return out;
  }

  /* window.HaufeAnchorNav may be
       { offset: 130 }                        -> applies to every nav
       { default: {...}, features: {...} }    -> keyed by data-anchor-nav="features"
     The keyed form is only recognised when a `default` key is present, so a
     plain config object cannot be mistaken for a keyed one.
     Precedence, lowest first: BASE -> global -> keyed by name -> the element. */
  function readConfig(name, root) {
    var user = userConfig();
    var global = null;
    var keyed = null;
    if (user) {
      if (Object.prototype.hasOwnProperty.call(user, 'default')) {
        global = user['default'];
        keyed = name ? user[name] : null;
      } else {
        global = user;
      }
    }
    return merge(BASE, global, keyed, attrConfig(root));
  }

  /* The nearest already-sticky element at or above `node`, within `levels`. */
  function stickyAncestor(node, levels) {
    for (var i = 0; node && i < levels; i++) {
      if (getComputedStyle(node).position === 'sticky') return node;
      node = node.parentElement;
    }
    return null;
  }

  function whenSplide(done) {
    if (window.Splide) return done();
    var tries = 0;
    var timer = setInterval(function () {
      if (window.Splide) {
        clearInterval(timer);
        done();
      } else if (++tries > 100) {       // 10s — the site footer is broken, give up quietly
        clearInterval(timer);
      }
    }, 100);
  }

  /* -------------------------------------------------------------- instance */

  function AnchorNav(root) {
    this.root = root;
    this.name = root.getAttribute('data-anchor-nav') || '';
    this.cfg = readConfig(this.name, root);
    this.track = root.querySelector(SEL.track) || root;
    this.list = root.querySelector(SEL.list) || this.track;
    this.links = [];
    this.sections = [];
    this.activeIndex = -1;
    this.splide = null;
    this.mounted = false;
    this.observer = null;
    this.visible = [];
    this.offsetPx = 0;
    this.mq = window.matchMedia('(max-width: ' + this.cfg.breakpoint + 'px)');
    this.reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

    this.readLinks();
    if (!this.links.length) return;

    injectCSS(this.cfg.styles);
    if (this.cfg.styles === 'full') root.classList.add('is-styled');

    this.applyOffset();
    this.bindClicks();
    this.startSpy();
    this.bindBreakpoint();
    this.bindResize();
    if (this.cfg.watchDOM) this.watchDOM();
  }

  /* Links are the contract; sections are derived from their hrefs. Nothing has
     to be marked up on the section itself. A link whose target is missing is
     dropped rather than left to break the index maths. */
  AnchorNav.prototype.readLinks = function () {
    var links = [];
    var sections = [];
    toArray(this.list.querySelectorAll(SEL.link)).forEach(function (link) {
      var href = link.getAttribute('href') || '';
      var hash = href.indexOf('#') === -1 ? '' : href.slice(href.indexOf('#') + 1);
      if (!hash) return;
      var target = document.getElementById(hash);
      if (!target) return;
      links.push(link);
      sections.push(target);
    });
    this.links = links;
    this.sections = sections;
    this.visible = links.map(function () { return false; });
  };

  /* --------------------------------------------------------------- offsets */

  AnchorNav.prototype.railAddsOwnHeight = function () {
    if (!this.mounted) return false;
    var mode = this.cfg.railOffsetsSelf;
    if (mode !== 'auto') return !!mode;
    return !!stickyAncestor(this.root, 4);
  };

  /* scroll-margin-top, not a scroll-position fudge: it is honoured by the native
     hash jump, by scrollIntoView and by the browser's own scroll restore. */
  AnchorNav.prototype.applyOffset = function () {
    var px = this.cfg.offset;
    if (this.cfg.offsetFrom) {
      var chrome = document.querySelector(this.cfg.offsetFrom);
      if (chrome) px = Math.round(chrome.getBoundingClientRect().height) + this.cfg.offsetExtra;
    }
    var railHeight = this.railAddsOwnHeight()
      ? Math.round(this.root.getBoundingClientRect().height) : 0;

    this.offsetPx = (px || 0) + railHeight;
    var value = this.offsetPx + 'px';
    this.sections.forEach(function (section) { section.style.scrollMarginTop = value; });

    /* The nav sticks at the chrome offset, not the rail-inclusive one — it IS
       the rail. Same measurement, one source, so the two cannot drift apart. */
    this.applySticky(px || 0);
  };

  AnchorNav.prototype.applySticky = function (top) {
    var mode = this.cfg.sticky;
    if (mode === false) return;

    if (!this.stickyEl) {
      if (mode === 'auto') {
        /* Adopt what the Designer already built rather than adding a second
           sticky box. The `top` is the part worth owning: a hand-set one is a
           guess at the header height, and it is wrong on this very page. */
        this.stickyEl = stickyAncestor(this.root, 4);
        if (!this.stickyEl) return;
      } else {
        var sel = this.cfg.stickyTarget;
        this.stickyEl = sel ? (this.root.closest(sel) || document.querySelector(sel)) : this.root;
        if (!this.stickyEl) return;
        this.stickyEl.style.position = 'sticky';
        this.stickyOwned = true;       // we set position, so destroy() must unset it
      }
    }
    this.stickyEl.style.top = top + 'px';
  };

  /* ------------------------------------------------------------------- spy */

  /* A zero-height band at spyLine: contiguous sections mean exactly one of them
     can cross it, so there is no "closest wins" arbitration to get wrong. When
     nothing crosses it (above the first section, below the last) the previous
     link stays lit — Webflow's native scroll-spy goes blank there instead. */
  AnchorNav.prototype.startSpy = function () {
    var self = this;
    var top = Math.round(this.cfg.spyLine * 100);
    this.observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        var index = self.sections.indexOf(entry.target);
        if (index !== -1) self.visible[index] = entry.isIntersecting;
      });
      var next = self.visible.indexOf(true);
      if (next !== -1) self.setActive(next);
    }, { rootMargin: '-' + top + '% 0px -' + (100 - top) + '% 0px', threshold: 0 });

    this.sections.forEach(function (section) { self.observer.observe(section); });
    this.primeActive();
  };

  /* Land on the right link on load — deep link first, otherwise whatever is
     already above the spy line. */
  AnchorNav.prototype.primeActive = function () {
    var hash = (location.hash || '').slice(1);
    if (hash) {
      var deep = this.sections.map(function (s) { return s.id; }).indexOf(hash);
      if (deep !== -1) return this.setActive(deep);
    }
    var line = window.innerHeight * this.cfg.spyLine;
    var index = -1;
    this.sections.forEach(function (section, i) {
      if (section.getBoundingClientRect().top <= line) index = i;
    });
    if (index !== -1) this.setActive(index);
  };

  AnchorNav.prototype.setActive = function (index) {
    if (index === this.activeIndex || index < 0 || index >= this.links.length) return;
    var cls = this.cfg.activeClass;
    if (this.activeIndex !== -1) {
      this.links[this.activeIndex].classList.remove(cls);
      this.links[this.activeIndex].removeAttribute('data-anchor-nav-current');
      this.links[this.activeIndex].removeAttribute('aria-current');
    }
    this.activeIndex = index;
    this.links[index].classList.add(cls);
    this.links[index].setAttribute('data-anchor-nav-current', 'true');
    this.links[index].setAttribute('aria-current', 'true');
    if (this.mounted && this.splide) this.splide.go(index);
  };

  /* Splide's a11y pass removes aria-current from every slide each time it moves,
     so the one link that should carry it has to be put back afterwards. The
     styling never depended on it, but a screen reader does. */
  AnchorNav.prototype.reassertCurrent = function () {
    if (this.activeIndex === -1) return;
    var link = this.links[this.activeIndex];
    if (link && link.getAttribute('aria-current') !== 'true') {
      link.setAttribute('aria-current', 'true');
    }
  };

  /* ---------------------------------------------------------------- clicks */

  /* Capture phase on the document, because Webflow's own in-page-link handler is
     delegated to the document and would otherwise run its slower tween on top of
     ours. stopPropagation is what keeps it out. */
  AnchorNav.prototype.bindClicks = function () {
    if (!this.cfg.smooth) return;
    var self = this;
    this.onClick = function (event) {
      if (event.defaultPrevented || event.button > 0 || event.metaKey || event.ctrlKey) return;
      var link = event.target.closest ? event.target.closest(SEL.link) : null;
      if (!link || !self.root.contains(link)) return;
      var index = self.links.indexOf(link);
      if (index === -1) return;
      event.preventDefault();
      event.stopPropagation();
      self.sections[index].scrollIntoView({
        behavior: self.reduceMotion.matches ? 'auto' : 'smooth',
        block: 'start'
      });
      self.setActive(index);
      if (self.cfg.setHash) history.replaceState(null, '', '#' + self.sections[index].id);
    };
    document.addEventListener('click', this.onClick, true);
  };

  /* ------------------------------------------------------------------ rail */

  AnchorNav.prototype.bindBreakpoint = function () {
    if (!this.cfg.rail) return;
    var self = this;
    this.onMQ = function () { self.mq.matches ? self.mount() : self.unmount(); };
    if (this.mq.addEventListener) this.mq.addEventListener('change', this.onMQ);
    else this.mq.addListener(this.onMQ);                    // Safari < 14
    this.onMQ();
  };

  AnchorNav.prototype.bindResize = function () {
    var self = this;
    var timer = null;
    this.onResize = function () {
      clearTimeout(timer);
      timer = setTimeout(function () { self.applyOffset(); }, 150);
    };
    window.addEventListener('resize', this.onResize);
  };

  /* Splide resolves the track, list and slides by its own hardcoded class names,
     but only inside Elements.setup(). Afterwards it holds element references —
     so the classes go on for the mount and come straight off, and the global
     splide.min.css never gets a selector to bite on. */
  AnchorNav.prototype.markSplide = function (on) {
    var method = on ? 'add' : 'remove';
    this.root.classList[method]('splide');
    this.track.classList[method]('splide__track');
    this.list.classList[method]('splide__list');
    this.links.forEach(function (link) { link.classList[method]('splide__slide'); });
  };

  AnchorNav.prototype.mount = function () {
    if (this.mounted || !window.Splide) return;
    this.root.classList.add('is-rail');
    this.markSplide(true);
    this.splide = new window.Splide(this.root, this.cfg.splide);
    var self = this;
    this.splide.on('moved visible', function () { self.reassertCurrent(); });
    this.splide.mount();
    this.markSplide(false);
    this.mounted = true;
    this.applyOffset();
    if (this.activeIndex !== -1) this.splide.go(this.activeIndex);
  };

  AnchorNav.prototype.unmount = function () {
    if (!this.mounted) return;
    this.markSplide(true);                  // destroy() walks the same elements
    this.splide.destroy(true);
    this.markSplide(false);
    this.list.style.transform = '';
    this.splide = null;
    this.mounted = false;
    this.root.classList.remove('is-rail');
    this.applyOffset();
  };

  /* Splide re-runs Elements.setup() on refresh, so the classes have to be back on
     for the duration. Public because a CMS re-render is the caller's event to
     notice, not ours. */
  AnchorNav.prototype.refresh = function () {
    this.readLinks();
    this.applyOffset();
    if (!this.mounted) return;
    this.markSplide(true);
    this.splide.refresh();
    this.markSplide(false);
  };

  AnchorNav.prototype.watchDOM = function () {
    var self = this;
    var timer = null;
    this.mo = new MutationObserver(function () {
      clearTimeout(timer);
      timer = setTimeout(function () { self.refresh(); }, 100);
    });
    this.mo.observe(this.list, { childList: true });
  };

  AnchorNav.prototype.destroy = function () {
    this.unmount();
    if (this.observer) this.observer.disconnect();
    if (this.mo) this.mo.disconnect();
    if (this.onClick) document.removeEventListener('click', this.onClick, true);
    if (this.onResize) window.removeEventListener('resize', this.onResize);
    if (this.onMQ) {
      if (this.mq.removeEventListener) this.mq.removeEventListener('change', this.onMQ);
      else this.mq.removeListener(this.onMQ);
    }
    if (this.stickyEl) {
      if (this.stickyOwned) this.stickyEl.style.position = '';
      this.stickyEl.style.top = '';
    }
    this.root.classList.remove('is-styled');
    this.root.removeAttribute('data-anchor-nav-bound');
    this.sections.forEach(function (s) { s.style.scrollMarginTop = ''; });
  };

  /* ------------------------------------------------------------------ boot */

  var instances = [];

  function init() {
    toArray(document.querySelectorAll(SEL.root)).forEach(function (root) {
      if (root.hasAttribute('data-anchor-nav-bound')) return;   // idempotent: a stale loader
      root.setAttribute('data-anchor-nav-bound', '');           // cannot double-bind
      instances.push(new AnchorNav(root));
    });
  }

  function boot() {
    whenSplide(init);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', boot);
  } else {
    boot();
  }

  /* Keep whatever config the page set; hang the API off the same object. */
  window[NS] = window[NS] || {};
  window[NS].version = VERSION;
  window[NS].instances = instances;
  window[NS].init = init;
})();