/* SgViz (sg_viz.js): the interactive lesson scenes of Spherography. sgv- classes only, everything under .sgv-root
   (all /assets stylesheets load on every page). The accent colour comes from the sphere's area: --sgv-acc. */

.sgv-root { display: block; position: relative; width: 100%; min-width: 0; color: #e8e8e8; --sgv-acc: #58c4dd;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: .8rem; line-height: 1.3; user-select: none; }
.sgv-root *, .sgv-root *::before, .sgv-root *::after { box-sizing: border-box; }

.sgv-root .sgv-stage { position: relative; width: 100%; }
.sgv-root .sgv-cv { display: block; width: 100%; background: transparent; touch-action: pan-y; }
.sgv-root.sgv-drag .sgv-cv { touch-action: none; cursor: grabbing !important; }

.sgv-root .sgv-replay { position: absolute; top: 1px; right: 1px; width: 22px; height: 22px; padding: 0; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
  color: #9fb3c8; font-size: .62rem; line-height: 1; cursor: pointer; opacity: .7; transition: opacity .15s, color .15s, border-color .15s; }
.sgv-root .sgv-replay:hover, .sgv-root .sgv-replay:focus-visible { opacity: 1; color: var(--sgv-acc); border-color: var(--sgv-acc); outline: none; }

/* the formula with the live numbers */
.sgv-root .sgv-read { margin: 0; padding: 4px 4px 3px; min-height: 1.4em; text-align: center; color: #fff; font-size: .9rem; line-height: 1.4;
  font-family: 'Cambria Math', Cambria, 'Times New Roman', serif; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: text; }
.sgv-root .sgv-read b { font-weight: 700; color: var(--sgv-acc); }
.sgv-root .sgv-read sub, .sgv-root .sgv-read sup { font-size: .72em; line-height: 0; }

/* sliders and toggles */
.sgv-root .sgv-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 16px; padding: 3px 2px 2px; }
.sgv-root .sgv-c { display: flex; align-items: center; gap: 7px; flex: 1 1 210px; min-width: 0; max-width: 360px; margin: 0; padding: 0;
  color: #9fb3c8; font-size: .74rem; font-weight: 400; cursor: default; }
.sgv-root .sgv-l { flex: 0 0 auto; white-space: nowrap; }
.sgv-root .sgv-v { flex: 0 0 auto; min-width: 3.3em; text-align: right; color: #e8e8e8; font-variant-numeric: tabular-nums; white-space: nowrap; }

.sgv-root .sgv-c input[type=range] { -webkit-appearance: none; appearance: none; flex: 1 1 60px; min-width: 50px; width: 60px; height: 16px; margin: 0; padding: 0;
  background: transparent; border: 0; outline: none; accent-color: var(--sgv-acc); cursor: pointer; }
.sgv-root .sgv-c input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: rgba(159,179,200,0.3); }
.sgv-root .sgv-c input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(159,179,200,0.3); }
.sgv-root .sgv-c input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin-top: -5px; border-radius: 50%;
  border: 0; background: var(--sgv-acc); box-shadow: 0 0 0 4px rgba(255,255,255,0.07); }
.sgv-root .sgv-c input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; border: 0; background: var(--sgv-acc);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.07); }
.sgv-root .sgv-c input[type=range]:hover::-webkit-slider-thumb, .sgv-root .sgv-c input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(255,255,255,0.16); }
.sgv-root .sgv-c input[type=range]:hover::-moz-range-thumb, .sgv-root .sgv-c input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(255,255,255,0.16); }

.sgv-root .sgv-tg { display: inline-flex; flex: 0 0 auto; border-radius: 999px; border: 1px solid rgba(159,179,200,0.3); overflow: hidden; }
.sgv-root .sgv-tg button { margin: 0; padding: 2px 10px; border: 0; background: transparent; color: #9fb3c8; font: inherit; font-size: .72rem; line-height: 1.5;
  white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.sgv-root .sgv-tg button:hover { color: #e8e8e8; }
.sgv-root .sgv-tg button.on { background: var(--sgv-acc); color: #06101a; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .sgv-root .sgv-replay, .sgv-root .sgv-tg button { transition: none; } }