/* publish-progress.css — shared Wix-style staged publish checklist + live link.
 *
 * Used by PTT (ptt.html) and hyDev (hydev.html). The markup is generated by
 * /js/shared/publish-progress.js (window.PublishProgress). Colors are themed
 * via --pubux-* variables that each app maps to its own palette; the fallbacks
 * below keep it usable standalone.
 *
 *   --pubux-accent / --pubux-accent-dim    in-progress (active) highlight
 *   --pubux-success / --pubux-success-dim / --pubux-success-glow   done + live link
 *   --pubux-danger / --pubux-warning       failed / paused
 *   --pubux-text / --pubux-muted / --pubux-border   text + chrome
 *   --pubux-radius / --pubux-accent-font   shape + live-link font
 */

.pubux-stages { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.pubux-stage {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 9px; border-radius: var(--pubux-radius, 6px);
  border: 1px solid transparent; font-size: 11px;
  color: var(--pubux-muted, #8aa);
  transition: all .25s ease;
}
.pubux-stage-ic { width: 18px; text-align: center; filter: grayscale(1); opacity: .45; transition: all .25s ease; }
.pubux-stage-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pubux-stage-ind { width: 15px; text-align: center; font-weight: 900; font-size: 11px; }

.pubux-stage.active {
  color: var(--pubux-text, #e8fff6);
  border-color: var(--pubux-accent, #00f5ff);
  background: var(--pubux-accent-dim, rgba(0,245,255,.06));
}
.pubux-stage.active .pubux-stage-ic { filter: none; opacity: 1; animation: pubux-pulse 1s ease-in-out infinite alternate; }

.pubux-stage.done { color: var(--pubux-success, #00ff9d); }
.pubux-stage.done .pubux-stage-ic { filter: none; opacity: 1; }
.pubux-stage.done .pubux-stage-ind { color: var(--pubux-success, #00ff9d); animation: pubux-pop .3s cubic-bezier(.2,1.3,.3,1); }

.pubux-stage.failed { color: var(--pubux-danger, #ff2d78); }
.pubux-stage.failed .pubux-stage-ic { filter: none; opacity: 1; }
.pubux-stage.failed .pubux-stage-ind { color: var(--pubux-danger, #ff2d78); }

.pubux-stage.paused { color: var(--pubux-warning, #fad015); }
.pubux-stage.paused .pubux-stage-ic { filter: none; opacity: .85; }
.pubux-stage.paused .pubux-stage-ind { color: var(--pubux-warning, #fad015); }

.pubux-spin {
  display: inline-block; width: 10px; height: 10px;
  border: 2px solid var(--pubux-border, rgba(255,255,255,.18));
  border-top-color: var(--pubux-accent, #00f5ff);
  border-radius: 50%; animation: pubux-spin .7s linear infinite;
}
@keyframes pubux-spin { to { transform: rotate(360deg); } }
@keyframes pubux-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pubux-pulse { from { transform: scale(1); opacity: .85; } to { transform: scale(1.06); opacity: 1; } }
@keyframes pubux-pop-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.pubux-livelink {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 12px 14px; border-radius: var(--pubux-radius, 8px);
  text-decoration: none; border: 1px solid var(--pubux-success, #00ff9d);
  background: var(--pubux-success-dim, rgba(0,255,157,.12));
  box-shadow: 0 0 18px var(--pubux-success-glow, rgba(0,255,157,.25));
  animation: pubux-pop-in .5s cubic-bezier(.2,1.25,.3,1);
}
.pubux-livelink:hover { box-shadow: 0 0 28px var(--pubux-success-glow, rgba(0,255,157,.45)); transform: translateY(-1px); }
.pubux-livelink-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--pubux-success, #00ff9d); box-shadow: 0 0 8px var(--pubux-success, #00ff9d);
  animation: pubux-pulse 1s ease-in-out infinite alternate;
}
.pubux-livelink-main { font-family: var(--pubux-accent-font, inherit); font-size: 12px; font-weight: 900; letter-spacing: .04em; color: var(--pubux-success, #00ff9d); }
.pubux-livelink-url { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--pubux-text, #e8fff6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 54%; }

@media (prefers-reduced-motion: reduce) {
  .pubux-stage, .pubux-stage-ic, .pubux-spin, .pubux-livelink { animation: none !important; transition: none !important; }
}