/*
 * PCB Toolkit
 *
 * Everything is scoped under .pcbtk and sets its own values for form controls,
 * so a host theme cannot leak into the tool and the tool cannot leak out.
 * No web fonts are loaded: the numbers use whatever monospace face the device
 * already has, which keeps this off the critical path entirely.
 *
 * Visual reference is a fabrication drawing. Hairline rules, dotted leaders
 * between a label and its value, tick marks at the corners of the drawing
 * frame, and Gerber-viewer cyan for anything the reader can act on.
 */

.pcbtk {
	--pcbtk-ink: #16202a;
	--pcbtk-ink-soft: #5b6b78;
	--pcbtk-ink-faint: #93a2ad;
	--pcbtk-rule: #ccd6dd;
	--pcbtk-rule-soft: #e5ecf0;
	--pcbtk-surface: #ffffff;
	--pcbtk-surface-sunk: #f4f7f9;
	--pcbtk-accent: #0e7c86;
	--pcbtk-accent-soft: #e2f2f3;
	--pcbtk-alert: #b5307a;
	--pcbtk-alert-soft: #fbeaf3;
	--pcbtk-warn: #a86a00;
	--pcbtk-warn-soft: #fdf2e0;
	--pcbtk-copper: #a4642a;

	--pcbtk-mono: ui-monospace, "SF Mono", SFMono-Regular, "DejaVu Sans Mono", Menlo, Consolas, monospace;
	--pcbtk-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	box-sizing: border-box;
	margin: 2rem 0;
	padding: 0;
	font-family: var(--pcbtk-sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--pcbtk-ink);
	background: var(--pcbtk-surface);
	border: 1px solid var(--pcbtk-rule);
	border-radius: 2px;
	container-type: inline-size;
	-webkit-text-size-adjust: 100%;
}

.pcbtk *,
.pcbtk *::before,
.pcbtk *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- head */

.pcbtk__head {
	padding: 1.15rem 1.25rem 1rem;
	border-bottom: 1px solid var(--pcbtk-rule);
	background: var(--pcbtk-surface-sunk);
}

.pcbtk__eyebrow {
	margin: 0 0 0.35rem;
	font-family: var(--pcbtk-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pcbtk-accent);
}

.pcbtk__title {
	margin: 0;
	padding: 0;
	font-family: var(--pcbtk-sans);
	font-size: 1.25rem;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -0.011em;
	color: var(--pcbtk-ink);
	border: 0;
}

.pcbtk__lede {
	margin: 0.5rem 0 0;
	max-width: 62ch;
	font-size: 0.925rem;
	color: var(--pcbtk-ink-soft);
}

/* ---------------------------------------------------------------- body */

.pcbtk__body {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 0;
}

.pcbtk__inputs {
	padding: 1.1rem 1.25rem 1.25rem;
	border-right: 1px solid var(--pcbtk-rule);
	min-width: 0;
}

.pcbtk__results {
	padding: 1.1rem 1.25rem 1.25rem;
	background: var(--pcbtk-surface-sunk);
	min-width: 0;
}

@container (max-width: 640px) {
	.pcbtk__body {
		grid-template-columns: minmax(0, 1fr);
	}
	.pcbtk__inputs {
		border-right: 0;
		border-bottom: 1px solid var(--pcbtk-rule);
	}
}

/* Fallback for browsers without container queries. */
@media (max-width: 700px) {
	.pcbtk__body {
		grid-template-columns: minmax(0, 1fr);
	}
	.pcbtk__inputs {
		border-right: 0;
		border-bottom: 1px solid var(--pcbtk-rule);
	}
}

/* -------------------------------------------------------------- fields */

.pcbtk__field {
	margin: 0 0 0.85rem;
}

.pcbtk__field:last-child {
	margin-bottom: 0;
}

.pcbtk__label {
	display: block;
	margin: 0 0 0.28rem;
	font-size: 0.8rem;
	font-weight: 550;
	line-height: 1.35;
	color: var(--pcbtk-ink-soft);
}

