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

.flk-bh .flk-sim-stage { background: #000; }
.flk-bh .flk-sim-hud { max-width: 60%; text-align: end; }
.flk-bh .flk-sim-hud small { line-height: 1.6; }
.flk-bh .flk-sim-hud b { unicode-bidi: plaintext; }
.flk-bh .flk-sim-note { min-height: 3.6em; }
.flk-bh .flk-sim-read dt { line-height: 1.6; }

/* The figures, out of the panel: under the scene on a wide screen (the panel beside both), after the panel on a narrow one. */
.flk-bh > .flk-sim-stage { grid-column: 1; grid-row: 1; }
.flk-bh > .flk-sim-panel { grid-column: 2; grid-row: 1 / span 2; }
.flk-bh > .flk-bh-figs { grid-column: 1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.flk-bh-figs .flk-sim-read-wide { grid-column: span 2; }
.flk-bh-figs .flk-sim-read-wide:last-child { grid-column: 1 / -1; }

/* Beside the scene: the clocks and the body, their figures, and the three holes compared. */
.flk-bh-near-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.flk-bh-side { min-height: 0; }
.flk-bh-side .flk-sim-canvas { cursor: default; touch-action: auto; }
.flk-bh-read { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.flk-bh-table { margin-top: 14px; }
.flk-bh-table td, .flk-bh-table th[scope="row"] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.flk-bh-table th[scope="row"] { font-weight: 800; color: var(--fg); background: none; font-size: .9rem; direction: ltr; text-align: end; }
.flk-bh-why { margin-top: 12px; max-width: 72ch; }

@media (max-width: 920px) {
    .flk-bh-near-grid { grid-template-columns: minmax(0, 1fr); }
    .flk-bh > .flk-sim-stage, .flk-bh > .flk-sim-panel, .flk-bh > .flk-bh-figs { grid-column: 1; grid-row: auto; }
    .flk-bh > .flk-bh-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .flk-bh-figs .flk-sim-read-wide { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .flk-bh .flk-sim-hud { top: 8px; inset-inline-end: 10px; }
    .flk-bh .flk-sim-hud b { font-size: .95rem; }
    .flk-bh-read { padding: 12px; }
    .flk-bh > .flk-bh-figs { grid-template-columns: 1fr 1fr; padding: 12px; }
}

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