/* ============================================================
   Build Pipeline deck — the exhaustive build log.
   Bespoke styles only; everything else rides base.css.
   Every selector prefixed #view-pipeline.
   ============================================================ */

/* ── RIR tools strip ───────────────────────────────────────── */
#view-pipeline .pl-rir-body { padding: 14px; }
#view-pipeline .pl-rir-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 9px;
}
#view-pipeline .pl-rchip {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 11px; border-radius: 10px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  transition: border-color .14s, background .14s, transform .14s;
}
#view-pipeline .pl-rchip:hover { border-color: rgba(95,176,137,0.5); background: var(--card-hover); transform: translateY(-1px); }
#view-pipeline .pl-rchip-glyph {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-size: 14px; border: 1px solid; flex-shrink: 0;
}
#view-pipeline .pl-rchip-main { min-width: 0; flex: 1; }
#view-pipeline .pl-rchip-title {
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
#view-pipeline .pl-rchip-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 10.5px; color: var(--text-faint); text-transform: capitalize;
}
#view-pipeline .pl-rchip-meta .health-dot { width: 7px; height: 7px; }

/* ── control row: search + pill groups ─────────────────────── */
#view-pipeline .pl-controls {
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  margin: 24px 0 18px;
}
#view-pipeline .pl-search { flex: 1; min-width: 240px; }
#view-pipeline .pl-search-wrap { position: relative; display: flex; align-items: center; }
#view-pipeline .pl-search-ic {
  position: absolute; left: 13px; display: inline-flex; color: var(--text-faint); pointer-events: none;
}
#view-pipeline .pl-search-wrap .input { padding-left: 38px; }
#view-pipeline .pl-pillgroups { display: flex; flex-direction: column; gap: 10px; flex: 2; min-width: 280px; }
#view-pipeline .pl-domain-row { gap: 7px; }
#view-pipeline .pl-dpill { display: inline-flex; align-items: center; gap: 6px; }
#view-pipeline .pl-dpill-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#view-pipeline .pl-dpill.active { border-color: var(--dc); color: var(--text); background: color-mix(in srgb, var(--dc) 14%, transparent); }

/* ── main two-column layout ────────────────────────────────── */
#view-pipeline .pl-layout { grid-template-columns: 1fr 320px; align-items: start; gap: 20px; }
#view-pipeline .pl-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--navbar-h) + 16px); }
#view-pipeline .pl-count { font-size: 11px; white-space: nowrap; }
#view-pipeline .pl-listbody { padding: 14px 14px 8px; }
#view-pipeline .pl-list { display: block; }

/* ── expandable build row internals (xrow comes from base.css) ─ */
#view-pipeline .pl-row { border-left-width: 3px; }
#view-pipeline .pl-row.pl-flash { animation: pl-flash 1.2s var(--ease); }
@keyframes pl-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  20% { box-shadow: 0 0 0 2px rgba(95,176,137,0.5); }
}
#view-pipeline .pl-num {
  font-size: 11px; font-weight: 700; color: var(--mint); letter-spacing: .02em;
  border: 1px solid rgba(95,176,137,0.3); background: var(--teal-glow);
  padding: 3px 7px; border-radius: 6px; min-width: 42px; text-align: center; flex-shrink: 0;
}
#view-pipeline .pl-glyph {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-size: 15px; border: 1px solid; flex-shrink: 0;
}
#view-pipeline .pl-titlewrap { flex: 1; min-width: 0; }
#view-pipeline .pl-title {
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--text);
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#view-pipeline .pl-sub { font-size: 11.5px; margin-top: 2px; }
#view-pipeline .pl-domain { flex-shrink: 0; }
#view-pipeline .pl-date { font-size: 11px; flex-shrink: 0; white-space: nowrap; min-width: 86px; text-align: right; }

/* expanded body content */
#view-pipeline .pl-desc { color: var(--text-muted); font-size: 13.5px; line-height: 1.65; margin-bottom: 12px; }
#view-pipeline .pl-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-faint); padding-bottom: 14px;
  border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
#view-pipeline .pl-meta .pl-dot { color: var(--border-light); }
#view-pipeline .pl-links { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
#view-pipeline .pl-links-label { font-size: 10px; letter-spacing: .14em; margin-right: 2px; }

/* ── by-project summary panel ──────────────────────────────── */
#view-pipeline .pl-dsum-body { padding: 8px; }
#view-pipeline .pl-dsum {
  display: flex; align-items: center; gap: 11px; padding: 10px 10px; border-radius: 10px;
  cursor: pointer; transition: background .12s;
}
#view-pipeline .pl-dsum:hover { background: var(--card-hover); }
#view-pipeline .pl-dsum-swatch { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
#view-pipeline .pl-dsum-main { flex: 1; min-width: 0; }
#view-pipeline .pl-dsum-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
#view-pipeline .pl-dsum-name {
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#view-pipeline .pl-dsum-count { font-size: 12px; font-weight: 700; flex-shrink: 0; }

/* ── legend panel ──────────────────────────────────────────── */
#view-pipeline .pl-legend-body { display: flex; flex-direction: column; gap: 12px; }
#view-pipeline .pl-leg { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-muted); }
#view-pipeline .pl-leg b { color: var(--text); font-weight: 600; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 960px) {
  #view-pipeline .pl-layout { grid-template-columns: 1fr; }
  #view-pipeline .pl-side { position: static; }
}
@media (max-width: 620px) {
  #view-pipeline .pl-rir-grid { grid-template-columns: 1fr; }
  #view-pipeline .pl-sub { display: none; }
  #view-pipeline .pl-date { display: none; }
  #view-pipeline .pl-controls { gap: 14px; }
}