/* V36 form rhythm + spacing pass. Loaded after V35 so dense legacy modules inherit one consistent form system. */
.app-main{padding:32px 34px 64px}
.app-main .screen>.grid{gap:24px}
.app-main .card,.app-main .pricing{padding:26px;border-radius:16px}
.app-main .card h2{margin-bottom:12px}
.app-main .card h3{margin-bottom:12px}
.app-main .card>h2+p,.app-main .card>h3+p{margin-top:0;margin-bottom:20px;max-width:92ch}

/* A label is a vertical field, never an inline label/control pair. */
.app-main label:not(.checkline){display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start;width:100%;margin:16px 0 0!important;font-size:12px!important;line-height:1.4!important;color:#344054!important;font-weight:750}
.app-main .card>h3+label:not(.checkline),.app-main .card>h2+label:not(.checkline){margin-top:18px!important}
.app-main label:not(.checkline)>input:not([type="checkbox"]):not([type="radio"]),
.app-main label:not(.checkline)>select,
.app-main label:not(.checkline)>textarea{display:block;width:100%!important;max-width:none;margin:0!important}
.app-main .formgrid{gap:20px 24px;margin-top:16px;align-items:start}
.app-main .formgrid>div>label:not(.checkline){margin:0!important}
.app-main .formgrid>div>label+input:not([type="checkbox"]):not([type="radio"]),
.app-main .formgrid>div>label+select,
.app-main .formgrid>div>label+textarea{display:block;width:100%;max-width:none;margin-top:8px}
.app-main .formgrid input:not([type="checkbox"]):not([type="radio"]),
.app-main .formgrid select,
.app-main .formgrid textarea{width:100%;max-width:none}
.app-main input:not([type="checkbox"]):not([type="radio"]),.app-main select,.app-main textarea{min-height:44px;padding:10px 12px}
.app-main textarea{min-height:104px}
.app-main .checkline{margin:16px 0 0!important}

/* Clear space before actions, dividers, generated lists and tables. */
.app-main .card>.btn,.app-main .card>.controls{margin-top:18px}
.app-main .card>.formgrid+.btn,.app-main .card>label+.btn,.app-main .card>.checkline+.btn{margin-top:18px}
.app-main .card>hr{margin:24px 0}
.app-main .controls{gap:12px;row-gap:10px}
.app-main .ess-list,.app-main .ops-list,.app-main .scroll{margin-top:18px}
.app-main .card>.small.muted:last-child,.app-main .form-status{margin-top:12px}
.app-main .row{gap:16px}

/* Parallel Payroll: make the demo action visibly responsive and keep controls from touching. */
#parallel .card>h3+.controls{margin-top:14px}
#parallel #parallelImportStatus{margin:12px 0 0}
#parallel #parallelMapping{margin-top:16px}
#parallel .mapping-grid{gap:18px}
#parallel .mapping-grid label{margin:0!important}

/* HR operations and migration are the densest forms in the app. */
#hroperations29 .card,#golive16 .card,#recruiting15 .card,#performance15 .card{align-content:start}
#hroperations29 .ess-list,#recruiting15 .ess-list,#performance15 .ess-list{margin-top:20px}
#hroperations29 .card>.formgrid:first-of-type{margin-top:18px}

@media(max-width:1100px){
  .app-main{padding:26px 24px 56px}
  .app-main .screen>.grid{gap:20px}
  .app-main .card,.app-main .pricing{padding:22px}
}
@media(max-width:900px){
  .app-main{padding:20px 16px 48px}
  .app-main .formgrid{grid-template-columns:1fr;gap:16px}
  .app-main .formgrid .wide{grid-column:auto}
  .app-main .card,.app-main .pricing{padding:20px}
}