:root {
  --lineage-input: #29b7c5;
  --lineage-process: #d9a441;
  --lineage-module-one: #32b67a;
  --lineage-module-two: #a78bfa;
  --lineage-danger: #ff735c;
}

.lineage-shell .workspace { min-width: 0; }
.lineage-shell main { padding-bottom: 4rem; }
.lineage-topbar h1 { max-width: 900px; }
.lineage-back-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: .6rem .9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
}
.lineage-back-link:hover { border-color: var(--teal-600); color: var(--teal-600); }

.lineage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, .8fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin: 1.25rem 0 1rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-top: 3px solid var(--lineage-input);
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--lineage-input) 16%, transparent), transparent 22rem),
    var(--panel);
}
.lineage-hero h2 { margin: .25rem 0 .7rem; max-width: 900px; font-size: clamp(1.5rem, 2.7vw, 2.45rem); line-height: 1.2; }
.lineage-hero > div > p:last-child { margin: 0; max-width: 880px; color: var(--muted); }
.lineage-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.lineage-counts div { min-height: 104px; display: grid; align-content: center; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--soft) 75%, transparent); }
.lineage-counts strong { font: 750 2.05rem/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--lineage-input); }
.lineage-counts span { margin-top: .35rem; color: var(--muted); font-size: .76rem; }

.live-readiness {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) minmax(420px, auto);
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}
.live-readiness.is-ready { border-color: color-mix(in srgb, var(--green-700) 65%, var(--line)); }
.live-readiness.is-review { border-color: color-mix(in srgb, var(--amber-500) 75%, var(--line)); }
.live-readiness.is-missing { border-color: color-mix(in srgb, var(--lineage-danger) 75%, var(--line)); }
.live-readiness-mark { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: var(--soft); color: var(--muted); font-size: 1.3rem; font-weight: 900; }
.is-ready .live-readiness-mark { color: var(--green-700); background: var(--green-100); }
.is-review .live-readiness-mark { color: var(--amber-700); background: var(--amber-100); }
.is-missing .live-readiness-mark { color: var(--red-700); background: var(--red-100); }
.live-readiness-copy h2 { margin: .05rem 0 .15rem; font-size: 1.15rem; }
.live-readiness-copy p { margin: 0; }
.live-readiness-copy > p:last-child { color: var(--muted); }
.live-readiness-copy .connection-flag-summary {
  display: inline-flex;
  width: fit-content;
  margin: .55rem 0 0;
  padding: .28rem .55rem;
  border: 1px solid color-mix(in srgb, var(--amber-500) 48%, var(--line));
  border-radius: 999px;
  color: var(--amber-700);
  background: color-mix(in srgb, var(--amber-500) 10%, transparent);
  font-size: .7rem;
  line-height: 1.35;
}
.scope-controls { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr); gap: .65rem; }
.scope-controls label { display: grid; gap: .25rem; color: var(--muted); font-size: .73rem; font-weight: 650; }
.scope-controls select { width: 100%; min-height: 42px; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--soft); }

.overview-flow {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr) auto minmax(150px, 1fr) auto minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: .5rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 88%, var(--soft));
}
.overview-flow > div { display: grid; grid-template-columns: 2rem 1fr; gap: .1rem .6rem; align-items: center; min-width: 0; }
.overview-flow span { grid-row: 1 / span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; color: var(--lineage-input); background: color-mix(in srgb, var(--lineage-input) 12%, transparent); font-weight: 800; }
.overview-flow strong, .overview-flow small { min-width: 0; }
.overview-flow small { color: var(--muted); font-size: .7rem; }
.overview-flow b { color: var(--lineage-process); font-size: 1.25rem; }

