/* AFA-CA prototype styles. Mobile first. Single column at 390 wide, 16px minimum
   body text, 44px tap targets, no horizontal scroll. Build 2 (D-164): this file
   holds no colour or font values. Every colour and font is a CSS custom property
   written by the Worker at /brand.css from the brand settings file
   (src/brands/afa.js), linked before this file on every page.
   D-101: the visual assessment components are ported from
   08_visual_reference/equifax-apply-layout-v1/styles.css (component numbers kept). */

:root {
  /* Colours and fonts: /brand.css (Build 2). Sizes and radii stay here. */
  --fs-small: 16px;
  --fs-score: 44px;
  --radius: 10px;
  --radius-sm: 6px;
  --tap: 44px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--neutral-text); background: var(--neutral-bg); }
.wrap { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 16px; }
.band { background: var(--indigo); color: var(--white); padding: 16px 0; }
.brand { font-weight: 700; font-size: 18px; }
.eyebrow { font-family: var(--font-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; color: var(--lilac); }
.card .eyebrow { color: var(--neutral-muted); text-transform: none; letter-spacing: 0; font-size: 16px; }
main { padding: 16px 0 96px; }
.card { background: var(--white); border: 1px solid var(--neutral-border); border-radius: 12px; padding: 16px; margin: 0 0 16px; }
h1 { font-size: 26px; line-height: 1.2; margin: 0 0 12px; }
h2 { font-size: 21px; line-height: 1.25; margin: 0 0 10px; }
h3 { font-size: 17px; margin: 16px 0 6px; }
p, li { font-size: 16px; }
p { margin: 0 0 10px; }
.muted { color: var(--neutral-muted); }
.small { font-size: 16px; }
.mono { font-family: var(--font-mono); }
.break { word-break: break-all; }
.headline { font-size: 19px; font-weight: 600; }
.banner { background: var(--alert-bg); border-left: 4px solid var(--alert-border); padding: 10px 12px; border-radius: 6px; }
.note { background: var(--neutral-bg); padding: 10px 12px; border-radius: 6px; }
.error { background: var(--error-bg); color: var(--error-text); padding: 10px 12px; border-radius: 6px; }
.error ul { margin: 0; padding-left: 20px; }
.tech { color: var(--neutral-muted); font-family: var(--font-label); }
.status-note { color: var(--neutral-muted); }
.visually-hidden { position: absolute; left: -9999px; }
.label { font-family: var(--font-label); font-weight: 600; color: var(--text-muted); margin: 0 0 6px; }

label { display: block; font-weight: 600; margin: 0 0 4px; }
.field { margin: 0 0 14px; }
input, textarea, select, button { font: inherit; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--neutral-border); border-radius: 8px; background: var(--white); color: var(--neutral-text); }
input[type="file"] { min-height: 44px; padding: 8px 0; width: 100%; }
textarea { font-family: var(--font-mono); font-size: 16px; }
fieldset { border: 1px solid var(--neutral-border); border-radius: 8px; padding: 12px; margin: 0 0 16px; min-width: 0; }
legend { font-weight: 700; padding: 0 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; min-height: 44px; }
.check input { width: 24px; height: 24px; margin-top: 8px; flex: 0 0 24px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--purple2); background: var(--white); color: var(--purple2); font-weight: 600; text-decoration: none; cursor: pointer; margin: 4px 4px 4px 0; }
.btn-primary { background: var(--purple2); color: var(--white); }
.btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.tools { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices .btn { flex: 1 1 160px; }

.months { margin: 8px 0; }
.basis summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--neutral-muted); }
.basis ul { padding-left: 20px; }
.basis-label { font-weight: 600; }
.basis-list { padding-left: 20px; }
dl dt { font-weight: 700; margin-top: 8px; }
dl dd { margin: 0 0 4px; }
.cta { border-color: var(--purple2); }
.cta-prompt { font-size: 18px; font-weight: 600; }
.first-person { font-style: italic; }
.preview { width: 100%; height: 360px; border: 1px solid var(--neutral-border); border-radius: 8px; background: var(--white); }
.foot { padding: 16px; color: var(--neutral-muted); }
.link-note a { color: var(--purple2); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* ===== 3. Report header ===== */
.report-header { padding: 8px 0 16px; border-bottom: 1px solid var(--line); margin: 0 0 16px; }
.report-header .brand-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.report-header .brand { font-family: var(--font-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple2); font-size: 15px; }
.report-header .title { color: var(--indigo); }
.report-header .subtitle { color: var(--text-muted); margin: 0 0 12px; }
.meta-grid { display: grid; grid-template-columns: 1fr; gap: 4px 24px; margin: 0; }
.meta-grid div { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--line); }
.meta-grid dt { font-family: var(--font-label); color: var(--text-muted); min-width: 140px; margin: 0; font-weight: 500; }
.meta-grid dd { margin: 0; font-weight: 500; }
.meta-grid.compact dt { min-width: 120px; }

/* ===== 4. Section banner ===== */
.section-banner { margin: -16px -16px 12px; }
.section-banner h2 { display: inline-block; background: var(--indigo); color: var(--white); padding: 10px 40px 10px 16px; clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); font-size: 19px; margin: 0; border-radius: 12px 0 0 0; }
.section-banner::after { content: ""; display: block; height: 3px; background: var(--indigo); margin-top: -3px; }
.section-adverse .section-banner::after { background: var(--signal-red); }

/* ===== 6. Badges ===== */
.badge { display: inline-block; min-width: 24px; padding: 1px 7px; border-radius: 4px; font-family: var(--font-label); font-weight: 700; text-align: center; line-height: 1.4; }
.badge-red { background: var(--signal-red); color: var(--white); }
.badge-amber { background: var(--signal-amber); color: var(--white); }
.badge-soft { background: var(--band-soft); color: var(--neutral-text); border: 1px solid var(--line); }
.badge-green { background: var(--signal-green-soft); color: var(--signal-green); }
.tag { display: inline-block; padding: 0 6px; border-radius: 3px; background: var(--band-strong); color: var(--white); font-family: var(--font-label); font-size: 14px; vertical-align: middle; }
.clear-line { color: var(--text-muted); font-size: var(--fs-small); padding: 6px 0; }
.clear-line .badge { margin-right: 6px; }

/* ===== 7. Tables ===== */
.tbl-wrap, .grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 10px; }
.data-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--fs-small); }
.data-table th, .data-table td { text-align: left; padding: 8px 10px; vertical-align: top; }
.data-table thead th { background: var(--band-strong); color: var(--white); font-family: var(--font-label); font-weight: 600; }
.data-table tbody tr:nth-child(odd) td, .data-table tbody tr:nth-child(odd) th { background: var(--band-soft); }
.data-table tbody th { font-weight: 600; }
.data-table.compact { min-width: 0; }
.kv-table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); margin: 0 0 8px; }
.kv-table th, .kv-table td { padding: 8px 10px; text-align: left; vertical-align: top; }
.kv-table tbody tr:nth-child(odd) th, .kv-table tbody tr:nth-child(odd) td { background: var(--band-soft); }
.kv-table th { font-weight: 500; color: var(--text-muted); width: 46%; }
.kv-table td { font-weight: 600; }

/* ===== 8 and 9. Score panel, axis, factor list ===== */
/* minmax(0, 1fr), not a bare 1fr (2026-09-30 visual correction pass): a bare `fr` track's
   implicit minimum is auto, sized to its content, which let a wide child (the score axis)
   silently grow past this panel's own edge without triggering page-level scrollWidth, since
   nothing here clips it. Root cause of body.scrollWidth exceeding the viewport at 390px even
   though document.documentElement.scrollWidth reported no overflow at all. */
.risk-ends { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--text-muted); }
.risk-ends span { min-width: 0; }

/* ===== Score band axis v2 (2026-09-30 visual correction pass) =====
   Grid-columns sized by each band's share of the -200 to 1,200 range, so nothing relies on
   absolute pixel or percentage positioning that could overflow a narrow viewport. Two label
   rows (above, below) share the same column template as the bar so a label always sits over
   its own segment; empty cells collapse to zero visible width. */
/* Grid items default to min-width: auto (their content's min-content size), which ignores the
   assigned track width and lets text paint past its column without enlarging the page's layout
   width, so it looks cut off rather than wrapped. min-width: 0 forces it to actually wrap. */
/* Margin clears the marker pin's own upward extension (top: -6px) from the label row above it;
   without it the pin's top overlapped the bottom of an "above" band label (2026-09-30 visual
   correction pass). */
/* Customer's actual score at the marker: its own row between the "above" labels and the bar. */
/* Equifax-like score graph treatment (UI feedback patch 2026-09-30, Stage 2): red at the
   high-risk low end, orange leaving it, yellow through the middle, green into reduced-risk
   territory, with fine vertical tick bars over the segments. CSS only, no Equifax asset. The
   gradient lives in --g so the same colour can fill the small band pill without the ticks. */
.score-secondary { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ===== 10. Summary strip and count strips ===== */
.count-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0 12px; }
.count { background: var(--neutral-bg); border: 1px solid var(--neutral-border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; min-height: 44px; }
.count-value { font-family: var(--font-label); font-weight: 700; font-size: 22px; }
.count-label { font-size: 16px; color: var(--neutral-muted); }
.count-flag { border-color: var(--signal-red); box-shadow: inset 4px 0 0 var(--signal-red); }
.count-flag.flag-amber { border-color: var(--signal-amber); box-shadow: inset 4px 0 0 var(--signal-amber); }
.summary-strip .badge { font-size: 20px; padding: 2px 10px; }

/* ===== 11. Account card ===== */
.account { border: 1px solid var(--line); border-left: 5px solid var(--purple); border-radius: var(--radius); padding: 14px 16px 12px; margin: 14px 0; background: var(--white); }
.account.commercial { border-left-color: var(--indigo); }
.account .provider { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.account .provider .acct { font-family: var(--font-label); font-weight: 500; color: var(--text-muted); text-transform: none; }
.account .original { color: var(--text-muted); font-size: var(--fs-small); margin: 4px 0 10px; }

/* ===== 12. Repayment history grid (horizontal: year row, month row, codes, hardship) ===== */
.rhi-block { margin: 10px 0; }
.grid-heading { font-family: var(--font-label); font-weight: 600; margin: 8px 0 4px; }
.rhi-hint { margin: 0 0 4px; }
.rhi-hint[hidden] { display: none; }
.rhi { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.rhi table { border-collapse: separate; border-spacing: 2px 0; }
.rhi .year th { background: var(--band-strong); color: var(--white); font-family: var(--font-label); font-weight: 600; font-size: 14px; text-align: left; padding: 3px 8px; border-radius: 4px 4px 0 0; }
.rhi .year th:first-child { background: transparent; position: sticky; left: 0; }
.rhi .month td { font-family: var(--font-label); font-size: 14px; color: var(--text-muted); text-align: center; padding: 4px 0 2px; min-width: 34px; }
.rhi .month td:first-child, .rhi .codes th, .rhi .fhi th { position: sticky; left: 0; background: var(--white); z-index: 1; }
.rhi .codes th { font-family: var(--font-label); font-size: 15px; text-align: left; padding-right: 8px; color: var(--text-muted); }
.rhi .codes td { text-align: center; height: 44px; min-width: 34px; border-radius: 4px; background: var(--band-soft); font-family: var(--font-label); font-weight: 700; font-size: 16px; }
.rhi td.ontime { color: var(--text-muted); }
.rhi td.late { background: var(--signal-amber-soft); color: var(--signal-amber); }
.rhi td.severe { background: var(--signal-red); color: var(--white); }
.rhi td.unknown { border: 1.5px dashed var(--signal-red); background: var(--white); color: var(--signal-red); }
.rhi td.nodata { color: var(--text-muted); font-weight: 500; }
.rhi .fhi th { font-family: var(--font-label); font-size: 14px; text-align: left; color: var(--text-muted); }
.rhi .fhi td { text-align: center; font-family: var(--font-label); font-size: 14px; color: var(--purple2); font-weight: 700; padding: 2px 0 0; }
.rhi-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; color: var(--text-muted); margin: 8px 0 0; }
.rhi-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--band-soft); border: 1px solid var(--line); }
.rhi-legend .l-lead { flex-basis: 100%; }
.rhi-legend .l-lead::before { display: none; }
.rhi-legend .l-late::before { background: var(--signal-amber-soft); border-color: var(--signal-amber); }
.rhi-legend .l-severe::before { background: var(--signal-red); }
.rhi-legend .l-unknown::before { background: var(--white); border: 1.5px dashed var(--signal-red); }
.rhi-legend .l-fhi::before { background: var(--lav); }

/* ===== 13. Payment default block ===== */
.default-block { border: 1px solid var(--signal-red); border-left-width: 5px; border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; background: var(--white); }
.default-block .block-title { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-bottom: 8px; }
.default-block .block-title strong { color: var(--signal-red); }

/* ===== 14. Company card ===== */
.company { border: 1px solid var(--line); border-left: 5px solid var(--lilac); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; }
.company.disqualified { border-left-color: var(--signal-red); }
.company .name { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 8px; }

/* ===== 15. Explanation callout and chips ===== */
.item { border-top: 1px solid var(--neutral-border); padding: 12px 0 4px; }
.callout { background: var(--band-soft); border-left: 5px solid var(--purple2); border-radius: var(--radius-sm); padding: 12px 14px; margin: 12px 0; }
.callout .eyebrow { font-family: var(--font-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 16px; color: var(--purple2); margin: 0 0 4px; }
.callout p:last-child { margin-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); font-family: var(--font-label); font-size: 15px; background: var(--white); }
.chip.sev-4 { background: var(--signal-red); color: var(--white); border-color: var(--signal-red); }
.chip.sev-3 { background: var(--white); color: var(--signal-red); border-color: var(--signal-red); }
.chip.sev-2 { background: var(--signal-amber-soft); border-color: var(--signal-amber); }
.chip.sev-U { border-style: dashed; }
.evidence-links a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 12px; color: var(--purple2); font-weight: 600; }

/* ===== 17. Table of contents ===== */
.toc-card { padding: 12px 16px; }
.toc { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; margin: 0; list-style: none; }
.toc li a { display: flex; align-items: center; min-height: var(--tap); padding: 0 4px; border-bottom: 1px dotted var(--line); text-decoration: none; color: var(--purple2); font-weight: 500; }
.toc li a:hover { background: var(--band-soft); }

/* ===== 18. Matrix ===== */
.matrix th.group { background: var(--band-mid); color: var(--neutral-text); font-weight: 600; text-align: center; }

/* ===== Supporting reference (customer view) ===== */
.supporting-group h3 { margin: 12px 0 4px; color: var(--purple2); }
.supporting-list { margin: 0 0 8px; padding-left: 20px; }
.supporting-list li { margin: 0 0 4px; }

