/* ── 02 COMMA PUMP ───────────────────────────────────────── */
#halfsharp { --accent: var(--h3); }
.gauge { padding: clamp(22px, 3.2vw, 40px) clamp(20px, 3vw, 36px) 12px; }
.gauge-big { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.gauge-key {
  font-family: var(--brand); font-size: clamp(64px, 8vw, 120px); line-height: 0.9;
  color: var(--paper);
}
.gauge-cents {
  font-family: var(--mono); font-size: clamp(20px, 2.2vw, 30px);
  color: var(--h3); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.gauge-desc { font-family: var(--display); font-style: italic; font-size: 20px; color: var(--paper-mute); min-height: 1.3em; margin-top: 6px; }
.ruler { position: relative; margin-top: 34px; height: 64px; }
.ruler-track {
  position: absolute; left: 0; right: 0; top: 28px; height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(244,239,230,0.12), rgba(77,215,255,0.35) 50%, rgba(244,239,230,0.12));
}
.ruler-tick { position: absolute; top: 22px; width: 1px; height: 18px; background: rgba(244,239,230,0.35); }
.ruler-tick.minor { top: 26px; height: 10px; background: rgba(244,239,230,0.18); }
.ruler-lbl {
  position: absolute; top: 46px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-dim); white-space: nowrap;
}
.ruler-lbl.hot { color: var(--h3); }
.needle {
  position: absolute; top: 0; left: 0; width: 2px; height: 40px;
  background: var(--paper);
  box-shadow: 0 0 14px var(--h3);
  border-radius: 2px;
  transform: translateX(0);
  transition: transform 0.9s var(--ease);
}
.needle::before {
  content: ""; position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--h3);
}
.stairs-wrap { padding: 8px clamp(20px, 3vw, 36px) 0; }
#cpStairs { width: 100%; height: auto; display: block; overflow: visible; }
#cpStairs .grid { stroke: rgba(244,239,230,0.07); stroke-width: 1; }
#cpStairs .ref { stroke: rgba(244,239,230,0.35); stroke-dasharray: 3 5; stroke-width: 1; }
#cpStairs .ref-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; fill: var(--paper-dim); text-transform: uppercase; }
#cpStairs .step { fill: none; stroke: var(--h3); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#cpStairs .step.et { stroke: rgba(244,239,230,0.55); }
#cpStairs .lap-dot { fill: var(--h3); }
#cpStairs .lap-lbl { font-family: var(--mono); font-size: 9px; fill: var(--paper-mute); text-anchor: middle; }
.cp-chips { display: flex; gap: 8px; padding: 14px clamp(20px, 3vw, 36px) 22px; flex-wrap: wrap; }
.cp-chip {
  flex: 1 1 0; min-width: 76px;
  padding: 10px 12px; border-radius: 14px;
  border: 1px solid rgba(244,239,230,0.1);
  transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease);
}
.cp-chip .nm { font-family: var(--display); font-size: 22px; line-height: 1; }
.cp-chip .ct { margin-top: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--paper-dim); font-variant-numeric: tabular-nums; }
.cp-chip.now { border-color: var(--h3); background: rgba(77,215,255,0.08); transform: translateY(-3px); }
.cp-chip.now .ct { color: var(--h3); }
@media (max-width: 560px) {
  .cp-chip { min-width: 60px; padding: 8px 10px; }
  .cp-chip .nm { font-size: 19px; }
}

/* hl:own */
/* T3 (web spec 3.3, tool first): the gauge, the ruler and the graph give up some air on a
   phone, so the chord chips show on the first screen too */
@media (max-width: 560px) {
  .gauge { padding-top: 14px; }
  .gauge-key { font-size: 56px; }
  .ruler { margin-top: 18px; }
  #cpStairs { height: 72px; }
  .cp-chips { padding-top: 10px; padding-bottom: 12px; }
}