/* Gimel pages (/scientific/gimel/ and its sub-pages); prefix gm-.
   Loaded only on the pages of the "gimel" group (<link data-group="gimel"> in scripts/scientific-pages/gimel.html);
   body[data-page] is gimel, gimel_orders, gimel_floor, ... so [data-page^="gimel"] selects them all.
   The accent is teal: body[data-page^="gimel"] in shared/ff/tokens.css sets --ff-accent*, and .ff-page points --accent* at them. */

/* The primary button of the group: Gimel teal, like .ff-btn--alef on the Alef pages. */
.ff-btn--gimel{ background: var(--gimel); color: var(--on-gimel); border-color: var(--gimel); }
.ff-btn--gimel:hover{ background: var(--gimel-ink); border-color: var(--gimel-ink); }

/* The small mono tag next to a title ("Sammellauf"). */
.gm-tag{
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-family: var(--ff-mono);
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--accent-ink);
  vertical-align: 0.5em;
  white-space: nowrap;
}

/* A section that carries a 3D scene under its heading. The ratio is read by .scn-scene (aspect-ratio: var(--scn-ratio));
   max-width keeps a wide scene from outgrowing the screen's height. */
.gm-scene{ --scn-ratio: 16 / 10; min-width: 0; width: 100%; max-width: calc(78svh * 1.6); }
.gm-scene--wide{ --scn-ratio: 16 / 9; max-width: calc(78svh * 1.7778); }
.gm-scene .scn-gimel{ max-width: 100%; margin: 0; }
@media (max-width: 640px) {
  .gm-scene, .gm-scene--wide{ --scn-ratio: 4 / 3; max-width: none; }
}

/* Part marks A01, A02 ... as mono chips. */
.gm-marks li{ font-family: var(--ff-mono); letter-spacing: 0.06em; }

/* Mono list of API prefixes. */
.gm-api li{ font-family: var(--ff-mono); letter-spacing: 0.02em; text-transform: none; }

/* Steps that are plain definitions: let the text breathe a little wider than the default measure. */
[data-page^="gimel"] .ff-steps p{ max-width: 62ch; }

/* ---- Hero hotspots (gimel-page.js): one link per floor area, placed over the drawing. ---- */
.gm-spot__dot{
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gimel) 18%, transparent);
  box-shadow: inset 0 0 0 2px var(--gimel);
}
.gm-spot__dot::after{
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--gimel);
}
@media (prefers-reduced-motion: no-preference) {
  :root:not(.ff-paused) .gm-spot__dot{ animation: gm-spot-pulse 2.4s ease-in-out infinite; }
}
@keyframes gm-spot-pulse { 50%{ box-shadow: inset 0 0 0 2px var(--gimel), 0 0 0 6px color-mix(in srgb, var(--gimel) 18%, transparent); } }

@media (max-width: 640px) {
  .gm-spot__dot{ left: -12px; top: -12px; width: 24px; height: 24px; }
  .gm-spot__dot::after{ inset: 7px; }
  }