/* The case as the owner's process (owner, 25 October 2026: "efficiency, ease of use, appearance … so clear at every step …
   a breeze"): the lender beside the case's title and on every list, the case summary box under the header, each step's own
   card on the application it applies with, its places for its documents, the ESIS & terms ticks, and the Documents part
   grouped by step (js/views/steps.js, js/views/case.js). Every colour is a token (css/app.css :root), so light and dark both
   follow; on a phone nothing is wider than the screen, every control is 44px to press and every box 16px. */

/* The lender beside the title */
.ch-lender { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0 6px; font-size: 15px; color: var(--ink-2); }
.ch-lender > svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
.ch-lender .ch-lender-name { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ch-lender a.ch-lender-name:hover { color: var(--accent-2); text-decoration: underline; }
.ch-lender .ch-lender-name b { font-weight: 700; }
.ch-lender.none .ch-lender-name { color: var(--muted); font-style: italic; }
.ch-lender-more { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--sunk); color: var(--ink-2);
  font: 600 13px/1.3 var(--f-body); cursor: pointer; }
.ch-lender-more:hover, .ch-lender-more:focus-visible { border-color: var(--accent); color: var(--accent-2); }
/* A product transfer: a short form or a full application, under the lender (round 18, owner, 5 November 2026). */
.ch-pt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 6px; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.ch-pt .ch-pt-words { color: var(--ink); }
.ch-pt .ch-pt-means { flex-basis: 100%; color: var(--ink-2); }
/* The ESIS's place answered by the DIP / ESIS (round 18). */
.ds .ds-cover { margin: 2px 0 4px; color: var(--ink-2); }
.cb-lender { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) { .cb-lender { display: none; } }

