/* The face element. One class, three portals, because a face that is 34px and
   round in one list and 30px and square in another reads as two different
   things — and the thing it has to read as is "this is who that is". */
.jc-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* The ring is what keeps a dark photo from bleeding into a dark row and a
     pale one from vanishing into a white card. */
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
  vertical-align: middle;
}

/* Square variant, for the profile header where the face sits beside a block
   of text and a circle crops too much of it away. */
.jc-face.jc-face-sq { border-radius: 14px; }

/* Tappable — used where the face itself is the button that takes a new one. */
.jc-face-btn { cursor: pointer; }
.jc-face-btn:hover { box-shadow: inset 0 0 0 2px rgba(15, 23, 42, 0.3); }

/* The offer to take one. Deliberately quiet: on a list of forty children with
   no photos yet, forty loud buttons is a screen nobody can read past. */
.jc-face-add {
  border: 1px dashed #94a3b8;
  background: #f8fafc;
  color: #475569;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
}
.jc-face-add:hover { border-color: #0e7490; color: #0e7490; background: #ecfeff; }

/* The same offer sitting on a roster row, where it has a name beside it and
   forty siblings down the page. Quieter still than .jc-face-add, and an icon
   rather than a sentence: the row already says whose face is missing, because
   it is showing initials where every other row shows a photo. */
.row-face-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 26px;
  height: 26px;
  border: 1px dashed #94a3b8;
  border-radius: 999px;
  background: #f8fafc;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.row-face-add:hover { border-color: #0e7490; background: #ecfeff; }

/* How many faces are still missing here, and a way to get at just those. The
   count is the point: without it "a photo of every child" is nobody's job and
   the set stays at whoever happened to walk past a scanner. */
.face-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #92400e;
  border-radius: 10px;
  font-size: 0.84rem;
}
/* Nothing left to do reads as done, not as another warning. */
.face-bar.done {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #065f46;
}
.face-bar-btn {
  border: 1px solid #d97706;
  background: #fff;
  color: #92400e;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.face-bar-btn.on { background: #92400e; color: #fff; }

/* Confirm sheet: the shot the camera just took, before it is saved. Taking a
   photo of the wrong child is the mistake this prevents, and it is the one
   that is expensive — the wrong face on a row sends somebody to the wrong
   child at a door. */
.jc-shot-wrap { text-align: center; }
.jc-shot {
  width: 180px; height: 180px; border-radius: 18px; object-fit: cover;
  border: 1px solid #e2e8f0; background: #f1f5f9;
}
.jc-shot-row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

/* A face that has a photo behind it is a control: it opens the picture big.
   zoom-in rather than pointer, because what it opens is the same thing you
   are already looking at, only large enough to check. Faces still showing
   initials never get this — a control that opens nothing is how people learn
   the face is not a control, including on the rows where it is. */
.jc-face-open { cursor: zoom-in; }
.jc-face-open:focus-visible { outline: 2px solid #0e7490; outline-offset: 2px; }

/* ── THE PHOTO, BIG ──
   Above everything: this opens from inside modals (admin, z-index 4100),
   bottom sheets (counselor, 400) and toasts (9000), and a viewer that lands
   behind the thing it was opened from reads as a tap that did nothing. */
.jc-face-viewer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(2, 6, 23, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.jc-face-viewer-card { text-align: center; max-width: 100%; }
/* Square, and never taller than the screen it is on: this gets opened on a
   phone at a school gate more often than on a desk. */
.jc-face-viewer-shot {
  width: min(78vw, 78vh, 560px);
  height: min(78vw, 78vh, 560px);
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 0.9rem;
  padding: 12px;
}
.jc-face-viewer-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-face-viewer-name {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 14px;
}
.jc-face-viewer-close {
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 8px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.jc-face-viewer-close:hover { background: rgba(255, 255, 255, 0.12); }