/* ===== Customer view simplification (customer-view-simplification-v1) ===== */
.score-band { font-family: var(--font-label); font-size: 18px; font-weight: 700; color: var(--purple2); margin: -6px 0 8px; }
.lending-context { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.lending-context ul { margin: 6px 0 0; padding-left: 20px; }
.lending-context li { margin: 0 0 6px; font-size: var(--fs-small); }
.badge-consumer { background: var(--band-soft); color: var(--purple2); border: 1px solid var(--line); margin-left: 8px; }
.badge-neutral { background: var(--band-mid); color: var(--neutral-text); margin-left: 8px; }
.section-note { font-weight: 600; margin: 4px 0 14px; }
.main-issues-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.main-issues-list .issue { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--band-soft); border-left: 4px solid var(--signal-red); border-radius: var(--radius-sm); }
.issue-priority { font-family: var(--font-label); font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.main-issues-list .issue a { color: var(--indigo); font-weight: 600; text-decoration: none; }
.main-issues-list .issue a:hover { text-decoration: underline; }
details.collapsed { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; background: var(--white); }
details.collapsed summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--purple2); }
details.collapsed p { margin: 8px 0; font-size: var(--fs-small); }

/* ===== Staged correction pass (customer-view-correction-pass-2026-09-29) ===== */
details.supporting summary { cursor: pointer; list-style: none; margin: -16px -16px 12px; }
details.supporting summary::-webkit-details-marker { display: none; }
details.supporting summary h2 { display: inline-block; background: var(--purple2); color: var(--white); padding: 10px 40px 10px 16px; clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); font-size: 19px; margin: 0; border-radius: 12px 0 0 0; }
details.supporting[open] summary h2::after { content: ' (shown)'; font-size: 13px; font-weight: 400; }
details.supporting:not([open]) summary h2::after { content: ' (tap to show)'; font-size: 13px; font-weight: 400; }
.item-rhi_grid.recent-late .provider { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.recent-late-explain { font-weight: 600; margin: 6px 0; }
.pressure-table { margin-top: 0; }
.pressure-total { margin: 8px 0 4px; }

/* ===== Staged scrap-and-rebuild pass (build-2026-09-29-ui-pruning) ===== */
/* Clean two-column legend, not a raw bullet dump (Stage 7). */
.legend-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; margin: 8px 0 0; font-size: var(--fs-small); }
.legend-grid dt { font-family: var(--font-label); font-weight: 700; color: var(--purple2); }
.legend-grid dd { margin: 0; }
/* Average national score, shown inline with its own footnote marker (Stage 2, 3). */
.average-context-line { font-weight: 600; margin: 10px 0 0; }
/* Score band module: a small table under the score, not the axis legend (Stage 2). */
/* The 100-point icon rule, visible above the factor table, never hidden in a footer (Stage 2). */
/* One compact footnote replaces every scattered disclaimer (Stage 3). */
/* Grouped issue titles carry the count and the estimated points (Stage 4). */
.issue-group { margin: 0 0 14px; }
.issue-group-title { font-family: var(--font-label); font-size: 19px; font-weight: 800; color: var(--purple2); margin: 0 0 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Point deduction stands out from the bold heading in its own tone (2026-09-30 visual
   correction pass, Stage 4): a small solid chip, not a trailing plain-text clause. Also used on
   the defaults/RHI/commercial-defaults section banners so the same figure reads consistently. */
.points-badge { display: inline-block; font-family: var(--font-label); font-size: 14px; font-weight: 700; color: var(--white); background: var(--signal-red); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.section-banner h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.issue-group .main-issues-list { margin: 0; }
table.enquiry-table td .badge { margin: 2px 2px 0 0; }

.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--neutral-border); box-shadow: 0 -4px 16px var(--shadow-12); }
.sticky-cta .btn { width: 100%; margin: 0; }
.sticky-cta[hidden] { display: none; }

