/* Titles over answers (round 19, owner, 8 November 2026: "Make the titles bigger and bold more visible than the info like Name
   and then under it the name and so on for everything").
   Wherever a question's name and its answer are shown together, the name is the title: bold, a size bigger than the answer and
   in the full ink colour; the answer is under it (or beside it, where the layout is a row) in the regular weight and the
   second ink. One rule for them all, here, loaded after every other stylesheet so it is the last word: a record's answers as
   words (forms.js view, with their pencils), the answers Edit leaves as words, every box's label, the key/value lists of a
   record page, a case's numbers and summary, the fact-find document on screen, the printed summary, Settings' facts, a list's
   labels on a phone. A tile's big figure stays the bigger (it is the headline), its name bold above it.
   Both inks are the theme's (app.css), so light and dark come with them: the title ≥ 12:1 on its card, the answer ≥ 7:1.
   test/browser/checks/99o-titles-address-files-r19.mjs measures it on a client and a case, light and dark, wide and a phone. */

:root { --title-size: 15px; --title-weight: 700; --title-ink: var(--ink); --answer-size: 14px; --answer-weight: 400; --answer-ink: var(--ink-2); }

/* ---- the titles */
.vx-row > dt, .ff-said > .lbl, label.lbl, .field > .lbl, legend.lbl,
.kv > dt, dl.sum > dt, .val-compare dt, .task-facts dt, .set-facts dt, .bcard-facts dt, .ch-rel dt, .ov-kv dt,
.fd-facts dt, .fd-row dt, .fd-missing dt, .ix-row dt, .nc-result dt, .nc-rv dt, .sum-k, .bw-k {
  font-size: var(--title-size); font-weight: var(--title-weight); color: var(--title-ink); text-transform: none; letter-spacing: 0; line-height: 1.35;
}
.co-role-ask legend.lbl, .add-app div.lbl, .rc-loan .rc-l, .drawer .kv > dt, #doc dl.sum > dt { font-size: var(--title-size); font-weight: var(--title-weight); color: var(--title-ink); }
/* A label's quieter words, such as "(optional)", stay quieter, and the same size. */
label.lbl .muted, .vx-row > dt .muted, .kv > dt .muted { font-weight: 500; }

/* ---- the answers */
.vx-row > dd, .ff-said-v, .kv > dd, dl.sum > dd, .val-compare dd, .task-facts dd, .set-facts dd, .bcard-facts dd, .ch-rel dd, .ov-kv dd,
.fd-facts dd, .fd-val, .ix-row dd, .nc-result dd, .nc-rv dd, .sum-v, .bw-who {
  font-size: var(--answer-size); font-weight: var(--answer-weight); color: var(--answer-ink);
}
.drawer .kv > dd, .pack-layout dl.sum > dd, #doc dl.sum > dd, .card-kv > dd, .app-kv > dd, .going-kv > dd, .chf-kv > dd, .epc-facts > dd, .step-kv > dd, .cp-kv > dd {
  font-size: var(--answer-size); font-weight: var(--answer-weight); color: var(--answer-ink);
}
/* The words under an answer (a case summary's "Value £210,000 · Rent …") stay smaller than it. */
.sum-sub { font-size: 13px; }
/* The answer under its title in the form's words, a little apart from it. */
.vx-row > dt { margin: 0 0 3px; }
.ff-said > .lbl { margin-bottom: 2px; }
/* A key/value row: the title and its answer on one line, the title in its own column. */
.kv { gap: 8px 16px; align-items: baseline; }

/* ---- a list's labels on a phone (the cases list, a portfolio's cards) */
.kx-k { font-weight: 700; color: var(--title-ink); }
@media (max-width: 760px) {
  .pf-compact td[data-l]::before { font-size: var(--title-size); font-weight: var(--title-weight); color: var(--title-ink); }
  .pf-compact td { font-size: var(--answer-size); color: var(--answer-ink); }
}

/* ---- a tile: its name bold and in the ink, above its figure (the figure is the headline, and stays the bigger) */
.tile .k, .rc-fig .k { font-size: 13px; font-weight: 700; color: var(--title-ink); }

/* ---- the compose window's From, To and Subject are names beside their boxes, kept to their narrow column */
.cf .lbl { font-size: 13px; }

/* ---- printed: the same, at the paper's size */
@media print {
  :root { --title-size: 11.5px; --answer-size: 11px; }
}