/* PFG ABL Deal Platform — design language.
 *
 * Tokens and components carried across from the v1 demo, which HANDOVER.md §6
 * defines as the spec. The rules, restated so they are not lost:
 *   Jost everywhere. Square corners (2px). Hairline taupe borders, no heavy
 *   shadows, no gradients, no pills, no emoji. NO GREEN — positive states are
 *   slate. No stoplight red/green. Orange on at most one or two small things
 *   per screen, never as a fill or large area. Eyebrow labels are ALL CAPS,
 *   letter-spaced, slate.
 */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/jost.woff2') format('woff2');
}

:root {
  --linen: #EFEDEA;
  --white: #FFFFFF;
  --charcoal: #333333;
  --slate: #4D6E82;
  --slate-dark: #3E5A6B;
  --accent-soft: #96B0BD;
  --accent-faint: #CDD9DF;
  --stone: #7E7F7F;
  --taupe: #D9D1CC;
  --taupe-15: #F5F2F0;
  --taupe-25: #EFEAE6;
  --pop: #FF8A00;
  --error: #B5443A;
  --font: 'Jost', 'GT Walsheim', 'Century Gothic', 'Avenir Next', Futura, Arial, sans-serif;
  --r: 2px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --shadow: 0 1px 3px rgba(51, 51, 51, .06), 0 4px 14px rgba(51, 51, 51, .05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--linen);
  color: var(--charcoal);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 500; line-height: 1.15; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }
a { color: var(--slate); text-decoration: none; }
a:hover { color: var(--slate-dark); }
::selection { background: var(--accent-faint); }

