/* Gaussian-process playground (/playground/gaussian-processes/), on top of playground.css: the mode
   switch, the sliders, the parameter table in the rail and the model notes. Scoped to .gp. */

/* mode switch and the sentence for the chosen mode, above the stage */
.gp-modes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  padding-block-end: clamp(16px, 2vw, 24px);
  border-block-end: 1px solid var(--line);
}
.gp-switch { display: inline-flex; gap: 8px; }
.gp-switch .btn:first-child { flex: 0 0 auto; }
.gp-switch .btn[aria-selected="true"] { background: var(--ink); color: var(--base); border-color: var(--ink); }
.gp-mode-text { margin: 0; flex: 1 1 36ch; max-inline-size: 70ch; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }

.gp-main canvas, .gp-s-pair canvas, .gp-k-lml canvas { touch-action: manipulation; }

/* legend marks beyond the ones playground.css defines */
.pg-key .k-mean { background: var(--mark); }
.pg-key .k-band { block-size: 9px; border-radius: 2px; background: color-mix(in oklab, var(--mark) 22%, transparent); }
.pg-key .k-obs, .pg-key .k-data { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ink); }
.pg-key .k-draw { background: linear-gradient(90deg, var(--cat-0), var(--cat-1), var(--cat-2)); }
.pg-key .k-curve { block-size: 2px; background: var(--flow); }
.pg-key .k-now { block-size: 0; border-block-start: 1.5px dashed var(--ink); background: none; }

/* range sliders: a label with the value, then the slider */
.gp-range .pg-label { display: flex; justify-content: space-between; gap: 8px; }
.gp-range output { color: var(--ink); font-variant-numeric: tabular-nums; }
.gp-range sub { font-size: 0.72em; }

/* star mode: the parameter table in the rail and the selects in the legends */
.gp-table { inline-size: 100%; border-collapse: collapse; font: 0.8125rem/1.4 var(--mono); color: var(--ink-2); }
.gp-table th { padding: 0 6px 6px 0; text-align: left; font-weight: 500; color: var(--muted); }
.gp-table th:first-child { inline-size: 1px; }
.gp-table td { padding: 5px 6px 5px 0; border-block-start: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-table td:last-child, .gp-table th:last-child { padding-inline-end: 0; }
.gp-table b { font-weight: 600; color: var(--ink); }
.gp-table small { font-size: 0.8125rem; color: var(--muted); }
.gp-table .prior { color: var(--muted); }
.gp-s-note { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.gp-axes { display: inline-flex; gap: 12px; }
.gp-axes .pg-select--sm select { min-inline-size: 60px; }

/* the model, below the charts, in the reading width */
.gp-details .gp-cols { display: grid; gap: 20px 40px; grid-template-columns: minmax(0, 1fr); }
.gp-details .gp-col { display: grid; gap: 10px; align-content: start; min-inline-size: 0; }
.gp-details .gp-col p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
.gp-details .tex-display { display: block; overflow-x: auto; padding: 6px 0; font-size: 1rem; color: var(--ink); }
.gp-details .katex-display { margin: 0; }
.gp-details ul { margin: 0; padding-inline-start: 1.1em; font: 0.875rem/1.55 var(--mono); color: var(--ink-2); display: grid; gap: 4px; }
.gp-details li::marker { color: var(--muted); }
@container pg (min-width: 680px) {
  .gp-details .gp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}