/* One time-control scale for the weather chart and sounding forecast. */
body.analysis-page.unified-page,
body.sounding-forecast-page.unified-page,
body:has(.reanalysis-page) {
  --heading-time-height: 38px;
  --heading-time-cell: 36px;
  --heading-time-value-size: 14px;
  --heading-time-date-size: 14px;
  --heading-time-border: #c3cbc7;
  --heading-time-fill: #fbfbf8;
  --heading-time-selected: #ffe38d;
}

body.analysis-page.unified-page .archive-picker__label,
body.sounding-forecast-page.unified-page .forecast-heading-time .forecast-form__field > span {
  color: #687b7c;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0;
}

body.analysis-page.unified-page .archive-picker__controls,
body.sounding-forecast-page.unified-page .forecast-heading-time .forecast-form__switch {
  box-sizing: border-box;
  height: var(--heading-time-height);
  min-height: var(--heading-time-height);
  padding: 0;
  border: 1px solid var(--heading-time-border);
  border-radius: 0;
  background: var(--heading-time-fill);
}

body.analysis-page.unified-page .archive-picker__controls { gap: 0; }
body.home-controls.analysis-page.unified-page .archive-picker__controls { padding: 0 !important; }
body.analysis-page.unified-page .archive-picker__divider {
  margin: 0 4px;
  background: var(--heading-time-border);
}
body.analysis-page.unified-page .archive-picker__controls :is(#previous-day,#next-day,.cycle-switch button) {
  box-sizing: border-box;
  flex: 0 0 var(--heading-time-cell);
  width: var(--heading-time-cell);
  min-width: var(--heading-time-cell);
  height: var(--heading-time-cell);
  min-height: var(--heading-time-cell);
  padding: 0;
  border: 0;
  border-radius: 0;
  font: 400 var(--heading-time-value-size)/1 MiSans, sans-serif;
}
body.analysis-page.unified-page .cycle-switch { gap: 0; }
body.analysis-page.unified-page .cycle-switch button + button {
  border-left: 1px solid var(--heading-time-border);
}
body.analysis-page.unified-page .archive-picker #archive-date {
  box-sizing: border-box;
  height: var(--heading-time-cell);
  min-height: var(--heading-time-cell);
  padding: 0 7px;
  border: 0;
  border-radius: 0;
  color: #263c41;
  background: transparent;
  font: 400 var(--heading-time-date-size)/1.2 MiSans, sans-serif;
}
body.analysis-page.unified-page .cycle-switch button.is-active,
body.sounding-forecast-page.unified-page .forecast-heading-time .forecast-form__switch label:has(input[name="cycle"]:checked) {
  color: #51432d !important;
  background: var(--heading-time-selected) !important;
  font-weight: 500 !important;
}

body.sounding-forecast-page.unified-page .forecast-heading-time .forecast-form__field {
  gap: 8px;
}
body.sounding-forecast-page.unified-page .forecast-heading-time #sounding-date {
  box-sizing: border-box;
  width: 142px;
  height: var(--heading-time-height);
  min-height: var(--heading-time-height);
  padding: 0 8px;
  border: 1px solid var(--heading-time-border);
  border-radius: 0;
  color: #263c41;
  background: var(--heading-time-fill);
  font: 400 var(--heading-time-date-size)/1.2 MiSans, sans-serif;
}
body.sounding-forecast-page.unified-page .forecast-heading-time .forecast-form__switch {
  display: flex;
  align-items: center;
  gap: 0;
}
body.forecast-home-layout.sounding-forecast-page.unified-page .forecast-heading-time .forecast-form__switch label:has(input[name="cycle"]) {
  box-sizing: border-box;
  flex: 0 0 var(--heading-time-cell);
  width: var(--heading-time-cell);
  min-width: var(--heading-time-cell);
  max-width: var(--heading-time-cell);
  height: var(--heading-time-cell);
  min-height: var(--heading-time-cell);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #465b62;
  background: transparent;
  font: 400 var(--heading-time-value-size)/1 MiSans, sans-serif;
}
body.forecast-home-layout.sounding-forecast-page.unified-page .forecast-heading-time .forecast-form__switch label:has(input[name="cycle"]) + label {
  border-left: 1px solid var(--heading-time-border);
}

@media (min-width: 1101px) and (max-height: 1100px) and (min-aspect-ratio: 16/10) {
  body.analysis-page.unified-page,
  body.sounding-forecast-page.unified-page,
  body:has(.reanalysis-page) {
    --heading-time-height: 32px;
    --heading-time-cell: 30px;
    --heading-time-value-size: 12px;
    --heading-time-date-size: 12px;
  }
  body.sounding-forecast-page.unified-page .forecast-page .forecast-heading.workbench-heading {
    min-height: 35px !important;
    padding-bottom: 0 !important;
    margin-bottom: 2px !important;
  }
  body.sounding-forecast-page.unified-page .forecast-heading-time #sounding-date { width: 111px; }
}

