/* Live Wall (Phase 1: no tags or side panel), from Avery's livewall.html and design-notes "Live view only mode". */
.lw{padding:0 32px 32px}
.strip{display:flex;gap:10px;flex-wrap:wrap;padding:6px 0 16px}
.strip .chip{background:#fff;box-shadow:var(--shadow);max-width:100%}
.strip .chip.warn{background:var(--hw-yellow)}
.lw-group h2{font-size:20px;font-weight:900;margin:6px 0 10px}
.lw-group + .lw-group{margin-top:18px}
.wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dot-on{background:var(--hw-green)}
.dot-off{background:#9A938F}
.dot-live{background:var(--hw-red)}

.cam{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:#3a3540;box-shadow:var(--shadow);color:var(--hw-ink)}
.cam .frame{position:absolute;inset:0;background:#3a3540 center/cover no-repeat}
.cam .frame.empty{background:linear-gradient(160deg,#5b5463,#3a3540)}
.cam.low{outline:4px solid var(--hw-yellow);outline-offset:-4px}
.cam.low .frame{filter:saturate(.55)}
.cam .live-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.cam .chip{position:absolute;z-index:2}
.cam .name{left:12px;top:12px;background:rgba(255,255,255,.95)}
.cam .meta{right:12px;top:12px;background:rgba(255,255,255,.95)}
.cam .live-badge{left:12px;top:52px;background:#fff}
.cam .mode{left:12px;bottom:12px;background:var(--hw-yellow);max-width:calc(100% - 24px)}
.mode .short{display:none}
.cam .frame-note{position:absolute;z-index:2;right:12px;bottom:12px;margin:0;padding:4px 10px;border-radius:var(--r-pill);
 background:rgba(255,255,255,.92);font-weight:800;font-size:12px}
.cam.playing .frame-note{display:none}
.cam-actions{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:48px 16px}
.cam.playing .cam-actions{justify-content:flex-end;padding-bottom:14px}
.btn-watch{min-height:44px;min-width:44px;padding:0 20px;border:0;border-radius:var(--r-pill);background:#fff;color:var(--hw-ink);
 font:900 16px var(--font);box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer}
.btn-watch:hover{background:var(--hw-cream)}
.btn-watch:disabled{opacity:.7;cursor:progress}
.cam-state,.cam-msg:not(:empty){margin:0;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.92);font-weight:800;font-size:14px;text-align:center}
.cam-msg:empty{display:none}
.cam.unavailable .frame{filter:grayscale(.6) brightness(.85)}

@media (max-width:900px){.wall{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
 .lw{padding:0 18px 24px}
 .strip{gap:6px}.strip .chip{font-size:12px;padding:5px 9px}
 .mode .long{display:none}.mode .short{display:inline}
 .cam{aspect-ratio:4/3}
 .cam .frame-note{font-size:11px}
 .cam:has(.mode) .frame-note{bottom:50px}
 .cam-actions{padding:48px 12px 56px}
}