/* ---- the network view and the person panel. Loaded last: these rules
   replace the old floating thin-type controls with the shared top bar,
   a role row in the site's tab style, and a plain panel. No boxes. ---- */

/* the network chrome: a fixed bar plus the role row under it */
.ui { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: block; padding: 0; background: transparent; border: 0;
  overflow: visible; font-family: var(--cp-sans); font-weight: 400; letter-spacing: 0; text-transform: none; pointer-events: none; }
.ui > * { pointer-events: auto; }
.ui .netbar { position: relative; }
.ui .netbar .cpwordmark { background: transparent; border: none; padding: 0; cursor: pointer; flex: none; white-space: nowrap; color: var(--cp-ink);
  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", var(--cp-sans); font-size: 21px; font-weight: 700; letter-spacing: -.035em; text-transform: lowercase; }
.ui .netbar .cpnav button { letter-spacing: 0; text-transform: none; }
.ui .netbar .authslot .authbtn { font-family: var(--cp-sans); font-size: 14px; font-weight: 400; color: #444; letter-spacing: 0; text-transform: none; padding: 8px 6px; }
.ui .netold { display: none; }
.ui .netroles { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px 22px; width: max-content; max-width: 100%; box-sizing: border-box; }
.ui .netroles::-webkit-scrollbar { display: none; }
.ui .netroles button { flex: none; background: transparent; border: none; border-radius: 0; font-family: var(--cp-sans); font-size: 14px; font-weight: 400;
  color: #555; letter-spacing: 0; text-transform: none; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.ui .netroles button:hover { color: var(--cp-ink); }
.ui .netroles button.on { color: var(--cp-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ui .count { position: fixed; left: 22px; bottom: 16px; font-size: 12px; letter-spacing: 0; color: #737373; text-shadow: 0 0 4px #fff, 0 0 4px #fff; }
.ui .types { position: fixed; right: 22px; bottom: 16px; font-size: 12px; letter-spacing: 0; color: #555; text-shadow: 0 0 4px #fff, 0 0 4px #fff; }
.ui .types:hover { color: var(--cp-ink); }
#legend { right: 22px; bottom: 42px; border: 0; padding: 12px 14px; font-family: var(--cp-sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: #444; background: rgba(255, 255, 255, .95); }
#legend .sw { border-radius: 50%; }
#legend .row { padding: 3px 0; }

/* ---- the person panel, from the network and the wall ---- */
body #panel { width: 380px; padding: 22px 24px 32px; background: #fff; backdrop-filter: none; border-left: 1px solid var(--cp-rule); color: #333; font-family: var(--cp-sans); }
body.view-network #panel { top: 52px; }
body #panel #closePanel { position: sticky; top: 0; float: right; z-index: 2; display: block; width: 32px; height: 32px; margin: -6px -8px 0 0; padding: 0;
  background: #fff; border: 0; border-radius: 50%; font-size: 0; letter-spacing: 0; color: var(--cp-ink); cursor: pointer; }
body #panel #closePanel::after { content: "\00d7"; font-family: var(--cp-sans); font-size: 26px; line-height: 32px; }
body #panel #closePanelBottom { display: none; }
body #panel .avatar { width: 72px; height: 72px; margin: 0 0 16px; border-radius: 50%; opacity: 1; }
body #panel h2 { font-family: var(--cp-sans); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--cp-ink); margin: 0; padding-right: 30px; }
body #panel .handle { font-size: 13px; letter-spacing: 0; color: #737373; margin-top: 6px; }
body #panel .handle a { color: var(--cp-ink); text-decoration: none; }
body #panel .bio { font-size: 14px; line-height: 1.55; color: #333; margin-top: 14px; }
body #panel .meta { font-size: 13px; letter-spacing: 0; color: #737373; margin-top: 12px; overflow-wrap: anywhere; }
body #panel .meta a { color: var(--cp-ink); }
body #panel .tag { display: inline-block; border: 0; padding: 0; margin: 14px 12px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-green); }
body #panel .addBtn { display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 18px 0 0; padding: 0; min-height: 32px; background: transparent; border: 0; border-radius: 0;
  font-family: var(--cp-sans); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--cp-green); cursor: pointer; }
body #panel .addBtn::after { content: "\2192"; }
body #panel .addBtn:hover { text-decoration: underline; text-underline-offset: 4px; }
body #panel h3 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-mute); margin: 28px 0 4px; padding-top: 18px; border-top: 1px solid var(--cp-rule); }
body #panel .connitem { gap: 12px; padding: 10px 0; margin: 0; border-bottom: 1px solid #ecebe9; align-items: flex-start; }
body #panel .connitem:hover { background: transparent; }
body #panel .connitem:hover .nm { text-decoration: underline; text-underline-offset: 3px; }
body #panel .connitem img { width: 36px; height: 36px; margin-top: 2px; }
body #panel .connitem .nm { font-size: 14px; font-weight: 700; color: var(--cp-ink); }
body #panel .connitem .hd { font-size: 12px; color: #737373; margin-top: 1px; }
body #panel .connitem .bb { font-size: 12px; color: #555; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 759px) {
  .ui { display: block; grid-template-columns: none; }
  .ui .netbar { padding: 10px 14px 8px; }
  .ui .netbar .cpwordmark .cp-full { display: none; }
  .ui .netbar .cpwordmark .cp-short { display: inline; }
  .ui .netbar .cpwordmark { font-size: 16px; }
  .ui .netroles { padding: 6px 8px; width: 100%; }
  .ui .netroles button { font-size: 13px; padding: 6px 8px; }
  body #panel { width: 100%; max-width: 100%; padding: 18px 18px 40px; border-left: 0; }
  /* phone: the panel is a full sheet over the bar, closed by its own × */
  body.view-network #panel { top: 0; z-index: 12; }
  body #panel #closePanel { display: block; }
  body #panel #closePanelBottom { display: none; }
}

.ui .types, #legend, .ui .count { display: none !important; }
#graph { background: #fff; }