/* Quranic Finance - public transparency pages. */

/* ==== Qard Hasan design system: the tokens ================================
   The same block, byte for byte, heads qh-public.css, qh-portal.css and
   qh-admin.css (decision DS1): each page loads one of the three, so none of
   them waits on another file, and check-consistent.php fails if they differ.
   White pages and cards; green and gold from the logo; near-white greys with
   a faint green cast; the heritage colours carry meaning only (D1) - saffron
   wants attention, terracotta has cost the fund money, lapis informs. One
   family, Plus Jakarta Sans, for every Latin letter and figure (27 KB, kept a
   year); Bangla in the font chosen in Settings, bundled too (WK154, WK157). No pattern, no gradient.
   Settings → Appearance may override any of these (QH_Appearance). */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( ../fonts/plus-jakarta-sans.woff2 ) format( "woff2" );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-200B, U+200E-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Bangla in the font chosen in Settings → Appearance (WK154, WK157): the
   device's own font broke joined letters. All three are declared; a browser
   fetches only the one --qh-bn names. Jakarta leaves the joiners U+200C-200D
   to them. */
@font-face {
	font-family: "Noto Sans Bengali";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( ../fonts/noto-sans-bengali.woff2 ) format( "woff2" );
	unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}
@font-face {
	font-family: "Noto Serif Bengali";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( ../fonts/noto-serif-bengali.woff2 ) format( "woff2" );
	unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}
@font-face {
	font-family: "Tiro Bangla";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( ../fonts/tiro-bangla.woff2 ) format( "woff2" );
	unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

:root {
	--qh-green-50: #eef5f1;
	--qh-green-100: #d5e7dd;
	--qh-green-200: #a9cdb9;
	--qh-green-300: #74ad90;
	--qh-green-400: #3f8a68;
	--qh-green-500: #1f6b4e;
	--qh-green-600: #0f4d3a;
	--qh-green-700: #0b3d2e;
	--qh-green-800: #082e23;
	--qh-gold-50: #fbf6ec;
	--qh-gold-100: #f5e9cf;
	--qh-gold-200: #ebd5a6;
	--qh-gold-300: #e0c185;
	--qh-gold-400: #d4ae68;
	--qh-gold-500: #bf9550;
	--qh-gold-600: #9e7a3e;
	--qh-gold-700: #7a5e30;
	--qh-page: #ffffff;
	--qh-on-page: #14241d;
	--qh-on-page-muted: #48514d;
	--qh-on-page-link: #0f4d3a;
	--qh-accent-on-brand: #d4ae68;
	--qh-paper-pad: 0px;
	--qh-ivory: #ffffff;
	--qh-on-brand: #ffffff;
	--qh-sand-50: #f7f9f8;
	--qh-sand-100: #f0f3f1;
	--qh-sand-200: #e3e8e5;
	--qh-sand-300: #cdd4d0;
	--qh-sand-400: #9aa39e;
	--qh-sand-500: #66706b;
	--qh-sand-600: #48514d;
	--qh-sand-700: #2f3632;
	--qh-ink-900: #14241d;
	--qh-lapis-50: #eaf0f7;
	--qh-lapis-500: #2b5a8c;
	--qh-terracotta-50: #f8ece8;
	--qh-terracotta-200: #e6bdb4;
	--qh-terracotta-400: #c4581c;
	--qh-terracotta-500: #a8432f;
	--qh-terracotta-700: #7c2f20;
	--qh-saffron-50: #fbf1e0;
	--qh-saffron-300: #e9b949;
	--qh-saffron-400: #d9822b;
	--qh-saffron-500: #b87a1e;
	--qh-saffron-700: #855510;

	--qh-bn: "Noto Sans Bengali";
	--qh-font: "Plus Jakarta Sans", var(--qh-bn), system-ui, -apple-system, "Segoe UI", Roboto, "Kohinoor Bangla", "Nirmala UI", "Helvetica Neue", Arial, sans-serif;
	--qh-heading-weight: 700;
	--qh-text-scale: 100%;

	--qh-r-control: 12px;
	--qh-r-tile: 16px;
	--qh-r-card: 24px;
	--qh-shadow-xs: 0 1px 1px rgba( 15, 77, 58, 0.05 );
	--qh-shadow-sm: 0 1px 2px rgba( 15, 77, 58, 0.06 ), 0 1px 3px rgba( 15, 77, 58, 0.05 );
	--qh-shadow-md: 0 6px 16px -4px rgba( 15, 77, 58, 0.12 ), 0 2px 4px rgba( 15, 77, 58, 0.04 );
	--qh-shadow-lg: 0 20px 44px -12px rgba( 15, 77, 58, 0.22 ), 0 4px 10px rgba( 15, 77, 58, 0.05 );
	--qh-shadow-inset: inset 0 1px 2px rgba( 20, 36, 29, 0.06 );
	--qh-ring: 0 0 0 3px rgba( 212, 174, 104, 0.45 );
	--qh-ease: cubic-bezier( 0.2, 0.7, 0.2, 1 );
}
/* ==== end of the tokens =================================================== */


.qh-report {
	--qh-ink: var(--qh-ink-900);
	--qh-muted: var(--qh-sand-600);
	--qh-rule: var(--qh-sand-200);
	--qh-bad: var(--qh-terracotta-500);
	/* The green a button is painted with. */
	--qh-accent: var(--qh-green-600);

	color: var(--qh-ink);
	max-width: 60rem;
	margin: 0 auto;
	line-height: 1.55;
}

.qh-report h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 2rem 0 0.25rem;
}

/* The letterhead (BR1). */
.qh-brand {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0 1.25rem;
	padding: 0 0 0.875rem;
	border-bottom: 1px solid var(--qh-sand-200);
}

.qh-brand::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 3.5rem;
	height: 2px;
	background: var(--qh-gold-500);
}

.qh-brand-mark {
	flex: none;
	display: block;
	width: 2.75rem;
	height: 2.75rem;
}

.qh-brand-text {
	min-width: 0;
}

.qh-brand p {
	margin: 0;
}

.qh-brand-name {
	font: 600 1.25rem/1.25 var(--qh-font);
	color: var(--qh-green-600);
	letter-spacing: 0.01em;
}

.qh-brand-sep {
	margin: 0 0.15em;
	color: var(--qh-gold-500);
	font-weight: 400;
}

.qh-brand-sub {
	font-weight: 400;
	color: var(--qh-sand-700);
}

.qh-brand .qh-brand-by {
	margin-top: 0.125rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--qh-gold-700);
}

.qh-report--head {
	margin-bottom: 0.5rem;
}

.qh-report ~ .qh-report .qh-brand {
	display: none;
}

.qh-report .qh-brand + h2 {
	margin-top: 0;
	font-family: var(--qh-font);
	font-size: 1.5rem;
}

@media (max-width: 480px) {
	.qh-brand-sep {
		display: none;
	}

	.qh-brand-sub {
		display: block;
	}
}

.qh-report .qh-report-subtitle {
	color: var(--qh-muted);
	font-size: 0.875rem;
	margin: 0 0 1.25rem;
}

.qh-report table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.qh-report th,
.qh-report td {
	text-align: left;
	padding: 0.5rem 0.625rem;
	border-bottom: 1px solid var(--qh-rule);
}

.qh-report thead th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qh-muted);
	border-bottom: 1px solid var(--qh-ink);
}

/* Money: tabular numerals, right aligned, negatives in brackets. */
.qh-report .qh-money,
.qh-report .qh-col-money {
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "tnum" 1;
	text-align: right;
	white-space: nowrap;
}

.qh-report .qh-money--negative {
	color: var(--qh-bad);
}

.qh-report .qh-total-row td,
.qh-report .qh-total-row th {
	font-weight: 600;
	border-top: 1px solid var(--qh-ink);
	border-bottom: 2px double var(--qh-ink);
}

/* Shown loudly if a statement ever fails to balance. */
.qh-report .qh-imbalance {
	background: var(--qh-terracotta-50);
	border: 1px solid var(--qh-bad);
	color: var(--qh-bad);
	font-weight: 600;
	padding: 0.75rem 1rem;
	margin: 1rem 0;
}

.qh-report .qh-updated {
	color: var(--qh-muted);
	font-size: 0.8125rem;
	margin-top: 1.5rem;
}

/* Forms, filled in on a phone: */

.qh-form {
	--qh-ink: var(--qh-ink-900);
	--qh-muted: var(--qh-sand-600);
	--qh-rule: var(--qh-sand-300);
	--qh-accent: var(--qh-green-600);
	--qh-bad: var(--qh-terracotta-500);

	max-width: 38rem;
	margin: 0 auto;
	color: var(--qh-ink);
	line-height: 1.55;
}

.qh-form-intro {
	background: var(--qh-green-50);
	border-left: 3px solid var(--qh-accent);
	padding: 0.875rem 1rem;
	margin: 0 0 1.5rem;
}

.qh-field {
	margin: 0 0 1.375rem;
}

.qh-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.375rem;
}

.qh-form input[type="text"],
.qh-form input[type="tel"],
.qh-form input[type="email"],
.qh-form input[type="url"],
.qh-form input[type="date"],
.qh-form input[type="number"],
.qh-form input[type="file"],
.qh-form select,
.qh-form textarea {
	width: 100%;
	box-sizing: border-box;
	font-size: 1rem; /* Never below 16px. See the note above. */
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--qh-rule);
	border-radius: 6px;
	background: var(--qh-ivory);
	color: inherit;
}

.qh-form input:focus,
.qh-form select:focus,
.qh-form textarea:focus {
	outline: 2px solid var(--qh-accent);
	outline-offset: 1px;
	border-color: var(--qh-accent);
}

.qh-help {
	display: block;
	font-size: 0.875rem;
	color: var(--qh-muted);
	margin-top: 0.375rem;
}

.qh-req {
	color: var(--qh-bad);
}

/* Two fields side by side on a wider screen, stacked on a phone. */
.qh-field--split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media ( min-width: 30rem ) {
	.qh-field--split {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
}

.qh-amount-wrap {
	display: flex;
	align-items: stretch;
}

.qh-currency {
	display: flex;
	align-items: center;
	padding: 0 0.75rem;
	border: 1px solid var(--qh-rule);
	border-right: 0;
	border-radius: 6px 0 0 6px;
	background: var(--qh-sand-50);
	color: var(--qh-muted);
}

.qh-amount-wrap input {
	border-radius: 0 6px 6px 0 !important;
	font-variant-numeric: lining-nums tabular-nums;
	font-size: 1.125rem !important;
}

/* The hook qh-amount-input.js looks for. */
.qh-wrap {
	position: relative;
}

/* a note that matters Not a warning and not decoration: */
.qh-note {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--qh-accent, var(--qh-green-600));
	border-radius: 0 6px 6px 0;
	background: var(--qh-green-50);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.qh-note p {
	margin: 0 0 0.6rem;
}

.qh-note p:last-child {
	margin-bottom: 0;
}

.qh-note--strong strong {
	font-weight: 600;
}

.qh-note ol {
	margin: 0 0 0.6rem;
	padding-left: 1.25rem;
}

.qh-note li {
	margin-bottom: 0.2rem;
}

/* What somebody might actually say, so the four points above are a task and not a quiz. */
.qh-example {
	font-style: italic;
	color: var(--qh-sand-700);
}

/* The address already on file, shown so it can be confirmed rather than
   retyped. */
.qh-address-onfile {
	margin: 0 0 0.75rem;
	padding: 0.6rem 0.8rem;
	border-radius: 6px;
	background: var(--qh-sand-50);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* the choices: the rest of their shape is under "the four kinds of contribution" */

.qh-choice:focus-within {
	border-color: var(--qh-accent);
	outline: 2px solid var(--qh-accent);
	outline-offset: 1px;
}

.qh-field--check label {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	font-weight: 400;
}

/* ------------------------------------------------------------ the steps */

.qh-step {
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem;
}

.qh-step legend {
	font-size: 1.125rem;
	font-weight: 700;
	padding: 0;
	margin-bottom: 1rem;
}

.qh-step-progress {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	font-size: 0.8125rem;
	color: var(--qh-muted);
}

.qh-step-progress li {
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	background: var(--qh-sand-50);
}

.qh-step-progress .is-current {
	background: var(--qh-accent);
	color: var(--qh-on-brand);
	font-weight: 600;
}

.qh-step-progress .is-done {
	background: var(--qh-sand-200);
	color: var(--qh-accent);
}

.qh-step-nav {
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
}

.qh-hidden {
	display: none;
}

.qh-subgroup {
	border: 1px solid var(--qh-rule);
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 1.25rem;
}

/* The heading of a block, and it has to read as one. */
.qh-subgroup h4 {
	margin: 0 0 0.875rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--qh-rule);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--qh-ink);
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------- the buttons */

.qh-button {
	display: inline-block;
	font-size: 1.0625rem;
	font-weight: 600;
	padding: 0.8125rem 1.75rem;
	min-height: 3rem; /* A comfortable thumb target. */
	border: 0;
	border-radius: 6px;
	background: var(--qh-accent);
	color: var(--qh-on-brand);
	cursor: pointer;
}

.qh-button:hover,
.qh-button:focus {
	background: var(--qh-green-700);
}

.qh-button--quiet {
	background: var(--qh-sand-200);
	color: var(--qh-ink);
}

.qh-button--quiet:hover,
.qh-button--quiet:focus {
	background: var(--qh-sand-200);
}

.qh-submit {
	margin: 1.5rem 0 0;
}

/* ------------------------------------------------- what happened, and why */

.qh-form-error {
	border-left: 3px solid var(--qh-bad);
	background: var(--qh-terracotta-50);
	padding: 0.875rem 1rem;
	margin: 0 0 1.5rem;
}

.qh-form-error p {
	margin: 0;
	color: var(--qh-terracotta-700);
}

.qh-form-success {
	border: 1px solid var(--qh-accent);
	border-radius: 8px;
	background: var(--qh-green-50);
	padding: 1.5rem;
	text-align: center;
}

.qh-form-success h3 {
	margin: 0 0 0.75rem;
}

.qh-reference {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	font-variant-numeric: lining-nums tabular-nums;
	margin: 0 0 0.75rem;
	color: var(--qh-accent);
}

.qh-privacy {
	font-size: 0.875rem;
	color: var(--qh-muted);
	border-top: 1px solid var(--qh-rule);
	padding-top: 0.875rem;
	margin-top: 1.5rem;
}

.qh-report .qh-group th {
	padding-top: 1.25rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qh-muted);
}

