/* NoidNoggin BrainOps badges & chips
 * Shared across brain-detail, brains marketplace cards, brainops-workbench,
 * and brain-submissions. Uses CSS variables defined in /css/main.css.
 */

.bd-brainops {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
    align-items: center;
}

.bd-brainops .bd-bo-blocked-reasons {
    flex-basis: 100%;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--danger);
    line-height: 1.4;
}

.bd-brainops .bd-bo-blocked-reasons ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.25rem 0 0;
}

.bd-brainops .bd-bo-warn-text {
    flex-basis: 100%;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--warning);
    line-height: 1.4;
}

/* Chip base */
.bd-bo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    line-height: 1.2;
    white-space: nowrap;
    border: 0.0625rem solid transparent;
}

.bd-bo-chip i { font-size: 0.7rem; }

/* Smaller variant for marketplace cards */
.bd-bo-chip-sm {
    padding: 0.15rem 0.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.02rem;
}

/* ── Readiness ── */
.bd-bo-readiness-ready {
    background: rgba(0, 230, 118, 0.15);
    color: var(--accent-green);
    border-color: rgba(0, 230, 118, 0.35);
}
.bd-bo-readiness-review {
    background: rgba(255, 152, 0, 0.15);
    color: var(--orange);
    border-color: rgba(255, 152, 0, 0.35);
}
.bd-bo-readiness-blocked {
    background: rgba(255, 82, 82, 0.18);
    color: var(--danger);
    border-color: rgba(255, 82, 82, 0.4);
}
.bd-bo-readiness-unknown {
    background: rgba(107, 107, 141, 0.18);
    color: var(--text-muted);
    border-color: rgba(107, 107, 141, 0.35);
}

/* ── Safety class ── */
.bd-bo-safety-low {
    background: rgba(107, 107, 141, 0.15);
    color: var(--text-secondary);
    border-color: rgba(107, 107, 141, 0.3);
}
.bd-bo-safety-medium {
    background: rgba(255, 152, 0, 0.15);
    color: var(--orange);
    border-color: rgba(255, 152, 0, 0.35);
}
.bd-bo-safety-high {
    background: rgba(255, 82, 82, 0.18);
    color: var(--danger);
    border-color: rgba(255, 82, 82, 0.4);
}
.bd-bo-safety-critical {
    background: rgba(180, 30, 30, 0.25);
    color: #ff8888;
    border-color: rgba(180, 30, 30, 0.55);
    font-weight: 700;
}

/* ── Install gate ── */
.bd-bo-gate-passed {
    background: rgba(0, 230, 118, 0.15);
    color: var(--accent-green);
    border-color: rgba(0, 230, 118, 0.35);
}
.bd-bo-gate-warning {
    background: rgba(255, 214, 0, 0.18);
    color: var(--warning);
    border-color: rgba(255, 214, 0, 0.4);
}
.bd-bo-gate-failed {
    background: rgba(255, 82, 82, 0.18);
    color: var(--danger);
    border-color: rgba(255, 82, 82, 0.4);
}
.bd-bo-gate-pending {
    background: rgba(107, 107, 141, 0.15);
    color: var(--text-muted);
    border-color: rgba(107, 107, 141, 0.3);
}
.bd-bo-gate-review {
    background: rgba(255, 152, 0, 0.15);
    color: var(--orange);
    border-color: rgba(255, 152, 0, 0.35);
}
.bd-bo-gate-blocked {
    background: rgba(255, 82, 82, 0.18);
    color: var(--danger);
    border-color: rgba(255, 82, 82, 0.4);
}

/* ── Manifest version ── */
.bd-bo-version {
    background: rgba(108, 92, 231, 0.18);
    color: var(--primary-light);
    border-color: rgba(108, 92, 231, 0.4);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Manifest kind (BrainPackage / SkillCapsule / BrainAppliance) ── */
.bd-bo-kind-brain_package {
    background: rgba(149, 117, 205, 0.18);
    color: #c39bff;
    border-color: rgba(149, 117, 205, 0.45);
}
.bd-bo-kind-skill_capsule {
    background: rgba(64, 158, 255, 0.18);
    color: #6cb0ff;
    border-color: rgba(64, 158, 255, 0.45);
}
.bd-bo-kind-brain_appliance {
    background: rgba(0, 191, 165, 0.18);
    color: #4ddbb8;
    border-color: rgba(0, 191, 165, 0.45);
    font-weight: 700;
}

/* ── Disabled CTA state for blocked installs ── */
.bd-cta-blocked {
    opacity: 0.55;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* ── Inline purchase error ── */
.bd-purchase-error {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 82, 82, 0.12);
    border: 0.0625rem solid rgba(255, 82, 82, 0.4);
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-size: 0.82rem;
    line-height: 1.4;
    display: none;
}
.bd-purchase-error.show { display: block; }

/* ── Billing state selector inside pricing card ── */
.bd-billing-row {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.bd-billing-row label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03rem;
}
.bd-billing-row select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 0.0625rem solid var(--border);
    background: var(--bg-card-hover);
    color: var(--text-primary);
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s;
}
.bd-billing-row select:focus { border-color: var(--primary); }

/* ── Manifest validation results (brain-submissions) ── */
.bo-manifest-section {
    background: var(--bg-card);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.bo-manifest-section h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.bo-manifest-section .bo-help {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.bo-manifest-input {
    width: 100%;
    min-height: 12rem;
    padding: 0.75rem;
    background: var(--bg-card-hover);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
}
.bo-manifest-input:focus { border-color: var(--primary); }
.bo-manifest-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    align-items: center;
}
.bo-validation-result {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-card-hover);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-sm);
    display: none;
}
.bo-validation-result.show { display: block; }
.bo-gate-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.bo-gate-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1.4;
}
.bo-gate-list li .bo-gate-icon {
    font-size: 1rem;
    line-height: 1;
    margin-top: 0.1rem;
    flex-shrink: 0;
}
.bo-gate-passed .bo-gate-icon { color: var(--accent-green); }
.bo-gate-warning .bo-gate-icon { color: var(--warning); }
.bo-gate-failed .bo-gate-icon { color: var(--danger); }
.bo-gate-pending .bo-gate-icon { color: var(--text-muted); }
.bo-gate-name { font-weight: 600; }
.bo-gate-msg { color: var(--text-secondary); display: block; margin-top: 0.15rem; }

@media (max-width: 48rem) {
    .bd-brainops { gap: 0.35rem; }
    .bd-bo-chip { font-size: 0.72rem; padding: 0.2rem 0.5rem; }
    .bo-manifest-input { font-size: 0.78rem; }
}