/* People, network and discovery. Uses the tokens and base classes from app.css. */

/* ---------- Contact cards ---------- */

.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s3); }

.contact {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}
.contact.is-active { box-shadow: inset 3px 0 0 var(--signal); }
.contact[draggable="true"] { cursor: grab; }
.contact[draggable="true"]:active { cursor: grabbing; }

.contact-main { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
a.contact-main:hover .contact-name-text { text-decoration: underline; text-underline-offset: 3px; }
.contact-text { display: flex; flex-direction: column; min-width: 0; }
.contact-name { display: flex; align-items: center; min-width: 0; font-weight: 600; }
.contact-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-name .verified { flex: none; }
.contact-sub { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.contact-actions { display: flex; align-items: center; gap: 2px; padding-top: var(--s2); border-top: 1px solid var(--line); }
.contact-actions .is-danger { margin-left: auto; }
.icon-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.icon-btn[aria-disabled="true"]:hover { background: none; color: var(--ink-2); }
a.icon-btn { text-decoration: none; }

/* ---------- Network page ---------- */

.network-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s4); align-items: start; }
.network-layout > aside { position: sticky; top: calc(var(--bar-h) + var(--s3)); max-height: calc(100vh - var(--bar-h) - var(--s5)); overflow-y: auto; }
.search .input { padding-right: 38px; }
.search .input::-webkit-search-cancel-button { display: none; }
.search-clear { position: absolute; right: 3px; top: 3px; }
.search .search-clear .icon { position: static; color: inherit; pointer-events: auto; }

.groups-title, .filter-title { font-size: 18px; }

.group { display: flex; flex-direction: column; gap: var(--s2); padding: 12px; border: 1px solid var(--line); border-radius: var(--r1); }
.group.is-drop { border-color: var(--signal); background: var(--signal-soft); }
.group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-width: 0; }
.group-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 15px/1.2 var(--body);
  text-align: left;
  cursor: pointer;
}
.group-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-name .icon { color: var(--ink-3); }
.group-name:hover .icon { color: var(--ink); }
.input.group-input { height: 30px; padding: 0 8px; font-size: 14px; font-weight: 600; }
.group-members { display: flex; flex-wrap: wrap; gap: 6px; }
.group p { margin: 0; }

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 28px;
  padding: 0 2px 0 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r1);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
}
.member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
.member-chip button:hover { background: var(--sunken); color: var(--bad); }

/* ---------- Member profile ---------- */

.profile-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.profile-id { display: flex; flex-direction: column; gap: var(--s2); flex: 1 1 260px; min-width: 0; }
.profile-id h1 { overflow-wrap: anywhere; }
.profile-id h1 .verified { vertical-align: 0; }
.profile-counts { margin: 0; }
.profile-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: 320px; }
.profile-about { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Discovery ---------- */

.chip-split { display: inline-flex; }
.chip-split .chip:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.chip-split .chip-more { margin-left: -1px; padding: 0 6px; border-top-left-radius: 0; border-bottom-left-radius: 0; color: var(--ink-2); }
.chip-split .chip:focus-visible { position: relative; z-index: 1; }
.filter-summary { margin: 0; }

.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); }
.partner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}
.partner:hover { border-color: var(--line-strong); }
.partner-link { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.partner-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r2); }
.partner-link:focus-visible { outline: none; }
.partner-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.partner-layer { position: relative; z-index: 1; }
.partner-common { display: flex; align-items: center; }
.partner-actions { margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--line); }

/* ---------- Invitation page ---------- */

.invite-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.invite-card p { margin: 0; }
.invite-pair { display: flex; align-items: center; gap: var(--s3); color: var(--ink-3); }
.bare > .page-narrow { padding-top: var(--s6); }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .network-layout { grid-template-columns: minmax(0, 1fr); }
  .network-layout > aside { position: static; max-height: none; }
}

@media (max-width: 860px) {
  .contact-grid, .partner-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .profile-head { align-items: flex-start; gap: var(--s3); }
  .profile-actions { max-width: none; width: 100%; }
}

@media (max-width: 460px) {
  .contact-grid, .partner-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Home shortcuts, profile settings (these pages have no stylesheet of their own) ---------- */

.home-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.home-quick-link { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); color: inherit; text-decoration: none; }
.home-quick-link:hover { border-color: var(--ink); }
.home-quick-link .icon { color: var(--ink-2); }
.home-quick-text { display: flex; flex-direction: column; min-width: 0; }
.home-quick-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-pill-link { color: inherit; text-decoration: none; }
.home-pill-link:hover { border-color: var(--ink); }

.notify-group { margin: 0; padding: var(--s3) 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.notify-group legend { padding: 0 var(--s2) 0 0; font-weight: 600; float: left; width: 100%; margin-bottom: var(--s2); }
.notify-group > div { clear: both; }
.tfa-row { align-items: flex-start; }
label.btn.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }

.partner-facts { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-chip button { width: 28px; height: 28px; border-radius: var(--r1); }
.member-chip { height: 32px; }

@media (max-width: 860px) {
  .home-quick { grid-template-columns: minmax(0, 1fr); }
}