/* the simulators on sims.html (javascripts/sims.js) */
.sim { margin: 1rem 0 1.6rem; padding: 0.9rem 1rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.5rem; }
.sim-row { display: grid; grid-template-columns: 9rem 1fr 3.5rem 2.5rem; gap: 0.6rem; align-items: center; margin: 0.3rem 0; }
.sim-row output { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.sim-row input[type="date"] { grid-column: span 3; max-width: 12rem; font: inherit; }
.sim-out p { margin: 0.5rem 0; }
.sim-big { font-size: 1.4rem; font-weight: 600; }
.sim-bars > div { display: grid; grid-template-columns: 4rem 1fr 6rem; gap: 0.6rem; align-items: center; margin: 0.35rem 0; }
.sim-bars i { display: block; height: 0.9rem; border-radius: 0.2rem; background: #9cc9ea; min-width: 2px; }
.sim-bars i.mars { background: #eea66f; }
.sim-bars i.moon { background: #bdb6ad; }
.sim-bars b { font-variant-numeric: tabular-nums; }
.sim-orbits { width: 12rem; display: block; margin: 0.4rem auto; }
@media (max-width: 40em) { .sim-row { grid-template-columns: 1fr 3.5rem 2rem; } .sim-row span { grid-column: 1 / -1; } }