/* ============================================================
   Gantry web — Collaborator network      person profile → Collaborators
   Layout + motion for surfaces/web/network.jsx. Tokens only; the canvas
   reads the same tokens through getComputedStyle rather than carrying
   colours of its own.
   ============================================================ */

.cg-net-card { margin-bottom: 14px; overflow: hidden; }

.cg-net-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.cg-net-lede {
  margin: 6px 0 0; max-width: 46ch;
  font-family: var(--font-serif); font-size: 14px; line-height: 1.45;
  color: var(--fg-2);
}
.cg-net-counts {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  font-size: 11px; color: var(--fg-3); text-align: right;
}
.cg-net-cap { color: var(--fg-4); }

.cg-net-body {
  display: grid; grid-template-columns: 216px minmax(0, 1fr);
  align-items: stretch;
}
@media (max-width: 860px) {
  .cg-net-body { grid-template-columns: minmax(0, 1fr); }
  .cg-net-rail { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Companion rail ---------- */
.cg-net-rail {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 14px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.cg-net-switch {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; color: var(--fg-2); cursor: pointer;
}
.cg-net-find .cg-input { width: 100%; }

.cg-net-members {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  /* Matches the stage, so the rail and the drawing end on the same line
     however many people are in the set. */
  max-height: 300px; overflow-y: auto;
  border-top: 1px solid var(--line);
}
.cg-net-member {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 2px; min-width: 0;
  border-bottom: 1px solid var(--line);
  transition: background .14s var(--ease);
}
.cg-net-member[data-hover="true"] { background: var(--bg-hover); }
.cg-net-member-tick {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 12px; color: var(--fg-2); cursor: pointer;
}
.cg-net-member-tick input { accent-color: var(--brand); flex: none; }
.cg-net-member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-net-member-n { font-size: 10.5px; color: var(--fg-4); flex: none; }
.cg-net-member-none { padding: 10px 2px; font-size: 11.5px; color: var(--fg-4); }

/* ---------- Stage ---------- */
.cg-net-stage {
  position: relative; display: flex; flex-direction: column;
  min-width: 0; padding: 10px 10px 8px;
}
/* A fixed stage height, not an aspect ratio: the drawable radius is
   min(width, height)/2, so a stage that grows with the viewport width would
   leave the ring the same size inside an ever-emptier box. */
.cg-net-canvas-wrap { flex: 1 1 auto; height: 460px; }
.cg-net-canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 860px) { .cg-net-canvas-wrap { height: 380px; } }
.cg-net-loading {
  flex: 1 1 auto; height: 460px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 14px; color: var(--fg-3);
  /* A slow breath rather than a spinner: the wait is short and a spinner
     over an empty stage reads as an error state. */
  animation: cg-net-breathe 1.9s var(--ease) infinite;
}
@keyframes cg-net-breathe {
  0%, 100% { opacity: .45; }
  50%      { opacity: .9; }
}
.cg-net-hint {
  text-align: center; padding: 4px 0 2px;
  font-size: 10.5px; color: var(--fg-4);
}

/* ---------- Nothing to draw ---------- */
.cg-net-empty { margin-bottom: 14px; }
.cg-net-empty-body {
  margin: 8px 0 0; max-width: 52ch;
  font-family: var(--font-serif); font-size: 14px; line-height: 1.5;
  color: var(--fg-2);
}

@media (prefers-reduced-motion: reduce) {
  .cg-net-loading { animation: none; opacity: .7; }
  .cg-net-member { transition: none; }
}