/* ============================================================
   portal.css — the borrower-facing chrome PLUS the form and
   query primitives shared with the lender side.

   .portal .spine .pbrand .loanTile .sidebar-switch  — borrower only
   .field .inp .answerChoices .consentLine .erow
   .qcard .replybox .stepacts .track .bigclock       — both sides
     (the lender's "raise a query" sheet uses these, so every page
      links this file, not just borrower.html)
   ============================================================ */

.portal{
  position:relative; z-index:1;
  display:grid; grid-template-columns:296px minmax(0,1fr);
  gap:34px; max-width:1240px; margin:0 auto;
  padding:30px 26px 90px;
  min-height:100vh;
}
/* The grid would otherwise stretch <aside> to match the main column's
   height on a long step. Sticking .spine alone inside a stretched aside
   gave it thousands of pixels of range to stick across, so it never
   released — and .sidefoot, an ordinary sibling scrolling at normal
   speed, slid straight through it. Sticking the whole aside as ONE
   unit (as .rail already does for the lender chrome) means spine and
   sidefoot move together at a fixed offset and can never overlap. */
.portal > aside{ align-self:start; position:sticky; top:20px; }

/* ---------- brand ---------- */
.portal .pbrand{ display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.portal .pbrand .mark{
  width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--accent), var(--brass));
  color:var(--accent-ink); font-family:var(--font-display); font-size:23px; font-weight:600;
}
.portal .pbrand .name{ font-family:var(--font-display); font-size:25px; line-height:1; }
.portal .pbrand .sub{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }

/* ---------- step spine ---------- */
.spine{ }
.spine ol{ list-style:none; margin:0; padding:0; }
.spine li{
  position:relative; display:flex; gap:13px; align-items:flex-start;
  padding:0 0 20px 0; color:var(--ink-3); font-size:13px;
}
.spine li:last-child{ padding-bottom:0; }
/* the connecting thread */
.spine li:not(:last-child)::before{
  content:''; position:absolute; left:8px; top:20px; bottom:2px;
  width:1.5px; background:var(--line-2);
}
.spine li.done:not(:last-child)::before{ background:var(--accent-line); }
.spine .mk{
  position:relative; z-index:1; flex:none;
  width:17px; height:17px; border-radius:50%; margin-top:1px;
  border:1.5px solid var(--line); background:var(--bg-1);
  display:grid; place-items:center; font-size:9px; color:transparent;
  transition:border-color var(--fast), background var(--fast), color var(--fast);
}
.spine li.done .mk{ border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.spine li.now .mk{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.spine li.done, .spine li.now{ color:var(--ink); }
.spine li.now .lb{ font-weight:650; }
.spine .lb{ line-height:1.35; padding-top:0; }
.spine li[data-clickable]{ cursor:pointer; }
.spine li[data-clickable]:hover{ color:var(--ink); }

/* ---------- sidebar foot ----------
   Referenced in borrower.html since the demo-panel removal but never
   given a rule — it was rendering as bare unstyled blocks. */
.sidefoot{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:14px;
}
.sidepbk{
  display:inline-flex; align-items:center; gap:7px; width:fit-content;
  font-size:11.5px; font-weight:650; color:var(--accent); text-decoration:none;
  padding:7px 12px; border:1px solid var(--accent-line); border-radius:var(--r-pill);
  background:var(--accent-soft); transition:background var(--fast), border-color var(--fast);
}
.sidepbk:hover{ background:var(--panel); border-color:var(--accent); }
.sidehelp{
  padding:14px 15px; border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--panel-3); font-size:12px; line-height:1.55; color:var(--ink-2);
}
.sheadline{ font-weight:650; color:var(--ink); margin-bottom:5px; }
.sidehelp p{ margin:0; }
.sidehelp b{ color:var(--ink); }
.siderow{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* ---------- step card ---------- */
.stepcard{ --panel-bg: var(--panel); padding:32px 34px; min-height:440px; }
.stepcard h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(26px,3vw,36px); line-height:1.12; letter-spacing:-.005em;
  margin:6px 0 0;
}
.stepcard .lede{ margin:10px 0 0; max-width:62ch; }
.stepacts{
  display:flex; align-items:center; gap:12px;
  margin-top:30px; padding-top:20px; border-top:1px solid var(--line-2);
}

/* ---------- loan type tiles ---------- */
.tilegroup{ font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3); margin:22px 0 9px; }
.loanTiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:10px; }
.loanTile{
  text-align:left; cursor:pointer; padding:13px 14px;
  background:var(--panel-3); border:1px solid var(--line-2); border-radius:var(--r-md);
  color:var(--ink-2); font:inherit;
  transition:background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast);
}
.loanTile:hover{ background:var(--panel-2); border-color:var(--line); transform:translateY(-1px); }
.loanTile[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink); }
.loanTile .tt{ font-weight:650; font-size:13.5px; color:var(--ink); }
.loanTile .td{ font-size:11.5px; color:var(--ink-3); margin-top:3px; line-height:1.4; }

