/* ============================================================================
   Iron Barbell — BENCHMARKS: THE TIERS (.bm2-*) [6.74]
   The tab's own parts. Everything structural is still borrowed from the app —
   the light surfaces, the board's melamine (.wb-*), the sheet and keypad — and
   the ladder's four colours come from ONE owner (p1/tiers.js), handed down the
   tree as --tr on the row that wears them. Nothing here invents a hue.
   ========================================================================== */

/* ---- THE CATEGORIES ARE THE BOTTOM BAR, AT THE TOP [6.77c · his call]: "you've
   got that beautiful black sort of one at the bottom and obviously it looks like
   it's part of the phone — I was talking about doing the same at the top." So this
   is `.m-tabbar.tight` verbatim in every respect that matters: iron, a graphite
   hairline, four keys, icon over a 8.5px body label, the lit key in electric. And
   the icons are the app's PRE-MADE set (window.IBIcon) — the movement marks were
   "those little men" and they are gone.
   [6.78] THE COUNT CAME OFF THE KEY (his call) and the rail is FLUSH with the list
   it heads — a full-bleed iron bar with 14px of chalk under it left a white gap for
   rows to slide through, so the bottom margin cancels the stack's gap and the list
   drops its top edge. ---- */
.bm2-tabs{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);background:var(--iron);border-bottom:1px solid var(--graphite);margin:-14px;padding:9px 2px 8px}
.bm2-tabs+.bm2-list{border-top:0;border-top-left-radius:0;border-top-right-radius:0}
.bm2-tabs button{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:6px 2px;color:var(--silver);cursor:pointer;font-family:inherit}
.bm2-tabs .ic{display:flex;align-items:center;justify-content:center;height:20px}
.bm2-tabs .lb{max-width:100%;font-family:var(--font-body);font-weight:700;font-size:8.5px;letter-spacing:0;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm2-tabs button:hover{color:#c9c9c9}
.bm2-tabs button.on{color:var(--electric)}
.bm2-lab{display:flex;align-items:baseline;gap:8px;font-family:var(--font-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--app-fg-subtle);margin:15px 2px 7px}
.bm2-lab i{font-style:normal;color:var(--app-border-strong);margin-left:auto}
.bm2-list{display:grid;gap:1px;background:var(--app-border);border:1px solid var(--app-border);border-radius:3px;overflow:hidden}
.bm2-r{display:grid;grid-template-columns:1fr auto auto;gap:11px;align-items:center;width:100%;background:#fff;border:0;padding:11px 12px;font-family:inherit;text-align:left;cursor:pointer}
.bm2-r:hover{background:var(--app-surface-sunk)}
.bm2-r .nm{min-width:0;font-family:var(--font-cond);font-weight:900;font-size:16px;letter-spacing:.03em;text-transform:uppercase;color:var(--app-fg);line-height:1.05}
.bm2-r .nm span{display:block;font-family:var(--font-mono);font-weight:400;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--app-fg-subtle);margin-top:4px}
.bm2-r .vl{font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--app-fg);text-align:right;white-space:nowrap}
.bm2-r .vl em{font-style:normal;display:block;font-size:8px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--app-fg-subtle);margin-top:4px}
.bm2-r .vl em.est{color:var(--forge-deep)}
.bm2-r.none .nm,.bm2-r.none .vl{color:var(--app-fg-subtle)}
/* the four-dot ladder: the whole read, at a glance. Lit by the rung you are ON,
   so a gate rung (no number of its own) counts like any other [6.76]. */
.bm2-dots{display:flex;gap:3px;flex:0 0 auto}
.bm2-dots i{width:8px;height:8px;border-radius:99px;background:transparent;border:1.5px solid var(--app-border-strong);display:block}
.bm2-dots i.on{border-color:transparent}

/* ---- the card head: the name, THE number, and how it was got ---- */
.bm2-card{background:#fff;border:1px solid var(--app-border);border-radius:3px;padding:14px 14px 15px;margin-bottom:8px}
.bm2-hd{display:flex;align-items:flex-start;gap:10px}
.bm2-h{flex:1 1 auto;min-width:0;font-family:var(--font-cond);font-weight:900;font-size:25px;letter-spacing:.03em;text-transform:uppercase;line-height:1;margin:0;color:var(--app-fg)}
.bm2-nb{margin-left:auto;text-align:right;flex:0 0 auto}
.bm2-nb .v{font-family:var(--font-cond);font-weight:900;font-size:34px;line-height:.9;letter-spacing:.01em;display:block;color:var(--app-fg)}
.bm2-nb .v small{font-size:15px}
.bm2-nb .v.no{color:var(--app-border-strong)}
.bm2-nb .t{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--app-fg-subtle);display:block;margin-top:4px}
.bm2-nb .t.est{color:var(--forge-deep)}
.bm2-meta{font-size:11px;color:var(--app-fg-subtle);margin-top:9px;padding-top:9px;border-top:1px solid var(--app-border);text-wrap:pretty;line-height:1.5}
.bm2-meta b{color:var(--app-fg-muted)}
.bm2-over{font-size:11px;color:var(--app-fg-muted);background:var(--app-surface-sunk);border-left:2px solid var(--app-border-strong);padding:7px 9px;margin-top:9px;text-wrap:pretty;line-height:1.5}
.bm2-over b{color:var(--app-fg)}
.bm2-over.est{border-left-color:var(--forge)}

