/* One shared layout for the connection strip on every public page. */
body:is(.reference-site,.reference-shared) .topline {
 display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
 column-gap:24px; row-gap:10px; min-height:58px; padding:12px 24px;
 font-size:18px; line-height:1.5;
}
body:is(.reference-site,.reference-shared) .topline>.connection-status {
 display:inline-flex; align-items:center; gap:10px; min-width:0; max-width:100%;
}
body:is(.reference-site,.reference-shared) .topline .connection-status #connection-icon {
 display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px;
 margin:0!important;
}
body:is(.reference-site,.reference-shared) .topline .connection-status #connection-icon svg { display:block; width:22px; height:22px; }
body:is(.reference-site,.reference-shared) .topline .connection-status #connection-icon:empty { display:none; }
body:is(.reference-site,.reference-shared) .topline #connection-label { min-width:0; margin:0; text-align:left; }
body:is(.reference-site,.reference-shared) .topline #connection-place { display:inline-flex; align-items:center; gap:8px; margin:0; }
body:is(.reference-site,.reference-shared) .topline #connection-place[hidden] { display:none; }
body:is(.reference-site,.reference-shared) .topline #connection-more { margin:0!important; white-space:nowrap; }
@media(max-width:600px) {
 body:is(.reference-site,.reference-shared) .topline { font-size:14px; padding:12px 16px; column-gap:16px; row-gap:8px; }
 body:is(.reference-site,.reference-shared) .topline>.connection-status { width:100%; justify-content:center; gap:8px; }
}