:root{
  --bg:#f4f6f9; --panel:#ffffff; --panel-2:#fafbfd; --border:#e3e7ee;
  --ink:#1a2233; --ink-dim:#5b6577; --ink-faint:#8993a4;
  --accent:#1e3a5f; --accent-2:#2f5d8a;
  --green:#1c7d4d; --green-bg:#e6f6ee;
  --amber:#a86200; --amber-bg:#fff3e0;
  --red:#b0281f; --red-bg:#fdeceb;
  --blue-bg:#eaf1fb;
  --shadow: 0 1px 3px rgba(20,30,50,.06), 0 1px 2px rgba(20,30,50,.08);
  --radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;}
a{color:var(--accent-2); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1180px; margin:0 auto; padding:20px 20px 80px;}

header.top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.brand{display:flex; gap:12px; align-items:center;}
.brand .mark{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;box-shadow:var(--shadow);}
.brand h1{font-size:17px; margin:0;}
.brand a.brandlink{color:var(--ink); text-decoration:none;}

nav.tabs{display:flex; gap:4px; margin-bottom:20px; flex-wrap:wrap; border-bottom:1px solid var(--border);}
nav.tabs a{padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--ink-dim); border-radius:8px 8px 0 0; position:relative; top:1px;}
nav.tabs a:hover{text-decoration:none; color:var(--accent);}
nav.tabs a.active{color:var(--accent); background:var(--panel); border:1px solid var(--border); border-bottom:1px solid var(--panel);}
.logout{margin-left:auto; font-size:12.5px; color:var(--ink-faint); align-self:center;}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:20px;}
.kpi{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
.kpi .label{font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-faint); font-weight:700;}
.kpi .value{font-size:22px; font-weight:700; margin-top:6px;}
.kpi .sub{font-size:12px; color:var(--ink-dim); margin-top:4px;}
.kpi.pos .value{color:var(--green);} .kpi.warn .value{color:var(--amber);}

.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden;}
.panel h2{font-size:14.5px; margin:0; padding:14px 18px; border-bottom:1px solid var(--border); background:var(--panel-2); display:flex; justify-content:space-between; align-items:center;}
.panel h2 small{display:block; font-weight:500; color:var(--ink-faint); font-size:11.5px; margin-top:2px;}
.panel .body{padding:16px 18px;}
.panel h2 .btn{font-size:12px;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-faint); padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap;}
td{padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top;}
tr:last-child td{border-bottom:none;}
.num{font-variant-numeric:tabular-nums;} .right{text-align:right;}

