/*
 * Embedded calculator (R3-Calculator and R3-Kit boards).
 * Charcoal for Calculate; orange only on the HeadLight card's button. Pass and fail always carry
 * a mark and words, never color alone. Colors are custom properties so the site theme can set them.
 */
.pi-calc
{
	--pi-ink: #2a2e37;
	--pi-ink-2: #464d5d;
	--pi-muted: #5e687d;
	--pi-charcoal: #2e333d;
	--pi-indigo: #3348e6;
	--pi-indigo-dark: #2537b8;
	--pi-focus: #5467f2;
	--pi-orange: #f26b1d;
	--pi-orange-ink: #111418;
	--pi-ground: #f3f4f6;
	--pi-tint: #e7eafd;
	--pi-line: #dfe2e7;
	--pi-line-2: #ebecf0;
	--pi-calc-field-line: #6b7385;
	--pi-paper: #ffffff;
	--pi-calc-card: #fbfaf7;
	--pi-pass: #0f7a2b;
	--pi-fail: #a12a12;
	--pi-warn: #c2410c;
	--pi-error-ground: #fdecea;
	--pi-error-ink: #8a1c13;
	--pi-pass-ground: #e3f2e7;
	--pi-fail-ground: #fdf3dc;
	--pi-calc-edge: #c3c8d2;
	--pi-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

	box-sizing: border-box;
	/* The calculator stays light on a dark page, native controls included. */
	color-scheme: light;
	margin: 2rem 0;
	/* An indigo cap, a border you can see on the page gray, and a soft shadow (Calculators in articles, A). */
	border: 1px solid var(--pi-calc-edge);
	border-top: 4px solid var(--pi-indigo);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(20, 22, 27, 0.08);
	overflow: hidden;
	background: var(--pi-paper);
	color: var(--pi-ink);
	font-family: 'Atkinson Hyperlegible', 'Segoe UI', Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}
.pi-calc *, .pi-calc *::before, .pi-calc *::after { box-sizing: inherit; }
.pi-calc a { color: var(--pi-indigo); text-decoration: underline; }
.pi-calc a:hover { color: var(--pi-indigo-dark); }
.pi-calc :focus-visible { outline: 3px solid var(--pi-focus); outline-offset: 2px; }
.pi-calc [hidden] { display: none !important; }

.pi-calc__head
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.875rem;
	align-items: center;
	padding: 1rem 1.125rem 0.5rem;
}
.pi-calc__icon { display: inline-flex; flex: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 10px; background: var(--pi-tint); color: var(--pi-indigo); }
.pi-calc__glyph { width: 1.125rem; height: 1.25rem; fill: currentColor; }
.pi-calc__name { display: flex; flex-direction: column; flex: 1 1 10rem; min-width: 0; }
.pi-calc__kind { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pi-indigo); }
.pi-calc__title { margin: 0; font-size: 1.1875rem; line-height: 1.3; }
.pi-calc__standard { align-self: flex-start; margin-top: 0.25rem; font: 0.8125rem/1.4 var(--pi-mono); color: var(--pi-muted); }
.pi-calc__summary { margin: 0; padding: 0 1.125rem 0.25rem 4.5rem; font-size: 0.9375rem; color: var(--pi-ink-2); }

.pi-calc__form
{
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin-top: 0.75rem;
	padding: 1rem 1.125rem;
	border-top: 1px solid var(--pi-line);
	background: var(--pi-paper);
}
.pi-calc__fields
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
	gap: 0.75rem;
	align-items: start;
}
.pi-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.pi-group__legend { padding: 0; margin-bottom: 0.5rem; font-size: 0.9375rem; font-weight: 700; }
.pi-calc-units { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; border: 0; }
.pi-calc-units__legend { float: left; margin-right: 0.75rem; padding: 0; font-size: 0.875rem; font-weight: 700; line-height: 1.75rem; }
.pi-calc-units__choice { display: inline-flex; gap: 0.375rem; align-items: center; min-height: 1.75rem; font-size: 0.9375rem; cursor: pointer; }
.pi-calc-units__choice input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--pi-charcoal); }