/* ===== UI and broker-assisted intelligence pass (2026-09-30) ===== */
/* "What's impacting your score" heading, inside the score section only (Stage 2). */
.score-factors-title { margin-top: 0; }
/* Broker-only creditor cooperation category, next to a default card (Stage 4). */
.cooperation-note { margin: 8px 0 0; }
/* Compact "questions to ask" panel: broker view only (Stage 7). */
.broker-question-panel { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.broker-question-panel h4 { font-size: 15px; margin: 0 0 6px; }
.broker-questions { margin: 0 0 8px; padding-left: 20px; }
.broker-questions li { margin: 0 0 4px; }
.evidence-checklist-label { margin: 0 0 4px; }
/* One combined enquiries section, consumer subheading first (Stage 6). */
.enquiry-subheading { margin: 14px 0 6px; }
.enquiry-education { margin: 10px 0 0; padding-left: 20px; }
.enquiry-education li { margin: 0 0 4px; }

@media (min-width: 700px) {
  .sticky-cta { display: none !important; }
  .wrap { padding: 0 24px; }
  .meta-grid { grid-template-columns: 1fr 1fr; }
  .count-strip { grid-template-columns: repeat(3, 1fr); }
  .toc { grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .rhi-hint { display: none; }
}

@media print {
  .cta, .toc-card, .tools, .sticky-cta, .rhi-hint { display: none; }
  .account, .default-block, .company, .callout { break-inside: avoid; }
  .rhi { overflow: visible; }
}

/* ===== UI feedback patch 2026-09-30 ===== */
/* Stage 3: compact inline RHI legend, one wrapped run instead of a tall list. */
.rhi-legend.proper { display: block; margin: 8px 0 0; }
.legend-inline { list-style: none; margin: 0; padding: 0; display: block; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
/* Inline flow, not a stacked list: items pack onto shared lines and wrap as a run. A code stays
   with its first word (non-breaking space in the markup). */
.legend-inline li { display: inline; }
.legend-inline li:not(:last-child)::after { content: "\00b7"; margin: 0 7px; color: var(--legend-sep); font-weight: 700; }
.legend-inline b { font-family: var(--font-label); color: var(--purple2); }
.legend-inline .lg-lead b { color: var(--neutral-text); }
/* Stage 5: fall-off and organic drop-off dates must stand out. */
.kv-table tr.row-emphasis th, .kv-table tr.row-emphasis td { background: var(--signal-amber-soft); }
.kv-table tr.row-emphasis th { color: var(--neutral-text); font-weight: 700; }
.date-callout { display: inline-block; font-family: var(--font-label); font-weight: 800; font-size: 19px; line-height: 1.25; color: var(--date-callout-text); background: var(--date-callout-bg); border: 2px solid var(--signal-amber); border-radius: 6px; padding: 2px 10px; }
/* Stage 6: mobile-safe enquiry list. Under 600px each row stacks as a small card. */
.enquiry-subheading { margin: 14px 0 6px; }
.enquiry-table tr.unflagged td:last-child { color: var(--text-muted); }
@media (max-width: 600px) {
  .enquiry-table, .enquiry-table tbody, .enquiry-table tr, .enquiry-table td { display: block; width: 100%; }
  .enquiry-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .enquiry-table tr { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 8px; padding: 4px 0; background: var(--white); }
  .enquiry-table tbody tr:nth-child(odd) td { background: transparent; }
  .enquiry-table td { padding: 3px 10px; display: flex; gap: 8px; justify-content: space-between; align-items: baseline; }
  .enquiry-table td::before { content: attr(data-label); flex: 0 0 38%; color: var(--text-muted); font-weight: 500; }
  .enquiry-table td > * , .enquiry-table td { min-width: 0; overflow-wrap: anywhere; }
  .enquiry-table td:last-child { flex-wrap: wrap; }
}
/* Stage 8 */
.screenshot-note { margin: 8px 0 0; }

/* Axis labels: a single-word band name must never break mid-word (it may spill into the empty
   neighbouring cell, since labels alternate above and below the bar). */
/* Same column widths in the consumer and commercial enquiry tables on wider screens. */
@media (min-width: 601px) {
  .enquiry-table { table-layout: fixed; width: 100%; }
  .enquiry-table th:nth-child(1) { width: 15%; }
  .enquiry-table th:nth-child(2) { width: 20%; }
  .enquiry-table th:nth-child(3) { width: 14%; }
  .enquiry-table th:nth-child(4) { width: 16%; }
  .enquiry-table th:nth-child(5) { width: 11%; }
  .enquiry-table th:nth-child(6) { width: 24%; }
}

/* Date badges stay on one line; the label column narrows on emphasis rows so the badge fits at 390px. */
.date-callout { white-space: nowrap; }
.kv-table tr.row-emphasis th { width: 34%; }
@media (max-width: 480px) { .date-callout { font-size: 17px; padding: 2px 8px; } }

/* ===== UI chrome review patch 2026-09-30 ===== */
/* Stage 1: score axis in the Equifax style. One continuous colour flow (red, orange, yellow,
   lime, green) shown through a dense mask of thin vertical bars, instead of five flat blocks.
   The five band segments stay in the DOM for the band positions and the current-band outline,
   but carry no fill of their own. CSS only, no Equifax image. */
/* The score bubble is a child of the marker: it belongs to the notch and points at the line. */
/* Stage 2: legend runs across the page in columns, no list, no bullets. Items fill column by
   column, so the codes read left to right: days overdue on the left, statuses to the right. */
.rhi-legend.proper { display: block; margin: 10px 0 0; padding: 8px 10px; background: var(--band-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.rhi-legend .legend-lead { margin: 0 0 4px; font-weight: 700; font-size: 13.5px; }
.legend-cols { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px 16px; font-size: 13.5px; line-height: 1.35; color: var(--text-muted); }
.legend-cols .lg-item { min-width: 0; }
.legend-cols b { font-family: var(--font-label); color: var(--purple2); }
@media (max-width: 700px) {
  .legend-cols { grid-template-rows: repeat(7, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; font-size: 13px; }
}
/* Legend refinement after the first Chrome check: three columns across on a desktop (left,
   middle, right), the narrow label face so items do not wrap, tighter box. */
.rhi-legend.proper { padding: 6px 10px 7px; }
.rhi-legend .legend-lead { margin-bottom: 3px; }
.legend-cols { grid-template-rows: repeat(5, auto); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 20px; font-family: var(--font-label); font-size: 14.5px; line-height: 1.3; }
@media (max-width: 700px) {
  .legend-cols { grid-template-rows: repeat(7, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; font-size: 13.5px; }
}
/* The current band is shown by the pill and the marker; an outline over the ticks looked broken. */

/* ===== Fable UI build 2026-10-01 (D-112, checkpoint ui-fable-v1) =====
   Fixes the full-system audit's visual defects V1 to V7, V9 and V10 and restyles the broker
   question lanes. Later rules override the earlier blocks above on purpose; nothing above is
   deleted so the D-108 to D-110 tests keep matching their own rule text. */
/* signal-amber-deep, signal-green-deep and the pill colours moved to the brand file (Build 2). */
/* V2, V3: every flag badge and band pill reads at 4.5:1 or better against its text. */
.badge-amber { background: var(--signal-amber-deep); color: var(--white); }
.rhi td.late { color: var(--signal-amber-deep); }
/* V4, V6: readable axis labels; the below row clears the marker pin's lower tip. The range
   never wraps (it may spill a few pixels into the empty neighbouring cell, since labels
   alternate above and below), and the risk-end row sits clear of the label row above it. */
.risk-ends { margin-top: 6px; }
/* V5: a band-only rating outlines its band segment and flags it above the bar. The bar grid is
   positioned so its outline paints above the absolutely positioned tick layer. */
/* V1: factor rows. Two lines per factor on a phone, one line under a header on a desktop.
   Fixed track widths keep the rows aligned with each other and with the header. */
.factor-head { display: none; }
.factor-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.factor-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "num name delta" "num link icons"; gap: 2px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.factor-num { grid-area: num; font-family: var(--font-label); font-weight: 700; color: var(--text-muted); align-self: start; }
.factor-name { grid-area: name; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.factor-icons { grid-area: icons; justify-self: end; }
.factor-delta { grid-area: delta; justify-self: end; font-family: var(--font-label); font-weight: 800; font-size: 18px; color: var(--signal-red); }
.factor-link { grid-area: link; font-size: 15px; color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 601px) {
  .factor-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) 76px 128px minmax(150px, 0.6fr); gap: 0 14px; font-family: var(--font-label); font-weight: 600; color: var(--text-muted); font-size: 14px; padding: 0 0 6px; }
  .factor-head span:first-child { grid-column: 1 / 3; }
  .factor-row { grid-template-columns: 28px minmax(0, 1fr) 76px 128px minmax(150px, 0.6fr); grid-template-areas: "num name icons delta link"; gap: 0 14px; }
  .factor-icons, .factor-delta { justify-self: start; }
}
/* Main issue cards: creditor or account as the primary line, status and amount as a quieter
   second line, and a chevron so the card reads as a link to the detail below. */
.main-issues-list .issue { padding: 10px 14px; }
.main-issues-list .issue a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 0 10px; }
.issue-primary { grid-column: 1; grid-row: 1; font-weight: 700; color: var(--indigo); overflow-wrap: anywhere; }
.issue-meta { grid-column: 1; grid-row: 2; font-weight: 500; color: var(--text-muted); font-size: 15px; }
.main-issues-list .issue a::after { content: "\203A"; grid-column: 2; grid-row: 1 / 3; font-size: 28px; line-height: 1; color: var(--purple2); }
/* Legend colour key: the code text takes the tone the grid cell uses at every width, and from
   700 px up a swatch box precedes it (on a phone the box would push items to wrap, so the code
   colour alone carries the key there). Four columns on a wide desktop; three and two columns
   are unchanged from the chrome review patch. */
.legend-cols b.lg-late { color: var(--signal-amber-deep); }
.legend-cols b.lg-severe { color: var(--signal-red); }
.legend-cols b.lg-unknown { color: var(--signal-red); }
@media (min-width: 700px) {
  .legend-cols b.lg-code::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--band-soft); border: 1px solid var(--line); }
  .legend-cols b.lg-late::before { background: var(--signal-amber-soft); border-color: var(--signal-amber-deep); }
  .legend-cols b.lg-severe::before { background: var(--signal-red); border-color: var(--signal-red); }
  .legend-cols b.lg-unknown::before { background: var(--white); border: 1.5px dashed var(--signal-red); }
  .legend-cols b.lg-nodata::before { background: var(--white); }
}
@media (min-width: 1000px) { .legend-cols { grid-template-rows: repeat(4, auto); grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* V7: the 24-month grid fits the 880 px page at desktop widths (52 px label plus 24 cells of
   29 px plus 1 px spacing is 774 px against a 798 px wrapper). Where it still overflows, the
   hint shows at any width; app.js hides it only when the grid fits. */
@media (min-width: 700px) { .rhi table { border-spacing: 1px 0; } .rhi .month td, .rhi .codes td, .rhi .fhi td { min-width: 29px; } .rhi-hint { display: block; } }
/* Enquiry readability: the flagged row's enquirer is emphasised; on a phone the card carries an
   amber edge. Five columns now (no consumer/commercial column). */
.enquiry-table tr.flagged td:nth-child(2) { font-weight: 600; }
@media (max-width: 600px) { .enquiry-table tr.flagged { border-left: 4px solid var(--signal-amber-deep); } }
@media (min-width: 601px) {
  .enquiry-table th:nth-child(1) { width: 17%; }
  .enquiry-table th:nth-child(2) { width: 30%; }
  .enquiry-table th:nth-child(3) { width: 20%; }
  .enquiry-table th:nth-child(4) { width: 11%; }
  .enquiry-table th:nth-child(5) { width: 22%; }
}
/* Broker conversation guide and collapsed question lanes (Option B guided triage). */
.broker-guide .guide-sub { margin: 10px 0 4px; color: var(--purple2); }
.lane-questions { margin: 0 0 10px; padding: 0; list-style: none; counter-reset: q; }
.lane-questions > li { position: relative; padding: 8px 0 8px 36px; border-top: 1px solid var(--line); counter-increment: q; }
.lane-questions > li::before { content: counter(q); position: absolute; left: 0; top: 9px; width: 26px; height: 26px; border-radius: 50%; background: var(--indigo); color: var(--white); font-family: var(--font-label); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.q-text { display: block; font-weight: 600; }
.q-who { display: inline-block; font-family: var(--font-label); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--purple2); margin: 0 0 2px; }
.q-who.broker { color: var(--text-muted); }
.q-note { display: block; font-size: 15px; color: var(--text-muted); margin-top: 2px; }
.q-branch { margin: 6px 0 0; padding-left: 12px; border-left: 3px solid var(--lav); list-style: none; }
.q-branch li { font-size: 15px; margin: 0 0 4px; }
.q-outcome { display: inline-block; font-family: var(--font-label); font-size: 13px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.q-outcome.easy { background: var(--signal-green-soft); color: var(--signal-green-deep); }
.q-outcome.evidence { background: var(--signal-amber-soft); color: var(--signal-amber-deep); }
.q-outcome.operator { background: var(--signal-red-soft); color: var(--signal-red); }
.outcomes-label { font-family: var(--font-label); font-weight: 600; color: var(--text-muted); margin: 8px 0 6px; }
.lane-outcomes { display: grid; gap: 8px; margin: 0 0 10px; }
.lane-outcomes .outcome { border-radius: var(--radius-sm); padding: 8px 10px; border-left: 4px solid var(--line); background: var(--band-soft); min-width: 0; }
.lane-outcomes .outcome b { display: block; font-family: var(--font-label); font-size: 15px; margin-bottom: 2px; }
.lane-outcomes .outcome span { font-size: 15px; color: var(--neutral-text); }
.lane-outcomes .outcome.easy { border-color: var(--signal-green-deep); background: var(--signal-green-soft); }
.lane-outcomes .outcome.easy b { color: var(--signal-green-deep); }
.lane-outcomes .outcome.evidence { border-color: var(--signal-amber-deep); background: var(--signal-amber-soft); }
.lane-outcomes .outcome.evidence b { color: var(--signal-amber-deep); }
.lane-outcomes .outcome.operator { border-color: var(--signal-red); background: var(--signal-red-soft); }
.lane-outcomes .outcome.operator b { color: var(--signal-red); }
@media (min-width: 700px) { .lane-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
details.broker-lane { border: 1px solid var(--line); border-radius: var(--radius); margin: 14px 0 0; background: var(--white); }
details.broker-lane summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; font-family: var(--font-label); font-weight: 700; color: var(--purple2); }
details.broker-lane summary::-webkit-details-marker { display: none; }
details.broker-lane summary .lane-hint { font-weight: 500; color: var(--text-muted); font-size: 14px; margin-left: auto; white-space: nowrap; }
details.broker-lane summary::after { content: "\002B"; font-size: 22px; line-height: 1; color: var(--purple2); }
details.broker-lane[open] summary::after { content: "\2212"; }
details.broker-lane summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: var(--radius); }
details.broker-lane .lane-body { padding: 0 12px 10px; }
details.broker-lane .lane-lead { margin: 0 0 8px; }
details.broker-lane .chips { margin-bottom: 6px; }

/* ===== Customer details polish 2026-10-01 (D-113) ===== */
/* Header: the access note carries the 30-day expiry wording and the save-PDF action. */
.access-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; }
.btn.btn-small { min-height: 44px; padding: 6px 14px; font-size: 15px; margin: 0; }
/* Score axis polish (requirement 7): scale ends in the risk row, a boundary tick at each band's
   lower bound (the 0 tick heavier), the below-zero lead-in hatched, and a one-line scale note. */
.axis-scale-note { margin: 4px 0 0; font-size: 14px; }
/* No-score panel (requirement 8): neutral, no number, no marker, no pill. */
.no-score-title { font-family: var(--font-label); font-weight: 800; font-size: 22px; color: var(--indigo); margin: 0 0 6px; line-height: 1.2; }
/* Customer details review (requirement 3): review-style groups, a tag per item, the check
   question under each group, the possible-match and mismatch callouts, the credit-history flag. */
.identity-review .id-group { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.id-group-title { margin: 0 0 6px; font-size: 14px; font-family: var(--font-label); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.id-list { list-style: none; margin: 0; padding: 0; }
.id-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-bottom: 1px dotted var(--line); }
.id-item:last-child { border-bottom: 0; }
.id-value { font-weight: 600; overflow-wrap: anywhere; }
.id-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 14px; color: var(--text-muted); }
.id-tag { display: inline-block; font-family: var(--font-label); font-weight: 700; font-size: 13px; padding: 1px 8px; border-radius: 999px; background: var(--band-mid); color: var(--indigo); white-space: nowrap; }
.id-tag.current, .id-tag.primary { background: var(--indigo); color: var(--white); }
.id-prompt { margin: 8px 0 4px; font-weight: 600; color: var(--purple2); }
.id-prompt::before { content: "?"; display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--purple2); color: var(--white); font-family: var(--font-label); font-weight: 800; font-size: 14px; align-items: center; justify-content: center; margin-right: 8px; vertical-align: -4px; }
.id-mismatch { margin: 0 0 10px; }
.id-mismatch p { margin: 0 0 6px; }
.file-history { background: var(--signal-amber-soft); border: 1px solid var(--signal-amber-deep); border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0; }
.identity-review .id-group.file-history { border-top: 1px solid var(--signal-amber-deep); }
.file-history .id-group-title { color: var(--signal-amber-deep); }
.fh-figures { font-weight: 600; }
details.id-correction { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 10px 0 0; background: var(--white); }
details.id-correction summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; font-family: var(--font-label); font-weight: 700; color: var(--purple2); }
details.id-correction summary::-webkit-details-marker { display: none; }
details.id-correction summary::after { content: "\002B"; font-size: 22px; line-height: 1; margin-left: auto; color: var(--purple2); }
details.id-correction[open] summary::after { content: "\2212"; }
details.id-correction summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: var(--radius-sm); }
.id-correction-body { padding: 0 12px 10px; }
.id-correction-body ol { padding-left: 20px; margin: 6px 0 8px; }
.id-correction-body li { margin: 0 0 4px; }
@media (min-width: 700px) {
  .id-item { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .id-meta { justify-content: flex-end; }
}
/* Business relationships (requirement 10): non-zero counts as chips, compact company cards. */
.biz-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.biz-count { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--band-soft); font-size: 15px; }
.biz-count b { font-family: var(--font-label); font-size: 18px; color: var(--indigo); }
.biz-count.flag { border-color: var(--signal-red); background: var(--signal-red-soft); }
.biz-count.flag b { color: var(--signal-red); }
.company-list { display: grid; gap: 10px; margin: 0 0 10px; }
.company-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--white); min-width: 0; }
.company-card.role-disqualified { border-color: var(--signal-red); }
.company-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 6px; }
.company-name { font-weight: 700; color: var(--indigo); overflow-wrap: anywhere; }
.role-tag { display: inline-block; font-family: var(--font-label); font-weight: 700; font-size: 13px; padding: 1px 8px; border-radius: 999px; background: var(--band-mid); color: var(--indigo); white-space: nowrap; }
.role-tag.current { background: var(--indigo); color: var(--white); }
.role-tag.disqualified { background: var(--signal-red); color: var(--white); }
.company-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0; }
.company-facts div { min-width: 0; }
.company-facts dt { font-size: 13px; color: var(--text-muted); margin: 0; font-weight: 500; }
.company-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 700px) {
  .company-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Lane extras (requirement 6): banded answers as chips, lead triggers as a short list. */
.q-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.q-options .chip { font-size: 13px; }
.lane-triggers { margin: 0 0 10px; padding-left: 20px; }
.lane-triggers li { font-size: 15px; margin: 0 0 2px; }
/* Print and PDF (requirement 9): static content, no interactive-only labels, no tools, no
   collapsed glyphs, the customer link masked. app.js opens every collapsed block for the print
   run and closes it again afterwards. */
.print-only { display: none; }
@media print {
  .no-print, .tools, .cta, .toc-card, .sticky-cta, .rhi-hint, .debug-download, .btn, .link-full { display: none !important; }
  .print-only { display: block !important; }
  body { background: var(--white); }
  .card { border-color: var(--print-border); }
  .account, .default-block, .company-card, .id-group, .factor-row, .main-issues-list .issue, .lane-questions > li, .file-history, .lane-outcomes .outcome, .rhi-block { break-inside: avoid; }
  details > summary { list-style: none; cursor: default; }
  details > summary::after, details > summary::-webkit-details-marker { content: none !important; display: none !important; }
  details.supporting:not([open]) summary h2::after { content: none !important; }
  details.broker-lane, details.id-correction, details.supporting, details.collapsed { border-color: var(--print-border); }
  .axis-ticks, .axis-tick, .marker, .badge, .q-outcome, .lane-outcomes .outcome, .id-tag, .role-tag, .biz-count, .chip, .band, .rhi td, .date-callout, .points-badge, .factor-delta, .file-history, .banner, .id-prompt::before, .lane-questions > li::before, .squares i, .legend-cols b.lg-code::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rhi { overflow: visible; }
  a { color: inherit; }
}

/* ===== UI broker questions and axis patch 2026-10-01 (D-114) =====
   Later rules override the earlier blocks above on purpose; nothing above is deleted so the
   D-108 to D-113 tests keep matching their own rule text. */
/* Stage 1 (revised by D-115, 2026-10-02): the label rows share the bar's own column template
   (inline on the markup, the same template as the bar and the bracket rows) and show from 700 px
   only, so each label group is a centred column of band name, colour cue and range over its own
   band, and the thin bracket on the same side of the bar spans that band under the group. Under
   700 px the rows and brackets are hidden and the band legend (D-115 block below) replaces them.
   The cue is a real element centred by the flex column, never a pseudo-element that could sit
   left-aligned under the first word. Boundary ticks are thinner and lighter. */
@media (min-width: 700px) {
  /* The pin starts above the upper bracket row and ends at the lower bracket's edge, clear of the
     below label row (measured: a 2 px overrun at 1280 before this was trimmed). */
}
/* Stage 4: enquiry overview under the heading, group markers and the compact flag key. */
.enq-summary { background: var(--band-soft); border: 1px solid var(--line); border-left: 5px solid var(--signal-green); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 12px; }
.enq-summary.at { border-left-color: var(--signal-amber-deep); }
.enq-summary.over { border-color: var(--signal-red); border-left-color: var(--signal-red); }
.enq-summary p { margin: 0 0 6px; }
.enq-summary p:last-child { margin-bottom: 0; }
.enq-summary .enq-lead { font-size: 17px; }
.enq-summary .enq-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 600; }
.enq-summary .enq-status .badge { font-size: 14px; padding: 2px 10px; }
.badge-cluster { color: var(--white); }
.badge-cluster.g1 { background: var(--purple2); }
.badge-cluster.g2 { background: var(--signal-green-deep); }
.badge-cluster.g3 { background: var(--cluster-3); }
.badge-dup { background: var(--white); border: 1.5px dashed var(--indigo); color: var(--indigo); }
.badge-dup.g2 { border-color: var(--purple2); color: var(--purple2); }
.badge-dup.g3 { border-color: var(--cluster-3); color: var(--cluster-3); }
.enquiry-table tbody tr.cl-1 td { background: var(--cluster-1-soft); }
.enquiry-table tbody tr.cl-2 td { background: var(--signal-green-soft); }
.enquiry-table tbody tr.cl-3 td { background: var(--cluster-3-soft); }
@media (max-width: 600px) {
  .enquiry-table tr.cl-1 { border-left: 4px solid var(--purple2); background: var(--cluster-1-soft); }
  .enquiry-table tr.cl-2 { border-left: 4px solid var(--signal-green-deep); background: var(--signal-green-soft); }
  .enquiry-table tr.cl-3 { border-left: 4px solid var(--cluster-3); background: var(--cluster-3-soft); }
  .enquiry-table tr.cl-1 td, .enquiry-table tr.cl-2 td, .enquiry-table tr.cl-3 td { background: transparent; }
}
.flag-key { margin: 10px 0 0; padding: 8px 10px; background: var(--band-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.35; color: var(--text-muted); }
.flag-key .fk-title { margin: 0 0 4px; font-family: var(--font-label); font-weight: 700; font-size: 13.5px; color: var(--neutral-text); }
.flag-key .fk-item { margin: 0 0 3px; min-width: 0; overflow-wrap: anywhere; }
.flag-key .fk-item b { font-family: var(--font-label); color: var(--indigo); }
@media (min-width: 700px) {
  .flag-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 20px; }
  .flag-key .fk-title { grid-column: 1 / -1; }
}
/* Stage 3: stop point and broker note inside the issue panels. (The compact broker guide and its
   rules were removed by D-115; there is no global broker guide.) */
.lane-tip { background: var(--band-soft); border-left: 4px solid var(--indigo); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0 0 10px; }
.lane-tip b { display: block; font-family: var(--font-label); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 2px; }
.lane-tip span { font-size: 15px; font-weight: 600; color: var(--neutral-text); }
.lane-note { background: var(--band-soft); border-left: 4px solid var(--indigo); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0 0 10px; }
.lane-note b { display: block; font-family: var(--font-label); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 2px; }
.lane-note p { font-size: 15px; margin: 0 0 4px; }
.lane-note p:last-child { margin-bottom: 0; }
@media print {
  .lane-tip, .lane-note, .enq-summary, .flag-key, .badge-cluster, .badge-dup, .enquiry-table tr.cl-1 td, .enquiry-table tr.cl-2 td, .enquiry-table tr.cl-3 td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .enq-summary, .flag-key, .lane-tip, .lane-note { break-inside: avoid; }
}

/* ===== UI axis and mobile correction 2026-10-02 (D-115) =====
   Later rules override the earlier blocks above on purpose; nothing above is deleted so the
   D-108 to D-114 tests keep matching their own rule text. */
