/* =============================================================================
   ir-practice.css — IR-specific styles for the four IR pages. Generic UI
   (subnav, pills, choices, unknown-compound panel, controls) comes from
   ms-practice.css, which every IR page links first; this file adds only the
   spectrum panel, plot marks, and the structure-match grid.
   Page conventions per CLAUDE.md: fixed-size panels from load (no frameshift),
   verdict on the morphing button + flash, one-viewport game stack.
   ============================================================================= */

/* --- Spectrum panel: fixed size from page load; ghost or plot, never empty. */
#ir-spectrum-panel {
    width: 100%;
    max-width: 660px;
    height: 312px;
    margin: 0 auto 0.7em;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#ir-spectrum-panel .ir-plot {
    width: 100%;
    max-width: 640px;
    height: auto;
    display: block;
}

.ir-plot-caption {
    font-size: 0.74rem;
    color: #888;
    text-align: center;
    padding: 0 12px 6px;
}

/* --- Plot marks --- */
.ir-axis { stroke: #444; stroke-width: 1; }
.ir-tick-label { font-size: 11px; fill: #666; }
.ir-axis-label { font-size: 11px; fill: #888; }
.ir-break { stroke: #444; stroke-width: 3; }
.ir-curve { fill: none; stroke: #2b2b2b; stroke-width: 1.4; }
.ir-stem { stroke: #2b2b2b; stroke-width: 2.5; stroke-linecap: round; }
.ir-stem-broad { stroke-width: 7; opacity: 0.55; }
.ir-highlight { stroke: #6153cc; stroke-width: 2; stroke-dasharray: 4 3; }
.ir-highlight-label { font-size: 12px; font-weight: 700; fill: #6153cc; }
/* key-peak markers: always visible with wavenumbers (readability);
   neutral pre-verdict, assignment colors after the answer */
.ir-mark { stroke-width: 2; opacity: 0.55; }
.ir-mark-neutral { stroke: #8a8578; stroke-dasharray: 2 3; opacity: 0.8; }
.ir-mark-assigned { stroke: #0b8a0b; }
.ir-mark-inferred { stroke: #3987e5; }
.ir-mark-label { font-size: 10px; fill: #666; }

/* --- Structure-match: 2x2 grid of fixed-size structure cards. Cells are
   sized from load; RDKit fills in as it renders (no reflow). --- */
#choice-buttons.ir-structure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 260px));
    gap: 10px;
    justify-content: center;
    max-width: 560px;
}

.ir-structure-choice {
    position: relative;
    height: 170px;
    padding: 6px;
    background: #fff;
}

.ir-choice-struct {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ir-choice-struct svg { max-width: 100%; max-height: 100%; }

.ir-choice-tag {
    position: absolute;
    top: 4px;
    left: 8px;
    font-weight: 700;
    color: #666;
    font-size: 0.9rem;
}

/* --- Compaction: keep the game stack in one laptop viewport --- */
@media (max-height: 940px) {
    #ir-spectrum-panel { height: 256px; }
    .ir-structure-choice { height: 140px; }
}