/* ---------- shell ---------- */
#shell { display: flex; min-height: 100vh; }
aside {
  width: 232px; flex-shrink: 0; background: var(--white);
  border-right: 1px solid var(--taupe); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.logo-wrap { padding: 26px 22px 18px; border-bottom: 1px solid var(--taupe); }
.logo-wrap svg { width: 150px; height: auto; display: block; }
.logo-sub {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone); margin-top: 10px; font-weight: 500;
}
nav { padding: 18px 12px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--r); padding: 9px 12px;
  color: var(--charcoal); font-weight: 400; font-size: 14.5px; margin-bottom: 2px;
  transition: background .15s var(--ease);
}
.nav-item:hover { background: var(--taupe-15); color: var(--charcoal); }
.nav-item.active { background: var(--slate); color: #fff; font-weight: 500; }
.nav-item .badge-count {
  margin-left: auto; background: var(--pop); color: #fff; font-size: 11px;
  font-weight: 600; min-width: 19px; height: 19px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.nav-item.active .badge-count { background: #fff; color: var(--slate); }
.nav-sep { border: none; border-top: 1px solid var(--taupe); margin: 14px 6px; }
.nav-label {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone); padding: 2px 12px 8px; font-weight: 500;
}
.user-chip {
  padding: 16px 22px; border-top: 1px solid var(--taupe); display: flex;
  align-items: center; gap: 10px; font-size: 13px; color: var(--stone);
}
.user-chip form { margin-left: auto; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--slate);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 500; flex-shrink: 0;
}
.avatar.soft { background: var(--accent-soft); }
.avatar.agent { background: var(--charcoal); }
.avatar.sys { background: var(--taupe); color: var(--charcoal); font-size: 8.5px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
/* 1240 was leaving a 475px dead strip down the right of a 1900px window — the "unused
   space" complaint, and it was the page cap, not the layouts inside it. The cap now sits
   high enough to fill a normal wide monitor and low enough that body text on a 4K screen
   does not run to 3000px. */
main { flex: 1; min-width: 0; padding: 34px 44px 44px; max-width: 1760px; }
/* A dashboard uses the whole window. See the note in base.html. */
main.wide { max-width: none; padding: 28px 28px 28px; }

/* Push notifications.
 *
 * Bottom-right, stacked, one hairline card each. Orange only on the left edge — the design
 * language allows the accent on one or two small things per screen and never as a fill, and
 * a toast that arrives uninvited is the last thing that should shout. */
.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; max-width: 340px;
}
.toast {
  position: relative; background: var(--white); border: 1px solid var(--taupe);
  border-left: 2px solid var(--pop); border-radius: var(--r);
  padding: 14px 34px 14px 16px; box-shadow: var(--shadow);
  animation: toast-in .18s var(--ease);
}
.toast.going { opacity: 0; transform: translateY(4px); transition: opacity .5s, transform .5s; }
.toast-title { font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.toast-body { font-size: 12.5px; color: var(--stone); margin-top: 4px; line-height: 1.45; }
.toast-open { display: inline-block; font-size: 12.5px; font-weight: 500; margin-top: 8px; }
.toast-close {
  position: absolute; top: 8px; right: 8px; background: none; border: none;
  color: var(--stone); font-size: 16px; line-height: 1; padding: 2px 5px;
}
.toast-close:hover { color: var(--charcoal); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 620px) {
  .toasts { left: 16px; right: 16px; max-width: none; }
}

/* The portal's own notifications link, matching the internal nav's badge. */
.pt-bell {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
  color: var(--charcoal); font-weight: 500;
}
.pt-bell:hover { color: var(--slate); }
.pt-bell .badge-count {
  background: var(--pop); color: #fff; font-size: 11px; font-weight: 600;
  min-width: 19px; height: 19px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}

/* ---------- common ---------- */
.eyebrow {
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; color: var(--slate);
}
.eyebrow.pop { color: var(--pop); }
.view-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px;
}
.view-head h1 { font-size: 32px; margin-top: 6px; }
.view-head .sub { color: var(--stone); font-size: 14px; margin-top: 6px; max-width: 640px; }
.card { background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r);
  padding: 9px 18px; font-weight: 500; font-size: 14px; border: 1px solid transparent;
  transition: background .15s var(--ease); text-decoration: none;
}
.btn-primary { background: var(--slate); color: #fff; }
.btn-primary:hover { background: var(--slate-dark); color: #fff; }
.btn-secondary { background: var(--white); border-color: var(--taupe); color: var(--charcoal); }
.btn-secondary:hover { background: var(--taupe-15); color: var(--charcoal); }
.btn-ghost { background: none; border: none; color: var(--slate); font-weight: 500; padding: 6px 8px; }
.btn-danger { background: var(--white); border-color: var(--taupe); color: var(--error); }
.btn-danger:hover { background: #F8F0EF; }
.btn.sm { padding: 6px 13px; font-size: 13px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-weight: 500; letter-spacing: .04em; padding: 3px 10px; border-radius: var(--r);
  border: 1px solid var(--taupe); background: var(--taupe-15); color: var(--charcoal);
  white-space: nowrap;
}
.chip.slate { background: var(--accent-faint); border-color: var(--accent-faint); color: var(--charcoal); }
.chip.deep { background: var(--slate); border-color: var(--slate); color: #fff; }
.chip.charcoal { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.chip.pop { background: #fff; border-color: var(--pop); color: var(--pop); }
.chip.err { background: #fff; border-color: var(--error); color: var(--error); }
.chip.ghost { background: #fff; }
.muted { color: var(--stone); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }

/* stat row */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--taupe); border: 1px solid var(--taupe); border-radius: var(--r);
  overflow: hidden; margin-bottom: 24px;
}
.stat { background: var(--white); padding: 16px 20px; }
.stat .v { font-size: 28px; font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat .v .unit { font-size: 18px; color: var(--stone); font-weight: 400; }
.stat .l {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--stone); margin-top: 6px; font-weight: 500;
}
.stat.pop .v { color: var(--pop); }

/* controls */
.controls { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.controls input[type=search], .controls select {
  font-family: inherit; font-size: 14px; padding: 8px 12px;
  border: 1px solid var(--taupe); border-radius: var(--r);
  background: var(--white); color: var(--charcoal); outline: none;
}
.controls input[type=search] { width: 260px; }
.controls input[type=search]:focus, .controls select:focus { border-color: var(--slate); }
.seg {
  display: inline-flex; border: 1px solid var(--taupe); border-radius: var(--r);
  overflow: hidden; margin-left: auto;
}
.seg a, .seg button {
  background: var(--white); border: none; padding: 8px 16px; font-size: 13.5px;
  color: var(--stone); font-weight: 500; text-decoration: none;
}
.seg a.on, .seg button.on { background: var(--charcoal); color: #fff; }

/* deal cards */
/* 265, not 330: the page gives the grid 1144px, and four columns need the minimum at or
   under 275. At 330 it silently fell back to three and left 120px dead at the right. */
.deal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 14px; }
.deal-card {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r);
  padding: 17px 19px; display: block; color: inherit;
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
.deal-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); color: inherit; }
.deal-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 2px; }
.deal-card h3 { font-size: 17px; font-weight: 500; }
.deal-card .co { color: var(--stone); font-size: 12.5px; margin-bottom: 11px; }
.meta-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 13px; }
.pbar { height: 5px; background: var(--taupe-25); border-radius: 2px; overflow: hidden; margin: 6px 0; }
.pbar > i { display: block; height: 100%; background: var(--slate); border-radius: 2px; }
.deal-card .phase-line { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--stone); }
.deal-card .foot {
  display: flex; align-items: center; justify-content: space-between; margin-top: 14px;
  padding-top: 13px; border-top: 1px solid var(--taupe-25); font-size: 12.5px; color: var(--stone);
}
.days-warn { color: var(--pop); font-weight: 500; }

/* table */
table.data {
  width: 100%; border-collapse: collapse; background: var(--white);
  border: 1px solid var(--taupe); border-radius: var(--r); font-size: 14px;
}
table.data th {
  background: var(--charcoal); color: #fff; text-align: left; font-weight: 500;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 0; white-space: nowrap;
}
table.data th a, table.data th span {
  display: block; padding: 11px 16px; color: #fff;
}
table.data th a:hover { background: #404040; color: #fff; }
table.data td { padding: 12px 16px; border-top: 1px solid var(--taupe-25); vertical-align: middle; }
table.data tbody tr { transition: background .12s var(--ease); }
table.data tbody tr:nth-child(even) { background: var(--linen); }
table.data tbody tr:hover, table.data tbody tr:nth-child(even):hover { background: var(--taupe-15); }
table.data td a { color: inherit; display: block; }
.tbl-wrap { overflow-x: auto; }

/* deal detail */
.back {
  display: inline-flex; align-items: center; gap: 6px; color: var(--slate);
  font-weight: 500; font-size: 13.5px; background: none; border: none; margin-bottom: 18px;
}
/* Not space-between: with the page cap raised, that threw the date box against the right
   edge and opened a 600px hole in the middle of the header. The dates sit beside the
   heading instead, and the row ends where its content ends. */
.deal-head {
  display: flex; justify-content: flex-start; gap: 44px;
  align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap;
}
.deal-head > div:first-child { flex: 1 1 520px; max-width: 900px; }
.deal-head h1 { font-size: 30px; margin: 4px 0 6px; }
.deal-head .facts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dates-grid {
  display: grid; grid-template-columns: repeat(4, minmax(96px, 1fr)); gap: 1px;
  background: var(--taupe); border: 1px solid var(--taupe); border-radius: var(--r);
  overflow: hidden; min-width: 400px;
}
.dates-grid > div { background: var(--white); padding: 10px 13px; }
.dates-grid .dl {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--stone); font-weight: 500;
}
.dates-grid .dv { font-size: 14px; font-weight: 500; margin-top: 3px; font-variant-numeric: tabular-nums; }
.detail-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }

/* phase stepper */
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 18px; }
.step {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r);
  padding: 12px 14px; position: relative;
}
.step .sn { font-size: 24px; font-weight: 500; color: var(--taupe); line-height: 1; font-variant-numeric: tabular-nums; }
.step.done .sn { color: var(--accent-soft); }
.step.current { border-color: var(--slate); }
.step.current .sn { color: var(--slate); }
.step .st { font-size: 12px; font-weight: 500; margin-top: 6px; line-height: 1.3; min-height: 32px; }
.step .sc { font-size: 11.5px; color: var(--stone); margin-top: 4px; font-variant-numeric: tabular-nums; }
.step.current::after, .step.done::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
}
.step.current::after { background: var(--slate); }
.step.done::after { background: var(--accent-soft); }

