/* SkyOps — Processing page (pp-* classes) */

.page-processing { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 14px; }

/* Page header */
.page-hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.page-hd-proc { margin-bottom: 4px; }
.page-kicker {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 8px;
}
.page-kicker-crumb {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em;
  font-family: inherit; font-size: inherit;
}
.page-kicker-crumb:hover { color: var(--accent-primary); }
.page-kicker-sep { color: var(--border-strong); opacity: 0.6; }
.page-kicker-cur { color: var(--fg-base); }
.page-title { margin: 0 0 4px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.page-sub { font-size: 13px; color: var(--fg-muted); max-width: 720px; }

/* Top bar actions + view tabs */
.pp-top-actions { display: flex; align-items: center; gap: 14px; }
.pp-view-tabs {
  display: inline-flex; background: var(--bg-card); border: 1px solid var(--border-base);
  border-radius: 8px; padding: 3px;
}
.pp-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: none; background: transparent;
  color: var(--fg-muted); font-size: 12px; border-radius: 6px;
  cursor: pointer; transition: all 0.12s ease;
}
.pp-tab:hover { color: var(--fg-base); }
.pp-tab.is-on {
  background: var(--bg-elev); color: var(--fg-base);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.pp-stream-toggle {
  display: inline-flex; background: var(--bg-card); border: 1px solid var(--border-base);
  border-radius: 8px; padding: 3px;
}
.pp-seg-btn {
  padding: 6px 10px; border: none; background: transparent;
  color: var(--fg-muted); font-size: 11px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 6px; cursor: pointer;
}
.pp-seg-btn.is-on { background: var(--bg-elev); color: var(--fg-base); }

/* Caps label */
.pp-caps {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted);
}
.pp-mono { font-family: var(--font-mono); }
.pp-muted { color: var(--fg-muted); }
.pp-grow { flex: 1; }

/* Ops view grid */
.pp-view-ops {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pp-view-ops { display: flex; flex-direction: column; gap: 14px; }

.pp-ops-row {
  display: grid;
  gap: 14px;
  align-items: start;
  min-width: 0;
}
.pp-ops-row > * { min-width: 0; }

.pp-ops-row-main {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
}
.pp-ops-row-obs {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}
.pp-ops-center { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-ops-rail { min-width: 0; }

@media (max-width: 1100px) {
  .pp-ops-row-main, .pp-ops-row-obs { grid-template-columns: minmax(0, 1fr); }
}
.pp-ops-rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-ops-center { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-ops-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Hero bar — bandwidth & active bundle */
.pp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border-base);
  border-radius: 10px; padding: 18px 20px;
}
@media (max-width: 1100px) { .pp-hero { grid-template-columns: 1fr; } }
.pp-hero-l { display: flex; flex-direction: column; gap: 10px; }
.pp-hero-kicker { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--accent-primary); text-transform: uppercase; letter-spacing: 0.06em; }
.pp-hero-title { display: flex; align-items: baseline; gap: 8px; font-size: 19px; font-weight: 600; }
.pp-hero-id { color: var(--accent-primary); }
.pp-hero-sep { color: var(--border-strong); }
.pp-hero-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.pp-hero-bw {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px; background: var(--bg-elev);
  border-radius: 8px; border: 1px solid var(--border-base);
}
.pp-hero-bw-ring {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pp-hero-bw-ring span.pp-mono {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--fg-base);
}
.pp-hero-bw-ring em { font-style: normal; color: var(--fg-muted); font-size: 9px; }
.pp-hero-bw-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pp-hero-bw-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
}
.pp-hero-bw-foot {
  display: flex; gap: 10px; margin-top: 6px;
  padding-top: 6px; border-top: 1px dashed var(--border-base);
  font-size: 10px; color: var(--fg-muted);
}
.pp-hero-bw-foot span { display: inline-flex; align-items: center; gap: 4px; }

.pp-progbar {
  height: 4px; background: var(--bg-canvas);
  border-radius: 999px; overflow: hidden;
  margin-top: 3px;
}
.pp-progbar-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.pp-progbar-rgb { background: var(--accent-primary); }
.pp-progbar-thermal { background: #f97316; }

.pp-hero-drop {
  border: 1.5px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--bg-elev);
  padding: 18px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  transition: all 0.15s ease;
}
.pp-hero-drop:hover {
  border-color: var(--accent-primary); background: rgba(74, 144, 217, 0.05);
}
.pp-hero-drop-inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--fg-muted);
}
.pp-hero-drop-ttl { font-size: 13px; font-weight: 500; color: var(--fg-base); }
.pp-hero-drop-sub { font-size: 11px; color: var(--fg-muted); }
.pp-hero-drop-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Pipeline track */
.pp-track {
  background: var(--bg-card); border: 1px solid var(--border-base);
  border-radius: 10px; padding: 16px 18px;
}
.pp-track-hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.pp-track-title { font-size: 14px; font-weight: 600; margin-top: 4px; }
.pp-track-legend { display: flex; gap: 12px; font-size: 11px; color: var(--fg-muted); }
.pp-track-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pp-leg-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
}
.pp-leg-done    { background: var(--sev-low); }
.pp-leg-active  { background: var(--accent-primary); box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.25); }
.pp-leg-pending { background: var(--border-strong); }

