/* Hero form: the home page's first action. The repository field and its
   submit button share one bordered surface; the button wraps under the
   field, full width, when the row is narrower than the field's minimum.
   Under it, the check items of the free rating. */

.hero-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  max-inline-size: var(--measure);
  padding: var(--space-2xs);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-card);
  background-color: var(--bg-surface);
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.hero-form:hover {
  border-color: var(--text-muted);
}

.hero-form:focus-within {
  border-color: var(--accent);
}

/* The large grow factor keeps the spare width on the field while both share
   a row; alone on its row, the button takes the full width. */
.hero-form__input {
  flex: 999 1 15rem;
  min-inline-size: 0;
  min-block-size: var(--tap-large);
  padding-inline: var(--space-xs);
  border: 0;
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--step-0);
}

.hero-form__input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.hero-form .button {
  flex: 1 0 auto;
  justify-content: center;
}

.hero-form__notes {
  --cluster-space: var(--space-2xs) var(--space-m);
  color: var(--text-muted);
  font-size: var(--step--1);
}

.hero-form__point {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

.hero-form__check {
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}