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

.grid-container {
    /* One column: the plot spans the full width and the three compartment groups sit in a
       row beneath it. The earlier side-by-side arrangement gave the controls ~40% of the
       frame, which left the plot about 335px wide in a 620px iframe - very cramped for an
       x axis spanning the whole head radius. */
    width: 95%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Positioning context for the readout inset below. */
#plot-container {
    position: relative;
}

#controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    margin-top: 10px;
    font-size: 15px;
}

.compartment {
    min-width: 0;
}

.compartment-title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

/* Colour key tying each slider group to its shaded band on the plot; filled in from JS so
   the band colours live in exactly one place. */
.swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 7px;
    border: 1px solid #aaa;
}

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

.slider-label {
    margin-bottom: 4px;
    font-size: 14px;
}

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

/* A column so the readout can sit above the plot in normal flow rather than floating over
   it. It used to be position:absolute in the plot's top-right corner, where it covered the
   start of the scalp compartment - the very part of the curve the number is reporting on. */
#plot-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#shell-placeholder {
    width: 100%;
    height: 320px;
}

/* An inset in the plot's top-right corner. That corner is reliably free: V falls with r,
   so the curve is always at its lowest on the right. Anchoring to #plot-container (which
   the full-width plot exactly fills) rather than to a hand-tuned offset means it stays
   pinned to the plot's corner at every frame width. */
#scalp-readout {
    position: absolute;
    top: 8px;
    right: 10px;
    pointer-events: none;
    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;
    z-index: 10;
}

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