@media (max-width: 1100px) {
  body.sounding-forecast-page.unified-page .workbench-sidebar-title {
    font-size: 22px !important;
  }
}

@media (max-width: 620px) {
  body.analysis-page.unified-page,
  body.sounding-forecast-page.unified-page,
  body:has(.reanalysis-page) { --heading-time-date-size: 16px; }
}

/* The forecast picker uses the same integrated date/time control as home. */
body.sounding-forecast-page.unified-page .forecast-heading-time.archive-picker {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: end;
  gap: 3px 10px;
}
body.sounding-forecast-page.unified-page .forecast-heading-time .archive-picker__label {
  grid-column: 1;
  grid-row: 1;
  color: #687b7c;
  font: 400 12px/1.2 MiSans, sans-serif;
}
body.sounding-forecast-page.unified-page .forecast-heading-time .forecast-heading-time__note {
  grid-column: 1;
  grid-row: 2;
  color: #687b7c;
  font: 400 12px/1.2 MiSans, sans-serif;
  white-space: nowrap;
}
body.sounding-forecast-page.unified-page .forecast-heading-time .archive-picker__controls {
  display: flex;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
  height: var(--heading-time-height);
  min-height: var(--heading-time-height);
  padding: 0;
  border: 1px solid var(--heading-time-border);
  border-radius: 0;
  background: var(--heading-time-fill);
}
body.sounding-forecast-page.unified-page .forecast-heading-time .archive-picker__controls > .forecast-time-day {
  box-sizing: border-box;
  flex: 0 0 var(--heading-time-cell);
  width: var(--heading-time-cell);
  min-width: var(--heading-time-cell);
  height: var(--heading-time-cell);
  min-height: var(--heading-time-cell);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #465b62;
  background: transparent;
  font: 400 var(--heading-time-value-size)/1 MiSans, sans-serif;
}
body.sounding-forecast-page.unified-page .forecast-heading-time .archive-picker__controls > .forecast-time-day:disabled {
  opacity: .3;
}
body.sounding-forecast-page.unified-page .forecast-heading-time.archive-picker #sounding-date {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 125px;
  height: var(--heading-time-cell);
  min-height: var(--heading-time-cell);
  padding: 0 7px;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: #263c41;
  background: transparent;
  font: 400 var(--heading-time-date-size)/1.2 MiSans, sans-serif;
}
body.sounding-forecast-page.unified-page .forecast-heading-time .archive-picker__divider {
  margin: 0 4px;
  background: var(--heading-time-border);
}
body.sounding-forecast-page.unified-page .forecast-heading-time .archive-picker__controls .forecast-form__switch.cycle-switch {
  display: flex;
  flex: 0 0 auto;
  width: auto;
  height: var(--heading-time-cell);
  min-height: var(--heading-time-cell);
  padding: 0;
  border: 0;
  background: transparent;
}
body.forecast-home-layout.sounding-forecast-page.unified-page .forecast-heading-time .archive-picker__controls .forecast-form__switch label:has(input[name="cycle"]) {
  box-sizing: border-box;
  flex: 0 0 var(--heading-time-cell);
  width: var(--heading-time-cell);
  min-width: var(--heading-time-cell);
  max-width: var(--heading-time-cell);
  height: var(--heading-time-cell);
  min-height: var(--heading-time-cell);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #465b62;
  background: transparent;
  font: 400 var(--heading-time-value-size)/1 MiSans, sans-serif;
}
body.forecast-home-layout.sounding-forecast-page.unified-page .forecast-heading-time .archive-picker__controls .forecast-form__switch label:has(input[name="cycle"]:checked) {
  color: #51432d;
  background: var(--heading-time-selected);
  font-weight: 500;
}
@media (min-width: 1101px) and (max-height: 1100px) and (min-aspect-ratio: 16/10) {
  body.sounding-forecast-page.unified-page .forecast-heading-time.archive-picker #sounding-date { width: 111px; }
  body.sounding-forecast-page.unified-page .forecast-heading-time.archive-picker { row-gap: 2px; }
}
@media (max-width: 620px) {
  body.sounding-forecast-page.unified-page .forecast-heading-time.archive-picker {
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  body.sounding-forecast-page.unified-page .forecast-heading-time .archive-picker__label,
  body.sounding-forecast-page.unified-page .forecast-heading-time .archive-picker__controls,
  body.sounding-forecast-page.unified-page .forecast-heading-time .forecast-heading-time__note {
    grid-column: 1;
    grid-row: auto;
  }
  body.sounding-forecast-page.unified-page .forecast-heading-time .archive-picker__controls {
    width: 100%;
    min-width: 0;
  }
  body.sounding-forecast-page.unified-page .forecast-heading-time.archive-picker #sounding-date {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    text-align: center;
  }
}