/* <insitu-c14> -- layout and colour only.  No numbers live here. */

.ic-root {
	--ic-line: #d5dbe2;
	--ic-ink: #22303c;
	--ic-mute: #63727f;
	--ic-accent: #2f6f9f;
	--ic-panel: #f6f8fa;
	--ic-ok: #2c7a44;
	--ic-no: #b02a37;

	/* Categorical series slots.  Validated with the data-viz palette script
	   against this panel surface (#f6f8fa) in light and #232323 in dark:
	   lightness band, chroma floor, CVD separation and normal-vision floor all
	   pass.  Aqua warns below 3:1 on the light surface, which is why every
	   series is direct-labelled on the plot rather than legend-only. */
	--ic-s1: #2a78d6; /* blue   -- average crust */
	--ic-s2: #eb6834; /* orange -- 44 ppm U granite */
	--ic-s3: #1baf7a; /* aqua   -- uranium ore */

	display: block;
	color: var(--ic-ink);
	margin: 1.5rem 0;
	font-size: .95rem;
}

:root[dark] {   /* the site's Dark/Light setting */
	.ic-root {
		--ic-line: #3a3a3a;
		--ic-ink: #e2e2e2;
		--ic-mute: #9aa4ad;
		--ic-panel: #232323;
		--ic-ok: #57b070;
		--ic-no: #e0707c;
		--ic-s1: #3987e5;
		--ic-s2: #d95926;
		--ic-s3: #199e70;
	}
}

.ic-grid {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.15fr);
	gap: 1.5rem;
	align-items: start;
}

@media (max-width: 720px) {
	.ic-grid { grid-template-columns: 1fr; }
}

/* ── controls ───────────────────────────────────────────────────────────── */

.ic-controls { display: flex; flex-direction: column; gap: .9rem; }

.ic-field { display: block; }
.ic-field.ic-off { display: none; }

.ic-lab {
	display: block;
	font-weight: 600;
	margin-bottom: .25rem;
	font-size: .9rem;
}
.ic-lab em { color: var(--ic-mute); font-style: normal; font-weight: 400; }

.ic-sel, .ic-num {
	width: 100%;
	padding: .35rem .45rem;
	border: 1px solid var(--ic-line);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-variant-numeric: tabular-nums;
}
.ic-sel:focus-visible, .ic-num:focus-visible {
	outline: 2px solid var(--ic-accent);
	outline-offset: 1px;
}

.ic-range {
	width: 100%;
	margin-top: .3rem;
	accent-color: var(--ic-accent);
}

.ic-hint {
	display: block;
	color: var(--ic-mute);
	font-size: .78rem;
	line-height: 1.45;
	margin-top: .25rem;
}

/* ── results ────────────────────────────────────────────────────────────── */

.ic-out { display: flex; flex-direction: column; gap: 1rem; }

.ic-results {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	background: var(--ic-panel);
	border-left: 3px solid var(--ic-accent);
	padding: .85rem 1rem;
	border-radius: 0 4px 4px 0;
}

.ic-rlab {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ic-mute);
}

.ic-big {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.ic-verdict {
	padding: .7rem .85rem;
	border-radius: 4px;
	border: 1px solid var(--ic-line);
	line-height: 1.5;
}
.ic-verdict.ic-no { border-left: 3px solid var(--ic-no); }
.ic-verdict.ic-ok { border-left: 3px solid var(--ic-ok); }

.ic-warn {
	margin-top: .5rem;
	font-size: .82rem;
	color: var(--ic-mute);
}

/* ── tables ─────────────────────────────────────────────────────────────── */

.ic-compare h4, .ic-wbody h4 {
	margin: 1rem 0 .4rem;
	font-size: .88rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ic-mute);
	font-weight: 600;
}