.pp-track-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
}
.pp-stage {
  background: var(--bg-elev); border: 1px solid var(--border-base);
  border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  transition: all 0.15s ease;
}
.pp-stage-done { border-color: rgba(132, 204, 22, 0.4); }
.pp-stage-done::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(132, 204, 22, 0.04));
  border-radius: inherit; pointer-events: none;
}
.pp-stage-active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary), 0 6px 18px rgba(74, 144, 217, 0.18);
}
.pp-stage-pending { opacity: 0.55; }
.pp-stage-failed { border-color: rgba(239, 68, 68, 0.5); }

.pp-stage-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
}
.pp-stage-num {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-muted); width: 18px;
}
.pp-stage-name { font-size: 13px; font-weight: 600; }
.pp-stage-desc { font-size: 11px; color: var(--fg-muted); line-height: 1.35; }
.pp-stage-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px; font-size: 10px; color: var(--fg-muted);
  font-family: var(--font-mono);
}
.pp-stage-dur { font-family: var(--font-mono); }
.pp-stage-check {
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--sev-low); color: var(--bg-canvas);
  display: flex; align-items: center; justify-content: center;
}
.pp-stage-pulse {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent-primary);
  animation: pp-pulse 1.4s ease-in-out infinite;
}
@keyframes pp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.4); }
}

/* Job queue list */
.pp-joblist {
  background: var(--bg-card); border: 1px solid var(--border-base);
  border-radius: 10px; padding: 14px 0;
}
.pp-joblist-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--border-base);
}
.pp-joblist-body {
  padding: 8px 10px 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 520px; overflow-y: auto;
}
.pp-filter-chips { display: flex; gap: 4px; }
.pp-chip {
  padding: 3px 9px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border-base);
  color: var(--fg-muted); font-size: 11px; cursor: pointer;
}
.pp-chip.is-on { background: var(--bg-elev); color: var(--fg-base); border-color: var(--border-strong); }
.pp-chip em { font-style: normal; margin-left: 4px; color: var(--fg-muted); }

.pp-jobcard {
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border-base);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.12s ease;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; overflow: hidden;
}
.pp-jobcard > * { min-width: 0; }
.pp-jobcard-hd { flex-wrap: wrap; gap: 4px; }
.pp-jobcard-name, .pp-jobcard-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-jobcard:hover { border-color: var(--border-strong); }
.pp-jobcard.is-sel {
  border-color: var(--accent-primary);
  background: rgba(74, 144, 217, 0.06);
}
.pp-jobcard-hd {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
}
.pp-jobcard-name { font-size: 12px; font-weight: 500; }
.pp-jobcard-sub { font-size: 10px; color: var(--fg-muted); }
.pp-jobcard-meta {
  display: flex; gap: 10px; font-size: 10px; color: var(--fg-muted);
  font-family: var(--font-mono); margin-top: 4px;
}

.pp-empty {
  padding: 16px; color: var(--fg-muted); font-size: 12px;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Detail panel */
.pp-detail {
  background: var(--bg-card); border: 1px solid var(--border-base);
  border-radius: 10px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.pp-detail-hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-base);
}
.pp-detail-title { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; font-size: 16px; font-weight: 600; }
.pp-detail-sub { font-size: 12px; color: var(--fg-muted); font-weight: 400; }
.pp-detail-actions { display: flex; gap: 6px; }
.pp-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.pp-detail-qc {
  display: flex; flex-direction: column; gap: 10px;
}
.pp-qc-row { display: flex; flex-direction: column; gap: 6px; }

.pp-kstat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: var(--bg-elev); border-radius: 6px;
}
.pp-kstat-l { font-size: 10px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pp-kstat-v { font-size: 13px; color: var(--fg-base); font-weight: 500; }

/* Badges */
.pp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: var(--bg-canvas); border: 1px solid var(--border-base);
}
.pp-badge-ok   { color: var(--sev-low);    border-color: rgba(132, 204, 22, 0.4); }
.pp-badge-info { color: var(--accent-primary); border-color: rgba(74, 144, 217, 0.4); }
.pp-badge-warn { color: var(--sev-med);    border-color: rgba(245, 158, 11, 0.4); }
.pp-badge-err  { color: var(--sev-high);   border-color: rgba(239, 68, 68, 0.4); }
.pp-badge-neut { color: var(--fg-muted);   border-color: var(--border-base); }

