/* In-page joint-density plot — styled to the Quantaiko site (surfaces/borders/accent from style.css).
   Paired with joint_density.js. Scope: .joint-density */

.joint-density{ width:100%; max-width:56rem; margin:1.5rem 0 0; }

.joint-density .jd-label{
  font-size:0.9rem; color:#94a3b8; margin:0 0 0.75rem; line-height:1.5;
}

.joint-density .jd-table{
  overflow-x:auto;
  border:1px solid rgba(148,163,184,0.25); border-radius:0.75rem;
  background:rgba(148,163,184,0.06);
}
.joint-density table{
  border-collapse:collapse; width:100%;
  font-family:"Segoe UI", system-ui, sans-serif; font-variant-numeric:tabular-nums;
}
.joint-density th, .joint-density td{
  padding:0.5rem 0.75rem; text-align:right; white-space:nowrap;
  border-left:1px solid rgba(148,163,184,0.15);
}
.joint-density th:first-child, .joint-density td:first-child{ border-left:0; }
.joint-density thead th{
  font-size:0.72rem; font-weight:600; color:#94a3b8;
  border-bottom:1px solid rgba(148,163,184,0.25);
}
.joint-density thead th.jd-btc{ color:#f87171; }   /* BTC = red family */
.joint-density thead th.jd-eth{ color:#93a4f4; }   /* ETH = blue family */
.joint-density tbody td{ font-size:0.85rem; color:#e2e8f0; }
.joint-density .jd-sel{ text-align:center; width:1%; }
.joint-density .jd-nm{ text-align:left; color:#94a3b8; }
.joint-density .jd-grp{ border-left:2px solid rgba(148,163,184,0.4); }
.joint-density tbody tr{ cursor:pointer; }
.joint-density tbody tr.on{ background:rgba(239,68,68,0.10); }
.joint-density tbody tr.on .jd-nm{ color:#e2e8f0; font-weight:600; }
.joint-density input[type=radio]{
  accent-color:var(--accent,#ef4444); width:16px; height:16px; cursor:pointer; margin:0;
}

.joint-density .jd-controls{ display:flex; justify-content:flex-end; margin:0.75rem 0; }
.joint-density #jd-reset{
  font-family:"Segoe UI", system-ui, sans-serif; font-size:0.85rem; color:#e2e8f0;
  background:rgba(148,163,184,0.06); border:1px solid rgba(148,163,184,0.25);
  border-radius:0.5rem; padding:0.5rem 0.9rem; cursor:pointer;
  transition:border-color 0.15s;
}
.joint-density #jd-reset:hover{ border-color:var(--accent,#ef4444); }
.joint-density #jd-reset:focus-visible{ outline:2px solid var(--accent,#ef4444); outline-offset:2px; }

.joint-density #jd-plot{ width:100%; height:520px; }