/* tasks */
.phase-block {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r);
  margin-bottom: 14px; overflow: hidden;
}
.phase-block > summary {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  cursor: pointer; user-select: none; list-style: none;
}
.phase-block > summary::-webkit-details-marker { display: none; }
.phase-block > summary:hover { background: var(--taupe-15); }
.phase-block h3 { font-size: 15.5px; font-weight: 500; flex: 1; }
.phase-block .ph-num { font-size: 20px; color: var(--taupe); font-weight: 500; font-variant-numeric: tabular-nums; }
.phase-block.current .ph-num { color: var(--slate); }
.caret { transition: transform .2s var(--ease); color: var(--stone); font-size: 12px; }
.phase-block[open] .caret { transform: rotate(90deg); }
.task-list { border-top: 1px solid var(--taupe-25); }
.task {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  border-bottom: 1px solid var(--taupe-25); font-size: 14px;
}
.task:last-child { border-bottom: none; }
.task:hover { background: var(--taupe-15); }
.task form { display: flex; align-items: center; }
.tick {
  width: 18px; height: 18px; border: 1.5px solid var(--taupe); border-radius: var(--r);
  background: #fff; flex-shrink: 0; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; transition: all .12s var(--ease);
  color: transparent; font-size: 11px; padding: 0;
}
.tick:hover { border-color: var(--slate); }
.task.done .tick { background: var(--slate); border-color: var(--slate); color: #fff; }
.task.done .tt { color: var(--stone); text-decoration: line-through; text-decoration-color: var(--taupe); }
.task .tt { flex: 1; }
.task .twho { font-size: 12px; color: var(--stone); white-space: nowrap; }
.task .overdue { color: var(--pop); font-weight: 500; font-size: 12px; }

/* System-verified tasks: completion is computed, so the tick is an indicator
   rather than a control. Kept visually quiet — a checklist where a third of the
   rows shouted would be worse than the problem it solves. */
.task.verified .tick { border-style: dashed; cursor: default; }
.task.verified.done .tick { border-style: solid; }
.task .auto-note {
  display: block; font-size: 11.5px; color: var(--stone); margin-top: 2px;
}
.task.done .auto-note { color: var(--accent-soft); }
.task .tt { line-height: 1.35; }

/* right rail */
.rail-card {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r);
  padding: 15px 17px; margin-bottom: 12px;
}
.rail-card h4 {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--stone); font-weight: 500; margin-bottom: 12px;
}
.gate-rec {
  border: 1px solid var(--taupe); border-radius: var(--r); padding: 12px 14px;
  margin-bottom: 10px; background: var(--taupe-15);
}
.gate-rec .gd { font-weight: 500; font-size: 14px; }
.gate-rec .gm { font-size: 12.5px; color: var(--stone); margin-top: 2px; }
.gate-rec.superseded { opacity: .6; }
.kv {
  display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px;
  padding: 5px 0; border-bottom: 1px solid var(--taupe-25);
}
.kv:last-child { border-bottom: none; }
.kv b { font-weight: 500; font-variant-numeric: tabular-nums; }
.lock-note {
  font-size: 12px; color: var(--stone); margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--taupe-25);
}

