/* Optical coherence tomography: the pictures of one view at a time on the left, the light and
   that view's controls on the right. */

:root {
  --sig: #2f62d8;        /* the detector's signal, the fringes */
  --env: #c8501a;        /* their envelope: the A-scan */
  --gate: #9a7400;       /* the coherence gate: the depth the mirror matches */
  --layer: #7b3fb5;      /* where the sample's layers really are */
  --mirrorc: #1f7a3a;    /* the reference mirror */
  --noisec: #8a8b91;
  --faint: rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --sig: #7aa2ff;
    --env: #ff9a5c;
    --gate: #ffd866;
    --layer: #c79bff;
    --mirrorc: #7ad694;
    --noisec: #7d7e86;
    --faint: rgba(255, 255, 255, 0.05);
  }
}

.oct {
  display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 12px;
  padding: 12px; max-width: 1600px; margin: 0 auto; align-items: start;
}
.stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.view-row { justify-content: flex-start; }
.view-row .seg > button { padding: 4px 12px; }
.view { display: grid; gap: 10px; min-width: 0; }
.oct:not([data-view="fringes"]) #v-fringes, .oct:not([data-view="ascan"]) #v-ascan,
.oct:not([data-view="scan"]) #v-scan, .oct:not([data-view="fourier"]) #v-fourier { display: none; }
.oct:not([data-view="fringes"]) .for-fringes, .oct:not([data-view="ascan"]) .for-ascan,
.oct:not([data-view="scan"]) .for-scan, .oct:not([data-view="fourier"]) .for-fourier { display: none; }

.cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.head { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-height: 24px; }
.head h2 { font-size: 15px; margin: 0; white-space: nowrap; }
.head .note { color: var(--ink-2); font-size: 12px; }
.head .spacer { flex: 1; }
.box { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dark-box { background: #1b1d22; border-color: #2a2c33; }
.cell > .hint { margin: 0 2px; }
/* Every drag here is sideways (a mirror, a column, a bandwidth), except on the volume's slices:
   elsewhere a vertical swipe scrolls the page, as a phone's reader expects. */
.oct canvas { touch-action: pan-y pinch-zoom; }
#s-xy, #s-xz, #s-yz { touch-action: none; }
.readout { color: var(--ink-2); font-size: 13px; line-height: 1.55; min-height: 3em; }
.readout > div { min-height: 1.55em; }
.readout > div.warn-line { color: var(--warn); }

/* View 1: the interferometer and the light side by side, the trace under them. */
#v-fringes { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-areas: "schem side" "trace trace"; }
#v-fringes .schem-cell { grid-area: schem; }
#v-fringes .side-cell { grid-area: side; }
#v-fringes .trace-cell { grid-area: trace; }
.schem-box { aspect-ratio: 100 / 64; }
.spec-box { height: 128px; }
.zoom-box { height: max(150px, calc(100% - 128px - 60px)); flex: 1; min-height: 150px; }
.trace-box { height: max(200px, calc(100vh - 640px)); }
#f-trace, #f-spec { cursor: crosshair; }
#f-trace { cursor: ew-resize; }

/* View 2: the sample, the trace, the A-scan and its grey strip, on one depth axis. */
#v-ascan { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.strip-box { height: 64px; }
.a-trace-box { height: max(150px, calc(28vh - 50px)); }
.a-scan-box { height: max(200px, calc(42vh - 110px)); }
.grey-box { height: 22px; }
#v-ascan canvas { cursor: ew-resize; }
.seg.button-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.seg.button-grid > button, .seg.button-grid > button:first-child, .seg.button-grid > button:last-child { border-radius: 6px; margin: 0; }
.seg.button-grid { gap: 4px; }

/* View 3: the scene over the B-scan on one x axis; or the volume's cube and three slices. */
.s-bgrid { display: grid; grid-template-columns: minmax(0, 1fr) 128px; grid-template-areas: "scene legend" "bscan ascan"; gap: 6px 10px; }
.s-scene-cell { grid-area: scene; } .s-legend-cell { grid-area: legend; } .s-bscan-cell { grid-area: bscan; } .s-ascan-cell { grid-area: ascan; }
.s-scene-box { height: max(220px, calc(36vh - 46px)); }
.s-bscan-box, .s-ascan-box { height: max(240px, calc(40vh - 40px)); }
#s-scene, #s-bscan { cursor: crosshair; }
.legend { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.legend-row { font-size: 11.5px; display: flex; gap: 6px; align-items: center; line-height: 1.25; color: var(--ink-2); }
.legend-row .swatch { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.s-vgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; }
.s-cube-box, .s-xy-box { height: max(250px, calc(44vh - 80px)); }
.s-sl-box { height: max(180px, calc(30vh - 50px)); }
#s-xy, #s-xz, #s-yz { cursor: crosshair; }
h2 .sw { display: inline-block; width: 14px; height: 5px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.sw.xy { background: #e0b43a; } .sw.xz { background: #e65cc4; } .sw.yz { background: #4fb3e8; }
#v-scan[data-mode="volume"] .s-bgrid, #v-scan[data-mode="bscan"] .s-vgrid { display: none; }
.oct[data-smode="bscan"] .s-vol-only, .oct[data-smode="volume"] .s-b-only { display: none; }
/* The readout, and beside it (when averaging B-scans) the speckle contrast against N. */
.s-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 12px; align-items: start; }
.s-foot.with-plot { grid-template-columns: minmax(0, 1fr) 270px; }
.s-foot:not(.with-plot) .s-cplot-cell { display: none; }
.s-cplot-box { height: 112px; }
#s-play { min-width: 6.2em; }

/* View 4: the mirror fixed, the spectrum and its transform; or a B-scan refolded live. */
.q-a { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "schem spec" "scan scan"; gap: 8px 10px; }
.q-schem-cell { grid-area: schem; } .q-spec-cell { grid-area: spec; } .q-scan-cell { grid-area: scan; }
.q-spec-cell .q-spec-box { flex: 1; min-height: 200px; }
.q-scan-box { height: max(210px, calc(100vh - 660px)); }
#q-scan { cursor: pointer; }
.q-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--ink-2); }
.q-legend .lg-env { color: var(--env); } .q-legend .lg-td { color: var(--ink-3); } .q-legend .lg-fall { color: var(--noisec); }
.q-legend .lg-lay { color: var(--layer); } .q-legend .lg-ac { color: var(--ink-3); }
.q-bscan-box { height: max(320px, calc(100vh - 330px)); }
.oct[data-qmode="bscan"] .q-a, .oct:not([data-qmode="bscan"]) .q-b { display: none; }
.oct[data-qmode="bscan"] .q-a-only, .oct:not([data-qmode="bscan"]) .q-b-only { display: none; }

.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(7.6em, auto) 1fr 4.8em; }
.gloss { color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.readout-line { color: var(--ink); font-size: 13px; }
.controls details summary { cursor: pointer; color: var(--ink-2); font-size: 13px; }
.controls details[open] summary { margin-bottom: 6px; }
.motor-row { gap: 8px; }
.motor-row .seg > button { min-width: 34px; padding: 3px 6px; }
.small-btn { padding: 1px 8px; min-height: 24px; font-size: 12px; }

@media (max-width: 900px) {
  .oct { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  #v-fringes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "schem" "trace" "side"; }
  .trace-box { height: 230px; }
  .s-bgrid { grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "scene scene" "bscan ascan" "legend legend"; }
  .s-vgrid { grid-template-columns: minmax(0, 1fr); }
  .s-scene-box { height: 210px; } .s-bscan-box, .s-ascan-box { height: 240px; }
  .s-cube-box, .s-xy-box { height: 280px; } .s-sl-box { height: 170px; }
  .s-foot.with-plot { grid-template-columns: minmax(0, 1fr); }
  .legend { flex-direction: row; flex-wrap: wrap; gap: 3px 12px; }
  .q-a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "spec" "scan" "schem"; }
  .q-spec-cell .q-spec-box { height: 210px; flex: none; } .q-scan-box { height: 240px; } .q-bscan-box { height: 340px; }
  .zoom-box { height: 170px; flex: none; }
  .bar { flex-wrap: wrap; }
  .bar h1 { font-size: 15px; }
  .view-row .seg > button { padding: 4px 8px; font-size: 13px; }
}