/*
 * OTA Health Monitor
 *
 * Colour is load-bearing here, so it is deliberate rather than decorative:
 *
 *   OK       solid green   — genuinely verified, recently
 *   WARN     solid amber   — stale but not yet past the failure threshold
 *   FAIL     solid red     — confirmed broken
 *   UNKNOWN  grey + a diagonal hatch
 *
 * The hatch matters. UNKNOWN must be unmistakable at a glance and must never
 * be mistaken for OK — a check that could not run is not a passing check, and
 * failing to make that distinction is what let three integrations sit dead for
 * five months each behind plausible-looking dashboards. Grey alone reads as
 * "inactive"; the hatch reads as "something is missing here".
 */

.ota-hm-root {
	--ota-hm-ok: #1e8e3e;
	--ota-hm-warn: #b26a00;
	--ota-hm-fail: #c5221f;
	--ota-hm-unknown: #6b7280;
	--ota-hm-ink: #1f2328;
	--ota-hm-muted: #5c6470;
	--ota-hm-line: #dfe3e8;
	--ota-hm-panel: #fff;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ota-hm-ink);
	font-size: 15px;
	line-height: 1.5;
	max-width: 1180px;
}

.ota-hm-root *,
.ota-hm-root *::before,
.ota-hm-root *::after {
	box-sizing: border-box;
}

/* ---- status colour tokens -------------------------------------------- */

.ota-hm-status-ok { --ota-hm-c: var(--ota-hm-ok); }
.ota-hm-status-warn { --ota-hm-c: var(--ota-hm-warn); }
.ota-hm-status-fail { --ota-hm-c: var(--ota-hm-fail); }
.ota-hm-status-unknown { --ota-hm-c: var(--ota-hm-unknown); }

/* ---- the monitor's own alarm ----------------------------------------- */

.ota-hm-selfalert {
	background: #fff4e5;
	border: 1px solid #f0b429;
	border-left: 5px solid #b26a00;
	border-radius: 6px;
	padding: 12px 16px;
	margin: 0 0 16px;
}

.ota-hm-selfalert strong { display: block; margin-bottom: 2px; }
.ota-hm-selfalert span { color: var(--ota-hm-muted); font-size: 14px; }

/* ---- headline -------------------------------------------------------- */

.ota-hm-headline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 8px;
	border: 1px solid var(--ota-hm-line);
	border-left: 6px solid var(--ota-hm-c, var(--ota-hm-unknown));
	background: var(--ota-hm-panel);
	margin-bottom: 22px;
}

.ota-hm-headline-main { flex: 1 1 260px; min-width: 0; }

.ota-hm-headline-label {
	display: block;
	font-size: 21px;
	font-weight: 700;
	color: var(--ota-hm-c, var(--ota-hm-unknown));
	line-height: 1.25;
}

.ota-hm-headline-sub {
	display: block;
	font-size: 13px;
	color: var(--ota-hm-muted);
	margin-top: 3px;
}

.ota-hm-headline-counts { display: flex; gap: 14px; flex-wrap: wrap; }

.ota-hm-count {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ota-hm-muted);
	display: flex;
	align-items: baseline;
	gap: 5px;
}

.ota-hm-count b {
	font-size: 19px;
	color: var(--ota-hm-c, var(--ota-hm-unknown));
}

.ota-hm-run {
	background: #1f2328;
	color: #fff;
	border: 0;
	border-radius: 5px;
	padding: 9px 15px;
	font-size: 14px;
	cursor: pointer;
}

.ota-hm-run:hover { background: #000; }
.ota-hm-run[disabled] { opacity: .55; cursor: default; }

/* ---- bands ----------------------------------------------------------- */

.ota-hm-band { margin-bottom: 26px; }

.ota-hm-band-head {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 9px;
	padding: 0;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ota-hm-ink);
}

.ota-hm-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--ota-hm-c, var(--ota-hm-unknown));
	flex: 0 0 auto;
}

.ota-hm-band-head.ota-hm-status-unknown .ota-hm-dot {
	background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.85) 0 2px, transparent 2px 4px);
}

.ota-hm-rows { display: flex; flex-direction: column; gap: 9px; }

/* ---- a check row ----------------------------------------------------- */

.ota-hm-row {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 14px 16px;
	background: var(--ota-hm-panel);
	border: 1px solid var(--ota-hm-line);
	border-left: 5px solid var(--ota-hm-c, var(--ota-hm-unknown));
	border-radius: 7px;
}

.ota-hm-row.ota-hm-status-unknown {
	/* Very light hatch across the whole row — visible without shouting. */
	background-image: repeating-linear-gradient(45deg, rgba(107,114,128,.05) 0 6px, transparent 6px 12px);
}

.ota-hm-row-status { flex: 0 0 auto; padding-top: 1px; }

