/**
 * builder-manual.css — manual (classic) build list styles.
 * Split from builder-wizard.css (0.1.67 redesign) for the 500-line rule.
 */

/* manual mode (redesigned 0.1.67): header card + responsive slot-card grid */
.builder-man {
        display: grid;
        gap: 1.25rem;
}

.builder-man__head {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1.1rem 1.4rem;
}

.builder-man__back {
        flex-shrink: 0;
}

.builder-man__head-text {
        flex: 1 1 240px;
        display: grid;
        gap: 0.2rem;
}

.builder-man__title {
        margin: 0;
        font-size: 1.35rem;
}

.builder-man__sub {
        margin: 0;
        color: var(--text-dim);
        font-size: 0.92rem;
}

.builder-man__progress {
        display: grid;
        gap: 0.35rem;
        min-width: 200px;
        flex: 0 1 260px;
}

.builder-man__progress-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-dim);
}

.builder-man__bar {
        height: 8px;
        border-radius: 999px;
        background: var(--border);
        overflow: hidden;
}

.builder-man__bar-fill {
        height: 100%;
        border-radius: 999px;
        background: var(--ok);
        transition: width var(--ease) 0.3s;
}

.builder-man__grid {
        display: grid;
        gap: 1rem;
        /*
         * `min(100%, 320px)` instead of a bare 320px: on a 320px-wide phone the
         * container is narrower than the column minimum, and a fixed 320px track
         * would overflow it. With min() the track never exceeds the container.
         */
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
        align-items: start;
}

.builder-man__card {
        display: grid;
        gap: 0.4rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1.1rem 1.2rem;
        transition: border-color var(--ease) 0.2s, box-shadow var(--ease) 0.2s;
}

.builder-man__card.is-chosen {
        border-color: color-mix(in srgb, var(--ok-text) 55%, var(--border));
        box-shadow: 0 4px 18px color-mix(in srgb, var(--ok) 12%, transparent);
}

.builder-man__card.is-locked {
        opacity: 0.65;
}

.builder-man__card-head {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        margin-bottom: 0.5rem;
}

.builder-man__badge {
        flex-shrink: 0;
        width: 1.9rem;
        height: 1.9rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        color: var(--accent-text);
        font-weight: 700;
        font-size: 0.9rem;
}

.builder-man__card.is-chosen .builder-man__badge {
        background: color-mix(in srgb, var(--ok) 18%, transparent);
        color: var(--ok-text);
}

.builder-man__card-title {
        margin: 0;
        font-size: 1.08rem;
        flex: 1 1 auto;
}

.builder-man__status {
        flex-shrink: 0;
        font-size: 0.78rem;
        font-weight: 700;
        padding: 0.25rem 0.7rem;
        border-radius: 999px;
        border: 1px solid var(--border);
        color: var(--text-dim);
        white-space: nowrap;
}

.builder-man__status.is-chosen {
        border-color: var(--ok-text);
        color: var(--ok-text);
        background: color-mix(in srgb, var(--ok) 10%, transparent);
}

.builder-man__status.is-locked {
        border-style: dashed;
}

/* multi-pick affordance (0.1.69, Valery) */
.builder-man__add-btn {
        margin-top: 0.35rem;
        justify-self: start;
        border-style: dashed;
        font-weight: 600;
}

.builder-man__add-btn:hover {
        border-style: solid;
        border-color: var(--accent);
        color: var(--accent-text);
}

.builder-man__add-wrap {
        display: grid;
        gap: 0.5rem;
        margin-top: 0.4rem;
        padding: 0.65rem 0.8rem;
        background: color-mix(in srgb, var(--surface) 80%, var(--bg));
        border: 1px dashed var(--border);
        border-radius: var(--radius-sm);
}

.builder-man__cancel-add {
        justify-self: end;
        font-size: 0.82rem;
        padding: 0.2rem 0.6rem;
}