/* activity */
.feed { background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r); }
.evt {
  display: flex; gap: 14px; padding: 14px 22px;
  border-bottom: 1px solid var(--taupe-25); align-items: flex-start;
}
.evt:last-child { border-bottom: none; }
.evt .etxt { flex: 1; font-size: 14px; }
.evt .etxt b { font-weight: 500; }
.evt .emeta { font-size: 12px; color: var(--stone); margin-top: 1px; }
.evt .etime { font-size: 12px; color: var(--stone); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Q&A ---------- */
.qa-section { margin-bottom: 26px; }
.qa-section > h3 {
  font-size: 15px; font-weight: 500; margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 10px;
}
.qa-section > h3 .snum { color: var(--accent-soft); font-size: 20px; font-weight: 500; }
.q-row {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r);
  margin-bottom: 8px; overflow: hidden;
  /* Answering a question returns you to it by anchor. Without this the row sits
     jammed against the top of the viewport with no context above it. */
  scroll-margin-top: 20px;
}
/* Briefly mark the question you just came back to, so it is obvious which one
   was saved when you are working down a long list. */
.q-row:target { border-color: var(--slate); box-shadow: 0 0 0 1px var(--slate); }
.q-row > header { display: flex; align-items: center; gap: 14px; padding: 12px 18px; cursor: pointer; }
.q-row > header:hover { background: var(--taupe-15); }
.qnum {
  font-weight: 500; color: var(--slate); font-variant-numeric: tabular-nums;
  white-space: nowrap; font-size: 14px; min-width: 44px;
}
.qtext { flex: 1; font-size: 14px; }
.q-body {
  border-top: 1px solid var(--taupe-25); padding: 16px 18px 18px;
  display: none; background: var(--taupe-15);
}
.q-row.open .q-body { display: block; }
.q-meta-line {
  display: flex; gap: 18px; font-size: 12.5px; color: var(--stone);
  margin-bottom: 14px; flex-wrap: wrap;
}
.msg {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r);
  padding: 12px 16px; margin-bottom: 8px; font-size: 14px;
}
.msg .mh { display: flex; justify-content: space-between; font-size: 12px; color: var(--stone); margin-bottom: 5px; }
.msg .mh b { color: var(--charcoal); font-weight: 500; }
/* Internal-only notes are visually loud on purpose: the deal team responded to
   seeing the safety property, not just being told about it. */
