/* Scan Logistics brand tokens (Convoy identity). Use these in every tool. */
:root {
  --scan-lime: #86C232;        /* lead bar, SCAN, highlights on dark */
  --scan-lime-ink: #5E9A1C;    /* lime text on white (readable contrast) */
  --scan-charcoal: #1F2528;    /* primary dark, follower bars */
  --scan-charcoal-deep: #14191B;
  --scan-white: #F2F5F0;
  --scan-lean: 15deg;          /* every slanted element leans this much */
  --scan-font-display: "Barlow Condensed", Impact, sans-serif; /* headings only, italic 800 */
  --scan-font-body: Barlow, system-ui, sans-serif;
}

/* Three-bar status: picked up / on the road / delivered.
   <span class="scan-status" data-step="2"><i></i><i></i><i></i></span> */
.scan-status { display: inline-flex; gap: 3px; }
.scan-status i { width: 6px; height: 14px; background: #3a4448; transform: skewX(calc(-1 * var(--scan-lean))); }
.scan-status[data-step="1"] i:nth-child(-n+1),
.scan-status[data-step="2"] i:nth-child(-n+2),
.scan-status[data-step="3"] i { background: var(--scan-lime); }

/* Loading: bars slide in one after another, lime last. */
.scan-loader { display: inline-flex; gap: 4px; }
.scan-loader i { width: 8px; height: 22px; background: var(--scan-charcoal); transform: skewX(calc(-1 * var(--scan-lean))); animation: scan-in 1.2s infinite; }
.scan-loader i:nth-child(2) { animation-delay: .15s; }
.scan-loader i:nth-child(3) { background: var(--scan-lime); animation-delay: .3s; }
@keyframes scan-in { 0%, 100% { opacity: .2; transform: translateX(-4px) skewX(-15deg); } 40% { opacity: 1; transform: translateX(0) skewX(-15deg); } }
@media (prefers-reduced-motion: reduce) { .scan-loader i { animation: none; } }