/* =============================================================================
   ms-isotopes.css — the isotope-patterns page's stick-plot panel.
   Fixed-size holder present from page load (no frameshift); the SVG scales
   inside it via viewBox.
   ============================================================================= */

/* Spectrum + unknown-compound card share one row: the spectrum is the
   evidence, the card is the compound it belongs to. The card overrides
   ms-practice.css's centered-block sizing to stretch with the spectrum. */
#spectrum-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    margin: 0 auto 0.3em;
    width: 100%;
}

#spectrum-row #isotope-panel { flex: 1 1 auto; min-width: 0; margin: 0; }

#spectrum-row #ms-compound-panel {
    flex: 0 0 175px;
    width: 175px;
    height: auto;
    margin: 0;
}

#isotope-panel {
    max-width: 620px;
    margin: 0 auto 0.3em;
    border: 1px solid #e3e3ea;
    border-radius: 8px;
    background: #fff;
    padding: 8px 10px 2px;
    box-sizing: border-box;
}

#isotope-plot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 560 / 240;   /* matches ms-core isotopeGeometry defaults */
}

.iso-baseline { stroke: #444; stroke-width: 1.5; }
.iso-tick { stroke: #999; stroke-width: 1; }
.iso-grid { stroke: #ececf2; stroke-width: 1; }
.iso-axis-title { font-size: 10px; fill: #8a8a95; font-family: system-ui, sans-serif; }
.iso-tick-label { font-size: 11px; fill: #666; font-family: system-ui, sans-serif; }
.iso-stick { stroke: #35507a; stroke-width: 3; stroke-linecap: round; }
.iso-stick:hover { stroke: #6153cc; }
.iso-peak-label { font-size: 11px; fill: #35507a; font-weight: 600; font-family: system-ui, sans-serif; }

/* Simulated-intensities honesty caption (PLAN.md "honest labeling") */
#isotope-caption {
    text-align: center;
    font-size: 0.76rem;
    color: #8a8a95;
    margin: 2px 0 6px;
}

@media (max-height: 940px) {
    #isotope-panel { max-width: 540px; }
}

@media (max-width: 700px) {
    #spectrum-row { flex-direction: column; align-items: center; }
    #spectrum-row #ms-compound-panel { flex: none; height: 150px; }
}