/* ── Scan-progress strip: shared INNER components ─────────────────────
   Single source for the strip's contents (head/radar/label/step/pct/
   track/fill/pips), the finishing/error/warn/info/multiline variants,
   keyframes and the narrow-width layout. Consumed by BOTH surfaces:
   - the public scan pages via the /css/app.css concat (combined-css.ts
     SOURCE_FILES - bump APP_CSS_VERSION when editing this file);
   - the /account dashboard, where index.ts inlines this file into
     account.ejs (the dashboard loads no other stylesheet by design).
   The CONTAINER rule (.scan-progress-strip base) is deliberately NOT
   here - each surface styles its own box: the public pages collapse it
   until .on (styles.css), the dashboard renders an always-visible card
   driven by Alpine x-show (account.ejs). This file was previously a
   hand-scoped copy inside account.ejs that silently missed the newer
   error/warn/info variants. */
@keyframes spsShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(220%);
  }
}
@keyframes spsRadar {
  0% {
    box-shadow:
      0 0 0 0 rgba(35, 86, 178, 0.55),
      0 0 0 0 rgba(35, 86, 178, 0);
  }
  70% {
    box-shadow:
      0 0 0 8px rgba(35, 86, 178, 0),
      0 0 0 16px rgba(35, 86, 178, 0);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(35, 86, 178, 0),
      0 0 0 0 rgba(35, 86, 178, 0);
  }
}
@keyframes spsStepFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.main-scanning-container {
  margin: 0 36px 20px 36px;
  border: 1px solid #dde6f3;
  border-radius: 12px;
  padding: 0px;

  background: linear-gradient(180deg, #f9fbfe 0%, #f3f7fc 100%);
}
.sps-head {
  margin-bottom: 12px;
}
.sps-radar {
  display: inline-block;
  vertical-align: middle;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2356b2;
  margin-right: 8px;
  animation: spsRadar 1.6s ease-out infinite;
}
.sps-label {
  font-size: 11px;
  font-weight: 700;
  color: #5b6b85;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-right: 6px;
}
.sps-step {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #1a1a1a;
  animation: spsStepFade 0.35s ease both;
}
.sps-step strong {
  color: #2356b2;
  font-weight: 700;
}
.sps-pct {
  font-size: 12px;
  font-weight: 800;
  color: #2356b2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  margin-left: 6px;
  transition: color 0.5s ease;
}
.sps-track {
  position: relative;
  height: 6px;
  background: #e4ecf7;
  border-radius: 999px;
  overflow: hidden;
}
.sps-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #4d7ec9 0%, #2356b2 60%, #1e3f8a 100%);
  border-radius: 999px;
  transition:
    width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.6s ease;
}
.scan-progress-strip.finishing .sps-fill {
  background: linear-gradient(90deg, #34c66a 0%, #1f9e4f 100%);
}
.scan-progress-strip.finishing .sps-pct {
  color: #1f9e4f;
}
.scan-progress-strip.finishing .sps-step strong {
  color: #1f9e4f;
}
.sps-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: spsShimmer 1.4s linear infinite;
}
.sps-pips {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}
.sps-pip {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: #d8e1f0;
  transition: background 0.4s ease;
}
.sps-pip.done {
  background: #2356b2;
}
.sps-pip.active {
  animation: spsPipPulse 1.5s ease-in-out infinite;
}
.scan-progress-strip.finishing .sps-pip.done {
  background: #1f9e4f;
}
@keyframes spsPipPulse {
  0%,
  100% {
    background: #d8e1f0;
  }
  50% {
    background: #a8bde0;
  }
}
/* Error state */
.scan-progress-strip.sps-error {
  background: linear-gradient(180deg, #fef8f8 0%, #fef2f2 100%);
  border-color: #fecaca;
}
.scan-progress-strip.sps-error .sps-label {
  color: #991b1b;
}
.scan-progress-strip.sps-error .sps-step {
  color: #6b7280;
}
.sps-radar-err {
  background: #dc2626;
  animation: spsRadar 1.6s ease-out infinite;
}
.sps-fill-err {
  background: linear-gradient(90deg, #f87171 0%, #dc2626 100%);
}
/* Warning state */
.scan-progress-strip.sps-warn {
  background: linear-gradient(180deg, #fffdf7 0%, #fffbeb 100%);
  border-color: #fde68a;
}
.scan-progress-strip.sps-warn .sps-label {
  color: #92400e;
}
.scan-progress-strip.sps-warn .sps-step {
  color: #6b7280;
}
.sps-radar-warn {
  background: #d97706;
  animation: spsRadar 1.6s ease-out infinite;
}

/* Info state (not-scanned banner) */
.scan-progress-strip.sps-info {
  background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
  border-color: #bfdbfe;
}
.scan-progress-strip.sps-info .sps-label {
  color: #1e40af;
}
.scan-progress-strip.sps-info .sps-step {
  color: #1e40af;
}
.sps-radar-info {
  background: #3b82f6;
  animation: spsRadar 1.6s ease-out infinite;
}
.sps-fill-warn {
  background: linear-gradient(90deg, #fbbf24 0%, #d97706 100%);
}

/* Multi-line variant - used by the "scan exhausted" state where the message
   needs to wrap across multiple lines instead of being truncated. */
.scan-progress-strip.sps-multiline .sps-head {
  margin-bottom: 6px;
}
.sps-multiline-msg {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0;
  white-space: normal;
  word-wrap: break-word;
}

@media (max-width: 540px) {
  /* Two-row layout at narrow widths:
       row 1:  [radar] LABEL
       row 2:  step text...  42%
     Flexbox has no explicit line-break, so we insert a 100%-basis
     zero-height pseudo on .sps-head at order:5 - it sits between the
     label (default order 0) and the step (order 10), consumes the rest
     of row 1, and forces step + pct down together onto row 2 where
     they sit side by side via flex's natural inline-row layout. */
  .sps-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 0;
  }
  .sps-head::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 5;
  }
  .sps-step {
    order: 10;
    margin: 4px 0 0 0;
    font-size: 12px;
  }
  .sps-pct {
    order: 11;
    margin: 4px 0 0 0;
  }
  .sps-label {
    font-size: 10px;
  }
  .sps-multiline-msg {
    font-size: 12px;
  }
}