/* Shared look for /run/<id>/ plugin pages; matches the catalog (src/app.css). */
:root {
	--bg: #f3f6f5;
	--surface: #ffffff;
	--ink: #1b2a2e;
	--muted: #5a6b6e;
	--line: #d5dedc;
	--line-strong: #b9c6c4;
	--accent: #0e7a72;
	--warn: #b26b12;
	--error: #b3261e;
	--series-1: #0e7a72;
	--series-2: #b26b12;
	--series-3: #4a57a6;
	--series-4: #a3456b;
	--series-5: #5a6b6e;
	--font-display: 'Bricolage Grotesque', system-ui, sans-serif;
	--font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
	--font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235a6b6e' stroke-width='1.6'/%3E%3C/svg%3E");
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #142024;
		--surface: #1a292e;
		--ink: #dce6e4;
		--muted: #93a6a8;
		--line: #2b3d42;
		--line-strong: #3b5157;
		--accent: #3fb8ac;
		--warn: #e0a24a;
		--error: #f2877f;
		--series-1: #3fb8ac;
		--series-2: #e0a24a;
		--series-3: #8d98e0;
		--series-4: #e08bb0;
		--series-5: #93a6a8;
		--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2393a6a8' stroke-width='1.6'/%3E%3C/svg%3E");
		color-scheme: dark;
	}
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font-body); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plugin { max-width: 1100px; padding: 20px clamp(16px, 4vw, 40px) 48px; }
.back { display: inline-block; margin-bottom: 14px; color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.back:hover { color: var(--accent); }
h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; margin: 0 0 6px; }
.lede { color: var(--muted); max-width: 70ch; margin: 0 0 20px; }
form.params { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 18px; margin: 0 0 16px; }
form.params label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; }
select {
	appearance: none; -webkit-appearance: none;
	padding-right: 30px; text-overflow: ellipsis; cursor: pointer;
	background-image: var(--chevron); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px;
}
select:hover, input:hover { border-color: var(--muted); }
textarea { width: 100%; font-family: var(--font-mono); font-size: 0.82rem; }
.actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
button.primary { font: inherit; font-weight: 700; padding: 8px 18px; border: 0; border-radius: 6px; background: var(--accent); color: var(--surface); cursor: pointer; }
button.primary:disabled { opacity: 0.5; cursor: progress; }
button.secondary { font: inherit; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; }
#status { color: var(--muted); font-size: 0.9rem; }
#status.error { color: var(--error); }
.results { display: grid; gap: 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.panel h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; margin: 0 0 8px; }
pre.output { margin: 0; overflow: auto; max-height: 50vh; font: 0.8rem/1.45 var(--font-mono); }
table.stats { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
table.stats td, table.stats th { padding: 4px 14px 4px 0; text-align: left; border-bottom: 1px solid var(--line); }
table.stats td.num { text-align: right; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .axis { stroke: var(--line-strong); }
.chart .tick { fill: var(--muted); font-size: 11px; }
.chart .label { fill: var(--muted); font-size: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.legend span::before { content: ''; display: inline-block; width: 12px; height: 3px; margin-right: 6px; vertical-align: middle; background: currentColor; }
footer.notice { margin-top: 32px; color: var(--muted); font-size: 0.82rem; max-width: 80ch; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }