Fix face selection: move checkbox below thumbnail, remove pointer-events hack

The overlaid checkbox had pointer-events:none so clicks fell through to
the photo link. Replaced with a real <input type=checkbox> rendered
below each face crop. Checkbox change events drive selection state;
clicking anywhere on the card except the photo link also toggles it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 16 insertions, 22 deletions

diff --git a/public/css/style.css b/public/css/style.css
index a549143..b907f0e 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -571,35 +571,29 @@ tr.delete-marked td { background: rgba(192,57,43,.08); }
 .person-detail-main,
 .person-page-main  { flex: 1; min-width: 0; }
 
-/* Selectable cards (photo grid and face grid) */
-.selectable-card,
-.selectable-face  { cursor: pointer; position: relative; }
-.selectable-card .thumb-wrap,
-.selectable-face .face-detail-thumb { position: relative; }
+/* Selectable photo cards (public person page) */
+.selectable-card { cursor: pointer; position: relative; }
+.selectable-card .thumb-wrap { position: relative; }
 .select-checkbox {
   position: absolute; top: 6px; left: 6px;
   width: 20px; height: 20px; border-radius: 4px;
-  border: 2px solid rgba(255,255,255,.7);
-  background: rgba(0,0,0,.35);
-  display: flex; align-items: center; justify-content: center;
-  opacity: 0; transition: opacity .12s;
-  pointer-events: none;
+  border: 2px solid rgba(255,255,255,.7); background: rgba(0,0,0,.35);
+  opacity: 0; transition: opacity .12s; pointer-events: none;
 }
-.selectable-card:hover .select-checkbox,
-.selectable-face:hover .select-checkbox  { opacity: 1; }
-.selectable-card.selected .select-checkbox,
-.selectable-face.selected .select-checkbox {
+.selectable-card:hover .select-checkbox { opacity: 1; }
+.selectable-card.selected .select-checkbox {
   opacity: 1; background: var(--accent); border-color: var(--accent);
 }
-.selectable-card.selected .select-checkbox::after {
-  content: ''; display: block;
-  width: 5px; height: 9px;
-  border: 2px solid #fff; border-top: none; border-left: none;
-  transform: rotate(45deg) translate(-1px, -1px);
+.selectable-card.selected .thumb-wrap img { opacity: .75; }
+.selectable-card.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
+
+/* Selectable face cards (admin cluster detail) */
+.selectable-face { cursor: pointer; }
+.face-cb {
+  display: block; margin: 5px auto 0; width: 16px; height: 16px;
+  cursor: pointer; accent-color: var(--accent);
 }
-.selectable-card.selected .thumb-wrap img,
-.selectable-face.selected .face-detail-thumb img { opacity: .75; }
-.selectable-card.selected,
+.selectable-face.selected .face-detail-thumb img { opacity: .72; }
 .selectable-face.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
 
 /* ── Admin upload ──────────────────────────────────────────────────────── */