/* Superb Area Stats. Colours are set in Settings > Area Stats > Branding (inline variables). */
.sdas {
	--sdas-accent: #1f6f8b;
	--sdas-ink: #1f2a30;
	--sdas-muted: #5f6b73;
	--sdas-surface: #f4f6f7;
	--sdas-border: #dde3e6;
	--sdas-up: #1f7a4d;
	--sdas-down: #b3261e;
	--sdas-radius: 10px;
	color: var(--sdas-ink);
	margin: 2rem 0;
}
.sdas__title { margin: 0 0 1rem; }
/* Tiles size themselves off the space available, so the block works in a full-width
   section or a narrow column without needing container queries. Container queries were
   removed in 1.1.1: container-type on this element made some page builders reserve far
   more vertical space than the block uses. See readme. */
.sdas__tiles {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(max(170px, calc((100% - 3rem) / 4)), 1fr));
}
/* Keep it to two across on tablets rather than an awkward three. */
@media (min-width: 700px) and (max-width: 1023px) { .sdas__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sdas__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sdas__tile {
	background: var(--sdas-surface);
	border-top: 4px solid var(--sdas-accent);
	border-radius: var(--sdas-radius);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.sdas__label { font-size: .875rem; font-weight: 600; }
.sdas__value { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sdas__value small { font-size: .5em; font-weight: 600; }
.sdas__value.is-up { color: var(--sdas-up); }
.sdas__value.is-down { color: var(--sdas-down); }
.sdas__note { font-size: .8125rem; color: var(--sdas-muted); }
.sdas__tables {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}
.sdas__table { width: 100%; border-collapse: collapse; border: 0; margin: 0; background: transparent; font-variant-numeric: tabular-nums; }
/* Neutralise common theme table styles (zebra stripes, shaded first column, uppercase headers). */
.sdas .sdas__table tr, .sdas .sdas__table th, .sdas .sdas__table td { background: transparent; border-left: 0; border-right: 0; border-top: 0; text-transform: none; letter-spacing: normal; color: inherit; }
.sdas__table caption { text-align: left; font-weight: 700; font-size: 1.125rem; line-height: 1.3; padding-bottom: .5rem; }
.sdas__table th, .sdas__table td { font-size: 1rem; line-height: 1.4; padding: .6rem .5rem; border-bottom: 1px solid var(--sdas-border); text-align: left; }
.sdas__table td { text-align: right; white-space: nowrap; }
.sdas__table tbody th { font-weight: 600; }
.sdas__table thead th { font-size: .8125rem; color: var(--sdas-muted); }
.sdas__table thead th:not(:first-child) { text-align: right; }
.sdas__muted { color: var(--sdas-muted); font-size: .875rem; }
.sdas__sources { margin-top: 1.25rem; font-size: .75rem; color: var(--sdas-muted); line-height: 1.5; }
.sdas__sources a { color: inherit; }
.sdas--plain-change .sdas__value.is-up, .sdas--plain-change .sdas__value.is-down { color: var(--sdas-ink); }
/* "Same as the site headings": borrow the theme's heading font by name where the theme exposes one. */
.sdas--heading-figures .sdas__value,
.sdas--heading-titles .sdas__table caption,
.sdas--heading-titles .sdas__title { font-family: var(--wp--preset--font-family--heading, var(--e-global-typography-primary-font-family)); }
/* Fonts linked in Settings > Area Stats > Branding. Undefined variables fall back to the inherited font. */
.sdas[style*="--sdas-font-figures"] .sdas__value { font-family: var(--sdas-font-figures); }
.sdas[style*="--sdas-font-titles"] .sdas__table caption,
.sdas[style*="--sdas-font-titles"] .sdas__title { font-family: var(--sdas-font-titles); }