/* Connection feedback is independent of badge identity verification. */
.tf-badge-reader[data-hc-connected=true]:is([data-badge-state=waiting],[data-badge-state=unavailable]){--badge-color:#2563eb;--badge-rgb:37,99,235;border-color:#bfdbfe;background:#eff6ff;color:#17365d}
.tf-badge-reader[data-hc-connected=false]:is([data-badge-state=waiting],[data-badge-state=unavailable]){--badge-color:#dc2626;--badge-rgb:220,38,38;border-color:#fecaca;background:#fff1f2;color:#7f1d1d}
.tf-badge-reader[data-hc-connected=unknown]:is([data-badge-state=waiting],[data-badge-state=unavailable]){--badge-color:#64748b;--badge-rgb:100,116,139;border-color:#cbd5e1;background:#f8fafc;color:#475569}
.hc-reader-connection{display:block;margin:.5rem 0;font:500 .82rem/1.4 system-ui,sans-serif;color:#475569}
.hc-browser-association-label{min-width:0;overflow-wrap:anywhere}
.attendance-auth-badge:has([data-hc-connected=true]){border-color:#2563eb;background:#f7faff;box-shadow:0 7px 20px #2563eb14}
.attendance-auth-badge:has([data-hc-connected=false]){border-color:#dc2626;background:#fffafa;box-shadow:0 7px 20px #dc262614}
.attendance-auth-badge:has([data-hc-connected=unknown]){border-color:#cbd5e1;background:#f8fafc;box-shadow:none}
.attendance-unified-badge:has([data-hc-connected=true]){border:1px solid #2563eb;border-radius:12px}
.attendance-unified-badge:has([data-hc-connected=false]){border:1px solid #dc2626;border-radius:12px}
.attendance-unified-badge:has([data-hc-connected=unknown]){border:1px solid #cbd5e1;border-radius:12px}
.attendance-auth-badge [data-hc-connected=true]:is([data-badge-state=waiting],[data-badge-state=unavailable]) .tf-badge-orbit,.attendance-unified-badge [data-hc-connected=true]:is([data-badge-state=waiting],[data-badge-state=unavailable]) .tf-badge-orbit{background:#e1ecff;box-shadow:0 0 0 12px #d8e7ff}
.attendance-auth-badge [data-hc-connected=false]:is([data-badge-state=waiting],[data-badge-state=unavailable]) .tf-badge-orbit,.attendance-unified-badge [data-hc-connected=false]:is([data-badge-state=waiting],[data-badge-state=unavailable]) .tf-badge-orbit{background:#fff1f2;box-shadow:0 0 0 12px #fee2e2}
.attendance-auth-badge [data-hc-connected=unknown]:is([data-badge-state=waiting],[data-badge-state=unavailable]) .tf-badge-orbit,.attendance-unified-badge [data-hc-connected=unknown]:is([data-badge-state=waiting],[data-badge-state=unavailable]) .tf-badge-orbit{background:#f1f5f9;box-shadow:0 0 0 12px #e2e8f0}
.attendance-public-modal .attendance-unified-badge [data-hc-connected=true]:is([data-badge-state=waiting],[data-badge-state=unavailable]) .tf-badge-orbit{box-shadow:0 0 0 16px #dce9ff99}
.attendance-public-modal .attendance-unified-badge [data-hc-connected=false]:is([data-badge-state=waiting],[data-badge-state=unavailable]) .tf-badge-orbit{box-shadow:0 0 0 16px #fee2e299}
.attendance-public-modal .attendance-unified-badge [data-hc-connected=unknown]:is([data-badge-state=waiting],[data-badge-state=unavailable]) .tf-badge-orbit{box-shadow:0 0 0 16px #e2e8f099}
[data-hc-reader-status][data-hc-connected=true]{color:#2563eb;background:#eff6ff;border-color:#bfdbfe}
[data-hc-reader-status][data-hc-connected=unknown]{color:#475569;background:#f8fafc;border-color:#cbd5e1}
/* A connected enrollment reader breathes even while secure enrollment is unavailable. */
.tf-badge-reader[data-hc-connected=true][data-badge-state=unavailable] .tf-badge-orbit::before{animation:hc-badge-connected-pulse 2.4s ease-in-out infinite}
@keyframes hc-badge-connected-pulse{0%,100%{transform:scale(1);opacity:.34}50%{transform:scale(1.23);opacity:.16}}