/* ====================================================================
   Data Lineage panel v2 (lx-) + record problem banner (lxb-)
   ==================================================================== */

/* Wider shell for the lineage panel */
.rp--wide { width: 650px; }

.lx { display: flex; flex-direction: column; gap: 14px; }

/* ---------- status dots ---------- */
.lx-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; flex: none;
  background: var(--fg-light-muted);
}
.lx-dot--ok       { background: var(--accent-green); }
.lx-dot--conflict { background: var(--accent-orange); }
.lx-dot--warn     { background: var(--accent-orange); }
.lx-dot--stale    { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent-orange); }
.lx-dot--fail     { background: var(--accent-red); }
.lx-dot--run      { background: var(--accent-purple-ai); animation: lxPulse 1s ease-in-out infinite; }
@keyframes lxPulse { 50% { opacity: 0.35; } }

/* ---------- health strip ---------- */
.lx-health {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
}
.lx-health--warn { background: rgba(226, 133, 82, 0.07); border-color: rgba(226, 133, 82, 0.35); }
.lx-health--ok   { background: rgba(82, 178, 110, 0.06); border-color: rgba(82, 178, 110, 0.30); }
.lx-health__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lx-health__main strong { font: 500 13px/1.3 'Inter'; color: var(--fg-dark); }
.lx-health__main span { font: 400 12px/1.35 'Inter'; color: var(--fg-muted); }

