/* =========================================================================
   The camera, in the page.

   Full screen and black, because a viewfinder with a web page around it looks
   like a mistake. Everything is scoped under .evcam; this bundle loads on
   every screen in the app and must touch nothing else.

   Sized with dvh rather than vh. Phone browsers move their own furniture, and
   vh ignores the bar Chrome on Android keeps at the bottom, which is exactly
   where the shutter button would end up.
   ========================================================================= */

.evcam {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* Stops the page behind scrolling under the viewfinder on iOS. */
body.evcam-on { overflow: hidden; }

.evcam-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.evcam-live,
.evcam-shot {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.evcam-shot { display: none; }
.evcam.evcam-review .evcam-live { display: none; }
.evcam.evcam-review .evcam-shot { display: block; }

.evcam-msg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, .8);
  font-size: 15px;
}

/* ---------------------------------------------------------------- controls */

.evcam-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
  background: #000;
}

.evcam-after { display: none; }

.evcam-bar button {
  font: inherit;
  font-size: 15px;
  color: #fff;
  background: none;
  border: 0;
  padding: 12px 6px;
  cursor: pointer;
  border-radius: 8px;
}

.evcam-bar button:focus-visible { outline: 2px solid #fff; }

/* The shutter. Deliberately the biggest thing on screen and dead centre: it is
   pressed with a thumb, often one handed, sometimes at arm's length. */
.evcam-take {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(255, 255, 255, .35);
  background-clip: padding-box;
  padding: 0;
  flex: none;
}

.evcam-take:active { transform: scale(.94); }

.evcam-x,
.evcam-flip {
  min-width: 74px;
  opacity: .85;
}

.evcam-use {
  background: #fff;
  color: #101413;
  font-weight: 600;
  padding: 14px 22px;
}

.evcam-again { opacity: .85; }

.evcam-after { justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  .evcam-take:active { transform: none; }
}