/* StatsDesk extended displays. Colours come from the same variables as the free card. */
.pkstats-grid { display: grid; gap: 1.5em; grid-template-columns: 1fr; }
@media (min-width: 782px) {
	.pkstats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pkstats-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pkstats-topic-nav ul { display: flex; flex-wrap: wrap; gap: 0.25em 1em; list-style: none; margin: 0 0 1em; padding: 0; }
.pkstats-topic-nav a { text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 0.15em; }
.pkstats-topic-nav a[aria-current="page"] { border-bottom-color: var(--pkstats-accent); font-weight: 600; }
.pkstats-chart-multi .pkstats-series .pkstats-line { stroke: var(--pkstats-s, var(--pkstats-series-1)); stroke-width: 2.5; fill: none; }
.pkstats-chart-multi .pkstats-series .pkstats-dot { fill: var(--pkstats-s, var(--pkstats-series-1)); }
.pkstats-chart-multi .pkstats-series-1 { --pkstats-s: var(--pkstats-series-1); }
.pkstats-chart-multi .pkstats-series-2 { --pkstats-s: var(--pkstats-series-2); }
.pkstats-chart-multi .pkstats-series-3 { --pkstats-s: var(--pkstats-series-3); }
.pkstats-chart-multi .pkstats-series-4 { --pkstats-s: var(--pkstats-series-4); }
.pkstats-chart-multi .pkstats-series-5 { --pkstats-s: var(--pkstats-series-5); }
.pkstats-chart-multi .pkstats-series-6 { --pkstats-s: var(--pkstats-series-6); }
.pkstats-chart-multi .pkstats-end-label { fill: var(--pkstats-s, currentColor); font-size: 13px; font-weight: 600; }
.pkstats-chart-multi .pkstats-rule { stroke: currentColor; stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.6; }
.pkstats-chart-multi .pkstats-rule-label { fill: var(--pkstats-muted); font-size: 12px; }
.pkstats-chart-multi .pkstats-range { fill: var(--pkstats-accent); opacity: var(--pkstats-band-opacity); }
.pkstats-toggles { border: 0; margin: 0 0 0.5em; padding: 0; font-size: 0.9em; }
.pkstats-toggles legend { padding: 0; font-weight: 600; }
.pkstats-toggle { margin-right: 1em; white-space: nowrap; }
/* Toggles hide series with CSS only, so the chart works with JavaScript off. */
.pkstats-card:has(input[data-pkstats-series="1"]:not(:checked)) .pkstats-chart-multi .pkstats-series-1,
.pkstats-card:has(input[data-pkstats-series="2"]:not(:checked)) .pkstats-chart-multi .pkstats-series-2,
.pkstats-card:has(input[data-pkstats-series="3"]:not(:checked)) .pkstats-chart-multi .pkstats-series-3,
.pkstats-card:has(input[data-pkstats-series="4"]:not(:checked)) .pkstats-chart-multi .pkstats-series-4,
.pkstats-card:has(input[data-pkstats-series="5"]:not(:checked)) .pkstats-chart-multi .pkstats-series-5,
.pkstats-card:has(input[data-pkstats-series="6"]:not(:checked)) .pkstats-chart-multi .pkstats-series-6 { display: none; }
.pkstats-sparkline { border-top: 3px solid var(--pkstats-accent); padding-top: 0.5em; }
/* KPI tile (design F): label, value in the accent, change with arrow, sparkline, period and next. */
.pkstats-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--pkstats-line); border-top: 1px solid var(--pkstats-line); border-radius: var(--pkstats-radius); background: var(--pkstats-surface); color: inherit; text-decoration: none; box-sizing: border-box; height: 100%; }
a.pkstats-tile:hover, a.pkstats-tile:focus-visible { border-color: var(--pkstats-accent); }
.pkstats-tile-label { font-size: 13px; color: var(--pkstats-muted); }
.pkstats-tile .pkstats-tile-value { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--pkstats-accent-text, var(--pkstats-accent)); }
.pkstats-tile .pkstats-change { margin-top: 0; }
.pkstats-tile .pkstats-chart-compact { height: 36px; }
.pkstats-tile-meta { font-size: 12px; color: var(--pkstats-muted); }
/* Compact tile (design G): six across a homepage row. */
.pkstats-tile-compact { gap: 4px; padding: 14px; }
.pkstats-tile-compact .pkstats-tile-value { font-size: 28px; }
.pkstats-tile-compact .pkstats-chart-compact { height: 32px; }
.pkstats-tile-compact .pkstats-tile-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Inside a block that has its own box, the tile draws no second one (payandbenefits.pro, 5 Nov 2026). */
:is(.pkstats-box-border, .pkstats-box-tint, .pkstats-box-card, .pkstats-box-panel) > .pkstats-tile { border: 0; padding: 0; background: transparent; border-radius: 0; }
/* The value shrinks with a narrow tile rather than being cut off ("1,702,905" at 375px). */
.pkstats-tile { container-type: inline-size; min-width: 0; }
.pkstats-tile .pkstats-tile-value { font-size: clamp(18px, 17cqi, 30px); white-space: nowrap; }
.pkstats-tile-compact .pkstats-tile-value { font-size: clamp(18px, 16cqi, 28px); }
.pkstats-spark-name, .pkstats-spark-source { margin: 0; color: var(--pkstats-muted); font-size: 0.9em; }
.pkstats-spark-figure { margin: 0.1em 0; }
.pkstats-spark-figure .pkstats-figure-value { font-size: 1.8em; font-weight: 700; }
.pkstats-survey-facts, .pkstats-rate-dates { margin: 0 0 0.6em; color: var(--pkstats-muted); font-size: 0.9em; }