/* Band legend under the bar on a phone (under 700 px): the five bands in bar order, each with a
   swatch in the band's cue colour, the band name and the range, and the customer's band marked.
   It is the phone replacement for the label rows and brackets, which cannot line text up with a
   band that is 5 percent of a 340 px bar. Hidden from 700 px, where the centred label rows carry
   the same names, cues and ranges over the bands themselves. */
/* On a phone the marker pin ends 8 px under the bar and nothing else sits between the bar and
   the scale ends row, so that row drops 14 px (one margin: a bottom margin on the bar would
   collapse into this one and change nothing, measured as a 2 px touch at 375). From 700 px the
   below label row sits between them and the earlier 6 px applies. */
.risk-ends { margin-top: 14px; }
@media (min-width: 700px) {
  .risk-ends { margin-top: 6px; }
}
/* Mobile polish: stacked enquiry cards keep their flag badges together on the right when they
   wrap, instead of a second row starting under the label; a long panel title wraps while the
   prompt count and the toggle stay on the first line. */
@media (max-width: 600px) {
  .enquiry-table td:last-child { justify-content: flex-end; gap: 4px 4px; }
  .enquiry-table td:last-child::before { margin-right: auto; }
}
details.broker-lane summary .lane-title { min-width: 0; flex: 1 1 auto; }
@media (max-width: 480px) {
  details.broker-lane summary { gap: 8px; padding: 8px 10px; }
  details.broker-lane summary .lane-hint { font-size: 13px; }
}

/* ===== Broker-view address check flags 2026-10-02 (D-117) =====
   One compact badge and one reason line under each address in the customer details review,
   broker view only. Tones: green for verified, neutral for a standardised or unchecked line,
   amber for anything the broker should ask about, red-soft for a suburb or postcode mismatch. */
.addr-check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; font-family: var(--font-label); font-size: 14px; line-height: 1.35; }
.addr-flag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 13px; white-space: nowrap; border: 1px solid var(--line); background: var(--band-soft); color: var(--neutral-text); }
.addr-flag.verified { background: var(--signal-green-soft); border-color: var(--signal-green); color: var(--signal-green-deep); }
.addr-flag.standardised_minor_difference { background: var(--band-mid); border-color: var(--band-mid); color: var(--indigo); }
.addr-flag.possible_mismatch, .addr-flag.unit_or_level_not_confirmed, .addr-flag.incomplete_address { background: var(--signal-amber-soft); border-color: var(--signal-amber-deep); color: var(--signal-amber-deep); }
.addr-flag.suburb_postcode_mismatch { background: var(--signal-red-soft); border-color: var(--signal-red); color: var(--signal-red); }
.addr-flag.cannot_validate { border-style: dashed; color: var(--text-muted); }
.addr-flag.provider_error_manual_review { border-style: dashed; border-color: var(--indigo); color: var(--indigo); }
.addr-why, .addr-std { color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; }
.addr-std { flex-basis: 100%; }
.addr-note { margin: 6px 0 0; }
@media (min-width: 700px) { .id-item .addr-check { grid-column: 1 / -1; } }
@media print { .addr-flag { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .addr-check { break-inside: avoid; } }

/* Customer private workspace (D-148). Mobile first; options stack on a phone, two columns from 700 px. */
.q-section { margin: 0 0 20px; }
.q-section h3 { margin: 0 0 6px; }
.q-item { border: 1px solid var(--neutral-border); border-radius: 10px; padding: 12px; margin: 0 0 12px; min-width: 0; }
.q-item > summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.q-value { font-weight: 600; margin: 0 0 8px; overflow-wrap: anywhere; min-width: 0; }
.q-item > summary .q-value { margin: 0; }
.q { border: 0; padding: 0; margin: 10px 0 0; }
.q legend { padding: 0; font-weight: 600; }
.q-options { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 700px) { .q-options { grid-template-columns: 1fr 1fr; } }
.private-head .mono, .private-link { overflow-wrap: anywhere; }
.draft { border: 1px solid var(--neutral-border); border-radius: 10px; padding: 12px; margin: 16px 0 0; min-width: 0; }
.draft h3 { margin: 0 0 10px; overflow-wrap: anywhere; }
.draft textarea { min-height: 260px; font-family: inherit; }
.draft-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.disclaimer { background: var(--neutral-bg); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.disclaimer h3 { margin: 0 0 6px; font-size: 1rem; }
.answer-list { padding-left: 18px; }
.answer-list li { margin: 0 0 8px; overflow-wrap: anywhere; }
.answer-label { display: block; color: var(--text-muted); }
.answer-value { display: block; font-weight: 600; }
.pill { display: inline-block; font-size: 14px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral-text); }
@media print { .questions, .drafts, .download, .private-head form { display: none; } }

/* AFA handover page (D-151): long addresses and answers wrap on a phone. */
.handover .kv-table { width: 100%; table-layout: fixed; }
.handover .kv-table th, .handover .kv-table td { overflow-wrap: anywhere; word-break: break-word; }
.handover .kv-table th { width: 38%; }

/* Creditor cooperation band (2026-10-06 operator decision 3, D-152): label only, both views. */
.coop-badge { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; font-size: 0.78rem; font-weight: 600; line-height: 1.5; white-space: normal; }
.coop-high { color: var(--coop-high-text); background: var(--coop-high-bg); }
.coop-moderate { color: var(--coop-moderate-text); background: var(--coop-moderate-bg); }
.coop-lower { color: var(--coop-lower-text); background: var(--coop-lower-bg); }
.coop-not_enough_data { color: var(--coop-none-text); background: var(--coop-none-bg); }
/* Lane enq1 (D-186, item 261): "Not cooperative" reads like "Lower cooperation". */
.coop-not_cooperative { color: var(--coop-lower-text); background: var(--coop-lower-bg); }
.cooperation-note { margin: 8px 0 0; }
.cooperation-note .coop-lead { font-weight: 600; }
.cooperation-note .coop-explain { display: block; margin-top: 2px; }
@media (prefers-color-scheme: dark) {
  .coop-high { color: var(--coop-high-text-dark); background: var(--coop-high-bg-dark); }
  .coop-moderate { color: var(--coop-moderate-text-dark); background: var(--coop-moderate-bg-dark); }
  .coop-lower { color: var(--coop-lower-text-dark); background: var(--coop-lower-bg-dark); }
  .coop-not_enough_data { color: var(--coop-none-text-dark); background: var(--coop-none-bg-dark); }
  .coop-not_cooperative { color: var(--coop-lower-text-dark); background: var(--coop-lower-bg-dark); }
}

/* Customer address prompt (2026-10-06 operator decision 2, D-152): a neutral "please check" line, never an error tone. */
.addr-customer-note { display: block; margin-top: 4px; padding: 4px 8px; border-left: 3px solid var(--flag-gold); background: var(--flag-gold-wash); font-size: 0.85rem; overflow-wrap: anywhere; }

/* ===== Assessment corrections and customer questions V2 2026-10-06 =====
   1. Factor rows whose marked-icon count could not be read stay listed (report fact) with an unreadable marker in
      place of the AFA estimate. 2. National average explainer: hover, focus and tap. 3. Flag key carries the real
      badges. 4. Creditor cooperation key. */
.factor-row.unreadable .factor-delta { font-size: 14px; font-weight: 700; color: var(--text-muted); border: 1px dashed var(--line); border-radius: 4px; padding: 1px 8px; }
.factor-row.unreadable .factor-name::after { content: ''; }
.pressure-unreadable-hint { margin: 8px 0 0; }
/* Full V2 audit 2026-10-06: a factor read from the report but with no AFA estimate for its layout ("No estimate").
   Same quiet muted treatment, a solid rather than dashed border so it never reads as an unreadable count. */
.factor-row.no-estimate .factor-delta { font-size: 14px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 8px; }
.pressure-no-estimate-hint { margin: 8px 0 0; }
.flag-key .fk-intro, .flag-key .fk-range { margin: 0 0 6px; grid-column: 1 / -1; }
.flag-key .fk-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.flag-key .fk-item .badge { flex: 0 0 auto; font-size: 13px; }
.coop-key { margin: 10px 0 0; padding: 8px 10px; background: var(--band-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.35; color: var(--text-muted); }
.coop-key .ck-title { margin: 0 0 4px; font-family: var(--font-label); font-weight: 700; font-size: 13.5px; color: var(--neutral-text); }
.coop-key .ck-intro { margin: 0 0 6px; }
.coop-key .ck-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 3px; min-width: 0; overflow-wrap: anywhere; }
.coop-key .ck-item .coop-badge { margin-top: 0; }
@media (min-width: 700px) { .coop-key .ck-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 20px; } }

/* ===== Customer questions V2 2026-10-06 =====
   The private workspace reads as the same product as the assessment: section banners, cards, badges and the
   cooperation badge are shared. Mobile first; every tap target is at least 44 px; no horizontal overflow. */
.private-head .section-banner h1 { margin: 0; font-size: 1.35rem; color: inherit; }
.q-nav { margin: 14px 0 0; }
.q-progress { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.q-progress-bar { display: block; height: 8px; border-radius: 999px; background: var(--band-mid); overflow: hidden; }
.q-progress-bar i { display: block; height: 100%; background: var(--purple2); border-radius: 999px; }
.q-progress-text { font-family: var(--font-label); font-weight: 600; font-size: 14px; color: var(--text-muted); }
.q-nav-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
.q-nav-list a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--neutral-text); font-weight: 600; }
.q-nav-list a:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.q-nav-list b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--band-mid); color: var(--indigo); font-family: var(--font-label); flex: 0 0 26px; }
.q-nav-list li.done b { background: var(--signal-green-soft); color: var(--signal-green); }
@media (min-width: 700px) { .q-nav-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .q-progress { flex-direction: row; align-items: center; } .q-progress-bar { flex: 1 1 auto; } }
.q-section { margin: 0 0 20px; }
.q-section .section-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.q-step { font-family: var(--font-label); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
.q-status { margin: 0 0 8px; }
.q-help { margin: 0 0 10px; }
.q-why { margin: 0 0 14px; padding: 10px 12px; border-left: 4px solid var(--purple2); background: var(--band-soft); border-radius: var(--radius-sm); font-size: 15px; }
.q-group { margin: 0 0 16px; }
.q-group h3 { margin: 0 0 8px; }
.q-item.flagged { border-color: var(--flag-gold); box-shadow: inset 4px 0 0 var(--flag-gold); }
.q-item h3.q-value { font-size: 1.05rem; margin: 0 0 8px; }
.q legend { margin: 0 0 6px; }
.q-options { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) { .q-options { grid-template-columns: 1fr 1fr; } }
label.check.choice { margin: 0; padding: 8px 12px; min-height: 44px; border: 1px solid var(--neutral-border); border-radius: 10px; background: var(--white); cursor: pointer; align-items: center; }
label.check.choice input { margin-top: 0; }
label.check.choice:has(input:checked) { border-color: var(--purple2); background: var(--band-soft); box-shadow: inset 0 0 0 1px var(--purple2); }
label.check.choice:has(input:focus-visible) { outline: 3px solid var(--purple); outline-offset: 2px; }
.q-context { margin: 0 0 12px; padding: 10px 12px; background: var(--band-soft); border-radius: var(--radius-sm); border: 1px solid var(--line); }
.q-context-title { margin: 0 0 6px; font-family: var(--font-label); font-weight: 700; font-size: 14px; color: var(--indigo); }
.q-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.q-chips .badge { font-size: 13px; }
.q-context-list { margin: 0 0 6px; padding-left: 18px; font-size: 15px; }
.q-context-list li { margin: 0 0 4px; }
.q-coop { margin: 6px 0 0; font-size: 15px; }
.q-coop .coop-lead { font-weight: 600; }
.q-challenge { margin: 10px 0 0; padding: 10px 12px; border: 1px dashed var(--purple2); border-radius: 10px; }
.q-followup { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.q-followup[hidden] { display: none; }
.q-enquiry.is-asking { border-color: var(--purple2); }
details.q-fix, details.q-pathways { margin: 10px 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
details.q-fix > summary, details.q-pathways > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 8px 12px; font-weight: 600; color: var(--indigo); }
details.q-fix > summary:focus-visible, details.q-pathways > summary:focus-visible { outline: 3px solid var(--purple); outline-offset: -3px; border-radius: 10px; }
.q-fix-body { padding: 0 12px 12px; }
.q-fix-body ol { padding-left: 20px; margin: 8px 0; }
.q-fix-body li { margin: 0 0 6px; }
.q-fix-lead { margin: 0 0 6px; font-weight: 600; }
.q-fix-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.q-item.flagged details.q-fix { border-color: var(--flag-gold); }
.q-pathway-list { margin: 8px 0; }
.q-pathway-list div { margin: 0 0 10px; }
.q-pathway-list dt { font-weight: 700; margin: 0 0 2px; }
.q-pathway-list dd { margin: 0; }
.q-guide { margin: 14px 0 0; padding: 12px; border: 1px solid var(--purple2); border-radius: 10px; background: var(--band-soft); }
.q-guide h3 { margin: 0 0 6px; }
.q-concern { margin: 10px 0 0; }
.q-save { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; box-shadow: 0 -6px 18px var(--shadow-08); }
.q-save .btn { margin: 0; }
.q-expect { margin: 0 0 12px; padding: 10px 12px; background: var(--band-soft); border-radius: var(--radius-sm); }
.q-expect ul { margin: 0; padding-left: 18px; font-size: 15px; }
.q-pending { margin: 10px 0; }
.q-pending ul { padding-left: 18px; }
.q-pending li { margin: 0 0 8px; }
.q-pending .muted { display: block; }
.drafts .section-banner h2 { margin: 0; }
@media print { .q-save, .q-nav, .q-guide button, #guide-form { display: none; } .q-followup[hidden] { display: block; } }
/* Interface-guideline pass (web-design-guidelines, 2026-10-06): deliberate tap handling on controls, anchor targets
   clear of the sticky save bar, and in-page jumps that land below the page band. */
.q-nav-list a, label.check.choice, .q-save .btn, .info-btn, details.q-fix > summary, details.q-pathways > summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.q-section, .q-enquiry, .drafts, .q-item[data-item] { scroll-margin-top: 12px; }
html:has(.q-save) { scroll-padding-bottom: 120px; }

/* Build 1 (2026-10-10): enquiry grounds, follow-up questions, path results, business and tax prompts, creditor alias
   display. Within the current styles; the full visual rebuild is Build 2. */
.cred-known { font-weight: 600; }
.cred-shown { color: var(--text-muted); font-weight: 400; font-size: 0.9em; overflow-wrap: anywhere; }
.strong-grounds { margin: 12px 0; padding: 14px 16px; border: 2px solid var(--purple2); border-left-width: 6px; border-radius: 10px; background: var(--white); }
.strong-grounds h3 { margin: 0 0 6px; color: var(--indigo); font-size: 1.1rem; }
.strong-list { margin: 10px 0; }
.strong-list > div { padding: 8px 0; border-top: 1px solid var(--line); }
.strong-list dt { font-weight: 700; color: var(--purple2); }
.strong-list dd { margin: 2px 0 0; }
.strong-list dd.strong-docs { color: var(--text-muted); font-size: 0.95em; }
.q-ticks { margin: 8px 0 0; }
.q-tick-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); }
.q-tick-row label { font-weight: 600; overflow-wrap: anywhere; }
.q-tick-row select { min-height: 44px; max-width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--neutral-border); border-radius: 6px; background: var(--white); }
.q-tick-row select:focus-visible { outline: 3px solid var(--purple); outline-offset: 1px; }
@media (min-width: 720px) { .q-tick-row { flex-direction: row; align-items: center; justify-content: space-between; } .q-tick-row select { min-width: 260px; } }
.other-grounds, .goodwill-note { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--neutral-bg); }
.other-grounds h3, .goodwill-note h3 { margin: 0 0 6px; font-size: 1rem; }
.other-grounds ul { margin: 6px 0; padding-left: 20px; }
.q-msg { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--neutral-bg); }
.q-detect { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line); }
.q-detect-lead { margin: 0 0 4px; font-weight: 600; }
.q-name-flag { margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--signal-red); background: var(--signal-red-soft); color: var(--error-text); font-weight: 600; }
.q-enquiry.name-flagged { border-color: var(--signal-red); }
.q-flagged { margin: 10px 0; }
.q-flagged ul { margin: 6px 0; padding-left: 20px; color: var(--error-text); }
.q-dropoff { border-left: 4px solid var(--signal-amber); background: var(--signal-amber-soft); }
.q-safe { margin: 8px 0 0; }
.q-safety { padding: 8px 12px; border-left: 4px solid var(--purple); background: var(--neutral-bg); }
.q-result { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--lav); }
.q-result[data-path^="E"], .q-result[data-path="STOP"] { background: var(--neutral-bg); }
.q-urgency { margin: 12px 0 0; border-left: 4px solid var(--signal-amber); background: var(--signal-amber-soft); }
.q-urgency h3, .q-discuss h3 { margin: 0 0 6px; font-size: 1.05rem; }
.q-discuss { margin: 12px 0 0; padding: 16px; border-radius: 12px; background: var(--indigo); color: var(--white); }
.q-discuss p { color: var(--white); }
.q-discuss .btn-primary { background: var(--white); color: var(--indigo); border-color: var(--white); min-height: 44px; }
.q-discuss .btn-primary:focus-visible { outline: 3px solid var(--lilac); outline-offset: 2px; }
.q-fix-once { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.q-fix-once h3 { margin: 0 0 6px; }
.q-fix-once ol { padding-left: 20px; }
.q-cdef { padding: 8px 0; border-top: 1px solid var(--line); }
[hidden] { display: none !important; }
/* Build 1 render check (390 px): a fieldset's default min-content width let a long legend push a follow-up past the
   card edge. Questions shrink to the card instead. */
.q-section fieldset.q { min-width: 0; max-width: 100%; }
.q-section legend { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.q-flow, .q-last, .q-detect { min-width: 0; max-width: 100%; }

/* ===== Build 2 (2026-10-11, D-164): broker guide look, score panel, band axis and factor marks =====
   Ported from the AFA broker guide (afa-documents 02_WEB/afa-brokerguide, v1_1_2): its tokens, type, cards, hints,
   `.score-hero`, the "Where scores sit" axis and the `.ln-fac` / `.bx` / `.ic` factor marks, in normal page flow
   (not the fixed-pixel report replicas). Every colour and font is a brand variable from /brand.css. Later rules
   override the earlier blocks on purpose. Applies to every customer page, the broker view and the private
   workspace, including the Build 1 business and tax prompts. */
body { background: var(--white); color: var(--ink); line-height: 1.6; }
main p, main li { color: var(--body); }
h1, h2, h3, h4 { color: var(--indigo); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 28px; line-height: 1.15; font-weight: 700; }
h2 { font-size: 22px; line-height: 1.2; font-weight: 700; }
h3 { font-size: 19px; line-height: 1.25; font-weight: 700; }
header.band { position: relative; }
header.band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--indigo) 0%, var(--indigo) 55%, var(--purple2) 80%, var(--purple) 100%); }
.card { background: var(--grey); border: 0; border-top: 5px solid var(--purple2); border-radius: 2px; padding: 16px; }
.section-banner { margin: -16px -16px 14px; }
.section-banner h2 { border-radius: 0; }
.muted { color: var(--body2); }
.hint { font-size: 16px; color: var(--fine); margin: 6px 0 10px; }
.btn { border-radius: 4px; }
.callout { background: var(--white); border-radius: 2px; }
.foot { color: var(--fine); }
.q-discuss { border-radius: 2px; position: relative; overflow: hidden; padding-left: 24px; }
.q-discuss::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 100%; background: linear-gradient(180deg, var(--purple), var(--purple2)); }
.q-discuss h3 { color: var(--white); }
.q-urgency { border-radius: 2px; border-left-color: var(--yellow-b); background: var(--yellow); }
.q-urgency h3, .q-urgency p { color: var(--yellow-t); }
@media (min-width: 720px) {
  .card { padding: 22px 24px; }
  .section-banner { margin: -22px -24px 16px; }
}