.msg.internal { background: var(--taupe-25); border-style: dashed; }
.msg.internal .int-flag {
  color: var(--pop); font-weight: 600; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
}
.q-src {
  font-size: 12.5px; color: var(--stone); border-left: 2px solid var(--accent-soft);
  padding-left: 10px; margin-bottom: 12px;
}

/* ---------- card-with-payload (invitations, Affinity records) ---------- */
.appr-card {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r);
  padding: 20px 22px; margin-bottom: 14px;
}
.appr-card .ah { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.appr-card .ah .spacer { flex: 1; }
.payload {
  background: var(--taupe-15); border: 1px solid var(--taupe); border-radius: var(--r);
  padding: 14px 18px; font-size: 14px; margin-bottom: 14px; white-space: pre-wrap;
}
.payload .flag { background: #FFF3E4; border-bottom: 2px solid var(--pop); padding: 0 3px; }
.payload .subj { font-weight: 500; margin-bottom: 8px; }
.appr-foot { display: flex; gap: 8px; align-items: center; }
.appr-foot .meta { margin-left: auto; font-size: 12px; color: var(--stone); }

/* ---------- borrower portal: a separate surface ---------- */
/* Wider than the demo's 960px column, which left a wide window looking mostly
   empty. Matches the internal shell's cap so the two surfaces feel related
   without looking identical. */
.portal-top { background: var(--white); border-bottom: 1px solid var(--taupe); }
.portal-top .inner {
  max-width: 1760px; margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; gap: 20px;
}
/* Without this the inline wordmark renders at its intrinsic size. */
.portal-top svg { width: 130px; height: auto; flex-shrink: 0; }
.portal-top .pt-label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone); font-weight: 500;
  border-left: 1px solid var(--taupe); padding-left: 20px;
}
.portal-body { max-width: 1760px; margin: 0 auto; padding: 28px 32px 56px; }

/* Portal head: tighter than the internal view-head, and the summary sits on the
   same line as the greeting rather than stacking. */
.portal-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 22px;
}
.portal-head h1 { font-size: 28px; margin-top: 4px; }
.portal-head .sub { color: var(--stone); font-size: 13.5px; margin-top: 4px; max-width: 620px; }
.portal-head .tally { display: flex; gap: 8px; flex-wrap: wrap; }

/* auto-FIT, not auto-fill: with one deal the card stretches to fill the row
   instead of sitting narrow against dead space. */
.portal-deals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px; align-items: start;
}

/* One card per piece of work, so nothing important sits alongside something
   unrelated. The transaction and its progress on top; Questions, Data tapes and
   Documents each in their own card underneath. */
.deal-block { margin-bottom: 28px; }
.deal-context .next-step { margin-top: 14px; font-weight: 500; }
.task-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px; margin-top: 12px;
}
.task-card { display: flex; flex-direction: column; }
.task-card h4 {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--stone); font-weight: 500;
}
.task-card .task-count {
  font-size: 30px; font-weight: 500; line-height: 1.05; margin: 10px 0 2px;
  font-variant-numeric: tabular-nums;
}
.task-card .task-count.pop { color: var(--pop); }
.task-card .task-count.muted { color: var(--taupe); }
.task-card p { margin-bottom: 14px; }
.task-card .btn { margin-top: auto; align-self: flex-start; }
/* A card that needs the borrower to act carries the one accent on the screen. */
.task-card.needs-you { border-color: var(--pop); }
.task-card.coming { background: var(--taupe-15); }
.portal-card {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r);
  padding: 18px 20px;
}
.portal-card h3 { font-size: 17.5px; font-weight: 500; }
.portal-card .co { color: var(--stone); font-size: 13px; margin-bottom: 12px; }
.portal-card .foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--taupe-25);
  flex-wrap: wrap;
}
/* Borrower stage strip.
 *
 * Each stage states its own condition in words. Shade alone was ambiguous: a darker
 * bar reads as "completed" to most people, so making CURRENT the darkest made the
 * current stage look finished and the whole strip look out of order.
 *
 * Completed stages carry a tick, upcoming ones carry their step number, so the
 * sequence is unmistakable without reading any colour at all.
 *
 * No green and no red: a borrower reading a stoplight would infer a judgement the
 * platform is not making about their transaction.
 */