.pi-calc-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.pi-calc-field--wide { grid-column: 1 / -1; }
/* Fields in a row share four tracks (label, input, help, error), so inputs line up even when one
   label wraps to two lines; labels sit on the input. Without subgrid, fields stack as before. */
@supports (grid-template-rows: subgrid)
{
	.pi-calc-field { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.25rem; align-content: start; }
	.pi-calc-field__label { align-self: end; }
}
.pi-calc-field__label { font-size: 0.875rem; font-weight: 700; line-height: 1.35; }
.pi-calc-field__unit { font-weight: 400; }
.pi-calc-field__optional { font-weight: 400; color: var(--pi-muted); }
/* .pi-calc in front: the site's own input[type="text"] rule would otherwise win and go dark with the page. */
.pi-calc .pi-calc-field__input
{
	width: 100%;
	min-height: 2.75rem;
	padding: 0 0.625rem;
	border: 1px solid var(--pi-calc-field-line);
	border-radius: 6px;
	background: var(--pi-paper);
	color: var(--pi-ink);
	font: inherit;
	font-size: 1rem;
}
select.pi-calc-field__input { padding-right: 0.25rem; }
.pi-calc-field__input[aria-invalid='true'] { border: 2px solid var(--pi-fail); }
.pi-calc-field__help { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--pi-muted); }
.pi-calc-field__error { margin: 0; font-size: 0.8125rem; line-height: 1.4; font-weight: 700; color: var(--pi-error-ink); }
.pi-calc-field__error::before { content: '✕ '; }

.pi-entry-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.pi-entry-table caption { text-align: left; font-weight: 700; padding-bottom: 0.375rem; }
.pi-entry-table th { text-align: left; padding: 0.25rem 0.375rem; font-weight: 700; }
.pi-entry-table th[scope='row'] { width: 2.5rem; color: var(--pi-muted); }
.pi-entry-table td { padding: 0.25rem 0.375rem; }
.pi-calc-field__input--cell { min-width: 5rem; }
/* A select cell that holds long names (a distress list) keeps them readable; the table scrolls on a phone. */
.pi-calc-field__input--wide { min-width: 13rem; }

