/* PowerShell Genie — Pipeline Player (V756)
   Animated "watch PowerShell work" visualizations. Theme-aware via site tokens. */
.psg-pipe {
  --pp-bg: var(--card, #101d30);
  --pp-inset: var(--inset, #152339);
  --pp-line: var(--line, #2c3c53);
  --pp-ink: var(--ink, #eaf0fa);
  --pp-muted: var(--muted, #97a9c3);
  --pp-accent: #7DD3C0;
  --pp-amber: #F59E0B;
  --pp-violet: #8B5CF6;
  --pp-red: #F87171;
  --pp-green: #A3E635;
  --pp-codebg: var(--code, #08172a);
  --pp-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  padding: 14px;
  margin: 20px 0;
}
[data-theme="light"] .psg-pipe {
  --pp-accent: #076ed3;
  --pp-amber: #855800;
  --pp-violet: #6D28D9;
  --pp-red: #DC2626;
  --pp-green: #166534;
}
.psg-pipe h3.pp-title { font-size: 1.02rem; margin: 0 0 2px; color: var(--pp-ink); }
.psg-pipe .pp-sub { font-size: .82rem; color: var(--pp-muted); margin-bottom: 10px; }
.psg-pipe .pp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.psg-pipe .pp-head code {
  font-family: var(--pp-mono); background: #10263a; border: 1px solid var(--pp-line);
  border-radius: 8px; padding: 7px 12px; font-size: .8rem; color: #eaf4ff;
  flex: 1; min-width: 220px; overflow-x: auto; white-space: nowrap;
  /* force dark-surface syntax tokens in both themes (site's highlighter
     tokenizes this bar; light-theme tokens are unreadable on dark bg) */
  --syntax-cmd:#ffd866; --syntax-param:#7cc4ff; --syntax-var:#c9a7f5;
  --syntax-str:#9fe8b8; --syntax-com:#a6b9d1; --syntax-prop:#ffa94d;
  --syntax-type:#6ddbc4; --syntax-const:#ff9aca; --syntax-op:#b8c8df;
  --syntax-bad:#ff8fa0;
}
.psg-pipe .pp-sim {
  font-size: .68rem; background: rgba(245,158,11,.12); color: var(--pp-amber);
  border: 1px solid rgba(245,158,11,.4); border-radius: 99px; padding: 3px 10px; font-weight: 800;
  letter-spacing: .06em;
}
.psg-pipe .pp-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.psg-pipe .pp-controls button {
  background: var(--pp-inset); color: var(--pp-ink); border: 1px solid var(--pp-line);
  border-radius: 8px; padding: 6px 13px; cursor: pointer; font-weight: 700; font-size: .85rem;
  transition: transform .15s ease, border-color .15s ease;
}
.psg-pipe .pp-controls button:hover:not(:disabled) { border-color: var(--pp-accent); transform: translateY(-1px); }
.psg-pipe .pp-controls button:disabled { opacity: .4; cursor: default; }
.psg-pipe .pp-controls button.pp-primary { background: var(--pp-accent); color: #0a1424; border-color: var(--pp-accent); }
[data-theme="light"] .psg-pipe .pp-controls button.pp-primary { color: #fff; }
.psg-pipe .pp-speed { display: flex; align-items: center; gap: 8px; color: var(--pp-muted); font-size: .8rem; margin-left: auto; }

.psg-pipe .pp-stages { display: flex; align-items: stretch; overflow-x: auto; padding-bottom: 6px; }
.psg-pipe .pp-stage {
  flex: 1 1 0; min-width: 180px; background: var(--pp-inset); border: 1px solid var(--pp-line);
  border-radius: 10px; padding: 9px; position: relative;
}
.psg-pipe .pp-stage + .pp-stage { margin-left: 24px; }
.psg-pipe .pp-stage::before {
  content: '▶'; position: absolute; left: -19px; top: 50%; transform: translateY(-50%);
  color: var(--pp-accent); font-size: .9rem;
}
.psg-pipe .pp-stage:first-child::before { display: none; }
.psg-pipe .pp-stage.pp-active { border-color: var(--pp-accent); box-shadow: 0 0 0 1px var(--pp-accent); }
.psg-pipe .pp-stage h4 { font-family: var(--pp-mono); font-size: .72rem; color: var(--pp-accent); margin: 0 0 1px; word-break: break-all; }
.psg-pipe .pp-stage .pp-sdesc { font-size: .68rem; color: var(--pp-muted); margin-bottom: 7px; }
.psg-pipe .pp-lane { min-height: 96px; display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; }
.psg-pipe .pp-count { font-size: .66rem; color: var(--pp-muted); margin-top: 6px; }

.psg-pipe .pp-obj {
  background: var(--pp-bg); border: 1px solid var(--pp-line); border-radius: 8px;
  padding: 4px 9px; font-family: var(--pp-mono); font-size: .7rem; cursor: pointer;
  transition: transform .45s cubic-bezier(.2,.8,.25,1), opacity .3s ease, border-color .15s ease, box-shadow .15s ease;
  position: relative; user-select: none; color: var(--pp-ink);
}
.psg-pipe .pp-obj:hover { border-color: var(--pp-accent); box-shadow: 0 4px 14px rgba(125,211,192,.25); }
.psg-pipe .pp-obj .pp-oname { font-weight: 700; display: block; }
.psg-pipe .pp-obj .pp-ostat { font-size: .62rem; color: var(--pp-muted); }
.psg-pipe .pp-obj.pp-running .pp-ostat { color: var(--pp-green); }
.psg-pipe .pp-obj.pp-stopped .pp-ostat { color: var(--pp-amber); }
.psg-pipe .pp-obj.pp-rejected { opacity: .28; border-style: dashed; transform: scale(.92); }
.psg-pipe .pp-obj.pp-rejected::after {
  content: '✕ filtered'; position: absolute; top: -9px; right: 6px;
  font-size: .6rem; background: var(--pp-red); color: #fff; border-radius: 99px; padding: 1px 8px; font-weight: 800;
}
.psg-pipe .pp-obj.pp-selected { border-color: var(--pp-violet); box-shadow: 0 0 0 2px var(--pp-violet); }
.psg-pipe .pp-obj.pp-processing { border-color: var(--pp-amber); box-shadow: 0 0 16px rgba(245,158,11,.5); transform: scale(1.08); }

.psg-pipe .pp-inspector {
  margin-top: 12px; background: var(--pp-inset); border: 1px solid var(--pp-line);
  border-radius: 10px; padding: 12px; display: none;
}
.psg-pipe .pp-inspector.on { display: block; animation: pp-slidein .25s ease; }
@keyframes pp-slidein { from { opacity: 0; transform: translateY(8px); } }
.psg-pipe .pp-inspector h4 { color: var(--pp-violet); margin: 0 0 8px; font-family: var(--pp-mono); font-size: .85rem; }
.psg-pipe .pp-inspector table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.psg-pipe .pp-inspector td { padding: 5px 8px; border-bottom: 1px solid var(--pp-line); color: var(--pp-ink); }
.psg-pipe .pp-inspector td:first-child { font-family: var(--pp-mono); color: var(--pp-accent); width: 40%; }

.psg-pipe .pp-buddy {
  display: flex; gap: 10px; align-items: center; margin-top: 12px;
  background: rgba(125,211,192,.06); border: 1px dashed rgba(125,211,192,.4);
  border-radius: 10px; padding: 9px 13px; font-size: .85rem; color: var(--pp-ink);
}
[data-theme="light"] .psg-pipe .pp-buddy { background: rgba(7,110,211,.05); border-color: rgba(7,110,211,.35); }
.psg-pipe .pp-buddy b { color: var(--pp-accent); }
.psg-pipe .pp-buddy img.pp-genie { width: 44px; height: 44px; flex-shrink: 0; }

.psg-pipe .pp-looptrack {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; min-height: 64px;
  background: var(--pp-inset); border: 1px solid var(--pp-line); border-radius: 10px; padding: 12px;
}
.psg-pipe .pp-looplog {
  font-family: var(--pp-mono); font-size: .8rem; background: var(--pp-codebg);
  border: 1px solid var(--pp-line); border-radius: 10px; padding: 12px;
  min-height: 90px; max-height: 190px; overflow-y: auto; color: var(--pp-ink);
}
[data-theme="light"] .psg-pipe .pp-looplog { color: #eaf0fa; }
.psg-pipe .pp-looplog .pp-ln { padding: 2px 0; color: var(--pp-muted); }
.psg-pipe .pp-looplog .pp-ln b { color: var(--pp-accent); }
[data-theme="light"] .psg-pipe .pp-looplog .pp-ln b { color: #79baff; }

@media (prefers-reduced-motion: reduce) {
  .psg-pipe .pp-obj, .psg-pipe .pp-controls button, .psg-pipe .pp-inspector.on { transition: none; animation: none; }
}
@media (max-width: 640px) { .psg-pipe .pp-stage { min-width: 170px; } }