/* Symbols (broker guide v1_0_3): red cross, green tick, down and up arrows. CSS-drawn, role="img" with a label. */
.ic { display: inline-block; width: 20px; height: 20px; border-radius: 3px; position: relative; vertical-align: -4px; margin: 0 1px; flex: none; }
.ic.x { background: var(--mark-cross); }
.ic.x::before, .ic.x::after { content: ""; position: absolute; left: 4px; top: 9px; width: 12px; height: 2.5px; background: var(--white); transform: rotate(45deg); }
.ic.x::after { transform: rotate(-45deg); }
.ic.t { background: var(--mark-tick); }
.ic.t::before { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--white); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ic.dn, .ic.up { background: var(--white); border: 1px solid var(--border); }
.ic.dn::before, .ic.up::before { position: absolute; inset: 0; text-align: center; font: 700 15px/18px var(--font-mark); color: var(--mark-arrow); }
.ic.dn::before { content: "\2193"; }
.ic.up::before { content: "\2191"; }
.ics { display: inline-flex; gap: 2px; vertical-align: -4px; margin: 0 1px; }
.ics .ic { margin: 0; vertical-align: 0; }

/* Score hero (broker guide section 1 top block), filled from the customer's own file. */
.score-hero { background: var(--indigo); color: var(--white); padding: 22px 18px 20px 26px; position: relative; overflow: hidden; border-radius: 2px; margin: 4px 0 20px; }
.score-hero::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 100%; background: linear-gradient(180deg, var(--purple), var(--purple2)); }
.score-hero p { color: var(--white); margin: 0; font-size: 18px; line-height: 1.45; }
.score-hero .l1 { font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.score-hero .l2, .score-hero .l4 { color: var(--lav); }
.score-hero .l3 { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 8px; color: var(--white); }
.score-hero .l3 .score-value { font-family: var(--font-body); font-size: inherit; font-weight: 700; color: var(--white); line-height: 1; }
.score-hero .l3 .score-value.band-only { font-size: 40px; }
.score-hero .l3-unit { font-size: 20px; font-weight: 600; letter-spacing: 0; color: var(--lav); }
.score-hero .l5 { font-weight: 700; margin-top: 16px; margin-bottom: 6px; }
.score-hero .l6, .score-hero .l7 { font-size: 18px; margin-bottom: 4px; }
.score-hero .l8 { font-size: 16px; color: var(--lav2); margin: 6px 0 0; }
.score-hero.no-score .l1 { font-family: var(--font-body); font-size: 22px; color: var(--white); }
.score-hero.no-score .l2 { color: var(--lav); margin-bottom: 8px; }
.score-hero .ic.dn, .score-hero .ic.up { border-color: var(--white); }
@media (min-width: 720px) {
  .score-hero { padding: 26px 26px 24px 30px; }
  .score-hero .l3 { font-size: 84px; }
}

/* "Where scores sit" axis: (value + 200) / 1400 positions, the engine's bands, one marker for the customer. */
.axis-title { margin: 18px 0 4px; }
.axis { position: relative; margin: 14px 18px 8px; padding-top: 62px; font-family: var(--font-body); }
.axis.no-you { padding-top: 8px; }
.axis .axis-bar { position: relative; height: 34px; border-radius: 2px; background: var(--axis-gradient); }
.axis .axis-bar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--tick-clear) 50%, var(--axis-shade) 100%); }
.axis .axis-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 3px, var(--axis-stripe) 3px 4px); }
.axis .axis-ticks { position: relative; height: 18px; margin-top: 4px; left: auto; right: auto; top: auto; background: none; -webkit-mask-image: none; mask-image: none; }
.axis .axis-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; line-height: 1; color: var(--fine); white-space: nowrap; width: auto; height: auto; margin: 0; background: none; opacity: 1; border-radius: 0; }
.axis .axis-bands { position: relative; height: 14px; margin-top: 2px; }
.axis .band { position: absolute; top: 0; height: 14px; padding: 0; color: inherit; }
.axis .band::after { content: none; }
.axis .band + .band { box-shadow: inset 1px 0 0 var(--white); }
.axis .band.is-current { outline: 2px solid var(--indigo); outline-offset: 0; z-index: 1; }
.axis .leadin, .axis .sw-leadin { background: var(--swatch-leadin); }
.axis .sw-below_average { background: var(--swatch-below-average); }
.axis .sw-average { background: var(--swatch-average); }
.axis .sw-good { background: var(--swatch-good); }
.axis .sw-very_good { background: var(--swatch-very-good); }
.axis .sw-excellent { background: var(--swatch-excellent); }
.axis .axis-labels { position: relative; height: 92px; margin-top: 6px; }
.axis .blab { position: absolute; transform: translateX(-50%); text-align: center; font-size: 13px; line-height: 1.2; max-width: 84px; color: var(--indigo); font-weight: 700; }
.axis .blab small { display: block; font-weight: 400; color: var(--fine); font-size: 12px; margin-top: 1px; }
.axis .blab .blab-you { display: block; font-style: normal; font-weight: 700; color: var(--purple2); }
.axis .blab.b { top: 44px; }
.axis .blab.b::before { content: ""; position: absolute; left: 50%; top: -30px; height: 26px; border-left: 1px dashed var(--lav3); }
.axis .blab .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.axis .axis-marker { position: absolute; top: 44px; height: 56px; width: 3px; transform: translateX(-50%); background: var(--indigo); z-index: 2; }
.axis .axis-you { position: absolute; top: 0; transform: translateX(-50%); font-size: 14px; line-height: 1.2; font-weight: 700; color: var(--indigo); text-align: center; white-space: nowrap; }
.axis .axis-you small { display: block; font-weight: 700; font-size: 18px; color: var(--indigo); }
.axis .axis-you.edge-left { transform: translateX(-6px); text-align: left; }
.axis .axis-you.edge-right { transform: translateX(calc(-100% + 6px)); text-align: right; }
.axis .axis-you.band-only { top: 10px; padding: 0; background: none; }
.axis-scale-note { margin: 6px 0 0; }

/* Factor list: broker guide `.ln-fac` rows in normal flow; the marks as the report draws them. */
.score-factors { margin-top: 22px; }
.score-factors .factor-rows { list-style: none; margin: 8px 0 0; padding: 0; border-top: 0; }
.score-factors .factor-row { display: block; grid-template-columns: none; grid-template-areas: none; padding: 0; border-bottom: 0; border-top: 1px solid var(--border); }
.ln-fac { display: flex; align-items: flex-start; gap: 10px; padding: 14px 0; }
.ln-fac .factor-num { flex: none; min-width: 20px; font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 24px; color: var(--indigo); grid-area: auto; }
.ln-fac .factor-icons { flex: none; display: flex; align-items: center; min-height: 24px; grid-area: auto; justify-self: auto; }
.ln-fac .bx { display: flex; flex: none; border-radius: 4px; overflow: hidden; height: 22px; }
.ln-fac .bx i { display: block; width: 22px; height: 22px; background: var(--white); border: 1px solid var(--fine2); border-left-width: 0; position: relative; }
.ln-fac .bx i:first-child { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.ln-fac .bx i:last-child { border-radius: 0 4px 4px 0; }
.ln-fac .bx i.x { background: var(--mark-cross); border-color: var(--mark-cross); border-right: 1px solid var(--white); }
.ln-fac .bx i.x:last-child { border-right-color: var(--mark-cross); }
.ln-fac .bx i.x::before, .ln-fac .bx i.x::after { content: ""; position: absolute; left: 4px; top: 9px; width: 12px; height: 2.5px; background: var(--white); transform: rotate(45deg); }
.ln-fac .bx i.x::after { transform: rotate(-45deg); }
.ln-fac .bx i.t { background: var(--mark-tick); border-color: var(--mark-tick); border-right: 1px solid var(--white); }
.ln-fac .bx i.t:last-child { border-right-color: var(--mark-tick); }
.ln-fac .bx i.t::before { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--white); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ln-fac .tx { flex: 1 1 auto; min-width: 0; }
.ln-fac .tx .factor-name { display: block; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; grid-area: auto; }
.ln-fac .mark-note { display: block; margin-top: 4px; font-size: 16px; color: var(--body2); }
.ln-fac .factor-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 16px; color: var(--body2); }
.ln-fac .factor-link { font-size: 16px; color: var(--body2); grid-area: auto; }
.score-factors .factor-delta, .score-factors .factor-row.unreadable .factor-delta, .score-factors .factor-row.no-estimate .factor-delta { font-size: 16px; }
.pressure-total { margin-top: 12px; }

/* Phones (broker guide v1_1_1 mobile rules): band labels become a plain legend under the bar, odd ticks hide, text
   stays at 16 px or more. Under 431 px every other remaining tick hides too, so the tick labels never touch. */