.pcbtk__control {
	position: relative;
	display: flex;
	align-items: stretch;
}

.pcbtk input[type="number"],
.pcbtk input[type="text"],
.pcbtk input[type="datetime-local"],
.pcbtk select,
.pcbtk textarea {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0.44rem 0.55rem;
	font-family: var(--pcbtk-mono);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	color: var(--pcbtk-ink);
	background: var(--pcbtk-surface);
	background-image: none;
	border: 1px solid var(--pcbtk-rule);
	border-radius: 2px;
	box-shadow: none;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.pcbtk select {
	padding-right: 1.9rem;
	font-family: var(--pcbtk-sans);
	background-image: linear-gradient(45deg, transparent 50%, var(--pcbtk-ink-soft) 50%),
		linear-gradient(135deg, var(--pcbtk-ink-soft) 50%, transparent 50%);
	background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.pcbtk textarea {
	resize: vertical;
	line-height: 1.5;
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
}

.pcbtk input:focus,
.pcbtk select:focus,
.pcbtk textarea:focus {
	border-color: var(--pcbtk-accent);
	box-shadow: 0 0 0 3px var(--pcbtk-accent-soft);
}

.pcbtk input:focus-visible,
.pcbtk select:focus-visible,
.pcbtk textarea:focus-visible {
	outline: 2px solid var(--pcbtk-accent);
	outline-offset: 1px;
}

.pcbtk__field-unit {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 0.55rem;
	margin-left: -1px;
	font-family: var(--pcbtk-mono);
	font-size: 0.78rem;
	color: var(--pcbtk-ink-faint);
	background: var(--pcbtk-surface-sunk);
	border: 1px solid var(--pcbtk-rule);
	border-radius: 0 2px 2px 0;
	white-space: nowrap;
}

.pcbtk__help {
	margin: 0.3rem 0 0;
	font-size: 0.775rem;
	line-height: 1.45;
	color: var(--pcbtk-ink-faint);
}

.pcbtk__field--hidden {
	display: none;
}

/* ------------------------------------------------------------- results */

/* The dotted leader is the signature: a result reads like a dimension
   callout on a drawing rather than a row in a spreadsheet. */
.pcbtk__row {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.32rem 0;
	border-bottom: 1px dotted var(--pcbtk-rule);
}

.pcbtk__row:last-of-type {
	border-bottom: 0;
}

.pcbtk__row-label {
	flex: 0 1 auto;
	font-size: 0.815rem;
	color: var(--pcbtk-ink-soft);
}

.pcbtk__row::after {
	content: "";
	flex: 1 1 auto;
	order: 1;
	height: 0;
	min-width: 1rem;
	border-bottom: 1px dotted var(--pcbtk-rule);
	transform: translateY(-0.22em);
}

.pcbtk__row-value {
	order: 2;
	flex: 0 0 auto;
	font-family: var(--pcbtk-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.9rem;
	white-space: nowrap;
	color: var(--pcbtk-ink);
}

.pcbtk__row--primary {
	padding: 0.5rem 0;
	border-bottom-style: solid;
	border-bottom-color: var(--pcbtk-rule-soft);
}

.pcbtk__row--primary .pcbtk__row-label {
	font-weight: 600;
	color: var(--pcbtk-ink);
}

.pcbtk__row--primary .pcbtk__row-value {
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--pcbtk-accent);
}

.pcbtk__unit {
	margin-left: 0.15rem;
	font-size: 0.72em;
	font-weight: 400;
	color: var(--pcbtk-ink-faint);
}

.pcbtk output {
	display: inline;
	transition: color 0.15s ease;
}

.pcbtk__row-value--changed {
	animation: pcbtk-tick 0.35s ease;
}

@keyframes pcbtk-tick {
	from { background: var(--pcbtk-accent-soft); }
	to   { background: transparent; }
}

/* --------------------------------------------------------------- flags */

.pcbtk__flags:empty {
	display: none;
}

.pcbtk__flags {
	margin-top: 0.85rem;
	display: grid;
	gap: 0.4rem;
}

.pcbtk__flag {
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem 0.6rem;
	font-size: 0.815rem;
	line-height: 1.45;
	border-radius: 2px;
	border-left: 3px solid;
}

.pcbtk__flag-tag {
	flex: 0 0 auto;
	font-family: var(--pcbtk-mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding-top: 0.14em;
}

.pcbtk__flag--pass {
	color: var(--pcbtk-ink);
	background: var(--pcbtk-accent-soft);
	border-left-color: var(--pcbtk-accent);
}

.pcbtk__flag--pass .pcbtk__flag-tag { color: var(--pcbtk-accent); }

.pcbtk__flag--warn {
	color: var(--pcbtk-ink);
	background: var(--pcbtk-warn-soft);
	border-left-color: var(--pcbtk-warn);
}

.pcbtk__flag--warn .pcbtk__flag-tag { color: var(--pcbtk-warn); }

.pcbtk__flag--fail {
	color: var(--pcbtk-ink);
	background: var(--pcbtk-alert-soft);
	border-left-color: var(--pcbtk-alert);
}

.pcbtk__flag--fail .pcbtk__flag-tag { color: var(--pcbtk-alert); }

/* --------------------------------------------------------------- panel */

.pcbtk__panel:empty {
	display: none;
}

.pcbtk__panel {
	padding: 1.1rem 1.25rem;
	border-top: 1px solid var(--pcbtk-rule);
}

/* Drawing frame with corner ticks, as on a fab drawing. */
.pcbtk__drawing {
	position: relative;
	padding: 0.9rem;
	background: var(--pcbtk-surface-sunk);
	border: 1px solid var(--pcbtk-rule);
	border-radius: 2px;
}

.pcbtk__drawing::before,
.pcbtk__drawing::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border: 1px solid var(--pcbtk-accent);
	opacity: 0.55;
}

.pcbtk__drawing::before {
	top: 4px;
	left: 4px;
	border-right: 0;
	border-bottom: 0;
}

.pcbtk__drawing::after {
	right: 4px;
	bottom: 4px;
	border-left: 0;
	border-top: 0;
}

.pcbtk__drawing svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	overflow: visible;
}

.pcbtk__caption {
	margin: 0.6rem 0 0;
	font-family: var(--pcbtk-mono);
	font-size: 0.74rem;
	letter-spacing: 0.02em;
	color: var(--pcbtk-ink-faint);
	text-align: center;
}

/* --------------------------------------------------------------- table */

.pcbtk__tablewrap {
	overflow-x: auto;
	border: 1px solid var(--pcbtk-rule);
	border-radius: 2px;
	-webkit-overflow-scrolling: touch;
}

.pcbtk__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.82rem;
	background: var(--pcbtk-surface);
}

