/* BUFF OS v51 — Goal: running, daily training, muscle measurements, weight */
.g51-card { position: relative; }
.g51-card .g51-btn { width: 100% !important; display: block; margin: 14px auto 0; text-align: center; }

/* progress bar (running) */
.g51-bar { height: 12px; border-radius: 8px; background: var(--elev3); overflow: hidden; }
.g51-bar > i { display: block; height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--accent-hot), var(--accent));
  transition: width .7s var(--spring); }
.g51-sub { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--txt2); }
.g51-hint { margin: -4px 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--txt3); font-weight: 500; }

/* week dots (train every day) */
.g51-week { display: flex; gap: 7px; }
.g51-day { flex: 1; height: 10px; border-radius: 6px; background: var(--elev3); }
.g51-day.on { background: linear-gradient(90deg, var(--accent-hot), var(--accent)); }
.g51-day.today { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35); }

/* deltas */
.g51-up { color: #5bb98c; font-weight: 800; }
.g51-down { color: #e8955f; font-weight: 800; }
.g51-flat { color: var(--txt3); font-weight: 700; }

/* ---- body outline + measurement labels ---- */
.g51-body { position: relative; width: 100%; max-width: 400px; margin: 4px auto 2px; }
.g51-fig { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(var(--accent-rgb), .38); }
.g51-pt { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); }
.g51-pt.on { background: rgba(var(--accent-rgb),.85); border-color: transparent;
  box-shadow: 0 0 6px 0 rgba(var(--accent-rgb), .35); }

.g51-lbl { position: absolute; display: flex; flex-direction: column; gap: 1px; padding: 6px 9px;
  background: var(--elev2); border: 1px solid var(--line2); border-radius: 12px; cursor: pointer;
  min-width: 76px; text-align: left; color: var(--txt); font-family: inherit;
  transition: transform .15s var(--spring); }
.g51-lbl:active { transform: scale(.94); }
.g51-lbl.g51-l { left: 0; }
.g51-lbl.g51-r { right: 0; text-align: right; }
.g51-lbl.g51-r .g51-n, .g51-lbl.g51-r .g51-v, .g51-lbl.g51-r .g51-d { text-align: right; }
.g51-lbl.empty { border-style: dashed; opacity: .78; }
.g51-n { font-size: 9.5px; white-space: nowrap; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--txt3); }
.g51-v { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.1; }
.g51-v small { font-size: 10px; font-weight: 700; color: var(--txt3); }
.g51-none { font-size: 12px; font-weight: 700; color: var(--accent); }
.g51-d { font-size: 10.5px; font-weight: 800; }

/* ---- weight ---- */
.g51-wrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.g51-big { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.g51-big small { font-size: 15px; font-weight: 700; color: var(--txt3); }
.g51-since { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 14px; }
.g51-since span { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--txt3); }

@media (max-width: 380px) {
  .g51-lbl { min-width: 78px; padding: 5px 7px; }
  .g51-v { font-size: 14px; }
}

/* Real illustration, when body-front.png is present (falls back to the drawn SVG) */
.g51-figwrap { position: relative; width: 44%; margin: 0 auto; aspect-ratio: 620 / 1691; }
.g51-gbody .g51-figwrap { width: 52%; }
.g51-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.g51-body.has-img .g51-fig { display: none; }

/* ---- Guided measurement (Coach Tom) ---- */
.g51-ghead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.g51-gstep { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--txt3); }
.g51-mute { background: var(--elev2); border: 1px solid var(--line2); border-radius: 50%;
  width: 34px; height: 34px; font-size: 15px; cursor: pointer; color: var(--txt); }
.g51-gbar { height: 5px; border-radius: 4px; background: var(--elev3); overflow: hidden; margin-bottom: 16px; }
.g51-gbar > i { display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-hot), var(--accent)); transition: width .5s var(--spring); }
.g51-gtitle { font-size: 27px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 8px; }
.g51-gcue { font-size: 15px; line-height: 1.5; color: var(--txt2); background: rgba(var(--accent-rgb), .07);
  border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 16px; padding: 14px 15px; margin-bottom: 14px; }
