/* Dichroscope. One bench on the always-black stage, like the Refractometer: the two pickers in one panel on top,
   in the left column over the stone, and the eyepiece (right, the one bold element, so the larger) from the top;
   each drawing has the control that moves it right under it, then its caption; the readout sits under the
   eyepiece. From 900px the two columns sit side by side, sized to the window (--rest is everything else on the
   first screen, the hero included). Below 900px it is one column: pickers, eyepiece, stone. The windows and swatches are the color-critical zone: nothing
   in or next to them but neutral black (the surround changes how a color is seen). The table and the disclaimer
   under the bench follow the theme. */

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

/* ---------- the bench ---------- */
.dc-bench{padding:6px 0 26px;color-scheme:dark}
.dc :focus-visible{outline:2px solid currentColor;outline-offset:2px}
.dc-bench :focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #000}
.dc-grid{--rest:350px;--e:min(calc((100% - 24px) * .6),max(330px,calc(100vh - var(--rest))));
  --e:min(calc((100% - 24px) * .6),max(330px,calc(100svh - var(--rest))));--s:max(300px,calc(var(--e) * .66));
  display:grid;gap:14px 24px;justify-content:center;align-items:start;grid-template-columns:var(--s) var(--e);
  grid-template-rows:auto 1fr auto;grid-template-areas:"pick eye" "stone eye" "foot foot"}
.dc-grid>*{min-width:0}
.dc-pick{grid-area:pick}
.dc-view-eye{grid-area:eye}
.dc-view-stone{grid-area:stone}
.dc-foot{grid-area:foot}

/* ---------- the pickers ---------- */
.dc-pick{border-radius:var(--r-panel);padding:12px 16px 13px;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin:0}
.dc-pick>*{position:relative}                        /* above the glass highlight */
.dc-sel{display:flex;flex-direction:column;gap:6px;min-width:0}
.dc-sel label{font-size:.875rem;font-weight:560;color:#fff}
.dc-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}
.dc-sel select option,.dc-sel select optgroup{color:#000;background:#fff}
.dc-pick .dc-hint{grid-column:1/-1}
.dc-hint{font-size:.8125rem;line-height:1.35;color:rgba(255,255,255,.8);margin:0}

/* ---------- the drawings ---------- */
.dc-view{margin:0;min-width:0}
.dc-stage{position:relative;aspect-ratio:1;width:100%;background:#000;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-panel);overflow:hidden}
.dc-svg{position:absolute;inset:0;width:100%;height:100%;display:block;font-family:inherit}
.dc-stage-stone{aspect-ratio:400/322;cursor:grab;touch-action:pan-y}      /* the drawing's viewBox */
.dc-layer{transform-origin:50% 50%;will-change:transform}   /* the ring and the windows turn as whole layers */
.dc-wn{position:absolute;left:0;top:0;font-size:clamp(.75rem,2.2vw,.9375rem);font-weight:600;color:#8C8C8C;
  line-height:1;pointer-events:none;font-variant-numeric:tabular-nums}
.dc-ring-hit{position:absolute;inset:0;border-radius:50%;clip-path:circle(49% at 50% 50%);touch-action:none;cursor:grab}
.dc-field-hit{position:absolute;inset:8%;border-radius:50%;z-index:1}
.dc-dragging,.dc-stage-stone.dc-dragging{cursor:grabbing}

/* ---------- the controls under the drawings ---------- */
.dc-ctl{margin:10px 2px 0;min-width:0}
.dc-ctl-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dc-ctl label{font-size:.875rem;font-weight:560;color:#fff}
.dc-ctl output{font-size:.9375rem;font-weight:600;color:#fff;min-width:3.2em;text-align:right}
.dc-ctl .dc-hint{margin-top:2px}
.dc-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}
.dc-ctl input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(255,255,255,.22)}
.dc-turn input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,transparent calc(25% - 1px),rgba(255,255,255,.6) calc(25% - 1px) calc(25% + 1px),transparent calc(25% + 1px) calc(50% - 1px),rgba(255,255,255,.6) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px) calc(75% - 1px),rgba(255,255,255,.6) calc(75% - 1px) calc(75% + 1px),transparent calc(75% + 1px)),rgba(255,255,255,.22)}
.dc-ctl input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.22)}
.dc-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)}
.dc-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)}
.dc-ctl input[type=range]:focus-visible{outline:none}
.dc-ctl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #000,0 0 0 5px #fff}
.dc-ctl input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #000,0 0 0 5px #fff}

