/* next build (after 24 Oct): web styles (Q703, Q704, Q707, Q708) */

/* ---------- Q703 (Sam 24 Oct 09:03, Option A) alert icons right before the alert name (n25.js alIcon25): 22 px on the alert lists,
   26 px in Alert details; each glyph in the colour of its kind ---------- */
html body .i25:not(#z703){display:inline-flex;gap:1px;align-items:center;vertical-align:middle;margin-right:6px;flex:0 0 auto;line-height:1}
html body .i25 svg:not(#z703){width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
html body .swal2-popup .i25 svg:not(#z703){width:26px;height:26px}
html body .i25 .i25co:not(#z703){font:700 10px/1.2 var(--sans);border:2px solid currentColor;border-radius:4px;padding:0 2px}
.i25 .i25-water{color:#2563eb} .i25 .i25-cold{color:#0891b2} .i25 .i25-hot{color:#dc2626} .i25 .i25-fire{color:#ea580c}
.i25 .i25-grey{color:#475569} .i25 .i25-oil{color:#92400e} .i25 .i25-gas{color:#1d4ed8} .i25 .i25-ok{color:#15803d}
:is(html[data-mode="dark"], .lvp-dark) .i25 .i25-water{color:#60a5fa} :is(html[data-mode="dark"], .lvp-dark) .i25 .i25-cold{color:#22d3ee}
:is(html[data-mode="dark"], .lvp-dark) .i25 .i25-hot{color:#f87171} :is(html[data-mode="dark"], .lvp-dark) .i25 .i25-fire{color:#fb923c}
:is(html[data-mode="dark"], .lvp-dark) .i25 .i25-grey{color:#94a3b8} :is(html[data-mode="dark"], .lvp-dark) .i25 .i25-oil{color:#d97706}
:is(html[data-mode="dark"], .lvp-dark) .i25 .i25-gas{color:#60a5fa} :is(html[data-mode="dark"], .lvp-dark) .i25 .i25-ok{color:#4ade80}

/* ---------- Q704 (Sam 24 Oct 09:03 + 12:25, refines Q639): the alert name navy #1e3a8a and about 10% bigger on the main Alerts screen
   (All / Open: the alert tree, alerttree.js; Alert history) and the Live pop-up All alerts tab ---------- */
html body .at21 .at21-nm:not(#z48):not(#z704){color:#1e3a8a;font-size:16.5px}
html body .at21 .at21-an:not(#z48):not(#z704),html body .hrow .hh>b:not(#z48):not(#z704){color:#1e3a8a;font-size:1.1em}
html[data-mode="dark"] body .at21 :is(.at21-an,.at21-nm):not(#z48):not(#z704),html body .lvp-dark .at21 :is(.at21-an,.at21-nm):not(#z48):not(#z704),
html[data-mode="dark"] body .hrow .hh>b:not(#z48):not(#z704){color:#a9c1ff}

/* ---------- Q707 FINAL (Sam 24 Oct 09:27, Option A) Live pop-up: the Fuel / Cycle rem / Aqua setpoint / Ignition failures since 5 am tiles
   get a thin grey border, white inside, in 4 equal columns ---------- */
html body .lv48 .four48:not(#z707){grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
html body .lv48 .four48 > .f48:not(#z707){border:1px solid var(--g50l,#cbd5e1);border-radius:8px;padding:8px 12px;background:var(--surface,#fff)}
@media (max-width:640px){html body .lv48 .four48:not(#z707){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Q696 (v358) Buildings > Apts: the pop-up at its final width (686 px) from the first frame ---------- */
html body .swal2-popup.swp.ap50:not(#z47):not(#z48):not(#z696){width:min(686px,calc(100vw - 24px))!important}

/* ---------- Q708 FINAL (Sam 24 Oct 09:27 "New") Live pop-up: the boiler diagram panel gets the room; the Boilers table only as wide as it
   needs (one window wide or less: one column, as before). Q717: Watch too ---------- */
html body .lv48 .full48.pr48:not(#z708){grid-template-columns:minmax(0,1fr) max-content}
html body .lv48 .blrs48 table.t48:not(#z48):not(#z708){width:auto}
html body .lv48 .blrs48 table.t48 :is(th,td):not(#z48):not(#z708){white-space:nowrap}
@media (max-width:1100px){html body .lv48 .full48.pr48:not(#z708){grid-template-columns:minmax(0,1fr)}html body .lv48 .blrs48 table.t48:not(#z48):not(#z708){width:100%}}

/* ---------- Q717 (Sam 24 Oct 14:17 YES, sample "Web Heat Plant") Live pop-up and Watch heat plant (live.js lvPlant717): pipes top and
   bottom, every value in the boiler, inside the Heat plant card without the grey room frame ---------- */
html body .lv48 svg.p7:not(#z717){width:100%;height:auto;display:block;max-width:none}
.p7 text{font-family:var(--sans);fill:var(--fg)}
.p7 .p7-lab{font:600 14px var(--sans);letter-spacing:.07em;fill:var(--label)}
.p7 .p7-sm{font-size:14px;fill:var(--muted)} .p7 .p7-val{font:700 16px var(--sans);fill:var(--fg)}
.p7 .p7-rk{font-size:15px;fill:var(--muted)} .p7 .p7-rv{font:600 15px var(--sans);fill:var(--fg)}
.p7 .p7-big{font:700 44px var(--sans);fill:var(--fg)} .p7 .p7-mid{font:700 24px var(--sans);fill:var(--fg)}
.p7 .p7-st{font:600 16px var(--sans);fill:var(--acc)} .p7 .p7-st.off{fill:var(--muted)} .p7 .bad{fill:var(--crit)!important}
.p7 .p7-blr{fill:var(--surface);stroke:var(--line);stroke-width:1.5} .p7 .p7-blr.on{stroke:var(--acc);stroke-width:2.2} .p7 .p7-blr.trip{stroke:var(--crit);stroke-width:2.2}
.p7 .p7-dhw{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.p7 .p7-stack{fill:var(--surface2);stroke:var(--line)} .p7 .p7-sep{stroke:var(--line);stroke-width:1;opacity:.6}
.p7 .dg-pipe{stroke-width:6}