/* Orbits playground (/playground/orbits/), on top of playground.css: the mode switch, the readouts
   that change with the mode, the sliders, the test particle and the tables. Scoped to .ob. */

.ob-main canvas { touch-action: pan-y; cursor: grab; }
.ob-main canvas.is-dragging { cursor: grabbing; }

/* mode switch: the chosen button filled */
.ob-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob-mode .btn:last-child { grid-column: 1 / -1; }
.ob-mode .btn[aria-pressed="true"] { background: var(--ink); color: var(--base); border-color: var(--ink); }

/* readouts that belong to one mode */
.ob-readout dd { white-space: nowrap; }
.ob-readout dt sub { font-size: 0.8em; line-height: 0; }
.ob-readout dd .ob-ref { display: block; margin-block-start: 3px; font: 500 0.8125rem/1.3 var(--mono); color: var(--muted); }
.ob-readout dd .ob-ref:empty { display: none; }
.ob-readout [data-mode] { display: none; }
.ob[data-mode="earth"] .ob-readout [data-mode="earth"],
.ob[data-mode="galaxy"] .ob-readout [data-mode="galaxy"],
.ob[data-mode="spiral"] .ob-readout [data-mode="spiral"] { display: block; }
.ob-readout .ob-wide { grid-column: 1 / -1; }
.ob[data-mode="spiral"] .ob-not-spiral, .ob[data-mode="spiral"] .ob-energy { display: none; }
.ob-check { cursor: pointer; }
.ob-check input { accent-color: var(--mark); }

/* mode-specific controls and details */
.ob-only { display: none; }
.ob[data-mode="earth"] .ob-only[data-mode="earth"],
.ob[data-mode="galaxy"] .ob-only[data-mode="galaxy"],
.ob[data-mode="spiral"] .ob-only[data-mode="spiral"] { display: contents; }
.ob-details[data-mode] { display: none; }
.ob[data-mode="earth"] .ob-details[data-mode="earth"],
.ob[data-mode="galaxy"] .ob-details[data-mode="galaxy"] { display: grid; }

/* sliders */
.ob-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: center; }
.ob-slider .pg-label { grid-column: 1; }
.ob-slider output { grid-column: 2; font: 500 0.8125rem/1.4 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ob-slider input { grid-column: 1 / -1; inline-size: 100%; margin: 4px 0 0; accent-color: var(--mark); cursor: pointer; }
.ob-station { grid-column: 1 / -1; }
/* the test particle folds away under its own hairline */
.ob-tp { grid-column: 1 / -1; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.ob-tp > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font: 500 0.8125rem/1.4 var(--mono);
  color: var(--muted);
}
.ob-tp > summary::-webkit-details-marker { display: none; }
.ob-tp > summary::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-inline-end: 1.5px solid var(--muted);
  border-block-end: 1.5px solid var(--muted);
  transform: rotate(-45deg);
}
.ob-tp[open] > summary::before { transform: rotate(45deg); }
.ob-tp > summary:hover { color: var(--ink); }
.ob-tp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-block-start: 10px; }
.ob-tp-grid .btn { align-self: end; justify-self: start; }

/* the legends' body marks */
.pg-key i.ob-k { inline-size: 10px; block-size: 10px; border-radius: 50%; }
.ob-details .ob-dot { display: inline-block; inline-size: 9px; block-size: 9px; margin-inline-end: 6px; border-radius: 50%; vertical-align: -1px; }
.ob-details .table-wrap { overflow-x: auto; }