/*
 * Phone-only live-workout fit.
 * This is intentionally kept outside the recovered PWA bundle so the original
 * phone/Edge build remains intact and this calibration can be removed alone.
 */
@media screen and (max-width: 640px) {
  /* The local lab is a separate origin, so make its re-login form immediate. */
  .public-shell .layout {
    gap: 12px;
  }

  .public-shell .auth-panel {
    order: 1;
  }

  .public-shell .auth-media-panel {
    order: 2;
  }

  .public-shell .auth-media-surface {
    min-height: 220px;
  }

  .shell-focus-mode {
    padding-top: 8px;
  }

  .shell-focus-mode .layout,
  .shell-focus-mode .workout-session-stack,
  .shell-focus-mode .workout-session-stack-focus,
  .shell-focus-mode .workout-session-shell,
  .shell-focus-mode .workout-session-shell-focus {
    gap: 10px;
  }

  .shell-focus-mode .workout-session-stage {
    min-height: clamp(320px, 47dvh, 344px);
  }

  .shell-focus-mode .workout-session-stage-top,
  .shell-focus-mode .workout-session-live-duration,
  .shell-focus-mode .workout-session-live-kcal {
    top: 12px;
  }

  .shell-focus-mode .workout-session-hydration,
  .shell-focus-mode .workout-session-action-counter {
    top: 92px;
  }

  .shell-focus-mode .workout-session-dashboard,
  .shell-focus-mode .workout-session-dashboard-focus {
    padding-top: 10px;
    padding-bottom: 12px;
    gap: 10px;
  }

  .shell-focus-mode .action-row {
    gap: 8px;
  }

  .shell-focus-mode .action-row > * {
    min-height: 44px;
  }
}

/* Short phone viewports keep the finish controls inside the first screen. */
@media screen and (max-width: 640px) and (max-height: 740px) {
  .shell-focus-mode .workout-session-stage {
    min-height: clamp(294px, 45dvh, 320px);
  }

  .shell-focus-mode .workout-session-dashboard,
  .shell-focus-mode .workout-session-dashboard-focus {
    padding-top: 8px;
    padding-bottom: 10px;
    gap: 8px;
  }
}