/* BUFF OS v59 — the coach runner, bigger and tighter.
   The dial was 212px sitting alone in the middle of the screen with the photo
   stranded far below it. Now the dial fills the width, the photo sits right
   under it with the guide button beneath the photo instead of hanging off its
   corner, and the whole group (dial → photo → caption) is centred as one unit
   between the title bar and the controls. */

/* the dial */
.coach-run { --dial: min(70vw, 290px); padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important; }
.coach-run .breather {
  width: var(--dial) !important; height: var(--dial) !important;
}
.coach-run .cr-ring {
  background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .03) 70%);
  border-width: 2.5px;
  box-shadow: 0 0 0 10px rgba(var(--accent-rgb), .045), 0 24px 60px -30px rgba(var(--accent-rgb), .6);
}
.coach-run .cr-count { font-size: calc(var(--dial) * .44) !important; line-height: .86; display: flex; align-items: baseline; justify-content: center; padding-left: 14px; }
.coach-run .cr-count small { font-size: 24px; margin-left: 10px; letter-spacing: 0; }
.coach-run #breathTxt { font-size: 14px; letter-spacing: .22em; margin-top: 6px; }

/* one centred group: slack above the dial and below the caption, nothing else */
.coach-run .cr-mid { flex: 0 0 auto !important; margin-top: auto !important; }
.coach-run .cr-caption { margin: auto 0 12px !important; font-size: 16.5px; height: 40px !important; min-height: 40px !important; }

/* the photo, centred and close */
.cr-figwrap { display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; max-width: 100%; margin: 22px auto 0 !important; }
.cr-figwrap .cr-img { height: 132px !important; max-height: 132px !important; max-width: 92% !important;
  opacity: 1; border-radius: 16px; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .8);
  border: 1px solid rgba(255, 255, 255, .06); }
.cr-info { position: static !important; height: 36px; font-size: 13px; }
.cr-cap { margin: 6px 0 8px !important; }

/* weight pill sits between photo and caption */
.coach-run .bar-pill { margin-top: 10px; }

/* Budget (with iPhone safe areas, ~93px) — the dial and photo scale with height so
   the three controls never leave the screen: 932 → 300/150, 844–852 → 240/116,
   ≤760 → 210/100, ≤640 → 180/84. */
@media (max-height: 900px) {
  .coach-run { padding-bottom: calc(env(safe-area-inset-bottom) + 12px) !important; }
  .coach-run { --dial: min(62vw, 236px); }
  .coach-run .cr-count small { font-size: 20px; }
  .cr-figwrap .cr-img { height: 104px !important; max-height: 104px !important; }
  .cr-figwrap { margin-top: 14px !important; gap: 8px; }
  .cr-info { height: 34px; font-size: 12.5px; }
  .coach-run .cr-caption { height: 38px !important; min-height: 38px !important; margin-bottom: 10px !important; }
  .cr-cap { margin: 6px 0 8px !important; }
  .coach-run .bar-pill { margin-top: 8px; }
}
@media (max-height: 760px) {
  .coach-run { --dial: 206px; }
  .cr-figwrap .cr-img { height: 100px !important; max-height: 100px !important; }
  .cr-figwrap { margin-top: 14px !important; }
}
@media (max-height: 640px) {
  .coach-run { --dial: 176px; }
  .cr-figwrap .cr-img { height: 84px !important; max-height: 84px !important; }
}