/* Mobile-only compression for the mileage and fee fields. */
@media (max-width: 760px) {
  .driver-mobile-inline-field {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: 0.65rem !important;
    row-gap: 0 !important;
    min-height: 0 !important;
    margin-block: 0.22rem !important;
    padding-block: 0.12rem !important;
  }

  .driver-mobile-inline-field > .driver-mobile-inline-label,
  .driver-mobile-inline-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .driver-mobile-inline-field > .driver-mobile-inline-control,
  .driver-mobile-inline-field > .driver-mobile-inline-control-host {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .driver-mobile-inline-control-host > .driver-mobile-inline-control,
  .driver-mobile-inline-field > .driver-mobile-inline-control {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 2.9rem !important;
    height: 2.9rem !important;
    margin: 0 !important;
    padding-block: 0.38rem !important;
  }
}

@media (max-width: 420px) {
  .driver-mobile-inline-field {
    column-gap: 0.48rem !important;
  }

  .driver-mobile-inline-control-host > .driver-mobile-inline-control,
  .driver-mobile-inline-field > .driver-mobile-inline-control {
    min-height: 2.75rem !important;
    height: 2.75rem !important;
  }
}

/* driver-inline-metrics-20260806b: match mileage/fee/meal controls to locked form height. */
.grid .field.compact-inline-metric-field {
  display: grid !important;
  grid-template-columns: minmax(6.4em, 8.2em) minmax(0, 1fr) !important;
  align-items: center !important;
  row-gap: 0 !important;
  column-gap: 12px !important;
  min-height: 38px !important;
  margin-bottom: 0 !important;
}

.grid .field.compact-inline-metric-field label {
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
  margin: 0 !important;
  min-height: 38px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.grid .field.compact-inline-metric-field input,
.grid .field.compact-inline-metric-field select {
  align-self: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 6px 11px !important;
  border-radius: 8px !important;
  font-size: 15.5px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
}

.grid .field.compact-inline-metric-field .hint {
  display: none !important;
}

@media (max-width: 640px) {
  .grid .field.compact-inline-metric-field {
    grid-template-columns: minmax(6.1em, 7.4em) minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }
}