/* /lib/tools-mobile.css
 * VelorStrategy Tools — mobile layout corrections for the bespoke tool design
 * system (RankForge / ClipForge / DocMerge / Invoicing / Internal Payments).
 *
 * These tool pages use their own class vocabulary (.inv/.job/.file/.row/.cmp)
 * that the site-wide /lib/mobile-fix.css (built for the workspace .hero-h1/.qa-chip
 * system) does NOT target. Load this AFTER mobile-fix.css.
 *
 * Primary fix: the list-row "one-character-per-line" collapse — a text cell
 * (.inv-main/.job-main) gets crushed to ~1ch by an adjacent non-shrinking action
 * group, and the global overflow-wrap:break-word then breaks the text per char.
 * Solution: stack the text block above the actions at <=640px, full width.
 *
 * Scoped to <=640px only — no desktop impact.
 */

@media (max-width: 640px) {

  /* --- List rows: text block on its own full-width line, actions below --- */
  .inv, .job, .finding {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    row-gap: 10px !important;
  }
  .inv-main, .job-main {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .inv-amt { flex: 0 0 auto !important; }
  .inv-acts, .job-acts {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  /* Buttons keep their own labels intact (wrap between buttons, not inside) */
  .inv-acts .btn, .job-acts .btn, .inv-acts .btn-sm, .job-acts .btn-sm {
    white-space: nowrap !important;
  }

  /* --- Text must wrap on word boundaries, never one character per line --- */
  .inv-num, .inv-meta, .job-title, .job-meta, .file-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* --- DocMerge input file row: icon stays put, name takes the rest --- */
  .file-name { flex: 1 1 auto !important; }

  /* --- RankForge comparison grid: single column --- */
  .cmp { grid-template-columns: 1fr !important; }

  /* --- Safety net: no bespoke tool block may exceed the viewport width --- */
  .wrap, .card, .inv, .job, .file, .finding, .cmp, .cmp-col {
    max-width: 100% !important;
  }
}