.pi-calc__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.pi-calc__go
{
	min-height: 2.875rem;
	padding: 0 1.125rem;
	border: 0;
	border-radius: 6px;
	background: var(--pi-charcoal);
	color: #ffffff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.pi-calc__go:hover { background: #1f232a; }
.pi-calc__note { font-size: 0.8125rem; color: var(--pi-muted); }

.pi-calc__out:empty, .pi-calc__card:empty, .pi-calc__keep:empty { display: none; }

/* Print and save, under a valid result (Main board): charcoal for print, an outline for save. */
.pi-calc-keep { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding: 0.875rem 1.125rem; border-top: 1px solid var(--pi-line); }
.pi-calc-keep a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 6px; font-weight: 700; text-decoration: none; }
.pi-calc .pi-calc-keep__print { background: var(--pi-charcoal); color: #ffffff; border: 1px solid var(--pi-charcoal); }
.pi-calc .pi-calc-keep__print:hover { background: #1f232a; color: #ffffff; }
.pi-calc .pi-calc-keep__save { background: var(--pi-paper); color: var(--pi-ink); border: 1px solid var(--pi-calc-field-line); font-weight: 400 !important; }
.pi-calc .pi-calc-keep__save:hover { background: var(--pi-ground); color: var(--pi-ink); }
.pi-calc-keep__note { font-size: 0.875rem; color: var(--pi-ink-2); }
.pi-errors { padding: 0.75rem 1.125rem; background: var(--pi-error-ground); color: var(--pi-error-ink); border-top: 1px solid var(--pi-line); }
.pi-errors__lead { margin: 0 0 0.25rem; font-weight: 700; }
.pi-errors__list { margin: 0; padding-left: 1.25rem; }
.pi-errors__list a { color: var(--pi-error-ink); }

.pi-result { border-top: 1px solid var(--pi-line); }
.pi-result--pass .pi-result__main { background: var(--pi-pass-ground); }
.pi-result--fail .pi-result__main { background: var(--pi-fail-ground); }
.pi-result--pass .pi-result__main, .pi-result--fail .pi-result__main { padding-bottom: 0.875rem; margin-bottom: 0.25rem; }
.pi-result__main { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; padding: 0.875rem 1.125rem 0.5rem; }
.pi-result__headline { margin: 0; display: flex; flex-direction: column; }
.pi-result__label { font-size: 0.875rem; color: var(--pi-ink-2); }
.pi-result__value { font-size: 1.875rem; line-height: 1.2; }
.pi-verdict { margin: 0; font-weight: 700; }
.pi-verdict--pass { color: var(--pi-pass); }
.pi-verdict--fail { color: var(--pi-fail); }
.pi-result__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem 1rem; margin: 0; padding: 0.25rem 1.125rem 0.75rem; }
.pi-result__item { display: flex; flex-direction: column; }
.pi-result__item dt { font-size: 0.8125rem; color: var(--pi-ink-2); }
.pi-result__item dd { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.pi-result__note { margin: 0; padding: 0 1.125rem 0.75rem; font-size: 0.875rem; color: var(--pi-ink-2); }
.pi-calc-table { margin: 0 1.125rem 0.75rem; border-collapse: collapse; font-size: 0.875rem; }
.pi-calc-table caption { text-align: left; font-weight: 700; padding-bottom: 0.25rem; }
.pi-calc-table th, .pi-calc-table td { padding: 0.25rem 0.75rem; border-bottom: 1px solid var(--pi-line-2); text-align: right; }
.pi-calc-table th[scope='row'], .pi-calc-table thead th:first-child { text-align: left; }
.pi-calc-table thead th { border-bottom: 2px solid var(--pi-line); }
.pi-chart { margin: 0 1.125rem 0.75rem; }
.pi-chart__svg { display: block; width: 100%; max-width: 40rem; height: auto; font-family: inherit; }
.pi-chart__grid { stroke: var(--pi-line-2); stroke-width: 1; }
.pi-chart__frame { fill: none; stroke: var(--pi-line); stroke-width: 1; }
.pi-chart__tick { font-size: 14px; fill: var(--pi-ink-2); }
.pi-chart__axis { font-size: 15px; fill: var(--pi-ink); }
.pi-chart__line { fill: none; stroke-width: 2.5; }
.pi-chart__line--fit { stroke: var(--pi-indigo); }
.pi-chart__line--reference { stroke: var(--pi-muted); stroke-dasharray: 6 4; stroke-width: 2; }
.pi-chart__mark--measured { fill: var(--pi-charcoal); }
.pi-chart__mark--peak { fill: var(--pi-paper); stroke: var(--pi-indigo-dark); stroke-width: 2.5; }
.pi-chart__mark--flagged circle { fill: var(--pi-paper); stroke: var(--pi-fail); stroke-width: 2; }
.pi-chart__mark--flagged path { stroke: var(--pi-fail); stroke-width: 2; }
.pi-chart__legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--pi-ink-2); }
.pi-chart__legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.pi-chart__swatch { width: 28px; height: 16px; flex: none; }
.pi-grad__controls { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 0.5rem; }
.pi-grad__switch { display: inline-flex; border: 1px solid var(--pi-calc-field-line, #6b7385); border-radius: 6px; overflow: hidden; }
.pi-grad__scale { min-height: 2.75rem; padding: 0 0.875rem; border: 0; background: var(--pi-paper, #ffffff); color: var(--pi-ink, #2a2e37); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.pi-grad__scale + .pi-grad__scale { border-left: 1px solid var(--pi-calc-field-line, #6b7385); }
.pi-grad__scale[aria-pressed="true"] { background: var(--pi-charcoal, #2e333d); color: #ffffff; font-weight: 700; }
.pi-grad__toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 0.9375rem; cursor: pointer; }
.pi-grad__toggle input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--pi-charcoal, #2e333d); }
/* On a phone the chart keeps a readable size and scrolls sideways in its box, as the tables do. */
.pi-grad__view { overflow-x: auto; }
.pi-grad__svg { display: block; width: 100%; min-width: 30rem; max-width: 46rem; height: auto; font-family: inherit; }
.pi-grad--static .pi-grad__svg { min-width: 0; }
.pi-grad__grid { stroke: var(--pi-line-2, #ebecf0); stroke-width: 1; }
.pi-grad__frame { fill: none; stroke: var(--pi-line, #dfe2e7); stroke-width: 1; }
.pi-grad__tick { font-size: 14px; fill: var(--pi-ink, #2a2e37); }
.pi-grad__tick--name, .pi-grad__pile-name { font-size: 13px; fill: var(--pi-ink-2, #464d5d); }
.pi-grad__axis { font-size: 14px; fill: var(--pi-ink-2, #464d5d); }
.pi-grad__band { fill: var(--pi-tint, #e7eafd); stroke: var(--pi-indigo, #3348e6); stroke-opacity: 0.35; stroke-width: 1; }
.pi-grad__cap { stroke: var(--pi-indigo, #3348e6); stroke-width: 2.5; }
.pi-grad__curve { fill: none; stroke: var(--pi-ink, #2a2e37); stroke-width: 2.5; stroke-linejoin: round; }
.pi-grad__point { fill: var(--pi-ink, #2a2e37); stroke: var(--pi-paper, #ffffff); stroke-width: 1.5; }
.pi-grad__point--out { fill: var(--pi-warn, #c2410c); }
.pi-grad__flag { font-size: 14px; font-weight: 700; fill: var(--pi-warn, #c2410c); paint-order: stroke; stroke: var(--pi-paper, #ffffff); stroke-width: 7px; stroke-linejoin: round; }
.pi-grad__density { fill: none; stroke: var(--pi-indigo, #3348e6); stroke-width: 2; stroke-dasharray: 7 5; }
.pi-grad__control { stroke: var(--pi-warn, #c2410c); stroke-width: 5; stroke-linecap: round; }
.pi-grad__pile { fill: none; stroke: var(--pi-muted, #5e687d); stroke-opacity: 0.55; stroke-width: 1.5; }
.pi-grad--no-piles .pi-grad__piles, .pi-grad--no-piles .pi-grad__piles-key { display: none; }
.pi-working { padding: 0 1.125rem 0.75rem; font-size: 0.9375rem; color: var(--pi-ink-2); }
.pi-working summary { color: var(--pi-indigo); text-decoration: underline; cursor: pointer; min-height: 1.5rem; }
.pi-working__body { margin-top: 0.375rem; padding: 0.625rem 0.75rem; border-radius: 6px; background: var(--pi-tint); font: 0.875rem/1.6 var(--pi-mono); color: var(--pi-ink); overflow-wrap: anywhere; }
.pi-working__body p { margin: 0 0 0.25rem; }

.pi-calc-card
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.875rem;
	align-items: center;
	padding: 0.875rem 1.125rem;
	border-top: 1px solid var(--pi-line);
	background: var(--pi-calc-card);
}
.pi-calc-card__eyebrow { margin: 0 0 0.1875rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pi-muted); }
.pi-calc-card__body { margin: 0; font-size: 1rem; line-height: 1.45; }
.pi-calc a.pi-calc-card__go
{
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1rem;
	border-radius: 6px;
	background: var(--pi-orange);
	color: var(--pi-orange-ink);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.pi-calc a.pi-calc-card__go:hover { text-decoration: underline; color: var(--pi-orange-ink); }

@media (max-width: 40rem)
{
	.pi-calc__summary { padding-left: 1.125rem; }
	.pi-calc__standard { flex-basis: 100%; margin-top: 0; padding-left: 3.375rem; }
	.pi-calc__fields { grid-template-columns: minmax(0, 1fr); }
	.pi-calc-card { grid-template-columns: minmax(0, 1fr) auto; }
	.pi-calc-card__text { grid-column: 1 / -1; }
	.pi-entry-table { display: block; overflow-x: auto; }
	.pi-calc-table { display: block; overflow-x: auto; margin-left: 0; margin-right: 0; padding: 0 1.125rem; }
}