.g51-gcue span { display: block; margin-top: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.g51-gbody { max-width: 260px; margin: 0 auto 8px; }
.g51-pt.active { background: var(--accent); border-color: #fff;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3), 0 0 14px 2px rgba(var(--accent-rgb), .7);
  animation: g51pulse 1.4s ease-in-out infinite; }
@keyframes g51pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.45); } }
.g51-glast { text-align: center; font-size: 13px; color: var(--txt2); font-weight: 600; margin-bottom: 12px; }
.g51-glast b { color: var(--txt); }
.g51-grow { display: flex; gap: 9px; align-items: center; }
.g51-grow input { flex: 1; min-width: 0; background: var(--elev1); border: 1px solid var(--line2);
  border-radius: 14px; padding: 15px; color: var(--txt); font-size: 17px; font-weight: 700; font-family: inherit; }
.g51-grow .btn { width: auto; flex: 0 0 auto; padding: 15px 22px; margin: 0; }
.g51-sum { margin: 6px 0 16px; }
.g51-sumrow { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line2); font-size: 14px; }
.g51-sumrow span:first-child { flex: 1; color: var(--txt2); font-weight: 600; }
.g51-sumrow b { color: #fff; font-weight: 800; }
.g51-sumrow b small { font-size: 10px; color: var(--txt3); }

/* ---- coach voice state ---- */
.g51-voice { background: var(--elev2); border: 1px solid var(--line2); border-radius: 100px;
  padding: 7px 12px; font-size: 11.5px; font-weight: 700; color: var(--txt2);
  cursor: pointer; font-family: inherit; white-space: nowrap; }
#guidedBody.is-speaking .g51-voice { color: var(--accent); border-color: rgba(var(--accent-rgb), .45);
  background: rgba(var(--accent-rgb), .12); }

.g51-gcue { position: relative; padding-right: 56px; padding-bottom: 16px; }
/* tap the speaker in the corner of the card to hear the line again */
.g51-hear { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(var(--accent-rgb), .16); border: 1px solid rgba(var(--accent-rgb), .42);
  color: var(--accent); font-size: 17px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; padding: 0; transition: transform .15s var(--spring); }
.g51-hear:active { transform: scale(.9); }
#guidedBody.is-speaking .g51-hear { background: var(--accent); border-color: transparent; }
#guidedBody.is-speaking .g51-hear-i { animation: g51beat .7s ease-in-out infinite; display: block; }
@keyframes g51beat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* three bars that only animate while he is actually talking */
.g51-wave { display: none; gap: 3px; align-items: flex-end; height: 13px; margin-bottom: 9px; }
#guidedBody.is-speaking .g51-wave { display: flex; }
.g51-wave i { width: 3px; background: var(--accent); border-radius: 2px; height: 5px;
  animation: g51bars .9s ease-in-out infinite; }
.g51-wave i:nth-child(2) { animation-delay: .15s; }
.g51-wave i:nth-child(3) { animation-delay: .3s; }
@keyframes g51bars { 0%,100% { height: 4px; } 50% { height: 13px; } }
.g51-by { display: block; margin-top: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* keep the Skip button clear of the input row and the phone's bottom edge */
.g51-grow { margin-bottom: 4px; }
.g51-card .g51-skip, .g51-skip { margin-top: 22px !important;
  margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important; }
#sheet-guided { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }

/* play triangle reads better than a speaker; it becomes a pause-style pulse while talking */
.g51-hear-i { font-size: 14px; line-height: 1; margin-left: 2px; }
#guidedBody.is-speaking .g51-hear-i { margin-left: 0; }

/* while speaking the button fills with the accent — the glyph must flip to dark ink */
#guidedBody.is-speaking .g51-hear { color: var(--accent-ink); }

/* ---- cue card v2: no dead space, play button centred on the right ---- */
.g51-gcue { display: flex; align-items: center; gap: 14px;
  padding: 16px 16px 16px 17px !important; }
.g51-cuetext { flex: 1; min-width: 0; }
.g51-hear { position: static !important; flex: 0 0 auto; width: 46px; height: 46px; }
.g51-wave { display: none !important; }
.g51-by { margin-top: 9px; }

/* the byline rule (.g51-gcue span) was also catching the play glyph — keep it inheriting */
.g51-hear-i { color: inherit !important; }

/* ---- cue card v3: quote on top, a tidy footer row along the bottom ---- */
.g51-gcue { display: block !important; padding: 16px 17px 14px !important; }
.g51-cuetext { flex: none; }
.g51-cuefoot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(var(--accent-rgb), .18); }
.g51-cuefoot .g51-by { margin: 0; }
/* pill-shaped play control, sitting on the card's bottom-right */
.g51-hear { position: static !important; flex: 0 0 auto; width: auto !important; height: 34px !important;
  border-radius: 100px !important; padding: 0 14px 0 12px; display: inline-flex; align-items: center; gap: 7px; }