.qh-report .qh-subtotal th,
.qh-report .qh-subtotal td {
	font-weight: 600;
	border-top: 1px solid var(--qh-rule);
}

.qh-report .qh-report-note {
	font-size: 0.875rem;
	color: var(--qh-muted);
	margin-top: 1rem;
}

/* figures One live number, dropped into a page somebody designed themselves. */

.qh-figure {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.15;
}

.qh-figure-value {
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: 700;
	font-size: inherit;
}

.qh-figure-label {
	font-size: 0.5em;
	font-weight: 400;
	letter-spacing: 0.04em;
	opacity: 0.75;
	margin-top: 0.35em;
}

.qh-figure-error {
	display: inline-block;
	background: var(--qh-terracotta-50);
	border: 1px solid var(--qh-terracotta-500);
	color: var(--qh-terracotta-700);
	padding: 0.25rem 0.5rem;
	font-size: 0.8125rem;
}

/* ---------------------------------------------------------- the search */

.qh-public-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	align-items: center;
	margin: 0 0 1.25rem;
}

/* Each control is a column - its name above its box - and it may shrink.
   A flex item will not go below the intrinsic width of what is inside it
   unless it is told it may, and an input[type="date"] carries a wide one
   of its own on iOS. That is how the From box ran off the side of the
   cashbook on a phone and the Show button landed on top of the To box
   (I32). */
.qh-public-filters label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1 10rem;
	min-width: 0;
}

.qh-public-filters label > span {
	font-size: 0.8125rem;
	color: var(--qh-muted);
}

.qh-public-filters input,
.qh-public-filters select {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	font-size: 1rem;
	padding: 0.6875rem 0.875rem;
	border: 1px solid var(--qh-sand-300);
	border-radius: 6px;
	background: var(--qh-ivory);
}

/* Safari sizes a date field from its own idea of the date and ignores the
   width unless the native appearance goes first. */
.qh-public-filters input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	min-height: 2.75rem;
}

/* The button keeps its own size and sits on the line of the boxes. */
.qh-public-filters .qh-button {
	flex: 0 0 auto;
	align-self: flex-end;
}

.qh-clear {
	font-size: 0.875rem;
}

/* ------------------------------------------------------- the list table */

.qh-borrower-table,
.qh-schedule-table,
.qh-txn-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.qh-borrower-table th,
.qh-borrower-table td,
.qh-schedule-table th,
.qh-schedule-table td,
.qh-txn-table th,
.qh-txn-table td {
	text-align: left;
	padding: 0.6875rem 0.75rem;
	border-bottom: 1px solid var(--qh-sand-200);
	vertical-align: top;
}

.qh-borrower-table thead th,
.qh-schedule-table thead th,
.qh-txn-table thead th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qh-sand-600);
	background: var(--qh-sand-50);
	white-space: nowrap;
}

.qh-borrower-link {
	display: block;
	text-decoration: none;
}

.qh-borrower-code {
	display: block;
	font-size: 0.75rem;
	color: var(--qh-sand-600);
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-borrower-name {
	display: block;
	font-weight: 600;
}

.qh-col-action {
	text-align: right;
	white-space: nowrap;
}

.qh-chip {
	display: inline-block;
	font-size: 0.8125rem;
	padding: 0.1875rem 0.625rem;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.14 );
	border: 1px solid rgba( 255, 255, 255, 0.22 );
}

/* Chips outside the dark header need their own colours. */
.qh-txn-table .qh-chip {
	background: var(--qh-green-50);
	border-color: var(--qh-sand-200);
	color: var(--qh-green-600);
}

.qh-chip--fund {
	background: var(--qh-gold-50) !important;
	border-color: var(--qh-gold-200) !important;
	color: var(--qh-saffron-700) !important;
}

.qh-loan-code {
	font-weight: 700;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------- instalment status */

.qh-status-tag {
	display: inline-block;
	font-size: 0.8125rem;
	padding: 0.125rem 0.5rem;
	border-radius: 4px;
	background: var(--qh-sand-200);
	white-space: nowrap;
}

.qh-status-paid .qh-status-tag {
	background: var(--qh-sand-200);
	color: var(--qh-green-600);
}

.qh-status-overdue .qh-status-tag {
	background: var(--qh-terracotta-50);
	color: var(--qh-terracotta-700);
}

.qh-status-written_off .qh-status-tag {
	background: var(--qh-gold-50);
	color: var(--qh-saffron-700);
}

/* partly hidden values A dotted underline says "there is something to know about this" witho… */

.qh-masked {
	font-variant-numeric: lining-nums tabular-nums;
	cursor: help;
	white-space: nowrap;
}

/* Borrower registration (0.11.0) The rules box, the signature, and the block that confirms w… */

.qh-form .qh-rules-box {
	max-height: 22rem;
	overflow-y: auto;
	padding: 1rem 1.25rem;
	margin: 0 0 1.25rem;
	border: 1px solid var(--qh-rule, var(--qh-sand-200));
	border-radius: 6px;
	background: var(--qh-sand-50);
}

.qh-form .qh-rules-box ol {
	margin: 0;
	padding-left: 1.25rem;
}

.qh-form .qh-rules-box li {
	margin-bottom: 0.75rem;
	line-height: 1.55;
}

.qh-form .qh-rules-box li:last-child {
	margin-bottom: 0;
}

/* Repaying is a trust (WK82): do's and don'ts, and what follows non-repayment. */
.qh-repay{margin:0 0 1.5rem}
.qh-form .qh-repay-title{margin:1.5rem 0 .5rem;font-size:1.0625rem;font-weight:var(--qh-heading-weight);color:var(--qh-ink)}
.qh-repay>.qh-repay-title:first-child{margin-top:0}
.qh-repay-lead{margin:0 0 1rem;color:var(--qh-muted)}
.qh-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min( 15rem, 100% ), 1fr));gap:.75rem}
.qh-dos-col{padding:.875rem 1rem;border-radius:var(--qh-r-tile);border:1px solid var(--qh-gold-200);background:var(--qh-green-50);color:var(--qh-ink-900)}
.qh-dos-col h4{display:flex;align-items:center;gap:.4rem;margin:0 0 .5rem;font-size:.9375rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--qh-green-700)}
.qh-dos-col ul{list-style:none;margin:0;padding:0}
.qh-dos-col li{display:flex;gap:.5rem;align-items:flex-start;margin:0 0 .5rem;font-size:.9375rem;line-height:1.5}
.qh-dos-col svg{flex:none;margin-top:.1rem}
.qh-dos-col--do{border-color:var(--qh-green-200)}
.qh-dos-col--do svg{color:var(--qh-green-600)}
.qh-dos-col--dont{background:var(--qh-terracotta-50);border-color:var(--qh-terracotta-200)}
.qh-dos-col--dont h4,.qh-dos-col--dont svg{color:var(--qh-terracotta-700)}
.qh-dos-col--world{background:var(--qh-saffron-50)}
.qh-dos-col--world h4{color:var(--qh-saffron-700)}
.qh-dos-col--world li::before,.qh-dos-col--faith li::before{content:"";flex:none;width:.45rem;height:.45rem;margin-top:.5rem;border-radius:50%;background:var(--qh-gold-500)}
.qh-dos-col cite{display:block;font-size:.8125rem;font-style:normal;color:var(--qh-sand-600)}
.qh-repay-note{margin:.75rem 0 0;padding-top:.6rem;border-top:1px solid var(--qh-gold-200);font-size:.875rem;font-weight:600;color:var(--qh-green-700)}
.qh-privacy--line{margin:0 0 1.25rem;padding-top:0;border-top:0}

/* The acceptance tick is the most important control on the form, so it does
   not look like the others. */
.qh-form .qh-check--strong {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	padding: 0.875rem 1rem;
	border: 2px solid var(--qh-ink-900);
	border-radius: 6px;
	font-weight: 600;
	background: var(--qh-ivory);
}

.qh-form .qh-check--strong input {
	margin-top: 0.2rem;
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 auto;
}

.qh-form .qh-radio-group {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
}

/* A block of fields inside a step - the reference, which is a group of three answers about o… */
.qh-form .qh-subgroup {
	margin: 1.5rem 0 1.25rem;
	padding: 1rem 1rem 0.25rem;
	overflow: hidden;
}

/* A legend that wraps to two lines sits across the top border and looks broken, which on a p… */
.qh-form .qh-subgroup legend {
	float: left;
	width: 100%;
	font-weight: 600;
	padding: 0;
	margin-bottom: 0.5rem;
	/* The qualifier after the heading wraps on a phone. */
	line-height: 1.45;
}

.qh-form .qh-subgroup legend + * { clear: both; }

.qh-form .qh-legend-help {
	margin: 0 0 1rem;
}

.qh-form .qh-radio-group legend {
	font-weight: 600;
	margin-bottom: 0.35rem;
	padding: 0;
}

.qh-form .qh-radio-group .qh-check {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	margin: 0 1rem 0.35rem 0;
}

/* Who the form has decided you are, at the top of a loan application. */
.qh-form .qh-identified {
	padding: 0.875rem 1.125rem;
	margin: 0 0 1.25rem;
	border-left: 3px solid var(--qh-green-500);
	border-radius: 0 6px 6px 0;
	background: var(--qh-green-50);
}

.qh-form .qh-identified-name {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
}

.qh-form .qh-identified-meta {
	margin: 0.125rem 0 0;
	font-size: 0.875rem;
	color: var(--qh-sand-700);
}

.qh-form .qh-identified-note {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--qh-sand-700);
}

.qh-form .qh-identify-form fieldset {
	border: 1px solid var(--qh-rule, var(--qh-sand-200));
	border-radius: 6px;
	padding: 1.25rem;
	margin: 0 0 1.5rem;
}

/* Borrower standing (0.13.0) * Restrained on purpose. */

