/* 29 Oct build: web screen changes, loaded last. Q813-Q818 were for the phone only (Sam 27 Oct 09:08 "please have the last version for web"). */

/* ---------- Q812 (Sam 27 Oct, prototype Real-Time sample v4): Real-Time works like the TV Watch ---------- */
html body .rw812bar:not(#z812){grid-template-columns:auto minmax(0,1fr) auto}
.rw812ck{display:flex;gap:8px;flex:none}
.rw812ck .rt-cd i{font-style:normal;font-weight:500}
.rw812ck .rt-cd b{font-variant-numeric:tabular-nums}
/* Q831 (Sam 27 Oct 10:04-10:27): the alert line takes all the free width, left-aligned, with room round it so nothing is cut; "1 of N" right */
html body .rt-ban#rw812ban{align-items:center;justify-content:flex-start;gap:12px;padding:3px 4px;line-height:1.35}
#rw812ban .ln831{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rw812ban .ln831 .rt-bt{font-size:14px;color:#fff;margin-right:6px}
#rw812ban .ln831 a{color:#fff}
#rw812ban .n831{flex:none;font-size:12px;color:#c7d3f2}
/* Q832 (Sam 27 Oct 10:08-10:09): one top bar; Q936 (Sam 30 Oct 10:57-11:05): its Layout pop-up and dark selects are replaced by the white
   Options panel (n32rt.css) */
html body .rw812bar:not(#z812){position:relative}
#rw812 .rt-info .nx812 b{color:var(--fg);font-weight:500}
/* Q822 (Sam 27 Oct 10:17): the screen is the window's height (no info line, Q838) */
html body main#rw812:not(#z812){display:flex;flex-direction:column;min-height:0;padding:0;overflow:hidden}
#rw812b{flex:1 1 auto;min-height:0;padding:12px 16px;overflow-y:auto}
#rw812b:has(> .rows812){display:flex;flex-direction:column;overflow:hidden}
/* Q822: rows share the height (each at most 1/5, --rmax), text grows by --rs up to 1.6 (set by rwFit); many rows keep their height and scroll */
.rows812{display:flex;flex-direction:column;gap:7px;flex:1 1 auto;min-height:0;overflow:auto}
.rw812{display:grid;grid-template-columns:calc(190px * min(var(--rs,1),1.3)) minmax(0,1fr);gap:8px;min-width:680px;border:1px solid var(--line);border-left:6px solid var(--ok24);border-radius:8px;padding:6px 10px;background:var(--surface);align-items:center;flex:1 0 auto;max-height:var(--rmax,none)}
.rw812.crit{border-left-color:var(--crit)}
.rw812.warn{border-left-color:var(--warn)}
.rw812.stale,.rw812.old{border-left-color:#8a94a8}
.rw812.jump,html body .rt-tile.jump812{box-shadow:0 0 0 3px #f6c9c9}
.nm812{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.nm812 a{font-weight:700;font-size:calc(15px * var(--rs,1));color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm812 a:hover{text-decoration:underline}
.nm812 small{font-size:calc(12px * var(--rs,1));color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm812 small.c{color:var(--crit);font-weight:600}
.vals812{display:flex;flex-direction:column;gap:4px;min-width:0}
.vl812{display:grid;gap:6px}
.v812{display:flex;flex-direction:column;padding:2px 6px;border-radius:5px;min-width:0;font-variant-numeric:tabular-nums}
.v812 i{font-style:normal;font-size:calc(10.5px * var(--rs,1));color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v812 span{font-size:calc(16px * var(--rs,1));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v812.c-r{background:#fdecec} .v812.c-r span{color:var(--crit)}
.v812.c-a{background:#fff4e0} .v812.c-a span{color:var(--warn)}
.v812.c-b{background:#e3f0fd} .v812.c-b span{color:#1565c0}
.v812.c-g span{color:var(--ok24)}
html[data-mode="dark"] .v812:is(.c-r,.c-a,.c-b){background:transparent}
.none812{font-size:calc(14px * var(--rs,1));color:var(--muted)}
/* Q810 flicker B on red, amber and blue values (Q800); RT_FLICKER 0 = off for that person */
html body #rw812b .v812:is(.c-r,.c-a,.c-b) span:not(#z812),
html body #rw812b .rt-c:is(.al,.wlz) b:not(#z812),
html body #rw812b .v812 .rt-pill.crit:not(#z812){animation:flick802 2.5s step-end infinite}
/* Q837 CFH: the Buildings pill, sized to the row */
.v812 .rt-pill{min-width:0;align-self:flex-start;max-width:100%;padding:2px 8px;letter-spacing:.03em;font-size:calc(12.5px * var(--rs,1))}
html body #rw812b.nofl812 .v812 span:not(#z812),
html body #rw812b.nofl812 .rt-c b:not(#z812),
html body #rw812b.nofl812 a.fl847:not(#z812){animation:none}
/* Sam 27 Oct 15:12-15:13: a building's name flickers once (one Q810 cycle) when it comes onto the page */
html body #rw812b a.fl847:not(#z812){animation:flick802 2.5s step-end 1}
@media (prefers-reduced-motion:reduce){html body #rw812b .v812 span:not(#z812),html body #rw812b .rt-c b:not(#z812){animation:none}}
@media (max-width:760px){html body .cards812:not(#z812){grid-template-columns:minmax(0,1fr)!important}html.fs42 .rw812bar2.pop832{right:16px}}
@media (min-width:761px) and (max-width:1100px){html body .cards812:not(#z812){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* Q841: Blr flames per boiler on Rows, as Live all */
.v812 span b{font-weight:600;margin-right:.45em}
.v812 span b:not(.on){color:var(--muted);font-weight:500}
/* Q841: with two lines, Apartments sits at the right over both lines */
.rw812.ap812{grid-template-columns:calc(190px * min(var(--rs,1),1.3)) minmax(0,1fr) calc(210px * min(var(--rs,1),1.3))}
.apx812{display:flex;align-items:center;min-width:0}
.apx812 .v812{flex:1}