/* Input form */
form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;

  max-width: 640px;

  margin: 0 auto;
  padding: 0.5em 1em;
}

form fieldset {
  display: grid;
  grid-template-columns: fit-content(25%) auto;
  grid-gap: 2px 0.5em;

  width: 100%;

  padding: 0;

  border: none;
}

form fieldset label {
  justify-self: end;
  align-self: center;

  text-align: right;

  white-space: pre-wrap;
}

form fieldset label[data-optional]::after {
  content: "\A(Optional)";

  opacity: 0.6;

  font-size: 0.9em;
}

form .input-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  width: 100%;
}

form .input-row button {
  grid-column: span 2;
}

form .input-row button:only-child {
  grid-column: span 4;
}

/* HACK One orphaned item (center) */
form .input-row button:last-child:nth-child(2n - 1):not(:only-child) {
  grid-column-end: 4;
}

@media screen and (max-width: 450px) {
  form {
    padding-left: 0;
    padding-right: 0;
  }

  form fieldset label {
    justify-self: start;
    align-self: end;

    padding-left: calc(1em + 2px);

    text-align: left;
  }

  form fieldset label[data-optional]::after {
    content: " (Optional)";
  }

  form fieldset > * {
    grid-column: span 2;
  }

  form .input-row button {
    grid-column: span 4;
  }

  /* HACK One orphaned item (span entire width) */
  form .input-row button:last-child:nth-child(2n - 1):not(:only-child) {
    grid-column-end: auto;
  }
}

/* NOTE[id=ubarlcbg] "ubarlcbg" = ROT13("honeypot") */
.ubarlcbg {
  /* NOTE If we set display: none, the input field wouldn't send its data */
  visibility: hidden;
  position: absolute;
  top: -9999px;
  left: -9999px;

  user-select: none;
  pointer-events: none;
}