#phc { max-width: 100%; overflow-x: hidden; }
#phc .phc-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { #phc .phc-grid-2 { grid-template-columns: 1fr 1fr; } }
#phc .phc-row { display: flex; gap: 8px; flex-wrap: wrap; }
#phc .phc-card { border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 16px; background: var(--wp--preset--color--base, #fff); }
#phc .phc-hint { font-size: .875em; opacity: .8; }
#phc .phc-pill { display:inline-block; border:1px solid rgba(0,0,0,.12); padding:6px 10px; border-radius:999px; font-size:.85em; }
#phc table { width: 100%; border-collapse: collapse; }
#phc th, #phc td { padding: 10px 8px; border-bottom: 1px solid rgba(0,0,0,.08); text-align: left; }
#phc td.num { text-align: right; }
/* Add a colon and space after stat labels, e.g., Strategy: Snowball */
#phc .phc-stat small::after { content: ': '; }
/* Subtle helper styles */
#phc .phc-disclaimer { font-size: 0.85em; opacity: 0.75; margin-top: 8px; }
/* Make the How it Works section slightly smaller; keep headings larger than body */
#phc #how { font-size: 0.93em; }
#phc #how h4 { font-size: 1.15em; font-weight: 700; margin-top: 0.6em; }
#phc #how p, #phc #how li { font-size: 1em; }
#phc #how ol { margin-left: 1.25em; }
#phc #how .phc-disclaimer { font-size: 0.9em; }
@media (max-width: 768px) {
  #phc .phc-grid[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  #phc button { width: 100%; }
}

/* Report request UI */
#phc #phc_email { min-width: 240px; padding: 8px 10px; }

/* Mobile optimizations */
@media (max-width: 640px) {
  #phc { font-size: 0.95em; }
  #phc .phc-card { padding: 12px; border-radius: 10px; }
  #phc .phc-row { gap: 6px; }
  #phc th, #phc td { padding: 8px 6px; }
  #phc table { font-size: 13px; }
  #phc input, #phc select, #phc textarea { width: 100%; min-height: 44px; }
  #phc .phc-grid { gap: 12px; }
  /* Keep key actions readable but compact */
  #phc h3, #phc h4 { margin: 0 0 8px; }
  /* Align header actions (How it works / Reset) to the left on mobile */
  #phc .phc-header-actions { margin-left: 0 !important; justify-content: flex-start; }
  /* Prevent overflow and allow wrapping */
  #phc table { table-layout: fixed; }
  #phc th, #phc td { word-break: break-word; }
  /* Per-Loan Summary: hide less critical columns on small screens */
  #phc #loanTable th:nth-child(3),
  #phc #loanTable td:nth-child(3), /* APR % */
  #phc #loanTable th:nth-child(7),
  #phc #loanTable td:nth-child(7)  /* Total Paid */ { display: none; }
}

@media (max-width: 420px) {
  /* Further reduce columns for very small devices */
  #phc #loanTable th:nth-child(2),
  #phc #loanTable td:nth-child(2)  /* Start Balance */ { display: none; }
  /* Action Plan: hide Focus Lender, keep Month, Payment, Remaining */
  #phc #planTable th:nth-child(2),
  #phc #planTable td:nth-child(2)  /* Focus Lender */ { display: none; }
}