/* Match Jerry's standalone diagnostics page. Literal colors support older WebViews. */
* { box-sizing: border-box; }
body { margin: 0; padding: 20px; color: #000; color: CanvasText; background: #fff; background: Canvas; font: 16px/1.5 system-ui, sans-serif; }
main { max-width: 680px; margin: auto; }
h1 { font-size: 24px; margin: 0 0 12px; }
h2 { font-size: 18px; margin: 0 0 10px; }
p { margin: 8px 0; overflow-wrap: break-word; overflow-wrap: anywhere; }
.card { background: #fff; background: Field; color: #000; color: FieldText; border: 1px solid #808080; border-color: GrayText; border-radius: 8px; padding: 16px; margin: 16px 0; }
button { font: inherit; padding: 10px 14px; margin: 6px 8px 6px 0; color: #000; color: ButtonText; background: #eee; background: ButtonFace; border: 1px solid #000; border-color: ButtonText; border-radius: 6px; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button:focus, summary:focus { outline: 2px solid currentColor; outline-offset: 3px; }
.identity { display: flex; align-items: center; flex-wrap: wrap; }
.identity > span { margin-right: 10px; white-space: nowrap; }
.identity strong { flex: 1; min-width: 140px; font-size: 14px; overflow-wrap: break-word; word-break: break-all; }
.copy-id { margin: 6px 0 6px 10px; }
.timestamp { font-size: 13px; }
.timestamp time { margin-left: 8px; }
.counts { display: flex; flex-wrap: wrap; border-top: 1px solid #808080; border-color: GrayText; margin-top: 12px; padding-top: 8px; }
.counts > * { margin-right: 20px; }
.counts span { font-size: 13px; align-self: center; }
#status, .hint, .footnote, .privacy { font-size: 13px; }
#pool-message { font-size: 14px; }
#pool-results { list-style: none; margin: 0; padding: 0; }
.line { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #808080; border-color: GrayText; padding: 10px 0; min-height: 59px; }
.line-domain { min-width: 0; font-size: 15px; overflow-wrap: break-word; word-break: break-all; margin-right: 10px; }
.line-result { flex: 0 0 106px; text-align: right; font-size: 15px; }
.line-result strong, .line-detail { display: block; }
.line-detail { font-size: 12px; }
.device dl { margin: 12px 0 0; }
.device dl > div { display: flex; padding: 8px 0; border-top: 1px solid #808080; border-color: GrayText; }
.device dt { flex: 0 0 64px; margin-right: 16px; }
.device dd { margin: 0; overflow-wrap: break-word; min-width: 0; }
.technical summary { cursor: pointer; font-size: 18px; font-weight: 600; }
.technical[open] summary { margin-bottom: 12px; }
pre { white-space: pre-wrap; overflow-wrap: break-word; overflow-wrap: anywhere; font-size: 13px; }
textarea { box-sizing: border-box; width: 100%; height: 160px; font-size: 16px; }
[hidden] { display: none !important; }
/* Speed colors apply only to pool results and their legend, not the page theme. */
.pool .speed-fast { color: #176b32; }
.pool .speed-medium { color: #8a5900; }
.pool .speed-slow { color: #a34412; }
.pool .failure { color: #b42318; }
.speed-legend { font-size: 12px; margin-top: 12px; }
@media (forced-colors: active) {
 .pool .speed-fast, .pool .speed-medium, .pool .speed-slow, .pool .failure { color: CanvasText; }
}
/* Compact status symbols remain recognizable without relying on color alone. */
.line-result strong::before {
 content: "!"; display: inline-block; width: 17px; height: 17px;
 margin-right: 5px; border-radius: 50%; text-align: center;
 font: bold 12px/17px Arial, sans-serif; vertical-align: 1px;
 background: #b42318; color: #fff;
}
.line-result.speed-fast strong::before, .line-result.success strong::before {
 content: "✓"; background: #176b32;
}
.line-result.speed-medium strong::before, .line-result.speed-slow strong::before {
 content: "▲"; background: transparent; border-radius: 0; font-size: 19px;
}
.line-result.speed-medium strong::before { color: #ba7b00; }
.line-result.speed-slow strong::before { color: #a34412; }
.line-result.pending strong::before { content: "…"; background: transparent; color: inherit; }