/* ═══════════════════════════════════════
   Flow Page — Warm Cream Theme
   Uses CSS variables from lab.css
   ═══════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;background:var(--bg,#F5F4F0);color:var(--t,#18181B);min-height:100vh;display:flex}

/* ═══ SIDEBAR ═══ */
.sidebar{width:240px;min-height:100vh;background:var(--s,#FFF);border-right:1px solid var(--b,#E2E0D8);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.sidebar.collapsed{width:64px}
.sidebar.collapsed .brand-text,.sidebar.collapsed .nav-group-label,.sidebar.collapsed .nav-item span:not(.nav-icon),.sidebar.collapsed .nav-badge,.sidebar.collapsed .sidebar-footer .version-text{display:none}
.sidebar.collapsed .nav-item{justify-content:center;padding:10px}
.sidebar.collapsed .sidebar-brand{justify-content:center;padding:24px 12px}
.sidebar.collapsed .version-info{justify-content:center}
.sidebar-brand{padding:24px 20px;border-bottom:1px solid var(--b,#E2E0D8);display:flex;align-items:center;gap:12px}
.brand-icon{width:40px;height:40px;background:var(--t,#18181B);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3em;flex-shrink:0;cursor:pointer;transition:transform .2s}
.brand-icon:hover{transform:scale(1.08)}
.brand-text h2{font-size:1em;font-weight:700;color:var(--t,#18181B);white-space:nowrap}
.brand-text span{font-size:.7em;color:var(--m,#78716C);font-weight:500;white-space:nowrap}
.nav-group{padding:16px 12px 8px}
.nav-group+.nav-group{border-top:1px solid var(--b,#E2E0D8)}
.nav-group-label{font-size:.65em;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--m,#78716C);padding:0 12px;margin-bottom:8px;white-space:nowrap}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:8px;color:var(--m,#78716C);text-decoration:none;font-size:.88em;font-weight:500;transition:all .2s;margin-bottom:2px;cursor:pointer;position:relative;white-space:nowrap}
.nav-item:hover{background:var(--bg,#F5F4F0);color:var(--t,#18181B)}
.nav-item.active{background:var(--gold-l,#FFFBEB);color:var(--gold,#B45309);font-weight:600}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--gold,#B45309);border-radius:0 3px 3px 0}
.nav-icon{font-size:1.1em;width:22px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;font-size:.7em;padding:2px 8px;border-radius:999px;font-weight:600}
.badge-live{background:rgba(22,163,74,.1);color:#16a34a;border:1px solid rgba(22,163,74,.2)}
.badge-new{background:var(--gold-l,#FFFBEB);color:var(--gold,#B45309);border:1px solid rgba(180,83,9,.2)}
.badge-beta{background:rgba(234,179,8,.1);color:#ca8a04;border:1px solid rgba(234,179,8,.2)}
.badge-dev{background:rgba(124,58,237,.1);color:#7c3aed;border:1px solid rgba(124,58,237,.2)}
.sidebar-footer{margin-top:auto;padding:16px;border-top:1px solid var(--b,#E2E0D8)}
.version-info{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg,#F5F4F0);border-radius:8px;border:1px solid var(--b,#E2E0D8)}
.version-dot{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 8px rgba(22,163,74,.4);flex-shrink:0}
.version-text{font-size:.75em;color:var(--m,#78716C);white-space:nowrap}

/* ═══ TOGGLE ═══ */
.sidebar-toggle{position:fixed;top:28px;left:228px;z-index:150;width:24px;height:24px;border-radius:50%;border:1px solid var(--b,#E2E0D8);background:var(--s,#FFF);color:var(--m,#78716C);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:left .3s cubic-bezier(.4,0,.2,1),transform .2s,background .2s;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.sidebar-toggle:hover{background:var(--bg,#F5F4F0);color:var(--t,#18181B);transform:scale(1.1)}
.sidebar-toggle.collapsed{left:52px}
.sidebar-toggle.collapsed .toggle-icon{transform:rotate(180deg)}
.toggle-icon{transition:transform .3s;display:flex}

/* ═══ MAIN ═══ */
.main{margin-left:240px;flex:1;min-height:100vh;transition:margin-left .3s cubic-bezier(.4,0,.2,1)}
.main.expanded{margin-left:64px}
.topbar{padding:24px 40px;border-bottom:1px solid var(--b,#E2E0D8);background:var(--s,#FFF)}
.topbar h1{font-size:1.5em;font-weight:800;color:var(--t,#18181B);font-family:'Fraunces',serif}
.topbar p{font-size:.85em;color:var(--m,#78716C);margin-top:4px}

/* ═══ LAYOUT: 2 PANELS ═══ */
.panels{display:flex;min-height:calc(100vh - 80px)}
.flow-panel{width:300px;min-width:180px;max-width:80vw;position:sticky;top:0;height:calc(100vh - 80px);overflow:auto;flex-shrink:0;display:flex;flex-direction:column;background:var(--s,#FFF);border-right:1px solid var(--b,#E2E0D8)}
.flow-panel::-webkit-scrollbar{width:4px}
.flow-panel::-webkit-scrollbar-thumb{background:var(--b,#E2E0D8);border-radius:4px}

/* Zoom controls */
.zoom-controls{display:flex;align-items:center;gap:6px;padding:8px 12px;margin:12px 12px 0;background:var(--bg,#F5F4F0);border:1px solid var(--b,#E2E0D8);border-radius:10px;flex-shrink:0}
.zoom-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--b,#E2E0D8);background:var(--s,#FFF);color:var(--m,#78716C);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;transition:all .15s}
.zoom-btn:hover{background:var(--bg,#F5F4F0);color:var(--t,#18181B);border-color:var(--gold,#B45309)}
.zoom-level{font-size:.7em;font-weight:600;color:var(--m,#78716C);min-width:36px;text-align:center;user-select:none}
.zoom-btn.reset{font-size:11px;width:auto;padding:0 8px}

/* Flow content wrapper */
.flow-content{padding:24px 16px 32px;display:flex;flex-direction:column;align-items:center;transform-origin:top center;transition:transform .15s ease}

/* Resizer handle */
.panel-resizer{width:6px;cursor:col-resize;background:var(--b,#E2E0D8);position:relative;flex-shrink:0;transition:background .2s;z-index:5}
.panel-resizer:hover,.panel-resizer.dragging{background:var(--gold,#B45309)}
.panel-resizer::after{content:'⋮';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--m,#78716C);font-size:14px;pointer-events:none}
.panel-resizer:hover::after,.panel-resizer.dragging::after{color:var(--s,#FFF)}

/* RIGHT: Explanations */
.explain-panel{padding:32px 40px;overflow-y:auto;flex:1;min-width:0}

/* ═══ FLOW NODES ═══ */
.flow-node{padding:12px 20px;border-radius:12px;font-size:.82em;font-weight:600;text-align:center;min-width:180px;max-width:240px;transition:transform .2s,box-shadow .2s;cursor:pointer}
.flow-node:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.flow-node.active-step{box-shadow:0 0 0 2px var(--gold,#B45309),0 6px 20px rgba(180,83,9,.12)}

.node-start{background:linear-gradient(135deg,var(--gold,#B45309),var(--t,#18181B));color:#fff;border-radius:50px}
.node-process{background:var(--t,#18181B);border:1px solid var(--t,#18181B);color:#fff}
.node-decision{background:var(--s,#FFF);border:2px solid var(--gold,#B45309);color:var(--gold,#B45309)}
.node-tool{background:var(--gold-l,#FFFBEB);border:1px solid rgba(180,83,9,.2);color:var(--gold,#B45309);border-radius:10px}
.node-end{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;border-radius:50px}
.node-sub{font-size:.72em;font-weight:400;color:rgba(255,255,255,.7);margin-top:3px}
.node-process .node-sub{color:rgba(255,255,255,.5)}
.node-decision .node-sub{color:var(--m,#78716C)}

.flow-arrow{display:flex;flex-direction:column;align-items:center;padding:2px 0}
.arrow-line{width:2px;height:20px;background:var(--b,#E2E0D8)}
.arrow-head{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--b,#E2E0D8)}
.arrow-label{font-size:.62em;color:var(--m,#78716C);font-weight:600;padding:2px 6px;background:var(--s,#FFF);border-radius:4px}

.flow-branch{display:flex;gap:16px;align-items:flex-start;justify-content:center;position:relative}
.flow-branch::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(100% - 60px);height:2px;background:var(--b,#E2E0D8)}
.branch-item{display:flex;flex-direction:column;align-items:center}
.branch-connector{width:2px;height:12px;background:var(--b,#E2E0D8)}

.loop-indicator{position:relative;width:100%;max-width:260px;border:2px dashed rgba(180,83,9,.25);border-radius:14px;padding:18px 12px;display:flex;flex-direction:column;align-items:center}
.loop-label{position:absolute;top:-9px;left:12px;background:var(--s,#FFF);padding:0 6px;font-size:.6em;font-weight:700;color:var(--gold,#B45309);letter-spacing:.5px}

/* ═══ EXPLANATION CARDS ═══ */
.explain-card{padding:24px 28px;background:var(--s,#FFF);border:1px solid var(--b,#E2E0D8);border-radius:14px;margin-bottom:20px;transition:border-color .2s;scroll-margin-top:20px}
.explain-card:hover{border-color:var(--gold,#B45309)}
.explain-card.highlight{border-color:var(--gold,#B45309);box-shadow:0 0 20px rgba(180,83,9,.06)}

/* Step 5 special highlight */
.explain-card.core-highlight{border:2px solid #dc2626;background:linear-gradient(135deg,rgba(220,38,38,.03),rgba(234,179,8,.02));box-shadow:0 0 30px rgba(220,38,38,.05);position:relative}
.explain-card.core-highlight::before{content:'🔥 CORE';position:absolute;top:-10px;right:20px;background:linear-gradient(135deg,#dc2626,#ea580c);color:#fff;font-size:.6em;font-weight:800;letter-spacing:1.5px;padding:3px 12px;border-radius:999px}
.explain-card.core-highlight h4 .step-badge{background:rgba(220,38,38,.1);color:#dc2626;border-color:rgba(220,38,38,.2)}

.query-example{background:var(--bg,#F5F4F0);border:1px solid var(--b,#E2E0D8);border-radius:10px;padding:14px 18px;margin:10px 0}
.query-example .q-label{font-size:.7em;font-weight:700;color:#dc2626;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.query-example .q-input{font-size:.9em;color:var(--t,#18181B);margin-bottom:8px;padding:8px 12px;background:rgba(220,38,38,.04);border-radius:8px;border-left:3px solid #dc2626}
.query-example .q-output{display:flex;flex-wrap:wrap;gap:6px}
.query-example .q-tag{font-size:.75em;padding:3px 10px;border-radius:999px;font-weight:600}
.q-tag.cat{background:rgba(22,163,74,.08);color:#16a34a;border:1px solid rgba(22,163,74,.15)}
.q-tag.color{background:rgba(124,58,237,.08);color:#7c3aed;border:1px solid rgba(124,58,237,.15)}
.q-tag.style{background:rgba(234,179,8,.08);color:#ca8a04;border:1px solid rgba(234,179,8,.15)}
.q-tag.price{background:rgba(220,38,38,.08);color:#dc2626;border:1px solid rgba(220,38,38,.15)}
.q-tag.size{background:rgba(14,165,233,.08);color:#0ea5e9;border:1px solid rgba(14,165,233,.15)}
.q-tag.gender{background:rgba(234,179,8,.08);color:#ca8a04;border:1px solid rgba(234,179,8,.15)}
.q-tag.occasion{background:rgba(236,72,153,.08);color:#ec4899;border:1px solid rgba(236,72,153,.15)}
.q-arrow{color:var(--m,#78716C);font-weight:700;margin:4px 0;font-size:.8em}

.product-preview{border:1px solid var(--b,#E2E0D8);border-radius:12px;overflow:hidden;margin:16px 0;max-width:100%}
.product-preview img{width:100%;display:block}
.product-preview .preview-caption{padding:10px 14px;font-size:.78em;color:var(--m,#78716C);background:var(--bg,#F5F4F0);border-top:1px solid var(--b,#E2E0D8)}
.product-preview .preview-caption strong{color:var(--t,#18181B)}

.explain-card h4{font-size:1em;font-weight:700;color:var(--t,#18181B);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.explain-card h4 .step-badge{font-size:.65em;padding:2px 8px;border-radius:999px;font-weight:600;background:var(--gold-l,#FFFBEB);color:var(--gold,#B45309);border:1px solid rgba(180,83,9,.2)}
.explain-card p{font-size:.88em;color:var(--m,#78716C);line-height:1.75;margin-bottom:10px}
.explain-card p strong{color:var(--t,#18181B)}
.explain-card p em{color:var(--gold,#B45309);font-style:normal}

.why-box{background:linear-gradient(135deg,var(--gold-l,#FFFBEB),rgba(234,179,8,.04));border:1px solid rgba(180,83,9,.12);border-left:3px solid var(--gold,#B45309);border-radius:0 10px 10px 0;padding:14px 18px;margin-top:14px;font-size:.85em;color:var(--t,#18181B);line-height:1.7}
.why-box strong{color:var(--t,#18181B)}
.why-label{font-size:.7em;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--gold,#B45309);margin-bottom:5px}

/* Tool grid */
.tool-grid-inline{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.tool-chip{padding:12px 14px;background:var(--bg,#F5F4F0);border:1px solid var(--b,#E2E0D8);border-radius:10px;font-size:.82em;font-weight:500;color:var(--t,#18181B);display:flex;align-items:center;gap:8px;transition:all .2s}
.tool-chip:hover{border-color:var(--gold,#B45309);transform:translateY(-1px)}
.tool-chip .chip-icon{font-size:1.2em}
.tool-chip .chip-name{font-weight:600}
.tool-chip .chip-type{font-size:.7em;color:var(--m,#78716C);display:block;margin-top:2px}

.section-title{font-size:1.1em;font-weight:800;color:var(--t,#18181B);margin:32px 0 20px;padding-bottom:10px;border-bottom:1px solid var(--b,#E2E0D8);font-family:'Fraunces',serif}

/* Responsive */
@media(max-width:1000px){
    .panels{grid-template-columns:1fr}
    .flow-panel{display:none}
    .sidebar{width:64px}
    .sidebar .brand-text,.sidebar .nav-group-label,.sidebar .nav-item span:not(.nav-icon),.sidebar .nav-badge,.sidebar-footer .version-text{display:none}
    .sidebar .nav-item{justify-content:center;padding:10px}
    .sidebar .sidebar-brand{justify-content:center;padding:24px 12px}
    .main{margin-left:64px}
    .sidebar-toggle{display:none}
    .tool-grid-inline{grid-template-columns:repeat(2,1fr)}
}

/* ═══ IFRAME MODE ═══ */
html.in-iframe .sidebar{display:none!important}
html.in-iframe .sidebar-toggle{display:none!important}
html.in-iframe .main{margin-left:0!important}