.qh-standing {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 3px;
	border: 1px solid var(--qh-rule, var(--qh-sand-200));
	background: var(--qh-sand-50);
	color: var(--qh-sand-700);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

/* In a list, a standing with its figures may take two lines rather than push
   the table past a phone's width (WK104). */
.qh-borrower-table .qh-standing {
	white-space: normal;
}

.qh-standing--good { border-color: var(--qh-green-100); background: var(--qh-green-50); color: var(--qh-green-500); }
.qh-standing--warn { border-color: var(--qh-gold-200); background: var(--qh-gold-50); color: var(--qh-saffron-700); }
.qh-standing--bad  { border-color: var(--qh-terracotta-200); background: var(--qh-terracotta-50); color: var(--qh-terracotta-700); }

.qh-report .qh-standing-why {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	color: var(--qh-muted, var(--qh-sand-600));
	white-space: normal;
	max-width: 34rem;
}

/* A field that has been filled in wrongly (0.15.0) Said quietly and next to the field, not i… */

.qh-form .qh-field--bad input,
.qh-form .qh-field--bad select,
.qh-form .qh-field--bad textarea {
	border-color: var(--qh-terracotta-500);
	box-shadow: 0 0 0 1px var(--qh-terracotta-500);
}

.qh-form .qh-field-error {
	display: block;
	margin-top: 0.35rem;
	color: var(--qh-terracotta-500);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

/* eight names nothing styled Found on 11 September 2026 by comparing the classes these files… */

/* A wide table must scroll inside its own box, not push the page sideways. */
.qh-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* The report page template: */
.qh-report-page {
	max-width: 60rem;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
}

.qh-report-title {
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 1.25rem;
}

/* The two multi-step forms - registration and loan application - and the single-step donation form. */
.qh-steps-form,
.qh-donation-form {
	max-width: 40rem;
}

/* The earmark question appears only once "for a particular person" is chosen, so it needs to… */
.qh-earmark-field {
	border-left: 3px solid var(--qh-rule, var(--qh-sand-200));
	padding-left: 0.875rem;
}

/* A photograph is chosen with the phone's camera, so the control is bigger than a text field… */
.qh-field--photo input[type="file"] {
	display: block;
	width: 100%;
	padding: 0.5rem 0;
	font-size: 0.9375rem;
}

/* Where the privacy note is the substance of a step rather than a footnote to one, it stops… */
.qh-privacy--block {
	border: 1px solid var(--qh-rule, var(--qh-sand-200));
	border-top: 1px solid var(--qh-rule, var(--qh-sand-200));
	border-radius: 6px;
	background: var(--qh-sand-50);
	padding: 0.875rem 1rem;
	margin-top: 1rem;
	color: inherit;
}

.qh-privacy--block p {
	margin: 0 0 0.5rem;
}

.qh-privacy--block p:last-child {
	margin-bottom: 0;
}

/* The selfie video, recorded in the page (WK69). */
.qh-recorder-field {
	margin-bottom: 1.25rem;
}

.qh-recorder {
	border: 1px solid var(--qh-rule, var(--qh-sand-200));
	border-radius: 6px;
	padding: 0.75rem;
	margin: 0.25rem 0 0.75rem;
}

.qh-recorder-view {
	display: block;
	width: 100%;
	max-width: 22rem;
	max-height: 60vh;
	margin: 0 auto 0.5rem;
	border-radius: 6px;
	background: var(--qh-ink-900);
}

.qh-recorder-status {
	margin: 0 0 0.5rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.qh-recorder-status:empty {
	display: none;
}

.qh-recorder-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.qh-recorder-buttons .qh-button[hidden] {
	display: none;
}

/* Loan application, first step: the way to register is a button (7 October 2026). */
.qh-register-first a.qh-button {
	color: var(--qh-on-brand);
	text-decoration: none;
	margin: 0.25rem 0;
}

/* a contributor, shown as a person * The mirror of a borrower's page. */

.qh-form-section {
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 2rem 0 0.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--qh-rule, var(--qh-sand-200));
}

.qh-form .qh-form-section:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.qh-pay-how p,
.qh-pay-how ul,
.qh-pay-how ol {
	margin: 0 0 0.5rem;
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-pay-how > :last-child {
	margin-bottom: 0;
}

.qh-form-note {
	background: var(--qh-sand-50);
	border-left: 3px solid var(--qh-green-600);
	border-radius: 0 6px 6px 0;
	padding: 0.75rem 1rem;
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* In the list: a small face beside the name. */
.qh-donor-cell {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.qh-donor-thumb {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

/* On their own page. */
.qh-donor-profile {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin: 0 0 1.5rem;
}

.qh-donor-photo {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.qh-donor-who {
	min-width: 0;
}

.qh-donor-code {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	color: var(--qh-muted, var(--qh-sand-600));
	font-variant-numeric: lining-nums tabular-nums;
}

/* Their words, marked as theirs so the fund's voice is never mistaken for
   the giver's. */
.qh-donor-quote {
	margin: 0.75rem 0 0;
	padding: 0 0 0 0.875rem;
	border-left: 3px solid var(--qh-green-600);
	font-size: 1rem;
	line-height: 1.55;
	font-style: italic;
}

.qh-report-back {
	margin: 0 0 1rem;
	font-size: 0.875rem;
}

@media ( max-width: 560px ) {
	.qh-donor-profile { flex-direction: column; gap: 0.875rem; }
}

/* The forms, made calmer (client, 12 September): */

.qh-form {
	--qh-radius-field: 12px;
	--qh-green: #a3e87a;
	--qh-green-ink: var(--qh-green-600);
}

.qh-field {
	margin: 0 0 1.25rem;
}

.qh-field label {
	font-size: 0.9375rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--qh-ink);
}

.qh-form input[type="text"],
.qh-form input[type="tel"],
.qh-form input[type="email"],
.qh-form input[type="url"],
.qh-form input[type="date"],
.qh-form input[type="number"],
.qh-form select {
	padding: 0.9375rem 1.25rem;
	border-radius: var(--qh-radius-field);
	border-color: var(--qh-sand-200);
}

/* A textarea cannot be a pill - the corners would eat the first line - so it takes the same… */
.qh-form textarea {
	padding: 0.9375rem 1.25rem;
	border-radius: var(--qh-radius-field);
	border-color: var(--qh-sand-200);
	resize: vertical;
}

.qh-form input::placeholder,
.qh-form textarea::placeholder {
	color: var(--qh-sand-500);
}

/* The file input is the one control browsers style themselves, so it is given the same box a… */
.qh-form input[type="file"] {
	padding: 0.75rem 1rem;
	border-radius: var(--qh-radius-field);
	border-color: var(--qh-sand-200);
	background: var(--qh-ivory);
	font-size: 0.9375rem;
}

/* ---- one strong button, the width of everything above it --------------- */

.qh-submit {
	margin: 1.75rem 0 0;
}

.qh-form .qh-button {
	display: block;
	width: 100%;
	padding: 1rem 1.5rem;
	border-radius: var(--qh-radius-field);
	background: var(--qh-green);
	color: var(--qh-green-ink);
	font-size: 1.0625rem;
	font-weight: 650;
}

.qh-form .qh-button:hover,
.qh-form .qh-button:focus {
	background: #93de68;
}

/* ---- the sections, and the little text that is left -------------------- */

.qh-form-section {
	font-size: 1rem;
	letter-spacing: 0.01em;
	margin: 2.25rem 0 1rem;
	padding-top: 1.5rem;
}

.qh-form-intro,
.qh-form-note {
	font-size: 0.9375rem;
	color: var(--qh-muted);
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0 0 1.5rem;
}

.qh-form .qh-help {
	display: block;
	margin-top: 0.4375rem;
	font-size: 0.8125rem;
	color: var(--qh-muted);
	line-height: 1.45;
}

.qh-privacy {
	font-size: 0.8125rem;
	color: var(--qh-muted);
	border-top: 1px solid var(--qh-sand-200);
	padding-top: 1rem;
	margin-top: 1.75rem;
}

/* ---- the four kinds of contribution ------------------------------------ */

.qh-choices {
	border: 0;
	padding: 0;
	margin: 0 0 1.25rem;
}

.qh-choices legend {
	font-size: 0.9375rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding: 0;
	color: var(--qh-ink);
}

.qh-choice {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.125rem 0.75rem;
	align-items: center;
	border: 1px solid var(--qh-sand-200);
	border-radius: var(--qh-radius-field);
	padding: 0.875rem 1.125rem;
	margin-bottom: 0.625rem;
	background: var(--qh-ivory);
	cursor: pointer;
}

.qh-choice:last-child {
	margin-bottom: 0;
}

.qh-choice input[type="radio"] {
	margin: 0;
	width: 1.125rem;
	height: 1.125rem;
	accent-color: #4a9c5f;
}

.qh-choice-label {
	font-weight: 600;
}

/* Two kinds (6 October 2026): a permanent donation in three forms, then a loan from donor. */
.qh-choice-group {
	border: 1px solid var(--qh-sand-200);
	border-radius: var(--qh-radius-field);
	padding: 0.875rem;
	margin-bottom: 0.75rem;
	background: var(--qh-sand-50);
}

.qh-choice-group:last-child {
	margin-bottom: 0;
}

.qh-choice-group-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin: 0 0 0.625rem;
	font-weight: 600;
	color: var(--qh-ink);
}

.qh-choice-group-number {
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--qh-accent);
	color: var(--qh-on-brand);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.qh-choice-group .qh-earmark-field {
	margin: 0.75rem 0 0;
}

.qh-choice-group-note {
	flex-basis: 100%;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--qh-muted);
	line-height: 1.4;
}

/* The two halves of a split row line up with everything else on both edges. */
.qh-field--split {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 1.25rem;
}

@media ( max-width: 34rem ) {
	.qh-field--split { grid-template-columns: 1fr; gap: 1.25rem; }
}

.qh-field--check {
	border: 1px solid var(--qh-sand-200);
	border-radius: var(--qh-radius-field);
	padding: 0.9375rem 1.125rem;
}

.qh-field--check label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 0;
	font-weight: 500;
}

.qh-field--check input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	flex: 0 0 auto;
	accent-color: #4a9c5f;
}

/* The amount, as one field rather than two boxes. */
.qh-form .qh-amount-wrap {
	position: relative;
	display: block;
}

.qh-form .qh-currency {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--qh-muted);
	font-size: 1.0625rem;
	pointer-events: none;
}

.qh-form .qh-amount-wrap input {
	border-radius: var(--qh-radius-field) !important;
	padding-left: 2.75rem;
	font-variant-numeric: lining-nums tabular-nums;
	font-size: 1.125rem !important;
}

/* The contributor's own facts, as a borrower's page shows theirs. */
.qh-report .qh-donor-facts {
	max-width: 30rem;
	margin: 0 0 1.5rem;
}

.qh-report .qh-donor-facts th[scope="row"] {
	width: 9rem;
	font-weight: 500;
	color: var(--qh-muted);
}

/* the contributor's card * The client chose a profile card as the reference: */

.qh-donor-card {
	position: relative;
	max-width: 34rem;
	margin: 0 auto 1.5rem;
	background: var(--qh-ivory);
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba( 20, 40, 30, 0.10 ), 0 2px 6px rgba( 20, 40, 30, 0.05 );
	overflow: hidden;
}

/* The band: the brand's green, flat (the design system has no gradients). */
.qh-donor-band {
	height: 132px;
	background: var(--qh-green-600);
}

/* The photograph sits across the join, which is what makes the card read as a person rather… */
.qh-donor-avatar {
	position: absolute;
	top: 132px;
	left: 50%;
	width: 116px;
	height: 116px;
	margin-left: -58px;
	transform: translateY( -50% );
	border-radius: 50%;
	background: var(--qh-ivory);
	box-shadow: 0 0 0 6px var(--qh-ivory), 0 6px 18px rgba( 20, 40, 30, 0.16 );
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qh-donor-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* No photograph: initials, not an empty ring. An empty ring reads as a picture
   that failed to load. */
.qh-donor-initials {
	font-size: 2.25rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--qh-green-600);
	background: var(--qh-green-50);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Somebody who asked not to be named. */
.qh-donor-hidden-mark {
	width: 100%;
	height: 100%;
	padding: 27%;
	box-sizing: border-box;
	color: var(--qh-sand-500);
	background: var(--qh-sand-50);
}

/* The same fact on the contributors list, beside the code. */
.qh-donor-unnamed {
	font-size: 0.8125rem;
	color: var(--qh-sand-600);
	white-space: nowrap;
}

.qh-donor-unnamed-note {
	margin: 0.6rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--qh-sand-600);
}

.qh-donor-body {
	padding: 4.25rem 1.5rem 1.75rem;
	text-align: center;
}

.qh-report .qh-donor-name {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--qh-green-600);
}

.qh-profile-groups {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 13.5rem, 100% ), 1fr ) );
	gap: 0.875rem;
	margin: 1.25rem 0 0;
	text-align: left;
}

.qh-profile-group {
	padding: 0.875rem 1rem 1rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: 14px;
	background: var(--qh-sand-50);
}

.qh-report .qh-profile-group-title {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--qh-gold-soft);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qh-gold-700);
}

.qh-profile-details {
	display: grid;
	gap: 0.75rem;
	margin: 0;
}

.qh-profile-detail {
	display: grid;
	grid-template-columns: 2.125rem 1fr;
	column-gap: 0.75rem;
	align-items: center;
}

.qh-profile-icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: 50%;
	background: var(--qh-green-50);
	color: var(--qh-brand);
}

.qh-profile-detail dt {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.25;
	color: var(--qh-muted);
}

.qh-profile-detail dd {
	margin: 0;
	font-weight: 600;
	line-height: 1.35;
	color: var(--qh-ink-900);
	overflow-wrap: anywhere;
}

.qh-donor-since {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--qh-green-600);
	font-variant-numeric: lining-nums tabular-nums;
}

/* Their words, set as a quotation and given room, because on a page otherwise written by the… */
.qh-report .qh-donor-quote {
	margin: 1.25rem auto 0;
	max-width: 26rem;
	padding: 0;
	border: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	font-style: italic;
	color: var(--qh-sand-700);
}

.qh-report .qh-donor-quote::before {
	content: "\201C";
	display: block;
	/* Upright and serif: */
	font-style: normal;
	font-family: var(--qh-font);
	font-size: 3rem;
	line-height: 0.8;
	color: var(--qh-green-200);
	margin-bottom: 0.1rem;
}

.qh-donor-contact {
	margin: 0.3rem 0 0;
	font-size: 0.875rem;
	color: var(--qh-muted, var(--qh-sand-600));
}

.qh-donor-contact .qh-dot {
	margin: 0 0.5rem;
	color: var(--qh-sand-400);
}

.qh-donor-actions {
	margin: 1.5rem 0 0;
	text-align: center;
}

.qh-report a.qh-pill,
.qh-pill {
	display: inline-block;
	padding: 0.7rem 1.75rem;
	border-radius: 999px;
	background: var(--qh-green-600);
	color: var(--qh-on-brand);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba( 15, 77, 58, 0.28 );
}

.qh-pill:hover,
.qh-pill:focus {
	color: var(--qh-on-brand);
	box-shadow: 0 8px 20px rgba( 31, 111, 84, 0.36 );
}

@media ( max-width: 30rem ) {

	.qh-report .qh-donor-name { font-size: 1.5rem; }
}

/* ---- every movement behind the totals ---------------------------------- */

.qh-donor-heading {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 2rem 0 0.75rem;
	color: var(--qh-green-600);
}

.qh-report .qh-donor-ledger {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.qh-report .qh-donor-ledger th,
.qh-report .qh-donor-ledger td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--qh-sand-200);
	white-space: nowrap;
}

.qh-report .qh-donor-ledger thead th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qh-muted, var(--qh-sand-600));
	font-weight: 600;
	background: var(--qh-green-50);
}

.qh-report .qh-donor-ledger .qh-col-money {
	text-align: right;
	font-variant-numeric: lining-nums tabular-nums;
}

/* On a phone the five columns need a sideways swipe. */
.qh-report .qh-donor-ledger td:nth-child(2) {
	white-space: normal;
	min-width: 8rem;
}

@media ( max-width: 30rem ) {
	.qh-report .qh-donor-ledger th,
	.qh-report .qh-donor-ledger td {
		padding: 0.55rem 0.5rem;
		font-size: 0.875rem;
	}

	.qh-report .qh-donor-ledger thead th {
		font-size: 0.6875rem;
	}
}

/* ---- the two sums, as the client drew them ----------------------------- */

.qh-sums {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 17rem, 100% ), 1fr ) );
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.qh-sum {
	background: var(--qh-ivory);
	border: 1px solid var(--qh-sand-200);
	border-radius: 14px;
	padding: 1.125rem 1rem 1rem;
	text-align: center;
}

.qh-sum-title {
	margin: 0 0 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--qh-sand-200);
	font-size: 1rem;
	font-weight: 600;
	color: var(--qh-green-600);
}

.qh-sum-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
}

.qh-sum-term {
	display: block;
	min-width: 0;
}

/* The answer, set apart by a rule rather than by shouting. */
.qh-sum-term--total {
	padding-left: 0.75rem;
	border-left: 1px solid var(--qh-sand-200);
}

.qh-sum-value {
	display: block;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--qh-sand-700);
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
}

.qh-sum-term--total .qh-sum-value {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--qh-green-600);
}

.qh-sum-label {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.75rem;
	color: var(--qh-muted, var(--qh-sand-600));
}

.qh-sum-term--total .qh-sum-label {
	color: var(--qh-sand-700);
	font-weight: 500;
}

.qh-sum-op {
	color: var(--qh-sand-400);
	font-size: 1rem;
}

.qh-sum-note {
	margin: 0.875rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--qh-sand-200);
	font-size: 0.8125rem;
	color: var(--qh-muted, var(--qh-sand-600));
}

/* A small mark before a masked number or address. */
.qh-mini-icon {
	width: 0.95em;
	height: 0.95em;
	vertical-align: -0.12em;
	margin-right: 0.3rem;
	opacity: 0.75;
}

