/* ═══════════════════════════════════════════════════════════
   InvoxAI shared loader — rolling phase ticker (option A).
   Self-contained: token vars have fallbacks, so this file works
   on pages that don't load ui/tokens.css.
   Markup contract (ids are up to the page):

   <div class="ix-loader" hidden>
     <div class="ix-box">
       <p class="ix-title">Analyzing your invoice</p>
       <div class="ix-window"><div class="ix-roll"></div></div>
       <div class="ix-track"><span class="ix-bar"></span></div>
       <p class="ix-count">1 / 6</p>
     </div>
   </div>

   Drive it with ui/loader.js → InvoxLoader.create({...}).
   ═══════════════════════════════════════════════════════════ */

.ix-loader[hidden] { display: none; }
.ix-loader {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244, 245, 246, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ix-box {
  font-family: var(--font-sans, 'Avenir', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px;
  width: min(400px, 86vw);
}

.ix-title {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--foreground, #373c42);
  margin: 0;
}

/* One-line window the phases roll through */
.ix-window {
  position: relative;
  width: 100%; height: 24px;
  margin-top: 18px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.ix-roll {
  position: absolute; left: 0; right: 0;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.ix-phase {
  height: 24px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 14px;
  color: var(--muted-foreground, #6b7075);
}
.ix-spin {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 2px solid var(--primary-soft, #fdefd9);
  border-top-color: var(--primary, #ef8b00);
  animation: ix-spin .8s linear infinite;
}
@keyframes ix-spin { to { transform: rotate(360deg); } }

/* Completed phases: spinner becomes a forest check */
.ix-phase.done { color: var(--faint-foreground, #908f8f); }
.ix-phase.done .ix-spin {
  border-color: transparent;
  animation: none;
}
.ix-phase.done .ix-spin::after {
  content: "✓";
  display: block;
  color: var(--pass, #315837);
  font-size: 13px; font-weight: 700; line-height: 13px;
}

/* Progress bar */
.ix-track {
  margin-top: 22px;
  width: 100%; height: 4px;
  border-radius: 999px;
  background: var(--surface-soft, #ececee);
  overflow: hidden;
}
.ix-bar {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--primary, #ef8b00);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

/* Mono step counter */
.ix-count {
  margin: 12px 0 0;
  font-family: var(--font-mono, 'Avenir', 'Avenir Next', -apple-system, sans-serif);
  font-size: 12px;
  color: var(--faint-foreground, #908f8f);
}

@media (prefers-reduced-motion: reduce) {
  .ix-spin { animation: none; }
  .ix-roll, .ix-bar { transition: none; }
}