/* flow-builder — directed flow / sequence / cycle / IPO builder. STE Stage 3-4.
   Reuses the shared .activity-container / .maths-activity chrome; fb-* are local. */

.fb-question {
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    font-weight: 700;
    color: #0f5132;
    text-align: center;
    margin: 0.25rem auto 0.75rem;
    max-width: 60ch;
}

.fb-stage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}

/* ---- the flow row: slots (chain/cycle) or columns (ipo), with arrows ---- */
.fb-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #f0fdf4;
    border: 2px dashed #86efac;
    border-radius: 14px;
    min-height: 8rem;
}

.fb-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    font-size: clamp(1rem, 2.2vw, 1.6rem);
    padding: 0 0.15rem;
    align-self: center;
}
.fb-arrow-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #15803d;
    text-align: center;
    max-width: 7rem;
    line-height: 1.1;
    margin-top: 0.15rem;
}

/* chain/cycle: a single-occupancy ordered slot */
.fb-slot {
    flex: 1 1 7rem;
    min-width: 6rem;
    max-width: 12rem;
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px dashed #bbf7d0;
    border-radius: 12px;
    padding: 0.4rem;
}

/* ipo: a labelled multi-card column */
.fb-col {
    flex: 1 1 12rem;
    min-width: 9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.fb-col h3 {
    margin: 0;
    font-size: clamp(0.9rem, 1.8vw, 1.15rem);
    font-weight: 800;
    text-align: center;
    color: #065f46;
}
.fb-col h3 i { color: #16a34a; }
.fb-bin {
    flex: 1 1 auto;
    min-height: 6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: #ffffff;
    border: 2px dashed #bbf7d0;
    border-radius: 12px;
    padding: 0.5rem;
}

.fb-cycle-back {
    flex-basis: 100%;
    text-align: center;
    color: #15803d;
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}
.fb-cycle-back i { margin-right: 0.3rem; }

.fb-over { border-color: #16a34a !important; background: #dcfce7 !important; }

/* ---- cards ---- */
.fb-tray-wrap { display: flex; flex-direction: column; gap: 0.35rem; }
.fb-tray-label { font-weight: 700; color: #334155; font-size: 0.85rem; }
.fb-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 4rem;
    padding: 0.6rem;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
}

.fb-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.8rem;
    background: #ffffff;
    border: 2px solid #34d399;
    border-radius: 10px;
    font-weight: 700;
    font-size: clamp(0.9rem, 1.9vw, 1.2rem);
    color: #064e3b;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    user-select: none;
    touch-action: none;
}
.fb-card:focus-visible { outline: 3px solid #16a34a; outline-offset: 2px; }
.fb-dragging { opacity: 0.85; cursor: grabbing; transform: scale(1.04); }
.fb-correct { border-color: #16a34a; background: #dcfce7; }
.fb-wrong { border-color: #ef4444; background: #fee2e2; }

/* image cards: a picture stacked above the label */
.fb-card--img { flex-direction: column; gap: 0.3rem; padding: 0.5rem 0.6rem; }
.fb-card-img {
    width: clamp(48px, 9vw, 84px);
    height: clamp(48px, 9vw, 84px);
    object-fit: contain;
    border-radius: 8px;
    pointer-events: none;
}
.fb-card--img .fb-card-label { font-size: clamp(0.8rem, 1.7vw, 1.05rem); line-height: 1.15; }
.activity-container.display-mode .fb-card-img { width: clamp(64px, 12vw, 120px); height: clamp(64px, 12vw, 120px); }

/* ---- check panel + your-turn (reuse maths-callout look) ---- */
.fb-target-panel { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.fb-callout { font-weight: 700; }
.fb-callout.is-correct { color: #15803d; }
.fb-callout.is-miss { color: #b91c1c; }

.fb-your-turn {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: #eff6ff;
    border-left: 4px solid #60a5fa;
    border-radius: 8px;
}
.fb-your-turn-label { font-weight: 800; color: #1e40af; margin-bottom: 0.25rem; }
.fb-your-turn-list { margin: 0; padding-left: 1.2rem; color: #1e3a8a; }

/* ---- display mode: bigger, calmer, no tray fuss (cards are pre-placed) ---- */
.activity-container.display-mode .fb-card { font-size: clamp(1.1rem, 2.2vw, 1.5rem); cursor: default; }
.activity-container.display-mode .fb-tray:empty { display: none; }
.activity-container.display-mode .fb-tray-wrap:has(.fb-tray:empty) { display: none; }