/* ---------- buttons ---------- */
.lx-btn {
  height: 32px; padding: 0 14px;
  border-radius: 8px; cursor: pointer;
  font: 500 12.5px/1 'Inter'; letter-spacing: -0.005em;
  border: 1px solid var(--border-light);
  background: var(--bg-app); color: var(--fg-base);
  white-space: nowrap;
}
.lx-btn:hover { background: var(--bg-hover); }
.lx-btn--primary { background: var(--fg-dark); border-color: var(--fg-dark); color: var(--fg-inverted); }
.lx-btn--primary:hover { background: #000; }
.lx-btn--primary:disabled { opacity: 0.55; cursor: default; }
.lx-btn--sm { height: 28px; padding: 0 11px; font-size: 12px; flex: none; }
.lx-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 12px/1 'Inter'; color: var(--fg-dark);
  text-decoration: underline; text-underline-offset: 2px;
}
.lx-linkbtn:hover { color: #000; }

/* ---------- chips ---------- */
.lx-chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font: 500 11px/1 'Inter'; flex: none;
  border: 1px solid var(--border-light);
  color: var(--fg-muted); background: var(--bg-panel);
}
.lx-chip--ok   { color: #3C7E51; background: rgba(82,178,110,0.10); border-color: rgba(82,178,110,0.30); }
.lx-chip--warn { color: #A95B2E; background: rgba(226,133,82,0.10); border-color: rgba(226,133,82,0.35); }
.lx-chip--run  { color: var(--accent-purple-ai); background: rgba(114,76,158,0.08); border-color: rgba(114,76,158,0.30); }
.lx-chip--btn  { cursor: pointer; }
.lx-chip--btn:hover { background: rgba(226,133,82,0.18); }

/* ---------- groups (Sources / Used by) ---------- */
.lx-group { display: flex; flex-direction: column; gap: 8px; }
.lx-group__head { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.lx-group__t { font: 500 13px/1.2 'Inter'; color: var(--fg-dark); }
.lx-group__count { font: 400 12px/1 'Inter'; color: var(--fg-light-muted); }
.lx-group__via { margin-left: auto; font: 400 11px/1 'Inter'; color: var(--fg-light-muted); }
.lx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.lx-list--dense { gap: 3px; }

/* ---------- source / used-by rows ---------- */
.lx-src {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-app);
}
.lx-src--conflict { border-color: rgba(226,133,82,0.45); background: rgba(226,133,82,0.04); }
.lx-src--stale    { border-style: dashed; }
.lx-src__ico { color: var(--fg-muted); display: inline-flex; flex: none; }
.lx-src__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lx-src__t {
  font: 400 13px/1.25 'Inter'; color: var(--fg-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lx-src__s { display: flex; align-items: center; gap: 6px; font: 400 11.5px/1.3 'Inter'; color: var(--fg-muted); min-width: 0; }
.lx-src__s span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-src__sub { font: 400 11px/1.3 'Inter'; color: var(--fg-light-muted); }
.lx-src__ext { color: var(--fg-light-muted); display: inline-flex; flex: none; opacity: 0; transition: opacity 120ms ease; }
.lx-src:hover .lx-src__ext { opacity: 1; }

/* ---------- nodes (agent / record) ---------- */
.lx-node {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-panel);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.lx-node--agent { border-color: rgba(114, 76, 158, 0.35); background: rgba(114, 76, 158, 0.04); }
.lx-node__head { display: flex; align-items: center; gap: 10px; }
.lx-node__headtxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lx-node__t { font: 500 13px/1.25 'Inter'; color: var(--fg-dark); }
.lx-node__s { font: 400 11.5px/1.3 'Inter'; color: var(--fg-muted); }
.lx-agent__badge {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-purple-ai); color: #fff;
}
.lx-self__badge {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-app); border: 1px solid var(--border-light);
  color: var(--fg-muted);
}

/* ---------- agent steps ---------- */
.lx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lx-step {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0;
  position: relative;
}
.lx-step + .lx-step::before {
  content: '';
  position: absolute; left: 8px; top: -7px;
  width: 1px; height: 12px;
  background: var(--border-light);
}
.lx-step__mark {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.lx-step__mark--ok   { background: rgba(82,178,110,0.14); color: #3C7E51; }
.lx-step__mark--warn { background: rgba(226,133,82,0.16); color: #A95B2E; }
.lx-step__mark--run  { background: rgba(114,76,158,0.10); }
.lx-step__mark--idle { box-shadow: inset 0 0 0 1.5px var(--border-light); }
.lx-step__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lx-step__t { font: 500 12.5px/1.3 'Inter'; color: var(--fg-dark); }
.lx-step--idle .lx-step__t { color: var(--fg-light-muted); }
.lx-step__d { font: 400 11.5px/1.35 'Inter'; color: var(--fg-muted); }
.lx-step--idle .lx-step__d { color: var(--fg-light-muted); }
.lx-step__time { font: 400 11px/1.3 'Inter'; color: var(--fg-light-muted); flex: none; margin-top: 2px; }

.lx-spin {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--accent-purple-ai);
  border-top-color: transparent;
  animation: lxSpin 700ms linear infinite;
  display: inline-block;
}
.lx-spin--sm { width: 8px; height: 8px; border-width: 1.5px; border-color: currentColor; border-top-color: transparent; }
@keyframes lxSpin { to { transform: rotate(360deg); } }

/* ---------- run log ---------- */
.lx-runlog__toggle {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: 500 12px/1 'Inter'; color: var(--fg-muted);
}
.lx-runlog__toggle:hover { color: var(--fg-dark); }
.lx-runlog__count { font: 400 11px/1 'Inter'; color: var(--fg-light-muted); }
.lx-caret { display: inline-flex; transition: transform 140ms ease; }
.lx-caret.is-open { transform: rotate(90deg); }
.lx-runlog {
  list-style: none; margin: 0; padding: 4px 0 0;
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--border-light);
}
.lx-run {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 2px;
  font: 400 12px/1.3 'Inter'; color: var(--fg-muted);
  border-radius: 6px;
}
.lx-run:hover { background: var(--bg-hover); }
.lx-run__d { color: var(--fg-dark); font-weight: 500; flex: none; min-width: 122px; }
.lx-run__note { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-run__link {
  font: 500 11px/1 'Inter'; color: var(--fg-muted);
  text-decoration: underline; text-underline-offset: 2px;
  opacity: 0; transition: opacity 120ms ease; flex: none;
}
.lx-run:hover .lx-run__link { opacity: 1; color: var(--fg-dark); }

/* ---------- record node outputs ---------- */
.lx-outs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.lx-out {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 7px;
  background: transparent; cursor: pointer; text-align: left;
}
.lx-out:hover { background: var(--bg-hover); }
.lx-out__t { font: 500 12.5px/1.2 'Inter'; color: var(--fg-dark); flex: none; min-width: 76px; }
.lx-out__s { font: 400 11.5px/1.3 'Inter'; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- connectors ---------- */
.lx-conn {
  display: flex; flex-direction: column; align-items: center;
  color: var(--fg-light-muted);
  margin: -4px 0;
}
.lx-conn__line { width: 1px; height: 10px; background: var(--border-light); }
.lx-conn svg { margin-top: -3px; }

/* ---------- compact variant ---------- */
.lx-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.lx-stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border-light); border-radius: 10px;
  background: var(--bg-panel);
}
.lx-stat--warn { border-color: rgba(226,133,82,0.40); background: rgba(226,133,82,0.05); }
.lx-stat__v { font: 500 18px/1 'Inter'; color: var(--fg-dark); letter-spacing: -0.01em; }
.lx-stat__v--sm { font-size: 13px; line-height: 1.35; }
.lx-stat--warn .lx-stat__v { color: #A95B2E; }
.lx-stat__k { font: 400 11px/1.2 'Inter'; color: var(--fg-muted); }

.lx-sec { display: flex; flex-direction: column; gap: 8px; }
.lx-sec__head {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  color: var(--fg-base);
}
.lx-sec__head:hover .lx-sec__t { color: var(--fg-dark); }
.lx-sec__t { font: 500 13px/1.2 'Inter'; color: var(--fg-dark); }
.lx-sec__body { display: flex; flex-direction: column; gap: 6px; }

/* ---------- timeline variant ---------- */
.lx-tl { display: flex; flex-direction: column; gap: 16px; }
.lx-tl__group { display: flex; flex-direction: column; gap: 6px; }
.lx-tl__day {
  font: 500 11px/1.2 'Inter'; color: var(--fg-light-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding-left: 2px;
}
.lx-tl__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  position: relative;
}
.lx-tl__list::before {
  content: '';
  position: absolute; left: 11px; top: 10px; bottom: 10px;
  width: 1px; background: var(--border-light);
}
.lx-tl__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 7px 0;
  position: relative;
}
.lx-tl__node {
  width: 23px; height: 23px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-app);
  border: 1px solid var(--border-light);
  color: var(--fg-muted);
  position: relative; z-index: 1;
}
.lx-tl__node--ok       { border-color: rgba(82,178,110,0.45);  color: #3C7E51; }
.lx-tl__node--warn,
.lx-tl__node--conflict { border-color: rgba(226,133,82,0.55);  color: #A95B2E; }
.lx-tl__node--stale    { border-style: dashed; }
.lx-tl__node--fail     { border-color: rgba(208,74,63,0.55);   color: var(--accent-red); }
.lx-tl__node--run      { border-color: rgba(114,76,158,0.45);  color: var(--accent-purple-ai); }
.lx-tl__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 2px; }
.lx-tl__t { font: 500 12.5px/1.35 'Inter'; color: var(--fg-dark); }
.lx-tl__item--fail .lx-tl__t { color: var(--accent-red); }
.lx-tl__sub { font: 400 11.5px/1.4 'Inter'; color: var(--fg-muted); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lx-tl__time { font: 400 11px/1.3 'Inter'; color: var(--fg-light-muted); flex: none; padding-top: 3px; }

/* ---------- footer ---------- */
.lx-foot { display: flex; align-items: center; gap: 12px; }
.lx-foot__sched {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 auto; min-width: 0;
  font: 400 12px/1.3 'Inter'; color: var(--fg-muted);
}
.lx-foot__sched svg { flex: none; color: var(--fg-light-muted); }
.lx-foot__sched span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-foot__btns { display: flex; align-items: center; gap: 8px; flex: none; }

/* ====================================================================
   Problem banner above the record (lxb-)
   ==================================================================== */
.lxb {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px 8px 16px;
  background: rgba(226, 133, 82, 0.07);
  border-bottom: 1px solid rgba(226, 133, 82, 0.30);
  min-height: 42px;
}
.lxb__ico { color: #A95B2E; display: inline-flex; flex: none; }
.lxb__txt {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: 6px;
  font: 400 12.5px/1.35 'Inter'; color: var(--fg-base);
  white-space: nowrap; overflow: hidden;
}
.lxb__txt strong { font-weight: 500; color: var(--fg-dark); flex: none; }
.lxb__sep { color: var(--fg-light-muted); flex: none; }
.lxb__chain {
  color: var(--fg-light-muted);
  overflow: hidden; text-overflow: ellipsis;
  margin-left: 8px;
  font-size: 11.5px;
}
.lxb__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.lxb__btn {
  height: 28px; padding: 0 11px;
  border-radius: 7px; cursor: pointer;
  font: 500 12px/1 'Inter';
  border: 1px solid rgba(226,133,82,0.45);
  background: var(--bg-app); color: var(--fg-dark);
  white-space: nowrap;
}
.lxb__btn:hover { background: rgba(226,133,82,0.10); }
.lxb__btn--primary { background: var(--fg-dark); border-color: var(--fg-dark); color: var(--fg-inverted); }
.lxb__btn--primary:hover { background: #000; }
.lxb__x {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--fg-muted); cursor: pointer;
}
.lxb__x:hover { background: rgba(226,133,82,0.12); color: var(--fg-dark); }

@media (max-width: 900px) {
  .lxb__chain { display: none; }
}
@media (max-width: 1024px) {
  .lx-stats { grid-template-columns: repeat(2, 1fr); }
  .lxb { flex-wrap: wrap; }
  .lxb__txt { white-space: normal; }
}