/* ===========================================================================
   tools-layout.css — LAYER 3 of 3 (page layout only)
   The Tools page's form grid and result stack. No colours, no component paint.
   =========================================================================== */

.tools {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tools__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.tools__heading {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Flex rather than a fixed grid: the Record field is hidden for every tool but
   DNS, and a fixed column set would leave a gap where it used to be. */
.tools__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem;
  padding: 1.1rem;
}

.tools__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.tools__field--tool   { flex: 0 1 12rem; }
.tools__field--record { flex: 0 1 7rem; }
.tools__field--target { flex: 1 1 18rem; }
.tools__field--submit { flex: 0 0 auto; }

.tools__output {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 620px) {
  .tools__field--tool,
  .tools__field--record,
  .tools__field--target,
  .tools__field--submit { flex: 1 1 100%; }
}