@media ( max-width: 34rem ) {
	.qh-sums { grid-template-columns: 1fr; }
}

/* ---- transactions, as cards ------------------------------------------- */

/* Still a table: money belongs in columns that line up, and a screen reader needs the headers. */
.qh-report .qh-ledger--cards {
	border-collapse: separate;
	border-spacing: 0 0.5rem;
}

.qh-report .qh-ledger--cards thead th {
	background: none;
	border: 0;
	padding-bottom: 0.25rem;
}

.qh-report .qh-ledger--cards tbody tr {
	background: var(--qh-ivory);
	box-shadow: 0 1px 2px rgba( 20, 40, 30, 0.06 ), 0 0 0 1px var(--qh-sand-200);
	border-radius: 12px;
}

.qh-report .qh-ledger--cards tbody td {
	border: 0;
	padding: 0.85rem 0.9rem;
	background: none;
}

.qh-report .qh-ledger--cards tbody td:first-child {
	border-radius: 12px 0 0 12px;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--qh-muted, var(--qh-sand-600));
}

.qh-report .qh-ledger--cards tbody td:last-child {
	border-radius: 0 12px 12px 0;
}

.qh-report .qh-ledger--cards tbody td:nth-child(2) {
	font-weight: 500;
	color: var(--qh-green-600);
}

/* On a phone the five columns become one card each, every figure labelled, so nothing has to… */
@media ( max-width: 40rem ) {
	.qh-report .qh-ledger--cards,
	.qh-report .qh-ledger--cards tbody,
	.qh-report .qh-ledger--cards tr,
	.qh-report .qh-ledger--cards td {
		display: block;
		width: 100%;
	}

	.qh-report .qh-ledger--cards thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
	}

	.qh-report .qh-ledger--cards tbody tr {
		padding: 0.35rem 0.25rem;
		margin-bottom: 0.625rem;
	}

	.qh-report .qh-ledger--cards tbody td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		padding: 0.4rem 0.75rem;
		text-align: right;
		border-radius: 0;
		white-space: normal;
	}

	.qh-report .qh-ledger--cards tbody td::before {
		content: attr( data-label );
		font-size: 0.8125rem;
		color: var(--qh-muted, var(--qh-sand-600));
		text-align: left;
		flex: 0 0 auto;
	}

	/* A balance that has not moved is noise on a small screen; the row above it already carries… */
	.qh-report .qh-ledger--cards tbody td:first-child {
		font-weight: 600;
		color: var(--qh-green-600);
	}
}

/* English | বাংলা (decision L1) -------------------------------------- Each language is name… */

.qh-lang,
.qh-an-tabs {
	display: flex;
	width: max-content;
	margin: 0 0 0.75rem auto;
	padding: 3px;
	gap: 2px;
	border: 1px solid var(--qh-sand-300);
	border-radius: 999px;
	background: var(--qh-ivory);
	box-shadow: var(--qh-shadow-xs);
	font-family: var(--qh-font);
	font-size: 0.875rem;
	font-weight: 650;
	line-height: 1;
}

.qh-lang a,
.qh-lang-current,
.qh-an-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.25rem;
	padding: 0 0.875rem;
	border: 0;
	border-radius: 999px;
	color: var(--qh-green-600);
	text-decoration: none;
	transition: background-color 120ms var(--qh-ease), color 120ms var(--qh-ease);
}

.qh-lang-current,
.qh-an-tab.is-current {
	background: var(--qh-green-600);
	color: var(--qh-on-brand);
}

.qh-lang a:hover,
.qh-lang a:focus-visible,
.qh-report a.qh-an-tab:hover,
.qh-report a.qh-an-tab:focus-visible {
	background: var(--qh-green-50);
	color: var(--qh-green-700);
}

/* The same pill chooses between two lists on the fund in depth: one shape
   for one job - choose one of two - wherever it is (S7.4). */
.qh-an-tabs {
	max-width: 100%;
	margin: 0 0 1rem;
	flex-wrap: wrap;
	border-radius: var(--qh-r-tile);
}

.qh-report .qh-an-tab {
	gap: 0.5rem;
	color: var(--qh-green-600);
	text-decoration: none;
}

.qh-report .qh-an-tab.is-current {
	color: var(--qh-on-brand);
}

.qh-an-tab-count {
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: var(--qh-sand-100);
	color: var(--qh-sand-700);
	font-size: 0.8125rem;
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-an-tab.is-current .qh-an-tab-count {
	background: rgba( 255, 255, 255, 0.2 );
	color: var(--qh-on-brand);
}

/* Heard, not seen: the whole name of a language beside its short label. */
.qh-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Bangla script sits taller than Latin; give its lines room. */
.qh-i18n[lang="bn"] {
	line-height: 1.7;
}

/* Sub-account tree (S11). */
.qh-tree-level-1 th[scope="row"] {
	padding-left: 0.625rem;
}

.qh-tree-level-2 th[scope="row"] {
	padding-left: 2rem;
}

.qh-tree-level-3 th[scope="row"] {
	padding-left: 3.375rem;
}

.qh-tree-head th[scope="row"] {
	font-weight: 600;
}

.qh-tree-total th,
.qh-tree-total td {
	font-weight: 600;
}

/* Repayment-record check (T1). */
.qh-check-form {
	display: flex;
	flex-wrap: wrap;
	/* Not stretch: the box would grow to the height of the button beside
	   it, and be a different box from the one on every other screen. */
	align-items: flex-start;
	gap: 0.5rem;
	margin: 1rem 0 0.25rem;
}

/* The button matches the box, rather than the box matching the button. */
.qh-check-form .qh-button {
	min-height: 2.25rem;
	padding: 0.45rem 1rem;
	line-height: 1.4;
}

.qh-check-card {
	margin-top: 1.25rem;
	padding: 1.25rem;
	border: 1px solid var(--qh-rule);
	border-left: 4px solid var(--qh-rule);
	border-radius: 8px;
	background: var(--qh-ivory);
}

.qh-check-name {
	margin: 0;
	font-size: 1.25rem;
}

.qh-check-where {
	margin: 0.125rem 0 0.75rem;
	color: var(--qh-muted);
	font-size: 0.875rem;
}

.qh-check-verdict {
	display: inline-block;
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.qh-check-reason {
	margin: 0.25rem 0;
	font-size: 0.9375rem;
}

.qh-check-more {
	margin: 0.875rem 0 0;
}

.qh-check-caveat {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	color: var(--qh-muted);
}

.qh-check-list {
	margin: 0.75rem 0 0;
	padding-left: 1.125rem;
}

.qh-check-list li {
	margin-bottom: 0.4375rem;
}

.qh-empty-note {
	margin-top: 1.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--qh-rule);
	border-radius: 8px;
	background: var(--qh-tint, var(--qh-sand-50));
}

/* Screen-reader-only label. */
.qh-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Repayment-record panel (S13, T2). */
.qh-standing-panel {
	margin: 1.25rem 0 0;
	padding: 1rem 1.125rem;
	border: 1px solid var(--qh-rule);
	border-left: 4px solid var(--qh-sand-500);
	border-radius: 8px;
	background: var(--qh-ivory);
}

.qh-standing-panel--good { border-left-color: var(--qh-green-500); }
.qh-standing-panel--warn { border-left-color: var(--qh-saffron-700); }
.qh-standing-panel--bad  { border-left-color: var(--qh-terracotta-700); }
.qh-standing-panel--plain { border-left-color: var(--qh-sand-500); }

.qh-standing-heading {
	margin: 0 0 0.625rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qh-muted);
}

.qh-standing-verdict {
	margin: 0 0 0.5rem;
}

.qh-standing-panel .qh-standing-why {
	display: block;
	margin: 0.25rem 0;
	font-size: 0.9375rem;
	color: var(--qh-ink);
}

.qh-standing-figures {
	width: 100%;
	margin-top: 0.75rem;
	border-collapse: collapse;
}

.qh-standing-figures th,
.qh-standing-figures td {
	padding: 0.4375rem 0;
	border-bottom: 1px solid var(--qh-rule);
	text-align: left;
	font-weight: 400;
}

.qh-standing-figures td {
	text-align: right;
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
}

.qh-standing-caveat {
	margin: 0.625rem 0 0;
	font-size: 0.8125rem;
	color: var(--qh-muted);
}

/* Report QR code (Q1). */
.qh-report-code {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 24px 0 0;
	padding: 16px 0 0;
	border-top: 1px dashed var(--qh-sand-300);
	page-break-inside: avoid;
	break-inside: avoid;
}

.qh-report-code-qr {
	flex: none;
	width: 112px;
}

.qh-report-code-qr svg {
	display: block;
	width: 112px;
	height: 112px;
}

.qh-report-code-text {
	min-width: 0;
}

.qh-report-code-title {
	margin: 0 0 4px;
	font-weight: 600;
}

.qh-report-code-note {
	margin: 0 0 6px;
	font-size: 0.8125rem;
	color: var(--qh-sand-600);
}

/* Centres page trail (C26). */
.qh-trail {
	margin: 0 auto 12px;
	max-width: 60rem;
	font-size: 0.9375rem;
	color: var(--qh-muted, var(--qh-sand-600));
}

.qh-trail a {
	color: var(--qh-green-600);
}

/* A cashbook line opens its own transaction (WK112). */
.qh-cashbook-link {
	color: var(--qh-green-600);
	text-decoration: none;
	font-weight: 600;
}

/* Weight and colour carry it, never an underline: a statement full of
   underlined words reads as a form to be filled in rather than a set of
   figures to be checked (Q4). */
.qh-cashbook-link:hover,
.qh-cashbook-link:focus-visible {
	color: var(--qh-green-700);
}

/* The line a cashbook link opened, or the note that it was reversed (WK112). */
[id^="qh-txn-"],
[id^="qh-j-"] {
	scroll-margin-top: 6rem;
}

tr.qh-row-target > td,
tr:target > td,
.qh-row-target-note {
	background: var(--qh-gold-50);
}

tr.qh-row-target > td:first-child,
tr:target > td:first-child,
.qh-row-target-note {
	box-shadow: inset 3px 0 0 var(--qh-gold-500);
}

.qh-row-target-note {
	padding: 0.5rem 0.75rem;
}

.qh-centre-link {
	font-weight: 600;
	color: var(--qh-green-600);
}

/* brand and phones The brand's green for headings and actions, its gold for accents (BR1), a… */
.qh-report,
.qh-form,
.qh-lang {
	--qh-accent: var(--qh-green-600);
	--qh-brand: var(--qh-green-600);
	--qh-gold: var(--qh-gold-500);
	--qh-gold-soft: var(--qh-sand-200);
}

.qh-report a,
.qh-form a,
.qh-lang a {
	color: var(--qh-brand);
	text-decoration: none;
}

/* No word and no link is underlined, pointed at or not (Q4). A link is told
   by its colour; pointing at one darkens it. !important because the theme and
   Elementor's kit underline links from outside the plugin's boxes. */
.qh-i18n a,
.qh-i18n a:hover,
.qh-i18n a:focus,
.qh-report a,
.qh-report a:hover,
.qh-report a:focus,
.qh-form a,
.qh-form a:hover,
.qh-report-page a,
.qh-report-page a:hover,
.qh-print-view a,
.qh-print-view a:hover {
	text-decoration: none !important;
	border-bottom: 0;
}

.qh-report a:hover,
.qh-form a:hover,
.qh-i18n a:hover {
	color: var(--qh-green-700);
}

.qh-report h2,
.qh-report h3,
.qh-report h4,
.qh-form h2,
.qh-form h3,
.qh-report-title {
	color: var(--qh-brand);
}

.qh-report h3 {
	padding-bottom: 0.375rem;
	border-bottom: 1px solid var(--qh-gold-soft);
}

.qh-report button,
.qh-report [type="submit"],
.qh-form button,
.qh-form [type="submit"] {
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--qh-brand);
	border-radius: 8px;
	background: var(--qh-brand);
	color: var(--qh-on-brand);
	font-weight: 600;
	cursor: pointer;
}

.qh-report button:hover,
.qh-report [type="submit"]:hover,
.qh-form button:hover,
.qh-form [type="submit"]:hover,
.qh-report button:focus-visible,
.qh-form button:focus-visible {
	border-color: var(--qh-green-700);
	background: var(--qh-green-700);
	color: var(--qh-on-brand);
}

.qh-form .qh-button--quiet,
.qh-report .qh-button--quiet {
	border-color: var(--qh-sand-300);
	background: var(--qh-ivory);
	color: var(--qh-brand);
}

.qh-report :focus-visible,
.qh-form :focus-visible {
	outline: 2px solid var(--qh-gold);
	outline-offset: 2px;
}

/* The theme's table grid and stripes, taken off. */
.qh-report table,
.qh-report table th,
.qh-report table td {
	border-width: 0;
	background: transparent;
}

.qh-report table th,
.qh-report table td {
	border-bottom: 1px solid var(--qh-rule);
}

.qh-report table tbody > tr:nth-child( odd ) > td,
.qh-report table tbody > tr:nth-child( odd ) > th,
.qh-report table tbody tr:hover > td {
	background: transparent;
}

.qh-report thead th {
	color: var(--qh-brand);
	border-bottom: 2px solid var(--qh-brand);
}

.qh-report .qh-total-row td,
.qh-report .qh-total-row th {
	border-top: 1px solid var(--qh-brand);
	border-bottom: 3px double var(--qh-brand);
}

/* The page's own title repeats the report's, under the letterhead. */
.qh-report-article:has( .qh-brand + h2 ) > .qh-report-title,
.qh-report-article:has( .qh-report--head ) > .qh-report-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
}

.qh-report img,
.qh-report svg,
.qh-form img {
	max-width: 100%;
	height: auto;
}

.qh-report .qh-brand-mark {
	height: 2.75rem;
}

.qh-brand-logo {
	width: auto;
	max-width: 9rem;
	object-fit: contain;
}

.qh-report,
.qh-form {
	overflow-wrap: anywhere;
}

