/* Spectroscope. One bench on the always-black stage, like the Dichroscope: the two pickers in one panel on top, the
   eyepiece (the one bold element) across the full width under them, so the spectrum has room for its lines, with its
   own controls, reading and words right under it; then the stone from the side with the path under it, and its
   words beside it from 900px (under it below). The spectrum is the color-critical zone: nothing but neutral black
   in or next to it. The table and the disclaimer under the bench follow the theme. */

.wrap.page-hero.sp-hero{padding-top:28px;padding-bottom:22px}

/* ---------- the bench ---------- */
.sp-bench{padding:6px 0 26px;color-scheme:dark}
.sp :focus-visible{outline:2px solid currentColor;outline-offset:2px}
.sp-bench :focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #000}
.sp-grid{display:grid;gap:16px 28px;grid-template-columns:minmax(0,1fr);grid-template-areas:"pick" "eye" "stone" "foot";
  max-width:1100px;margin:0 auto}
.sp-grid>*{min-width:0}
.sp-pick{grid-area:pick}
.sp-view-eye{grid-area:eye}
.sp-view-stone{grid-area:stone}
.sp-foot{grid-area:foot}

/* ---------- the pickers ---------- */
.sp-pick{border-radius:var(--r-panel);padding:12px 16px 13px;display:grid;grid-template-columns:repeat(2,minmax(0,220px)) 1fr;
  gap:6px 16px;align-items:end;margin:0}
.sp-pick>*{position:relative}
.sp-sel{display:flex;flex-direction:column;gap:6px;min-width:0}
.sp-sel label{font-size:.875rem;font-weight:560;color:#fff}
.sp-sel select{font:inherit;font-size:.9375rem;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.42);
  border-radius:var(--r-chip);padding:9px 12px;min-height:44px;width:100%;cursor:pointer}
