/* Figure: the palette and the octopus beside the 3-D space their mixture lives
   in. Behaviour lives in static/js/mix-3d.js; markup is <div id="mix-3d-figure">
   in src/index.html. The two 2-D figures style themselves; this file only lays
   them out beside the plot and styles the plot's own chrome. */

.mix3d {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px 0; /* no gap between the columns; the row gap only spaces the stacked layout */
  align-items: start;
  margin: 2rem 0 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
}

/* The tab group and both figures carry their own outer margins for when they
   stand alone; inside this grid the grid's gap is the spacing. */
.mix3d .fig-tabs,
.mix3d .pm,
.mix3d .oct {
  margin: 0;
}

/* The marbles panel runs edge to edge in its column (no width cap); the 3-D
   canvas beside it takes the drawing's height, see js/mix-3d.js targetHeight. */

/* The plot stays in view while the reader works the taller panel beside it. */
.mix3d-right {
  position: sticky;
  top: 1rem;
  /* level with the panels, under the tab strip */
  padding-top: 40px;
}

.mix3d-plot {
  display: block;
}

.mix3d-canvas {
  display: block;
  cursor: grab;
  touch-action: none;
}
.mix3d-canvas.is-over-sample {
  cursor: move;
}
.mix3d-canvas.is-dragging {
  cursor: grabbing;
}

.mix3d-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--vx-muted, #6b6a63);
}
.mix3d-space {
  color: var(--vx-ink, #16160f);
  font-weight: 600;
}
.mix3d-value {
  color: var(--vx-ink, #16160f);
  font-variant-numeric: tabular-nums;
}
.mix3d-note {
  flex-basis: 100%;
}

.mix3d-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--vx-muted, #6b6a63);
}
.mix3d-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  cursor: pointer;
}
.mix3d-btn {
  font: inherit;
  padding: 3px 8px;
  color: var(--vx-ink, #16160f);
  background: transparent;
  border: 1px solid var(--vx-rule, #d8d7cf);
  border-radius: 3px;
  cursor: pointer;
}
.mix3d-btn:hover {
  border-color: var(--vx-active-outline, #16160f);
}
.mix3d-btn i {
  font-family: Georgia, "Times New Roman", serif;
}
.mix3d-own-controls input[type="range"] {
  width: 90px;
  margin: 0 2px;
}

@media (max-width: 900px) {
  .mix3d {
    grid-template-columns: minmax(0, 1fr);
  }
  .mix3d-right {
    position: static;
    padding-top: 0;
  }
}