/* ============================================================
 * css/pages/pipeline.css — TinkyTown SDR Pipeline view shell
 *
 * Owns the overlay chrome rendered by js/views/pipeline.js
 * (P2.T1). The stage-filter strip itself is owned by
 * /css/components/stage-filter.css; this page stylesheet only
 * covers the wrapping <section>, header, helper line, and the
 * "degraded" fallback notice shown when stage-filter.js fails
 * to load.
 *
 * Phase 5 audit #3: was inline style= strings on every node in
 * buildOverlayMarkup(). Pipeline isn't on the hottest path
 * (rendered once per tab switch, not per filter change) but the
 * audit calls it out for inline-style sprawl, and matching
 * tasks.js's class-only output keeps the codebase consistent.
 *
 * Brand tokens only — no raw hex (token fallbacks allowed for
 * cold-cache cases where tokens.css hasn't applied yet).
 *
 * Spec: docs/specs/tinkytown-platform-spec.md §3 (Brand),
 *       docs/specs/QA-AUDIT-PHASE-5.md finding #3.
 * Load order: AFTER /css/tokens.css and /css/components/stage-filter.css.
 * ============================================================ */

.tt-pipeline-overlay {
  padding: 1.2rem 0 0;
  font-family: var(--f-sans, 'General Sans', system-ui, sans-serif);
  color: var(--text-primary, #fff);
}

.tt-pipeline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
}

.tt-pipeline-title {
  font-family: var(--f-serif, 'Fraunces', serif);
  font-size: 1.45rem;
  margin: 0;
  color: var(--text-primary, #fff);
}

.tt-pipeline-sub {
  font-size: 0.84rem;
  margin: 0;
  color: var(--text-muted, rgba(255, 255, 255, 0.65));
}

/* Fallback notice shown when js/components/stage-filter.js failed to load.
 * Uses --green-soft to signal "non-fatal info" — the legacy status
 * dropdown still works, so this is informational, not an error. */
.tt-pipeline-degraded {
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: var(--green-soft, rgba(74, 222, 128, 0.08));
  color: var(--text-muted, rgba(255, 255, 255, 0.7));
  font-size: 0.84rem;
}