/* Shared by the borrower portal (index.html) and the staff review page
   (staff.html). Same tokens as the internal app's index.html so the three
   read as one product. */
/* Same tokens as the internal app so the two read as one product. The layout
   is deliberately not the same: staff navigate a tool, borrowers follow a
   list. No sidebar, one column, one obvious next action. */
:root {
  --navy:#0A1E3C; --navy-mid:#162E58; --navy-light:#2A5080;
  --green:#2D8C1E; --green-bg:#EAF7E3;
  --amber:#92530C; --amber-bg:#FEF3E2;
  --red:#8B1D1D;   --red-bg:#FEF0EF;
  --blue:#1A4A8A;  --blue-bg:#EEF4FD;
  --cream:#F8F6F1; --white:#fff;
  --gray-50:#F9F9F8; --gray-100:#F0EEE9; --gray-200:#DDD9D0;
  --gray-400:#9E998E; --gray-600:#5C5850; --gray-800:#2C2A25;
  --radius:8px; --radius-lg:12px;
  --shadow:0 1px 3px rgba(13,35,64,.08),0 1px 2px rgba(13,35,64,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--gray-800);line-height:1.5}
.wrap{max-width:760px;margin:0 auto;padding:0 1.25rem 5rem}

/* ── header ── */
.top{background:var(--navy);color:#fff;padding:1.1rem 0;margin-bottom:1.75rem}
.top .wrap{display:flex;align-items:center;justify-content:space-between;padding-bottom:0}
.brand{font-family:'DM Serif Display',serif;font-size:19px;letter-spacing:-.3px}
.brand small{display:block;font-family:'DM Sans',sans-serif;font-size:11px;
  font-weight:300;color:rgba(255,255,255,.45);letter-spacing:.3px}
.who{font-size:12.5px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:.85rem}
.who button{background:none;border:none;color:rgba(255,255,255,.55);font-size:12.5px;
  font-family:inherit;cursor:pointer;text-decoration:underline;padding:0}
.who button:hover{color:#fff}

.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:1.25rem;box-shadow:var(--shadow);margin-bottom:1rem}
.card-title{font-family:'DM Serif Display',serif;font-size:17px;color:var(--navy);margin-bottom:.85rem}
h2.sec{font-size:11px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;
  color:var(--gray-400);margin:1.75rem 0 .6rem}

.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.1rem;font-size:13px;
  font-family:inherit;font-weight:500;border-radius:var(--radius);cursor:pointer;
  border:1px solid transparent;transition:all .15s}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-mid)}
.btn-secondary{background:#fff;color:var(--gray-800);border-color:var(--gray-200)}
.btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-400)}
.btn-sm{padding:.35rem .7rem;font-size:12px}
.btn:disabled{opacity:.5;cursor:default}

label.f{display:block;font-size:12px;font-weight:500;color:var(--gray-600);margin-bottom:.25rem}
input,select,textarea{padding:.5rem .75rem;font-size:14px;font-family:inherit;
  border:1px solid var(--gray-200);border-radius:var(--radius);background:#fff;
  color:var(--gray-800);outline:none;width:100%;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--navy-light)}
.row{display:grid;gap:.75rem;margin-bottom:.75rem}
.c2{grid-template-columns:1fr 1fr}
.c3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:620px){.c2,.c3{grid-template-columns:1fr}}
.hint{font-size:11.5px;color:var(--gray-400);margin-top:.25rem}

/* ── progress ── */
.prog{height:6px;background:var(--gray-100);border-radius:99px;overflow:hidden;margin-top:.75rem}
.prog i{display:block;height:100%;background:var(--green);transition:width .3s}

/* ── checklist ── */
.doc{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid var(--gray-100)}
.doc:last-child{border-bottom:none}
.dot{width:22px;height:22px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:600;margin-top:1px}
.dot.needed{border:2px solid var(--gray-200);background:#fff}
.dot.confirm{background:var(--amber-bg);color:var(--amber);border:2px solid var(--amber)}
.dot.received{background:var(--blue-bg);color:var(--blue);border:2px solid var(--blue)}
.dot.complete{background:var(--green);color:#fff}
.doc-main{flex:1;min-width:0}
.doc-name{font-size:14px;font-weight:500}
.doc-sub{font-size:12px;color:var(--gray-400);margin-top:.15rem}
.doc-act{display:flex;gap:.5rem;align-items:center;margin-top:.6rem;flex-wrap:wrap}
.tag{font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  padding:.15rem .45rem;border-radius:4px}
.tag.reuse{background:var(--amber-bg);color:var(--amber)}
.file-btn{position:relative;overflow:hidden;display:inline-block}
.file-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* ── tabs ── */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--gray-200);margin-bottom:1.25rem}
.tab{padding:.6rem 1rem;font-size:13.5px;font-weight:500;cursor:pointer;color:var(--gray-400);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--navy);border-bottom-color:var(--navy)}

/* ── banners ── */
.banner{padding:.75rem 1rem;border-radius:var(--radius);font-size:13px;margin-bottom:1rem;display:none}
.banner.show{display:block}
.banner.err{background:var(--red-bg);color:var(--red);border:1px solid #f3cfcd}
.banner.ok{background:var(--green-bg);color:var(--green);border:1px solid #cfe8c4}
.banner.info{background:var(--blue-bg);color:var(--blue);border:1px solid #cfe0f7}
.center{max-width:400px;margin:4rem auto;text-align:center}
.muted{color:var(--gray-400);font-size:13px}