/*
 * Transparency and compliance (spec P27).
 *
 * Loaded only on pages that list documents.
 */

.aop-docs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin: 24px 0 32px;
}

.aop-doc {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--global-palette6, #D9D5CC);
	border-radius: var(--aop-radius, 12px);
}

.aop-doc__name {
	margin: 0 0 6px;
	font-size: 1rem;
	line-height: 1.35;
}

.aop-doc__note {
	margin: 0 0 10px;
	font-size: .85rem;
	line-height: 1.45;
	color: var(--global-palette5, #5A6672);
}

/* The reference number is set as text, not only inside the PDF, so it can be
   searched for and quoted. That is the whole reason the spec asks for it. */
.aop-doc__number {
	margin: 0 0 10px;
	padding: 6px 10px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: .85rem;
	word-break: break-all;
	background: var(--global-palette7, #F7F5F0);
	border-radius: var(--aop-radius-sm, 6px);
}

.aop-doc__dates {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 10px;
	margin: 0 0 14px;
	font-size: .85rem;
}

.aop-doc__dates dt {
	font-weight: 600;
	color: var(--global-palette5, #5A6672);
}

.aop-doc__dates dd {
	margin: 0;
}

.aop-doc__link {
	margin: auto 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--global-palette6, #D9D5CC);
}

.aop-doc__link a {
	font-weight: 600;
	text-decoration: none;
}

.aop-doc__link a:hover,
.aop-doc__link a:focus-visible {
	text-decoration: underline;
}

/* Annual reports and accounts */
.aop-reports {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.aop-report {
	padding: 18px 20px;
	margin: 0 0 14px;
	background: #fff;
	border: 1px solid var(--global-palette6, #D9D5CC);
	border-radius: var(--aop-radius, 12px);
}

.aop-report__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: baseline;
	justify-content: space-between;
}

.aop-report__title {
	font-weight: 700;
}

.aop-report__fy {
	margin-left: 8px;
	padding: 2px 8px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--global-palette1, #0B5D4A);
	background: var(--aop-tint, #E6F5F1);
	border-radius: 999px;
}

.aop-report__link {
	font-weight: 600;
	white-space: nowrap;
}

/* Income against expenditure, drawn in CSS. No charting library: this is two
   bars, and a library would be a third-party script on a page whose entire
   purpose is demonstrating that the Society is careful. */
.aop-report__bars {
	margin: 14px 0 0;
}

.aop-report__bar {
	display: grid;
	grid-template-columns: 6.5rem 1fr auto;
	gap: 10px;
	align-items: center;
	margin: 0 0 6px;
	font-size: .85rem;
}

.aop-report__barlabel {
	color: var(--global-palette5, #5A6672);
}

.aop-report__track {
	height: 14px;
	background: var(--global-palette7, #F7F5F0);
	border-radius: 999px;
}

.aop-report__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
}

.aop-report__fill--in {
	background: var(--global-palette1, #0B5D4A);
}

.aop-report__fill--out {
	background: var(--aop-gold, #C8912A);
}

.aop-report__amount {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 600px) {

	.aop-report__bar {
		grid-template-columns: 5rem 1fr;
	}

	.aop-report__amount {
		grid-column: 2;
		justify-self: end;
	}
}