@media (max-width: 600px) {
  .axis { margin-left: 12px; margin-right: 12px; }
  .axis .axis-tick.odd { display: none; }
  .axis .axis-labels { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 16px; }
  .axis .blab, .axis .blab.b, .axis .blab.c { position: static; transform: none; max-width: none; text-align: left; font-size: 16px; line-height: 1.25; }
  .axis .blab::before, .axis .blab.b::before, .axis .blab.c::before { display: none; }
  .axis .blab small { font-size: 16px; }
  .axis .axis-tick, .axis .axis-you, .axis .axis-you small { font-size: 16px; }
  .axis .axis-ticks { height: 22px; }
}
@media (max-width: 430px) {
  .axis .axis-tick.mid { display: none; }
}
@media (min-width: 601px) and (max-width: 719px) {
  .axis .axis-labels { height: 132px; }
  .axis .blab.c { top: 88px; }
  .axis .blab.c::before { top: -74px; height: 70px; }
}
@media print {
  .score-hero, .axis .axis-bar, .axis .band, .ln-fac .bx i, .ic { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Build 2 mobile rule (brand-tokens v1.0.1 "Mobile-first rule"): body text at least 16 px and tap targets at least
   44 px on every page, at every width. Raises the smaller labels, badges, tags and table text of earlier passes. The
   24-month repayment grid (.rhi) keeps its compact cells: it is a picture of the report's own grid inside its own
   horizontal scroll box, like the broker guide's report replicas. */
header.band .brand { font-size: 18px !important; }
.btn, .btn.btn-small, .axis-scale-note, .points-badge, .issue-meta, .id-group-title, .id-tag, .id-dates, .addr-flag,
.coop-badge, .ck-title, .ck-text, .lane-hint, .legend-lead, .lg-item, .lg-code, .badge, .cred-shown, .fk-title, .fk-text,
.biz-count, .role-tag, dt, dd, .q-progress-text, .q-step, .q-why, .pill, .strong-docs, .q-context-title, .coop-lead, .chip,
main table:not(.rhi table) th, main table:not(.rhi table) td { font-size: 16px; }
/* Earlier, more specific rules set some of these below 16 px; the floor wins on purpose. */
.brand, .ck-title, .lane-hint, .legend-lead, .badge, .fk-title, dt, dd.strong-docs, .addr-why, .addr-customer-note { font-size: 16px !important; }
.axis .axis-tick, .axis .blab, .axis .blab small, .axis .axis-you, .axis .blab .blab-you { font-size: 16px; }
@media (min-width: 601px) and (max-width: 719px) {
  .axis .axis-labels { height: 168px; }
  .axis .blab { max-width: 96px; }
  .axis .blab.b { top: 62px; }
  .axis .blab.c { top: 110px; }
  .axis .blab.c::before { top: -94px; height: 90px; }
}
@media (min-width: 720px) {
  .axis .axis-labels { height: 124px; }
  .axis .blab { max-width: 96px; }
  .axis .blab.b { top: 62px; }
  .axis .blab.b::before { top: -46px; height: 42px; }
}
details > summary { min-height: 44px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input:not([type]), select { min-height: 44px; }
.score-factors .factor-head { display: flex; flex-wrap: wrap; gap: 4px 18px; grid-template-columns: none; margin: 12px 0 0; padding: 0 0 6px; border: 0; font-family: var(--font-label); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; color: var(--fine); }
.score-factors .factor-head span { padding: 0; }
.ln-fac .factor-meta-label { color: var(--fine); }

/* ===== Build 2b (2026-10-11, D-165): walkthrough changes. Same look on the customer and broker views (item 43).
   Every colour is a brand variable from /brand.css; the perspective swatch is the bar colour at that score (--sw, set
   per bullet from the gradient's own stops). Text 16 px or more, tap targets 44 px or more, at every width. ===== */

/* Score key and national average block, inside the score hero (items 48 and 49). */
.score-hero .avg-hero { margin: 14px 0 4px; }
.score-hero .avg-hero-line { margin: 0; font-size: 21px; line-height: 1.35; font-weight: 700; color: var(--white); }
.score-hero .avg-hero-sub { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--lav); margin-top: 8px; }
.score-hero .score-key { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--lav3); }
.score-hero .key-lead { font-weight: 600; margin: 0 0 8px; }
.score-hero .key-row { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
@media (min-width: 720px) {
  .score-hero .avg-hero-line { font-size: 25px; }
}

/* Guide marks at the perspective scores on the axis (item 50): their own two-row strip under the bar, clear of the
   customer's marker above and the band labels below. */
.axis .axis-refs { position: relative; height: 48px; margin-top: 10px; }
.axis .axis-ref { position: absolute; top: 4px; transform: translateX(-50%); font-size: 16px; line-height: 1; font-weight: 700; color: var(--indigo); white-space: nowrap; }
.axis .axis-ref::before { content: ""; position: absolute; left: 50%; top: -14px; height: 12px; border-left: 2px solid var(--indigo); }
.axis .axis-ref.r2 { top: 28px; }
.axis .axis-ref.r2::before { top: -38px; height: 36px; border-left-style: dashed; }
.axis.has-refs .axis-ticks { margin-top: 6px; }

/* Perspective bullets (item 50): the score bold and larger on its axis colour; the text stays dark. */
.lending-context .persp-num { display: inline-block; font-size: 20px; line-height: 1.3; font-weight: 800; color: var(--indigo); background: var(--sw); padding: 1px 8px; border-radius: 3px; margin-right: 4px; }
.lending-context li { --sw: var(--grey); font-size: 16px; margin-bottom: 10px; }

/* Factor rows: marks entered by hand, and the wrong-detail flag (items 52 and 57). */
.ln-fac .mark-entered { font-weight: 600; color: var(--purple2); }
.ln-fac .factor-wrong { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--mark-cross); }

/* The check screen before the results, the held message and the operator page (items 52 and 74). */
.marks-check .mark-entry { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.marks-check .mark-entry legend, .operator .mark-entry legend { font-size: 18px; line-height: 1.45; font-weight: 700; color: var(--ink); white-space: normal; padding: 0; margin-bottom: 10px; }
.mark-inputs { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.mark-field label { display: block; font-weight: 700; color: var(--indigo); font-size: 16px; margin-bottom: 4px; }
.mark-field input { width: 7em; font-size: 18px; min-height: 44px; padding: 6px 10px; }
.mark-range, .mark-lead { margin: 6px 0 0; }
.fourth-detail { margin-top: 12px; }
.fourth-detail input[type="text"] { width: 100%; max-width: 32em; font-size: 16px; }
.marks-held .held-line { font-size: 20px; line-height: 1.45; font-weight: 700; color: var(--indigo); }
.operator .op-list { list-style: none; margin: 8px 0 18px; padding: 0; }
.operator .op-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.operator .mark-entry { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.operator h1 { font-size: 22px; overflow-wrap: anywhere; }

/* Workspace steps, Done and background save (items 53 to 55). */
.step-nav { margin-top: 14px; }
.step-now { font-size: 18px; font-weight: 700; color: var(--indigo); margin: 0; }
.step-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.step-list a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--white); color: var(--indigo); font-size: 16px; text-decoration: none; }
.step-list li.current a { background: var(--indigo); border-color: var(--indigo); color: var(--white); }
.step-list b { font-weight: 800; }
.step-move { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 26px; }
.q-done-row { margin: 18px 0 0; }
.q-done-note { margin: 0 0 6px; padding: 12px 14px; background: var(--signal-green-soft); border-left: 4px solid var(--signal-green); }
.q-done-note p { margin: 0 0 8px; color: var(--ink); font-size: 16px; }
.autosave { min-height: 26px; margin: 6px 0 0; font-size: 16px; }
.autosave-status.is-saved { color: var(--signal-green-deep); font-weight: 600; }
.autosave-status.is-failed { color: var(--mark-cross); font-weight: 700; }
.q-intro { font-size: 18px; font-weight: 600; color: var(--ink); }
.q-fix-what { margin-top: 10px; }
.q-fix-what input { width: 100%; max-width: 36em; font-size: 16px; }
.q-flagged-factors { margin: 14px 0; padding: 10px 14px; background: var(--white); border-left: 4px solid var(--mark-cross); }
.q-flagged-factors li { font-size: 16px; margin-bottom: 6px; }
.q-confirm-q { font-size: 20px; font-weight: 700; color: var(--indigo); }

/* "See example" panels (item 59). */
.strong-list .see-example { margin: 8px 0 0; }
.example-panel { margin-top: 8px; padding: 12px 14px; background: var(--white); border-left: 4px solid var(--purple2); }
.example-panel p, .example-panel li { font-size: 16px; }
.example-list { margin: 8px 0; padding-left: 22px; }
.example-list li { margin-bottom: 10px; }
.example-docs { font-weight: 600; }

/* Business and tax (items 64 to 66): grouped entity options, one per line, company names in normal weight. */
.q-grouped .q-opt-group { margin: 8px 0 4px; }
.q-grouped .q-opt-group-title { margin: 8px 0 4px; font-size: 16px; font-weight: 700; color: var(--indigo); }
.q-grouped .q-options { display: grid; grid-template-columns: 1fr; gap: 6px; }
.q-grouped .choice span { font-weight: 400; text-transform: none; }
.q-ato p, .q-urgency p { font-size: 16px; }

/* Defaults, late payments and court judgments step (item 53, step 5). */
.adverse-line { font-size: 18px; line-height: 1.5; }
.adverse-line b { color: var(--ink); }
.adverse-q { font-size: 18px; font-weight: 700; color: var(--indigo); }
button[aria-pressed="true"] { outline: 3px solid var(--purple); outline-offset: 2px; }
.operator-export { margin-top: 18px; }
/* ===== Build 2d walkthrough changes 2026-10-11 (D-168) =====
   Factor row deduction and total line (items 90 and 91, LOCKED once Jonathan approves the look); the Equifax report
   layout for enquiry and directorship lists (item 98, from the broker guide's `.rep-ln` and `.rep-pv` replicas, in
   normal flow with brand variables; each table scrolls inside its own box, never the page); the broker marks screen
   (item 86); the private workspace steps (items 93 to 107). Colours come only from brand.css. */
.ln-fac .factor-meta .factor-deduction { display: block; flex: 1 1 100%; font-family: var(--font-label); font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--signal-red); }
.ln-fac .factor-meta .factor-link { display: block; flex: 1 1 100%; }
.pressure-total.total-deduction { margin: 16px 0 6px; padding: 12px 14px; border-left: 5px solid var(--signal-red); background: var(--signal-red-soft); }
.pressure-total.total-deduction strong { display: block; font-family: var(--font-label); font-size: 24px; line-height: 1.3; font-weight: 800; color: var(--signal-red); }

.eqx { margin: 14px 0 18px; min-width: 0; }
.eqx-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 6px; background: var(--white); margin: 0 0 14px; }
.eqx-scroll:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.eqx table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.4; }
.eqx-t { min-width: 640px; }
.eqx-t.eqx-kv, .eqx-kv { min-width: 0; }
.eqx th, .eqx td { text-align: left; vertical-align: top; padding: 8px 10px; }
.eqx th.r, .eqx td.r { text-align: right; }
.eqx td.eqx-extra { min-width: 150px; }
.eqx-apply .eqx-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 14px 0 8px; padding: 0 0 8px 4px; border-bottom: 2px solid var(--mark-cross); font-size: 19px; font-weight: 700; color: var(--signal-red); }
.eqx-apply .eqx-f { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; font-size: 16px; font-weight: 400; color: var(--ink); }
.eqx-apply .eqx-t th { background: var(--lav3); color: var(--white); font-weight: 700; white-space: nowrap; }
.eqx-apply .eqx-t tr.g td { background: var(--grey); }
.eqx-apply .eqx-co { margin: 14px 0 8px 4px; font-size: 17px; font-weight: 700; color: var(--body2); overflow-wrap: anywhere; }
.eqx-apply .eqx-kv td:first-child { width: 45%; }
.eqx-personal .eqx-band { margin: 14px 0 10px; padding: 10px 14px; background: var(--indigo); color: var(--white); font-size: 17px; }
.eqx-personal .eqx-t th { background: var(--lav3); color: var(--white); font-weight: 400; }
.eqx-personal .eqx-t td { border: 1px solid var(--lav2); }
.eqx-personal .eqx-kv th { background: var(--indigo); color: var(--white); font-weight: 400; padding: 10px 14px; }
.eqx-personal .eqx-kv td { padding: 8px 14px; }
.eqx-personal .eqx-kv td:first-child { width: 42%; }
.eqx-personal .eqx-kv tr.g td { background: var(--lav); }
.eqx-kv td { overflow-wrap: anywhere; }
.eqx-t th, .eqx-t td { white-space: nowrap; }
.eqx-t td.eqx-extra, .eqx-t th.eqx-extra { white-space: normal; min-width: 170px; }

.broker-marks .mark-choices { display: grid; grid-template-columns: 1fr; gap: 4px 16px; }
@media (min-width: 720px) { .broker-marks .mark-choices { grid-template-columns: 1fr 1fr; } }
.broker-marks .q-opt-group-title { margin: 8px 0 4px; font-size: 16px; font-weight: 700; color: var(--indigo); }
.broker-marks .q-options { display: grid; grid-template-columns: 1fr; gap: 6px; }
.broker-marks .mark-lead { font-size: 16px; }
.marks-nearly .held-line { font-size: 18px; }

