/* Diagram plotting progress: a card above the preview; the previous drawing stays visible. */
html:root .preview-progress {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 5;
  width: min(360px, calc(100% - 28px));
  transform: translateX(-50%);
  padding: 10px 14px 12px;
  border: 1px solid var(--scs-line);
  border-radius: var(--scs-radius-m);
  background: var(--scs-surface);
  color: var(--scs-ink-2);
  box-shadow: var(--scs-shadow-pop);
  font-size: var(--scs-text-s);
  pointer-events: none;
}
.preview-progress[hidden] {
  display: none;
}
.preview-progress .preview-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  color: var(--scs-ink);
}
.preview-progress .preview-progress-head span {
  font-weight: 400;
  color: var(--scs-ink-3);
  font-variant-numeric: tabular-nums;
}
.preview-progress .preview-progress-track {
  position: relative;
  height: 6px;
  margin: 8px 0 6px;
  border-radius: 3px;
  background: var(--scs-surface-3);
  overflow: hidden;
}
.preview-progress .preview-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 3px;
  background: var(--scs-accent);
  transition: width 0.2s linear;
}
/* No estimate yet: a moving segment instead of a guessed percentage. */
.preview-progress.indeterminate .preview-progress-bar {
  width: 35%;
  transition: none;
  animation: preview-progress-slide 1.2s ease-in-out infinite;
}
@keyframes preview-progress-slide {
  from {
    left: -35%;
  }
  to {
    left: 100%;
  }
}
.preview-progress .preview-progress-detail {
  color: var(--scs-ink-3);
  font-size: var(--scs-text-xs);
}
.preview-body.preview-busy iframe {
  opacity: 0.55;
  transition: opacity 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .preview-progress.indeterminate .preview-progress-bar {
    left: 0;
    width: 100%;
    opacity: 0.45;
    animation: none;
  }
}

/* 4.11.1: quick lines are shown; "Aktualisieren" plots the optimized routing. */
html:root #refresh-preview.is-attention {
  border-color: var(--scs-accent);
  background: var(--scs-accent-soft);
  color: var(--scs-accent);
  font-weight: 600;
}

/* Optimized drawing shown: only the symbol, so the preview toolbar keeps its width. */
@media (max-width: 1800px) {
  html:root #refresh-preview:not(.is-attention) .refresh-label {
    display: none;
  }
}