.ic-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
}
.ic-table th, .ic-table td {
	text-align: left;
	padding: .35rem .4rem;
	border-bottom: 1px solid var(--ic-line);
	vertical-align: top;
}
.ic-table th { color: var(--ic-mute); font-weight: 400; font-size: .78rem; }
.ic-table td small {
	display: block;
	color: var(--ic-mute);
	font-size: .72rem;
	line-height: 1.4;
	margin-top: .15rem;
}
.ic-r { text-align: right !important; white-space: nowrap; }
.ic-table .ic-no { color: var(--ic-no); }
.ic-table .ic-ok { color: var(--ic-ok); }
.ic-el { font-weight: 600; width: 3ch; }

.ic-bar { width: 55%; }
.ic-bar span {
	display: block;
	height: 9px;
	border-radius: 2px;
	background: var(--ic-mute);
	min-width: 1px;
}
.ic-bar span.ic-barn { background: var(--ic-s2); }

/* ── the working ────────────────────────────────────────────────────────── */

.ic-working {
	margin-top: 1.25rem;
	border-top: 1px solid var(--ic-line);
	padding-top: .6rem;
}
.ic-working summary {
	cursor: pointer;
	color: var(--ic-accent);
	font-size: .88rem;
}
.ic-wbody { padding-top: .6rem; }

.ic-dl { margin: 0; }
.ic-kv {
	display: grid;
	grid-template-columns: minmax(140px, 240px) 1fr;
	gap: .5rem 1rem;
	padding: .4rem 0;
	border-bottom: 1px solid var(--ic-line);
}
@media (max-width: 560px) { .ic-kv { grid-template-columns: 1fr; gap: .1rem; } }
.ic-kv dt { color: var(--ic-mute); font-size: .85rem; }
.ic-kv dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.ic-kv dd small {
	display: block;
	font-weight: 400;
	color: var(--ic-mute);
	font-size: .76rem;
	line-height: 1.45;
	margin-top: .15rem;
}

/* ── chart ──────────────────────────────────────────────────────────────── */

.ic-figure { margin: 1.5rem 0 0; }

.ic-chart {
	width: 100%;
	height: auto;
	display: block;
	background: var(--ic-panel);
	border-radius: 4px;
}

.ic-chart .ic-grid { stroke: var(--ic-line); stroke-width: 1; }
.ic-chart .ic-axlab { fill: var(--ic-mute); font-size: 11px; }
.ic-chart .ic-axtitle { fill: var(--ic-mute); font-size: 12px; }

.ic-chart .ic-line {
	fill: none;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.ic-chart .ic-serieslab { font-size: 11px; font-weight: 600; }

.ic-chart .ic-lead {
	stroke: var(--ic-mute);
	stroke-width: 1;
	opacity: .45;
}

.ic-chart .ic-bench {
	stroke: var(--ic-mute);
	stroke-width: 1;
	stroke-dasharray: 4 3;
	opacity: .75;
}
.ic-chart .ic-benchlab { fill: var(--ic-mute); font-size: 10px; }

.ic-chart .ic-dot { fill: var(--ic-ink); }
.ic-chart .ic-dot-ring { fill: var(--ic-panel); }
.ic-chart .ic-curlab { fill: var(--ic-ink); font-size: 10px; font-weight: 600; }

.ic-figure figcaption {
	font-size: .8rem;
	color: var(--ic-mute);
	line-height: 1.55;
	margin-top: .5rem;
}
.ic-figure figcaption strong { color: var(--ic-ink); }

/* ── the lead-in note, and the full-bleed wrapper ───────────────────────── */

.ic-note {
	background: var(--ic-panel, #f6f8fa);
	border-left: 3px solid var(--ic-accent, #2f6f9f);
	padding: .75rem 1rem;
	border-radius: 0 4px 4px 0;
	margin: 1.25rem 0;
}
.ic-note p { margin: 0; line-height: 1.6; }

:root[dark] {   /* the site's Dark/Light setting */
	.ic-note { background: #232323; }
}

/* The theme's .wide gives the tool the full column plus the left margin.
   Inside it the component still needs its own breathing room. */
.wide > .ic-root { padding: 0 20px; }