/* New case, borrower first (owner, 22 October 2026: "So so so mixed up between applicant company case and property …
   make it very easy to work with, know where you are and at which stage"). js/views/cases.js, Views.caseNew: the
   question "Is Aaron borrowing personally, or through a company?" with each answer a large choice; the Borrower and
   People involved lines; Check before creating, with Change on each line; each section marked done as it is answered.
   The card itself (sections, chips, the numbers) is styled in app.css's "Round 8 L" block. Colours are the theme's
   tokens only, so light and dark both follow. */

/* Where you are: a section answered has its number filled in. */
.nc-sec.done > .nc-h .nc-n { background: var(--accent); color: var(--accent-ink); }

/* The question, and its answers as large choices: one pressed at a time, never one chosen for you. */
.nc-q { margin: 4px 0 0; font: 700 15px/1.35 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.nc-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.nc-card .chip.nc-opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px;
  font-weight: 400; text-align: left; color: var(--ink); }
.nc-card .chip.nc-opt.on, .nc-card .chip.nc-opt.on:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.nc-opt-ic { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--sunk); color: var(--accent-2); }
.nc-card .chip.nc-opt .nc-opt-ic svg { width: 15px; height: 15px; }
.nc-card .chip.nc-opt.on .nc-opt-ic { background: var(--accent); color: var(--accent-ink); }
.nc-opt-t { display: grid; gap: 1px; min-width: 0; }
.nc-opt-t b { font-weight: 700; overflow-wrap: anywhere; }
.nc-opt-s { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }

/* The answer, in two lines: Borrower, and People involved with their parts. */
.nc-result { margin: 0; display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; background: var(--sunk); }
.nc-result > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; }
.nc-result dt { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.nc-result dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.nc-sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.nc-as-new { gap: 8px; }
.nc-none { color: var(--muted); }

/* Check before creating: one line for each part, its words, and Change. */
.nc-check { background: var(--surface); }
.nc-check-help { margin: -4px 0 8px; }
.nc-review { margin: 0; display: grid; }
.nc-rv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-2); }
.nc-rv:first-child { border-top: 0; }
.nc-rv dt { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.nc-rv dd { margin: 0; display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.nc-rv-v { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nc-rv .nc-change { flex: none; margin: -4px 0; }
.nc-rv.unset dt::after { content: " ·"; color: var(--warn); }
.nc-figs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nc-figs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.nc-fig-k { color: var(--ink-2); }
.nc-figs b { font-variant-numeric: tabular-nums; }
.nc-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--sunk); color: var(--ink-2);
  font-size: 12px; font-weight: 600; line-height: 1.5; }
.nc-tag[data-where="property"], .nc-tag[data-where="both"], .nc-tag[data-prop="new"] { border-color: transparent; background: var(--accent-soft); color: var(--accent-2); }
.nc-tag[data-where="lost"] { border-color: transparent; background: var(--warn-soft); color: var(--warn); }
.nc-todo { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--ink); overflow-wrap: anywhere; }
.nc-todo ul { margin: 4px 0 0; padding-left: 20px; }
.nc-todo.ready { background: var(--good-soft); }

@media (max-width: 640px) {
  .nc-result > div, .nc-rv { grid-template-columns: minmax(0, 1fr); }
  .nc-rv dt { padding-top: 2px; }
}
/* Create the case at the right, after Cancel, as on every other form. */
.nc-card .nc-foot { justify-content: flex-end; }

/* Round 17 (owner, 4 November 2026): a case opens from its borrower. Nothing else is asked until it is known who is borrowing;
   the loan's numbers sit under "The loan"; a person borrowing in their own name has their companies, quietly, under them, each
   starting the company's loan instead. */
#nc-rest[hidden] { display: none; }
.nc-h3 { margin: 0 0 10px; font: 700 14px/1.3 var(--f-display); color: var(--ink-2); }
.nc-type-h, #types-h { margin: 0 0 8px; }
.nc-co-instead { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.nc-co-instead .btn { max-width: 100%; white-space: normal; text-align: left; }
@media (max-width: 640px) { .nc-co-instead .btn { min-height: 44px; } }