/* Quantum optics: the pictures of the chosen view stacked on the left, controls on the right. */

:root {
  --signal: #c8501a;      /* the signal beam, the field E(t) */
  --lo: #d9a400;          /* the local oscillator, the measurement axis */
  --band: rgba(90, 100, 120, 0.22);
  --pump: #1f7a3a;        /* the pump at 2ω */
  --shot: #2f62d8;        /* shot noise, the quantum noise */
  --rp: #7b3fb5;          /* radiation pressure */
  --thermal: #b0307a;
  --seismic: #8a8b91;
  --chirp: #1f7a3a;
  --sq: #0f8a8a;          /* the squeezed curve */
}
@media (prefers-color-scheme: dark) {
  :root {
    --signal: #ff9a5c; --lo: #ffd34d; --band: rgba(170, 180, 200, 0.25); --pump: #7ad694;
    --shot: #7aa2ff; --rp: #c79bff; --thermal: #ff7ac0; --seismic: #9a9ba3; --chirp: #7ad694; --sq: #4fd6d0;
  }
}

.qo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; padding: 12px; max-width: 1500px; margin: 0 auto; align-items: start; }
.stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.view-row { justify-content: center; }
.plot-wrap { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.plot-wrap canvas { width: 100%; height: 100%; }
.plot-wrap .cap { position: absolute; left: 10px; top: 6px; font-size: 12px; color: var(--ink-2); pointer-events: none; }
.plot-wrap .cap b { color: var(--ink); font-weight: 600; }
.pair { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 14fr); gap: 8px; }
.pair.even { grid-template-columns: 1fr 1fr; }
#plane { cursor: crosshair; touch-action: none; }
#plane.dragging { cursor: grabbing; }

/* Which pictures each view shows, and how tall. */
.qo .plot-wrap, .qo .pair, .qo .hint { display: none; }
.qo .hint { margin-top: -2px; }
.qo[data-view="mode"] #hint-mode, .qo[data-view="squeeze"] #hint-squeeze, .qo[data-view="homodyne"] #hint-homodyne, .qo[data-view="ligo"] #hint-ligo, .qo[data-view="ligo"] #hint-detector { display: block; }
.qo[data-view="mode"] #top-pair, .qo[data-view="squeeze"] #top-pair { display: grid; }
.qo[data-view="mode"] #plane-wrap, .qo[data-view="mode"] #trace-wrap { display: block; height: max(300px, calc(46vh - 40px)); }
.qo[data-view="squeeze"] #plane-wrap, .qo[data-view="squeeze"] #trace-wrap { display: block; height: max(280px, calc(40vh - 40px)); }
.qo[data-view="squeeze"] #squeezer-wrap { display: block; height: 136px; }
.qo[data-view="mode"] #photons-wrap, .qo[data-view="squeeze"] #photons-wrap { display: block; height: max(140px, calc(19vh - 20px)); }
/* In views 1 and 2 the readout comes right after the hint; the photon chart and the legend follow. */
.stage > * { order: 0; }
.qo[data-view="mode"] #photons-wrap, .qo[data-view="squeeze"] #photons-wrap { order: 2; }
.qo[data-view="mode"] #legend, .qo[data-view="squeeze"] #legend { order: 3; }
.qo[data-view="mode"] #readout, .qo[data-view="squeeze"] #readout { order: 1; }
.qo[data-view="homodyne"] #hom-pair, .qo[data-view="homodyne"] #hom-pair2 { display: grid; }
.qo[data-view="homodyne"] #apparatus-wrap, .qo[data-view="homodyne"] #plane-wrap { display: block; height: max(290px, calc(44vh - 40px)); }
.qo[data-view="homodyne"] #strip-wrap, .qo[data-view="homodyne"] #variance-wrap { display: block; height: max(190px, calc(28vh - 20px)); }
.qo[data-view="ligo"] #ligo-wrap { display: block; height: 210px; }
.qo[data-view="ligo"] #sens-wrap { display: block; height: max(300px, calc(42vh - 40px)); }
.qo[data-view="ligo"] #chirp-wrap { display: block; height: max(140px, calc(18vh - 20px)); }
.qo[data-view="ligo"] #detector-wrap { display: block; height: max(330px, calc(40vh - 20px)); }
#detector { cursor: crosshair; touch-action: pan-y; }
/* In the LIGO view the readout (the signal-to-noise ratio: the payoff) comes right after the hint. */
.qo[data-view="ligo"] #readout { order: 1; }
.qo[data-view="ligo"] #sens-wrap { order: 2; }
.qo[data-view="ligo"] #chirp-wrap { order: 3; }
.qo[data-view="ligo"] #detector-wrap { order: 4; }
.qo[data-view="ligo"] #hint-detector { order: 5; }
.qo[data-view="ligo"] #det-readout { order: 6; }
.qo:not([data-view="ligo"]) #det-readout { display: none; }
/* The plane goes into the homodyne pair in that view (it is moved by the script). */

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--ink-2); font-size: 12px; }
.legend .cbar { display: inline-flex; align-items: center; gap: 4px; }
.legend canvas { width: 90px; height: 10px; border-radius: 2px; }
.legend .sw { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 4px; }

.readout { color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1.55; min-height: 2.8em; }
.readout > div { margin: 1px 0; }
.readout b, .readout .fixnum.b { color: var(--ink); font-weight: 600; }
.readout .k { color: var(--ink); font-weight: 600; }
.readout .warn { color: var(--warn); }
.readout .good { color: var(--good); font-weight: 600; }

.controls { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.controls .panel { display: flex; flex-direction: column; gap: 6px; }
.controls .panel[hidden] { display: none; }
.controls .note { font-size: 12px; color: var(--ink-3); }
.button-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.button-grid button { padding: 3px 4px; font-size: 13px; }
#run { min-width: 5.4em; }
details summary { cursor: pointer; color: var(--ink-2); }
details[open] summary { margin-bottom: 6px; }
.slider label { font-size: 13px; }

@media (max-width: 900px) {
  .qo { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .pair, .pair.even { grid-template-columns: minmax(0, 1fr); }
  .qo[data-view="mode"] #plane-wrap, .qo[data-view="squeeze"] #plane-wrap { height: min(92vw, 360px); }
  .qo[data-view="mode"] #trace-wrap, .qo[data-view="squeeze"] #trace-wrap { height: 200px; }
  .qo[data-view="squeeze"] #squeezer-wrap { height: 140px; }
  .qo[data-view="mode"] #photons-wrap, .qo[data-view="squeeze"] #photons-wrap { height: 150px; }
  .qo[data-view="homodyne"] #apparatus-wrap { height: 230px; }
  .qo[data-view="homodyne"] #plane-wrap { height: min(92vw, 340px); }
  .qo[data-view="homodyne"] #strip-wrap, .qo[data-view="homodyne"] #variance-wrap { height: 180px; }
  .qo[data-view="ligo"] #ligo-wrap { height: 200px; }
  .qo[data-view="ligo"] #sens-wrap { height: 300px; }
  .qo[data-view="ligo"] #chirp-wrap { height: 150px; }
  .qo[data-view="ligo"] #detector-wrap { height: 320px; }
}