/* /crypto-correlation (templates/crypto_correlation.html, main.cxm) and /crypto-volatility
   (templates/crypto_volatility.html, main.vsc). Loaded after seo.css; colours follow the site tokens. */
.cxm, .vsc { --cx-p: 242, 73, 90; --cx-n: 31, 207, 138; }
:root[data-theme="light"] .cxm, :root[data-theme="light"] .vsc { --cx-p: 217, 45, 67; --cx-n: 8, 158, 99; }
@media (min-width: 760px) { .cx-stats.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .cx-stats.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cxm .panel-h, .vsc .panel-h { gap: 8px; flex-wrap: wrap; }

.cx-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.cx-legend .cx { min-width: 0; font-family: Inter, sans-serif; }
.cx { display: inline-block; min-width: 40px; padding: 2px 5px; border-radius: 5px; text-align: right;
      font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--text); }
.cx-p1 { background: rgba(var(--cx-p), .04); color: var(--muted); }
.cx-p2 { background: rgba(var(--cx-p), .12); }
.cx-p3 { background: rgba(var(--cx-p), .22); }
.cx-p4 { background: rgba(var(--cx-p), .34); }
.cx-p5 { background: rgba(var(--cx-p), .50); font-weight: 600; }
.cx-n1 { background: rgba(var(--cx-n), .06); color: var(--muted); }
.cx-n2 { background: rgba(var(--cx-n), .16); }
.cx-n3 { background: rgba(var(--cx-n), .28); }
.cx-n4 { background: rgba(var(--cx-n), .40); }
.cx-n5 { background: rgba(var(--cx-n), .52); font-weight: 600; }
.cx-self { background: var(--panel2); color: var(--dim); }
.cx-na { color: var(--dim); }
.cx-table td.cx-c { padding: 2px 3px; }
.cx-table th.cx-col { padding-left: 3px; padding-right: 3px; font-size: 11px; }
.cx-table th.c-coin { text-align: left; font-weight: 500; }
.cx-table th.cx-col a { color: inherit; text-decoration: none; }
.cx-table th.cx-col a:hover { color: var(--text); text-decoration: underline; }
.cxc-table { width: auto; min-width: 280px; }
.cx-excl { margin: 0; padding: 8px 14px 12px; font-size: 12.5px; }

.vx { display: inline-block; padding: 1px 6px; border-radius: 5px; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 12px; }
.vx-up { background: rgba(var(--cx-p), .12); }
.vx-up2 { background: rgba(var(--cx-p), .30); font-weight: 600; }
.vx-dn { background: rgba(var(--cx-n), .10); }
.vx-dn2 { background: rgba(var(--cx-n), .26); font-weight: 600; }
.vsc-table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.vsc-table th[data-sort]:hover { color: var(--text); }
.vsc-table th[aria-sort="descending"]::after { content: " ▼"; }
.vsc-table th[aria-sort="ascending"]::after { content: " ▲"; }
.vsc-split { display: grid; gap: 14px; }
@media (min-width: 1000px) { .vsc-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }