/* /zone-2-heart-rate-calculator only: the three ranges drawn on one bpm scale. Scoped under #z2App. */
#z2App .z2-ranges { margin: 14px 0; display: grid; gap: 10px; }
#z2App .z2-row { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 4px 10px; align-items: center; font-size: .86rem; }
#z2App .z2-name { color: var(--bm-ink-2); font-weight: 600; }
#z2App .z2-track { position: relative; height: 22px; border-radius: 999px; background: var(--bm-line-2, var(--bm-line)); }
#z2App .z2-bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--bm-accent); min-width: 4px; }
#z2App .z2-bar.is-overlap { background: transparent; border: 2px dashed var(--bm-ink); top: -3px; bottom: -3px; }
#z2App .z2-val { position: absolute; top: 50%; transform: translateY(-50%); font-size: .76rem; font-weight: 700; color: var(--bm-ink); white-space: nowrap; }
#z2App .z2-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--bm-ink-3); grid-column: 2; }
@media (max-width: 480px) { #z2App .z2-row { grid-template-columns: 1fr; } #z2App .z2-scale { grid-column: 1; } }
@media (forced-colors: active) { #z2App .z2-bar { background: Highlight; } #z2App .z2-track { border: 1px solid CanvasText; } }