/* ═══════════════════════════════════════════════════════════════
   SWARM-CANVA-LANDING.CSS — Complément à debate-arena-landing.css /
   crm-landing.css. Réutilise tokens --lp-* et classes .lab-*
   génériques. N'ajoute QUE les classes du mockup Swarm Canvas
   (lab-sw-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Node Type Palette ── */
.lab-sw-palette-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px; }
@media(max-width:700px){ .lab-sw-palette-grid{ grid-template-columns:repeat(2,1fr); } }
.lab-sw-palette-item{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--lp-border-soft); text-align:center; }
.lab-sw-palette-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.lab-sw-palette-name{ font-size:.74rem; font-weight:800; color:#fff; }
.lab-sw-palette-desc{ font-size:.62rem; color:rgba(255,255,255,.45); line-height:1.4; }

/* ── Canvas mockup ── */
.lab-sw-canvas-wrap{ position:relative; border-radius:16px; background:#0d1117; border:1px solid rgba(255,255,255,.08); overflow:hidden; padding:28px; min-height:340px; }
.lab-sw-canvas-grid-bg{ position:absolute; inset:0; background-image:radial-gradient(rgba(148,163,184,.18) 1px, transparent 1px); background-size:24px 24px; opacity:.5; }
.lab-sw-canvas-content{ position:relative; z-index:1; }

/* Node shapes on the flow mockup */
.lab-sw-flow-row{ display:flex; align-items:center; gap:0; flex-wrap:wrap; justify-content:center; }
.lab-sw-node{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; font-size:.72rem; font-weight:800; color:#fff; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.3); }
.lab-sw-node.pill{ border-radius:999px; padding:10px 20px; }
.lab-sw-node.diamond{ border-radius:6px; transform:rotate(45deg); padding:16px; }
.lab-sw-node.diamond span{ transform:rotate(-45deg); display:inline-block; }
.lab-sw-edge-arrow{ font-size:1.1rem; color:rgba(255,255,255,.25); margin:0 6px; flex-shrink:0; }
.lab-sw-edge-label{ font-size:.6rem; font-weight:700; color:rgba(255,255,255,.4); text-align:center; margin:0 4px; }

/* Fork/merge layout for demo */
.lab-sw-fork-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 6px; }
.lab-sw-fork-branches{ display:flex; flex-direction:column; gap:8px; }

/* ── Edge Conditions legend ── */
.lab-sw-cond-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:700px){ .lab-sw-cond-grid{ grid-template-columns:repeat(2,1fr); } }
.lab-sw-cond-chip{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--lp-border-soft); font-size:.72rem; font-weight:700; }
.lab-sw-cond-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }

/* ── Templates ── */
.lab-sw-tpl-card{ display:flex; flex-direction:column; gap:10px; }
.lab-sw-tpl-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.lab-sw-tpl-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.lab-sw-tpl-tag{ font-size:.6rem; font-weight:700; padding:2px 9px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.6); }

/* ── Mini-map & toolbar hint bar ── */
.lab-sw-toolbar-mock{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--lp-border-soft); margin-bottom:16px; flex-wrap:wrap; }
.lab-sw-toolbar-btn{ display:flex; align-items:center; gap:6px; font-size:.68rem; font-weight:700; color:rgba(255,255,255,.6); padding:6px 12px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.lab-sw-minimap-mock{ position:absolute; bottom:14px; right:14px; width:96px; height:64px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.15); z-index:2; }
.lab-sw-minimap-mock .vp{ position:absolute; top:14px; left:20px; width:40px; height:24px; border:1.5px solid #667eea; border-radius:2px; }

/* ── Run log mockup ── */
.lab-sw-log{ background:#fff; border-radius:12px; padding:14px 16px; font-family:'JetBrains Mono',monospace; font-size:.7rem; line-height:1.7; }
.lab-sw-log .l-system{ color:#94a3b8; }
.lab-sw-log .l-node{ color:#6366f1; }
.lab-sw-log .l-done{ color:#059669; }
.lab-sw-log .l-error{ color:#dc2626; }

@media(max-width:768px){
    .lab-sw-canvas-wrap{ padding:16px; }
    .lab-sw-flow-row{ flex-direction:column; }
    .lab-sw-edge-arrow{ transform:rotate(90deg); margin:4px 0; }
}