/* Dispersion: plots stacked on the left (which ones depends on the view), controls on the right. */

:root {
  --re: #2f62d8;        /* real parts: n, ε', Re χ */
  --im: #c8501a;        /* imaginary parts: κ, ε'', Im χ */
  --refl: #7b3fb5;      /* reflectance */
  --ng: #1f7a3a;        /* group index */
  --charge: #b0307a;    /* the driven charge and its displacement */
  --field: #1d1d1f;     /* the light's field E */
  --sliver: #0f8a8a;    /* one sliver of absorption and its shares */
  --spec: rgba(90, 100, 120, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --re: #7aa2ff;
    --im: #ff9a5c;
    --refl: #c79bff;
    --ng: #7ad694;
    --charge: #ff7ac0;
    --field: #ececef;
    --sliver: #4fd6d0;
    --spec: rgba(170, 180, 200, 0.16);
  }
}

.dsp {
  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%; }
#resp { cursor: ew-resize; }
#refl { cursor: ew-resize; }
#kkim, #kkre { cursor: crosshair; }
.pics { display: none; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Which plots each view shows, and how tall; and the hint under each view's main picture. */
.dsp .plot-wrap { display: none; }
.dsp .hint { display: none; margin-top: -2px; }
.dsp[data-view="medium"] #resp-hint, .dsp[data-view="pulse"] #resp-hint, .dsp[data-view="kk"] #kk-hint { display: block; }
.dsp[data-view="medium"] #resp-wrap { display: block; height: max(250px, calc(37vh - 30px)); }
.dsp[data-view="medium"] .pics { display: grid; }
.dsp[data-view="medium"] .pic { display: block; height: 196px; }
.dsp[data-view="medium"] #refl-wrap { display: block; height: max(120px, calc(18vh - 20px)); }
.dsp[data-view="pulse"] #resp-wrap { display: block; height: max(200px, calc(27vh - 20px)); }
.dsp[data-view="pulse"] #snap-wrap { display: block; height: max(190px, calc(27vh - 20px)); }
.dsp[data-view="pulse"] #pulse-wrap { display: block; height: max(200px, calc(29vh - 20px)); }
.dsp[data-view="kk"] .kk { display: block; height: max(170px, calc(28.5vh - 30px)); }
.dsp:not([data-view="kk"]) #kk-panel { display: none; }
.dsp:not([data-view="pulse"]) #pulse-panel { display: none; }
.dsp:not([data-view="medium"]) #light-panel { display: none; }

.readout { color: var(--ink-2); font-variant-numeric: tabular-nums; min-height: 3.2em; line-height: 1.5; }
.readout b, .readout .fixnum.b { color: var(--ink); font-weight: 600; }
.readout .warn { color: var(--warn); }

.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; }
/* Play and Pause take the same room, so that the button beside it stays put. */
#play { min-width: 5.2em; }
.button-grid button { padding: 3px 4px; font-size: 13px; }
.osc-chips button { min-width: 34px; padding: 2px 8px; }
.osc-chips .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; background: var(--im); vertical-align: 1px; }
details summary { cursor: pointer; color: var(--ink-2); }
details[open] summary { margin-bottom: 6px; }
#typed-presets button { font-size: 12px; padding: 2px 6px; }

@media (max-width: 900px) {
  .dsp { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .pics { grid-template-columns: minmax(0, 1fr); }
  .dsp[data-view="medium"] #resp-wrap { height: max(230px, 36vh); }
  .dsp[data-view="medium"] .pic { height: 180px; }
  .dsp[data-view="medium"] #refl-wrap { height: max(130px, 18vh); }
  .dsp[data-view="pulse"] #resp-wrap { height: max(200px, 28vh); }
  .dsp[data-view="pulse"] #snap-wrap { height: max(190px, 26vh); }
  .dsp[data-view="pulse"] #pulse-wrap { height: max(200px, 28vh); }
  .dsp[data-view="kk"] .kk { height: max(160px, 24vh); }
}
.dsp[data-view="kk"] #show-panel { display: none; }