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

.grid-container {
    display: grid;
    /* Column sizing is what lets the figure survive a narrow frame. Two things matter:
       (1) each track carries an explicit floor, so the field panel never drops below its
       300px drawing size and the controls give up their space first; (2) the floors are
       written as minmax() rather than left to grid's default, because a bare `1.5fr` is
       really `minmax(auto, 1.5fr)` - it refuses to shrink past its content's min-content
       width, and the surplus then pushes the colourbar off the right-hand edge. Since the
       body sets overflow:hidden, that overflow is silently clipped rather than producing a
       scrollbar, which is exactly the truncation this replaces. The colourbar track stays
       `auto` so it is sized by its own content (swatch + labels) at every width. */
    grid-template-columns: minmax(110px, 1.5fr) minmax(300px, 3.5fr) auto;
    grid-gap: 20px;
    width: 95%;
    height: 320px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* The track floor above governs how narrow the controls may get; this must not impose a
   second, larger floor of its own or the column would overflow the track it sits in. */
#controls {
    min-width: 0;
}

.slider-container {
    display: block;
    margin-bottom: 22px;
}

.slider-label {
    margin-bottom: 6px;
}

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

/* position:relative is still required even though nothing is absolutely positioned in the
   flow any more: the hover tooltip is placed from this element's bounding rect. */
#plot-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The field is a fixed 300px centred inside a much wider grid track. Without this wrapper
   the inset below would have to be offset from the track's edge by a hand-tuned magic
   number (it used to be `right: 110px`), which only lands correctly at one frame width.
   Anchoring to a box that is exactly the field's size pins it to the field's own corner. */
.plot-stack {
    position: relative;
    width: 300px;
}

#field-placeholder {
    width: 300px;
    height: 300px;
}

#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;
}

/* Inset in the field's top-right corner, matching the readout in eeg-dipole-shells.css. */
#theta-label {
    position: absolute;
    top: 8px;
    right: 8px;
    pointer-events: none;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #999;
    border-radius: 4px;
    padding: 3px 8px;
    font-family: sans-serif;
    font-size: 13px;
    white-space: nowrap;
}

#colorbar-container {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 60%;
    margin-top: auto;
    margin-bottom: auto;
}

#colorbar-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: sans-serif;
    font-size: 12px;
    min-width: 60px;
}

#colorbar-canvas {
    width: 30px;
}

#theta-v-plot-container {
    width: 95%;
    max-width: 600px;
    height: 220px;
    margin: 20px auto 0;
}

#theta-v-plot {
    width: 100%;
    height: 100%;
}

/* 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;
}