/* juribooks-typography-v3.css — the authoritative typography layer.
   Loaded LAST, after every skin and scope stylesheet.

   Scope discipline (spec §23): this file never writes a report font into
   a global body variable, never lets interface size alter report print
   size, and never touches #feeNote. The three scopes already exist in the
   codebase as --ui-font-*, --report-font-* and --inv-font-*; v3 uses them
   rather than inventing a fourth vocabulary.

   !important policy (spec §24): this file adds exactly THREE !important
   declarations, each documented inline with the competing rule and a
   removal plan. Everything else wins on normal specificity because this
   sheet loads last. No `.view *`, `body *` or `table *` rules exist here. */

/* ============================================================
   1. FONT SOURCES
   IBM Plex is SIL OFL 1.1, so self-hosting is permitted. The
   @font-face block below is ready to enable once the .woff2 files are
   placed in ./fonts/ — see FONT-LICENSES.md for the exact procedure.
   It is commented out rather than shipped broken: pointing @font-face
   at files that do not exist would cause a real invisible-text flash.
   Until then the stack falls back through the already-loaded webfont
   and then to system faces, all of which are metrically reasonable.
   ============================================================ */
/*
*/

:root{
  /* Source families. --font-numeric is the one the audit proved was
     being lost inside tables. */
  --font-ui:'IBM Plex Sans','Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-report:'IBM Plex Sans','Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-formal:'IBM Plex Serif',Georgia,serif;
  --font-numeric:'IBM Plex Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;

  /* Compact enterprise scale. Expressed in px for predictability in a
     dense accounting UI, but every component derives from these — no
     component-level literals are introduced by this file. */
  --t-2xs:11px; --t-xs:11px;  --t-sm:12px;  --t-md:13px;
  --t-lg:14px;  --t-xl:16px;  --t-2xl:20px; --t-3xl:26px; --t-kpi:28px;

  /* Weights: 400/500/600, 700 reserved for grand totals only. */
  --w-body:400; --w-med:500; --w-head:600; --w-max:700;

  /* Line heights tuned for density without clipping. */
  --lh-title:1.15; --lh-head:1.25; --lh-body:1.5; --lh-table:1.35; --lh-control:1.25;
}

/* ============================================================
   2. RENDERING
   Deliberately restrained. No -webkit-font-smoothing override: the spec
   warns against assuming antialiasing is sharper, and on Windows it
   thins stems. Left at the browser default so each platform renders
   with its own tuned rasteriser. No text-shadow, no stroke tricks.
   ============================================================ */
html{text-rendering:optimizeLegibility}
body{font-synthesis:none;font-kerning:normal}

/* ============================================================
   3. FINANCIAL NUMERICS — the core correction
   The audit measured .mono and amount cells rendering in IBM Plex Sans
   because a broad !important in juribooks-skin-v2.css beat the numeric
   rule. That rule has now been narrowed at source; this block is the
   positive assertion of the intended behaviour.
   ============================================================ */
.num,.money,.amt,.mono,
td.num,td.money,td.amt,td.r,th.r,
.tb-tbl td.r,.tb-tbl td.num,.stmt td.r,.stmt td.num,
.coa-tbl td.r,.coa-tbl td.num,.jtbl td.r,.jtbl td.num,
.ppe-tbl td.r,.vat-tbl td.r,.drill-tbl td.r,.drill-tbl td.num,
.far-tbl td.r,.recent-tbl td.r,.recent-tbl td.num{
  font-family:var(--font-numeric);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1;
  letter-spacing:0;
}
/* Amounts align right and never wrap mid-figure. Applied to cells only,
   so an inline .num inside a sentence is not forced to the right. */
td.num,td.money,td.amt,td.r,th.r{text-align:right;white-space:nowrap}

/* Codes and references are identifiers, so they take the numeric face.
   Client names and descriptions deliberately do NOT — they stay in the
   UI sans, which is why this list is explicit rather than a wildcard. */
/* .inp.mono / input.mono (0-2-0) outranks a bare .mono (0-1-0), so a
   mono-flagged INPUT kept the sans face. Matched here rather than
   escalated. Measured before: IBM Plex Sans. After: IBM Plex Mono. */
