/* videowall wow module styles */
/* MODULE THEME TOKENS (CJ 10/13 polish). Module-only accents on top of style.css's theme tokens. Dark values = the original literals, so dark is
   unchanged; html[data-theme="light"] swaps them. --m-hi / --m-ink2 / --m-red-ink alias the core's --ink-hi / --ink2 / --red-ink. */
:root{--m-hi:var(--ink-hi,#fff);--m-ink2:var(--ink2,#b6cfdd);--m-wash:rgba(255,255,255,.025);--m-wash2:rgba(255,255,255,.05);--m-well:rgba(0,0,0,.4);--m-solid:rgba(4,8,13,.96);--m-redglass:rgba(18,2,6,.92);--m-dim:rgba(1,5,10,.7);
  --m-pink:#ff5c8a;--m-pink2:#ffa6c0;--m-red-ink:var(--red-ink,#ffc9ce);--m-red-hi:#ff8a94;--m-amber-ink:#ffd08a;--m-amber:#ffb020;--m-gold:#ffd166;--m-ok-ink:#b8ffe0;--m-ok-hi:#e6fff4;--m-radio:#ff9ff3;--m-lime:#c6ff4d;
  --m-shadow:0 0 24px rgba(0,0,0,.5)}
html[data-theme="light"]{--m-hi:var(--ink-hi,#06121b);--m-ink2:var(--ink2,#2e4757);--m-wash:rgba(255,255,255,.55);--m-wash2:rgba(0,86,124,.06);--m-well:rgba(0,40,70,.07);--m-solid:rgba(250,252,253,.97);--m-redglass:rgba(255,245,246,.96);--m-dim:rgba(18,30,40,.4);
  --m-pink:#c2185b;--m-pink2:#a3124b;--m-red-ink:var(--red-ink,#9c1422);--m-red-hi:#c01b2b;--m-amber-ink:#7a4a00;--m-amber:#9a5c00;--m-gold:#8a6400;--m-ok-ink:#0a5e3e;--m-ok-hi:#0c3a28;--m-radio:#a3149a;--m-lime:#4d7a00;
  --m-shadow:0 6px 22px rgba(20,40,60,.16)}
/* MODULE BUTTON LANGUAGE (CJ 10/13 polish): the modules' own small buttons press like the core .btn (1px travel), and every close X gets a hover */
:is(.hq-ib,.hq-lnk,.hq-b-set,.hq-opt,.hq-r,.alc-b2,.alc-x,.alc-sev button,.sx-btn,.sx-lb button,.sx-tog button,.nr-fly,.nr-art,.nr-x,.nr-stories,.qs-b,.stx-copy,.stx-moreb,.stx-pins button,.exw-on,.exw-nh button,.rd-acts button,.rd-chips button,.wv-x,.inc-x,.inc-b,.vw-btns button,.sim-go>button,.sim-hint button,.uap-share,#nhi-d .nl button,#nhi-d .bx):active:not(:disabled){transform:translateY(1px)}
.wv-x:hover,#nhi-d .bx:hover{border-color:var(--cy);color:var(--m-hi);background:var(--cy-bg)}
@media (prefers-reduced-motion:reduce){:is(.hq-ib,.hq-lnk,.hq-b-set,.hq-opt,.hq-r,.alc-b2,.alc-x,.alc-sev button,.sx-btn,.sx-lb button,.sx-tog button,.nr-fly,.nr-art,.nr-x,.nr-stories,.qs-b,.stx-copy,.stx-moreb,.stx-pins button,.exw-on,.exw-nh button,.rd-acts button,.rd-chips button,.wv-x,.inc-x,.inc-b,.vw-btns button,.sim-go>button,.sim-hint button,.uap-share,#nhi-d .nl button,#nhi-d .bx):active:not(:disabled){transform:none}}
/* DARK ISLANDS: things that are physically dark in both themes (CRT tiles, the storm labels on the globe) keep the dark token set in light mode */
html[data-theme="light"] :is(.vw-tile,.wxx-l){--ink:#d6ecf7;--dim:#6f8da1;--faint:#2a4153;--mute:#6f8da1;--cy:#39d0ff;--cy2:#8be9ff;--line:rgba(57,208,255,.22);--line2:rgba(57,208,255,.1);--glass:rgba(4,12,20,.78);--glass2:rgba(6,18,30,.9);
  --warn:#ffb347;--red:#ff3b4a;--red2:#ff6b7a;--ok:#4dffb8;--panel:rgba(2,8,14,.6);--panel2:rgba(1,6,11,.82);--on-accent:#02050a;--m-hi:#fff;--m-ink2:#b6cfdd;--m-red-ink:#ffc9ce;--m-wash:rgba(255,255,255,.025);--m-wash2:rgba(255,255,255,.05)}
#vw{position:fixed;z-index:15;left:var(--g);right:var(--g);top:calc(var(--topy) + var(--toph) + 10px);bottom:calc(var(--botb) + 6px);display:flex;flex-direction:column;gap:8px;background:var(--m-solid);border:1px solid var(--line);padding:8px;box-shadow:var(--shadow),inset 0 0 0 1px color-mix(in srgb,var(--cy) 5%,transparent)}
#vw[hidden]{display:none}
#vw.dock{left:auto;right:var(--g);top:auto;bottom:calc(var(--botb) + var(--both) + 10px);width:min(640px,46vw);height:min(400px,50vh);padding:6px;gap:6px}
body.r-open #vw.dock{right:calc(var(--rw) + var(--g) * 2)}
.vw-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;flex:none;font-size:10.5px;letter-spacing:.14em;color:var(--dim)}
.vw-title{display:flex;align-items:center;gap:8px;color:var(--ink)}
.vw-title b{font:700 15px var(--hd);letter-spacing:.3em;color:var(--m-hi)}
.vw-title em{font-style:normal;color:var(--cy);letter-spacing:.2em}
.vw-seg{display:flex;gap:0}.vw-seg .btn{border-right-width:0}.vw-seg .btn:last-child{border-right-width:1px}
.vw-sel{display:flex;align-items:center;gap:6px}
.vw-sel select{background:color-mix(in srgb,var(--cy) 6%,transparent);color:var(--cy2);border:1px solid var(--line);font:inherit;padding:3px 4px}
.vw-warn{color:var(--on-accent);background:var(--warn);padding:2px 8px;font-weight:700;letter-spacing:.14em}
.vw-info{color:var(--dim);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 140px;text-align:right}
.vw-end{display:flex;gap:6px}
#vw.dock .vw-adv,#vw.dock .vw-info,#vw.dock .vw-title em{display:none}
#vw.dock .vw-bar{gap:4px 8px}
.vw-grid{flex:1;min-height:0;display:grid;gap:8px;grid-template-columns:repeat(var(--vw-c,2),minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
.vw-grid[data-n="1"]{--vw-c:1}.vw-grid[data-n="4"]{--vw-c:2}.vw-grid[data-n="9"]{--vw-c:3}
.vw-grid[data-n="2"]{--vw-c:2}
.vw-grid.focus{grid-template-columns:minmax(0,1fr) clamp(170px,22vw,280px);grid-template-rows:repeat(var(--vw-small,1),minmax(0,1fr))}
.vw-grid.focus .vw-tile.big{grid-column:1;grid-row:1/-1}
.vw-grid.focus .vw-tile:not(.big){grid-column:2}
#vw.dock .vw-grid{gap:4px}

/* CRT bezel */
.vw-tile{position:relative;min-width:0;min-height:0;padding:7px;border-radius:14px;background:linear-gradient(145deg,#1c2a36,#0a1118 45%,#18242e);border:1px solid color-mix(in srgb,var(--cy) 28%,transparent);box-shadow:0 4px 14px rgba(0,0,0,.7),inset 0 1px 0 var(--m-wash2),inset 0 0 12px #000;cursor:pointer;outline-offset:1px}
.vw-tile:hover{border-color:var(--cy)}
.vw-tile.big{border-color:var(--cy);box-shadow:0 0 18px color-mix(in srgb,var(--cy) 30%,transparent),inset 0 0 12px #000}
.vw-tile.aud::after{content:"";position:absolute;right:12px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);z-index:6}
#vw.dock .vw-tile{padding:4px;border-radius:9px}
.vw-screen{position:absolute;inset:7px;border-radius:9px/11px;overflow:hidden;background:#000;box-shadow:inset 0 0 28px rgba(0,0,0,.9)}
#vw.dock .vw-screen{inset:4px;border-radius:6px}
.vw-view{position:absolute;inset:0;pointer-events:none}
.vw-view .player{position:absolute;inset:0;margin:0;aspect-ratio:auto;border:0;background:#000}
.vw-view .vwrap video,.vw-view .vwrap img{object-fit:cover!important}
.vw-view video::-webkit-media-controls{display:none!important}
.vw-view .live{display:none}
.vw-view .ovl{display:none}
.vw-crt{position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(0,0,0,.55) 100%),repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.22) 3px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cy) 12%,transparent)}
body[data-fx="full"] .vw-tile[data-st="live"] .vw-crt{animation:vwflick 5s infinite steps(1)}
@keyframes vwflick{0%,92%,100%{opacity:1}93%{opacity:.82}94%{opacity:1}97%{opacity:.9}}

.vw-hud{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:9.5px;letter-spacing:.16em;color:var(--m-hi);background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);pointer-events:none;text-shadow:0 0 4px #000}
.vw-recd{display:flex;align-items:center;gap:5px;color:var(--m-red-ink);font-weight:700}
.vw-tile:not([data-st="live"]) .vw-recd i{animation:none;background:#5a2a30;box-shadow:none}
.vw-recd,.vw-no,.vw-type{white-space:nowrap;flex:none}.vw-no{color:var(--cy2)}.vw-type{border:1px solid color-mix(in srgb,var(--cy) 50%,transparent);padding:0 5px;color:var(--cy2)}
.vw-src{margin-left:auto;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vw-chy{position:absolute;left:0;right:0;bottom:0;z-index:4;display:grid;grid-template-columns:1fr auto;gap:1px 10px;padding:16px 10px 7px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);pointer-events:none;font-size:10px;letter-spacing:.12em;color:var(--ink);text-shadow:0 0 4px #000}
.vw-name{grid-column:1/-1;font:700 14px var(--hd);letter-spacing:.14em;color:var(--m-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--red);padding-left:7px}
.vw-loc{color:var(--cy2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vw-clk{color:var(--dim);text-align:right;white-space:nowrap}
.vw-note{grid-column:1/-1;color:var(--warn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vw-note:empty{display:none}
.vw-btns{position:absolute;right:6px;top:26px;z-index:5;display:flex;flex-direction:column;gap:3px;opacity:0;transition:.15s}
.vw-tile:hover .vw-btns,.vw-tile:focus-within .vw-btns,.vw-tile.big .vw-btns{opacity:1}
.vw-btns button{font-size:9px;letter-spacing:.14em;padding:3px 6px;border:1px solid var(--line);background:var(--panel2);color:var(--cy2)}
.vw-btns button:hover{background:color-mix(in srgb,var(--cy) 30%,transparent);color:var(--m-hi);border-color:var(--cy)}
.vw-btns button[hidden]{display:none}
.vw-msg{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:repeating-linear-gradient(0deg,var(--m-wash) 0 1px,rgba(0,0,0,.7) 1px 3px),radial-gradient(circle,var(--panel2),#000);color:var(--cy);font:700 15px var(--hd);letter-spacing:.3em;pointer-events:none}
.vw-msg small{font:10px var(--mono);letter-spacing:.2em;color:var(--dim)}
.vw-tile[data-st="loading"] .vw-msg,.vw-tile[data-st="lost"] .vw-msg,.vw-tile[data-st="standby"] .vw-msg,.vw-tile[data-st="empty"] .vw-msg{display:flex}
.vw-tile[data-st="loading"] .vw-msg span{animation:vwblink 1.2s infinite}
.vw-tile[data-st="lost"] .vw-msg{color:var(--red);background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--red) 8%,transparent) 0 1px,rgba(0,0,0,.78) 1px 3px),#000;animation:vwglitch .4s 2}
.vw-tile[data-st="standby"] .vw-msg,.vw-tile[data-st="empty"] .vw-msg{color:var(--dim)}
.vw-tile[data-st="standby"] .vw-view,.vw-tile[data-st="empty"] .vw-view{display:none}
@keyframes vwblink{50%{opacity:.35}}
@keyframes vwglitch{0%{transform:translateX(0)}20%{transform:translateX(-4px) skewX(3deg)}40%{transform:translateX(5px)}60%{transform:translateX(-2px) skewX(-2deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.vw-crt,.vw-msg,.vw-msg span{animation:none!important}}


@media (max-width:760px){
  #vw{top:calc(var(--topy) + var(--toph) + 4px);left:6px;right:6px;bottom:6px;padding:6px}
  .vw-bar{gap:6px}.vw-adv,.vw-info{display:none}
  .vw-title em{display:none}
  .vw-grid,.vw-grid[data-n]{grid-template-columns:1fr;overflow-y:auto;grid-auto-rows:minmax(150px,1fr)}
  .vw-grid.focus{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:minmax(130px,1fr)}
  .vw-grid.focus .vw-tile.big,.vw-grid.focus .vw-tile:not(.big){grid-column:1;grid-row:auto}
  .vw-grid.focus .vw-tile.big{order:-1;min-height:220px}
  .vw-src{display:none} /* the tile buttons sit on top of it */
  .vw-btns{opacity:1;top:24px;flex-direction:row;flex-wrap:wrap;right:4px}
  .vw-btns button{min-height:30px;min-width:34px;padding:6px 9px;font-size:10px} /* 14px-tall buttons were untappable (QA chrome 10/13) */
}
/* QA 10/13 tabs-a: wall bar + per-tile buttons were 21px / 30px tall on phones */
@media (max-width:760px), (pointer:coarse){
  .vw-bar .btn{min-height:34px}.vw-sel select{min-height:34px}
  .vw-btns button{min-height:32px;min-width:38px}
}