/* System Frequency (#2673). The chart above the grid in one panel with its own scroll bar, its height set by
   systemFrequency.js to fill the window. */
.gc-sf-panel {
    overflow-y: auto;
    overflow-x: hidden;
    /* The scroll bar's width is always set aside, so the chart is as wide whether the panel scrolls (System Frequency,
       with its grid) or not (Grid Frequency, the chart alone): flicking between the screens moves nothing. */
    scrollbar-gutter: stable;
}

/* The chart's height is set by systemFrequency.js, a row per 5 minutes; until then, this. The helper's <div> carries
   only its id, so it is sized by id. The grid's own height is in the view. */

#sfChart {
    min-height: 480px;
}

/* The three headings above the chart: full width, equally spaced, each a label, a large figure and a line of detail. */
.gc-sf-headings {
    display: grid;
    /* Exact thirds, whatever each holds (1fr alone widens a column to its content), so the columns stay put between
       readings and between the two screens. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.gc-sf-heading {
    text-align: center;
    min-height: 5rem;
}

.gc-sf-heading-label {
    font-weight: 700;
}

.gc-sf-heading-value {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gc-sf-heading-fine {
    font-size: 0.5em;
}

.gc-sf-heading-detail {
    opacity: 0.75;
    font-size: 0.875rem;
}

/* On a phone, one above the next. */
@media (max-width: 575.98px) {
    .gc-sf-headings {
        grid-template-columns: 1fr;
    }
}

.gc-sf-tip-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.gc-sf-tip-label {
    opacity: 0.7;
}