/* ---------- form fields ---------- */
.fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:24px; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.wide{ grid-column:1 / -1; }
.field > .k{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.field .hint{ font-size:11.5px; color:var(--ink-3); }

.inp{
  height:40px; padding:0 12px; width:100%;
  background:var(--panel-3); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
textarea.inp{ height:auto; padding:10px 12px; resize:vertical; line-height:1.55; min-height:96px; }
select.inp{ cursor:pointer; }
.inp:hover{ border-color:var(--line); background:var(--panel-2); }
.inp:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--panel-2); }
.inp::placeholder{ color:var(--ink-3); opacity:.72; }
.inp[aria-invalid="true"]{ border-color:var(--high); box-shadow:0 0 0 3px var(--high-soft); }
.errline{ font-size:11.5px; color:var(--high); }

.answerChoices{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- consent ---------- */
.consentLine{
  display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  padding:13px 15px; border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--panel-3);
  transition:background var(--fast), border-color var(--fast);
}
.consentLine:hover{ background:var(--panel-2); border-color:var(--line); }
.consentLine input{ margin-top:2px; accent-color:var(--accent); width:16px; height:16px; flex:none; cursor:pointer; }
.consentLine .ct{ font-size:12.5px; line-height:1.5; }
.consentLine .ct b{ display:block; font-size:13px; margin-bottom:2px; }

/* ---------- scheme cards ---------- */
.scheme{
  border:1px solid var(--line-2); border-radius:var(--r-md); padding:17px 18px;
  background:var(--panel-3);
}
.scheme h4{ font-family:var(--font-display); font-size:20px; font-weight:500; margin:11px 0 0; }
.scheme p{ font-size:12.5px; color:var(--ink-2); margin:8px 0 0; line-height:1.6; }
.schemeLink{
  display:inline-block; margin-top:11px; font-size:12px; font-weight:650; color:var(--accent);
  border-bottom:1px solid var(--accent-line);
}
.schemeLink:hover{ border-bottom-color:var(--accent); }

/* ---------- evidence rows ---------- */
.erow{
  display:grid; align-items:center; gap:14px;
  grid-template-columns:1fr auto auto;
  padding:13px 15px; border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--panel-3);
}
.erow .nm{ font-size:13px; font-weight:600; min-width:0; }
.erow .sub{ font-size:11.5px; color:var(--ink-3); font-weight:400; margin-top:2px; }

/* ---------- status track (post-submit) ---------- */
.track{ display:flex; flex-direction:column; gap:0; }
.track .tstep{ display:flex; gap:14px; position:relative; padding-bottom:22px; }
.track .tstep:last-child{ padding-bottom:0; }
.track .tstep:not(:last-child)::before{
  content:''; position:absolute; left:9px; top:22px; bottom:0; width:1.5px; background:var(--line-2);
}
.track .tstep.done:not(:last-child)::before{ background:var(--ok-line); }
.track .tmk{
  flex:none; width:19px; height:19px; border-radius:50%; z-index:1;
  border:1.5px solid var(--line); background:var(--bg-1);
  display:grid; place-items:center; font-size:10px; color:var(--ink-3);
}
.track .tstep.done .tmk{ border-color:var(--ok); background:var(--ok); color:var(--ink-inv); }
.track .tstep.now .tmk{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.track .tt{ font-weight:650; font-size:13.5px; }
.track .ts{ font-size:12px; color:var(--ink-3); margin-top:2px; }

/* ---------- query cards (action required) ---------- */
.qcard{
  --panel-bg: var(--panel);
  padding:20px 22px;
  border-left:3px solid var(--warn);
}
.qcard.open{ border-left-color:var(--high); }
.qcard.answered{ border-left-color:var(--info); }
.qcard.closed{ border-left-color:var(--ok); }
.qcard .qsub{ font-family:var(--font-display); font-size:20px; font-weight:500; margin-top:8px; }
.qcard .qask{ font-size:13px; color:var(--ink-2); margin-top:9px; line-height:1.62; }
.qcard .wants{ margin-top:13px; display:flex; flex-direction:column; gap:7px; }
.qcard .want{
  display:flex; gap:9px; align-items:flex-start; font-size:12.5px;
  padding:9px 12px; background:var(--panel-3); border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.qcard .want .wmk{ color:var(--accent); flex:none; }

.replybox{ margin-top:15px; padding-top:15px; border-top:1px solid var(--line-2); }

/* ---------- big number / clock ---------- */
.bigclock{
  font-family:var(--font-display); font-size:clamp(38px,6vw,58px); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}

/* ---------- side switcher ---------- */
.sidebar-switch{
  display:flex; gap:6px; padding:4px; margin-top:24px;
  background:var(--panel-3); border:1px solid var(--line-2); border-radius:var(--r-md);
}
.sidebar-switch a{
  flex:1; text-align:center; padding:7px 9px; border-radius:7px;
  font-size:12px; font-weight:650; color:var(--ink-3);
  transition:background var(--fast), color var(--fast);
}
.sidebar-switch a:hover{ color:var(--ink-2); }
.sidebar-switch a[aria-current="page"]{ background:var(--panel); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }

@media (max-width:980px){
  .portal{ grid-template-columns:minmax(0,1fr); gap:22px; padding:20px 16px 70px; }
  .portal > aside{ position:static; }
  .spine ol{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; }
  .spine li{ padding:0; flex:none; }
  .spine li:not(:last-child)::before{ display:none; }
  .fields{ grid-template-columns:minmax(0,1fr); }
  .stepcard{ padding:24px 20px; }
}