/* =============================================================
   Heart rate zone calculator. Page-only styles on top of instrument.css
   (the shared card-free tool layout). Only what is unique lives here: the
   method note, the zone bar and the zone row details. Zones are a
   greyscale ramp with red reserved for zone 5, so the page keeps one
   accent. Hover is guarded behind (hover: hover).
   ============================================================= */

.hr [hidden] { display: none; }

/* Method note under the caption: quiet text, not a callout. */
.hr-method { margin-top: 8px; font-size: 14px; line-height: 1.55; color: #8A8A93; max-width: 46ch; }

/* Three short method labels must fit a phone without wrapping. */
.hr-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.hr-methods button { min-width: 0; padding: 0 8px; }

.hr .inst__row-h small { margin-right: auto; margin-left: 8px; }
.hr-clear { background: none; border: 0; padding: 0; color: #A0A0A0; font-size: 13px; font-weight: 600; border-bottom: 1px solid #3A3A3A; }
.hr-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: #8A8A93; }
.hr .inst-step__field input { max-width: 3.4ch; }

/* ---------- Zone bar: bare segments on the spread ---------- */
.hr-band__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.hr-band__what { font-size: 15px; font-weight: 700; color: #fff; }
.hr-band__load { font-size: 14px; font-weight: 700; color: #8A8A93; }
.hr-band__load b { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: #fff; font-variant-numeric: tabular-nums; }
.hr-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-top: 16px; }
.hr-seg {
  position: relative; height: 48px; border: 0; border-radius: 4px; padding: 0; color: #fff; display: grid; place-items: center;
  touch-action: manipulation; transition: transform .15s ease, box-shadow .15s ease;
}
.hr-bar .hr-seg:first-child { border-radius: 10px 4px 4px 10px; }
.hr-bar .hr-seg:last-child { border-radius: 4px 10px 10px 4px; }
.hr-seg__n { font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.hr-seg--1 { background: #1C1C1F; color: #A0A0A0; }
.hr-seg--2 { background: #333338; }
.hr-seg--3 { background: #5A5A62; }
.hr-seg--4 { background: #C4C4CC; color: #0A0A0A; }
.hr-seg--5 { background: var(--accent); }
/* Selected: a white bar under the segment, not a ring (rings read as boxes). */
.hr-seg.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 3px; border-radius: 2px; background: #fff; }
.hr-seg:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hr-ticks { display: flex; justify-content: space-between; margin-top: 18px; font-size: 12px; font-weight: 700; color: #71717A; font-variant-numeric: tabular-nums; }

/* ---------- Zone rows (on .inst-r) ---------- */
.hr-row { align-items: center; }
.hr-row__n { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #71717A; }
.hr-row .inst-r__k b { display: block; font-size: 17px; font-weight: 800; }
.hr-row .inst-r__k small { max-width: 44ch; }
.hr-row__pct { display: block; margin-top: 3px; font-style: normal; font-size: 12px; font-weight: 600; color: #71717A; }
.hr-row.is-on .hr-row__n, .hr-row.is-on .hr-row__pct { color: #0A0A0A; }

@media (hover: hover) {
  .hr-seg:hover:not(.is-on) { transform: translateY(-2px); }
  .hr-clear:hover { color: #fff; border-color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .hr-seg { transition: none; } }