/* Common BadgeUi component, delivered byte-for-byte in Flow and Hub. */
.tf-badge-reader{--badge-color:#dc2626;--badge-rgb:220,38,38;display:flex;align-items:center;justify-content:center;gap:1rem;min-width:0;padding:1.25rem;margin:1rem 0;border:1px solid #fecaca;border-radius:14px;background:#fff1f2;color:#7f1d1d;text-align:left;box-sizing:border-box}
.tf-badge-reader[data-badge-device=physical]{--badge-color:#2563eb;--badge-rgb:37,99,235;border-color:#bfdbfe;background:#eff6ff;color:#17365d}
.tf-badge-reader [data-badge-status]{font:600 .95rem/1.5 system-ui,sans-serif;overflow-wrap:anywhere}
.tf-badge-orbit{position:relative;display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:50%;color:var(--badge-color);background:#fff;box-shadow:0 0 0 8px rgba(var(--badge-rgb),.08)}
.tf-badge-orbit::before,.tf-badge-orbit::after{content:"";position:absolute;inset:-8px;border:3px solid currentColor;border-radius:50%;opacity:.34;pointer-events:none}
.tf-badge-orbit::after{opacity:0}
.tf-badge-orbit svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tf-badge-mark{position:absolute;right:-3px;bottom:-3px;min-width:17px;border-radius:50%;color:#fff;background:var(--badge-color);font:700 14px/18px system-ui,sans-serif;text-align:center}
.tf-badge-mark:empty{display:none}
.tf-badge-reader[data-badge-state=recognized]{--badge-color:#15803d;border-color:#bbf7d0;background:#f0fdf4;color:#14532d}
.tf-badge-reader[data-badge-state=refused]{--badge-color:#b91c1c;border-color:#fecaca;background:#fef2f2;color:#7f1d1d}
.tf-badge-reader[data-badge-state=unavailable]{--badge-color:#64748b;border-color:#cbd5e1;background:#f8fafc;color:#334155}
.tf-badge-reader[data-badge-active=true][data-badge-state=waiting]{border-color:var(--badge-color);animation:tf-badge-frame 2.4s ease-in-out infinite}
.tf-badge-reader[data-badge-active=true][data-badge-state=waiting] .tf-badge-orbit{animation:tf-badge-pulse 2.4s ease-in-out infinite}
.tf-badge-reader[data-badge-active=true][data-badge-state=waiting] .tf-badge-orbit::before,.tf-badge-reader[data-badge-active=true][data-badge-state=waiting] .tf-badge-orbit::after{animation:tf-badge-wave 2.4s ease-out infinite}
.tf-badge-reader[data-badge-active=true][data-badge-state=waiting] .tf-badge-orbit::after{animation-delay:-1.2s}
.tf-badge-reader[data-badge-active=true][data-badge-state=waiting] .tf-badge-orbit svg{animation:tf-badge-hover 2.4s ease-in-out infinite}
.tf-badge-reader[data-badge-active=true][data-badge-state=reading] .tf-badge-orbit{animation:tf-badge-pulse 1.4s ease-in-out infinite}
@keyframes tf-badge-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 8px rgba(var(--badge-rgb),.13),0 0 18px rgba(var(--badge-rgb),.13)}50%{transform:scale(1.17);box-shadow:0 0 0 18px rgba(var(--badge-rgb),.24),0 0 42px rgba(var(--badge-rgb),.32)}}
@keyframes tf-badge-wave{0%{transform:scale(.86);opacity:.72}76%,100%{transform:scale(2.04);opacity:0}}
@keyframes tf-badge-hover{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes tf-badge-frame{0%,100%{box-shadow:0 0 0 1px rgba(var(--badge-rgb),.09)}50%{box-shadow:0 0 0 5px rgba(var(--badge-rgb),.19)}}
@media(prefers-reduced-motion:reduce){.tf-badge-reader,.tf-badge-reader .tf-badge-orbit,.tf-badge-reader .tf-badge-orbit::before,.tf-badge-reader .tf-badge-orbit::after,.tf-badge-reader .tf-badge-orbit svg{animation:none!important;transform:none!important}}
@media(max-width:420px){.tf-badge-reader{padding:1rem;gap:.75rem}.tf-badge-orbit{flex-basis:46px;width:46px;height:46px}}
.tf-badge-reader[data-badge-state="waiting"][tabindex]:focus-visible{outline:2px solid var(--primary,#187db5);outline-offset:4px;border-radius:12px}
.tf-badge-reader [data-badge-provenance]{display:block;color:#925500;font-weight:600;font-size:.82rem}
.tf-badge-debug-dialog{box-sizing:border-box;width:min(460px,calc(100vw - 32px));border:1px solid #cdd7df;border-radius:16px;padding:24px;color:#243642;background:#fff;box-shadow:0 20px 65px #152a4330}
.tf-badge-debug-dialog::backdrop{background:#10223666}
.tf-badge-debug-dialog h3{margin:0 0 12px;font-size:1.2rem}
.tf-badge-debug-dialog label{display:grid;gap:8px;font-weight:600}
.tf-badge-debug-dialog select{box-sizing:border-box;width:100%;min-height:44px;padding:8px;border:1px solid #becbd5;border-radius:8px;background:#fff;color:inherit}
.tf-badge-debug-label{color:#925500;background:#fff7e7;padding:10px;border-radius:8px;font-size:.88rem}
.tf-badge-debug-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px}
.tf-badge-debug-actions button{border:1px solid #bdcbd5;border-radius:8px;padding:10px 16px;background:#fff;color:inherit;cursor:pointer}
.tf-badge-debug-actions button:last-child{background:#177db5;color:#fff;border-color:#177db5}
.tf-badge-debug-actions button:disabled{opacity:.55;cursor:default}