/* Styles for the Newton curve fitting app. */

.nf-app {
	--nf-line: var(--ha-blue4);
	--nf-line-strong: var(--ha-blue1);
	--nf-pending-fill: #eaf1f6;
	--nf-active-fill: #fff4d0;
	--nf-source-fill: #e1eef7;
	--nf-input: #000000;
	--nf-forward: #0a8a37;
	--nf-reverse: #d8202a;
}

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

.nf-panel {
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 1rem;
}

.nf-panel label {
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.15rem;
}

.nf-legend {
	font-size: 0.92rem;
}

.nf-legend span.nf-swatch {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 0.2rem;
	margin-right: 0.35rem;
	vertical-align: -0.1rem;
}

.nf-swatch-input {
	background-color: var(--nf-input);
}

.nf-swatch-forward {
	background-color: var(--nf-forward);
}

.nf-swatch-reverse {
	background-color: var(--nf-reverse);
}

/* ---------- hexagon grid ---------- */

.nf-grid-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 0.25rem;
}

.nf-grid-canvas {
	position: relative;
	margin: 0 auto;
}

.nf-grid-stage {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: top left;
}

.nf-grid-stage svg.nf-hexes {
	position: absolute;
	left: 0;
	top: 0;
	overflow: visible;
}

.nf-hex {
	fill: #ffffff;
	stroke: var(--nf-line);
	stroke-width: 3;
	stroke-linejoin: round;
	transition: fill 0.15s ease-in-out;
}

.nf-hex.is-pending {
	fill: var(--nf-pending-fill);
	stroke-dasharray: 7 7;
	stroke-opacity: 0.65;
}

.nf-hex.is-source {
	fill: var(--nf-source-fill);
}

.nf-hex.is-active {
	fill: var(--nf-active-fill);
	stroke: var(--nf-line-strong);
	stroke-width: 5;
}

.nf-label {
	position: absolute;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	font-size: 22px;
	font-weight: 600;
	color: var(--ha-blue2);
	white-space: nowrap;
	pointer-events: none;
}

.nf-label sup {
	font-size: 0.65em;
}

.nf-cell {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	line-height: 1;
}

.nf-cell.is-hidden .nf-value,
.nf-cell.is-hidden .nf-input {
	visibility: hidden;
}

.nf-value {
	max-width: 82%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}

.nf-cell-input .nf-input {
	color: var(--nf-input);
}

.nf-cell-forward .nf-value {
	color: var(--nf-forward);
}

.nf-cell-reverse .nf-value {
	color: var(--nf-reverse);
}

.nf-input {
	width: 80%;
	padding: 0;
	border: 0;
	border-bottom: 1px dotted var(--ha-blue5);
	border-radius: 0;
	background: transparent;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	-moz-appearance: textfield;
}

.nf-input:hover {
	border-bottom: 2px solid var(--ha-blue4);
}

.nf-input:focus {
	outline: none;
	border-bottom: 2px solid var(--ha-blue2);
	background-color: #fffce8;
}

.nf-input.is-bad {
	color: var(--nf-reverse);
	border-bottom: 2px solid var(--nf-reverse);
}

/* ---------- formula ---------- */

.nf-formula {
	font-size: 1.15rem;
	line-height: 2.1;
	overflow-x: auto;
}

.nf-formula .nf-fn {
	font-style: italic;
}

.nf-formula sup {
	font-size: 0.7em;
}

.nf-frac {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	vertical-align: middle;
	font-size: 0.72em;
	line-height: 1.1;
	margin: 0 0.1em;
}

.nf-frac .nf-num {
	border-bottom: 1px solid currentColor;
	padding: 0 0.15em;
}

.nf-frac .nf-den {
	padding: 0 0.15em;
}

.nf-plain {
	font-family: var(--bs-font-monospace, monospace);
	font-size: 0.9rem;
	color: var(--ha-blue1);
	background-color: var(--ha-blue7);
	border-radius: 0.35rem;
	padding: 0.35rem 0.5rem;
	word-break: break-all;
}

.nf-terms td,
.nf-terms th {
	vertical-align: middle;
}

.nf-terms .nf-term-delta {
	white-space: nowrap;
	font-weight: 700;
}

.nf-plot {
	display: block;
	width: 100%;
	max-width: 960px;
	height: auto;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0.75rem;
}

.nf-plot .nf-axis {
	stroke: var(--ha-blue4);
	stroke-width: 1.5;
}

.nf-plot .nf-grid-line {
	stroke: var(--ha-blue6);
	stroke-width: 1;
}

.nf-plot .nf-curve {
	fill: none;
	stroke: var(--ha-blue2);
	stroke-width: 3;
}

.nf-plot .nf-tick-text {
	fill: var(--ha-blue3);
	font-size: 13px;
}

.nf-plot .nf-dot-input {
	fill: var(--nf-input);
}

.nf-plot .nf-dot-reverse {
	fill: #fff;
	stroke: var(--nf-reverse);
	stroke-width: 3;
}

.nf-step-text {
	min-height: 3rem;
}

.nf-step-math {
	font-size: 1.05rem;
	font-weight: 600;
}

@media (max-width: 767.98px) {
	/* The plot scales with its viewBox, so labels need to grow to stay legible. */
	.nf-plot .nf-tick-text {
		font-size: 19px;
	}
}

@media (max-width: 575.98px) {
	.nf-formula {
		font-size: 1rem;
	}
}