/* Polytrope playground (/playground/polytropes/): the dashboard grid, sliders and keys, on top
   of the shared playground.css. Scoped to .pt; colours, type and radii come from the site tokens. */

/* the star itself, a dark plate in both themes, its values along the plate's lower edge; beside it the
   interior the model gives it */
.pg-stage2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.pt-render { position: relative; display: grid; margin: 0; }
.pt-render figcaption { position: absolute; inset-inline: 16px; inset-block-end: 12px; color: #d9d6cf; }
.pt-render .pg-readout dt { color: #8f8a82; }
.pt-render .pg-readout dd { color: #ecebe6; }
.pt-render .pg-readout dd small { color: #8f8a82; }
.pt-main { display: flex; flex-direction: column; gap: 8px; margin: 0; min-block-size: 0; }
.pt-star-stage {
  position: relative;
  block-size: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0d0c0b;
  box-shadow: 0 0 0 1px var(--line);
}
.pt-star-stage canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
.pt-star-readout { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.pt-star-readout > div { display: flex; align-items: baseline; gap: 8px; }
.pt-star-readout dt sub { font-variant-caps: normal; font-size: 0.8em; vertical-align: baseline; position: relative; top: 0.2em; }
.pt-star-readout dd { margin: 0; font: 500 0.92rem/1.3 var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .pt-star-stage { block-size: 300px; }
}

.pt-main .pg-stage { block-size: 640px; }
.pt-curve .pg-stage { block-size: 150px; }
.pt-hist .pg-stage { block-size: 220px; }
.pt-theta .pg-stage, .pt-eps .pg-stage { block-size: 180px; }
.pt-main canvas, .pt-curve canvas { touch-action: manipulation; }

/* the run panel */
.pt-run { gap: 8px; }
.pt-run .pg-buttons .pt-draw { flex: 1; }
.pt-run .pg-readout dd { font-size: 1.35rem; }
.pt-run .pg-readout dd small { font-size: 0.8125rem; }
.pt-obs { margin: 0; font: 0.8125rem/1.45 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.pt-obs b { font-weight: 500; color: var(--ink-2); }

/* sliders */
.pt-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pt-slider { display: grid; gap: 2px; min-inline-size: 0; }
.pt-slider--wide { grid-column: 1 / -1; }
.pt-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pt-slider output {
  font: 500 0.8125rem/1.3 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.pt-slider input[type="range"] {
  appearance: none;
  inline-size: 100%;
  block-size: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.pt-slider input[type="range"]::-webkit-slider-runnable-track { block-size: 3px; border-radius: 2px; background: var(--line-strong); }
.pt-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: -5.5px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.pt-slider input[type="range"]::-moz-range-track { block-size: 3px; border-radius: 2px; background: var(--line-strong); }
.pt-slider input[type="range"]::-moz-range-thumb {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.pt-slider input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.pt-slider input[type="range"]:disabled { cursor: progress; opacity: 0.6; }

/* keys: line, dot and band marks */
.pg-key .k-poly { background: var(--accent); }
.pg-key .k-obs { background: var(--ink-2); block-size: 2px; }
.pg-key .k-pp { background: var(--accent); }
.pg-key .k-cno { background: var(--accent-2); }
.pg-key .k-cum { background: var(--ink-2); block-size: 2px; }
.pg-key .k-mesa { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ink-2); }
.pg-key .k-conv { inline-size: 14px; block-size: 10px; border-radius: 2px; background: color-mix(in oklab, var(--accent) 16%, transparent); }
.pg-key .k-ana { block-size: 1px; background: var(--muted); }

/* the detail strip below the dashboard */
.pt-detail .pg-pair { grid-template-columns: minmax(0, 1fr); }
.pt-facts { margin: 0; font: 0.8125rem/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.pt-facts b { font-weight: 500; color: var(--ink-2); }

@container pg (min-width: 680px) {
  .pg-stage2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pt-main .pg-stage { block-size: 420px; }
  .pt-detail .pg-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1000px) and (min-height: 620px) {
  /* the whole dashboard sits on one screen from about 820 px of window height; below that the page scrolls */
  .pt .pg-app, .pg-app.pt { --main-min: 360px; --strip: clamp(270px, 34dvh, 400px); }
  .pg-app .pg-stage2 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-block-size: 0; }
  .pg-app .pt-render { grid-template-rows: minmax(0, 1fr); min-block-size: 0; }
  .pg-app .pt-main { min-block-size: 0; }
  .pg-app .pt-star-stage { block-size: auto; min-block-size: 0; }
  .pg-app .pt-main .pg-stage { flex: 1 1 auto; block-size: auto; min-block-size: 0; }
  .pg-app .pt-detail { gap: 6px; }
  .pg-app .pt-detail .pg-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; flex: 1 1 auto; min-block-size: 0; }
  .pg-app .pt-detail .pg-sub { min-inline-size: 0; display: flex; flex-direction: column; margin: 0; min-block-size: 0; }
  .pg-app .pt-detail .pg-sub .pg-stage { flex: 1 1 auto; block-size: auto; min-block-size: 0; }
  .pg-app .pt-detail .pg-caption { display: block; font-size: 0.8125rem; }
}
/* on a phone: the star, then the controls that change it, then its interior */
@media (max-width: 720px) {
  .pg-app.pt .pg-stage2 { display: contents; }
  .pg-app.pt .pt-render { order: -1; align-self: stretch; }
  .pg-app.pt .pt-main { order: 1; align-self: stretch; }
}