/* Data pipeline demo (js/pipeline.js) — uses the shared --t-* theme tokens */
.pl-wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

.pl-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; margin-bottom: 16px; }
.pl-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-grp[hidden] { display: none; }
.pl-lbl { font-family: var(--t-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5B6270; margin-right: 4px; }
.pl-btn, .pl-dest {
  font: 600 13px/1 'Inter', sans-serif; color: var(--t-bg); background: transparent; cursor: pointer;
  border: 1.5px solid var(--t-bg); padding: 9px 14px; transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.pl-btn:hover { background: var(--t-bg); color: #fff; }
.pl-btn:active { transform: translate(2px, 2px); }
.pl-dest { display: inline-flex; align-items: center; gap: 8px; border-color: #C9CDD5; color: #8A90A0; }
.pl-dest i { width: 9px; height: 9px; border-radius: 50%; background: #C9CDD5; transition: background .15s; }
.pl-dest.on { border-color: var(--t-bg); color: var(--t-bg); box-shadow: 3px 3px 0 var(--t-amber); }
.pl-dest.on i { background: var(--t-green); }

/* dashboard picker */
.pl-bar2 { margin-top: -4px; padding-top: 14px; border-top: 1px dashed #D2CEC2; }
.pl-tab, .pl-chip { font: 600 13px/1 'Inter', sans-serif; cursor: pointer; background: transparent; color: #5B6270; border: 1.5px solid #C9CDD5; padding: 9px 14px; transition: background .15s, color .15s, border-color .15s; }
.pl-tab:hover, .pl-chip:hover { border-color: var(--t-bg); color: var(--t-bg); }
.pl-tab.on { background: var(--t-bg); color: #fff; border-color: var(--t-bg); }
.pl-chip { padding: 7px 12px; font-size: 12.5px; }
.pl-chip.on { border-color: var(--t-bg); color: var(--t-bg); box-shadow: 3px 3px 0 var(--t-amber); }

.pl-scroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--t-line); border-radius: 16px; background: var(--t-deep);
  box-shadow: 0 0 0 1px rgba(var(--t-amber-rgb), .1), 0 50px 100px -50px rgba(11,15,23,.7); -webkit-overflow-scrolling: touch; }
.pl-stage { position: relative; min-width: 980px; aspect-ratio: 2.2 / 1; overflow: hidden;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px; }
.pl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-x pan-y; }

.pl-lab { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; will-change: transform; }
.pl-lab small { display: block; font-family: var(--t-mono); font-size: calc(var(--pl-fs, 12.5px) * .85); letter-spacing: .04em; color: var(--t-dim); font-weight: 400; margin-top: 2px; }
.pl-dev { font: 600 var(--pl-fs, 12.5px)/1.2 'Inter', sans-serif; color: var(--t-text); }
.pl-step { font-family: var(--t-mono); font-size: calc(var(--pl-fs, 12.5px) * .9); letter-spacing: .16em; text-transform: uppercase; color: var(--t-dim); }
.pl-step b { color: var(--t-amber); font-weight: 500; margin-right: 8px; }
.pl-hubl { text-align: center; font: 700 calc(var(--pl-fs, 12.5px) * 1.05)/1.2 'Inter', sans-serif; color: var(--t-text); }

.pl-hint { display: none; margin: 10px 0 0; font-family: var(--t-mono); font-size: 11px; letter-spacing: .04em; color: #8A90A0; }
@media (max-width: 1100px) { .pl-hint { display: block; } }

.pl-foot { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; margin-top: 14px; }
.pl-log, .pl-stats { border: 1px solid var(--t-line); background: var(--t-bg); color: var(--t-text); }
.pl-log { padding: 16px 18px; min-width: 0; }
.pl-log h4 { margin: 0 0 12px; font-family: var(--t-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--t-dim); }
.pl-log h4 small { margin-left: 8px; color: var(--t-amber); letter-spacing: .08em; }
.pl-lines { list-style: none; margin: 0; padding: 0; font-family: var(--t-mono); font-size: 12px; line-height: 1; }
.pl-lines li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--t-line); white-space: nowrap; overflow: hidden; }
.pl-lines li:first-child { border-top: 0; animation: plIn .35s ease-out; }
.pl-lines b { flex: none; width: 104px; color: var(--t-amber); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.pl-lines .raw { flex: 0 1 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--t-dim); }
.pl-lines i { flex: none; color: var(--t-line2); font-style: normal; }
.pl-lines code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--t-green); font-family: inherit; }
.pl-lines li.al code { color: #FF5A5F; }
@keyframes plIn { from { opacity: 0; transform: translateY(-6px); } }

.pl-stats { display: grid; grid-template-columns: 1fr 1fr; }
.pl-stats > div { padding: 16px 18px; border-top: 1px solid var(--t-line); }
.pl-stats > div:nth-child(1), .pl-stats > div:nth-child(2) { border-top: 0; }
.pl-stats > div:nth-child(even) { border-left: 1px solid var(--t-line); }
.pl-stats b { display: block; font-family: var(--t-mono); font-size: 24px; font-weight: 500; letter-spacing: -.03em; color: var(--t-amber); }
.pl-stats span { font-family: var(--t-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-dim); }

.pl-fallback { padding: 40px 24px; text-align: center; color: #5B6270; border: 1px dashed #C9CDD5; }
@media (max-width: 900px) { .pl-foot { grid-template-columns: 1fr; } .pl-wrap { padding: 0 16px; } }