.pp-dot { width: 8px; height: 8px; border-radius: 999px; position: relative; display: inline-block; }
.pp-dot-core, .pp-dot-halo { position: absolute; inset: 0; border-radius: inherit; }
.pp-dot-halo { opacity: 0.3; transform: scale(1.8); }
.pp-dot-processing .pp-dot-core { background: var(--accent-primary); }
.pp-dot-processing .pp-dot-halo { background: var(--accent-primary); animation: pp-pulse 1.4s infinite; }
.pp-dot-completed .pp-dot-core { background: var(--sev-low); }
.pp-dot-queued    .pp-dot-core { background: var(--fg-muted); }
.pp-dot-failed    .pp-dot-core { background: var(--sev-high); }
.pp-dot-paused    .pp-dot-core { background: var(--sev-med); }

.pp-spark { display: inline-block; font-family: var(--font-mono); }

/* Outputs grid */
.pp-outgrid {
  background: var(--bg-card); border: 1px solid var(--border-base);
  border-radius: 10px; padding: 14px 16px;
}
.pp-outgrid-hd {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-base);
}
.pp-outgrid-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px;
}
.pp-outchip {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; background: var(--bg-elev); border-radius: 6px;
  gap: 8px; font-size: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.12s ease;
}
.pp-outchip:hover { border-color: var(--border-strong); }
.pp-outchip-label { font-weight: 500; }
.pp-outchip-tag {
  font-size: 10px; padding: 1px 6px; border-radius: 999px;
  background: var(--bg-canvas); color: var(--fg-muted);
  font-family: var(--font-mono);
}
.pp-outchip-size { font-size: 10px; color: var(--fg-muted); font-family: var(--font-mono); }

/* CRS panel */
.pp-crs { padding: 10px 0; }
.pp-crs-row {
  display: flex; justify-content: space-between; padding: 4px 0;
  font-size: 12px;
}
.pp-crs-val { font-family: var(--font-mono); color: var(--fg-base); }

/* Infra panel */
.pp-infra {
  background: var(--bg-card); border: 1px solid var(--border-base);
  border-radius: 10px; padding: 14px 16px;
}
.pp-infra-hd {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.pp-infra-body { display: flex; flex-direction: column; gap: 8px; }

/* Logs */
.pp-log {
  background: var(--bg-card); border: 1px solid var(--border-base);
  border-radius: 10px;
  display: flex; flex-direction: column;
  min-height: 320px;
  max-height: 420px;
  overflow: hidden;
}
.pp-log-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border-base);
}
.pp-log-body {
  padding: 6px 0;
  max-height: 280px; overflow-y: auto;
  font-family: var(--font-mono); font-size: 11px;
}
.pp-log-line {
  display: grid;
  grid-template-columns: 62px 44px minmax(0, 1fr);
  gap: 8px;
  padding: 2px 12px;
  color: var(--fg-muted);
  line-height: 1.45;
  word-break: break-word;
}
.pp-log-m { overflow-wrap: anywhere; }
.pp-log-line:hover { background: var(--bg-elev); }
.pp-log-t { color: var(--fg-muted); opacity: 0.75; }
.pp-log-lvl { text-transform: uppercase; font-weight: 600; }
.pp-log-m { color: var(--fg-base); white-space: pre-wrap; }
.pp-log-info  .pp-log-lvl { color: var(--accent-primary); }
.pp-log-warn  .pp-log-lvl { color: var(--sev-med); }
.pp-log-error .pp-log-lvl { color: var(--sev-high); }
.pp-log-ok    .pp-log-lvl { color: var(--sev-low); }

/* Studio view */
.pp-view-studio {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 14px;
  min-height: 680px;
}
.pp-studio-rail {
  background: var(--bg-card); border: 1px solid var(--border-base);
  border-radius: 10px; display: flex; flex-direction: column;
  max-height: 100%; overflow: hidden;
}
.pp-studio-rail-hd {
  padding: 12px 14px; border-bottom: 1px solid var(--border-base);
  display: flex; justify-content: space-between; align-items: center;
}

