/* laboratory.css — Unified lab showcase page
   Clean, visual, mobile-first. Tells the research story. */

.lab-wrap { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* ── Hero ── */
.lab-hero { text-align: center; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 2px solid var(--text); }
.lab-hero h1 {
    font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900; letter-spacing: -0.03em; margin-bottom: 0.5rem;
}
.lab-hero .subtitle {
    color: var(--text-dim); font-size: 1rem; max-width: 640px;
    margin: 0 auto; line-height: 1.7;
}

/* ── Substrate strip ── */
.lab-substrates {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
    margin-bottom: 2.5rem;
}
.lab-substrate {
    font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.3rem 0.7rem; border-radius: 4px;
    border: 1px solid #3ddc84; color: #3ddc84;
}
.lab-substrate--pending { border-color: #ffaa33; color: #ffaa33; }

/* ── Section labels ── */
.lab-label {
    font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent);
    text-shadow: 0 0 8px var(--glow-accent);
    margin-bottom: 0.75rem; padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}
.lab-section { margin-bottom: 3rem; }
.lab-section-intro {
    color: var(--text-dim); font-size: 0.92rem; line-height: 1.7;
    margin-bottom: 1.5rem; max-width: 700px;
}

/* ── Experiment cards ── */
.lab-card {
    display: block; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 1.5rem; margin-bottom: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.lab-card:hover { border-color: var(--accent); box-shadow: 0 0 12px var(--glow-dim); }
.lab-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.lab-card h3 { font-size: 1.05rem; margin: 0; }
.lab-card-verdict {
    font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0;
}
.lab-card-verdict--pass { color: #3ddc84; }
.lab-card-verdict--fail { color: #ff4444; }
.lab-card-verdict--mixed { color: #ffaa33; }
.lab-card-meta {
    font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-faint);
    letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.5rem;
}
.lab-card p { color: var(--text-dim); font-size: 0.88rem; line-height: 1.65; margin: 0; }
.lab-card-stats {
    display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.75rem;
    font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint);
}
.lab-card-stat-v { color: var(--text); font-weight: 600; }

/* ── Accent bars ── */
.lab-card--pass { border-left: 3px solid #3ddc84; }
.lab-card--fail { border-left: 3px solid #ff4444; }
.lab-card--mixed { border-left: 3px solid #ffaa33; }

/* ── Negative results box ── */
.lab-negatives {
    background: var(--surface); border: 1px solid rgba(255,68,68,0.2);
    border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem;
}
.lab-negatives h3 { color: #ff4444; font-size: 1rem; margin-bottom: 0.5rem; }
.lab-negatives ul { color: var(--text-dim); font-size: 0.85rem; line-height: 1.8; padding-left: 1.2rem; margin: 0; }
.lab-negatives li strong { color: var(--text); }

/* ── Compound chain ── */
.lab-compound { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.5rem; }
.lab-compound-step {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1rem 0; border-left: 2px solid var(--border);
    margin-left: 1rem; padding-left: 1.5rem;
    position: relative;
}
.lab-compound-step:last-child { border-left-color: var(--accent); }
.lab-compound-num {
    flex-shrink: 0; width: 1.6rem; height: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 0.65rem; font-weight: 800;
    border: 1px solid var(--accent); border-radius: 50%; color: var(--accent);
    position: absolute; left: -0.85rem; top: 1rem;
    background: var(--bg);
}
.lab-compound-step div { font-size: 0.88rem; color: var(--text-dim); line-height: 1.65; }
.lab-compound-step strong { color: var(--text); }
.lab-compound-summary {
    background: var(--surface); border: 1px solid var(--accent); border-radius: 8px;
    padding: 1.25rem 1.5rem; margin-left: 1rem;
}
.lab-compound-summary p {
    font-family: var(--font-mono); font-size: 0.75rem; color: var(--text);
    line-height: 1.7; margin: 0;
}

/* ── Tools strip ── */
.lab-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.lab-tool {
    display: block; text-decoration: none; color: inherit;
    padding: 1rem; border: 1px solid var(--border); border-radius: 8px;
    transition: border-color 0.2s;
}
.lab-tool:hover { border-color: var(--accent); }
.lab-tool-label {
    font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent);
    margin-bottom: 0.3rem;
}
.lab-tool-name { font-weight: 800; font-size: 0.88rem; margin-bottom: 0.25rem; }
.lab-tool-desc { font-size: 0.72rem; color: var(--text-dim); line-height: 1.5; }

/* ── CTA ── */
.lab-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }

/* ── Mobile ── */
@media (max-width: 600px) {
    .lab-wrap { padding: 1.5rem 1rem 3rem; }
    .lab-hero { margin-bottom: 2rem; padding-bottom: 1.5rem; }
    .lab-hero .subtitle { font-size: 0.85rem; }
    .lab-substrate { font-size: 0.52rem; padding: 0.25rem 0.5rem; }
    .lab-card { padding: 1rem; }
    .lab-card h3 { font-size: 0.92rem; }
    .lab-card p { font-size: 0.78rem; }
    .lab-card-stats { gap: 1rem; font-size: 0.6rem; }
    .lab-negatives { padding: 1rem; }
    .lab-negatives ul { font-size: 0.78rem; }
    .lab-cta { flex-direction: column; }
    .lab-cta .btn { text-align: center; justify-content: center; }
}