/* 32 Oct build (28 Oct list, Sam's go 12:45): Q855 Timeline lines, Q860 Alerts dashboard Select + icons, Q861 Buildings icons, Q865 Live pop-up.
   Loaded after n29weba.css; the :not(#z..) chains only lift these rules over the older ones. */

/* Q855 (Sam 28 Oct 08:48 + 12:39, web/desktop only): no border lines on the Timeline: no outline round a building's card, its name bar,
   its time bar or the scroll area, no thin frame or shadow round the alert / status boxes (their colour stripe on the left stays),
   no ring round a picked building (the others still dim). */
html body .dy97 .sc97:not(#z855a):not(#z855b),
html body .dy97 .tl97 > .bw42:not(#z855a):not(#z855b),
html body .dy97 .bw42:not(#z855a):not(#z855b),
html body .dy97 .rw97:not(#z855a):not(#z855b),
html body .dy97 .rw97.sel97:not(#z855a):not(#z855b),
html body .dy97 .rw97 > .nm97:not(#z855a):not(#z855b):not(#z855c),
html body .dy97 .bw42 .rw97 > .nm97:not(#z855a):not(#z855b):not(#z855c),
html body .dy97 .bw42 .rw97.sel97 > .nm97:not(#z855a):not(#z855b):not(#z855c),
html body .dy97 .ax97:not(#z855a):not(#z855b):not(#z855c),
html body .dy97 .rw97 > .ax97.ax42r:not(#z855a):not(#z855b):not(#z855c){border:0!important;outline:0!important;box-shadow:none!important}
html body .dy97 .bx97:not(#z855a):not(#z855b),
html body .dy97 .bx97.pin:not(#z855a):not(#z855b){border:0!important;border-left:4px solid var(--c)!important;outline:0!important;box-shadow:none!important}

/* Q860 (Sam 28 Oct 10:04 + 12:34): the select boxes hidden until Select (alerttree.js sel860); hidden they keep their place */
html body .at21.sel860-off .ck28:not(#z860a),
html body .at21.sel860-off .ao48:not(#z860a){visibility:hidden}
/* Select at the right end of the day line (or the top line), no taller than the line */
html body .at21 .at21-sh:has(> .sel860):not(#z860a){display:flex;align-items:center;flex-wrap:nowrap}
html body .at21 .sel860:not(#z860a):not(#z860b){margin:-4px 0 -4px auto;padding:3px 12px;line-height:1.3;flex:none}
html body .at21 .sel860.on:not(#z860a):not(#z860b){background:#1E40AF!important;color:#fff!important;border-color:#1E40AF!important}
/* Live and Details: the phone's icons, sized for the web */
html body .at21 .at21-acts.ic860 .btn:not(#z860a):not(#z860b){display:inline-flex;align-items:center;justify-content:center;padding:5px 12px;min-width:44px;line-height:1}
html body .at21 .at21-acts.ic860 .btn svg:not(#z860a){width:18px;height:18px;display:block}

/* Q861 (Sam 28 Oct 10:05 + 11:53): Buildings Live and Apts as icons; the Building column gets narrower, every column moves left */
html body .bl-t td.bl-b .bl-act.ic861:not(#z861a):not(#z861b){margin-left:8px!important;gap:3px!important}
html body .bl-t td.bl-b .bl-act.ic861 .btn:not(#z861a):not(#z861b){display:inline-flex!important;align-items:center;justify-content:center;padding:3px 7px!important;min-width:0!important;line-height:1!important}
html body .bl-t td.bl-b .bl-act.ic861 .btn svg:not(#z861a){width:15px;height:15px;display:block}

/* Q865 (Sam 28 Oct 12:02-12:03, like phone M254): Live pop-up System temperatures and meters: every row the same three columns, so all
   values sit in one column and every range bar has the same width and the same left edge; the names, the apartment names, the Run times
   headers and the top card's headers (Outside, Avg, DIT ...) navy. Values unchanged. */
html body .lv48 .sys48 .rb48:not(#z865a):not(#z865b){grid-template-columns:minmax(0,1fr) 9.5em 40%}
/* the number right-aligned, its unit in a fixed slot after it, so the numbers line up whatever the unit (°F, gal today, mA) */
html body .lv48 .sys48 .rb48 .val:not(#z865a):not(#z865b){justify-self:stretch;display:flex;align-items:baseline;justify-content:flex-end;text-align:right}
html body .lv48 .sys48 .rb48 .val small:not(#z865a):not(#z865b){flex:none;width:5.6em;margin-left:5px;text-align:left;white-space:nowrap}
html body .lv48 .rb48 .k2:not(#z865a):not(#z865b):not(#z865c),
html body .lv48 .apr48 .n:not(#z865a):not(#z865b),
html body .lv48 table.t48 th:not(#z865a):not(#z865b),
html body .lv48 .top48 .k48:not(#z865a):not(#z865b),
html body .lv48 .six48.r50 > .s48 .k48:not(#z865a):not(#z865b):not(#z865c){color:#1e3a8a!important}
:root[data-theme="dark"] body .lv48 .rb48 .k2:not(#z865a):not(#z865b):not(#z865c):not(#z865d),
:root[data-theme="dark"] body .lv48 .apr48 .n:not(#z865a):not(#z865b):not(#z865d),
:root[data-theme="dark"] body .lv48 table.t48 th:not(#z865a):not(#z865b):not(#z865d),
:root[data-theme="dark"] body .lv48 .top48 .k48:not(#z865a):not(#z865b):not(#z865d){color:#93c5fd!important}
/* Q882 (Sam 28 Oct 20:03): Critical / Warning / Info open counts right after the day line's date */
html body .at21-one .at21-sh:not(#z882){display:flex;align-items:center;gap:14px;flex-wrap:wrap}
html body .at21-one .at21-sh h4:not(#z882){margin:0}
html body .at21-one .at21-sh .at21-sv:not(#z882){display:inline-flex;align-items:center;gap:6px}
/* Q883 (Sam 28 Oct 20:06): the search on the day line, just left of Select; the top line: buttons left, period and tabs right */
html body .at21-one .at21-sh .at21-sw.hs22:not(#z883){margin-left:auto;display:inline-flex;align-items:center;gap:6px}
html body .at21-one .at21-sh .at21-sw.hs22 .at21-q:not(#z883){width:210px;padding:4px 10px}
html body .at21 .at21-sh .at21-sw.hs22 + .sel860:not(#z860a):not(#z860b):not(#z883){margin-left:8px}
html body .at21-top.one48 .lf22 .bt22:not(#z883){display:inline-flex;gap:8px}

/* Q884 (Sam 28 Oct 20:12, web/desktop): each building's block in its own box with a thin border line (replaces Q855's no outline round
   a building), and a thin solid line under every hour across its time bar (timeline.js dyGrid) */
html body .dy97 .tl97 > .bw42:not(#z884a):not(#z884b):not(#z884c){border:1px solid #d5dcec!important;border-radius:8px;padding:0 12px;margin:0 0 16px!important}
html[data-mode="dark"] body .dy97 .tl97 > .bw42:not(#z884a):not(#z884b):not(#z884c){border-color:var(--line)!important}
html body .dy97 .gr97.hr884:not(#z884a){border-left:1px solid #e3e7ef}
html[data-mode="dark"] body .dy97 .gr97.hr884:not(#z884a){border-left-color:var(--line)}

/* Q885 (Sam 28 Oct 20:17, web/desktop): one time bar for all the buildings, held at the top of the scroll box, and one sideways scroll that
   moves every building together (no time bar or scroll bar per building); each building keeps its box (Q884) */
html body .dy97 .sc97:not(#z885a):not(#z885b):not(#z885c){overflow:auto!important;max-height:max(360px,calc(100dvh - var(--dytop,200px)))!important}
html body .dy97 .tl97 > .bw42:not(#z885a):not(#z885b):not(#z885c){overflow:visible;max-width:none;width:max-content}
html body .dy97 .ax885:not(#z885a){position:sticky;top:0;z-index:8;width:max-content;padding:0 13px 8px;background:#fff}
html[data-mode="dark"] body .dy97 .ax885:not(#z885a){background:var(--surface)}
html body .dy97 .ax885 > .ax97:not(#z885a):not(#z885b){position:static;width:var(--w42);margin:0;padding:0;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid #d5dcec}
html body .dy97 .ax885 .tr97:not(#z885a){height:22px}
html body .dy97 .ax885 .tk97:not(#z885a){font-size:12.5px;font-weight:700;color:#374151}
html body .dy97 .ax885 .tk97.nw:not(#z885a){color:#1E40AF}
html body .dy97 .bw42 .rw97 > .nm97 > .nm42:not(#z885a):not(#z885b){left:14px}

/* Q886 (Sam 28 Oct 20:22, web/desktop): no outer scroll on the Timeline page: the screen fits the window and only the timeline box
   scrolls (down and sideways), as the full-screen page and as the pop-up over Anagha AI / Alerts */
html:has(main.page.dy97):not(#z886a),html:has(main.page.dy97) body:not(#z886a){overflow:hidden!important}
html body main.page.dy97:not(#z886a):not(#z886b){height:calc(100dvh / var(--z886,1));box-sizing:border-box;display:flex;flex-direction:column;padding-bottom:12px!important}
html body .tlov22 .tlb22:has(main.page.dy97):not(#z886a){overflow:hidden}
html body .tlov22 .tlb22 > #app:has(> main.page.dy97):not(#z886a){height:100%}
html body .tlov22 main.page.dy97:not(#z886a):not(#z886b):not(#z886c){height:100%}
html body main.page.dy97 > *:not(#z886a){flex:none}
html body main.page.dy97 > .sc97:not(#z886a):not(#z886b):not(#z886c):not(#z886d){flex:1 1 auto;min-height:0;max-height:none!important}
/* the page zoom of app.css Q31 (html zoom 1.06 to 1.35) is taken back out of the window height */
@media (min-width:1440px){html{--z886:1.06}} @media (min-width:1680px){html{--z886:1.12}} @media (min-width:1900px){html{--z886:1.2}} @media (min-width:2400px){html{--z886:1.35}}

/* Q876 (Sam 28 Oct, web/desktop Buildings): Live and Apts in their own column right after the names, the Building column only as wide
   as the longest name; C, CFH and Boilers as narrow as their content; the width left goes to Out .. Weather */
html body table.t.bl-t :is(th,td):is(:first-child,.bl-ic876,.bl-c,.bl-cfh,.bl-bo):not(#z876a):not(#z876b){width:1%!important}
html body table.t.bl-t th:nth-child(4):not(#z876a):not(#z876b),html body table.t.bl-t th:nth-child(5):not(#z876a):not(#z876b),
html body table.t.bl-t th:nth-child(6):not(#z876a):not(#z876b){width:1%!important}
html body .bl-t td.bl-ic876 .bl-act.ic861:not(#z876a):not(#z876b){float:none;display:flex;margin:0!important}
html body .bl-t td.bl-b:not(#z876a):not(#z876b){padding-right:4px!important}
html body .bl-t td.bl-b .bl-nm:not(#z876a){margin-right:0}
html body .bl-t td.bl-ic876 .bl-act.ic861:not(#z876a):not(#z876b){gap:3px!important}
html body .bl-t td.bl-ic876 .bl-act.ic861 .btn:not(#z876a):not(#z876b){display:inline-flex!important;align-items:center;justify-content:center;padding:3px 7px!important;min-width:0!important;min-height:0!important;line-height:1!important;font-size:11px!important}
html body .bl-t td.bl-ic876 .bl-act.ic861 .btn svg:not(#z876a){width:15px;height:15px;display:block}
html body .bl-t td.bl-b .bl-nm:not(#z876a):not(#z876b){flex-wrap:nowrap}

/* Q887 (Sam 28 Oct 20:43, web/desktop): ONE loader size on every screen (the full-screen one and the one inside a box were 150 and 84 px);
   a pop-up or panel opened from a page waits hidden while its data is read, with the loader over the page on a faded grey backdrop
   (core.js pend887), then opens already filled */
html body .ldf:not(#z887a),html body .ldf.ldf-xl:not(#z887a){--ldf:120px;gap:18px}
html body .ldf .ldf-lbl:not(#z887a),html body .ldf.ldf-xl .ldf-lbl:not(#z887a){font-size:16px}
html body .ldf-box:not(.ld19s):not(#z887a){min-height:190px}
html body .ld44.ldf44.dim887:not(#z887a):not(#z887b){background:rgba(15,23,42,.32);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
html body .ld44.ldf44.dim887 > .ldf:not(#z887a){background:#fff;border-radius:16px;padding:22px 30px;box-shadow:0 14px 40px rgba(15,23,42,.25)}
html[data-mode="dark"] body .ld44.ldf44.dim887 > .ldf:not(#z887a){background:var(--surface)}
html body .pend887:not(#z887a){opacity:0!important;pointer-events:none!important;transition:none!important}
/* Q889 (Sam 29 Oct 06:52 "other than the alerts screen which is bright and white all other are a little grey in background"): the
   soft grey halo round the page cards (Anagha AI cards, the Buildings table, Live all, Metrics) and the light grey strips in the
   Anagha AI cards (count, Analyze trend) go; every screen is as white as Alerts. Pop-ups, menus and the AI ask bar keep their shadow. */
html:not([data-mode="dark"]) main.page .card,html:not([data-mode="dark"]) main.page .aic,html:not([data-mode="dark"]) main.page .inc,
html:not([data-mode="dark"]) main.page .ftile,html:not([data-mode="dark"]) main.page .rt-tile{box-shadow:none}
html:not([data-mode="dark"]) .aic .aic-c,html:not([data-mode="dark"]) .aic .aic-f{background:#fff}
/* Q900 (Sam 29 Oct 08:09): a value out of limits on the Timeline is a small "Mix: 45" label on its colour, hung from the bar by a line
   (high red, low blue, as the Real-Time limit colours) */
.dy97 .lb900{position:absolute;max-width:92px;height:20px;padding:0 7px;border-radius:5px;font:700 12px/20px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;z-index:4}
.dy97 .st-vhi{background:#d92d20;color:#fff}
.dy97 .st-vwarn{background:#f5a524;color:#1f2937}
.dy97 .st-vlo{background:#2563eb;color:#fff}
.dy97 .st-vwl{background:#0e7490;color:#fff}
.dy97 .dt900{position:absolute;width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 1.5px #fff;z-index:3;pointer-events:none}
.ld97 polyline.v900{stroke:#8a93a6;stroke-opacity:1;stroke-width:1}
.dy97 .lb900 .mo97{font-weight:600}
/* Q943 (Sam 30 Oct 16:45-17:13, web/desktop): each building its own time bar and its own sideways scroll again (replaces Q885's one bar and
   one scroll; Q884's box and hour lines and Q886's no outer scroll stay): the timeline box scrolls down only, each building sideways.
   The boxes are as wide as their text (measured by timeline.js in the hidden .ms943, then given that width) */
html body .dy97 .sc97:not(#z943a):not(#z943b):not(#z943c):not(#z943d){overflow-x:hidden!important;overflow-y:auto!important}
html body .dy97 .tl97:not(#z943a){min-width:0}
html body .dy97 .tl97 > .bw42.bw943:not(#z943a):not(#z943b):not(#z943c):not(#z943d){overflow-x:auto;overflow-y:hidden;width:auto;max-width:100%;box-sizing:border-box}
html body .dy97 .rw97 > .ax885.ax943:not(#z943a):not(#z943b){position:relative;top:auto;z-index:1;width:auto;padding:0 0 4px;margin:0;background:transparent}
html body .dy97 .ax943 > .ax97:not(#z943a):not(#z943b){position:static;width:auto;margin:0;padding:0;background:transparent;border:0;border-bottom:1px solid #d5dcec}
html body .dy97 .ax943 .tr97:not(#z943a){height:22px}
html body .dy97 .bx97:not(#z943a){width:auto;max-width:280px;box-sizing:border-box}
html body .dy97 .lb900:not(#z943a){max-width:240px;box-sizing:border-box}
html body .dy97 .ms943:not(#z943a):not(#z943b){position:absolute!important;left:0;top:0;width:max-content;height:0;visibility:hidden;pointer-events:none;white-space:nowrap;border:0!important;box-shadow:none!important}
html body .dy97 .ms943 > *:not(#z943a){position:relative!important;display:inline-block;left:auto;top:auto;width:auto}
/* Q944 (Sam 30 Oct 16:53): the hour labels on the time bar (13 px, weight 700) and the time in each alert box bold black */
html body .dy97 .ax943 .tk97:not(#z943a):not(#z944a){font-size:13px;font-weight:700;color:#000}
html body .dy97 .bx97[class*="sv-"] .l2 em:not(#z944a){font-weight:700;color:#000}
html[data-mode="dark"] body .dy97 .ax943 .tk97:not(#z943a):not(#z944a),html[data-mode="dark"] body .dy97 .bx97[class*="sv-"] .l2 em:not(#z944a){color:var(--fg)}
/* Q947 (Sam 31 Oct 06:44): the red Boiler firing strip about a third thicker (13 to 17 px); Q945 (06:34-06:44): every strip flickers (Q810) */
html body .fr41.fr22:not(#z22):not(#z947){height:17px!important;margin-top:-4px}
html body .dy97 .fr41.fr22 span:not(#z947){font-size:11px}
/* Q945 fix (Sam 31 Oct 11:18): ui326a.css locks .fr41 opacity with !important, which beats keyframes, so the strip flickers by filter */
html body .dy97 .fr41.fr22:not(#z945){animation:flk945 2.5s step-end infinite}
@keyframes flk945{75%{filter:opacity(.35)}}
/* Q939 (Sam 30 Oct 14:21-14:56): from the Timeline icon the pop-up is the full width of the screen and only as tall as the building's Timeline
   (at most the window); the alert it was opened from flickers (Q810) */
html body .tlov22.fit939:not(#z939a){background:rgba(15,23,42,.45);justify-content:center}
html body .tlov22.fit939 .tlb22:not(#z939a):not(#z939b):not(#z939c):not(#z939d){flex:0 1 auto;max-height:calc(94dvh / var(--z886,1));min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#fff}
html[data-mode="dark"] body .tlov22.fit939 .tlb22:not(#z939a):not(#z939b):not(#z939c):not(#z939d){background:var(--surface)}
html body .tlov22.fit939 .tlb22 > #app:not(#z939a):not(#z939b):not(#z939c):not(#z939d){height:auto;flex:0 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column}
html body .tlov22.fit939 main.page.dy97:not(#z939a):not(#z939b):not(#z939c):not(#z939d){height:auto;flex:0 1 auto;min-height:0;min-width:0;width:100%;box-sizing:border-box}
html body .tlov22.fit939 main.page.dy97 > .sc97:not(#z939a):not(#z939b):not(#z939c):not(#z939d){flex:0 1 auto}
html body .dy97 .bx97.flk939:not(#z939a){animation:flick802 2.5s step-end infinite}
@media (prefers-reduced-motion:reduce){html body .dy97 .fr41.fr22:not(#z945),html body .dy97 .bx97.flk939:not(#z939a){animation:none}}
/* Q930 (Sam 30 Oct 09:10 "make this modal full screen"): Users > Notifications (admin2.js notifDialog) fills the screen, white as every pop-up,
   Cancel and Save where they were; the alert grid takes the height left (Q928's Resolved choices fit) */
html body .swal2-popup.swp.fs50.fs930:not(#z930){box-sizing:border-box!important;width:calc((100vw - 24px) / var(--z886, 1))!important;min-width:0!important;max-width:none!important;height:calc((100vh - 24px) / var(--z886, 1))!important;max-height:none!important}     /* the page zoom (--z886) taken back out */
html body .swal2-popup.fs930 .swal2-html-container:not(#z930){max-height:none!important}
html body .swal2-popup.fs930 .tkwrap.tkdlg:not(#z930){max-height:calc(100vh - 380px);min-height:220px}
/* Q953 (Sam 31 Oct 12:28): Edit person > Alerts uses the whole screen width, so Phone and Resolved phone fit next to the other channels */
main.page.wide953{max-width:none}
/* 39 Oct build */
/* Q956 (Sam 31 Oct 13:58, web and desktop): the Timeline pop-up (timeline.js tlPop22) has no blue bar: a white header, "Timeline · building"
   black, the "Last 24 hours ..." line and "Show" dark grey, the Alerts, Values out of limits and Close buttons blue outline and blue text (as
   Select on the Alerts page); a ticked Show button keeps a light blue fill. The Timeline screen itself keeps its blue bar. */
html body .tlov22 main.page.dy97 > .dyh97:not(#z956a):not(#z956b){background:#fff!important;color:#111827!important;border-bottom:1px solid #e5e7eb}
html body .tlov22 main.dy97 .dyh97 h2:not(#z956a):not(#z956b){color:#111827!important}
html body .tlov22 main.dy97 .dyh97 :is(.sub, .shw97, .shw97 .small):not(#z956a):not(#z956b){color:#4b5563!important}
html body .tlov22 main.dy97 .dyh97 .btn:not(#z956a):not(#z956b){background:#fff!important;color:#1E40AF!important;border:1px solid #1E40AF!important;font-weight:700}
html body .tlov22 main.dy97 .dyh97 .btn[aria-pressed="true"]:not(#z956a):not(#z956b){background:#e8eefc!important}
html body .tlov22 main.dy97 .dyh97 .btn:hover:not(#z956a):not(#z956b){background:#eef2ff!important}