#estimate-form {
  margin-bottom: 1rem;
}
#estimate-form label {
  margin: 0;
}
#estimate-form .fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
#estimate-form .submit {
  display: block;
  width: 100%;
}

.estimate-container {
  width: 100%;
  container-type: inline-size;
  container-name: estimate;
}

.estimate-results table {
  margin: 0;
}
.estimate-results table td, .estimate-results table th {
  padding: 0.5ex 1ch;
}

@container estimate (min-width: 550px) {
  .estimate-level:has(.estimate-results.hidden) #estimate-form {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin: 0;
  }
  .estimate-level:has(.estimate-results.hidden) #estimate-form button {
    width: auto;
  }
  .estimate-level:has(.estimate-results.hidden) #estimate-form .fields {
    margin: 0;
  }
  .estimate-level {
    display: flex;
    gap: 1rem 2rem;
    align-items: center;
  }
  .estimate-level > * {
    flex-basis: 50%;
  }
  .estimate-level:has(.estimate-results.hidden) > * {
    flex-basis: 100%;
  }
}