/* Read-only comparison, scoped to the shared D4 component. */
.d4cmp { color: var(--ink, #f4f4f5); background: var(--surface, #121215); border: 1px solid var(--line, #27272a); border-radius: 12px; margin: 16px 0; padding: 16px; min-width: 0; }
.d4cmp * { box-sizing: border-box; }
.d4cmp .d4cmp-heading { cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1.6; }
.d4cmp .d4cmp-notice, .d4cmp .d4cmp-muted { color: var(--muted, #d4d4d8); font-size: 12px; line-height: 1.6; }
.d4cmp .d4cmp-warning { color: var(--warning-ink, #fbbf24); font-size: 12px; line-height: 1.6; }
.d4cmp .d4cmp-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line, #27272a); border-radius: 8px; }
.d4cmp table { width: 100%; min-width: 1040px; border-collapse: collapse; table-layout: fixed; font-size: 12px; line-height: 1.6; }
.d4cmp caption { text-align: left; padding: 12px; font-weight: 700; }
.d4cmp th, .d4cmp td { padding: 12px; border: 1px solid var(--line, #27272a); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.d4cmp thead, .d4cmp th[scope="row"] { background: var(--surface-soft, #121215); }
.d4cmp th[scope="row"] { font-weight: 400; }
.d4cmp h4, .d4cmp p { margin: 0 0 8px; }
.d4cmp h4 { font-size: 12px; font-weight: 700; }
.d4cmp .d4cmp-literal { white-space: pre-wrap; overflow-wrap: anywhere; }
.d4cmp .d4cmp-links { padding-left: 16px; margin: 0 0 14px; }
.d4cmp .d4cmp-links > li { margin-bottom: 12px; }
.d4cmp .d4cmp-status { font-weight: 700; }
.d4cmp .d4cmp-open { font: inherit; min-height: 44px; padding: 8px; border: 1px solid var(--line, #27272a); border-radius: 6px; background: var(--surface, #121215); color: var(--ink, #f4f4f5); cursor: pointer; }
.d4cmp .d4cmp-open:disabled { opacity: .6; cursor: not-allowed; }
.d4cmp :focus-visible { outline: 3px solid var(--accent, #10b981); outline-offset: 3px; }
@media (max-width: 600px) { .d4cmp { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .d4cmp * { scroll-behavior: auto !important; } }