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

/* The scene is tall on a phone: a finger moving up and down scrolls the page; across, it moves time. */
.flk-exo .flk-sim-canvas { touch-action: pan-y; cursor: crosshair; }

/* Side by side, the scene stays in view while the reader works down the long panel. */
@media (min-width: 921px) { .flk-exo > .flk-sim-stage { position: sticky; top: 76px; } }

/* The two modes' controls, each a column like the panel itself. */
.flk-exo-group { display: flex; flex-direction: column; gap: 14px; }
.flk-exo-group[hidden] { display: none; }
.flk-exo .flk-sim-pace { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.5; }
.flk-exo .flk-sim-pace small { color: var(--muted); font-size: .74rem; }

/* The planets of the system as tabs, with add and remove. */
.flk-exo-planets { display: flex; align-items: center; gap: 6px; }
.flk-exo-planets .flk-sim-seg { flex: 1 1 auto; min-width: 0; }
.flk-exo-planets .flk-icon-btn { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--fg); cursor: pointer; }
.flk-exo-planets .flk-icon-btn:hover:not(:disabled) { background: var(--teal-soft); color: var(--teal-ink); }
.flk-exo-planets .flk-icon-btn:disabled { opacity: .35; cursor: default; }
.flk-exo-planets .flk-icon-btn .flk-i { width: 16px; height: 16px; }
.flk-exo-tab { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 2.2em; }
.flk-exo-tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--exo-c, #3fcac3); flex: none; }
.flk-exo-c0 { --exo-c: #3fcac3; } .flk-exo-c1 { --exo-c: #ff8c1a; } .flk-exo-c2 { --exo-c: #b4a8ff; } .flk-exo-c3 { --exo-c: #7fb6ff; }
.flk-exo-c4 { --exo-c: #3ccf91; } .flk-exo-c5 { --exo-c: #ffd166; } .flk-exo-c6 { --exo-c: #ff6b5d; }

/* The less used sliders, folded. */
.flk-exo-more { border: 1px solid var(--line-soft); border-radius: 12px; padding: 0 12px; background: var(--bg-2); }
.flk-exo-more > summary { cursor: pointer; padding: 9px 0; color: var(--muted); font-size: .84rem; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.flk-exo-more > summary::-webkit-details-marker { display: none; }
.flk-exo-more > summary::after { content: "+"; font-weight: 800; color: var(--teal-ink); }
.flk-exo-more[open] > summary::after { content: "−"; }
.flk-exo-more[open] { padding-bottom: 12px; }
.flk-exo-more[open] > summary { margin-bottom: 4px; }
.flk-exo-more .flk-sim-ctl + .flk-sim-ctl, .flk-exo-more .flk-sim-ctl + .flk-sim-note { margin-top: 12px; }

.flk-exo .flk-sim-read dd { font-size: .9rem; }
.flk-exo [data-exo-truth] dd, .flk-exo [data-sim-read="fyou"], .flk-exo [data-sim-read="hz"], .flk-exo [data-sim-read="seen"] { font-weight: 700; font-size: .86rem; }
.flk-exo [data-exo-warn][hidden], .flk-exo [data-exo-truth][hidden] { display: none; }

/* Comfortable touch controls, with visible keyboard focus. */
.flk-exo .flk-chip, .flk-exo .flk-sim-seg button { min-height: 44px; }
.flk-exo button:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 3px; }