/* A phone: tables of three columns or more become one card a row, each figure with its colum… */
@media screen and ( max-width: 640px ) {
	.qh-report-page {
		padding: 1rem 1rem 2.5rem;
	}

	.qh-report table:not( .qh-stack ) {
		display: table;
		overflow: visible;
	}

	.qh-report table.qh-stack,
	.qh-report .qh-stack tbody,
	.qh-report .qh-stack tfoot,
	.qh-report .qh-stack tr,
	.qh-report .qh-stack td,
	.qh-report .qh-stack tbody th {
		display: block;
		width: 100%;
	}

	.qh-report .qh-stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
	}

	.qh-report .qh-stack tr {
		margin: 0 0 0.75rem;
		padding: 0.625rem 0.875rem;
		border: 1px solid var(--qh-sand-200);
		border-radius: 10px;
		background: var(--qh-ivory);
		box-shadow: 0 1px 2px rgba( 15, 77, 58, 0.06 );
	}

	.qh-report .qh-stack td,
	.qh-report .qh-stack tbody th {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		padding: 0.3125rem 0;
		border: 0;
		text-align: right;
		white-space: normal;
	}

	.qh-report .qh-stack td::before,
	.qh-report .qh-stack tbody th::before {
		content: attr( data-label );
		flex: none;
		max-width: 50%;
		color: var(--qh-muted);
		font-size: 0.8125rem;
		font-weight: 500;
		text-align: left;
		text-transform: none;
	}

	.qh-report .qh-stack td:first-child {
		display: block;
		margin: 0 0 0.25rem;
		padding: 0 0 0.4375rem;
		border-bottom: 1px solid var(--qh-gold-soft);
		color: var(--qh-brand);
		font-size: 1rem;
		font-weight: 600;
		text-align: left;
	}

	.qh-report .qh-stack td:first-child::before,
	.qh-report .qh-stack td:not( [data-label] )::before,
	.qh-report .qh-stack td[data-label=""]::before {
		content: none;
	}

	.qh-report .qh-stack td[colspan] {
		display: block;
		text-align: left;
	}

	.qh-report .qh-stack .qh-total-row {
		border-color: var(--qh-brand);
		border-width: 1px 1px 1px 4px;
		background: var(--qh-green-50);
	}

	.qh-report .qh-stack .qh-total-row td {
		border: 0;
	}

	.qh-report .qh-stack td:empty {
		display: none;
	}

	.qh-report .qh-table-scroll {
		overflow: visible;
	}

	.qh-report h2 {
		font-size: 1.375rem;
	}

	.qh-lang {
		margin-bottom: 0.25rem;
	}
}

/* A tablet: wide tables keep their columns and scroll inside their own box rather than pushi… */
@media screen and ( min-width: 641px ) and ( max-width: 1024px ) {
	.qh-report-page {
		padding: 1.25rem 1.5rem 3rem;
	}

	.qh-report .qh-table-scroll {
		max-width: 100%;
		overflow-x: auto;
	}
}

/* On the plugin's page template the letterhead is drawn once, above the page title; the copy… */
.qh-report-page .qh-report .qh-brand,
.qh-report-page .qh-form .qh-brand {
	display: none;
}

.qh-report-page > .qh-report-article > .qh-brand {
	margin-top: 0.5rem;
}

.qh-report-page .qh-report-title,
.qh-form .qh-step legend,
.qh-report .qh-brand + h2 {
	color: var(--qh-green-600);
}

/* Print / Save as PDF (Q2), at the foot of the report (Q4). */
.qh-print-bar {
	margin: 1.75rem 0 0.5rem;
	text-align: center;
}

/* A page's own buttons in one row with Print (25 September 2026). */
.qh-page-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	margin: 1.75rem 0 1rem;
}

.qh-page-actions > .qh-print-bar {
	margin: 0;
}

.qh-report button.qh-print-button,
.qh-report summary.qh-print-button,
.qh-print-toolbar .qh-print-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.qh-report summary.qh-print-button{border:1px solid var(--qh-sand-300);border-radius:var(--qh-r-control)}
.qh-report button.qh-print-button,
.qh-report summary.qh-print-button {
	min-height: 2.5rem;
	padding: 0.4rem 1rem;
	border-color: var(--qh-sand-300);
	background: var(--qh-ivory);
	color: var(--qh-brand);
	font-size: 0.9375rem;
}

/* One print button; on a statement it opens the copy to print (14 Oct 2026). */
.qh-print-menu{position:relative;display:inline-block}
.qh-print-menu>summary{list-style:none;cursor:pointer}
.qh-print-menu>summary::-webkit-details-marker{display:none}
.qh-print-menu-list{position:absolute;z-index:5;left:50%;transform:translateX(-50%);margin-top:.375rem;min-width:12rem;padding:.25rem;border:1px solid var(--qh-sand-300);border-radius:10px;background:var(--qh-ivory);box-shadow:var(--qh-shadow-sm);text-align:left}
.qh-print-menu-list>button,.qh-print-menu-list>a{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;border:0;border-radius:8px;background:none;color:var(--qh-brand);font:inherit;font-size:.9375rem;text-align:left;text-decoration:none;cursor:pointer}
.qh-print-menu-list>button:hover,.qh-print-menu-list>a:hover,.qh-print-menu-list>button:focus-visible,.qh-print-menu-list>a:focus-visible{background:var(--qh-green-50)}

/* A centre and its borrowers on one page: one print button, one QR code
   and one "Updated" line, all at the foot of the pair. */
.qh-report-pair > .qh-report:not(:last-child) .qh-print-bar,
.qh-report-pair > .qh-report:not(:last-child) .qh-report-code,
.qh-report-pair > .qh-report:not(:last-child) .qh-updated {
	display: none !important;
}

@media screen {
	.qh-report-code {
		display: none;
	}
}

@media print {
	@page {
		size: A4;
		margin: 12mm;
	}

	body * {
		visibility: hidden;
	}

	.qh-report-page,
	.qh-report-page *,
	.qh-report,
	.qh-report * {
		visibility: visible;
	}

	.qh-report-page {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.qh-report {
		max-width: none;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.qh-lang,
	.qh-print-bar,
	.qh-page-actions,
	.qh-trail,
	.qh-report form,
	.qh-report .qh-no-print,
	.qh-report-page .qh-report-title {
		display: none !important;
	}

	.qh-report tr,
	.qh-report-code {
		break-inside: avoid;
	}

	.qh-report-code {
		border-top-color: var(--qh-sand-500);
	}

	.qh-report a {
		color: inherit;
	}
}

/* Shapes in place of text (BR4): icons, tiles, bars, a ring, pages. */
.qh-ui-icon {
	flex: none;
	width: 1.125em;
	height: 1.125em;
	vertical-align: -0.2em;
}

.qh-tiles {
	display: grid;
	/* Wide enough for a taka figure. At 9.5rem a tile fitted the word under
	   it and not the number above it, so ৳ 58,59,000 hung over the edge of
	   its own box (I34). */
	grid-template-columns: repeat( auto-fit, minmax( 11.5rem, 1fr ) );
	/* A column may be narrower than the figure in it; the figure wraps
	   rather than pushing the card off the side of the screen (I32). */
	grid-auto-columns: minmax( 0, 1fr );
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}

.qh-tile {
	display: grid;
	/* minmax( 0, … ), not 1fr: a grid column is otherwise as wide as what is
	   in it, and a long figure simply pushed itself out of the tile. */
	grid-template-columns: auto minmax( 0, 1fr );
	align-items: center;
	gap: 0.125rem 0.625rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: 12px;
	background: var(--qh-ivory);
}

.qh-tile-icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--qh-green-50);
	color: var(--qh-brand);
	font-size: 1.25rem;
}

.qh-tile--good .qh-tile-icon { background: var(--qh-green-50); color: var(--qh-green-500); }
.qh-tile--gold .qh-tile-icon { background: var(--qh-gold-50); color: var(--qh-gold-700); }
.qh-tile--bad .qh-tile-icon { background: var(--qh-terracotta-50); color: var(--qh-terracotta-700); }

.qh-tile-value {
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--qh-ink-900);
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
}

.qh-tile-label {
	font-size: 0.8125rem;
	color: var(--qh-muted);
	line-height: 1.3;
}

.qh-chart {
	margin: 0 0 1.25rem;
}

.qh-charts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 16rem, 100% ), 1fr ) );
	gap: 0 1.5rem;
}

.qh-chart-title {
	margin: 0 0 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--qh-brand);
}

.qh-bar {
	display: flex;
	height: 0.75rem;
	overflow: hidden;
	border-radius: 999px;
	background: var(--qh-sand-200);
}

.qh-bar-seg + .qh-bar-seg {
	border-left: 2px solid var(--qh-ivory);
}

.qh-bar--brand { background: var(--qh-green-600); }
.qh-bar--gold { background: var(--qh-gold-500); }
.qh-bar--soft { background: var(--qh-green-100); }
.qh-bar--bad { background: var(--qh-terracotta-500); }

.qh-bar-key {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.125rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: var(--qh-muted);
}

.qh-bar-key b {
	color: var(--qh-ink-900);
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-bar-dot {
	display: inline-block;
	width: 0.625rem;
	height: 0.625rem;
	margin-right: 0.375rem;
	border-radius: 50%;
}

.qh-meter {
	display: block;
	width: 7rem;
	height: 0.3125rem;
	margin: 0.4375rem 0 0.125rem;
	border-radius: 999px;
	background: var(--qh-sand-200);
	overflow: hidden;
}

.qh-meter i {
	display: block;
	height: 100%;
	background: var(--qh-green-600);
}

.qh-meter-label {
	font-size: 0.75rem;
	color: var(--qh-muted);
}

.qh-ring {
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
}

.qh-ring circle {
	fill: none;
	stroke-width: 4;
}

.qh-ring-track { stroke: var(--qh-sand-200); }
.qh-ring-fill { stroke: var(--qh-green-600); stroke-linecap: round; }
/* The brand's own deep green, for a figure that is being reported rather
   than judged - the client asked for it on the repayment rate (I2). */
.qh-ring--brand .qh-ring-fill { stroke: var(--qh-green-600); }
.qh-ring--warn .qh-ring-fill { stroke: var(--qh-saffron-500); }
.qh-ring--bad .qh-ring-fill { stroke: var(--qh-terracotta-500); }
.qh-ring--plain .qh-ring-fill { stroke: var(--qh-sand-500); }

.qh-ring text {
	font-size: 8px;
	font-weight: 700;
	fill: var(--qh-ink-900);
}

/* Facts about a person or a loan, an icon each. */
.qh-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem 1rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--qh-sand-700);
}

.qh-facts li {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.qh-facts .qh-ui-icon {
	color: var(--qh-gold-700);
}

.qh-facts--loan,
.qh-report > .qh-facts {
	justify-content: flex-start;
	margin: 0 0 1rem;
}

/* One loan. */
.qh-loan {
	margin: 0 0 1rem;
	padding: 1rem 1.125rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: 12px;
	background: var(--qh-ivory);
}

.qh-loan-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.qh-loan-code {
	font-weight: 700;
	color: var(--qh-brand);
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-loan-amount {
	margin-left: auto;
	font-size: 1.125rem;
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-chip {
	display: inline-block;
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	background: var(--qh-green-50);
	color: var(--qh-brand);
	font-size: 0.8125rem;
}

.qh-chip--fund {
	background: var(--qh-gold-50);
	color: var(--qh-saffron-700);
}

.qh-loan .qh-chart {
	margin: 0 0 0.75rem;
}

/* An instalment each: filled when paid, amber when late. */
.qh-sched-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
}

.qh-sd {
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	border: 2px solid var(--qh-green-100);
	background: var(--qh-ivory);
}

.qh-sd--paid { border-color: var(--qh-green-600); background: var(--qh-green-600); }
.qh-sd--partially_paid { border-color: var(--qh-green-600); background: linear-gradient( 90deg, var(--qh-green-600) 50%, var(--qh-ivory) 50% ); }
.qh-sd--overdue { border-color: var(--qh-saffron-500); background: var(--qh-gold-200); }
.qh-sd--written_off { border-color: var(--qh-gold-500); background: var(--qh-gold-500); }

/* Detail folded away until asked for. */
.qh-more {
	margin: 0.25rem 0 0;
}

.qh-more > summary {
	cursor: pointer;
	color: var(--qh-brand);
	font-size: 0.9375rem;
	font-weight: 600;
	list-style-position: inside;
}

.qh-more[open] > summary {
	margin-bottom: 0.625rem;
}

.qh-more--wide {
	margin: 1.5rem 0 0;
	padding: 0.875rem 1.125rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: 12px;
}

/* Guarantors. */
.qh-people {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 14rem, 100% ), 1fr ) );
	gap: 0.75rem;
}

.qh-person {
	display: flex;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: 12px;
}

.qh-person-icon {
	flex: none;
	width: 2rem;
	height: 2rem;
	color: var(--qh-gold-700);
}

.qh-person span {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	color: var(--qh-muted);
}

.qh-sum-note--late {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.375rem;
	color: var(--qh-saffron-700);
	font-weight: 600;
}

/* The repayment record: a ring beside the verdict, figures in a grid. */
.qh-standing-top {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 0.75rem;
}

/* The verdict beside the ring carries its figures ("Long overdue ৳12,000 for
   163 days"), so on a phone it wraps inside the panel rather than running past
   its edge. */
.qh-standing-top > div{min-width:0}
.qh-standing-verdict.qh-standing{white-space:normal}

dl.qh-standing-figures {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 8rem, 1fr ) );
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

dl.qh-standing-figures div {
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	background: var(--qh-green-50);
}

dl.qh-standing-figures dt {
	font-size: 0.75rem;
	color: var(--qh-muted);
}

dl.qh-standing-figures dd {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
}