.g51-hear-t { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.g51-hear-i { font-size: 11px; }
#guidedBody.is-speaking .g51-hear-t::after { content: "ing…"; }

/* the label is a <span> too, so the byline rule was turning it gold-on-gold while playing */
.g51-hear-t { color: inherit !important; }

/* ---- cue footer v4: byline on its own line, PLAY as a centred full-width bar ---- */
.g51-cuefoot { display: block !important; }
.g51-cuefoot .g51-by { display: block; margin: 0 0 11px !important; }
.g51-hear { width: 100% !important; height: 42px !important; padding: 0 !important;
  justify-content: center !important; gap: 9px !important; }
.g51-hear-i { font-size: 12px; margin: 0 !important; }
.g51-hear-t { font-size: 12.5px; letter-spacing: .08em; }

/* ---- final: a small, quiet play disc beside the attribution (podcast-quote style) ---- */
.g51-cuefoot { display: flex !important; align-items: center; gap: 11px; }
.g51-hear { order: -1; flex: 0 0 auto; width: 34px !important; height: 34px !important;
  border-radius: 50% !important; padding: 0 !important; justify-content: center !important;
  gap: 0 !important; background: transparent !important;
  border: 1.5px solid rgba(var(--accent-rgb), .55) !important; }
.g51-hear-t { display: none !important; }
.g51-hear-i { font-size: 11px; margin-left: 1px !important; }
.g51-cuefoot .g51-by { display: inline-block; margin: 0 !important; }
#guidedBody.is-speaking .g51-hear { background: var(--accent) !important; border-color: transparent !important; }

/* attribution left, quiet play disc anchored to the right corner of the card */
.g51-hear { order: 0 !important; margin-left: auto !important; }
.g51-hear:active { transform: scale(.92); }
#guidedBody.is-speaking .g51-hear { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }



/* ---- measurement callouts: dot → leader line → name + value (white) ---- */
.g51-gbody { overflow: visible; }

.g51-callout { position: absolute; z-index: 3; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px; width: 25%; padding: 7px 9px;
  background: var(--elev2); border: 1px solid var(--line2); border-radius: 12px;
  font-family: inherit; color: var(--txt); cursor: default; transition: transform .15s var(--spring); }
button.g51-callout { cursor: pointer; }
button.g51-callout:active { transform: translateY(-50%) scale(.94); }
.g51-callout.empty { border-style: dashed; opacity: .8; }
.g51-callout.on { border-color: rgba(var(--accent-rgb), .6); background: rgba(var(--accent-rgb), .12); }
.g51-co-l { left: 0; align-items: flex-start; text-align: left; }
.g51-co-r { right: 0; align-items: flex-end; text-align: right; }
.g51-co-n { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--txt3); white-space: nowrap; line-height: 1; }
.g51-co-v { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.05; white-space: nowrap; }
.g51-co-v small { font-size: 10px; font-weight: 700; color: var(--txt2); }

/* the old flanking-label styles are superseded by the shared callouts */
.g51-lbl { display: none !important; }
.g51-lead.on { background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .35)); height: 1.5px; }
.g51-co-r .g51-lead { }
.g51-callout .g51-d { font-size: 10.5px; font-weight: 800; line-height: 1; }

/* compact enough that adjacent callouts never collide on a phone */
.g51-callout { padding: 5px 8px !important; gap: 1px !important; width: 26% !important;
  border-radius: 11px !important; }
.g51-co-n { font-size: 8.5px !important; letter-spacing: .08em; }
.g51-co-v { font-size: 14.5px !important; }
.g51-co-v small { font-size: 9px !important; }
.g51-callout .g51-d { font-size: 9.5px !important; }
.g51-none { font-size: 12px; }