.stage-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 10px; margin-top: 16px;
}
.stage-strip .ss-bar {
  display: block; height: 4px; border-radius: 2px; background: var(--taupe-25);
}
.stage-strip .ss-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; margin-top: 8px;
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--taupe-25); color: var(--stone);
}
.stage-strip .ss-label {
  display: block; font-size: 11.5px; line-height: 1.3; color: var(--stone); margin-top: 5px;
}
.stage-strip .ss-state {
  display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone); margin-top: 3px;
}

/* Complete: filled, ticked, and said so. */
.stage-strip .ss.done .ss-bar { background: var(--accent-soft); }
.stage-strip .ss.done .ss-step { background: var(--accent-soft); color: #fff; }
.stage-strip .ss.done .ss-label { color: var(--charcoal); }

/* In progress: the one stage that is emphasised, and labelled as underway rather
   than left to be inferred from a colour. */
.stage-strip .ss.current .ss-bar { background: var(--slate); }
.stage-strip .ss.current .ss-step { background: var(--slate); color: #fff; }
.stage-strip .ss.current .ss-label { color: var(--charcoal); font-weight: 500; }
.stage-strip .ss.current .ss-state { color: var(--slate); font-weight: 600; }

/* Not started: quiet, and explicitly quiet. */
.stage-strip .ss.ahead .ss-label,
.stage-strip .ss.ahead .ss-state { color: var(--taupe); }

@media (max-width: 760px) {
  /* Five columns on a phone is unreadable; stack them. */
  .stage-strip { grid-auto-flow: row; gap: 8px; }
  .stage-strip .ss { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; }
  .stage-strip .ss-bar { grid-column: 1 / -1; }
  .stage-strip .ss-step, .stage-strip .ss-label, .stage-strip .ss-state { margin-top: 0; }
}

.portal-note {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r);
  padding: 16px 20px; margin-top: 14px;
}
.portal-note h4 {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--stone); font-weight: 500; margin-bottom: 8px;
}
.portal-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--taupe); margin: 22px 0 26px; }
.portal-tabs button {
  background: none; border: none; padding: 10px 18px; font-size: 14.5px;
  color: var(--stone); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.portal-tabs button.on { color: var(--charcoal); border-bottom-color: var(--slate); }
.portal-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.answer-box {
  width: 100%; font-family: inherit; font-size: 14px; border: 1px solid var(--taupe);
  border-radius: var(--r); padding: 10px 12px; min-height: 74px; resize: vertical;
  outline: none; background: #fff;
}
.answer-box:focus { border-color: var(--slate); }
.upload-btn {
  border: 1px dashed var(--slate); background: #fff; color: var(--slate);
  border-radius: var(--r); padding: 6px 14px; font-size: 13px; font-weight: 500;
}
.upload-btn:hover { background: var(--taupe-15); }

/* ---------- tape column mapping ---------- */
.map-form { max-width: 820px; }
.map-group { margin-bottom: 26px; }
.map-group > h4 {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--stone); font-weight: 500; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--taupe);
}
.map-group > h4 .req { color: var(--pop); letter-spacing: .1em; }
.map-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px auto; gap: 14px;
  align-items: start; padding: 9px 0; border-bottom: 1px solid var(--taupe-25);
}
.map-row:last-child { border-bottom: none; }
.map-row label { font-size: 14px; }
.map-row label .hint {
  display: block; font-size: 12px; color: var(--stone); margin-top: 2px;
}
.map-row select {
  font-family: inherit; font-size: 13.5px; padding: 7px 10px; width: 100%;
  border: 1px solid var(--taupe); border-radius: var(--r); background: var(--white);
  color: var(--charcoal); outline: none;
}
.map-row select:focus { border-color: var(--slate); }
/* A guess is flagged so nobody mistakes it for a decision the borrower made. */
.map-row .guessed {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pop); white-space: nowrap; padding-top: 9px;
}
.extra-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.extra-col {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  border: 1px solid var(--taupe); border-radius: var(--r); padding: 5px 10px;
  background: var(--white); cursor: pointer;
}
.extra-col:hover { background: var(--taupe-15); }