.q-summary { margin: 4px 0 18px; }
.q-summary h3 { font-size: 20px; color: var(--indigo); margin: 4px 0 6px; }
.q-summary-count { font-size: 17px; }
.q-recap { color: var(--body2); }
.real-examples { margin: 10px 0 0; padding: 12px 14px; background: var(--white); border: 1px solid var(--lav2); border-left: 4px solid var(--purple2); border-radius: 6px; }
.real-examples .real-examples-label { margin: 0 0 6px; font-size: 16px; font-weight: 800; letter-spacing: 0.02em; color: var(--purple2); }
.real-examples p, .real-examples li { font-size: 16px; }
.q-fix-source a { font-size: 16px; }
.q-fix-links a { display: inline-block; min-height: 44px; line-height: 44px; font-size: 16px; }
.q-speak { margin: 18px 0 6px; padding: 12px 14px; border: 1px solid var(--lav2); border-radius: 8px; background: var(--tint); }
.q-speak-lead { font-size: 18px; font-weight: 700; color: var(--indigo); margin: 0 0 8px; }
.speak-topics { margin: 6px 0 12px; padding-left: 22px; }
.speak-topics li { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.adverse-rows { list-style: none; margin: 6px 0 10px; padding: 0; }
.adverse-row { font-size: 18px; line-height: 1.45; padding: 8px 0; border-bottom: 1px solid var(--line); }
.adverse-row .adverse-impact { display: inline-block; margin-left: 6px; font-weight: 800; color: var(--signal-red); }
.pack .pack-sub { font-size: 20px; color: var(--indigo); margin: 20px 0 8px; }
.pack-target { font-weight: 700; }
.pack-docs { list-style: none; margin: 6px 0 12px; padding: 0; }
.pack-docs li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.pack-docs li p { margin: 4px 0 0; }
.pack .drafts { margin-top: 10px; }

@media print {
  .lending-context .persp-num, .axis .axis-ref { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------------------------------------------------------------- Build 2e (2026-10-12, D-169; feedback log items
   110 to 118 and 120 to 122). Brand variables only. */

/* Item 111: each enquiry flag its own fill, the same everywhere (assessment, flag key, workspace, dispute pack). */
.badge.flag-badge { color: var(--flag-text); border: 1px solid transparent; }
.badge.flag-highRisk { background: var(--flag-lowtier); }
.badge.flag-matchedAccount { background: var(--flag-matched); }
.badge.flag-duplicateHigh { background: var(--flag-duplicate); border: 2px dashed var(--flag-duplicate-line); font-weight: 700; }
.badge.flag-duplicateLow { background: var(--flag-duplicate); border: 1.5px dotted var(--flag-duplicate-line); }
.badge.flag-fallenOff { background: var(--flag-fallen); }
@media print { .badge.flag-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Item 110: every Equifax-style list (enquiries, directorships, defaults, judgments) fits the page with no sideways
   scroll bar at desktop width: the name and long text columns wrap onto several lines, the narrow fixed columns (date,
   ID source, amount, reference) keep their width, and rows stay tight. At phone width each row stacks into a small
   card with its column names, so nothing scrolls sideways. The box scroll stays only as a last resort. */
.eqx .eqx-t.eqx-wrap { min-width: 0; width: 100%; table-layout: auto; }
.eqx .eqx-t.eqx-wrap th, .eqx .eqx-t.eqx-wrap td { white-space: normal; padding: 6px 8px; line-height: 1.35; overflow-wrap: break-word; }
.eqx .eqx-t.eqx-wrap td.c-date, .eqx .eqx-t.eqx-wrap td.c-id, .eqx .eqx-t.eqx-wrap td.c-amt, .eqx .eqx-t.eqx-wrap td.c-ref { white-space: nowrap; width: 1%; }
.eqx .eqx-t.eqx-wrap th { white-space: normal; }
.eqx .eqx-t.eqx-wrap th, .eqx .eqx-t.eqx-wrap td { padding-left: 6px; padding-right: 6px; }
.eqx .eqx-t.eqx-wrap .c-text, .eqx .eqx-t.eqx-wrap .c-name, .eqx .eqx-t.eqx-wrap th { -webkit-hyphens: auto; hyphens: auto; }
.eqx .eqx-t.eqx-wrap .c-name { min-width: 6em; }
.eqx .eqx-t.eqx-wrap td.eqx-extra, .eqx .eqx-t.eqx-wrap th.eqx-extra { min-width: 6em; }
.eqx .eqx-t.eqx-wrap td.eqx-extra .badge { margin: 1px 2px 1px 0; }
@media (max-width: 699px) {
  .eqx .eqx-scroll { overflow-x: visible; border: 0; background: transparent; }
  .eqx .eqx-t.eqx-wrap, .eqx .eqx-t.eqx-wrap tbody, .eqx .eqx-t.eqx-wrap tr, .eqx .eqx-t.eqx-wrap td { display: block; width: auto; }
  .eqx .eqx-t.eqx-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .eqx .eqx-t.eqx-wrap tr { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); overflow: hidden; }
  .eqx .eqx-t.eqx-wrap tr.g td { background: transparent; }
  .eqx .eqx-t.eqx-wrap td { display: grid; grid-template-columns: minmax(7em, 38%) 1fr; gap: 8px; padding: 5px 10px; border: 0; border-bottom: 1px solid var(--grey); text-align: left; white-space: normal; }
  .eqx .eqx-t.eqx-wrap td:last-child { border-bottom: 0; }
  .eqx .eqx-t.eqx-wrap td:empty { display: none; }
  .eqx .eqx-t.eqx-wrap td::before { content: attr(data-label); font-weight: 700; color: var(--body2); }
  .eqx .eqx-t.eqx-wrap td.r { text-align: left; }
  .eqx .eqx-t.eqx-wrap td.c-name { font-weight: 700; }
  .eqx-personal .eqx-t.eqx-wrap td { border: 0; border-bottom: 1px solid var(--lav2); }
}

/* Item 112: the 24-month repayment grid laid out like the Equifax report's own grid. Two tables of 12 months: one row
   of 24 at 700 px and wider (the second table's row labels hidden, as the report prints one label column), two rows of
   12 at phone width. No sideways scroll at any width. Codes, colours and legend unchanged. */
.rhi.rhi-24 { overflow: visible; display: block; }
.rhi-24 .rhi-half { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 1px 0; margin: 0 0 8px; }
.rhi-24 .rhi-half .rhi-lab { width: 62px; position: static; padding: 0 4px 0 0; }
.rhi-24 .rhi-half .month td, .rhi-24 .rhi-half .codes td, .rhi-24 .rhi-half .fhi td { min-width: 0; padding-left: 0; padding-right: 0; overflow: hidden; }
.rhi-24 .rhi-half .year th { padding: 3px 4px; overflow: hidden; white-space: nowrap; }
.rhi-24 .rhi-half .codes td { height: 38px; }
.rhi-24 .rhi-half .month td { font-size: 14px; letter-spacing: -0.2px; }
@media (min-width: 700px) {
  .rhi.rhi-24 { display: flex; align-items: flex-start; }
  .rhi-24 .rhi-half[data-half="1"] { flex: 0 0 calc((100% + 62px) / 2); width: auto; }
  .rhi-24 .rhi-half[data-half="2"] { flex: 0 0 calc((100% - 62px) / 2); width: auto; }
  .rhi-24 .rhi-half[data-half="2"] .rhi-lab { display: none; }
}
/* At phone width each half's 12 months take the full width: the row labels move into thin label rows above their row
   (shown only here; the label column stays for screen readers but takes no width). */
.rhi-24 .rhi-half tr.rowlab { display: none; }
@media (max-width: 699px) {
  .rhi-24 .rhi-half .rhi-lab { width: 0; padding: 0; font-size: 0; line-height: 0; border: 0; overflow: hidden; background: transparent; }
  .rhi-24 .rhi-half tr.rowlab { display: table-row; }
  .rhi-24 .rhi-half tr.rowlab td { padding: 6px 0 2px; font-family: var(--font-label); font-size: 14px; font-weight: 600; color: var(--text-muted); text-align: left; }
  .rhi-24 .rhi-half .month td { font-size: 13px; letter-spacing: -0.3px; }
}
@media print { .rhi.rhi-24 { display: flex; } .rhi-24 .rhi-half[data-half="2"] .rhi-lab { display: none; } }

/* Item 113: each cooperation badge shows its level's meaning on hover or keyboard focus (desktop) and on tap (phone,
   app.js [data-popover]); the meaning opens in the flow under the badge, so it never runs off a narrow screen. */
.coop-pop { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.coop-pop .coop-hit { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: left; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.coop-pop .coop-hit .coop-badge { margin-top: 0; text-decoration: underline dotted; text-underline-offset: 3px; }
.coop-pop .coop-hit:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; }
.coop-key-card .ck-title { margin: 0 0 6px; font-size: 20px; }
.coop-key-card .coop-key { margin: 0; }

/* Items 114 and 115: business and tax in sections, each with its own summary then its questions. */
.biz-sec { margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.biz-sec:last-of-type { border-bottom: 0; }
.biz-sec > h3 { margin: 6px 0 8px; font-size: 20px; }
.biz-sec .biz-summary { margin: 0 0 12px; }
.q-cos { margin-left: 0; padding: 8px 10px; border-left: 4px solid var(--lav2); background: var(--band-soft); border-radius: 0 6px 6px 0; }

/* Item 116: the urgent ATO warning, the most prominent element of the step: red, an icon, larger text. */
.biz-flag { margin: 14px 0 10px; }
.ato-urgent { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; padding: 16px 16px 16px 14px; border: 3px solid var(--signal-red); border-left-width: 10px; border-radius: 8px; background: var(--signal-red-soft); color: var(--error-text); }
.ato-urgent .ato-icon { flex: 0 0 auto; width: 36px; height: 36px; color: var(--signal-red); }
.ato-urgent p { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--error-text); }
.ato-urgent[hidden], .biz-flag [hidden] { display: none; }
@media print { .ato-urgent { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Item 118: the phone number on the request a call step. */
.speak-phone input { width: 100%; max-width: 22em; min-height: 44px; font-size: 16px; }

/* Item 120: the photo ID area in the document checklist. */
details.photo-id { margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
details.photo-id > summary { display: flex; align-items: center; min-height: 48px; padding: 8px 14px; cursor: pointer; font-weight: 700; font-size: 18px; color: var(--indigo); }
details.photo-id > summary:focus-visible, details.pid-state > summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
details.photo-id .pid-body { padding: 0 14px 12px; }
details.pid-state { margin: 6px 0; border: 1px solid var(--lav2); border-radius: 6px; background: var(--band-soft); }
details.pid-state > summary { display: flex; align-items: center; min-height: 44px; padding: 6px 12px; cursor: pointer; font-weight: 700; }
details.pid-state[open] > summary { border-bottom: 1px solid var(--lav2); }
details.pid-state .pid-steps { margin: 8px 0; padding: 0 14px 0 34px; }
details.pid-state .pid-steps li { margin: 0 0 4px; }
details.pid-state .pid-alt, details.pid-state .pid-back { margin: 6px 12px 10px; }
.pid-shared { font-weight: 600; }
.pid-sub { margin: 12px 0 4px; font-size: 17px; }

/* Item 121: sent-email tracking on each creditor email card, and the tick in the pack list. */
.draft.is-sent { border-left: 6px solid var(--signal-green); }
.draft .draft-sent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.draft .draft-sent[hidden], .draft .draft-ask[hidden], .draft .draft-body[hidden] { display: none; }
.draft .draft-ask { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--band-soft); }
.draft .draft-ask-q { margin: 0 0 6px; font-weight: 700; font-size: 18px; }
.pack-sent { display: block; margin: 2px 0; font-weight: 700; color: var(--signal-green-deep); }
.pack-sent::before { content: "\2713 "; }
.pack-sent[hidden] { display: none; }
.pack-flags { display: block; margin-top: 2px; }

/* Item 122: the checklist window before the first "Open in my email". */
dialog.pack-check { width: min(34em, calc(100vw - 32px)); max-width: calc(100vw - 32px); padding: 18px 18px 12px; border: 2px solid var(--indigo); border-radius: 10px; background: var(--white); color: var(--ink); box-sizing: border-box; }
dialog.pack-check::backdrop { background: var(--shadow-45); }
dialog.pack-check h2 { margin: 0 0 8px; font-size: 22px; }
dialog.pack-check .chk-q { font-size: 18px; font-weight: 600; }
dialog.pack-check .chk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
dialog.pack-check [hidden] { display: none; }
dialog.pack-check .chk-close { margin: 10px 0 0; text-align: right; }
/* Item 110: the directorship detail tables (Data and Detail) wrap too, so long numbers and dates never clip. */
.eqx .eqx-t.eqx-kv th, .eqx .eqx-t.eqx-kv td, .eqx .eqx-kv td { white-space: normal; overflow-wrap: anywhere; }
/* Item 110: share the width so the assessment's own column ("What we found", "What it targets") has room for its badges
   side by side, and the cooperation badge never wraps into an oval. */
@media (min-width: 700px) {
  .eqx .eqx-t.eqx-wrap th.eqx-extra { width: 25%; }
  .eqx .eqx-t.eqx-wrap th.c-name { width: 17%; }
}
.coop-pop .coop-hit .coop-badge { border-radius: 4px; white-space: normal; }
@media (min-width: 700px) { .eqx .eqx-t.eqx-wrap th.c-text { width: 1%; } }
/* Inside a table cell the cooperation button keeps its 44 px tap area but takes less row height. */
.eqx td .coop-pop .coop-hit { margin: -7px 0; }
.eqx td .coop-pop { margin: 7px 0 0; }

/* ---------------------------------------------------------------- Build 2f (2026-10-12, D-171; feedback log items
   126, 127, 137(c), 138 to 140, 142, 148, 155, 159 to 162). Brand variables only. */

/* Items 127 and 137(c): the enquiry tables have no "Reference no." column, and "What we found" (or "What it targets")
   sits on a full-width line under each enquiry row, so badges never clip and the table fits at 1280 px with no
   sideways scroll and no scroll inside its box. At phone width the row and its line stack as one small card. */
@media (min-width: 700px) {
  .eqx .eqx-t.eqx-wrap th.c-name, .eqx .eqx-t.eqx-wrap th.c-text { width: auto; }
}
.eqx .eqx-t.eqx-wrap tr.has-sub td { border-bottom: 0; padding-bottom: 2px; }
.eqx .eqx-t.eqx-wrap tr.eqx-sub td.eqx-extra { padding-top: 2px; padding-bottom: 8px; white-space: normal; min-width: 0; width: auto; }
.eqx .eqx-t.eqx-wrap tr.eqx-sub .eqx-extra-head { font-weight: 700; color: var(--body2); margin-right: 4px; }
.eqx-personal .eqx-t.eqx-wrap tr.has-sub td { border-bottom: 0; }
.eqx-personal .eqx-t.eqx-wrap tr.eqx-sub td { border-top: 0; }
@media (max-width: 699px) {
  .eqx .eqx-t.eqx-wrap tr.has-sub { margin-bottom: 0; border-bottom: 0; border-radius: 6px 6px 0 0; }
  .eqx .eqx-t.eqx-wrap tr.eqx-sub { margin-top: 0; border-top: 0; border-radius: 0 0 6px 6px; }
  .eqx .eqx-t.eqx-wrap tr.eqx-sub td { display: block; border-top: 1px solid var(--grey); padding: 6px 10px 8px; }
  .eqx .eqx-t.eqx-wrap tr.eqx-sub td::before { content: none; }
}

/* Items 140 and 146: the credit report question at the top of the customer's page. Optional, never a blocker. */
.report-check { border-left: 5px solid var(--purple2); }
.report-check .rc-q { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--indigo); line-height: 1.35; }
.report-check .rc-answers, .report-check .rc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.report-check .rc-answers .btn[aria-pressed="true"] { background: var(--indigo); color: var(--white); border-color: var(--indigo); }
.report-check .rc-panel[hidden] { display: none; }
.report-viewer .rv-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body); font-size: 16px; line-height: 1.5; background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 12px; margin: 10px 0; }
.report-viewer .rv-pdf { width: 100%; height: 80vh; min-height: 480px; border: 1px solid var(--line); border-radius: 6px; }

/* Items 139 and 155: the review card, at the bottom of the customer's page above "Discuss my assessment". */
.private-start h2 { font-size: 22px; }

/* Item 159: an enquiry to a creditor that also has a default. */
.q-dcred { margin: 8px 0; padding: 10px 12px; border-left: 4px solid var(--flag-default-creditor); background: var(--tint); border-radius: 0 6px 6px 0; }
.q-dcred p { margin: 4px 0; }
.q-dcred .q-dcred-out { font-weight: 600; }

/* B7 and the A4-O and A5-O draft notes in the dispute pack. */
.pack-docs li .pack-next, .pack-docs li .pack-note { color: var(--body2); }
.pack-note .pack-note-label { font-weight: 700; }

/* ---- Build 2g (D-173): overlay tips, driver's licence block, reference markers and the Notes legend ---- */

/* Items 166, 169, 172: every hover or tap tip opens on the browser's top layer (tip.js), out of the page flow, so opening
   one never moves, resizes or reflows anything and no table's scroll box can clip it. */
.tip { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.tip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; margin: 0; padding: 0 2px; border: 0; background: transparent; font: inherit; color: var(--purple2); cursor: pointer; text-align: left; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tip-btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; }
.tip-i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid currentColor; font-family: var(--font-label); font-weight: 700; font-size: 16px; line-height: 1; }
.tip-pop { display: none; position: fixed; inset: auto; top: 0; left: 0; margin: 0; padding: 10px 12px; width: max-content; max-width: min(26em, calc(100vw - 16px)); box-sizing: border-box; overflow: visible; border: 1px solid var(--line); border-left: 4px solid var(--purple2); border-radius: 6px; background: var(--white); color: var(--neutral-text); box-shadow: 0 6px 24px var(--shadow-12); font-size: 16px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; z-index: 1000; }
.tip-pop.tip-open { display: block; }
.tip-pop .coop-badge { margin: 0 6px 0 0; vertical-align: baseline; }
.coop-control { font-size: 16px; font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; }
@media print { .tip { display: none !important; } }

/* Items 170 and 181: the driver's licence block under the score. Big bold numbers and icons, few words. */
.score-hero .score-key.licence { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--lav3); }
.score-key.licence .key-lead { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.score-key.licence .key-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.score-key.licence .key-avg { display: block; font-size: 20px; }
.score-key.licence .key-icons { display: inline-flex; flex: none; gap: 3px; }
.score-key.licence .lic-num { font-size: 26px; font-weight: 800; line-height: 1; }
@media (max-width: 480px) { .score-key.licence .key-row { font-size: 17px; } .score-key.licence .lic-num { font-size: 24px; } }

/* Items 173 and 182: small superscript reference markers and the Notes legend at the bottom of the page. */
sup.fn { font-size: max(0.75em, 12px); line-height: 0; font-weight: 700; margin-left: 1px; }
.notes-legend .note-line { margin: 0 0 8px; font-size: 16px; line-height: 1.45; }
.notes-legend .note-line sup.fn { font-size: 0.8em; margin-right: 4px; }

/* Item 183: the factor deduction reads "approx. -300 points" in big bold red, with its marker beside it. */

/* ---- Build 2h (2026-10-14, D-174; feedback log items 177, 184, 185, 190, 202 to 213). Brand variables only. ---- */

/* Items 177 and 184: the broker summary at the very top of the broker view. Short fact lines read aloud on the phone. */
.broker-summary { border-left: 5px solid var(--purple2); }
.broker-summary .bs-lines { list-style: none; margin: 0; padding: 0; }
.broker-summary .bs-line { margin: 0 0 8px; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.broker-summary .bs-line:last-child { margin-bottom: 0; }
.broker-summary .bs-score { font-family: var(--font-label); font-size: 22px; font-weight: 800; color: var(--indigo); }
.broker-summary .bs-cost-lead { color: var(--body2); font-size: 16px; }
.broker-summary .bs-cost { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-weight: 700; color: var(--signal-red); }
.broker-summary .bs-cost .bs-icons { display: inline-flex; gap: 3px; flex: none; }
.broker-summary .bs-cost .bs-text { flex: 1 1 14em; min-width: 0; }
.broker-summary .bs-cost .bs-meaning { font-weight: 400; color: var(--neutral-text); }
.broker-summary .bs-good { color: var(--neutral-text); }
.broker-summary .banner, .broker-summary .note { margin: 0 0 10px; }
.broker-end-line { margin: 14px 0 0; font-size: 16px; font-weight: 600; color: var(--indigo); }

/* Item 204: the total deduction line is compact, styled like the factor rows, with its marker inline at the very end. */
.pressure-total.total-deduction { margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--border); background: none; }
.pressure-total.total-deduction strong { display: inline; font-family: var(--font-label); font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--signal-red); }
.pressure-total.total-deduction sup.fn { color: var(--signal-red); }

/* Items 212 and 213: "Creditor cooperation level: [level] (i)". */
.coop-level { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; max-width: 100%; }
.coop-level .coop-control { text-decoration: none; font-weight: 600; }
.coop-level .coop-badge { margin: 0; }
.q-next { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0 0; }
.q-next .q-result, .q-next .q-coop { margin: 0; }

/* Item 203: a strong ground names itself on the card and the question flow stays. */
.q-ground { margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--purple2); background: var(--band-soft); border-radius: 0 6px 6px 0; font-weight: 600; }