/* ---------- captions and the readout ---------- */
.dc-cap{margin:12px 4px 0}
.dc-cap-row{display:flex;justify-content:space-between;align-items:baseline;gap:2px 12px;flex-wrap:wrap;font-size:.875rem;color:#A3A3A3}
.dc-cap-row b{color:#fff;font-weight:600}
.dc-val{display:inline-flex;gap:.45em;flex-wrap:wrap;align-items:baseline}
.dc-val #dc-cls{font-weight:600;color:#fff}
.dc-under{margin:8px 0 0;font-size:.8125rem;line-height:1.45;color:#C9C9C9}
.dc-under+.dc-under{color:#A3A3A3}
.dc-read{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:12px 0 2px;padding:12px;background:#000;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-inner)}
.dc-rw{display:flex;gap:12px;align-items:center;min-width:0}
.dc-sw{flex:0 0 auto;width:46px;height:46px;background:#000}     /* flat: no radius, shadow or border on the color */
.dc-rt{display:flex;flex-direction:column;gap:1px;font-size:.8125rem;color:#C9C9C9;min-width:0}
.dc-rt b{color:#fff;font-weight:600;font-size:.875rem}
.dc-rt .num{white-space:pre;color:#E6E6E6;font-variant-numeric:tabular-nums}
.dc-gamut{grid-column:1/-1;margin:0;font-size:.75rem;line-height:1.4;color:#A3A3A3}
.dc-foot{display:flex;flex-direction:column;align-items:center;gap:8px}
.dc-acts{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.dc-sm{padding:9px 16px;min-height:44px;font-size:.875rem}
.dc-status{font-size:.8125rem;color:#C9C9C9;margin:0;overflow-wrap:anywhere}
.dc-status:empty{position:absolute}                  /* empty, it takes no room but stays a live region */
.dc-noscript{color:#fff;font-size:.875rem;margin:0;text-align:center}

/* ---------- inside the drawings (SVG) ---------- */
.dc-svg text{font-family:inherit}
.dc-bezel{fill:#141414;stroke:rgba(255,255,255,.2);stroke-width:1}
.dc-field{fill:#020202;stroke:rgba(255,255,255,.12);stroke-width:1}
.dc-tick{fill:none;stroke:#8C8C8C;stroke-width:1.4;stroke-linecap:round}
.dc-ring-n{fill:#BDBDBD;font-size:11px;font-weight:600;text-anchor:middle;dominant-baseline:central}
.dc-ring-0{fill:#fff}
.dc-c path{fill:#E6E6E6}
.dc-w{shape-rendering:crispEdges}
.dc-fe{fill:none;stroke:rgba(255,255,255,.3);stroke-width:.7;stroke-linejoin:round}
.dc-out{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.1;stroke-linejoin:round}
.dc-axis{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.4;stroke-dasharray:6 5}
.dc-arc{fill:none;stroke:#fff;stroke-width:1.3}
.dc-ang{fill:#fff;font-size:17px;font-weight:650;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#000;stroke-width:4px;stroke-linejoin:round}
.dc-ray{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.dc-glow .dc-ray{stroke-width:9;opacity:.28}               /* a soft halo without a blur filter: cheap to repaint */
.dc-mark{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dc-dot{fill:#fff}
.dc-tube{fill:#0C0C0C;stroke:rgba(255,255,255,.42);stroke-width:1.3}
.dc-plate{fill:none;stroke:#8A8A8A;stroke-width:4}
.dc-calcite{fill:rgba(190,225,255,.10);stroke:rgba(215,236,255,.6);stroke-width:1.2;stroke-linejoin:round}
.dc-lens{fill:rgba(190,225,255,.12);stroke:rgba(215,236,255,.6);stroke-width:1.2}
.dc-lab{fill:#DADADA;font-size:16.5px;dominant-baseline:central;paint-order:stroke;stroke:#000;stroke-width:4px;stroke-linejoin:round}
.dc-lab.dc-small{font-size:15px;fill:#C9C9C9}
.dc-mid{text-anchor:middle}
.dc-end{text-anchor:end}

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

/* ---------- breakpoints ---------- */
@media (min-width:900px) and (max-width:1099.98px){
  .dc-grid{--rest:380px}
}
/* below 900px: one column, each control next to the drawing it moves, the drawings never taller than the window */
@media (max-width:899.98px){
  .dc-grid{grid-template-columns:min(100%,max(280px,calc(100vh - 150px)));
    grid-template-columns:min(100%,max(280px,calc(100svh - 150px)));
    grid-template-areas:"pick" "eye" "stone" "foot";gap:16px}
  .dc-view{margin-bottom:8px}
}
@media (max-width:519.98px){
  .dc-pick{grid-template-columns:1fr;padding:12px 14px 13px}
  .dc-stage{border-radius:var(--r-inner)}
  .dc-cap{margin:10px 2px 0}
  .dc-cap-row{flex-direction:column;gap:0;font-size:.8125rem}
  .dc-read{grid-template-columns:1fr;padding:10px}
  .dc-tw th,.dc-tw td{padding:10px 10px;hyphens:auto;overflow-wrap:anywhere}
  .dc-tw th[scope=row]{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .dc *,.dc *::before,.dc *::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); the
   pickers, text and buttons take the system's, with visible edges. */
@media (forced-colors:active){
  .dc-stage,.dc-read{forced-color-adjust:none;background:#000;border-color:CanvasText}
  .dc-sw{forced-color-adjust:none}
  .dc-pick{border:1px solid CanvasText}
  .dc-sm{border:1px solid ButtonText}
  .dc-ctl input[type=range]{forced-color-adjust:auto;appearance:auto;-webkit-appearance:auto}
}