.ota-hm-pill {
	display: inline-block;
	min-width: 74px;
	text-align: center;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ota-hm-c, var(--ota-hm-unknown));
}

.ota-hm-pill.ota-hm-status-unknown {
	background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 3px, transparent 3px 6px);
}

.ota-hm-row-body { flex: 1 1 auto; min-width: 0; }

.ota-hm-row-title {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 3px;
}

.ota-hm-row-label { font-weight: 700; font-size: 15px; }

.ota-hm-tag {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 2px 6px;
	border-radius: 3px;
	background: #eef1f4;
	color: #55606d;
	font-weight: 700;
}

.ota-hm-sev-s1 { background: #fde8e6; color: #a01b18; }
.ota-hm-sev-s2 { background: #fdf0dc; color: #8a5100; }

/* The timestamp line — the brief's "show it always", because a relative age
   is what makes staleness legible where a coloured dot does not. */
.ota-hm-row-when { font-size: 13px; margin-bottom: 3px; }
.ota-hm-when-label { color: var(--ota-hm-muted); }
.ota-hm-row-when strong { font-weight: 700; }
.ota-hm-never { color: var(--ota-hm-unknown); font-style: italic; }
.ota-hm-when-abs { color: var(--ota-hm-muted); font-size: 12px; margin-left: 6px; }

.ota-hm-row-detail { font-size: 13.5px; margin-bottom: 4px; }
.ota-hm-reason { color: #4b5563; font-style: italic; }

.ota-hm-row-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 12px;
	color: var(--ota-hm-muted);
}

.ota-hm-row-action {
	margin-top: 8px;
	padding: 8px 11px;
	background: #f6f7f9;
	border-radius: 5px;
	font-size: 13px;
	line-height: 1.45;
}

.ota-hm-row-desc {
	margin-top: 6px;
	font-size: 12px;
	color: var(--ota-hm-muted);
}

/* ---- 30-day strip ---------------------------------------------------- */

.ota-hm-row-strip {
	flex: 0 0 auto;
	display: flex;
	gap: 2px;
	align-items: center;
	padding-top: 4px;
}

.ota-hm-day {
	width: 5px;
	height: 22px;
	border-radius: 1px;
	background: var(--ota-hm-c, var(--ota-hm-unknown));
	opacity: .85;
}

.ota-hm-day.ota-hm-status-unknown {
	background: #d7dade;
	background-image: repeating-linear-gradient(45deg, #b9bec5 0 2px, transparent 2px 4px);
}

/* ---- blind spots ----------------------------------------------------- */

.ota-hm-blind {
	margin-top: 30px;
	padding: 18px 20px;
	border: 1px dashed #b9bec5;
	border-radius: 8px;
	background: #fbfbfc;
}

.ota-hm-blind-head { margin: 0 0 5px; font-size: 15px; font-weight: 700; }

.ota-hm-blind-intro {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--ota-hm-muted);
	max-width: 62ch;
}

.ota-hm-blind-list { margin: 0; padding: 0; list-style: none; }

.ota-hm-blind-list li {
	padding: 9px 0;
	border-top: 1px solid var(--ota-hm-line);
	font-size: 13px;
}

.ota-hm-blind-list strong { display: block; }
.ota-hm-blind-why { display: block; color: var(--ota-hm-muted); }
.ota-hm-blind-fix { display: block; color: #55606d; font-style: italic; margin-top: 2px; }

.ota-hm-foot {
	margin-top: 22px;
	font-size: 12px;
	color: var(--ota-hm-muted);
}

.ota-hm-locked {
	padding: 14px 16px;
	background: #f6f7f9;
	border-radius: 6px;
	color: #55606d;
}

.ota-hm-wrap .ota-hm-intro { max-width: 62em; }

/* ---- narrow screens -------------------------------------------------- */

@media (max-width: 782px) {
	.ota-hm-row { flex-wrap: wrap; }
	.ota-hm-row-strip { width: 100%; padding-top: 10px; }
	.ota-hm-when-abs { display: none; }
}

/* ---- dark mode ------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.ota-hm-context-front .ota-hm-root,
	.ota-hm-context-front {
		--ota-hm-ink: #e8eaed;
		--ota-hm-muted: #9aa4b0;
		--ota-hm-line: #333a44;
		--ota-hm-panel: #1c2027;
	}

	.ota-hm-context-front .ota-hm-tag { background: #2a303a; color: #b6bfca; }
	.ota-hm-context-front .ota-hm-row-action { background: #232830; }
	.ota-hm-context-front .ota-hm-blind { background: #1a1e24; border-color: #3a424d; }
	.ota-hm-context-front .ota-hm-selfalert { background: #2e2413; border-color: #7a5a12; }
}