/* Item 190: the creditor cooperation key is one line that opens on click; "About this assessment" is one collapsed section. */
details.coop-key-card > summary.ck-title, details.about-assessment > summary { margin: 0; font-size: 17px; }
details.about-assessment[open] > summary, details.coop-key-card[open] > summary { margin-bottom: 8px; }
details.about-assessment .flag-key { margin-top: 0; }

/* Items 209 and 212: the reason tip on a factor row with no points figure. */
.factor-reason { vertical-align: middle; }
.factor-reason .factor-reason-btn { padding-left: 0; }

/* Build 2i (item 216, D-176): the spoken opening in the broker summary. */
.broker-summary .bs-open { margin: 0 0 12px; font-size: 18px; line-height: 1.45; color: var(--body2); }

/* Build 2i (items 220 and 221, D-176): the dispute pack gate, the skip choice, the red outline on an open enquiry, and the
   refresh line. Colours come from the brand variables only. */
.pack-gate { margin: 10px 0 0; }
.pack-gate h3 { margin: 0 0 6px; }
.pack-gate-live { margin: 8px 0; font-weight: 600; }
.gate-list { list-style: none; margin: 8px 0 12px; padding: 0; }
.gate-item { margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); overflow-wrap: anywhere; }
.gate-item[data-state="unanswered"] { border-color: var(--signal-red); }
.gate-item a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.gate-item .gate-missing { display: block; color: var(--error-text); }
.gate-continue { margin: 8px 0; }
.gate-continue .muted { display: block; margin: 4px 0 0; }
.gate-item .badge { display: table; margin: 0 0 4px; }
.gate-item .gate-line { display: block; }
.gate-item .gate-go { display: inline-flex; }
.q-skip { margin: 12px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); }
.q-skip .muted { margin: 2px 0 0; }
.q-enquiry.is-missing { border: 2px solid var(--signal-red); }
.q-missing { margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--signal-red); background: var(--signal-red-soft); color: var(--error-text); font-weight: 600; border-radius: 0 8px 8px 0; }
.q-missing[hidden] { display: none; }
.refresh-line { margin: 8px 0 0; font-size: 16px; }
.refresh-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--purple2); font-weight: 600; }
.refresh-link .ic-refresh { flex: none; }
.step-move a.btn { margin: 4px 0; }

/* Build 2j (D-178, items 222 and 228): no dead ends. The way-out links on error, expired and waiting pages, the contact line,
   the Back line on the discuss form, and the Copy and Open buttons on the broker's customer link card. */
.message-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.contact-line { margin: 12px 0 0; overflow-wrap: anywhere; }
.contact-line a { display: inline-flex; align-items: center; min-height: 44px; }
.back-line { margin: 0 0 12px; }
.link-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.link-full a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* Build 2l (D-183; BUILD2L_PROMPT_v1 W2 to W8): Pile B in the workspace. The own-words box, its counter and check result,
   the ground follow-ups, the supporting documents, the reply choices and the wrap-up. Customer-opened sections may push
   the page (item 172); nothing here overlays or moves content the customer did not open. */
.pb-followups { margin: 8px 0 0; }
.pb-fu .q-fu { margin-top: 10px; }
.pb-help, .pb-hint { margin: 6px 0; }
details.pb-words { margin: 12px 0 0; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
details.pb-words > summary { display: flex; align-items: center; min-height: 48px; padding: 8px 14px; cursor: pointer; font-weight: 700; color: var(--indigo); }
details.pb-words > summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.pb-words-body { padding: 0 14px 12px; }
.pb-lead { margin: 4px 0 8px; font-weight: 700; }
.pb-help-text { display: block; margin: 0 0 6px; font-weight: 400; }
details.pb-words textarea { min-height: 120px; font-family: inherit; }
.pb-left { margin: 4px 0 0; }
.pb-check { margin: 8px 0 0; }
.pb-checking { margin: 6px 0 0; }
.pb-result .pq-line { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid var(--purple); background: var(--neutral-bg); border-radius: 0 8px 8px 0; }
.pb-result .pq-line .btn { margin: 6px 0 0; }
.pb-safety { margin: 8px 0; }
.pb-docs { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--neutral-bg); }
.pb-docs ul { margin: 4px 0 6px; padding-left: 20px; }
.pb-improving, .pb-notice { margin: 0 0 8px; }
.pb-reply { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.pb-next p { margin: 6px 0 0; }
.pb-wrap:focus { outline: 3px solid var(--purple); outline-offset: 2px; }
.pb-wrap-list { padding-left: 20px; }
.pb-wrap-list li { margin: 4px 0; }
.pb-debt { padding: 8px 12px; border-radius: 8px; background: var(--neutral-bg); }
.pb-wrap-move { display: flex; flex-wrap: wrap; gap: 8px; }
/* Lane unblock1 (item 258): the pre-send checklist is a card in the pack, never a window; open enquiries are a note in the
   pack; "Include it in my pack anyway" sits on a card whose answers suggest no request. */
.pack-check-card { margin: 14px 0; padding: 12px 14px; border: 2px solid var(--indigo); border-radius: 10px; background: var(--white); }
.pack-check-card h3 { margin: 0 0 6px; }
.pack-check-card .chk-q { font-size: 17px; font-weight: 600; }
.pack-check-card .chk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pack-check-card[hidden], .pack-check-card [hidden] { display: none; }
.pack-open-note { margin: 10px 0 14px; padding: 10px 12px; border-left: 4px solid var(--indigo); background: var(--band-soft); border-radius: 0 6px 6px 0; }
.q-include { margin: 8px 0; }
.q-include .muted { margin: 2px 0 0; }

/* Lane enq1 (2026-10-17, D-186; items 260 to 262): the streamlined credit enquiries step. Two screens, one card per
   enquiry we'll ask about, native details for examples, extra details and the not-included list (rule 6: only details
   the customer opens push the page). Touch targets at least 44px; no horizontal scroll at 390px. */
.enq-screen[hidden], .enq-card[hidden], .enq-out-row[hidden], .enq-tag[hidden], .enq-out[hidden] { display: none; }
.enq-lead { font-size: 17px; }
.enq-strong { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px; background: var(--neutral-bg); }
.enq-strong h3 { margin: 0 0 8px; }
.enq-grounds { list-style: none; margin: 0 0 12px; padding: 0; }
.enq-ground { border-top: 1px solid var(--line); padding: 8px 0; }
.enq-ground:first-child { border-top: 0; }
.enq-ground-line { font-weight: 600; margin: 0 0 4px; }
details.enq-ex > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--purple2); font-weight: 600; }
details.enq-ex > summary:focus-visible, details.enq-more > summary:focus-visible, details.enq-out > summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.enq-ex-list { margin: 4px 0 8px; padding-left: 20px; }
.enq-ex-list li { margin: 0 0 6px; }
.enq-ticks .q-help { font-weight: 600; margin-top: 4px; }
.enq-tick-list { list-style: none; margin: 0; padding: 0; }
.enq-tick-row { border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: 4px 12px; margin: 0 0 8px; }
.enq-tick { margin: 0; }
.enq-row-text { display: block; overflow-wrap: anywhere; }
.enq-meta { color: var(--neutral-muted); font-weight: 400; overflow-wrap: anywhere; }
.enq-which { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0 8px 34px; }
.enq-which label { margin: 0; }
.enq-which select { min-height: 44px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--neutral-border); border-radius: 8px; background: var(--white); }
.enq-h { margin-top: 0; font-size: 19px; }
.enq-line { margin: 0 0 8px; }
.enq-cards { margin: 12px 0; }
.enq-card { border: 1px solid var(--line); border-left: 5px solid var(--purple2); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 12px; background: var(--white); }
.enq-name { margin: 0 0 2px; font-size: 17px; overflow-wrap: anywhere; }
.enq-card .enq-meta { margin: 0 0 8px; }
.enq-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.enq-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--band-soft); color: var(--purple2); font-size: 14px; font-weight: 600; line-height: 1.5; }
.enq-card fieldset.q { margin: 0 0 10px; }
details.enq-more { border: 1px solid var(--line); border-radius: 8px; }
details.enq-more > summary { display: flex; align-items: center; min-height: 44px; padding: 6px 12px; cursor: pointer; font-weight: 600; color: var(--indigo); }
.enq-more-body { padding: 0 12px 12px; }
.pb-words-plain { margin: 12px 0 0; }
.pb-words-plain .pb-words-title { font-weight: 700; color: var(--indigo); margin: 0 0 6px; }
.pb-words-plain .pb-words-body { padding: 0; }
.pb-words-plain textarea { min-height: 120px; font-family: inherit; }
details.enq-out { border: 1px solid var(--line); border-radius: var(--radius); margin: 16px 0; background: var(--white); }
details.enq-out > summary { display: flex; align-items: center; min-height: 48px; padding: 8px 14px; cursor: pointer; font-weight: 700; }
.enq-out-body { padding: 0 14px 12px; }
.enq-out-list { list-style: none; margin: 0; padding: 0; }
.enq-out-row { border-top: 1px solid var(--line); padding: 8px 0; }
.enq-out-row .enq-row-text { margin: 0; }
.enq-reason { margin: 2px 0 4px; color: var(--neutral-muted); }
.enq-notrec { margin: 0; }
.enq-screen > .step-move { margin-top: 16px; }
.pb-next-dr { font-weight: 600; }

/* Lane 2m [Opus 5.5] (item 265): "Anything we missed?" box, both views. Plain text, no overlay, nothing shifts. */
.missed-box textarea { min-height: 96px; font-family: inherit; }
.missed-box label { display: block; font-weight: 600; margin: 8px 0 4px; }
.missed-box .missed-thanks { font-weight: 600; color: var(--neutral-text); }

/* Lane 2m [Opus 5.5] (item 277): the pack on a phone. One row per lender, native details, 44 px targets. */
.pack-first { margin-top: 0; }
.pack-need summary, .pack-list summary, .pack-docs-wrap summary, .drafts details.disclaimer summary, .lr-manual summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.need-list { list-style: none; padding: 0; margin: 8px 0; }
.need-list li { margin: 8px 0; }
.need-tick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.need-tick input { width: 22px; height: 22px; }
.pack-progress { font-weight: 600; }
.lender-row { padding: 12px 0; border-top: 1px solid var(--neutral-border); }
.lender-row .lr-name { margin: 0 0 4px; }
.lender-row .lr-count { margin: 0 0 8px; }
.lr-send > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.lr-send > summary::-webkit-details-marker { display: none; }
.lr-remind { margin-top: 8px; padding: 12px; border: 1px solid var(--neutral-border); border-radius: 8px; }