/* FIRE 0.6.1 review fixes: phone-width layout and a readability floor.
   Loaded last so it only overrides what it names. */

/* Two-column form grids could not shrink below their longest select option,
   so the Stress test form, My plan tool cards and Invest advanced options
   ran 19-173px past a 360-412px screen. Let columns shrink, then stack on phones. */
.form-grid,
.advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid > *,
.advanced-grid > * { min-width: 0; }
.form-grid select, .form-grid input,
.advanced-grid select, .advanced-grid input,
.tool-field select, .tool-field input { max-width: 100%; min-width: 0; }

/* Single-column card grids sized themselves to their widest child on phones
   (the mortgage tool ran 13px past a 360px screen with its details open). */
.two-col > *, .section-row > *, .three-col > * { min-width: 0; }

@media (max-width: 600px) {
  .form-grid,
  .advanced-grid { grid-template-columns: minmax(0, 1fr); }

  /* Nothing a person must read below 11px on a phone (was 8-9px). */
  .grow-eyebrow,
  .hero-copy .eyebrow,
  .retreat-banner .hero-copy .eyebrow,
  .chosen-heading .eyebrow { font-size: 11px; letter-spacing: 1.2px; }
  .stat label,
  .mobile-result-strip small,
  .money-field-label .unit-button,
  .grow-range-ends,
  .grow-point-values span,
  .grow-point-values .money-companion,
  .ss-timeline div { font-size: 11px; }
}

/* Help "?" buttons were 16-17px square; WCAG 2.2 asks for at least 24px. */
.grow-help { width: 24px; height: 24px; font-size: 12px; }