.qps { --qps-up: #1a7f4b; --qps-down: #c0392b; --qps-muted: #6b7280; --qps-line: #e5e7eb; --qps-pin: #f3f6fb; font-variant-numeric: tabular-nums; }
.qps-scroll { overflow-x: auto; margin: 0 0 2rem; }
.qps-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; }
.qps-table caption { caption-side: top; text-align: left; font-weight: 600; color: inherit; padding: 0 0 .5rem; } /* the theme (Bootstrap) puts captions below tables in grey */
.qps-table th, .qps-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--qps-line); text-align: left; vertical-align: top; }
.qps-table thead th { font-weight: 600; color: var(--qps-muted); font-size: .85rem; }
.qps-table .num { text-align: right; white-space: nowrap; }
.qps-table tbody th { font-weight: 500; }
.qps-pinned { background: var(--qps-pin); }
.qps-id { display: block; font-size: .75rem; color: var(--qps-muted); font-weight: 400; }
.qps-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; background: var(--qps-muted); }
.qps-up { background: var(--qps-up); }
.qps-down { background: var(--qps-down); }
.qps-note { color: var(--qps-muted); font-size: .85rem; }

/* Same column widths in every table so the AS4 and API tables line up; the provider column takes the rest.
   Sized for the longest English and Swedish texts. Narrower screens keep the automatic layout and scroll. */
@media (min-width: 62rem) {
	.qps-table { table-layout: fixed; }
	.qps-table thead th:nth-child(2) { width: 5rem; }                       /* Country */
	.qps-table thead th:nth-child(3) { width: 9rem; }                       /* Now */
	.qps-table thead th:nth-child(n+4):nth-child(-n+7) { width: 5.5rem; }   /* 24 h, 7 d, 30 d, 90 d */
	.qps-table thead th:nth-child(8) { width: 9.5rem; }                     /* Avg. response (24 h) */
}