/* lifecalc-ux-v1.css
   Base UX for finance calculators (inputs + helper text + units)
   Scope: apply under .lc-calc root only
*/

.lc-calc .form-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

.lc-calc .form-row label{
  width:90px;
  font-weight:500;
  flex:0 0 90px;
}

.lc-calc .form-row input[type="number"],
.lc-calc .form-row input[type="text"],
.lc-calc .form-row input[type="tel"]{
  width:260px;
  max-width:260px;
  text-align:left;
  padding:8px 10px;
  font-size:14px;
  box-sizing:border-box;
}

.lc-calc .form-row input::placeholder{
  text-align:left;
  color:#9aa4b2;
}

.lc-calc .form-unit{
  font-size:14px;
  color:#555;
  white-space:nowrap;
}

.lc-calc .helper-text{
  font-size:12px;
  color:#6b7280;
  margin:6px 0 12px 90px;
  line-height:1.4;
}

@media (max-width: 768px){
  .lc-calc .form-row{
    flex-wrap:wrap;
  }
  .lc-calc .form-row label{
    width:100%;
    flex:0 0 100%;
    margin-bottom:4px;
  }
  .lc-calc .helper-text{
    margin-left:0;
  }
  .lc-calc .form-row input[type="number"],
  .lc-calc .form-row input[type="text"],
  .lc-calc .form-row input[type="tel"]{
    width:100%;
    max-width:100%;
  }
}


/* ==== lifecalc-ux v2: aligned inputs + fixed unit width ==== */
.lc-calc{ --unit-w: 80px; }

.lc-calc .form-row{
  display:grid;
  grid-template-columns: 110px minmax(0,1fr) var(--unit-w);
  align-items:center;
  gap: 10px;
  margin-bottom: 12px;
}

.lc-calc .form-row label{
  width:auto;
  flex:unset;
  font-weight:600;
  color:#111827;
}

.lc-calc .form-row .field{ min-width:0; }

.lc-calc .form-row input[type="number"],
.lc-calc .form-row input[type="text"],
.lc-calc .form-row input[type="tel"],
.lc-calc .form-row select{
  width:100%;
  max-width:100%;
  height:36px;
  padding:0 12px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  box-sizing:border-box;
  font-size:14px;
}

.lc-calc .form-row select{
  justify-self:end;
}

.lc-calc .form-row .unit{
  justify-self:end;
  text-align:right;
  color:#6b7280;
  font-size:14px;
  white-space:nowrap;
}

.lc-calc .form-row input:focus,
.lc-calc .form-row select:focus{
  outline:none;
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.25);
}

/* mobile: allow unit/select to sit on same row */
@media (max-width: 640px){
  .lc-calc .form-row{
    grid-template-columns: 92px minmax(0,1fr) var(--unit-w);
  }
}


/* --- Global form control sanity (prevents overflow in narrow unit columns) --- */
input, select, textarea, button { box-sizing: border-box; }
select { min-width: 0; }