/* [dns_lookup] — small additions on top of tools.css. */

/* Keep wide record tables inside the card: grid items default to min-width:auto. */
.hat[data-hat-tool="dns-lookup"] .hat-output {
	grid-template-columns: minmax(0, 1fr);
}

.hat .hat-dns-form .hat-dns-type {
	flex: 0 0 150px;
	min-height: 56px;
	border-radius: 14px;
	font-weight: 700;
	text-align: left;
}

.hat .hat-dns-desc {
	margin: -6px 0 12px;
}

.hat .hat-dns-table td {
	vertical-align: middle;
}

.hat .hat-dns-table td.hat-dns-val {
	white-space: normal;
	min-width: 240px;
	max-width: 520px;
}

.hat .hat-dns-val .hat-code {
	display: block;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	text-align: left;
}

.hat .hat-dns-table td.hat-dns-copy {
	width: 1%;
	padding-block: 6px;
}

.hat .hat-dns-ip {
	display: block;
	text-align: right;
}

.hat .hat-dns-table td.hat-dns-mark-cell {
	width: 1%;
	padding-inline-end: 0;
}

.hat .hat-dns-mark {
	display: inline-flex;
}

.hat .hat-dns-mark .hat-icon {
	width: 22px;
	height: 22px;
}

.hat .hat-dns-mark.is-ok { color: var(--hat-success); }
.hat .hat-dns-mark.is-bad { color: var(--hat-danger); }
.hat .hat-dns-mark.is-warn { color: var(--hat-warn); }

.hat .hat-dns-table tr.is-diff td {
	background: var(--hat-danger-soft);
}

@media (max-width: 640px) {
	.hat .hat-dns-form .hat-dns-type {
		flex: none;
		width: 100%;
	}

	.hat .hat-dns-table td.hat-dns-val {
		min-width: 140px;
	}

	.hat .hat-dns-ttl + small {
		display: none;
	}

	.hat .hat-dns-table th,
	.hat .hat-dns-table td {
		padding-inline: 10px;
	}
}

.hat .hat-dns-label {
	margin-bottom: 4px;
}