/* TRAILER · two source swimlanes converging into the aggregator
   ------------------------------------------------------------------ */

#trailer.trailer{
  max-width:1280px;margin:18px auto 32px;padding:24px 28px 28px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 6px 24px rgba(30,35,64,.06);
}
.trailer .section-eyebrow{
  font-family:var(--font-brand);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text3);margin-bottom:14px;
}

.swimlanes{
  display:grid;grid-template-columns:1fr;gap:14px;position:relative;
}

/* ---------- a single lane ---------- */
.lane{
  display:grid;grid-template-columns:180px 1fr;align-items:center;gap:14px;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(90deg,var(--surface-2) 0%,#fff 60%);
}
.lane-l{border-left:4px solid var(--blue)}
.lane-r{border-left:4px solid var(--teal)}

.lane-label{display:flex;align-items:center;gap:10px}
.ll-icon{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);font-size:18px;flex:none;
}
.ll-title{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:14px;line-height:1.1}
.ll-sub{font-size:11px;color:var(--text3);margin-top:2px}

.lane-flow{
  display:flex;align-items:stretch;gap:6px;flex-wrap:nowrap;overflow-x:auto;
  padding:2px 2px;
}
.lane-flow .node{
  flex:1 1 0;min-width:96px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;text-align:center;font-size:12px;font-weight:600;color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;line-height:1.25;
}
.lane-flow .node small{
  display:block;font-weight:500;font-size:10px;color:var(--text3);margin-top:2px;
  font-family:var(--font-mono);
}
.lane-l .lane-flow .node.src{background:var(--blue-lt);border-color:#bcd1ff;color:var(--blue-2)}
.lane-l .lane-flow .node.out{background:var(--blue);border-color:var(--blue-2);color:#fff}
.lane-r .lane-flow .node.src{background:var(--teal-lt);border-color:#9fe5d9;color:var(--teal)}
.lane-r .lane-flow .node.out{background:var(--teal);border-color:var(--teal);color:#fff}
.lane-r .lane-flow .node.out small{color:rgba(255,255,255,.85)}
.lane-l .lane-flow .node.out small{color:rgba(255,255,255,.85)}

.src-stack{display:flex;flex-direction:column;gap:2px;font-size:11px;line-height:1.3}
.src-stack span{display:block}

.arrow{
  align-self:center;color:var(--text4);font-weight:700;font-size:14px;
  flex:none;padding:0 2px;
}

/* ---------- convergence ---------- */
.lane-merge{
  display:flex;justify-content:center;gap:140px;margin:-4px 0 -4px;
  pointer-events:none;
}
.merge-arrow{
  font-size:22px;line-height:1;color:var(--text4);
}
.merge-arrow.l{color:var(--blue)}
.merge-arrow.r{color:var(--teal)}

/* ---------- aggregator ---------- */
.aggregator{
  position:relative;border-radius:14px;padding:16px 18px;
  background:linear-gradient(135deg,#0f172a 0%,#1e2340 60%,#0d9488 130%);
  color:#fff;box-shadow:0 8px 28px rgba(13,148,136,.18);
  border:1px solid #0d9488;
}
.agg-tag{
  display:inline-block;font-family:var(--font-brand);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:#a7f3d0;
  background:rgba(13,148,136,.25);border:1px solid rgba(167,243,208,.35);
  padding:3px 8px;border-radius:999px;margin-bottom:8px;
}
.agg-title{
  font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;
  margin-bottom:12px;
}
.agg-stages{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.agg-step{
  flex:1 1 0;min-width:130px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);border-radius:10px;
  padding:10px 12px;font-size:12px;font-weight:600;line-height:1.3;
  color:#fff;position:relative;
}
.agg-step .n{
  display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--gold);color:#fff;font-size:10px;font-weight:800;margin-right:6px;
}
.agg-step small{
  display:block;font-weight:500;font-size:10px;color:#cbd5e1;margin-top:3px;
  font-family:var(--font-mono);
}
.agg-sep{align-self:center;color:#a7f3d0;font-weight:700;font-size:16px}

.agg-outputs{
  margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;
}
.agg-outputs span{
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;
}
.agg-outputs .eligible{background:rgba(22,163,74,.25);border-color:#86efac;color:#bbf7d0}
.agg-outputs .forecast{background:rgba(37,99,235,.25);border-color:#93c5fd;color:#dbeafe}
.agg-outputs .mke    {background:rgba(217,119,6,.28); border-color:#fcd34d;color:#fde68a}
.agg-outputs .cond   {background:rgba(220,38,38,.22); border-color:#fca5a5;color:#fecaca}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .lane{grid-template-columns:1fr;}
  .lane-flow{flex-wrap:wrap}
  .lane-flow .node{flex:1 1 40%}
  .arrow{display:none}
  .lane-merge{gap:60px}
  .agg-stages{flex-direction:column}
  .agg-sep{display:none}
}