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

/* A drag across the scene moves the probe; up and down still scroll the page on a phone. */
.flk-dm .flk-sim-canvas { touch-action: pan-y; cursor: crosshair; }
.flk-dm-model { display: flex; flex-direction: column; gap: 14px; }
.flk-dm-model[hidden] { display: none; }
.flk-dm-small { color: var(--muted); font-weight: 600; font-size: .76rem; margin-top: -4px; }
.flk-dm-off[aria-pressed="true"] { background: var(--orange); color: var(--on-orange); }
.flk-dm-said { min-height: 0; color: var(--fg); }
.flk-dm-said:empty { display: none; }

/* The curves' keys: a chip each, its colour the curve's on the scene. */
.flk-dm-keys .flk-chip { display: inline-flex; align-items: center; gap: 6px; padding-inline: 9px; }
.flk-dm-key[aria-pressed="false"] { opacity: .55; text-decoration: line-through; text-decoration-thickness: 1px; }
.flk-dm-sw { display: inline-block; width: 16px; height: 3px; border-radius: 2px; flex: none; }
.flk-dm-sw-data { width: 8px; height: 8px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 1.5px #5d7b7d; }
.flk-dm-sw-total { height: 4px; background: #ff8c1a; }
.flk-dm-sw-visible { background: repeating-linear-gradient(90deg, #9fbcba 0 5px, transparent 5px 8px); }
.flk-dm-sw-bulge { background: #e0a526; }
.flk-dm-sw-disc { background: #5b9cf0; }
.flk-dm-sw-gas { background: #2cc2b4; }
.flk-dm-sw-halo { background: repeating-linear-gradient(90deg, #a99ff0 0 6px, transparent 6px 9px); }
.flk-dm-sw-kepler { background: repeating-linear-gradient(90deg, #8fb2b0 0 2px, transparent 2px 5px); }
[data-theme="light"] .flk-dm-sw-visible { background: repeating-linear-gradient(90deg, #4e6a6d 0 5px, transparent 5px 8px); }
[data-theme="light"] .flk-dm-sw-halo { background: repeating-linear-gradient(90deg, #4a3aa7 0 6px, transparent 6px 9px); }
[data-theme="light"] .flk-dm-sw-kepler { background: repeating-linear-gradient(90deg, #4e6a6d 0 2px, transparent 2px 5px); }

/* «چرا»: four steps, each setting the scene. */
.flk-dm-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.flk-dm-steps li { display: flex; }
.flk-dm-steps button {
    display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px; text-align: start; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--fg); font: inherit;
}
.flk-dm-steps button:hover { background: var(--teal-soft); }
.flk-dm-steps button:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
.flk-dm-step-n {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--teal-soft); color: var(--teal-ink); font-weight: 900; font-size: .95rem;
}
.flk-dm-step-t { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.flk-dm-step-t b { font-size: .95rem; }
.flk-dm-step-t small { color: var(--muted); font-size: .8rem; line-height: 1.85; }
.flk-dm-steps .flk-sim-go { align-self: center; }
@media (max-width: 560px) {
    .flk-dm-steps .flk-sim-go { display: none; }
}