/* ===== T5 Chain styles ===== */

/* ---------- Compact horizontal preview (homepage) ---------- */
.chain-preview {
  display: flex; align-items: stretch; gap: var(--space-2);
  overflow-x: auto; padding: var(--space-6) var(--space-1) var(--space-4);
  scrollbar-width: thin;
}
.chain-preview::-webkit-scrollbar { height: 6px; }
.chain-preview::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; }
.chip-node {
  flex: 0 0 154px; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5) var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  border-top: 3px solid var(--color-copper); box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
.chip-node:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--color-copper) 40%, var(--color-border)); }
.chip-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--color-primary-soft), var(--color-primary-soft-2)); color: var(--color-primary); }
.chip-ic svg { width: 22px; height: 22px; }
.chip-n { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-copper); }
.chip-t { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); line-height: 1.25; }
.chip-arrow { flex: 0 0 auto; display: grid; place-items: center; color: var(--color-text-faint); }
.chip-arrow svg { width: 22px; height: 22px; }
@media (max-width: 640px) { .chip-arrow { transform: rotate(90deg); } }

/* ---------- Full interactive map (T5 page) ---------- */
.t5-map {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}
@media (max-width: 900px) { .t5-map { grid-template-columns: 1fr; } }

.t5-rail { display: flex; flex-direction: column; }
.t5-node {
  display: flex; align-items: center; gap: var(--space-4); width: 100%; text-align: left;
  padding: var(--space-3) var(--space-3); position: relative; border-radius: var(--radius-md);
}
.t5-node-rail {
  position: absolute; left: calc(var(--space-3) + 23px); top: 50%; bottom: -50%; width: 2px;
  background: var(--color-divider); z-index: 0;
}
.t5-node:last-child .t5-node-rail { display: none; }
.t5-node-dot {
  position: relative; z-index: 1; flex-shrink: 0; width: 50px; height: 50px; border-radius: var(--radius-full);
  display: grid; place-items: center; background: var(--color-surface);
  border: 2px solid var(--color-border-strong); color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-interactive);
}
.t5-ic svg { width: 24px; height: 24px; }
.t5-node-meta { display: flex; flex-direction: column; }
.t5-node-n { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--color-text-faint); }
.t5-node-t { font-size: var(--text-base); font-weight: 600; color: var(--color-text); line-height: 1.2; }
.t5-node-s { font-size: var(--text-xs); color: var(--color-text-muted); }
.t5-node:hover .t5-node-dot { border-color: var(--color-copper); color: var(--color-copper); }
.t5-node.active .t5-node-dot { background: var(--color-copper); border-color: var(--color-copper); color: #fff; box-shadow: var(--shadow-glow); transform: scale(1.06); }
.t5-node.active .t5-node-t { color: var(--color-copper); }
.t5-node.active { background: var(--color-surface-2); }

.t5-detail { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
@media (max-width: 900px) { .t5-detail { position: static; } }
.t5-detail-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: clamp(var(--space-7), 3vw, var(--space-12));
  box-shadow: var(--shadow-lg); animation: t5fade 0.4s cubic-bezier(0.16,1,0.3,1);
  position: relative; overflow: hidden;
}
.t5-detail-card::after {
  content: ''; position: absolute; right: -40px; bottom: -40px; width: 200px; height: 200px;
  background-image: var(--circuit-light-svg); background-size: 200px 200px; opacity: 0.5; pointer-events: none;
}
.t5-detail-card > * { position: relative; z-index: 1; }
.t5-detail-card .t5-detail-ic { position: relative; z-index: 1; }
@keyframes t5fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.t5-detail-ic {
  width: 66px; height: 66px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: linear-gradient(135deg, var(--color-primary-soft), var(--color-primary-soft-2));
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary); margin-bottom: var(--space-5);
}
.t5-detail-ic svg { width: 34px; height: 34px; }
.t5-detail-card h3 { font-size: var(--text-xl); margin: var(--space-4) 0 var(--space-2); }
.t5-detail-sub { font-size: var(--text-base); font-weight: 600; color: var(--color-copper); margin-bottom: var(--space-4); }
.t5-detail-card p { color: var(--color-text-muted); line-height: 1.7; }

/* ---------- Vertical flow diagram (alt visual) ---------- */
.flow-diagram { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 560px; margin-inline: auto; }
.flow-step {
  width: 100%; background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-copper); border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6); display: flex; align-items: center; gap: var(--space-4);
  box-shadow: var(--shadow-sm); transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.flow-step:hover { transform: translateX(6px); box-shadow: var(--shadow-md); }
.flow-step .fn { font-family: var(--font-display); font-weight: 700; color: var(--color-copper); font-size: var(--text-lg); width: 40px; flex-shrink: 0; }
.flow-step .ft { font-weight: 600; }
.flow-connector { width: 2px; height: 22px; background: var(--color-copper); opacity: 0.5; }