/* ============================================================
TOOL-SPECIFIC STYLES (Income Retention)
Fixes:
✔ responsive layout stability
✔ mobile stacking
✔ grid shrink issues
✔ chart scaling
============================================================ */


/* ---------- GRID STABILITY FIX ---------- */

/* CRITICAL: allow grid items to shrink properly */
.section-card {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}


/* ---------- CHART (MOST IMPORTANT FIX) ---------- */

canvas {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  margin-top: 10px;
}


/* ---------- RESULT BOX ---------- */

.retention-box {
  margin-top: 16px;
  padding: 14px;
  border-radius: 8px;

  font-size: 1.3rem;
  font-weight: 700;

  background: linear-gradient(135deg, #e0f2fe, #dbeafe);
  color: #1e3a8a;

  text-align: center;

  /* prevent overflow on small screens */
  word-wrap: break-word;
}


/* ---------- TYPOGRAPHY HELP ---------- */

.note {
  line-height: 1.4;
}


/* ---------- HR CLEAN ---------- */

hr {
  border: none;
  height: 1px;
  background: #d7d9dd;
  margin: 16px 0 14px;
}


/* ============================================================
MOBILE BEHAVIOR (CRUCIAL)
============================================================ */

@media (max-width: 900px) {

  /* ensure vertical spacing when stacked */
  .calc-grid {
    gap: 1.25rem;
  }

  .section-card {
    padding: 16px;
  }

  /* improve chart spacing */
  canvas {
    margin-top: 12px;
  }

  /* prevent large text overflow */
  .retention-box {
    font-size: 1.1rem;
  }
}


/* ============================================================
VERY SMALL DEVICES (PHONES)
============================================================ */

@media (max-width: 480px) {

  .section-card {
    padding: 14px;
  }

  .retention-box {
    font-size: 1rem;
    padding: 12px;
  }

  /* tighter spacing for inputs */
  input,
  select {
    font-size: 16px; /* prevents zoom issues on iOS */
  }

}


/* ============================================================
RESIZE / RECALC STABILITY (KEY FIX)
============================================================ */

/* prevents layout "sticking" after resize */
.calc-grid > * {
  min-width: 0;
}

/* ensures no hidden overflow breaks layout */
.calc-page {
  overflow-x: hidden;
}