/* How the score is worked out, behind an "i": a <details>, so a tap opens it with no script; the box spans the panel. */
.qh-standing-panel{position:relative}
.qh-tip{display:inline}
.qh-tip-i{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin-left:.25rem;border:1px solid var(--qh-muted);border-radius:50%;font-size:.6875rem;font-weight:700;line-height:1;color:var(--qh-muted);vertical-align:middle;cursor:pointer;list-style:none}
.qh-tip-i::-webkit-details-marker{display:none}
.qh-tip-i::marker{content:""}
.qh-tip[open] .qh-tip-i,.qh-tip-i:hover,.qh-tip-i:focus-visible{border-color:var(--qh-accent);background:var(--qh-accent);color:var(--qh-on-brand);outline:none}
.qh-tip-i:focus-visible{box-shadow:var(--qh-ring)}
.qh-tip-box{position:absolute;left:.75rem;right:.75rem;z-index:5;display:block;max-width:32rem;margin-top:.375rem;padding:.75rem .875rem;border:1px solid var(--qh-rule);border-radius:8px;background:var(--qh-ivory);box-shadow:var(--qh-shadow-md);font-size:.8125rem;color:var(--qh-ink)}
.qh-tip-title{display:block;margin:0 0 .375rem;font-weight:700}
.qh-tip-mine{margin-top:.75rem}
.qh-tip-step,.qh-tip-row{display:grid;grid-template-columns:1.25rem 1fr auto;gap:.5rem;padding:.25rem 0}
.qh-tip-row{padding:.3125rem 0;border-bottom:1px solid var(--qh-rule)}
.qh-tip-step b{color:var(--qh-muted)}
.qh-tip-row b{font-variant-numeric:lining-nums tabular-nums;text-align:right;white-space:nowrap}
.qh-tip-row b:first-child{color:var(--qh-muted);text-align:left}
.qh-tip-total{border-bottom:0;font-weight:700}
@media print{.qh-tip{display:none}}

/* The cashbook's choices. */
.qh-periods {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.qh-report a.qh-period {
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--qh-sand-300);
	border-radius: 999px;
	font-size: 0.875rem;
}

.qh-report a.qh-period.is-on {
	border-color: var(--qh-brand);
	background: var(--qh-brand);
	color: var(--qh-on-brand);
}

.qh-cashbook-filters label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: var(--qh-muted);
}

.qh-cashbook-filters input,
.qh-cashbook-filters select {
	min-height: 2.75rem;
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--qh-sand-300);
	border-radius: 8px;
	font-size: 1rem;
}

.qh-cashbook-filters {
	align-items: flex-end;
}

/* Pages. */
.qh-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 1rem 0;
	font-size: 0.9375rem;
}

.qh-pager-step,
.qh-pager-n {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
	justify-content: center;
	padding: 0 0.625rem;
	border-radius: 8px;
}

.qh-pager-step.is-off {
	color: var(--qh-sand-400);
}

.qh-pager-n.is-current {
	background: var(--qh-brand);
	color: var(--qh-on-brand);
	font-weight: 700;
}

.qh-pager-gap {
	padding: 0 0.25rem;
	color: var(--qh-muted);
}

@media screen and ( max-width: 640px ) {
	.qh-pager-step span {
		display: none;
	}

	.qh-tiles {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}

	.qh-tile {
		grid-template-columns: 1fr;
		padding: 0.75rem;
	}

	.qh-tile-icon {
		grid-row: auto;
		width: 2rem;
		height: 2rem;
		font-size: 1rem;
	}

	.qh-tile-value {
		font-size: 1rem;
	}

	.qh-cashbook-filters label {
		flex: 1 1 8rem;
	}
}

/* On any phone, one control to a line and the button the width of the form.
   Two date boxes side by side on a 390px screen are 170px each, which is a
   cramped target for a thumb and leaves the date itself barely readable -
   and it was this row, squeezed, that ran off the side of the cashbook. */
@media screen and ( max-width: 34rem ) {
	.qh-public-filters label,
	.qh-public-filters .qh-button {
		flex: 1 1 100%;
	}

	.qh-public-filters .qh-button {
		align-self: stretch;
	}
}

/* The tiles stay two across on an ordinary phone - 390px leaves each of them
   room for a figure - and give up only on the small old screens, where two
   columns would cut a taka figure in half. */
@media screen and ( max-width: 22rem ) {
	.qh-tiles {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media print {
	.qh-periods,
	.qh-pager,
	/* On paper a fold's label is the heading of what it held. */
	.qh-more > summary {
		list-style: none;
		cursor: default;
	}

	.qh-more > summary::-webkit-details-marker {
		display: none;
	}

	.qh-more > * {
		display: block;
	}
}

/* ---------------------------------------------------------------------
   The financial statements (F1): IFRS headings, a comparative column, and
   every head opening onto what it is made of - down to a person's page.
   --------------------------------------------------------------------- */
.qh-fs {
	/* A FIXED width, never max-content. Each line of a statement is its own
	   grid, so max-content sized every column to that line alone: a heading
	   longer than the figures under it made its own column wider and pushed
	   the rest along, which is why nothing lined up (I21). */
	--qh-fs-num: 6.75rem;
	margin: 0 0 1.25rem;
	border-top: 2px solid var(--qh-brand);
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-fs-line {
	display: grid;
	grid-template-columns: var(--qh-fs-label, minmax( 0, 1fr )) repeat( var(--qh-fs-cols, 2), var(--qh-fs-num) );
	align-items: baseline;
	column-gap: 1rem;
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid var(--qh-sand-200);
	font-size: 0.9375rem;
}

.qh-fs-num {
	text-align: right;
	white-space: nowrap;
}

.qh-fs-label {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The column heads: dates, small and quiet. */
.qh-fs-colhead {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--qh-muted);
}

.qh-fs-colhead .qh-fs-num {
	white-space: normal;
}

/* ASSETS, LIABILITIES, FUNDS - and the smaller heads under them. */
.qh-fs-section {
	padding-top: 1.25rem;
	border-bottom: 1px solid var(--qh-gold-soft);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--qh-brand);
}

.qh-fs-total {
	font-weight: 700;
	border-top: 1px solid var(--qh-sand-300);
}

.qh-fs-grand {
	font-weight: 700;
	font-size: 1rem;
	color: var(--qh-brand);
	border-bottom: 3px double var(--qh-brand);
}

/* A line that opens: a chevron, and a tint on hover. */
.qh-fs-row > summary {
	cursor: pointer;
	list-style: none;
}

.qh-fs-row > summary::-webkit-details-marker {
	display: none;
}

.qh-fs-row > summary .qh-fs-label::before {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin: 0 0.6em 0.12em 0.1em;
	border-right: 2px solid var(--qh-gold);
	border-bottom: 2px solid var(--qh-gold);
	transform: rotate( -45deg );
	transition: transform 0.15s ease;
}

.qh-fs-row[open] > summary .qh-fs-label::before {
	transform: rotate( 45deg );
}

.qh-fs-row > summary:hover,
.qh-fs-row > summary:focus-visible {
	background: var(--qh-green-50);
}

.qh-fs-row[open] > summary {
	background: var(--qh-green-50);
	font-weight: 600;
}

/* What a line is made of, indented a step at each level. */
.qh-fs-children {
	margin-left: 1.1rem;
	border-left: 2px solid var(--qh-gold-soft);
}

.qh-fs-children .qh-fs-line {
	font-size: 0.875rem;
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}

.qh-fs-person .qh-fs-label {
	color: var(--qh-sand-700);
}

.qh-fs-reconcile .qh-fs-label {
	color: var(--qh-muted);
}

.qh-fs-code {
	margin-left: 0.25rem;
	font-size: 0.75rem;
	color: var(--qh-muted);
}

.qh-fs-go {
	color: var(--qh-gold);
}

.qh-fs-hint {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	color: var(--qh-muted);
}

.qh-fs-basis ul {
	margin: 0.25rem 0 0;
	padding-left: 1.1rem;
	font-size: 0.8125rem;
	color: var(--qh-sand-700);
}

/* IFRS notes (14 Oct 2026): a Notes column, then numbered notes. */
.qh-fs--notes .qh-fs-line{grid-template-columns:var(--qh-fs-label,minmax(0,1fr)) var(--qh-fs-notew,2.75rem) repeat(var(--qh-fs-cols,2),var(--qh-fs-num))}
.qh-fs-note{text-align:center;font-size:.75rem;color:var(--qh-muted)}
.qh-fs-subtotal{font-weight:600;border-top:1px solid var(--qh-sand-200)}
.qh-fs-notes{margin:1.5rem 0 0}
.qh-fs-notes-head{margin:0 0 .75rem;padding-bottom:.375rem;border-bottom:2px solid var(--qh-brand);font-size:1rem;color:var(--qh-brand)}
.qh-fs-note-block{margin:0 0 1.25rem}
.qh-fs-note-title{margin:.5rem 0 .25rem;font-size:.9375rem;font-weight:600}
.qh-fs-notes p{margin:0 0 .75rem;font-size:.8125rem;color:var(--qh-sand-700)}

/* The changes-in-fund matrix scrolls sideways on a phone, its labels held. */
.qh-fs-wide {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Shorter headings (I16) let the five columns fit without scrolling on an
   ordinary screen, so the Total column is no longer pushed off the side. */
.qh-fs--matrix .qh-fs-line {
	column-gap: 0.5rem;
}

.qh-fs--matrix {
	--qh-fs-label: minmax( 8rem, 1fr );
	--qh-fs-num: 5.25rem;
	min-width: 38rem;
}

.qh-fs-colhead .qh-fs-num {
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.3;
}

@media ( max-width: 40rem ) {
	.qh-fs {
		--qh-fs-notew: 1.75rem;
		--qh-fs-num: 5.25rem;
	}

	.qh-fs-line {
		column-gap: 0.5rem;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
		font-size: 0.875rem;
	}

	.qh-fs-children {
		margin-left: 0.5rem;
	}
}

/* ---- An instant filter above a long report table (I22) ----------------- */
/* Built by assets/js/qh-search.js; none of it exists for a reader whose
   browser does not run it, and nothing is lost when it does not. */
/* ================================================== one search box (I35)

   Built above a list, or a form the server already drew - both wear these,
   so a reader meets the same box on every screen. */

.qh-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 0.75rem;
}

input[type="search"].qh-search-input,
.qh-report .qh-search-input,
.qh-form .qh-search-input,
.qh-search-input {
	flex: 0 1 22rem;
	/* And the same width where there is no flex row to size it. */
	width: 22rem;
	min-width: 11rem;
	max-width: 100%;
	min-height: 2.25rem;
	line-height: 1.4;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: 8px;
	background: var(--qh-ivory);
	font-size: 0.9375rem;
	box-sizing: border-box;
}

.qh-search-input:focus {
	outline: 2px solid var(--qh-brand, var(--qh-green-600));
	outline-offset: 1px;
}

.qh-search-count {
	flex: 1 1 100%;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--qh-muted, var(--qh-sand-600));
	font-variant-numeric: lining-nums tabular-nums;
}

.qh-search-count:empty {
	display: none;
}

.qh-search-count.is-empty {
	color: var(--qh-terracotta-500);
	font-weight: 600;
}

/* The chooser beside it: a list of what is on the page. */
.qh-report .qh-search-choose,
.qh-search-choose {
	flex: 0 1 16rem;
	min-width: 10rem;
	max-width: 100%;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: 8px;
	background: var(--qh-ivory);
	font-size: 0.9375rem;
	box-sizing: border-box;
}

/* The centres' own row: the search box, then the district chooser. */
.qh-search--centres {
	margin-bottom: 1rem;
}

/* Only for a reader without the script, who needs a button to send it. */
.qh-report .qh-search-go,
.qh-search-go {
	flex: 0 0 auto;
}

/* Five names to a card, and the rest a page away (C30a). */
.qh-card-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0.5rem 1rem 0.75rem;
}

.qh-report .qh-card-page,
.qh-card-page {
	min-width: 1.75rem;
	min-height: 1.75rem;
	padding: 0.125rem 0.4375rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: 6px;
	background: var(--qh-ivory);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--qh-brand);
	cursor: pointer;
}

.qh-report .qh-card-page.is-on,
.qh-card-page.is-on {
	border-color: var(--qh-brand);
	background: var(--qh-brand);
	color: var(--qh-on-brand);
	font-weight: 600;
}

@media print {
	.qh-search,
	.qh-card-pager {
		display: none;
	}
}

/* =============================================== the centres, by district */

.qh-districts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 20rem, 100% ), 1fr ) );
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.qh-district {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--qh-sand-200);
	border-radius: 12px;
	background: var(--qh-ivory);
	overflow: hidden;
}

.qh-district-head {
	padding: 0.875rem 1rem 0.625rem;
	border-bottom: 1px solid var(--qh-sand-200);
	background: var(--qh-sand-50);
}

.qh-district-name {
	display: flex;
	align-items: center;
	gap: 0.4375rem;
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 650;
	color: var(--qh-brand);
}

.qh-district-name svg {
	width: 1.125rem;
	height: 1.125rem;
	flex: 0 0 auto;
}

.qh-district-sum {
	margin: 0.1875rem 0 0;
	font-size: 0.8125rem;
	color: var(--qh-muted);
}

.qh-district-list {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-district-centre + .qh-district-centre {
	border-top: 1px solid var(--qh-sand-200);
}

.qh-district-centre > a {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	gap: 0.125rem 0.625rem;
	padding: 0.6875rem 1rem;
	text-decoration: none;
	color: inherit;
}

.qh-district-centre > a:hover,
.qh-district-centre > a:focus-visible {
	background: var(--qh-green-50);
}

.qh-district-centre-name {
	font-weight: 600;
	color: var(--qh-brand);
}

.qh-district-centre .qh-borrower-code {
	justify-self: end;
	align-self: start;
}

/* ============================================= who runs a centre (C28) */

.qh-team {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 15rem, 100% ), 1fr ) );
	gap: 0.75rem;
	margin: 0 0 1.5rem;
}

.qh-team-member {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: 12px;
	background: var(--qh-ivory);
}

.qh-team-face {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--qh-tint, var(--qh-green-50));
	color: var(--qh-brand);
}

.qh-team-face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.qh-team-initials {
	font-weight: 650;
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
}

