@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}
/* NOTE: was height:100vh;overflow:hidden — a leftover from the old .form-layout/
   .form-main two-pane app-shell (that layout is now permanently display:none,
   replaced by .m-form-shell, see agreement_form.html). The new shell is a plain
   block that relies on normal page scroll, so clipping body to one viewport with
   no scroll silently cut off any content past the first screen (only visible by
   zooming out, since that fits more content into the same 100vh box). */
body{font-family:'Inter','Segoe UI',Arial,sans-serif;background:#f8f9fc;color:#1a202c;line-height:1.6;min-height:100vh;overflow-y:auto;overflow-x:hidden;}
.hidden{display:none!important;}

.form-layout{display:flex;height:100vh;}

/* SIDEBAR */
.sidebar{width:272px;background:#fff;border-right:1px solid #e5e7eb;padding:28px 20px;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:36px;}
.brand-logo{width:38px;height:38px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:9px;flex-shrink:0;}
.brand h3{font-size:17px;color:#1F2A44;font-weight:800;margin:0;}
.brand-badge{font-size:10px;background:#eef2ff;color:#667eea;padding:2px 7px;border-radius:4px;font-weight:700;display:block;margin-top:2px;}

.stepper{flex:1;}
.step-ind{display:flex;gap:14px;margin-bottom:22px;padding:6px 8px;border-radius:9px;cursor:pointer;transition:background .2s;opacity:.45;}
.step-ind.active{opacity:1;}
.step-ind.done{opacity:.8;}
.step-ind.done:hover,.step-ind.active:hover{background:#f0f4ff;}
.step-num{width:30px;height:30px;border-radius:50%;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#9ca3af;background:#fff;flex-shrink:0;transition:.2s;}
.step-ind.active .step-num{border-color:#667eea;background:#667eea;color:#fff;}
.step-ind.done .step-num{border-color:#10b981;background:#10b981;color:#fff;}
.step-txt span{display:block;font-weight:600;color:#1F2A44;font-size:14px;}
.step-txt small{font-size:11px;color:#9ca3af;}

.sidebar-exit{text-decoration:none;color:#9ca3af;font-size:13px;font-weight:600;padding:10px 0;margin-top:auto;display:block;}
.sidebar-exit:hover{color:#667eea;}

/* MOBILE PROGRESS */
.mobile-progress{display:none;background:#fff;padding:10px 16px 12px;border-bottom:1px solid #e5e7eb;flex-shrink:0;position:sticky;top:0;z-index:50;}
.mob-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.mob-home-btn{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:#667eea;text-decoration:none;padding:6px 10px;border:1.5px solid #e0d9f9;border-radius:8px;background:#f5f3ff;min-width:72px;}
.mob-home-btn:active{background:#ede9fe;}
.mob-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1F2A44;font-size:14px;font-weight:800;}
.mob-brand-logo{width:28px;height:28px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:7px;flex-shrink:0;}
.prog-label{font-size:12px;font-weight:600;color:#64748b;margin-bottom:6px;}
.prog-track{background:#e2e8f0;border-radius:99px;height:5px;}
.prog-fill{background:linear-gradient(90deg,#667eea,#9f7aea);height:5px;border-radius:99px;transition:width .35s ease;}

/* MAIN CONTENT */
.form-main{flex:1;overflow-y:auto;padding:40px 56px;}
.form-step{max-width:780px;margin:0 auto;animation:fadeIn .3s ease;}
.step-heading{font-size:22px;font-weight:800;color:#1F2A44;border-bottom:1px solid #e5e7eb;padding-bottom:14px;margin-bottom:28px;}

/* GRID */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.full{grid-column:1/-1;}

/* FIELDS */
.fg{display:flex;flex-direction:column;margin-bottom:4px;}
.fg label{font-size:13px;font-weight:600;color:#374151;margin-bottom:5px;}
.fg input,.fg textarea,.fg select{padding:11px 13px;border:1.5px solid #d1d5db;border-radius:8px;font-size:14px;font-family:inherit;background:#fff;transition:border-color .2s,box-shadow .2s;}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px rgba(102,126,234,.12);}
.fg input.err,.fg textarea.err{border-color:#ef4444!important;}
.ferr{font-size:12px;color:#ef4444;font-weight:500;margin-top:3px;display:none;}
.ferr.show{display:block;}
.uid-hint{font-size:11px;color:#9ca3af;margin-top:3px;}

/* CHECKBOX */
.check-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;}
.check-row input[type=checkbox]{width:17px;height:17px;cursor:pointer;flex-shrink:0;margin-top:2px;}
.check-row span{font-size:13px;color:#374151;line-height:1.5;}

/* END DATE */
.end-date-box{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:9px 13px;font-size:13px;color:#15803d;font-weight:600;margin-top:6px;display:none;}

/* SAVE INDICATOR */
.save-ind{font-size:11px;color:#10b981;font-weight:600;opacity:0;transition:opacity .3s;margin-bottom:16px;display:flex;align-items:center;gap:4px;}
.save-ind.show{opacity:1;}

/* BTN ROW */
.btn-row{margin-top:36px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.btn-row.right{justify-content:flex-end;}
.btn-primary{background:#667eea;color:#fff;padding:12px 30px;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-family:inherit;font-size:14px;transition:background .2s;}
.btn-primary:hover{background:#5a6fd6;}
.btn-back{background:#fff;border:1.5px solid #d1d5db;padding:12px 22px;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;font-size:14px;color:#374151;transition:.2s;}
.btn-back:hover{border-color:#667eea;color:#667eea;}
.btn-dl{background:#10b981;color:#fff;padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-family:inherit;font-size:13px;display:flex;align-items:center;gap:8px;transition:opacity .2s;}
.btn-dl:hover{opacity:.9;}
.btn-dl.loading{opacity:.6;pointer-events:none;}
.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none;}
.btn-dl.loading .spin{display:inline-block;}

/* PREVIEW */
.preview-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.preview-bar h2{font-size:20px;font-weight:800;color:#1F2A44;}
.draft-warn{font-size:12px;color:#ef4444;font-weight:600;}
.paper{background:#fff;padding:48px;box-shadow:0 4px 20px rgba(0,0,0,0.06);font-family:'Times New Roman',serif;font-size:13pt;line-height:1.8;color:#000;position:relative;overflow:hidden;}
.paper::before{content:'DRAFT - NOT VALID UNTIL REGISTERED';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-35deg);font-size:36px;font-weight:900;color:rgba(200,0,0,0.055);white-space:nowrap;pointer-events:none;z-index:0;font-family:'Inter',sans-serif;letter-spacing:2px;}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes spin{to{transform:rotate(360deg);}}

@media(max-width:768px){
  body{height:auto;overflow:auto;}
  .form-layout{flex-direction:column;height:auto;}
  .sidebar{display:none;}
  .mobile-progress{display:block;}
  .form-main{padding:16px 14px;overflow-y:visible;}
  .grid2{grid-template-columns:1fr;}
  .paper{padding:20px 14px;}
  .paper::before{font-size:18px;}
  .btn-row{flex-wrap:wrap;gap:10px;}
  .btn-primary{width:100%;justify-content:center;}
  .step-heading{font-size:18px;}
  .party-block{padding:16px 14px;}
  .fg input,.fg textarea,.fg select{font-size:16px;}  /* prevent iOS zoom */
  .form-step{padding:20px 16px;}
  .btn-row.right{justify-content:stretch;}
  .btn-row.right .btn-primary{width:100%;}
}
@media(max-width:420px){
  .form-main{padding:12px 10px;}
  .form-step{padding:16px 12px;}
  .party-block{padding:12px 10px;}
  .step-heading{font-size:16px;}
}

/* MULTIPLE PARTIES */
.party-block{background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:12px;padding:20px;margin-bottom:16px;position:relative;}
.party-label{font-size:12px;font-weight:800;color:#667eea;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}
.party-remove{background:#fef2f2;color:#ef4444;border:none;border-radius:6px;padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;}
.party-remove:hover{background:#fee2e2;}
.btn-add-party{background:#f0f4ff;color:#667eea;border:1.5px dashed #667eea;border-radius:9px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;width:100%;margin-bottom:20px;transition:.2s;}
.btn-add-party:hover{background:#e8edff;}