/* Quantum-Like Lab by Ethan Dickey. */
.ql-matrix-view {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 16px;
}
.ql-matrix-heading {
  padding: 14px 16px 0;
}
.ql-matrix-heading h2 {
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 7px;
}
.ql-matrix-heading p {
  color: var(--muted, #9db3c0);
  font-size: .77rem;
  line-height: 1.5;
  margin: 0;
}
.ql-matrix-legend {
  margin: 0 16px 10px;
  padding: 12px 14px;
  border: 1px solid #345260;
  border-radius: 8px;
  background: #0b1a25;
  max-width: 760px;
  font-size: .72rem;
  color: #d9e6ea;
}
.ql-matrix-legend-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.ql-matrix-legend-heading strong { color: #f1f7f8; }
.ql-matrix-legend-heading span { color: #bed0d8; }
.ql-matrix-colorbar {
  height: 15px;
  border: 1px solid #68828f;
  border-radius: 3px;
}
.ql-matrix-ticks {
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
  color: #f0f5f7;
  margin-top: 4px;
}
.ql-matrix-legend p { margin: 7px 0 0; line-height: 1.5; }
.ql-matrix-undefined { display: flex; align-items: center; gap: 8px; }
.ql-matrix-undefined i {
  display: inline-block;
  width: 22px;
  height: 15px;
  flex-shrink: 0;
  border: 1px solid #6d8793;
  background: repeating-linear-gradient(45deg, #17202b, #17202b 4px, #697e87 5px, #17202b 6px);
}
.ql-matrix-warning { color: #ffcf83; }
.ql-matrix-values { margin: 9px 16px 13px; font-size: .76rem; }
.ql-matrix-values summary { cursor: pointer; color: #bde4d9; }
.ql-matrix-value-scroll { overflow-x: auto; max-width: 100%; margin-top: 8px; }
.ql-matrix-value-scroll table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ql-matrix-value-scroll caption { text-align: left; padding: 5px 8px 10px; color: #c4d5df; }
.ql-matrix-value-scroll th, .ql-matrix-value-scroll td { padding: 8px; border: 1px solid #35515f; text-align: right; white-space: nowrap; }
.ql-matrix-value-scroll th { color: #c9e7e0; background: #102734; }
.ql-matrix-view .matrix-wrap { display: flex; flex-direction: column; height: auto; padding: 0 12px; }
.ql-matrix-view .matrix-wrap canvas {
  width: min(100%, 440px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  image-rendering: auto;
}
.ql-matrix-view .matrix-readout {
  position: static;
  min-height: 2.8em;
  width: 100%;
  padding: 6px 8px;
  pointer-events: auto;
  color: #d6e6ed;
  background: #0a1b26;
  border-radius: 6px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .ql-matrix-heading { padding: 12px 12px 0; }
  .ql-matrix-legend { margin: 0 10px 9px; padding: 10px 11px; }
  .ql-matrix-values { margin: 8px 11px 11px; }
  .ql-matrix-view .matrix-toolbar { gap: 6px; padding: 10px; }
}
/* Keep row and column identities visible in the five-bit numeric tables. */
.ql-matrix-value-scroll { max-height: 28rem; overflow: auto; }
.ql-matrix-value-scroll thead th { position: sticky; top: 0; z-index: 2; }
.ql-matrix-value-scroll th[scope="row"] { position: sticky; left: 0; z-index: 1; }
.ql-matrix-value-scroll thead th:first-child { left: 0; z-index: 3; }
/* Numeric inspection is a first-class alternative to pointer-only heatmaps. */
.ql-matrix-inspector {
  margin: 12px 16px;
  max-width: 760px;
  padding: 12px;
  border: 1px solid #345260;
  border-radius: 8px;
  font-size: .875rem;
  line-height: 1.5;
}
.ql-matrix-cell-controls { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
.ql-matrix-cell-controls label { display:grid; gap:4px; flex:1 1 120px; }
.ql-matrix-cell-controls select { width:100%; font-size:1rem; }
.ql-matrix-inspector output { display:block; padding:10px 0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ql-matrix-inspector details { margin-top:6px; }
.ql-matrix-inspector summary { cursor:pointer; color:var(--teal); }
.ql-matrix-inspector p { margin:8px 0; }
.ql-matrix-page-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin:10px 0; }
.ql-matrix-page-controls button { white-space:normal; }
.ql-matrix-edge-scroll { max-height:28rem; overflow:auto; }
.ql-matrix-edge-scroll table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.ql-matrix-edge-scroll caption { text-align:left; margin-bottom:8px; }
.ql-matrix-edge-scroll th,.ql-matrix-edge-scroll td { text-align:right; border:1px solid #35515f; padding:7px; white-space:nowrap; }
.ql-matrix-edge-scroll thead th { position:sticky; top:0; background:#102734; z-index:1; }
.ql-matrix-edge-scroll tr.is-selected { background:#244943; }
.ql-matrix-edge-scroll button { min-width:5.5rem; }
.ql-matrix-view .matrix-normal-intro p,
.ql-matrix-heading p,
.ql-matrix-view .matrix-readout,
.ql-matrix-legend,
.ql-matrix-values { font-size:.875rem; line-height:1.5; }
@media (max-width:640px) {
  .ql-matrix-inspector { margin:10px; padding:10px; }
  .ql-matrix-page-controls button { flex:1 1 8rem; }
}