/* BUFF OS v56 — the coach runner, laid out properly.
   The old screen had two competing focal points stacked on each other (a ring
   and, below it, the number) and split its leftover space across two auto
   margins. Because the coach's caption reflows between one and three lines, that
   pool changed size mid-set and slid the whole group up and down by ~20px every
   time he said something. Nothing was centred because the centre kept moving.
   Now: one dial, one pool of slack, and every block below it a fixed height. */

/* ---- 1. the dial: number inside the ring ---- */
.coach-run .breather {
  width: 212px !important; height: 212px !important;
  position: relative; border: 0; background: none;
  transform: none !important;                 /* .down's scale moves to the ring */
  display: flex; align-items: center; justify-content: center;
}
.cr-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .02));
  border: 2px solid rgba(var(--accent-rgb), .34);
  transition: transform .4s var(--ease), border-color .3s;
}
.breather.br-down .cr-ring { transform: scale(.94); border-color: var(--gold); }
.breather.br-up   .cr-ring { transform: scale(1);   border-color: rgba(var(--accent-rgb), .4); }
.breather.br-rest .cr-ring { border-color: var(--blue); }
.cr-dial { position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; }

.coach-run .cr-count { font-size: 72px !important; line-height: .9;
  letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.coach-run .cr-count small { font-size: 19px; font-weight: 700; color: var(--txt3); }
.coach-run #breathTxt { font-size: 12px; letter-spacing: .16em; font-weight: 800;
  color: var(--accent); text-transform: uppercase; }

/* The counter is ALWAYS visible. It used to be hidden before a set via
   `#breather:not(.down):not(.up):not(.rest)`, which made its visibility depend on
   which state class the previous exercise happened to leave behind — that is how
   it kept vanishing mid-set. There is now no state in which the number can be
   hidden: the label underneath carries READY / 3 / 2 / 1 / GO / DOWN / UP / HOLD,
   and the number just counts. Nothing to get out of sync. */
.coach-run .cr-count { opacity: 1 !important; position: static !important;
  transform: none !important; visibility: visible !important; }

/* ---- 2. one pool of slack, above the dial only ---- */
.coach-run .cr-mid { flex: 1 1 auto !important; min-height: 0;
  margin: 0 !important; gap: 0 !important; justify-content: center; }

/* ---- 3. the photo is reference, not hero — and reserves its box so the
         onload unhide cannot reflow anything ---- */
/* The photos are not all the same shape — they run from 2:1 down to 3:2. A fixed
   aspect box letterboxed the taller ones inconsistently. A fixed HEIGHT instead
   keeps the layout from reflowing while letting each image keep its own ratio. */
.cr-img { height: 128px !important; width: auto !important; max-width: 88% !important;
  max-height: 128px !important; object-fit: contain; display: block;
  margin: 20px auto 0 !important; opacity: .82;
  border-radius: 12px; border: 0; background: none; }

/* ---- 4. the caption is always exactly two lines tall ---- */
.coach-run .cr-caption {
  height: 42px !important; min-height: 42px !important; flex: 0 0 auto;
  margin: 16px 0 0 !important; padding: 0 8px !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 15.5px !important; line-height: 1.35;
  color: var(--txt2); transition: none !important;
}

/* ---- 5. nothing at the bottom shouts. Ending a session is not the goal of
         the screen, so End stops being a gold call-to-action. ---- */
.cr-cap { width: auto !important; align-self: center;
  margin: 22px auto 14px !important; padding: 11px 20px !important;
  border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important;
  background: transparent !important; border: 1px solid rgba(255, 176, 82, .3) !important;
  color: rgba(255, 176, 82, .92) !important; }
.cr-btns { gap: 10px; }
.cr-btns .btn { flex: 1; padding: 14px !important; font-size: 15px !important; }
.cr-btns .btn:not(.ghost) { background: var(--elev2) !important; color: var(--txt) !important;
  border: 1px solid var(--line2) !important; }

@media (max-height: 730px) {
  .coach-run .breather { width: 176px !important; height: 176px !important; }
  .coach-run .cr-count { font-size: 60px !important; }
  .cr-img { height: 104px !important; max-height: 104px !important; margin-top: 14px !important; }
  .cr-cap { margin-top: 16px !important; }
}

/* The base sheet has `.breather span{font-size:22px;color:var(--gold)}` — written
   when the only span inside the ring was the state label. The counter now lives
   in there too, so put it back to its own size and colour. */
.coach-run .breather .cr-count > span,
.coach-run .breather.br-rest .cr-count > span,
.coach-run .breather.br-down .cr-count > span,
.coach-run .breather.br-up .cr-count > span {
  font-size: inherit !important; letter-spacing: -.05em !important;
  font-weight: 800 !important; color: #fff !important;
}

/* the final round: the tap-out button becomes the instruction */
.cr-cap.cr-cap-last { background: rgba(255,176,82,.16) !important;
  border-color: rgba(255,176,82,.65) !important; color: #ffc078 !important;
  font-weight: 800 !important; }

/* The close button on the workout screen was a 36px target you tap mid-set with
   sweaty hands. 44px is the minimum that reliably hits. */
.coach-run .cr-x { width: 44px !important; height: 44px !important; font-size: 17px; }


/* the run screen can outgrow a short phone once the photo is in — scroll rather
   than push the buttons past the bottom edge */
.coach-run { overflow-y: auto; overscroll-behavior: contain; }

/* hit areas: keep the visual size, give every small control a real 44px target */
.coach-run .cr-x, .sheet-x, .calnav, .iconbtn, .p55-cx, .v25-add, .info-i, .bar-b {
  position: relative;
}
.coach-run .cr-x::after, .sheet-x::after, .calnav::after, .iconbtn::after,
.p55-cx::after, .v25-add::after, .info-i::after, .bar-b::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}

/* ---- the photo opens the guide ---- */
.cr-figwrap { position: relative; flex: 0 1 auto; width: auto; max-width: 88%;
  margin: 20px auto 0; align-self: center; }
.cr-figwrap[hidden] { display: none !important; }
.cr-figwrap .cr-img { margin: 0 !important; max-width: 100% !important; }
.cr-info { position: absolute; right: -6px; bottom: -14px;
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 15px 0 11px; border-radius: 999px; cursor: pointer;
  background: rgba(28,32,40,.96); border: 1px solid rgba(var(--accent-rgb),.55);
  color: var(--accent); font-family: inherit; font-size: 12.5px; font-weight: 800;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.cr-info span { display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%; background: var(--accent);
  color: var(--accent-ink); font-size: 12px; font-weight: 800; font-style: italic; }
.cr-info:active { transform: scale(.94); }

/* ---- three controls along the bottom ---- */
.cr-btns .btn { flex: 1; min-width: 0; }
#crBack:disabled { opacity: .32; pointer-events: none; }

/* ---- during the rest, the amber slot becomes a real Next button ---- */
.cr-cap.cr-next { background: rgba(var(--accent-rgb),.16) !important;
  border-color: rgba(var(--accent-rgb),.6) !important; color: var(--accent) !important;
  font-size: 14.5px !important; font-weight: 800 !important;
  width: 100% !important; border-radius: 15px !important; padding: 14px 0 !important; }

/* The how-to guide sits at z-index 70; the workout runner is 250 and opaque, so
   opening the guide mid-set showed nothing at all. Lift it over the runner. */
body.run-info #sheet-info { z-index: 300 !important; }
body.run-info #backdrop { z-index: 290 !important; }