.qp-overview-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.qp-overview-toolbar select {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0 8px;
  font-size: 0.875rem;
}

#qp-last-refreshed {
  margin-left: auto;
}

/* Pipeline flow strip — reads left-to-right as the actual data flow, with
   a connecting line between tiles (docs/DESIGN.md §5.2 item 2). */
.qp-flow-strip {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 4px 0 12px;
}

.qp-flow-tile {
  flex: 1 0 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-right: 12px;
  position: relative;
  min-width: 140px;
}

.qp-flow-tile:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -13px;
  width: 12px;
  height: 1px;
  background: var(--border);
}

.qp-flow-tile-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.qp-flow-tile-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.qp-flow-tile-dot-positive { background: var(--positive); }
.qp-flow-tile-dot-negative { background: var(--negative); }
.qp-flow-tile-dot-caution { background: var(--caution); }
.qp-flow-tile-dot-info { background: var(--info); }
.qp-flow-tile-dot-unknown { background: var(--border); }

.qp-flow-tile-label {
  font-size: 0.75rem;
  font-weight: 600;
}

.qp-flow-tile-headline {
  font-size: 0.875rem;
}

.qp-panel-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.qp-live-feed {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 320px;
  overflow-y: auto;
}

.qp-anchor-timeline {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  padding: 8px 0;
}

.qp-anchor-mark {
  width: 10px;
  height: 32px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.qp-anchor-mark-positive { background: var(--positive); }
.qp-anchor-mark-negative { background: var(--negative); }
.qp-anchor-mark-caution { background: var(--caution); }
.qp-anchor-mark-info { background: var(--info); }