/* 32 Oct build: Real-Time (rt812.js) */
/* Q849 (Sam 28 Oct): two lines per building; the name in line 1 only, line 2 under it from the left edge, its values packed to the left and
   the apartments taking the rest */
.rw812.two849{grid-template-columns:calc(190px * min(var(--rs,1),1.3)) minmax(0,1fr);row-gap:4px}
.l2849{grid-column:1 / -1;display:flex;gap:6px;align-items:stretch;min-width:0}
.w849{flex:0 0 calc(var(--w,1) * 62px * var(--rs,1));min-width:0;display:flex}
.w849 > .v812{flex:1}
.v812.ap849{flex:1 1 0;min-width:0}
html body .v812.ap849 > span.ch849:not(#z812){display:flex;flex-wrap:wrap;gap:3px 4px;white-space:normal;overflow:hidden;max-height:2.8em;font-size:calc(12.5px * var(--rs,1));line-height:1.35;animation:none}
/* the TV's apartment chips: the name grey, the temperature coloured below 68 (blue) and above 76 (amber / red); "--" = no reading */
.ch849 b,.rt-ap852 b{font-weight:600;border-radius:4px;padding:0 .4em;background:#f3f5f9;font-variant-numeric:tabular-nums;white-space:nowrap;margin:0}
.ch849 b em,.rt-ap852 b em{font-style:normal;font-weight:500;color:var(--muted);margin-right:.3em}
.ch849 b.cold,.rt-ap852 b.cold{background:#e3f0fd;color:#1565c0}
.ch849 b.cool,.rt-ap852 b.cool{background:#eef5fd;color:#1565c0}
.ch849 b.warm,.rt-ap852 b.warm{background:#fff4e0;color:#b26a00}
.ch849 b.hot,.rt-ap852 b.hot{background:#fdecec;color:#c62828}
.ch849 b.nr{color:var(--muted);font-weight:500}
html[data-mode="dark"] :is(.ch849,.rt-ap852) b{background:rgba(255,255,255,.08)}
html body #rw812b :is(.ch849,.rt-ap852) b:is(.cold,.cool):not(#z812){animation:flick802 2.5s step-end infinite}
html body #rw812b.nofl812 :is(.ch849,.rt-ap852) b:not(#z812){animation:none}
/* Q852: the card bottom with the apartment temps (Master's per-person switch) */
.rt-ap852{margin:auto 8px 8px;display:flex;flex-wrap:wrap;gap:3px 4px;max-height:3.2em;overflow:hidden;font-size:12px;line-height:1.35}
.rt-ap852.none{justify-content:center;padding:6px 8px;border-radius:6px;background:var(--surface2);color:var(--muted);font-weight:500}
/* Q853: the fuel word right of the CFH pill */
.rt-mode .rt-fw{align-self:center;margin-left:8px;font:600 12px var(--sans);color:var(--muted);white-space:nowrap}
/* Q854 (Sam 28 Oct 08:39): the cards fill the screen for the C x R grid; each card is laid out at its cell's size / k and scaled by k (rwFit) */
#rw812b:has(> .cards854){display:flex;flex-direction:column;overflow:hidden}
html body .rt-grid.cards854:not(#z812){flex:1 1 auto;min-height:0;align-items:stretch;grid-auto-rows:minmax(0,1fr);gap:12px}
.cc854{position:relative;min-width:0;min-height:0;overflow:hidden}
html body .cc854 > .rt-tile:not(#z812){position:absolute;left:0;top:0;transform-origin:0 0;box-sizing:border-box}
.cc854 > .rt-tile > :last-child{margin-top:auto}
@media (max-width:1100px){html body .rt-grid.cards854:not(#z812){grid-template-rows:none!important;grid-auto-rows:auto}
  #rw812b:has(> .cards854){display:block;overflow-y:auto}
  html body .cc854 > .rt-tile:not(#z812){position:static;transform:none!important;width:auto!important;height:auto!important}}
/* Q847 + Q850 (Sam 28 Oct 08:09): a name that comes onto the page flickers 4 Q810 cycles */
html body #rw812b a.fl847:not(#z812){animation:flick802 2.5s step-end 4}
html body #rw812b.nofl812 a.fl847:not(#z812){animation:none}
/* Sam 28 Oct 19:31: card values coloured by the Rows limits flicker too (blue = too low, as Rows) */
html body #rw812b .rt-c.lb869 b:not(#z812){color:#1565c0}
html body #rw812b .rt-c:is(.al,.wlz,.lb869) b:not(#z812){animation:flick802 2.5s step-end infinite}
html body #rw812b.nofl812 .rt-c b:not(#z812){animation:none}

/* Next build (Sam 28 Oct). Q872: the CFH pill under the building name, its own colour, a little bigger, red flickering on Safety; a two-box
   building's BOX_ID beside it */
.nm812 .sb872{display:flex;align-items:center;gap:6px;min-width:0;margin-top:3px}
html body .nm812 .rt-pill.cf872:not(#z872){flex:0 1 auto;align-self:auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 9px;font-size:calc(13.5px * var(--rs,1));font-weight:700;letter-spacing:.01em;line-height:1.3}
.nm812 .sb872 small{flex:none}
html body #rw812b .nm812 .rt-pill.cf872.crit:not(#z872){animation:flick802 2.5s step-end infinite}
html body #rw812b.nofl812 .nm812 .rt-pill.cf872:not(#z872){animation:none}
@media (prefers-reduced-motion:reduce){html body #rw812b .nm812 .rt-pill.cf872:not(#z872){animation:none}}
/* Q880: the top of the building name level with the first line's column names (CFH under it) */
html body .rw812 > .nm812:not(#z880){align-self:start;padding-top:2px}
html body .rw812:not(.two849) > .vals812:not(#z880){align-self:start}
/* v6 Rows (Q866 / Q849): "Apt" and the temps on the same line, more apartments wrapping below */
html body .l2849 .v812.ap849:not(#z866){flex-direction:row;align-items:flex-start;gap:8px}
html body .l2849 .v812.ap849 > i:not(#z866){flex:none;padding-top:.2em;font-weight:700;color:var(--fg)}
html body .l2849 .v812.ap849 > span.ch849:not(#z812):not(#z866){flex:1 1 auto}
/* Q889: the plain apartment chips on Real-Time Rows and Cards are white (coloured chips keep their colour) */
html:not([data-mode="dark"]) .ch849 b,html:not([data-mode="dark"]) .rt-ap852 b{background:#fff}
html:not([data-mode="dark"]) .ch849 b.cold,html:not([data-mode="dark"]) .rt-ap852 b.cold{background:#e3f0fd}
html:not([data-mode="dark"]) .ch849 b.cool,html:not([data-mode="dark"]) .rt-ap852 b.cool{background:#eef5fd}
html:not([data-mode="dark"]) .ch849 b.warm,html:not([data-mode="dark"]) .rt-ap852 b.warm{background:#fff4e0}
html:not([data-mode="dark"]) .ch849 b.hot,html:not([data-mode="dark"]) .rt-ap852 b.hot{background:#fdecec}
/* Q890: a resolved alert on the Real-Time alert line ends "· Resolved 8:30 AM" in light green */
#rw812ban .ln831 .res890{color:#fff;margin-left:6px}
#rw812ban .ln831 .res890 b{display:inline-block;background:#fff;color:#166534;font-weight:800;padding:0 6px;border-radius:4px;letter-spacing:.03em;line-height:1.4}
/* Q891: the fuel symbol on Real-Time Rows (no "Fuel" name over it) */
.v812 .fu891{width:1.15em;height:1.15em;vertical-align:-.15em}
/* Q910 (Sam 29 Oct 10:46, TV, web and desktop): the CFH status gets its coloured background back, with no border around it */
html body #rw812 .rt-pill:not(#z893){border:0!important;box-shadow:none!important;min-width:0}
/* Q894: the fuel symbol right of CFH on the Real-Time cards */
.rt-fw .fu891{width:18px;height:18px;vertical-align:-4px}
/* Q911 (Sam 29 Oct 10:52): Rows on two lines as one grid; each cell sits in its own column, the apartments wrap within their span */
html body .rw812.r911:not(#z911){column-gap:8px;row-gap:4px}
.r911 > .g911{min-width:0;display:flex}
.r911 > .g911 > .v812{flex:1;min-width:0}
.r911 > .g911 > .nm812{min-width:0;width:100%}
html body .r911 .v812.ap849:not(#z911){flex-direction:row;align-items:center}
/* Q916 (Sam 29 Oct 12:14, TV, web and desktop): Rows, the fuel icon right after the building name (the name shortens with "..." first) */
.nm812 .nl916{display:flex;align-items:center;gap:6px;min-width:0}
.nm812 .nl916 > a{min-width:0}
.nm812 .fu916{flex:none;display:flex}
.nm812 .fu916 .fu891{width:calc(18px * var(--rs,1));height:calc(18px * var(--rs,1))}
/* Q917 (Sam 29 Oct 12:14): Cards, the building name 10% bigger, bold and black; a bigger fuel icon */
html body #rw812b .cards854 .rt-bn:not(#z917){font-size:calc(13.5px * 1.1);font-weight:800;color:#000}
@media (min-width:1100px){html body #rw812b .cards854 .rt-bn:not(#z917){font-size:calc(15px * 1.1)}}
html body #rw812b .cards854 .rt-fw .fu891:not(#z917){width:26px;height:26px;vertical-align:-7px}
/* Q936 (Sam 30 Oct 10:57, sample approved 11:05, web and desktop; replaces the Q832 Layout pop-up and the dark selects): the bar is one
   line with no wrap: the Next page clock, the alert line (the free width, "..." when long), Page N of M, Options; the "?" (help908.css) and
   Close (ui326b.css) are fixed in the bar's right padding. Options opens a small white panel centred under the bar */
html body .rt-strip.rw812bar.bar936:not(#z936){display:flex;flex-wrap:nowrap;align-items:center;gap:14px;min-height:48px;box-sizing:border-box;padding-top:6px;padding-bottom:6px;padding-left:16px}
html body .bar936 .rw812ck .rt-cd:not(#z936){background:rgba(255,255,255,.12);border:0;border-radius:8px;padding:6px 12px;font:600 15px var(--sans);color:#fff}
html body .bar936 .rw812ck .rt-cd i:not(#z936){color:#c7d3f2}
html body .bar936 .rw812ck .rt-cd b:not(#z936){color:#fff}
html body .bar936 .rt-ban#rw812ban:not(#z936){order:0;flex:1 1 auto;min-width:0;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;font-size:17px;font-weight:500}
html body .bar936 #rw812ban .ln831:not(#z936){overflow:hidden;text-overflow:ellipsis}
.bar936 .pg936{flex:none;color:#c7d3f2;font:500 14px var(--sans);white-space:nowrap}
html body .bar936 .ob936:not(#z936){flex:none;background:#fff;color:#1E40AF;border:0;border-radius:99px;padding:7px 16px;font:700 14px var(--sans);white-space:nowrap;cursor:pointer}
html body .bar936 .ob936[aria-expanded="true"]:not(#z936){box-shadow:0 0 0 3px #9ec5ff}
html body .bar936 .op936:not(#z936){position:absolute;z-index:60;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 32px));box-sizing:border-box;background:#fff;color:#14213a;border:1px solid #d6dcea;border-radius:12px;box-shadow:0 14px 34px rgba(10,20,50,.22);padding:14px 18px 16px;font:400 14px var(--sans);white-space:normal;text-align:left}
.bar936 .op936[hidden]{display:none!important}
.bar936 .oh936{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d5dbe7;padding-bottom:10px;margin-bottom:12px;font-size:16px;color:#1E40AF}
html body .bar936 .dn936:not(#z936){background:#1E40AF;color:#fff;border:0;border-radius:99px;padding:6px 18px;font:700 14px var(--sans);cursor:pointer}
.bar936 .og936{display:grid;grid-template-columns:150px 1fr;gap:12px 14px;align-items:center}
.bar936 .og936 > label,.bar936 .og936 > .lb936{font-weight:600;color:#5b6780;font-size:14px}
.bar936 .og936 > [hidden]{display:none!important}
html body .bar936 .og936 select:not(#z936){background:#fff;color:#14213a;border:1px solid #c5cde0;border-radius:8px;padding:6px 10px;font:600 14px var(--sans);min-width:140px;width:auto;height:auto;box-shadow:none}
html body .bar936 #rw812gridw select:not(#z936){min-width:64px}
.bar936 #rw812gridw{color:#5b6780}
.bar936 .sg936{display:inline-flex;border:1px solid #1E40AF;border-radius:8px;overflow:hidden;width:max-content}
html body .bar936 .sg936 button:not(#z936){background:#fff;color:#1E40AF;border:0;border-radius:0;padding:6px 18px;font:700 14px var(--sans);cursor:pointer}
html body .bar936 .sg936 button.on:not(#z936){background:#1E40AF;color:#fff}
.bar936 .bt936{display:flex;gap:8px;flex-wrap:wrap}
html body .bar936 .ic936:not(#z936){background:#fff;color:#1E40AF;border:1px solid #c5cde0;border-radius:8px;padding:6px 12px;font:700 14px var(--sans);cursor:pointer;min-width:38px}
html body .bar936 .ic936.on:not(#z936){background:#1E40AF;color:#fff;border-color:#1E40AF}
html body .bar936 .ic936:disabled:not(#z936){opacity:.4;cursor:default}
.bar936 :is(.ob936,.dn936,.ic936,.sg936 button,select):focus-visible{outline:2px solid #1565c0;outline-offset:2px}
@media (max-width:700px){.bar936 .pg936{display:none}html body .bar936 .rt-ban#rw812ban:not(#z936){font-size:15px}}
@media (max-width:520px){html body .rt-strip.rw812bar.bar936:not(#z936){flex-wrap:wrap}html body .bar936 .rt-ban#rw812ban:not(#z936){order:5;flex-basis:100%}.bar936 .ob936{margin-left:auto}.bar936 .og936{grid-template-columns:1fr}}
/* 39 Oct build */
/* Q955 (Sam 31 Oct 12:45, web and desktop Real-Time; the TV keeps fitting its screen): every building at one fixed size (rt812.js RS955 for
   Rows, --cw955 for Cards) and the page scrolls with scrollbars. Rows: every value the same size and bold, a thin line between buildings,
   no box around a building; the coloured status bar on the left stays. */
html body .rows812:not(#z955){gap:0}
html body #rw812b .rw812:not(#z955){flex:0 0 auto;max-height:none;border-top:0;border-right:0;border-bottom:1px solid var(--line);border-radius:0;padding:8px 10px}
html body #rw812b .v812 > span:not(#z955){font-size:calc(16px * var(--rs,1));font-weight:700}
html body #rw812b .v812 span b:not(#z955){font-weight:700}
html body #rw812b .ch849 b:not(#z955){font-weight:700}
html body #rw812b .ch849 b em:not(#z955){font-weight:600}
html body .rt-grid.cards854.fix955:not(#z812){--cw955:330px;flex:none;grid-template-rows:none;grid-auto-rows:auto;align-items:stretch;justify-content:start}
#rw812b:has(> .cards854.fix955){display:block;overflow:auto}
html body .cards854.fix955 .cc854:not(#z812){display:flex;overflow:visible}
html body .cards854.fix955 .cc854 > .rt-tile:not(#z812){position:static;flex:1;transform:none!important;width:auto!important;height:auto!important}
/* Q961 (Sam 31 Oct 16:10, web and desktop Real-Time Rows only; the TV is not touched): the column names (BLR, OUT, AVG ... RETN) are the
   same size as their values, bold and black. Every other Rows font is about 15% smaller: rt812.js RS955 went from 1.25 to 1.0625. */
/* Sam 16:56: the column names 30% smaller than their values (16 px x 0.7) and semibold, not bold */
html body #rw812b .rows812 .v812 > i:not(#z961){font-size:calc(11.2px * var(--rs,1));font-weight:600;color:var(--fg);letter-spacing:.02em;line-height:1.25}
html:not([data-mode="dark"]) body #rw812b .rows812 .v812 > i:not(#z961){color:#111827}
/* Q960 (Sam 31 Oct 16:06-16:09, web and desktop Real-Time Cards): Fixed number of cards. Each card has one standard size, 270 x 300 px (Sam 16:54: narrower than the first 360, so 5 fit across a 1920 screen); the
   window takes as many across as fit and the rest go below (the page scrolls). The card's content is scaled to fit it (rt812.js rwFitCards).
   The Options panel shows Cards per page (12 by default), with no columns and rows choice. */
/* Sam 17:07 ("keep the size fixed at 220 as old app regardless of number of buildings"): every card 220 px wide, as on the old app;
   the height is the card's own (each row as tall as its tallest card); the window takes as many across as fit; never stretched */
/* Sam 17:28: like the old app (portfolio.css .dashboard-container), the columns are repeat(auto-fill, minmax(220px, 1fr)) (set in rt812.js): the cards
   share out the row's width and re-flow as the window is resized; auto-fill keeps the empty columns, so a few cards are never stretched wide */
html body .rt-grid.cards854.fix960:not(#z812){--cw960:220px;flex:none;grid-template-rows:none;grid-auto-rows:auto;align-items:stretch;justify-content:stretch}
/* Sam 31 Oct 17:41: the old narrow-window rules (2 across under 1100 px, 1 under 760 px) do not apply to Fixed number of cards, so 2 or 3 cards never stretch: always auto-fill, at least 220 px, as on the old app */
@media (max-width:1100px){html body .rt-grid.cards854.fix960:not(#z812):not(#z960){grid-template-columns:repeat(auto-fill,minmax(min(var(--cw960),100%),1fr))!important}}
#rw812b:has(> .cards854.fix960){display:block;overflow:auto}
html body .cards854.fix960 .cc854:not(#z812):not(#z960){position:relative;display:flex;width:auto;min-width:0;height:auto;min-height:0;overflow:visible}
html body .cards854.fix960 .cc854 > .rt-tile:not(#z812):not(#z960){position:static;flex:1;width:auto!important;height:auto!important;transform:none!important;box-sizing:border-box;min-width:0}
.bar936 .og936 > [hidden]{display:none!important}
/* Sam 31 Oct 17:00-17:01 (web and desktop Rows): the values 20% smaller (16 px x 0.8) and not bold, a medium weight; the apartment temps
   the same. The column names stay 30% smaller than the old values (11.2 px) and semibold, so they are a little stronger. */
html body #rw812b .rows812 .v812 > span:not(.rt-pill):not(#z955):not(#z962){font-size:calc(12.8px * var(--rs,1));font-weight:500}     /* Sam 17:01: the CFH pill stays as it is */
html body #rw812b .rows812 .v812 span b:not(#z955):not(#z962),html body #rw812b .rows812 .ch849 b:not(#z955):not(#z962){font-weight:500}
/* Q965 (Sam 1 Nov 08:19, web and desktop Rows; the TV is not touched): the line under each building is a 2 px dark grey line, not the thin one */
html body #rw812b .rows812 .rw812:not(#z955):not(#z965){border-bottom:2px solid #6b7280}
html[data-mode="dark"] body #rw812b .rows812 .rw812:not(#z955):not(#z965){border-bottom-color:#9ca3af}
html:not([data-mode="dark"]) body #rw812b .rows812 .v812 > i:not(#z961):not(#z995){color:#1E40AF}   /* Q995 (Sam 2 Nov 09:12): Rows layout column names in blue */