Form:ResearchItem/styles.css

/* ResearchItem form – make PageForms not look like ass */

/* Keep the form centered and readable */ .mw-parser-output .formtable{

 width:100%;
 max-width:980px;
 margin:0 auto 18px;
 border-collapse:separate;
 border-spacing:0 12px;

}

/* Each row becomes a "cardy" block */ .mw-parser-output .formtable > tbody > tr{

 background:#fff;
 border:1px solid #e5e7eb;
 border-radius:12px;
 overflow:hidden;

}

/* Labels */ .mw-parser-output .formtable th{

 width:220px;
 vertical-align:top;
 text-align:left;
 font-weight:700;
 color:#1f2937;
 padding:14px 14px 8px;
 border:0;
 white-space:nowrap;

}

/* Fields */ .mw-parser-output .formtable td{

 padding:10px 14px 14px;
 border:0;

}

/* Inputs: consistent look */ .mw-parser-output .formtable input[type="text"], .mw-parser-output .formtable input[type="number"], .mw-parser-output .formtable input[type="url"], .mw-parser-output .formtable select, .mw-parser-output .formtable textarea{

 width:100%;
 max-width:100%;
 box-sizing:border-box;
 background:#fff;
 border:1px solid #d1d5db;
 border-radius:10px;
 padding:10px 12px;
 font-size:15px;
 line-height:1.35;

}

/* Make textareas feel nicer */ .mw-parser-output .formtable textarea{

 resize:vertical;
 min-height:96px;

}

/* Datepicker widgets */ .mw-parser-output .formtable .ui-datepicker-input, .mw-parser-output .formtable input.hasDatepicker{

 width:100% !important;

}

/* Subtle help text */ .mw-parser-output .mw-ui-muted{

 color:#6b7280;
 font-size:12px;

}

/* Buttons row */ .mw-parser-output .standardinput{

 max-width:980px;
 margin:0 auto;
 display:flex;
 gap:10px;
 flex-wrap:wrap;

}

/* PageForms "standard input" buttons inherit MW UI classes; just improve spacing */ .mw-parser-output .standardinput .mw-ui-button, .mw-parser-output .standardinput input[type="submit"], .mw-parser-output .standardinput input[type="button"]{

 border-radius:10px;
 padding:9px 14px;
 font-weight:700;

}

/* Responsive: labels above fields on mobile */ @media (max-width: 720px){

 .mw-parser-output .formtable > tbody > tr{
   display:block;
   padding:10px 12px;
 }
 .mw-parser-output .formtable th,
 .mw-parser-output .formtable td{
   display:block;
   width:auto;
   padding:0;
 }
 .mw-parser-output .formtable th{
   margin:0 0 6px;
   white-space:normal;
 }
 .mw-parser-output .formtable td{
   margin:0 0 8px;
 }

}