/* Styles for the CRC calculator app. */

.crc-app {
	--crc-active: #fff4d0;
	--crc-active-line: var(--ha-blue1);
	--crc-done: #e1eef7;
	--crc-set-bit: #0a8a37;
	--crc-clear-bit: #9fb4c1;
	--crc-alert: #d8202a;
	--crc-mono: var(--bs-font-monospace, ui-monospace, "Cascadia Mono", "Consolas", monospace);
}

/* ---------- panels ---------- */

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

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

.crc-subpanel {
	background-color: var(--ha-blue8);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 0.75rem;
}

.crc-sublabel {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ha-blue3);
	margin-bottom: 0.35rem;
}

/* ---------- parameter entry ---------- */

.crc-hex {
	font-family: var(--crc-mono);
	text-transform: uppercase;
}

.crc-hex.is-bad {
	border-color: var(--crc-alert);
	color: var(--crc-alert);
}

.crc-input {
	font-family: var(--crc-mono);
	font-size: 0.92rem;
}

.crc-input.is-bad {
	border-color: var(--crc-alert);
}

/* ---------- result ---------- */

.crc-result {
	background: linear-gradient(180deg, var(--ha-blue7), #fff 60%);
}

.crc-value {
	font-family: var(--crc-mono);
	font-size: clamp(1.4rem, 4.2vw, 2.25rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ha-blue1);
	word-break: break-all;
	margin-bottom: 0.75rem;
}

.crc-facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.15rem 0.75rem;
	font-size: 0.9rem;
	margin: 0;
}

.crc-facts dt {
	font-weight: 600;
	color: var(--ha-blue3);
	white-space: nowrap;
}

.crc-facts dd {
	margin: 0;
	font-family: var(--crc-mono);
	word-break: break-all;
}

/* These are space separated groups, so wrap between groups rather than
 * chopping a group in half the way break-all would. */
.crc-facts dd.crc-bits-inline,
.crc-facts dd.crc-table-peek {
	font-size: 0.82rem;
	word-break: normal;
	overflow-wrap: normal;
}

/* ---------- input preview ---------- */

.crc-dump {
	font-family: var(--crc-mono);
	font-size: 0.82rem;
	color: var(--ha-blue2);
	background-color: var(--ha-blue8);
	border-radius: 0.35rem;
	padding: 0.4rem 0.55rem;
	max-height: 7rem;
	overflow-y: auto;
	white-space: pre-wrap;
	word-break: break-all;
}

.crc-dump:empty {
	display: none;
}

/* ---------- playback ---------- */

.crc-speed {
	width: auto;
	flex: 0 0 auto;
}

.crc-bytes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem;
	font-family: var(--crc-mono);
	font-size: 0.85rem;
	max-height: 8rem;
	overflow-y: auto;
}

.crc-byte {
	padding: 0.1rem 0.3rem;
	border-radius: 0.25rem;
	border: 1px solid transparent;
	background-color: #fff;
	color: var(--ha-blue3);
}

.crc-byte.is-done {
	background-color: var(--crc-done);
	color: var(--ha-blue1);
}

.crc-byte.is-active {
	background-color: var(--crc-active);
	border-color: var(--crc-active-line);
	color: var(--ha-blue1);
	font-weight: 700;
}

.crc-byte.is-more {
	background: none;
	border: none;
	color: var(--ha-blue4);
	font-style: italic;
}

.crc-register {
	font-family: var(--crc-mono);
	font-size: clamp(1.1rem, 3vw, 1.6rem);
	font-weight: 700;
	color: var(--ha-blue1);
	word-break: break-all;
}

.crc-bit-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0.45rem;
	margin-top: 0.4rem;
}

.crc-bit-group {
	display: inline-flex;
	gap: 2px;
}

.crc-bit {
	width: 1.05rem;
	height: 1.35rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--crc-mono);
	font-size: 0.72rem;
	font-weight: 700;
	border-radius: 0.15rem;
	background-color: #fff;
	border: 1px solid var(--ha-blue6);
	color: var(--crc-clear-bit);
}

.crc-bit.is-set {
	color: #fff;
	background-color: var(--crc-set-bit);
	border-color: var(--crc-set-bit);
}

.crc-bit.is-changed {
	outline: 2px solid var(--crc-alert);
	outline-offset: -2px;
}

/* Mark the bit that is about to be shifted out. */
.crc-bit.is-pivot {
	box-shadow: 0 0 0 2px var(--ha-blue1);
}

.crc-step-math {
	font-family: var(--crc-mono);
	font-size: 0.88rem;
	line-height: 1.55;
	white-space: pre;
	overflow-x: auto;
	min-height: 5.5rem;
	color: var(--ha-blue1);
}

.crc-step-math .crc-op {
	color: var(--ha-blue3);
}

.crc-step-math .crc-out {
	color: var(--crc-set-bit);
	font-weight: 700;
}

/* ---------- code ---------- */

.crc-code {
	font-family: var(--crc-mono);
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--ha-blue1);
	background-color: var(--ha-blue8);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 0.5rem;
	padding: 0.75rem 0.9rem;
	max-height: 34rem;
	overflow: auto;
	tab-size: 4;
	-moz-tab-size: 4;
}

/* Wrap rather than scroll sideways: the highlighted line has to stay in view
 * as the playback moves, and the copyable listing is the other panel. */
.crc-code-trace {
	max-height: 24rem;
	background-color: #fff;
	white-space: pre-wrap;
}

.crc-code .crc-line {
	display: block;
	padding: 0 0.25rem;
	border-radius: 0.2rem;
}

.crc-code .crc-line.is-active {
	background-color: var(--crc-active);
	box-shadow: inset 2px 0 0 var(--crc-active-line);
	font-weight: 700;
}

.crc-code .crc-elide {
	color: var(--ha-blue4);
	font-style: italic;
}

#crcLangTabs .nav-link {
	cursor: pointer;
}

/* ---------- self test ---------- */

.crc-selftest {
	font-family: var(--crc-mono);
	font-size: 0.82rem;
}

.crc-selftest td,
.crc-selftest th {
	padding: 0.1rem 0.5rem;
}

@media (max-width: 575.98px) {
	.crc-bit {
		width: 0.85rem;
		height: 1.15rem;
		font-size: 0.6rem;
	}

	.crc-facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 0 0;
	}

	.crc-facts dd {
		margin-bottom: 0.35rem;
	}
}