/* Certificate Decoder: chain list and certificate cards. Loaded only on /tools/cert-decode/. */
.cert-host { width: min(100%, 24em); }
.cert-hint { margin: 0; font-size: var(--matrix-type-caption); }
.cert-card, .cert-chain-block { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: var(--matrix-space-12) var(--matrix-space-16); margin-top: var(--matrix-space-12); }
.cert-card h3, .cert-chain-block h3 { margin: 0 0 var(--matrix-space-8); font-size: 1.0625rem; overflow-wrap: anywhere; }
.cert-card h4 { margin: var(--matrix-space-12) 0 var(--matrix-space-8); font-size: 0.9375rem; }
.cert-fields { display: grid; grid-template-columns: minmax(9em, max-content) 1fr; gap: 4px var(--matrix-space-12); margin: 0; }
.cert-fields dt { font-weight: 600; }
.cert-fields dd { margin: 0; overflow-wrap: anywhere; }
.cert-mono, .cert-pre { font-family: var(--matrix-font-mono); font-size: 0.875rem; }
.cert-pre { white-space: pre-wrap; }
.cert-chain { margin: 0; padding-left: 1.5em; display: grid; gap: var(--matrix-space-8); }
.cert-link p { margin: 2px 0 0; }
.cert-good { color: var(--matrix-success); }
.cert-warn { color: var(--matrix-warning); }
.cert-bad { color: var(--matrix-danger); }
/* a heading that says a signature failed: the shell's .result h2 (the success colour) is more specific than .cert-bad (hub R70bde41d V1, I1338cb8e) */
.result h2.cert-bad { color: var(--matrix-danger); }
/* and the panel under it: a result whose heading says a signature failed is not shown as a success at a glance (fb_e6e1c526, Lucy's round 1) */
.result:has(h2.cert-bad) { background: var(--matrix-danger-background); border-color: var(--matrix-danger); }
.cert-alert { border-left: 4px solid var(--matrix-danger); padding: var(--matrix-space-8) var(--matrix-space-12); background: var(--matrix-danger-background); }
@media (max-width: 600px) { .cert-fields { grid-template-columns: 1fr; } .cert-fields dd { margin-bottom: 6px; } }