/* falakbin.ir/lab/galaxies: this lab's own rules, after sims.css (docs/plans/lab-wave3.md). */

.flk-gx [hidden] { display: none !important; }

/* The panel's groups: the orbit, then the two discs, each under a small title. */
.flk-gx-group { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.flk-gx-title { margin: 0; color: var(--fg); font-size: .86rem; font-weight: 850; }
.flk-gx-disc { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 12px; }
.flk-gx-disc .flk-sim-seg { background: var(--surface); }
.flk-gx-who { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: .88rem; }
/* The galaxies' own colours, as in the scene (space is dark on both themes). */
.flk-gx-key { flex: none; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(3, 20, 26, .35); }
.flk-gx-key-a { background: #4fd6cc; }
.flk-gx-key-b { background: #ff9a3c; }

.flk-gx .flk-sim-read dd small { font-variant-numeric: tabular-nums; }

/* What is needed now and then: the view, the centre, the stars' number, the drag and the paths. */
.flk-gx-more { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.flk-gx-more summary { display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; color: var(--fg); font-size: .86rem; font-weight: 800; padding: 4px 0; }
.flk-gx-more summary::-webkit-details-marker { display: none; }
.flk-gx-more summary::after { content: ''; margin-inline-start: auto; width: 8px; height: 8px; border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.flk-gx-more[open] summary::after { transform: rotate(-135deg); }
.flk-gx-more summary .flk-i { width: 17px; height: 17px; color: var(--teal-ink); }
.flk-gx-more-body { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
.flk-gx-more .flk-sim-select { width: 100%; }

.flk-gx .flk-sim-canvas { cursor: grab; }

@media (min-width: 921px) {
    /* The panel is taller than the scene: the scene stays in view while the reader goes down the panel. */
    .flk-gx > .flk-sim-stage { position: sticky; top: calc(var(--top-h, 64px) + 12px); }
    .flk-gx:fullscreen > .flk-sim-stage, .flk-gx.flk-sim-max > .flk-sim-stage { position: relative; top: 0; }
}