/* Layer tree */
.pp-layertree { display: flex; flex-direction: column; overflow-y: auto; flex: 1; }
.pp-layertree-hd {
  padding: 10px 14px 4px;
  font-size: 10px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.pp-layer {
  display: grid;
  grid-template-columns: 22px 18px 1fr auto;
  gap: 8px;
  padding: 8px 12px;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px dashed var(--border-base);
  transition: background 0.1s ease;
}
.pp-layer:hover { background: var(--bg-elev); }
.pp-layer.is-on { background: rgba(74, 144, 217, 0.05); }
.pp-layer-eye {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--fg-muted); display: flex; align-items: center; justify-content: center;
}
.pp-layer-eye.is-on { color: var(--accent-primary); }
.pp-layer-kind {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px;
  font-size: 9px; font-weight: 700; color: var(--bg-canvas);
}
.pp-layer-kind-raster { background: #60a5fa; }
.pp-layer-kind-vector { background: #a78bfa; }
.pp-layer-kind-pointcloud { background: #f97316; }
.pp-layer-kind-mesh { background: #14b8a6; }
.pp-layer-kind-elevation { background: #84cc16; }
.pp-layer-kind-detection { background: #ef4444; }
.pp-layer-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-layer-name { font-size: 12px; font-weight: 500; }
.pp-layer-meta { font-size: 10px; color: var(--fg-muted); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Viewer canvas */
.pp-canvas {
  position: relative;
  background: var(--bg-canvas); border: 1px solid var(--border-base);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pp-canvas-toolbar {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 2;
  pointer-events: none;
}
.pp-canvas-toolbar > * { pointer-events: auto; }
.pp-tool-group {
  display: inline-flex; gap: 2px;
  background: rgba(10, 14, 26, 0.7); backdrop-filter: blur(8px);
  border: 1px solid var(--border-base); border-radius: 8px;
  padding: 3px;
}
.pp-tool {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px; background: transparent; border: none;
  color: var(--fg-muted); font-size: 11px; cursor: pointer;
  border-radius: 5px; font-family: inherit;
}
.pp-tool:hover { color: var(--fg-base); background: var(--bg-elev); }
.pp-tool.is-on { color: var(--fg-base); background: var(--bg-elev); }
.pp-tool-zoom { display: inline-flex; align-items: center; gap: 2px; }
.pp-tool-zbtn {
  width: 22px; height: 22px; padding: 0;
  background: rgba(10, 14, 26, 0.7); backdrop-filter: blur(8px);
  border: 1px solid var(--border-base); border-radius: 5px;
  color: var(--fg-base); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

.pp-canvas-stage {
  flex: 1; position: relative;
  background:
    radial-gradient(ellipse at center, rgba(74, 144, 217, 0.08) 0%, transparent 70%),
    var(--bg-canvas);
  background-size: cover;
  min-height: 500px;
}
.pp-canvas-overlays { position: absolute; inset: 0; pointer-events: none; }
.pp-canvas-overlays > * { pointer-events: auto; }
.pp-over-compass {
  position: absolute; top: 58px; right: 14px;
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(10, 14, 26, 0.7); backdrop-filter: blur(8px);
  border: 1px solid var(--border-base);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px;
}
.pp-over-scale {
  position: absolute; bottom: 50px; left: 14px;
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
}
.pp-over-scale-bar {
  width: 100px; height: 4px; background: var(--fg-base);
  position: relative;
}
.pp-over-scale-lbl { text-align: center; }
.pp-over-legend {
  position: absolute; bottom: 50px; right: 14px;
  background: rgba(10, 14, 26, 0.7); backdrop-filter: blur(8px);
  border: 1px solid var(--border-base);
  border-radius: 6px; padding: 8px 10px;
  min-width: 160px;
}
.pp-over-legend-bar {
  height: 8px; border-radius: 4px; margin: 6px 0;
  background: linear-gradient(90deg, #1e3a8a, #60a5fa, #84cc16, #f59e0b, #ef4444);
}
.pp-over-legend-labels {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
}
.pp-over-hover {
  position: absolute; top: 58px; left: 14px;
  background: rgba(10, 14, 26, 0.85); backdrop-filter: blur(8px);
  border: 1px solid var(--border-base);
  border-radius: 6px; padding: 8px 10px;
  font-size: 11px;
  min-width: 200px;
}
.pp-over-hover-id { font-family: var(--font-mono); color: var(--accent-primary); font-size: 11px; }
.pp-over-hover-def { color: var(--fg-base); margin-top: 4px; }

.pp-canvas-statbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; border-top: 1px solid var(--border-base);
  background: var(--bg-elev);
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
}

/* Inspector (right rail) */
.pp-inspector {
  background: var(--bg-card); border: 1px solid var(--border-base);
  border-radius: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pp-insp-sec { display: flex; flex-direction: column; }
.pp-insp-sec + .pp-insp-sec { border-top: 1px solid var(--border-base); }
.pp-insp-sec-hd {
  padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.pp-insp-rows { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.pp-insp-row {
  display: flex; justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--border-base);
}
.pp-insp-row:last-child { border-bottom: none; }
.pp-insp-row > span:first-child { color: var(--fg-muted); }
.pp-insp-row > span:last-child { color: var(--fg-base); font-family: var(--font-mono); }
.pp-insp-outputs { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.pp-insp-cta { padding: 10px 14px; border-top: 1px solid var(--border-base); }

/* Compare view */
.pp-view-cmp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-height: 680px;
}
.pp-viewer-switch {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--bg-elev); border-radius: 6px;
}
.pp-vs-btn {
  padding: 4px 10px; background: transparent; border: none;
  color: var(--fg-muted); font-size: 11px; border-radius: 4px;
  cursor: pointer; font-family: var(--font-mono);
}
.pp-vs-btn.is-on { background: var(--bg-card); color: var(--fg-base); }

.pp-stream {
  background: var(--bg-card); border: 1px solid var(--border-base);
  border-radius: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pp-stream-rgb { border-top: 3px solid var(--accent-primary); }
.pp-stream-thermal { border-top: 3px solid #f97316; }

/* Errors */
.pp-err-inline {
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: var(--sev-high);
  font-size: 12px;
  display: flex; align-items: center; gap: 8px;
}

.pp-eta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); }

/* Node (pipeline card inside studio) */
.pp-node {
  background: var(--bg-elev); border: 1px solid var(--border-base);
  border-radius: 8px; padding: 10px;
}
.pp-node-hd {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.pp-node-kind { font-size: 11px; color: var(--fg-muted); }
.pp-node-badge {
  padding: 1px 6px; border-radius: 3px; font-size: 10px;
  font-family: var(--font-mono);
}
.pp-node-badge-ok { background: rgba(132, 204, 22, 0.15); color: var(--sev-low); }
.pp-node-badge-run { background: rgba(74, 144, 217, 0.15); color: var(--accent-primary); }
.pp-node-badge-wait { background: var(--bg-canvas); color: var(--fg-muted); }
.pp-node-bar {
  height: 3px; background: var(--bg-canvas); border-radius: 999px; overflow: hidden;
}
.pp-node-bar > span {
  display: block; height: 100%; background: var(--accent-primary);
}
.pp-node-foot {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
}

/* Embedded in inspection workspace — readability overrides */
.ws-body .page-processing{padding:16px 24px 32px;gap:14px}
.ws-body .page-processing .page-kicker{display:none}
.ws-body .page-processing .page-title{font-size:18px;margin:0}
.ws-body .page-processing .page-hd{align-items:center;flex-wrap:wrap;gap:12px}
.pp-top-actions{flex-wrap:wrap;gap:8px}
.pp-ops-row-main{grid-template-columns:minmax(300px,340px) minmax(0,1fr)!important}
.pp-joblist-hd{flex-wrap:wrap;row-gap:8px}
.pp-filter-chips{flex-wrap:wrap;gap:4px;width:100%}
.pp-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:11px;line-height:1;white-space:nowrap}
.pp-chip em{margin:0;font-size:10px}
.pp-jobcard-hd{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:center}
.pp-jobcard-hd .pp-stream{grid-column:1/-1;justify-self:start}
.pp-jobcard-hd .pp-grow{display:none}
.pp-stream{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:2px 7px;border-radius:99px;background:var(--bg-card);border:1px solid var(--border-base);color:var(--fg-secondary);white-space:nowrap}
.pp-jobcard-meta{flex-wrap:wrap;row-gap:2px}
.pp-track-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
.pp-stage{min-height:96px;padding:10px 12px}
.pp-stage-head{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:6px}
.pp-stage-name{font-size:12.5px;line-height:1.3;white-space:normal}
.pp-stage-desc{font-size:10.5px;line-height:1.4}
.pp-stage-foot{flex-wrap:wrap;gap:4px}
.pp-detail-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important}
.pp-kstat-v{font-size:12.5px;word-break:break-word}
.pp-hero{grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr)}
.pp-hero-stats{gap:12px 20px}
.pp-seg-btn{display:inline-flex;align-items:center;gap:5px}
.pp-tab{white-space:nowrap}
@media (max-width:1280px){.pp-ops-row-main{grid-template-columns:1fr!important}.pp-hero{grid-template-columns:1fr}}

.pp-stream[data-size]{flex-direction:row!important;border:1px solid var(--border-base)!important;border-radius:99px!important;overflow:visible!important;display:inline-flex!important;width:auto!important}
.pp-jobcard{text-align:left}
.pp-jobcard-hd{grid-template-columns:10px 1fr!important}
.pp-jobcard-hd .pp-dot{width:8px;height:8px}
.pp-stage-head .pp-grow{display:none}

.pp-jobcard{overflow:visible!important;height:auto}
.pp-jobcard>*{flex-shrink:0}
.pp-err-inline{line-height:1.4;white-space:normal}

/* Job detail v2 */
.jd{background:var(--bg-card);border:1px solid var(--border-base);border-radius:10px;display:flex;flex-direction:column}
.jd-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-base);flex-wrap:wrap}
.jd-hd-l{display:flex;align-items:center;gap:12px;min-width:0}
.jd-hd-r{display:flex;gap:6px}
.jd-id{font-size:14px;font-weight:600;color:var(--fg-primary)}
.jd-sub{font-size:11px;color:var(--fg-muted);margin-top:2px}
.jd-prog{padding:14px 16px;border-bottom:1px solid var(--border-base);display:flex;flex-direction:column;gap:8px}
.jd-prog-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--fg-secondary)}
.jd-prog-row b{color:var(--fg-primary);font-weight:600}
.jd-prog-pct{font-size:16px;font-weight:700;color:var(--accent-primary)}
.jd-prog-bar{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.jd-seg{height:6px;border-radius:2px;background:var(--bg-inset)}
.jd-seg.is-done{background:var(--sev-low)}
.jd-seg.is-cur{background:var(--accent-primary);animation:pp-pulse 1.6s ease-in-out infinite}
.jd-prog-meta{display:flex;gap:16px;font-size:10px;color:var(--fg-muted)}
.jd-fail{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-base);background:color-mix(in oklab,var(--sev-critical) 7%,transparent);color:var(--sev-critical)}
.jd-fail-t{font-size:13px;font-weight:600;color:var(--fg-primary)}
.jd-fail-m{font-size:12px;color:var(--sev-critical);margin-top:2px}
.jd-fail-fix{font-size:11px;color:var(--fg-secondary);margin-top:8px;line-height:1.5}
.jd-fail-fix .caps{margin-right:6px}
.jd-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--border-base)}
.jd-fact-g{padding:12px 16px;border-right:1px solid var(--border-base);display:flex;flex-direction:column;gap:6px}
.jd-fact-g:last-child{border-right:0}
.jd-fact-h{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);font-weight:600;margin-bottom:2px}
.jd-kv{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--fg-secondary)}
.jd-kv b{color:var(--fg-primary);font-weight:500;font-size:12px}
.jd-sec{padding:12px 16px 14px;border-bottom:1px solid var(--border-base)}
.jd-sec:last-child{border-bottom:0}
.jd-sec-h{font-size:12px;font-weight:600;margin-bottom:10px;display:flex;gap:8px;align-items:baseline}
.jd-sec-h .sub{font-weight:400;color:var(--fg-muted);font-size:11px}
.jd-qc{display:flex;flex-direction:column;gap:8px}
.jd-qc-row{display:grid;grid-template-columns:170px minmax(0,1fr) 80px 64px;gap:12px;align-items:center;font-size:12px}
.jd-qc-l{color:var(--fg-secondary)}
.jd-qc-bar{position:relative;height:6px;background:var(--bg-inset);border-radius:99px}
.jd-qc-fill{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--fg-muted)}
.jd-qc-row.is-pass .jd-qc-fill{background:var(--sev-low)}
.jd-qc-row.is-warn .jd-qc-fill{background:var(--sev-medium)}
.jd-qc-th{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--fg-primary);opacity:.6;border-radius:1px}
.jd-qc-v{text-align:right;color:var(--fg-primary)}
.jd-qc-s{display:inline-flex;align-items:center;gap:4px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted)}
.jd-qc-row.is-pass .jd-qc-s{color:var(--sev-low)}
.jd-qc-row.is-warn .jd-qc-s{color:var(--sev-medium)}
.jd-outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.jd-out-g{display:flex;flex-direction:column;gap:4px}
.jd-out-g .caps{margin-bottom:2px}
.jd-out{display:grid;grid-template-columns:58px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;background:var(--bg-inset);border:1px solid var(--border-base);font-size:12px;min-height:32px}
.jd-out-tag{font-size:9px;color:var(--fg-muted);letter-spacing:.04em}
.jd-out-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jd-out-sz{font-size:10px;color:var(--fg-muted)}
.jd-out-s{font-size:10px;color:var(--fg-muted)}
.jd-out.is-ready{border-color:color-mix(in oklab,var(--sev-low) 30%,var(--border-base))}
.jd-out.is-building .jd-out-s{color:var(--accent-primary)}
.jd-out.is-queued,.jd-out.is-blocked{opacity:.55}
.jd-out.is-blocked .jd-out-s{color:var(--sev-critical)}
@media (max-width:1400px){.jd-outs{grid-template-columns:1fr 1fr}.jd-qc-row{grid-template-columns:140px minmax(0,1fr) 70px 60px}}
@media (max-width:1100px){.jd-facts,.jd-outs{grid-template-columns:1fr}.jd-fact-g{border-right:0;border-bottom:1px solid var(--border-base)}}

