/* Styles for the side-by-side EEG/MEG dipole figure (eeg-meg-dipole-2d-pair.js). Derived
   from eeg-dipole-2d.css, which styles the single-field version; the differences are the
   three-column grid (controls + two field panels, no colourbar) and the legend/axis
   colouring for the two-curve sweep plot below. */

body {
    font: 18px Helvetica, Arial, sans-serif;
    line-height: 1.5;
    overflow: hidden;
}

.grid-container {
    display: grid;
    /* Just the two field panels now, each sized by its own 275px content and centred as a
       pair. The controls used to be a third column here, which forced a reflow at narrow
       widths - and a reflow is exactly what makes the figure's height depend on its width. */
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    grid-gap: 18px;
    width: 96%;
    height: 340px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* A single row of four sliders, sitting between the panels and the sweep plot. Four
   columns at every width - no media query - because the whole point is that the figure's
   height must not change when it is resized. */
#controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 18px;
    width: 65%;
    min-width: 500px;
    max-width: 960px;
    margin: 0 auto 0;
    font-size: 15px;
}

/* The fixed height is what actually holds the figure's height constant. The longest label
   ("Angular offset (𝚫𝜃) = 0.00𝜋") fits on one line in a wide frame but wraps to two in a
   narrow one, and without a fixed box that difference would propagate into the total
   height. The flex lives here, on the container, and NOT on the label: the label holds a
   text node plus a <span> for the live value, and making the label itself a flex container
   turns those into two separate flex items, which breaks the inline text flow and wraps
   the label into a ragged third line. Bottom-aligned so the label always sits just above
   its slider, putting the slack above it rather than in the middle. */
.slider-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* height: 62px; */
}

.slider-label {
    margin-bottom: 4px;
    line-height: 1.35;
}

.slider-obj {
    margin-top: 4px;
}

.panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.panel-title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
}

.panel-note {
    font-size: 12px;
    color: #555;
    margin-top: 2px;
    white-space: nowrap;
}

.plot-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.field-placeholder {
    width: 275px;
    height: 275px;
}

.field-tooltip {
    position: absolute;
    display: none;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #999;
    border-radius: 4px;
    padding: 3px 8px;
    font-family: sans-serif;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
}

#sweep-container {
    width: 95%;
    max-width: 640px;
    height: 250px;
    margin: 16px auto 0;
}

#sweep-legend {
    display: flex;
    justify-content: center;
    gap: 22px;
    font-family: sans-serif;
    font-size: 13px;
    margin-bottom: 4px;
}

.legend-item {
    display: inline-flex;
    align-items: center;
}

/* Colour key tying each curve to its own y axis; the background colours are filled in
   from JS so the curve colours live in exactly one place. */
.swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 7px;
    border: 1px solid #aaa;
}

#sweep-plot {
    width: 100%;
    height: 220px;
}

/* Flot renders tick labels as SVG <text> elements (carrying both classes below), so
   colour is controlled by `fill`, not `color` - `color` is silently ignored on SVG text. */
.flot-tick-label.tickLabel {
    font-size: 0.8em;
    fill: rgb(64, 64, 64);
    font-family: "STIX Two Text", Georgia, "Times New Roman", serif;
}

/* Colour each y axis of the sweep plot to match its curve, so the two scales can be told
   apart without reading the legend. Flot puts each axis's tick labels in a layer carrying
   a flot-y<n>-axis class, and the axislabels plugin names its label element y<n>Label. */
#sweep-plot .flot-y1-axis .flot-tick-label.tickLabel,
#sweep-plot .y1Label.axisLabels {
    fill: #970d00;
}

#sweep-plot .flot-y2-axis .flot-tick-label.tickLabel,
#sweep-plot .y2Label.axisLabels {
    fill: #005f73;
}

/* Below this width the three-column arrangement is geometrically impossible rather than
   merely tight: two 275px panels plus the gap between them already claim 568px of a ~590px
   frame, leaving nothing for a controls column. Shrinking the panels would mean shrinking
   the part of the figure carrying the actual information, so instead the controls move to a
   two-by-two block above them. The sweep plot gives back the height that block costs, which
   keeps the figure's total height the same on both sides of the breakpoint - the iframe
   embedding it has one fixed height and cannot adapt. */