/*
 * PublisherKits StatsDesk - front end.
 * Fonts and text colour are always inherited. Every colour is a custom property
 * whose default points at the theme.json presets, with a fallback for themes
 * without them (Divi included). A brand accent set in Settings overrides the
 * accent through --pkstats-brand. Chart SVG reads the same variables.
 * Fallbacks are chosen for 3:1 against white (lines, WCAG 1.4.11) and the badge
 * text colours for 4.5:1 (text, 1.4.3).
 */
.pkstats {
	/* Shared tokens (display rules, 5 Nov 2026): a theme may set --pk-accent, --pk-radius,
	   --pk-surface, --pk-page and the fonts; the plugin's own brand setting still wins. */
	--pkstats-accent: var(--pkstats-brand, var(--pk-accent, var(--wp--preset--color--primary, var(--wp--preset--color--accent, var(--td_theme_color, #1f4e8c)))));
	--pkstats-accent-tint: rgba(31, 78, 140, 0.06);
	--pkstats-radius: var(--pk-radius, 12px);
	--pkstats-surface: var(--pk-surface, #fff);
	--pkstats-caution: #7a4d00;
	--pkstats-series-1: var(--pkstats-accent);
	--pkstats-series-2: var(--wp--preset--color--secondary, #b04a17);
	--pkstats-series-3: var(--wp--preset--color--tertiary, #2f7d4f);
	--pkstats-series-4: #6b3fa0;
	--pkstats-series-5: #8a5a00;
	--pkstats-series-6: #3b6e8f;
	--pkstats-muted: var(--wp--preset--color--contrast-2, #5f6368);
	--pkstats-line: rgba(0, 0, 0, 0.12);
	--pkstats-band-opacity: 0.18;
	--pkstats-badge-provisional: #8a5a00;
	--pkstats-badge-flash: #8c1d1d;
	--pkstats-badge-revised: #1f4e8c;
	--pkstats-badge-unverified: #8c1d1d;
	--pkstats-banner-bg: rgba(138, 90, 0, 0.08);
	margin: 0 0 1.5em;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.pkstats {
		--pkstats-line: color-mix(in srgb, currentColor 16%, transparent);
		--pkstats-accent-tint: color-mix(in srgb, var(--pkstats-accent) 12%, var(--pkstats-surface));
	}
}
span.pkstats { margin: 0; }
.pkstats-title { margin-bottom: 0.5em; }
.pkstats-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--pkstats-line); border-radius: var(--pkstats-radius); background: var(--pkstats-surface); box-sizing: border-box; font-family: var(--pk-font-body, inherit); }
.pkstats-card > * { margin-top: 0; margin-bottom: 0; }
.pkstats-view-card { height: calc(100% - 1.5em); }
.pkstats-view-card > .pkstats-card { height: 100%; }
.pkstats-card > .pkstats-definition { font-size: 12px; }
/* Headline row: series and period left, the value (largest text) and its change right. */
.pkstats-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pkstats-card-title { min-width: 0; }
.pkstats-headline { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.pkstats-card-period { margin: 2px 0 0; font-size: 12px; color: var(--pkstats-muted); }
.pkstats-card-figure { text-align: right; flex: none; }
.pkstats-card-figure .pkstats-figure-value { display: block; font-size: 28px; line-height: 1; }
.pkstats-change { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--pkstats-muted); white-space: nowrap; }
.pkstats-arrow { flex: none; }
.pkstats-caution { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pkstats-caution); }
.pkstats-caution a { color: inherit; }
.pkstats-info { flex: none; }
.pkstats-fact { padding: 14px; border-radius: 8px; background: var(--pkstats-accent-tint); font-size: 14px; line-height: 1.5; }
.pkstats-card .pkstats-summary { font-size: 14px; line-height: 1.5; color: inherit; }
.pkstats-chart-compact { height: 110px; overflow: hidden; }
.pkstats-chart .pkstats-area { fill: var(--pkstats-accent-tint); stroke: none; }
.pkstats-chart-compact .pkstats-line { stroke-width: 2; }
.pkstats-chart-range { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--pkstats-muted); }
/* One source line: producer and code, next release; Data, CSV and Image right. */
.pkstats-source-line { margin-top: auto !important; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--pkstats-line); font-size: 12px; color: var(--pkstats-muted); }
.pkstats-links { display: flex; gap: 12px; align-items: center; }
.pkstats-links a, .pkstats-links button { color: var(--pkstats-accent-text, var(--pkstats-accent)); font-weight: 600; font-size: 12px; }
.pkstats-links button { background: none; border: 0; padding: 0; font-family: inherit; text-decoration: underline; cursor: pointer; }
.pkstats-delayed { color: var(--pkstats-caution); }
.pkstats-details > summary { font-size: 12px; color: var(--pkstats-muted); }
.pkstats-tier-medium .pkstats-chart-compact { height: 80px; }
/* Next releases as date tiles. */
.pkstats-upcoming { list-style: none; margin: 0; padding: 0; }
.pkstats-upcoming-item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--pkstats-line); }
.pkstats-datetile { flex: none; display: inline-flex; flex-direction: column; align-items: center; width: 48px; height: 52px; border-radius: 8px; overflow: hidden; border: 1px solid var(--pkstats-line); background: var(--pkstats-surface); }
.pkstats-datetile-month { width: 100%; text-align: center; background: var(--pkstats-accent); color: var(--pkstats-on-accent, #fff); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 0; }
.pkstats-datetile-day { flex: 1; display: flex; align-items: center; font-size: 20px; font-weight: 700; }
.pkstats-upcoming-text { min-width: 0; display: flex; flex-direction: column; }
.pkstats-upcoming-what { font-size: 14px; font-weight: 600; line-height: 1.35; }
.pkstats-upcoming-meta { font-size: 12px; color: var(--pkstats-muted); margin-top: 2px; }
.pkstats-definition, .pkstats-summary, .pkstats-revised { margin: 0 0 0.6em; color: var(--pkstats-muted); font-size: 0.92em; }
.pkstats-summary { color: inherit; }
/* Kept for themes that style it; the card now shows a one-line caution instead. */
.pkstats-banner { margin: 0 0 0.6em; padding: 0.4em 0.6em; background: var(--pkstats-banner-bg); border-left: 3px solid var(--pkstats-badge-provisional); font-size: 0.9em; }
.pkstats-figure { margin: 0.2em 0 0.4em; }
.pkstats-figure-value { font-size: 2.2em; font-weight: 700; line-height: 1.1; color: var(--pkstats-accent-text, var(--pkstats-accent)); }
.pkstats-figure-change { color: var(--pkstats-muted); margin-left: 0.4em; }
.pkstats-chart-wrap { margin: 0.4em 0 0.6em; }
.pkstats-chart { width: 100%; height: auto; display: block; overflow: visible; }
.pkstats-chart-spark { max-width: 220px; }
.pkstats-chart .pkstats-grid { stroke: var(--pkstats-line); stroke-width: 1; }
.pkstats-chart .pkstats-axis { fill: var(--pkstats-muted); font-size: 12px; }
.pkstats-chart .pkstats-line { fill: none; stroke: var(--pkstats-series-1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pkstats-chart .pkstats-band { fill: var(--pkstats-series-1); fill-opacity: var(--pkstats-band-opacity); stroke: none; }
.pkstats-chart .pkstats-band-bar { stroke: var(--pkstats-series-1); stroke-opacity: 0.5; stroke-width: 6; }
.pkstats-chart .pkstats-bar { fill: var(--pkstats-series-1); }
.pkstats-chart .pkstats-bar.pkstats-partial { fill-opacity: 0.4; stroke: var(--pkstats-series-1); stroke-dasharray: 3 2; }
.pkstats-chart .pkstats-dot { fill: var(--pkstats-series-1); }
.pkstats-chart .pkstats-dot.pkstats-partial { fill: #fff; stroke: var(--pkstats-series-1); stroke-width: 2; }
.pkstats-chart .pkstats-end-label { fill: currentColor; font-size: 13px; font-weight: 700; }
.pkstats-chart .pkstats-break { stroke: var(--pkstats-muted); stroke-dasharray: 4 3; stroke-width: 1.5; }
.pkstats-chart .pkstats-break-label { fill: var(--pkstats-muted); font-size: 11px; }
.pkstats-badge { display: inline-block; font-size: 0.6em; line-height: 1.6; padding: 0 0.55em; border-radius: 999px; border: 1px solid currentColor; vertical-align: middle; white-space: nowrap; font-weight: 600; }
.pkstats-badge-provisional { color: var(--pkstats-badge-provisional); }
.pkstats-badge-flash { color: var(--pkstats-badge-flash); }
.pkstats-badge-revised { color: var(--pkstats-badge-revised); }
.pkstats-badge-unverified { color: var(--pkstats-badge-unverified); }
.pkstats-details { margin: 0.4em 0; }
.pkstats-details > summary { cursor: pointer; font-size: 0.9em; }
.pkstats-table-wrap { overflow-x: auto; }
.pkstats-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.pkstats-table caption { text-align: left; font-weight: 600; margin-bottom: 0.3em; }
.pkstats-table th, .pkstats-table td { text-align: left; padding: 0.4em 0.6em; border-bottom: 1px solid var(--pkstats-line); vertical-align: top; }
.pkstats-table .pkstats-suppressed td { font-style: italic; }
/* Latest releases: compact, and stacked as small cards in a narrow column or on a phone. */
.pkstats-view-releases { container-type: inline-size; }
.pkstats-releases { font-size: 13px; }
.pkstats-releases thead th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--pkstats-muted); white-space: nowrap; }
.pkstats-releases td { white-space: nowrap; }
.pkstats-releases th[scope="row"] { font-weight: 600; min-width: 10em; }
.pkstats-releases .pkstats-change { margin-top: 0; }
@container (max-width: 760px) {
	/* Name and value on one line; period, change and next release on a small line under them. */
	.pkstats .pkstats-releases, .pkstats .pkstats-releases tbody { display: block; width: auto; border: 0; }
	.pkstats .pkstats-releases thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.pkstats .pkstats-releases tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; padding: 10px 0; border: 0; border-top: 1px solid var(--pkstats-line); }
	.pkstats .pkstats-releases tr th, .pkstats .pkstats-releases tr td { display: block; border: 0; padding: 0; min-width: 0; white-space: normal; background: none; }
	.pkstats .pkstats-releases tr th[scope="row"] { order: 1; flex: 1 1 0; font-size: 14px; }
	.pkstats .pkstats-releases tr .pkstats-r-value { order: 2; flex: 0 0 auto; text-align: right; font-weight: 700; font-size: 15px; }
	.pkstats .pkstats-releases tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
	.pkstats .pkstats-releases tr .pkstats-r-period, .pkstats .pkstats-releases tr .pkstats-r-change, .pkstats .pkstats-releases tr .pkstats-r-next, .pkstats .pkstats-releases tr .pkstats-r-status { order: 4; font-size: 12px; color: var(--pkstats-muted); }
	.pkstats .pkstats-releases tr .pkstats-r-next::before { content: attr(data-label) " "; }
	.pkstats .pkstats-releases tr .pkstats-r-released, .pkstats .pkstats-releases tr td:empty { display: none; }
}

.pkstats-releases th[data-pkstats-sort] { cursor: pointer; }
.pkstats-provenance { font-size: 0.85em; color: var(--pkstats-muted); margin-top: 0.4em; }
.pkstats-provenance-lines { list-style: none; margin: 0; padding: 0; }
.pkstats-provenance-lines li { margin: 0.1em 0; }
.pkstats-actions { margin: 0.5em 0 0; }
.pkstats-download-image, .pkstats-get-data { font: inherit; font-size: 0.95em; }
.pkstats-key-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: 0.8em 1.2em; margin: 0; }
.pkstats-kf-item dt { font-size: 0.9em; color: var(--pkstats-muted); }
.pkstats-kf-item dd { margin: 0; }
.pkstats-kf-value { font-size: 1.6em; font-weight: 700; color: var(--pkstats-accent-text, var(--pkstats-accent)); }
.pkstats-kf-meta { display: block; font-size: 0.8em; color: var(--pkstats-muted); }
.pkstats-countdown-days { font-weight: 700; color: var(--pkstats-accent-text, var(--pkstats-accent)); }
.pkstats-stale-note { color: var(--pkstats-badge-flash); }
.pkstats-refused { border: 1px dashed var(--pkstats-badge-flash); padding: 0.4em 0.6em; font-size: 0.85em; }
.pkstats-breaks { font-size: 0.85em; color: var(--pkstats-muted); }
.pkstats-disclaimer, .pkstats-updated { font-size: 0.85em; margin-top: 0.6em; }
@media (prefers-reduced-motion: no-preference) { .pkstats a { transition: opacity 0.15s; } }
.pkstats-more { margin-top: 0.8em; font-weight: 600; }
.pkstats-more a { color: var(--pkstats-accent-text, var(--pkstats-accent)); }

/*
 * Box styles (Settings > Display > Box style, or box="..." on any display), mirrored from
 * DiaryDesk 0.1.0-dev.6. They use the accent and line colours, so they follow Colours.
 */
.pkstats-box-border, .pkstats-box-tint, .pkstats-box-card { padding: 1em 1.25em; border-radius: 8px; }
.pkstats-box-border { border: 1px solid var(--pkstats-line); }
.pkstats-box-tint { background: var(--pkstats-accent-tint); }
.pkstats-box-card { border: 1px solid var(--pkstats-line); border-top: 4px solid var(--pkstats-accent); background: var(--pkstats-surface, transparent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.pkstats-box-border > .pkstats-title, .pkstats-box-tint > .pkstats-title, .pkstats-box-card > .pkstats-title { margin-top: 0; }
/* Panel box (DiaryDesk 0.1.0-dev.11): a plain card with no accent rule, for one accent per page. */
.pkstats-box-panel { background: var(--pkstats-surface, #fff); border: 1px solid var(--pkstats-line); border-radius: 12px; padding: 24px; }
.pkstats-box-panel > .pkstats-head .pkstats-title { font-size: 1.5em; font-weight: 400; }
/* Head and foot (DiaryDesk 0.1.0-dev.11): title with "All N figures" or a count; key line and "Show N more". */
.pkstats-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: .4em; }
.pkstats-head .pkstats-title { margin: 0; }
.pkstats-count { font-size: 13px; opacity: .75; }
.pkstats-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: .8em; padding-top: .8em; border-top: 1px solid var(--pkstats-line); }
.pkstats-foot .pkstats-legend { margin: 0; }
.pkstats-all, .pkstats-show-more { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--pkstats-accent-text, var(--pkstats-accent)); text-decoration: underline; cursor: pointer; }
.pkstats .pkstats-extra { display: none !important; }
/* Key-line dots: solid = a figure as published; dashed = may still change; hollow = not yet checked. */
.pkstats .pkstats-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50% !important; box-sizing: border-box; border: 2px solid var(--pkstats-accent); background: var(--pkstats-accent); vertical-align: middle; flex: none; }
.pkstats .pkstats-dot-provisional { background: transparent; border-style: dashed; border-color: var(--pkstats-badge-provisional); }
.pkstats .pkstats-dot-flash { background: transparent; border-style: dashed; border-color: var(--pkstats-badge-flash); }
.pkstats .pkstats-dot-revised { background: var(--pkstats-badge-revised); border-color: var(--pkstats-badge-revised); }
.pkstats .pkstats-dot-unverified { background: transparent; border-color: var(--pkstats-badge-unverified); }
.pkstats-legend { font-size: 0.8em; opacity: 0.9; margin: 0.9em 0 0; display: flex; flex-wrap: wrap; gap: 0.35em 1.1em; }
.pkstats-legend-item { white-space: normal; display: inline-flex; align-items: center; gap: 6px; }