.pcbtk__table th,
.pcbtk__table td {
	padding: 0.5rem 0.65rem;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--pcbtk-rule-soft);
	line-height: 1.42;
}

.pcbtk__table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	font-family: var(--pcbtk-mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--pcbtk-ink-soft);
	background: var(--pcbtk-surface-sunk);
	border-bottom: 1px solid var(--pcbtk-rule);
}

.pcbtk__table tbody th {
	font-weight: 600;
	white-space: nowrap;
	color: var(--pcbtk-ink);
}

.pcbtk__table tbody tr:last-child th,
.pcbtk__table tbody tr:last-child td {
	border-bottom: 0;
}

.pcbtk__table tbody tr[hidden] {
	display: none;
}

.pcbtk__table tbody tr.is-dim {
	opacity: 0.38;
}

.pcbtk__table tbody tr.is-pick th,
.pcbtk__table tbody tr.is-pick td {
	background: var(--pcbtk-accent-soft);
}

.pcbtk__table tbody tr.is-pick th {
	box-shadow: inset 3px 0 0 var(--pcbtk-accent);
}

.pcbtk__tablenote {
	margin: 0.6rem 0 0;
	font-size: 0.78rem;
	color: var(--pcbtk-ink-faint);
}

.pcbtk__tablenote:empty {
	display: none;
}

