.imaging {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px;
  padding: 12px; max-width: 1640px; margin: 0 auto; align-items: start;
}
.stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* The microscope from the side, lined up with the three pictures under it. */
.sketch-box { height: 136px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.sketch-box canvas { display: block; width: 100%; height: 100%; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 5px; }
/* Each panel spans the three rows (head, canvas, foot) of the trio, so the canvases line up. */
.side { display: grid; grid-row: span 3; grid-template-rows: subgrid; min-width: 0; }
.side-head { display: flex; align-items: center; gap: 8px; min-height: 30px; flex-wrap: wrap; }
.side-head h2 { font-size: 15px; margin: 0; white-space: nowrap; }
.side-head .spacer { flex: 1; }
.side-head select { padding: 2px 4px; min-height: 26px; font-size: 13px; }
.side-head .row { gap: 4px; flex-wrap: nowrap; }
.side-head .seg > button, .side-head > div > button { min-height: 26px; padding: 2px 8px; font-size: 13px; }
.sq { position: relative; width: 100%; aspect-ratio: 1; background: var(--canvas-bg); border-radius: var(--radius); overflow: hidden; }
.sq canvas { width: 100%; height: 100%; }
#object { cursor: crosshair; }
#fourier { cursor: crosshair; }
#fourier.tilt { cursor: grab; }
#image { cursor: row-resize; }
.foot { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.foot .tools { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.foot .tools .seg > button { padding: 2px 7px; min-height: 26px; font-size: 13px; }
.foot .tools > button { padding: 2px 8px; min-height: 26px; font-size: 13px; }
/* A one-line hint under a picture (lib/style.css: .hint), the first thing in its foot. */
.foot .hint { line-height: 1.3; }
/* The Fourier plane's tools: what a drag does (tilt the light, or paint), Remove paint, and
   under "More" the brush's size and mirror and the picture's brightness. */
#fp-tools { flex-direction: column; align-items: stretch; gap: 4px; }
#fp-tools .line { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
#fp-tools .line.tail { align-items: flex-start; }
#fp-tools .seg { flex-wrap: nowrap; }
#fp-tools details.more { flex: 1 1 auto; min-width: 0; }
#fp-tools details.more > summary { cursor: pointer; color: var(--ink-3); font-size: 12px; min-height: 26px; display: flex; align-items: center; gap: 4px; }
#fp-tools details.more > summary::before { content: "▸"; font-size: 11px; }
#fp-tools details.more[open] > summary::before { content: "▾"; }
#fp-tools details.more > summary::-webkit-details-marker { display: none; }
#fp-tools details.more > summary { list-style: none; }
#fp-tools details.more > .line { margin-top: 4px; }
.foot .slider { grid-template-columns: auto minmax(40px, 1fr) 3.6em; flex: 1 1 140px; min-width: 120px; }
.foot .note { color: var(--ink-3); font-size: 12px; }
.foot .slider input[type="number"] { font-size: 12px; }
.readout { color: var(--ink-2); min-height: 1.45em; line-height: 1.45; overflow-wrap: anywhere; }
.readout b { color: var(--ink); font-weight: 600; }
.readout .good { color: var(--good); }
.readout .warn { color: var(--warn); }

.profile-box { display: flex; flex-direction: column; gap: 4px; }
.profile-wrap { height: 150px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.profile-wrap canvas { width: 100%; height: 100%; }

.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: minmax(4.6em, auto) 1fr 4.6em; }
.button-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.button-grid button { padding: 3px 2px; font-size: 12.5px; white-space: nowrap; }
.controls .seg { display: flex; }
.controls .seg > button { flex: 1 1 auto; padding: 3px 6px; font-size: 13px; }
.controls .note { color: var(--ink-3); font-size: 12px; }
.controls .stack.tight { gap: 3px; }
/* The panels are numbered along the light, as in the sketch. */
.controls .label .step {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-right: 6px;
  border: 1.3px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: 0;
}
#illum-note, #filter-note { color: var(--ink-2); line-height: 1.4; }
/* What to put in the Fourier plane: four buttons, each the thing and the technique it makes. */
.controls .seg.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.controls .seg.filters > button { display: flex; flex-direction: column; align-items: center; padding: 4px; margin: 0; border-radius: 6px; line-height: 1.2; }
.controls .seg.filters > button b { font-weight: 600; font-size: 13px; }
.controls .seg.filters > button small { font-size: 11px; color: var(--ink-2); }
.controls .examples { display: flex; flex-wrap: wrap; gap: 4px; }
.controls .examples button { font-size: 12px; padding: 2px 6px; min-height: 24px; font-family: var(--mono); }
#limit { color: var(--ink-2); }



@media (max-width: 1180px) {
  .imaging { grid-template-columns: minmax(0, 1fr) 270px; }
}
@media (max-width: 960px) {
  /* The controls under the pictures, two by two, before the profile. */
  .imaging { grid-template-columns: minmax(0, 1fr); }
  .stage { display: contents; }
  .sketch-box { order: 1; }
  .trio { order: 2; }
  .controls { order: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .profile-box { order: 4; }
}
@media (max-width: 800px) {
  .imaging { padding: 8px; gap: 14px; }
  .sketch-box { height: 122px; }
  .side { grid-row: auto; display: flex; flex-direction: column; gap: 5px; }
  .bar h1 { font-size: 14px; }
  /* One column, with each numbered panel beside the picture it acts on, along the light. */
  .stage, .trio, .controls { display: contents; }
  .sketch-box { order: 1; }
  #side-obj { order: 2; }
  #p-light { order: 3; }
  #p-object { order: 4; }
  #p-objective { order: 5; }
  #side-fp { order: 6; }
  #p-filter { order: 7; }
  #side-img { order: 8; }
  .profile-box { order: 9; }
  .sketch-box, .side, .controls .panel, .profile-box { width: 100%; max-width: 600px; justify-self: center; }
}
#profile-note b { color: var(--ink-2); font-weight: 600; }
/* A number in a bold phrase (its slot keeps it still: ui.js setSlots). */
.fixnum.b { font-weight: bold; }
#profile-note .fixnum.b { color: var(--ink-2); font-weight: 600; }