/* typography/text-settings.css — user-selectable font sizes (2026-10-03).
 *
 * Owner's requirement: headings 28px, all other interface text 12px, with a
 * control so each user can choose their own font type and sizes
 * (Appearance → Interface: Heading / Subheading / Body text size).
 *
 * The values come from three variables that applyAppr() (lib/appearance.js)
 * sets from the saved appearance record:
 *     --jb-ui-h1    page titles, report titles, KPI figures   (default 28px)
 *     --jb-ui-h2    modal / card / section titles             (default 12px)
 *     --jb-ui-body  every other piece of interface text       (default 12px)
 *
 * WHY THE !important RULES BELOW. Older layers pin literal sizes with
 * !important at up to (2,6,5) specificity (e.g. the journal grid's 13-14px).
 * A token cannot reach a literal, so "every other text = the chosen size"
 * needs one rule that outranks them. It is ONE rule per role, scoped to the
 * app's own chrome and screens, and it deliberately leaves alone:
 *   - the fee note / invoice document (#feeNote on screen; [data-jb-doc] in the
 *     print copy, where #feeNote does not exist and the wrapper is .main) —
 *     it has its own typography and prints on A4. (Missing [data-jb-doc]
 *     here forced every fee-note text to 12px = 9pt in printed PDFs.)
 *   - charts (svg);
 *   - statement tables (#stmtBox, .stmt): they follow --fbody, which
 *     applyAppr() now sets to the SAME body size (one setting for all text),
 *     through the dedicated rule below;
 *   - the JuriBooks brand mark;
 *   - phone-size text inputs, which stay at 16px so iOS does not zoom.
 * The :not(#jb-ts-*) chain only raises specificity; those ids do not exist.
 * Order of strength: body text (6 ids) < statements < subheadings (8) <
 * headings (10). The container list uses :where() so it adds no weight.
 * Lives in lib/typography, so the unifiedTypography rollback flag covers it.
 */

/* tokens: everything that already reads the scale follows the choice */
:root:root:root,
:root:root:root > body {
  --text-xs:  var(--jb-ui-body, 12px);
  --text-sm:  var(--jb-ui-body, 12px);
  --text-md:  var(--jb-ui-body, 12px);
  --text-lg:  var(--jb-ui-body, 12px);
  --text-xl:  var(--jb-ui-h2, 12px);
  --text-2xl: var(--jb-ui-h1, 28px);
  --text-3xl: var(--jb-ui-h1, 28px);
  --type-input-size: var(--jb-ui-body, 12px);
}

/* body text: every element in the shell, the screens and their dialogs */
html:not(#jb-ts-a):not(#jb-ts-b):not(#jb-ts-c) body :where(.xs-side, .xs-cmdbar, .main, #drillWrap, #modal, .modal, [role="dialog"], .a2-dialog) *:not(svg):not(svg *):not(#feeNote):not(#feeNote *):not([data-jb-doc] *):not([data-jb-doc]):not(.xs-brand-n):not(#stmtBox *):not(.stmt *) {
  font-size: var(--jb-ui-body, 12px) !important;
}

/* subheadings: modal, card and section titles */
html:not(#jb-ts-a):not(#jb-ts-b):not(#jb-ts-c):not(#jb-ts-d):not(#jb-ts-e):not(#jb-ts-f) body :is(#modalTitle, .xs-card-h, .xs-card-t, .card-title, .main h2, .main h3, .main h4, #drillWrap h2, #drillWrap h3):not(#feeNote *):not([data-jb-doc] *):not([data-jb-doc]) {
  font-size: var(--jb-ui-h2, 12px) !important;
  font-family: var(--font-heading, var(--font-ui)) !important;
}

/* headings: page titles, report titles and headline figures */
html:not(#jb-ts-a):not(#jb-ts-b):not(#jb-ts-c):not(#jb-ts-d):not(#jb-ts-e):not(#jb-ts-f):not(#jb-ts-g):not(#jb-ts-h) body :is(#vTitle, .xs-h1, .main h1, .stmt-title, .xs-kpi-v, .kpis .v, .kpi .v):not(#feeNote *):not([data-jb-doc] *):not([data-jb-doc]) {
  font-size: var(--jb-ui-h1, 28px) !important;
  line-height: 1.2 !important;
  font-family: var(--font-heading, var(--font-ui)) !important;
}

/* phones: text inputs never below 16px (iOS zooms the page otherwise) */
@media screen and (max-width: 768px) {
  html:not(#jb-ts-a):not(#jb-ts-b):not(#jb-ts-c):not(#jb-ts-d):not(#jb-ts-e):not(#jb-ts-f) body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    font-size: max(16px, var(--jb-ui-body, 12px)) !important;
  }
}

/* statement tables: the same body size, through --fbody (applyAppr keeps
   --fbody equal to the chosen body size), so table headings are not shrunk
   to 0.88x by the older report multipliers. Report titles stay headings. */
html:not(#jb-ts-a):not(#jb-ts-b):not(#jb-ts-c):not(#jb-ts-d) body :is(#stmtBox, .stmt) :is(td, th, td *, th *, .stmt-entity, .stmt-sub):not(svg *),
html:not(#jb-ts-a):not(#jb-ts-b):not(#jb-ts-c):not(#jb-ts-d) body :is(.stmt-entity, .stmt-sub) {
  font-size: var(--fbody, 12px) !important;
}