.balance-sheet {
	margin-bottom: var(--SpacingLarge);

	& h3 {
		--FontWeight: 740;
	}

	&>section {
		&>:is(header, div)+* {
			margin-top: var(--SpacingBroad);
		}

		& article {
			&+article {
				margin-top: var(--SpacingThinner);
			}

			&:has(details[open])+article {
				margin-top: var(--SpacingBroadest);
			}
		}

		&>*>span {
			--ScaleLevel: var(--Huger);

			@media (min-width: 600px) {
				--ScaleLevel: var(--Hugest);
			}
		}

		&+& {
			margin-top: var(--SpacingBroadest);
		}
	}

	& :is(article, footer) {
		display: grid;
		gap: var(--SpacingThinnest) var(--SpacingThinner);
		grid-template-columns: 1fr auto;
		grid-template-rows: 1fr auto;
		grid-template-areas: 
			"title amount"
			"desc  amount";
		align-items: last baseline;

		&>* {
			margin: 0;
		}

		& h3, & h5 {
			grid-area: title;
		}

		& :is(h3, h5)+small {
			grid-area: desc;
			margin: 0;

		}

		&>span {
			--FontWeight: 600;
			text-align: right;
			font-family: "PP Neue Montreal Mono";
			grid-area: amount;

			& small {
				display: none;
				opacity: 0.4;
				font-size: 0.4125em;
				font-weight: 700;
				margin-left: 0.5em;
			}
		}

		& small {
			--ScaleLevel: var(--Short);
			display: flex;
			align-items: last baseline;

			&::after {
				content: "";
				flex-grow: 1;
				margin-left: var(--Row);
			}

			&:not(:has(~details))::after {
				border-bottom: 1px dashed;
			}
		}
	}

	& article {
		&:has(details:not([open])) summary {
			cursor: s-resize;
		}
		&:has(details[open]) summary {
			cursor: n-resize;
		}
		&:has(details[open]) summary>small::after {
			border-bottom: 3px solid;
		}
		&:has(details[open]):not(:has(+footer)) {
			padding-bottom: var(--SpacingThinner);
			border-bottom: 3px solid;
		}

	}

	& footer {
		padding-top: var(--SpacingThinner);
		border-top: 6px solid;
	}

	& details {
		display: contents;

		& article {
			border: none;
			padding: 0;
			row-gap: 0;

			&+article {
				margin-top: var(--SpacingThinnest);
			}
		}

		@supports selector(::details-content) {
			&::details-content {
				grid-column: 1 / -1;
			}
		}

		@supports not selector(::details-content) {
			& div {
				grid-column: 1 / -1;
			}
		}

		&>div {
			margin-top: var(--SpacingThinnest);
			margin-bottom: var(--Row);
		}

		& span {
			--FontWeight: 500;
		}

		& summary {
			display: contents;

			&>:first-child::before {
				grid-area: arrow;
				content: "►";
				line-height: 1;
				font-size: 0.6125em;
				position: relative;
				top: -2px;
			}

			&>small {
				--FontWeight: 540;
			}
		}

		&:where([open]) {
			& summary>:first-child::before {
				content: "▼";
			}
		}

	}

}