.month-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.month-picker label {
    font-size: 16px;
}

.month-picker select {
    width: auto;
    min-width: 100px;
}

.header-search-picker {
    display: flex;
    align-items: center;
}

.header-search-picker .month-picker {
    margin-top: 0;
}

.header-picker-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5em;
    line-height: 1;
    margin-left: 10px;
    padding: 0;
}

@media (min-width: 800px) {
    /* Fix the year/month select widths so the row's total width stays
       constant regardless of which (variable-length) option is selected,
       then size the search field to match that same footprint. */
    .header-search-picker .month-picker-year {
        width: 80px;
    }

    .header-search-picker .month-picker-month {
        width: 130px;
    }

    .header-search-picker .stork-input-wrapper,
    .header-search-picker .stork-input {
        width: 320px;
    }

    /* Independent of the field: a comfortably readable minimum size for
       the results panel itself. */
    .stork-output.stork-output-visible {
        min-width: 400px;
        min-height: 250px;
    }
}

@media (max-width: 800px) {
    .header-search-picker .month-picker {
        flex-wrap: wrap;
        row-gap: 5px;
    }
}