/* The embedded analyzer dashboard. */
.analyzer-frame {
  border: 1px solid var(--taupe); border-radius: var(--r); background: var(--white);
  overflow: hidden;
}
.analyzer-frame iframe { display: block; width: 100%; height: 78vh; border: 0; }

/* The tape analysis, framed on a platform page. Taller than the generic frame above,
   because a dashboard of strats and vintages is the whole point of the screen rather than
   a panel on it — and the platform's own header stays visible above it, which is what
   makes it read as being here rather than somewhere else. */
.analysis-frame {
  border: 1px solid var(--taupe); border-radius: var(--r); background: var(--white);
  overflow: hidden;
}
.analysis-frame iframe {
  display: block; width: 100%; height: calc(100vh - 190px); min-height: 620px; border: 0;
}

@media (max-width: 760px) {
  .map-row { grid-template-columns: 1fr; gap: 6px; }
  .map-row .guessed { padding-top: 0; }
}

/* forms */
.form-grid { display: grid; gap: 16px; max-width: 560px; }
.field label {
  display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--stone); font-weight: 500; margin-bottom: 5px;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 14px; padding: 9px 12px;
  border: 1px solid var(--taupe); border-radius: var(--r); background: var(--white);
  color: var(--charcoal); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--slate); }
.field textarea { min-height: 90px; resize: vertical; }
.field .help { font-size: 12px; color: var(--stone); margin-top: 4px; }
.field .errors { font-size: 12.5px; color: var(--error); margin-top: 4px; }
.field select[multiple] { min-height: 110px; }
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

/* messages */
.messages { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 99; }
.messages li {
  list-style: none; background: var(--charcoal); color: #fff; padding: 11px 22px;
  border-radius: var(--r); font-size: 14px; max-width: 520px; box-shadow: var(--shadow);
  margin-top: 8px;
}
.messages li.error { background: var(--error); }

/* login */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r);
  padding: 40px 44px; width: 100%; max-width: 420px;
}
.auth-card svg { width: 170px; height: auto; display: block; margin-bottom: 8px; }
.auth-card h1 { font-size: 22px; margin: 22px 0 6px; }
.dev-note {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--taupe-25);
  font-size: 12px; color: var(--stone);
}

/* empty state */
.empty {
  background: var(--white); border: 1px dashed var(--taupe); border-radius: var(--r);
  padding: 48px; text-align: center; color: var(--stone);
}

