/* Nametag Tracker: tool-only styles, built on the shared tokens. */

/* The tag can be dragged on the preview to fine-tune its offset. */
#preview.nt-hover { cursor: grab; }
#preview.nt-dragging { cursor: grabbing; }

/* Tracking overlay: sits exactly on top of the preview canvas, never part of an export. */
.preview-stage canvas.nt-debug {
  position: absolute; max-width: none; max-height: none;
  border-radius: 6px; box-shadow: none; background: transparent; pointer-events: none;
}

.nt-status { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.nt-status strong { color: var(--text); font-weight: 600; }
.nt-status.is-warn { color: var(--text); padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); }
.nt-meter { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 6px; }
.nt-meter > div { height: 100%; background: var(--accent); }

/* People list: face thumbnail, track id, name, show toggle. */
.nt-people { display: flex; flex-direction: column; gap: 4px; }
.nt-person {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; min-width: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.nt-person:hover { background: var(--surface-2); }
.nt-person.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.nt-person.is-off .nt-person-name { opacity: .5; }
.nt-person:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nt-thumb { width: 36px; height: 36px; flex: none; border-radius: 6px; object-fit: cover; background: var(--surface-2); display: inline-block; }
.nt-id { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; font: 700 12px var(--font-mono); color: #111; background: var(--id); }
.nt-person-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nt-person-name strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-person-name small { font-size: 11px; color: var(--text-muted); }
.nt-person-toggle { flex: none; }
.nt-editing { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.nt-editing strong { color: var(--text); }
.nt-fix { display: flex; flex-direction: column; gap: 8px; }
.nt-fix:empty { display: none; }
.nt-fix-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.nt-fix-row select { flex: 1; min-width: 0; }