/* ContestProp v1.3.7 layout, regional traffic lights and playback controls. */

/* Final desktop control-row override. The per-band antenna stylesheet used to
   reset #controls to six columns after the compact layout had already run,
   which forced Generate Forecast onto a second line. */
#controls.compact-controls{
  display:grid!important;
  grid-template-columns:minmax(250px,1.55fr) 105px minmax(185px,1fr) minmax(185px,1fr) 105px 105px 170px!important;
  gap:8px!important;
  align-items:start!important;
}
#controls.compact-controls .field{min-width:0!important}
#controls.compact-controls .generate-field{
  grid-column:auto!important;
  min-width:170px!important;
  padding-top:13px;
  align-self:start!important;
}
#controls.compact-controls .generate-field .btn{
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 13px!important;
  white-space:nowrap!important;
}

/* Regional probability traffic lights: red <33%, amber 33-65%, green >=66%. */
.region-name-cell{white-space:nowrap!important}
.traffic-light{
  display:inline-block;
  width:11px;
  height:11px;
  margin-right:8px;
  border-radius:50%;
  vertical-align:-1px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 2px rgba(0,0,0,.28),0 0 7px currentColor;
}
.traffic-red{background:#ef4444;color:#ef4444}
.traffic-amber{background:#f59e0b;color:#f59e0b}
.traffic-green{background:#22c55e;color:#22c55e}
.traffic-legend{display:inline-flex;align-items:center;gap:9px;color:#aebbd0;font-size:10px;white-space:nowrap}
.traffic-legend span{display:inline-flex;align-items:center;gap:4px}
.traffic-legend .traffic-light{width:9px;height:9px;margin:0;box-shadow:0 0 5px currentColor}

/* Five-second forecast-hour player. */
#regionalPlayHours{min-width:72px}
#regionalPlayHours.playing{
  background:#21442f;
  border-color:#4c9967;
  color:#eafff0;
}

@media(max-width:1180px){
  #controls.compact-controls{grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:start!important}
  #controls.compact-controls .generate-field{grid-column:auto!important;min-width:0!important}
}
@media(max-width:900px){
  #controls.compact-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #controls.compact-controls .generate-field{padding-top:13px}
  .traffic-legend{width:100%;justify-content:center}
}
@media(max-width:600px){
  #controls.compact-controls{grid-template-columns:1fr!important}
  #controls.compact-controls .generate-field{padding-top:0}
  #regionalPlayHours{min-width:64px}
}