/* Log v2 */
.lg{background:var(--bg-card);border:1px solid var(--border-base);border-radius:10px;display:flex;flex-direction:column;min-width:0;height:460px}
.lg-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border-base)}
.lg-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
.lg-live{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--sev-low);padding:1px 7px;border-radius:99px;background:color-mix(in oklab,var(--sev-low) 12%,transparent)}
.lg-live i{width:6px;height:6px;border-radius:99px;background:currentColor;animation:pp-pulse 1.4s infinite}
.lg-live.is-paused{color:var(--sev-medium);background:color-mix(in oklab,var(--sev-medium) 12%,transparent)}
.lg-live.is-paused i,.lg-live.is-off i{animation:none}
.lg-live.is-off{color:var(--fg-muted);background:var(--bg-inset)}
.lg-hd-r{display:flex;gap:4px}
.lg-btn{width:26px;height:26px;display:grid;place-items:center;background:transparent;border:1px solid var(--border-base);border-radius:6px;color:var(--fg-secondary);cursor:pointer}
.lg-btn:hover{border-color:var(--border-strong);color:var(--fg-primary)}
.lg-tools{padding:8px 14px;border-bottom:1px solid var(--border-base);display:flex;flex-direction:column;gap:8px}
.lg-lvls{display:flex;gap:4px;flex-wrap:wrap}
.lg-lvl{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;border:1px solid var(--border-base);background:transparent;color:var(--fg-secondary);font-size:11px;cursor:pointer}
.lg-lvl em{font-style:normal;font-family:var(--font-mono);font-size:10px;color:var(--fg-muted)}
.lg-lvl.is-on{background:var(--bg-active);color:var(--fg-primary);border-color:var(--border-strong)}
.lg-lvl-W.is-on{border-color:color-mix(in oklab,var(--sev-medium) 50%,transparent);color:var(--sev-medium)}
.lg-lvl-E.is-on{border-color:color-mix(in oklab,var(--sev-critical) 50%,transparent);color:var(--sev-critical)}
.lg-row2{display:flex;gap:6px}
.lg-search{flex:1;display:flex;align-items:center;gap:6px;padding:0 8px;height:26px;background:var(--bg-inset);border:1px solid var(--border-base);border-radius:6px;color:var(--fg-muted)}
.lg-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--fg-primary);font-size:11px;font-family:var(--font-sans)}
.lg-stage{height:26px;background:var(--bg-inset);border:1px solid var(--border-base);border-radius:6px;color:var(--fg-primary);font-size:11px;padding:0 6px}
.lg-body{flex:1;min-height:0;overflow:auto;font-family:var(--font-mono);font-size:11px;padding:4px 0}
.lg-ln{display:grid;grid-template-columns:58px 40px 74px minmax(0,1fr);gap:8px;padding:3px 14px;line-height:1.45;border-left:2px solid transparent}
.lg-ln:hover{background:var(--bg-hover)}
.lg-t{color:var(--fg-muted)}
.lg-l{font-size:9px;text-transform:uppercase;letter-spacing:.06em;padding-top:1px;color:var(--fg-muted)}
.lg-s{font-size:10px;color:var(--fg-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-m{color:var(--fg-primary);overflow-wrap:anywhere}
.lg-info .lg-l{color:var(--accent-primary)}
.lg-ok .lg-l{color:var(--sev-low)}
.lg-debug .lg-m{color:var(--fg-muted)}
.lg-warn{background:color-mix(in oklab,var(--sev-medium) 6%,transparent);border-left-color:var(--sev-medium)}
.lg-warn .lg-l,.lg-warn .lg-m{color:var(--sev-medium)}
.lg-error{background:color-mix(in oklab,var(--sev-critical) 8%,transparent);border-left-color:var(--sev-critical)}
.lg-error .lg-l,.lg-error .lg-m{color:var(--sev-critical)}
.lg-empty{padding:24px;text-align:center;color:var(--fg-muted);font-family:var(--font-sans)}
.lg-foot{display:flex;align-items:center;gap:10px;padding:7px 14px;border-top:1px solid var(--border-base);font-size:10px;color:var(--fg-muted)}
.lg-jump{background:transparent;border:0;padding:0;font:inherit;color:var(--sev-medium);cursor:pointer}
.lg-jump.is-err{color:var(--sev-critical)}
.lg-jump.is-follow{margin-left:auto;color:var(--accent-primary)}
/* Fleet v2 */
.fl{background:var(--bg-card);border:1px solid var(--border-base);border-radius:10px;display:flex;flex-direction:column}
.fl-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border-base)}
.fl-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
.fl-sum{font-size:10px;color:var(--fg-muted)}
.fl-cap{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border-base)}
.fl-cap-it{padding:8px 14px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--border-base)}
.fl-cap-it:last-child{border-right:0}
.fl-cap-it b{font-size:14px;font-weight:600}
.fl-nodes{display:flex;flex-direction:column}
.fl-node{padding:10px 14px;border-bottom:1px solid var(--border-base);display:flex;flex-direction:column;gap:7px}
.fl-node-hd{display:grid;grid-template-columns:8px auto minmax(0,1fr) auto;gap:8px;align-items:center}
.fl-dot{width:8px;height:8px;border-radius:99px;background:var(--fg-muted)}
.fl-node.is-busy .fl-dot{background:var(--accent-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent-primary) 25%,transparent)}
.fl-node.is-idle .fl-dot{background:var(--sev-low)}
.fl-node.is-offline{opacity:.6}
.fl-name{font-size:12px;font-weight:600}
.fl-kind{font-size:10px;color:var(--fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-st{font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;padding:2px 7px;border-radius:99px;background:var(--bg-inset);color:var(--fg-muted)}
.fl-st-busy{color:var(--accent-primary);background:color-mix(in oklab,var(--accent-primary) 12%,transparent)}
.fl-st-idle{color:var(--sev-low);background:color-mix(in oklab,var(--sev-low) 12%,transparent)}
.fl-meters{display:flex;flex-direction:column;gap:4px}
.fl-m{display:grid;grid-template-columns:36px minmax(0,1fr) 78px;gap:8px;align-items:center;font-size:10px;color:var(--fg-muted)}
.fl-m b{font-size:10px;font-weight:500;color:var(--fg-secondary);text-align:right}
.fl-bar{height:4px;background:var(--bg-inset);border-radius:99px;overflow:hidden}
.fl-bar i{display:block;height:100%;background:var(--accent-primary);border-radius:99px}
.fl-bar i.hot{background:var(--sev-high)}
.fl-node-ft{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--fg-muted);flex-wrap:wrap}
.fl-job{color:var(--fg-primary);font-size:10px}
.fl-stage{color:var(--fg-secondary)}
.fl-eta{margin-left:auto}
.fl-temp{margin-left:auto}
.fl-eta+.fl-temp{margin-left:0}
.fl-temp.hot{color:var(--sev-high)}
.fl-q{padding:10px 14px 12px}
.fl-q-h{margin-bottom:6px}
.fl-q-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--border-base)}
.fl-q-n{font-size:10px;color:var(--fg-muted)}
.fl-q-id{font-size:11px}
.fl-q-s{font-size:10px;color:var(--fg-muted)}
.fl-q-r{text-align:right;font-size:10px}

