/* QR code is generated locally. The projector reserves its own side column. */
.participant-qr-code{display:block;background:#fff;line-height:0}
.participant-qr-code svg{display:block;width:100%;height:auto;aspect-ratio:1;max-width:none;background:#fff}
.participant-qr-trigger{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 50px;gap:2px;min-height:50px;width:50px;padding:3px;border:1px solid #fff;border-radius:7px;background:#fff;color:#102b2d;cursor:pointer}
.participant-qr-trigger>.participant-qr-code{width:36px;height:36px}
.participant-qr-trigger>span:last-child{font-size:9px;line-height:1;font-weight:800}
.app-body .topbar{position:sticky;top:0;z-index:102;gap:.7rem}
.app-body .topbar .brand{min-width:0;flex:1}
.app-body .topbar .brand strong{overflow-wrap:anywhere}
.app-body .topbar>strong{min-width:0;overflow-wrap:anywhere;flex:1}
.participant-qr-dialog{background:#fff;color:#102b2d;border:2px solid #1c5e4d;border-radius:18px;padding:20px;width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 30px);overflow-y:auto;box-shadow:0 14px 80px #0006}
.participant-qr-dialog::backdrop{background:#071d23c9}
.participant-qr-dialog-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.participant-qr-dialog-head h2{font-size:1.35rem;margin:0}
.participant-qr-close{flex:0 0 46px;min-height:46px;border:1px solid #a6bcb3;border-radius:10px;background:#e7efe8;color:#173a30;font-size:2rem;line-height:1;cursor:pointer}
.participant-qr-dialog .participant-qr-code{width:min(100%,360px);margin:16px auto}
.participant-qr-dialog p{text-align:center;line-height:1.4;margin:.8rem 0}
.participant-qr-short{display:block;font-weight:800;font-size:1.15rem;overflow-wrap:anywhere;line-height:1.25}
.participant-qr-wlan{font-weight:750}
.participant-qr-wlan[hidden]{display:none!important}
.qr-unavailable{line-height:1.4!important;font-size:.85rem;color:#14382b;padding:10px}
.monitor-body{--participant-qr-rail:300px;--participant-qr-size:240px}
.monitor-body .monitor-shell{width:calc(100% - var(--participant-qr-rail));margin-right:var(--participant-qr-rail);box-sizing:border-box;min-width:0}
.participant-qr-monitor{position:fixed;right:16px;bottom:16px;width:calc(var(--participant-qr-size) + 28px);padding:12px;background:#fff;color:#000;border:2px solid #fff;box-sizing:border-box;text-align:center;z-index:50;border-radius:4px;box-shadow:0 0 0 1px #cdd5ce}
.participant-qr-monitor>strong{display:block;font-size:20px;line-height:1.2;margin:0 0 5px;font-weight:850;color:#000}
.participant-qr-monitor .participant-qr-code{width:var(--participant-qr-size);margin:0 auto}
.participant-qr-monitor .participant-qr-short{font-size:18px;margin-top:6px}
.participant-qr-monitor .participant-qr-wlan{display:block;font-size:15px;line-height:1.25;margin-top:8px}
.participant-qr-monitor>small{display:block;font-size:12px;color:#333;margin-top:6px}
.monitor-body .monitor-header,.monitor-body .monitor-title{min-width:0;flex-wrap:wrap}
.monitor-body .monitor-title h2,.monitor-body .monitor-facts .current strong{overflow-wrap:anywhere}
.monitor-body .monitor-rank-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
.monitor-body .monitor-list table{table-layout:fixed;width:100%}
.monitor-body .monitor-list table th:first-child{width:48px}
.monitor-body .monitor-list table th:last-child{width:88px}
.monitor-body .monitor-list td{overflow-wrap:anywhere}
@media(max-width:1100px){
 .monitor-body{--participant-qr-rail:260px;--participant-qr-size:200px}
 .monitor-body .monitor-shell{padding:16px}
 .monitor-body .monitor-header h1{font-size:26px}
 .monitor-body .monitor-title h2{font-size:28px}
 .monitor-body .monitor-facts{grid-template-columns:1fr 1fr}
 .monitor-body .monitor-facts .current{grid-column:1/-1}
 .monitor-body .monitor-facts strong{font-size:30px}
 .participant-qr-monitor>strong{font-size:18px}
 .participant-qr-monitor .participant-qr-short{font-size:16px}
 .monitor-body .monitor-list table th:first-child{width:38px}
 .monitor-body .monitor-list table th:last-child{width:68px}
}
@media(max-width:760px){
 .app-body .topbar{gap:.4rem;min-height:60px}
 .app-body .topbar>.button{display:none}
 .app-body .participant-qr-trigger{flex-basis:44px;width:44px;min-height:48px}
 .app-body .participant-qr-trigger>.participant-qr-code{width:34px;height:34px}
 .participant-qr-dialog{padding:14px}
 .participant-qr-dialog-head h2{font-size:1.2rem}
 .monitor-body{--participant-qr-rail:230px;--participant-qr-size:170px}
 .monitor-body .monitor-rank-columns{grid-template-columns:1fr}
 .monitor-body .monitor-header h1{font-size:23px}
 .monitor-body .monitor-title h2{font-size:24px}
 .participant-qr-monitor{right:8px;bottom:8px}
}