/* camera.css — page-specific styles for #page-camera */

.camera-stage {
  position: relative;
  width: 100%;
  /* Tall portrait frame — squats/lunges/deadlifts/jumping jacks all need head-to-feet
     visible, and a 3:4 box with object-fit:cover was cropping the top/bottom of the
     capture. object-fit:contain below guarantees the full captured frame is shown.
     (camera.js overrides this aspect-ratio inline once it knows the real stream shape.) */
  aspect-ratio: 9 / 16;
  max-height: 75vh;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
}

/* On phones, let the preview run edge to edge — the page's side padding was costing
   ~10% of the only dimension a portrait preview has to work with. */
@media (max-width: 600px) {
  .camera-stage {
    width: calc(100% + var(--space-4) * 2);
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* Landscape phones are short on height but have plenty of unused width once #app
   widens (see base.css) — let the stage claim most of the viewport in that case. */
@media (orientation: landscape) {
  .camera-stage {
    max-height: 85vh;
  }
}

.camera-stage video,
.camera-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop the capture — cropping is what was cutting off head/feet */
  transform: scaleX(-1); /* mirror front camera */
}

.camera-framing-guide {
  position: absolute;
  inset: 6% 22%;
  border: 2px dashed rgba(59, 130, 246, 0.35);
  border-radius: 40% 40% 12% 12% / 20% 20% 6% 6%;
  pointer-events: none;
  z-index: 3;
}

.camera-feedback {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  top: var(--space-3);
  background: rgba(15,15,15,0.75);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 5;
}
.camera-feedback.show { opacity: 1; transform: translateY(0); }
.camera-feedback-success { color: var(--success); }
.camera-feedback-warning { color: var(--warning); }
.camera-feedback-info { color: var(--text); }

.camera-rep-counter {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  background: rgba(15,15,15,0.75);
  color: var(--accent);
  font-size: 28px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  z-index: 5;
  min-width: 56px;
  text-align: center;
}

.camera-quality-indicator {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  background: rgba(15,15,15,0.75);
  color: var(--success);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  z-index: 5;
}

.camera-permission-overlay,
.camera-fallback-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5);
  background: rgba(15,15,15,0.92);
}

.camera-permission-overlay .empty-icon { display: flex; justify-content: center; margin-bottom: var(--space-2); color: var(--text-faint); }
.camera-permission-overlay p { color: var(--text-dim); font-size: 14px; }

/* ---- Immersive session view ------------------------------------------------
   During a session the preview takes over the whole screen: you're standing a few
   metres away, so the preview has to be readable from there. The page behind it
   (header, exercise picker, bottom nav) is hidden, and the controls move on top of
   the video. */
body.camera-immersive .camera-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border: none;
  border-radius: 0;
  z-index: 60;
  /* beats the inline aspect-ratio camera.js sets from the stream's shape */
  aspect-ratio: auto !important;
}

body.camera-immersive .bottom-nav { display: none; }
body.camera-immersive .camera-framing-guide { display: none; }

/* Default is object-fit:contain (whole frame visible, letterboxed). "Fill screen"
   switches to cover: the video is scaled up until it fills the screen and the edges
   are cropped. Pose detection always runs on the full uncropped frame, and the canvas
   uses the same object-fit, so the skeleton stays aligned either way. */
.camera-stage.fill-crop video,
.camera-stage.fill-crop canvas {
  object-fit: cover;
}

.camera-fit-toggle {
  position: absolute;
  top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  right: var(--space-3);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15,15,15,0.75);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
}

.camera-immersive-controls {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  display: flex;
  justify-content: center;
}

.camera-immersive-controls .btn {
  min-width: 160px;
  background: rgba(15,15,15,0.8);
}

/* Lift the readouts clear of the stop button. */
body.camera-immersive .camera-rep-counter,
body.camera-immersive .camera-quality-indicator {
  bottom: calc(var(--space-3) + 64px + env(safe-area-inset-bottom, 0px));
}

/* The feedback banner sits under the fit toggle so the two don't overlap. */
body.camera-immersive .camera-feedback {
  top: calc(var(--space-3) + 44px + env(safe-area-inset-top, 0px));
}

.camera-setup-hint {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}
.camera-setup-hint strong { color: var(--accent); font-weight: 600; }