.lineage-toolbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  gap: .75rem;
  align-items: center;
  margin: 1rem 0;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(12px);
}
.module-filters, .output-group-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.lineage-filter, .group-filter, .lineage-refresh {
  min-height: 38px;
  padding: .48rem .72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
}
.lineage-filter:hover, .group-filter:hover, .lineage-refresh:hover { border-color: var(--lineage-input); color: var(--ink); }
.lineage-filter.is-active, .group-filter.is-active { color: var(--lineage-input); border-color: var(--lineage-input); background: color-mix(in srgb, var(--lineage-input) 10%, transparent); }
.lineage-search { display: flex; align-items: center; gap: .55rem; min-height: 42px; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.lineage-search svg { width: 1.1rem; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.lineage-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
.lineage-refresh { border-radius: 12px; color: var(--ink); }

.lineage-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(270px, .9fr) minmax(310px, 1fr) minmax(360px, 1.2fr);
  gap: 1.1rem;
  min-height: 760px;
}
.connection-layer { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.connection-layer path.connector { fill: none; stroke: color-mix(in srgb, var(--lineage-process) 82%, white); stroke-width: 2.2; stroke-linecap: round; opacity: .9; marker-end: url(#arrow-head); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--lineage-process) 35%, transparent)); }
.connection-layer path.connector.is-secondary { stroke: color-mix(in srgb, var(--lineage-input) 72%, white); stroke-width: 1.6; opacity: .72; }
.connection-layer marker path { fill: var(--lineage-process); }

.lineage-column { position: relative; z-index: 3; min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
.lineage-column > header { margin-bottom: .85rem; }
.lineage-column > header h2 { margin: .12rem 0 .25rem; font-size: 1.05rem; }
.lineage-column > header p:last-child { margin: 0; color: var(--muted); font-size: .78rem; }
.output-column > header > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.output-column > header span { color: var(--muted); font-size: .76rem; }

.input-list { display: grid; gap: .62rem; }
.input-node {
  width: 100%;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: .55rem .65rem;
  align-items: start;
  padding: .82rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  text-align: left;
  background: var(--soft);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.input-node:hover { transform: translateX(3px); border-color: var(--lineage-input); }
.input-node.is-active, .input-node.is-required { border-color: var(--lineage-input); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lineage-input) 55%, transparent); }
.input-status { grid-row: 1 / span 3; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; font-weight: 900; background: var(--panel); }
.input-node[data-status="ready"] .input-status { color: var(--green-700); background: var(--green-100); }
.input-node[data-status="review"] .input-status { color: var(--amber-700); background: var(--amber-100); }
.input-node[data-status="missing"] .input-status { color: var(--red-700); background: var(--red-100); }
.input-node strong, .input-node small, .input-node code { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.input-node strong { font-size: .88rem; }
.input-node small { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.input-node code { color: var(--lineage-input); font-size: .66rem; line-height: 1.45; }
.input-purpose { grid-column: 3; grid-row: 1; align-self: center; color: var(--muted); font-size: .65rem; white-space: nowrap; }

.process-column { border-top: 3px solid var(--lineage-process); }
.process-stack { display: grid; gap: .6rem; padding: .35rem; border-radius: 17px; background: color-mix(in srgb, var(--lineage-process) 7%, transparent); }
.process-stack article { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .7rem; align-items: center; padding: .8rem; border: 1px solid color-mix(in srgb, var(--lineage-process) 30%, var(--line)); border-radius: 13px; background: var(--panel); }
.process-stack article > span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; color: var(--lineage-process); background: color-mix(in srgb, var(--lineage-process) 12%, transparent); font: 700 .73rem/1 "IBM Plex Mono", ui-monospace, monospace; }
.process-stack strong, .process-stack small { display: block; }
.process-stack small { margin-top: .18rem; color: var(--muted); font-size: .72rem; }

.selection-detail { margin-top: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.selection-detail h3 { margin: .1rem 0 .35rem; font: 700 .95rem/1.4 "IBM Plex Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.selection-detail > p { margin: 0 0 .85rem; color: var(--muted); font-size: .78rem; }
.selection-badges, .dependency-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.selection-badges span, .dependency-chips span { padding: .25rem .5rem; border-radius: 999px; color: var(--muted); background: var(--panel); font-size: .67rem; }
.selection-badges .module-one { color: var(--lineage-module-one); }
.selection-badges .module-two { color: var(--lineage-module-two); }
.formula-block { margin: .55rem 0 .8rem; padding: .72rem; border-left: 3px solid var(--lineage-process); border-radius: 0 10px 10px 0; color: var(--ink); background: var(--panel); font: 650 .78rem/1.55 "IBM Plex Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.rule-list { margin: .45rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; color: var(--muted); font-size: .73rem; }
.detail-label { margin: .7rem 0 .25rem; color: var(--lineage-process); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.output-column { border-top: 3px solid var(--lineage-module-two); }
.output-group-filters { margin-bottom: .65rem; max-height: 78px; overflow-y: auto; }
.group-filter { min-height: 30px; padding: .3rem .52rem; font-size: .67rem; }
.output-list { display: grid; gap: .42rem; max-height: 920px; overflow: auto; padding-right: .2rem; scrollbar-color: var(--line-strong) transparent; }
.output-node {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: center;
  padding: .62rem .68rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  text-align: left;
  background: color-mix(in srgb, var(--soft) 78%, transparent);
}
.output-node:hover { border-color: var(--lineage-module-two); }
.output-node.is-active { border-color: var(--lineage-process); background: color-mix(in srgb, var(--lineage-process) 9%, var(--soft)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lineage-process) 45%, transparent); }
.output-node.is-related:not(.is-active) { border-color: color-mix(in srgb, var(--lineage-input) 65%, var(--line)); }
.output-module { display: grid; place-items: center; min-width: 2rem; height: 1.65rem; padding: 0 .32rem; border-radius: 7px; color: var(--lineage-module-two); background: color-mix(in srgb, var(--lineage-module-two) 11%, transparent); font: 750 .61rem/1 "IBM Plex Mono", ui-monospace, monospace; }
.output-node[data-module="1"] .output-module { color: var(--lineage-module-one); background: color-mix(in srgb, var(--lineage-module-one) 11%, transparent); }
.output-node[data-module="1,2"] .output-module { color: var(--lineage-process); background: color-mix(in srgb, var(--lineage-process) 12%, transparent); }
.output-name { min-width: 0; }
.output-name strong { display: block; font: 650 .7rem/1.35 "IBM Plex Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.output-name small { display: block; margin-top: .1rem; color: var(--muted); font-size: .65rem; }
.output-dependency-count { color: var(--muted); font-size: .62rem; white-space: nowrap; }
.empty-output { padding: 2rem 1rem; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }

.lineage-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.lineage-legend > div { display: grid; grid-template-columns: auto 1fr; gap: .05rem .55rem; align-items: center; }
.lineage-legend strong, .lineage-legend small { grid-column: 2; }
.lineage-legend small { color: var(--muted); }
.lineage-legend > p { grid-column: 1 / -1; margin: .25rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.legend-dot { grid-row: 1 / span 2; width: .8rem; height: .8rem; border-radius: 50%; background: var(--muted); }
.legend-dot.is-ready { background: var(--green-700); }
.legend-dot.is-review { background: var(--amber-500); }
.legend-dot.is-missing { background: var(--lineage-danger); }

.toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: grid; gap: .5rem; }
.toast { max-width: 430px; padding: .8rem 1rem; border-radius: 12px; color: #caffeb; background: #15352c; box-shadow: 0 12px 30px #0005; }
.toast.is-error { color: #ffd0ca; background: #4a2422; }

@media (max-width: 1380px) {
  .lineage-board { grid-template-columns: minmax(250px, .85fr) minmax(290px, .9fr) minmax(330px, 1.1fr); }
  .overview-flow { grid-template-columns: repeat(5, minmax(140px, 1fr)); overflow-x: auto; }
  .overview-flow > b { display: none; }
}

@media (max-width: 1080px) {
  .lineage-hero { grid-template-columns: 1fr; }
  .live-readiness { grid-template-columns: auto 1fr; }
  .scope-controls { grid-column: 1 / -1; }
  .lineage-board { grid-template-columns: 1fr; }
  .connection-layer { display: none; }
  .output-list { max-height: none; }
  .input-node:hover { transform: none; }
  .process-column { order: 2; }
  .output-column { order: 3; }
}

@media (max-width: 760px) {
  .lineage-topbar .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .lineage-back-link { width: 100%; justify-content: center; }
  .lineage-counts { grid-template-columns: repeat(2, 1fr); }
  .overview-flow { grid-template-columns: minmax(150px, 1fr); overflow: visible; }
  .lineage-toolbar { position: static; grid-template-columns: 1fr; }
  .scope-controls { grid-template-columns: 1fr; }
  .lineage-legend { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .input-node { transition: none; }
}