/* 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}

/* ── loan application ──
   Laid out for a laptop first (Sean's baseline): the page widens on this tab,
   a section list rides down the left, and short answers share a row. It still
   reads straight down, one section after another; phones get one column. */
body.wide-app .wrap{max-width:1180px}
.la-grid{display:grid;grid-template-columns:220px 1fr;gap:1.5rem;align-items:start}
.la-nav{position:sticky;top:1rem;font-size:13px}
.la-nav a{display:flex;gap:.5rem;align-items:center;padding:.4rem .6rem;border-radius:var(--radius);
  color:var(--gray-600);text-decoration:none;cursor:pointer}
.la-nav a:hover{background:var(--gray-100)}
.la-nav .ck{width:16px;height:16px;border-radius:50%;border:2px solid var(--gray-200);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}
.la-nav .ck.done{background:var(--green);border-color:var(--green)}
.la-nav .save{margin-top:.9rem;padding:.5rem .6rem;font-size:12px;color:var(--gray-400)}
.la-sec{scroll-margin-top:1rem}
.la-sec .card-title{display:flex;gap:.6rem;align-items:baseline}
.la-sec .num{font-family:'DM Mono',monospace;font-size:13px;color:var(--gray-400)}
.la-sec .blurb{font-size:12.5px;color:var(--gray-400);margin:-.5rem 0 1rem}
.fg{display:grid;grid-template-columns:repeat(6,1fr);gap:.85rem 1rem}
.fg > div{grid-column:span 6}
.fg > .w3{grid-column:span 3}
.fg > .w2{grid-column:span 2}
.fg .req label.f::after{content:' *';color:var(--gray-400)}
.fg .miss input,.fg .miss select,.fg .miss textarea,.fg .miss .yn{border-color:var(--red)}
.fg textarea{min-height:84px;resize:vertical}
.yn{display:inline-flex;border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden}
.yn button{border:none;background:#fff;padding:.45rem 1.1rem;font-family:inherit;font-size:13px;cursor:pointer;color:var(--gray-600)}
.yn button + button{border-left:1px solid var(--gray-200)}
.yn button.on{background:var(--navy);color:#fff}
.yn button:disabled{cursor:default}
.yn2{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--gray-600)}
.locked-note{font-size:12.5px;background:var(--amber-bg);color:var(--amber);border-radius:var(--radius);
  padding:.5rem .75rem;margin:-.25rem 0 1rem}
.mem{display:flex;gap:.75rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--gray-100);font-size:13.5px}
.mem:last-child{border-bottom:none}
.mem .mname{flex:1;min-width:0}
.mem .mname small{display:block;color:var(--gray-400);font-size:12px}
.chip{font-size:11px;font-weight:600;padding:.15rem .5rem;border-radius:99px;background:var(--gray-100);color:var(--gray-600);white-space:nowrap}
.chip.ok{background:var(--green-bg);color:var(--green)}
.chip.go{background:var(--blue-bg);color:var(--blue)}
.chip.warn{background:var(--amber-bg);color:var(--amber)}
.sig-pad{width:100%;max-width:460px;height:120px;border:1px dashed var(--gray-400);border-radius:var(--radius);
  background:#fff;touch-action:none;display:block}
.signer{border:1px solid var(--gray-200);border-radius:var(--radius);padding:1rem;margin-bottom:1rem}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:13px;margin-top:.75rem}
.consent input{width:auto;margin-top:.2rem}
@media(max-width:900px){
  .la-grid{grid-template-columns:1fr}
  .la-nav{display:none}
  .fg > .w3,.fg > .w2{grid-column:span 6}
}

/* Empty boxes are empty: no grey example text (Sean, 2026-10-05). Hidden
   rather than deleted so JS-built fields are covered too. An empty date box
   hides its mm/dd/yyyy the same way until it is focused (tabkeep script marks
   it .is-empty). */
::placeholder { color: transparent !important; opacity: 0 !important; }
input[type=date].is-empty:not(:focus)::-webkit-datetime-edit { color: transparent; }

/* Assets: the list of bank accounts in the application. */
table.acct { width: 100%; border-collapse: collapse; }
table.acct th { text-align: left; font-size: 11px; font-weight: 600; color: var(--gray-400, #8a94a6); padding: 0 .4rem .3rem 0; }
table.acct td { padding: 0 .4rem .4rem 0; vertical-align: middle; }
table.acct input, table.acct select { width: 100%; }
@media (max-width: 640px) { table.acct thead { display: none; } table.acct tr { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin-bottom: .6rem; } }