/* The form panel and the result panel under it, apart from each other. */
.ui-tryout-page {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
/* The try-out form: the repo and PR on one line, then one block per
   classification, then the actions. */
.ui-tryout-form {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 1em;
}
.ui-tryout-target {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
}
.ui-tryout-target > * {
  flex: 1 1 14em;
}
.ui-tryout-target > button {
  flex: none;
  align-self: flex-end;
}
.ui-tryout-loaded {
  margin: 0;
  color: var(--muted);
}
.ui-tryout-classification {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 0.75em;
  border: 1px solid var(--border);
  border-radius: 0.5em;
}
.ui-tryout-classification-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75em;
}
.ui-tryout-classification-row > * {
  flex: 1 1 12em;
}
.ui-tryout-classification-row > button {
  flex: none;
}
.ui-tryout-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
}
.ui-tryout-hint {
  margin: 0;
  color: var(--muted);
}
.ui-tryout-running {
  margin: 0;
  color: var(--muted);
}