.form {
  display: grid;
  gap: var(--space-6);
}

.label {
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

/* The native file picker is needed alive, but not shown: its look is the system's and does not fit
   into the shell, so it is our button that presses it. */
.hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
}

/* The pair of languages stands in one row: it is one decision — out of what, into what — and split
   into two rows it reads as two unrelated fields. */
.pair {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
}

/* The live region is a container and nothing more: it takes no space of its own until there is
   something in it, so an empty one leaves no gap in the form. */
.live:empty {
  display: none;
}

.sending,
.failed,
.accepted {
  display: grid;
  gap: var(--space-4);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}

.accepted {
  border-top: 0;
  padding-top: 0;
}

.acceptedTitle {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-ui);
  font-weight: inherit;
}

/* A refusal is a state of the form and not an alarm (§3.8): the phrase stands in the ordinary text
   colour, and the tone of the state is carried by the book's own glyph in the tree — there is no
   red panel here and no exclamation mark. */
.failedTitle {
  color: var(--color-text);
}

.slot {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.fields {
  display: grid;
  margin: 0;
  gap: var(--space-2);
}

.field {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 2fr;
}

.fieldName {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.fieldValue {
  overflow: hidden;
  margin: 0;
  color: var(--color-text);
  text-overflow: ellipsis;
}