.qh-team-about {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.qh-team-name {
	font-size: 1rem;
	font-weight: 650;
}

.qh-team-role {
	font-size: 0.8125rem;
	color: var(--qh-muted);
}

/* The number is not in the page until it is asked for (C29).

   Named against .qh-report as well, because that sets every button on a
   report to a solid green block - right for Print, wrong for this, which
   is a number with a way to see the rest of it rather than an action. */
.qh-report .qh-contact,
.qh-contact {
	display: inline-flex;
	flex-wrap: wrap;
	width: auto;
	max-width: 100%;
	min-height: 0;
	font-weight: 400;
	align-items: center;
	gap: 0.125rem 0.375rem;
	text-align: left;
	margin: 0.25rem 0 0;
	padding: 0.3125rem 0.625rem;
	border: 1px solid var(--qh-sand-300);
	border-radius: 10px;
	background: var(--qh-ivory);
	font: inherit;
	font-size: 0.8125rem;
	color: var(--qh-brand);
	cursor: pointer;
	text-decoration: none;
}

.qh-report .qh-contact:hover,
.qh-report .qh-contact:focus-visible,
.qh-contact:hover,
.qh-contact:focus-visible {
	border-color: var(--qh-brand);
	background: var(--qh-tint, var(--qh-green-50));
	color: var(--qh-brand);
}

.qh-contact svg {
	width: 0.9375rem;
	height: 0.9375rem;
	flex: 0 0 auto;
}

.qh-contact-number {
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.qh-contact-do {
	color: var(--qh-muted);
}

.qh-report .qh-contact.is-shown,
.qh-contact.is-shown {
	border-color: var(--qh-brand);
	font-weight: 600;
}

.qh-report .qh-contact.is-failed,
.qh-contact.is-failed {
	color: var(--qh-muted);
	cursor: default;
}

@media print {
	.qh-contact {
		border: 0;
		padding: 0;
	}

	.qh-contact-do {
		display: none;
	}
}

/* The letterhead is the way home, to The fund at a glance (25 September 2026). */
a.qh-brand-home {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

a.qh-brand-home:hover .qh-brand-name,
a.qh-brand-home:focus-visible .qh-brand-name {
	color: var(--qh-green-700);
}

/* ============================================================== contact */

/* The fund's contact details at the foot of every public page (CT1). A card
   for each, with its mark. Named apart from .qh-contact, the team's "show
   the number" button, whose border and inline layout it once inherited.
   Every rule is scoped and sets its own display, because themes style a
   bare list or heading in their own ways. */
.qh-fund-contact {
	display: block;
	margin: 3rem 0 0;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--qh-sand-200);
	clear: both;
}

.qh-fund-contact .qh-fund-contact-title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qh-green-600);
	background: none;
}

.qh-fund-contact .qh-fund-contact-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--qh-sand-200);
}

.qh-fund-contact .qh-fund-contact-list {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 14rem, 100% ), 1fr ) );
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-fund-contact .qh-fund-contact-item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
	padding: 0.875rem 1rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: 12px;
	background: var(--qh-ivory);
	list-style: none;
}

.qh-fund-contact .qh-fund-contact-item::before {
	content: none;
}

.qh-fund-contact .qh-fund-contact-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--qh-green-50);
	color: var(--qh-green-600);
}

.qh-fund-contact .qh-fund-contact-item--whatsapp .qh-fund-contact-icon {
	background: #e7f8ec;
	color: #128c4a;
}

.qh-fund-contact .qh-fund-contact-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.qh-fund-contact .qh-fund-contact-label {
	font-size: 0.75rem;
	color: var(--qh-sand-600);
}

.qh-fund-contact .qh-fund-contact-value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--qh-ink-900);
	line-height: 1.45;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.qh-fund-contact a.qh-fund-contact-value {
	color: var(--qh-green-600);
}

.qh-fund-contact a.qh-fund-contact-value:hover {
	color: var(--qh-green-700);
}

@media print {
	/* On paper: one quiet line, no cards and no marks. */
	.qh-fund-contact {
		margin-top: 1.5rem;
		padding-top: 0.5rem;
	}

	.qh-fund-contact .qh-fund-contact-title::after,
	.qh-fund-contact .qh-fund-contact-icon {
		display: none;
	}

	.qh-fund-contact .qh-fund-contact-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 1.25rem;
	}

	.qh-fund-contact .qh-fund-contact-item {
		padding: 0;
		border: 0;
	}

	.qh-fund-contact .qh-fund-contact-text {
		flex-direction: row;
		gap: 0.375rem;
	}
}

/* ==== DS2 - the design system's shapes (26 September 2026) ===============
   The client's own design system, drawn from the logo: white pages and white
   cards with a light hairline, the logo's green for headings and actions and
   its gold as a small accent, one sans family for every word and figure, soft
   12/16/24px corners and green-tinted shadows. No pattern and no gradient:
   readability first. One solid green surface at most on a screen. Written
   last, so it is what a page wears; every value is a token Settings →
   Appearance can change. */

html:has( .qh-report-page ) {
	font-size: var(--qh-text-scale);
}

body:has( .qh-report-page ) {
	background: var(--qh-page);
}

.qh-report-page,
.qh-report,
.qh-form,
.qh-lang {
	font-family: var(--qh-font);
	color: var(--qh-ink-900);
}

/* The letterhead on the page template: the lockup - the mark and the name. */
.qh-report-page > .qh-report-article > .qh-brand {
	margin: 0.5rem 0 1.5rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--qh-sand-200);
}

.qh-report-page > .qh-report-article > .qh-brand::after {
	background: var(--qh-gold-400);
}

.qh-brand-name,
.qh-report-page > .qh-report-article > .qh-brand .qh-brand-name {
	font-family: var(--qh-font);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--qh-green-600);
}

.qh-brand-sub {
	font-weight: 500;
	color: var(--qh-sand-600);
}

.qh-brand .qh-brand-by {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qh-gold-700);
}

.qh-report-page > .qh-report-article > .qh-brand .qh-brand-mark {
	width: 3rem;
	height: 3rem;
}

/* The language switch sits at the right of the letterhead, on the letterhead's
   line, on every page of the fast template - where a reader looks for it,
   and never between a title and its figures (L1a). */
.qh-report-page .qh-report-article {
	position: relative;
}

.qh-report-page .qh-report-article .qh-lang {
	position: absolute;
	/* --qh-paper-pad: the card a dark page lays under the content (WK40). */
	top: calc( 0.5rem + 2px + var(--qh-paper-pad) );
	right: var(--qh-paper-pad);
	margin: 0;
}

.qh-report-page .qh-report-article:has( .qh-lang ) > .qh-brand {
	padding-right: 7.5rem;
}

/* On a phone the switch keeps its own line above the letterhead, so the name
   is never squeezed beside it into three lines (step 18). */
@media (max-width: 480px) {
	.qh-report-page .qh-report-article:has( .qh-lang ) > .qh-brand {
		padding-right: 0;
		padding-top: 3.25rem;
	}
}

/* Headings: the same family, heavier, drawn in a little. */
.qh-report-page .qh-report-title,
.qh-report h2,
.qh-form h2 {
	font-family: var(--qh-font);
	font-weight: var(--qh-heading-weight);
	letter-spacing: -0.02em;
	color: var(--qh-green-600);
}

.qh-report-page .qh-report-title {
	font-size: 2.125rem;
	line-height: 1.15;
	margin: 0 0 1.25rem;
}

.qh-report h2 {
	font-size: 1.75rem;
	line-height: 1.2;
}

/* A statement's own title, under the letterhead, is the page's title. */
.qh-report .qh-brand + h2 {
	font-size: 2.125rem;
	line-height: 1.15;
}

.qh-report h3 {
	font-weight: 650;
	border-bottom-color: var(--qh-sand-200);
}

/* The overline: small, tracked, in gold - the design's one use of capitals. */
.qh-fs-section {
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	color: var(--qh-gold-700);
	border-bottom-color: var(--qh-sand-200);
}

/* A statement is one card. */
.qh-fs {
	padding: 0.25rem 1.25rem 0.75rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: var(--qh-r-tile);
	background: var(--qh-ivory);
	box-shadow: var(--qh-shadow-sm);
}

.qh-fs-grand {
	font-size: 1.0625rem;
}

.qh-fs-row > summary:hover,
.qh-fs-row > summary:focus-visible,
.qh-fs-row[open] > summary {
	border-radius: 8px;
}

/* Figure tiles: white cards, the figure bold and drawn in. */
.qh-tile {
	border-color: var(--qh-sand-200);
	border-radius: var(--qh-r-tile);
	background: var(--qh-ivory);
	box-shadow: var(--qh-shadow-sm);
}

.qh-tile-value {
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Buttons: 12px corners, a darker step on hover, a nudge when pressed. */
.qh-report button,
.qh-report [type="submit"],
.qh-form button,
.qh-form [type="submit"] {
	border-radius: var(--qh-r-control);
	font-family: var(--qh-font);
	transition: background-color 120ms var(--qh-ease), border-color 120ms var(--qh-ease), transform 120ms var(--qh-ease);
}

.qh-report button:active,
.qh-report [type="submit"]:active,
.qh-form button:active,
.qh-form [type="submit"]:active {
	background: var(--qh-green-800);
	border-color: var(--qh-green-800);
	transform: translateY( 1px );
}

.qh-form .qh-button--quiet,
.qh-report .qh-button--quiet {
	border-color: var(--qh-sand-300);
	background: var(--qh-ivory);
	color: var(--qh-green-600);
}

.qh-form .qh-button--quiet:hover,
.qh-report .qh-button--quiet:hover {
	border-color: var(--qh-green-600);
	background: var(--qh-green-50);
	color: var(--qh-green-700);
}

.qh-report :focus-visible,
.qh-form :focus-visible {
	outline: 2px solid var(--qh-gold-500);
	outline-offset: 2px;
}

/* The one strong button of a form: the logo's green. */
.qh-form .qh-button {
	background: var(--qh-green-600);
	color: var(--qh-on-brand);
	box-shadow: var(--qh-shadow-sm);
}

.qh-form .qh-button:hover,
.qh-form .qh-button:focus {
	background: var(--qh-green-700);
	color: var(--qh-on-brand);
}

/* Fields: white, a light hairline, a faint inset; gold when in use. */
.qh-form input[type="text"],
.qh-form input[type="tel"],
.qh-form input[type="email"],
.qh-form input[type="url"],
.qh-form input[type="date"],
.qh-form input[type="number"],
.qh-form input[type="password"],
.qh-form input[type="file"],
.qh-form select,
.qh-form textarea {
	border: 1px solid var(--qh-sand-300);
	border-radius: var(--qh-r-control);
	background-color: var(--qh-ivory);
	box-shadow: var(--qh-shadow-inset);
	color: var(--qh-ink-900);
	font-family: var(--qh-font);
	transition: border-color 120ms var(--qh-ease), box-shadow 120ms var(--qh-ease);
}

.qh-form input:focus,
.qh-form select:focus,
.qh-form textarea:focus {
	border-color: var(--qh-gold-500);
	box-shadow: var(--qh-ring);
	outline: 0;
}

/* Ticks and rounds in the logo's green; the file button like a quiet button. */
.qh-form,
.qh-report {
	accent-color: var(--qh-green-600);
}

.qh-form input[type="file"]::file-selector-button {
	margin-right: 0.75rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--qh-sand-300);
	border-radius: 10px;
	background: var(--qh-sand-50);
	color: var(--qh-green-600);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* A form sits in one white card. */
.qh-report-page .qh-donation-form,
.qh-report-page .qh-steps-form {
	margin-inline: auto;
	padding: 2rem 2.25rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: var(--qh-r-card);
	background: var(--qh-ivory);
	box-shadow: var(--qh-shadow-sm);
}

.qh-form-section {
	font-size: 1.25rem;
	font-weight: var(--qh-heading-weight);
	letter-spacing: -0.01em;
	color: var(--qh-green-600);
	border-top-color: var(--qh-sand-200);
}

/* A supportive note: the gold tint. */
.qh-privacy--block {
	border-color: var(--qh-gold-100);
	border-radius: var(--qh-r-tile);
	background: var(--qh-gold-50);
}

@media screen and ( max-width: 640px ) {
	.qh-report-page .qh-report-title,
	.qh-report .qh-brand + h2 {
		font-size: 1.75rem;
	}

	.qh-report h2 {
		font-size: 1.5rem;
	}

	.qh-tile-value {
		font-size: 1.125rem;
		white-space: nowrap;
	}

	.qh-fs {
		padding: 0.25rem 0.75rem 0.5rem;
	}

	.qh-report-page .qh-donation-form,
	.qh-report-page .qh-steps-form {
		padding: 1.25rem 1rem;
		border-radius: 20px;
	}

	.qh-report .qh-stack tr {
		border-color: var(--qh-sand-200);
		border-radius: var(--qh-r-tile);
		background: var(--qh-ivory);
		box-shadow: var(--qh-shadow-sm);
	}
}

@media print {
	html:has( .qh-report-page ) {
		font-size: 100%;
	}

	body:has( .qh-report-page ) {
		background: #fff;
	}

	.qh-fs,
	.qh-tile,
	.qh-report-page .qh-donation-form,
	.qh-report-page .qh-steps-form {
		box-shadow: none;
		background: #fff;
	}
}

/* ---- the map of centres (CM2) -------------------------------------------- */

/* A card of its own, the map centred in it and sized to the screen: never
   wider than a phone, never taller than most of a window. */
.qh-report .qh-centre-map-panel {
	margin: 1.5rem 0;
	padding: 1rem 1rem 0.75rem;
	border: 1px solid var(--qh-sand-200);
	border-radius: var(--qh-r-card);
	background: var(--qh-ivory);
	text-align: center;
}

.qh-report .qh-centre-map-panel .qh-donor-heading {
	margin: 0 0 0.75rem;
	text-align: left;
}

.qh-report .qh-centre-map {
	display: block;
	width: auto;
	max-width: 100%;
	height: min( 60vh, 28rem );
	margin: 0 auto;
}

.qh-report .qh-centre-map-panel .qh-report-note {
	margin: 0.5rem 0 0;
}

/* A centre's own page: its mark in the circle, in the brand's green. */
.qh-donor-card--centre .qh-donor-avatar,
.qh-donor-card--centre .qh-donor-avatar .qh-donor-hidden-mark {
	color: var(--qh-green-600);
}

.qh-centre-map-land {
	fill: var(--qh-sand-100);
	stroke: var(--qh-sand-300);
	stroke-width: 1;
}

.qh-centre-map-dot {
	fill: var(--qh-green-600);
	stroke: var(--qh-ivory);
	stroke-width: 2;
}

.qh-centre-map a:hover .qh-centre-map-dot,
.qh-centre-map a:focus .qh-centre-map-dot {
	fill: var(--qh-gold-500);
}

/* The map comes closer (CM2c): + and − and the whole country, at its top
   right; shown only when assets/js/qh-map.js runs. The strokes keep their
   width however close the map comes. */
.qh-map-frame {
	position: relative;
}

.qh-map-zoom {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.qh-map-zoom[hidden],
.qh-map-hint[hidden] {
	display: none;
}

.qh-map-zoom .qh-map-zoom-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--qh-sand-200);
	border-radius: 0.625rem;
	background: #fff;
	color: var(--qh-green-600);
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.06 );
	cursor: pointer;
}

