/* v2.15: Why it's trending + source transparency chips. Uses the app's colour variables so light/dark themes both pass contrast. */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sx-chips{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 6px;padding:0}
.sx{display:inline-flex;align-items:center;gap:5px;background:var(--chip);color:var(--ink);border-radius:999px;padding:1px 9px;font-size:11.5px;line-height:1.6}
.sx .sx-l{color:var(--muted)}
.sx-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.sx-rel-reliable .sx-dot{background:var(--ok)}.sx-rel-mixed .sx-dot,.sx-rel-varies .sx-dot{background:var(--gold)}.sx-rel-unreliable .sx-dot,.sx-rel-deprecated .sx-dot{background:var(--brand)}
.sx-lock{background:transparent;border:1px dashed var(--line)}.sx-lock a{color:var(--muted)}.sx-lock a:hover{color:var(--brand)}
.sx-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:4px 16px 12px;margin:14px 0}
.sx-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 18px;margin:8px 0}.sx-dl div{min-width:0}
.sx-dl dt{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.sx-dl dd{margin:2px 0;overflow-wrap:anywhere}
.sx-stats dd{font:700 20px var(--serif)}
.sx-facts{padding-left:18px;margin:6px 0}.sx-facts li{margin:4px 0}
.sx-profile{background:var(--chip);border-radius:10px;padding:8px 12px;font-size:14px;margin:8px 0}
.why-list{list-style:none;padding:0;margin:0}.why-card h2{margin:0 0 4px;font-size:20px}.why-card h2 a{color:var(--ink)}.why-card h2 a:hover{color:var(--brand)}
.why-lead{margin:6px 0;color:var(--muted)}
.why-up{color:var(--ok);font-weight:600}.why-down{color:var(--brand2);font-weight:600}
.why-locked{border-style:dashed;background:transparent}
.why-quote{margin:6px 0;padding:2px 14px;border-left:3px solid var(--line)}.why-quote p{margin:6px 0}
.why-summary{font-size:17px}.why-angles li{margin:6px 0}
.why-attrib{margin-top:16px}
@media (max-width:520px){.sx-dl{grid-template-columns:1fr}.why-card h2{font-size:18px}}