/* ---------------------------------------------------------------------------
   Tool page layout. Shared by every tool: a strip of controls above a
   workspace, and the state panels the workspace switches between. A new tool
   gets all of it by using the same markup shape.

   This was originally a rail beside the workspace. Both tools read better with
   the controls above: the answer sits directly under the inputs instead of
   diagonally opposite them, the primary action stays above the fold, and a
   map or a profile gets the full width instead of leaving a dead column
   beside it. Nothing used the rail afterwards, so it is gone; if a tool ever
   needs one, it can come back with a case for it.
   --------------------------------------------------------------------------- */

.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  padding-top: var(--s-6);
}
.tool-workspace { min-width: 0; }

.setup-submit { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line-2); }

.section-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin: calc(var(--s-4) * -1) 0 var(--s-4);
}
.section-toolbar .section__note { margin: 0; }

/* --- The control strip ----------------------------------------------------
   Steps sit side by side and read as one control bar. Below this the controls
   stack, which is the right shape for a phone.
   --------------------------------------------------------------------------- */
@media (min-width: 721px) {
  .tool-setup .panel__body {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--s-6); align-items: start;
  }
  .tool-setup .field-set + .field-set {
    margin-top: 0; padding-top: 0; border-top: 0;
    padding-left: var(--s-6); border-left: 1px solid var(--line-2);
  }
  .tool-setup .setup-submit {
    grid-column: 1 / -1; display: flex; justify-content: flex-end;
    margin-top: var(--s-2); padding-top: var(--s-5);
  }
  .tool-setup .setup-submit .btn { width: auto; min-width: 220px; }
}

/* Wide enough for the action to be a column of its own rather than a row.
   A whole row for one button is what pushed the readout below the fold on a
   short laptop. It bottom-aligns onto the baseline of the tallest control. */
@media (min-width: 1000px) {
  .tool-setup .setup-submit {
    grid-column: auto; align-self: end;
    margin-top: 0; padding-top: 0; border-top: 0;
  }
  .tool-setup .setup-submit .btn { width: 100%; min-width: 0; }
}

@media (max-width: 720px) {
  .tool-layout { padding-top: var(--s-5); }
  .section-toolbar { margin-top: 0; }
  .section-toolbar .section__actions { width: 100%; }
  .section-toolbar .section__actions .btn { flex: 1; }
}