/* ---- THE RAIL — three states and nothing else: cleared · you · ahead.
   The connector is drawn PER ROW on the marker's own axis (13px = half the 26px
   track), so it is on-axis by construction and a lone rung draws no line. ---- */
.bm2-rail{margin-top:13px}
.bm2-st{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0}
.bm2-st>*{position:relative;z-index:1}
.bm2-st::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:1px;background:var(--app-border-strong);z-index:1}
.bm2-st:first-child::before{top:50%}
.bm2-st:last-child::before{bottom:50%}
.bm2-st.done::before{background:var(--tr,var(--iron))}
.bm2-st .dot{width:17px;height:17px;border-radius:50%;background:#fff;border:1.5px solid var(--tr,var(--app-border-strong));position:relative;z-index:1;justify-self:center}
.bm2-st .nm{font-family:var(--font-cond);font-weight:900;font-size:14px;letter-spacing:.04em;text-transform:uppercase;line-height:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--app-fg-muted)}
.bm2-st .nm span{display:block;font-family:var(--font-mono);font-weight:400;font-size:8.5px;letter-spacing:.05em;text-transform:none;color:var(--app-fg-subtle);margin-top:3px}
.bm2-st .kg{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--app-fg-muted);text-align:right}
.bm2-st .kg em{font-style:normal;display:block;font-size:8.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--app-fg-subtle);margin-top:3px}
/* cleared — the dot fills with ITS TIER's colour, so the climb reads as the
   continuum. No tick: a filled bubble already says cleared. */
.bm2-st.done .dot{background:var(--tr,var(--iron));border-color:var(--tr,var(--iron))}
.bm2-st.done .nm{color:var(--app-fg)}
/* you are here — the dark block is a pseudo-element inset around the row, so the
   row's own grid (and therefore its marker) never leaves the shared axis.
   [6.76] IT WEARS THE RUNG'S COLOUR, not --electric: blue IS beyond Rx'd, so a
   blue block on a beginner's card contradicted the rail underneath it. A number
   that has not reached the first rung gets the app's neutral (.nil) — it does
   not get to borrow the top of the ladder. */
.bm2-st.you{padding:11px 0}
.bm2-st.you::after{content:"";position:absolute;left:-9px;right:-9px;top:0;bottom:0;background:var(--iron);border-radius:3px;z-index:0}
.bm2-st.you::before{top:50%;background:var(--tr,var(--iron))}
.bm2-st.you .dot{background:var(--tr,var(--electric));border-color:var(--tr,var(--electric));box-shadow:0 0 0 4px color-mix(in srgb,var(--tr,var(--electric)) 26%,transparent)}
.bm2-st.you .nm{color:#fff;font-size:15px}
.bm2-st.you .nm span{color:var(--trb,var(--electric-bright))}
.bm2-st.you .kg{color:#fff;font-size:19px}
.bm2-st.you .kg em{color:var(--trb,var(--electric-bright))}
/* a rung the gym publishes as a GATE, not a number (6.76) — "1 strict
   chest-to-bar pull-up + 6 bar dips". Dashed until it is earned, and the
   requirement is allowed to wrap: it is the whole point of the row. */
.bm2-st.gate .dot{border-style:dashed;background:#fff}
.bm2-st.gate.done .dot{border-style:solid;background:var(--tr,var(--iron))}
.bm2-st.gate .nm,.bm2-st.gate .nm span{white-space:normal;overflow:visible;text-overflow:clip}
.bm2-st.gate .kg em{text-align:right}
.bm2-st.ahead .nm,.bm2-st.ahead .kg{color:var(--app-fg-subtle)}
/* the room, per movement — beside where you sit */
.bm2-lb{grid-column:2/4;display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.16);width:100%;background:none;border-left:0;border-right:0;border-bottom:0;padding-left:0;padding-right:0;font-family:inherit;cursor:pointer;text-align:left}
.bm2-lb .pl{font-family:var(--font-cond);font-weight:900;font-size:16px;letter-spacing:.03em;color:#fff}
.bm2-lb .of{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--app-fg-subtle)}
.bm2-lb .go{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--electric-bright);border:1px solid var(--graphite);padding:5px 7px;flex:0 0 auto}

/* ---- the one next thing ---- */
.bm2-next{display:flex;align-items:baseline;gap:9px;border-top:1px solid var(--app-border);margin-top:11px;padding-top:11px;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;font-family:inherit;text-align:left;cursor:pointer}
.bm2-next .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--app-fg-subtle);flex:0 0 auto}
.bm2-next .w{font-family:var(--font-cond);font-weight:900;font-size:17px;letter-spacing:.03em;text-transform:uppercase;color:var(--app-fg)}
.bm2-next .g{margin-left:auto;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--electric-deep);flex:0 0 auto}

