/*
 * Honeypot Viewer.
 *
 * Loaded on the front end only where the shortcode appears, and in the admin on
 * this plugin's own screen. Everything is scoped under .hpv-wrap or .hpv-admin so
 * it cannot reach the rest of a theme.
 *
 * Colours come from custom properties with conservative fallbacks, so a theme can
 * retune the panel to match itself without touching this file. The chart marks
 * themselves are inline SVG fills from the plugin's validated blue ramp and are
 * deliberately not themeable: they carry meaning.
 */

.hpv-wrap {
	--hpv-ink: #1c1b18;
	--hpv-ink-muted: #6b6a64;
	--hpv-surface: #ffffff;
	--hpv-surface-sunk: #f7f6f3;
	--hpv-line: #e1e0d9;
	--hpv-radius: 6px;

	color: var(--hpv-ink);
	font-size: 15px;
	line-height: 1.5;
}

.hpv-heading {
	margin: 0 0 0.35em;
}

.hpv-intro {
	margin: 0 0 1.5em;
	max-width: 68ch;
	color: var(--hpv-ink-muted);
}

/* ---- Headline tiles ---------------------------------------------------- */

.hpv-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0 0 24px;
}

.hpv-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	background: var(--hpv-surface-sunk);
	border: 1px solid var(--hpv-line);
	border-radius: var(--hpv-radius);
}

.hpv-tile-value {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.hpv-tile-label {
	font-size: 13px;
	color: var(--hpv-ink-muted);
}

/* ---- Chart panels ------------------------------------------------------ */

.hpv-charts {
	display: grid;
	gap: 20px;
}

.hpv-wrap .hpv-panel {
	padding: 18px;
	background: var(--hpv-surface);
	border: 1px solid var(--hpv-line);
	border-radius: var(--hpv-radius);
}

/*
 * Colour has to be stated, not inherited. A dark theme sets its own heading and
 * body colours, and these panels have a light surface of their own — inheriting
 * white text onto a white card is how this ends up invisible. The theme's
 * typography is left alone so the panels still look like part of the site.
 */
.hpv-wrap .hpv-panel > h2,
.hpv-wrap .hpv-panel > h3 {
	margin: 0 0 0.25em;
	font-size: 17px;
	color: var(--hpv-ink);
}

.hpv-wrap .hpv-panel,
.hpv-wrap .hpv-panel p,
.hpv-wrap .hpv-panel li,
.hpv-wrap .hpv-panel td,
.hpv-wrap .hpv-panel th,
.hpv-wrap .hpv-tile,
.hpv-wrap .hpv-tile span {
	color: var(--hpv-ink);
}

.hpv-wrap .hpv-panel .hpv-chart-note,
.hpv-wrap .hpv-panel .hpv-legend,
.hpv-wrap .hpv-panel .hpv-legend li,
.hpv-wrap .hpv-chart-data > summary,
.hpv-wrap .hpv-tile-label,
.hpv-wrap .hpv-empty {
	color: var(--hpv-ink-muted);
}

.hpv-chart-note {
	margin: 0 0 14px;
	max-width: 74ch;
	font-size: 13px;
	color: var(--hpv-ink-muted);
}

/*
 * The SVGs carry a viewBox and no intrinsic size, so they would otherwise scale
 * to whatever the container allows. Capping the width keeps a chart from being
 * blown up to billboard size inside a wide theme container.
 */
.hpv-chart {
	display: block;
	width: 100%;
	max-width: 840px;
	height: auto;
}

.hpv-wrap .hpv-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0 0 12px;
	padding: 0;
	font-size: 13px;
	list-style: none;
}

/* Themes hang bullets off ::before as well as off list-style. */
.hpv-wrap .hpv-legend > li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hpv-wrap .hpv-legend > li::before,
.hpv-wrap .hpv-legend > li::marker {
	content: none;
}

.hpv-swatch {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 2px;
	flex: 0 0 auto;
}

.hpv-empty {
	margin: 0;
	padding: 24px 0;
	color: var(--hpv-ink-muted);
	font-style: italic;
}

/* ---- Data tables ------------------------------------------------------- */

.hpv-chart-data {
	margin-top: 14px;
	font-size: 13px;
}

.hpv-chart-data > summary {
	cursor: pointer;
	color: var(--hpv-ink-muted);
}

.hpv-no-tables .hpv-chart-data {
	display: none;
}

/*
 * Wide content scrolls inside its own box. The page body must never scroll
 * sideways because a table had too many columns.
 */
.hpv-chart-data {
	overflow-x: auto;
}

.hpv-table {
	width: 100%;
	margin-top: 10px;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.hpv-table th,
.hpv-table td {
	padding: 6px 10px;
	text-align: left;
	border-bottom: 1px solid var(--hpv-line);
}

.hpv-table th {
	font-weight: 600;
	white-space: nowrap;
}

.hpv-table tbody tr:nth-child(odd) {
	background: var(--hpv-surface-sunk);
}

/* ---- Provenance -------------------------------------------------------- */

.hpv-updated {
	margin: 18px 0 0;
	font-size: 13px;
	color: var(--hpv-ink-muted);
}

.hpv-stale {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	background: #fdf3d8;
	color: #6b4f05;
}

.hpv-note {
	padding: 12px 14px;
	border-left: 4px solid #dba617;
	background: #fdf3d8;
	color: #4a3703;
}

/* ---- Dark themes ------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.hpv-wrap {
		--hpv-ink: #f0efec;
		--hpv-ink-muted: #a9a7a0;
		--hpv-surface: #1d1d1b;
		--hpv-surface-sunk: #262624;
		--hpv-line: #3a3a37;
	}

	.hpv-stale,
	.hpv-note {
		background: #3a2f0d;
		color: #f6e8bf;
	}
}

/* ---- Admin screen ------------------------------------------------------ */

.hpv-admin .hpv-panel {
	max-width: 900px;
	margin: 0 0 20px;
	padding: 4px 20px 20px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.hpv-admin .hpv-connect th {
	width: 180px;
}

.hpv-admin .hpv-check {
	display: block;
	margin: 0 0 4px;
}

.hpv-admin .hpv-warn {
	padding: 10px 12px;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
}

.hpv-admin .hpv-panel code {
	word-break: break-all;
}

/* The preview renders the front-end markup inside the admin. */
.hpv-admin .hpv-wrap {
	--hpv-surface: #fff;
	--hpv-surface-sunk: #f6f7f7;
	--hpv-line: #dcdcde;
}