/* pca.css - migrated (.ui) page. Typography, sections, links, math, the demo control system,
 * tabs, and buttons come from the archetype. This file keeps the Plotly chart containers and adds
 * the PCA control patterns (sliders with readouts, the display checkboxes, the matrix readouts). */

/* --- Plotly 3D plot containers --- */
/* Definite height: the plot fills it exactly so the grid row holding the figure matches the
   rendered plot. .pca-viz IS the .js-plotly-plot element, so its height must come from here and
   NOT from the height:100% group below (that would resolve against the auto grid row and collapse
   circularly). With only a min-height before, Plotly autosized the plot ~35px taller than the row
   and the excess overflowed onto the next figure's caption when the figures stack on mobile. */
.ui.pca .pca-viz { position: relative; height: 400px; overflow: hidden; }
/* Hand touch gestures to Plotly's 3D controls (one-finger rotate, two-finger pinch-zoom) instead
   of letting the browser scroll or page-zoom over the plot on mobile. */
.ui.pca .pca-viz,
.ui.pca .pca-viz .gl-container,
.ui.pca .pca-viz canvas { touch-action: none; }
.ui.pca .js-plotly-plot,
.ui.pca .plot-container,
.ui.pca .svg-container { width: 100%; }
/* Inner Plotly/d3 elements fill the fixed-height .pca-viz. Deliberately excludes .js-plotly-plot
   (which is .pca-viz itself, sized above) to avoid the circular height:100% collapse. */
.ui.pca .plot-container,
.ui.pca .svg-container,
.ui.pca .main-svg,
.ui.pca .pca-svg-root { height: 100%; }
.ui.pca .point-label { pointer-events: none; }

/* --- Control block: a full-width tabbed panel (override the demo-controls grid) --- */
.ui.pca .demo-controls.pca-controls { display: block; }
.ui.pca .pca-control-tab.is-active { color: #ececf0; border-bottom-color: var(--accent); }
.ui.pca .pca-control-panel { margin-top: 18px; }
.ui.pca .pca-control-panel[hidden] { display: none; }
.ui.pca .pca-control-panel .demo-band { max-width: 680px; }
.ui.pca .pca-action { align-self: end; }

/* --- Sliders with an inline readout (Shape tab) --- */
.ui.pca .pca-slabel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ui.pca .pca-slabel .demo-label { margin: 0; }
.ui.pca .pca-slabel output { font: 500 12px/1 var(--font-mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ui.pca .pca-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; background: var(--hairline-strong); margin: 12px 0 2px; cursor: pointer; }
.ui.pca .pca-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); cursor: pointer; }
.ui.pca .pca-slider::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }

/* --- Display checkbox options --- */
.ui.pca .pca-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; }
.ui.pca .pca-check { display: flex; align-items: center; gap: 10px; font: 500 13px/1.3 var(--font-sans); color: var(--text-2); cursor: pointer; }
.ui.pca .pca-check input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; cursor: pointer; }

/* --- Matrix readouts (two-up mono pre blocks) --- */
.ui.pca .pca-matrices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 26px; }
.ui.pca .pca-matrix-card .demo-label { margin-bottom: 10px; }
.ui.pca .pca-matrix-display { margin: 0; background: #060607; border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 12px 14px; font: 500 11.5px/1.6 var(--font-mono); color: var(--text-2); white-space: pre; overflow-x: auto; }

@container (max-width: 480px) {
  .ui.pca .pca-control-panel .demo-band { grid-template-columns: 1fr; }
}