@media (max-width: 640px) {
  /* Keep expanded mobile form fields aligned to the same full width. */
  .mobile-details-fields {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .mobile-details-fields .variable-expense-form-field,
  .mobile-details-fields .date-field,
  .mobile-details-fields .subcategory-field,
  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open .description-cell,
  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open .amount-cell,
  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open .budget-cell,
  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open .liquidity-cell {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
  }

  .mobile-details-fields .variable-expense-form-input,
  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open .cell-input,
  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open .amount-editor {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Prevent native mobile date controls from exceeding their grid column. */
  .variable-expense-form-grid .date-field {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .variable-expense-form-grid input[type="date"] {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}