/* ==========================================================================
   Face camera

   The camera preview shared by the face attendance page and the registration
   dialog in Kelola Karyawan. The pages set data-state on .face-cam from what
   the detector reports, and the guide ring follows it:

     (none)          waiting — dashed, quiet
     face            one face in view — brand
     progress        head turned one way, or both — ok
     done            turns finished, reading the face — ok
     warn            no face, or more than one — danger

   Requires tokens.css.
   ========================================================================== */

.face-cam {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--wash-2);
}

/* Mirrored so moving left moves left — the way a front camera is expected
   to behave. Detection reads the raw frames, not this. */
.face-cam video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.face-cam__guide {
  position: absolute;
  inset: 12% 20% 16%;
  border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 50%;
  pointer-events: none;
  transition: border-color var(--dur) var(--ease-out);
}

.face-cam[data-state="face"] .face-cam__guide {
  border-style: solid;
  border-color: var(--brand);
}

.face-cam[data-state="progress"] .face-cam__guide,
.face-cam[data-state="done"] .face-cam__guide {
  border-style: solid;
  border-color: var(--ok);
}

.face-cam[data-state="warn"] .face-cam__guide {
  border-color: var(--danger);
}

.face-cam__prompt {
  min-height: 1.5em;
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}

/* Registration progress, one dot per captured sample. */
.face-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.face-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wash-3);
  transition: background var(--dur) var(--ease-out);
}

.face-dots span.is-on {
  background: var(--ok);
}

/* A registered face, or a placeholder when there is none. */
.face-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--wash-2);
  color: var(--ink-faint);
}

.face-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .ui-btn sets its own display, which beats the hidden attribute. The face
   pages show and hide buttons with it (Coba lagi). */
.ui-btn[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .face-cam__guide,
  .face-dots span {
    transition: none;
  }
}

/* Reading a QR with the back camera: no mirroring, and a square target. */
.face-cam--scan video {
  transform: none;
}

.face-cam--scan .face-cam__guide {
  inset: 16%;
  border-radius: var(--radius-lg);
}