/* The lender in a list's cell or a card's line */
.lender-line { color: var(--ink-2); overflow-wrap: anywhere; }
.lender-line.none { color: var(--muted); font-style: italic; }
.lender-line .lender-more { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.card .card-lender { margin-top: 2px; font-size: 12.5px; }
/* In a table's Lender column: the lender's name above its product and rate, words kept whole. */
.tbl .lender-line { display: block; min-width: 140px; overflow-wrap: normal; }
.tbl .lender-line .ll-name { display: block; font-weight: 600; color: var(--ink); }
.tbl .lender-line .ll-sep { display: none; }
.tbl .lender-line .ll-rest { font-size: 13px; }
/* The Cases list at a desk (round 11 merge, 25 October 2026): with the Lender column it had ten, wider than the screen,
   the case's name squeezed onto three lines and Next step cut off. Long step names wrap under their colour, the case's
   name has room, and the lender's product and rate sit small under its name. */
.cases-tbl th, .cases-tbl td { padding-left: 8px; padding-right: 8px; }
.cases-tbl .t-main { display: inline-block; min-width: 146px; }
.cases-tbl .stage { white-space: normal; max-width: 128px; align-items: flex-start; }
.cases-tbl .stage::before { margin-top: 4px; }
.cases-tbl .lender-line { min-width: 104px; max-width: 160px; }
.cases-tbl .lender-line .ll-rest { font-size: 12px; color: var(--muted); }
.cases-tbl th { white-space: normal; vertical-align: bottom; }
.cases-tbl td.c-broker .row { flex-wrap: nowrap; }
.cases-tbl td.c-broker .small { max-width: 62px; line-height: 1.25; white-space: normal; }
.cases-tbl td.c-done { min-width: 96px; }
.queue-item .q-lender:empty { display: none; }
.kx-lender { margin-top: 2px; }
.search-results .sr-lender { margin-left: 6px; }

/* The case summary box */
.case-sum { margin: 0 0 14px; padding: 10px 10px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.case-sum-h { margin: 2px 6px 6px; font: 700 11.5px/1.3 var(--f-body); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.sum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px; }
.sum-cell { display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; min-width: 0; min-height: 44px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: 10px; color: var(--ink); text-decoration: none; }
.sum-cell:hover, .sum-cell:focus-visible { background: var(--sunk); border-color: var(--line-2); text-decoration: none; }
.sum-k { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sum-v { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sum-v b { font-weight: 700; }
.sum-sub { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.sum-none { color: var(--muted); font-weight: 500; font-style: italic; }
.sum-bad .sum-sub { color: var(--bad); font-weight: 600; }
.sum-warn .sum-sub { color: var(--warn); font-weight: 600; }
.sum-good .sum-sub { color: var(--good); font-weight: 600; }
.sum-group { margin: 6px 6px 2px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 14px; }
@media (max-width: 640px) {
  .case-sum { padding: 8px 6px 6px; }
  .sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sum-cell { padding: 8px; }
  .sum-v { font-size: 14px; }
}

/* A step's own card: words, Edit, and its form */
.step-kv { grid-template-columns: minmax(130px, auto) 1fr; }
.step-kv dd { text-align: left; font-weight: 500; overflow-wrap: anywhere; }
.step-form { margin-bottom: 4px; }
.step-form textarea { min-height: 72px; }
.step-chips { gap: 6px; }
.step-chips .chip { cursor: pointer; }
.step-chips .chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.step-chips .chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.step-foot { gap: 8px; margin-top: 10px; }
.step-access { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.step-access p { margin: 0; }
.fits { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--info-soft); color: var(--ink-2); }
.fits b { color: var(--ink); }
.fits.fits-good { background: var(--good-soft); }
.fits.fits-bad { background: var(--bad-soft); }
@media (pointer: coarse) { .step-chips .chip, .ch-lender-more { min-height: 44px; display: inline-flex; align-items: center; } }

/* ESIS & terms signed: four ticks, each with its day and its document */
.esis-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.esis-tick { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(150px, auto) minmax(0, 1fr); align-items: center; gap: 6px 14px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.esis-tick.done { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: color-mix(in srgb, var(--good-soft) 55%, transparent); }
.esis-check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-weight: 600; cursor: pointer; }
.esis-check input { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--accent); }
.esis-check.ro { cursor: default; }
.esis-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border: 1.5px solid var(--line); border-radius: 5px; color: var(--good); font-weight: 700; }
.esis-when input { width: 170px; }
.esis-doc { display: inline-flex; align-items: center; gap: 6px; }
.esis-doc svg { width: 15px; height: 15px; color: var(--good); }
.esis-email { gap: 8px 12px; margin-top: 12px; }
@media (max-width: 760px) {
  .esis-tick { grid-template-columns: minmax(0, 1fr); }
  .esis-when input { width: 100%; }
}
@media (pointer: coarse) { .esis-check { min-height: 44px; } }

/* A step's places for its documents: drop a file on one, or press Upload */
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ds { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface); }
.ds.has { border-style: solid; border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.ds.over { border-color: var(--accent); background: var(--accent-soft); }
.ds-top { display: flex; align-items: center; gap: 8px; }
.ds-label { font-weight: 700; overflow-wrap: anywhere; }
.ds-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ds-files li { display: flex; flex-direction: column; min-width: 0; }
.ds-open { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 2px 0; border: 0; background: none; color: var(--accent-2);
  font: 600 14px/1.3 var(--f-body); text-align: left; cursor: pointer; }
.ds-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-open svg { width: 15px; height: 15px; flex: none; }
.ds-open:hover span { text-decoration: underline; }
.ds-meta { font-size: 12px; color: var(--muted); }
.ds-none { margin: 0; font-size: 13px; color: var(--muted); }
.ds-up { align-self: flex-start; margin-top: auto; }
.ds-how { margin-left: auto; }
@media (pointer: coarse) { .ds-open, .ds-up { min-height: 44px; } }
@media (max-width: 640px) { .ds-grid { grid-template-columns: minmax(0, 1fr); } .ds-how { display: none; } }

/* The case's Documents, under the step each belongs to */
.doc-tbl tr.doc-group th { padding: 12px 16px 6px; background: var(--sunk); border-top: 1px solid var(--line); text-align: left;
  font: 700 12px/1.3 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.doc-tbl tr.doc-group:first-child th { border-top: 0; }
.doc-group-n { color: var(--muted); margin-right: 4px; }

/* The Enquiry: the instruction, and what is still to gather */
.instr-text { max-height: 420px; overflow: auto; padding: 12px 14px; border-radius: 10px; background: var(--sunk); white-space: pre-wrap; overflow-wrap: anywhere; }
.gather { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gather-line { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 2px 12px; align-items: baseline; width: 100%; min-height: 44px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.gather-line:hover, .gather-line:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.gather-step { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.gather-what { font-weight: 600; color: var(--warn); }
.gather-sub { grid-column: 2; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 640px) { .gather-line { grid-template-columns: minmax(0, 1fr); } .gather-sub { grid-column: 1; } }

/* Round 17: who is borrowing, at the top of the case summary: each record with its "N to fill" and Open (owner, 4 November 2026) */
.sum-who { display: flex; flex-direction: column; gap: 2px; margin: 0 4px 8px; padding: 0 0 8px; border-bottom: 1px solid var(--line-2); }
.bw-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 32px; padding: 4px 6px; font-size: 14px; }
.bw-k { flex: 0 0 auto; min-width: 104px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.bw-who { min-width: 0; overflow-wrap: anywhere; }
.bw-extra { color: var(--ink-2); }
.bw-fill { font-weight: 600; color: var(--warn); }
.bw-done { display: inline-flex; align-items: center; gap: 4px; color: var(--good); font-size: 13px; }
.bw-done svg { width: 14px; height: 14px; }
.bw-open { margin-left: auto; font-weight: 600; }
.bw-fill, .bw-open { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 640px) {
  .bw-k { min-width: 0; flex-basis: 100%; }
  .bw-open { margin-left: 0; }
  .bw-fill, .bw-open { min-height: 44px; }
}

/* Round 17: Getting the details: what is still needed, a line for each person, the company and the property */
.cs-group { margin: 18px 2px 8px; font: 700 12px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.dt-row.dt-todo { border-color: color-mix(in oklab, var(--warn), var(--line) 60%); }
.dt-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2); font-size: 11.5px; font-weight: 700; }
.dt-ic svg { width: 15px; height: 15px; }
.dt-name { overflow-wrap: anywhere; }
.dt-sub { color: var(--muted); font-size: 13px; }
.dt-state { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; color: var(--ink-2); }
.dt-n { font-weight: 700; color: var(--warn); }
.dt-what { overflow-wrap: anywhere; }
.dt-done { display: inline-flex; align-items: center; gap: 4px; color: var(--good); font-weight: 600; }
.dt-done svg { width: 14px; height: 14px; }
.dt-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.dt-help { margin: 10px 0 0; }
.co-details[hidden] { display: none; }
@media (max-width: 640px) {
  .dt-row { grid-template-columns: auto minmax(0, 1fr); }
  .dt-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .dt-acts .btn { min-height: 44px; }
}

/* The most the lender lends (round 21, owner, 9 November 2026; js/views/case.js loanFitHtml): a bridge's two ratios, the sentence and
   the button, quiet when within, a soft red when over. */
.loan-fit { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--info-soft); color: var(--ink-2); display: grid; gap: 6px; justify-items: start; font-size: 13.5px; }
.loan-fit.loan-fit-over { background: var(--bad-soft); }
.loan-fit-ratios { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.apps .loan-fit, .app-kv .loan-fit { margin-top: 6px; padding: 8px 10px; }
.val-ratios { margin: 6px 0 8px; font-weight: 600; font-variant-numeric: tabular-nums; }