/* The in-page camera used for report photos and mission-closing photos.
   See assets/js/stamped-camera.js for why it exists at all.

   It covers the screen on purpose: a viewfinder in a corner of a form is
   a viewfinder nobody can aim. */

.ubcam{
  position:fixed; inset:0; z-index:4000;
  display:flex; flex-direction:column;
  background:#000;
  /* The page behind must not pan or pinch while the camera is open -
     dragging the preview would otherwise scroll the report form. */
  touch-action:none;
  -webkit-user-select:none; user-select:none;
}

/* Belt and braces with the gesture handlers in the script: this stops the
   page itself being pinched while the camera is up. */
body.ubcam-open{overflow:hidden; touch-action:none;}

.ubcam-stage{
  position:relative; flex:1; min-height:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}

/* Shaped to the camera's aspect ratio in the script, so it is exactly the
   picture - which lets the stamp preview sit on the photo's bottom edge
   instead of floating in the black below it. */
.ubcam-frame{
  position:relative;
  max-width:100%; max-height:100%;
  aspect-ratio:4 / 3;      /* until the real ratio is known */
}

.ubcam-video{
  width:100%; height:100%;
  object-fit:contain;      /* contain, not cover: cover crops, and a crop is a zoom */
  background:#000;
  display:block;
  pointer-events:none;     /* nothing to tap on the preview, so nothing to pinch */
}

/* The stamp as it will appear on the photo. Shown live so the photographer
   can see the time and place being recorded before pressing the shutter,
   rather than finding out afterwards. */
.ubcam-stamp{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 16px 14px;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.62));
  color:#fff;
  font-size:14px; font-weight:600; line-height:1.34;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  pointer-events:none;
}

.ubcam-zoomnote{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff;
  font-size:12.5px; font-weight:600; white-space:nowrap;
  pointer-events:none;
}

.ubcam-bar{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  background:#000;
}

.ubcam-shoot{
  width:68px; height:68px; border-radius:50%;
  border:4px solid rgba(255,255,255,.35);
  background:#fff;
  cursor:pointer;
  box-shadow:0 0 0 2px rgba(0,0,0,.6) inset;
}
.ubcam-shoot:active{transform:scale(.94);}
.ubcam-shoot:disabled{opacity:.5; cursor:default;}

.ubcam-cancel{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  padding:9px 14px; border:0; border-radius:9px;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:14.5px; font-weight:600; cursor:pointer;
}

.ubcam-title{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  max-width:38%; text-align:right;
  color:rgba(255,255,255,.75); font-size:13px; font-weight:600;
}

/* On a wide screen the bar's absolute corners get far apart; the title is
   the first thing to go, since the heading is already on the page behind. */
@media (max-width:420px){
  .ubcam-title{display:none;}
}