.badge{display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap;}
.badge.green{background:var(--green-bg); color:var(--green);}
.badge.amber{background:var(--amber-bg); color:var(--amber);}
.badge.red{background:var(--red-bg); color:var(--red);}
.badge.blue{background:var(--blue-bg); color:var(--accent-2);}
.badge.grey{background:#eef0f4; color:var(--ink-dim);}

.name{font-weight:600;} .muted{color:var(--ink-faint); font-size:12px;}
.group-tag{font-size:11px; color:var(--accent-2); background:var(--blue-bg); padding:1px 7px; border-radius:6px; margin-left:6px; font-weight:600;}

.flash{padding:10px 16px; border-radius:9px; font-size:13px; margin-bottom:14px; font-weight:600;}
.flash.ok{background:var(--green-bg); color:var(--green);}
.flash.error{background:var(--red-bg); color:var(--red);}
.flash.warn{background:var(--amber-bg); color:var(--amber);}

form.stack{display:flex; flex-direction:column; gap:14px; max-width:560px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
label{font-size:12.5px; font-weight:700; color:var(--ink-dim); display:block; margin-bottom:5px;}
input[type=text], input[type=number], input[type=date], input[type=password], input[type=tel],
select, textarea{
  width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:8px; font-size:13.5px;
  background:#fff; color:var(--ink); font-family:inherit;
}
textarea{min-height:70px; resize:vertical;}
input[type=file]{font-size:13px;}
.btn{
  display:inline-block; padding:9px 16px; border-radius:8px; border:none; background:var(--accent);
  color:#fff; font-weight:700; font-size:13.5px; cursor:pointer; text-align:center;
}
.btn:hover{background:var(--accent-2); text-decoration:none; color:#fff;}
.btn.secondary{background:#fff; color:var(--accent); border:1px solid var(--border);}
.btn.small{padding:5px 11px; font-size:12px;}
.field-hint{font-size:11.5px; color:var(--ink-faint); margin-top:4px;}

.score-breakdown{border:1px solid var(--border); border-radius:9px; overflow:hidden; margin-top:6px;}
.score-row{display:flex; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--border); font-size:12.5px;}
.score-row:last-child{border-bottom:none;}
.score-row .pts{font-weight:700;}

.login-box{max-width:340px; margin:14vh auto 0; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);}
.login-box h1{font-size:17px; margin:0 0 4px;}
.login-box p{color:var(--ink-dim); font-size:12.5px; margin:0 0 18px;}

.tag-row{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;}

footer.note{font-size:11.5px; color:var(--ink-faint); text-align:center; margin-top:30px; line-height:1.7;}

@media (max-width:760px){
  table, thead, tbody, th, td, tr { display:block; }
  thead{display:none;}
  tr{border-bottom:1px solid var(--border); padding:8px 0;}
  td{border:none; padding:4px 14px;}
  td:before{content:attr(data-label); display:block; font-size:10.5px; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin-bottom:2px;}
  .grid2{grid-template-columns:1fr;}
}

/* Button groups — used in panel headers and at the foot of forms, so an
   "Edit" and a "Cancel" sit beside the primary action instead of stacking. */
.btn-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.btn-row .btn{margin:0;}

/* A submit button that reads as a quiet link — for row-level destructive
   actions (removing one payment) that shouldn't compete with the page's
   primary button. Needs to be a real <button> because it posts a form. */
.linkbtn{background:none; border:none; padding:0; font:inherit; font-size:12px;
  color:var(--ink-faint); cursor:pointer; text-decoration:underline;}
.linkbtn:hover{color:var(--red);}

/* Score breakdown — the five scoring.py factors and what each contributed.
   The .score-breakdown/.score-row shell was already defined above; these are
   the pieces needed to make a factor row readable on a phone. */
.score-row .factor{display:flex; flex-direction:column; gap:1px; padding-right:12px;}
.score-row .factor .muted{font-size:11.5px; line-height:1.45;}
.score-row .pts{white-space:nowrap; font-variant-numeric:tabular-nums;}
.score-row .pts .muted{font-weight:500;}
.score-row .pts.zero{color:var(--red);}
.score-row .pts.full{color:var(--green);}

h3.subhead{font-size:12px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--ink-faint); margin:18px 0 8px;}

/* Collapsible "why" on the loan form — open by default for HIGH RISK, where
   the reasoning is the thing you most need in front of you. */
details.why{margin-top:10px;}
details.why summary{cursor:pointer; font-size:12.5px; font-weight:700; color:var(--accent-2); padding:2px 0;}
details.why summary:hover{text-decoration:underline;}
details.why[open] summary{margin-bottom:8px;}

@media (max-width:760px){
  /* Key/value tables (a label cell and a figure cell) already read fine as two
     columns on a phone, so they opt out of the stacking rule above — which
     would otherwise print each label twice: once from td:before and again as
     the label cell's own text. */
  table.kv, table.kv tbody{display:table; width:100%;}
  table.kv tr{display:table-row;}
  table.kv td{display:table-cell; border-bottom:1px solid var(--border); padding:10px 14px;}
  table.kv td:before{content:none;}

  /* Panel headers carry action buttons; on a narrow screen give the buttons
     their own full-width row instead of squeezing them beside a long name. */
  .panel h2{flex-wrap:wrap; gap:8px;}
  .panel h2 .btn-row{width:100%;}
  .panel h2 .btn-row .btn{flex:1;}
}

/* --- Document viewer ------------------------------------------------------
   Documents grouped by type, each expanding to an inline preview. Replaces the
   flat list of links that used to punt you into the browser's own PDF viewer
   in a separate tab. */
.docgroup{border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:12px;}
.docgroup-head{background:var(--panel-2); border-bottom:1px solid var(--border);
  padding:8px 13px; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--ink-dim); display:flex; align-items:center; gap:8px;}
.docgroup-head .count{background:var(--border); color:var(--ink-dim); border-radius:99px;
  padding:0 7px; font-size:11px; letter-spacing:0;}

details.doc{border-bottom:1px solid var(--border);}
details.doc:last-child{border-bottom:none;}
details.doc > summary{cursor:pointer; padding:10px 13px; display:flex; gap:10px;
  align-items:baseline; justify-content:space-between; font-size:13px; list-style:none;}
details.doc > summary::-webkit-details-marker{display:none;}
/* a disclosure triangle that rotates, since the native marker is hidden */
details.doc > summary:before{content:"▸"; color:var(--ink-faint); font-size:11px;
  transition:transform .12s ease; display:inline-block;}
details.doc[open] > summary:before{transform:rotate(90deg);}
details.doc > summary:hover{background:var(--panel-2);}
.doc-name{flex:1; word-break:break-word; font-weight:600;}
.doc-meta{color:var(--ink-faint); font-size:11.5px; white-space:nowrap; display:flex; gap:6px; align-items:center;}

.doc-body{padding:0 13px 13px;}
.doc-frame{width:100%; height:560px; border:1px solid var(--border); border-radius:8px; background:#fff;}
.doc-image{max-width:100%; height:auto; border:1px solid var(--border); border-radius:8px; display:block;}
.doc-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px;}
.doc-actions form{margin:0;}
.doc-actions .retype select{font-size:12px; padding:5px 8px; width:auto; max-width:220px;}

@media (max-width:760px){
  /* A tall PDF frame on a phone is mostly wasted scroll — shrink it and let
     "Open in new tab" handle real reading. */
  .doc-frame{height:340px;}
  .doc-actions .btn, .doc-actions .retype select{flex:1 1 auto;}
}