/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 *
 * Part of the Coding Ireland online learning platform. Licensed for use only
 * as delivered on the platform. Copying, redistributing, or adapting this
 * file, in whole or in part, for use in any other product or service is not
 * permitted. Ref: CI-maths-flow-builder
 */
/* 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;
}

/* The return link is DRAWN, not captioned. It used to render as a line of text
   under the row, which left a life cycle looking like a straight chain on the
   board. The U-path is this element's own left/bottom/right border; the arrowhead
   sits at the LEFT end because the flow runs left-to-right, so the return travels
   back under the row and re-enters the first stage. */
.fb-cycle-back {
    flex-basis: 100%;
    position: relative;
    height: 1.85rem;
    margin: 0.15rem 1.6rem 0;
    border: 2px solid #15803d;
    border-top: 0;
    border-radius: 0 0 14px 14px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #15803d;
    font-weight: 700;
    font-size: 0.85rem;
}
/* arrowhead on the left upright, pointing up into the first stage */
.fb-cycle-back::after {
    content: "";
    position: absolute;
    left: -7px;
    top: -2px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 9px solid #15803d;
}
/* The loop-back arrow's label ('lays spawn', 'lays eggs') is the point of a
   life-cycle page, so it sits inline on the same line as the icon rather than
   stacking under it the way a forward arrow's label does. */
.fb-cycle-back .fb-arrow-label {
    display: inline;
    max-width: none;
    margin: 0;
    /* sit the label ON the bottom of the loop, punched through the line */
    transform: translateY(50%);
    padding: 0 0.45rem;
    background: #f0fdf4;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.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; }