/* Q908 (Sam 29 Oct): screen help. The "?" opens this panel on the right; numbered markers sit on each part of the screen. */
/* the room for the panel is made on #app, never on <body>: SweetAlert2 saves the body's padding-right when a dialog opens and writes it back
   when it closes, which left the page narrow after the help was closed (Sam 30 Oct) */
body.hp908on #app,body.hp908on #app22u{padding-right:400px}
.hp908{position:fixed;top:0;right:0;bottom:0;width:400px;z-index:9000;background:var(--bg,#fff);color:var(--fg,#0f172a);border-left:2px solid #1E40AF;display:flex;flex-direction:column;font-size:14px;line-height:1.45}
.hp908 header{background:#1E40AF;color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px}
.hp908 header h2{margin:0;font-size:17px;flex:1;color:#fff}
.hp908 header button{background:#fff;color:#1E40AF;border:0;border-radius:6px;padding:4px 12px;font:600 14px inherit;cursor:pointer}
.hp908 .in{padding:14px 16px 30px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.hp908 .lead{margin:0 0 6px;font-size:15px}
.hp908 details{border:1px solid var(--line,#d9deea);border-radius:8px}
.hp908 summary{cursor:pointer;padding:9px 12px;display:flex;align-items:center;gap:10px;font-weight:600;list-style:none}
.hp908 summary::-webkit-details-marker{display:none}
.hp908 summary::after{content:"\25BE";margin-left:auto;color:var(--muted,#55607a)}
.hp908 details[open] summary::after{content:"\25B4"}
.hp908 .num,.mk908{width:22px;height:22px;border-radius:50%;background:#1E40AF;color:#fff;font:700 12px/22px system-ui,sans-serif;text-align:center;flex:none}
.hp908 .bd{padding:0 12px 10px 44px}
.hp908 .bd p{margin:0 0 6px}
.hp908 .bd ul{margin:0 0 6px;padding-left:18px}
.hp908 table{border-collapse:collapse;font-size:13px;width:100%}
.hp908 td{border-top:1px solid var(--line,#d9deea);padding:4px;vertical-align:top}
.hp908 td:first-child{font-weight:700;white-space:nowrap}
.mk908{position:fixed;z-index:8999;border:2px solid #fff;box-sizing:content-box;pointer-events:none}   /* clicks go through to the control under it */
.fl908{outline:3px solid #1E40AF !important;outline-offset:3px}
@media (max-width:900px){
  body.hp908on #app,body.hp908on #app22u{padding-right:0}
  .hp908{top:auto;left:0;width:auto;height:62vh;border-left:0;border-top:2px solid #1E40AF}
}
/* Real-Time and Live open full screen (fs42) with no top bar, so their "?" sits left of Close; the bars keep room for both */
#hp908q{position:fixed;top:8px;right:122px;z-index:2000;width:32px;height:32px;border-radius:50%;border:2px solid #fff;background:#1E40AF;color:#fff;font:800 16px/1 system-ui,sans-serif;cursor:pointer;padding:0}
#hp908q:hover,#hp908q.on{background:#fff;color:#1E40AF}
#hp908q[hidden]{display:none}
body.hp908on #hp908q{z-index:9001;right:412px}   /* stays clickable left of the open panel */
@media (max-width:900px){body.hp908on #hp908q{right:122px}}
html.fs42 body .rt-strip:not(#z908),html.fs42 body main.page.la .la-h:not(#z908),html.fs42 body main.page.dy97 .dyh97:not(#z908){padding-right:166px!important}
/* the building live screen: its "?" sits in its title bar left of the x; the open panel keeps the screen beside it */
.hp908l{width:30px;height:30px;border-radius:50%;border:2px solid currentColor;background:transparent;color:inherit;font:800 15px/1 system-ui,sans-serif;cursor:pointer;padding:0;flex:none}
.hp908l:hover,.hp908l.on{background:#fff;color:#1E40AF;border-color:#fff}
body.hp908on .lvp{right:400px}
@media (max-width:900px){body.hp908on .lvp{right:0}}