/* ==========================================================================
   SCREEN BAR — the only control in the programme that changes what the hall
   sees. Sits at the top of Event HQ and every category page.
   ========================================================================== */
.sbar{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:176px minmax(0,1fr);gap:16px;align-items:center;
  padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 6px 18px #0a2a180d;font-family:var(--ui)}
.sbar-thumb{position:relative;width:176px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0b1a12;border:1px solid var(--line)}
.sbar-thumb iframe{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform:scale(.0917);transform-origin:0 0;pointer-events:none}
.sbar-main{min-width:0;display:flex;flex-direction:column;gap:8px}
.sbar-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.sbar-now .label{margin:0}
.sbar-now b{font:800 19px/1.2 var(--ui);color:var(--green-900)}
.sbar-now[data-mode="break"] b,.sbar-now[data-mode="holding"] b{color:var(--amber)}
.sbar-dots{display:flex;gap:14px;font:600 13px/1 var(--ui);color:var(--muted)}
.sbar-dots i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#C4CAC6;margin-right:6px;vertical-align:1px}
.sbar-dots .on i{background:#1E9A55;box-shadow:0 0 0 3px #1E9A5522}
.sbar-dots .on{color:var(--green-800)}
.sbar-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sbar .sbar-take{min-height:48px;font-size:15.5px;padding:0 20px}
.sbar .sbar-take.done{background:var(--green-50)!important;border:1.5px solid var(--green-100)!important;color:var(--green-800)!important;cursor:default}
.sbar-sep{flex:1}
.sbar .btn.on{background:var(--amber-wash);border-color:#E6C98A;color:var(--amber)}
.sbar .btn.mute.on{background:var(--stop);border-color:var(--stop);color:#fff}
.sbar-pop{position:absolute;z-index:60;margin-top:6px;display:flex;flex-direction:column;gap:10px;padding:14px;min-width:300px;background:#fff;border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow-2)}
.sbar-pop[hidden]{display:none}
.sbar-pop label{display:flex;flex-direction:column;gap:4px;font:700 12px/1.2 var(--ui);color:var(--muted)}
.sbar-wrap{position:relative}
.sbar-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sbar-presets button.on{background:var(--green-700)!important;border-color:var(--green-700)!important;color:#fff!important}
.sbar-ask{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r2);background:var(--gold-50);border:1.5px solid var(--gold-300);font:700 15px/1.35 var(--ui);color:var(--gold-800)}
.sbar-ask[hidden]{display:none}
.sbar-ask span{flex:1;min-width:220px}
.sbar-err{grid-column:1/-1;margin:0;padding:8px 12px;border-radius:var(--r1);background:var(--stop-wash);color:var(--stop);font:700 13.5px/1.35 var(--ui)}
.sbar-err:empty{display:none}
body[data-connected="0"] .sbar{box-shadow:inset 0 -4px 0 var(--stop)}
@media (max-width:760px){.sbar{grid-template-columns:1fr}.sbar-thumb{display:none}}