.tomo {
  display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 12px;
  padding: 12px; max-width: 1640px; margin: 0 auto; align-items: start;
}
.stage {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px;
  min-width: 0; position: sticky; top: 56px;
}
.cell { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Each picture has a two-line head: its name (and a control, if it has one), then what it is, in
   words.  The head is the same height in every cell, so that the pictures of a row line up. */
.cell-head { display: flex; flex-direction: column; min-height: 42px; min-width: 0; }
.cell-head .title { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.cell-head h2 { font-size: 15px; margin: 0; white-space: nowrap; }
.cell-head .note { color: var(--ink-2); font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cell-head select { max-width: 100%; }
.cell-head .spacer { flex: 1; }
.cell-head .small-select { min-height: 24px; padding: 1px 4px; font-size: 12px; flex: 0 0 auto; align-self: center; }
/* Two rows of square pictures must fit the window's height under the header. */
.sq {
  width: 100%; max-width: calc(50vh - 108px); min-width: 160px; aspect-ratio: 1; margin: 0 auto;
  background: #000; border-radius: 6px; overflow: hidden; position: relative;
}
.sq.plot { background: var(--panel); border: 1px solid var(--line); }
.sq canvas { width: 100%; height: 100%; }
#scanner { cursor: crosshair; }
#scanner.brush { cursor: cell; }
#sinogram, #bp, #fbp, #kspace, #extra { cursor: crosshair; }
/* Fourier space and the last panel take no drags: on a phone, a swipe over them scrolls the page. */
#kspace, #extra { touch-action: pan-y pinch-zoom; }
.sq.drop { outline: 3px dashed var(--accent); outline-offset: -3px; }
/* The line under a picture: a hint saying what to point at (the shared .hint look, with its
   arrow) until something is pointed at, then the numbers.  One fixed height either way, so that
   nothing below moves as it switches. */
.readout {
  color: var(--ink-2); height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%; max-width: calc(50vh - 108px); margin: 0 auto;
}
.readout.hint { font-size: 13px; }

/* The three panels of the second row are folded away when the page opens; the experiments that
   need them open the fold, and so can the reader. */
.more-panels { grid-column: 1 / -1; min-width: 0; }
.more-panels > summary {
  cursor: pointer; color: var(--ink-2); font-size: 13px; padding: 2px 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.more-panels > summary b { font-weight: 600; color: var(--ink); }
.more-panels[open] > summary { margin-bottom: 4px; }
.more-panels .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; min-width: 0; }

.controls { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.controls .panel { display: flex; flex-direction: column; gap: 6px; }
.controls .slider { grid-template-columns: 6.6em 1fr 4.6em; }
.button-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.button-grid button, .button-grid select { padding: 3px 2px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.swatch { display: inline-block; width: 14px; height: 4px; border-radius: 2px; vertical-align: middle; margin: 0 3px 0 2px; }
.swatch.source { background: #ffb347; }
.swatch.detector, .swatch.now { background: #7fd3ff; }
.swatch.pick { background: #ff5fd2; }
.swatch.trace { background: #ffe14d; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: 0; }
.dot.trace { background: #e6c200; }
/* A picture chosen from the list looks like a pressed button. */
#gallery.chosen { background: var(--accent-soft); border-color: var(--accent); }
/* Pause, Step, Scan again and Finish on one line. */
#scan-buttons { flex-wrap: nowrap; gap: 4px; }
#scan-buttons button { padding: 4px 8px; flex: 0 0 auto; }
.formula-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.formula-presets button { padding: 2px 8px; font-size: 12.5px; min-height: 26px; }
details summary { cursor: pointer; color: var(--ink-2); }
details .stack { margin-top: 6px; }
#filter-gloss { line-height: 1.35; }
.filter-plot { height: 130px; }
.filter-plot canvas { width: 100%; height: 100%; }
#filter-box .seg { display: flex; flex-wrap: nowrap; width: 100%; }
#filter-box .seg button { flex: 1 1 auto; padding: 4px 3px; font-size: 12.5px; white-space: nowrap; }

@media (max-width: 1180px) {
  .tomo { grid-template-columns: minmax(0, 1fr) 270px; }
  .stage, .more-panels .row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { position: static; }
  .sq, .readout { max-width: 100%; }
}
@media (max-width: 900px) {
  /* One column: the pictures and the panels of controls are all items of one grid, so that the
     scan's buttons come right under the scanner, and the rest under the pictures. */
  .tomo { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 10px; }
  .stage, .controls { display: contents; }
  .sq, .readout { max-width: min(100%, 560px); }
  .more-panels .row3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .more-panels > summary { white-space: normal; }
  /* The pictures in the order of the story: object, sinogram, reconstruction, then the rest. */
  #cell-scan { order: 1; }
  #scan-panel { order: 2; }
  #cell-sino { order: 3; }
  #cell-fbp { order: 4; }
  #more-panels { order: 5; }
  .controls > .panel { order: 8; }
}
/* Pause, Play and Go on take the same room, so that the buttons beside it stay put. */
#play { min-width: 4.6em; }