.face-canvas { position: relative; width: 100%; background: #292722; border-radius: .5rem; overflow: hidden; }
.face-canvas-image { display: block; width: 100%; height: auto; }
.face-marker { position: absolute; border: 3px solid #f7cf52; border-radius: 50%; background: transparent; padding: 0; cursor: pointer; min-width: 8px; min-height: 8px; box-shadow: 0 0 0 1px #292722; }
.face-marker span { position: absolute; left: 50%; top: -1.4rem; transform: translateX(-50%); background: #f7cf52; color: #292722; border-radius: .2rem; font-size: 12px; font-weight: 700; padding: 0 .3rem; }
.face-marker:focus-visible { outline: 4px solid white; outline-offset: 3px; }
.face-marker-ignored { border-style: dashed; opacity: .65; }
.face-fields { display: grid; gap: 1rem; margin-top: 1rem; }
.face-field { border: 1px solid #d8d0c3; border-radius: .5rem; padding: .8rem; min-width: 0; }
.face-field-selected { outline: 2px solid #9a753e; background: #f7f0df; }
.face-input-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.face-input-grid label { display: block; font-size: .75rem; margin-bottom: .3rem; }
.face-input-grid input, .face-input-grid select, .face-count-select { width: 100%; border: 1px solid #c7bead; border-radius: .35rem; background: #fffdf8; padding: .6rem; color: #332e26; }
.face-error { border: 1px solid #bd625c; border-radius: .35rem; padding: .75rem; color: #853730; background: #fff2ef; }
.face-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #ded8cc; padding-top: .75rem; }
.people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.people-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.people-placeholder { display: grid; place-items: center; font-size: 3rem; background: #e9e1d2; color: #84775f; }
@media (max-width: 640px) { .face-input-grid { grid-template-columns: 1fr; } .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .face-fields + div input[type="submit"] { width: 100%; } }

.face-marker-selected { border-color: white; box-shadow: 0 0 0 3px #9a753e; z-index: 1; }
.face-marker-selected span { background: white; }
.face-navigation { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.face-navigation[hidden], .face-field[hidden] { display: none; }
.face-navigation button:disabled { opacity: .45; cursor: default; }

/* Photo review queue follows the archive's compact cards and brass controls. */
.analysis-page-header, .analysis-run-panel, .analysis-done-panel { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.analysis-run-form { display: flex; align-items: end; gap: .65rem; flex-wrap: wrap; }
.analysis-run-form select[name="era_id"] { max-width: 14rem; }
.analysis-label { display: block; margin-bottom: .3rem; font-size: .7rem; font-weight: 600; color: #786b5b; }
.analysis-input { width: 100%; min-width: 0; padding: .55rem .65rem; border: 1px solid #d4cab9; border-radius: .375rem; background: #fffdf8; color: #332e26; font-size: .8rem; }
.analysis-input:focus-visible { outline: 2px solid #9a753e; outline-offset: 2px; }
.analysis-filters { display: grid; grid-template-columns: minmax(10rem, 2fr) minmax(7rem, 1.2fr) repeat(3, minmax(6rem, 1fr)) auto; align-items: end; gap: .75rem; }
.analysis-results-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.analysis-progress-counts { display: flex; gap: 1rem; }
.analysis-list-heading { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 11rem; gap: 1.25rem; padding: .65rem 1rem; background: #f5f0e7; border-bottom: 1px solid #e4dacb; color: #786b5b; font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.analysis-row { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 11rem; align-items: center; gap: 1.25rem; padding: .9rem 1rem; }
.analysis-row + .analysis-row { border-top: 1px solid #e9e0d3; }
.analysis-row:hover { background: #fffdf7; }
.analysis-photo-cell { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.analysis-thumbnail { width: 5rem; height: 4rem; flex: 0 0 5rem; border-radius: .3rem; overflow: hidden; background: #eee6d8; display: grid; place-items: center; }
.analysis-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.analysis-filename { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #332e26; font-size: .85rem; font-weight: 600; }
.analysis-filename:hover { text-decoration: underline; }
.analysis-filepath { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #978977; font-size: .65rem; margin-top: .15rem; }
.analysis-row-labels { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.analysis-status { display: inline-block; padding: .1rem .4rem; border-radius: .2rem; background: #f0eadf; color: #786b5b; font-size: .6rem; font-weight: 600; }
.analysis-status-completed { background: #e9eee2; color: #516243; }
.analysis-status-processing, .analysis-status-queued { background: #f6edce; color: #8c7135; }
.analysis-status-failed, .analysis-status-skipped { background: #f5e5df; color: #995a45; }
.analysis-review-label { font-size: .65rem; color: #897962; }
.analysis-faces-cell { font-size: .8rem; color: #514735; line-height: 1.7; }
.analysis-unidentified { color: #976629; }
.analysis-person-names { font-size: .7rem; color: #786b5b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analysis-row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: .4rem; }
.analysis-row-actions .btn { padding: .4rem .55rem; font-size: .7rem; }
.analysis-text-action { color: #897962; font-size: .65rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.analysis-row-error { color: #995a45; font-size: .7rem; margin-top: .3rem; }
.analysis-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
@media (max-width: 900px) { .analysis-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .analysis-search { grid-column: 1 / -1; } .analysis-list-heading { display: none; } .analysis-row { grid-template-columns: minmax(0, 1fr) 10rem; gap: .65rem 1rem; } .analysis-photo-cell { grid-column: 1 / -1; } .analysis-faces-cell { padding-left: 5.85rem; } }
@media (max-width: 480px) { .analysis-row { padding: .75rem; grid-template-columns: minmax(0, 1fr); } .analysis-faces-cell { padding-left: 0; } .analysis-row-actions { justify-content: start; } .analysis-run-form { width: 100%; } .analysis-run-form > div:first-child { flex: 1; } .analysis-run-form select[name="era_id"] { max-width: none; } }

.face-person-grid { grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr); }
.face-autocomplete { position: relative; }
.face-suggestions { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; max-height: 14rem; overflow-y: auto; padding: .3rem; border: 1px solid #c7bead; border-radius: .35rem; background: #fffdf8; box-shadow: 0 4px 12px #332e2620; }
.face-suggestions li { padding: .5rem .65rem; font-size: .85rem; cursor: pointer; border-radius: .2rem; }
.face-suggestions li:hover, .face-suggestions li[aria-selected="true"] { background: #f7f0df; color: #332e26; }
.face-save-status { margin-top: 1rem; font-size: .8rem; color: #786b5b; min-height: 1.5rem; }
.face-field:disabled { opacity: .7; }
@media (max-width: 640px) { .face-person-grid { grid-template-columns: 1fr; } }
.face-drawing-layer { position: absolute; inset: 0; z-index: 5; cursor: crosshair; touch-action: none; }
.face-drawing-layer[hidden] { display: none; }
.face-manual-selection { pointer-events: none; border-color: white; background: rgb(247 207 82 / .12); }
.face-landmark { position: absolute; transform: translate(-50%, -50%); border: 1px solid white; border-radius: 50%; background: #292722; color: white; font-size: 10px; line-height: 16px; width: 18px; text-align: center; pointer-events: none; }
.face-drawing-controls { position: sticky; top: 0; z-index: 6; background: var(--color-parchment, #f3eee5); padding: .75rem; border: 1px solid #c9bda8; border-radius: .5rem; }