/**
 * Correlation calculator styles.
 *
 * Loaded only on posts and pages containing [dq_correlation].
 * Everything is scoped under .dq-corr so it cannot leak into the theme.
 * Colours read the theme tokens first and fall back to DataQuince blue.
 */

.dq-corr {
	--c-accent: var(--dq-accent, #0066cc);
	--c-accent-soft: rgba(0, 102, 204, .10);
	--c-ink: var(--dq-body, #16202b);
	--c-muted: var(--dq-muted, #5b6b7c);
	--c-line: var(--dq-line, #dde4ec);
	--c-surface: var(--dq-surface, #fff);
	--c-surface-2: var(--dq-surface-alt, #f6f9fc);
	--c-pos: #0f8a5f;
	--c-neg: #c0392b;
	--radius: 10px;
	color: var(--c-ink);
	font-size: 17px;
	line-height: 1.7;
}

.dq-corr * { box-sizing: border-box; }
.dq-corr h2 { font-size: 1.55em; line-height: 1.25; margin: 2.2em 0 .6em; }
.dq-corr h3 { font-size: 1.18em; line-height: 1.3; margin: 1.8em 0 .5em; }
.dq-corr p { margin: 0 0 1.1em; }
.dq-corr ul,
.dq-corr ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.dq-corr li { margin-bottom: .45em; }
.dq-corr code {
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-radius: 4px;
	padding: .08em .38em;
	font-size: .9em;
}

/* ---- tool shell ---- */
.dq-corr .dqc-tool {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	margin: 2em 0 2.4em;
	box-shadow: 0 1px 2px rgba(16, 32, 48, .05);
}
.dq-corr .dqc-head {
	background: var(--c-surface-2);
	border-bottom: 1px solid var(--c-line);
	padding: 14px 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: baseline;
	justify-content: space-between;
}
.dq-corr .dqc-head strong { font-size: 1.02em; letter-spacing: .01em; }
.dq-corr .dqc-head span { color: var(--c-muted); font-size: .85em; }
.dq-corr .dqc-body { padding: 18px; }

/* ---- inputs ---- */
.dq-corr .dqc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dq-corr label { display: block; font-weight: 600; font-size: .9em; margin-bottom: 5px; }
.dq-corr .dqc-hint { font-weight: 400; color: var(--c-muted); font-size: .92em; }
.dq-corr textarea {
	width: 100%;
	min-height: 150px;
	resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88rem;
	line-height: 1.55;
	padding: 10px 11px;
	color: var(--c-ink);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 8px;
}
.dq-corr textarea:focus,
.dq-corr .dqc-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.dq-corr .dqc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.dq-corr .dqc-btn {
	font: inherit;
	font-size: .9em;
	font-weight: 600;
	cursor: pointer;
	padding: 9px 16px;
	border-radius: 7px;
	border: 1px solid var(--c-line);
	background: var(--c-surface);
	color: var(--c-ink);
}
.dq-corr .dqc-btn:hover { background: var(--c-surface-2); }
.dq-corr .dqc-btn--go { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.dq-corr .dqc-btn--go:hover { filter: brightness(1.08); background: var(--c-accent); }
.dq-corr .dqc-note { color: var(--c-muted); font-size: .84em; margin-left: auto; }

/* ---- messages ---- */
.dq-corr .dqc-msg {
	margin-top: 14px;
	padding: 11px 13px;
	border-radius: 8px;
	font-size: .92em;
	background: #fdf3f2;
	border: 1px solid #f0cfcb;
	color: #8d2b21;
}
.dq-corr .dqc-msg[hidden] { display: none; }

/* ---- results ---- */
.dq-corr .dqc-out[hidden] { display: none; }
.dq-corr .dqc-r {
	margin-top: 18px;
	padding: 18px;
	border-radius: 8px;
	background: var(--c-accent-soft);
	border: 1px solid rgba(0, 102, 204, .18);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
}
.dq-corr .dqc-r b { font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.dq-corr .dqc-r .dqc-rlab {
	font-size: .8em;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.dq-corr .dqc-tag {
	font-size: .8em;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 99px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
}
.dq-corr .dqc-tag.pos { color: var(--c-pos); border-color: rgba(15, 138, 95, .35); }
.dq-corr .dqc-tag.neg { color: var(--c-neg); border-color: rgba(192, 57, 43, .35); }

.dq-corr .dqc-stats {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	background: var(--c-line);
	border: 1px solid var(--c-line);
	border-radius: 8px;
	overflow: hidden;
}
.dq-corr .dqc-stats li { margin: 0; background: var(--c-surface); padding: 11px 13px; }
.dq-corr .dqc-k {
	display: block;
	font-size: .74em;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 3px;
}
.dq-corr .dqc-v { display: block; font-size: 1.06em; font-weight: 600; font-variant-numeric: tabular-nums; }

.dq-corr .dqc-plot {
	margin-top: 18px;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	padding: 8px;
	background: var(--c-surface);
}
.dq-corr .dqc-plot svg { display: block; width: 100%; height: auto; }
.dq-corr .dqc-read {
	margin-top: 18px;
	padding: 16px 18px;
	border-left: 3px solid var(--c-accent);
	background: var(--c-surface-2);
	border-radius: 0 8px 8px 0;
}
.dq-corr .dqc-read p { margin: 0 0 .8em; }
.dq-corr .dqc-read p:last-child { margin: 0; }
.dq-corr .dqc-read h4 { margin: 0 0 .6em; font-size: 1em; }

/* ---- article furniture ---- */
.dq-corr .dqc-table { width: 100%; border-collapse: collapse; margin: 1.2em 0 1.8em; font-size: .94em; }
.dq-corr .dqc-table th,
.dq-corr .dqc-table td {
	border: 1px solid var(--c-line);
	padding: 9px 12px;
	text-align: left;
	vertical-align: top;
}
.dq-corr .dqc-table th {
	background: var(--c-surface-2);
	font-size: .86em;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.dq-corr .dqc-formula {
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-radius: 8px;
	padding: 14px 16px;
	margin: 1.2em 0 1.6em;
	text-align: center;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.1em;
}
.dq-corr .dqc-faq { border-top: 1px solid var(--c-line); }
.dq-corr .dqc-faq details { border-bottom: 1px solid var(--c-line); padding: 12px 0; }
.dq-corr .dqc-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.dq-corr .dqc-faq summary::-webkit-details-marker { display: none; }
.dq-corr .dqc-faq summary::before { content: "+"; color: var(--c-accent); font-weight: 700; margin-right: 9px; }
.dq-corr .dqc-faq details[open] summary::before { content: "\2013"; }
.dq-corr .dqc-faq details p { margin: .7em 0 0; color: var(--c-muted); }

@media (max-width: 640px) {
	.dq-corr { font-size: 16px; }
	.dq-corr .dqc-grid { grid-template-columns: 1fr; }
	.dq-corr .dqc-note { margin-left: 0; width: 100%; }
	.dq-corr .dqc-r b { font-size: 2.1rem; }
}