/* ============================================================
   The Affordability Report.

   HAND-AUTHORED, NOT TAILWIND, and that is the point. wwwroot/app.css is
   compiled by hand and is routinely stale - a utility class that has never
   been built fails SILENTLY, with no build error and no failing test. That
   is how both evidence tables shipped for months without ever rendering as
   tables. Nothing in this document depends on that pipeline.

   This file is the report on SCREEN and on paper. print.css carries only
   what changes when it becomes paper.
   ============================================================ */

.rpt { max-width: 200mm; margin: 0 auto; background: #fff; color: #0f172a; }
.rpt-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.rpt-sec { margin-top: 26px; }
/* NOT :first-of-type. A1 is a <header> and A2 is a <section>, and
   :first-of-type matches once PER ELEMENT TYPE - so it zeroed the top margin
   on both, and A2's verdict callout printed flush against A1's ruled
   applicant line. The first block says so explicitly instead. */
.rpt-sec.is-first { margin-top: 0; }

.rpt-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
               text-transform: uppercase; color: #64748b; }
.rpt-h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin: 4px 0 0; }
.rpt-h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px;
          padding-bottom: 6px; border-bottom: 1px solid #e9eef4; }
.rpt-h3 { font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.rpt-lede { font-size: 14px; line-height: 1.55; color: #334155; margin: 6px 0 0; }
.rpt-note { font-size: 11.5px; line-height: 1.5; color: #64748b; margin: 8px 0 0; }

/* A1 identification */
/* FLOATS, NOT GRID, AND THAT IS ABOUT PAGINATION RATHER THAN LAYOUT.
   Chromium's fragmentation support for grid containers is partial, and
   `auto 1fr` with row gaps is the case it handles worst - in practice the
   container is MONOLITHIC and moves whole rather than splitting at a page
   boundary. break-inside never entered into it. With eight of these in the
   document - A1, the reviewer-layer identity block, R1, R3, both of R4's and
   both of R5's - every one was an unbreakable island, and R5 printed its
   product block on a fresh page under a half-empty one.

   Floats fragment cleanly. NOT overflow:hidden for containment: that
   establishes a block formatting context, which Chromium also declines to
   break inside, and would reintroduce the very thing this replaces.

   One visual change, accepted: the label column is now a fixed width, so
   every block on the page aligns on the same edge instead of each sizing to
   its own longest label. 50mm clears the longest in the document ("Rows
   without a running balance"). */
.rpt-meta { margin: 14px 0 0; font-size: 12.5px; }
.rpt-meta::after { content: ''; display: block; clear: both; }
.rpt-meta dt { float: left; clear: left; width: 50mm; padding: 2px 18px 2px 0;
               color: #64748b; }
.rpt-meta dd { margin: 0 0 0 50mm; padding: 2px 0; color: #0f172a; }

/* KEY/VALUE AS A TABLE, WHERE THE BLOCK IS LONG ENOUGH TO NEED SPLITTING.
   The float version above fragments - it is no longer monolithic like the
   grid was - but it has NO ROW BOXES: a "row" is a floated dt and whichever
   dd follows it, with no element containing both. The fragmenter has nothing
   to break BETWEEN, and breaking between line boxes would strand a label from
   its value, so Chromium pushes the whole block instead. That is why R5's
   "Rules applied" jumped to a fresh page while the real <table> above it
   filled to the edge.

   Padding matches the dl exactly, so this changes where the block may break
   and nothing about how it looks. */
.rpt-table.is-kv td { padding-top: 2px; padding-bottom: 2px; border-bottom: none; }
.rpt-table.is-kv td:first-child { width: 50mm; color: #64748b; }

/* THE APPLICANT NAME IS A BLANK. Nothing carries an identity through this
   tool - it creates no application and persists nothing - so the honest
   answer is a ruled line, not an empty field that looks like a bug. */
.rpt-nameline { margin-top: 16px; display: flex; align-items: flex-end; gap: 10px;
                font-size: 12.5px; color: #64748b; }
.rpt-blank { flex: 1; border-bottom: 1px solid #94a3b8; height: 18px; }

/* A2 the decision */
.rpt-callout { border: 1px solid #e2e8f0; border-left-width: 4px;
               border-radius: 10px; padding: 16px 18px; }
.rpt-callout.is-approve { border-left-color: #047857; background: #ecfdf5; }
.rpt-callout.is-refer   { border-left-color: #b45309; background: #fffbeb; }
.rpt-callout.is-decline { border-left-color: #b91f1f; background: #fef2f2; }
.rpt-verdict { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

/* A4 the money chain */
.rpt-chain { margin-top: 10px; font-size: 13px; }
.rpt-chain-row { display: flex; justify-content: space-between; gap: 20px;
                 padding: 7px 0; border-bottom: 1px solid #f1f5f9; }
.rpt-chain-row.is-total { border-top: 2px solid #0f172a; border-bottom: none;
                          font-weight: 600; margin-top: 2px; }
.rpt-chain-row.is-ask { border-bottom: none; font-weight: 600; }
.rpt-chain-amt { font-family: 'JetBrains Mono', ui-monospace, monospace;
                 white-space: nowrap; }

/* tables */
.rpt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 10px; }
.rpt-table th { text-align: left; font-size: 10px; font-weight: 600;
                letter-spacing: 0.06em; text-transform: uppercase; color: #64748b;
                padding: 0 0 6px; border-bottom: 1px solid #e2e8f0; }
.rpt-table td { padding: 7px 0; border-bottom: 1px solid #f1f5f9;
                vertical-align: top; }
/* THE GUTTER GOES ON THE LEFT OF EVERY CELL AFTER THE FIRST, so a
   right-aligned column cannot cancel it. Padding on the right instead meant
   .rpt-num zeroed its own and the neighbour had none, printing
   "R 28 000Given to us" and "EACH MONTHWHERE IT CAME FROM". */
.rpt-table th + th, .rpt-table td + td { padding-left: 18px; }
.rpt-table th.rpt-num, .rpt-table td.rpt-num { text-align: right; }
.rpt-table .rpt-num { font-family: 'JetBrains Mono', ui-monospace, monospace;
                      white-space: nowrap; }
.rpt-table tr.is-subtotal td { border-top: 1px solid #cbd5e1; border-bottom: none;
                               font-weight: 600; }
.rpt-muted { color: #94a3b8; }

.rpt-code { font-family: 'JetBrains Mono', ui-monospace, monospace;
            font-size: 11px; font-weight: 600; }

/* the layer divider */
.rpt-layer { margin-top: 34px; padding-top: 18px; border-top: 2px solid #0f172a; }
.rpt-layer-note { font-size: 11.5px; color: #64748b; margin: 4px 0 0; }