@layer components{.compat-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border:1px solid currentColor;border-radius:var(--radius-large);font-size:12px;font-weight:600;white-space:nowrap}.compat-badge-compatible{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 10%,transparent)}.compat-badge-compatible-with-shim{color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 10%,transparent)}.compat-badge-needs-conversion{color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 10%,transparent)}.compat-badge-incompatible{color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 10%,transparent)}.compat-notice{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--color-warning);border-radius:var(--radius-small);background:color-mix(in srgb,var(--color-warning) 8%,var(--color-surface));color:var(--color-text);font-size:13px}.compat-notice span{color:var(--color-text-secondary)}.compat-details{display:flex;flex-direction:column;gap:12px}.compat-details-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--color-text-secondary);font-size:12px}.compat-details-metadata{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}.compat-details-metadata div{min-width:0;padding:8px;border:1px solid var(--color-border);border-radius:var(--radius-small)}.compat-details-metadata dt{color:var(--color-text-tertiary);font-size:10px}.compat-details-metadata dd{overflow-wrap:anywhere;margin:3px 0 0;color:var(--color-text);font-size:11px}.compat-details-section{display:flex;flex-direction:column;gap:6px}.compat-details-section h4{margin:0;color:var(--color-text-secondary);font-size:11px;font-weight:650}.compat-details-section p{margin:0;color:var(--color-text-secondary);font-size:11px;line-height:1.5}.compat-resolution-list{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}.compat-resolution-list li{display:flex;min-width:0;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 8px;background:var(--color-surface-subtle);font-size:11px}.compat-resolution-list code{overflow-wrap:anywhere;color:var(--color-text)}.compat-resolution-list span{flex:0 0 auto;color:var(--color-text-tertiary);text-align:right}.compat-half-list{display:flex;flex-direction:column;gap:5px;margin:0}.compat-half-list>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;padding:6px 8px;background:var(--color-surface-subtle);font-size:11px}.compat-half-list dt{color:var(--color-text-tertiary)}.compat-half-list dd{display:flex;min-width:0;flex-direction:column;gap:2px;margin:0;color:var(--color-text-secondary);overflow-wrap:anywhere}.compat-half-list strong{color:var(--color-text);font-weight:600}.compat-probe-error{color:var(--color-danger)!important;overflow-wrap:anywhere}@media(max-width:900px){.compat-details-metadata{grid-template-columns:repeat(2,minmax(0,1fr))}.compat-resolution-list li{align-items:flex-start;flex-direction:column;gap:3px}.compat-resolution-list span{text-align:left}}}