.dash {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

@media (max-width: 920px) {
	.dash {
		grid-template-columns: minmax(0, 1fr);
	}
}

.col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

@media (min-width: 921px) {
	.status {
		position: sticky;
		top: calc(var(--top) + 78px);
	}
}

.health {
	padding: clamp(18px, 2.4vw, 26px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(20px, 3vw, 36px);
	align-items: center;
}

@media (max-width: 560px) {
	.hero {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ring {
	position: relative;
	width: 148px;
	height: 148px;
}

.ring svg {
	display: block;
	transform: rotate(-90deg);
}

.ring circle {
	fill: none;
	stroke-width: 14;
}

.ring .t {
	stroke: var(--bg);
}

.ring .ok {
	stroke: var(--ok-fill);
	stroke-linecap: round;
	transition: stroke-dasharray 0.6s ease;
}

.ring .no {
	stroke: var(--bad-fill);
}

.ring-label {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
}

.ring-num {
	font: 600 28px/1 var(--font-body);
}

.ring-cap {
	font-size: 12.5px;
	color: var(--muted);
	margin-top: 4px;
}

.hero-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mix {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mix-bar {
	display: flex;
	gap: 3px;
	height: 10px;
}

.mix-bar span {
	border-radius: 5px;
	min-width: 6px;
}

.seg-bad {
	background: var(--bad-fill);
}

.seg-warn {
	background: var(--warn-fill);
}

.seg-moved {
	background: var(--moved-fill);
}

.legend {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 560px) {
	.legend {
		grid-template-columns: minmax(0, 1fr);
	}
}

.legend-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 2px 10px;
	padding: 12px 14px;
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	background: var(--surface);
	text-align: left;
	transition:
		border-color 0.15s,
		background 0.15s;
}

.legend-item:hover {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.legend-item .dot {
	grid-row: span 2;
	width: 34px;
	height: 34px;
	border-radius: 4px;
	display: grid;
	place-content: center;
}

.dot-bad {
	background: var(--bad-soft);
	color: var(--bad);
}

.dot-warn {
	background: var(--warn-soft);
	color: var(--warn);
}

.dot-moved {
	background: var(--moved-soft);
	color: var(--moved);
}

.dot-ok {
	background: var(--ok-soft);
	color: var(--ok);
}

.legend-item .l-count {
	font: 600 20px/1.2 var(--font-body);
}

.legend-item .l-label {
	color: var(--muted);
	font-size: 13.5px;
	grid-column: 2;
}

.legend-item .chev {
	grid-row: 1 / span 2;
	grid-column: 3;
	color: var(--muted);
}

.status {
	display: flex;
	flex-direction: column;
}

.stat {
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid var(--line);
}

.stat:first-child {
	border-top: 0;
}

.stat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.stat-head h2 {
	font: 600 14px/1.4 var(--font-body);
	display: flex;
	align-items: center;
	gap: 8px;
}

.stat-head h2 .i {
	color: var(--muted);
}

.stat-text {
	color: var(--muted);
	font-size: 13px;
}

.progress {
	height: 8px;
	border-radius: 4px;
	background: var(--bg);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--line);
}

.progress span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--accent);
	transition: width 0.2s linear;
}

.progress-meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13.5px;
	color: var(--muted);
}

.kv {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}

.kv .k {
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.kv .v {
	font-weight: 600;
	white-space: nowrap;
}

.live {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ok-fill);
	flex: none;
}

.live.off {
	background: var(--line-strong);
}

.meter {
	height: 6px;
	border-radius: 3px;
	background: var(--bg);
	box-shadow: inset 0 0 0 1px var(--line);
	position: relative;
}

.meter span {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 3px;
	background: var(--ok-fill);
	transition: width 0.6s ease;
}

.meter-scale {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--muted);
}

.work {
	overflow: hidden;
}

.work-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
}

.item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 14px;
	padding: 12px 20px;
	border-top: 1px solid var(--line);
}

.item .dot {
	width: 34px;
	height: 34px;
	border-radius: 4px;
	display: grid;
	place-content: center;
}

.item-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.linkname {
	border: 0;
	background: none;
	padding: 0;
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	color: var(--accent);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.linkname:hover {
	color: var(--accent-hover);
}

.item-sub {
	color: var(--muted);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item-used {
	color: var(--muted);
	font-size: 13.5px;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.item {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.item-used {
		display: none;
	}
}

.empty {
	padding: 36px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	color: var(--muted);
}

.empty .dot {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-content: center;
}

.empty strong {
	color: var(--ink);
	font: 600 16px/1.3 var(--font-body);
}