.sp-sel select option,.sp-sel select optgroup{color:#000;background:#fff}
.sp-pick .sp-hint{align-self:center;padding-top:20px}
.sp-hint{font-size:.8125rem;line-height:1.35;color:rgba(255,255,255,.8);margin:0}

/* ---------- the drawings ---------- */
.sp-view{margin:0;min-width:0}
.sp-stage{position:relative;width:100%;background:#000;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-panel);overflow:hidden}
.sp-svg{position:absolute;inset:0;width:100%;height:100%;display:block;font-family:inherit}
.sp-stage-eye{aspect-ratio:1000/260;cursor:crosshair;touch-action:pan-y}
.sp-stage-eye:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sp-dragging{cursor:ew-resize}
.sp-stage-stone{aspect-ratio:400/322}
.sp-labels{position:absolute;inset:0;pointer-events:none}
.sp-sn{position:absolute;top:84%;font-size:.75rem;font-weight:600;color:#BDBDBD;
  font-variant-numeric:tabular-nums;line-height:1}
.sp-noscale .sp-labels,.sp-noscale #sp-ticks{display:none}
.sp-cn{position:absolute;top:6%;font-size:.8125rem;font-weight:650;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;pointer-events:none}

/* ---------- the controls under the eyepiece ---------- */
.sp-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:12px 2px 0}
.sp-opt{display:flex;align-items:center;gap:10px;min-width:0}
.sp-opt-l{font-size:.875rem;font-weight:560;color:#fff}
.sp-seg{margin-left:0;background:#111;border-color:rgba(255,255,255,.14)}
.sp-seg button{min-height:36px;padding:7px 13px}
.sp-seg .thumb{opacity:0}
.sp-seg.ready .thumb{opacity:1}
.sp-seg:not(.ready) button[aria-pressed="true"]{background:#fff;color:#000}   /* until the thumb is placed */
.sp-chk{flex-wrap:wrap;gap:2px 10px}
.sp-chk label{display:inline-flex;align-items:center;gap:9px;font-size:.875rem;font-weight:560;color:#fff;cursor:pointer;min-height:44px}
.sp-chk input{width:20px;height:20px;margin:0;accent-color:#fff;cursor:pointer}
.sp-chk input:disabled{cursor:not-allowed}
.sp-chk input:disabled+*,.sp-chk label:has(input:disabled){color:#8C8C8C;cursor:not-allowed}
.sp-chk .sp-hint{flex-basis:100%;max-width:34ch}
.sp-eye-hint{margin:6px 2px 0}

/* ---------- the path slider ---------- */
.sp-ctl{margin:10px 2px 0;min-width:0}
.sp-ctl-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sp-ctl label{font-size:.875rem;font-weight:560;color:#fff}
.sp-ctl output{font-size:.9375rem;font-weight:600;color:#fff;min-width:3.6em;text-align:right}
.sp-ctl .sp-hint{margin-top:2px}
.sp-ctl input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;
  background:transparent;cursor:pointer;touch-action:pan-y}
.sp-ctl input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(255,255,255,.22)}
.sp-ctl input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.22)}
.sp-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;
  border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 4px rgba(0,0,0,.6)}
.sp-ctl input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 4px rgba(0,0,0,.6)}
.sp-ctl input[type=range]:focus-visible{outline:none}
.sp-ctl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #000,0 0 0 5px #fff}
.sp-ctl input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #000,0 0 0 5px #fff}

/* ---------- captions, the reading and the cursor's readout ---------- */
.sp-cap{margin:12px 4px 0}
.sp-cap-row{display:flex;justify-content:space-between;align-items:baseline;gap:2px 12px;flex-wrap:wrap;font-size:.875rem;color:#A3A3A3}
.sp-cap-row b{color:#fff;font-weight:600}
.sp-val{display:inline-flex;gap:.6em;flex-wrap:wrap;align-items:baseline}
.sp-under{margin:8px 0 0;font-size:.8125rem;line-height:1.45;color:#C9C9C9;max-width:80ch}
.sp-under+.sp-under{color:#A3A3A3}
.sp-under a{color:#fff}
.sp-at{margin:12px 0 2px;padding:12px;background:#000;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-inner)}
.sp-at-l{margin:0;font-size:.8125rem;line-height:1.45;color:#C9C9C9;min-height:2.9em}
.sp-at-l b{color:#fff;font-weight:600;font-size:.875rem;margin-right:.35em}
.sp-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.sp-chip{font:inherit;font-size:.8125rem;font-weight:560;color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r-chip);padding:6px 10px;min-height:36px;cursor:pointer;
  font-variant-numeric:tabular-nums}
.sp-chip:hover{border-color:rgba(255,255,255,.6)}
.sp-chip[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff}
.sp-chip-s{font-weight:400;color:#BDBDBD}
.sp-chip[aria-pressed="true"] .sp-chip-s{color:#2A2A2A}
.sp-foot{display:flex;flex-direction:column;align-items:center;gap:8px}
.sp-acts{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.sp-sm{padding:9px 16px;min-height:44px;font-size:.875rem}
.sp-status{font-size:.8125rem;color:#C9C9C9;margin:0;overflow-wrap:anywhere}
.sp-status:empty{position:absolute}
.sp-noscript{color:#fff;font-size:.875rem;margin:0;text-align:center}

/* ---------- inside the drawings (SVG) ---------- */
.sp-svg text{font-family:inherit}
.sp-field{fill:#000}
.sp-tick{fill:none;stroke:#8C8C8C;stroke-width:1.2}
.sp-cur{fill:none;stroke:#fff;stroke-width:1.5}
.sp-cur-m{fill:#fff}
.sp-fe{fill:none;stroke:rgba(255,255,255,.3);stroke-width:.7;stroke-linejoin:round}
.sp-out{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.1;stroke-linejoin:round}
.sp-axis{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.3;stroke-dasharray:6 5}
.sp-path{fill:#fff;opacity:.9}
.sp-ray{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.sp-in{fill:none;stroke:#fff;stroke-width:3;opacity:.85}
.sp-tube{fill:#0C0C0C;stroke:rgba(255,255,255,.42);stroke-width:1.3}
.sp-slit{fill:none;stroke:#8A8A8A;stroke-width:4}
.sp-glassy{fill:rgba(190,225,255,.12);stroke:rgba(215,236,255,.65);stroke-width:1.2;stroke-linejoin:round}
.sp-hatch{fill:none;stroke:rgba(215,236,255,.65);stroke-width:.8}
.sp-lens{fill:rgba(190,225,255,.12);stroke:rgba(215,236,255,.6);stroke-width:1.2}
.sp-bulb{fill:#5E5E5E}
.sp-glass{fill:rgba(255,255,255,.12);stroke:#fff;stroke-width:1.4}
.sp-fil{fill:none;stroke:#fff;stroke-width:1.6}
.sp-sun{fill:#fff}
.sp-rays{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.sp-lab{fill:#DADADA;font-size:16.5px;dominant-baseline:central;paint-order:stroke;stroke:#000;stroke-width:4px;stroke-linejoin:round}
.sp-lab.sp-small{font-size:15px;fill:#C9C9C9}
.sp-mid{text-anchor:middle}
.sp-end{text-anchor:end}

/* ---------- below the bench: follows the theme ---------- */
.sp-after{padding-top:30px;padding-bottom:72px}
.sp-after h2{font-size:1.25rem;line-height:1.25;font-weight:600;letter-spacing:-.01em;margin:0 0 4px}
.sp-tw{max-width:980px}
.sp-tw table{min-width:0}
.sp-tw th[scope=row]{font-weight:600;background:none;white-space:nowrap}
.sp-tw tr:last-child th{border-bottom:0}
.sp-tw tr.sp-on th,.sp-tw tr.sp-on td{background:var(--surface)}
.sp-shown{font-weight:400;color:var(--muted)}
.sp-under-t{font-size:.8125rem;line-height:1.45;color:var(--muted);max-width:80ch;margin-top:10px}
.sp-disclaimer{font-size:.8125rem;line-height:1.45;color:var(--muted);max-width:80ch}

/* ---------- breakpoints ---------- */
/* from 900px the stone sits beside its words */
@media (min-width:900px){
  .sp-view-stone{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:0 28px;align-items:start}
  .sp-view-stone .sp-cap{margin-top:4px}
}
@media (max-width:899.98px){
  .sp-stage-eye{aspect-ratio:1000/380}
  .sp-stone-l{max-width:min(100%,max(280px,calc(100svh - 150px)));margin:0 auto}
}
@media (max-width:639.98px){
  .sp-sn-crowd{display:none}
  .sp-pick{grid-template-columns:1fr 1fr}
  .sp-pick .sp-hint{grid-column:1/-1;padding-top:0}
  .sp-opts{gap:8px 16px}
}
@media (max-width:519.98px){
  .sp-pick{grid-template-columns:1fr;padding:12px 14px 13px}
  .sp-stage{border-radius:var(--r-inner)}
  .sp-stage-eye{aspect-ratio:1000/520}
  .sp-cap{margin:10px 2px 0}
  .sp-cap-row{flex-direction:column;gap:0;font-size:.8125rem}
  .sp-sn{font-size:.6875rem}
  .sp-tw th,.sp-tw td{padding:10px 10px;hyphens:auto;overflow-wrap:anywhere}
  .sp-tw th[scope=row]{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .sp *,.sp *::before,.sp *::after{transition-duration:0s!important;animation-duration:0s!important}
}
/* Windows contrast themes: the drawings keep their own colors on their own black (they are the light itself). */
@media (forced-colors:active){
  .sp-stage,.sp-at{forced-color-adjust:none;background:#000;border-color:CanvasText}
  .sp-pick{border:1px solid CanvasText}
  .sp-sm,.sp-chip{border:1px solid ButtonText}
  .sp-ctl input[type=range]{forced-color-adjust:auto;appearance:auto;-webkit-appearance:auto}
}