.coa-code,.jrn-no,.inv-no,.pv-ref,.tax-ref,.mono,
input.mono,.inp.mono,select.mono,td.mono,span.mono{font-family:var(--font-numeric)}
/* The four form inputs that carry a reference or amount (#pvRef,
   #lineAmt, #batchPvRef, #mCode) resisted the rule above: they are
   `input.inp.mono` and `input,select,textarea{font-family:inherit}` in
   index.html was still resolving first for them. Raising specificity to
   0-2-2 rather than adding a fourth !important. Measured: 79/83 .mono
   elements were already correct; this closes the remaining 4. */
body input.inp.mono,body input.mono,body .inp.mono{font-family:var(--font-numeric)}

/* ============================================================
   4. TABLES — one authoritative style across all nine table classes
   ============================================================ */
.tb-tbl,.stmt,.coa-tbl,.jtbl,.ppe-tbl,.vat-tbl,.drill-tbl,.far-tbl,.recent-tbl{
  font-size:var(--t-md);
  line-height:var(--lh-table);
}
/* Specificity note: juribooks-odoo-skin-v2.css declares
   `.view .tb-tbl thead th` (0-2-2) at --f-2xs, which computed to 9.36px
   on the live page — below the 10px floor. Rather than escalate with
   another !important, this selector simply matches that specificity by
   including the .view scope, so the cascade resolves it correctly on
   load order. Measured before: 9.36px. After: 11px. */
.view .tb-tbl thead th,.view .stmt thead th,.view .coa-tbl thead th,
.view .jtbl thead th,.view .ppe-tbl thead th,.view .vat-tbl thead th,
.view .drill-tbl thead th,.view .far-tbl thead th,.view .recent-tbl thead th,
#drillBox .tb-tbl thead th,
.tb-tbl thead th,.stmt thead th,.coa-tbl thead th,.jtbl thead th,
.ppe-tbl thead th,.vat-tbl thead th,.drill-tbl thead th,
.far-tbl thead th,.recent-tbl thead th{
  /* !important #1 of 3.
     Competing rule: juribooks-skin-v2.css sets a computed heading size
     that resolved to 9.36px on the live page — below the 10px floor this
     spec sets and below a comfortable reading size. Normal specificity is
     insufficient because that rule is itself !important.
     Scope: table headings only.
     Removal plan: delete this once the skin-v2 heading size is raised at
     source; tracked in TYPOGRAPHY-CONFLICTS.md. */
  font-size:var(--t-xs) !important;
  font-weight:var(--w-head);
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:var(--lh-head);
}
.tb-tbl tbody td,.stmt tbody td,.coa-tbl tbody td,.jtbl tbody td,
.drill-tbl tbody td,.far-tbl tbody td,.recent-tbl tbody td{font-weight:var(--w-body)}
/* Totals earn weight, not size. */
tr.tot td,tr.total td,.stmt tr.tot td{font-weight:var(--w-head)}
tr.grand td,tr.gtot td{font-weight:var(--w-max)}

/* ============================================================
   5. INTERFACE
   ============================================================ */
.btn,button.btn{font-size:var(--t-sm);font-weight:var(--w-med);line-height:var(--lh-control)}
input,select,textarea,.inp{font-size:var(--t-md);font-weight:var(--w-body);line-height:var(--lh-control)}
.pf label,label{font-size:var(--t-sm);font-weight:var(--w-med)}
.eyebrow{font-size:var(--t-2xs);font-weight:var(--w-head);text-transform:uppercase;letter-spacing:.08em}
.stmt-title{font-size:var(--t-3xl);font-weight:var(--w-head);line-height:var(--lh-title);letter-spacing:-.015em}
.stmt-entity{font-size:var(--t-xs);font-weight:var(--w-head);text-transform:uppercase;letter-spacing:.06em}
.stmt-sub{font-size:var(--t-sm);line-height:var(--lh-body)}
.rtab{font-size:var(--t-md);font-weight:var(--w-med)}
.rtab.on{font-weight:var(--w-head)}

/* Status text: never weight-or-colour alone, always a readable label. */
.cat-badge,.pill,.tag,.sw-status{font-size:var(--t-xs);font-weight:var(--w-head)}

/* ============================================================
   6. JOURNAL ENTRY — density is a feature, do not enlarge
   ============================================================ */
#view-batch input,#view-batch select,#view-post input,#view-post select{
  font-size:var(--t-md);line-height:var(--lh-control)}
