/* Info ("i") buttons and popup - shared by every Argos 2.0 page. Same look as the WaterStation HMI.
   Edit here only; do not copy these rules into a page. */
.info-btn {
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%;
  background:rgba(88,166,255,.15); border:1px solid rgba(88,166,255,.5); color:var(--blue);
  font:italic 800 10px/1 Georgia,serif; cursor:pointer; flex-shrink:0; vertical-align:middle; margin-left:5px;
  user-select:none; padding:0;
}
.info-btn:hover, .info-btn:focus-visible { background:rgba(88,166,255,.3); outline:none; }
.info-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:1000; align-items:center; justify-content:center; padding:16px; }
.info-overlay.open { display:flex; }
.info-popup { background:var(--surf); border:1px solid var(--border); border-radius:12px; padding:20px 22px; width:480px; max-width:100%;
  max-height:80vh; overflow-y:auto; position:relative; box-shadow:0 8px 32px rgba(0,0,0,.6); }
.info-popup-title { font-size:13px; font-weight:800; color:var(--blue); margin-bottom:14px; padding-right:24px; letter-spacing:.04em; text-transform:uppercase; }
.info-popup-close { position:absolute; top:14px; right:16px; background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; line-height:1; padding:2px 6px; }
.info-popup-close:hover { color:var(--text); }
.info-row { margin-bottom:12px; }
.info-row-label { font-size:10px; font-weight:800; color:var(--blue); letter-spacing:.06em; margin-bottom:3px; text-transform:uppercase; }
.info-row-body { font-size:12px; color:var(--text2, var(--text)); line-height:1.6; }
.info-row-body code, .info-formula { font-family:ui-monospace,Consolas,monospace; font-size:11px; background:var(--surf2); border:1px solid var(--border); border-radius:5px; padding:1px 5px; }
.info-formula { display:block; padding:6px 9px; margin:5px 0 2px; line-height:1.6; }
.info-note { font-size:11px; color:var(--yellow); margin-top:8px; line-height:1.5; }
.info-popup a { color:var(--blue); }
/* hiding every information button (the gear menu) is html.info-off in theme.css */