/* ========================================================================== 
   Biofilm — high-resolution spatial biology laboratory
   ========================================================================== */

.bio-head { position:relative; isolation:isolate; }
.bio-head::before {
    content:"";
    position:absolute;
    z-index:-1;
    width:min(680px, 68vw);
    height:280px;
    right:-8%;
    top:-65%;
    background:
        radial-gradient(ellipse at 35% 58%, color-mix(in srgb, #55e6be 13%, transparent), transparent 54%),
        radial-gradient(ellipse at 75% 48%, color-mix(in srgb, #e5b54c 9%, transparent), transparent 52%);
    filter:blur(18px);
    pointer-events:none;
}
.bio-head .tag-row { margin-bottom:1rem; }
.bio-head h1 small {
    display:inline-block;
    margin-left:.34em;
    color:var(--ink-4);
    font-family:var(--font-mono);
    font-size:.28em;
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    vertical-align:middle;
}

.bio-shell { grid-template-columns:minmax(0, 1fr) 344px; }
.bio-stage {
    isolation:isolate;
    border-color:color-mix(in srgb, #55e6be 34%, var(--line));
    background:#030a0d;
    box-shadow:0 26px 76px rgba(0, 5, 8, .38), inset 0 0 70px rgba(52, 197, 160, .04);
}
.bio-stage::after {
    content:"";
    position:absolute;
    z-index:3;
    left:0;
    right:0;
    top:0;
    aspect-ratio:16 / 9;
    border-radius:inherit;
    background:
        linear-gradient(180deg, rgba(3, 17, 22, .04), transparent 26%, transparent 78%, rgba(3, 7, 8, .28)),
        repeating-linear-gradient(180deg, rgba(255,255,255,.013) 0, rgba(255,255,255,.013) 1px, transparent 1px, transparent 4px);
    pointer-events:none;
}
.bio-stage canvas#bio-canvas {
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    background:#030a0d;
    image-rendering:pixelated;
    image-rendering:crisp-edges;
    cursor:crosshair;
    touch-action:pan-y pinch-zoom;
}
.bio-stage canvas#bio-canvas:focus-visible {
    outline:2px solid #73f3cd;
    outline-offset:-3px;
}
.bio-bar { position:relative; z-index:8; }
.bio-pulse {
    border-color:color-mix(in srgb, #df72e8 45%, var(--line));
    color:color-mix(in srgb, #df72e8 78%, var(--ink));
}
.bio-pulse.is-dosing {
    background:color-mix(in srgb, #b349c4 18%, var(--panel));
    box-shadow:inset 0 0 0 1px color-mix(in srgb, #f193ef 22%, transparent), 0 0 18px rgba(185, 66, 198, .12);
}
.bio-speed-label { gap:.5rem; }
.bio-speed-label input { width:106px; }

.bio-hud {
    position:absolute;
    z-index:6;
    left:10px;
    top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:.38rem;
    color:#a9c6cb;
    font-family:var(--font-mono);
    font-size:.61rem;
    letter-spacing:.07em;
    text-transform:uppercase;
    pointer-events:none;
}
.bio-hud > span {
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:.27rem .55rem;
    border:1px solid rgba(118, 222, 198, .22);
    border-radius:999px;
    background:rgba(2, 10, 13, .69);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.bio-live { gap:.42rem; }
.bio-live i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#66f1c4;
    box-shadow:0 0 10px #66f1c4;
    animation:bio-breathe 1.8s ease-in-out infinite;
}
.bio-live.is-paused i { background:#d594df; box-shadow:0 0 8px #d594df; animation:none; }
@keyframes bio-breathe { 50% { opacity:.35; transform:scale(.7); } }

.bio-boundary {
    position:absolute;
    z-index:5;
    display:flex;
    align-items:center;
    gap:.42rem;
    color:rgba(192, 227, 229, .56);
    font-family:var(--font-mono);
    font-size:.53rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    pointer-events:none;
}
.bio-boundary--flow { right:12px; top:13px; }
.bio-boundary--flow i {
    position:relative;
    display:block;
    width:28px;
    height:1px;
    background:linear-gradient(90deg, transparent, #6bdacb);
}
.bio-boundary--flow i::after {
    content:"";
    position:absolute;
    right:-1px;
    top:-3px;
    border:3px solid transparent;
    border-left-color:#6bdacb;
}
.bio-boundary--surface {
    left:12px;
    bottom:57px;
    padding-left:28px;
}
.bio-boundary--surface::before {
    content:"";
    position:absolute;
    left:0;
    width:21px;
    height:2px;
    background:#b29972;
    box-shadow:0 2px 0 rgba(178,153,114,.25);
}
.bio-cursor {
    position:absolute;
    z-index:7;
    left:50%;
    top:50%;
    width:9px;
    height:9px;
    border:1px solid rgba(255,255,255,.85);
    box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 8px rgba(120,245,213,.75);
    transform:translate(-50%, -50%);
    pointer-events:none;
    opacity:0;
}
.bio-cursor.is-visible { opacity:1; }
.bio-tooltip {
    position:absolute;
    z-index:10;
    display:none;
    max-width:220px;
    padding:.46rem .58rem;
    border:1px solid rgba(103, 228, 196, .32);
    border-radius:7px;
    background:rgba(2, 9, 12, .91);
    color:#d7eeed;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    font-family:var(--font-mono);
    font-size:.61rem;
    line-height:1.45;
    pointer-events:none;
}
.bio-tooltip.is-visible { display:block; }

.bio-monitor {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.65rem;
}
.bio-chart-card {
    min-width:0;
    padding:.7rem .75rem .45rem;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    background:
        linear-gradient(180deg, color-mix(in srgb, #55e6be 3%, transparent), transparent),
        var(--surface);
}
.bio-chart-card > div {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:.5rem;
    margin-bottom:.2rem;
}
.bio-chart-card > div b { font-size:.71rem; font-weight:600; }
.bio-chart-card > div span {
    color:var(--ink-4);
    font-family:var(--font-mono);
    font-size:.51rem;
    line-height:1.5;
    text-align:right;
}
.bio-chart-card canvas { display:block; width:100%; height:72px; }
.bio-dot { display:inline-block; width:5px; height:5px; margin:0 2px 1px 5px; border-radius:50%; }
.bio-dot--population { background:#58e6c0; }
.bio-dot--quiet { background:#6d82a8; }
.bio-dot--resistant { background:#ef76d2; }
.bio-dot--food { background:#5adcc0; }
.bio-dot--drug { background:#df65dc; }
.bio-dot--activity { background:#f0c868; }

.bio-notice { border-color:color-mix(in srgb, #55e6be 28%, var(--line)); }
.bio-notice > svg { color:#59dbba; }

.bio-panel { overflow-x:hidden; }
.bio-tools,
.bio-views {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
}
.bio-views { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.bio-views button:first-child { grid-column:span 2; }
.bio-key {
    display:flex;
    align-items:flex-start;
    gap:.5rem;
    margin-top:.55rem;
    color:var(--ink-4);
    font-size:.67rem;
    line-height:1.45;
}
.bio-key i {
    flex:none;
    display:block;
    width:31px;
    height:8px;
    margin-top:.22rem;
    border-radius:999px;
    background:linear-gradient(90deg, #5ce2c0, #ecbd5e, #d267d9);
}
.bio-range { display:block; margin-top:.72rem; }
.bio-range > span {
    display:flex;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:.34rem;
    color:var(--ink-3);
    font-size:.7rem;
}
.bio-range > span b { color:var(--ink); font-family:var(--font-mono); font-weight:500; }
.bio-range input { width:100%; }
.bio-detail { display:flex; width:100%; }

.bio-observation {
    position:relative;
    padding:.8rem .85rem .82rem 1rem;
    border:1px solid color-mix(in srgb, #62e3bf 30%, var(--line));
    border-radius:9px;
    background:
        radial-gradient(circle at 3% 12%, color-mix(in srgb, #5ae3bf 9%, transparent), transparent 48%),
        var(--raised);
    overflow:hidden;
}
.bio-observation::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:2px;
    background:linear-gradient(#55e4bc, #ce75df);
}
.bio-observation > b { display:block; margin:.18rem 0 .26rem; font-size:.78rem; }
.bio-observation p { margin:0; color:var(--ink-3); font-size:.68rem; line-height:1.5; }

.bio-readout {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.48rem;
}
.bio-readout div {
    min-width:0;
    padding:.52rem .58rem;
    border:1px solid var(--line);
    border-radius:8px;
    background:color-mix(in srgb, var(--raised) 54%, transparent);
}
.bio-inspector {
    margin-top:.8rem;
    padding:.76rem .8rem;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--raised);
}
.bio-inspector > b { display:block; margin:.15rem 0 .22rem; font-size:.76rem; }
.bio-inspector > p { margin:0; color:var(--ink-4); font-size:.67rem; line-height:1.45; }
#bio-genes { display:grid; gap:.38rem; margin-top:.65rem; }
#bio-genes > span {
    display:grid;
    grid-template-columns:77px minmax(0, 1fr);
    align-items:center;
    gap:.45rem;
    color:var(--ink-3);
    font-size:.61rem;
}
#bio-genes i {
    display:block;
    height:5px;
    border-radius:999px;
    background:var(--line);
    overflow:hidden;
}
#bio-genes i b { display:block; width:0; height:100%; border-radius:inherit; }
#bio-gene-metabolism { background:#53d7eb; }
#bio-gene-resistance { background:#e06cdb; }
#bio-gene-adhesion { background:#dfbd5d; }

.bio-principle {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.8rem;
    margin:1.45rem 0 2rem;
}
.bio-principle > div {
    position:relative;
    min-width:0;
    padding:1.05rem 1.05rem 1.05rem 4.65rem;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    background:var(--surface);
}
.bio-principle > div > span {
    position:absolute;
    right:.68rem;
    top:.58rem;
    color:var(--ink-4);
    font-family:var(--font-mono);
    font-size:.58rem;
}
.bio-principle h3 { margin:0 0 .28rem; font-size:.96rem; }
.bio-principle p { margin:0; color:var(--ink-3); font-size:.79rem; line-height:1.52; }
.bio-icon {
    position:absolute;
    left:1rem;
    top:50%;
    width:2.65rem;
    height:2.65rem;
    border:1px solid color-mix(in srgb, #55e6be 31%, var(--line));
    border-radius:50%;
    transform:translateY(-50%);
    box-shadow:inset 0 0 15px color-mix(in srgb, #55e6be 7%, transparent);
}
.bio-icon::before,.bio-icon::after { content:""; position:absolute; }
.bio-icon--diffuse::before { inset:9px; border-radius:50%; background:#64e0bf; box-shadow:-10px -7px 0 -3px #64e0bf, 9px -8px 0 -4px #c178d8, 10px 9px 0 -3px #64e0bf, -9px 9px 0 -4px #e3bd64; }
.bio-icon--budget::before { left:8px; right:8px; bottom:8px; height:8px; border:1px solid #e4c36b; border-radius:2px; box-shadow:0 -7px 0 -1px rgba(83,218,188,.45), 0 -14px 0 -2px rgba(83,218,188,.2); }
.bio-icon--matrix::before { inset:7px; border:1px dotted #e6be62; border-radius:38% 62% 55% 45%; transform:rotate(18deg); }
.bio-icon--matrix::after { inset:13px; border-radius:50%; background:#60d9ba; box-shadow:0 0 8px #60d9ba; }
.bio-icon--inherit::before { left:9px; top:7px; width:8px; height:8px; border:1px solid #5ce2c0; border-radius:50%; box-shadow:16px 20px 0 -1px #c270d7; }
.bio-icon--inherit::after { left:16px; top:14px; width:12px; height:13px; border-left:1px solid #d8bf68; border-bottom:1px solid #d8bf68; transform:skewY(-30deg); }

.bio-distinction {
    display:grid;
    grid-template-columns:minmax(180px, .75fr) minmax(0, 1.6fr);
    gap:1.2rem;
    margin:2rem 0 2.2rem;
    padding:1.2rem 1.3rem;
    border:1px solid color-mix(in srgb, #ca6cda 28%, var(--line));
    border-radius:var(--radius-sm);
    background:
        radial-gradient(circle at 5% 18%, color-mix(in srgb, #5be2c0 8%, transparent), transparent 30%),
        radial-gradient(circle at 95% 85%, color-mix(in srgb, #d16edc 7%, transparent), transparent 34%),
        var(--surface);
}
.bio-distinction h3 { margin:.22rem 0 0; font-size:clamp(1.05rem, 2vw, 1.35rem); line-height:1.25; }
.bio-distinction-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.9rem; }
.bio-distinction-grid p { margin:0; color:var(--ink-3); font-size:.82rem; line-height:1.58; }
.bio-distinction-grid b { color:var(--ink); }
.bio-experiments { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.82rem 1.25rem; padding-left:1.25rem; }
.bio-experiments li { padding-left:.2rem; color:var(--ink-3); font-size:.86rem; line-height:1.62; }
.bio-experiments b { color:var(--ink); }

@media (max-width:1080px) {
    .bio-shell { grid-template-columns:minmax(0, 1fr); }
    .bio-panel { overflow:visible; }
}

@media (max-width:760px) {
    .bio-monitor { grid-template-columns:minmax(0, 1fr); }
    .bio-principle { grid-template-columns:minmax(0, 1fr); }
    .bio-distinction { grid-template-columns:minmax(0, 1fr); }
    .bio-distinction-grid { grid-template-columns:minmax(0, 1fr); }
    .bio-experiments { grid-template-columns:minmax(0, 1fr); }
}

@media (max-width:620px) {
    .bio-head h1 small { display:block; margin:.35rem 0 0; }
    .bio-boundary { display:none; }
    .bio-hud { top:7px; left:7px; right:7px; }
    #bio-grid-label { display:none; }
    .bio-speed-label { width:100%; justify-content:flex-end; margin-top:.15rem; }
    .bio-speed-label input { width:140px; }
    .bio-chart-card > div { display:block; }
    .bio-chart-card > div span { display:block; margin-top:.18rem; text-align:left; }
}

@media (prefers-reduced-motion:reduce) {
    .bio-live i { animation:none; }
}