/* Face Lock — the page is the shared composition layer (styles/components/
   form.css + uploader.css): an uploader that collapses into a file row, then
   one card per stage, every video / frame on a styles/components/preview.css
   stage. Only the timeline, the face list, the progress block and a few text
   styles are the page's own; every class here is
   prefixed fl- (this tool's own layer never bleeds into styles/, per the
   repo's F4 dependency rule). */

/* ---------- intro ---------- */

.fl-prose {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.fl-prose strong { color: var(--text-dim); font-weight: 600; }

/* ---------- person picker ---------- */

/* The picker stage is styles/components/preview.css (dark, full width). The
   drawn frame is letterboxed inside the canvas box for tall videos; the
   click handler in app.js maps through the same object-fit geometry. */
.fl-stage__canvas { cursor: crosshair; }

.fl-face-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.fl-face-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border: 1px solid var(--sep);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.fl-face-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.fl-face-option__note { font-size: 12px; color: var(--text-muted); }

/* ---------- captions + help ---------- */

.fl-caption {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
}
.fl-caption__note { font-weight: 400; }

.fl-help {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Prose values (audio status) read in the UI face, not the mono value face. */
.fl-text-value { font-family: var(--sans); }

/* ---------- progress ---------- */

.fl-progress__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.fl-progress__detail {
  min-height: 1.45em;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- timeline ---------- */

.fl-timeline {
  display: block;
  width: 100%;
  height: 28px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}