/* Shared presentation, 22.10.2026: existing Positions bar + Sem-core stages.
   Compatibility selectors preserve each tool's DOM IDs and status handlers.
   This file never starts, polls or estimates a task. */

.serp-progress-wrap,
.mt-progress-card,
.mtb-progress-wrap,
#aimProgressCard,
.audit-progress-block {
  background: #fff;
  border: 0;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: none;
}

.serp-progress-label,
.mt-progress-step,
.mtb-status-text,
#aimProgressCard .aim-setup-wait,
.audit-progress-step {
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
}
.serp-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.serp-progress-track,
.serp-progress-bar-wrap,
.mt-progress-bar-wrap,
.mtb-bar-track,
.aim-progress,
.audit-progress-bar-wrap {
  background: #F3F4F6;
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}
.serp-progress-track .serp-progress-bar,
.serp-progress-bar-wrap .serp-progress-bar,
.mt-progress-bar,
.mtb-bar-fill,
.aim-progress__bar,
.audit-progress-bar {
  height: 100%;
  background: #4EA0D2;
  border-radius: 4px;
  margin: 0;
  transition: width .3s ease;
}

.serp-progress-note,
#aimProgressCard .aim-hint,
.audit-progress-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #9CA3AF;
}
.mt-progress-card { display: flex; flex-direction: column; max-width: 680px; }
.mt-progress-step { order: -1; margin: 0 0 8px; }
.mtb-progress-wrap { display: flex; flex-direction: column; gap: 8px; }
.mtb-status-row { order: -1; }
.task-progress-waiting::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  margin-right: 8px;
  vertical-align: -1px;
  border: 2px solid #E5E7EB;
  border-top-color: #4EA0D2;
  border-radius: 50%;
  animation: task-progress-spin 1s linear infinite;
}
.aim-progress { margin: 8px 0 0; }
.audit-progress-step { margin: 0 0 8px; min-height: 20px; }
.audit-progress-title { font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 8px; }

/* The same track for native import/export/frequency progress. */
.task-progress-native {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #F3F4F6;
  accent-color: #4EA0D2;
  appearance: none;
}
.task-progress-native::-webkit-progress-bar { background: #F3F4F6; border-radius: 4px; }
.task-progress-native::-webkit-progress-value { background: #4EA0D2; border-radius: 4px; }
.task-progress-native::-moz-progress-bar { background: #4EA0D2; border-radius: 4px; }
.task-progress-native[hidden],
.task-progress-native:not([value]) { display: none; }
.serp-frequency-status {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #fff;
  color: #374151;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
}
.serp-frequency-status .task-progress-native { max-width: 400px; margin-top: 8px; }

/* One stage style for Sem-core and both Direct progress views. */
.sc-progress-card,
.cr-progress-card { background: #fff; border-radius: 12px; padding: 28px; }
.cr-progress-card { margin-bottom: 16px; max-width: 720px; }
.sc-progress-title,
.cr-prog-title { font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 16px; }
.sc-stages,
.cr-stages { display: flex; flex-direction: column; gap: 12px; }
.sc-stage,
.cr-stage { display: flex; align-items: center; gap: 12px; }
.sc-stage__icon,
.cr-stage__ic {
  width: 28px; height: 28px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; background: #F3F4F6;
}
.sc-stage--done .sc-stage__icon,
.cr-stage--done .cr-stage__ic,
.cr-stage[data-state="done"] .cr-stage__ic { background: #D1FAE5; }
.sc-stage--active .sc-stage__icon,
.cr-stage--active .cr-stage__ic,
.cr-stage[data-state="active"] .cr-stage__ic { background: #EFF6FF; }
.sc-stage--error .sc-stage__icon,
.cr-stage--error .cr-stage__ic,
.cr-stage[data-state="failed"] .cr-stage__ic { background: #FEE2E2; }
.sc-stage__body { flex: 1; min-width: 0; }
.sc-stage__name,
.cr-stage__nm { font-size: 13px; font-weight: 600; color: #111827; }
.sc-stage--pending .sc-stage__name,
.cr-stage--pending .cr-stage__nm,
.cr-stage[data-state="waiting"] .cr-stage__nm { color: #6B7280; }
.sc-stage__msg,
.cr-stage__ms { font-size: 12px; line-height: 1.5; color: #6B7280; margin-top: 2px; overflow-wrap: anywhere; }
.sc-spinner,
.cr-spin {
  width: 14px; height: 14px; border: 2px solid #E5E7EB; border-top-color: #4EA0D2;
  border-radius: 50%; animation: task-progress-spin .7s linear infinite;
}
.cr-dot { width: 8px; height: 8px; border-radius: 50%; background: #D1D5DB; }
.task-stage-time { font-size: 12px; font-weight: 400; color: #6B7280; margin-left: 6px; }
.task-stage-time--done { color: #047857; }
.task-stage-time--active { color: #4EA0D2; }
.cr-stage[data-launch-step] .task-stage-done,
.cr-stage[data-launch-step] .cr-spin { display: none; }
.cr-stage[data-launch-step][data-state="done"] .task-stage-done,
.cr-stage[data-launch-step][data-state="active"] .cr-spin { display: block; }
.cr-stage[data-launch-step][data-state="done"] .cr-dot,
.cr-stage[data-launch-step][data-state="active"] .cr-dot { display: none; }
@keyframes task-progress-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .task-progress-waiting::before { animation: none; }
  .sc-spinner, .cr-spin { animation-duration: 2s; }
  .serp-progress-bar, .mt-progress-bar, .mtb-bar-fill,
  .aim-progress__bar, .audit-progress-bar { transition: none; }
}