/* Refractometer. One bench on the always-black stage, like the other tools. Each picker sits directly above the
   drawing it changes: Gemstone over the eyepiece, Cut over the stone on the glass. Under each drawing, its caption and
   explanation; then Copy link. From 700px the two columns sit side by side and the drawings are sized to the window
   (--rest is everything else on the first screen, the hero included), so pickers, drawings and readings are in view
   together. Below 700px it is one column in page order: Gemstone, eyepiece, Cut, the glass, so each picker is next
   to what it changes. Colour appears only in the drawings, where it is light and the stone. The table and the
   disclaimer under the bench follow the theme. */

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

/* ---------- the bench ---------- */
.rf-bench{padding:6px 0 26px;color-scheme:dark}
.rf :focus-visible{outline:2px solid currentColor;outline-offset:2px}
.rf-bench :focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #000}
.rf-grid{--rest:460px;--v:min(calc((100% - 20px) / 2),max(280px,calc(100vh - var(--rest))));
  --v:min(calc((100% - 20px) / 2),max(280px,calc(100svh - var(--rest))));
  display:grid;gap:14px 20px;justify-content:center;align-items:start;grid-template-columns:repeat(2,var(--v));
  grid-template-areas:"stone cut" "eye glass" "foot foot"}
.rf-grid>*{min-width:0}
.rf-pick-stone{grid-area:stone}
.rf-pick-cut{grid-area:cut}
.rf-view-eye{grid-area:eye}
.rf-view-glass{grid-area:glass}
.rf-foot{grid-area:foot}

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

/* ---------- the drawings ---------- */
.rf-view{margin:0;min-width:0}
.rf-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}
.rf-svg{position:absolute;inset:0;width:100%;height:100%;display:block;font-family:inherit}
.rf-cap{margin:8px 4px 0}
.rf-cap-row{display:flex;justify-content:space-between;align-items:baseline;gap:2px 12px;flex-wrap:wrap;font-size:.875rem;color:#A3A3A3}
.rf-cap-row b{color:#fff;font-weight:600}
.rf-val{display:inline-flex;gap:.35em;white-space:nowrap}
.rf-vk:empty{display:none}
.rf-under{margin:6px 0 0;font-size:.8125rem;line-height:1.45;color:#C9C9C9}
.rf-under+.rf-under{color:#A3A3A3}
.rf-foot{display:flex;flex-direction:column;align-items:center;gap:8px}
.rf-acts{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.rf-sm{padding:9px 16px;min-height:44px;font-size:.875rem}
.rf-status{font-size:.8125rem;color:#C9C9C9;margin:0;overflow-wrap:anywhere}
.rf-status:empty{position:absolute}                  /* empty, it takes no room but stays a live region */
.rf-noscript{color:#fff;font-size:.875rem;margin:0;text-align:center}

/* ---------- inside the drawings (SVG) ---------- */
.rf-svg text{font-family:inherit}
.rf-ink line{stroke-width:2.2}
.rf-ink text{stroke:none;font-size:17px;font-weight:600;dominant-baseline:central;paint-order:stroke;stroke:var(--halo);stroke-width:3px;stroke-linejoin:round}
.rf-edge-t{fill:#fff;font-size:17px;font-weight:650;dominant-baseline:central}
.rf-liq-t{fill:#E6E6E6;font-size:16px;text-anchor:end;dominant-baseline:central}
.rf-ptr{fill:#fff}
.rf-lead{fill:none;stroke:#fff;stroke-width:1.3}
.rf-plate{fill:#1B1B1B;stroke:rgba(255,255,255,.16)}
.rf-glass{fill:url(#rf-g-gl);stroke:rgba(255,255,255,.38);stroke-width:1.3}
.rf-normal{stroke:rgba(255,255,255,.6);stroke-dasharray:5 5;stroke-width:1.2}
.rf-lab{fill:#DADADA;font-size:16.5px;dominant-baseline:central;paint-order:stroke;stroke:#000;stroke-width:4px;stroke-linejoin:round}
.rf-lab-e{text-anchor:end}
.rf-ray-in{fill:none;stroke:#FFD24A;stroke-width:2;stroke-linejoin:round}
.rf-ray-t{fill:none;stroke:#FFD24A;stroke-width:2.2;stroke-linejoin:round}
.rf-ray-p{fill:none;stroke:#FFD24A;stroke-width:1.6;stroke-dasharray:5 4}
.rf-ray-s{fill:none;stroke:#FFD24A;stroke-width:2}
.rf-ray-c{fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round}
.rf-arc{fill:none;stroke:#fff;stroke-width:1.3}
.rf-ang{fill:#fff;font-size:17px;font-weight:600;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#000;stroke-width:4px;stroke-linejoin:round}
.rf-fe{fill:none;stroke:rgba(255,255,255,.28);stroke-width:.7;stroke-linejoin:round}
.rf-out{fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.1;stroke-linejoin:round}
.rf-film{fill:rgba(222,196,120,.85)}
.rf-lead2{fill:none;stroke:#BDBDBD;stroke-width:1}

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

/* ---------- breakpoints ---------- */
@media (min-width:700px) and (max-width:1099.98px){
  .rf-grid{--rest:480px}                             /* the hints wrap to more lines */
}
/* below 700px: one column, each picker above the drawing it changes, the drawings never taller than the window */
@media (max-width:699.98px){
  .rf-grid{grid-template-columns:min(100%,max(280px,calc(100vh - 150px)));
    grid-template-columns:min(100%,max(280px,calc(100svh - 150px)));
    grid-template-areas:"stone" "eye" "cut" "glass" "foot";gap:14px}
  .rf-view{margin-bottom:6px}
  .rf-pick{padding:12px 14px 13px}
  .rf-stage{border-radius:var(--r-inner)}
  .rf-cap{margin:8px 2px 0}
  .rf-cap-row{flex-direction:column;gap:0;font-size:.8125rem}
  .rf-tw th,.rf-tw td{padding:10px 10px;hyphens:auto;overflow-wrap:anywhere}
  .rf-tw th[scope=row],.rf-tw td.n{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .rf *,.rf *::before,.rf *::after{transition-duration:0s!important;animation-duration:0s!important}
}
/* Windows contrast themes: the drawings keep their own colours on their own black (they are the light itself); the
   pickers, text and button take the system's, with visible edges. */
@media (forced-colors:active){
  .rf-stage{forced-color-adjust:none;background:#000;border-color:CanvasText}
  .rf-pick{border:1px solid CanvasText}
  .rf-sm{border:1px solid ButtonText}
}