/* -------------------------------------------------------------- method */

.pcbtk__method {
	border-top: 1px solid var(--pcbtk-rule);
	background: var(--pcbtk-surface);
}

.pcbtk__method > summary {
	padding: 0.7rem 1.25rem;
	font-family: var(--pcbtk-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pcbtk-accent);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.pcbtk__method > summary::-webkit-details-marker {
	display: none;
}

.pcbtk__method > summary::before {
	content: "+ ";
	font-weight: 700;
}

.pcbtk__method[open] > summary::before {
	content: "\2212 ";
}

.pcbtk__method > summary:focus-visible {
	outline: 2px solid var(--pcbtk-accent);
	outline-offset: -2px;
}

.pcbtk__method-body {
	padding: 0 1.25rem 1.15rem;
	max-width: 76ch;
}

.pcbtk__method-body p {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--pcbtk-ink-soft);
}

.pcbtk__method-body p:last-child {
	margin-bottom: 0;
}

.pcbtk__method-body strong {
	color: var(--pcbtk-ink);
	font-weight: 600;
}

.pcbtk__method-body code {
	padding: 0.1em 0.3em;
	font-family: var(--pcbtk-mono);
	font-size: 0.86em;
	color: var(--pcbtk-ink);
	background: var(--pcbtk-surface-sunk);
	border: 1px solid var(--pcbtk-rule-soft);
	border-radius: 2px;
}

/* --------------------------------------------------------------- index */

.pcbtk--index {
	padding: 1.25rem;
}

.pcbtk__index-cat {
	margin: 1.4rem 0 0.5rem;
	font-family: var(--pcbtk-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pcbtk-accent);
}

.pcbtk__index-cat:first-child {
	margin-top: 0;
}

.pcbtk__index-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcbtk__index-list li {
	padding: 0.5rem 0;
	border-bottom: 1px dotted var(--pcbtk-rule);
}

.pcbtk__index-name {
	display: block;
	font-weight: 600;
}

.pcbtk__index-desc {
	display: block;
	font-size: 0.82rem;
	color: var(--pcbtk-ink-faint);
}

.pcbtk__missing {
	padding: 0.75rem 1rem;
	font-family: var(--pcbtk-mono);
	font-size: 0.82rem;
	color: var(--pcbtk-alert);
	background: var(--pcbtk-alert-soft);
	border-left: 3px solid var(--pcbtk-alert);
}

/* ------------------------------------------------------------- compact */

.pcbtk--compact .pcbtk__head { padding: 0.85rem 1rem 0.75rem; }
.pcbtk--compact .pcbtk__inputs,
.pcbtk--compact .pcbtk__results { padding: 0.85rem 1rem 1rem; }
.pcbtk--compact .pcbtk__lede { display: none; }
.pcbtk--compact .pcbtk__title { font-size: 1.05rem; }

/* ------------------------------------------------------- dark and a11y */

@media (prefers-color-scheme: dark) {
	.pcbtk:not(.pcbtk--force-light) {
		--pcbtk-ink: #e6edf2;
		--pcbtk-ink-soft: #a3b1bc;
		--pcbtk-ink-faint: #71828e;
		--pcbtk-rule: #33414d;
		--pcbtk-rule-soft: #26313a;
		--pcbtk-surface: #151d24;
		--pcbtk-surface-sunk: #1b252d;
		--pcbtk-accent: #4dd3de;
		--pcbtk-accent-soft: #123840;
		--pcbtk-alert: #f07ab5;
		--pcbtk-alert-soft: #3d1830;
		--pcbtk-warn: #e2a63c;
		--pcbtk-warn-soft: #3a2c12;
		--pcbtk-copper: #d08a4a;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcbtk *,
	.pcbtk *::before,
	.pcbtk *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

@media print {
	.pcbtk {
		border-color: #999;
		break-inside: avoid;
	}
	.pcbtk__method[open] > summary::before { content: ""; }
}