/* leader lines are one SVG overlay, redrawn to match the collision-free label layout */
.g51-leads { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.g51-callout { top: 0; }   /* JS sets the real top in px after measuring */

/* ---- The V goal: stated inside the Muscle milestones card ---- */
.g51-goal { margin: 2px 0 14px; padding: 13px 14px 14px;
  background: rgba(var(--accent-rgb), .07);
  border: 1px solid rgba(var(--accent-rgb), .20); border-radius: 16px; }
.g51-glbl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); }
.g51-glbl span { font-size: 9.5px; letter-spacing: .06em; color: var(--txt3); font-weight: 800; }
.g51-grat { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 9px; }
.g51-ratnow { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.g51-ratarrow { font-size: 16px; font-weight: 800; color: var(--txt3); line-height: 1; }
.g51-rattgt { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--accent); line-height: 1; }
.g51-ratcap { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--txt3); text-align: right; line-height: 1.3; }
.g51-ratbar { height: 8px; }
.g51-drvs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.g51-drv { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--txt3);
  background: var(--elev2); border: 1px solid var(--line2); border-radius: 100px; padding: 4px 9px; }
.g51-drv b { font-weight: 800; margin-left: 3px; }
.g51-gain { color: #5bb98c; }
.g51-tight { color: #6fb0e8; }

/* target line + hairline progress inside each measurement callout */
.g51-tg { font-size: 9.5px; font-weight: 800; letter-spacing: .03em; color: var(--accent);
  line-height: 1; white-space: nowrap; }
.g51-tbar { display: block; width: 100%; height: 2.5px; border-radius: 2px; margin-top: 3px;
  background: rgba(255,255,255,.10); overflow: hidden; }
.g51-tbar > i { display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-hot), var(--accent)); }
.g51-co-r .g51-tbar { direction: rtl; }

@media (max-width: 380px) {
  .g51-ratnow, .g51-rattgt { font-size: 26px; }
  .g51-ratcap { font-size: 9px; }
}
.g51-glbl { white-space: nowrap; }
.g51-glbl span { white-space: nowrap; flex: 0 0 auto; }
.g51-gcap { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--txt3); line-height: 1.35; }
.g51-drvs { margin-top: 10px; }
.g51-gstate { margin: 10px 0 2px; font-size: 12.5px; line-height: 1.5; color: var(--txt2);
  font-weight: 500; }
.g51-gstate b { color: #fff; font-weight: 800; }
.g51-gcap b { display: block; margin-top: 6px; font-weight: 700; color: var(--txt2); }
.g51-pace { margin-top: 10px; padding: 10px 12px; border-radius: 11px;
  border: 1px solid var(--line2); background: var(--elev2); }
.g51-pace b { display: block; font-size: 10px; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--txt3); margin-bottom: 4px; }
.g51-pace span { font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--txt2); }
.g51-p-ahead { border-color: rgba(91,185,140,.45); background: rgba(91,185,140,.09); }
.g51-p-ahead b { color: #5bb98c; }
.g51-p-behind { border-color: rgba(255,176,82,.42); background: rgba(255,176,82,.09); }
.g51-p-behind b { color: #ffb052; }

/* SHOULDERS and FOREARMS are wider than the 26% callout, and nowrap let them
   spill across the body illustration */
.g51-co-n { white-space: normal !important; letter-spacing: .04em !important; line-height: 1.15; }
.g51-callout { width: 29% !important; }
/* v444: body outline inside the Measurements sheet */
.g51-mwrap { margin: 2px 0 14px; }
.g51-mwrap .g51-body { margin: 0 auto; }
/* v444: traffic light on measurement changes — lime = good, yellow = no change, red = wrong way (Marius) */
.meas-c.tl-good, .meas-since.tl-good { color: #a6f23a !important; }
.meas-c.tl-same, .meas-since.tl-same { color: #ffd60a !important; }
.meas-c.tl-bad, .meas-since.tl-bad { color: #ff453a !important; }
.g51-up { color: #a6f23a !important; }
.g51-down { color: #ff453a !important; }
.g51-flat { color: #ffd60a !important; }
.rv.tl-good { color: #a6f23a !important; } .rv.tl-same { color: #ffd60a !important; } .rv.tl-bad { color: #ff453a !important; }