/* Analog speedometer. Geometry: bible 30 / architect-astra spec. */
.gauge-shell {
  position: relative;
  width: min(100%, 40rem);
  margin: 0 auto;
}
.gauge-shell svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.gauge-shell .track {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 10;
}
.gauge-shell .band-arc {
  fill: none;
  stroke-width: 10;
  opacity: 0.28;
}
.gauge-shell .band-arc.is-on { opacity: 1; }
.gauge-shell .band-arc.calm { stroke: var(--calm); }
.gauge-shell .band-arc.watchful { stroke: var(--watch); }
.gauge-shell .band-arc.elevated { stroke: var(--elev); }
.gauge-shell .band-arc.fearful { stroke: var(--fear); }
.gauge-shell .band-arc.extreme { stroke: var(--ext); }
.gauge-shell .tick {
  stroke: var(--mute);
  stroke-width: 1;
}
.gauge-shell .tick.major {
  stroke: var(--dim);
  stroke-width: 1.5;
}
.gauge-shell .tick-lab {
  fill: var(--mute);
  font-size: 13px;
  font-family: var(--mono);
  text-anchor: middle;
}
.gauge-shell .needle {
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: square;
  fill: none;
}
.gauge-shell .needle[hidden] { visibility: hidden; }
.gauge-shell .pivot {
  fill: #fff;
}
.gauge-shell .pivot-core {
  fill: var(--bg);
}

.hub {
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, 0);
  text-align: center;
  pointer-events: none;
  min-width: 12rem;
}
.hub .close {
  font-size: clamp(3.6rem, 14vw, 8.5rem);
  line-height: 0.82;
  letter-spacing: -0.07em;
  font-weight: 500;
  border-radius: 0;
  min-height: 0.8em;
}
.hub .close.is-empty {
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  color: var(--mute);
  min-height: 0;
}
.hub .hub-band {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}