/* Usability layer styles (ux.js). Colors come from app.css tokens. No inline style attributes (CSP style-src 'self'). */
.ux-qr-button{background:none;border:0;color:var(--teal);font:inherit;font-size:13px;cursor:pointer;padding:0}
.ux-qr-dialog .ux-qr-image{display:grid;place-items:center;padding:12px 0}
.ux-qr-dialog svg{width:min(70vw,300px);height:auto;background:#fff}
.ux-qr-url{word-break:break-all}
.ux-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:min(92vw,560px);background:var(--navy);color:#fff;border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);font-size:14px}
.ux-toast .button{min-height:34px;padding:6px 12px}
.ux-toast .text-button{color:#fff}
.ux-chips{display:flex;gap:8px;flex-wrap:wrap}
.ux-chip{text-decoration:none}
.ux-next{border-top:1px solid var(--line);margin-top:22px;padding-top:16px}
.ux-next h2{font-size:20px;margin:0 0 12px}
.ux-related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ux-related .card{margin-top:0;padding:18px}
.ux-related h3{font-size:16px;margin:0 0 6px}
.ux-related-title{font-size:14px;margin:18px 0 10px;color:var(--muted)}
.ux-problem-list{padding-left:18px}
.ux-ok{color:var(--muted)}
.ux-jobs{margin-top:18px}
.ux-job-list{padding-left:20px;line-height:1.9}
.ux-pattern{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}
.ux-pattern h2{font-size:18px;margin:0 0 8px}
@media(max-width:800px){.ux-related{grid-template-columns:1fr}}