/* ==========================================================================
   PriorValue Public — Biological Intelligence Visuals (Phase 4B)
   Reuses --pv-* tokens from priorvalue-public.css.
   ========================================================================== */

.bi-hero-visual { display: grid; gap: 12px; }
.bi-hero-window {
    border: 1px solid rgba(22,216,255,.3);
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(150deg, rgba(8,39,64,.95), rgba(2,12,24,.96));
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 50px rgba(0,184,255,.08);
}
.bi-window-bar { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: #8aa0b0; margin-bottom: 12px; }
.bi-window-brand { color: var(--pv-primary-light); letter-spacing: .08em; }

.bi-card {
    border: 1px solid rgba(22,216,255,.12);
    border-radius: 12px;
    background: rgba(6,27,45,.55);
    padding: 14px;
}
.bi-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.bi-card__title { font-size: 13px; font-weight: 700; color: var(--pv-text); }
.bi-card__domain { font-size: 10px; color: var(--pv-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.bi-card__value { font-size: 22px; font-weight: 800; }
.bi-card__unit { font-size: 11px; color: #6a8898; margin-left: 4px; }

.bi-state {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.bi-state--stable { color: var(--pv-success); background: rgba(82,228,192,.1); border-color: rgba(82,228,192,.25); }
.bi-state--changed { color: var(--pv-warning); background: rgba(242,191,69,.1); border-color: rgba(242,191,69,.25); }
.bi-state--context { color: #8ab4ff; background: rgba(138,180,255,.1); border-color: rgba(138,180,255,.25); }
.bi-state--muted { color: #8aa0b0; background: rgba(138,160,176,.1); border-color: rgba(138,160,176,.2); }

.bi-layer { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(22,216,255,.06); font-size: 11px; }
.bi-layer:last-child { border-bottom: none; }
.bi-layer__label { color: #6a8898; text-transform: uppercase; letter-spacing: .05em; font-size: 9px; font-weight: 700; }
.bi-layer__value { color: var(--pv-text-body); }

.bi-synthetic {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pv-accent-light);
    border: 1px solid rgba(242,191,69,.4);
    border-radius: 4px;
    padding: 2px 8px;
}

.bi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }

.bi-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.bi-domain { border: 1px solid rgba(22,216,255,.12); border-radius: 12px; background: rgba(6,27,45,.5); padding: 16px; }
.bi-domain__label { font-size: 12px; font-weight: 700; color: var(--pv-text); margin: 0 0 10px; }

.bi-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.bi-flow__step { text-align: center; padding: 18px 14px; border: 1px solid rgba(22,216,255,.1); border-radius: 12px; background: rgba(6,27,45,.45); }
.bi-flow__step b { display: block; color: var(--pv-primary-light); font-size: 13px; margin-bottom: 4px; }
.bi-flow__step span { color: var(--pv-text-muted); font-size: 11px; }

.bi-hormones { display: flex; flex-wrap: wrap; gap: 8px; }
.bi-hormone { font-size: 12px; color: var(--pv-text-body); border: 1px solid rgba(22,216,255,.14); border-radius: 999px; padding: 5px 12px; background: rgba(6,27,45,.5); }

.bi-list { list-style: none; margin: 0; padding: 0; }
.bi-list li { position: relative; padding: 9px 0 9px 22px; color: var(--pv-text-muted); font-size: 14px; border-bottom: 1px solid rgba(22,216,255,.06); }
.bi-list li:last-child { border-bottom: none; }
.bi-list li::before { content: "—"; position: absolute; left: 0; color: var(--pv-primary); }

.bi-quad { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.bi-quad__cell { border: 1px solid rgba(22,216,255,.1); border-radius: 12px; background: rgba(6,27,45,.45); padding: 20px 18px; }
.bi-quad__kicker { color: var(--pv-primary-light); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.bi-quad__body { color: var(--pv-text-muted); font-size: 13px; line-height: 1.55; }

.pv-video-embed {
    max-width: 960px;
    margin: 0 auto;
    border: 1px solid rgba(22,216,255,.2);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(2,12,24,.9);
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 50px rgba(0,184,255,.08);
}

@media (prefers-reduced-motion: reduce) {
    .bi-card, .bi-domain, .bi-quad__cell, .bi-flow__step { transition: none; }
}