/* Every state spelt out, and one class stronger than a theme's own
   button:hover and button:focus, which paint a button their own colour. */
.qh-map-frame .qh-map-zoom .qh-map-zoom-btn:hover,
.qh-map-frame .qh-map-zoom .qh-map-zoom-btn:focus,
.qh-map-frame .qh-map-zoom .qh-map-zoom-btn:active {
	background: #fff;
	color: var(--qh-green-600);
	border-color: var(--qh-sand-200);
	outline: none;
}

.qh-map-frame .qh-map-zoom .qh-map-zoom-btn:hover:not( :disabled ),
.qh-map-frame .qh-map-zoom .qh-map-zoom-btn:focus-visible {
	background: var(--qh-sand-100);
	border-color: var(--qh-green-600);
}

.qh-map-frame .qh-map-zoom .qh-map-zoom-btn:focus-visible {
	outline: 2px solid var(--qh-green-600);
	outline-offset: 2px;
}

.qh-map-frame .qh-map-zoom .qh-map-zoom-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.qh-map-zoom-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.qh-map-frame.is-live .qh-centre-map {
	cursor: zoom-in;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.qh-map-frame.is-closer .qh-centre-map {
	cursor: grab;
	touch-action: none;
}

.qh-map-frame .qh-centre-map a {
	cursor: pointer;
}

/* With the script the drawing fills its card's width, and the view spreads
   to the card's edges as it comes closer, not a narrow strip down the middle. */
.qh-map-frame.is-live .qh-centre-map {
	width: 100%;
	max-width: none;
}

/* Laid over the whole screen. A class, not the browser's full screen, which
   an iPhone gives only to a video. */
.qh-map-frame.is-full {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1rem;
	background: var(--qh-ivory);
}

.qh-map-frame.is-full .qh-centre-map {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

.qh-map-frame.is-full .qh-map-zoom {
	top: 1rem;
	right: 1rem;
}

.qh-map-open,
.qh-map-open body {
	overflow: hidden;
}

.qh-map-zoom-btn .qh-map-zoom-icon--out,
.qh-map-frame.is-full .qh-map-zoom-btn[data-qh-map-zoom="full"] .qh-map-zoom-icon {
	display: none;
}

.qh-map-frame.is-full .qh-map-zoom-btn[data-qh-map-zoom="full"] .qh-map-zoom-icon--out {
	display: block;
}

.qh-centre-map-land,
.qh-centre-map-dot {
	vector-effect: non-scaling-stroke;
}

.qh-map-hint {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	color: var(--qh-sand-600);
}

/* ---- The page's title (PT1) ----------------------------------------------
   Every public page opens the same way: under the letterhead, its title in
   the middle, a short gold rule under it, and one line saying what the page
   is - the way a statement has always been headed. A live page is not given
   today's date there; the foot says when it was drawn. The page template's
   own title and a report's title are the same shape, and where a band
   already names the page (donors, advisors) the template's is not shown
   twice. */
.qh-report-page .qh-report-title,
.qh-report .qh-brand + h2.qh-page-title {
	margin: 0.75rem auto 0;
	max-width: 44rem;
	text-align: center;
	text-wrap: balance;
}

.qh-report-page .qh-report-title::after,
.qh-report .qh-brand + h2.qh-page-title::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin: 0.875rem auto 0;
	border-radius: 3px;
	background: var(--qh-gold-400);
}

.qh-report-page .qh-report-title {
	margin-bottom: 1.75rem;
}

.qh-report .qh-brand + h2.qh-page-title {
	margin-bottom: 1.75rem;
}

.qh-report .qh-brand + h2.qh-page-title + .qh-report-subtitle {
	max-width: 36rem;
	margin: -0.75rem auto 1.75rem;
	font-size: 0.9375rem;
	text-align: center;
	text-wrap: balance;
}

.qh-report-article:has( .qh-honour-hero ) > .qh-report-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* The way back to the glance, under the title of the fund in depth. */
.qh-report .qh-brand + h2.qh-page-title + .qh-an-back {
	margin: -0.75rem 0 1.5rem;
	text-align: center;
}

/* Paper, after everything the screen says about the title (PT1), so it wins. */
@media print {
	/* The line under the title drawn through the date on paper: the title
	   loses its screen margin in print, and the line under it kept its pull. */
	.qh-report .qh-brand + h2.qh-page-title + .qh-report-subtitle {
		margin-top: 0;
	}

	/* A page printed from the browser's own menu rather than the Print
	   button: no address written out after a link (the theme adds them),
	   and no hint that only means something on a screen. */
	.qh-report-page a[href]::after {
		content: none !important;
	}

	.qh-report-page .qh-fs-hint {
		display: none;
	}

	/* The borrower list on paper: a standing may take two lines and the
	   headings may wrap, so the table keeps inside the page's column; the
	   View links mean nothing on paper (step 464). */
	.qh-borrower-table th,
	.qh-borrower-table .qh-standing {
		white-space: normal;
	}

	.qh-borrower-table .qh-col-action {
		display: none;
	}
}

/* The theme's own header and footer around the plugin's pages (P1) keep the
   letterhead's colours: the theme draws its links in pink, which no page of
   the fund uses anywhere else (step 26). */
.page-template-qh-report #site-header a,
.page-template-qh-report #site-footer a,
.page-template-qh-report .site-header a,
.page-template-qh-report .site-footer a {
	color: var(--qh-green-600);
	text-decoration: none;
}

.page-template-qh-report #site-header a:hover,
.page-template-qh-report #site-footer a:hover {
	color: var(--qh-green-700);
}

/* A past date's figures: what in them was corrected later (WK14). */
.qh-later{margin:16px 0;padding:12px 16px;border:1px solid var(--qh-gold-200);border-left:4px solid var(--qh-saffron-500);border-radius:8px;background:var(--qh-gold-50);color:var(--qh-ink);font-size:.875rem;line-height:1.5}
.qh-later p,.qh-later ul{margin:0 0 8px}.qh-later p:last-child{margin:0}
.qh-later ul{padding-left:20px;list-style:disc}.qh-later li{margin:2px 0;font-size:inherit;font-variant-numeric:tabular-nums}
.qh-later-title{font-weight:600;color:var(--qh-saffron-700)}

/* A date in the format Settings chooses (qh-date.js, WK57). */
.qh-date {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.375rem;
	max-width: 100%;
	vertical-align: middle;
}

.qh-field .qh-date,
.qh-form .qh-date,
.qh-public-filters .qh-date {
	display: flex;
	width: 100%;
}

.qh-date > input.qh-date-input {
	flex: 1 1 8rem;
	width: auto;
	min-width: 7.5rem;
	max-width: 100%;
	font-variant-numeric: tabular-nums;
}

.qh-date > .qh-date-native {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.qh-date > .qh-date-pick {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--qh-sand-300);
	border-radius: 10px;
	background: var(--qh-ivory);
	color: var(--qh-green-600);
	cursor: pointer;
}

.qh-date > .qh-date-pick:hover:not( :disabled ),
.qh-date > .qh-date-pick:focus-visible {
	border-color: var(--qh-green-600);
	outline: none;
}

.qh-date > .qh-date-pick:disabled {
	opacity: 0.5;
	cursor: default;
}

.qh-date > .qh-date-note {
	flex: 1 0 100%;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--qh-muted);
}

/* Every drop-down searchable (qh-pick.js, WK52). */
select.qh-combo {
	pointer-events: none;
}

.qh-combo-panel {
	position: absolute;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 0;
	padding: 0.5rem;
	border: 1px solid var(--qh-sand-300);
	border-radius: 12px;
	background: var(--qh-ivory);
	color: var(--qh-ink-900);
	font-size: 0.9375rem;
	line-height: 1.35;
	box-shadow: 0 14px 34px -8px rgba( 15, 77, 58, 0.25 ), 0 2px 6px rgba( 15, 77, 58, 0.08 );
}

.qh-combo-panel.is-sheet {
	position: fixed;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	max-height: 75vh;
	padding: 0.75rem 0.75rem calc( 0.75rem + env( safe-area-inset-bottom ) );
	border-radius: 16px 16px 0 0;
}

.qh-combo-panel .qh-combo-search {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 100%;
	min-height: 2.5rem;
	margin: 0 0 0.375rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--qh-sand-300);
	border-radius: 8px;
	background: var(--qh-ivory);
	color: var(--qh-ink-900);
	font: inherit;
}

.qh-combo-panel .qh-combo-search:focus {
	border-color: var(--qh-green-600);
	outline: 2px solid var(--qh-green-600);
	outline-offset: 0;
}

.qh-combo-list {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: auto;
	list-style: none;
}

.qh-combo-list li {
	margin: 0;
}

.qh-combo-option {
	padding: 0.5rem 0.625rem;
	border-radius: 8px;
	cursor: pointer;
}

.qh-combo-option.is-grouped {
	padding-left: 1.25rem;
}

.qh-combo-option.is-active {
	background: var(--qh-sand-100);
}

.qh-combo-option.is-chosen {
	font-weight: 600;
	color: var(--qh-green-600);
}

.qh-combo-option.is-disabled {
	opacity: 0.45;
	cursor: default;
}

.qh-combo-group {
	padding: 0.5rem 0.625rem 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--qh-sand-600);
}

.qh-combo-none {
	padding: 0.5rem 0.625rem;
	font-size: 0.875rem;
	color: var(--qh-sand-600);
}

html.qh-combo-open,
html.qh-combo-open body {
	overflow: hidden;
}

/* In a row, the note hangs under its box so the row stays level (WK62). */
.qh-date {
	align-items: stretch;
}

.qh-date > .qh-date-pick {
	height: auto;
	min-height: 0;
}

.qh-statement-form .qh-date > .qh-date-note,
.qh-filters .qh-date > .qh-date-note,
.qh-public-filters .qh-date > .qh-date-note,
.qh-search .qh-date > .qh-date-note {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 0.125rem;
	white-space: nowrap;
}

.qh-statement-form:has( .qh-date-note ),
.qh-filters:has( .qh-date-note ),
.qh-public-filters:has( .qh-date-note ),
.qh-search:has( .qh-date-note ) {
	padding-bottom: 1.125rem;
}

/* District, or State / province (WK63). */
.qh-label-words {
	display: inline;
}

/* Two fields side by side line up whatever their labels (WK64): the labels
   share a row, sitting on the boxes; boxes, then notes, share theirs. */
@media ( min-width: 34.01rem ) {
	@supports ( grid-template-rows: subgrid ) {
		.qh-field--split { grid-template-rows: repeat( 4, auto ); row-gap: 0; }
		.qh-field--split > span { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
		.qh-field--split > span > label { align-self: end; }
	}
}

/* Team cards in a row share their lines - name, role, contacts (WK64). */
@supports ( grid-template-rows: subgrid ) {
	.qh-team-member { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: auto minmax( 0, 1fr ); align-items: start; row-gap: 0.125rem; }
	.qh-team-face { grid-row: 1 / span 3; }
	.qh-team-about { display: contents; }
	.qh-team-name, .qh-team-role, .qh-team-contacts { grid-column: 2; }
	.qh-team-contacts { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* Every table with headings sorts by them (qh-sort.js, WK100): a first click
   ascending, a second descending, a third as the page drew it. */
.qh-sortable th.qh-sort-head { cursor: pointer; user-select: none; }
.qh-sortable th.qh-sort-head:hover,
.qh-sortable th.qh-sort-head:focus-visible { color: var(--qh-accent); outline: none; }
.qh-sortable th.qh-sort-head::after { content: "↕"; margin-left: 4px; opacity: .35; font-size: .85em; }
.qh-sortable th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.qh-sortable th[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
@media print {
	.qh-sortable th.qh-sort-head::after { content: none; }
}

/* Every block of figures on a white card, never bare on the page (WK124). */
.qh-report > .qh-table-scroll, .qh-report > table, .qh-report > .qh-chart, .qh-more--wide, .qh-person, .qh-form .qh-identify-form { border: 1px solid var(--qh-sand-200); border-radius: var(--qh-r-tile); background: var(--qh-ivory); box-shadow: var(--qh-shadow-sm); }
.qh-report > .qh-table-scroll, .qh-report > .qh-chart { padding: 0.5rem 1rem; }
.qh-report > table { border-collapse: separate; border-spacing: 0; padding: 0.5rem 1rem; }
.qh-form .qh-identify-form { padding: 1.5rem 1.75rem; }
.qh-form .qh-identify-form fieldset { margin: 0 0 1rem; padding: 0; border: 0; }
.qh-form .qh-identify-form legend { margin: 0 0 0.75rem; padding: 0; font-size: 1.0625rem; font-weight: 600; color: var(--qh-green-600); }
@media screen and ( max-width: 640px ) {
	.qh-report > table.qh-stack, .qh-report > .qh-table-scroll:has( > .qh-stack ) { padding: 0; border: 0; background: none; box-shadow: none; }
}
@media print {
	.qh-report > .qh-table-scroll, .qh-report > table, .qh-report > .qh-chart, .qh-more--wide, .qh-person { box-shadow: none; }
}

/* Bangla is never letter-spaced: it pulls joined letters apart (WK154). */
:lang(bn) { letter-spacing: normal !important; }