/* falakbin.ir/lab/system-builder: this lab's own rules, after sims.css (docs/plans/lab-wave3.md).
   The scene is dark on both themes (space); the panel follows the site's theme. */

.flk-sb [hidden] { display: none !important; }
.flk-sb .flk-sim-canvas { cursor: crosshair; }
.flk-sb .flk-sim-canvas:active { cursor: grabbing; }

/* The tools over the scene: adding or moving the view (one on), zoom and fit. */
.flk-sb-tools .flk-icon-btn[aria-pressed="true"] { background: #ff8c1a; color: #1a0d00; border-color: #ff8c1a; }
.flk-sb-tools .flk-icon-btn .flk-i { width: 19px; height: 19px; }
.flk-sb .flk-sim-hud small:empty { display: none; }

/* The panel: time on top, then the tabs. */
.flk-sb-panel { gap: 12px; }
.flk-sb-panel .flk-sim-row .flk-chip { cursor: pointer; font: inherit; font-size: .82rem; }
.flk-sb-play { flex-wrap: nowrap; }
.flk-sb-play .flk-chip { padding-inline: 9px; white-space: nowrap; }
.flk-sb-tabs { display: flex; gap: 2px; padding: 3px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 12px; }
.flk-sb-tabs button {
    flex: 1 1 0; min-width: 0; padding: 7px 2px; border: 0; border-radius: 9px; background: none; color: var(--muted);
    font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.flk-sb-tabs button:hover { color: var(--fg); }
.flk-sb-tabs button[aria-selected="true"] { background: var(--surface); color: var(--teal-ink); box-shadow: 0 0 0 1px var(--line); }
.flk-sb-tabs button:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 1px; }
.flk-sb-pane { display: flex; flex-direction: column; gap: 12px; }

/* Kinds of body: a dot of each one's colour in the scene. */
.flk-sb-types button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1 1 30%; }
.flk-sb-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(3, 20, 26, .35); }
.flk-sb-dot-star { background: #ffd166; box-shadow: 0 0 6px rgba(255, 209, 102, .8); }
.flk-sb-dot-giant { background: #e8b98a; width: 11px; height: 11px; }
.flk-sb-dot-rocky { background: #c9a27a; }
.flk-sb-dot-moon { background: #e6e2d6; width: 7px; height: 7px; }
.flk-sb-dot-asteroid { background: #a7a9a3; width: 5px; height: 5px; }
.flk-sb-dot-comet { background: #bfe9ff; width: 6px; height: 6px; box-shadow: -4px 0 4px rgba(191, 233, 255, .6); }

/* The main star and the chosen body: a box each. */
.flk-sb-box, .flk-sb-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 12px; }
.flk-sb-box .flk-sim-read, .flk-sb-card .flk-sim-read { padding-top: 10px; }
.flk-sb-box-head { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: .86rem; font-weight: 700; }
.flk-sb-box-head b { color: var(--fg); font-weight: 850; }
.flk-sb-box-head small { margin-inline-start: auto; color: var(--muted); font-size: .78rem; }
.flk-sb-swatch { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sb-c, #ffd166); box-shadow: 0 0 0 2px rgba(3, 20, 26, .3), 0 0 10px var(--sb-c, #ffd166); }
.flk-sb-del { color: var(--bad); }

/* Ready-made systems. */
.flk-sb-presets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.flk-sb-presets button {
    display: flex; flex-direction: column; gap: 2px; width: 100%; height: 100%; padding: 8px 10px; text-align: start;
    background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 11px; color: var(--fg); font: inherit; cursor: pointer;
}
.flk-sb-presets button:hover { border-color: var(--teal); }
.flk-sb-presets button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-soft); }
.flk-sb-presets b { font-size: .84rem; font-weight: 850; line-height: 1.6; }
.flk-sb-presets small { color: var(--muted); font-size: .74rem; line-height: 1.6; }
.flk-sb-pnote:empty { display: none; }
.flk-sb-pnote { padding: 8px 10px; border-inline-start: 3px solid var(--orange); background: var(--bg-2); border-radius: 8px; }

/* Challenges: a tick when done, and why. */
.flk-sb-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flk-sb-goals li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 12px; }
.flk-sb-goals li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.flk-sb-goals b { font-size: .86rem; font-weight: 850; line-height: 1.7; }
.flk-sb-goals small { color: var(--muted); font-size: .76rem; line-height: 1.8; }
.flk-sb-prog { color: var(--orange-ink) !important; font-weight: 800; font-variant-numeric: tabular-nums; }
.flk-sb-prog:empty, .flk-sb-prog span:empty { display: none; }
.flk-sb-check { flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 6px; border: 2px solid var(--line); }
.flk-sb-done { border-color: var(--ok) !important; }
.flk-sb-done .flk-sb-check { border-color: var(--ok); background: var(--ok); position: relative; }
.flk-sb-done .flk-sb-check::after { content: ''; position: absolute; inset-inline-start: 5px; top: 1px; width: 5px; height: 10px; border: solid #03181c; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.flk-sb-done .flk-sb-prog { color: var(--ok) !important; }
.flk-sb-why { margin: 4px 0 0; font-size: .8rem; line-height: 1.9; color: var(--fg); }

/* The integrator's error since the last change. */
.flk-sb-chart { display: flex; flex-direction: column; gap: 4px; margin-top: -4px; }
.flk-sb-chart-canvas { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line-soft); order: 2; }
.flk-sb-chart-key { order: 1; color: var(--muted); font-size: .72rem; line-height: 1.7; }
.flk-sb-chart-key .flk-sim-key { width: 12px; margin-inline: 4px 3px; }
.flk-sb .flk-sim-chips .flk-sim-key { width: 12px; }

@media (min-width: 921px) {
    .flk-sb { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 560px) {
    .flk-sb-tools { gap: 4px; }
    .flk-sb-tools .flk-icon-btn { width: 34px; height: 34px; }
    .flk-sb-tabs button { font-size: .78rem; }
    .flk-sb .flk-sim-hud b { font-size: .95rem; }
}