.ifm {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px;
  padding: 12px; max-width: 1600px; margin: 0 auto; align-items: start;
}
.bar #mode-box { margin-left: 8px; }

.stage { display: grid; gap: 10px; min-width: 0; grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.18fr); }
#michelson { grid-template-areas: "schem spec" "screen trace"; }
#stellar { grid-template-areas: "stschem sky" "fringe vis"; }
.schem-cell { grid-area: schem; }
.screen-cell { grid-area: screen; }
.spec-cell { grid-area: spec; }
.trace-cell { grid-area: trace; }
.st-schem-cell { grid-area: stschem; }
.sky-cell { grid-area: sky; }
.fringe-cell { grid-area: fringe; }
.vis-cell { grid-area: vis; }

.cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.head { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; min-height: 28px; }
.head h2 { font-size: 15px; margin: 0; white-space: nowrap; }
.head .fn { font-family: "Times New Roman", Times, serif; font-style: italic; font-weight: 400; font-size: 16px; }
.head .spacer { flex: 1; }
.head .seg > button { padding: 2px 8px; min-height: 26px; font-size: 13px; }
.foot { display: flex; flex-direction: column; gap: 2px; min-height: 2.6em; }
.foot.row { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 0; }
.foot .slider { flex: 1; min-width: 220px; }
.small-btn { padding: 1px 8px; min-height: 24px; font-size: 12px; }
.counter-row { flex-wrap: nowrap; }
.counter-row .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* The counter's two halves each keep together (setGroups); on a narrow screen they take two lines. */
.counter-row #counter-readout { white-space: normal; }

/* The hint under a picture (lib/style.css: .hint), and a panel that folds away (the spectrometer). */
.cell > .hint { margin: 0 2px; }
details.panel summary { cursor: pointer; }
details.panel[open] summary { margin-bottom: 2px; }
.box { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.box canvas { width: 100%; height: 100%; }
.plot-box { flex: 1; min-height: 190px; }
.plot-box canvas { position: absolute; inset: 0; }
.schem-box { aspect-ratio: 100 / 64; background: #1b1d22; border-color: #2a2c33; }
.screen-box { aspect-ratio: 1; width: 100%; max-width: max(240px, calc(100vh - 536px)); margin: 0 auto; background: #000; border-color: #000; }
.st-schem-box { aspect-ratio: 100 / 64; background: #0d1020; border-color: #20243a; }
.sky-box { flex: 1; min-height: 200px; background: #000; border-color: #000; }
.sky-box canvas, .fringe-box canvas { position: absolute; inset: 0; }
.fringe-box { aspect-ratio: 100 / 88; width: 100%; max-height: calc(100vh - 450px); min-height: 200px; background: #000; border-color: #000; }
#schematic, #st-schematic { cursor: default; }
#spectrum, #trace, #visibility { cursor: crosshair; }

.controls { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.controls .panel { display: flex; flex-direction: column; gap: 6px; }
.button-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.button-grid button { padding: 3px 4px; font-size: 13px; }
.motor-row, .sides-row { gap: 8px; }
.motor-row .seg > button { min-width: 34px; padding: 3px 6px; }
.sides-row .seg > button { padding: 3px 10px; }
#fts-readout, #st-readout { color: var(--ink-2); line-height: 1.5; }
#mirror-readout, #counter-readout { color: var(--ink-2); }
.warn-text { color: var(--warn); }
/* Buttons whose words change keep one width, so that the buttons after them keep still. */
#scan { min-width: 7.4em; }
#st-play { min-width: 8.4em; }

@media (max-width: 900px) {
  .ifm { grid-template-columns: minmax(0, 1fr); }
  .stage { grid-template-columns: minmax(0, 1fr); }
  #michelson { grid-template-areas: "schem" "screen" "spec" "trace"; }
  #stellar { grid-template-areas: "stschem" "sky" "fringe" "vis"; }
  .plot-box { flex: none; height: 250px; }
  .sky-box { flex: none; height: 240px; }
  .screen-box, .fringe-box { max-width: 100%; max-height: none; }
  .bar { flex-wrap: wrap; }
  .bar h1 { font-size: 15px; }
}