@media (max-width: 1080px) {
  .detail-cols { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .dates-grid { min-width: 0; }
  .deal-head { flex-direction: column; }
  .stepper { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .portal-top .inner { padding: 14px 20px; gap: 12px; }
  .portal-top svg { width: 104px; }
  .portal-top .pt-label { border-left: none; padding-left: 0; }
  .portal-body { padding: 24px 20px 60px; }
  .portal-progress { grid-template-columns: 1fr; }
  #shell { flex-direction: column; }
  aside {
    width: 100%; height: auto; position: static;
    border-right: none; border-bottom: 1px solid var(--taupe);
  }
  nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 12px; }
  .nav-item { width: auto; margin-bottom: 0; padding: 7px 11px; font-size: 13.5px; }
  .nav-sep, .nav-label, .user-chip { display: none; }
  .logo-wrap { padding: 14px 20px 10px; display: flex; align-items: baseline; gap: 14px; border-bottom: none; }
  .logo-wrap svg { width: 112px; }
  .logo-sub { margin-top: 0; }
  main { padding: 24px 20px 60px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
/* --- long lists: paging and multi-select ------------------------------------
   New in People & Teams, which is the first surface here that has to survive a few
   hundred rows. Square corners, hairline taupe, no fills — the same rules as tables. */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 16px;
}
.pager-links { display: flex; align-items: center; gap: 8px; }
/* A dead end reads as an unavailable control, not as a link that failed. */
.btn.is-off { opacity: .4; cursor: default; }

.pick-list {
  border: 1px solid var(--taupe); border-radius: var(--r);
  max-height: 320px; overflow-y: auto; background: var(--white);
}
.pick {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 12px; border-bottom: 1px solid var(--taupe-25); cursor: pointer;
}
.pick:last-child { border-bottom: none; }
.pick:hover { background: var(--taupe-15); }
.pick input { margin-top: 3px; flex: none; }
.pick span { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }

/* --- borrower question cards -------------------------------------------------
   Closed until asked for. Every thread rendered open made a twenty-question page
   metres long, with the three that needed answering lost in it. So the closed state
   carries what decides whether to open: whose turn it is, how much has been said,
   and when. Built on <details>, so it opens with a keyboard and without script. */
.q-card {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r);
  margin-bottom: 8px; scroll-margin-top: 20px;
}
/* The one waiting on the borrower is marked on its edge rather than filled: orange is
   allowed on one or two small things per screen, never as a background. */
.q-card.needs-you { border-left: 2px solid var(--pop); }
.q-card:target { border-color: var(--slate); }
.q-card > summary {
  display: flex; align-items: flex-start; gap: 14px; padding: 13px 18px 13px 16px;
  cursor: pointer; list-style: none;
}
.q-card > summary::-webkit-details-marker { display: none; }
.q-card > summary:hover { background: var(--taupe-15); }
.q-card > summary:focus-visible { outline: 2px solid var(--slate); outline-offset: -2px; }
/* A caret drawn in CSS, so there is no image to load and no emoji. */
.q-card > summary::after {
  content: ''; flex: none; margin-left: 4px; margin-top: 5px;
  width: 6px; height: 6px; border-right: 1.5px solid var(--stone);
  border-bottom: 1.5px solid var(--stone); transform: rotate(-45deg);
  transition: transform .12s ease;
}
.q-card[open] > summary::after { transform: rotate(45deg); }
.q-card[open] > summary { background: var(--taupe-15); }
.q-card-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.q-card-main .qtext { font-size: 14px; line-height: 1.4; }
.q-card-meta { font-size: 12px; color: var(--stone); }
.q-card-body {
  border-top: 1px solid var(--taupe-25); padding: 16px 18px 18px;
  background: var(--taupe-15);
}
@media (max-width: 700px) {
  /* The status chip drops under the text rather than squeezing it to nothing. */
  .q-card > summary { flex-wrap: wrap; }
  .q-card-main { flex-basis: 100%; }
}

/* Two controls that belong together — move the stage, set the badge. Label spans, then
   the select and its button share a row, so each form is two lines rather than three. */
.rail-forms {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--taupe-25);
  display: grid; gap: 12px;
}
.rail-forms form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.rail-forms label { grid-column: 1 / -1; display: block; margin-bottom: -4px; }
.rail-forms select {
  font-family: inherit; font-size: 13.5px; padding: 7px 10px; width: 100%;
  border: 1px solid var(--taupe); border-radius: var(--r);
  background: var(--white); color: var(--charcoal); outline: none;
}
.rail-forms select:focus { border-color: var(--slate); }
.rail-links {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--taupe-25);
}
.rail-links .btn { padding-left: 0; padding-right: 0; }

/* Reference cards below the two columns rather than at the bottom of the rail, which is
   what made the rail outrun the checklist by 500px while the space beside it was blank. */
.detail-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px; margin-top: 4px; align-items: start;
}
.detail-band .rail-card { margin-bottom: 0; }

/* --- notification inbox ------------------------------------------------------
   Grouped by day, because "when did this happen" is answered better by a heading than
   by repeating the date on forty rows. */
.note-day { margin-bottom: 20px; }
.note-day > h3 {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--stone); font-weight: 500; margin-bottom: 8px;
}
.note-row {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--r);
  padding: 11px 14px; margin-bottom: 6px;
}
/* Unread is marked on the edge, not filled: orange on small things, never as a ground. */
.note-row.fresh { border-left: 2px solid var(--pop); }
.note-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.note-title { font-size: 14px; font-weight: 500; }
.note-body { font-size: 13px; color: var(--stone); }
.note-meta { font-size: 11.5px; color: var(--stone); }
.note-meta a { color: var(--slate); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }