/* Phone tools.
 *
 * The one rule that matters here: the button that spends money starts on the
 * LEFT. Both action rows on this screen used a flex:1 spacer, or a flex:1
 * field, to push their button to the right edge of the card, and the floating
 * "My To Do" dock is fixed to the bottom right corner and sits over
 * everything. On a short screen "Check 412 numbers" and "Scan this list" both
 * ended up underneath it. The office reported both.
 *
 * So the control leads the row and the explanation follows it, which also
 * reads in the order somebody makes the decision: what am I about to do, on
 * what, and what does it cost.
 */
.ph-run-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ph-run-row .btn {
  flex: 0 0 auto;
}

.ph-cap-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.ph-cap-row input {
  width: 110px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
}