/* progress-track.css — Plan 7 (WS-1)
 * Styles for the reusable ProgressTrack component (progress-track.js).
 * Namespaced .ptrack-* so it never collides with the .inv-run-* stepper it
 * replaces; palette intentionally matches .inv-run-* (style.css:1660+):
 * gray=pending, blue=running/active, green=done, red=failed. */

.ptrack {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 10px 0 16px 0;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.ptrack-note { font-size: 0.95em; color: #1f2937; margin-bottom: 8px; }
.ptrack-note .inv-run-err { color: #991b1b; }

/* Segmented milestone bar. Each stage is one track that fills left→right. */
.ptrack-bar {
  display: flex;
  gap: 4px;
  align-items: stretch;
}
.ptrack-seg {
  position: relative;
  flex: 1 1 0;
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;             /* pending */
  overflow: hidden;
}
.ptrack-bar-solo .ptrack-seg { height: 12px; }
.ptrack-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #2563eb;            /* active/measured fill */
  transition: width 0.4s linear;
}
.ptrack-seg-done .ptrack-fill    { background: #16a34a; }
.ptrack-seg-active .ptrack-fill  { background: #2563eb; }
.ptrack-seg-failed .ptrack-fill  { background: #dc2626; }
.ptrack-seg-active               { background: #dbeafe; }
.ptrack-seg-failed               { background: #fee2e2; }

/* Spinner marking the active segment. Sits at the leading edge of the fill. */
.ptrack-spin {
  position: absolute;
  top: 50%;
  right: 3px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ptrack-spin 0.8s linear infinite;
}
@keyframes ptrack-spin { to { transform: rotate(360deg); } }

/* Stage labels under the bar, colour-coded to their state. */
.ptrack-labels {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}
.ptrack-label {
  flex: 1 1 0;
  text-align: center;
  font-size: 0.72em;
  color: #94a3b8;                 /* pending */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ptrack-label-done   { color: #16a34a; font-weight: 600; }
.ptrack-label-active { color: #1e3a8a; font-weight: 700; }
.ptrack-label-failed { color: #dc2626; font-weight: 700; }

.ptrack-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
  font-size: 0.8em;
  color: #475569;
}
.ptrack-pct { font-weight: 700; color: #1e3a8a; }
.ptrack-steptext { color: #6b7280; }
.ptrack-detail { margin-top: 6px; font-size: 0.82em; color: #6b7280; }

/* Screen-reader-only live region (visual state is conveyed by the bar). */
.ptrack-live {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honour reduced-motion: no spinner rotation, no fill tween — a static,
 * truthful bar. (First reduced-motion affordance in this frontend.) */
@media (prefers-reduced-motion: reduce) {
  .ptrack-fill { transition: none; }
  .ptrack-spin { animation: none; opacity: 0.85; }
}

/* Indeterminate loading (progress-track.js loading()/loadingHtml()) — a plain
 * spinner + label for an opaque single fetch with no real stages/fraction to
 * report. Standalone sizing (unlike .ptrack-spin, which sits inline at a
 * segment's edge); reuses the same @keyframes ptrack-spin rotation. */
.viv-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  color: #6b7280;
  font-size: 0.92em;
}
.viv-loading-spin {
  width: 14px;
  height: 14px;
  border: 2px solid #cbd5e1;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: ptrack-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  .viv-loading-spin { animation: none; opacity: 0.85; }
}
:root[data-theme="dark"] .viv-loading { color: var(--text-muted); }
:root[data-theme="dark"] .viv-loading-spin { border-color: var(--border); border-top-color: #93c5fd; }

/* Compact modifier for tight spaces (e.g. the rail sidebar). */
.viv-loading-compact { padding: 4px 12px; font-size: 0.85em; }
.viv-loading-compact .viv-loading-spin { width: 11px; height: 11px; }

/* Floating overlay wrapper for session-status.js's materialization progress
 * panel — the .ptrack card inside already supplies its own themed
 * background/border (light+dark, above); this only adds elevation since it
 * floats fixed-position over page content instead of sitting in flow. */
#viv-session-progress .ptrack { box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }

/* Dark theme. Same token/hex idiom as style.css's :root[data-theme="dark"]
 * rules: var(--token) for neutral surfaces/text, explicit hex for the
 * saturated done/active/failed status colors (reusing the exact tints
 * style.css already uses for the same three states elsewhere). */
:root[data-theme="dark"] .ptrack{ background:var(--surface-2); border-color:var(--border); }
:root[data-theme="dark"] .ptrack-note{ color:var(--text); }
:root[data-theme="dark"] .ptrack-note .inv-run-err{ color:#fca5a5; }
:root[data-theme="dark"] .ptrack-seg{ background:var(--surface-3); }
:root[data-theme="dark"] .ptrack-seg-active{ background:rgba(59,130,246,0.16); }
:root[data-theme="dark"] .ptrack-seg-failed{ background:rgba(220,38,38,0.16); }
:root[data-theme="dark"] .ptrack-label{ color:var(--text-muted); }
:root[data-theme="dark"] .ptrack-label-done{ color:#86efac; }
:root[data-theme="dark"] .ptrack-label-active{ color:#93c5fd; }
:root[data-theme="dark"] .ptrack-label-failed{ color:#fca5a5; }
:root[data-theme="dark"] .ptrack-meta{ color:var(--text-muted); }
:root[data-theme="dark"] .ptrack-pct{ color:#93c5fd; }

/* Local in-place workspace switch (Item 70 phase 3) — a full-page branded
 * splash covering the post-reload boot gap. No real intermediate stages
 * exist for an in-place switch (session_env.prepare returns ready
 * immediately) — deliberately NOT a ProgressTrack stages view, just a
 * subtle-pulse logo. Dismissed by walkthrough.js the instant the rail's
 * first real post-reload fetch resolves, not a timer. */
.viv-switch-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.viv-switch-splash-logo {
  width: 72px;
  height: auto;
  animation: viv-switch-pulse 1.6s ease-in-out infinite;
}
@keyframes viv-switch-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.97); }
  50%      { opacity: 1;    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .viv-switch-splash-logo { animation: none; opacity: 0.9; }
}
:root[data-theme="dark"] .ptrack-steptext{ color:var(--text-muted); }
:root[data-theme="dark"] .ptrack-detail{ color:var(--text-muted); }