.pp-hero{grid-template-columns:minmax(0,1fr) minmax(220px,300px)!important}
.pp-hero-note{display:flex;gap:10px;align-items:flex-start;align-self:center;padding:14px;border:1px dashed var(--border-elevated);border-radius:10px;color:var(--fg-muted);font-size:11px;line-height:1.5}
.pp-hero-note b{display:block;color:var(--fg-primary);font-size:12px;margin-bottom:2px}
.jd-files{margin-left:auto;order:3;background:transparent;border:0;color:var(--accent-primary);font-size:11px;font-weight:500;cursor:pointer;padding:0}

.pp-dot-active .pp-dot-core{background:var(--accent-primary)}
.pp-dot-active .pp-dot-halo{background:var(--accent-primary);animation:pp-pulse 1.4s infinite}
.pp-dot-ok .pp-dot-core{background:var(--sev-low)}
.pp-dot-warn .pp-dot-core{background:var(--sev-medium)}
.pp-dot-crit .pp-dot-core{background:var(--sev-critical)}
.pp-dot .pp-dot-core{background:var(--fg-muted)}
.pp-dot.pp-dot-active .pp-dot-core{background:var(--accent-primary)}
.pp-dot.pp-dot-ok .pp-dot-core{background:var(--sev-low)}
.pp-dot.pp-dot-warn .pp-dot-core{background:var(--sev-medium)}
.pp-dot.pp-dot-crit .pp-dot-core{background:var(--sev-critical)}