/* Focus ruler (ruler.js): plain marks on the scene under the dial, exactly as wide as the dial's
   bottom edge, 10 cm at the left, the horizon at the right. A sharp copy of the scale shows where
   things look sharp, a blurred copy where they look fuzzy, and a line marks each edge between them.
   The marks are dark over a bright scene and white over a dark one, with the dial (style.css). */

.ruler {
  position: relative;
  width: calc(var(--dial-r) * 2);
  height: var(--ruler-h);
  margin-top: var(--ruler-gap);
  flex: none;
  pointer-events: none;
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  /* the scale's ink and the edge line's look */
  --r-ink: #0f1720;
  --r-spine: rgba(15, 23, 32, 0.45);
  --r-tick: rgba(15, 23, 32, 0.55);
  --r-marker: #0f1720;
  --r-marker-glow: 0 0 0 0.5px rgba(255, 255, 255, 0.5);
  color: var(--r-ink);
}

.dock-on-dark .ruler {
  --r-ink: #fff;
  --r-spine: rgba(255, 255, 255, 0.5);
  --r-tick: rgba(255, 255, 255, 0.65);
  --r-marker: #fff;
  --r-marker-glow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 0 0.5px rgba(15, 23, 32, 0.18);
}

/* No glass: the marks sit straight on the scene. */
.ruler-strip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* White marks keep a soft shadow, so they read over light patches in a dark scene. */
.dock-on-dark .ruler-strip {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

/* Each copy of the scale fills the strip; the track inside it holds the marks. ruler.js sets the
   strip's width to the dial's visible bottom edge and the track to run its full length. */
.ruler-scale {
  position: absolute;
  inset: 0;
}

.ruler-scale--fuzzy {
  filter: blur(2px);
  opacity: 0.45;
}

.ruler-track {
  position: absolute;
  left: var(--ruler-pad, 10px);
  right: var(--ruler-pad, 10px);
  top: 0;
  bottom: 0;
}

.ruler-spine {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 1px;
  background: var(--r-spine);
}

.ruler-tick {
  position: absolute;
  top: 9px;
  width: 1px;
  height: 5px;
  transform: translateX(-50%);
  background: var(--r-tick);
}

.ruler-tick--major {
  height: 10px;
  background: var(--r-ink);
}

.ruler-label {
  position: absolute;
  top: 22px;
  transform: translateX(-50%);
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--r-ink);
}

.ruler-label--inf {
  top: 19px;
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
}

/* The end labels sit inside the scale: 10 cm starts at its tick, the horizon ends at its tick. */
.ruler-label--start {
  transform: none;
}

.ruler-label--end {
  transform: translateX(-100%);
}

/* A thin line at each sharp/fuzzy boundary: dark over a bright scene, glowing white over a dark one. */
.ruler-marker {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: var(--r-marker);
  box-shadow: var(--r-marker-glow);
}