/* Digital Gemology: 3D Gemstone Simulator (/tools/3d_gemstone_simulator).
   Built on House Style v1: black and white carry everything, the render is a black stage, glass sits
   only on that stage, and red, green and blue appear only in the Light Return readouts. Three panes:
   the grading report (left), which is also where the stone is set; the live render (centre); the
   view, display and lighting controls (right). Radii nest 24, 14, 10; toggles are pills.
   One type ramp: 13 px secondary, 14 px rows, 18 px grades, 22 px titles; weights 400, 500, 600. */

.sim-body{background:var(--bg);overscroll-behavior-y:none}
.sim-top{padding-bottom:14px}
.sim{
  --pane:#121212;--well:rgba(255,255,255,.045);--hair:rgba(255,255,255,.09);--track:rgba(255,255,255,.07);
  --ease:cubic-bezier(.3,1.4,.5,1);--glide:cubic-bezier(.2,.8,.2,1);
  display:grid;grid-template-columns:minmax(330px,404px) minmax(0,1fr) minmax(262px,292px);
  gap:12px;padding:0 12px 12px;height:calc(100svh - var(--navh,82px));min-height:640px;
  max-width:1920px;margin:0 auto;
}
:root[data-theme="light"] .sim{--pane:#FFFFFF;--well:rgba(0,0,0,.035);--hair:rgba(0,0,0,.08);--track:rgba(0,0,0,.055)}
.sim>aside{position:relative;min-height:0;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--pane);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.sim-report,.sim-panel{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scrollbar-gutter:stable}
/* White theme: a light grey page so the white panes lift off it, and a rounded end to the black band */
:root[data-theme="light"] .sim-body{background:#F3F3F3}
:root[data-theme="light"] .sim-top{border-radius:0 0 var(--r-sheet) var(--r-sheet)}
:root[data-theme="light"] .sim{padding-top:12px}
:root[data-theme="light"] .sim>aside{border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05)}

/* ---------- Report ---------- */
.rep{padding:24px 24px 28px;font-size:.875rem;line-height:1.4}
.rep-wait{color:var(--muted)}
.rep-head{padding-bottom:16px;border-bottom:1px solid var(--fg)}
.rep-head .rt{font-size:1.375rem;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.rep-head .rb{font-size:.8125rem;color:var(--muted);margin-top:6px;line-height:1.4}
.rep-sec{padding-top:24px}
.rep-sec h2,.pg-h{font-size:.8125rem;font-weight:600;letter-spacing:-.005em;color:var(--fg);margin:0 0 6px}
.rr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:9px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.rr:last-child{border-bottom:0}
.rr .k,.cb .k{color:var(--muted);font:inherit;text-align:left}
.rr .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.rr.wide{grid-template-columns:1fr}
.rr.wide .v{text-align:left;font-weight:400}
.rr.edit{align-items:center}
.rr.shape{gap:8px}
.rr.shape .v{text-align:left}
.rr.shape .v small{margin-top:6px}
.rr .v small,.cb-v small{display:block;font-weight:400;color:var(--muted);font-size:.8125rem;letter-spacing:0;margin-top:2px}
/* tap-to-reveal explanations */
.k-tip{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;cursor:pointer;color:var(--muted)}
.k-tip i{font-style:normal;font-size:.625rem;font-weight:600;width:15px;height:15px;border-radius:50%;display:inline-grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,color .2s}
.k-tip:hover,.k-tip[aria-expanded="true"]{color:var(--fg)}
.k-tip[aria-expanded="true"] i{background:var(--fg);color:var(--bg);box-shadow:none}
.tip-p{grid-column:1 / -1;font-size:.8125rem;color:var(--muted);line-height:1.45;margin:4px 0 2px}
.tip-p[hidden]{display:none}
.rep-note{font-size:.8125rem;color:var(--muted);margin-top:8px;line-height:1.45}
.rep-fig{margin:10px 0 4px;border-radius:var(--r-inner);padding:12px;background:var(--well)}
.rep-fig>svg{display:block;width:100%;height:auto;color:var(--fg)}
.rep-fig figcaption{font-size:.8125rem;color:var(--muted);margin-top:6px}
.rep-disc{font-size:.8125rem;color:var(--muted);margin-top:24px;padding-top:14px;border-top:1px solid var(--hair);line-height:1.45}

/* a grading block: label and value, one control, a plain-English line */
.cb{padding:16px 0 18px;border-bottom:1px solid var(--hair)}
.cb:last-child{border-bottom:0}
.cb-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.cb-h+.tip-p{margin:-4px 0 12px}
.cb-v{font-size:1.125rem;font-weight:600;letter-spacing:-.01em;text-align:right;font-variant-numeric:tabular-nums;line-height:1.2}
.cb-n{font-size:.8125rem;color:var(--muted);margin-top:10px;line-height:1.45}

/* segmented toggles (House Style pills), with a thumb that glides to the choice */
.sg{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;padding:3px;
  border-radius:var(--r-pill);background:var(--track);isolation:isolate}
.sg+.sg,.sg+.swg,.swg-name+.sg{margin-top:10px}
.sg button{position:relative;z-index:1;font:inherit;font-size:.8125rem;font-weight:500;border:0;background:none;color:var(--muted);
  border-radius:var(--r-pill);min-height:34px;padding:0 2px;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums;
  transition:color .25s var(--glide)}
.sg button:hover{color:var(--fg)}
.sg button[aria-checked="true"]{color:var(--bg);font-weight:600}
.sg-thumb{position:absolute;left:0;top:0;width:0;height:0;border-radius:var(--r-pill);background:var(--fg);z-index:0;opacity:0;
  box-shadow:0 1px 2px rgba(0,0,0,.25),0 4px 12px rgba(0,0,0,.18);
  transition:transform .38s var(--ease),width .38s var(--ease),height .2s var(--glide)}
.sg.ready .sg-thumb{opacity:1}
/* the second row of a two-step scale: the grades inside the chosen range */
.sg-sub{margin-top:8px;background:transparent;box-shadow:inset 0 0 0 1px var(--track)}
.sg-dense{gap:0}
.sg-dense button{font-size:.6875rem;padding:0}
.sg-mode{display:inline-grid;width:auto;grid-template-columns:repeat(2,auto);margin-bottom:12px}
.sg-mode button{padding:0 14px;min-height:30px;font-size:.8125rem}
.sg-groups{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin-top:6px;padding:0 3px}
.sg-groups span{position:relative;min-height:6px;opacity:.5;transition:opacity .25s}
.sg-groups b{display:block;font-size:.75rem;font-weight:500;color:var(--fg);white-space:nowrap;padding-top:9px;text-align:center;margin:0 -60px}
.sg-groups b:empty{display:none}
.sg-groups i{position:absolute;left:3px;right:3px;top:0;height:5px;border:1px solid var(--muted);border-top:0;border-radius:0 0 4px 4px}
.sg-groups span.on{opacity:1;overflow:visible}
.sg-groups span.on i{border-color:var(--fg)}

/* fancy colour: the hue circle as flat swatches, 7 by 4 */
.swg{display:grid;grid-template-columns:repeat(7,1fr);gap:10px 8px;padding:2px 1px 0;justify-items:center}
.swc{width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;padding:0;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .2s var(--ease),box-shadow .2s}
:root[data-theme="light"] .swc{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.swc:hover{transform:scale(1.1)}
.swc[aria-checked="true"]{box-shadow:0 0 0 2px var(--pane),0 0 0 3.5px var(--fg)}
.swg-name{font-size:.8125rem;color:var(--muted);text-align:center;min-height:1.4em;margin-top:8px}

/* the two dropdowns: gemstone and cut */
.pick{position:relative;display:inline-flex;max-width:100%;vertical-align:middle}
.pick::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none;opacity:.7}
.pick select{font:inherit;font-weight:500;color:var(--fg);max-width:100%;cursor:pointer;-webkit-appearance:none;appearance:none;
  background:var(--track);border:0;border-radius:var(--r-pill);padding:7px 32px 7px 14px;min-height:36px;transition:background .2s}
.pick select:hover{background:color-mix(in srgb,var(--fg) 12%,transparent)}
.pick select option,.pick select optgroup{color:#000;background:#fff}
.pick-wide{display:flex;width:100%}
.pick-wide select{width:100%;font-size:.9375rem;min-height:42px}
.rr .pick select{text-align:right;text-align-last:right}
.rr.shape .pick select{text-align:left;text-align-last:left}

/* Light Return readout: the only place red, green and blue appear in the report */
.lrbar{display:flex;height:8px;border-radius:999px;overflow:hidden;margin:10px 0 8px;background:var(--track)}
.lrbar i{display:block;height:100%}
.lrbar .r{background:var(--lr-red)}.lrbar .g{background:var(--lr-green)}.lrbar .b{background:var(--lr-blue)}.lrbar .k{background:#2A2A2A}
.lrkey{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px;font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.lrkey b{color:var(--fg);font-weight:500;float:right}
.dot.d-k{background:#2A2A2A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.plot-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.8125rem;color:var(--muted);margin-top:6px}
.plot-key svg{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:5px;color:var(--fg)}

/* ---------- Stage ---------- */
.sim-stage{border-radius:var(--r-panel);min-height:0;min-width:0;border:1px solid rgba(255,255,255,.08);
  background:#000}
.sim-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sim-gl{cursor:grab;touch-action:none}
.sim-gl:active{cursor:grabbing}
.sim-lines{pointer-events:none}
.sim-hud{position:absolute;pointer-events:none;z-index:2;color:#fff}
.sim-hud-tl{left:24px;top:20px;right:24px;display:flex;flex-direction:column;gap:4px}
.sim-title{font-weight:600;letter-spacing:-.015em;font-size:1.375rem;line-height:1.15}
.sim-sub{font-size:.8125rem;color:#A3A3A3;font-variant-numeric:tabular-nums}
.sim-hud-bl{left:24px;bottom:20px}
.sim-hud-br{right:20px;bottom:18px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.sim-scale{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:#A3A3A3;font-variant-numeric:tabular-nums}
.sim-scale i{display:block;height:6px;border:1px solid rgba(255,255,255,.6);border-top:0}
.sim-legend{display:flex;gap:14px;padding:9px 16px;border-radius:var(--r-pill);font-size:.8125rem;white-space:nowrap}
.sim-legend[hidden]{display:none}
.sim-legend .dot{margin-right:6px}
.sim-hint{font-size:.8125rem;color:#A3A3A3;margin:0}
.sim-msg{position:absolute;inset:auto 24px 50% 24px;transform:translateY(50%);text-align:center;color:#A3A3A3;z-index:3}
.sim-msg[hidden]{display:none}

/* ---------- View, display and lighting ---------- */
.ctl{padding:20px 18px 22px;display:flex;flex-direction:column;gap:24px}
.pg-h{margin:0 0 10px 2px}
.pg-note{font-size:.8125rem;color:var(--muted);margin:10px 2px 0;line-height:1.45;min-height:2.9em}
.sw input:focus-visible+.sw-track{outline:2px solid var(--fg);outline-offset:3px}
.vtiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vtiles button{font:inherit;font-size:.8125rem;font-weight:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:76px;padding:10px 6px;border:0;border-radius:var(--r-inner);background:var(--well);color:var(--muted);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--hair);transition:background .2s,color .2s,box-shadow .2s,transform .2s var(--ease)}
.vtiles button:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent)}
.vtiles button:active{transform:scale(.97)}
.vtiles button[aria-pressed="true"]{color:var(--fg);background:color-mix(in srgb,var(--fg) 12%,transparent);box-shadow:inset 0 0 0 1.5px var(--fg)}
.vtiles svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.turn{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin-top:12px}
.turn-l{font-size:.8125rem;color:var(--muted);padding-left:2px}
.turn .sg button{font-size:.75rem;min-height:30px}
.list{border-radius:var(--r-inner);background:var(--well);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.sw{display:flex;align-items:center;gap:14px;padding:12px 14px;cursor:pointer;position:relative;min-height:48px}
.sw+.sw{box-shadow:inset 0 1px 0 var(--hair)}
.sw-lab{flex:1;font-size:.875rem;font-weight:500;line-height:1.3}
.sw-lab small{display:block;font-size:.8125rem;font-weight:400;color:var(--muted);margin-top:2px}
.sw input{position:absolute;right:14px;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.sw-track{width:44px;height:26px;border-radius:999px;background:var(--track);box-shadow:inset 0 0 0 1px var(--hair);position:relative;flex:none;transition:background .25s var(--glide)}
.sw-track::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .32s var(--ease)}
.sw input:checked+.sw-track{background:var(--fg)}
.sw input:checked+.sw-track::after{transform:translateX(18px);background:var(--bg)}
.lights{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:none;box-shadow:none;overflow:visible;border-radius:0}
.lt{display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 10px;border:0;border-radius:var(--r-chip);background:var(--well);
  box-shadow:inset 0 0 0 1px var(--hair);color:var(--muted);font:inherit;text-align:left;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.lt:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent)}
.lt>svg:first-child{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lt-t{flex:1;min-width:0}
.lt-t b{display:block;font-size:.8125rem;font-weight:500;line-height:1.2}
.lt-k{display:none}
.lt[aria-checked="true"]{color:var(--fg);background:color-mix(in srgb,var(--fg) 12%,transparent);box-shadow:inset 0 0 0 1.5px var(--fg)}
.lt[aria-checked="true"] .lt-t b{font-weight:600}
.lights.is-off .lt{opacity:.38;cursor:not-allowed}
.lights.is-off .lt:hover{background:var(--well);color:var(--muted)}
.ctl-foot{display:flex;gap:8px;margin-top:-4px}
.btn-quiet-pill{flex:1;justify-content:center;min-height:40px;padding:8px 16px;font-size:.8125rem;font-weight:500;background:var(--track);color:var(--fg);white-space:nowrap}
.btn-quiet-pill:hover{background:color-mix(in srgb,var(--fg) 13%,transparent)}

/* ---------- Touch: every target at least 44 px ---------- */
@media (pointer:coarse){
  .sg button,.sg-dense button,.turn .sg button,.sg-mode button{min-height:44px}
  .pick select,.pick-wide select{min-height:44px}
  .btn-quiet-pill{min-height:44px}
  .swc{width:38px;height:38px}
  .swg{gap:12px 6px}
}

/* ---------- Tablets: the report keeps the left; the render sits over its controls ---------- */
@media (max-width:1180px){
  .sim{grid-template-columns:minmax(310px,370px) minmax(0,1fr);grid-template-rows:minmax(0,1.7fr) minmax(0,1fr)}
  .sim-report{grid-column:1;grid-row:1 / 3}
  .sim-stage{grid-column:2;grid-row:1}
  .sim-panel{grid-column:2;grid-row:2}
  .ctl{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;align-items:start;padding:16px}
  .ctl .pg:nth-child(3){grid-column:2;grid-row:1 / 4}
  .ctl-foot{grid-column:1;margin-top:0}
  .vtiles{grid-template-columns:repeat(4,1fr);gap:6px}
  .vtiles button{min-height:60px;gap:4px;font-size:.75rem}
  .vtiles svg{width:22px;height:22px}
  .sw-lab small{display:none}
  .sw{min-height:44px;padding:10px 14px}
}
/* ---------- Phones: the render stays pinned at the top; the report follows it, then the options ---------- */
@media (max-width:720px){
  .sim{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;height:auto;padding:0 8px 8px;gap:8px}
  :root[data-theme="light"] .sim{padding-top:8px}
  .sim-stage{grid-column:1;grid-row:1;position:sticky;top:0;z-index:5;height:min(92vw,48svh);min-height:280px}
  .sim-panel{grid-column:1;grid-row:2;overflow:visible}
  .sim-report{grid-column:1;grid-row:3;overflow:visible}
  .sw-lab small{display:none}
  .sw{min-height:44px;padding:8px 14px}
  .pg-note{min-height:0}
  .ctl{display:flex;flex-direction:column;align-items:stretch}
  .vtiles{grid-template-columns:repeat(4,1fr)}
  .sim-gl{touch-action:pan-y}
  .sim-hud-tl{left:16px;top:14px;right:16px}
  .sim-title{font-size:1.125rem}
  .sim-hud-bl{left:16px;bottom:12px}
  .sim-hud-br{right:12px;bottom:10px}
  .sim-legend{gap:8px;padding:6px 10px;font-size:.6875rem}
  .rep{padding:20px 16px 24px}
}
@media (prefers-reduced-motion:reduce){
  .sg-thumb,.sw-track::after,.lt-k,.swc,.vtiles button{transition:none}
}