/* falakbin.ir/lab/star-life: this lab's own rules, after sims.css (docs/plans/lab-wave3.md).
   The scene's canvas lets a phone scroll the page with an up-and-down swipe: the
   strip and the path are scrubbed sideways, and a tap picks a star. */

.flk-sl .flk-sim-canvas { touch-action: pan-y; cursor: pointer; }
.flk-sl .flk-sim-chips .flk-chip { padding: 4px 10px; }
.flk-sl [data-sim-read="type"] { text-align: end; }

/* What the star is now, its figures and the key of the cut: under the scene on a wide screen (the panel spans both rows), after the panel on a phone. */
.flk-sl-out { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.flk-sl-out .flk-sim-read { grid-template-columns: 1fr 1fr; border-top: 0; padding-top: 0; }
.flk-sl-out .flk-sl-key { grid-column: 1 / -1; }
@media (min-width: 921px) {
    .flk-sl .flk-sim-panel { grid-row: span 2; }
}
@media (max-width: 700px) {
    .flk-sl-out { grid-template-columns: minmax(0, 1fr); padding: 14px 12px; }
}

/* What the star is doing now. */
.flk-sl-now { background: var(--bg-2); border: 1px solid var(--line-soft); border-inline-start: 3px solid var(--orange); border-radius: 12px; padding: 10px 12px; }
.flk-sl-now b { display: block; color: var(--orange-ink); font-size: 1.02rem; font-weight: 850; }
.flk-sl-now p { margin: 4px 0 0; font-size: .85rem; line-height: 1.9; color: var(--fg); }
.flk-sl-now .flk-sl-note { color: var(--teal-ink); font-weight: 700; }
.flk-sl-now .flk-sl-note[hidden] { display: none; }

/* The colours of the layers in the cut (the scene's own, the same on both themes). */
.flk-sl-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .78rem; }
.flk-sl-key li { display: inline-flex; align-items: center; gap: 5px; }
.flk-sl-key b { color: var(--fg); font-weight: 800; }
.flk-sl-el { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(3, 20, 26, .35); }
.flk-sl-el-h { background: #4f9fe8; }
.flk-sl-el-he { background: #f2c14e; }
.flk-sl-el-co { background: #8a8d96; }
.flk-sl-el-ne { background: #ff6f91; }
.flk-sl-el-o { background: #3fcac3; }
.flk-sl-el-si { background: #b4a8ff; }
.flk-sl-el-fe { background: #c8673a; }
.flk-sl-el-n { background: #c9d6ff; }
.flk-sl-el-fire { background: radial-gradient(circle, #fffbe6 0, #ffd68c 40%, #ff8c1a 100%); border-radius: 50%; }

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