/* ---- OVER TIME IS THE LIST, NOT A CHART [6.76 · his call]. The six-bar column
   chart (.bm2-time / .bm2-tl) and the tier key (.bm2-key) that sat under it are
   CUT: they lived directly above a list of every run, and consecutive bars
   implied a cadence that a member who ran it in Mar '25 and Apr '26 never had.
   Every attempt is a row now, dated with its year, carrying its own change. ---- */

/* ---- the history: every time you loaded it / every run ---- */
.bm2-rows{display:grid;gap:1px;background:var(--app-border);border:1px solid var(--app-border);border-radius:3px;overflow:hidden}
.bm2-row{display:grid;grid-template-columns:64px 1fr auto;gap:9px;align-items:baseline;background:#fff;padding:8px 10px}
.bm2-row .dt{font-family:var(--font-mono);font-size:9.5px;color:var(--app-fg-subtle)}
.bm2-row .wk{font-size:11.5px;color:var(--app-fg-muted);min-width:0}
.bm2-row .vl{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--app-fg-muted);text-align:right}
.bm2-row.top{background:var(--app-surface-sunk)}
.bm2-row.top .vl{color:var(--iron)}
.bm2-row.est .vl{color:var(--forge-deep)}

/* ---- the benchmark's own furniture: a rank, and every run ---- */
.bm2-rank{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;width:100%;background:var(--iron);color:#fff;border:0;border-radius:3px;padding:12px 13px;margin-bottom:8px;font-family:inherit;text-align:left;cursor:pointer}
.bm2-rank .pl{font-family:var(--font-cond);font-weight:900;font-size:30px;line-height:.9}
.bm2-rank .of{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--app-fg-subtle);display:block;margin-top:4px}
.bm2-rank .mid{font-size:11.5px;color:#C9CDD2;text-wrap:pretty;line-height:1.45}
.bm2-rank .mid b{color:#fff}
.bm2-rank .go{font-family:var(--font-mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--electric-bright);border:1px solid var(--graphite);padding:6px 8px;flex:0 0 auto}
.bm2-rank.no{background:#fff;color:var(--app-fg);border:1px dashed var(--app-border-strong)}
.bm2-rank.no .mid{color:var(--app-fg-muted)}
.bm2-rank.no .mid b{color:var(--app-fg)}
.bm2-rank.no .go{color:var(--electric-deep);border-color:var(--app-border-strong)}
.bm2-runs{display:grid;gap:1px;background:var(--app-border);border:1px solid var(--app-border);border-radius:3px;overflow:hidden;margin-top:11px}
.bm2-run{display:grid;grid-template-columns:64px minmax(24px,1fr) 54px 56px;gap:8px;align-items:center;background:#fff;padding:9px 10px}
.bm2-run .dt{font-family:var(--font-mono);font-size:9px;color:var(--app-fg-subtle)}
.bm2-run .bar{height:7px;background:var(--app-border);position:relative}
.bm2-run .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--tr,var(--iron))}
.bm2-run .sc{font-family:var(--font-mono);font-size:12px;font-weight:700;text-align:right;color:var(--app-fg)}
/* the fourth column is the READ, not a label: banded, best, or the change on
   the attempt before it [6.76] */
.bm2-run .tg{font-family:var(--font-mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--app-fg-subtle);text-align:right}
.bm2-run .tg.up{color:var(--z-fit-deep)}
.bm2-run .tg.bd{color:var(--forge-deep)}
.bm2-run .tg.bs{color:var(--z-ath-deep);font-weight:700}
.bm2-run.best{background:var(--app-surface-sunk);box-shadow:inset 3px 0 0 var(--tr,var(--iron))}
.bm2-run.best .sc{color:var(--iron)}
.bm2-run.best .dt{color:var(--app-fg-muted)}
.bm2-run.sc-only .bar i{background:transparent;border:1.5px dashed var(--tr,var(--app-border-strong));border-right:0}
.bm2-run.sc-only .sc{color:var(--app-fg-subtle)}
/* many attempts over many years: six, then the rest on a tap */
.bm2-more{display:block;width:100%;margin-top:7px;background:none;border:1px dashed var(--app-border-strong);border-radius:3px;padding:8px 0;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--app-fg-muted);cursor:pointer}
.bm2-more:hover{border-color:var(--app-fg-subtle);color:var(--app-fg)}

/* ---- the workout as written, and the way back ---- */
.bm2-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;margin-bottom:9px;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--app-fg-subtle);cursor:pointer}
.bm2-back:hover{color:var(--electric-deep)}
.bm2-tiers{display:grid;gap:1px;background:var(--app-border);border:1px solid var(--app-border);border-radius:3px;overflow:hidden;margin-top:11px}
.bm2-tiers div{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;background:#fff;padding:9px 11px}
.bm2-tiers i{width:10px;height:10px;border-radius:99px;background:var(--tr)}
.bm2-tiers .nm{font-family:var(--font-cond);font-weight:900;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--app-fg-muted)}
.bm2-tiers .cv{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--app-fg)}