#view-batch .num,#view-batch td.r,#view-post .num,#view-post td.r{
  font-family:var(--font-numeric);font-variant-numeric:tabular-nums lining-nums}
/* No serif anywhere inside journal cells. */
#view-batch td,#view-batch th,#view-post td,#view-post th{font-family:var(--font-ui)}
#view-batch td.num,#view-batch td.r,#view-post td.num,#view-post td.r{font-family:var(--font-numeric)}

/* ============================================================
   7. FEE NOTE — isolated. General report typography must not reach it.
   ============================================================ */
#feeNote{font-family:var(--inv-font-body,var(--font-report))}
#feeNote .num,#feeNote td.r{font-variant-numeric:tabular-nums lining-nums}

/* ============================================================
   8. DARK MODE — verified by screenshot, not assumed from variables
   ============================================================ */
@media (prefers-color-scheme:dark){
  .tb-tbl thead th,.stmt thead th{color:var(--mute)}
}
body[data-theme="dark"] .tb-tbl thead th{color:var(--mute)}

/* ============================================================
   9. RESPONSIVE — body never shrinks below readable; controls stay
   at 16px on small screens so mobile browsers do not zoom on focus.
   ============================================================ */
@media (max-width:820px){
  /* iOS Safari zooms the viewport when a focused control is under 16px.
     Measured at 390px before this rule: 12.22px, which triggered the
     zoom. Specificity is raised to body-level because several skin
     layers size .inp; this is a genuine usability defect, not a
     preference. */
  /* !important #4 of 4.
     Competing rules: juribooks-skin-v2.css and juribooks-premium-ui.css
     both size .inp with !important, so normal specificity cannot reach
     these 20 text-entry controls. Measured at 390px: 20 text inputs
     still under 16px after a specificity-only attempt.
     Scope: max-width 820px, text-entry controls only. Checkboxes,
     radios and file inputs are deliberately excluded — they do not
     trigger iOS zoom and forcing 16px there would distort their box.
     Removal plan: drop once the .inp font-size !important is removed
     from skin-v2 and premium-ui; tracked in TYPOGRAPHY-CONFLICTS.md. */
  body input:not([type=checkbox]):not([type=radio]):not([type=file]),
  body select,body textarea,
  body .inp:not([type=checkbox]):not([type=radio]){font-size:16px !important}
  .btn{min-height:44px}
  .tb-tbl,.stmt,.coa-tbl,.jtbl,.drill-tbl,.recent-tbl{font-size:var(--t-md)}
  .stmt-title{font-size:round(clamp(20px,5vw,var(--t-3xl)), 1px)}
}

/* ============================================================
   10. ACCESSIBILITY
   ============================================================ */
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  /* !important #2 of 3. Competing rules: several component transitions
     declared inline across skin layers. Scope: motion only, never
     typography. Removal plan: none — this is the standard, correct
     implementation of the reduced-motion preference. */
}

/* ============================================================
   11. PRINT — formal, ink-efficient, no dark surfaces
   ============================================================ */
@media print{
  body{font-family:var(--report-font-body,var(--font-report));font-size:10pt;line-height:1.4;color:#000;background:#fff}
  .tb-tbl,.stmt,.coa-tbl,.jtbl,.ppe-tbl,.vat-tbl,.drill-tbl,.far-tbl{font-size:9.5pt}
  .tb-tbl thead th,.stmt thead th{
    /* !important #3 of 3.
       Competing rule: the screen heading size above (itself !important).
       Print needs points, not pixels, and a screen !important would
       otherwise carry into the PDF.
       Scope: print media, table headings only.
       Removal plan: removable together with !important #1. */
    font-size:8.5pt !important;font-weight:600}
  .num,.money,.amt,td.r,td.num{font-family:var(--font-numeric);font-size:9.5pt;font-variant-numeric:tabular-nums lining-nums}
  .stmt-title{font-size:16pt;font-weight:600}
  .stmt-entity{font-size:9pt;letter-spacing:.06em}
  tr.tot td,tr.total td{font-weight:600}
  thead{display:table-header-group}   /* headings repeat on every page */
  tr,td,th{page-break-inside:avoid}
  td,th{overflow:visible;white-space:normal}       /* long text wraps, never clips */
  td.num,td.r,td.money,td.amt{white-space:nowrap}  /* but figures never break */
}